/* decks-studio: estilos base del motor.
   Cada presentación trae su tema.css con las variables de marca (--c-*, --f-*).
   El escenario mide 1920x1080 y se escala entero a la ventana. */

:root {
  --c-fondo: #07142e;
  --c-texto: #ffffff;
  --c-suave: rgba(255, 255, 255, 0.66);
  --c-acento: #66c9ba;
  --c-acento-2: #3b82f6;
  --c-linea: rgba(255, 255, 255, 0.14);
  --c-tarjeta: rgba(255, 255, 255, 0.06);
  --f-titulo: "Sora", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, sans-serif;
  --escala: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--c-fondo); color: var(--c-texto); font-family: var(--f-texto); -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { display: block; max-width: 100%; }

/* Capa de fondo persistente (partículas, malla) detrás del escenario */
.deck-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deck-fondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Escenario */
.deck { position: fixed; inset: 0; z-index: 1; }
.escenario { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; }
.slide { position: absolute; inset: 0; padding: 110px 140px; display: flex; flex-direction: column; justify-content: center; visibility: hidden; opacity: 0; }
.slide.activa { visibility: visible; opacity: 1; }

/* Tipografía */
.kicker { font-family: var(--f-texto); font-size: 26px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-acento); }
.titulo { font-family: var(--f-titulo); font-size: 112px; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.titulo-xl { font-family: var(--f-titulo); font-size: 150px; font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; }
.titulo-m { font-family: var(--f-titulo); font-size: 78px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.bajada { font-size: 38px; line-height: 1.35; color: var(--c-suave); max-width: 1250px; }
.chico { font-size: 24px; color: var(--c-suave); }
.acento { color: var(--c-acento); }
.degradado, .degradado * { background: linear-gradient(100deg, var(--c-acento), var(--c-acento-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* SplitText parte el texto en hijos: cada uno necesita su propio recorte del degradado. */

/* Maquetación */
.centro { align-items: center; text-align: center; }
.fila { display: flex; gap: 48px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 24px; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.crece { flex: 1; }
.pila > * + * { margin-top: 28px; }

/* Componentes */
.tarjeta { background: var(--c-tarjeta); border: 1px solid var(--c-linea); border-radius: 28px; padding: 36px 40px; backdrop-filter: blur(12px); }
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--c-linea); background: var(--c-tarjeta); font-size: 26px; font-weight: 600; }
.icono svg { width: 100%; height: 100%; }
.icono { display: inline-block; width: 48px; height: 48px; color: var(--c-acento); flex: none; }
.nodo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 190px; height: 190px; border-radius: 40px; background: var(--c-tarjeta); border: 1px solid var(--c-linea); font-size: 24px; font-weight: 600; text-align: center; }
.nodo .icono { width: 64px; height: 64px; }
.cifra { font-family: var(--f-titulo); font-size: 150px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Marco de navegador */
.navegador { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.navegador-barra { height: 52px; background: #eef1f6; display: flex; align-items: center; gap: 10px; padding: 0 20px; }
.navegador-barra i { width: 14px; height: 14px; border-radius: 50%; background: #d4d8e0; }
.navegador-barra span { margin-left: 18px; flex: 1; height: 30px; border-radius: 10px; background: #fff; color: #56607a; font-size: 17px; display: flex; align-items: center; padding: 0 16px; }
.navegador img, .navegador video { width: 100%; }

/* Marco de teléfono */
.telefono { width: 420px; border-radius: 64px; padding: 16px; background: #0b0f19; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.telefono-pantalla { border-radius: 50px; overflow: hidden; background: #fff; aspect-ratio: 9 / 19.5; position: relative; }
.telefono-pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Rayos (líneas animadas entre nodos) */
.rayos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* Interfaz del motor */
.deck-progreso { position: fixed; left: 0; bottom: 0; height: 4px; width: 100%; z-index: 5; background: rgba(255, 255, 255, 0.06); }
.deck-progreso b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-acento), var(--c-acento-2)); transition: width 0.5s ease; }
.deck-contador { position: fixed; right: 24px; bottom: 18px; z-index: 5; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.deck-girar { display: none; }
@media (orientation: portrait) and (max-width: 760px) {
  .deck-girar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 18px; z-index: 6; justify-content: center; padding: 10px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; }
}

/* Vista general (tecla O) */
.deck.general .slide { visibility: visible; opacity: 1; cursor: pointer; outline: 2px solid transparent; transition: outline-color 0.2s; }
.deck.general .slide:hover { outline-color: var(--c-acento); }
.deck.general .slide.activa { outline-color: var(--c-acento); }

/* Exportación (?export): todas las diapositivas en su estado final, una por página */
body.exportar { overflow: visible; height: auto; }
body.exportar .deck, body.exportar .deck-fondo { position: static; }
body.exportar .escenario { position: static; transform: none !important; width: auto; height: auto; }
body.exportar .slide { position: relative; width: 1920px; height: 1080px; visibility: visible; opacity: 1; break-after: page; overflow: hidden; background: var(--c-fondo); }
body.exportar .deck-progreso, body.exportar .deck-contador, body.exportar .deck-girar { display: none; }
@page { size: 1920px 1080px; margin: 0; }

/* Botón de pantalla completa */
.deck-pantalla { position: fixed; left: 18px; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(5, 15, 38, 0.72); color: #fff; font: 600 14px var(--f-texto); cursor: pointer; transition: opacity 0.4s, background 0.2s; backdrop-filter: blur(8px); }
.deck-pantalla:hover { background: rgba(5, 15, 38, 0.95); }
.deck-pantalla svg { width: 18px; height: 18px; }
.deck-pantalla .salir { display: none; }
.en-pantalla-completa .deck-pantalla .entrar { display: none; }
.en-pantalla-completa .deck-pantalla .salir { display: inline; }
.en-pantalla-completa .deck-pantalla span { display: none; }
.mouse-quieto .deck-pantalla { opacity: 0; pointer-events: none; }
body.exportar .deck-pantalla { display: none; }
@media (orientation: portrait) and (max-width: 760px) { .deck-pantalla { bottom: 60px; } }

.instalada .deck-pantalla { display: none; }
/* Aviso de pantalla completa en iPhone */
.deck-aviso { position: fixed; left: 50%; bottom: 20px; z-index: 7; transform: translate(-50%, 20px); width: min(92vw, 460px); display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: rgba(5, 15, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font: 15px/1.4 var(--f-texto); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.deck-aviso.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.deck-aviso button { align-self: flex-end; padding: 6px 16px; border-radius: 999px; border: 0; background: #fff; color: #061431; font-weight: 700; }