/* ════════════════════════════════════════════════════════════════════
   home-noche.css — el INICIO con el estilo "Noche" (rediseño Apple,
   etapa 1, noviembre 2026). Render aprobado:
   docs/redisenio-apple/etapa1-inicio.png
   Todo va scopeado en body.to-noche: sacar la clase del <body> de
   index.php ($HOME_NOCHE = false) devuelve el inicio de siempre.
   Solo cambia la PIEL: ningún id, ningún listener ni ningún flujo.
   Reglas: sin backdrop-filter en elementos fijos (Android repinta en
   cada scroll) y sin animaciones nuevas.
   ════════════════════════════════════════════════════════════════════ */

body.to-noche { background: var(--n-bg); font-family: var(--to-font); -webkit-font-smoothing: antialiased; }
body.to-noche #main { background: var(--n-bg); }

/* ── Header ─────────────────────────────────────────────────────────── */
body.to-noche .header { background-color: rgba(0, 0, 0, .94) !important; box-shadow: none !important;
                        border-bottom: 1px solid rgba(255, 255, 255, .07); }

/* ── Hero ───────────────────────────────────────────────────────────── */
body.to-noche .hero-slideshow { background: var(--n-bg); min-height: 0; padding: 56px 0 48px; }
body.to-noche .hero-slideshow .hero-bg video,
body.to-noche .hero-slideshow .hero-bg { filter: grayscale(1); opacity: .32; }
body.to-noche .hero-slideshow .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, #000 100%);
}
body.to-noche .hero-slideshow h1 {
  font-family: var(--to-font);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.04em;
  text-shadow: none;
  color: var(--n-txt);
}
body.to-noche .hero-slideshow .text-highlight {
  background: var(--to-amarillo-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* El cursor de la máquina de escribir sigue amarillo (no hereda el clip). */
body.to-noche .hero-slideshow h1.is-typing .hero-type-live::after { background: var(--to-amarillo); }

/* Sin "vidrio": el buscador va suelto sobre el negro (y sin backdrop-filter). */
body.to-noche .hero-search-card {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.to-noche .hero-search-form {
  background: var(--n-card); border: 1px solid var(--n-borde); border-radius: 999px;
  padding: 6px 6px 6px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
body.to-noche .hero-search-form .hero-search-input { color: var(--n-txt); font-size: 17px; }
body.to-noche .hero-search-form .hero-search-input::placeholder { color: var(--n-ter); }
body.to-noche .hero-search-form .hero-mic-btn { color: var(--n-sec); border-radius: 50%; }
body.to-noche .hero-search-form .hero-mic-btn:hover { background: rgba(255,255,255,.08); color: var(--n-txt); }
body.to-noche .hero-search-form .hero-submit-btn {
  background: var(--to-amarillo); color: #000; border-radius: 999px; font-weight: 700;
}
body.to-noche .hero-search-form .hero-submit-btn:hover { background: #ffdb4d; transform: none; }

/* Desplegable del buscador: oscuro, como Spotlight. */
body.to-noche .hero-suggestions {
  background: var(--n-card); border: 1px solid var(--n-borde); box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
body.to-noche .hero-sugg-heading { color: var(--n-ter); }
body.to-noche .hero-sugg-item { color: var(--n-txt); }
body.to-noche .hero-sugg-item.is-active,
body.to-noche .hero-sugg-item:hover { background: rgba(255,255,255,.07); }
body.to-noche .hero-sugg-title { color: var(--n-txt); }
body.to-noche .hero-sugg-sub,
body.to-noche .hero-sugg-arrow { color: var(--n-ter); }
body.to-noche .hero-sugg-icon { background: rgba(255,209,26,.12); color: var(--to-amarillo); }
body.to-noche .hero-suggestions mark { background: rgba(255,209,26,.22); color: var(--n-txt); }

body.to-noche .hero-search-feedback { color: var(--n-sec); }
body.to-noche .hero-gratis { color: var(--n-sec); }

body.to-noche .hero-pop-label { color: var(--n-ter); }
@media (hover: hover) { body.to-noche .hero-pop-item:hover { background: var(--n-card); } }
body.to-noche .hero-pop-todos { color: var(--to-amarillo); }

body.to-noche .hero-retomar { background: var(--n-card); border: 1px solid var(--n-borde); color: var(--n-txt); }

/* ── Cartel "Instalá la app" ────────────────────────────────────────── */
body.to-noche .pwa-install-card {
  background: linear-gradient(180deg, var(--n-card), var(--n-card-2));
  border: 1px solid var(--n-borde); border-radius: var(--to-r-lg); box-shadow: none;
}
body.to-noche .pwa-install-text h3 { font-family: var(--to-font); font-weight: 700; letter-spacing: -.02em; }
body.to-noche .pwa-install-btn { background: var(--to-amarillo); box-shadow: none; }

/* ── Secciones genéricas ────────────────────────────────────────────── */
body.to-noche .home-section { background: var(--n-bg); }
body.to-noche .section-divider { display: none; }
body.to-noche .section-header h2,
body.to-noche .alianzas-section .section-header h2 {
  font-family: var(--to-font); font-weight: 700; letter-spacing: -.035em; color: var(--n-txt);
  font-size: clamp(2rem, 8.5vw, 3rem); line-height: 1.06;
}
body.to-noche .section-header h2 .text-highlight { color: var(--to-amarillo); }
body.to-noche .section-header p { color: var(--n-sec); }

/* ── Cómo funciona: conversación tipo Mensajes ──────────────────────── */
body.to-noche .como-funciona { background: var(--n-bg); padding: 64px 0 68px; }
body.to-noche .como-funciona .cf-kicker {
  border: 0; padding: 0; color: var(--n-ter); font-weight: 600; letter-spacing: .12em;
}
body.to-noche .como-funciona h2 {
  font-family: var(--to-font); font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
  font-size: clamp(2rem, 8.5vw, 3rem);
}
body.to-noche .como-funciona .cf-head p { color: var(--n-sec); }
body.to-noche .cf-hilo::before,
body.to-noche .cf-paso:last-child::before { display: none; }
body.to-noche .cf-num { display: none; }
body.to-noche .cf-paso { padding-left: 0; display: flex; flex-direction: column; }
body.to-noche .cf-burbuja { border-radius: 22px; box-shadow: none; max-width: 86%; }
body.to-noche .cf-burbuja::after { display: none; }
body.to-noche .cf-paso--vos .cf-burbuja { align-self: flex-end; background: var(--to-amarillo); color: #000; border: 0; border-bottom-right-radius: 8px; }
body.to-noche .cf-paso--vos .cf-hora { color: rgba(0,0,0,.55); }
body.to-noche .cf-paso--to .cf-burbuja { align-self: flex-start; background: var(--n-card); border: 0; border-bottom-left-radius: 8px; }
body.to-noche .cf-paso--wa .cf-burbuja { align-self: flex-end; background: #005c4b; border: 0; border-bottom-right-radius: 8px; }
body.to-noche .cf-tags span { border-color: var(--n-borde); color: var(--n-sec); background: transparent; }
body.to-noche .cf-paso--vos .cf-nota,
body.to-noche .cf-paso--wa .cf-nota { text-align: right; align-self: flex-end; max-width: 86%; }
body.to-noche .cf-paso--to .cf-nota { max-width: 86%; }
body.to-noche .cf-nota { color: var(--n-sec); }
body.to-noche .cf-nota b { color: var(--n-txt); }
body.to-noche .cf-cierre { color: var(--n-sec); }
body.to-noche .cf-cierre b { color: var(--n-txt); }

/* ── Prensa ─────────────────────────────────────────────────────────── */
body.to-noche .press-section { background: var(--n-bg); }
body.to-noche .press-label { color: var(--n-ter); }
body.to-noche .press-card {
  background: var(--n-card); border: 1px solid var(--n-borde); border-left: 1px solid var(--n-borde);
  box-shadow: none; border-radius: var(--to-r-lg); color: var(--n-txt);
}
body.to-noche .press-card:hover { transform: none; box-shadow: none; }
body.to-noche .press-source { color: var(--n-ter); }
body.to-noche .press-quote { color: var(--n-txt); }
body.to-noche .press-date { color: var(--n-ter); }
body.to-noche .press-badge { background: rgba(255,209,26,.1); border-color: rgba(255,209,26,.3); color: var(--to-amarillo); }
body.to-noche .press-card .btn,
body.to-noche .press-card a.btn { color: var(--n-txt); border-color: var(--n-borde); background: transparent; }
body.to-noche .press-section img.rounded-4 { border-radius: var(--to-r-lg) !important; box-shadow: none !important; }
body.to-noche #pressCarousel .carousel-indicators [data-bs-target] { background-color: var(--n-txt) !important; }

/* ── Empresas aliadas: los logos van en baldosas claras ─────────────── */
body.to-noche .alianzas-section { background: var(--n-bg); }
body.to-noche .alianza-item {
  background: var(--c-bg); border-radius: var(--to-r-lg); padding: 22px 16px 14px;
}
body.to-noche .alianza-nombre { color: var(--c-sec); }

/* ── Footer: gris claro, como el de apple.com ───────────────────────── */
body.to-noche .footer {
  background-color: var(--c-bg) !important; color: var(--c-sec) !important;
  border-top: 0 !important; margin-top: 0 !important;
}
body.to-noche .footer h4 { color: var(--c-txt); letter-spacing: .02em; }
body.to-noche .footer a { color: var(--c-sec); }
body.to-noche .footer a:hover { color: var(--c-txt); }

/* Ajustes tras la primera pasada en el celular */
body.to-noche { background: var(--c-bg); }            /* lo que asoma debajo del footer */
body.to-noche .section-header h2:after { display: none; }
body.to-noche .alianzas-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin-left: auto; margin-right: auto; }
body.to-noche .alianza-item { width: auto; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
body.to-noche .alianza-item img { max-width: 100%; height: auto; max-height: 56px; width: auto; }
@media (min-width: 768px) {
  body.to-noche .alianzas-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}