/* ============================================================================
   Clínicas Dr. Miguel A. Martínez Molina — Fundamentos del rediseño
   Tokens, tipografía y componentes recurrentes.
   Valores tomados del handoff (README + prototipos .dc.html).
   ============================================================================ */

/* ---------------------------------------------------------------- Tokens --- */
:root{
  /* Color */
  --teal-oscuro:#0C3D46;   /* titulares, texto enfático, secciones oscuras */
  --teal-medio:#0F4E5A;    /* enlaces, cifras, texto en botones invertidos */
  --teal-brillante:#1B8395;/* acento: viñetas, flechas, eyebrows, cargos */
  --teal-claro:#7FD3E0;    /* encabezados de columna del footer */
  --teal-palido:#9FE3EE;   /* viñetas dentro de tarjetas con degradado */

  --cuerpo:#4C6A73;        /* párrafos sobre blanco — 5,8:1 */
  --secundario:#66838C;    /* pies de foto, migas, metadatos — 4,4:1 */

  --fondo-suave:#F4F8F8;   /* secciones alternas */
  --blanco:#FFFFFF;

  --borde:#E6E9EA;         /* tarjetas y separadores de 1px */
  --borde-boton:#C9DBDE;   /* botón de contorno */
  --borde-chip:#D7E3E5;    /* chips de píldora */
  --borde-campo:#DDE4E6;   /* inputs y selects */
  --placeholder:#A9B3B8;

  --degradado:linear-gradient(150deg,#1B8395 0%,#0F4E5A 100%);

  /* Sombras — todas tintadas en teal, nunca negro puro */
  --sh-boton:0 14px 30px rgba(15,78,90,.28);
  --sh-boton-hero:0 14px 30px rgba(15,78,90,.32);
  --sh-boton-hover:0 18px 38px rgba(15,78,90,.42);
  --sh-degradado:0 20px 44px rgba(12,61,70,.26);
  --sh-destacada:0 18px 40px rgba(12,61,70,.26);
  --sh-capsula:0 14px 34px rgba(12,61,70,.18);
  --sh-muela:drop-shadow(0 8px 16px rgba(12,61,70,.18));

  /* Tipografía */
  --display:'Manrope',system-ui,-apple-system,sans-serif;
  --texto:'Quicksand',system-ui,-apple-system,sans-serif;

  /* Radios */
  --r-pildora:999px;
  --r-grande:24px;   /* tarjeta grande, «En resumen», fachada */
  --r-tarjeta:20px;  /* tarjeta de sección, figura, retrato */
  --r-foto:18px;     /* miniatura, foto de galería */
  --r-capsula:16px;  /* cápsula sobre foto */
  --r-campo:14px;    /* input, select, textarea */
  --r-mini:12px;     /* miniatura pequeña */

  /* Layout */
  --gutter:56px;     /* gutter lateral de página */
  --seccion:88px;    /* padding vertical de sección */

  /* Movimiento */
  --curva:cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------- Reset --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--texto);
  font-size:17px;
  line-height:1.7;
  color:var(--cuerpo);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

a{color:var(--teal-medio);text-decoration:none;transition:color .2s var(--curva)}
a:hover{color:var(--teal-brillante)}

/* El foco siempre visible: nunca se suprime el outline */
:focus-visible{
  outline:3px solid rgba(27,131,149,.35);
  outline-offset:3px;
  border-radius:6px;
}

/* ------------------------------------------------------------ Tipografía --- */
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--teal-oscuro);font-weight:800}

/* Escala del handoff. Cada clase es un rol, no un tamaño. */
.t-h1-portada{font-family:var(--display);font-size:76px;font-weight:800;letter-spacing:-.045em;line-height:1}
.t-h1-interior{font-family:var(--display);font-size:62px;font-weight:800;letter-spacing:-.04em;line-height:1.02}
.t-h2-clinicas{font-family:var(--display);font-size:64px;font-weight:800;letter-spacing:-.045em;line-height:1.02}
.t-h2{font-family:var(--display);font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.t-h2-estrecha{font-family:var(--display);font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1.08}
.t-h3-grande{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.t-h3-faq{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.t-h3{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.19}
.t-h3--21{font-size:21px;line-height:1.2}
.t-h3--23{font-size:23px;line-height:1.18}
.t-municipio{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1}
.t-cifra{font-family:var(--display);font-size:46px;font-weight:800;letter-spacing:-.045em;line-height:1}
.t-entrada{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.025em;line-height:1.35}

.t-sub-hero{font-size:18px;line-height:1.65}
.t-cuerpo{font-size:17px;line-height:1.7}
.t-cuerpo-tarjeta{font-size:16px;line-height:1.575}
.t-nav{font-family:var(--display);font-size:15px;font-weight:500}
.t-meta{font-size:15px;line-height:1.5;color:var(--secundario)}

.t-eyebrow{
  font-family:var(--display);font-size:13px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
}

/* Énfasis dentro de párrafos: el handoff lo pinta en teal oscuro */
.prosa strong,strong.enfasis{color:var(--teal-oscuro);font-weight:700}

/* ---------------------------------------------------------------- Layout --- */
.contenedor{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.seccion{padding:var(--seccion) 0}
.seccion--suave{background:var(--fondo-suave)}
.seccion--oscura{background:var(--teal-oscuro);color:rgba(255,255,255,.82)}
.seccion--oscura h1,.seccion--oscura h2,.seccion--oscura h3{color:var(--blanco)}
/* Cuando una sección encadena con la anterior */
.seccion--seguida{padding-top:32px}
.seccion--corta{padding:72px 0}

/* --------------------------------------------------------------- Eyebrow --- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:13px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-oscuro);
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:var(--r-pildora);
  background:var(--teal-brillante);flex:none;
}
.seccion--oscura .eyebrow{color:var(--blanco)}
.seccion--oscura .eyebrow::before{background:var(--teal-claro)}

/* --------------------------------------------------------------- Botones --- */
/* Primario con flecha: el CTA principal */
.boton-flecha{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--degradado);color:var(--blanco);
  border-radius:var(--r-pildora);
  padding:8px 8px 8px 28px;
  box-shadow:var(--sh-boton);
  font-family:var(--display);
  transition:box-shadow .2s var(--curva),transform .2s var(--curva);
}
.boton-flecha .etiqueta{font-size:16px;font-weight:700;white-space:nowrap}
.boton-flecha .circulo{
  width:44px;height:44px;flex:none;border-radius:var(--r-pildora);
  background:var(--blanco);color:var(--teal-medio);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:transform .2s var(--curva);
}
.boton-flecha:hover{color:var(--blanco);box-shadow:var(--sh-boton-hover);transform:translateY(-2px)}
.boton-flecha:hover .circulo{transform:translateX(3px)}
.boton-flecha--hero{box-shadow:var(--sh-boton-hero)}

/* Primario compacto, sin flecha, para rejillas de tarjetas */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--degradado);color:var(--blanco);
  border-radius:var(--r-pildora);padding:13px 24px;
  font-family:var(--display);font-size:16px;font-weight:700;
  min-height:44px;
  box-shadow:var(--sh-boton);
  transition:box-shadow .2s var(--curva),transform .2s var(--curva);
}
.boton:hover{color:var(--blanco);box-shadow:var(--sh-boton-hover);transform:translateY(-2px)}

/* Secundario de contorno */
.boton-linea{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid var(--borde-boton);color:var(--teal-oscuro);
  border-radius:var(--r-pildora);padding:15px 26px;
  font-family:var(--display);font-size:16px;font-weight:700;
  min-height:44px;background:var(--blanco);
  transition:border-color .2s var(--curva),background .2s var(--curva),transform .2s var(--curva);
}
.boton-linea:hover{border-color:var(--teal-brillante);color:var(--teal-oscuro);transform:translateY(-2px)}

/* Invertido, sobre fondo con degradado */
.boton-blanco{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  align-self:flex-start;background:var(--blanco);color:var(--teal-medio);
  border-radius:var(--r-pildora);padding:14px 26px;
  font-family:var(--display);font-size:16px;font-weight:700;min-height:44px;
  transition:transform .2s var(--curva),box-shadow .2s var(--curva);
}
.boton-blanco:hover{color:var(--teal-medio);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.16)}

/* Enlace de texto subrayado, como «Ver tratamientos» */
.enlace-sub{
  font-family:var(--display);font-size:16px;font-weight:700;color:var(--teal-oscuro);
  border-bottom:2px solid var(--teal-brillante);padding-bottom:3px;
}
.enlace-sub:hover{color:var(--teal-brillante)}

/* ------------------------------------------------------------------ Chip --- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--borde-chip);border-radius:var(--r-pildora);
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--teal-oscuro);
  background:var(--blanco);
}
.chip::before{content:'↗';color:var(--teal-brillante);font-size:14px;line-height:1}
.chip--limpio::before{content:none}
/* Sobre foto o fondo oscuro */
.chip--flotante{background:rgba(255,255,255,.94);border-color:transparent;box-shadow:var(--sh-capsula)}

/* --------------------------------------------------------------- Tarjeta --- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);padding:28px;
  transition:box-shadow .2s var(--curva),transform .2s var(--curva);
}
.tarjeta--enlace:hover{transform:translateY(-2px);box-shadow:var(--sh-destacada)}

/* Variante destacada: degradado de marca y texto blanco */
.tarjeta--destacada{
  background:var(--degradado);border-color:transparent;color:rgba(255,255,255,.9);
  box-shadow:var(--sh-destacada);
}
.tarjeta--destacada h2,.tarjeta--destacada h3{color:var(--blanco)}
.tarjeta--destacada strong{color:var(--blanco)}

/* Cápsula flotante sobre una foto */
.capsula{
  background:var(--blanco);border-radius:var(--r-capsula);
  padding:16px 22px;box-shadow:var(--sh-capsula);
}
.capsula .nombre{font-family:var(--display);font-size:17px;font-weight:800;color:var(--teal-oscuro);letter-spacing:-.02em}
.capsula .cargo{font-size:15px;color:var(--teal-brillante);font-weight:600}

/* ---------------------------------------------------- Bloque «En resumen» --- */
.resumen{
  background:var(--degradado);border-radius:var(--r-grande);
  padding:34px;color:rgba(255,255,255,.9);
  display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--sh-degradado);
}
.resumen h3{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--blanco)}
.resumen .puntos{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.6}
.resumen .puntos li{display:flex;gap:11px}
.resumen .puntos li::before{content:'·';color:var(--teal-palido);flex:none}
.resumen .puntos strong{color:var(--blanco);font-weight:700}
.resumen .nota{
  border-top:1px solid rgba(255,255,255,.2);padding-top:16px;
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);
}

/* ------------------------------------------------------- Muela flotante --- */
.muela{
  position:absolute;z-index:5;width:52px;
  filter:var(--sh-muela);
  animation:flota 9s ease-in-out infinite;
  transform:rotate(var(--r,14deg));
  pointer-events:none;
}
.muela--b{width:46px;animation-duration:11s;animation-delay:-3s;--r:-16deg}

@keyframes flota{
  0%,100%{transform:translateY(0) rotate(var(--r,14deg))}
  50%    {transform:translateY(-16px) rotate(var(--r,14deg))}
}

@media (prefers-reduced-motion:reduce){
  [data-muela],.muela{animation:none !important}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* Botón del menú móvil: solo se ve por debajo de 1040 px (css/responsive.css) */
.menu-boton{display:none}

/* ============================================================================
   Barra de navegación fija
   El diseño la dejaba estática y se perdía al bajar, junto con el botón de
   pedir cita. Aquí se queda pegada arriba en las tres variantes de nav.
   ============================================================================ */
.nav-clinica,.nav-sitio,.nav-flotante{
  position:sticky;top:0;z-index:50;background:var(--blanco);
  transition:box-shadow .25s var(--curva);
}
/* Sombra solo cuando ya está pegada, para que no flote sin motivo */
.nav-clinica.pegada,.nav-sitio.pegada,.nav-flotante.pegada{
  box-shadow:0 6px 20px rgba(12,61,70,.09);
}

/* Al saltar a un ancla, que el titular no quede debajo de la barra */
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Barra de la portada -------------------------------------------------- */
/* La portada no tiene barra superior: su menú vive dentro del hero. Esta
   aparece al dejar atrás el hero, para no tapar la foto de entrada. */
.nav-flotante{
  position:fixed;left:0;right:0;top:0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:70px;padding:0 var(--gutter);
  border-bottom:1px solid var(--borde);
  transform:translateY(-100%);transition:transform .3s var(--curva);
}
.nav-flotante.visible{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .nav-flotante,.nav-clinica,.nav-sitio{transition:none}
}
.nav-flotante .marca{font-family:var(--display);font-size:16px;font-weight:500;color:var(--teal-oscuro);white-space:nowrap}
.nav-flotante .marca b{font-weight:800}
.nav-flotante .enlaces{display:flex;align-items:center;gap:24px}
.nav-flotante .enlaces a{
  font-family:var(--display);font-size:15px;font-weight:500;color:var(--cuerpo);white-space:nowrap;
}
.nav-flotante .enlaces a:hover{color:var(--teal-brillante)}
.nav-flotante .enlaces a.cta{
  background:var(--degradado);color:var(--blanco);border-radius:var(--r-pildora);
  padding:11px 22px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;
}
.nav-flotante .enlaces a.cta:hover{color:var(--blanco)}

/* En Los Gallos el número de contacto es el móvil: va destacado y el fijo en claro */
a.tel-movil{font-weight:700;color:var(--teal-oscuro)}
a.tel-movil:hover{color:var(--teal-brillante)}
a.tel-fijo{color:var(--secundario)}
.pie a.tel-movil,.pie-sitio a.tel-movil{color:var(--blanco)}
.pie a.tel-fijo,.pie-sitio a.tel-fijo{color:rgba(255,255,255,.6)}
/* En las fichas de clínica el segundo número va en gris, no en tinta */
.ficha-clinica .datos .tel-fijo{color:var(--secundario)}