/* ============================================================
   SUNLIGHTEN ESPAÑA · OVERRIDE VISUAL "SUNLIGHTEN.COM"
   Capa de tematización que aproxima el sitio al look & feel original
   v3.5 · abril 2026
   ============================================================
   
   Aplicar AL FINAL del CSS para sobrescribir el sistema base
   con la paleta y estilos de sunlighten.com
   ============================================================ */


/* ============================================================
   OVERRIDE GLOBAL DE VARIABLES DEL SYSTEM.CSS
   ============================================================
   Crítico: muchos componentes y estilos inline en HTML usan
   var(--c-teal), var(--c-teal-light), var(--c-deep), etc. del
   system.css base. Para que la paleta Sunlighten se aplique
   también a todos esos casos, redefinimos las variables aquí.
   
   Resultado: cualquier elemento que use var(--c-teal-light)
   ahora se renderiza con cobre (#EF6825) automáticamente,
   sin tocar los estilos inline del HTML.
   ============================================================ */
:root {
  /* Sustituimos los teal/deep del sistema base por la paleta Sunlighten */
  --c-deep-darker: #1a1410;        /* era #060f13 negro azulado */
  --c-deep: #2a2520;                /* era #0b1e24 azul muy oscuro → ahora marrón muy oscuro */
  --c-teal-deep: #3a3025;           /* era #153a44 → ahora marrón medio oscuro */
  --c-teal: #4a3f33;                /* era #1a4a55 → ahora marrón cálido */
  --c-teal-mid: #6b5d4f;            /* era #2c7a82 → ahora marrón medio */
  --c-teal-light: #EF6825;          /* era #43bfba teal → ahora cobre Sunlighten */
  --c-cream: #f7f3ec;               /* era #f5f1e8 → ahora crema más cálido */
  --c-beige: #ede5d6;               /* era #e8dfd0 */
  --c-paper: #ffffff;
  --c-paper-warm: #fbf8f2;
  --c-ink: #2a2520;                 /* era #1a2528 → ahora marrón oscuro */
  --c-ink-soft: #4a3f33;
  --c-ink-mute: #8a7d6b;
  --c-line: #d4c5a9;
  --c-line-soft: #ede5d6;
  --c-gold: #c9a961;
  --c-orange: #EF6825;              /* unificado con cobre */
}


/* ============================================================
   TOKENS · Paleta Sunlighten oficial (también accesibles como --sl-*)
   ============================================================ */
:root {
  /* Paleta neutra y tierra (sunlighten.com usa cremas, beige, marrones cálidos) */
  --sl-cream: #f7f3ec;             /* fondo principal cálido */
  --sl-cream-soft: #fbf8f2;
  --sl-paper: #ffffff;
  --sl-stone: #ede5d6;
  --sl-sand: #d4c5a9;
  --sl-warm: #c9b896;

  /* Marrones / tierra (titulares y elementos premium) */
  --sl-brown-dark: #2a2520;        /* casi negro cálido */
  --sl-brown: #4a3f33;
  --sl-brown-mid: #6b5d4f;
  --sl-brown-soft: #8a7d6b;

  /* Acentos */
  --sl-copper: #EF6825;             /* NARANJA Sunlighten oficial */
  --sl-copper-deep: #D54E10;        /* naranja oscuro hover */
  --sl-copper-light: #FF8A4D;       /* naranja claro */
  --sl-amber: #EF6825;
  
  /* Verde sutil (botones secundarios) */
  --sl-green-deep: #2a3d2e;
  --sl-green-soft: #5a6b58;
  
  /* Tipografía Sunlighten */
  --sl-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sl-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --sl-ui: 'Inter', sans-serif;
}


/* ============================================================
   BASE · Body, fondos, tipografía global
   ============================================================ */
body {
  background: var(--sl-cream) !important;
  color: var(--sl-brown-dark) !important;
  font-family: var(--sl-sans) !important;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Headings tipo Sunlighten: serif elegante para los grandes, sans para subs */
h1, h2 {
  font-family: var(--sl-display) !important;
  font-weight: 400 !important;
  color: var(--sl-brown-dark) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 4.8rem) !important;
}
h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
}

h3, h4 {
  font-family: var(--sl-sans) !important;
  font-weight: 600 !important;
  color: var(--sl-brown-dark) !important;
  letter-spacing: 0;
}

h3 { font-size: 1.4rem !important; }
h4 { font-size: 1.1rem !important; }

p, li {
  color: var(--sl-brown) !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

p.lead, .lead {
  font-size: 1.2rem !important;
  line-height: 1.55 !important;
  color: var(--sl-brown-mid) !important;
  font-weight: 300 !important;
}


/* ============================================================
   KICKER · "BETTER INFRARED. BETTER ABSORPTION..." de Sunlighten
   ============================================================ */
.kicker, .eyebrow, [class*="kicker"] {
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--sl-copper) !important;
  margin-bottom: 18px !important;
  display: inline-block !important;
}


/* ============================================================
   HERO · Estilo página completa con imagen, oscurecida
   ============================================================ */

/* Override del .hero base del system.css (que tenía gradiente teal hardcodeado en ::before) */
.hero, 
.hero--page,
.hero--compact,
.hero--centered {
  background: linear-gradient(135deg, #1a1410 0%, #2a2520 50%, #3a3025 100%) !important;
  color: #fff !important;
  padding: 100px 0 90px !important;
  min-height: auto !important;
  position: relative;
  overflow: hidden;
}

/* Cancelar el ::before del system base que tenía radial-gradient teal */
.hero::before, .hero--page::before {
  background: radial-gradient(circle at 70% 50%, rgba(184, 129, 74, 0.12) 0%, transparent 60%) !important;
}

/* H1 del hero — debe ser blanco SIEMPRE, override completo */
.hero h1, .hero--page h1,
.hero__copy h1 {
  color: #fff !important;
  font-family: var(--sl-display) !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
  line-height: 1.15 !important;
}

/* TODOS los hijos del h1 del hero: heredar blanco — override del em del system base */
.hero h1 *, 
.hero--page h1 *,
.hero__copy h1 *,
.hero h1 em, 
.hero--page h1 em,
.hero__copy h1 em {
  color: #fff !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* Sup del registered en headings: tamaño y posición correctos */
.hero h1 sup, .hero--page h1 sup,
h1 sup, h2 sup, h3 sup {
  font-size: 0.4em !important;
  vertical-align: super !important;
  font-family: var(--sl-sans) !important;
  font-weight: 400 !important;
  top: -0.3em;
  position: relative;
  margin-left: 1px;
}

.hero p, .hero--page p, 
.hero .lead, .hero--page .lead,
.hero__copy p, .hero__copy .lead {
  color: rgba(255,255,255,0.88) !important;
  font-size: 1.15rem !important;
  max-width: 720px;
  line-height: 1.65 !important;
}

/* CRÍTICO: <strong> dentro del lead/párrafo del hero — debe ser blanco */
.hero p strong, .hero--page p strong,
.hero .lead strong, .hero--page .lead strong,
.hero p b, .hero--page p b,
.hero__copy strong, .hero__copy b {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CRÍTICO: <a> inline dentro del párrafo del hero — debe ser cobre claro visible sobre fondo oscuro */
.hero p a, .hero--page p a,
.hero .lead a, .hero--page .lead a,
.hero__copy a {
  color: var(--sl-copper-light) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(212, 165, 116, 0.5) !important;
  text-underline-offset: 3px !important;
  transition: all 0.2s ease !important;
}
.hero p a:hover, .hero--page p a:hover,
.hero__copy a:hover {
  color: #fff !important;
  text-decoration-color: #fff !important;
}

/* CRÍTICO: <sup> dentro del lead — heredar color del padre */
.hero p sup, .hero--page p sup,
.hero .lead sup, .hero--page .lead sup {
  color: inherit !important;
  font-size: 0.7em !important;
}

.hero .kicker, .hero--page .kicker {
  color: var(--sl-copper-light) !important;
  margin-bottom: 24px !important;
}

/* Breadcrumb dentro del hero */
.hero .breadcrumb, .hero--page .breadcrumb,
.hero nav.breadcrumb, .hero--page nav.breadcrumb {
  margin-bottom: 32px !important;
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
}
.hero .breadcrumb a, .hero--page .breadcrumb a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
}
.hero .breadcrumb a:hover, .hero--page .breadcrumb a:hover {
  color: var(--sl-copper-light) !important;
}

/* CTAs en el hero */
.hero .hero__ctas, .hero--page .hero__ctas,
.hero .cta-group, .hero--page .cta-group,
.hero .btn-group, .hero--page .btn-group,
.hero__copy .btn-group {
  margin-top: 40px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
}


/* ============================================================
   BOTONES · Estilo Sunlighten "GET PRICING"
   ============================================================ */
.btn, button.btn, a.btn {
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 18px 36px !important;
  border-radius: 0 !important;
  border: 2px solid var(--sl-brown-dark) !important;
  background: var(--sl-brown-dark) !important;
  color: #fff !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer;
}

.btn:hover, a.btn:hover {
  background: var(--sl-copper) !important;
  border-color: var(--sl-copper) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Botón acento (CTA principal) — color cobre */
.btn--accent, .btn--primary, a[href*="wa.me"].btn {
  background: var(--sl-copper) !important;
  border-color: var(--sl-copper) !important;
  color: #fff !important;
}
.btn--accent:hover, .btn--primary:hover, a[href*="wa.me"].btn:hover {
  background: var(--sl-copper-deep) !important;
  border-color: var(--sl-copper-deep) !important;
}

/* Botón ghost (transparente sobre fondo claro) */
.btn--ghost, .btn--outline {
  background: transparent !important;
  color: var(--sl-brown-dark) !important;
  border-color: var(--sl-brown-dark) !important;
}
.btn--ghost:hover, .btn--outline:hover {
  background: var(--sl-brown-dark) !important;
  color: #fff !important;
}

/* Botón ligero / claro (sobre fondo oscuro) */
.btn--light, .btn--dark {
  /* dark sobre fondos claros = botón principal oscuro */
}

/* Sobre hero oscuro: botones invertidos */
.hero .btn:not(.btn--accent), .hero--page .btn:not(.btn--accent) {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}
.hero .btn:not(.btn--accent):hover, .hero--page .btn:not(.btn--accent):hover {
  background: #fff !important;
  color: var(--sl-brown-dark) !important;
}


/* ============================================================
   SECCIONES · Alternancia clara/cremoso
   ============================================================ */
.section {
  padding: 100px 0 !important;
}

.section--paper {
  background: var(--sl-paper) !important;
}
.section--cream {
  background: var(--sl-stone) !important;
}
.section--paper-warm {
  background: var(--sl-cream-soft) !important;
}
.section--dark {
  background: linear-gradient(135deg, #1a1410 0%, #2a2520 50%, #3a3025 100%) !important;
  color: #fff !important;
}
.section--dark h2, .section--dark h3, .section--dark h4 {
  color: #fff !important;
}
.section--dark p, .section--dark li {
  color: rgba(255,255,255,0.85) !important;
}
.section--dark .kicker {
  color: var(--sl-copper-light) !important;
}

/* CRÍTICO: <strong>, <b>, <a>, <sup> dentro de secciones oscuras */
.section--dark strong, .section--dark b {
  color: #fff !important;
  font-weight: 600 !important;
}
.section--dark a:not(.btn) {
  color: var(--sl-copper-light) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(212, 165, 116, 0.5) !important;
  text-underline-offset: 3px !important;
}
.section--dark a:not(.btn):hover {
  color: #fff !important;
  text-decoration-color: #fff !important;
}
.section--dark sup, .section--dark sub {
  color: inherit !important;
}

/* CRÍTICO: párrafos con inline style="color: rgba(245,241,232,...)" — HTML legacy del sistema base.
   Forzamos a que sean blancos legibles dentro de cualquier sección oscura */
.section--dark p[style*="rgba(245"],
.section--dark p[style*="color: rgba"] {
  color: rgba(255,255,255,0.85) !important;
}

/* Y sus strong/a internos también legibles */
.section--dark p[style] strong,
.section--dark p[style] b {
  color: #fff !important;
}
.section--dark p[style] a {
  color: var(--sl-copper-light) !important;
}


/* ============================================================
   CARDS · Estilo "range card" tipo Sunlighten saunas
   ============================================================ */
.range-card, .article-card {
  background: var(--sl-paper) !important;
  border: 1px solid var(--sl-stone) !important;
  border-radius: 0 !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.range-card:hover, .article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(74, 63, 51, 0.12) !important;
  border-color: var(--sl-copper-light) !important;
}

.range-card__image, .article-card__image {
  aspect-ratio: 16/10;
  background: var(--sl-stone);
  overflow: hidden;
}
.range-card__image img, .article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.range-card:hover .range-card__image img {
  transform: scale(1.04);
}

.range-card__body, .article-card__body {
  padding: 36px 32px !important;
}
.range-card h3, .article-card h3 {
  font-family: var(--sl-display) !important;
  font-weight: 400 !important;
  font-size: 1.7rem !important;
  margin-bottom: 14px !important;
  color: var(--sl-brown-dark) !important;
}
.range-card p, .article-card p {
  color: var(--sl-brown-mid) !important;
  font-size: 0.98rem !important;
  margin-bottom: 22px;
}

/* Link "EXPLORE COLLECTION >" */
.range-card__link, .article-card__readmore {
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sl-copper) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--sl-copper) !important;
  padding-bottom: 6px !important;
  display: inline-block;
  transition: all 0.2s ease;
}
.range-card__link:hover, .article-card__readmore:hover {
  color: var(--sl-copper-deep) !important;
  border-bottom-color: var(--sl-copper-deep) !important;
}


/* ============================================================
   PILLARS / FEATURES · Grid 3-4 columnas tipo Sunlighten
   ============================================================ */
.pillars {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 50px 40px !important;
  margin-top: 60px !important;
}

.pillar {
  text-align: left;
}
.pillar__num {
  font-family: var(--sl-display) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: var(--sl-copper) !important;
  letter-spacing: 0.05em;
  margin-bottom: 16px !important;
  display: block;
  font-style: italic;
}
.pillar h3 {
  font-family: var(--sl-display) !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  margin-bottom: 14px !important;
  color: var(--sl-brown-dark) !important;
  line-height: 1.25;
}
.pillar p {
  color: var(--sl-brown-mid) !important;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
}


/* ============================================================
   NAV / HEADER · Estilo limpio Sunlighten
   ============================================================ */
.nav {
  background: #ffffff !important;
  border-bottom: 1px solid var(--sl-stone) !important;
  padding: 16px 0 !important;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(42, 37, 32, 0.04);
}

.nav__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px;
  padding: 0 32px !important;
  max-width: 1400px;
  margin: 0 auto;
}

/* BRAND · Logo Sunlighten + DISTRIBUIDOR ESPAÑA SUNMARKET */
.nav__brand {
  font-family: var(--sl-display) !important;
  font-size: 1.65rem !important;
  font-weight: 500 !important;
  color: var(--sl-brown-dark) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
}

.nav__brand sup {
  font-family: var(--sl-sans) !important;
  font-size: 0.45em !important;
  vertical-align: super !important;
  font-weight: 400 !important;
  color: var(--sl-copper) !important;
  margin-left: 2px;
}

.nav__brand small {
  font-family: var(--sl-ui) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sl-copper) !important;
  margin-top: 4px;
  display: block;
}

/* MENU · Lista de enlaces */
.nav__menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
}

.nav__menu li {
  margin: 0 !important;
}

.nav__menu a {
  font-family: var(--sl-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  padding: 8px 0;
  position: relative;
}

.nav__menu a:hover {
  color: var(--sl-copper) !important;
}

/* Underline animado al hover (estilo sunlighten.com) */
.nav__menu a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--sl-copper);
  transition: width 0.25s ease;
}
.nav__menu a:not(.nav__cta):hover::after {
  width: 100%;
}

/* CTA del menú: "PEDIR PRESUPUESTO" */
.nav__cta {
  background: var(--sl-copper) !important;
  color: #fff !important;
  padding: 14px 26px !important;
  border: 2px solid var(--sl-copper) !important;
  letter-spacing: 0.14em !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  transition: all 0.25s ease !important;
}
.nav__cta:hover {
  background: var(--sl-copper-deep) !important;
  border-color: var(--sl-copper-deep) !important;
  color: #fff !important;
}

/* Mantener compatibilidad si algún sitio usa las clases antiguas */
.nav__logo {
  font-family: var(--sl-display) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--sl-brown-dark) !important;
  text-decoration: none !important;
}
.nav__links a {
  font-family: var(--sl-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-dark) !important;
  text-decoration: none !important;
}
.nav__links a:hover {
  color: var(--sl-copper) !important;
}

/* Responsive: en móvil, oculta el menú expandido (debería aparecer un toggle) */
@media (max-width: 900px) {
  .nav__inner {
    padding: 0 20px !important;
  }
  .nav__menu {
    gap: 20px !important;
  }
  .nav__menu a:not(.nav__cta) {
    font-size: 0.72rem !important;
  }
}
@media (max-width: 640px) {
  .nav__menu {
    display: none !important;
  }
  .nav__menu.is-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0 !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--sl-stone);
    box-shadow: 0 12px 24px rgba(42,37,32,0.08);
  }
}


/* ============================================================
   FOOTER · Oscuro como sunlighten.com
   ============================================================ */
.footer {
  background: var(--sl-brown-dark) !important;
  color: rgba(255,255,255,0.75) !important;
  padding: 80px 0 40px !important;
}

.footer__brand {
  font-family: var(--sl-display) !important;
  font-size: 1.8rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-bottom: 18px;
}

.footer h4 {
  font-family: var(--sl-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sl-copper-light) !important;
  margin-bottom: 22px !important;
}

.footer a {
  color: rgba(255,255,255,0.82) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  font-size: 0.93rem;
}
.footer a:hover {
  color: var(--sl-copper-light) !important;
}

.footer__col ul {
  list-style: none;
  padding: 0;
}
.footer__col li {
  margin-bottom: 10px !important;
  color: rgba(255,255,255,0.82) !important;
}

.footer__legal, .footer p {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.65 !important;
}


/* ============================================================
   CTA FINAL · Bloque destacado en oscuro
   ============================================================ */
.cta-final {
  background: linear-gradient(135deg, var(--sl-brown-dark) 0%, var(--sl-brown) 100%) !important;
  color: #fff !important;
  padding: 110px 0 !important;
  text-align: center;
}

.cta-final h2 {
  color: #fff !important;
  font-family: var(--sl-display) !important;
  font-weight: 400 !important;
  margin-bottom: 24px;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
}

.cta-final .lead, .cta-final p {
  color: rgba(255,255,255,0.85) !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.cta-final strong, .cta-final b {
  color: #fff !important;
}
.cta-final a:not(.btn) {
  color: var(--sl-copper-light) !important;
}

.cta-final .kicker {
  color: var(--sl-copper-light) !important;
}


/* ============================================================
   TABLAS · Estilo limpio Sunlighten "specs"
   ============================================================ */
.specs, table.specs {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  border-top: 1px solid var(--sl-stone);
}
.specs tr {
  border-bottom: 1px solid var(--sl-stone);
}
.specs th, .specs td {
  padding: 18px 16px !important;
  text-align: left !important;
  vertical-align: top;
  font-size: 0.96rem;
}
.specs th {
  font-family: var(--sl-ui) !important;
  font-weight: 600 !important;
  color: var(--sl-brown-dark) !important;
  width: 40%;
  background: transparent !important;
}
.specs td {
  color: var(--sl-brown-mid) !important;
}


/* ============================================================
   ALERTS / NOTICES · Estilo sutil
   ============================================================ */
.alert, .alert--info, .alert--warn {
  background: var(--sl-cream-soft) !important;
  border: 1px solid var(--sl-sand) !important;
  border-left: 4px solid var(--sl-copper) !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
  color: var(--sl-brown) !important;
}
.alert h4, .alert--info h4, .alert--warn h4 {
  font-family: var(--sl-ui) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sl-copper-deep) !important;
  margin-bottom: 12px !important;
}
.alert p, .alert--info p, .alert--warn p {
  color: var(--sl-brown) !important;
  margin-bottom: 0 !important;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
}
.alert strong, .alert--info strong, .alert--warn strong {
  color: var(--sl-brown-dark) !important;
}

/* Alert dentro de section--dark: variante invertida */
.section--dark .alert,
.section--dark .alert--info,
.section--dark .alert--warn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(184, 129, 74, 0.3) !important;
  border-left: 4px solid var(--sl-copper) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
.section--dark .alert h4,
.section--dark .alert--info h4,
.section--dark .alert--warn h4 {
  color: var(--sl-copper-light) !important;
}
.section--dark .alert p,
.section--dark .alert--info p,
.section--dark .alert--warn p {
  color: rgba(255, 255, 255, 0.88) !important;
}
.section--dark .alert strong,
.section--dark .alert--info strong,
.section--dark .alert--warn strong {
  color: #fff !important;
}

/* Override CRÍTICO: inline style con border-left-color: var(--c-teal-light) — ahora cobre */
.alert[style*="border-left-color"],
.alert--info[style*="border-left-color"] {
  border-left-color: var(--sl-copper) !important;
}
.alert[style*="background: rgba(67"],
.alert--info[style*="background: rgba(67"] {
  background: rgba(184, 129, 74, 0.12) !important;
}
.alert h4[style*="color"],
.alert--info h4[style*="color"] {
  color: var(--sl-copper-light) !important;
}


/* ============================================================
   BREADCRUMBS · Estilo discreto
   ============================================================ */
.breadcrumb {
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 28px !important;
  color: rgba(255,255,255,0.6);
}
.breadcrumb a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
}
.breadcrumb a:hover {
  color: #fff !important;
}
.breadcrumb__sep {
  margin: 0 12px;
  opacity: 0.5;
}


/* ============================================================
   STICKY CTA WhatsApp · Cobre Sunlighten
   ============================================================ */
.sticky-cta {
  background: var(--sl-copper) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 14px 24px !important;
  font-family: var(--sl-ui) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 28px rgba(184, 129, 74, 0.35) !important;
}
.sticky-cta:hover {
  background: var(--sl-copper-deep) !important;
}


/* ============================================================
   COOKIE BANNER · Limpio
   ============================================================ */
.cookie-banner {
  background: var(--sl-brown-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}
.cookie-banner h4 {
  color: #fff !important;
  font-family: var(--sl-ui) !important;
  letter-spacing: 0.1em;
}
.cookie-banner p {
  color: rgba(255,255,255,0.85) !important;
}
.cookie-banner__accept {
  background: var(--sl-copper) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--sl-ui) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 24px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}
.cookie-banner__reject {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  font-family: var(--sl-ui) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 24px !important;
  font-size: 0.78rem !important;
}


/* ============================================================
   DISCLAIMER · estilo Sunlighten
   ============================================================ */
.disclaimer {
  background: var(--sl-stone) !important;
  border-top: 1px solid var(--sl-sand) !important;
  padding: 24px 0 !important;
}
.disclaimer p {
  font-size: 0.82rem !important;
  color: var(--sl-brown-mid) !important;
  margin: 0;
  text-align: center;
}


/* ============================================================
   LINKS GENERALES dentro de prose
   ============================================================ */
section a:not(.btn):not(.range-card__link):not(.article-card__readmore):not(.nav__links a) {
  color: var(--sl-copper) !important;
  text-decoration: underline;
  text-decoration-color: var(--sl-sand);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
section a:not(.btn):hover {
  text-decoration-color: var(--sl-copper) !important;
}


/* ============================================================
   RESPONSIVE · Ajustes para móvil
   ============================================================ */
@media (max-width: 768px) {
  .section { padding: 60px 0 !important; }
  .hero, .hero--page { padding: 70px 0 60px !important; }
  .cta-final { padding: 70px 0 !important; }
  
  .nav__inner {
    padding: 0 20px;
  }
  
  .pillars {
    gap: 32px !important;
  }
}


/* ============================================================
   GRID DE COLECCIONES (range-grid)
   ============================================================ */
.range-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 36px !important;
  margin-top: 60px !important;
}


/* ============================================================
   SECTION HEAD · Centrado tipo Sunlighten
   ============================================================ */
.section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px !important;
}
.section__head h2 {
  margin-bottom: 0 !important;
}
.section__head .kicker {
  margin-bottom: 16px !important;
}


/* ============================================================
   FIN del override sunlighten.com base
   ============================================================ */


/* ============================================================
   COMPONENTES ESPECÍFICOS DEL SYSTEM.CSS · Override completo
   ============================================================ */

/* FAQ accordion */
.faq { 
  border-top: 1px solid var(--sl-stone) !important; 
}
.faq__item {
  border-bottom: 1px solid var(--sl-stone) !important;
}
.faq__question {
  font-family: var(--sl-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  color: var(--sl-brown-dark) !important;
  padding: 28px 0 !important;
}
.faq__question:hover {
  color: var(--sl-copper) !important;
}
.faq__icon {
  color: var(--sl-copper) !important;
  font-weight: 300 !important;
}
.faq__answer p {
  color: var(--sl-brown-mid) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
.faq__answer a {
  color: var(--sl-copper) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--sl-sand) !important;
  text-underline-offset: 3px !important;
}
.faq__answer a:hover {
  text-decoration-color: var(--sl-copper) !important;
}

/* SPECS TABLE · ficha técnica */
.specs {
  border-top-color: var(--sl-stone) !important;
}
.specs tr {
  border-bottom-color: var(--sl-stone) !important;
}
.specs th {
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-dark) !important;
  font-weight: 600 !important;
}
.specs td {
  color: var(--sl-brown) !important;
  font-size: 1rem !important;
}

/* COMPARE TABLE · comparativa colecciones */
.compare-table {
  font-size: 0.95rem !important;
}
.compare-table th, .compare-table td {
  border-color: var(--sl-stone) !important;
  padding: 16px !important;
}
.compare-table thead {
  background: var(--sl-brown-dark) !important;
}
.compare-table thead th {
  background: var(--sl-brown-dark) !important;
  color: #fff !important;
  font-family: var(--sl-ui) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.compare-table thead th:first-child {
  background: #1a1410 !important;
}
.compare-table tbody td {
  color: var(--sl-brown) !important;
}
.compare-table tbody tr:hover {
  background: var(--sl-cream-soft) !important;
}

/* FOOTER · Override completo del system.css */
.footer {
  background: linear-gradient(180deg, #2a2520 0%, #1a1410 100%) !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 80px 0 30px !important;
}
.footer__brand {
  font-family: var(--sl-display) !important;
  font-size: 1.8rem !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.footer__brand sup {
  color: var(--sl-copper-light) !important;
}
.footer h4, .footer__col h4 {
  font-family: var(--sl-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sl-copper-light) !important;
  margin-bottom: 22px !important;
}
.footer a {
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  font-size: 0.93rem !important;
}
.footer a:hover {
  color: var(--sl-copper-light) !important;
}
.footer ul {
  list-style: none !important;
  padding: 0 !important;
}
.footer li {
  margin-bottom: 10px !important;
  color: rgba(255,255,255,0.8) !important;
}
.footer__legal, .footer__bottom, .footer__bottom p {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.65 !important;
}
.footer p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.93rem !important;
}
.footer strong, .footer b {
  color: #fff !important;
}

/* PRODUCT HERO · cabecera ficha de modelo */
.product-hero {
  background: linear-gradient(135deg, #1a1410 0%, #2a2520 50%, #3a3025 100%) !important;
  color: #fff !important;
}
.product-hero h1 {
  color: #fff !important;
}
.product-hero p {
  color: rgba(255,255,255,0.85) !important;
}
.product-hero .kicker {
  color: var(--sl-copper-light) !important;
}
.product-hero a:not(.btn) {
  color: var(--sl-copper-light) !important;
}
.product-hero strong {
  color: #fff !important;
}

/* CONTAINER constraints */
.container {
  max-width: 1280px !important;
  padding: 0 32px !important;
  margin: 0 auto !important;
}
.container--narrow {
  max-width: 880px !important;
}

/* HEADINGS dentro de section--cream/paper que pueden venir muy oscuros con el system base */
.section--cream h1, .section--cream h2, .section--cream h3,
.section--paper h1, .section--paper h2, .section--paper h3,
.section--paper-warm h1, .section--paper-warm h2, .section--paper-warm h3 {
  color: var(--sl-brown-dark) !important;
}

/* OVERRIDE INLINE STYLES PROBLEMÁTICOS · enlaces con teal del system base */
a[href][style*="--c-teal"],
a[href][style*="rgba(67,191,186"] {
  color: var(--sl-copper) !important;
}

/* Si una sección oscura del system.css usa el gradiente teal-deep, ahora será marrón
   gracias al override de variables en :root */


/* ============================================================
   ESPECIFICIDAD REFORZADA · NAV
   ============================================================
   Por si algunas reglas del system.css ganan especificidad,
   añadimos selectores con doble clase y body para asegurar
   que ganen siempre.
   ============================================================ */

body .nav,
html .nav {
  background: #ffffff !important;
  border-bottom: 1px solid #ede5d6 !important;
}

body .nav .nav__brand,
body a.nav__brand,
html .nav__brand {
  color: #2a2520 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.65rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body .nav .nav__brand sup {
  color: #EF6825 !important;
  opacity: 1 !important;
}

body .nav .nav__brand small,
html .nav__brand small {
  color: #EF6825 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

body .nav .nav__menu a,
body .nav__menu a {
  color: #2a2520 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

body .nav .nav__menu a:hover,
body .nav__menu a:hover {
  color: #EF6825 !important;
  opacity: 1 !important;
}

body .nav .nav__cta,
body a.nav__cta {
  background: #EF6825 !important;
  color: #ffffff !important;
  border: 2px solid #EF6825 !important;
  padding: 14px 26px !important;
  letter-spacing: 0.14em !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

body .nav .nav__cta:hover,
body a.nav__cta:hover {
  background: #D54E10 !important;
  border-color: #D54E10 !important;
  color: #ffffff !important;
}


/* ============================================================
   v3.8 · COMPONENTES ENRIQUECIDOS PARA FICHAS ESTILO SUNLIGHTEN.COM
   Paleta naranja oficial #EF6825 · dominante blanco
   ============================================================ */

/* PRODUCT HERO LIMPIO (fondo blanco, no oscuro) */
.product-hero {
  background: #ffffff !important;
  padding: 60px 0 80px !important;
  color: var(--sl-brown-dark) !important;
}
.product-hero--white { background: #ffffff !important; }
.product-hero h1 { color: var(--sl-brown-dark) !important; }
.product-hero p, .product-hero li { color: var(--sl-brown) !important; }
.product-hero .lead { font-size: 1.18rem !important; line-height: 1.6 !important; max-width: none !important; }
.product-hero strong { color: var(--sl-brown-dark) !important; }
.product-hero a:not(.btn) { color: #EF6825 !important; }

.product-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .product-hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

.product-hero__main-img {
  background: #fbf8f2;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 0;
}
.product-hero__main-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-hero__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.product-hero__thumb {
  background: #fbf8f2;
  aspect-ratio: 1;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.product-hero__thumb.is-active { border-color: #EF6825; }
.product-hero__thumb:hover { border-color: #EF6825; }
.product-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-hero__info { padding-top: 8px; }

.trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin: 20px 0 24px;
  border-top: 1px solid #ede5d6;
  border-bottom: 1px solid #ede5d6;
  font-size: 0.88rem;
  color: var(--sl-brown-mid);
}
.trust-badge__stars { display: inline-flex; gap: 2px; }

.product-hero__highlights {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 32px !important;
  display: grid;
  gap: 12px !important;
}
.product-hero__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--sl-brown) !important;
}
.product-hero__highlights .dot {
  width: 6px; height: 6px;
  background: #EF6825;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.product-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.product-hero__note {
  margin-top: 18px !important;
  font-size: 0.82rem !important;
  color: var(--sl-brown-soft) !important;
}

/* MEDIA BAR · logos de prensa */
.media-bar {
  background: #fbf8f2;
  padding: 32px 0;
  border-top: 1px solid #ede5d6;
  border-bottom: 1px solid #ede5d6;
}
.media-bar__title {
  text-align: center;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-soft) !important;
  margin-bottom: 18px !important;
}
.media-bar__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.media-bar__logos span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--sl-brown-mid);
  letter-spacing: 0.02em;
  opacity: 0.55;
}

/* PROSE · texto largo legible */
.prose p {
  font-size: 1.06rem !important;
  line-height: 1.75 !important;
  color: var(--sl-brown) !important;
  margin-bottom: 22px !important;
}
.prose strong {
  color: var(--sl-brown-dark) !important;
  font-weight: 600 !important;
}

/* DIFF GRID · 4 cards */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 50px;
}
.diff-card {
  background: #ffffff;
  padding: 36px 28px;
  border: 1px solid #ede5d6;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.diff-card:hover {
  transform: translateY(-4px);
  border-color: #EF6825;
}
.diff-card__icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(239, 104, 37, 0.08);
  margin-bottom: 22px;
}
.diff-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  color: var(--sl-brown-dark) !important;
  margin-bottom: 12px !important;
  line-height: 1.25 !important;
}
.diff-card p {
  color: var(--sl-brown-mid) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* PROGRAMS GRID · cartas con número grande */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 50px;
}
.program {
  background: #fbf8f2;
  padding: 36px 28px;
  border-left: 4px solid #EF6825;
  position: relative;
}
.program__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #EF6825;
  display: block;
  margin-bottom: 8px;
  font-style: italic;
}
.program h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  color: var(--sl-brown-dark) !important;
  margin-bottom: 6px !important;
}
.program__duration {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-soft) !important;
  margin-bottom: 16px !important;
}
.program p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--sl-brown-mid) !important;
  margin-bottom: 12px !important;
}
.program__data {
  font-size: 0.95rem !important;
  color: var(--sl-brown-dark) !important;
  font-weight: 500 !important;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 63, 51, 0.15);
}
.program__data strong {
  color: #EF6825 !important;
  font-size: 1.1rem !important;
}
.program__source {
  font-size: 0.78rem !important;
  color: var(--sl-brown-soft) !important;
  font-style: italic;
}

/* FEATURES GRID · 4 features con imagen */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
  margin-top: 50px;
}
.feature-card {
  text-align: left;
}
.feature-card__img {
  aspect-ratio: 16/10;
  background: #fff;
  margin-bottom: 22px;
  overflow: hidden;
}
.feature-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  color: var(--sl-brown-dark) !important;
  margin-bottom: 10px !important;
}
.feature-card p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--sl-brown-mid) !important;
}

/* SECTION CTA centered */
.section__cta {
  text-align: center;
  margin-top: 60px;
}

/* SPLIT FEATURE · imagen + bullets */
.split-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .split-feature { grid-template-columns: 1fr; gap: 40px; }
}
.split-feature__img {
  aspect-ratio: 1;
  background: #fbf8f2;
  overflow: hidden;
}
.split-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 0 !important;
  display: grid;
  gap: 14px !important;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  color: var(--sl-brown) !important;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: rgba(239, 104, 37, 0.12);
  border-radius: 50%;
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 11px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #EF6825;
  border-bottom: 2px solid #EF6825;
  transform: rotate(-45deg);
}

/* COMPARE GRID · 3 cards de colecciones */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 50px;
}
.compare-col {
  background: #ffffff;
  padding: 32px 28px;
  border: 1px solid #ede5d6;
  display: flex;
  flex-direction: column;
}
.compare-col--featured {
  border: 2px solid #EF6825;
  background: #fff;
  position: relative;
}
.compare-col--featured::before {
  content: 'TÚ ESTÁS AQUÍ';
  position: absolute;
  top: -12px; left: 24px;
  background: #EF6825;
  color: #fff;
  padding: 4px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.compare-col__head {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ede5d6;
}
.compare-col__head img {
  width: 60px; height: 60px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}
.compare-col__head h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.7rem !important;
  font-weight: 500 !important;
  color: var(--sl-brown-dark) !important;
  margin-bottom: 4px !important;
}
.compare-col__head p {
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-soft) !important;
}
.compare-col__data {
  flex: 1;
  margin: 0 0 24px !important;
  padding: 0 !important;
}
.compare-col__data dt {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sl-brown-soft) !important;
  margin-top: 14px !important;
  margin-bottom: 4px !important;
}
.compare-col__data dt:first-child { margin-top: 0 !important; }
.compare-col__data dd {
  margin: 0 !important;
  font-size: 0.95rem !important;
  color: var(--sl-brown-dark) !important;
  line-height: 1.4 !important;
}
.compare-col .btn { width: 100%; text-align: center; }

/* EXPERT QUOTE */
.expert-quote {
  text-align: center;
}
.expert-quote .kicker { margin-bottom: 24px !important; }
.expert-quote blockquote {
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
}
.expert-quote blockquote p {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--sl-brown-dark) !important;
  line-height: 1.4 !important;
  margin-bottom: 24px !important;
}
.expert-quote cite {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 0.92rem !important;
  color: var(--sl-brown-mid) !important;
  display: block;
}
.expert-quote cite strong {
  color: var(--sl-brown-dark) !important;
  font-weight: 600 !important;
}
.expert-quote__note {
  font-size: 0.92rem !important;
  color: var(--sl-brown-soft) !important;
  margin-top: 32px !important;
}

/* REASONS LIST · 4 razones con loto */
.reasons-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 50px 0 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 50px !important;
}
@media (max-width: 700px) {
  .reasons-list { grid-template-columns: 1fr; gap: 24px !important; }
}
.reasons-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.reasons-list__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(239, 104, 37, 0.1);
  border-radius: 50%;
}
.reasons-list p {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: var(--sl-brown) !important;
}
.reasons-list strong {
  color: var(--sl-brown-dark) !important;
  font-weight: 600 !important;
}

/* CTA FINAL · botones grandes */
.cta-final__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.cta-final__legal {
  margin-top: 28px !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.55) !important;
}

/* CTA FINAL · botones sobre fondo oscuro deben ser visibles */
.cta-final .btn--ghost {
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.cta-final .btn--ghost:hover {
  background: #fff !important;
  color: var(--sl-brown-dark) !important;
}

/* BUTTON LARGE */
.btn--large {
  padding: 18px 40px !important;
  font-size: 0.85rem !important;
}

/* HERO CLEAN · breadcrumb solo, sin contenido en hero */
.hero--clean {
  padding: 28px 0 !important;
  min-height: auto !important;
  background: #fff !important;
  border-bottom: 1px solid #ede5d6;
  color: var(--sl-brown-mid) !important;
}
.hero--clean .breadcrumb {
  margin-bottom: 0 !important;
  color: var(--sl-brown-soft) !important;
}
.hero--clean .breadcrumb a {
  color: var(--sl-brown-mid) !important;
}
.hero--clean .breadcrumb a:hover {
  color: #EF6825 !important;
}


/* ============================================================
   v4.1 · UTILIDADES PARA REEMPLAZAR INLINE STYLES ELIMINADOS
   ============================================================ */

/* Imágenes dentro de contenedores con aspect-ratio (los thumbnails y heroes) */
.real-img-wrapper {
  overflow: hidden;
  background: #fbf8f2;
}
.real-img-wrapper img,
.product-hero__main-img img,
.product-hero__thumb img,
.range-card__image img,
.feature-card__img img,
.split-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect ratios comunes */
.real-img-wrapper { aspect-ratio: 4/3; }
.product-hero__main-img { aspect-ratio: 4/5; }
.product-hero__thumb { aspect-ratio: 1; }
.product-gallery__thumbs .real-img-wrapper { aspect-ratio: 1; }

/* Footer bottom layout */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}
.footer__bottom > div:last-child {
  display: flex;
  gap: 20px;
  font-size: 12px;
}

/* Galería del hero (era inline grid 1.2fr 1fr) */
.section--paper > .container > div:not([class]) {
  /* Para las páginas viejas que tienen <div> sin clase con grid inline */
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .section--paper > .container > div:not([class]) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Hero info en fichas viejas (h1 con inline font-size) */
.section--paper .container > div > div h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 24px;
  color: var(--sl-brown-dark);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.05;
}

.section--paper .container > div > div h1 em {
  color: #EF6825;
  font-style: italic;
  font-weight: 400;
}

/* Lead en cualquier sección paper (no solo dentro de .product-hero o .hero) */
.section .lead,
.section--paper .lead,
.section--cream .lead,
.section--paper-warm .lead {
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
  color: var(--sl-brown) !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
  display: block !important;
}

.section .lead strong,
.section--paper .lead strong,
.section--cream .lead strong {
  color: var(--sl-brown-dark) !important;
  font-weight: 600 !important;
}

/* Listas con bullets en hero (sin estilo de lista) */
.section--paper .container ul:not([class]) {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: grid;
  gap: 12px;
}
.section--paper .container ul:not([class]) li {
  font-size: 0.95rem;
  color: var(--sl-brown);
  line-height: 1.5;
}

/* btn-group container (era inline) */
.btn-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Listas con padding-left y discos (descripciones largas) */
.prose ul,
.section ul.checks {
  padding-left: 24px;
  list-style: disc;
  color: var(--sl-brown);
  margin-bottom: 24px;
  display: block;
}
.prose ul li {
  margin-bottom: 8px;
  line-height: 1.65;
}

/* Container narrow para textos legibles */
.container--narrow {
  max-width: 880px;
  margin: 0 auto;
}

/* Section heads centrados (era inline text-align center) */
.section__head {
  text-align: center;
  margin-bottom: 40px;
}
.section__head--left {
  text-align: left;
}

/* Footer legal (font-size 12px era inline) */
.footer__legal,
.footer__bottom p {
  font-size: 12px;
  margin-top: 10px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}

/* Cookie banner ajustes */
.cookie-banner h4 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
}
.cookie-banner p {
  font-size: 0.92rem;
  margin: 0 0 12px 0;
  line-height: 1.55;
}

/* Centered section variations */
.section--centered {
  text-align: center;
}

/* Para emergencias: cualquier .lead que aún siga invisible por herencia */
p.lead {
  color: var(--sl-brown) !important;
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* Y para los <em> dentro de h1/h2 dentro de cualquier sección paper/cream */
.section--paper h1 em,
.section--cream h1 em,
.section--paper-warm h1 em,
.product-hero h1 em {
  color: #EF6825 !important;
  font-style: italic !important;
}

/* Section padding por defecto */
.section {
  padding: 80px 0;
}
.section--paper { background: #ffffff; }
.section--paper-warm { background: #fbf8f2; }
.section--cream { background: #f7f3ec; }


/* ============================================================
   v5.0 · HOME HERO Y COMPONENTES ESPECÍFICOS
   ============================================================ */

.home-hero {
  background: #ffffff;
  padding: 60px 0 100px;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .home-hero__image { order: -1; }
}

.home-hero__copy h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  color: var(--sl-brown-dark);
  line-height: 1.05;
  margin-bottom: 28px;
  margin-top: 16px;
}

.home-hero__copy h1 em {
  color: #EF6825;
  font-style: italic;
  font-weight: 400;
}

.home-hero__copy .lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--sl-brown);
  margin-bottom: 32px;
}

.home-hero__copy .lead strong {
  color: var(--sl-brown-dark);
  font-weight: 600;
}

.home-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.home-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid #ede5d6;
  padding-top: 24px;
}

.home-hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--sl-brown);
  line-height: 1.5;
}

.home-hero__bullets .dot {
  width: 6px; height: 6px;
  background: #EF6825;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.home-hero__image {
  aspect-ratio: 4/5;
  background: #fbf8f2;
  overflow: hidden;
}

.home-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ ENDORSEMENTS GRID ============ */
.endorsements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.endorsement {
  background: #ffffff;
  padding: 36px 30px;
  border-left: 4px solid #EF6825;
  margin: 0;
}

.endorsement p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  color: var(--sl-brown-dark);
  line-height: 1.5;
  margin: 0 0 24px;
}

.endorsement cite {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--sl-brown-mid);
  display: block;
}

.endorsement cite strong {
  color: var(--sl-brown-dark);
  font-weight: 600;
}

.endorsement cite small {
  display: block;
  margin-top: 4px;
  color: var(--sl-brown-soft);
  font-size: 0.85rem;
}

/* ============ BENEFITS GRID ============ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 50px;
}

.benefit-cell {
  background: #ffffff;
  padding: 32px 26px;
  text-decoration: none;
  border: 1px solid #ede5d6;
  display: block;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.benefit-cell:hover {
  transform: translateY(-4px);
  border-color: #EF6825;
}

.benefit-cell__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  color: #EF6825;
  font-style: italic;
  display: block;
  margin-bottom: 10px;
}

.benefit-cell h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--sl-brown-dark);
  margin-bottom: 10px;
  line-height: 1.2;
}

.benefit-cell p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sl-brown-mid);
  margin: 0;
}

/* ============ DISCLAIMER ============ */
.disclaimer {
  background: #fbf8f2;
  padding: 40px 0;
  border-top: 1px solid #ede5d6;
}

.disclaimer p {
  font-size: 0.85rem;
  color: var(--sl-brown-soft);
  line-height: 1.55;
  text-align: center;
  margin: 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ FEATURE-CARD LINK ============ */
.feature-card__link {
  display: inline-block;
  margin-top: 14px;
  color: #EF6825;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.feature-card__link:hover {
  color: #D54E10;
}

/* ============ RANGE-CARD CTA (la card "no sé cuál elegir") ============ */
.range-card--cta {
  background: linear-gradient(135deg, #fff7ef 0%, #fff 100%);
  border: 2px dashed #EF6825;
  display: flex;
  align-items: center;
}

.range-card--cta .range-card__body {
  text-align: center;
  padding: 40px 28px;
}


/* ============================================================
   v5.2 · COMPONENTES DECLARATIVOS PÁGINAS DE CONTENIDO
   ============================================================ */

/* Bordered list (estándares, normativa) */
.bordered-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 18px;
}

.bordered-list li {
  border-left: 3px solid #EF6825;
  padding-left: 20px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--sl-brown);
}

.bordered-list li strong {
  display: block;
  color: var(--sl-brown-dark);
  font-weight: 600;
  margin-bottom: 4px;
}

/* Alert info */
.alert {
  background: #fff7ef;
  border-left: 4px solid #EF6825;
  padding: 24px 28px;
  margin: 32px 0;
}

.alert--info {
  background: #fff7ef;
  border-left: 4px solid #EF6825;
}

.alert h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--sl-brown-dark);
  margin: 0 0 8px 0;
}

.alert p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sl-brown);
  margin: 0;
}

/* Table caption */
.table__caption {
  margin-top: 24px;
  text-align: center;
  color: var(--sl-brown-soft);
  font-size: 0.92rem;
}

/* Split-feature reverse (imagen a la derecha) */
.split-feature--reverse {
  grid-template-columns: 1fr 1fr;
}

.split-feature--reverse .split-feature__img {
  order: 2;
}

@media (max-width: 900px) {
  .split-feature--reverse .split-feature__img {
    order: 0;
  }
}

/* Specs table cuando es comparativa (con header_row, 2 td) */
.specs td {
  padding: 12px 18px;
  border-bottom: 1px solid #ede5d6;
  vertical-align: top;
}

.specs th[scope="col"],
.specs tr:first-child th {
  background: #fbf8f2;
  font-weight: 600;
  color: var(--sl-brown-dark);
}

/* FAQ summary marker fix */
.faq__item summary {
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  display: inline-block;
  margin-left: auto;
  font-weight: 300;
  font-size: 1.4rem;
  color: #EF6825;
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}


/* ============================================================
   v5.3 · GALERÍA DE PRODUCTO CON THUMBNAILS
   ============================================================ */

.product-hero__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-hero__main-img {
  background: #fbf8f2;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
}

.product-hero__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

.product-hero__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .product-hero__thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
}

.thumb {
  aspect-ratio: 1/1;
  border: 2px solid transparent;
  background: #fbf8f2;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 3px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.thumb:hover {
  border-color: #FF8A4D;
  transform: translateY(-2px);
}

.thumb--active {
  border-color: #EF6825;
}

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

.product-hero__caption {
  font-size: 0.88rem;
  color: var(--sl-brown-soft);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
  padding-top: 4px;
  font-style: italic;
}


/* ============================================================
   v5.4 · IDENTIDAD SUNWELL · LOGO + FOOTER
   ============================================================ */

/* ─── Nav brand con logo SVG ─── */
.nav__brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
  text-decoration: none !important;
}

.nav__logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.nav__logo img {
  height: 22px;
  width: auto;
  display: block;
}

.nav__tagline {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--sl-brown-soft, #8a7868);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .nav__tagline {
    display: none;
  }
  .nav__logo img {
    height: 20px;
  }
}

/* ─── Footer renovado ─── */
.footer__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.footer__logo-sunwell {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1) opacity(0.9);
}

.footer__logo-divider {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

.footer__logo-sunlighten {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.footer__logo-sunlighten sup {
  font-size: 0.5em;
  vertical-align: super;
}

.footer__pitch strong {
  color: #ffffff;
  font-weight: 600;
}

/* Cuando el logo Sunwell está en hero/blanco */
.hero .footer__logo-sunwell,
.section .footer__logo-sunwell {
  filter: none;
  color: #75a7ad;
}


/* ============================================================
   v5.5 · ENLACE SISTER-SITE A SUNMARKET.ES + COLECCIÓN LUMINIR
   ============================================================ */

/* Footer · enlace destacado a sunmarket.es */
.footer__sister {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.footer__sister:hover {
  background: rgba(117, 167, 173, 0.15);
  border-color: rgba(117, 167, 173, 0.4);
}

.footer__sister-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer__sister-link strong {
  color: #ffffff;
  font-weight: 600;
}

.footer__sister-arrow {
  font-size: 1.3rem;
  color: #75a7ad;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.footer__sister:hover .footer__sister-arrow {
  transform: translateX(3px);
}

/* Footer ahora tiene 4 columnas */
@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
  }
}

/* ─── Tarjetas LumiNIR específicas (LED panel + mask) ─── */
.luminir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.luminir-card {
  background: #ffffff;
  border: 1px solid #ede5d6;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.luminir-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.luminir-card__image {
  background: linear-gradient(135deg, #fff7ef 0%, #ffe5d4 100%);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.luminir-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.luminir-card__body {
  padding: 28px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.luminir-card__kicker {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #EF6825;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

.luminir-card__body h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--sl-brown-dark);
  margin: 0 0 8px;
}

.luminir-card__body p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sl-brown-mid);
  flex: 1;
}

.luminir-card__cta {
  display: inline-block;
  margin-top: 16px;
  color: #EF6825;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
}

.luminir-card__cta:hover {
  color: #D54E10;
}

/* Footer · h4 con espaciado superior */
.footer__h4--spaced {
  margin-top: 24px !important;
}