/* Magnus · portada oscura (9-nov, Leonel: «la web de magnus de este estilo más dark. Y universo con ladrillitos y
 * herramientas»). Va ARRIBA de ver.css: mismo contenido y misma estructura que la portada, con los tokens dados vuelta,
 * las secciones transparentes para que se vea el universo (universo.js) y las tarjetas en vidrio oscuro.
 * Turquesa de marca: relleno con letra negra (el botón principal) y, sobre oscuro, el turquesa claro para texto y bordes. */

:root {
  --papel: #0B1016;              /* tarjetas */
  --niebla: #111821;
  --linea: rgba(255, 255, 255, .09);
  --linea-fuerte: rgba(255, 255, 255, .20);
  --tinta: #EEF3F6;
  --tinta-hover: #FFFFFF;
  --gris: #9AA6B2;
  --marca-hondo: #3FF0E6;        /* sobre oscuro, el turquesa claro se lee */
  --marca-suave: rgba(0, 229, 216, .08);
  --marca-tenue: rgba(0, 229, 216, .10);
  --marca-brillo: rgba(0, 229, 216, .38);
  --velo: rgba(0, 0, 0, .6);
  --velo-fuerte: rgba(0, 0, 0, .82);
  --vidrio: rgba(4, 7, 11, .72);
  --cielo: #03050A;              /* el fondo del universo */
  --tarjeta: rgba(11, 16, 22, .74);
  --sombra: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -18px rgba(0, 0, 0, .8);
  --sombra-ventana: 0 32px 80px -20px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

html { background: var(--cielo); }
body { background: transparent; color: var(--tinta); }
a { color: var(--tinta); }
:focus-visible { outline-color: var(--marca); }

/* El universo: un lienzo fijo detrás de todo (universo.js). Sin JavaScript queda el degradé del cielo. */
.universo { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(0, 229, 216, .10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(84, 70, 200, .10), transparent 70%),
    var(--cielo); }

/* Las secciones con fondo gris quedan transparentes: el universo se ve en toda la página. */
.dif, .rubros-sec, .cuna, .charlas-sec, .planes-sec, .dudas-sec { background: transparent; }
.hero::before { display: none; }

/* Tarjetas: vidrio oscuro con borde fino */
.lado, .rubro, .cliente, .caso, .vuelta li, .curva, .cuidados li, .plan, .dudas, .sin-cargas, .hero-numeros dl, .rubros li, .flecha, .agenda-cerrar, .cab-menu {
  background: var(--tarjeta); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.plan, .lado, .curva { box-shadow: var(--sombra); }
.dudas summary:hover { background: rgba(255, 255, 255, .04); }
.tramos li + li { background: rgba(255, 255, 255, .03); }
.cliente { background: #F4F6F8; }      /* los logos de los negocios vienen pensados para fondo claro */

/* Cabecera */
.cab.con-linea, .cab.abierto { box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .9); }
.cab.abierto .cab-nav { background: #070B10; }

/* Botón principal: turquesa con letra negra y brillo. El secundario, con borde. */
.btn-p { background: var(--marca); color: #04110F; box-shadow: 0 0 0 1px rgba(0, 229, 216, .5), 0 10px 34px -8px rgba(0, 229, 216, .55); }
.btn-p:hover { background: #4DF5EC; }
.btn-s { background: transparent; }
.btn-s:hover { border-color: var(--marca); }
.video-boton:hover, .video-sonido:hover { background: #000; }
/* 11-nov: los botones del video, con letra blanca (con los tokens dados vuelta, --papel es oscuro: no se veían) */
.video-boton, .video-sonido { color: #fff; }
.plan-sello { background: var(--marca); color: #04110F; }
.paso-marca b { color: #04110F; }
.curvas-puntos i.activo { background: var(--marca); }

/* Arriba: el Magnus de brazos cruzados nace del negro (la foto trae fondo negro: se funde con un borde suave) */
.hero { padding-top: var(--e5); }
.hero-magnus { width: min(300px, 70vw); filter: none;
  -webkit-mask-image: radial-gradient(closest-side at 50% 47%, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 47%, #000 72%, transparent 100%); }
.hero-dentro { position: relative; }
.hero-dentro::before { content: ''; position: absolute; z-index: -1; top: 0; left: 50%; width: min(520px, 110vw); aspect-ratio: 1; transform: translate(-50%, -12%);
  border-radius: 50%; background: radial-gradient(circle, rgba(0, 229, 216, .16) 0%, rgba(0, 229, 216, .05) 40%, transparent 68%); pointer-events: none; }
.hero h1 { margin-top: var(--e3); background: linear-gradient(180deg, #FFFFFF 30%, #B9C6CF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1::selection { color: #04110F; }

/* Los chats, en el modo oscuro de WhatsApp */
.chat { background: #0B141A; }
.globo-otro, .chat-dia, .globo-aviso, .globo-aprende { background: #202C33; color: #E9EDEF; box-shadow: none; }
.globo-cliente, .rubro q { background: #005C4B; color: #E9EDEF; box-shadow: none; }
.audio-onda i { background: #8696A0; }
.paso-marca { background: #0B141A; }

/* Magnus en las secciones: brillo turquesa detrás */
.split-magnus, .cierre-magnus { filter: drop-shadow(0 14px 36px rgba(0, 229, 216, .30)); }
.paneles img { border-color: #1A222C; }
.ciclo::before { background: var(--linea-fuerte); }

/* Formularios y diálogos */
.inst-form input { background: #070B10; }
.agenda { background: #0B1016; }
.inst-marco iframe { background: #FFFFFF; }

/* Barra de abajo y pie */
.barra { background: var(--vidrio); }
.pie { background: rgba(3, 5, 10, .8); }

/* 11-nov: lo nuevo de la portada en oscuro. Magnus de arriba más chico, para que el botón entre en el primer pantallazo
   (en el celular quedaba a 935 px); el resplandor, a su medida. El ejemplo del chat, en el modo oscuro de WhatsApp, y
   el proceso comercial y la tabla, en vidrio oscuro como las demás tarjetas. */
.hero-magnus { width: min(170px, 44vw); }
.hero-dentro::before { width: min(380px, 100vw); transform: translate(-50%, -20%); }
@media (min-width: 960px) { .hero-magnus { width: 190px; } }
.tiempo, .limpio { background: var(--tarjeta); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tiempo, .demo-tel { box-shadow: var(--sombra); }
.demo-tel { background: #0B141A; border-color: rgba(255, 255, 255, .12); box-shadow: 0 0 0 1px rgba(0, 229, 216, .10), var(--sombra-ventana); }
.demo-cab { background: #202C33; border-bottom-color: transparent; }
.demo-cab b { color: #E9EDEF; }
.demo-chat time { color: #8696A0; }
.lado-sello-tarde { background: rgba(255, 255, 255, .06); }
.conecta li { background: var(--tarjeta); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.selector-moneda { background: var(--tarjeta); }
.selector-moneda button[aria-pressed="true"] { background: var(--tinta); color: #04110F; }