/**
 * landing-magic.css — Newslittle landing visual override
 * Aplica el tema oscuro / estrellas / ámbar sobre la estructura existente de landing.html
 * No modifica HTML ni JS — solo estilos visuales.
 * Zona: web_public (compartida) | Responsable: Claude-Danny
 */

/* ── GOOGLE FONTS (Nunito + Lora) ── */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap");

/* ── CUSTOM PROPERTIES ── */
:root {
  --nl-deep:    #2e0f6e;   /* púrpura medio — base de página */
  --nl-dark:    #4a1a9e;   /* púrpura más claro para secciones */
  --nl-mid:     #7021cc;
  --nl-bright:  #8c29ff;
  --nl-light:   #c084fc;
  --nl-amber:   #f59e0b;
  --nl-amber2:  #f97316;
  --nl-gold:    #fcd34d;
  --nl-white:   #ffffff;
  --nl-soft:    rgba(255,255,255,0.9);
  --nl-muted:   rgba(255,255,255,0.65);
  --nl-card-bg: rgba(255,255,255,0.10);
  --nl-card-border: rgba(192,132,252,0.35);
}

/* ── BASE ── */
html, body {
  background: linear-gradient(160deg, #3b1282 0%, #2e0f6e 40%, #1f0850 100%) !important;
  background-attachment: fixed !important;
  color: var(--nl-soft) !important;
  font-family: 'Nunito', 'Poppins', sans-serif !important;
}

/* Stars canvas — inyectado por JS más abajo */
#nl-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* All sections sit above stars */
header, section, .footer, .cookie-banner {
  position: relative;
  z-index: 1;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3,
.steps__title, .faq__title, .pricing__text-title {
  color: var(--nl-white) !important;
  font-family: 'Lora', 'Merriweather', serif !important;
}

/* Forzar visibilidad del texto del hero — el waypoint base usa --fade-opacity:0 por defecto
   pero con nuestro reordenamiento flex el waypoint no dispara correctamente */
.hero__text-title,
.hero__text-description,
.hero__text-button,
.hero__text > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

p, li, span, label, a {
  color: var(--nl-soft);
}

/* Accent italic — ej: hero title em */
h1 em, h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--nl-amber) 0%, var(--nl-gold) 60%, var(--nl-amber2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── HEADER / NAV ── */
.header {
  background: rgba(26,5,64,0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(140,41,255,0.2) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.3) !important;
}

.header__menu-link {
  color: rgba(255,255,255,0.8) !important;
  font-weight: 600;
  transition: color 0.2s;
}
.header__menu-link:hover {
  color: var(--nl-amber) !important;
}

/* ── BUTTONS ── */
.button--primary,
.button--large.button--primary {
  background: linear-gradient(135deg, var(--nl-amber) 0%, var(--nl-amber2) 100%) !important;
  color: var(--nl-deep) !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(245,158,11,0.4) !important;
  border-radius: 999px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.button--primary:hover,
.button--large.button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(245,158,11,0.55) !important;
}

.button--outline {
  background: transparent !important;
  border: 1.5px solid rgba(140,41,255,0.6) !important;
  color: var(--nl-light) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.button--outline:hover {
  background: rgba(140,41,255,0.15) !important;
  border-color: var(--nl-bright) !important;
  color: var(--nl-white) !important;
}

.button--orange {
  background: linear-gradient(135deg, var(--nl-amber) 0%, var(--nl-amber2) 100%) !important;
  color: var(--nl-deep) !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 24px rgba(245,158,11,0.35) !important;
}
.button--orange:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(245,158,11,0.5) !important;
}

/* ── HERO ── */
.hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(140,41,255,0.22) 0%, transparent 70%), var(--nl-deep) !important;
}

.hero__text-title {
  color: var(--nl-white) !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.9),
    0 0 40px rgba(0,0,0,0.7) !important;
}

.hero__text-description {
  color: var(--nl-soft) !important;
}

/* ── TODAS LAS SECCIONES — transparentes para que se vean las estrellas ── */
section,
.hero, .steps, .about, .how-work, .faq, .partners, .pricing,
.hero__glass {
  background: transparent !important;
}

/* ── HERO LAYOUT — texto superpuesto sobre la imagen ── */
/* .hero__image define la altura; .hero__content flota encima en position:absolute */
.hero {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}
/* El contenido flota sobre la imagen */
.hero__content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  padding: 140px 0 0 !important;
}
/* La imagen ocupa todo el hero y define su altura */
.hero__image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  /* Difuminado: top algo transparente (zona del texto), centro nítido, bottom desvanece */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.05) 12%,
    rgba(0,0,0,0.30) 24%,
    black 42%,
    black 65%,
    rgba(0,0,0,0.60) 82%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.05) 12%,
    rgba(0,0,0,0.30) 24%,
    black 42%,
    black 65%,
    rgba(0,0,0,0.60) 82%,
    transparent 100%
  ) !important;
}

/* Excepciones con fondo sutil */
.steps {
  background: linear-gradient(180deg, transparent 0%, rgba(74,26,158,0.12) 50%, transparent 100%) !important;
}

/* ── STEPS ── */
.step-card {
  background: rgba(74,26,158,0.30) !important;
  border: 1px solid rgba(192,132,252,0.28) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.step-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(192,132,252,0.55) !important;
  box-shadow: 0 20px 60px rgba(140,41,255,0.2) !important;
}

.step-card__shadow {
  display: none !important;
}

/* Imagen con degradado en borde inferior para integración */
.step-card__icon {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.step-card__icon img {
  display: block !important;
  width: 100% !important;
  border-radius: 0 !important;
}
.step-card__icon::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 70px !important;
  background: linear-gradient(transparent, rgba(46,15,110,0.95)) !important;
  pointer-events: none !important;
}

/* Contenido de la card — fondo oscuro, texto claro */
.step-card__content {
  background: transparent !important;
  padding: 16px 20px 24px !important;
}

.step-card__title {
  color: var(--nl-white) !important;
  font-size: 1.1rem !important;
}

.step-card__text {
  color: var(--nl-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
}

/* ── ABOUT ── */
.about {
  background: transparent !important;
}

.about__text-title {
  color: var(--nl-white) !important;
}

.about__text-feature {
  background: rgba(74,26,158,0.28) !important;
  border: 1px solid rgba(192,132,252,0.28) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Imagen about — blend con fondo para integrar foto de fondo blanco */
.about__image img {
  mix-blend-mode: multiply !important;
  border-radius: 20px !important;
  opacity: 0.92 !important;
  filter: saturate(1.1) !important;
}

.about__text-feature-title {
  color: var(--nl-amber) !important;
}

.about__text-feature-text {
  color: var(--nl-soft) !important;
}

/* ── HOW WORK ── */
.how-work {
  background: transparent !important;
}

.how-work__text-title {
  color: var(--nl-white) !important;
}

.how-work__text p {
  color: var(--nl-soft) !important;
}

/* ── FAQ ── */
.faq {
  background: transparent !important;
}

.faq__title {
  color: var(--nl-white) !important;
}

.faq__accordion-item {
  background: var(--nl-card-bg) !important;
  border: 1px solid var(--nl-card-border) !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.faq__accordion-question {
  color: var(--nl-white) !important;
  background: transparent !important;
  font-weight: 700 !important;
  padding: 20px 24px !important;
}

.faq__accordion-question:hover {
  background: rgba(140,41,255,0.08) !important;
}

/* Accordion: colapsado por defecto con transición suave */
.faq__accordion-answer {
  color: var(--nl-soft) !important;
  overflow: hidden !important;
  max-height: 0 !important;
  padding: 0 24px !important;
  transition: max-height 0.35s ease, padding 0.25s ease !important;
}

.faq__accordion-item[data-accordion-open] .faq__accordion-answer {
  max-height: 400px !important;
  padding: 4px 24px 20px !important;
}

.faq__accordion-answer p {
  color: var(--nl-soft) !important;
  line-height: 1.65 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Links dentro del FAQ — no en ámbar, sino en lila suave */
.faq__accordion-answer a,
.faq__accordion-answer strong {
  color: var(--nl-light) !important;
}

/* Accordion icon */
.faq__accordion-item .icon {
  filter: invert(1) !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}
.faq__accordion-item[data-accordion-open] .icon {
  transform: rotate(180deg) !important;
}

/* Pregunta — no desborda */
.faq__accordion-question {
  gap: 12px !important;
  width: 100% !important;
}
.accordion-title {
  flex: 1 !important;
  overflow-wrap: break-word !important;
}

/* ── THEMES SECTION ── */
section.pricing#themes,
.pricing#themes,
#themes,
#themes .themes__content,
#themes .themes__text {
  background: transparent !important;
}

.pricing#themes .pricing__text-title {
  color: var(--nl-white) !important;
}

.pricing#themes h3 {
  color: var(--nl-light) !important;
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}

.pricing#themes p {
  color: var(--nl-muted) !important;
}

/* ── PARTNERS ── */
.partners {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid rgba(140,41,255,0.1) !important;
  border-bottom: 1px solid rgba(140,41,255,0.1) !important;
}

.partners__text-title {
  color: var(--nl-muted) !important;
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Partner logos — brillo aumentado para visibilidad en fondo oscuro */
.partners__logos-item img {
  filter: brightness(1.2) !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s !important;
}
.partners__logos-item:hover img {
  opacity: 1 !important;
}

/* ── PARTNERS — fondo lila muy suave para diferenciarlo del footer ── */
.partners {
  background: #f0ebff !important;   /* lila pálido — claramente distinto del blanco puro */
  border-top: 1px solid rgba(112,33,204,0.18) !important;
  border-bottom: none !important;
}

.partners__text-title {
  color: rgba(46,15,110,0.55) !important;
}

.partners__logos-item img {
  filter: none !important;
  opacity: 0.85 !important;
}
.partners__logos-item:hover img {
  opacity: 1 !important;
}

/* ── FOOTER — blanco puro, claramente separado de partners ── */
.footer {
  background: #ffffff !important;
  border-top: 2px solid rgba(112,33,204,0.25) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Logo footer — si es SVG blanco, convertir a morado oscuro sobre blanco */
.footer__logo img {
  /* Convierte logo blanco a morado marca (#2e0f6e) */
  filter: brightness(0) saturate(100%) invert(10%) sepia(80%) saturate(2200%) hue-rotate(252deg) brightness(0.7) !important;
}

.footer__info-title {
  color: var(--nl-deep) !important;
  font-weight: 700 !important;
}

.footer__info-address,
.footer__info-cif {
  color: rgba(46,15,110,0.6) !important;
}

.footer__info-email {
  color: var(--nl-mid) !important;
  font-weight: 600 !important;
}

/* Override global p/a/span → texto oscuro dentro del footer */
.footer p,
.footer span,
.footer a:not(.button) {
  color: rgba(46,15,110,0.7) !important;
}

.footer__link {
  color: rgba(46,15,110,0.65) !important;
  transition: color 0.2s !important;
}
.footer__link:hover {
  color: var(--nl-mid) !important;
}

/* Social icons sobre fondo blanco */
.footer__social-links a img {
  opacity: 0.7 !important;
  filter: saturate(0.5) brightness(0.6) !important;
  transition: opacity 0.2s, filter 0.2s !important;
}
.footer__social-links a:hover img {
  opacity: 1 !important;
  filter: none !important;
}

/* ── COOKIE BANNER — por delante de todo ── */
.cookie-banner {
  background: rgba(30,8,72,0.98) !important;
  border-top: 1px solid rgba(140,41,255,0.35) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 9999 !important;
  position: fixed !important;
}

.cookie-banner__title,
.cookie-banner__text,
.cookie-banner__text a {
  color: var(--nl-soft) !important;
}

.cookie-banner__button--accept {
  background: linear-gradient(135deg, var(--nl-amber) 0%, var(--nl-amber2) 100%) !important;
  color: var(--nl-deep) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  border: none !important;
}

.cookie-banner__button--reject,
.cookie-banner__button--settings {
  background: transparent !important;
  border: 1.5px solid rgba(140,41,255,0.4) !important;
  color: var(--nl-light) !important;
  border-radius: 999px !important;
}

/* ── STARS + SPARKLES (inyectado via script) ── */
@keyframes nl-twinkle {
  from { opacity: var(--o1, 0.1); transform: scale(1); }
  to   { opacity: var(--o2, 0.8); transform: scale(1.5); }
}
@keyframes nl-sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1) rotate(180deg); }
}

.nl-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.80);
  box-shadow:
    0 0 2px 0.5px rgba(255,255,255,0.55),
    0 0 5px 1px rgba(255,255,255,0.20);
  animation: nl-twinkle var(--d, 3s) ease-in-out infinite alternate;
}

.nl-sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--nl-amber);
  filter:
    drop-shadow(0 0 3px var(--nl-amber))
    drop-shadow(0 0 8px rgba(245,158,11,0.6));
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: nl-sparkle var(--d, 4s) ease-in-out infinite;
}

/* Modal cookies también por delante */
.cookie-settings-modal {
  z-index: 10000 !important;
}

/* ── GLOWS (ambient lighting) ── */
/* NOTE: Using left:0/right:0 + width:100% on pseudo-elements to avoid
   fixed elements extending beyond the viewport on iOS/Android Safari,
   which causes horizontal scroll even with overflow-x:hidden on body. */
body::before {
  content: '';
  position: fixed;
  top: -15%;
  left: 0;
  right: 0;
  width: 100%;
  height: 700px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(192,132,252,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: -10%;
  right: 0;
  width: 50%;
  height: 500px;
  background: radial-gradient(ellipse, rgba(245,158,11,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── VIDEO WRAPPER ── */
.how-work__image-gray,
.how-work__image-violet,
.how-work__image-yellow {
  opacity: 0.15 !important;
}

/* ── CONTAINER BG overrides ── */
.container {
  position: relative;
  z-index: 1;
}

/* ── MISC form-like inputs ── */
input, select, textarea {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

input::placeholder { color: rgba(255,255,255,0.4) !important; }

/* ── RESPONSIVE ── */

/* ── MOBILE MENU (hamburger) — single consolidated block ── */
@media (max-width: 1050px) {
  .header {
    padding: 12px 16px !important;
  }

  /* Hamburger icon — white on dark header */
  .header__mobile-toggle {
    z-index: 10000 !important;
  }
  .toggle-button span,
  .toggle-button span::before,
  .toggle-button span::after {
    background-color: white !important;
  }

  /* Side panel — dark, full height, slides from right */
  .header__content {
    background: rgba(15, 3, 50, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
    width: min(300px, 85vw) !important;
    min-width: unset !important;
    border-left: 1px solid rgba(140,41,255,0.3) !important;
    box-shadow: -8px 0 50px rgba(0,0,0,0.7) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 100px 28px 40px !important;
    gap: 0 !important;
    overflow-y: auto !important;
  }
  .header__content.active {
    right: 0 !important;
  }

  /* Menu list */
  .header__content .header__menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .header__content .header__menu li {
    width: 100% !important;
  }
  .header__content .header__menu li a {
    color: white !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  .header__content .header__menu li a:hover {
    color: #c084fc !important;
  }

  /* Action buttons */
  .header__content .header__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }
  .header__content .button {
    color: white !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }
  .header__content .button--outline {
    border-color: rgba(255,255,255,0.4) !important;
  }
}

/* ── MOBILE / TABLET HERO + BUTTONS ── */
@media (max-width: 1050px) {
  /* Hero: imagen más grande, texto con fondo para legibilidad */
  .hero__image {
    aspect-ratio: 1 !important; /* Más alta que el 1.4 de desktop */
  }
  .hero__content {
    padding: 120px 20px 0 !important;
  }
  .hero__text {
    max-width: 600px !important;
    margin: 0 auto !important;
    background: rgba(15, 10, 40, 0.35) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: 24px !important;
    padding: 28px 20px !important;
  }
  .hero__text-title {
    font-size: clamp(1.75rem, 1rem + 3vw, 2.625rem) !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  .hero__text-description {
    font-size: clamp(0.9rem, 0.75rem + 0.8vw, 1.125rem) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Botones: ancho completo, centrados */
  .hero__text .button,
  .how-work__text-buttons .button {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    border-radius: 16px !important;
  }
}

/* Extra small phones (< 480px) */
@media (max-width: 480px) {
  .hero__image {
    aspect-ratio: 0.8 !important; /* Aún más alta en móvil para ver más imagen */
  }
  .hero__content {
    padding: 90px 16px 0 !important;
  }
  .hero__text {
    padding: 24px 16px !important;
  }

  .hero__text .button,
  .how-work__text-buttons .button {
    max-width: 100% !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  .cookie-banner__button {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* Cookie banner — prevent overflow on narrow screens */
@media (max-width: 768px) {
  .cookie-banner__content {
    min-width: unset !important;
    width: 100% !important;
  }
  .cookie-banner {
    padding: 16px !important;
  }
}

/* ── PREVENT HORIZONTAL OVERFLOW ── */
/* overflow-x:clip previene scroll horizontal SIN recortar position:fixed (menú móvil) */
html {
  overflow-x: clip !important;
  max-width: 100vw !important;
}
body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

/* Themes grid — constrain columns so they never overflow on narrow screens */
#themes .themes__content,
#themes .themes__text {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
}

#themes .themes__grid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
}

/* Sections — never wider than viewport */
section, .about__content, .how-work__content, .steps__grid {
  max-width: 100% !important;
  box-sizing: border-box !important;
}