/* =========================================================================
   Maqueta del sitio de Dioderm — hoja de estilo

   🔴 ALINEADA A LA GUÍA DE ESTILO OFICIAL (Frida Retana, recibida 2026-09-11).
   Antes los colores estaban MUESTREADOS DEL LOGO a ojo y la tipografía era la
   del sistema. Ahora son los valores de la guía, tal cual. Lo que se cambie
   aquí se cambia contra la guía, no contra el gusto.

   Paleta      #02486A azul profundo · #066C92 azul clínico · #A7BC39 lima
   Neutros     #172A33 tinta · #DDECEF hielo · #F2F7F8 niebla · #FFF blanco
   Tipografía  Montserrat 400 / 600 / 700 / 800
   Balance     60% blanco · 22% azul profundo · 13% azul clínico · 5% lima
   Espaciado   retícula de 8 px
   Regla madre «Si el diseño se siente saturado, probablemente sobra algo.»
   ========================================================================= */

:root{
  --azul:#02486A;          /* azul profundo — titulares, texto, fondos */
  --clinico:#066C92;       /* azul clínico — datos, íconos, apoyo */
  --lima:#A7BC39;          /* SOLO acento. Una prioridad visual por pantalla. */
  --lima-hondo:#8A9C2C;
  --tinta:#172A33;
  --hielo:#DDECEF;
  --niebla:#F2F7F8;
  --blanco:#fff;
  --gris:#5A6E78;
  /* 🔴 #8DA1AB daba 2.69:1 sobre blanco y es el color de la CÉDULA
     PROFESIONAL — el texto que sostiene la credibilidad de las 62 fichas, y
     el que menos contraste tenía del sitio. La norma pide 4.5:1. Este da
     4.58:1 y sigue leyéndose como dato secundario. */
  --gris-claro:#6E828D;
  --linea:#D6E3E7;

  --sombra:0 1px 2px rgba(2,72,106,.05), 0 8px 24px rgba(2,72,106,.07);
  --sombra-alta:0 2px 4px rgba(2,72,106,.06), 0 16px 40px rgba(2,72,106,.11);
  --radio:16px;
  /* Montserrat es la familia principal de la marca. La pila de respaldo evita
     que la página cambie de forma si la fuente tarda o no carga. */
  --sans:'Montserrat','Montserrat suplente','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --ancho:1140px;
  /* Arranca rápido y frena largo. Es lo que separa «se movió» de «llegó». */
  --curva:cubic-bezier(.16,1,.3,1);
}

/* ---- Montserrat, servida por el propio sitio -----------------------------
   Un solo archivo de 37 KB para los cuatro pesos: es la fuente VARIABLE, así
   que `font-weight: 400 800` cubre regular, semibold, bold y extrabold sin
   descargar cuatro archivos.

   Va precargada en la cabecera de cada página, así que llega antes del primer
   pintado y no hay intercambio de fuente — que es lo que hacía brincar la
   página. Ver el comentario de `armar_sitio.py`.
*/
@font-face{
  font-family:'Montserrat';
  src:url('fuentes/montserrat-latin-variable.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

/* ---- La fuente suplente, con las medidas de Montserrat -------------------
   🔴 Esto arregla un salto de la página que YA existía y que no tenía nada que
   ver con las animaciones: la portada daba **0.065 de CLS** con el movimiento
   apagado igual que encendido.

   La causa es el cambio de fuente. Montserrat carga de Google Fonts con
   `display=swap`, así que la página se pinta primero con la fuente del sistema
   y después la cambia. Y **Montserrat es un 9 % más ancha que Arial** al mismo
   tamaño — medido, no supuesto: 111 % en regular, 107 % en semibold, 109 % en
   bold. Al entrar, todo el texto se reacomoda y lo de abajo brinca.

   La suplente es Arial con las medidas de Montserrat encima, así que el
   intercambio ya no mueve nada. Cuesta cero bytes: no se descarga ninguna
   fuente nueva.

   Los tres números salen de las medidas reales de Montserrat (ascendente 968,
   descendente 251 sobre 1000) divididas entre el ajuste de tamaño.
*/
@font-face{
  font-family:'Montserrat suplente';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:109%;
  ascent-override:88.8%;
  descent-override:23%;
  line-gap-override:0%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--tinta);
  background:var(--blanco); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--clinico); text-decoration:none}
a:hover{text-decoration:underline}
.env{max-width:var(--ancho); margin:0 auto; padding:0 24px}

/* 🔴 NO HABÍA NI UN `<main>` NI UN «IR AL CONTENIDO» en las 136 páginas: quien
   navega con teclado o con lector de pantalla tenía que pasar por las 12
   paradas de la cabecera en CADA página antes de tocar el texto. Es el punto
   2.4.1 de las normas de accesibilidad, nivel A — el más básico que hay. */
.saltar{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--azul); color:#fff; padding:14px 22px; border-radius:0 0 8px 0;
  font-size:.85rem; font-weight:600}
.saltar:focus{left:0; text-decoration:none}
/* Y el foco de teclado, que tampoco se veía en ningún lado. */
:focus-visible{outline:2px solid var(--clinico); outline-offset:3px; border-radius:4px}

/* ---- Tipografía: 800 cifras hero · 700 titulares · 600 botones · 400 texto */
/* 🔴 UN SOLO INTERLINEADO PARA TITULARES DE 18 A 50 PX. Eso era 1.18 para
   todos: apretado en el h4 y suelto en el h1, que es justo al revés de como
   funciona la óptica —entre más grande el tipo, más cerrado va el renglón—.
   Ahora cada nivel lleva el suyo. Cinco líneas, y es el cambio que más se nota
   de todo el archivo. */
h1,h2,h3,h4{margin:0 0 16px; color:var(--azul); letter-spacing:-.02em;
  font-weight:700; text-wrap:balance}
/* La razón entre h1 y h2 era 1.44 y los dos iban en peso 700: nada mandaba.
   Ahora es ~1.6 con tres pesos distintos, sin salirse de la guía —el 800 está
   reservado a «campañas y cifras hero» y el h1 de una página lo es. */
h1{font-size:clamp(2.3rem,5.2vw,4rem); font-weight:800;
   line-height:1.05; letter-spacing:-.035em}
h2{font-size:clamp(1.65rem,3.1vw,2.5rem); line-height:1.12; letter-spacing:-.026em}
h3{font-size:1.08rem; font-weight:700; line-height:1.3; letter-spacing:-.012em}
h4{line-height:1.35}
p{margin:0 0 16px; text-wrap:pretty}
strong,b{font-weight:600; color:var(--tinta)}
/* Los precios y los teléfonos dejan de bailar entre tarjeta y tarjeta: con
   cifras de ancho variable, «$479.00» y «$1,149.00» no alinean nunca. */
.precio,.tel-menu a,.sede b,.confianza b,td{font-variant-numeric:tabular-nums}
/* Seleccionar texto dejaba el azul del navegador, que es de cualquiera. */
::selection{background:var(--hielo); color:var(--azul)}

.antetitulo{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clinico); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.antetitulo::before{content:''; width:24px; height:3px; background:var(--lima);
  border-radius:2px; flex:none}
.bajada{font-size:1.08rem; color:var(--gris); max-width:46ch; line-height:1.7}
.centro{text-align:center}
.centro .antetitulo{justify-content:center}
.centro .bajada{margin-left:auto; margin-right:auto}

/* ---- Aviso de maqueta (NO va en el sitio real) -------------------------- */
.aviso-maqueta{
  background:#FFF6E0; border-bottom:1px solid #F0D99B; color:#6B4D0C;
  font-size:.82rem; padding:8px 0; text-align:center;
}
.aviso-maqueta b{color:#4A3505; font-weight:700}

/* ---- Barra de contacto -------------------------------------------------- */
.barra-alta{background:var(--azul); color:#C3DCE7; font-size:.82rem; padding:8px 0}
.barra-alta .env{display:flex; gap:24px; align-items:center; flex-wrap:wrap;
  justify-content:space-between}
.barra-alta a{color:#C3DCE7}
.barra-alta .sedes-mini{display:flex; gap:20px; flex-wrap:wrap}

/* El cambio de idioma vive en la barra de arriba: discreto pero encontrable.
   Sin un enlace visible, la seccion en ingles solo la hallaria Google. */
.barra-alta .idioma{color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:2px 12px; font-size:.72rem; font-weight:600;
  letter-spacing:.06em; margin-left:14px}
.barra-alta .idioma:hover{background:rgba(255,255,255,.14); text-decoration:none}

/* ---- Cabecera ----------------------------------------------------------- */
header.sitio{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--linea);
}
header.sitio .env{display:flex; align-items:center; gap:24px; min-height:88px}

/* El LOGOTIPO es el archivo original, no un dibujo parecido. La guía prohíbe
   deformarlo y recolorearlo; redibujarlo es peor que las dos cosas.
   Tamaño mínimo digital: 180 px de ancho -> 53 px de alto en esta proporción. */
.marca{display:flex; align-items:center; flex:none}
.marca:hover{text-decoration:none}
.marca img{height:54px; width:auto}
.marca .solo-icono{display:none}

nav.principal{margin-left:auto; display:flex; gap:4px; align-items:center}
nav.principal a{
  color:var(--tinta); font-size:.9rem; font-weight:600; padding:8px 12px;
  border-radius:8px; white-space:nowrap;
}
nav.principal a:hover{background:var(--hielo); color:var(--azul); text-decoration:none}
nav.principal a.activo{color:var(--clinico); background:var(--hielo)}

/* ---- Botones ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
  border-radius:999px; font-weight:600; font-size:.78rem; letter-spacing:.09em;
  text-transform:uppercase; border:1.5px solid transparent; cursor:pointer;
  font-family:inherit; transition:transform .12s ease, box-shadow .12s ease;
  /* 44 px es el mínimo que pide iOS para un blanco táctil. `.btn-chico`
     daba 40 y es el ÚNICO botón permanente del sitio en teléfono. */
  min-height:44px;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
/* El verde de WhatsApp (#25D366) NO está en la paleta de la marca, y aparecía
   dos veces antes de bajar la página. La guía asigna el lima a «acentos y
   llamadas», así que la llamada principal va en lima y conserva el ícono de
   WhatsApp: se sigue reconociendo el canal sin meter un color ajeno. */
/* 🔴 SIN SOMBRA DE COLOR. Un botón con un halo del mismo color que él es la
   firma de plantilla de 2019, y además la guía pide que el lima sea UNA
   prioridad visual por pantalla: el color ya hace ese trabajo solo. Lo que
   queda es el color, la forma y el tamaño — que es lo que se ve caro. */
.btn-wa{background:var(--lima); color:#22300A}
.btn-wa:hover{color:#22300A; box-shadow:0 10px 26px rgba(167,188,57,.42)}
/* En la cabecera la llamada es secundaria: el lima se reserva para UNA
   prioridad visual por pantalla, y esa es la del encabezado de la página. */
header.sitio .btn-wa{background:var(--azul); color:#fff; box-shadow:none}
header.sitio .btn-wa:hover{background:var(--clinico); color:#fff}
.btn-lleno{background:var(--azul); color:#fff}
.btn-lleno:hover{color:#fff; background:var(--clinico)}
.btn-linea{border-color:var(--linea); color:var(--azul); background:#fff}
.btn-linea:hover{border-color:var(--clinico); color:var(--clinico)}
/* El lima se reserva para UNA prioridad visual: la llamada final. */
.btn-lima{background:var(--lima); color:#22300A}
.btn-lima:hover{background:var(--lima-hondo); color:#fff}
.btn-chico{padding:10px 18px; font-size:.7rem}

/* ---- Portada ------------------------------------------------------------ */
.portada{background:var(--niebla); border-bottom:1px solid var(--linea);
  overflow:hidden; position:relative}
.portada::after{
  content:''; position:absolute; right:-160px; top:-140px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle at 35% 35%,
    rgba(6,108,146,.09), transparent 64%); pointer-events:none;
}
/* 🔴 LA COLUMNA DE TEXTO SE ENSANCHÓ AL SUBIR EL TITULAR. Con el h1 en 64 px,
   «La piel se trata con diagnóstico, no con suposiciones.» se partía en cuatro
   renglones y uno quedaba de dos palabras. Subir el tipo sin darle ancho es
   subirlo a medias. */
.portada .env{display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); gap:48px;
  align-items:center; padding-top:clamp(72px,6vw,104px);
  padding-bottom:clamp(72px,6vw,104px); position:relative; z-index:1}
.portada h1{margin-bottom:24px}
.portada h1 em{font-style:normal; color:var(--clinico)}
.portada .acciones{display:flex; gap:12px; flex-wrap:wrap; margin:32px 0}
.confianza{display:flex; gap:32px; flex-wrap:wrap; padding-top:24px;
  border-top:1px solid var(--linea)}
.confianza div{min-width:88px}
.confianza b{display:block; font-size:1.75rem; color:var(--azul); line-height:1.1;
  font-weight:800; letter-spacing:-.02em}
.confianza span{font-size:.78rem; color:var(--gris)}

/* ---- Fotografía --------------------------------------------------------- */
/* 🔴 TODA IMAGEN DEL SITIO VIVÍA EN UNA CAJITA: radio de 16 px y sombra alta,
   dentro de un contenedor de 1,140 px. En las 135 páginas ninguna tocaba el
   borde de la ventana. Una foto enjaulada decora; una foto sin marco manda —
   y es la diferencia entre un folleto y una revista. El radio baja a 6 px y la
   sombra se va: lo que separa la foto del fondo es la propia foto. */
.foto{position:relative; border-radius:6px; overflow:hidden;
  background:var(--hielo); aspect-ratio:4/3}
.foto.alta{aspect-ratio:3/4}
.foto.ancha{aspect-ratio:16/9}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto .marca-agua{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px}
.foto .marca-agua svg{width:40px; height:40px; opacity:.4}
.foto .marca-agua span{font-size:.74rem; color:var(--clinico); font-weight:600;
  letter-spacing:.05em; opacity:.85}

/* ---- Secciones ---------------------------------------------------------- */
/* 🔴 LAS DOCE SECCIONES DE LA PORTADA LLEVABAN EL MISMO RELLENO, y de ahí
   salían los 11,024 px: entre la rejilla de padecimientos y «Nuestro criterio»
   quedaban 239 px de nada, y eso pasaba tres veces. Con tres alturas el
   recorrido tiene ritmo en vez de ser doce bloques idénticos.
     .hito     lo que hay que leer despacio (criterio, sedes)
     normal    todo lo demás
     .compacta listas y preguntas, que se escanean */
section{padding:clamp(72px,6vw,100px) 0}
section.hito{padding:clamp(92px,8.5vw,150px) 0}
section.compacta{padding:clamp(48px,4vw,64px) 0}
section.tenue{background:var(--niebla)}
section.oscura{background:var(--azul); color:#C3DCE7}
section.oscura h2,section.oscura h3{color:#fff}
section.oscura .bajada{color:#9FBECD}
section.oscura .antetitulo{color:var(--lima)}

.rejilla{display:grid; gap:24px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.encabezado-seccion{margin-bottom:40px; max-width:60ch}
.encabezado-seccion.centro{margin-left:auto; margin-right:auto}

/* ---- Tarjetas ----------------------------------------------------------- */
/* 🔴 EL BORDE ERA INVISIBLE HASTA QUE PASABA EL CURSOR: `--linea` da 1.31:1
   sobre blanco, o sea que las tarjetas no se veían como objetos separados
   hasta que las apuntabas — y en un teléfono no hay cursor. Ahora tienen
   cuerpo en reposo y el cursor sube UN escalón, no da un salto. */
.tarjeta{background:#fff; border:1px solid #DFE9ED; border-radius:var(--radio);
  box-shadow:0 1px 2px rgba(2,72,106,.04);
  padding:32px; position:relative; overflow:hidden;
  transition:border-color .45s var(--curva), box-shadow .45s var(--curva),
             transform .45s var(--curva)}
a.tarjeta{display:block; color:inherit}
a.tarjeta:hover{border-color:var(--clinico); box-shadow:var(--sombra);
  transform:translateY(-6px); text-decoration:none}
/* El hilo de lima que se dibuja arriba al pasar el cursor. La guía reserva el
   lima a «acentos · llamadas» y a UNA prioridad visual por pantalla: sólo hay
   una tarjeta bajo el cursor a la vez, así que la regla se respeta. */
a.tarjeta::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--lima); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--curva)}
a.tarjeta:hover::before{transform:scaleX(1)}
.tarjeta h3{margin-bottom:8px}
.tarjeta p{font-size:.92rem; color:var(--gris); margin:0; line-height:1.6}
.tarjeta .icono{width:48px; height:48px; border-radius:12px; background:var(--hielo);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.tarjeta .icono svg{width:24px; height:24px; stroke:var(--clinico)}
.tarjeta .mas{display:inline-block; margin-top:16px; font-size:.78rem; font-weight:600;
  color:var(--clinico); letter-spacing:.05em}

/* ---- Nuestro criterio ---------------------------------------------------
   Dos columnas: a la izquierda el porqué —en lenguaje de persona—, a la
   derecha cómo se mide. Lo humano y lo profesional separados, no mezclados en
   la misma frase: mezclados salen corporativos.
*/
.criterio{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
  margin-top:8px}
.criterio-texto p{font-size:1.05rem; color:var(--gris); line-height:1.75;
  max-width:46ch}
.criterio-fuerte{color:var(--tinta) !important; font-weight:500;
  border-left:3px solid var(--lima); padding-left:20px; margin:26px 0 !important}
.criterio-medir{background:var(--niebla); border:1px solid var(--linea);
  border-radius:var(--radio); padding:32px 34px}
.criterio-medir h3{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clinico); margin-bottom:20px}
.criterio-medir ul{list-style:none; margin:0; padding:0}
.criterio-medir li{font-size:.93rem; color:var(--gris); line-height:1.6;
  padding:0 0 16px 26px; margin-bottom:16px; position:relative;
  border-bottom:1px solid var(--linea)}
.criterio-medir li:last-of-type{border-bottom:0; margin-bottom:0}
.criterio-medir li::before{content:''; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:50%; background:var(--lima)}
.criterio-medir li b{color:var(--azul)}

@media (max-width:900px){
  .criterio{grid-template-columns:1fr; gap:36px}
}

/* ---- Médicos ------------------------------------------------------------ */
.medico{text-align:center}
.medico .foto{aspect-ratio:1; border-radius:50%; max-width:176px; margin:0 auto 24px}
.medico h3{margin-bottom:4px}
.medico .esp{font-size:.85rem; color:var(--clinico); font-weight:600; margin-bottom:8px}
.medico .ced{font-size:.76rem; color:var(--gris-claro)}
/* Son CINCO médicos en una rejilla de dos columnas: el quinto se quedaba solo
   pegado a la izquierda, que se lee como que sobró. Cuando el último no tiene
   pareja, ocupa el renglón completo y queda centrado — y sirve igual si mañana
   son 5, 7 o 9, sin volver a tocar esto. */
.rejilla.r2 > .medico:last-child:nth-child(odd){grid-column:1 / -1}

/* ---- Cuerpo médico: las fichas con retrato ------------------------------
   Retrato a la izquierda y datos a la derecha. En una sola columna abajo de
   los 760 px, que es donde va a estar casi todo el mundo.
*/
.rejilla-medicos{display:grid; gap:24px}
a.ficha-medico{display:grid; grid-template-columns:200px 1fr; gap:28px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:24px; color:inherit; align-items:center;
  transition:border-color .45s var(--laser-curva), box-shadow .45s var(--laser-curva),
             transform .45s var(--laser-curva)}
a.ficha-medico:hover{border-color:var(--clinico); box-shadow:var(--sombra-alta);
  transform:translateY(-4px); text-decoration:none}
a.ficha-medico .foto{aspect-ratio:3/4; border-radius:12px; margin:0}
a.ficha-medico .cuerpo{padding-top:4px}
a.ficha-medico h3{margin-bottom:4px; font-size:1.25rem}
a.ficha-medico .esp{font-size:.9rem; color:var(--clinico); font-weight:600;
  margin-bottom:6px}
a.ficha-medico .ced{font-size:.78rem; color:var(--gris-claro); margin-bottom:14px}
a.ficha-medico p{font-size:.93rem; color:var(--gris); line-height:1.65;
  margin:0 0 14px; max-width:62ch}
a.ficha-medico .mas{font-size:.78rem; font-weight:600; color:var(--clinico);
  letter-spacing:.05em}
.nota-maqueta{margin-top:24px; font-size:.85rem; color:var(--gris);
  background:var(--niebla); border:1px dashed var(--linea);
  border-radius:12px; padding:14px 18px}

@media (max-width:760px){
  a.ficha-medico{grid-template-columns:1fr; gap:18px}
  a.ficha-medico .foto{max-width:220px}
}

/* ---- Sedes -------------------------------------------------------------- */
.sede{display:flex; flex-direction:column; height:100%}
.sede .foto{aspect-ratio:16/10; border-radius:var(--radio) var(--radio) 0 0; box-shadow:none}
.sede .cuerpo{border:1px solid var(--linea); border-top:0;
  border-radius:0 0 var(--radio) var(--radio); padding:24px; flex:1;
  display:flex; flex-direction:column; background:#fff}
.sede .cuerpo p{font-size:.9rem; color:var(--gris); margin-bottom:8px}
.sede .cuerpo .tel{font-weight:600; color:var(--azul)}
.sede .cuerpo .btn{margin-top:auto; align-self:flex-start}
.etiqueta{display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--clinico); background:var(--hielo);
  padding:5px 10px; border-radius:6px; margin-bottom:12px}

/* ---- Tienda ------------------------------------------------------------- */
.producto{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column}
.producto .foto{aspect-ratio:1; border-radius:0; box-shadow:none; background:var(--niebla)}
.producto .cuerpo{padding:16px; display:flex; flex-direction:column; flex:1}
.producto .marca-prod{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris-claro); font-weight:700}
.producto h3{font-size:.95rem; margin:6px 0 8px; font-weight:600; letter-spacing:0}
.producto .precio{font-size:1.2rem; font-weight:700; color:var(--azul); margin-top:auto}
.producto .btn{margin-top:16px; justify-content:center; width:100%}
.recetado{display:flex; gap:8px; align-items:flex-start; font-size:.82rem;
  color:var(--clinico); background:var(--hielo); padding:12px 16px;
  border-radius:8px; margin-top:16px; line-height:1.55}

/* ---- Reseñas ------------------------------------------------------------ */
.resena{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:32px}
.resena .estrellas{color:#E8A33D; font-size:.95rem; letter-spacing:2px; margin-bottom:12px}
.resena p{font-size:1rem; color:var(--azul); margin-bottom:16px; line-height:1.6}
.resena .quien{font-size:.8rem; color:var(--gris)}

/* ---- Preguntas frecuentes ---------------------------------------------- */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{padding:24px 48px 24px 0; font-weight:600; cursor:pointer; list-style:none;
  position:relative; color:var(--azul)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:8px; top:50%;
  transform:translateY(-50%); font-size:1.5rem; font-weight:400;
  color:var(--clinico); line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 48px 24px 0; color:var(--gris); margin:0; font-size:.95rem}

/* ---- ¿Qué atendemos?: pestañas ----------------------------------------- */
/* Progresivo: SIN JavaScript se ven los tres grupos uno debajo de otro con su
   encabezado. El guion le pone `con-pestanas` al contenedor y ahí aparecen las
   pestañas. Si se hiciera al revés, un guion que no carga esconde 20 de los 30
   padecimientos para una persona (Google los leería igual, el paciente no). */
.pestanas{display:none}
.con-pestanas .pestanas{display:flex; gap:4px; border-bottom:2px solid var(--linea);
  overflow-x:auto; scrollbar-width:none}
.con-pestanas .pestanas::-webkit-scrollbar{display:none}
.pes{appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  margin-bottom:-2px; padding:16px 24px; font:inherit; font-weight:600;
  font-size:.92rem; color:var(--gris); cursor:pointer; white-space:nowrap;
  display:flex; gap:8px; align-items:center}
.pes em{font-style:normal; font-size:.7rem; font-weight:700; color:var(--gris-claro);
  background:var(--linea); padding:2px 8px; border-radius:99px}
.pes:hover{color:var(--azul)}
.pes.activa{color:var(--clinico); border-bottom-color:var(--clinico)}
.pes.activa em{background:var(--hielo); color:var(--clinico)}
.pes:focus-visible{outline:2px solid var(--clinico); outline-offset:-4px; border-radius:8px}

.panel-titulo{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clinico); padding:32px 0 8px; border-bottom:2px solid var(--clinico);
  margin:0; display:flex; align-items:baseline; gap:8px; font-weight:600}
.panel-titulo em{font-style:normal; font-size:.7rem; color:var(--gris-claro)}
.con-pestanas .panel-titulo{display:none}

.panel-rejilla{display:grid; grid-template-columns:repeat(3,1fr); padding-top:8px}
.panel-rejilla > div{border-bottom:1px solid var(--linea)}
.panel-rejilla a{display:block; padding:16px; margin:0 -16px; border-radius:8px;
  color:var(--tinta); font-size:.92rem}
.panel-rejilla a:hover{background:#fff; color:var(--azul); text-decoration:none}

/* ---- Franja de llamada a la acción -------------------------------------- */
.franja-cta{background:var(--azul); color:#fff; border-radius:var(--radio);
  padding:56px 40px; text-align:center}
.franja-cta h2{color:#fff}
.franja-cta p{color:#B8D4E0; max-width:48ch; margin:0 auto 32px}

/* ---- Pie ---------------------------------------------------------------- */
footer.sitio{background:var(--azul); color:#9FBECD; padding:64px 0 24px; font-size:.9rem}
footer.sitio h4{color:#fff; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:16px; font-weight:600}
footer.sitio a{color:#C3DCE7; display:block; padding:4px 0}
footer.sitio .rejilla{gap:40px}
/* El logotipo va sobre blanco también aquí: la guía pide fondo limpio y no hay
   una versión en negativo autorizada. Un recuadro blanco lo respeta; pintarlo
   de blanco sería recolorearlo, que la guía prohíbe. */
.marca-pie{display:inline-block; background:#fff; padding:16px 20px;
  border-radius:12px; margin-bottom:24px}
.marca-pie img{height:44px; width:auto}
footer.sitio .legal{border-top:1px solid rgba(255,255,255,.12); margin-top:48px;
  padding-top:24px; display:flex; justify-content:space-between; gap:24px;
  flex-wrap:wrap; font-size:.78rem; color:#7D9BAB}

/* ---- Ruta de migas ------------------------------------------------------ */
.migas{font-size:.8rem; color:var(--gris); padding:24px 0 0}
.migas a{color:var(--gris)}
.migas span{margin:0 8px; color:var(--linea)}

/* ---- Pastillas ----------------------------------------------------------
   Las listas de enlaces de los indices (padecimientos, tratamientos, sedes,
   medicos, zonas) y las marcas de la tienda.

   Esta regla NO existia: la clase se usaba en 6 paginas y el CSS no la tenia,
   asi que los enlaces salian pegados uno tras otro —«DurangoTorreonGomez
   Palacio»— en las cuatro paginas del menu principal. Se ve al mirar la
   pagina, no al leer el generador. */
.pastillas{display:flex; flex-wrap:wrap; gap:10px}
.pastillas a{display:inline-block; font-size:.9rem; color:var(--azul);
  background:#fff; border:1px solid var(--linea); border-radius:999px;
  padding:9px 18px; transition:border-color .15s, color .15s, box-shadow .15s}
.pastillas a:hover{border-color:var(--clinico); color:var(--clinico);
  box-shadow:var(--sombra)}

/* ---- Interiores --------------------------------------------------------- */
.cabecera-interior{background:var(--niebla); border-bottom:1px solid var(--linea);
  padding:16px 0 56px}
.cabecera-interior h1{margin-top:16px}
.cuerpo-articulo{display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start}
.cuerpo-articulo .texto h2{margin-top:48px; font-size:1.45rem}
.cuerpo-articulo .texto h2:first-child{margin-top:0}
.cuerpo-articulo .texto h3{margin-top:32px; font-size:1.05rem}
.cuerpo-articulo .texto ul{padding-left:24px; color:var(--gris); margin-bottom:24px}
.cuerpo-articulo .texto li{margin-bottom:8px}
.cuerpo-articulo .texto li b{color:var(--tinta)}
aside.lateral{position:sticky; top:112px; display:flex; flex-direction:column; gap:16px}
aside.lateral .caja{background:var(--niebla); border:1px solid var(--linea);
  border-radius:var(--radio); padding:24px}
aside.lateral .caja h3{font-size:1rem}
aside.lateral .caja p{font-size:.88rem; color:var(--gris)}
aside.lateral .caja .btn{width:100%; justify-content:center}
.dato-fuerte{background:var(--hielo); border-left:3px solid var(--clinico);
  padding:20px 24px; border-radius:0 8px 8px 0; margin:24px 0; font-size:.95rem;
  color:var(--azul); line-height:1.65}

/* ---- Mapa del sitio (pieza de venta) ------------------------------------ */
.mapa-grupo{margin-bottom:40px}
.mapa-grupo h3{display:flex; align-items:baseline; gap:8px; padding-bottom:8px;
  border-bottom:2px solid var(--linea)}
.mapa-grupo h3 span{font-size:.78rem; font-weight:400; color:var(--gris-claro)}
.mapa-lista{list-style:none; padding:0; margin:16px 0 0; columns:3; column-gap:24px}
.mapa-lista li{margin-bottom:8px; font-size:.88rem; break-inside:avoid;
  color:var(--gris); padding-left:24px; position:relative}
.mapa-lista li::before{content:'○'; position:absolute; left:4px; color:var(--linea)}
.mapa-lista li.hecha{color:var(--azul); font-weight:600}
.mapa-lista li.hecha::before{content:'●'; color:var(--clinico)}
.mapa-lista li.hecha a{color:var(--azul)}

/* ---- Responsivo --------------------------------------------------------- */
@media (max-width:980px){
  .portada .env{grid-template-columns:1fr; gap:40px; padding-top:48px; padding-bottom:56px}
  .portada .foto{max-width:480px}
  .cuerpo-articulo{grid-template-columns:1fr; gap:40px}
  aside.lateral{position:static}
  .r4,.r3{grid-template-columns:repeat(2,1fr)}
  .panel-rejilla{grid-template-columns:repeat(2,1fr)}
  .mapa-lista{columns:2}
  nav.principal{display:none}
  .marca img{height:46px}
}
@media (max-width:640px){
  section{padding:56px 0}
  .env{padding:0 16px}
  .r2,.r3,.r4{grid-template-columns:1fr}
  /* 🔴 LA TIENDA MOSTRABA UN PRODUCTO POR PANTALLA: 8 productos × 528 px son
     cinco pantallas de recorrido para comparar dos cremas. Una ficha de
     producto es una foto, una marca, un nombre y un precio — cabe de a dos
     hasta en 360 px, y comparar es justo lo que se hace en una farmacia. */
  .rejilla.r4:has(.producto){grid-template-columns:repeat(2,1fr); gap:12px}
  .producto .cuerpo{padding:12px}
  .producto h3{font-size:.88rem}
  /* Y las tarjetas de contenido dejan de tener relleno de escritorio. */
  .tarjeta{padding:24px}
  .panel-rejilla{grid-template-columns:1fr}
  .mapa-lista{columns:1}
  .barra-alta .env{justify-content:center; gap:16px; font-size:.76rem}
  .franja-cta{padding:40px 24px}
  .confianza{gap:24px}
  .confianza b{font-size:1.4rem}
  footer.sitio .rejilla{gap:32px}
  header.sitio .env{min-height:72px}
  /* En pantalla chica el logotipo completo no cabe legible. Se usa el ISOTIPO,
     que es parte de la misma identidad — no una versión modificada. */
  .marca img.completo{display:none}
  .marca img.solo-icono{display:block; height:44px}
  .pestanas{margin:0 -16px; padding:0 16px}
}

@media print{
  .aviso-maqueta,header.sitio,.btn-wa{display:none}
}

/* ---- Blog ---------------------------------------------------------------- */
/* El cuerpo del artículo medía 716 px ≈ 94 caracteres por renglón. A esa
   medida el ojo pierde el renglón al regresar, y aquí son 1,800 palabras por
   página. Se topa en ~62ch, que es donde se lee sin esfuerzo. */
.cuerpo-articulo .texto{max-width:62ch}
.firma-art{font-size:.84rem; color:var(--gris); margin-top:20px}
.entradilla{font-size:1.12rem; line-height:1.7; color:var(--azul);
  border-left:3px solid var(--lima); padding-left:20px; margin:0 0 32px}
.caja-busquedas{background:var(--niebla); border:1px solid var(--linea);
  border-radius:var(--radio); padding:24px 28px; margin:48px 0 0}
.caja-busquedas h3{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clinico); margin-bottom:14px; font-weight:600}
.caja-busquedas ul{list-style:none; margin:0 0 16px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px}
.caja-busquedas li{font-size:.85rem; color:var(--gris); background:#fff;
  border:1px solid var(--linea); border-radius:999px; padding:6px 14px}
.caja-busquedas p{font-size:.85rem; color:var(--gris); margin:0}

.rejilla.alto-inicio{align-items:start}
a.tarjeta.art{padding:0; overflow:hidden; display:flex; flex-direction:column}
a.tarjeta.art .foto{border-radius:0; box-shadow:none; aspect-ratio:16/9}
a.tarjeta.art .art-cuerpo{padding:24px}
a.tarjeta.art h3{font-size:1.08rem; line-height:1.3; margin-bottom:10px}


/* ---- Lo que responde al cursor -------------------------------------------
   🔴 Lo único que se mueve en el sitio, y a propósito.

   Las animaciones de entrada se quitaron por decisión del dueño (2026-09-13):
   se probaron una cascada al cargar, revelados al hacer scroll y un láser que
   escribía los títulos, y ninguna convenció. **El sitio no necesita moverse
   solo para verse caro**; lo que lo sostiene es la retícula, el aire, la
   tipografía y la fotografía.

   Esto de aquí NO es decoración: es la señal de que algo se puede tocar. Una
   tarjeta que no responde al cursor se siente rota. Son cambios de color,
   borde y sombra, más un levantamiento de 6 px.
*/
:root{ --laser-curva:cubic-bezier(.33,.02,.24,1); }
.tarjeta{transition:border-color .45s var(--laser-curva),
                    box-shadow .45s var(--laser-curva),
                    transform .45s var(--laser-curva)}
@media (hover:hover){ a.tarjeta:hover{transform:translateY(-6px)} }

a .foto img, a.tarjeta .foto img, .sede .foto img{
  transition:transform .9s var(--laser-curva)}
@media (hover:hover){ a:hover .foto img{transform:scale(1.05)} }

.texto a:not(.btn), .bajada a, .cuerpo-articulo p a{
  text-decoration:none;
  background-image:linear-gradient(var(--lima),var(--lima));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 2px;
  transition:background-size .45s var(--laser-curva);
  padding-bottom:1px;
}
.texto a:not(.btn):hover, .bajada a:hover, .cuerpo-articulo p a:hover{
  text-decoration:none; background-size:100% 2px}

.confianza div{position:relative; padding-bottom:10px}
.confianza div::after{content:''; position:absolute; left:0; bottom:0; width:22px;
  height:2px; background:var(--lima); border-radius:1px; opacity:.75}
.confianza b{font-variant-numeric:tabular-nums}

.btn{transition:transform .35s var(--laser-curva), box-shadow .35s var(--laser-curva),
     background-color .25s ease, border-color .25s ease, color .25s ease}
/* 🔴 AQUÍ VIVÍA UN BOTÓN MUERTO. Esta regla decía
   `box-shadow:var(--sombra)` y pisaba al `.btn-wa:hover` de la línea 176, que
   le da al botón principal su halo lima: misma especificidad (0,2,0), gana la
   de abajo. O sea que al apuntar «AGENDAR POR WHATSAPP» el halo se APAGABA y
   lo sustituía una sombra azul más débil que la de reposo — el botón perdía
   presencia justo cuando el usuario lo apuntaba. La sombra se deja sólo donde
   no hay una propia. */
.btn:hover{transform:translateY(-2px)}
.btn-lleno:hover,.btn-linea:hover{box-shadow:var(--sombra)}

/* ---- Cuando el equipo pide menos movimiento -----------------------------
   Ya no hay animaciones de entrada, así que aquí sólo queda quitar los
   desplazamientos del cursor. El color, el borde y la sombra se conservan: lo
   que molesta a quien activa esto es el MOVIMIENTO, no la respuesta visual, y
   sin ella la página se siente rota.

   ⚠️ Vale recordar por qué existe esta regla: **Windows Server trae las
   animaciones apagadas de fábrica y RDP las desactiva también**, así que Chrome
   reporta `reduce`. Lo que se ve por RDP no es lo que ve el cliente.
*/
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a.tarjeta:hover{transform:none}
  a:hover .foto img{transform:none}
  .btn:hover{transform:none}
  a.tarjeta::before{transition:none}
  .texto a:not(.btn), .bajada a, .cuerpo-articulo p a{transition:none}
}


/* ---- El menú del teléfono ------------------------------------------------
   🔴 Hasta el 2026-09-15 el sitio NO TENÍA MENÚ en pantalla chica: la regla
   `nav.principal{display:none}` de abajo apagaba la navegación entera y no la
   sustituía nada. Se llegaba al contenido sólo por el pie, a 15,907 px de la
   portada.

   Va con `<details>` nativo a propósito: sin JavaScript no hay estado que se
   desincronice, funciona con teclado y con lector de pantalla de fábrica, y no
   suma un solo kilobyte de librería a un sitio que carga en 484 ms.
*/
.menu-movil{display:none}
.menu-movil > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:9px; min-height:44px; padding:0 16px; border-radius:999px;
  border:1.5px solid var(--linea); color:var(--azul);
  font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.menu-movil > summary::-webkit-details-marker{display:none}
.menu-movil > summary .rayas{
  width:17px; height:11px; flex:none; position:relative;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
}
.menu-movil > summary .rayas::after{
  content:''; position:absolute; left:0; top:4px; width:100%; height:2px;
  background:currentColor;
}
.menu-movil[open] > summary{background:var(--hielo); border-color:var(--hielo)}

/* El panel se ancla al pie de la cabecera, que es pegajosa: así aparece
   siempre debajo del logotipo, esté donde esté la página. */
.menu-movil > nav{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--linea);
  box-shadow:var(--sombra-alta);
  max-height:calc(100dvh - 72px); overflow-y:auto;
  display:flex; flex-direction:column; padding:6px 0 10px;
}
.menu-movil > nav > a{
  padding:15px 24px; font-size:1.02rem; font-weight:600; color:var(--tinta);
  border-bottom:1px solid var(--linea);
}
.menu-movil > nav > a:last-of-type{border-bottom:none}
.tel-menu{display:flex; flex-direction:column; gap:2px;
  padding:14px 24px 4px; border-top:1px solid var(--linea); margin-top:6px}
.tel-menu a{display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; font-size:.95rem; color:var(--clinico); font-weight:600}
.tel-menu b{color:var(--gris); font-weight:500}

/* ---- Llamar y WhatsApp, siempre a la mano --------------------------------
   Había tramos de 2,211 px —tres pantallas— sin un solo elemento tocable, y
   el único botón permanente medía 40 px de alto: por debajo de los 44 que pide
   iOS. Esto no aparece en escritorio, donde el cursor ya alcanza la cabecera.
*/
.acciones-fijas{display:none}

/* ---- Lo que responde a un DEDO ------------------------------------------
   🔴 Había 23 reglas `:hover` y CERO `:active`. En una pantalla táctil el
   `:hover` se dispara al tocar y SE QUEDA PEGADO hasta que tocas otra cosa, así
   que la tarjeta anterior quedaba levantada. Y encima el destello gris de
   Android por debajo.
*/
html{-webkit-tap-highlight-color:rgba(6,108,146,.14)}
a.tarjeta:active,.producto:active{transform:scale(.985); border-color:var(--clinico)}
.btn:active{transform:translateY(0) scale(.98)}
.menu-movil > nav > a:active,.tel-menu a:active{background:var(--niebla)}

@media (max-width:980px){
  .menu-movil{display:block; margin-left:auto}
  /* Con el isotipo en pantalla chica, «MENÚ» y «AGENDAR» caben los dos con
     su texto y se leen mejor que un ícono suelto. Medido a 390 px. */
  header.sitio .btn-wa{padding:0 16px; min-height:44px}
}
@media (max-width:760px){
  /* Los tres teléfonos salían en tres renglones y el lema centrado aparte:
     185 px de cromo, el 22 % del primer pliegue. Ahora viven en el menú, que
     es donde se buscan, y abajo está el botón de Llamar. */
  .barra-alta .sedes-mini{display:none}
  .barra-alta .env{justify-content:center}
  .acciones-fijas{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    background:var(--linea); border-top:1px solid var(--linea);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .acciones-fijas a{
    display:flex; align-items:center; justify-content:center; gap:9px;
    min-height:58px; background:#fff; color:var(--azul);
    font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  }
  .acciones-fijas a.wa{background:var(--lima); color:#22300A}
  .acciones-fijas a:active{background:var(--hielo)}
  .acciones-fijas a.wa:active{background:var(--lima-hondo); color:#fff}
  /* Para que la barra no tape el final del pie. */
  body{padding-bottom:58px}
  /* 🔴 EN 121 DE 136 PÁGINAS la caja de agendar y el retrato del médico caían
     al FINAL del documento: en escritorio el `aside` es pegajoso y acompaña al
     lector, y en móvil pasaba a estático detrás de 1,800 palabras. La misma
     página era peor en el celular que en la computadora.
     ⚠️ `display:contents` es lo que hace que `order` sirva: sin él, el `aside`
     sigue siendo UN hijo del contenedor y ordenar sus cajas no hace nada. */
  .cuerpo-articulo{display:flex; flex-direction:column}
  aside.lateral{display:contents}
  aside.lateral .caja{order:2}
  aside.lateral .caja:first-child{order:0}
  .cuerpo-articulo .texto{order:1}
}
@media print{
  .acciones-fijas,.menu-movil{display:none}
}

/* ---- El índice de artículos en el teléfono -------------------------------
   🔴 24 tarjetas con foto 16:9 apiladas son 13,416 px: DIECISÉIS pantallas de
   recorrido, sin filtro, sin buscador y sin paginación. Nadie llega al
   artículo 24. En horizontal, con la foto de 96 px, la misma lista cabe en
   cuatro pantallas y se puede escanear por el titular, que es como se lee un
   índice.
*/
@media (max-width:640px){
  a.tarjeta.art{flex-direction:row; align-items:stretch; gap:0}
  a.tarjeta.art .foto{
    flex:none; width:104px; aspect-ratio:1; align-self:stretch; height:auto}
  a.tarjeta.art .art-cuerpo{padding:14px 16px; min-width:0}
  a.tarjeta.art h3{font-size:.98rem; margin-bottom:5px}
  /* El resumen sobra cuando el titular ya dice de qué es: en una lista de 24,
     lo que estorba es tener que leer tres renglones por renglón útil. */
  a.tarjeta.art .art-cuerpo p{display:none}
  a.tarjeta.art .art-cuerpo .meta{font-size:.74rem}
}


/* ---- Antes y después ----------------------------------------------------
   🔴 PAR LADO A LADO, NO DESLIZADOR. Un deslizador esconde la mitad de la
   prueba y obliga a interactuar para ver lo que se está afirmando; en teléfono
   además se arrastra sin querer al bajar la página. Las dos fotos a la vista,
   del mismo tamaño y con la misma proporción: si una se ve más grande que la
   otra, la comparación ya está trucada.
*/
.caso{background:#fff; border:1px solid #DFE9ED; border-radius:var(--radio);
  overflow:hidden; margin-bottom:24px; display:grid;
  grid-template-columns:1.35fr 1fr}
.caso .par{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--linea)}
.caso figure{margin:0; position:relative; background:#fff}
.caso figure .foto{border-radius:0; aspect-ratio:3/4}
.caso figcaption{
  position:absolute; left:10px; top:10px; background:rgba(2,72,106,.88);
  color:#fff; font-size:.64rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:4px 9px; border-radius:3px;
}
.caso-datos{padding:28px 30px}
.caso-datos h3{margin-bottom:14px}
.caso-datos dl{margin:0; display:flex; flex-direction:column; gap:9px}
.caso-datos dl > div{display:grid; grid-template-columns:auto 1fr; gap:4px}
.caso-datos dt{font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gris-claro); grid-column:1 / -1}
.caso-datos dd{margin:0; font-size:.95rem; color:var(--tinta)}
.caso-datos p{margin:16px 0 0; font-size:.93rem; color:var(--gris)}

/* El estado vacío no se disimula: dice qué falta y por qué, igual que los
   retratos de los médicos que todavía no llegan. */
.aviso-vacio{background:#fff; border:1px dashed var(--linea-fuerte);
  border-radius:var(--radio); padding:40px 36px; max-width:64ch}
.aviso-vacio h3{margin-bottom:12px}
.aviso-vacio p{color:var(--gris); font-size:.98rem}
.aviso-vacio .btn{margin-top:12px}

@media (max-width:760px){
  .caso{grid-template-columns:1fr}
  .caso-datos{padding:22px 20px}
  .aviso-vacio{padding:28px 22px}
}


/* ---- Los pasos de la primera visita -------------------------------------
   Numerada porque SÍ es una secuencia: pasa en ese orden, y el orden es
   justamente lo que el paciente no sabe. */
ol.pasos{list-style:none; counter-reset:paso; margin:0 0 32px; padding:0;
  display:flex; flex-direction:column; gap:18px}
ol.pasos li{counter-increment:paso; display:grid;
  grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start}
ol.pasos li::before{
  content:counter(paso); font-weight:700; font-size:.85rem; color:var(--clinico);
  background:var(--hielo); width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}


/* ---- Cuando la foto todavía no llega -------------------------------------
   🔴 NINGUNA DE LAS DOS PIEZAS FINGE SER UNA FOTO, y es lo que las hace
   usables: el hueco gris con ícono de cámara se lee como error, y una imagen
   generada de una persona o de un edificio reales se lee como mentira en
   cuanto alguien compara. Estas dos se ven decididas y dicen la verdad.
*/
.foto.monograma{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--clinico), var(--azul));
  color:#fff; box-shadow:none;
}
.foto.monograma span{
  font-weight:800; letter-spacing:.02em; line-height:1;
  font-size:clamp(1.9rem, 7cqi, 3.4rem); opacity:.92;
}
/* `cqi` mide contra el propio contenedor, no contra la ventana: así la inicial
   se ve igual de grande en el círculo de 176 px de la portada que en la ficha
   de 3/4 del médico, sin una regla por tamaño. */
.medico .foto.monograma,.ficha-medico .foto.monograma{container-type:inline-size}
.foto.monograma{container-type:inline-size}

.placa-sede{
  background:var(--azul); color:#C3DCE7; border-radius:6px;
  padding:34px 32px; display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; aspect-ratio:16/9; justify-content:center;
}
.placa-sede .et{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lima); margin-bottom:6px;
}
.placa-sede b{color:#fff; font-size:1.5rem; font-weight:700; letter-spacing:-.02em;
  line-height:1.15}
.placa-sede p{margin:0; font-size:.98rem; line-height:1.55}
.placa-sede p.ref{color:#9FBECD; font-size:.9rem}
.placa-sede .btn{margin-top:14px; border-color:rgba(255,255,255,.32); color:#fff;
  background:transparent}
.placa-sede .btn:hover{border-color:#fff; background:rgba(255,255,255,.1); color:#fff}
/* En la tarjeta de la portada la placa es más chica: se aprieta. */
.sede .placa-sede{aspect-ratio:4/3; padding:24px 22px}
.sede .placa-sede b{font-size:1.2rem}
@media (max-width:640px){
  .placa-sede{padding:26px 22px; aspect-ratio:auto}
}


/* ---- Los índices --------------------------------------------------------
   🔴 «Padecimientos» y «Tratamientos» son dos de las siete entradas del menú y
   abrían en una nube de 35 pastillas: nombres sueltos, sin una línea que
   oriente. Quien no sabe cómo se llama lo que tiene no podía elegir.

   Sin foto a propósito: hay 39 imágenes y 47 fichas, así que la misma foto
   saldría seis veces — el defecto que se acaba de corregir en la fila de
   aparatos, pero en grande. Manda el nombre; la línea lo explica.
*/
.rejilla-indice{display:grid; gap:1px; background:var(--linea);
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  border:1px solid var(--linea)}
a.ficha-indice{
  background:#fff; padding:18px 20px; display:flex; flex-direction:column;
  gap:5px; color:inherit; min-height:100%;
  transition:background .25s var(--curva), box-shadow .25s var(--curva);
}
a.ficha-indice b{color:var(--azul); font-weight:700; font-size:1rem;
  letter-spacing:-.01em; line-height:1.3}
a.ficha-indice span{color:var(--gris); font-size:.87rem; line-height:1.5}
/* La foto va DEBAJO del nombre, no arriba: en una rejilla se lee primero de
   qué es la tarjeta y luego se mira la foto. `aspect-ratio` fijo para que las
   tres midan igual aunque la foto original no. */
/* «Revisado por…» bajo el título de una ficha. Sale vacío mientras nadie haya
   revisado, así que este bloque sólo se ve cuando hay algo de verdad detrás. */
.sello-revision{margin-top:18px; font-size:.9rem; color:var(--gris);
  display:flex; align-items:center; gap:8px}
.sello-revision::before{content:""; width:16px; height:16px; flex:none;
  border-radius:50%; background:var(--lima)}
.sello-revision a{color:var(--clinico)}
ul.fuentes{list-style:none; padding:0}
ul.fuentes li{padding:10px 0; border-bottom:1px solid var(--linea);
  font-size:.92rem}

a.ficha-indice .foto{aspect-ratio:16/10; border-radius:6px; margin:6px 0 2px;
  box-shadow:none}
a.ficha-indice:hover .foto img{transform:scale(1.03)}
a.ficha-indice:active{background:var(--niebla)}
@media (hover:hover){
  a.ficha-indice:hover{background:var(--niebla); text-decoration:none;
    box-shadow:inset 3px 0 0 var(--lima)}
  a.ficha-indice:hover b{color:var(--clinico)}
}
@media (max-width:640px){
  .rejilla-indice{grid-template-columns:1fr}
  a.ficha-indice{padding:15px 16px}
}