/* ============================================================
   NAPOLI SERVICES — TEMA OSCURO
   Se activa con <html data-theme="dark">. El toggle vive en main.js
   y recuerda la elección en localStorage.

   Estrategia: redefinir los tokens de color y, después, corregir
   a mano los componentes que usan --clr-black o blancos crudos.
   La paleta dorada NO cambia: es la identidad de la marca.
   ============================================================ */

[data-theme="dark"] {
  /* Los "blancos" pasan a ser las superficies oscuras.
     Así .bg-white y las tarjetas se oscurecen sin tocar el HTML. */
  --clr-white:          #141414;   /* superficie de tarjetas */
  --clr-white-warm:     #0B0B0B;   /* fondo general del sitio */
  --clr-white-soft:     #1F1F1F;   /* hover sutil */

  /* Negros: se aclaran para que .bg-dark siga contrastando */
  --clr-black:          #050505;
  --clr-black-soft:     #0B0B0B;
  --clr-gray-dark:      #2A2A2A;
  --clr-gray:           #B4B0A8;   /* texto secundario, cálido */
  --clr-gray-light:     #8A857C;   /* texto muted */
  --clr-gray-border:    #2A2723;   /* bordes cálidos oscuros */

  /* Champagne: de crema a negro cálido, conserva la calidez */
  --clr-champagne:      #16140F;
  --clr-champagne-dark: #2C2719;

  /* El dorado se mantiene: es el acento de marca */
  --clr-gold:           #C4973A;
  --clr-gold-light:     #D4AE6C;
  --clr-gold-pale:      #EDD99A;

  /* Semánticos */
  --clr-bg:             var(--clr-white-warm);
  --clr-surface:        var(--clr-white);
  --clr-text-primary:   #F4F1EB;
  --clr-text-secondary: #B4B0A8;
  --clr-text-muted:     #8A857C;
  --clr-accent:         var(--clr-gold);
  --clr-accent-hover:   #D4AE6C;
  --clr-border:         var(--clr-gray-border);

  /* Sombras: en oscuro se ven como halos, se profundizan */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.65);

  color-scheme: dark;
}

/* ---- Base ---- */
[data-theme="dark"] body { background: var(--clr-bg); color: var(--clr-text-primary); }

/* ---- Botones ---- */
/* .btn--dark y .btn--outline se apoyaban en --clr-black; invertimos su lógica */
[data-theme="dark"] .btn--dark {
  background: var(--clr-text-primary);
  color: #0B0B0B;
}
[data-theme="dark"] .btn--dark:hover { background: #FFFFFF; }

[data-theme="dark"] .btn--outline {
  color: var(--clr-text-primary);
  border-color: rgba(244,241,235,0.35);
  background: transparent;
}
[data-theme="dark"] .btn--outline:hover {
  background: var(--clr-text-primary);
  color: #0B0B0B;
  border-color: var(--clr-text-primary);
}

/* El botón claro del CTA final: sin esto, la regla [data-theme="dark"] a
   (más específica que la clase sola) le hace heredar el color de .cta-dark
   (--clr-white = #141414) y el número de teléfono queda casi invisible. */
[data-theme="dark"] .btn--outline-light {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.45);
  background: transparent;
}
[data-theme="dark"] .btn--outline-light:hover {
  background: #FFFFFF;
  color: #1C1C1C;
  border-color: #FFFFFF;
}
/* Idem: [data-theme="dark"] p pisaba el 0.85 de components.css */
[data-theme="dark"] .cta-dark__sub { color: rgba(255,255,255,0.85); }

[data-theme="dark"] .btn--ghost { color: var(--clr-text-primary); }
[data-theme="dark"] .btn--gold  { color: #14100A; font-weight: 600; }
[data-theme="dark"] .btn--gold:hover { background: var(--clr-gold-light); color: #14100A; }

/* ---- Navbar ---- */
[data-theme="dark"] .navbar {
  background: rgba(11,11,11,0.88);
  border-bottom: 1px solid var(--clr-border);
  backdrop-filter: saturate(160%) blur(12px);
}
[data-theme="dark"] .navbar__logo-text { color: var(--clr-text-primary); }
[data-theme="dark"] .navbar__nav a     { color: var(--clr-text-secondary); }
[data-theme="dark"] .navbar__nav a:hover { color: var(--clr-gold); }
[data-theme="dark"] .navbar__toggle span { background: var(--clr-text-primary); }
[data-theme="dark"] .navbar__mobile {
  background: #0B0B0B;
  border-top: 1px solid var(--clr-border);
}
[data-theme="dark"] .navbar__mobile a { color: var(--clr-text-primary); }
[data-theme="dark"] .navbar__mobile a:hover { background: var(--clr-white-soft); }

/* ---- Hero ----
   El diseño claro cubre la foto con un degradado crema (rgba(249,247,244,…)).
   En oscuro ese velo blanco tapaba la imagen y dejaba el texto ilegible, así que
   se invierte a negro y la foto recibe un filtro para integrarse al fondo. */
[data-theme="dark"] .hero { background: var(--clr-bg); }

[data-theme="dark"] .hero::before {
  filter: brightness(0.85) contrast(1.02) saturate(1.05);
}

[data-theme="dark"] .hero::after {
  background: linear-gradient(
    to right,
    rgba(9, 9, 9, 0.82) 0%,
    rgba(9, 9, 9, 0.62) 45%,
    rgba(9, 9, 9, 0.28) 75%,
    rgba(9, 9, 9, 0.06) 100%
  );
}

/* Un degradado extra abajo para fundir el hero con la sección siguiente */
[data-theme="dark"] .hero__bg-pattern {
  background-image:
    linear-gradient(to bottom, transparent 62%, rgba(11,11,11,0.72) 92%, #0B0B0B 100%),
    radial-gradient(circle at 72% 32%, rgba(196,151,58,0.10) 0%, transparent 52%),
    radial-gradient(circle at 18% 82%, rgba(196,151,58,0.07) 0%, transparent 42%);
  opacity: 1;
  z-index: 1;
}

[data-theme="dark"] .hero__title    { color: #FFFFFF; }
/* Con la foto más clara, el dorado medio caía a 3.4:1. El dorado pálido de la
   paleta mantiene el acento de marca y sube a 5.1:1 sobre el peor fondo. */
[data-theme="dark"] .hero__title em { color: var(--clr-gold-pale); }
[data-theme="dark"] .hero__subtitle { color: rgba(255,255,255,0.90); }
[data-theme="dark"] .hero__label,
[data-theme="dark"] .hero .label     { color: var(--clr-gold-light); }

/* Los botones del hero van sobre foto: necesitan borde más marcado */
[data-theme="dark"] .hero .btn--outline {
  border-color: rgba(255,255,255,0.45);
  color: #FFFFFF;
}
[data-theme="dark"] .hero .btn--outline:hover {
  background: #FFFFFF;
  color: #0B0B0B;
}

/* Hero de páginas internas: la foto necesita más overlay sobre fondo oscuro */
[data-theme="dark"] .page-hero__overlay {
  background: linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.80) 55%, rgba(5,5,5,0.55) 100%);
}
[data-theme="dark"] .page-hero__title { color: #FFFFFF; }
[data-theme="dark"] .page-hero__sub   { color: rgba(255,255,255,0.78); }
[data-theme="dark"] .breadcrumb a     { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .breadcrumb span  { color: rgba(255,255,255,0.40); }

/* ---- Secciones ---- */
[data-theme="dark"] .bg-white     { background: #0B0B0B; }
[data-theme="dark"] .bg-champagne { background: #131109; }
[data-theme="dark"] .bg-dark      { background: #050505; color: var(--clr-text-primary); }

/* ---- Títulos de sección ---- */
[data-theme="dark"] .display          { color: var(--clr-text-primary); }
[data-theme="dark"] .display em       { color: var(--clr-gold); }
[data-theme="dark"] .label            { color: var(--clr-gold); }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--clr-text-primary); }

/* ---- Tarjetas de servicio ---- */
[data-theme="dark"] .service-card {
  background: #141414;
  border: 1px solid var(--clr-border);
}
[data-theme="dark"] .service-card:hover {
  border-color: rgba(196,151,58,0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transform: translateY(-4px);
}
[data-theme="dark"] .service-card__title { color: var(--clr-text-primary); }
[data-theme="dark"] .service-card__desc  { color: var(--clr-text-secondary); }
[data-theme="dark"] .service-card__label { color: var(--clr-gold); }
[data-theme="dark"] .service-card__link  { color: var(--clr-gold); }

/* ---- Contenido de páginas de servicio ---- */
[data-theme="dark"] .check-item,
[data-theme="dark"] .compare-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .notice-box,
[data-theme="dark"] .savings-band,
[data-theme="dark"] .post-card,
[data-theme="dark"] .legal-card {
  background: #141414;
  border: 1px solid var(--clr-border);
  color: var(--clr-text-primary);
}

/* "Cómo funciona": los pasos NO son cajas. El diseño original es una columna
   abierta con una línea superior y un acento dorado — si se le pone borde
   completo, el texto queda pegado porque solo tiene padding-top. */
[data-theme="dark"] .step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--clr-border);
}

/* Un poco más de aire dentro de las cajas que sí lo son */
[data-theme="dark"] .check-item { padding: var(--space-5); }
[data-theme="dark"] .check-item__title,
[data-theme="dark"] .step__title,
[data-theme="dark"] .compare-card__title,
[data-theme="dark"] .savings-band__title { color: var(--clr-text-primary); }
[data-theme="dark"] .check-item__desc,
[data-theme="dark"] .step__desc,
[data-theme="dark"] .savings-band__desc,
[data-theme="dark"] .faq-item__body { color: var(--clr-text-secondary); }
[data-theme="dark"] .check-item__mark { color: var(--clr-gold); }
[data-theme="dark"] .step__num        { color: rgba(196,151,58,0.30); }
[data-theme="dark"] .savings-band__figure { color: var(--clr-gold); }
[data-theme="dark"] .faq-item summary { color: var(--clr-text-primary); }
[data-theme="dark"] .faq-item summary:hover { background: var(--clr-white-soft); }
[data-theme="dark"] .compare-card--napoli {
  border-color: rgba(196,151,58,0.45);
  background: #17140D;
}
[data-theme="dark"] .compare-card li .no { color: #C96B6B; }
[data-theme="dark"] .compare-card li .si { color: var(--clr-gold); }

/* ---- Testimonios ---- */
[data-theme="dark"] .testimonial-card {
  background: #141414;
  border: 1px solid var(--clr-border);
}
[data-theme="dark"] .testimonial-card__quote  { color: var(--clr-text-primary); }
[data-theme="dark"] .testimonial-card__name   { color: var(--clr-text-primary); }
[data-theme="dark"] .testimonial-card__role   { color: var(--clr-text-muted); }
[data-theme="dark"] .testimonial-card__avatar { background: var(--clr-gold); color: #14100A; }

/* ---- Laboratorio Financiero ---- */
[data-theme="dark"] .lab-feature,
[data-theme="dark"] .lab-card {
  background: #141414;
  border: 1px solid var(--clr-border);
}

/* ---- Texto genérico ---- */
[data-theme="dark"] p            { color: var(--clr-text-secondary); }
[data-theme="dark"] .body-lg     { color: var(--clr-text-secondary); }
[data-theme="dark"] .body-sm,
[data-theme="dark"] .fineprint   { color: var(--clr-text-muted); }
[data-theme="dark"] a            { color: inherit; }
[data-theme="dark"] .prose a     { color: var(--clr-gold); }

/* ---- NEGRITAS ----
   El tema claro pinta <strong> con un gris muy oscuro. Sobre fondo negro eso
   daba un contraste de 1.37:1 — ilegible (el mínimo WCAG AA es 4.5:1).
   Regla: las negritas van en blanco cálido, y las que abren un punto de lista
   ("Datos de contacto:") en dorado claro, porque funcionan como etiqueta. */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--clr-text-primary);   /* #F4F1EB — contraste ≈ 17:1 */
}
[data-theme="dark"] li > strong:first-child,
[data-theme="dark"] .legal-wrap li strong,
[data-theme="dark"] dt {
  color: var(--clr-gold-light);     /* #D4AE6C — contraste ≈ 7.9:1 */
}
/* Sobre superficies claras o de acento, la negrita conserva su color heredado */
[data-theme="dark"] .btn strong,
[data-theme="dark"] .btn--gold strong,
[data-theme="dark"] .service-card__icon strong {
  color: inherit;
}

/* Red de seguridad: cualquier texto que el tema claro dejaba en gris muy
   oscuro o negro y que aquí quedaría por debajo del umbral de contraste. */
[data-theme="dark"] .legal-wrap h2,
[data-theme="dark"] .legal-wrap h3,
[data-theme="dark"] .legal-wrap h4,
[data-theme="dark"] .icon-grid__label,
[data-theme="dark"] .price-card__list li.plus,
[data-theme="dark"] .lab-card__title,
[data-theme="dark"] .navbar__logo-text,
[data-theme="dark"] .testimonial-card__name {
  color: var(--clr-text-primary);
}

/* Botón primario: en claro es negro con texto blanco; aquí se invierte */
[data-theme="dark"] .btn--primary {
  background: var(--clr-text-primary);
  color: #0B0B0B;
}
[data-theme="dark"] .btn--primary:hover { background: #FFFFFF; }

/* ---- Separadores y scrollbar ---- */
[data-theme="dark"] hr,
[data-theme="dark"] .divider { border-color: var(--clr-border); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #141414; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3630; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--clr-gold); }

/* ---- Selección de texto ---- */
[data-theme="dark"] ::selection { background: rgba(196,151,58,0.35); color: #FFFFFF; }

/* ============================================================
   BOTÓN DE CAMBIO DE TEMA
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  padding: 0;
  margin-right: var(--space-4, 1rem);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--clr-gold);
  border-color: var(--clr-gold);
}
.theme-toggle svg { width: 17px; height: 17px; }
/* Se muestra el sol en modo oscuro y la luna en modo claro */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 768px) {
  .theme-toggle { margin-right: var(--space-2, 0.5rem); }
}


/* ==========================================================================
   DORADO VIVO — aprobado por Ernesto el 2026-11-14 (propuestas/2026-11-colores, opción A).
   Va al final del último CSS que se carga para que pise lo anterior tal como en la propuesta.
   ========================================================================== */
/* ==========================================================================
   Propuesta de color 2026-11 — parte COMÚN a las tres opciones
   Se carga DESPUÉS de theme-dark.css. No toca el HTML ni la estructura.
   ========================================================================== */

/* 1) Títulos en Montserrat: Cormorant Garamond quedó retirada por la marca
      (2026-10-20: sus números "parecen romanos"). Peso 500 en vez de 300:
      la letra delgada era buena parte de lo que se veía "apagado". */

:root, [data-theme="dark"] {
  --font-display: 'Montserrat', system-ui, sans-serif;
  /* Degradado dorado oficial de la marca (el de los checks y el CTA de los flyers) */
  --oro-degradado: linear-gradient(135deg, #F2E2B0 0%, #EDD99A 22%, #C4973A 62%, #9C7526 100%);
}

.display, .hero__title, .page-hero__title, .cta-dark__title, h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.015em;
}
/* Montserrat es más ancha que Cormorant: los títulos bajan ~25 % para no desbordarse */
.hero__title      { font-size: clamp(2.1rem, 4.3vw, 3.7rem); line-height: 1.12; }
.display--hero    { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.display--section,
.cta-dark__title  { font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.15; }
.display--card    { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
.page-hero__title { font-size: clamp(1.9rem, 3.5vw, 3.05rem); line-height: 1.12; }
/* La palabra resaltada en dorado: recta y con más peso (Montserrat no trae cursiva cargada) */
.hero__title em, .page-hero__title em, .cta-dark__title em, .display em {
  font-style: normal;
  font-weight: 600;
}

/* 2) El botón principal con el degradado dorado de la marca: es lo que más "prende" */
.btn--gold,
[data-theme="dark"] .btn--gold {
  background: var(--oro-degradado);
  color: #0D0D0D;
  font-weight: 600;
  border: 0;
  box-shadow: 0 6px 24px rgba(196, 151, 58, 0.38);
}
.btn--gold:hover,
[data-theme="dark"] .btn--gold:hover {
  background: var(--oro-degradado);
  color: #0D0D0D;
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(196, 151, 58, 0.5);
}

/* Fondos que theme-dark.css trae escritos a mano (#0B0B0B, #141414…): se pasan a las
   variables para que cada opción pueda teñirlos. Sin efecto en el tema claro. */
[data-theme="dark"] .bg-white     { background: var(--clr-white-warm); }
[data-theme="dark"] .bg-champagne { background: var(--clr-champagne); }
[data-theme="dark"] .bg-dark      { background: var(--clr-black); }
[data-theme="dark"] .navbar__mobile { background: var(--clr-white-warm); }
[data-theme="dark"] :is(.service-card, .testimonial-card, .lab-feature, .lab-card,
                        .notice-box, .savings-band, .post-card) { background: var(--clr-white); }
[data-theme="dark"] .compare-card--napoli { background: var(--clr-white-soft); }

/* 3) WhatsApp flotante en dorado: regla de marca (2026-10-03, "nunca verde") */
.whatsapp-fab {
  background: var(--oro-degradado);
  color: #0D0D0D;
  box-shadow: 0 6px 24px rgba(196, 151, 58, 0.45);
}
.whatsapp-fab:hover { box-shadow: 0 10px 32px rgba(196, 151, 58, 0.6); }
.whatsapp-fab svg, .whatsapp-fab path { fill: #0D0D0D; }
/* ==========================================================================
   OPCIÓN A — "Dorado vivo": el mismo sitio oscuro, pero cálido y con brillo.
   - El negro deja de ser gris frío: pasa a un negro cálido con secciones
     alternas que SÍ se distinguen.
   - El dorado de los acentos sube de intensidad (el mismo tono de marca,
     afinado para pantalla oscura), y el texto gana contraste.
   - La foto del hero se ve más: el velo negro se aclara.
   ========================================================================== */
[data-theme="dark"] {
  --clr-white:          #17130D;   /* tarjetas */
  --clr-white-warm:     #0D0B08;   /* fondo */
  --clr-white-soft:     #241E15;
  --clr-black:          #070605;
  --clr-black-soft:     #0D0B08;
  --clr-champagne:      #1C170E;   /* secciones alternas, ahora visibles */
  --clr-champagne-dark: #4A3B20;
  --clr-gray-border:    #3A3022;
  --clr-gray:           #E2DBCD;
  --clr-gray-light:     #ADA493;
  --clr-gold:           #DFA83A;   /* dorado de marca con más luz y saturación */
  --clr-gold-light:     #EDC56A;
  --clr-gold-pale:      #F5DE9E;
  --clr-text-primary:   #FFFFFF;
  --clr-text-secondary: #E2DBCD;
  --clr-text-muted:     #ADA493;
  --clr-accent:         #DFA83A;
  --clr-accent-hover:   #EDC56A;
}

[data-theme="dark"] .navbar { background: rgba(13, 11, 8, 0.86); }
[data-theme="dark"] .page-hero__overlay {
  background: linear-gradient(90deg, rgba(13,11,8,0.92) 0%, rgba(13,11,8,0.72) 55%, rgba(13,11,8,0.40) 100%);
}
[data-theme="dark"] .hero::before { filter: brightness(1) contrast(1.05) saturate(1.15); }
[data-theme="dark"] .hero::after {
  background: linear-gradient(to right,
    rgba(13, 11, 8, 0.80) 0%, rgba(13, 11, 8, 0.52) 45%,
    rgba(13, 11, 8, 0.18) 75%, rgba(13, 11, 8, 0) 100%);
}
[data-theme="dark"] .hero__bg-pattern {
  background-image:
    linear-gradient(to bottom, transparent 66%, rgba(13,11,8,0.7) 92%, #0D0B08 100%),
    radial-gradient(circle at 72% 32%, rgba(223,168,58,0.18) 0%, transparent 55%),
    radial-gradient(circle at 18% 82%, rgba(223,168,58,0.12) 0%, transparent 45%);
}


/* ==========================================================================
   LOGO Y FAVICON — 2026-11-14 (logo vectorizado en Identidad Visual/logo/)
   ========================================================================== */
.navbar__logo img.navbar__logo-img { height: 50px; width: auto; display: block; }
@media (max-width: 768px) { .navbar__logo img.navbar__logo-img { height: 42px; } }
.footer__logo { display: block; height: 80px; width: auto; margin-bottom: var(--space-4); }
/* En la bio el logo va dentro del círculo negro, sin recortarse */
.bio__avatar img[src$=".svg"] { object-fit: contain; padding: 24% 15%; }