/* ============================================================================
   theme-2026.css — capa de estilo global ("traje nuevo"), 2026-09-24
   ============================================================================
   Se carga AL FINAL del <head>, después de:
     - el <style> inline de los generadores (marca×equipo, zonas, hubs)
     - styles.css / styles-geo.css / ui.css
     - theme-light-override.css  (que usa !important, por eso aquí también)

   PRINCIPIO: solo toca APARIENCIA — color, sombra, borde, radio, tipografía y
   padding de componentes conocidos. NO toca display, position, width ni
   grid-template-columns, para no romper el layout de ~985 páginas que comparten
   las clases .glass / .neon-text / .cta-glow / .section.

   Es una capa aditiva: se revierte borrando este archivo y su <link>
   (node _inject_theme_2026.js --remove).
   ============================================================================ */

:root{
  /* Tinta más profunda que el #1e3a5f anterior: más contraste y más presencia */
  --to-ink:#0f2540;
  --to-ink-soft:#334155;
  --to-muted:#64748b;

  /* Naranja de marca, ahora con rango para degradado y brillo */
  --to-accent:#ea580c;
  --to-accent-2:#f97316;
  --to-accent-dark:#c2410c;
  --to-accent-soft:rgba(234,88,12,.10);

  --to-border:#e6ebf2;
  --to-border-strong:#cfd8e3;
  --to-surface:#ffffff;
  --to-surface-alt:#f6f8fb;

  /* Sombras en dos capas: uno de contacto + uno de elevación */
  --to-shadow-sm:0 1px 2px rgba(15,37,64,.05);
  --to-shadow:0 1px 2px rgba(15,37,64,.05), 0 8px 24px -14px rgba(15,37,64,.18);
  --to-shadow-lg:0 2px 4px rgba(15,37,64,.05), 0 18px 40px -20px rgba(15,37,64,.28);
  --to-glow:0 6px 18px -4px rgba(234,88,12,.42);

  --to-r:14px;
  --to-r-sm:10px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body{
  color:var(--to-ink-soft) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ── Tipografía: más jerarquía y títulos más compactos ─────────────────── */
h1,h2,h3,.hero-title{
  color:var(--to-ink) !important;
  letter-spacing:-.022em;
  line-height:1.14;
  text-wrap:balance;
}
h1,.hero-title{ font-weight:800 !important; }
h2{ font-weight:800 !important; letter-spacing:-.02em; }
h3{ font-weight:700 !important; letter-spacing:-.012em; line-height:1.25; }

/* El acento naranja se reserva para piezas cortas (etiquetas, términos de lista,
   números). En los títulos se lee mejor la tinta oscura: si todo va en naranja,
   el color deja de señalar y el CTA pierde fuerza.
   OJO con el selector: en las plantillas la clase va EN el propio <h2 class="…
   neon-text">, no en un hijo — hace falta el selector compuesto (h2.neon-text)
   además del descendiente. */
.neon-text{ color:var(--to-accent) !important; }
h1.neon-text, h2.neon-text, h3.neon-text, .hero-title.neon-text,
h1 .neon-text, h2 .neon-text, h3 .neon-text, .hero-title .neon-text{
  color:var(--to-ink) !important;
}

/* Barra de acento bajo los títulos de sección centrados: devuelve el naranja
   como señal visual sin teñir el texto. Solo en los centrados, para no dejar
   una barra descolocada bajo los títulos alineados a la izquierda. */
main h2.text-center{ position:relative; padding-bottom:.6rem; }
main h2.text-center::after{
  content:""; position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:58px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--to-accent-2),var(--to-accent-dark));
}

p{ color:var(--to-ink-soft); }
.text-slate-300,.text-slate-400{ color:#4a5a70 !important; }

/* ── Tarjetas .glass: más presencia y reacción al hover ────────────────── */
.glass{
  background:var(--to-surface) !important;
  border:1px solid var(--to-border) !important;
  border-radius:var(--to-r) !important;
  box-shadow:var(--to-shadow) !important;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
/* Solo las tarjetas que son enlace se "levantan": evita animar bloques de texto */
a.glass:hover{
  border-color:var(--to-border-strong) !important;
  box-shadow:var(--to-shadow-lg) !important;
  transform:translateY(-2px);
}

/* Chips / pills de cobertura (zonas, colonias) */
.glass.rounded-full,.rounded-full.glass{
  border-radius:999px !important;
  background:var(--to-surface-alt) !important;
  box-shadow:none !important;
  border-color:var(--to-border) !important;
  color:var(--to-ink-soft) !important;
}

/* ── CTAs: el cambio que más se nota ───────────────────────────────────── */
.cta-glow,.btn-primary,a.btn-primary{
  background:linear-gradient(135deg,var(--to-accent-2),var(--to-accent-dark)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:var(--to-r-sm) !important;
  box-shadow:var(--to-glow) !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cta-glow:hover,.btn-primary:hover,a.btn-primary:hover{
  transform:translateY(-1px);
  filter:saturate(1.06);
  box-shadow:0 10px 26px -6px rgba(234,88,12,.5) !important;
}
.cta-glow:active,.btn-primary:active{ transform:translateY(0); }

/* CTA secundario (el que usa .glass como botón junto al principal) */
a.glass.rounded-xl,a.glass.rounded-lg{
  border-color:var(--to-border-strong) !important;
  color:var(--to-ink) !important;
  font-weight:600 !important;
}
a.glass.rounded-xl:hover,a.glass.rounded-lg:hover{
  background:var(--to-surface-alt) !important;
  border-color:var(--to-accent) !important;
  color:var(--to-accent-dark) !important;
}

/* ── Encabezado fijo: un poco más de definición al hacer scroll ────────── */
header{
  border-bottom:1px solid var(--to-border) !important;
  box-shadow:0 1px 3px rgba(15,37,64,.04);
  backdrop-filter:saturate(1.15) blur(6px);
}

/* ── FAQ (details/summary): se lee como acordeón, no como lista suelta ── */
details.glass{ border-radius:var(--to-r) !important; }
details.glass summary{
  color:var(--to-ink) !important;
  font-weight:650;
  letter-spacing:-.011em;
  padding-right:1.75rem;
  position:relative;
}
details.glass summary::after{
  content:"+";
  position:absolute; right:.25rem; top:50%;
  transform:translateY(-50%);
  color:var(--to-accent);
  font-weight:800; font-size:1.15rem; line-height:1;
  transition:transform .18s ease;
}
details.glass[open] summary::after{ content:"−"; }
details.glass[open]{ border-color:var(--to-border-strong) !important; box-shadow:var(--to-shadow-lg) !important; }
details.glass .answer,details.glass p{ color:var(--to-ink-soft) !important; }

/* ── Listas de códigos / síntomas: el término en naranja, no todo ─────── */
li strong.neon-text{ color:var(--to-accent-dark) !important; font-weight:700; }

/* ── Imágenes inyectadas: mismo lenguaje que las tarjetas ─────────────── */
figure img,picture img{
  border-radius:var(--to-r) !important;
  border:1px solid var(--to-border) !important;
  box-shadow:var(--to-shadow-sm);
}
figcaption{ color:var(--to-muted) !important; }

/* ── Botones flotantes (WhatsApp / llamar) ────────────────────────────── */
a[href^="https://wa.me"][style*="position:fixed"],
a[href^="tel:"][style*="position:fixed"]{
  box-shadow:0 10px 28px -8px rgba(15,37,64,.45) !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
a[href^="https://wa.me"][style*="position:fixed"]:hover,
a[href^="tel:"][style*="position:fixed"]:hover{
  transform:translateY(-2px) scale(1.04);
}

/* ── Footer: separación clara del contenido ───────────────────────────── */
footer{ border-top:3px solid var(--to-accent); }
footer a:hover{ color:#fff !important; }

/* ── Secciones con fondo alterno: da ritmo sin tocar el layout ────────── */
section + section{ position:relative; }

/* ── Enlaces de texto dentro del contenido ────────────────────────────── */
main p a:not(.glass):not(.cta-glow):not(.btn-primary){
  color:var(--to-accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}

/* ── Accesibilidad: foco visible en todo lo interactivo ───────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--to-accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ── Móvil: títulos que no se desbordan y CTAs cómodos al pulgar ──────── */
@media (max-width:600px){
  h1,.hero-title{ font-size:1.9rem !important; line-height:1.18; }
  h2{ font-size:1.45rem !important; }

  /* El párrafo del hero venía a 1.25rem (text-xl): en un teléfono de 375px se
     comía la pantalla completa y dejaba los botones abajo del pliegue. */
  p.text-xl{ font-size:1.02rem !important; line-height:1.55; }
  .text-lg{ font-size:1rem !important; }

  /* Menos aire arriba para que el CTA entre en la primera pantalla */
  main > section:first-of-type{ padding-top:1.75rem !important; padding-bottom:2rem !important; }

  .cta-glow,.btn-primary{ width:100%; text-align:center; padding-top:.95rem !important; padding-bottom:.95rem !important; }
  a.glass.rounded-xl{ width:100%; text-align:center; }

  /* Deja sitio para los botones flotantes al final de la página */
  footer{ padding-bottom:5.5rem !important; }
}

/* ── Respeta a quien pide menos animación ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  a.glass:hover,.cta-glow:hover,.btn-primary:hover{ transform:none !important; }
}