/* ==========================================================================
   Dr. José Iván Hernández Moriel — Ortopedista y Traumatólogo
   Hoja de estilos única. Sin dependencias, sin preprocesador, sin build.

   NOTA DE DIRECCIÓN
   La página es clara de principio a fin salvo dos momentos oscuros: el
   carrusel de cirugía y el pie. Esa es la decisión que sostiene todo lo
   demás: al haber un solo bloque oscuro en medio del recorrido, el carrusel
   se convierte en la pieza que se recuerda, y el resto puede quedarse quieto.

   El dorado nunca es fondo ni botón. Vive en filetes de 1px y en el
   monograma. Los CTA van siempre en azul acento.

   ÍNDICE
   01 · Tipografías autohospedadas
   02 · Tokens
   03 · Reset y base
   04 · Tipografía
   05 · Composición
   06 · Botones y enlaces
   07 · Iconos
   08 · Navegación
   09 · Portada
   10 · Barra de datos
   11 · Sobre mí
   12 · Áreas de especialidad
   13 · Carrusel de cirugía
   14 · Padecimientos
   15 · Formación
   16 · Consulta a distancia y costos
   17 · Testimonios
   18 · Frase de cierre
   19 · Contacto
   20 · Pie de página
   21 · WhatsApp flotante
   22 · Revelados
   23 · Aviso de privacidad
   24 · Responsive
   ========================================================================== */


/* ==========================================================================
   01 · TIPOGRAFÍAS AUTOHOSPEDADAS
   Google sirve fuentes variables: un archivo cubre los pesos 400 a 700.
   Solo el subset «latin», que ya cubre todo el español. 112 KB en total.
   ========================================================================== */

@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/montserrat-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/playfair-display-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/playfair-display-italic-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ==========================================================================
   02 · TOKENS
   ========================================================================== */

:root{

  /* ---- Paleta oficial del manual de marca ---- */
  --marino:        #142538;
  --profundo:      #0E1E31;
  --acento:        #2E69A7;
  --dorado:        #B0894E;
  --dorado-claro:  #C8A86A;
  --gris:          #6B7785;
  --papel:         #FFFFFF;

  /* ---- Derivados obligados por el contraste AA ----
     #2E69A7 sobre #142538 da 2.74:1 y reprueba. Sobre fondo oscuro se usa
     este tinte del mismo azul, que da 7.5:1. No es un color nuevo de la
     marca: es el azul de la marca aclarado para poder leerse.              */
  --acento-claro:  #8FB8DF;
  --acento-hover:  #255A91;

  /* ---- Superficies ---- */
  --hueso:         #F6F8FA;   /* fondo alterno, apenas azulado */
  --hueso-2:       #ECF1F6;
  --linea:         #DDE4EC;   /* filete estructural sobre claro */
  --linea-fuerte:  #C3CFDC;
  --linea-clara:   rgba(255,255,255,.15);
  --filo:          rgba(176,137,78,.5);
  --filo-claro:    rgba(200,168,106,.42);

  /* ---- Texto ---- */
  --tinta:         #142538;   /* 15.5:1 sobre blanco */
  --tinta-suave:   #46535F;   /* 7.9:1 sobre blanco */
  --claro:         rgba(255,255,255,.87);
  --claro-2:       rgba(255,255,255,.66);

  /* ---- Tipografía ---- */
  --serif:'Playfair Display','Times New Roman',Times,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* 17 px es el piso duro. Buena parte de los pacientes son adultos
     mayores; por debajo de ahí no se negocia.                              */
  --t-cuerpo:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
  --t-guia:    clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem);
  --t-menor:   1rem;
  --t-leyenda: 0.9375rem;
  --t-etiqueta:0.8125rem;

  --h1: clamp(2.75rem, 1.65rem + 4.2vw, 5rem);
  --h2: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);
  --h3: clamp(1.375rem, 1.22rem + 0.66vw, 1.75rem);
  --h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);

  /* ---- Ritmo ---- */
  /* Ritmo apretado a propósito: con el aire anterior las secciones flotaban
     y obligaban a scrollear de más entre bloque y bloque.                   */
  --sec:      clamp(3.25rem, 2.2rem + 4.2vw, 5.75rem);
  --sec-corta:clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  --ancho:    1240px;
  --canal:    clamp(1.25rem, 0.85rem + 1.8vw, 2.75rem);

  /* ---- Detalle ----
     Radio corto y constante en toda la página. La estructura la llevan los
     filetes, no las esquinas redondeadas.                                  */
  --radio:      2px;
  --radio-media:3px;
  --tap:        44px;

  /* Curvas fuertes: las de serie de CSS son demasiado blandas y hacen que
     la interfaz se sienta lenta.                                           */
  --salida:  cubic-bezier(.23,1,.32,1);
  --entrada: cubic-bezier(.77,0,.175,1);
}


/* ==========================================================================
   03 · RESET Y BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  font-family:var(--sans);
  font-size:var(--t-cuerpo);
  line-height:1.55;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none;padding:0}

:focus-visible{
  outline:3px solid var(--acento);
  outline-offset:3px;
  border-radius:var(--radio);
}
.oscuro :focus-visible,.pie :focus-visible,.nav :focus-visible{
  outline-color:var(--dorado-claro);
}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.salto{
  position:absolute;top:-100px;left:var(--canal);z-index:200;
  background:var(--acento);color:#fff;
  padding:.85rem 1.5rem;border-radius:0 0 var(--radio) var(--radio);
  font-size:var(--t-menor);font-weight:600;
  transition:top .2s var(--salida);
}
.salto:focus{top:0}


/* ==========================================================================
   04 · TIPOGRAFÍA
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.008em;
  text-wrap:balance;
}
h1{font-size:var(--h1);line-height:1.02;letter-spacing:-.018em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
p{text-wrap:pretty}

/* Regla del manual: «Dr.» siempre en cursiva serif, apellidos en bold. */
.dr{font-family:var(--serif);font-weight:700}
.dr em{font-style:italic;font-weight:400}

/* Antetítulo. Se usa con cuentagotas: como mucho uno cada tres secciones,
   porque repetirlo en todas es lo que produce el ritmo de plantilla.       */
.antet{
  font-family:var(--sans);
  font-size:var(--t-etiqueta);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--acento);
  margin-bottom:1.1rem;
}
.antet--claro{color:var(--dorado-claro)}

.medida{max-width:60ch}
.parrafo{color:var(--tinta-suave);margin-bottom:1.1rem}
.parrafo:last-child{margin-bottom:0}
.oscuro .parrafo{color:var(--claro-2)}


/* ==========================================================================
   05 · COMPOSICIÓN
   ========================================================================== */

.caja{width:min(var(--ancho),100% - (var(--canal) * 2));margin-inline:auto}
.caja--angosta{width:min(880px,100% - (var(--canal) * 2))}

.sec{padding-block:var(--sec);position:relative}
.sec--corta{padding-block:var(--sec-corta)}
.sec--hueso{background:var(--hueso)}

.oscuro{background:var(--marino);color:var(--claro)}
.oscuro h2,.oscuro h3,.oscuro h4{color:#fff}

/* Encabezado de sección. Alineado a la izquierda por defecto: el centrado
   sistemático es parte de lo que hacía que la página se sintiera plantilla. */
.enc{max-width:46rem;margin-bottom:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
.enc--centrado{margin-inline:auto;text-align:center}
.enc p{color:var(--tinta-suave);font-size:var(--t-guia);margin-top:1rem}
.enc--centrado p{margin-inline:auto;max-width:52ch}
.oscuro .enc p{color:var(--claro-2)}


/* ==========================================================================
   06 · BOTONES Y ENLACES
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--tap);
  padding:.9rem 1.75rem;
  border:1px solid transparent;
  border-radius:var(--radio);
  font-size:var(--t-menor);font-weight:600;letter-spacing:.01em;
  text-align:center;cursor:pointer;
  transition:background .2s var(--salida),color .2s var(--salida),
             border-color .2s var(--salida),transform .16s var(--salida);
}
/* Respuesta física a la pulsación. Sin esto los botones se sienten muertos. */
.btn:active{transform:scale(.975)}

.btn--fuerte{background:var(--acento);border-color:var(--acento);color:#fff}
.btn--fuerte:hover{background:var(--acento-hover);border-color:var(--acento-hover)}

.btn--linea{background:transparent;border-color:var(--linea-fuerte);color:var(--marino)}
.btn--linea:hover{background:var(--marino);border-color:var(--marino);color:#fff}

.btn--claro{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn--claro:hover{background:#fff;border-color:#fff;color:var(--marino)}

.enlace{
  color:var(--acento);font-weight:600;
  border-bottom:1px solid var(--filo);padding-bottom:1px;
  transition:color .2s var(--salida),border-color .2s var(--salida);
}
.enlace:hover{color:var(--acento-hover);border-bottom-color:var(--acento)}
.oscuro .enlace,.pie .enlace{color:var(--acento-claro)}
.oscuro .enlace:hover,.pie .enlace:hover{color:#fff;border-bottom-color:var(--dorado-claro)}


/* ==========================================================================
   07 · ICONOS
   ========================================================================== */

.ico{
  width:1.25em;height:1.25em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico--relleno{fill:currentColor;stroke:none}


/* ==========================================================================
   08 · NAVEGACIÓN
   Barra clara sobre la portada clara, con filete inferior. Se vuelve sólida
   y proyecta sombra al hacer scroll.
   ========================================================================== */

.cab{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .25s var(--salida),border-color .25s var(--salida),
             box-shadow .25s var(--salida);
}
.cab.fija{
  background:rgba(255,255,255,.96);
  border-bottom-color:var(--linea);
  box-shadow:0 8px 28px -24px rgba(14,30,49,.55);
}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem}

.marca{display:flex;align-items:center;gap:.75rem;min-height:var(--tap);color:var(--marino)}
.marca img{width:42px;height:42px;flex:none}
.marca__txt{display:flex;flex-direction:column;line-height:1.1}
.marca__n{font-family:var(--serif);font-size:1.02rem;font-weight:700;white-space:nowrap}
.marca__n em{font-style:italic;font-weight:400}
.marca__r{
  font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin-top:2px;
}
.marca__largo{display:inline}
.marca__corto{display:none}

.nav__grupo{display:flex;align-items:center;gap:1.6rem}
.nav__lista{display:flex;align-items:center;gap:1.5rem}
.nav__a{
  position:relative;display:inline-block;padding:.5rem 0;
  font-size:var(--t-leyenda);font-weight:500;color:var(--tinta-suave);
  transition:color .2s var(--salida);
}
.nav__a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--dorado);transition:width .24s var(--salida);
}
.nav__a:hover{color:var(--marino)}
.nav__a:hover::after,.nav__a[aria-current="true"]::after{width:100%}
.nav__a[aria-current="true"]{color:var(--marino)}

.nav__cta{padding:.65rem 1.3rem;min-height:0;font-size:var(--t-leyenda)}

.nav__btn{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;color:var(--marino)}
.nav__btn span{position:relative;display:block;width:24px;height:1.5px;background:currentColor;transition:background .1s linear}
.nav__btn span::before,.nav__btn span::after{
  content:"";position:absolute;left:0;width:24px;height:1.5px;background:currentColor;
  transition:transform .24s var(--salida),top .24s var(--salida);
}
.nav__btn span::before{top:-7px}
.nav__btn span::after{top:7px}
.nav__btn[aria-expanded="true"] span{background:transparent}
.nav__btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}


/* ==========================================================================
   09 · PORTADA
   Partido asimétrico sobre fondo claro. La foto de estudio se apoya en un
   bloque azul marino desplazado: la figura queda encajada en la marca sin
   necesidad de recortarla ni de ponerle un degradado encima.
   ========================================================================== */

.portada{padding-top:clamp(6.5rem,4.6rem + 6vw,8.5rem);padding-bottom:0;overflow:hidden}

.portada__rej{
  display:grid;
  /* El texto se queda con el ancho que necesita el titular para no partirse
     («en buenas manos» pide 639 px a 80 px de cuerpo), y la figura recupera
     tamaño sangrando hacia el canal derecho en vez de robarle columna.      */
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,.8rem + 3vw,3.5rem);
  align-items:end;
}

/* El texto se centra contra la figura. Alineado abajo quedaba descolgado,
   con un hueco grande encima, porque el bloque es más corto que la foto.   */
.portada__txt{align-self:center;padding-bottom:clamp(1.5rem,1rem + 1.6vw,2.5rem)}

/* Las cédulas abren el bloque, en letra fina y con filete dorado: es el dato
   que acredita a un médico, y va antes que cualquier otra cosa.             */
.portada__ced{
  padding-left:.9rem;
  border-left:2px solid var(--filo);
  font-size:var(--t-etiqueta);
  letter-spacing:.02em;
  color:var(--tinta-suave);
  margin-bottom:1.2rem;
}

/* El titular es el nombre del doctor. Regla del manual: «Dr.» en cursiva y
   los apellidos en serif bold.                                             */
.portada h1{color:var(--marino);font-weight:700;margin-bottom:1rem}
.portada h1 em{font-style:italic;font-weight:400}

/* El dorado sobre blanco da 3.21:1: reprueba como texto normal y solo cumple
   como texto grande, cuyo mínimo es 3:1. Por eso el tamaño nunca baja de
   24 px, ni siquiera en móvil. Si se reduce, hay que cambiarle el color.    */
/* Precio de la valoración, justo bajo el subtítulo. Sube desde la barra de
   datos porque es la primera pregunta que hace un paciente nuevo.          */
.portada__precio{
  margin-top:1.4rem;
  padding-left:1.1rem;
  border-left:2px solid var(--filo);
}
.portada__precio b{
  display:block;
  font-size:var(--t-guia);
  font-weight:700;
  color:var(--marino);
  letter-spacing:-.005em;
}
.portada__precio span{
  display:block;
  margin-top:.2rem;
  font-size:var(--t-leyenda);
  color:var(--tinta-suave);
}

.portada__sub{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.28rem + 0.9vw,1.875rem);
  font-style:italic;
  line-height:1.28;
  color:var(--dorado);
  max-width:22ch;
}

.portada__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* -- Figura --
   El retrato es un recorte con canal alfa, así que la figura se apoya de
   verdad sobre el bloque marino: cabeza y hombros quedan contra el blanco
   de la página y el resto contra el azul de la marca. El filete dorado va
   en el borde superior del bloque, por detrás del doctor.                  */
.portada__fig{
  position:relative;align-self:end;min-height:0;
  margin-right:calc(var(--canal) * -1);   /* sangra al canal para ganar tamaño */
}
.portada__fig::before{
  content:"";position:absolute;z-index:0;
  left:4%;right:0;bottom:0;top:19%;
  background:var(--marino);
  border-top:1px solid var(--filo-claro);
  border-radius:var(--radio-media);
}
.portada__fig img{
  position:relative;z-index:1;
  display:block;
  width:100%;max-width:640px;margin-inline:auto;
  height:auto;max-height:min(84vh,800px);
  object-fit:contain;object-position:center bottom;
}


/* ==========================================================================
   10 · BARRA DE DATOS
   Lo práctico primero: dónde, cuándo y cómo contactar. Debajo, en una línea
   fina, la formación. Sustituye a la franja de cuatro cifras doradas, que
   era decorativa y ocupaba el lugar de información que sí sirve.
   ========================================================================== */

.datos{border-block:1px solid var(--linea);background:var(--hueso)}
.datos__rej{display:grid;grid-template-columns:repeat(4,1fr)}
.datos__item{
  display:flex;flex-direction:column;gap:.3rem;
  padding:clamp(1.4rem,1rem + 1.4vw,2rem) clamp(1rem,.6rem + 1vw,1.75rem);
  border-left:1px solid var(--linea);
  transition:background .2s var(--salida);
}
.datos__item:first-child{border-left:none}
a.datos__item:hover{background:#fff}
.datos__r{
  font-size:var(--t-etiqueta);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento);
}
.datos__v{font-size:var(--t-menor);color:var(--tinta);line-height:1.45}
.datos__v b{font-weight:600}

/* La línea de credenciales se reparte de extremo a extremo en vez de quedar
   apelotonada a la izquierda, y las cédulas cierran por la derecha. */
.datos__form{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;
  gap:.5rem clamp(.9rem,.5rem + 1.2vw,2rem);
  padding:1rem 0;
  border-top:1px solid var(--linea);
  font-size:var(--t-leyenda);color:var(--tinta-suave);
}
.datos__form li{display:inline-flex;align-items:baseline;gap:.5rem}
.datos__form b{
  font-family:var(--serif);font-size:1.05rem;font-weight:700;
  color:var(--marino);letter-spacing:.01em;
}


/* ==========================================================================
   11 · SOBRE MÍ
   ========================================================================== */

.sobre__rej{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,1.2rem + 2.6vw,3.75rem);
  align-items:start;
}
.sobre__fig{position:relative;width:100%;max-width:430px;justify-self:end}
.sobre__fig img{width:100%;border:1px solid var(--linea);border-radius:var(--radio-media);background:var(--hueso-2)}
/* Filete dorado desplazado, el «filo de tarjeta» del manual. */
.sobre__fig::before{
  content:"";position:absolute;inset:1.3rem -1.3rem -1.3rem 1.3rem;
  border:1px solid var(--filo);border-radius:var(--radio-media);z-index:-1;
}


/* ==========================================================================
   12 · ÁREAS DE ESPECIALIDAD
   Filas editoriales en lugar de cuatro tarjetas iguales. El nombre del área
   pesa a la izquierda y la explicación acompaña a la derecha, separadas por
   un filete. Es una familia de layout distinta a todo lo demás de la página.
   ========================================================================== */

.areas{border-top:1px solid var(--linea)}
.area{
  display:grid;
  grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.5fr);
  gap:clamp(1rem,.5rem + 2vw,3rem);
  align-items:baseline;
  padding-block:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  border-bottom:1px solid var(--linea);
  transition:background .22s var(--salida);
}
.area:hover{background:var(--hueso)}
.area__ico{
  align-self:center;color:var(--acento);
  width:2.5rem;height:2.5rem;stroke-width:1.25;
}
.area h3{color:var(--marino)}
.area p{color:var(--tinta-suave);font-size:var(--t-menor)}


/* ==========================================================================
   13 · CARRUSEL DE CIRUGÍA
   La pieza que sostiene la página. Banda oscura a sangre, tira horizontal de
   fotos verticales con arrastre, teclado y ajuste por scroll-snap.
   La animación aquí está justificada: el carrusel ES el contenido.
   ========================================================================== */

.cx{background:var(--marino);color:var(--claro);overflow:hidden}
.cx__enc{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem);
}
.cx__enc h2{color:#fff;max-width:22ch}
.cx__enc p{color:var(--claro-2);font-size:var(--t-menor);max-width:40ch;margin-top:.9rem}

.cx__mandos{display:flex;gap:.6rem;flex:none}
.cx__btn{
  display:grid;place-items:center;
  width:var(--tap);height:var(--tap);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radio);
  color:#fff;
  transition:background .2s var(--salida),border-color .2s var(--salida),
             opacity .2s var(--salida),transform .16s var(--salida);
}
.cx__btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.cx__btn:active:not(:disabled){transform:scale(.94)}
.cx__btn:disabled{opacity:.28;cursor:not-allowed}

/* La tira se sale del contenedor por la derecha, para que se lea que hay
   más fotos fuera de cuadro. */
.cx__marco{margin-right:calc(var(--canal) * -1)}
/* Sin scroll-snap: el ajuste por casillas pelea con el avance continuo y
   produce tirones. El desplazamiento suave lo aporta el JS. */
.cx__pista{
  display:flex;gap:clamp(.75rem,.4rem + 1.2vw,1.25rem);
  overflow-x:auto;
  padding-bottom:.5rem;
  padding-right:var(--canal);
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.cx__pista::-webkit-scrollbar{display:none}
.cx__pista.arrastrando{cursor:grabbing}
.cx__pista.arrastrando img{pointer-events:none}

.cx__item{
  flex:0 0 auto;
  width:clamp(15rem,26vw,20rem);
}
.cx__item img{
  width:100%;height:auto;
  border-radius:var(--radio-media);
  background:var(--profundo);
  -webkit-user-drag:none;user-select:none;
}
.cx__cap{
  margin-top:.75rem;
  font-size:var(--t-leyenda);color:var(--claro-2);
  padding-left:.7rem;border-left:1px solid var(--filo-claro);
}

/* Es la advertencia médica del bloque: va centrada y con peso para que no
   pase por nota al pie. */
.cx__nota{
  margin:clamp(1.75rem,1.2rem + 1.8vw,2.6rem) auto 0;
  padding-top:clamp(1.4rem,1rem + 1.2vw,1.9rem);
  border-top:1px solid var(--linea-clara);
  max-width:54ch;
  text-align:center;
  font-size:var(--t-guia);
  font-weight:600;
  line-height:1.45;
  color:#fff;
}


/* ==========================================================================
   14 · PADECIMIENTOS
   Tres columnas de términos, sin tarjetas. La gente busca su molestia por
   nombre, así que lo que importa es que la lista se escanee rápido.
   ========================================================================== */

.pad__rej{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.75rem,1rem + 2.6vw,3.5rem);
}
.pad__col h3{
  color:var(--marino);
  padding-bottom:.85rem;
  border-bottom:1px solid var(--dorado);
  margin-bottom:1.1rem;
}
.pad__col li{
  padding:.6rem 0;
  border-bottom:1px solid var(--linea);
  font-size:var(--t-menor);
  color:var(--tinta-suave);
  line-height:1.45;
}
.pad__col li:last-child{border-bottom:none}


/* ==========================================================================
   15 · FORMACIÓN
   Horizontal, con un filete que enlaza los tres hitos.
   ========================================================================== */

/* Va dentro de «Sobre mí», separada por un filete en lugar de por una
   sección propia: evita el hueco vertical que dejaba como bloque suelto. */
.form{
  margin-top:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);
  padding-top:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);
  border-top:1px solid var(--linea);
}
.form__t{color:var(--marino);margin-bottom:1.6rem}

.form__rej{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,.8rem + 2.4vw,3rem);
}
.form__item{display:flex;flex-direction:column;align-items:flex-start}

/* Los escudos son logotipos institucionales: conservan sus colores, así que
   lo único que se puede unificar es la altura y el aire alrededor. */
.form__logo{
  width:auto;height:74px;
  margin-bottom:1.1rem;
  object-fit:contain;object-position:left center;
}

.form__anio{
  display:block;font-size:var(--t-etiqueta);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento);
  margin-bottom:.35rem;
}
.form__item h4{margin-bottom:.35rem;color:var(--marino);line-height:1.2}
.form__item p{font-size:var(--t-menor);color:var(--tinta-suave)}


/* ==========================================================================
   16 · CONSULTA A DISTANCIA Y COSTOS
   Dos bloques deliberadamente discretos, uno junto al otro.
   ========================================================================== */

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,.6rem + 1.4vw,1.75rem)}
.tarjeta{
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);
  border:1px solid var(--linea);
  border-top:2px solid var(--dorado);
  border-radius:var(--radio);
  background:var(--papel);
}
.tarjeta__ico{color:var(--acento);width:2rem;height:2rem;margin-bottom:1.1rem}
.tarjeta h3{color:var(--marino);margin-bottom:.55rem}
.tarjeta p{color:var(--tinta-suave);font-size:var(--t-menor);flex:1}
.tarjeta .btn{margin-top:1.4rem;align-self:flex-start}


/* ==========================================================================
   17 · TESTIMONIOS
   Uno destacado y dos de apoyo. Tres testimonios idénticos en fila es
   justo el patrón que hacía que la página se sintiera de plantilla.
   ========================================================================== */

.op__prin{
  border-top:1px solid var(--dorado);
  padding-top:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);
  margin-bottom:clamp(2rem,1.4rem + 2vw,3rem);
  max-width:52rem;
}
.op__prin blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  line-height:1.32;color:var(--marino);
}
.op__rej{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,1rem + 2vw,3rem)}
.op__sec blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:var(--t-guia);line-height:1.45;color:var(--tinta);
}
.op figcaption{
  margin-top:1rem;
  font-size:var(--t-etiqueta);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave);
}
.op__estrellas{display:flex;gap:.18rem;color:var(--dorado);margin-bottom:1rem}
.op__estrellas .ico{width:1rem;height:1rem}
.op__pie{
  margin-top:clamp(2rem,1.4rem + 2vw,3rem);
  padding-top:1.3rem;border-top:1px solid var(--linea);
  font-size:var(--t-leyenda);color:var(--tinta-suave);max-width:60ch;
}


/* ==========================================================================
   18 · FRASE DE CIERRE
   ========================================================================== */

/* Fotografía de quirófano a sangre bajo un velo azul marino muy denso. El
   velo no es decoración: es lo que vuelve determinista el contraste. Con .94
   a .90 de opacidad, el blanco queda en 12.5:1 aunque debajo esté la lámpara
   quirúrgica, que es lo más claro de la imagen.                             */
.cierre{
  position:relative;
  background:var(--profundo);color:#fff;text-align:center;
  padding-block:clamp(4rem,3rem + 4vw,7rem);
  overflow:hidden;
  isolation:isolate;
}
.cierre__fondo{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
}
.cierre::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(165deg,rgba(14,30,49,.94),rgba(20,37,56,.90));
}
.cierre .caja{position:relative}
.cierre p{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);
  line-height:1.24;
  max-width:20ch;margin-inline:auto;
  color:#fff;
}
/* Mismo tratamiento que en la portada: las dos palabras en cursiva dorada. */
.cierre p em{font-style:italic;font-weight:500;color:var(--dorado-claro)}
.cierre__linea{width:44px;height:1px;background:var(--dorado-claro);margin:0 auto 2rem}
.cierre .btn{margin-top:2.4rem}


/* ==========================================================================
   19 · CONTACTO
   ========================================================================== */

.cont__rej{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--linea);border-radius:var(--radio-media);overflow:hidden;
}
.cont__panel{background:var(--marino);color:var(--claro);padding:clamp(2rem,1.5rem + 2.2vw,3.4rem)}
.cont__panel h2{color:#fff;font-size:var(--h3);margin-bottom:.5rem}
.cont__panel > p{color:var(--claro-2);font-size:var(--t-menor);margin-bottom:1.8rem}

.cont__fila{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.1rem 0;border-top:1px solid var(--linea-clara);
  transition:padding-left .2s var(--salida);
}
.cont__fila:first-of-type{border-top:none}
a.cont__fila:hover{padding-left:.35rem}
.cont__ico{
  display:grid;place-items:center;width:36px;height:36px;flex:none;
  border:1px solid var(--filo-claro);border-radius:50%;color:var(--dorado-claro);
}
.cont__r{
  display:block;font-size:var(--t-etiqueta);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dorado-claro);margin-bottom:.15rem;
}
.cont__v{display:block;color:#fff;font-size:var(--t-cuerpo);line-height:1.45}

.cont__redes{display:flex;gap:.65rem;margin-top:1.9rem}
.cont__red{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  border:1px solid var(--linea-clara);border-radius:50%;color:#fff;
  transition:background .2s var(--salida),border-color .2s var(--salida);
}
.cont__red:hover{background:var(--acento);border-color:var(--acento)}

.cont__mapa{min-height:100%;background:var(--hueso-2)}
.cont__mapa iframe{width:100%;height:100%;min-height:30rem;border:0;display:block}


/* ==========================================================================
   20 · PIE DE PÁGINA
   ========================================================================== */

.pie{background:var(--profundo);color:var(--claro-2);padding-block:clamp(3rem,2.2rem + 2vw,4rem) 2rem;font-size:var(--t-menor)}
.pie__rej{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,1.2rem + 2.4vw,3.5rem);
  padding-bottom:2.2rem;border-bottom:1px solid var(--linea-clara);
}
.pie .marca{color:#fff}
.pie .marca__r{color:var(--dorado-claro)}
.pie__t{
  font-size:var(--t-etiqueta);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dorado-claro);margin-bottom:1rem;
}
.pie__lista li{padding:.3rem 0;font-size:var(--t-leyenda)}
.pie__lista a{
  display:inline-flex;align-items:center;min-height:var(--tap);
  color:var(--claro-2);transition:color .2s var(--salida);
}
.pie__lista a:hover{color:var(--dorado-claro)}
.pie__horas{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:var(--t-leyenda)}
.pie__horas dt{color:var(--claro-2)}
.pie__horas dd{color:#fff}
.pie__horas dd a{
  /* Son teléfonos: destinos táctiles reales, no enlaces dentro de un párrafo,
     así que les aplica el tamaño mínimo de 44 px.                           */
  display:inline-flex;align-items:center;min-height:var(--tap);
  border-bottom:1px solid var(--filo-claro);
  transition:color .2s var(--salida),border-color .2s var(--salida);
}
.pie__horas dd a:hover{color:var(--dorado-claro);border-bottom-color:var(--dorado-claro)}

/* -- Sígueme, en la columna de la marca -- */
.pie__t--redes{margin-top:2rem}
.pie__redes{display:flex;gap:.65rem}
.pie__red{
  display:grid;place-items:center;
  width:var(--tap);height:var(--tap);
  border:1px solid var(--linea-clara);border-radius:50%;
  color:#fff;
  transition:background .2s var(--salida),border-color .2s var(--salida);
}
.pie__red:hover{background:var(--acento);border-color:var(--acento)}
.pie__legal{
  padding-top:1.6rem;text-align:center;
  font-size:var(--t-leyenda);line-height:1.65;color:rgba(255,255,255,.5);
}
.pie__legal p + p{margin-top:.55rem}
.pie__legal a{color:rgba(255,255,255,.75)}


/* ==========================================================================
   21 · WHATSAPP FLOTANTE
   ========================================================================== */

/* Píldora fija que acompaña todo el recorrido, en móvil y en escritorio.
   El texto va en el verde oscuro de la marca de WhatsApp: 7.48:1 contra el
   verde claro. En blanco daría 1.98:1, que sirve para un logotipo pero no
   para texto.                                                              */
.wa{
  position:fixed;right:clamp(1rem,3vw,1.5rem);bottom:clamp(1rem,3vw,1.5rem);
  z-index:90;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:56px;
  padding:.7rem 1.35rem .7rem 1.1rem;
  border-radius:100px;
  background:#25D366;color:#0A2E17;
  font-size:var(--t-menor);font-weight:700;letter-spacing:.01em;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 1px rgba(10,46,23,.16);
  transition:transform .2s var(--salida),background .2s var(--salida);
}
.wa:hover{transform:translateY(-2px);background:#22C35D}
.wa:active{transform:scale(.97)}
.wa .ico{width:28px;height:28px;flex:none;fill:currentColor;stroke:none}
.wa__txt{white-space:nowrap}


/* ==========================================================================
   22 · REVELADOS
   ========================================================================== */

.rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--salida),transform .7s var(--salida)}
.rev.visible{opacity:1;transform:none}
/* Si el JS no corre, el contenido igual se ve. Nunca se oculta texto por
   depender de un script.                                                   */
.sinjs .rev{opacity:1;transform:none}


/* ==========================================================================
   23 · AVISO DE PRIVACIDAD
   ========================================================================== */

.legal{padding-top:clamp(8rem,6rem + 6vw,11rem)}
.legal__cuerpo{max-width:44rem}
.legal__cuerpo h2{font-size:var(--h3);margin:2.6rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--linea);color:var(--marino)}
.legal__cuerpo h2:first-of-type{margin-top:2rem}
.legal__cuerpo h3{font-size:var(--h4);margin:1.6rem 0 .55rem;color:var(--marino)}
.legal__cuerpo p{color:var(--tinta-suave);margin-bottom:1rem}
.legal__cuerpo ul{margin:0 0 1.3rem;display:flex;flex-direction:column;gap:.55rem}
.legal__cuerpo ul li{display:flex;align-items:flex-start;gap:.7rem;color:var(--tinta-suave)}
.legal__cuerpo ul li::before{
  content:"";flex:none;width:5px;height:5px;margin-top:.62em;
  border-radius:50%;background:var(--dorado);
}
.legal__fecha{
  display:inline-block;margin-top:.6rem;padding:.5rem 1rem;
  border:1px solid var(--linea);border-left:2px solid var(--dorado);
  border-radius:var(--radio);font-size:var(--t-leyenda);color:var(--gris);
}


/* ==========================================================================
   24 · RESPONSIVE
   Probado a 360, 390, 768, 1024, 1440 y 1920 px.
   ========================================================================== */

@media (max-width:1180px){
  /* Con cuatro datos, tres columnas dejarían uno suelto en la última fila.
     Se pasa directo a dos, que reparte 2 y 2.                              */
  .datos__rej{grid-template-columns:repeat(2,1fr)}
  .datos__item:nth-child(odd){border-left:none}
  .datos__item:nth-child(n+3){border-top:1px solid var(--linea)}
}

@media (max-width:1080px){
  .portada__rej{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  .portada__fig img{max-width:460px}
}

@media (max-width:860px){
  .datos__rej{grid-template-columns:repeat(2,1fr)}
  .datos__item:nth-child(n+3){border-top:1px solid var(--linea)}
  .datos__item:nth-child(odd){border-left:none}
}

@media (max-width:960px){
  .nav__lista{
    position:fixed;inset:0 0 0 auto;width:min(88%,340px);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;
    padding:5rem 2rem 2rem;
    background:var(--profundo);
    box-shadow:-24px 0 60px rgba(0,0,0,.4);
    transform:translateX(100%);
    /* visibility saca el panel del ancho desplazable y del orden de
       tabulación: sin esto se puede tabular a enlaces invisibles.          */
    visibility:hidden;
    transition:transform .34s var(--salida),visibility .34s;
    overflow-y:auto;
  }
  .nav__lista.abierto{transform:none;visibility:visible}
  .nav__lista li{width:100%}
  .nav__a{display:block;width:100%;padding:.9rem 0;font-size:1.0625rem;color:var(--claro);border-bottom:1px solid var(--linea-clara)}
  .nav__a:hover{color:#fff}
  .nav__a::after{display:none}
  .nav__btn{display:flex}
  .nav__cta{display:none}
  .marca__largo{display:none}
  .marca__corto{display:inline}

  .sobre__rej{grid-template-columns:1fr;gap:2.25rem}
  .sobre__fig{justify-self:start;max-width:380px}
  .area{grid-template-columns:auto 1fr;row-gap:.7rem}
  .area p{grid-column:2}
  .pad__rej{grid-template-columns:1fr;gap:2rem}
  /* La formación pasa a filas: escudo a la izquierda, texto a la derecha. */
  .form__rej{grid-template-columns:1fr;gap:1.75rem}
  .form__item{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    column-gap:1.25rem;
    align-items:start;
  }
  .form__logo{grid-row:1 / span 3;height:48px;margin-bottom:0;align-self:center}
  .form__anio{margin-bottom:.2rem}
  .cont__rej{grid-template-columns:1fr}
  .cont__mapa iframe{min-height:22rem}
  .op__rej{grid-template-columns:1fr;gap:2rem}
  .pie__rej{grid-template-columns:1fr 1fr}
  .pie__rej > :first-child{grid-column:1 / -1}
}

@media (max-width:820px){
  .portada__rej{grid-template-columns:1fr;gap:0}
  .portada__txt{padding-bottom:2.5rem}
  .portada__sub{max-width:none}
  .portada__cta .btn{flex:1 1 100%}
  .portada__fig{max-width:460px;margin-inline:auto;margin-right:auto}
  .portada__fig::before{left:3%;right:3%;top:17%}
  .portada__fig img{max-width:400px;max-height:min(62vh,540px)}
  .dupla{grid-template-columns:1fr}
  .cx__item{width:clamp(13rem,68vw,17rem)}
}

@media (max-width:600px){
  .datos__rej{grid-template-columns:1fr}
  .datos__item{border-left:none;border-top:1px solid var(--linea)}
  .datos__item:first-child{border-top:none}
  .cx__enc{flex-direction:column;align-items:flex-start}
  .cx__mandos{order:2}
  .pie__rej{grid-template-columns:1fr}
  .pie__rej > :first-child{grid-column:auto}
  /* En pantallas chicas la píldora se ajusta, pero conserva el texto: es el
     CTA principal del sitio y sin él vuelve a ser solo un icono. */
  .wa{min-height:52px;padding:.6rem 1.15rem .6rem .95rem;gap:.5rem;font-size:var(--t-leyenda)}
  .wa .ico{width:25px;height:25px}
  .tarjeta .btn{width:100%}
}


/* ==========================================================================
   MOVIMIENTO REDUCIDO
   Se quita el movimiento, nunca el contenido: un revelado que no dispara
   jamás debe dejar texto en opacidad 0.
   ========================================================================== */

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


/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */

@media print{
  .cab,.wa,.cx,.cont__mapa,.cierre{display:none !important}
  body{color:#000;background:#fff;font-size:11pt}
  .sec{padding-block:1.5rem}
  .rev{opacity:1 !important;transform:none !important}
}