/* ================================================================
   DENTALÁSER — mejoras.css
   Carga DESPUÉS de css/styles.css (nunca antes).
   Contiene: fuentes de marca reales (woff2), correcciones de
   accesibilidad y pequeños ajustes de rendimiento.
   styles.css no se modifica (regla del proyecto).
   ================================================================ */

/* ── 1. FUENTES DE MARCA ─────────────────────────────────────────
   styles.css solo declara src:local(), que únicamente funciona si el
   visitante tiene la fuente instalada. Estas reglas, al ir después y
   con los mismos descriptores (family + weight), sustituyen a las de
   styles.css y sirven el fichero woff2 real.
   Corrección 16/09/2026 (C5): se quitan los local(...). Con ellos, en
   cualquier equipo con las fuentes de marca instaladas (p. ej. el Mac
   de Joni) el navegador nunca llega a descargar el woff2, así que
   Lighthouse/PageSpeed miden un LCP falsamente bueno. Sin local(), TODOS
   los visitantes —reales o de laboratorio— cargan exactamente el mismo
   fichero, que es lo que hace honesta la métrica.                 */
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-Light.woff2') format('woff2');    font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-Regular.woff2') format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-Medium.woff2') format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-Bold.woff2') format('woff2');     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-ExtraBold.woff2') format('woff2');font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayPro-Black.woff2') format('woff2');    font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayItalics-Bold.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'CottorwayPro'; src:url('../fonts/CottorwayItalics-Black.woff2') format('woff2');font-weight:900; font-style:italic; font-display:swap; }
@font-face { font-family:'Polly'; src:url('../fonts/Polly-Thin.woff2') format('woff2');    font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Polly'; src:url('../fonts/Polly-Light.woff2') format('woff2');   font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Polly'; src:url('../fonts/Polly-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Polly'; src:url('../fonts/Polly-Bold.woff2') format('woff2');    font-weight:700; font-style:normal; font-display:swap; }

/* ── 2. ACCESIBILIDAD ─────────────────────────────────────────── */

/* — 2.1 Skip link — */
.skip-link {
  position: absolute; left: -9999px; top: 16px; z-index: 10000;
  background: var(--cyan); color: var(--navy-dark);
  font-family: var(--f-d); font-weight: 700;
  padding: 12px 20px; border-radius: 999px;
}
.skip-link:focus { left: 16px; outline: 3px solid var(--navy-dark); }

/* — 2.2 :focus-visible global — */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.card-like:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(68,212,228,.25);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.card-like:focus:not(:focus-visible) {
  outline: none;
}

/* — 2.3 Contraste: texto de cuerpo sobre fondo claro —
   var(--steel) (#59879E) da solo 3.9:1 sobre blanco: no llega a 4.5:1.
   #3E6B80 comprobado con Python (fórmula WCAG relative luminance):
     sobre #ffffff → 5.8:1   ·   sobre #f0f6f9 → 5.32:1   (ambos ≥ 4.5:1)
   --steel no se toca: sigue disponible para bordes/decoración. */
:root { --steel-text: #3E6B80; }

.sec-label,
.sec-body,
.stat-label,
.testimonial-meta,
.faq-answer,
.faq-question:hover,
.confiar-reason-txt p,
.nav-phone-city {
  color: var(--steel-text);
}

/* — 2.3b Contraste: etiqueta "ANTES" del comparador antes/después —
   .ba-label-before usa rgba(0,0,0,.45) semitransparente sobre la foto:
   comprobado con Python que el compuesto real (image + overlay) da
   rgb(132,135,137), solo 3.59:1 con el texto blanco (mínimo 4.5:1).
   Se sustituye por un fondo casi opaco (navy-dark al 92%) — deja pasar
   apenas un 8% del color de la foto de fondo, así que el contraste se
   mantiene ≥4.5:1 sea cual sea la imagen usada en cada instancia
   (index.html, casos-clinicos.html, nuestros-pacientes.html). */
.ba-label-before {
  background: rgba(13,42,61,.92);
}

/* — 2.4 Labels/breadcrumbs cyan sobre navy —
   rgba(68,212,228,.65/.7) (valores hoy en uso en casi todas las páginas
   para .sec-label y .hero-label, muchos con !important o en style="" inline)
   comprobado con Python: sobre navy da 3.4–3.6:1 y sobre navy-dark 4.4–4.9:1,
   ninguno llega de forma fiable a 4.5:1. Al .9 de opacidad:
     sobre #184566 (navy) → 4.94:1   ·   sobre #0d2a3d (navy-dark) → 7.03:1
   .hero-breadcrumb y .hero-tag no tienen ese !important por página, así que
   con especificidad normal basta; .sec-label y .hero-label sí lo llevan (y a
   veces en style="" inline), así que se igualan con !important y un poco más
   de especificidad para ganar siempre, venga en el orden que venga cada página. */
.hero-breadcrumb,
.hero-tag {
  color: rgba(68,212,228,.9) !important;
}
body .sec-label.sec-label,
body .hero-label.hero-label {
  color: rgba(68,212,228,.9) !important;
}

/* — 2.5 Errores de formulario —
   .form-error se inyecta bajo el campo desde js/forms.js. Los formularios
   de la web viven sobre fondos muy distintos según la página (blanco,
   gris claro, cian sólido, navy sólido, o tarjetas "clinic-form"/
   "cta-form-section" que son blancas en Fuengirola y cristal navy en
   Maqueda con la MISMA clase). Un solo color de texto no puede leerse
   bien en todos esos fondos a la vez, así que:
     · por defecto, rojo oscuro (6.57:1 sobre blanco/gris claro)
     · en las secciones que sabemos cian sólido o en las tarjetas
       ambiguas, una chapa blanca detrás garantiza el contraste sin
       tener que adivinar qué fondo tiene cada página
     · en navy sólido (hero, footer), rojo claro (5.93–8.72:1) */
.form-error {
  display: block;
  margin-top: 6px;
  font-family: var(--f-b);
  font-size: 13px;
  font-weight: 600;
  color: #b42318;
}
[aria-invalid="true"] { border-color: #e05555 !important; }

.cta-section .form-error,
.hp-cta-section .form-error,
.pedo-cta-section .form-error,
.orto-cta-section .form-error,
.cta-estetica .form-error,
.cta-form-section .form-error,
.clinic-form .form-error {
  background: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  width: fit-content;
  max-width: 100%;
}

.page-hero .form-error,
footer .form-error {
  color: #ffb4a8;
}

.form-alert {
  display: block;
  margin-bottom: 16px;
  padding: 14px 18px;
  font-family: var(--f-b);
  font-size: 14px;
  line-height: 1.5;
  color: #7a1710;
  background: #fff;
  border: 1px solid #e05555;
  border-radius: 12px;
}
.form-alert a { color: #b42318; font-weight: 700; text-decoration: underline; }

/* — 2.6 Targets táctiles ≥44px sin mover el icono visual —
   Corrección 16/09/2026 (C5): con padding uniforme de 9px el ancho llegaba
   a 44px pero el alto se quedaba en ~33px (el icono no tiene height propio,
   solo 3 líneas + gaps ≈ 14.5px + 18px de padding). El mismo arreglo ya vive
   en index.html:498 (@media max-width:768px, solo para la home); aquí se
   lleva a las 43 páginas restantes con padding asimétrico: 15px verticales
   para llegar a 44px de alto, 9px horizontales para mantener 44px de ancho. */
.nav-burger {
  padding: 15px 9px;
  margin: -15px -9px;
  box-sizing: content-box; /* 26px + 9px*2 = 44px ancho · 14.5px + 15px*2 ≈ 44px alto */
}
.nav-mobile-close {
  min-width: 44px;
  min-height: 44px; /* min-width/min-height ganan sobre el width/height:38px de nav.css */
}
.t-dot {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.t-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(253,255,255,.35);
  transition: background .25s, transform .25s;
}
.t-dot.active::before {
  background: var(--cyan);
  transform: scale(1.2);
}

/* — 2.7 Handle antes/después —
   Corrección de sentido: styles.css recorta .ba-after con inset(0 50% 0 0),
   lo que muestra el DESPUÉS a la izquierda bajo la etiqueta ANTES (invertido).
   Aquí el después se revela a la DERECHA del tirador, como indican las etiquetas.
   js/main.js (initBeforeAfter) usa la misma convención. */
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* — 2.8 Utilidad sr-only —
   Corrección 16/09/2026 (C5): testimonios.html usa la clase "visually-hidden"
   (un H2 y una etiqueta de formulario), que no estaba definida en ningún
   fichero — se veían en pantalla. Es el mismo patrón que .sr-only, así que
   comparte la regla en vez de duplicarla. */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* — 2.9a Objetivos táctiles: teléfono y email (WCAG 2.5.8, mínimo 24×24) —
   Corrección 16/09/2026 (C5): en contacto.html, pide-cita.html y las 7
   landings, los enlaces de teléfono/email de las fichas de sede y del pie
   son texto suelto sin más estilo (17-20px de alto real). Se les da una
   caja mínima de 24px sin tocar el HTML ni cambiar el aspecto visual del
   texto (mismo tamaño de letra, ahora centrado dentro de una caja más alta). */
.clinica-info-value a[href^="tel:"],
.sede-info-value a[href^="tel:"],
.cq-email-addr,
.footer-tels a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* — 2.9 Movimiento reducido — */
@media (prefers-reduced-motion: reduce) {
  .gsap-up, .gsap-left, .gsap-right, .gsap-scale, .clip-reveal, .stagger-group > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ══ 2.12 CONTRASTE SISTÉMICO (blancos sobre blanco, azules sobre azul) ══
   Causas raíz medidas con scan_contraste.py (2.593 fallos en 57 páginas):
   a) --steel #59879E como texto sobre blanco/gris: 3.9:1 → token oscurecido
      aquí (styles.css intacto). Sobre fondos oscuros se corrige en (c).
   b) Nav mega-menú y footer con blanco al .25-.30 sobre navy-dark.
   c) Secciones repintadas de oscuro por section:nth-of-type(even/3n) en el
      CSS local de cada página: js/main.js (initSectionTheme) marca cada
      bloque como is-dark / is-light / is-cyan según su fondo REAL y aquí se
      fuerza un color legible. Solo se actúa sobre texto, nunca sobre fondos. */
:root {
  --steel: #3E6B80;          /* 5.8:1 sobre blanco · 5.3:1 sobre gray-bg */
  --cyan-deep: #147B8A;      /* cian de marca oscurecido: 4.9:1 sobre blanco */
}

/* b) nav + footer */
.nav-mega-panel small, .nav-mega-item small, .mc-hours, .pcard-city,
.nav-mob-phones small, .nav-mobile small { color: rgba(253,255,255,.82) !important; }
.footer-legal, .footer-legal a, .footer-tagline, footer .footer-links a, footer small,
footer .footer-col-title { color: rgba(253,255,255,.84) !important; }
.footer-legal a:hover, footer .footer-links a:hover { color: var(--cyan) !important; }
.nav-mob-cta.nav-mob-cta, .mobile-cta-bar .cta-whatsapp { color: var(--navy) !important; }

/* c) texto sobre fondos repintados: lo resuelve js/main.js (initAutoContrast),
      que mide cada texto contra su fondo real y solo recolorea los que no
      llegan a 4.5:1 (3:1 en texto grande): blanco en oscuro, navy en claro o
      cian, cian/cian-deep para acentos. Las clases is-dark/is-light/is-cyan
      quedan disponibles para estilos futuros. */
.is-dark table, .is-dark th, .is-dark td { border-color: rgba(253,255,255,.18); }

/* ══ 2.13 FOTO DE CABECERA VISIBLE ══
   Joni: cada página lleva en su sección principal una foto real de su
   contenido (la home, la clínica). styles.css la dejaba al 25 % y no se
   distinguía; se sube la presencia y se oscurece ligeramente para mantener
   el texto blanco legible con el degradado .page-hero-overlay. */
.page-hero-bg { opacity: .48; filter: brightness(.72) saturate(.95); }
.page-hero.loaded .page-hero-bg { transform: scale(1); }
.page-hero-overlay { background: linear-gradient(to right, rgba(24,69,102,.92) 30%, rgba(24,69,102,.45) 70%, rgba(24,69,102,.25)); }
@media (max-width: 768px) {
  .page-hero-overlay { background: linear-gradient(to bottom, rgba(24,69,102,.55), rgba(24,69,102,.92) 70%); }
}
.hero .page-hero-bg, .home-hero .page-hero-bg { opacity: .58; filter: brightness(.62) saturate(.95); }

/* — 2.11 Consentimiento RGPD en formularios — */
.form-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--f-b); font-size: 13px; line-height: 1.5;
  margin: 14px 0; color: inherit;
}
.form-consent input { margin-top: 3px; accent-color: var(--cyan); flex: none; width: 18px; height: 18px; }
.form-consent a { color: inherit; text-decoration: underline; }

/* — 2.10 Honeypot — */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ── 3. MEJORAS COMPARTIDAS (integración) ─────────────────────── */

/* — 3.1 WhatsApp como 3ª opción en el desplegable de teléfono
   (desktop) y en el acordeón móvil. La marca no incorpora el verde
   de WhatsApp: el icono hereda currentColor y usa la paleta propia. */
.nav-phone-dropdown .nav-phone-option:nth-last-child(n+2) {
  border-bottom: 1px solid rgba(24,69,102,.07);
}
.nav-phone-whatsapp .nav-phone-city {
  display: flex; align-items: center; gap: 6px; text-transform: none;
}
.nav-mob-phone-whatsapp { grid-column: 1 / -1; }

/* — 3.2 Barra CTA fija en móvil (Llamar / WhatsApp) —
   Aparece tras dejar atrás el hero (IntersectionObserver en
   js/main.js). body reserva su alto para no tapar el footer. */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    height: 60px;
    box-shadow: 0 -8px 30px rgba(13,42,61,.25);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .35s var(--ease-expo), visibility 0s linear .35s;
  }
  .mobile-cta-bar.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform .35s var(--ease-expo), visibility 0s linear;
  }
  body { padding-bottom: 60px; }
}
.mobile-cta-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-d); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; transition: filter .15s;
}
.mobile-cta-btn:active { filter: brightness(.92); }
.mobile-cta-call { background: var(--navy); color: var(--white); }
.mobile-cta-whatsapp { background: var(--cyan); color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar { transition: none !important; }
}

/* — 3.3 FAQ: bug de especificidad con section:nth-of-type(even) —
   En implantes-dentales.html, #preguntas.faq-section puede caer en
   posición par y perder su fondo claro frente a la regla genérica
   `section:nth-of-type(even){background:var(--navy-mid)}` (misma
   especificidad, pero esta última va después en el documento).
   Mismo patrón ya usado arriba para .sec-label/.hero-label. */
#preguntas.faq-section.faq-section {
  background: var(--gray-bg) !important;
}

/* — 3.4 Contraste: labels de stats sobre fondo oscuro —
   .orto-stat-label (ortodoncia.html) y .stats-test .stat-label
   (testimonios.html) usaban rgba(253,255,255,.45) sobre var(--navy):
   3.3–3.4:1, por debajo de 4.5:1. Corregido en el <style> de cada
   página (ambas son reglas más específicas que cualquier cosa que
   pueda añadirse aquí). Ver también sección 2.3 de más arriba para
   el resto de textos secundarios sobre fondo claro.               */

/* — 3.5 .accent sobre fondo claro (AM-049) —
   El acento de marca (--cyan #44D4E4) usado en <em class="accent">/
   <span class="accent"> da 1.6–1.8:1 sobre blanco o --gray-bg (mínimo
   3:1 en texto grande). js/contraste.js ya lo corrige en runtime
   (mide el fondo real y recolorea a cyan-deep/navy si no llega al
   mínimo), pero esta clase queda disponible como fallback estático
   —sin depender de JS y sin el parpadeo del recolor tardío— para
   quien marque a mano un .accent que cae en una sección clara.
   Doble clase + !important para ganar a los `.accent{color:cyan
   !important}` que ya declaran algunas páginas en su <style> propio
   (mismo !important, pero .accent.accent-on-light tiene más
   especificidad que selectores de un solo nivel como `h2 .accent`). */
.accent-on-light.accent-on-light,
.accent.accent-on-light { color: var(--navy) !important; }

/* — 3.6 Tap targets <24px en enlaces de listas de footer (AM-069) —
   .footer-links a (styles.css) mide 17px de alto real (font-size 14px,
   sin padding): bajo el mínimo WCAG 2.2 SC 2.5.8 (24×24px). El gap:11px
   del contenedor flex ya evita que el padding solape enlaces contiguos. */
.footer-links a { display: inline-block; padding: 4px 0; }

/* — 3.7 Tap targets <24px: enlaces legales del pie y consentimiento RGPD —
   Medido en producción a 390px (iPhone 12/13/14): los enlaces del párrafo
   .footer-legal (Política de privacidad, Aviso legal, Cookies, Política de
   calidad) miden 15,5px de alto y el <label class="form-consent"> mide 21px.
   Ambos por debajo del mínimo WCAG 2.2 SC 2.5.8 (24×24px).
   El checkbox se deja en 18px a propósito: el target real es el <label>
   entero, que envuelve al input, así que basta con darle altura al label
   sin agrandar el cuadrito ni alterar el diseño.
   Complementa al 3.6, que solo cubría .footer-links a. */
.footer-legal a { display: inline-block; padding: 5px 0; }
.form-consent { min-height: 24px; }