@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}
/* 06-10-2026: el logotipo es «SLVM.cl», el mismo de la ficha de Google, el icono, la firma
   y los anuncios (Google Ads exige que el logo de los anuncios se vea en la pagina de destino).
   Debajo, el nombre completo al mismo ancho de la sigla, como en img/firma-slvm.png:
   el ancho lo fija «SLVM.cl» (width:max-content) y el nombre lo toma sin aportar al calculo
   (width:0;min-width:100%) y reparte el sobrante entre palabras (text-align-last:justify).
   El factor .19 deja margen para la letra del sistema en Mac, que es mas ancha que Arial. */
.logo{--lm:clamp(64px,17vw,78px);line-height:1;text-decoration:none;display:inline-block;
width:max-content;color:inherit;transition:opacity var(--d2) var(--sal)}
.logo b{font-family:"Anton",Impact,"Arial Black",sans-serif;
font-size:var(--lm);font-weight:400;color:var(--gris);display:block;line-height:.86;letter-spacing:0}
.logo b i{font-style:normal;color:var(--coral)}
.logo>span{display:block;width:0;min-width:100%;white-space:nowrap;text-align:justify;
text-align-last:justify;font-size:calc(var(--lm) * .19);margin-top:calc(var(--lm) * .1);
color:var(--texto);font-weight:400;letter-spacing:0}
/* Entrada del logotipo (06-10-2026), tomada del tramo de entrada del GIF de Javier: las letras
   suben desde la linea de base, de izquierda a derecha, y al final cae el punto con un rebote.
   Dura 0,93 s por --lento (abajo) y queda fijo. Solo corre al llegar al sitio desde fuera (el script de la cabecera
   pone «anima» si el referente no es slvm.cl): al navegar entre paginas el logo aparece quieto.
   No guarda nada en el navegador. Con «reducir movimiento» activado no se anima. El nombre
   de abajo no se anima: se ve siempre. */
.logo b span,.logo b i{display:inline-block}
/* --lento multiplica todos los tiempos. 06-10-2026, a pedido de Javier tras verlo publicado:
   en escritorio iba «muy rapido» (x1,8 = 2,2 s) y en el celular «un poquitito mas lento» (x1,2 = 1,5 s). */
.logo{--lento:1.2}
@media (min-width:901px){.logo{--lento:1.8}}
@media (prefers-reduced-motion:no-preference){
  .logo.anima b{animation:logo-recorte calc(.8s * var(--lento)) linear}
  .logo.anima b span{animation:logo-sube calc(.36s * var(--lento)) cubic-bezier(.2,.75,.25,1) both}
  .logo.anima b span:nth-child(2){animation-delay:calc(.06s * var(--lento))}
  .logo.anima b span:nth-child(3){animation-delay:calc(.12s * var(--lento))}
  .logo.anima b span:nth-child(4){animation-delay:calc(.18s * var(--lento))}
  .logo.anima b span:nth-child(6){animation-delay:calc(.24s * var(--lento))}
  .logo.anima b span:nth-child(7){animation-delay:calc(.3s * var(--lento))}
  /* El punto cae cuando el texto termina de aparecer, sin pausa: la «l» (la ultima letra)
     sube de .30 a .66 con salida suave y a .55 ya esta al 98 % de su recorrido, que es cuando
     el ojo la da por llegada. Ahi aparece el punto, 1em sobre la linea, y cae: toca la linea
     en .80 y el rebote termina en .93. (Antes caia en su turno, entre la M y la c: Javier
     pidio que caiga despues del texto, «pero sin delay».) */
  .logo.anima b i{animation:logo-punto calc(.38s * var(--lento)) calc(.55s * var(--lento)) both}
}
@keyframes logo-sube{from{transform:translateY(1.05em)}to{transform:none}}
@keyframes logo-recorte{from,to{clip-path:inset(-3em -1em 0 -1em)}}
@keyframes logo-punto{
  0%{transform:translateY(-1em);opacity:0;animation-timing-function:cubic-bezier(.4,0,.9,.5)}
  6%{opacity:1}
  66%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  82%{transform:translateY(-.1em);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  100%{transform:none}}
.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}
/* line-height:inherit: el boton «Materias» traia el interlineado del navegador («normal») y
   quedaba 4 px mas arriba y 8 px mas bajo que los enlaces vecinos (06-10-2026). */
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;line-height: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)}}
/* «Materias» tiene 18 fichas. En una sola columna (44 px cada una) el panel pasaria de
   800 px y, como la barra queda fija arriba, las ultimas no se alcanzarian en un portatil.
   En escritorio van en dos columnas, centradas bajo el boton, que se leen de arriba abajo
   en el orden del carrusel. */
@media (min-width:901px){nav .sub{display:grid;grid-auto-flow:column;
grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--filas,9),auto);
min-width:540px;left:50%;transform:translateX(-50%);max-height:calc(100vh - 80px);overflow-y:auto}}

/* ------------------------------------------------------------------ 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}
/* Enlaces de las fichas de /servicios: siguen siendo enlaces, pero sin el rojo, que en un
   listado distrae (Javier, 06-10-2026). Gris del texto con subrayado fino; rojo solo al
   pasar el cursor o con el foco del teclado. */
.ficha-cuerpo a{color:inherit;text-decoration:underline;text-decoration-color:var(--barra);
text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--d2) var(--sal),text-decoration-color var(--d2) var(--sal)}
.ficha-cuerpo a:focus-visible{color:var(--coral-texto);text-decoration-color:currentColor}
@media (hover:hover) and (pointer:fine){.ficha-cuerpo a:hover{color:var(--coral-texto);text-decoration-color:currentColor}}
.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:not([type=checkbox]):not([type=file]),.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:not([type=checkbox]):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)}
/* /salud-mental-isapre: formulario con documentos (política v2) */
.sm-intro{margin:calc(-1 * var(--e2)) 0 var(--e5)!important;font-size:var(--t-s);color:var(--texto)}
.sm-campo{display:flex;flex-direction:column;gap:var(--e2)}
.cal-sm .sm-campo label{display:block;font-size:var(--t-s);font-weight:600;color:var(--texto)}
.cal-sm [aria-invalid=true]{border-color:var(--coral-hondo)!important;box-shadow:0 0 0 1px var(--coral-hondo)}
.sm-docs{border:0;margin:0 0 var(--e5);padding:0;min-width:0}
.sm-docs legend{padding:0;margin-bottom:var(--e2);font-size:var(--t-m);font-weight:600;color:var(--tinta)}
.sm-docs-nota{margin:0 0 var(--e3)!important;font-size:var(--t-xs);line-height:1.5;color:var(--texto)}
.sm-doc{margin:0 0 var(--e3);padding:var(--e3) var(--e4);background:#fff;border:1px dashed var(--barra);border-radius:var(--r2)}
.sm-doc.listo{border-style:solid;border-color:var(--tinta)}
.cal-sm .sm-doc label{display:flex;flex-direction:row;align-items:baseline;gap:var(--e2);font-size:var(--t-s);font-weight:600;color:var(--tinta)}
.sm-doc-n{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;
background:var(--tinta);color:#fff;font-size:12px;font-weight:700;line-height:1;transform:translateY(-1px)}
.sm-doc-ayuda{margin:var(--e1) 0 var(--e3)!important;font-size:var(--t-xs);line-height:1.45;color:var(--texto)}
.sm-doc input[type=file]{display:block;width:100%;max-width:100%;font:inherit;font-size:var(--t-s);color:var(--texto)}
.sm-doc input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-right:var(--e3);padding:var(--e2) var(--e4);
border:1px solid var(--barra);border-radius:var(--r1);background:var(--plata);color:var(--tinta);cursor:pointer}
.sm-doc input[type=file]:focus-visible{outline:2px solid var(--coral-hondo);outline-offset:2px}
.cal-sm .f-confirma{background:#fff}
.cal-sm .f-casilla{font-size:var(--t-s);font-weight:400;display:grid}
.cal-sm button.btn{border:0;cursor:pointer;font-family:inherit}
.cal-sm button.btn:disabled{background:var(--barra);box-shadow:none;cursor:not-allowed}
.sm-o{margin:var(--e5) 0 var(--e3)!important;font-size:var(--t-s);color:var(--texto);text-align:center}
/* «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}
.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)}
}