/* ==========================================================================
   cirujanoplasticomerida.com — Sistema de diseño
   Basado en MASTER-DR-OROZCO.md · sección 07
   Clínico premium editorial: azules profundos + arena cálida,
   Cormorant Garamond (display) + Inter (cuerpo), glass en CSS.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Base de marca */
  --navy:        #03254f;
  --blue:        #264d6d;
  --sky:         #a7d0de;   /* SOLO superficie y acento. Nunca texto sobre claro */
  --sand:        #e3dccc;
  --cream:       #f9f4ee;
  --ice:         #e2f3f8;

  /* "Blanco no blanco, negro no negro" */
  --paper:       #f9f4ee;
  --paper-raise: #fdfbf8;
  --ink:         #0b1a26;
  --ink-soft:    #264d6d;
  --ink-mute:    #4a6c85;

  /* Líneas delgadas y limpias */
  --line:        color-mix(in srgb, var(--navy) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--navy) 22%, transparent);
  --line-onDark: color-mix(in srgb, #fff 16%, transparent);

  /* Estados */
  --focus:       #a7d0de;
  --danger:      #8c2f2f;

  /* Degradados */
  --grad-deep: linear-gradient(180deg,
      var(--navy) 0%, var(--blue) 33%, var(--sky) 66%, var(--ice) 100%);
  --grad-toFooter: linear-gradient(180deg,
      var(--paper) 0%, var(--sky) 22%, var(--blue) 58%, var(--navy) 100%);
  --grad-orb: radial-gradient(120% 120% at 30% 20%,
      var(--sky) 0%, var(--blue) 50%, var(--navy) 100%);
  --grad-warm: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
  --scrim: linear-gradient(180deg,
      color-mix(in srgb, var(--navy) 0%, transparent) 0%,
      color-mix(in srgb, var(--navy) 55%, transparent) 60%,
      color-mix(in srgb, var(--navy) 78%, transparent) 100%);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.52rem + 1.05vw, 2.60rem);
  --step-4:  clamp(2.20rem, 1.72rem + 2.40vw, 4.00rem);
  --step-5:  clamp(2.80rem, 1.80rem + 5.00vw, 7.00rem);

  /* Espaciado, retícula, radios, sombras */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;  --sp-32: 8rem;

  --content: 1200px;
  --wide:    1440px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(3,37,79,.06), 0 2px 8px rgba(3,37,79,.05);
  --sh-2: 0 8px 24px -8px rgba(3,37,79,.16);
  --sh-3: 0 24px 60px -20px rgba(3,37,79,.28);

  --header-h: 72px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* el body nunca hace scroll horizontal */
}
h1 { font: 300 var(--step-4)/1.05 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--sp-4); text-wrap: balance; }
h2 { font: 400 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--sp-6); text-wrap: balance; }
h3 { font: 600 var(--step-2)/1.25 var(--font-body);    letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
p  { margin: 0 0 var(--sp-4); max-width: 68ch; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.2em; }
li { margin-bottom: var(--sp-2); max-width: 62ch; }
a  { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
strong { font-weight: 600; }
figure { margin: 0; }
blockquote { margin: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible, .band-navy :focus-visible { outline-color: var(--focus); }

::selection { background: var(--sky); color: var(--navy); }

/* ---------- 3. Utilidades de layout ---------- */
.wrap       { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Antes sp-24 (96 px). Dos secciones contiguas sumaban 192 px de aire, que
   alargaba el scroll sin aportar jerarquia. sp-16 deja 128 px: sigue separando
   con claridad y recorta un tercio del recorrido. */
.section { padding-block: var(--sp-16); }
.section--tight { padding-block: var(--sp-12); }
@media (max-width: 768px) {
  .section { padding-block: var(--sp-12); }
  .section--tight { padding-block: var(--sp-8); }
}
/* Antes esto era una alternancia editorial: .shift-r llevaba margin-right: 0 y
   .shift-l margin-left: 0, asi que el bloque quedaba pegado al borde de la
   ventana, sin gutter (medido: 505 px de un lado y 0 del otro a 1440 px).
   Ahora se centran conservando la medida de 920 px. No se ensanchan a los
   1200 px de .wrap a proposito: el texto ya lleva su propio max-width (68ch
   en p, 62ch en li), asi que un contenedor mas ancho solo dejaria un hueco
   muerto a la derecha en vez de centrar el bloque de verdad. */
.shift-r, .shift-l { margin-inline: auto; width: min(920px, 100% - 2 * var(--gutter)); }

.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; max-width: 56ch; }

.chip {
  display: inline-block;
  font: 500 var(--step--1)/1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--sand); color: var(--navy);
  border-radius: var(--r-pill);
  padding: .55em 1.1em;
  margin-bottom: var(--sp-6);
}
.chip--sky { background: var(--sky); }
.chip--onDark { background: color-mix(in srgb, #fff 14%, transparent); color: var(--cream); }

.kicker {
  font: 500 var(--step--1)/1.3 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 var(--sp-3);
}

.num-tabular { font-variant-numeric: tabular-nums; }

/* ---------- 4. Glass ---------- */
.glass {
  background: color-mix(in srgb, var(--cream) 68%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, #fff 65%, transparent),
    var(--sh-3);
  color: var(--ink);
}
.glass--dark {
  background: color-mix(in srgb, var(--navy) 48%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
          backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid var(--line-onDark);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 18%, transparent), var(--sh-3);
  color: var(--cream);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass       { background: color-mix(in srgb, var(--cream) 95%, transparent); }
  .glass--dark { background: color-mix(in srgb, var(--navy) 88%, transparent); }
}
/* En móvil los paneles glass grandes pasan a sólido */
@media (max-width: 767px) {
  .glass       { background: var(--paper-raise); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass--dark { background: color-mix(in srgb, var(--navy) 92%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 var(--step-0)/1 var(--font-body);
  border-radius: var(--r-pill);
  padding: .95rem 1.6rem;
  min-height: 44px;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn--primary { background: var(--navy); color: var(--cream); box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--blue); color: var(--cream); transform: translateY(-1px); }
.btn--ghost   { background: transparent; color: var(--navy); border: 1px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--onGlass { background: color-mix(in srgb, var(--navy) 92%, transparent); color: var(--cream); }
.btn--onGlass:hover { background: var(--navy); color: var(--cream); }
.btn--onDark  { background: var(--cream); color: var(--navy); }
.btn--onDark:hover { background: #fff; color: var(--navy); }
.btn--ghostDark { background: transparent; color: var(--cream); border: 1px solid var(--line-onDark); }
.btn--ghostDark:hover { border-color: var(--cream); color: var(--cream); }
.btn--wa { background: var(--blue); color: var(--cream); }
.btn--wa:hover { background: var(--navy); color: var(--cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }


/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  transition: box-shadow .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
/* El glass va en una capa ::before y no en el propio .site-header a proposito:
   backdrop-filter sobre el header lo convierte en bloque contenedor de sus
   descendientes position:fixed, y entonces el panel movil del menu (.main-nav,
   inset: header-h 0 0 0) se colapsa a la altura del header en cuanto la pagina
   esta scrolleada. En un pseudoelemento el efecto es el mismo y no pasa. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 0; transition: opacity .25s;
  background: color-mix(in srgb, var(--cream) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: color-mix(in srgb, var(--cream) 97%, transparent); }
}

/* Header sobre hero oscuro (Pacientes internacionales).
   Sin scroll el header es transparente, asi que navy sobre navy desaparece:
   aqui se invierte. En cuanto entra el glass crema (.is-scrolled) vuelven
   los colores normales por si solos. */
.site-header--onDark:not(.is-scrolled) .brand__logo--dark  { display: none; }
.site-header--onDark:not(.is-scrolled) .brand__logo--light { display: block; }
.site-header--onDark:not(.is-scrolled) .menu-btn { color: var(--cream); border-color: var(--line-onDark); }
/* Sobre el hero navy se conserva la jerarquia: "Agendar" solido en crema y
   "Llama ahora" en contorno claro. Un solo tratamiento para los dos dejaria
   dos bloques crema pegados. */
.site-header--onDark:not(.is-scrolled) .btn--primary.btn--header { background: var(--cream); color: var(--navy); }
.site-header--onDark:not(.is-scrolled) .btn--primary.btn--header:hover { background: #fff; color: var(--navy); }
.site-header--onDark:not(.is-scrolled) .btn--ghost.btn--header { color: var(--cream); border-color: var(--line-onDark); }
.site-header--onDark:not(.is-scrolled) .btn--ghost.btn--header:hover { color: var(--cream); border-color: var(--cream); }
/* Los enlaces solo se invierten con el menu horizontal: por debajo de
   1280 px viven dentro del panel movil, que tiene fondo --paper. */
@media (min-width: 1280px) {
  .site-header--onDark:not(.is-scrolled) .main-nav > ul > li > a,
  .site-header--onDark:not(.is-scrolled) .sub-toggle { color: var(--cream); }
  .site-header--onDark:not(.is-scrolled) .main-nav > ul > li > a:hover,
  .site-header--onDark:not(.is-scrolled) .main-nav > ul > li > a[aria-current="page"] { color: var(--navy); background: var(--cream); }
}
.header-inner {
  width: min(var(--wide), 100% - 2 * var(--gutter));
  margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: var(--sp-6);
}
/* La marca del header es la FIRMA sola (LogoOrozcoFirma*), no el logotipo
   completo: el lockup con las dos lineas de descriptor obligaba a agrandar
   la cabecera y aun asi esas lineas quedaban en el limite de lo legible.
   Sin descriptor la firma puede crecer y la cabecera vuelve a 72 px.
   Se cargan las dos versiones y se alternan por CSS: la oscura por defecto
   y la blanca solo mientras el header esta sobre un hero navy sin scroll. */
.brand__logo { display: block; height: 46px; width: auto; }
.brand__logo--light { display: none; }

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
/* Los <li> heredan el margin-bottom de las listas de contenido (regla `li`).
   En la barra horizontal eso hace que la linea flex mida 8 px mas que los
   enlaces y, con align-items:center, los suba 4 px respecto a los botones
   de la derecha. En el panel movil el margen si separa, asi que se conserva. */
@media (min-width: 1280px) { .main-nav > ul > li { margin: 0; } }
.main-nav a {
  display: inline-block; text-decoration: none; color: var(--ink-soft);
  font: 500 var(--step--1)/1 var(--font-body);
  padding: .8em 1em; border-radius: var(--r-pill);
  white-space: nowrap;
}
.main-nav a:hover { color: var(--navy); background: color-mix(in srgb, var(--sand) 55%, transparent); }
.main-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

.nav-item--sub { position: relative; display: flex; align-items: center; }
.sub-toggle {
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  padding: .4em .3em; margin-left: -.6em; border-radius: var(--r-sm);
  font-size: .7rem; line-height: 1;
}
.sub-toggle::after { content: "▾"; }
.subnav {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 260px; padding: var(--sp-2); margin: 0; list-style: none;
  background: var(--paper-raise);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  display: none;
}
/* Puente invisible sobre el hueco de 10 px que separa el enlace del panel.
   Sin el, al bajar el raton hacia el submenu se cruzan 10 px que no
   pertenecen ni al <li> ni al .subnav (son del .header-inner): se pierde
   el :hover y el panel se cierra antes de llegar. El puente pertenece al
   .subnav, que es descendiente del <li>, asi que mantiene vivo el hover.
   Solo existe mientras el panel esta abierto: con display:none tampoco se
   renderiza su ::before, asi que no bloquea nada cuando esta cerrado. */
@media (min-width: 1280px) {
  .subnav::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -10px; height: 10px;
  }
}
.nav-item--sub:hover .subnav,
.nav-item--sub:focus-within .subnav,
.subnav.is-open { display: block; }
.subnav a { display: block; padding: .65em .9em; border-radius: var(--r-sm); font-weight: 400; }
.subnav .subnav__group { font: 500 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); padding: .8em .9em .3em; }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); }
.header-tel { display: none; }
@media (min-width: 1024px) { .header-tel { display: inline-flex; } }
/* Los botones del header van a la escala de los enlaces del menu (--step--1,
   ~38 px de alto) y no a la del boton general (--step-0 y min-height 44 px):
   a tamano completo pesaban demasiado y rompian la linea de la barra.
   Por debajo de 1024 px se conserva el min-height porque ahi el objetivo
   es tactil y "Agendar" es la llamada principal. */
.btn--header {
  font: 600 var(--step--1)/1 var(--font-body);
  padding: .72em 1.2em;
  letter-spacing: .01em;
}
@media (min-width: 1024px) { .btn--header { min-height: 0; } }
/* Borde transparente para que el solido mida exactamente lo mismo que el
   de contorno: si no, "Llama ahora" queda 2 px mas alto que "Agendar". */
.btn--primary.btn--header { border: 1px solid transparent; box-shadow: var(--sh-1); }
.btn--primary.btn--header:hover { box-shadow: var(--sh-2); }

.menu-btn {
  display: none; border: 1px solid var(--line-strong); background: transparent;
  color: var(--navy); border-radius: var(--r-pill); padding: .65em 1.1em;
  font: 600 var(--step--1)/1 var(--font-body); cursor: pointer; min-height: 44px;
}

/* Menú compacto: por debajo de 1280 px el menú completo no cabe
   (5 pestañas + idioma + teléfono + botón), así que se colapsa en panel */
@media (max-width: 1279px) {
  .header-actions { margin-left: auto; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
    background: var(--paper);
    padding: var(--sp-8) var(--gutter) var(--sp-16);
    overflow-y: auto; display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { font-size: var(--step-1); padding: .8em 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .main-nav a:hover { background: transparent; }
  .nav-item--sub { flex-wrap: wrap; }
  .subnav { position: static; display: block; border: 0; box-shadow: none; background: transparent; min-width: 0; width: 100%; padding: 0 0 0 var(--sp-4); }
  .subnav a { font-size: var(--step-0); border-bottom: 0; padding: .55em 0; }
  .sub-toggle { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .brand__logo { height: 38px; }
}

/* ---------- 7. Hero (Inicio) ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-top: calc(var(--header-h) + var(--sp-12));
  padding-bottom: var(--sp-16);
  overflow: clip;
}
.hero__orb {
  position: absolute; z-index: -1;
  top: -22%; right: -12%;
  width: min(62vw, 900px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-orb);
  opacity: .32; filter: blur(60px);
  pointer-events: none;
}
/* El marco exterior une toda el area del hero (tarjeta de texto + retrato)
   en una sola pieza, con la misma linea fina azul y esquinas redondeadas
   que el marco del retrato. Fondo transparente: debajo sigue viendose el
   orbe degradado de la seccion. overflow:clip recorta lo que sobresalga,
   que es lo que mantiene la firma dentro del area. */
.hero__grid {
  --hero-pad: clamp(var(--sp-4), 2.2vw, var(--sp-8));
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: end;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent);
  border-radius: var(--r-xl);
  padding: var(--hero-pad);
  overflow: clip;
  position: relative;
}
.hero__card { padding: clamp(var(--sp-6), 4vw, var(--sp-12)); }
.hero__card h1 { margin-bottom: var(--sp-4); }
.hero__creds {
  font: 500 var(--step--1)/1.6 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4); margin: var(--sp-6) 0;
}
.hero__media { position: relative; min-height: 320px; }
/* Firma DETRAS del retrato (z-index 0 contra el 1 del retrato): asoma a la
   izquierda del marco de la foto y desaparece tras el. Cuando llegue la foto
   definitiva, que es un recorte con fondo transparente, se vera pasar por
   detras del doctor. La posicion depende del aire que traiga el propio SVG:
   si se re-exporta con el viewBox ajustado al trazo, hay que recalibrar. */
.hero__firma {
  position: absolute; z-index: 0;
  inset: -26% auto auto -12%; width: 108%;
  opacity: .9; pointer-events: none;
  height: auto;
}
/* El retrato ya NO lleva marco propio: su limite es el marco grande del hero.
   Se alinea a la derecha y desborda el padding inferior del marco con un margen
   negativo, para que el doctor apoye en el borde en vez de flotar. object-fit
   contain con la proporcion real del archivo (4:5) para que no se recorte y
   salga lo mas grande posible; el marco grande recorta lo que sobre. */
.hero__portrait {
  position: relative; z-index: 1;
  height: clamp(400px, 50vw, 760px); width: auto;
  aspect-ratio: 4 / 5;
  margin: 0 calc(-1 * var(--hero-pad)) calc(-1 * var(--hero-pad)) auto;
}
.hero__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; }
/* Una sola columna a partir de tablet: se conserva el retrato centrado con
   altura acotada, como estaba. El tratamiento a sangre es solo de movil. */
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; min-height: 0; }
  .hero__portrait { height: clamp(320px, 78vw, 460px); width: auto; margin-inline: auto; }
}

/* --- Solo movil (<=640 px). Escritorio y tablet no cambian. ---
   El marco pierde padding y gap para que la linea azul abrace la tarjeta
   blanca y la foto se apoye en ella en vez de flotar. La foto ocupa todo el
   ancho: el PNG tiene contenido de borde a borde en horizontal, asi que el
   corte del brazo cae justo sobre el borde del marco. La tarjeta pierde sus
   bordes laterales para no duplicar la linea, y su radio inferior iguala al
   del marco para que no se vean dos esquinas concentricas. */
@media (max-width: 640px) {
  .hero__grid { padding: 0; gap: 0; }
  .hero__portrait {
    width: 100%; height: auto; aspect-ratio: 4 / 5;
    margin: 0;
  }
  /* Mas arriba que en escritorio: al crecer la foto, la firma se perdia detras
     del cuerpo. Aqui asoma por encima del hombro. */
  .hero__firma { inset: -9% auto auto 0; width: 100%; }
  /* El orbe azul se dimensiona en vw y se coloca en % del alto del hero, asi
     que en movil quedaba en 233 px y a -286 px: entero fuera de la seccion, es
     decir invisible. Aqui se agranda y se recoloca para que el degradado se
     vea igual que en escritorio. */
  .hero__orb { width: min(135vw, 640px); top: 0; right: -28%; opacity: .42; }
  /* La tarjeta monta sobre la foto en vez de quedar debajo: tapa el canto duro
     del recorte y da profundidad. Radio --r-xl en las cuatro esquinas, el mismo
     del marco, para que las de abajo coincidan exactamente con las suyas y no
     se vean dos curvas concentricas. z-index 2 para quedar sobre el retrato. */
  .hero__card {
    position: relative; z-index: 2;
    border-radius: var(--r-xl);
    margin-top: calc(-1 * var(--sp-8));
  }
}

/* Hero interior (páginas simples) */
.page-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
}
.page-hero--sand { background: linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%); }
.page-hero--navy { background: var(--navy); color: var(--cream); }
.page-hero--navy .lede { color: var(--sand); }
.page-hero--navy .kicker { color: var(--sky); }

/* Header de página de servicio — 9.5 (versión placeholder: orb + glass dark) */
.svc-hero {
  position: relative; isolation: isolate;
  padding-top: var(--header-h);
}
.svc-hero__frame {
  position: relative; overflow: clip;
  border-radius: var(--r-xl);
  margin-top: var(--sp-8);
  background: var(--grad-orb);
  min-height: clamp(380px, 52vh, 560px);
  display: grid; place-items: center;
  padding: clamp(var(--sp-8), 6vw, var(--sp-16));
}
/* Cuando llegue la foto: capa blur + recorte nítido (mantener estas reglas)
*/
/* Cabecera de ficha (9.5): la MISMA foto dos veces sobre el mismo marco —una
   copia desenfocada que llena el fondo y un recorte nitido enmascarado en
   circulo—. Van como <img> y no como background para que tengan alt e
   indexen; al ser la misma URL el navegador la descarga una sola vez. */
.svc-hero__blur,
.svc-hero__sharp {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.svc-hero__blur  { filter: blur(28px); transform: scale(1.08); }
/* El brief dibujaba esta mascara como `closest-side circle`, pero su radio es
   la mitad de la altura del marco (~280 px) y el panel mide 760 px de ancho:
   el circulo nitido quedaba entero DEBAJO del panel y el efecto no se veia.
   Una elipse ancha conserva la intencion —nitido al centro, disuelto en los
   bordes— y deja la foto nitida asomando a los lados del panel. */
.svc-hero__sharp {
  -webkit-mask-image: radial-gradient(ellipse 80% 96% at 50% 42%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 96% at 50% 42%, #000 42%, transparent 100%);
}
.svc-hero__veil { position: absolute; inset: 0; background: var(--scrim); pointer-events: none; }
.svc-hero__panel {
  position: relative; z-index: 1;
  width: min(760px, 100%); text-align: center;
  padding: clamp(var(--sp-6), 5vw, var(--sp-12));
}
.svc-hero__panel .lede { color: var(--cream); margin-inline: auto; }
.svc-hero__panel .kicker { color: var(--sky); }
.svc-hero__panel .btn-row { justify-content: center; margin-top: var(--sp-6); }
.svc-hero__pending {
  position: absolute; z-index: 1;
  bottom: var(--sp-3); left: 50%; transform: translateX(-50%);
  font: 500 var(--step--1)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--sky); opacity: .85; text-align: center;
  padding: 0 var(--sp-4); max-width: 100%; word-break: break-all;
}
.svc-hero__fade {
  height: var(--sp-16);
  background: linear-gradient(180deg, transparent, var(--paper));
  margin-top: calc(-1 * var(--sp-16));
  position: relative; pointer-events: none;
}
@media (max-width: 767px) {
  .svc-hero__frame { border-radius: var(--r-lg); min-height: 340px; }
  /* En movil no hay capa de desenfoque (cuesta GPU, 07 §9.5): queda la foto
     entera con su velo, sin mascara circular. */
  .svc-hero__blur { display: none; }
  .svc-hero__sharp { -webkit-mask-image: none; mask-image: none; }
}

/* Migas de pan */
.breadcrumbs { font: 400 var(--step--1)/1.4 var(--font-body); color: var(--ink-mute); margin: var(--sp-6) 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .4em; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-mute); }

/* ---------- 8. Placeholder de imagen (8.1) ---------- */
.img-slot { margin: 0; }
/* Foto real ya montada dentro de un .img-slot: hereda la proporcion que el
   HTML declara en --ratio, igual que hacia el placeholder, y el mismo radio.
   Los pares antes/despues son 1080x1350, o sea 4:5 exacto, asi que con
   object-fit: cover no se recorta nada. */
.img-slot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ratio, 4/3);
  object-fit: cover;
  border-radius: var(--r-md);
}
.img-slot__ph {
  aspect-ratio: var(--ratio, 4/3);
  display: grid; place-content: center; gap: var(--sp-2);
  text-align: center; padding: var(--sp-6);
  background: var(--grad-warm);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-mute);
  font: 500 var(--step--1)/1.4 var(--font-body);
}
.img-slot__file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.img-slot__meta { opacity: .75; }
.img-slot--dark .img-slot__ph { background: color-mix(in srgb, var(--navy) 86%, #000); border-color: var(--line-onDark); color: var(--sky); }
.img-slot figcaption { font: 400 var(--step--1)/1.5 var(--font-body); color: var(--ink-mute); padding-top: var(--sp-3); }

/* Placeholder de firma / logo SVG pendiente */
.svg-slot {
  display: grid; place-content: center; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--ink-mute); background: transparent;
  font: 500 var(--step--1)/1.3 var(--font-body);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: var(--sp-4);
}
.svg-slot--firma { aspect-ratio: 5/2; opacity: .55; }

/* ---------- 9. Bloque editorial (9.3) ---------- */
.editorial { position: relative; }
.editorial__display {
  /* Antes step-5: 100,8 px a 1440 y 278 px de alto solo el titular.
     step-4 (max 64 px) lo equilibra con el resto de la seccion. */
  font: 300 var(--step-4)/1.02 var(--font-display);
  letter-spacing: -0.02em; color: var(--navy);
  /* Sin max-width: el corte en dos lineas lo marca el <br> del HTML (antes
     de la coma arriba, despues abajo). Con 14ch el titular se partia en 3. */
  max-width: none; margin: 0;
}
.editorial__row {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  align-items: start;
}
.editorial__aside { padding-top: var(--sp-4); }
.editorial__aside p { font-size: var(--step-0); max-width: 44ch; }
.editorial__cards {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-top: var(--sp-12);
  align-items: stretch;
}
.editorial__card {
  border-radius: var(--r-lg); overflow: clip;
  background: var(--paper-raise); border: 1px solid var(--line);
  padding: var(--sp-8);
}
.editorial__card--tint { background: var(--sand); border: 0; }
/* La tarjeta de la lista se reparte en columna para poder empujar el CTA al
   fondo con margin-top:auto. Hace falta porque las dos tarjetas se estiran a
   la misma altura y, con la foto en 4:5, a la izquierda sobraban 293 px.
   Solo esta tarjeta: la de la foto no debe volverse flex, que su <figure>
   depende de aspect-ratio. */
.editorial__card--list { display: flex; flex-direction: column; }
.speclist-cta {
  margin-top: auto; padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.speclist-cta p {
  font: 400 var(--step-1)/1.35 var(--font-display);
  color: var(--navy); max-width: 24ch;
  margin: 0 0 var(--sp-4);
}

/* Fotos del equipo (Inicio): tres 4:5 apiladas que se cruzan solas.
   El archivo es 1080x1350, asi que la proporcion es 4:5 y no la 4:3 que tenia
   el placeholder. Solo la que lleva .is-active esta visible; el resto quedan
   fuera del arbol de accesibilidad con aria-hidden, que conmuta el JS.
   Sin JS se queda fija la primera, que es un estado valido. */
.team-slides {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: clip;
  background: color-mix(in srgb, var(--navy) 8%, transparent);
}
.team-slides__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity .6s ease;
}
.team-slides__img.is-active { opacity: 1; }
/* Con movimiento reducido no hay rotacion (el JS ni la arranca) ni fundido. */
@media (prefers-reduced-motion: reduce) {
  .team-slides__img { transition: none; }
}
.editorial__card--sky  { background: var(--sky);  border: 0; color: var(--navy); }
@media (max-width: 1023px) {
  .editorial__row, .editorial__cards { grid-template-columns: 1fr; }
  .editorial__display { font-size: var(--step-3); }
}

/* Lista tipográfica de especialidades (equipo, en Inicio) */
.speclist { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.speclist li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: var(--sp-3) 0; margin: 0; max-width: none;
}
/* Cada <li> era su propia rejilla, asi que la columna del nombre se medía fila
   por fila y cada descripcion arrancaba en una x distinta: de ahi el aspecto
   dispar. Con subgrid las seis filas comparten la MISMA columna, que se mide
   por el nombre mas largo ("Enfermeria quirurgica"), y todas las descripciones
   quedan alineadas. Va en @supports para que un navegador sin subgrid conserve
   el comportamiento anterior en vez de romper la fila en dos lineas. */
@supports (grid-template-columns: subgrid) {
  .speclist { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-6); }
  .speclist li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.speclist li:last-child { border-bottom: 1px solid var(--line); }
.speclist .speclist__name { font: 600 var(--step-0)/1.3 var(--font-body); color: var(--navy); white-space: nowrap; }
.speclist .speclist__role { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; max-width: 52ch; }
@media (max-width: 640px) {
  /* En movil el nombre va encima de su descripcion: se deshace la subrejilla
     y la lista vuelve a ser un bloque normal. */
  .speclist { display: block; }
  .speclist li { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ---------- 10. Sección carpeta (9.4) ---------- */
.folder { margin-top: var(--sp-8); }
/* La fila de pestanas NO envuelve: con flex-wrap las que pasaban a la
   segunda linea formaban una escalera rota, porque cada pestana no tiene
   borde inferior y monta 1 px sobre el panel. Ahora es una sola fila que
   se desplaza en horizontal cuando no cabe (en pantallas anchas no hay
   nada que desplazar, asi que no se nota). El montaje de 1 px sobre el
   panel pasa del tab al contenedor: con overflow, un margen negativo en
   el hijo se recortaria. */
.folder__tabs {
  display: flex; gap: var(--sp-1); flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 var(--sp-4); margin: 0 0 -1px;
  position: relative; z-index: 1;
}
.folder__tabs::-webkit-scrollbar { display: none; }
.folder__tab {
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--sand);
  color: var(--ink-soft);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: .5em 1em .6em;
  /* Cormorant en las pestanas para darles peso editorial. Sube a --step-2
     (23 a 28,8 px) porque la regla del sitio es que Cormorant nunca baje de
     22 px, y --step--1 la habria dejado en 14,7. Con esa subida el padding
     en em crecia demasiado, asi que se ajusta abajo. */
  font: 400 var(--step-2)/1.1 var(--font-display);
  letter-spacing: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.folder__tab:hover { color: var(--navy); }
.folder__tab[aria-selected="true"] {
  background: var(--paper-raise); color: var(--navy); font-weight: 600;
}
.folder__panelwrap {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-6), 3.5vw, var(--sp-12));
}

/* En un telefono las cuatro pestanas suman ~830 px sobre los ~335 disponibles.
   Aunque la fila se desplaza, quedaba cortada a hueso contra el borde y sin
   ningun indicio de que hubiera mas: se leia como maquetacion rota. Aqui dejan
   de ser lenguetas y pasan a una rejilla 2x2 encima del panel — entran las
   cuatro, no hay scroll escondido y el area de toque llega a los 48 px. Como ya
   no montan sobre el panel, recuperan su borde inferior y su radio completo. */
@media (max-width: 767px) {
  .folder__tabs {
    display: grid;
    /* minmax(0,1fr) y no 1fr: con 1fr el minimo es el ancho min-content del
       texto, asi que "Cirugia de mama" empujaba su columna a 173 px y dejaba
       la vecina en 154. Con el minimo en cero las dos miden igual. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    overflow: visible;
    padding: 0; margin: 0 0 var(--sp-3);
  }
  .folder__tab {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 0;
    padding: .5em .7em;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; text-wrap: balance;
  }
  /* Sobre arena, el estado activo necesita mas que un cambio de fondo: en la
     rejilla no hay lengueta unida al panel que lo indique. */
  .folder__tab[aria-selected="true"] {
    background: var(--navy); color: var(--cream); border-color: var(--navy);
  }
  .folder__panelwrap { padding: var(--sp-6) var(--sp-4); }
}
.folder__panel[hidden] { display: none; }
.folder__cards {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.svc-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4);
  transition: transform .18s, box-shadow .18s;
}
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.svc-card h3, .svc-card .svc-card__title { font: 600 var(--step-1)/1.25 var(--font-body); margin: 0; letter-spacing: -0.01em; }
.svc-card p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.svc-card a { font: 600 var(--step--1)/1 var(--font-body); }

/* Hub de servicios: encabezados de familia con lengüeta */
.family { border-top: 1px solid var(--line); padding-top: var(--sp-8); margin-top: var(--sp-12); }
.family:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.family__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: var(--sp-6); }

/* ---------- 11. Bandas ---------- */
.band-navy {
  background: var(--navy); color: var(--cream);
  padding-block: var(--sp-16);
}
.band-navy h2 { color: var(--cream); }
.band-navy p { color: var(--cream); }
.band-navy .muted { color: var(--sand); }
.band-navy a { color: var(--sky); }
.band-sand { background: var(--sand); padding-block: var(--sp-12); }
.band-sand h2 { color: var(--navy); }

/* Cita grande en Cormorant italic sobre arena */
.bigquote {
  font: 300 italic var(--step-2)/1.35 var(--font-display);
  /* Centrada y a 880 px, la misma medida que usan las otras bandas de arena
     del sitio. Antes: margin:0 (la cita quedaba a 113 px de la izquierda y
     797 de la derecha) y max-width en ch, que aqui engaña: en Cormorant
     italica un ch son 12,6 px, asi que 34ch daban 427 px dentro de un
     contenedor de 1200 y el texto caia en 10 lineas, como una columna.
     En px y no en ch para no repetir el error si cambia la fuente.
     step-2 va de 23 a 28,8 px: Cormorant nunca baja de 22. */
  color: var(--navy); max-width: 880px; margin-inline: auto;
}
.bigquote footer { font: 500 var(--step--1)/1.4 var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-top: var(--sp-6); }

/* Aviso de urgencia (quemados) */
.notice-danger {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-left: 4px solid var(--danger);
  background: var(--paper-raise);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-6) 0;
}
.notice-danger strong { color: var(--danger); }

/* ---------- 12. Tablas ---------- */
.table-scroll { overflow-x: auto; margin: var(--sp-6) 0; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse; width: 100%;
  font: 400 var(--step--1)/1.55 var(--font-body);
}
caption { text-align: left; font: 600 var(--step-0)/1.4 var(--font-body); padding-bottom: var(--sp-3); color: var(--navy); }
th, td {
  text-align: left; vertical-align: top;
  padding: .85em 1em;
  border-bottom: 1px solid var(--line);
}
thead th {
  font: 600 var(--step--1)/1.3 var(--font-body);
  color: var(--navy);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
tbody th { font-weight: 600; color: var(--navy); }
.table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--sand) 40%, transparent); }
td { font-variant-numeric: tabular-nums; }

/* Tabla de credenciales: líneas finas, Inter tabular */
.cred-table th { white-space: normal; }
.cred-table td { font-weight: 600; color: var(--navy); }

/* ---------- 13. Proceso en pasos ---------- */
.steps { list-style: none; margin: var(--sp-8) 0 0; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6);
  border-top: 1px solid var(--line);
  padding: var(--sp-8) 0; margin: 0; max-width: none;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font: 300 var(--step-4)/0.9 var(--font-display);
  color: var(--sky); min-width: 2ch;
}
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { margin-bottom: 0; }
@media (max-width: 640px) { .steps > li { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* Línea de tiempo vertical (formación) */
.timeline { list-style: none; margin: var(--sp-6) 0; padding: 0; border-left: 1px solid var(--line-strong); }
.timeline > li { position: relative; padding: 0 0 var(--sp-8) var(--sp-8); margin: 0; max-width: 60ch; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: ""; position: absolute; left: -5px; top: .5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sky); border: 1px solid var(--blue);
}
.timeline .timeline__title { font: 600 var(--step-0)/1.35 var(--font-body); color: var(--navy); }
.timeline p { margin: .2em 0 0; color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- 14. Antes y después (9.8) ---------- */
.ba-case { margin: var(--sp-8) 0; }
.ba-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ba-case .img-slot__ph { border-style: solid; } /* el contenido es la foto: marco sobrio */
.ba-case figcaption {
  font: 400 var(--step--1)/1.5 var(--font-body);
  color: var(--ink-mute); padding-top: var(--sp-3); max-width: 60ch;
}

/* ---------- 15. Tarjetas de opinión (9.7) ---------- */
.reviews {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.review {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: radial-gradient(130% 110% at 100% 100%,
      color-mix(in srgb, var(--sky) 55%, transparent) 0%, transparent 58%),
    var(--paper-raise);
}
.review:nth-child(3n+2) {
  background: radial-gradient(130% 110% at 100% 100%,
      color-mix(in srgb, var(--sand) 75%, transparent) 0%, transparent 58%),
    var(--paper-raise);
}
.review:nth-child(3n+3) {
  background: radial-gradient(130% 110% at 100% 100%,
      color-mix(in srgb, var(--ice) 85%, transparent) 0%, transparent 58%),
    var(--paper-raise);
}
.reviews .review:nth-child(even) { margin-top: var(--sp-6); }
@media (max-width: 767px) { .reviews .review:nth-child(even) { margin-top: 0; } }
.review blockquote p {
  font: 300 italic var(--step-1)/1.45 var(--font-display);
  color: var(--ink); margin: 0 0 var(--sp-4);
}
.review footer { font: 500 var(--step--1)/1.4 var(--font-body); color: var(--ink-mute); }
.reviews-src { font-size: var(--step--1); color: var(--ink-mute); margin-top: var(--sp-8); }

/* ---------- 16. FAQ (9.10) ---------- */
.faq { border-top: 1px solid var(--line); margin-top: var(--sp-8); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center;
  font: 600 var(--step-1)/1.35 var(--font-body); color: var(--navy);
  padding: var(--sp-6) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font: 300 var(--step-2)/1 var(--font-display);
  color: var(--ink-mute); transition: rotate .2s; rotate: 0deg;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq .faq__a { padding: 0 0 var(--sp-6); }
.faq .faq__a p { color: var(--ink-soft); }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- 17. Listas de comprobación ---------- */
.checklist { list-style: none; margin: var(--sp-4) 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.8em; margin-bottom: var(--sp-3); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .75em; height: .4em;
  border-left: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}
.checklist--x li::before {
  width: .65em; height: .65em; top: .35em;
  border: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--ink-mute) 45%, var(--ink-mute) 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--ink-mute) 45%, var(--ink-mute) 55%, transparent 56%);
  transform: none;
}

/* ---------- 18. Tarjetas genéricas ---------- */
.card {
  background: var(--paper-raise); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-6);
  box-shadow: var(--sh-1);
}
.card--sand { background: var(--sand); border: 0; }
.card-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Con auto-fit caben 4 columnas en un .wrap de 1200 px, asi que las 6 tarjetas
   del equipo dejaban una segunda fila de solo dos (Enfermeria quirurgica y
   Cardiologia) pegadas a la izquierda. A 3 columnas son 2 filas completas.
   Es un modificador y no un cambio de .card-grid porque la otra rejilla del
   sitio (Cirugia estetica) tiene 4 tarjetas y ya cierra fila con auto-fit. */
@media (min-width: 1024px) {
  .card-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tarjeta de equipo, versión sin retratos (9.6, decisión pendiente de fotos) */
.team-card {
  border-radius: var(--r-md); overflow: clip;
  background: linear-gradient(to top,
      color-mix(in srgb, var(--navy) 92%, transparent) 0%,
      color-mix(in srgb, var(--navy) 70%, transparent) 100%);
  color: var(--cream);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-2);
  min-height: 160px;
}
.team-card__name { font: 600 var(--step-1)/1.2 var(--font-body); }
.team-card__role { color: var(--sand); font-size: var(--step--1); }

/* Tarjeta internacional con orb */
.intl-card {
  border-radius: var(--r-xl);
  background: var(--grad-orb);
  color: var(--cream);
  padding: clamp(var(--sp-8), 5vw, var(--sp-16));
  position: relative; overflow: clip;
}
.intl-card h2, .intl-card p { color: var(--cream); }
.intl-card .lede { color: var(--ice); }
/* --sky sobre el arranque claro del degradado daba 1,1:1 (practicamente
   invisible). Con --navy sube a 8,39:1. Afecta a "Español · English · Français"
   en Inicio y a "A distancia" en Contacto, que son la misma tarjeta.
   Coherente con la regla de no usar --sky como texto sobre fondo claro. */
.intl-card .kicker { color: var(--navy); }

/* ---------- 19. Formularios (9.11) ---------- */
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.form-grid .form-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field label {
  display: block;
  font: 600 var(--step--1)/1.3 var(--font-body);
  color: var(--navy); margin-bottom: var(--sp-2);
}
.form-field .req { color: var(--danger); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 52px;
  padding: .8em 1em;
  font: 400 var(--step-0)/1.4 var(--font-body);
  color: var(--ink);
  background: var(--paper-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.form-consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--step--1); color: var(--ink-soft); }
.form-consent input { width: 1.15em; height: 1.15em; min-height: 0; margin-top: .2em; accent-color: var(--navy); }
.form-error { color: var(--danger); font: 500 var(--step--1)/1.4 var(--font-body); }
.form-note { font-size: var(--step--1); color: var(--ink-mute); }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } /* honeypot */

/* ---------- 20. Descenso al footer ---------- */
.to-footer { background: var(--grad-toFooter); padding-block: var(--sp-24) 0; margin-top: var(--sp-24); }
.to-footer .cta-card {
  width: min(880px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  text-align: center;
  padding: clamp(var(--sp-8), 5vw, var(--sp-16));
  margin-bottom: var(--sp-24);
}
.to-footer .cta-card h2 { color: var(--cream); }
.to-footer .cta-card p { margin-inline: auto; color: var(--cream); }
.to-footer .cta-card .btn-row { justify-content: center; margin-top: var(--sp-8); }

.site-footer {
  background: var(--navy); color: var(--cream);
  position: relative; overflow: clip;
  padding-block: var(--sp-16) var(--sp-8);
}
.site-footer__mark {
  position: absolute; right: -4%; bottom: -18%;
  width: min(52vw, 560px); opacity: .10;
  color: var(--sky); pointer-events: none;
}
.footer-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  position: relative;
}
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font: 600 var(--step--1)/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--sky); text-decoration: underline; }
.site-footer p { color: var(--sand); font-size: var(--step--1); }
.footer-brand__logo { display: block; width: min(290px, 100%); height: auto; margin-bottom: var(--sp-6); }
.footer-creds { font-variant-numeric: tabular-nums; color: var(--sand); font-size: var(--step--1); line-height: 1.7; }
.footer-legal {
  position: relative;
  border-top: 1px solid var(--line-onDark);
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  font-size: var(--step--1); color: var(--sand);
}
.footer-legal a { color: var(--sand); text-decoration: underline; }
/* Redes sociales del footer: los glifos van sueltos, sin circulo alrededor.
   Antes el circulo era lo que unificaba tamano y alineacion; al quitarlo, esa
   consistencia la dan el viewBox comun de 24 y el mismo tamano de render, y
   todos los glifos pasan a ser SOLIDOS para que se reconozcan de un vistazo.
   El padding de 6 px no se ve pero mantiene el area de toque en 44 px, que sin
   el circulo se habria quedado en 32.
   Los selectores llevan .site-footer delante para ganarle en especificidad a
   las reglas genericas .site-footer ul / li / a:hover de mas arriba. */
.site-footer .footer-social {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.site-footer .footer-social li { margin: 0; max-width: none; }
.site-footer .footer-social a {
  display: block; padding: 6px;
  color: var(--sand); text-decoration: none;
  transition: color .2s, transform .2s;
}
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible {
  color: var(--cream); text-decoration: none; transform: translateY(-2px);
}
.site-footer .footer-social svg { width: 32px; height: 32px; display: block; }

/* Redes en Contacto: icono + nombre, no una lista de texto. El logotipo hereda
   el color con `currentColor`, asi que el mismo SVG sirve sobre crema (azul) y
   sobre navy (crema) sin necesitar una segunda version del archivo. */
.social-list {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.social-list li { margin: 0; max-width: none; }
.social-list a {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-raise);
  color: var(--ink); text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.social-list a:hover,
.social-list a:focus-visible {
  border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--sh-1);
  color: var(--ink); text-decoration: none;
}
.social-list svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--blue); }
.social-list__name { display: block; font: 600 var(--step-0)/1.3 var(--font-body); color: var(--navy); }
.social-list__desc { display: block; font-size: var(--step--1); color: var(--ink-mute); }

/* Datos del consultorio: icono en vez de la etiqueta escrita ("Telefono:",
   "WhatsApp:"). El icono ocupa su propia columna para que las cuatro filas
   queden alineadas aunque una de ellas tenga dos lineas. */
.datos-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.datos-contacto li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-4);
  align-items: start; margin: 0; max-width: none;
}
.datos-contacto svg { width: 22px; height: 22px; color: var(--blue); margin-top: .15em; }
.datos-contacto a { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }

/* Icono dentro de un boton: hereda el color del texto y no se deforma. */
.btn__icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* Bloque del socio de coordinacion: logotipo + texto. El logo entregado trae
   fondo crema propio (no es transparente), asi que se le da el mismo radio y un
   borde tenue para que ese rectangulo se lea como una tarjeta y no como un
   recorte mal hecho sobre la arena de la seccion. */
.socio { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.socio__logo {
  width: 200px; height: auto; flex: 0 0 auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
}
.socio > div { flex: 1 1 320px; }
.socio h3 { margin-top: 0; }
.socio p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .socio { gap: var(--sp-4); }
  .socio__logo { width: 160px; }
}

/* Aviso posterior al envio del formulario */
.form-sent {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ice) 55%, transparent);
  color: var(--ink); font-size: var(--step--1); max-width: none;
}
.form-sent:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Logotipo de Doctoralia junto al nombre, en el pie de la seccion de opiniones */
.brand-inline {
  display: inline-flex; align-items: center; gap: .35em;
  vertical-align: baseline;
}
.brand-inline svg { width: .95em; height: .95em; flex: 0 0 auto; }

/* ---------- 21. WhatsApp flotante ---------- */
/* Visible siempre y en todos los tamanos. Antes se ocultaba por completo en
   escritorio (>=1024 px) y en movil solo aparecia despues de pasar el hero,
   controlado por un IntersectionObserver en main.js que ya no existe.
   z-index 50: por encima del contenido y por debajo del panel movil del
   menu (55), para que al abrir el menu no quede flotando sobre el. */
.wa-float {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue); color: var(--cream);
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  transition: background .2s, transform .2s;
}
.wa-float:hover { background: var(--navy); color: var(--cream); transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; }

/* ---------- 21b. Selector de idioma flotante ----------
   Vive fuera del header para no cargar la nav. Abajo a la IZQUIERDA porque
   la derecha la ocupa el flotante de WhatsApp. z-index 56: por encima del
   panel movil del menu (55) y del propio header (60), que en movil ocupa
   toda la pantalla cuando el menu esta abierto.
   EN y FR siguen apagados hasta que existan /en/ y /fr/ (README, pendiente 6):
   cuando existan, cambiar cada <span class="lang-float__item is-off"> por
   <a href="/en/..."> y mover is-current. */
.lang-float {
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 61;
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang-float { background: color-mix(in srgb, var(--cream) 97%, transparent); }
}
.lang-float__item {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em .62em; border-radius: var(--r-pill);
  font: 600 .7rem/1 var(--font-body); letter-spacing: .08em;
  color: var(--ink-mute); text-decoration: none;
  transition: background .2s, color .2s;
}
.lang-float__item.is-current { color: var(--navy); background: var(--sand); }
.lang-float__item.is-off { opacity: .5; cursor: not-allowed; }
a.lang-float__item:hover { color: var(--navy); background: color-mix(in srgb, var(--sand) 55%, transparent); }
.lang-float__flag {
  width: 20px; height: 14px; flex: none;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--line) inset;
}
@media (max-width: 1023px) {
  .lang-float { left: var(--sp-3); bottom: var(--sp-3); padding: 3px; }
  .lang-float__item { padding: .38em .5em; gap: .34em; letter-spacing: .05em; }
  .lang-float__flag { width: 17px; height: 12px; }
}

/* ---------- 22. Movimiento ---------- */
html.js .reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 23. Varios ---------- */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--navy); color: var(--cream);
  padding: .8em 1.2em; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; font: 600 var(--step--1)/1 var(--font-body);
}
.skip-link:focus-visible { top: 0; }

.two-col { display: grid; gap: var(--sp-8); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.related-links { border-top: 1px solid var(--line); margin-top: var(--sp-12); padding-top: var(--sp-6); font-size: var(--step--1); color: var(--ink-mute); }

.map-embed { border: 0; width: 100%; height: 380px; border-radius: var(--r-md); display: block; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--sp-12) 0; }

/* ---------- 23. Aviso de idioma ----------
   Tarjeta pequena sobre el selector flotante. Solo aparece si el navegador NO
   esta en espanol, asi que un paciente de Merida nunca la ve. Se cierra y la
   decision se recuerda en localStorage: no vuelve a salir en todo el sitio.
   No bloquea nada — no es un modal, no atrapa el foco y no tapa contenido. */
.lang-hint {
  position: fixed; left: var(--sp-4); bottom: calc(var(--sp-4) + 52px);
  z-index: 62; width: min(290px, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--paper-raise);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2);
  font: 400 var(--step--1)/1.45 var(--font-body);
  color: var(--ink);
}
html.js .lang-hint[hidden] { display: none; }
.lang-hint__text { margin: 0 0 var(--sp-3); max-width: none; }
.lang-hint__go {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 var(--step--1)/1 var(--font-body);
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.lang-hint__go:hover { color: var(--blue); border-color: var(--blue); }
.lang-hint__flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line) inset; }
.lang-hint__close {
  position: absolute; top: 4px; right: 4px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-mute); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.lang-hint__close:hover { background: var(--sand); color: var(--navy); }
/* Entrada discreta: aparece un momento despues, para no competir con el hero */
html.js .lang-hint { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
html.js .lang-hint.is-in { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .lang-hint { left: var(--sp-3); bottom: calc(var(--sp-3) + 46px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .lang-hint { transition: none; }
}