/* Jon Tobia · Psicólogo — estilos comunes.
   Diseño original: Claude Design, "A · Serena v5". Convertido a CSS estático. */

/* Tipografías alojadas en el propio dominio (sin enviar IPs a Google). SIL Open Font License. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/hanken-grotesk-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/source-serif-4-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-latin-400-italic.woff2) format('woff2')}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FBF4EB;color:#2E2924;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#2E2924;text-underline-offset:4px}
a:hover{color:#6E5F52}
:focus-visible{outline:2px solid #2E2924;outline-offset:3px;border-radius:6px}
::selection{background:#F0D2B8}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.serif{font-family:'Source Serif 4',serif;font-style:italic}

/* Saltar al contenido */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#A9562A;color:#FFF8F2;padding:12px 20px;border-radius:999px;text-decoration:none}
.skip:focus{top:16px;color:#FFF8F2}

/* Visibilidad por tamaño de pantalla (el diseño cambia a móvil por debajo de 860 px) */
@media (max-width:859.98px){.desk{display:none!important}}
@media (min-width:860px){.mob{display:none!important}}
@media (max-width:1059.98px){.wide{display:none!important}}

@media (max-width:420px){.hdr{gap:12px!important}}

/* Botones y enlaces con estado */
.btn{display:inline-block;background:#A9562A;color:#FFF8F2;text-decoration:none;padding:16px 28px;border-radius:999px;font-weight:500;border:0;font:inherit;font-weight:500;cursor:pointer;transition:transform 220ms cubic-bezier(.22,1,.36,1),background 220ms ease}
.btn:hover{transform:translateY(-2px);color:#FBF4EB;background:#8C491A}
.btn:active{transform:scale(.97)}
.btn-sm{padding:10px 20px;font-size:14px}
.lift{transition:translate 450ms cubic-bezier(.22,1,.36,1),box-shadow 450ms cubic-bezier(.22,1,.36,1),opacity 800ms cubic-bezier(.22,1,.36,1),transform 900ms cubic-bezier(.22,1,.36,1)}
.lift:hover{translate:0 -6px;box-shadow:0 18px 40px rgba(46,41,36,.08)}
.chip{transition:background 300ms ease,color 300ms ease,border-color 300ms ease,transform 220ms cubic-bezier(.22,1,.36,1)}
.chip:hover{transform:translateY(-2px)}
.chip:active{transform:scale(.96)}

/* Fotos con el mismo tratamiento de color del diseño */
.ph{width:100%;height:100%;object-fit:cover;filter:saturate(.8) sepia(.14) brightness(1.03) contrast(.96)}

/* Portada */
.hero-media{padding-bottom:48px}
.hero-photo{aspect-ratio:4/5}
@media (max-width:859.98px){.hero-media{padding-bottom:0}.hero-photo{aspect-ratio:4/3}}

/* Acordeones nativos (servicios y áreas en móvil) */
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details .plus{transition:transform 300ms cubic-bezier(.22,1,.36,1)}
details[open] .plus{transform:rotate(45deg)}

/* Cómo trabajo (escritorio): pasos ligados al scroll */
.proc{position:relative;height:420vh;background:#F5E8D7}
.proc-img{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity 900ms cubic-bezier(.22,1,.36,1),transform 1400ms cubic-bezier(.22,1,.36,1)}
.proc-img.on{opacity:1;transform:scale(1)}
.proc-step>button{color:#6E5F52}
.proc-step.on>button{color:#2E2924}
.js .proc-step:not(.on) .proc-text{display:none}
@media (prefers-reduced-motion: reduce){.proc-img{transition:none;transform:none}}
/* Sin JavaScript, la sección no se queda fija y se ven todos los pasos */
html:not(.js) .proc{height:auto}
html:not(.js) .proc-sticky{position:relative!important;height:auto!important}
html:not(.js) .proc-img:first-child{opacity:1;transform:none}

/* Juegos: rejilla en escritorio, carrusel en móvil */
.games{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.fn-row{display:flex;flex-wrap:wrap;gap:8px;scrollbar-width:none}
@media (max-width:859.98px){
  .games{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * clamp(20px,5vw,64px));padding:0 clamp(20px,5vw,64px) 8px;scroll-padding:0 clamp(20px,5vw,64px);scrollbar-width:none}
  .fn-row{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * clamp(20px,5vw,64px));padding:0 clamp(20px,5vw,64px) 8px;scroll-padding:0 clamp(20px,5vw,64px)}
  .game.off{display:none!important}
}
.game-card{transition:opacity 450ms cubic-bezier(.22,1,.36,1),transform 450ms cubic-bezier(.22,1,.36,1),filter 450ms ease,translate 450ms cubic-bezier(.22,1,.36,1),box-shadow 450ms cubic-bezier(.22,1,.36,1)}
.game-card:hover{translate:0 -6px;box-shadow:0 18px 40px rgba(46,41,36,.08)}
.game.off .game-card{opacity:.32;transform:scale(.97);filter:grayscale(.7)}
.age{background:#F5E8D7;color:#A9562A;transition:background 450ms ease,color 450ms ease,transform 500ms cubic-bezier(.34,1.56,.64,1)}
.game.lit .age{background:#A9562A;color:#FFF8F2;transform:scale(1.08)}
.fn-tag{border:1.5px solid #EEDFCB;background:transparent;color:#2E2924;transition:background 300ms ease,color 300ms ease,border-color 300ms ease}
.fn-tag.on{background:#A9562A;color:#FFF8F2;border-color:#A9562A}
.fn-chip{border:1.5px solid #EEDFCB;background:#FFFFFF;color:#2E2924}
.fn-chip .cnt{color:#6E5F52}
.fn-chip[aria-pressed="true"]{background:#2E2924;color:#FBF4EB;border-color:#2E2924}
.fn-chip[aria-pressed="true"] .cnt{color:#F0D2B8}

/* Formularios */
.field{min-height:52px;padding:12px 20px;border-radius:999px;border:1.5px solid #9A8878;background:#FFFFFF;font:inherit;color:#2E2924;width:100%}
textarea.field{border-radius:20px;padding:16px 20px;resize:vertical}

/* Páginas de texto (legales) */
.prose{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,96px) clamp(20px,5vw,64px)}
.prose h1{font-weight:300;font-size:clamp(36px,5vw,56px);line-height:1.1;letter-spacing:-0.01em;margin:0 0 24px}
.prose h2{font-weight:400;font-size:22px;line-height:1.3;margin:40px 0 12px}
.prose p,.prose li{max-width:40em}
.prose .pend{background:#F8DCCD;padding:0 6px;border-radius:6px}