:root {
  /* Paleta oficial — Brandbook Felipe Fuenzalida */
  --stone: #9F9689;      /* beige piedra */
  --ink: #555151;        /* gris profundo */
  --ink-strong: #3D3938; /* variante más oscura, para fondos densos */
  --haze: #909B9A;       /* azul grisáceo */
  --amber: #B76E2D;      /* terracota ámbar — acento, para CTAs y botones */
  --amber-dark: #96591F;
  --cream: #F2F0EA;      /* fondo claro, tinte del beige piedra */
  --cream-deep: #E8E4DC;
  --line: #D9D4C9;

  /* Tipografías del brandbook: League Spartan (títulos) y Glacial
     Indifference (secundaria/subtítulos) son libres, autohospedadas acá
     abajo. TT Chocolates (textos) es una fuente comercial de TypeType —
     no la incluimos sin la licencia real; Poppins la reemplaza mientras
     tanto (ver docs/06-guia-despliegue.md). */
  --font-display: 'League Spartan', sans-serif;
  --font-secondary: 'Glacial Indifference', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --max-width: 1560px;
  --gutter: clamp(24px, 5vw, 72px);
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('assets/fonts/GlacialIndifference-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('assets/fonts/GlacialIndifference-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('assets/fonts/GlacialIndifference-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

/* La frase clave de cada titular (h1 dentro de .hero, 8 páginas) se marca
   por PESO tipográfico (800, el más grueso cargado de League Spartan),
   no por color — mismo --ink-strong que el resto del título. El patrón
   anterior (última frase en otro color) se veía repetido igual en las 8
   páginas, señal clásica de plantilla — el peso da el mismo golpe visual
   sin ese efecto. */
.accent { font-weight: 800; }

/* Salta el menú y va directo al contenido — invisible hasta que se
   navega con teclado (Tab), donde aparece arriba a la izquierda. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--amber);
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: 12px; }

/* Header — borde inferior fino para marcar dónde termina, en vez de
   dejarlo flotando sobre el mismo fondo que el resto de la página. */
.site-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-strong);
  letter-spacing: 0.01em;
}

.brand-mark { height: 30px; width: auto; display: block; }

/* Menú sandwich */
.menu-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink-strong);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--gutter);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  box-shadow: 0 12px 28px rgba(61, 57, 56, 0.12);
  z-index: 60;
}

.menu-panel[hidden] { display: none; }

.menu-panel a {
  text-decoration: none;
  font-family: var(--font-secondary);
  font-size: 15.5px;
  color: var(--ink-strong);
  padding: 10px 12px;
  border-radius: 6px;
}

.menu-panel a:hover { background: var(--cream); }

/* Hero */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 96px var(--gutter) 140px;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 15ch;
  text-wrap: balance;
  text-align: left;
}

/* Grid de servicios */
.grid-servicios {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 140px;
}

.grid-cuadros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Tablet: intermedio entre el celular (1 columna) y el escritorio. */
@media (min-width: 640px) {
  .grid-cuadros { grid-template-columns: repeat(2, 1fr); }
}

.cuadro {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border: none;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  aspect-ratio: 1 / 1;
  width: 100%;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.cuadro:hover { transform: translateY(-3px); }
.cuadro:active { transform: scale(0.98); }

/* Tarjetas con fotos de fondo (Servicios, Estética, Radiología): varias
   imágenes apiladas que se alternan solas, sin flechas ni controles —
   ver cuadro-fondo.js. Un degradado oscuro entre las fotos y el texto
   asegura que el texto blanco se lea sin importar qué foto esté activa. */
.cuadro-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cuadro-fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.cuadro-fondo img.cuadro-fondo-activa { opacity: 1; }

.cuadro-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(31, 28, 27, 0.6);
}

.cuadro-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cuadro--foto h3 { color: #fff; }
.cuadro--foto p { color: #EDEAE5; }

.cuadro h3 {
  font-size: 26px;
  font-weight: 600;
}

.cuadro p {
  font-size: 15.5px;
  line-height: 1.6;
}

.cuadro--arrow {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  color: var(--ink-strong);
}

.cuadro-arrow-svg { width: 55%; height: auto; }

.cuadro--ink { background: var(--ink); color: var(--cream); }
.cuadro--ink h3 { color: #fff; }
.cuadro--ink p { color: #D8D5D0; }

.cuadro--amber { background: var(--amber); color: #fff; }
.cuadro--amber h3 { color: #fff; }
.cuadro--amber p { color: #F5E3D3; }

.cuadro--haze { background: var(--haze); color: #fff; }
.cuadro--haze h3 { color: #fff; }
.cuadro--haze p { color: #EAEDEC; }

.cuadro--stone { background: var(--cream-deep); color: var(--ink-strong); border: 1px solid var(--line); }

.cuadro--ink-strong { background: var(--ink-strong); color: var(--cream); }
.cuadro--ink-strong h3 { color: #fff; }
.cuadro--ink-strong p { color: #D8D5D0; }

@media (min-width: 900px) {
  /* 3 columnas x 2 filas: los 6 espacios se ven juntos de una, sin
     scroll — sigue siendo una grilla pareja (6 celdas exactas). */
  .grid-cuadros { grid-template-columns: repeat(3, 1fr); }
}

/* Profesional — bloque a todo el ancho en --ink-strong (mismo criterio que
   .invertir con --haze más abajo): rompe la monotonía de fondo claro sin
   tener que invertir los colores del resto del sitio, y le da a esta
   sección — se repite igual en colageno/ácido/toxina — un momento propio
   en vez de verse como una fila más de contenido sobre fondo crema. */
.profesional-seccion {
  background: var(--ink-strong);
  padding: 100px 0;
}

.profesional {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
}

.profesional-seccion .profesional-texto h2 { color: #fff; }
.profesional-seccion .profesional-linea { color: var(--amber); }
.profesional-seccion .profesional-texto > p:not(.profesional-linea) { color: #C9C5BE; }

.profesional-foto,
.invertir-foto {
  aspect-ratio: 4 / 5;
  background: var(--cream-deep);
  border: 1px dashed var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.profesional-foto span,
.invertir-foto span {
  font-size: 13px;
  color: var(--stone);
}

/* Foto real en vez del placeholder punteado — .profesional-foto es una
   sola imagen fija; .invertir-foto[data-carrusel] son 2+ fotos que rotan
   solas cada 4.5s, mismo mecanismo (y mismas clases, cuadro-fondo-activa)
   que ya usa el carrusel de las tarjetas de servicio más arriba — sin
   flechas, sin JS nuevo, solo reutiliza el bloque "Carrusel automático"
   de script.js, que ya busca cualquier [data-carrusel] de la página. */
.profesional-foto--real {
  border: none;
  background: none;
  padding: 0;
  overflow: hidden;
}

.profesional-foto--real img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invertir-foto[data-carrusel] {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  overflow: hidden;
}

.invertir-foto[data-carrusel] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.invertir-foto[data-carrusel] img.cuadro-fondo-activa { opacity: 1; }

.profesional-texto h2 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
}

.profesional-linea {
  font-family: var(--font-secondary);
  font-size: 19px;
  color: var(--amber-dark);
  font-weight: 700;
  margin: 14px 0 22px;
}

.profesional-texto > p:not(.profesional-linea) {
  font-size: 16px;
  color: var(--ink);
  max-width: 56ch;
}

.btn-primary {
  display: inline-block;
  margin-top: 30px;
  background: var(--amber);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-secondary);
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
}

.btn-primary:hover { background: var(--amber-dark); }
.btn-primary:active { transform: scale(0.98); }

/* No tengas miedo en invertir en ti — bloque de color a todo el ancho,
   para marcar contraste con las secciones claras de arriba. */
.invertir {
  background: var(--haze);
  padding: 110px 0;
}

.invertir-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.invertir-texto h2 {
  color: #fff;
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 700;
  line-height: 1.2;
}

.invertir .invertir-foto {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.invertir .invertir-foto span { color: #fff; opacity: 0.8; }

.invertir-foto { aspect-ratio: 5 / 4; }

/* Reseñas de Google — cierre de la página antes del footer, prueba social
   simple (calificación + 3 citas reales) en vez de un widget externo que
   necesitaría cuenta/API aparte. Vuelve a fondo claro (--cream) para
   mantener la alternancia clara/oscura/oscura/clara del resto de la
   página. Calificación, citas y link reales quedan pendientes de Felipe
   (ver docs/07-pendientes-externos.md) — hoy son placeholder entre
   corchetes, mismo criterio que el resto del sitio. */
.resenas {
  background: var(--cream);
  padding: 100px 0 110px;
  text-align: center;
}

.resenas-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.resenas-inner h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
}

.resenas-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.resenas-estrellas {
  color: var(--amber);
  font-size: 22px;
  letter-spacing: 2px;
}

.resenas-numero {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink-strong);
}

.resenas-conteo { font-size: 14px; color: var(--stone); }

.resenas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0 44px;
  text-align: left;
}

.resena-card {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  margin: 0;
}

.resena-card .resena-estrellas {
  display: block;
  color: var(--amber);
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.resena-card p { font-size: 15px; color: var(--ink); margin-bottom: 16px; }

.resena-card cite {
  font-style: normal;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-strong);
}

/* Documentos */
.documentos {
  background: var(--ink-strong);
  color: var(--cream);
  padding: 120px var(--gutter);
}

/* Como página propia (documentos.html): la tarjeta se centra entera en
   la pantalla, en vez de quedar pegada a la izquierda de un contenedor
   de 1560px — eso era lo que se sentía vacío. */
.documentos--pagina {
  min-height: calc(100dvh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--gutter);
}

.documentos-inner { max-width: var(--max-width); margin: 0 auto; }

.documentos--pagina .documentos-inner {
  max-width: 640px;
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 72px 56px;
}

.documentos h2 { color: #fff; font-size: clamp(30px, 3.8vw, 42px); }
.documentos-sub { font-family: var(--font-secondary); color: #C9C5BE; margin: 18px 0 40px; font-size: 16.5px; max-width: 50ch; }
.documentos--pagina .documentos-sub { margin-left: auto; margin-right: auto; }

#form-documentos {
  max-width: 520px;
}

.documentos--pagina #form-documentos {
  max-width: 100%;
  text-align: left;
}

.documentos--pagina .botones-documento { justify-content: center; }

#form-documentos label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  color: #C9C5BE;
}

#form-documentos input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid #5C5754;
  background: #46413F;
  color: #fff;
  font-size: 15px;
  font-family: var(--font-body);
  margin-bottom: 8px;
}

#form-documentos input::placeholder { color: #9A948E; }

.error-mensaje {
  color: #E3A98C;
  font-size: 13px;
  min-height: 18px;
  margin-bottom: 8px;
}

.botones-documento {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.botones-documento button {
  background: transparent;
  border: 1px solid #6B6561;
  color: var(--cream);
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
}

.botones-documento button:hover { background: var(--amber); border-color: var(--amber); }
.botones-documento button:active { transform: scale(0.98); }
.botones-documento button:disabled { opacity: 0.5; cursor: default; }

.resultado-mensaje {
  margin-top: 22px;
  font-size: 14px;
  color: var(--cream);
  min-height: 20px;
}

/* WhatsApp flotante — fondo blanco/neutro a propósito: el ícono usa el
   verde oficial de WhatsApp (es una marca de terceros, no se recolorea),
   así que el fondo tiene que ser neutro para que se vea como corresponde
   en vez de chocar con el acento ámbar del resto del sitio. */
.whatsapp-flotante {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 56px;
  height: 56px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(61, 57, 56, 0.22);
  transition: transform 0.18s ease;
  z-index: 50;
}

.whatsapp-flotante:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(61, 57, 56, 0.3); }
.whatsapp-flotante:active { transform: scale(0.96); }

/* El custom element es inline por defecto y el SVG de adentro hereda ese
   mismo comportamiento — deja un hueco debajo (espacio de línea base) que
   corre el ícono hacia arriba dentro del círculo. Centrando el propio
   <icon-whatsapp> como flex, el hueco deja de importar. */
.whatsapp-flotante icon-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer — un tono más oscuro que el fondo, en vez de una línea divisoria */
.site-footer {
  background: var(--stone);
  padding: 18px 0;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}

.footer-brand .brand-mark { height: 20px; }

.footer-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12.5px;
  color: #F2F0EA;
}

.footer-info a { text-decoration: none; }
.footer-info a:hover { color: var(--ink-strong); }

@media (max-width: 900px) {
  .profesional, .invertir { grid-template-columns: 1fr; }
  .invertir-foto { order: -1; }
  .resenas-grid { grid-template-columns: 1fr; }
}

/* Popup de información (se abre al hacer clic en una tarjeta de servicio) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(61, 57, 56, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 440px;
  border-radius: 10px;
  padding: 44px 36px 36px;
  text-align: left;
}

.modal h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 14px;
}

.modal p {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}

.modal .btn-primary { margin-top: 26px; }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ============================================================
   Landings de campaña (Meta Ads) — /colageno y páginas secundarias.
   Reutiliza .site-header, .brand, .hero, .grid-cuadros/.cuadro, .btn-primary
   y la paleta de arriba; esto son solo los componentes nuevos que esas
   páginas necesitan y el resto del sitio no (botón secundario, badge de
   cupos, formulario, tamizaje, FAQ, banner de cookies, prosa legal).
   ============================================================ */

.btn-secundario {
  display: inline-block;
  background: transparent;
  color: var(--ink-strong);
  border: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--font-body);
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.btn-secundario:hover { background: var(--cream-deep); }

/* Header minimalista de una landing de campaña — mismo .site-header, sin
   botón hamburguesa ni menú: "sin distraer" (ver docs/01-resumen-proyecto.md). */
.site-header--promo { justify-content: center; }

.cupos-badge {
  display: inline-block;
  margin-top: 22px;
  background: var(--amber);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
}

.promo-incluye { padding-top: 0; }
.promo-incluye h2, .promo-precio h2, .promo-form h2, .promo-faq h2 {
  max-width: var(--max-width);
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  font-size: clamp(26px, 3.4vw, 36px);
}

.promo-precio {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 50px var(--gutter);
}

.promo-precio-caja {
  background: var(--cream-deep);
  border-radius: 10px;
  padding: 36px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.promo-precio-montos { font-family: var(--font-secondary); }
.promo-precio-total { font-size: 15px; color: var(--stone); text-decoration: line-through; }
.promo-precio-abono { font-size: 28px; font-weight: 700; color: var(--ink-strong); }
.promo-precio-abono span { font-size: 15px; font-weight: 400; color: var(--ink); text-decoration: none; }

.promo-precio .btn-primary { margin-top: 0; }

.promo-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 50px var(--gutter);
}

/* Control +/- para agregar los datos del segundo paciente (ver
   diagnostico-agendar.js) — tope de 2, nunca un contador libre, porque el
   bloque de hora que se reserva es siempre uno solo extra, no varios. */
.promo-pacientes-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-deep);
  font-size: 14px;
}

.promo-pacientes-botones { display: flex; align-items: center; gap: 10px; }
.promo-pacientes-botones span { font-weight: 600; color: var(--ink-strong); min-width: 68px; text-align: center; }

.promo-pacientes-botones button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--amber);
  background: #fff;
  color: var(--amber-dark);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.promo-pacientes-botones button:disabled { border-color: var(--line); color: var(--line); cursor: default; }
.promo-pacientes-botones button:not(:disabled):hover { background: var(--amber); color: #fff; }

.promo-form .form-field { margin-bottom: 18px; }
.promo-form label { display: block; font-size: 13.5px; margin-bottom: 7px; color: var(--ink); }
.promo-form input[type="text"],
.promo-form input[type="email"],
.promo-form input[type="tel"],
.promo-form textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-strong);
  font-size: 15px;
  font-family: var(--font-body);
}

.promo-tamizaje-pregunta { border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.promo-tamizaje-pregunta p { font-size: 14.5px; margin-bottom: 10px; }
.promo-tamizaje-opciones { display: flex; gap: 20px; }
.promo-tamizaje-opciones label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.promo-tamizaje-detalle { margin-top: 10px; }
.promo-tamizaje-detalle[hidden] { display: none; }

.promo-consentimiento { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: 13.5px; color: var(--ink); }
.promo-consentimiento input { margin-top: 3px; }

.promo-form-mensaje { display: block; margin-top: 14px; font-size: 14px; min-height: 20px; }

.promo-faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px var(--gutter) 90px;
}

.promo-faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.promo-faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-strong);
}

.promo-faq p { margin-top: 12px; color: var(--ink); }

/* Página "gracias" (vuelta del banco) */
.promo-gracias {
  min-height: calc(100dvh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--gutter);
  text-align: center;
}

.promo-gracias-inner { max-width: 560px; }
.promo-gracias h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 18px; text-wrap: balance; }
.promo-gracias p { color: var(--ink); margin-bottom: 28px; }

/* Páginas legales (privacidad / términos de la promoción / cancelación) */
.prosa-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px var(--gutter) 100px;
}

.prosa-legal h1 { font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 8px; }
.prosa-legal .prosa-legal-fecha { color: var(--stone); font-size: 13.5px; margin-bottom: 36px; display: block; }
.prosa-legal h2 { font-size: 20px; margin: 32px 0 12px; }
.prosa-legal p, .prosa-legal li { color: var(--ink); font-size: 15.5px; }
.prosa-legal ul { padding-left: 22px; }

/* Footer legal — línea chica de links, debajo del footer-info ya existente */
.footer-legal {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11.5px;
}

.footer-legal a { color: #F2F0EA; text-decoration: underline; }

/* Banner de cookies (components/cookie-banner.js) */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 10px 30px rgba(61, 57, 56, 0.2);
}

.cookie-banner p { font-size: 13.5px; color: var(--ink); margin-bottom: 14px; }

.cookie-banner-botones { display: flex; gap: 10px; justify-content: flex-end; }
.cookie-banner-botones button { padding: 9px 20px; font-size: 13.5px; }

.modal-close:hover { background: var(--line); }

/* ============================================================
   Landing "Diagnóstico dental" (landing/diagnostico.html) — formato
   "lista de ítems con precio" en vez de las 3 tarjetas de las otras
   landings de campaña, más el cuadro de fidelización y el calendario
   público. Reutiliza los mismos tokens de color/tipografía de arriba.
   ============================================================ */

.promo-oferta {
  max-width: 640px;
  margin: 0 auto;
  padding: 50px var(--gutter);
}

/* El "cuadrado" que pidió el cliente: toda la oferta (lista + total)
   adentro de un marco propio, con un color de fondo suave del colorbook
   (--cream-deep, el mismo tono que ya se usaba en el cuadro del total) en
   vez de quedar suelta sobre el fondo general de la página. */
.promo-oferta-caja {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream-deep);
  padding: 36px 40px;
}

.promo-oferta-lista { border-top: 1px solid var(--line); }

.promo-oferta-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.promo-oferta-item-nombre { font-weight: 500; color: var(--ink-strong); }
.promo-oferta-item-descripcion { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.promo-oferta-item-precio { font-family: var(--font-secondary); white-space: nowrap; }

/* Precio de cada ítem tachado — deja claro que es el valor de referencia,
   no algo que se cobre por separado: todo se paga junto, al valor
   promocional de más abajo. "Regalo" no lleva esta clase (no hay precio
   que tachar). */
.promo-oferta-item-precio--tachado { text-decoration: line-through; color: var(--stone); }

.promo-oferta-totales {
  margin-top: 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}

.promo-oferta-valor-total { font-size: 15px; color: var(--stone); text-decoration: line-through; }
.promo-oferta-valor-promocional { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--amber-dark); margin-top: 4px; }
.promo-oferta-valor-promocional span { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--ink); }

.promo-fidelidad {
  max-width: 640px;
  margin: 0 auto 50px;
  padding: 0 var(--gutter);
}

.promo-fidelidad-caja {
  background: var(--haze);
  color: #fff;
  border-radius: 10px;
  padding: 28px 32px;
}

.promo-fidelidad-caja h3 { color: #fff; font-size: 19px; margin-bottom: 14px; }
.promo-fidelidad-caja ul { margin: 0; padding-left: 20px; }
.promo-fidelidad-caja li { margin-bottom: 8px; }
.promo-fidelidad-nota { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.85); }

.promo-calendario {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter) 50px;
}

/* Calendario de mes completo (en vez de una fila de días con scroll
   horizontal) — mismo criterio visual que ya usa el mes del panel interno
   (admin/shared/admin.css .calendario-mes), adaptado a la paleta pública. */
.promo-calendario-mes-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.promo-calendario-mes-nav button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--ink-strong);
  font-size: 15px;
}
.promo-calendario-mes-nav button:disabled { opacity: 0.3; cursor: default; }
.promo-calendario-mes-nav button:not(:disabled):hover { border-color: var(--amber); color: var(--amber-dark); }

.promo-calendario-mes-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: capitalize;
  min-width: 160px;
  text-align: center;
}

.promo-calendario-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 20px;
}

.promo-calendario-mes-encabezado {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--stone);
  padding-bottom: 6px;
}

.promo-calendario-mes-dia {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-body);
  color: var(--ink-strong);
}

.promo-calendario-mes-dia:hover { border-color: var(--amber); }
.promo-calendario-mes-dia[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #fff; }

.promo-calendario-mes-dia--vacio,
.promo-calendario-mes-dia--deshabilitado {
  border-color: transparent;
  background: none;
  cursor: default;
  color: var(--line);
}
.promo-calendario-mes-dia--deshabilitado { color: var(--stone); opacity: 0.5; }

.promo-calendario-mes-punto {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--amber);
}
.promo-calendario-mes-dia[aria-pressed="true"] .promo-calendario-mes-punto { background: #fff; }

.promo-calendario-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.hora-boton {
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
}

.hora-boton:hover { border-color: var(--amber); }
.hora-boton[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #fff; }

.promo-calendario-vacio { color: var(--stone); font-size: 14px; }

/* Botón "Agenda tu hora" en landing/diagnostico.html — el calendario y el
   formulario de reserva viven en su propia página (diagnostico-agendar.html),
   acá solo hay un único llamado a la acción. */
.promo-agenda-cta {
  text-align: center;
  padding: 10px var(--gutter) 60px;
}
.promo-agenda-cta .btn-primary { display: inline-block; }