:root{
  /* ================= ESCALA DE ESPACIO — base 8 =================
     Regla: todo valor medible sale de aqui. Nada fuera de la escala.
     Razon tecnica: a 1.5x de densidad los valores impares caen en
     medio pixel y el borde se ve borroso. Los multiplos de 8 no. */
  --e1:4px;    --e2:8px;    --e3:12px;   --e4:16px;   --e5:24px;
  --e6:32px;   --e7:40px;   --e8:48px;   --e9:64px;   --e10:80px;
  --e11:96px;  --e12:128px; --e13:160px; --e14:192px;

  /* ================= ESCALA TIPOGRAFICA ================= */
  --f1:12px;  --f2:14px;  --f3:16px;  --f4:18px;  --f5:20px;  --f6:24px;
  --f7:30px;  --f8:36px;  --f9:48px;  --f10:60px; --f11:72px; --f12:96px;

  /* ================= RETICULA =================
     Contenedor 1280 en escritorio, sin margen lateral: los 1280 son
     contenido. El margen solo existe por debajo de 1280, donde hace
     falta para que el texto no toque el borde de la ventana. */
  --ancho:1280px; --medida:70ch;
  --gut:var(--e5);
  --canal:var(--e5);
  /* corte entre secciones: mismo valor a cada lado del cambio de fondo */
  --corte:var(--e11);

  /* ================= COLOR =================
     Derivado del azul real de su logo #3D6CB5 (matiz 216.5deg).
     Todo comparte ese matiz salvo --paper, excepcion documentada. */
  --paper:#FBFAF7; --paper-2:#ECF1F9;
  --ink:#1C222C;              /* 15.30:1 sobre papel */
  --dim:#44536A;              /*  7.48:1 */
  --faint:#586B89;            /*  5.19:1 */
  --line:rgba(44,107,206,.5); --line-2:rgba(28,34,44,.09);
  --blue:#3D6CB5;             /* el logo, exacto          5.02:1 */
  --blue-dk:#2C4D82;          /* azul para texto chico    8.08:1 */
  --blue-deep:#24406B;        /* enfasis y hover          9.96:1 */
  --blue-br:#2E69C4;          /* acento vivo, mismo matiz 5.11:1 */
  --blue-lt:#2C6BCE;          /* el mas claro que pasa AA  4.51:1 */
  --blue-tint:#D9E3F2;
  /* el verde exacto de WhatsApp, con el texto en blanco como la marca.
     El par da 1.98:1 y no alcanza AA; es una decision tomada a proposito
     para no deformar el color de un servicio que la gente reconoce de lejos. */
  --wa:#25D366;
  /* el rojo del marcador del mapa: 3.38:1 contra el mapa, 5.75:1 con el
     circulo blanco de dentro. Es el unico rojo del sitio y solo marca ahi. */
  --pin:#C4271B;
  --pie-dim:#A9BFDE;  /* 5.54:1 sobre --blue-deep */

  /* ================= TIPOGRAFIA ================= */
  /* una sola familia: Poppins. --d para display, --s para cuerpo e
     interfaz. Son el mismo tipo; lo que cambia es el peso y el uso. */
  --d:'Poppins',-apple-system,system-ui,sans-serif;
  --s:'Poppins',-apple-system,system-ui,sans-serif;

  /* ================= MOVIMIENTO — sistema Carbon (IBM) ================= */
  --ease:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(0,0,.3,1);
  --e-out:cubic-bezier(.4,.14,1,1);
  --t-btn:70ms; --t-fade:110ms; --t-short:150ms; --t-exp:240ms; --t-big:400ms;
}
/* el margen lateral sube con la pantalla; los valores salen de la escala */
@media(min-width:768px){ :root{--gut:var(--e6);--corte:var(--e12)} }
@media(min-width:1280px){ :root{--gut:0px;--corte:var(--e13)} }
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--e9) + var(--e2));scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--s);font-size:var(--f3);line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{font-weight:400;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:var(--e1);border-radius:2px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:var(--e3) var(--e4);z-index:999}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gut)}
/* ---------- NAVEGACIÓN ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(251,250,247,.88);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.nav .wrap{display:flex;align-items:center;gap:var(--e5);min-height:calc(var(--e9) + var(--e2));
  transition:min-height var(--t-exp) var(--e-in)}
.nav.scr .wrap{min-height:calc(var(--e9) - var(--e2))}
.nav{transition:box-shadow var(--t-exp) var(--e-in),background var(--t-exp) var(--e-in)}
.nav.scr{box-shadow:0 1px 0 rgba(28,34,44,.07)}
.nav .brand{display:flex;align-items:center;gap:var(--e3);text-decoration:none;flex:none}
.nav .brand img{height:var(--e8);width:auto;display:block;flex:none}
/* arriba del todo el hero ya dice quien es: la marca del nav espera su turno */
.nav .brand .bn{transition:opacity var(--t-exp) var(--e-in)}
.nav .brand b{font-family:var(--d);font-size:var(--f4);font-weight:500;letter-spacing:.01em}
.nav .brand i{display:block;font-style:normal;font-size:var(--f1);letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue)}
.nav ul{display:none;align-items:center;gap:clamp(var(--e4),1.7vw,var(--e5));
  list-style:none;margin:0;padding:0}
@media(min-width:960px){.nav ul{display:flex;margin-inline:auto}}
/* donde estas: el filete se queda puesto */
.nav ul a.act{color:var(--ink)}
.nav ul a.act::after{transform:scaleX(1);background:var(--blue)}
.nav ul a{position:relative;display:inline-flex;align-items:center;min-height:var(--e8);
  font-size:var(--f3);font-weight:500;text-decoration:none;color:var(--dim);
  transition:color .3s var(--ease)}
.nav ul a::after{content:'';position:absolute;left:0;bottom:var(--e3);width:100%;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav ul a:hover{color:var(--ink)}
.nav ul a:hover::after{transform:scaleX(1)}
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--e2);background:var(--blue);
  color:#fff;text-decoration:none;padding:var(--e3) var(--e5);border-radius:999px;
  font-size:var(--f2);font-weight:600;white-space:nowrap;overflow:hidden;
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.btn::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(60% 120% at 50% 120%,rgba(255,255,255,.28),transparent 70%);
  opacity:0;transition:opacity .35s var(--ease)}
.btn:hover::after{opacity:1}
.btn:hover{background:var(--blue-dk);box-shadow:0 0 0 4px rgba(61,108,181,.12)}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr);align-content:center;
  padding-block:clamp(var(--e5),2.8vw,var(--e8)) var(--corte);overflow:hidden;text-align:center}
.hero .wrap{position:relative;z-index:3;width:100%}
/* centinela del nav: al pasarlo, la barra se encoge. Vigilar el hero
   entero hacia que solo ocurriera despues de 900px, o sea nunca. */
.tope{position:absolute;top:0;left:0;width:1px;height:var(--e9);pointer-events:none}
/* el gesto nace detrás de ella y se abre a los dos lados */
.sweep{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sweep path{fill:none;stroke:var(--blue);stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s var(--ease) forwards}
.sweep .L1,.sweep .R1{stroke-width:1.4;opacity:.34;animation-delay:1.2s}
.sweep .L2,.sweep .R2{stroke-width:.9;opacity:.15;animation-delay:1.45s}
@keyframes draw{to{stroke-dashoffset:0}}
.mid{display:grid;justify-items:center;gap:0;width:100%}
.her{margin:0;position:relative;z-index:4;
  opacity:0;animation:fd 1.1s var(--ease) .15s forwards}
@keyframes fd{to{opacity:1}}
.her img{width:clamp(var(--e13),15.6vw,calc(var(--e14) + var(--e2))); height:auto;display:block;
  -webkit-mask-image:linear-gradient(#000 64%,transparent 92%);
          mask-image:linear-gradient(#000 64%,transparent 92%)}
/* ---------- EL HERO: cuatro niveles, no seis filas ----------
   1 identidad   nombre + KINESIOLOGA (la categoria: orienta al que no la conoce)
   2 especialidad  la credencial que la distingue
   3 prueba      los anos, en cursiva: es evidencia, no una etiqueta mas
   4 alcance     lo que trata, en idioma del paciente
   5 contexto    donde esta y quien la respalda
   La agrupacion la da el espacio, no los filetes. */
.role{margin:calc(var(--e4) * .9) 0 0;font-family:var(--s);font-weight:600;
  font-size:clamp(var(--f5),2.2vw,var(--f8));letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);line-height:1.1;text-indent:.2em;
  opacity:0;animation:fd .9s var(--ease) .95s forwards}
.trata{position:relative;margin:var(--e7) 0 0;font-family:var(--s);font-weight:400;
  font-size:clamp(var(--f3),1.4vw,var(--f6));line-height:1.4;color:var(--ink);
  letter-spacing:-.004em;white-space:nowrap;
  opacity:0;animation:fd .9s var(--ease) 1.1s forwards}
.trata i{font-style:normal;color:var(--blue);padding:0 .14em}
/* el unico corte del hero: arriba quien es, abajo que trata */
.trata::before{content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--e8) * -.56);width:clamp(var(--e6),3.4vw,var(--e9));height:1px;
  background:rgba(61,108,181,.32)}
/* nivel 4: la prueba. Credencial, anos y lugar son el mismo nivel. */
.esp{margin:calc(var(--e2) * 1.5) 0 0;font-family:var(--s);font-weight:400;
  font-size:clamp(var(--f3),1.2vw,var(--f5));line-height:1.4;color:var(--blue-dk);
  opacity:0;animation:fd .9s var(--ease) 1.2s forwards}
.ctx{margin:var(--e2) 0 0;font-family:var(--s);font-weight:400;
  font-size:var(--f2);letter-spacing:.006em;line-height:1.5;color:var(--faint);
  opacity:0;animation:fd .9s var(--ease) 1.3s forwards}
/* el quiebre solo puede caer en los separadores, nunca dentro de una frase */
.ctx span{white-space:nowrap}
/* los anos: lo unico azul de la linea de respaldo */
@media(max-width:820px){.trata{white-space:normal;max-width:24ch;
  margin-inline:auto;text-wrap:balance}}
/* EL NOMBRE — Poppins, una línea */
.name{font-family:var(--d);font-weight:400;line-height:1;letter-spacing:-.004em;
  font-size:clamp(var(--f7),6vw,var(--f12));white-space:nowrap}
.name .ln{display:block;overflow:hidden;padding:.08em .12em .2em;margin:-.08em -.12em -.2em}
.name .ln>span{display:block;opacity:0;animation:rise 1.3s var(--ease) .5s forwards}
.name em{font-style:normal;color:inherit}
@keyframes rise{from{transform:translateY(58%)}to{opacity:1;transform:translateY(0)}}
.mid .btn{margin-top:var(--e6);opacity:0;animation:fd 1s var(--ease) 1.35s forwards}
/* pantallas de 1080 y menos */
@media (max-height:1000px){
  :root{--corte:var(--e11)}
  .hero{padding-block:clamp(var(--e4),1.8vw,var(--e5)) var(--corte)}
  .her img{width:clamp(var(--e12),13.6vw,calc(var(--e14) + var(--e2)))}
  .name{font-size:clamp(var(--f7),5.6vw,var(--f11))}
  .role{font-size:clamp(var(--f5),1.9vw,var(--f7))}
  .trata{font-size:clamp(var(--f3),1.2vw,var(--f5))}
  .ctx{font-size:var(--f2);margin-top:calc(var(--e2) * 1.3)}
  .mid .btn{padding:var(--e3) var(--e5)}
}
@media (max-height:900px){
  .her img{width:clamp(var(--e11),11vw,var(--e13))}
  .name{font-size:clamp(var(--f7),5.2vw,var(--f10))}
  .role{font-size:clamp(var(--f5),1.6vw,var(--f6))}
  .trata{font-size:clamp(var(--f3),1.1vw,var(--f4))}
  .ctx{font-size:var(--f2);margin-top:calc(var(--e2) * 1.2)}
}
@media (max-height:820px){
  .her img{width:clamp(var(--e10),9vw,var(--e12))}
  .name{font-size:clamp(var(--f7),4.8vw,var(--f10))}
  .role{font-size:clamp(var(--f3),1.4vw,var(--f6))}
  .trata{font-size:var(--f3)}
  .ctx{font-size:var(--f2);margin-top:calc(var(--e2) * 1.1)}
}
/* portatiles 1366x768 y similares */
@media (max-height:700px){
  :root{--corte:var(--e10)}
  .hero{padding-block:var(--e4) var(--corte)}
  .her img{width:clamp(var(--e9),7.4vw,var(--e11))}
  .name{font-size:clamp(var(--f6),4vw,var(--f9))}
  .role{font-size:clamp(var(--f3),1.1vw,var(--f5))}
  .trata{font-size:var(--f3)}
  .ctx{font-size:var(--f2);margin-top:var(--e2)}
  .mid .btn{padding:var(--e3) var(--e5)}
}
/* ---------- SECCION ---------- */
.sec{position:relative;background:var(--paper-2);
  padding-block:var(--corte) var(--corte)}
/* las secciones alternan fondo: azul palido, papel calido, azul palido */
.sec.alt{background:var(--paper)}
/* ---------- ENCABEZADO DE SECCION ----------
   Anatomia: eyebrow + titulo. El eyebrow es etiqueta de tema y va encima.
   Se alinea a la izquierda porque PERTENECE al contenido que agrupa:
   un titular centrado sobre cuerpo a la izquierda se percibe descentrado
   aunque no lo este. El hero es una isla y conserva su eje propio. */
.shd{text-align:center}
/* El titulo de seccion va centrado, dentro de la mancha organica.
   La mancha es decoracion: va de fondo, no de contenido, para que el
   titulo siga siendo texto seleccionable e indexable. */
.burb{display:inline-block;margin:0;/* La mancha oscura ocupa el 94% del lienzo del SVG y su franja util va
   del 5% al 90% del ancho. Con relleno simetrico el texto queda
   ligeramente a la derecha del centro de la mancha, que es como se ve
   en el mockup. */
  padding:var(--e9) var(--e9) var(--e10);
  background:url(../assets/img/bg_titulo_seccion.svg) center/100% 100% no-repeat;
  font-family:var(--d);font-weight:400;line-height:1.15;color:var(--paper);
  /* las dos lineas alinean su borde derecho, como en el mockup */
  text-align:right}
.burb span{display:block;font-size:clamp(var(--f3),1.2vw,var(--f4))}
.burb span img{width:.62em;height:auto;margin-right:.42em;
  vertical-align:-.02em;opacity:.9}
/* una sola linea de ella enmarca las cuatro especialidades, en vez de
   una dentro de cada area. */
.voz{max-width:46ch;margin:var(--e6) auto 0;font-family:var(--s);font-style:italic;
  font-size:var(--f4);line-height:1.55;color:var(--blue-dk)}
.burb em{display:block;font-style:normal;font-weight:500;
  font-size:clamp(var(--f6),2.2vw,var(--f7))}
/* el encabezado de seccion conserva su columna de medida */
/* ---------- PRACTICAS ----------
   Registro editorial. Sin fotografia, el peso lo llevan la escala y el
   aire: un titular de 48px contra cuerpo de 16px (3x) y un corte completo
   entre areas. Sin numerales (imponen un orden que no existe), sin
   tarjetas y sin filetes: el espacio vacio es la senal de que no hace
   falta llenarlo. Una grilla de tarjetas se lee como catalogo. */
/* el encabezado y las areas son grupos distintos: 32 px adentro del
   grupo del titulo, 160 hasta la primera area. Con 96 se leia como un
   solo bloque, porque las areas entre si estan a 320. */
.areas{display:flex;flex-direction:column;margin:var(--e13) auto 0}
/* Un area sin imagen conserva la columna de medida centrada.
   Un area con imagen abre a dos columnas: texto a la izquierda,
   ilustracion a la derecha, en la proporcion del mockup (1.79:1). */
.area{position:relative;padding-block:var(--corte)}
/* Separador entre especialidades: un asterismo. El asterisco va como
   mascara y no como imagen, para poder darle el color de la paleta.
   Es decoracion pura, asi que no entra en el arbol de accesibilidad. */
.area + .area::before{content:'';position:absolute;top:0;left:50%;
  width:var(--e5);height:var(--e5);transform:translateX(-50%);
  background:var(--blue-lt);opacity:.55;
  -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20285.66687%20282.56027%22%3E%3Cpath%20d%3D%22m%20257.80014%2C168.10685%20c%20-24.2934%2C0.18667%20-46.1734%2C10%20-62.4134%2C25.69333%20-16.24%2C16.24%20-26.2933%2C38.36%20-26.36%2C62.66667%20-0.053%2C14.42666%20-11.9733%2C26.13333%20-26.8%2C26.09333%20-14.5733%2C-0.0533%20-26.4%2C-11.82667%20-26.3466%2C-26.26667%200.067%2C-24.32%20-10.1067%2C-46.50666%20-26.226696%2C-62.85333%20-16.1333%2C-16.08%20-38.4933%2C-26.02666%20-63.0267%2C-26.10666%20-14.8533%2C-0.0667%20-26.66660025%2C-11.84%20-26.62660025%2C-26.53334%200.04%2C-14.42666%2011.96000025%2C-26.13333%2026.80000025%2C-26.09333%2024.5333%2C0.08%2046.9733%2C-9.98667%2063.2133%2C-25.960004%2016.226696%2C-15.97333%2026.546696%2C-38.10666%2026.626696%2C-62.4%200.067%2C-14.68%2011.9733%2C-26.39999997%2026.5333%2C-26.34665997461%2014.84%2C0.0400000046%2026.6667%2C11.85332997461%2026.6267%2C26.53332997461%20-0.093%2C24.29333%209.8133%2C46.49333%2025.9466%2C62.56%2016.1334%2C15.813334%2037.9334%2C26.053334%2062.2267%2C26.386664%200.2667%2C0%200.8%2C0%201.08%2C0%2014.56%2C0.0533%2026.6533%2C11.85334%2026.6133%2C26.28%20-0.053%2C14.69334%20-12.2267%2C26.4%20-26.8%2C26.34667%20-0.2666%2C0%20-0.8%2C0%20-1.0666%2C0%20v%200%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
  mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20285.66687%20282.56027%22%3E%3Cpath%20d%3D%22m%20257.80014%2C168.10685%20c%20-24.2934%2C0.18667%20-46.1734%2C10%20-62.4134%2C25.69333%20-16.24%2C16.24%20-26.2933%2C38.36%20-26.36%2C62.66667%20-0.053%2C14.42666%20-11.9733%2C26.13333%20-26.8%2C26.09333%20-14.5733%2C-0.0533%20-26.4%2C-11.82667%20-26.3466%2C-26.26667%200.067%2C-24.32%20-10.1067%2C-46.50666%20-26.226696%2C-62.85333%20-16.1333%2C-16.08%20-38.4933%2C-26.02666%20-63.0267%2C-26.10666%20-14.8533%2C-0.0667%20-26.66660025%2C-11.84%20-26.62660025%2C-26.53334%200.04%2C-14.42666%2011.96000025%2C-26.13333%2026.80000025%2C-26.09333%2024.5333%2C0.08%2046.9733%2C-9.98667%2063.2133%2C-25.960004%2016.226696%2C-15.97333%2026.546696%2C-38.10666%2026.626696%2C-62.4%200.067%2C-14.68%2011.9733%2C-26.39999997%2026.5333%2C-26.34665997461%2014.84%2C0.0400000046%2026.6667%2C11.85332997461%2026.6267%2C26.53332997461%20-0.093%2C24.29333%209.8133%2C46.49333%2025.9466%2C62.56%2016.1334%2C15.813334%2037.9334%2C26.053334%2062.2267%2C26.386664%200.2667%2C0%200.8%2C0%201.08%2C0%2014.56%2C0.0533%2026.6533%2C11.85334%2026.6133%2C26.28%20-0.053%2C14.69334%20-12.2267%2C26.4%20-26.8%2C26.34667%20-0.2666%2C0%20-0.8%2C0%20-1.0666%2C0%20v%200%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat}
/* el filete nace junto al asterisco y se desvanece hacia afuera: acompana
   la marca en vez de dividir la pagina, y conserva el borde blando que
   tienen la burbuja del titulo y las mascaras de las fotos. */
.area + .area::after{content:'';position:absolute;top:var(--e2);left:50%;
  width:calc(var(--e12) * 2 + var(--e9));height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(28,34,44,0),rgba(44,107,206,.5) 28%,
    rgba(44,107,206,.5) 34%,transparent 34%,transparent 66%,rgba(44,107,206,.5) 66%,
    rgba(44,107,206,.5) 72%,rgba(28,34,44,0))}
.area:not(:has(.ilu)) .txt{max-width:var(--medida);margin-inline:auto}
/* la imagen se ancla al borde superior del texto, no a su centro: los
   textos tienen largos distintos y centrar hacia que cada imagen cayera
   a una altura diferente respecto de su titulo. */
.area:has(.ilu){display:grid;align-items:start;column-gap:var(--e8);
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
/* el texto ocupa las dos filas de su columna; la imagen va arriba de la
   suya y la cita debajo. Separada por posicion, la voz de ella no
   necesita distinguirse por tamano ni por color. */
.area:has(.ilu) .txt{grid-column:1}
.area:has(.ilu) .ilu{grid-column:2;grid-row:1}
/* las areas alternan el lado de la imagen. El orden del HTML no cambia
   -primero el texto- para que la lectura y el lector de pantalla sigan
   el mismo recorrido; lo que se invierte es la colocacion en la grilla. */
/* los .webp traen 7.4% de transparente a la izquierda y 5.6% a la derecha.
   Como las imagenes alternan de lado, el canal necesita 8 px extra en las
   pares para que el aire que ve el ojo sea el mismo en las cuatro. */
.area:nth-of-type(even):has(.ilu){grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  column-gap:calc(var(--e8) + var(--e2))}
.area:nth-of-type(even):has(.ilu) .txt{grid-column:2}
.area:nth-of-type(even):has(.ilu) .ilu{grid-column:1;grid-row:1}
.ilu{margin:0}
/* la proporcion se declara para que la imagen reserve su espacio antes
   de cargar: sin esto la columna colapsa a cero y el lazy no dispara. */
.ilu img{display:block;width:100%;height:auto;aspect-ratio:1628/1538}
/* rotulo de area */
.area .txt p.over{margin:0 0 var(--e3);font-family:var(--s);font-weight:600;
  font-size:var(--f2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lt);text-indent:.16em}
.area:first-child{padding-top:0}
.area:last-child{padding-bottom:0}
.area h3{margin:0 0 var(--e5);font-family:var(--d);
  font-weight:400;font-size:clamp(var(--f7),2.6vw,var(--f8));line-height:1.1;
  letter-spacing:-.015em;color:var(--blue-dk);text-wrap:balance}
.area .txt p{margin:0 0 var(--e5);color:var(--dim);
  font-size:var(--f3);line-height:1.75}
.area .txt p:last-of-type{margin-bottom:0}
/* el primer parrafo lleva el peso; los que siguen bajan de nivel con el
   color y no con el tamano. Vale para cualquier cantidad de parrafos. */
.area .txt p.lede ~ p{color:var(--blue-lt)}
.area .txt p.lede{font-size:var(--f5);line-height:1.6;color:var(--ink);max-width:54ch}
/* su voz, en display: con esta medida y este aire no necesita filete */
/* patologias: lista tipografica, no tarjeta */
@media (prefers-reduced-motion:reduce){
  .area{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ================= ACERCA DE MI ================= */
/* El encabezado de esta seccion no lleva burbuja: va alineado a la
   izquierda, con el nombre de rotulo encima del titulo. */
.shd-izq{text-align:left;max-width:none;margin-inline:0}
.shd-izq .kicker{margin:0 0 var(--e3);font-family:var(--s);font-weight:600;
  font-size:var(--f2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lt);text-indent:.16em}
.shd-izq h2{margin:0;font-family:var(--d);font-weight:400;
  font-size:clamp(var(--f8),3.2vw,var(--f9));line-height:1.1;
  letter-spacing:-.015em;color:var(--blue-dk)}
/* texto a la izquierda, su retrato a la derecha */
.bio{display:grid;align-items:start;column-gap:var(--e9);row-gap:var(--e12);
  grid-template-rows:auto auto;
  grid-template-columns:minmax(0,2.8fr) minmax(0,1fr);
  margin-top:0}
.bio .col{grid-column:1;grid-row:1}
.bio .txt{margin-top:var(--e8)}
.bio .retrato{grid-column:2;grid-row:1}
/* Una biografia es una voz seguida: todos los parrafos pesan igual, con
   el mismo tamano y el mismo color. El de reconocimientos se separa solo
   por el aire que lleva encima. */
.bio .txt p{margin:0 0 var(--e5);color:var(--ink);
  font-size:var(--f4);line-height:1.7;max-width:72ch}
.bio .txt p:last-child{margin-bottom:0}
.bio .txt p.rec{margin-top:var(--e8)}
.bio .txt i{font-style:italic}
/* el retrato trae su mancha incrustada en el propio archivo */
/* pegado al texto, no al borde exterior: centrado en una columna ancha
   quedaba mas cerca del canto de la pagina que del parrafo. */
.retrato{margin:0;justify-self:start;max-width:calc(var(--e14) + var(--e6))}
.retrato img{display:block;width:100%;height:auto;
  aspect-ratio:200/600}
/* Banda de acreditacion al cierre: tres registros a lo ancho, con la
   acreditacion en cuerpo de lectura y el numero debajo. Antes iban en
   letra chica y por eso no se leian como lo que son. */
/* la banda cruza las dos columnas al cierre */
.cred{grid-column:1 / -1;grid-row:2;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--e9);
  row-gap:var(--e6);padding-top:var(--e5);
  border-top:1px solid var(--blue-tint)}
.cred .val{margin:0;font-family:var(--d);font-weight:400;font-size:var(--f5);
  line-height:1.3;color:var(--blue-dk);text-wrap:balance}
.cred .rot{margin:var(--e3) 0 0;font-family:var(--s);font-size:var(--f2);
  line-height:1.5;color:var(--faint)}
.cred .val b{font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums}
@media(max-width:860px){
  .cred{grid-template-columns:minmax(0,1fr);row-gap:var(--e5)}
  .bio{grid-template-columns:minmax(0,1fr);row-gap:var(--e9)}
  .retrato{justify-self:start}
}

/* ================= TESTIMONIOS ================= */
/* La comilla va como mascara para tomar el color de la paleta, y como
   fondo del bloque: asi no entra en el texto ni la lee un lector de
   pantalla. El texto arranca despues de ella, nunca encima. */
.pista blockquote{position:relative;margin:0;padding-top:var(--e6)}
.pista blockquote::before{content:'';position:absolute;
  top:0;left:0;width:var(--e8);height:calc(var(--e8) * .89);
  background:var(--blue-lt);opacity:.22;z-index:0;
  -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20155.25357%20137.7876%22%3E%3Cg%20transform%3D%22rotate%28180%2C276.23001%2C-2520.1699%29%22%3E%3Cpath%20d%3D%22m%20483.24282%2C-5178.1272%20v%2069.2172%20h%2040.75407%20l%20-30.40383%2C68.5704%20h%2033.63828%20l%2025.22871%2C-75.6862%20v%20-62.1014%20z%20m%20-86.03638%2C0%20v%2069.2172%20h%2040.75408%20l%20-30.40384%2C68.5704%20h%2033.63829%20l%2025.22871%2C-75.6862%20v%20-62.1014%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') top left/contain no-repeat;
  mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20155.25357%20137.7876%22%3E%3Cg%20transform%3D%22rotate%28180%2C276.23001%2C-2520.1699%29%22%3E%3Cpath%20d%3D%22m%20483.24282%2C-5178.1272%20v%2069.2172%20h%2040.75407%20l%20-30.40383%2C68.5704%20h%2033.63828%20l%2025.22871%2C-75.6862%20v%20-62.1014%20z%20m%20-86.03638%2C0%20v%2069.2172%20h%2040.75408%20l%20-30.40384%2C68.5704%20h%2033.63829%20l%2025.22871%2C-75.6862%20v%20-62.1014%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') top left/contain no-repeat}
.pista p{position:relative;z-index:1;margin:0;font-size:var(--f3);
  line-height:1.75;color:var(--dim)}
/* Carrusel con anclaje nativo: se mueve con el dedo, el trackpad y las
   flechas del teclado sin JavaScript. Los botones solo agregan un atajo. */
.tcar{margin-top:var(--e10)}
.pista{display:flex;gap:var(--e11);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:0;scrollbar-width:none;padding-bottom:var(--e3)}
.pista::-webkit-scrollbar{display:none}
.pista:focus-visible{outline:2px solid var(--blue);outline-offset:var(--e3)}
.pista blockquote{flex:0 0 calc(50% - var(--e11) / 2);scroll-snap-align:start}
/* el encabezado y los controles comparten fila: asi se ve de entrada
   que hay mas testimonios de los visibles */
.thead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e8);flex-wrap:wrap}
.tnav{display:flex;gap:var(--e3);flex:none}
.tbtn{display:inline-flex;align-items:center;justify-content:center;
  width:var(--e8);height:var(--e8);border:1px solid var(--blue-lt);
  border-radius:999px;background:transparent;color:var(--blue-lt);
  font-size:var(--f4);line-height:1;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.tbtn:hover{background:var(--blue-lt);color:var(--paper);border-color:var(--blue-lt)}
cite{display:block;margin-top:var(--e5);font-style:normal;text-align:right;
  font-size:var(--f2);font-weight:600;color:var(--blue-lt)}

/* ================= CONTACTO ================= */
.cont{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  column-gap:var(--e11);margin-top:var(--e10);align-items:start}
/* ---- el formulario ---- */
/* etiqueta y linea tienen que leerse como un solo campo: con el hueco
   anterior se veian como dos elementos sueltos, porque el input es
   transparente y no hay nada entre medio. */
.campo{display:flex;flex-direction:column;margin-bottom:var(--e6)}
.campo label{margin-bottom:var(--e1);font-family:var(--s);font-size:var(--f2);
  font-weight:600;color:var(--ink)}
.campo input,.campo textarea{font-family:var(--s);font-size:var(--f3);
  color:var(--ink);background:var(--paper-2);border:0;
  border-bottom:1px solid var(--blue-tint);border-radius:var(--e1) var(--e1) 0 0;
  padding:var(--e3) var(--e4);line-height:1.5;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.campo textarea{resize:vertical;min-height:var(--e10)}
.campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--blue);
  background:var(--paper)}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e6)}
/* las fechas son opcionales y tienen que verse como tales */
.opt{border:0;margin:var(--e7) 0 var(--e7);padding:0}
.opt .campo:last-child,.opt .dos .campo{margin-bottom:0}
.opt legend{padding:0;font-family:var(--s);font-size:var(--f2);font-weight:600;
  color:var(--blue-lt)}
.opt .nota{margin:var(--e2) 0 var(--e5);font-family:var(--s);font-size:var(--f2);
  line-height:1.5;color:var(--faint)}
.opt label{font-weight:400;color:var(--dim)}
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden}
.form .btn{border:0;cursor:pointer;font-family:var(--s)}
.form .btn:disabled{opacity:.65;cursor:not-allowed}
.form-feedback{margin-top:var(--e5);padding:var(--e3) var(--e5);border-radius:var(--e1);
  font-size:var(--f2);line-height:1.5;display:none}
.form-feedback.success{background:#eafaf1;color:#1e7e43;border:1px solid #c2eed5}
.form-feedback.error{background:#fdf2f2;color:#b91c1c;border:1px solid #f8d7da}
/* ---- donde encontrarla ---- */
/* cada dato va con su icono: el icono ocupa su propia columna para que las
   segundas lineas no se metan debajo de el */
.dato{display:grid;grid-template-columns:var(--e5) minmax(0,1fr);
  column-gap:var(--e4);align-items:start;margin:0 0 var(--e5)}
.dato .ico{width:var(--e5);height:var(--e5);display:block;flex:none;
  color:var(--blue-lt)}
/* los dos telefonos son dos filas, pero se leen como un solo dato */
.dato:has(.tels){margin-bottom:var(--e2)}
.ubic .dir{display:block;font-family:var(--d);font-size:var(--f5);line-height:1.4;
  color:var(--blue-dk)}
.ubic .dir .sub{display:block;margin-top:var(--e2);font-family:var(--s);
  font-size:var(--f2);color:var(--faint)}
.ubic .tels{display:block;font-family:var(--s);font-size:var(--f4);line-height:1.8;
  color:var(--dim);font-variant-numeric:tabular-nums lining-nums}
.ubic .tels a{text-decoration:none;color:inherit}
.ubic .tels a:hover{color:var(--blue-dk)}
.wa{display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e6);
  padding:var(--e3) var(--e5);border:0;border-radius:999px;background:var(--wa);
  text-decoration:none;font-family:var(--s);font-size:var(--f2);font-weight:600;
  color:var(--paper);transition:filter var(--t-short) var(--ease)}
.wa svg,.flota svg{width:var(--e5);height:var(--e5);display:block;flex:none;
  fill:currentColor}
/* el glifo oficial: la burbuja se pinta y el auricular queda hueco,
   asi que el verde del boton se ve a traves de el */
.wa:hover,.flota:hover{filter:brightness(.93)}
.wa:focus-visible,.flota:focus-visible{outline:2px solid var(--blue-dk);outline-offset:3px}
/* ---- el flotante: aparece cuando el hero ya paso y se retira en contacto,
        donde el boton de arriba ya esta a la vista ---- */
.flota{position:fixed;right:var(--e5);bottom:var(--e5);z-index:40;
  display:inline-flex;align-items:center;justify-content:center;
  width:calc(var(--e9) - var(--e2));height:calc(var(--e9) - var(--e2));
  border-radius:999px;background:var(--wa);color:var(--paper);
  box-shadow:0 var(--e1) var(--e4) rgba(28,34,44,.22);
  opacity:0;visibility:hidden;transform:translateY(var(--e3)) scale(.9);
  transition:opacity var(--t-exp) var(--e-in),transform var(--t-exp) var(--e-in),
             visibility var(--t-exp),filter var(--t-short) var(--ease)}
.pasado .flota{opacity:1;visibility:visible;transform:none}
.pasado.enc .flota{opacity:0;visibility:hidden;transform:translateY(var(--e3)) scale(.9)}
.flota svg{width:var(--e6);height:var(--e6)}
@media(prefers-reduced-motion:reduce){ .flota{transition:none} }
.mapa{position:relative;display:block;margin-top:var(--e8);overflow:hidden;
  border-radius:var(--e1)}
.mapa img{display:block;width:100%;height:auto;aspect-ratio:880/560}
/* el marcador va encima de la imagen, centrado y con la punta en el lugar
   exacto: asi se mantiene nitido y no depende del color del mapa */
.mapa .pin{position:absolute;left:50%;top:50%;width:var(--e7);height:var(--e7);
  transform:translate(-50%,-100%);pointer-events:none;
  fill:var(--pin);stroke:var(--paper);stroke-width:1.1;
  filter:drop-shadow(0 2px 3px rgba(28,34,44,.4))}
.mapa .pin circle{fill:var(--paper);stroke:none}
.mapa span{position:absolute;right:var(--e3);bottom:var(--e3);
  padding:var(--e2) var(--e4);border-radius:999px;background:var(--paper);
  font-family:var(--s);font-size:var(--f1);font-weight:600;color:var(--blue-dk)}
@media(max-width:860px){
  .cont{grid-template-columns:minmax(0,1fr);row-gap:var(--e10)}
  .flota{right:var(--e4);bottom:var(--e4)}
  .dos{grid-template-columns:minmax(0,1fr);column-gap:0}
}

/* ---------- PIE ----------
   La unica franja oscura del sitio. Despues de toda la pagina clara, le da
   un borde a la pagina en lugar de dejarla desvanecerse. */
.pie{background:var(--blue-deep);color:var(--paper);
  padding-block:var(--e11) var(--e9)}
/* el hero abre centrado, el pie cierra centrado */
.pie-id{display:flex;flex-direction:column;align-items:center;gap:var(--e5);
  text-align:center}
.pie-id img{height:var(--e10);width:auto;display:block;flex:none}
.pie .nom{margin:0;font-family:var(--d);font-size:var(--f6);font-weight:500;
  line-height:1.2}
.pie .esp{margin:var(--e2) 0 0;font-family:var(--s);font-size:var(--f3);
  line-height:1.5;color:var(--blue-tint)}
.pie .ag{margin:var(--e3) 0 0;font-family:var(--s);font-size:var(--f2);
  line-height:1.5;color:var(--pie-dim)}
.pie-fin{display:flex;justify-content:center;align-items:baseline;
  gap:var(--e3) var(--e6);flex-wrap:wrap;text-align:center;
  margin-top:var(--e10);padding-top:var(--e5);
  border-top:1px solid rgba(251,250,247,.18)}
.pie-fin p{margin:0;font-family:var(--s);font-size:var(--f1);line-height:1.6;
  color:var(--pie-dim)}
.pie-fin a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pie-fin a:hover{color:var(--paper)}
@media(max-width:600px){
  .pie-id img{height:var(--e9)}
}

/* ==================================================================
   MOVIL
   El sitio se diseno a 1280. Aqui se deshacen las rejillas de dos
   columnas, que a 360 px dejaban el texto en 20 caracteres por linea.
   ================================================================== */

/* ---- el boton del menu: tres lineas que se vuelven una cruz ---- */
.ham{display:none;flex:none;margin-left:auto;width:var(--e8);height:var(--e8);
  padding:0;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center}
.ham span,.ham span::before,.ham span::after{display:block;width:22px;height:2px;
  border-radius:2px;background:var(--ink);
  transition:transform var(--t-exp) var(--ease),opacity var(--t-fade) linear}
.ham span{position:relative}
.ham span::before,.ham span::after{content:'';position:absolute;left:0}
.ham span::before{top:-7px}
.ham span::after{top:7px}
.ham[aria-expanded=true] span{background:transparent}
.ham[aria-expanded=true] span::before{transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded=true] span::after{transform:translateY(-7px) rotate(-45deg)}

.panel{display:none;border-top:1px solid var(--line-2);background:var(--paper)}
/* hidden es display:none en la hoja del navegador y cualquier display de autor
   le gana, asi que hay que repetirlo o el panel se queda a la vista cerrado */
.nav .panel[hidden]{display:none}
/* .nav .wrap es flex para la barra; el del panel tiene que apilar */
.nav .panel .wrap{display:block;min-height:0}
/* .nav ul es display:none debajo de 960: la lista del panel necesita su propia
   regla, mas especifica, o hereda esa y mide cero */
.nav .panel ul{display:block;list-style:none;margin:0;padding:var(--e3) 0}
.nav .panel li{border-bottom:1px solid var(--line-2)}
.nav .panel li:last-child{border-bottom:0}
.nav .panel ul a{display:flex;align-items:center;min-height:var(--e8);
  font-family:var(--s);font-size:var(--f4);font-weight:500;
  text-decoration:none;color:var(--ink)}
.nav .panel ul a::after{display:none}
.nav .panel .btn{display:flex;justify-content:center;margin:var(--e4) 0 var(--e6)}

@media(max-width:959px){
  .nav .wrap{gap:var(--e4)}
  .ham{display:flex}
  /* la llamada a la accion se muda al panel: a 360 no caben las dos */
  .nav > .wrap > .btn{display:none}
  .panel{display:block}
}

/* ---- las areas de especialidad: texto arriba, imagen abajo ---- */
@media(max-width:860px){
  .area:has(.ilu),
  .area:nth-of-type(even):has(.ilu){grid-template-columns:minmax(0,1fr);
    column-gap:0;row-gap:var(--e7)}
  .area:nth-of-type(even):has(.ilu) .txt,
  .area:has(.ilu) .txt{grid-column:1;grid-row:1}
  .area:nth-of-type(even):has(.ilu) .ilu,
  .area:has(.ilu) .ilu{grid-column:1;grid-row:2}
  /* la imagen pasa a ser el elemento de cierre del area, no una miniatura:
     ocupa la columna sin pasar de 320 px, que es donde deja de crecer bien */
  .ilu{max-width:calc(var(--e14) + var(--e12));margin-inline:auto}

  /* Acerca de Mi: texto, retrato y registros, uno debajo de otro */
  .bio{grid-template-columns:minmax(0,1fr);row-gap:var(--e8)}
  .bio .col,.bio .retrato,.cred{grid-column:1}
  .bio .col{grid-row:1}
  .bio .retrato{grid-row:2;justify-self:center}
  .cred{grid-row:3;grid-template-columns:minmax(0,1fr);row-gap:var(--e5)}
  .bio .txt{margin-top:var(--e6)}
}

/* ---- testimonios: uno por pantalla ---- */
@media(max-width:860px){
  .pista{gap:var(--e8)}
  .pista blockquote{flex:0 0 100%}
  .thead{gap:var(--e5)}
}

/* ---- zonas tactiles ----
   En el telefono los numeros son el enlace mas importante de la pagina y
   median 25 px de alto. El minimo comodo para un dedo son 44. */
@media(max-width:860px){
  .dato:has(.tels){align-items:center}
  .ubic .tels a{display:flex;align-items:center;min-height:var(--e8)}
}
/* el credito del mapa es letra chica, pero igual se pulsa */
.pie-fin a{display:inline-block;padding-block:var(--e1)}

/* ---- la burbuja del titulo y los margenes generales ---- */
@media(max-width:600px){
  .burb{padding:var(--e7) var(--e6) var(--e8);width:100%}
  .areas{margin-top:var(--e11)}
  .pista{gap:var(--e6)}
}