@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
src:url(/anton.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--coral:#ED594C;--coral-hondo:#D6412F;--coral-texto:#C43A29;--coral-claro:#F3A7A0;--gris:#505050;
--tinta:#212223;--claro:#EEEEEE;--linea:#E0E0E0;--texto:#5A5C5E;
--sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
/* neutros derivados, antes sueltos en el código */
--plata:#F7F7F7;--linea-suave:#EDEDED;--barra:#C9C9C9;--wa:#25D366;--wa-hondo:#0B7A5E;
/* escala tipográfica */
--t-xs:13px;--t-s:14.5px;--t-m:15.5px;--t-base:17px;--t-lg:19px;--t-xl:24px;
/* escala de espaciado */
--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;--e8:64px;--e9:96px;
/* radios concéntricos */
--r1:6px;--r2:10px;--r3:14px;--rp:100px;
/* profundidad por sombra, no por borde */
--s1:0 1px 2px rgba(33,34,35,.05),0 2px 8px rgba(33,34,35,.05);
--s2:0 2px 4px rgba(33,34,35,.06),0 12px 28px rgba(33,34,35,.10);
--s3:0 10px 30px rgba(33,34,35,.14);
/* movimiento */
--sal:cubic-bezier(.22,1,.36,1);--d1:.14s;--d2:.2s;--d3:.28s;
/* medida de lectura */
--medida:62ch}

*{box-sizing:border-box}
html{scrollbar-color:var(--barra) #fff;scrollbar-width:thin}
body{margin:0;background:#fff;color:var(--tinta);font-family:var(--sans);font-size:var(--t-base);
line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
caret-color:var(--coral-hondo);text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--coral-texto)}
::selection{background:var(--coral-claro);color:var(--tinta)}
:focus-visible{outline:2px solid var(--coral-hondo);outline-offset:2px;border-radius:2px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#fff}
::-webkit-scrollbar-thumb{background:var(--barra);border:3px solid #fff;border-radius:var(--rp)}
::-webkit-scrollbar-thumb:hover{background:#ADADAD}
/* área táctil de 44 px sin engordar el control */
.toque{position:relative}
.toque::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

.env{max-width:1120px;margin:0 auto;padding:0 30px}

/* ---------------------------------------------------------------- cabecera */
.cab{padding:var(--e5) 0 var(--e4)}
.cab .env{display:flex;align-items:flex-end;gap:var(--e5) var(--e6);flex-wrap:wrap}
.logo{line-height:1;text-decoration:none;display:block;color:inherit;
transition:opacity var(--d2) var(--sal)}
.logo b{font-family:"Anton",Impact,"Arial Black",sans-serif;
font-size:clamp(34px,7.4vw,54px);font-weight:400;color:var(--gris);display:block;line-height:.94;
letter-spacing:-.005em}
.logo b i{font-style:normal;color:var(--coral);margin-inline:-.01em}
.logo span{display:block;font-size:clamp(16px,3vw,22px);color:var(--texto);font-weight:400;
margin-top:var(--e1);letter-spacing:.005em}
.cab .hueco{flex:1;min-width:0}
.contacto{display:flex;align-items:flex-start;gap:var(--e5);flex-wrap:wrap}
.bloque-wa{display:flex;flex-direction:column;gap:var(--e1)}
.wa{display:inline-flex;align-items:center;gap:var(--e3);text-decoration:none;color:inherit;
border-radius:var(--rp);transition:transform var(--d1) var(--sal)}
.wa .circ{width:44px;height:44px;border-radius:var(--rp);background:var(--wa);display:flex;
align-items:center;justify-content:center;flex:none;box-shadow:var(--s1);
transition:box-shadow var(--d2) var(--sal)}
.wa .circ svg{width:26px;height:26px;fill:#fff}
.wa .num{font-size:var(--t-lg);color:var(--tinta);font-weight:500;letter-spacing:-.01em;
font-variant-numeric:tabular-nums}
.wa:active{transform:scale(.96)}
.humano{font-size:var(--t-xs);color:var(--texto);padding-left:57px;margin:0;line-height:1.45}
.humano b{color:var(--gris);font-weight:600}
.dir{font-size:var(--t-m);padding-left:var(--e5);border-left:2px solid var(--coral-claro);
line-height:1.5;color:var(--texto);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- navegación */
nav{background:#fff;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.menu-btn{display:none}
nav ul{list-style:none;display:flex;flex-wrap:wrap;margin:0}
nav li{flex:1;min-width:120px}
nav a,nav .desp .abre{display:block;width:100%;text-align:center;padding:var(--e4) var(--e3);
color:var(--gris);text-decoration:none;font-size:var(--t-m);font-weight:500;letter-spacing:.005em;
background:none;border:0;font-family:inherit;cursor:pointer;position:relative;
transition:color var(--d2) var(--sal),background var(--d2) var(--sal)}
nav a::before,nav .desp .abre::before{content:"";position:absolute;left:var(--e3);right:var(--e3);
bottom:0;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:50% 100%;
transition:transform var(--d3) var(--sal)}
nav a.act,nav .desp .abre.act{color:var(--tinta);font-weight:600}
/* «Agendar» es la accion de la barra, no otra pagina: va en coral y en negrita.
   Sin fondo ni borde, para no meter un boton dentro de la navegacion. */
nav a.agendar{color:var(--coral-texto);font-weight:600}
nav a.agendar::before{background:var(--coral-hondo)}
nav a.act::before,nav .desp .abre.act::before{transform:scaleX(1)}
nav a:active,nav .desp .abre:active{transform:scale(.96)}
nav .desp{position:relative}
nav .desp .abre::after{content:"";display:inline-block;margin-left:var(--e2);
border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px);
transition:transform var(--d2) var(--sal)}
nav .desp.abierto .abre::after{transform:translateY(-1px) rotate(180deg)}
nav .sub{position:absolute;left:0;top:100%;z-index:30;min-width:264px;background:#fff;
list-style:none;margin:0;padding:var(--e2) 0;border:1px solid var(--linea);border-radius:var(--r2);
box-shadow:var(--s2);flex-direction:column;
display:flex;opacity:0;visibility:hidden;translate:0 -6px;
transition:opacity var(--d2) var(--sal),translate var(--d2) var(--sal),visibility var(--d2)}
nav .desp.abierto .sub{opacity:1;visibility:visible;translate:0 0}
@starting-style{nav .desp.abierto .sub{opacity:0;translate:0 -6px}}
nav .sub li{flex:none;min-width:0}
nav .sub a{text-align:left;padding:var(--e3) var(--e5);border:0;font-size:var(--t-m);font-weight:400;
min-height:44px;display:flex;align-items:center}
nav .sub a:active{transform:scale(.98)}
nav .sub a::before{display:none}
nav .sub a[aria-current]{color:var(--coral-hondo);font-weight:600}
@media (hover:hover) and (pointer:fine){
  nav a:hover,nav .desp .abre:hover{color:var(--tinta);background:var(--plata)}
  nav a:hover::before,nav .desp .abre:hover::before{transform:scaleX(1)}
  nav a.act:hover::before{transform:scaleX(1)}
  nav .sub a:hover{background:var(--plata);color:var(--coral-hondo)}
  .logo:hover{opacity:.82}
  .wa:hover .circ{box-shadow:var(--s2)}
}
@media (min-width:901px){nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}}

/* ------------------------------------------------------------------ portada */
.portada{padding:var(--e8) 0 var(--e2)}
.portada .env{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr);
gap:var(--e8);align-items:center}
.portada h1{font-size:clamp(33px,4.8vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1.08;
margin:0 0 var(--e5);text-wrap:balance;color:var(--tinta)}
.lema p{margin:0 0 var(--e5);font-size:17.5px;color:var(--texto);max-width:46ch;text-wrap:pretty}
.enlaces{list-style:none;padding:0;margin:0 0 var(--e6);border-top:1px solid var(--linea)}
.enlaces li{border-bottom:1px solid var(--linea)}
.enlaces a{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
padding:var(--e4) 0;text-decoration:none;color:var(--tinta);font-size:16.5px;font-weight:500;
min-height:52px;transition:color var(--d2) var(--sal),padding-left var(--d2) var(--sal)}
.enlaces a::after{content:"›";color:var(--coral);font-size:20px;line-height:1;
transition:transform var(--d2) var(--sal)}
@media (hover:hover) and (pointer:fine){
  .enlaces a:hover{color:var(--coral-hondo);padding-left:var(--e2)}
  .enlaces a:hover::after{transform:translateX(4px)}
}

/* ----------------------------------------------------------------- carrusel */
.carru{position:relative}
.marco{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r3);
background:var(--plata);box-shadow:var(--s1)}
/* Las once laminas estan apiladas en el mismo sitio y solo se distinguen por
   la opacidad. Un elemento con opacity:0 SIGUE recibiendo el clic y sigue en
   el orden de tabulacion: sin visibility, cualquier toque sobre la foto caia
   en la ULTIMA lamina del HTML, no en la que se ve. Con visibility:hidden la
   lamina oculta deja de existir para el puntero y para el teclado; la demora
   de 0s al final de la transicion es para que no desaparezca antes de
   terminar de desvanecerse. */
.marco figure{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
transition:opacity .5s var(--sal),visibility 0s linear .5s}
.marco figure.on{opacity:1;visibility:visible;
transition:opacity .5s var(--sal),visibility 0s linear 0s}
.marco a{display:block;height:100%}
.marco picture{display:block;height:100%}
.marco img{width:100%;height:100%;object-fit:cover}
.marco::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(33,34,35,.07)}
.pie-c{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:baseline;justify-content:space-between;
margin-top:var(--e4);min-height:50px}
.pie-c h2{font-size:var(--t-xl);font-weight:600;margin:0;letter-spacing:-.018em;flex:1;min-width:200px;
line-height:1.25;text-wrap:balance}
.pie-c a{font-size:var(--t-m);text-decoration:none;white-space:nowrap;font-weight:600;
position:relative;padding-block:var(--e2);display:inline-flex;align-items:center;gap:var(--e2)}
.pie-c a::after{content:"›";font-size:18px;line-height:1;
transition:transform var(--d2) var(--sal);display:inline-block}
@media (hover:hover) and (pointer:fine){.pie-c a:hover::after{transform:translateX(3px)}}
/* barra segmentada en lugar de quince puntos */
.puntos-fila{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e3)}
.puntos{display:flex;flex-wrap:wrap;gap:var(--e1);flex:1;min-width:0}
.puntos button{flex:1 1 24px;min-width:24px;height:26px;padding:0;border:0;background:none;
cursor:pointer;position:relative;border-radius:var(--r1)}
.puntos button::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;
transform:translateY(-50%);background:var(--linea);border-radius:var(--rp);
transition:background var(--d3) var(--sal),height var(--d3) var(--sal)}
.puntos button[aria-current="true"]::before{background:var(--coral);height:4px}
@media (hover:hover) and (pointer:fine){.puntos button:hover::before{background:var(--coral-claro)}}

/* -------------------------------------------------------- áreas de ejercicio */
.areas{padding:var(--e8) 0 var(--e8);background:var(--claro);margin-top:var(--e7)}
.titulo-s{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--texto);
margin:0 0 var(--e2);font-weight:600}
.areas h2{font-size:clamp(25px,3.1vw,32px);font-weight:600;letter-spacing:-.022em;
margin:0 0 var(--e6);line-height:1.15;text-wrap:balance}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5)}
.tarj{background:#fff;border-radius:var(--r3);text-decoration:none;color:inherit;display:block;
padding:var(--e4) var(--e4) var(--e5);box-shadow:var(--s1);
transition:transform var(--d3) var(--sal),box-shadow var(--d3) var(--sal)}
.tarj:active{transform:scale(.98)}
.foto{height:132px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--e4);
background:var(--plata);border-radius:var(--r2);overflow:hidden;position:relative}
.foto::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(33,34,35,.05)}
/* Las imágenes sin transparencia traen su propio fondo: si flotaran sobre la
   placa se les vería el recuadro. Llenan la placa y el recuadro desaparece. */
.foto.foto-llena img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;
object-position:50% 45%;transform:scale(1.02)}
.foto img{max-width:84%;max-height:104px;width:auto;height:auto;object-fit:contain;
transition:transform var(--d3) var(--sal)}
.tarj h3{margin:0;font-size:var(--t-lg);font-weight:600;line-height:1.25;color:var(--tinta);
letter-spacing:-.012em}
.tarj h3 em{display:block;font-style:normal;font-size:var(--t-s);font-weight:400;color:var(--texto);
margin-top:var(--e1);letter-spacing:0}
@media (hover:hover) and (pointer:fine){
  .tarj:hover{transform:translateY(-3px);box-shadow:var(--s2)}
  .tarj:hover .foto img{transform:scale(1.04)}
}

.extra-portada{padding:var(--e7) 0}
.extra-portada .env{max-width:1120px}
.extra-portada h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.018em;
margin:var(--e7) 0 var(--e3);max-width:30ch;text-wrap:balance}
.extra-portada h2:first-child{margin-top:0}
.extra-portada p{max-width:var(--medida);margin:0 0 var(--e4);color:var(--texto);text-wrap:pretty}

/* ------------------------------------------- fotos de la oficina (portada) */
.oficina{display:grid;gap:var(--e4);margin:var(--e5) 0 var(--e8);max-width:none}
.oficina figure{margin:0}
.oficina img{width:100%;height:auto;display:block;border-radius:var(--r3);
box-shadow:var(--s1);background:var(--plata)}
.oficina figcaption{margin-top:var(--e2);font-size:var(--t-s);color:var(--texto);
max-width:38ch;text-wrap:pretty}
@media (min-width:760px){.oficina{grid-template-columns:1fr 1fr;gap:var(--e5)}}

/* ------------------------------------------------ fichas por área (/servicios) */
.serv-tarjs{display:grid;gap:var(--e3);margin:var(--e6) 0 var(--e5)}
/* La ficha es un componente, no texto corrido: puede pasarse de la medida de
   lectura sin romper el eje de alineación, que sigue siendo el mismo. */
.articulo>.serv-tarjs{max-width:940px}
.ficha-area{background:#fff;border-radius:var(--r3);box-shadow:var(--s1);overflow:hidden;
transition:box-shadow var(--d3) var(--sal)}
.ficha-area[open]{box-shadow:var(--s2)}
.ficha-area summary{display:flex;align-items:center;gap:var(--e4);cursor:pointer;
padding:var(--e4) var(--e5);list-style:none;min-height:64px}
.ficha-area summary::-webkit-details-marker{display:none}
.ficha-area summary:focus-visible{outline:2px solid var(--coral-hondo);outline-offset:-2px;
border-radius:var(--r3)}
.ficha-area summary h2{margin:0;flex:1;max-width:none;font-size:var(--t-lg);line-height:1.25;
letter-spacing:-.012em}
.ficha-area .sig{flex:none;width:26px;height:26px;border-radius:50%;background:var(--plata);
display:grid;place-items:center;color:var(--coral-hondo);
transition:transform var(--d3) var(--sal),background var(--d2) var(--sal),color var(--d2) var(--sal)}
.ficha-area .sig svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.ficha-area[open] .sig{transform:rotate(180deg);background:var(--coral-hondo);color:#fff}
.ficha-cuerpo{padding:var(--e4) var(--e5) var(--e5);border-top:1px solid var(--linea-suave)}
.ficha-cuerpo ul{margin:0;columns:2;column-gap:var(--e7)}
/* Con pocas materias, dos columnas dejan una viuda suelta: una sola lee mejor. */
.ficha-cuerpo ul:not(:has(li:nth-child(7))){columns:1}
.ficha-cuerpo li{break-inside:avoid}
.ficha-cuerpo p{margin:var(--e4) 0 0;max-width:var(--medida);font-size:var(--t-s)}
@media (hover:hover) and (pointer:fine){
  .ficha-area summary:hover{background:var(--plata)}
  .ficha-area summary:hover .sig{background:#E2E2E2}
  .ficha-area[open] summary:hover .sig{background:var(--coral)}
}
@media (max-width:640px){
  .ficha-area summary{padding:var(--e3) var(--e4);gap:var(--e3)}
  .ficha-cuerpo{padding:var(--e3) var(--e4) var(--e4)}
  .ficha-cuerpo ul{columns:1}
}
/* La apertura se anima donde el navegador sabe interpolar hasta auto; donde no,
   abre de golpe, que es el comportamiento nativo de siempre. */
@supports (interpolate-size: allow-keywords){
  .serv-tarjs{interpolate-size:allow-keywords}
  .ficha-area::details-content{block-size:0;overflow:clip;opacity:0;
  transition:block-size var(--d3) var(--sal),opacity var(--d2) var(--sal),
  content-visibility var(--d3) allow-discrete}
  .ficha-area[open]::details-content{block-size:auto;opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .ficha-area,.ficha-area .sig,.ficha-area::details-content{transition:none!important}
}

/* ----------------------------------------------------------------- artículos */
/* La columna del articulo mide exactamente la medida de lectura, y por eso
   queda centrada en la pantalla. Antes el contenedor media 1120 px y los
   62ch de texto se pegaban a su izquierda: en un monitor de 1920 el texto
   quedaba 237 px a la izquierda del centro, con la mitad derecha vacia.
   Centrar cada elemento por separado NO sirve: los titulos tienen medidas
   propias (h1 20ch, h2 24ch) y se irian al medio, desalineados del texto. */
.articulo{padding:var(--e8) 30px var(--e9);max-width:calc(var(--medida) + 60px);margin:0 auto}
.articulo>*{max-width:var(--medida)}
/* Retrato de /equipo (29-09-2026): foto horizontal en la oficina, a todo el ancho del texto,
   para que se vea el estudio detras. Antes: miniatura vertical flotante de 270 px. */
.retrato{display:block;width:100%;height:auto;margin:var(--e1) 0 var(--e6);
border-radius:var(--r3);box-shadow:var(--s1),inset 0 0 0 1px rgba(33,34,35,.07)}
.articulo h1{font-size:clamp(31px,4.4vw,44px);font-weight:600;letter-spacing:-.028em;
line-height:1.1;margin:0 0 var(--e6);text-wrap:balance;max-width:20ch}
.articulo h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.018em;line-height:1.2;
margin:var(--e8) 0 var(--e3);color:var(--tinta);text-wrap:balance;max-width:24ch}
.articulo h3{font-size:18.5px;font-weight:600;margin:var(--e6) 0 var(--e2);letter-spacing:-.008em;
color:var(--gris);max-width:30ch}
.articulo p{margin:0 0 var(--e4);color:var(--texto);text-wrap:pretty}
.articulo p strong,.articulo li strong{color:var(--tinta);font-weight:600}
.articulo ul,.articulo ol{margin:0 0 var(--e5);padding-left:var(--e5)}
.articulo li{margin-bottom:var(--e2);color:var(--texto)}
.articulo li::marker{color:var(--coral);font-size:.9em}
.articulo blockquote{margin:var(--e6) 0;padding:var(--e1) 0 var(--e1) var(--e5);
border-left:3px solid var(--coral-claro)}
.articulo blockquote p{margin:0 0 var(--e2);font-size:var(--t-lg);line-height:1.5;color:var(--gris)}
.articulo blockquote cite{font-style:normal;font-size:var(--t-s);color:var(--texto)}

.relacionadas{clear:both;margin:var(--e8) 0 0;border-top:1px solid var(--linea);padding-top:var(--e5);
max-width:var(--medida)}
.relacionadas h2{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--texto);margin:0 0 var(--e3);font-weight:600;max-width:none}
.relacionadas ul{list-style:none;padding:0;margin:0}
.relacionadas li{border-bottom:1px solid var(--linea);margin:0}
.relacionadas a{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
padding:var(--e3) 0;text-decoration:none;font-size:16.5px;font-weight:500;min-height:48px;
transition:color var(--d2) var(--sal),padding-left var(--d2) var(--sal)}
.relacionadas a::after{content:"›";color:var(--coral);font-size:19px;line-height:1;
transition:transform var(--d2) var(--sal)}
@media (hover:hover) and (pointer:fine){
  .relacionadas a:hover{color:var(--coral-hondo);padding-left:var(--e2)}
  .relacionadas a:hover::after{transform:translateX(4px)}
}

.cierre{clear:both;margin-top:var(--e8);background:var(--claro);border-radius:var(--r3);
padding:var(--e5) var(--e6);display:flex;flex-wrap:wrap;gap:var(--e5);align-items:center;
max-width:var(--medida)}
.cierre p{margin:0;flex:1;min-width:230px;font-size:var(--t-lg);color:var(--tinta);
font-weight:500;text-wrap:pretty}

.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--coral-hondo);
color:#fff;text-decoration:none;padding:var(--e4) var(--e6);font-size:var(--t-base);font-weight:600;
border-radius:var(--r2);min-height:52px;box-shadow:var(--s1);letter-spacing:-.005em;
transition:background var(--d2) var(--sal),box-shadow var(--d2) var(--sal),transform var(--d1) var(--sal)}
/* WhatsApp en su propio verde: no compite con el rojo porque no se lee como
   «segunda opcion» sino como «WhatsApp». El verde de la burbuja (#25D366) da
   1,98:1 con texto blanco, que no se puede leer; este da 5,30:1. */
.btn-wa{background:var(--wa-hondo);color:#fff}
.btn-wa:hover{background:#096A51}
.cal{margin:var(--e5) 0 var(--e6)}
.cal-aviso{font-size:var(--t-s);color:var(--texto);margin:0 0 var(--e4);max-width:var(--medida)}
.cal-marco{width:100%;min-height:640px;border:1px solid var(--linea);border-radius:var(--r2);
display:block;background:var(--plata)}
.lema-btns,.cierre-btns{display:flex;flex-wrap:wrap;gap:var(--e3)}
/* En escritorio /equipo ya esta en la lista del titular. En el telefono esa
   lista se reduce a tres chips y /equipo queda solo en la hamburguesa: alli
   recupera un enlace, de texto y no de boton, despues de las materias. */
.ver-abogado{display:none}
/* En escritorio el titular lleva UN boton rojo, «Agende aqui», y la lista
   queda con cuatro filas parejas. Esa quinta fila sobra porque el boton dice
   lo mismo justo debajo; en el telefono, donde no hay botones, vuelve a
   mostrarse como chip (ver el bloque de max-width:560px). WhatsApp no esta en
   la lista en ninguna de las dos: esta en la cabecera y en la burbuja. */
.portada .enlaces li.e-agenda{display:none}
.agenda-caja{margin:var(--e5) 0 var(--e6)}
/* Landing de Ads: los dos botones juntos, y a ancho completo en movil para
   que entren en el primer pantallazo sin exigir punteria. */
.landing-btns{margin:var(--e5) 0 var(--e6)}
/* Landing de Google Ads: el visitante llega desde un anuncio y decide en el
   primer pantallazo. En movil se comprimen los espacios y los dos botones van
   lado a lado, repartiendo el ancho, para que el problema, el procedimiento,
   los honorarios y las dos acciones entren sin desplazar. */
@media (max-width:640px){
.articulo.landing{padding-top:var(--e4)}
.landing h1{margin-top:0;margin-bottom:var(--e3)}
.landing>p{margin:var(--e3) 0}
.landing>ol{margin:var(--e3) 0;padding-left:var(--e5)}
.landing>ol li{margin-bottom:var(--e2)}
.landing .landing-btns{margin:var(--e4) 0 var(--e5);flex-wrap:nowrap;gap:var(--e2)}
.landing .landing-btns .btn{flex:1 1 0;min-width:0;padding-left:var(--e3);padding-right:var(--e3)}
}
/* Formulario de calificacion de /salud-mental-isapre */
.cal-sm{margin:var(--e6) 0;padding:var(--e5);border:1px solid var(--linea);
border-radius:var(--r3);background:var(--plata)}
.cal-sm-t{margin:0 0 var(--e4);font-size:var(--t-lg);font-weight:600;color:var(--tinta)}
.cal-sm-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-bottom:var(--e5)}
.cal-sm label{display:flex;flex-direction:column;gap:var(--e2);font-size:var(--t-s);
font-weight:600;color:var(--texto)}
.cal-sm input,.cal-sm select{font:inherit;font-size:var(--t-m);font-weight:400;color:var(--tinta);
padding:var(--e3);border:1px solid var(--linea);border-radius:var(--r2);background:#fff;
min-height:46px;width:100%;box-sizing:border-box}
.cal-sm input:focus,.cal-sm select:focus{outline:2px solid var(--coral-hondo);outline-offset:1px}
.cal-sm-ancho{grid-column:1/-1}
.cal-sm .btn{width:100%;box-sizing:border-box}
.cal-sm-n{margin:var(--e4) 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--texto)}
/* «Como llegar»: el enlace se lee como una pastilla con su icono, para que se
   distinga del texto corrido sin gritar. El icono hereda el color. */
.ir{display:inline-flex;align-items:center;gap:var(--e2);text-decoration:none;
border:1px solid var(--linea);border-radius:var(--rp);padding:var(--e2) var(--e4);
font-size:var(--t-s);font-weight:600;color:var(--coral-texto);white-space:nowrap;
transition:border-color var(--d2) var(--sal),background var(--d2) var(--sal)}
.ir svg{width:17px;height:17px;fill:currentColor;flex:none}
.ir:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ir:hover{background:var(--plata);border-color:var(--coral-claro)}}
.btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#C1341F;box-shadow:var(--s2)}}

.pie-horario{margin:var(--e2) 0 0;font-size:var(--t-m);color:var(--texto)}
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--coral-hondo);
color:#fff;padding:var(--e3) var(--e5);border-radius:0 0 var(--r2) 0;font-weight:600;
text-decoration:none}
.saltar:focus{left:0}
.ficha-area{scroll-margin-top:var(--e7)}
.ficha-cuerpo{scroll-margin-top:var(--e8)}
.regla{height:3px;background:var(--coral)}

/* ---------------------------------------------------------------------- pie */
footer{padding:var(--e7) 0 var(--e6);font-size:var(--t-m);color:var(--texto)}
footer p{margin:0 0 var(--e3)}
footer a{color:var(--coral-hondo);text-decoration:none;
transition:color var(--d2) var(--sal)}
@media (hover:hover) and (pointer:fine){footer a:hover{color:var(--tinta);text-decoration:underline;
text-underline-offset:.22em}}
.pie-dir strong{color:var(--tinta);font-weight:600}
.pie-dir,.pie-con{font-variant-numeric:tabular-nums}
.pie-dir{line-height:1.6}
.pie-extra{font-size:var(--t-xs);color:var(--texto)}

/* ------------------------------------------------------------ botón flotante */
.flota{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:var(--rp);
background:var(--wa);display:flex;align-items:center;justify-content:center;
box-shadow:var(--s3);z-index:40;
transition:transform var(--d2) var(--sal),box-shadow var(--d2) var(--sal)}
.flota svg{width:32px;height:32px;fill:#fff}
.flota:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.flota:hover{transform:translateY(-2px);
box-shadow:0 14px 36px rgba(33,34,35,.2)}}


/* ------------------------------------------- política, pie legal, cookies, formulario */
.pie-legal{font-size:var(--t-xs)}
.pie-boton{font:inherit;color:var(--coral-hondo);background:none;border:0;padding:0;cursor:pointer;
transition:color var(--d2) var(--sal)}
@media (hover:hover) and (pointer:fine){.pie-boton:hover{color:var(--tinta);text-decoration:underline;
text-underline-offset:.22em}}
@media(min-width:561px){footer .env{padding-right:96px}}
@media(max-width:560px){footer{padding-bottom:96px}}

.pagina-politica h1{font-size:clamp(31px,4.4vw,44px);font-weight:600;letter-spacing:-.028em;line-height:1.1;margin:0 0 var(--e5)}
.politica-privacidad h2{max-width:none;text-wrap:pretty;margin-top:var(--e7)}
.pol-descarga{margin:var(--e6) 0 0!important;padding:var(--e4) var(--e5);background:var(--plata);border-radius:var(--r2);font-weight:600}
.pol-descarga a{color:var(--coral-texto);text-underline-offset:.22em}
.politica-privacidad hr{border:0;border-top:1px solid var(--linea);margin:var(--e6) 0}
.politica-privacidad ul ul,.politica-privacidad ol ul{margin:var(--e2) 0 0}
.politica-privacidad li>p{margin:0 0 var(--e2)}
.politica-privacidad code{font-size:.9em;background:var(--plata);padding:1px 4px;border-radius:4px}
.politica-privacidad table{border-collapse:collapse;width:100%;margin:0 0 var(--e5);font-size:var(--t-s)}
.politica-privacidad th,.politica-privacidad td{text-align:left;vertical-align:top;
padding:var(--e2) var(--e3);border-bottom:1px solid var(--linea);color:var(--texto)}
.politica-privacidad th{color:var(--tinta);font-weight:600;background:var(--plata)}
.politica-privacidad td strong{color:var(--tinta)}
@media(max-width:560px){
.politica-privacidad table,.politica-privacidad tbody,.politica-privacidad tr,.politica-privacidad td{display:block;width:auto}
.politica-privacidad thead{display:none}
.politica-privacidad tr{border-bottom:1px solid var(--linea);padding:var(--e2) 0}
.politica-privacidad td{border:0;padding:var(--e1) 0}
.politica-privacidad td:first-child{color:var(--tinta);font-weight:600}}

[hidden]{display:none!important}
.ck{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:3px solid var(--coral);
box-shadow:0 -6px 24px rgba(33,34,35,.12);padding:var(--e4) 0;max-height:70vh;overflow:auto}
.ck-in{display:flex;gap:var(--e3) var(--e6);align-items:flex-end;flex-wrap:wrap}
.ck-txt{flex:1 1 440px;font-size:var(--t-s);color:var(--texto)}
.ck-txt p{margin:0 0 var(--e2)}
.ck-titulo{color:var(--tinta);font-size:var(--t-m)}
.ck-acciones{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap}
.ck-btn,.ck-sec{font:inherit;font-size:var(--t-m);font-weight:600;min-height:44px;padding:0 var(--e5);
border-radius:var(--r2);cursor:pointer}
.ck-btn{min-width:132px;border:2px solid var(--coral-hondo);background:var(--coral-hondo);color:#fff}
.ck-btn:hover{background:#C1341F;border-color:#C1341F}
.ck-sec{border:2px solid var(--barra);background:#fff;color:var(--tinta)}
.ck-sec:hover{border-color:var(--tinta)}
.ck-sep{color:var(--barra)}
.ck-pol{font-size:var(--t-s);color:var(--coral-texto)}
body:has(.ck:not([hidden])) .flota{display:none}
.ck-panel{max-width:620px;width:calc(100% - 32px);border:0;border-radius:var(--r3);padding:0;
box-shadow:var(--s3);color:var(--tinta)}
.ck-panel::backdrop{background:rgba(33,34,35,.45)}
.ck-panel-in{padding:var(--e6)}
.ck-panel h2{font-size:var(--t-xl);font-weight:600;margin:0 0 var(--e5);letter-spacing:-.015em}
.ck-cat{border-top:1px solid var(--linea);padding:var(--e4) 0}
.ck-cat p{margin:0 0 var(--e2);font-size:var(--t-s);color:var(--texto)}
.ck-cat .ck-cat-cab{font-size:var(--t-m);color:var(--tinta);display:flex;align-items:center;gap:var(--e2)}
.ck-cat-cab em{color:var(--texto);font-size:var(--t-s)}
.ck-switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:var(--rp);
background:var(--barra);position:relative;cursor:pointer;margin:0;flex:none;transition:background var(--d2) var(--sal)}
.ck-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:#fff;box-shadow:var(--s1);transition:transform var(--d2) var(--sal)}
.ck-switch:checked{background:var(--coral-hondo)}
.ck-switch:checked::after{transform:translateX(18px)}
.ck-nota{font-size:var(--t-s);color:var(--texto);border-top:1px solid var(--linea);padding-top:var(--e4);margin:0 0 var(--e5)}
.ck-btn,.ck-sec{white-space:nowrap}
.ck-panel .ck-acciones .ck-btn,.ck-panel .ck-acciones .ck-sec{flex:1 1 150px}
@media(max-width:560px){.ck-acciones{width:100%}
.ck-in .ck-btn{flex:1 1 40%;min-width:0}
.ck-in .ck-sec{order:1;flex:1 1 40%}.ck-in .ck-sep{display:none}.ck-in .ck-pol{order:2}
.ck-panel .ck-acciones .ck-btn{flex:1 1 40%;min-width:0}
.ck-panel .ck-acciones .ck-sec{order:1;flex:1 1 100%}
.ck-panel-in{padding:var(--e5)}}
/* Aviso de consentimiento compacto (23-09-2026). Ocupa ~9% de la pantalla en
   celular y una franja de 55px en escritorio; antes eran 45% y 156px, que en
   la primera visita tapaban el contenido y los botones de las landings de Ads.
   Los botones quedan en 28px de alto en movil y 36px en escritorio, sobre los
   24px que exige el criterio 2.5.8 de WCAG 2.2 en nivel AA. El boton
   «Configurar» sale del aviso: el panel de preferencias sigue accesible desde
   «Preferencias de cookies», al pie de todas las paginas. */
.ck-min{padding:6px 0}
.ck-min .ck-in{display:block}
.ck-min .ck-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.ck-min .ck-titulo{margin:0;font-size:12px;line-height:1.15;white-space:nowrap}
.ck-min .ck-pol{font-size:11px;line-height:1.15;color:var(--coral-texto);text-align:right}
.ck-min .ck-acciones{display:flex;gap:8px;margin-top:4px}
.ck-min .ck-btn{flex:1 1 0;min-width:0;min-height:28px;height:28px;padding:0 8px;
font-size:12px;border-radius:var(--r2);border-width:1px}
.ck-min .ck-no{background:#fff;color:var(--tinta);border:1px solid var(--barra)}
/* Bajo 400px el nombre completo de la politica no cabe junto al titulo en una
   linea, y al envolver el aviso se sube al 14%. Se achica un punto. */
@media(max-width:400px){.ck-min .ck-titulo{font-size:11px}.ck-min .ck-pol{font-size:10px}}
@media(min-width:760px){
.ck-min{padding:8px 0}
.ck-min .ck-in{display:flex;align-items:center;justify-content:space-between;gap:var(--e5)}
.ck-min .ck-cab{flex:0 1 auto;gap:var(--e4);align-items:baseline}
.ck-min .ck-titulo{font-size:var(--t-s)}
.ck-min .ck-pol{font-size:var(--t-s)}
.ck-min .ck-acciones{margin-top:0;flex:0 0 auto;gap:var(--e3)}
.ck-min .ck-btn{flex:0 0 auto;min-width:112px;min-height:36px;height:36px;font-size:var(--t-s);border-width:1px}
}

.form-contacto{margin-top:var(--e8);padding-top:var(--e6);border-top:1px solid var(--linea);scroll-margin-top:var(--e5)}
.f-campo{margin:0 0 var(--e5)}
.f-campo label{display:block;font-weight:600;color:var(--tinta);margin-bottom:var(--e2)}
.f-nota{font-weight:400;color:var(--texto);font-size:var(--t-s)}
.f-doble{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e5)}
@media(max-width:560px){.f-doble{grid-template-columns:1fr}}
.form-contacto input[type=text],.form-contacto input[type=email],.form-contacto input[type=tel],
.form-contacto textarea{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-base);
color:var(--tinta);background:#fff;border:1px solid var(--barra);border-radius:var(--r1);padding:var(--e3);min-height:48px}
.form-contacto textarea{resize:vertical;min-height:150px}
.form-contacto [aria-invalid=true]{border-color:var(--coral-hondo);box-shadow:0 0 0 1px var(--coral-hondo)}
.f-error{color:#B3261E;font-size:var(--t-s);margin:var(--e1) 0 0!important}
.f-trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.f-turnstile{min-height:65px;margin:0 0 var(--e4)}
.f-aviso{font-size:var(--t-s)!important;margin:0 0 var(--e4)!important}
.f-confirma{border:1px solid var(--linea);border-radius:var(--r2);padding:var(--e3) var(--e5) var(--e4);margin:0 0 var(--e5)}
.f-confirma legend{font-weight:600;color:var(--tinta);padding:0 var(--e2)}
.f-nota-casillas{font-size:var(--t-s)!important;margin:0 0 var(--e2)!important}
.f-casilla{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);align-items:start;padding:var(--e2) 0;cursor:pointer;color:var(--texto);font-size:var(--t-m);line-height:1.55}
.f-casilla input{width:21px;height:21px;margin:2px 0 0;accent-color:var(--coral-hondo);cursor:pointer}
.f-casilla input[aria-invalid=true]{outline:2px solid #B3261E;outline-offset:3px}
.f-casilla a{color:var(--coral-texto);text-underline-offset:.22em}
.form-contacto .btn{border:0;cursor:pointer;font-family:inherit}
.form-contacto .btn:disabled{background:var(--barra);box-shadow:none;cursor:not-allowed}
.f-estado{margin-top:var(--e4)!important;font-weight:500;color:var(--tinta)!important}

/* -------------------------------------------------------------- adaptaciones */
@media(max-width:980px){.portada .env{grid-template-columns:1fr;gap:var(--e6)}
.rejilla{grid-template-columns:repeat(2,1fr)}
.articulo{padding-inline:30px}}
@media(max-width:900px){
.dir{padding-left:0;border-left:none}
/* La barra de seis enlaces ocupaba dos filas enteras del teléfono. Pasa a ser
   un desplegable: los enlaces siguen en el HTML, solo dejan de mostrarse.
   La clase .con-js la pone el script; sin JavaScript, el menú se ve como antes. */
nav{position:relative}
nav.con-js .menu-btn{display:flex;align-items:center;justify-content:center;
width:52px;height:52px;margin-inline-start:auto;margin-inline-end:var(--e3);
background:none;border:0;padding:0;cursor:pointer;color:var(--tinta);border-radius:var(--r2)}
nav.con-js .menu-btn:active{transform:scale(.94)}
.barras,.barras::before,.barras::after{display:block;width:22px;height:2px;
background:currentColor;border-radius:2px;
transition:transform var(--d3) var(--sal),background var(--d1) linear}
.barras{position:relative}
.barras::before,.barras::after{content:"";position:absolute;left:0}
.barras::before{top:-7px}
.barras::after{top:7px}
nav.abierto .barras{background:transparent}
nav.abierto .barras::before{transform:translateY(7px) rotate(45deg)}
nav.abierto .barras::after{transform:translateY(-7px) rotate(-45deg)}
nav.con-js>ul{display:none}
nav.con-js.abierto>ul{display:block;border-top:1px solid var(--linea);padding-block:var(--e2)}
nav li{width:100%;min-width:0;flex:none}
nav a,nav .desp .abre{text-align:left;padding:var(--e3) var(--e5)}
nav .desp .abre{display:flex;align-items:center;justify-content:space-between;width:100%}
nav .sub{position:static;min-width:0;box-shadow:none;border:0;border-radius:0;
background:var(--plata);opacity:1;visibility:visible;translate:0 0;
display:none;padding:var(--e1) 0}
nav .desp.abierto .sub{display:flex}
nav .sub a{padding-left:var(--e7)}}
@media(max-width:560px){nav li{min-width:50%}
.pie-c{gap:var(--e2)}
.pie-c h2{min-width:100%;font-size:21px}
/* Once segmentos no caben en el telefono con el ancho minimo de escritorio:
   se partian en dos filas. */
.cal-sm{padding:var(--e4)}
.cal-sm-campos{grid-template-columns:1fr}
.puntos{gap:3px}
.puntos button{min-width:14px;flex:1 1 14px}
.humano{padding-left:0}
/* La direccion del estudio sobra en el telefono: esta en el pie, en «Donde
   atendemos» y en los datos estructurados de la misma pagina. */
.dir{display:none}
/* La cabecera se da vuelta: arriba el contacto, en chico, y debajo el logotipo
   grande. Quien llega por un anuncio busca el telefono antes que el nombre. */
.cab .env{flex-direction:column;align-items:flex-start;gap:var(--e4)}
.hueco{display:none}
.contacto{order:1;width:100%}
.logo{order:2}
.logo b{font-size:clamp(40px,10.6vw,58px)}
.wa .circ{width:34px;height:34px}
.wa .circ svg{width:20px;height:20px}
.wa .num{font-size:17px}
.humano{font-size:12.5px;line-height:1.4}
/* «Leer la ficha» sobra en el telefono: la lamina entera ya es un enlace a la
   misma pagina, y quitarla junta el titulo con la barra de puntos. */
#ficha{display:none}
.pie-c{min-height:0;margin-top:var(--e3)}
.cab .env{gap:var(--e5)}
.articulo{padding:var(--e7) 22px var(--e8)}
.rejilla{grid-template-columns:1fr}
.retrato{margin:0 0 var(--e5)}
.portada{padding:var(--e7) 0 var(--e1)}
.areas{padding:var(--e7) 0 var(--e7);margin-top:var(--e6)}
.cierre{padding:var(--e5)}
.foto{height:150px}
.foto img{max-height:120px}}

/* ---------------------------------------------- portada en telefono (<=560px)
   Tres cosas, solo aqui:
   1. El menu deja de ser una barra y pasa a ser un boton redondo flotante
      arriba a la derecha, siempre a la vista. Sin JavaScript no hay .con-js y
      la barra se ve como siempre.
   2. El titular baja a tamano de linea: en el telefono ocupaba media pantalla
      antes de que apareciera la primera foto.
   3. El orden pasa a ser titular, carrusel y materias; los cuatro atajos del
      titular se van, porque repiten el desplegable
      materias. Se hace con «order», sin tocar el HTML: el orden del documento
      -que es el que lee Google- no cambia. Para poder ordenarlos hay que
      disolver las cajas intermedias con display:contents; donde el navegador
      no lo soporta, todo cae en el orden de siempre. */
@media(max-width:560px){
nav.con-js{position:fixed;top:10px;right:10px;z-index:60;width:auto;
background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Rojo relleno: en blanco no se distinguia del fondo claro. Las barritas se
   dibujan con currentColor, asi que basta el color del boton para volverlas
   blancas, y la X al abrir hereda lo mismo. */
nav.con-js .menu-btn{margin:0;width:46px;height:46px;background:var(--coral-hondo);
border:0;border-radius:50%;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.24)}
nav.con-js.abierto>ul{position:absolute;top:56px;right:0;min-width:16rem;background:#fff;
border:1px solid var(--linea);border-radius:var(--r2);padding-block:var(--e2);
box-shadow:0 14px 34px rgba(0,0,0,.18);max-height:72vh;overflow:auto}
body{display:flex;flex-direction:column}
header.cab{order:0}
main.portada,.portada .env,.portada .lema{display:contents}
.portada h1,.portada .carru{width:100%;box-sizing:border-box;
max-width:1120px;margin-inline:auto;padding-inline:22px}
/* De los cuatro atajos vuelven dos. Areas de ejercicio y Quien le atiende
   repiten Servicios y Abogado del desplegable, pero Honorarios y Como llegar
   son las dos preguntas previas a escribir y en el telefono no estaban en
   ninguna otra parte visible: el pie no las enlaza. Van como chips bajo el
   carrusel. */
.portada .enlaces{order:3;display:flex;gap:var(--e2);margin:var(--e4) auto var(--e2);
width:100%;box-sizing:border-box;max-width:1120px;padding-inline:22px;border-top:0}
.portada .enlaces{flex-wrap:wrap}
.portada .enlaces li{flex:1 1 auto;border-bottom:0;min-width:0}
/* WhatsApp sale de los chips: el numero esta en la cabecera, justo arriba, y
   la burbuja flotante queda siempre a la vista. Agendar, en cambio, vuelve. */
.portada .e-areas,.portada .e-quien{display:none}
.portada .enlaces li.e-agenda{display:block}
/* La nota de la agenda tambien es hija de .lema, que aqui es display:contents.
   Sin «order» se iba a lo alto de la pagina, junto a la cabecera. */
.portada .enlaces li.e-agenda a{border-color:var(--coral-claro);color:var(--coral-texto);
font-weight:600}
.portada .enlaces a{justify-content:center;gap:var(--e2);min-height:0;
padding:var(--e3) var(--e3);border:1px solid var(--linea);border-radius:var(--r2);
font-size:15.5px;text-align:center}
.portada .enlaces a::after{font-size:17px}
.portada h1{order:1;font-size:17px;font-weight:500;letter-spacing:0;line-height:1.4;
color:var(--texto);margin:var(--e4) auto var(--e3);padding-right:72px}
.portada .carru{order:2}
section.areas{order:4;margin-top:var(--e6)}
/* El titular no lleva boton en el telefono: «Agende aqui» esta arriba, como
   chip. Esta regla vivia en el bloque de 900px, y entre 561 y 900 dejaba la
   portada SIN ninguno de los dos: ni boton ni chip. */
.portada .lema-btns{display:none}
.ver-abogado{display:block;order:5;padding:var(--e5) 0 0;text-align:center}
.ver-abogado a{font-size:var(--t-m);font-weight:600;color:var(--coral-texto);
text-decoration:none}
.ver-abogado a::after{content:" ›";font-size:17px}
section.extra-portada{order:6}
div.regla{order:7}
footer{order:8}
}

/* --------------------------------------------------- transiciones y revelados */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:sale .16s var(--sal) both}
  ::view-transition-new(root){animation:entra .26s var(--sal) both}
  @keyframes sale{to{opacity:0}}
  @keyframes entra{from{opacity:0}}
}
/* El revelado solo corre por debajo de la primera pantalla: la portada y el H1 nunca se animan. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference) and (min-width:561px){
    .areas .tarj,.extra-portada .env,.relacionadas,.cierre{
      animation:asoma linear both;animation-timeline:view();animation-range:entry 0% entry 26%}
    @keyframes asoma{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-property:opacity,color,background-color,border-color,outline-color,fill,box-shadow!important;
    transition-duration:var(--d2)!important;animation-duration:.01ms!important}
  .areas .tarj,.extra-portada .env,.relacionadas,.cierre{animation:none!important;opacity:1;transform:none}
  .btn:active,.tarj:active,.flota:active,.wa:active,nav a:active,nav .desp .abre:active{transform:none}
  .marco figure{transition:opacity var(--d3) linear,visibility 0s linear var(--d3)}
  .marco figure.on{transition:opacity var(--d3) linear,visibility 0s linear 0s}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01ms!important}
}
@media(prefers-reduced-transparency:reduce){
  @media(min-width:901px){nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
}

/* Firma de las fichas (SEO 29-09-2026) */
.firma-ficha{font-size:.875rem;color:var(--texto);margin-top:-.4em;margin-bottom:1.6em}
.firma-ficha a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.firma-ficha time{white-space:nowrap}

/* Portada en escritorio (29-09-2026, pedido de Javier: titular mas chico y la
   primera seccion alineada). Las dos columnas se estiran a la misma altura:
   el titular arranca a la altura del borde superior de la foto y el boton
   «Agende aqui» cierra a la altura de la barra del carrusel. */
@media(min-width:901px){
.portada h1{font-size:clamp(30px,2.9vw,40px);line-height:1.1}
}
/* Desde 981 px la portada va a dos columnas (ver max-width:980px). */
@media(min-width:981px){
.portada .env{align-items:stretch}
.portada .lema{display:flex;flex-direction:column}
.portada h1{margin:-.14em 0 var(--e5)}
.portada .enlaces{margin-bottom:var(--e5)}
/* 11 px: el borde inferior del boton coincide con el de la barra del carrusel */
.portada .lema-btns{margin-top:auto;margin-bottom:11px}
.portada .carru{display:flex;flex-direction:column}
.portada .puntos-fila{margin-top:auto;padding-top:var(--e3)}
}