/* Camerino de Emociones · estilos. Diseño antiguo (web de Hostinger), ver DESIGN.md. */
@font-face{font-family:"Libre Caslon Display";src:url(/fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --fondo:#FFFFFF; --crema:#FBF8F5; --banda:#F0E7DE; --gris:#F1F0EE;
  --tinta:#1D1E20; --tinta-2:#4A4A43;
  --bronce:#A3672E; --bronce-osc:#8A5523; --beige:#EBDCCD; --linea:#E3D5C7;
  --ancho:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 1rem/1.6 "Nunito",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--bronce);text-underline-offset:3px}
a:hover{color:var(--bronce-osc)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--bronce);outline-offset:3px}
h1,h2,h3{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;line-height:1.25;margin:0 0 .5em;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.6vw,5rem);color:var(--bronce)}
h2{font-size:clamp(1.9rem,4vw,3.4rem);color:var(--bronce);margin-top:1.2em}
h3{font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--tinta)}
p{margin:0 0 1em}
strong{font-weight:700}
.saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:.6em 1em;z-index:20}
.saltar:focus{left:1rem}

/* franja superior */
.franja{text-align:center;padding:.45rem 1rem;background:var(--fondo);font-size:.875rem;font-weight:700;letter-spacing:.04em}
.franja a{text-decoration:none;color:var(--bronce)}
.franja a:hover{text-decoration:underline}

/* cabecera */
.cab{background:rgba(255,255,255,.97);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{display:block;line-height:0}
.marca img{width:72px;height:72px}
.cab ul{list-style:none;margin:0;padding:0;display:flex;gap:1.8rem;align-items:center}
.cab nav a{color:var(--tinta-2);text-decoration:none;font-size:1rem}
.cab nav a:hover{color:var(--bronce)}
.cab nav a[aria-current=page]{color:var(--bronce)}
/* E3 · subrayado que crece desde el centro (Cerebro Web 23 D8) */
.nav-escritorio>ul>li>a:not(.btn),.nav-escritorio .desp>summary{background:linear-gradient(currentColor,currentColor) 50% calc(100% - 4px)/0 1px no-repeat;transition:background-size .3s cubic-bezier(.23,1,.32,1),color .2s}
.nav-escritorio>ul>li>a:not(.btn):hover,.nav-escritorio>ul>li>a[aria-current=page],.nav-escritorio .desp>summary:hover,.nav-escritorio .desp>summary.actual{background-size:100% 1px}
.nav-escritorio>ul>li>a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
.cab nav a.btn{color:var(--bronce-osc)}
.menu{display:none}
.menu>summary{cursor:pointer;list-style:none;font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bronce-osc);padding:.7em 1.1em;border:1px solid var(--bronce)}
.menu summary::-webkit-details-marker{display:none}
@media (max-width:900px){
  .nav-escritorio{display:none}
  .menu{display:block;position:relative}
  .marca img{width:60px;height:60px}
  .menu[open] nav{position:absolute;right:0;top:calc(100% + .5rem);background:var(--fondo);border:1px solid var(--linea);border-top:2px solid var(--bronce);padding:1rem 1.2rem;box-shadow:0 12px 30px rgba(29,30,32,.10);min-width:min(300px,calc(100vw - 2rem));z-index:2}
  .menu ul{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* desplegable de Terapias: <details>, se abre por clic */
.desp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45em;font-size:1rem;color:var(--tinta-2);min-height:44px}
.desp>summary::-webkit-details-marker{display:none}
.desp>summary::after{content:"";border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform .2s}
.desp[open]>summary::after{transform:rotate(180deg)}
.desp>summary:hover,.desp>summary.actual{color:var(--bronce)}
.cab .desp-lista{display:block}
.desp-lista a{display:block;padding:.7rem .8rem;line-height:1.35}
.cab nav .desp-lista a:hover{background:var(--crema);color:var(--bronce)}
.cab nav .desp-lista a[aria-current=page]{text-decoration:none;background:var(--crema);color:var(--bronce)}
.desp-todas{border-bottom:1px solid var(--linea);margin-bottom:.3rem;padding-bottom:.3rem}
/* clic fuera = cerrar: el ::before del summary cubre la pantalla mientras está abierto */
.nav-escritorio .desp[open]>summary::before,.menu[open]>summary::before{content:"";position:fixed;inset:0;z-index:1;cursor:default}
.nav-escritorio .desp{position:relative}
.nav-escritorio .desp-lista{position:absolute;top:calc(100% + .4rem);left:-1rem;z-index:2;min-width:300px;background:var(--fondo);border:1px solid var(--linea);border-top:2px solid var(--bronce);box-shadow:0 12px 30px rgba(29,30,32,.10);padding:.5rem}
.menu .desp-lista{margin-top:.4rem;padding-left:.8rem;border-left:1px solid var(--bronce)}
.menu .desp-lista a{padding:.45rem .6rem}
@media (prefers-reduced-motion:no-preference){
  .desp[open] .desp-lista{animation:desp-entra .18s cubic-bezier(.2,.7,.2,1)}
  @keyframes desp-entra{from{opacity:0;transform:translateY(-4px)}}
}

/* botones: rectángulo con contorno bronce, mayúsculas espaciadas */
/* E2 · el bronce sube desde abajo al pasar el ratón (Cerebro Web 23 H3, hecho con background-size) */
.btn{display:inline-block;background-color:transparent;background-image:linear-gradient(var(--bronce),var(--bronce));background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;color:var(--bronce-osc);text-decoration:none;font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;padding:.95em 2em;border:1px solid var(--bronce);line-height:1.2;transition:background-size .35s cubic-bezier(.23,1,.32,1),color .25s;text-align:center}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:#fff}
.cab nav a.btn:hover{color:#fff}
.btn-lleno{background-color:var(--beige)}
.btn-mini{padding:.7em 1.3em;font-size:.8rem}
.botones{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0}
.centro .botones{justify-content:center}

/* bloques */
main{display:block}
.bloque{max-width:var(--ancho);margin:0 auto;padding:4rem 1rem}
.bloque-suave{max-width:none;background:var(--banda)}
.bloque-suave>*{max-width:calc(var(--ancho) - 2rem);margin-left:auto;margin-right:auto}
.estrecho{max-width:760px}
.centro{text-align:center}
.antetitulo{text-transform:uppercase;letter-spacing:.1em;font-size:.875rem;color:var(--bronce);margin-bottom:.9rem}
.entrada{font-size:1.125rem;color:var(--tinta)}
.centro .entrada{max-width:640px;margin-left:auto;margin-right:auto}

/* portada */
.heroe{max-width:var(--ancho);margin:0 auto;padding:3rem 1rem 4rem;display:grid;gap:2.5rem;align-items:center}
.heroe-txt{text-align:center}
.heroe h1{font-size:clamp(2.1rem,3.6vw,3.3rem)}
.heroe-txt .entrada{color:var(--bronce-osc)}
.heroe-txt .botones{justify-content:center}
@media (min-width:900px){.heroe{grid-template-columns:1.1fr .9fr;padding-top:4rem}}
.dos-col{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.dos-col{grid-template-columns:1fr 1fr}}

/* cuatro columnas con hoja (¿Qué es Camerino?) */
.dos{display:grid;gap:2rem}
@media (min-width:640px){.dos{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.dos.cuatro{grid-template-columns:repeat(4,1fr)}}
.dos h3{margin-top:.6rem}
.hoja{width:40px;height:46px;margin:0 0 .6rem;display:block}
.hoja path{fill:none;stroke:#878780;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.centro .hoja{margin-left:auto;margin-right:auto}
.bloque:not(.estrecho)>h2:first-child{text-align:center;margin-top:0}

/* tarjetas de terapia */
.rejilla{list-style:none;padding:0;margin:2rem auto;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tarjeta{background:var(--fondo);border:1px solid var(--linea);padding:1.6rem 1.5rem 1.3rem;display:flex;flex-direction:column;position:relative;transition:border-color .25s}
/* E5 · toda la tarjeta lleva a la terapia y la flecha avanza (Cerebro Web 23 E5) */
.tarjeta h3 a::after{content:"";position:absolute;inset:0}
.tarjeta:hover,.tarjeta:focus-within{border-color:var(--bronce)}
.tarjeta:focus-within{outline:2px solid var(--bronce);outline-offset:3px}
.tarjeta h3 a:focus-visible{outline:none}
.ver{margin:.9rem 0 0;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bronce-osc)}
.flecha{display:inline-block;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.tarjeta:hover .flecha,.tarjeta:focus-within .flecha{transform:translateX(.3rem)}
.tarjeta h3{font-size:1.45rem;margin-bottom:.5em}
.tarjeta h3 a{color:var(--tinta);text-decoration:none}
.tarjeta:hover h3 a{color:var(--bronce)}
.datos{font-weight:700;color:var(--bronce-osc);font-size:.95rem;margin:auto 0 0}

/* testimonios: centrados sobre la banda */
.citas{display:grid;gap:2rem}
@media (min-width:900px){.citas{grid-template-columns:repeat(3,1fr)}}
.cita{margin:0;text-align:center}
.cita blockquote{margin:0;font-size:1.125rem;line-height:1.65;font-style:italic}
.cita figcaption{margin-top:.8rem;font-weight:700;color:var(--bronce-osc)}

/* cabecera de página interior: banda gris con título centrado */
.cabecera-pag{background:var(--gris);text-align:center;padding:3rem 1rem 2.6rem}
.cabecera-pag h1{font-size:clamp(2rem,4.8vw,4rem);max-width:var(--ancho);margin:0 auto .4em}
.cabecera-pag .entrada{color:var(--bronce-osc);max-width:640px;margin:0 auto}
.migas{font-size:.875rem;color:var(--tinta-2);margin-bottom:1.2rem}
.migas a{color:var(--tinta-2)}

/* ficha de terapia */
.foto-terapia{margin:0;order:2}
@media (min-width:900px){.foto-terapia{order:0}}
.tras-citas{margin-top:2rem}
.foto-terapia img{width:100%;aspect-ratio:3/4;object-fit:cover}
.aviso-ia{font-size:.8rem;color:var(--tinta-2);margin:.5rem 0 0}
.ficha{display:grid;gap:0;margin:0 0 1.4rem;border-top:1px solid var(--bronce)}
.ficha div{display:grid;grid-template-columns:7rem 1fr;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--linea)}
.ficha dt{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--bronce-osc);padding-top:.2rem}
.ficha dd{margin:0}
.pasos{padding-left:1.3rem}
.pasos li{margin-bottom:.6rem}
.lista li{margin-bottom:.4rem}
.lista-enlaces{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding:0;list-style:none}
.faq details{border-bottom:1px solid var(--linea);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:.6rem 0 0}
.aviso-datos{font-size:.85rem;color:var(--tinta-2);margin-top:.75rem}
.aviso-datos a{color:inherit}
.nota{font-size:.9rem;color:var(--tinta-2);border-left:2px solid var(--bronce);padding-left:.9rem;margin-top:2rem}
.separador{border:0;border-top:1px solid var(--bronce);opacity:.5;max-width:var(--ancho);margin:0 auto}

/* tabla */
.tabla-env{overflow-x:auto;margin:1.5rem 0}
table{border-collapse:collapse;width:100%;min-width:560px;background:var(--fondo)}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{background:var(--banda);color:var(--tinta);font-weight:700}

/* contacto */
.contacto{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.9rem}
.contacto li{border:1px solid var(--linea);padding:1rem 1.2rem}
.contacto span{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bronce-osc)}
.legal mark{background:#ffe08a;padding:0 .3em}

/* botón flotante de WhatsApp (como en la web antigua) */
.wa-flotante{position:fixed;right:1.2rem;bottom:1.2rem;z-index:6;width:58px;height:58px;border-radius:50%;background:#1E7E45;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.wa-flotante:hover{background:#17663A}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

/* pie */
.pie{border-top:1px solid var(--linea);background:var(--crema);margin-top:3rem;padding:3rem 1rem 1.5rem}
.pie a{color:var(--tinta)}
.pie a:hover{color:var(--bronce)}
.pie-in{max-width:var(--ancho);margin:0 auto;display:grid;gap:2rem}
@media (min-width:800px){.pie-in{grid-template-columns:1.4fr 1fr 1fr}}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.35rem}
.pie-marca{font-family:"Libre Caslon Display",Georgia,serif;font-size:1.6rem;text-transform:uppercase;color:var(--bronce);margin-bottom:.3rem}
.pie-tit{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--bronce-osc)}
.pie-aviso{max-width:var(--ancho);margin:1.5rem auto 0;font-size:.85rem;color:var(--tinta-2)}

/* E4 · las preguntas se despliegan suaves (Cerebro Web 23 I1 y 12 §16.8). Donde no hay soporte, se abren como siempre */
@supports (interpolate-size: allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s cubic-bezier(.23,1,.32,1),content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* E1 · fundido corto al cambiar de página (Cerebro Web 12 §9). Firefox navega como siempre */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sale .2s cubic-bezier(.7,0,.84,0) both}
::view-transition-new(root){animation:vt-entra .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0}}
.cab{view-transition-name:cabecera}
.wa-flotante{view-transition-name:whatsapp}

/* E6 · la hoja se dibuja al llegar a ella · E7 · aparición suave al bajar (Cerebro Web 23 J1 y 12 §9).
   Solo con animation-timeline (CSS puro); donde no existe, todo se ve quieto. Nunca en la primera pantalla. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .hoja path{stroke-dasharray:1;animation:dibujar linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .rejilla>li,.citas>.cita,.dos>div{animation:aparece linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}
@keyframes dibujar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes aparece{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  @view-transition{navigation:none}
}