/* ==========================================================================
   theme-light.css — MODO DÍA (parcial).            Se carga después de todo.

   Idea: el sitio sigue siendo oscuro de nacimiento. Este archivo solo agrega
   el modo día, y lo hace en dos movimientos:

   1. Cambia los tokens de página (fondos, texto, líneas) a la paleta clara
      cuando el <html> tiene data-theme="light".
   2. Vuelve a declarar los tokens OSCUROS dentro de las "bandas oscuras"
      —header, menú mobile, banner, Cómo trabajamos y footer—, que se quedan
      de noche siempre. Como los tokens se heredan, todo lo que vive dentro de
      esas bandas sigue viéndose igual que ahora, sin tocar sus hojas.
      Esto además resuelve el logo: el wordmark blanco nunca queda sobre claro.

   Lo que no se puede resolver con tokens (colores escritos a mano en cada
   hoja: velos negros, brillos, vidrios) se corrige abajo, sección por sección.

   Volver a "solo noche" = quitar el <link> de este archivo y el botón del
   header. Nada más depende de él.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. Paleta del modo día
   --------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  /* superficies: blancos con una gota de violeta, para que no se sienta frío */
  --bg:          #F5F3FA;
  --surface:     #FFFFFF;
  --surface-2:   #FBF9FE;
  --surface-3:   #F2EEFA;
  --glass:       rgba(255, 255, 255, .78);
  --line:        rgba(20, 16, 31, .10);
  --line-strong: rgba(20, 16, 31, .18);

  /* texto: 13.6:1, 7.4:1 y 4.9:1 sobre --bg */
  --text:        #14101F;
  --text-2:      #4B4459;
  --text-3:      #6C6580;

  /* el magenta de marca no alcanza contraste sobre blanco: para texto y
     detalles finos se usa esta versión más profunda (5.6:1 sobre --bg).
     Los fondos y degradés siguen usando el magenta original. */
  --brand-ink:   #9A1FBC;
  --platform-ic: #14101F;             /* logos de plataformas en negro sobre claro (guías de marca) */
  --danger:      #C2185B;              /* 5.7:1 sobre blanco */

  /* sombras y brillos: en claro, sombra suave en vez de resplandor */
  --glow-brand: 0 0 0 1px rgba(193, 44, 229, .25), 0 12px 30px -12px rgba(193, 44, 229, .45);
  --shadow-lg:  0 24px 60px -28px rgba(20, 16, 31, .35);
}

/* en modo noche --brand-ink es simplemente el magenta claro de siempre */
:root { --brand-ink: var(--brand-hi); }

/* degradé de texto: el extremo más claro no se lee sobre blanco, así que en
   modo día el degradé termina en el magenta pleno */
/* OJO: acá va background-IMAGE, no background. El atajo `background` reinicia
   background-clip y el texto dejaría de recortarse: se vería una barra de color. */
:root[data-theme="light"] .text-grad {
  background-image: linear-gradient(90deg, #3B5BDB 0%, #7B3CF2 45%, var(--brand) 100%);
}

/* ---------------------------------------------------------------------
   2. Bandas que se quedan de noche
   --------------------------------------------------------------------- */
:root[data-theme="light"] .hdr-bar,
:root[data-theme="light"] .hdr-menu,
:root[data-theme="light"] .process,
:root[data-theme="light"] .tut-panel,
:root[data-theme="light"] .ftr {
  --bg:          #050409;
  --surface:     #0C0A13;
  --surface-2:   #13101C;
  --surface-3:   #1B1727;
  --glass:       rgba(19, 16, 28, .72);
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --text:        #F4F2F8;
  --text-2:      #B6B1C6;
  --text-3:      #7F7992;
  --brand-ink:   var(--brand-hi);
  --platform-ic: #FFFFFF;
  --danger:      #FF6B8B;
  --glow-brand:  0 0 0 1px rgba(193, 44, 229, .35), 0 12px 40px -8px rgba(193, 44, 229, .55);
  --shadow-lg:   0 30px 80px -20px rgba(0, 0, 0, .8);
  color: var(--text);
}

/* la barra del header es semitransparente: sobre página clara se veía gris
   lavada, así que en modo día va más sólida */
:root[data-theme="light"] .hdr-bar { background: rgba(12, 10, 19, .9); }
:root[data-theme="light"] .hdr.is-scrolled .hdr-bar { background: rgba(12, 10, 19, .96); }

/* Cómo trabajamos y el footer son paneles oscuros sobre página clara: un halo
   suave los separa del fondo en vez de quedar "pegados" */
:root[data-theme="light"] .process-panel,
:root[data-theme="light"] .tut-panel,
:root[data-theme="light"] .ftr-panel {
  box-shadow: 0 30px 80px -40px rgba(20, 16, 31, .45);
}

/* ---------------------------------------------------------------------
   2b. Banner en modo día
   El cliente lo pidió más luminoso. El panel pasa a claro con los halos de
   marca, y la tarjeta del lanzamiento se queda oscura: es el foco de la
   composición y hace de contrapunto. Todo lo que sale de tokens (chips,
   tarjeta de regalías, textos, botones) se aclara solo; acá van las piezas
   que tenían el color escrito a mano pensando en fondo negro.
   --------------------------------------------------------------------- */
:root[data-theme="light"] .hero-panel {
  border-color: rgba(20, 16, 31, .10);
  background:
    radial-gradient(60% 55% at 88% 18%, rgba(193, 44, 229, .22), transparent 70%),
    radial-gradient(45% 50% at 6% 96%, rgba(79, 124, 255, .20), transparent 70%),
    radial-gradient(70% 45% at 60% 118%, rgba(193, 44, 229, .24), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F1EAFD);
  box-shadow: 0 30px 80px -50px rgba(20, 16, 31, .4);
}
/* la grilla fina y el grano estaban calculados sobre negro */
:root[data-theme="light"] .hero-panel::before {
  background-image:
    linear-gradient(rgba(20, 16, 31, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 16, 31, .05) 1px, transparent 1px);
}
:root[data-theme="light"] .hero-panel::after { opacity: .22; mix-blend-mode: multiply; }

/* "Tu música": el degradé claro no se lee sobre fondo claro */
:root[data-theme="light"] .hero-title__lead {
  background-image: linear-gradient(180deg, #14101F 0%, #453D5C 100%);
}

/* la tarjeta del lanzamiento sigue siendo oscura: adentro valen los colores
   de noche (si no, su texto quedaría oscuro sobre fondo oscuro) */
:root[data-theme="light"] .hero-card {
  --text:        #F4F2F8;
  --text-2:      #B6B1C6;
  --text-3:      #7F7992;
  --line-strong: rgba(255, 255, 255, .14);
  color: var(--text);
  box-shadow: 0 30px 70px -28px rgba(20, 16, 31, .55), 0 0 0 1px rgba(193, 44, 229, .18);
}

/* órbitas y resplandor */
:root[data-theme="light"] .hero-orbit { border-color: rgba(20, 16, 31, .12); }
:root[data-theme="light"] .hero-orbit--2 { border-color: rgba(193, 44, 229, .3); }
:root[data-theme="light"] .hero-orbit--3 { border-color: rgba(20, 16, 31, .07); }
:root[data-theme="light"] .hero-halo { opacity: .75; }

/* tarjeta de regalías: el dorado sobre claro necesita una versión más profunda */
:root[data-theme="light"] .hero-royalty { box-shadow: 0 20px 40px -20px rgba(20, 16, 31, .45); }
:root[data-theme="light"] .hero-royalty__live { color: var(--brand-ink); }
:root[data-theme="light"] .hero-royalty__up { background: rgba(202, 148, 36, .18); color: #7A5A0F; }
:root[data-theme="light"] .hero-royalty__pop { color: #7A5A0F; text-shadow: 0 1px 6px rgba(255, 255, 255, .9); }

/* barra de métricas */
:root[data-theme="light"] .hero-stats {
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 14px 40px -28px rgba(20, 16, 31, .5);
}

/* chips de plataformas: vidrio claro, con sombra en vez de resplandor */
:root[data-theme="light"] .hero-chip { box-shadow: 0 10px 26px -14px rgba(20, 16, 31, .45); }

/* ---------------------------------------------------------------------
   3. Botón día / noche (existe en los dos temas)
   --------------------------------------------------------------------- */
.theme-btn {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.theme-btn:hover { color: var(--text); border-color: rgba(193, 44, 229, .55); background: rgba(193, 44, 229, .12); }
.theme-btn:focus-visible { outline-offset: 2px; border-radius: 50%; }
.theme-btn svg { width: 1.15rem; height: 1.15rem; }
/* se muestra el ícono del modo al que se va a cambiar */
.theme-btn__moon { display: none; }
:root[data-theme="light"] .theme-btn__sun { display: none; }
:root[data-theme="light"] .theme-btn__moon { display: block; }

/* ---------------------------------------------------------------------
   4. Ajustes de las secciones claras
   (colores que estaban escritos a mano pensando en fondo oscuro)
   --------------------------------------------------------------------- */
:root[data-theme="light"] {
  /* ---- compartidos (base.css) ---- */
}
:root[data-theme="light"] .eyebrow {
  background: rgba(193, 44, 229, .07);
  border-color: rgba(193, 44, 229, .25);
  color: var(--text-2);
}
:root[data-theme="light"] .btn--ghost:hover {
  border-color: rgba(20, 16, 31, .3);
  background: rgba(20, 16, 31, .04);
}
:root[data-theme="light"] .btn--orb { box-shadow: 0 10px 30px -14px rgba(193, 44, 229, .6); }
:root[data-theme="light"] [data-glow]::before {
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, -30%), rgba(193, 44, 229, .10), transparent 60%);
}

/* ---- Sobre nosotros ---- */
/* los brillos de fondo bajan a un tinte apenas perceptible */
:root[data-theme="light"] .about::before {
  background: radial-gradient(circle, rgba(193, 44, 229, .10), transparent 65%);
}
:root[data-theme="light"] .about::after {
  background: radial-gradient(circle, rgba(79, 124, 255, .10), transparent 65%);
}
:root[data-theme="light"] .about-marquee__item--more strong {
  background-image: linear-gradient(90deg, #3B5BDB, var(--brand));
}
:root[data-theme="light"] .about-points__ic {
  background: rgba(193, 44, 229, .10);
  border-color: rgba(193, 44, 229, .3);
  color: var(--brand-ink);
}
:root[data-theme="light"] .about-card {
  box-shadow: 0 14px 34px -24px rgba(20, 16, 31, .5);
}
:root[data-theme="light"] .about-card__ic { box-shadow: 0 10px 26px -14px rgba(193, 44, 229, .6); }
:root[data-theme="light"] .about-cta__card {
  background:
    linear-gradient(160deg, #FFFFFF, #F7F2FE) padding-box,
    linear-gradient(200deg, rgba(20, 16, 31, .14), rgba(193, 44, 229, .7)) border-box;
  box-shadow: 0 18px 44px -22px rgba(193, 44, 229, .7);
}
:root[data-theme="light"] .about-cta__link { color: var(--brand-ink); }
:root[data-theme="light"] .about-cta__link:hover { color: var(--text); }

/* ---- Equipo ---- */
:root[data-theme="light"] .team::before {
  background: radial-gradient(closest-side, rgba(193, 44, 229, .12), transparent);
}
/* los retratos tienen fondo oscuro: el marco oscuro los integra en vez de
   dejarlos como recuadros negros sueltos sobre la página clara */
:root[data-theme="light"] .team-frame { background: #0C0A13; }
:root[data-theme="light"] .team-role { color: var(--brand-ink); }
:root[data-theme="light"] .team-links__pill { background: #FFFFFF; }
:root[data-theme="light"] .team-links__pill a { color: var(--text-2); }
:root[data-theme="light"] .team-foot a { color: var(--brand-ink); }
:root[data-theme="light"] .team-dots button { background: rgba(20, 16, 31, .16); }

/* ---- Preguntas frecuentes ---- */
:root[data-theme="light"] .faq-item {
  background: linear-gradient(180deg, #FFFFFF, #FBF9FE);
  box-shadow: 0 10px 26px -22px rgba(20, 16, 31, .5);
}
:root[data-theme="light"] .faq-item[open] {
  border-color: rgba(193, 44, 229, .45);
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(193, 44, 229, .08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #FBF9FE);
  box-shadow: 0 18px 40px -26px rgba(193, 44, 229, .8);
}
:root[data-theme="light"] .faq-checks svg { border-color: var(--brand-ink); color: var(--brand-ink); }
:root[data-theme="light"] .faq-cta__card {
  background:
    linear-gradient(160deg, #FFFFFF, #F7F2FE) padding-box,
    linear-gradient(200deg, rgba(20, 16, 31, .14), rgba(193, 44, 229, .7)) border-box;
  box-shadow: 0 18px 44px -22px rgba(193, 44, 229, .7);
}
:root[data-theme="light"] .faq-cta__text span { color: var(--brand-ink); }
:root[data-theme="light"] .faq-cta__card:hover .faq-cta__text span { color: var(--text); }

/* ---- Contacto ---- */
:root[data-theme="light"] .contact-panel {
  background:
    radial-gradient(55% 60% at 0% 0%, rgba(193, 44, 229, .12), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(79, 124, 255, .12), transparent 70%),
    #FFFFFF;
}
:root[data-theme="light"] .contact-panel::before {
  background-image:
    linear-gradient(rgba(20, 16, 31, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 16, 31, .05) 1px, transparent 1px);
}
:root[data-theme="light"] .contact-next li::before {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--grad-brand) border-box;
  color: var(--brand-ink);
}
:root[data-theme="light"] .contact-next li + li::after { background: rgba(193, 44, 229, .3); }
:root[data-theme="light"] .contact-card {
  background:
    linear-gradient(165deg, #FFFFFF, #FBF9FE) padding-box,
    linear-gradient(200deg, rgba(20, 16, 31, .14), rgba(193, 44, 229, .6)) border-box;
  box-shadow: 0 24px 60px -34px rgba(20, 16, 31, .5), 0 20px 60px -40px rgba(193, 44, 229, .8);
}
:root[data-theme="light"] .contact-field input {
  background: #FFFFFF;
  border-color: rgba(20, 16, 31, .2);
}
:root[data-theme="light"] .contact-field input:hover { border-color: rgba(20, 16, 31, .35); }
:root[data-theme="light"] .contact-field input:focus {
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(193, 44, 229, .16);
}
:root[data-theme="light"] .contact-field input[aria-invalid="true"] {
  box-shadow: 0 0 0 4px rgba(194, 24, 91, .12);
}
:root[data-theme="light"] .contact-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #FFFFFF inset;
}
:root[data-theme="light"] .contact-alert {
  border-color: rgba(194, 24, 91, .4);
  background: rgba(194, 24, 91, .07);
}
:root[data-theme="light"] .contact-success__check {
  box-shadow: 0 0 0 10px rgba(193, 44, 229, .1), 0 18px 40px -18px rgba(193, 44, 229, .9);
}

/* ---- WhatsApp flotante (el globo sigue el tema de la página) ---- */
:root[data-theme="light"] .wa-bubble {
  box-shadow: 0 18px 40px -20px rgba(20, 16, 31, .5);
}
:root[data-theme="light"] .wa-bubble__close:hover { background: rgba(20, 16, 31, .08); }
:root[data-theme="light"] .wa-bubble__link:hover strong { color: var(--brand-ink); }

/* ---- foco visible: sobre claro, el magenta pleno se ve mejor ---- */
:root[data-theme="light"] :focus-visible { outline-color: var(--brand); }