/* Trois · página de inicio (se carga después de estilo.css) */
:root {
  --noche: #10163a;
  --noche-2: #19204d;
  --noche-linea: #2b3366;
  --noche-texto: #e9ecfb;
  --noche-suave: #a3abd6;
  --video: #ffd23f;
  --apps: #c6f432;
  --lab: #7fd8ff;
}

/* Bandas oscuras */
.oscura { background: var(--noche); color: var(--noche-texto); }
.oscura .titulo { color: #fff; }
.oscura .entrada { color: var(--noche-suave); }
.oscura .boton.lleno { background: #fff; color: var(--noche); border-color: #fff; }
.oscura .boton.lleno:hover { background: var(--apps); border-color: var(--apps); color: var(--noche); }
.oscura .boton.borde { color: #fff; border-color: rgba(255,255,255,.55); }
.oscura .boton.borde:hover { background: #fff; color: var(--noche); border-color: #fff; }

/* Cabecera sobre la portada oscura */
body.inicio .cabecera { background: color-mix(in srgb, var(--noche) 88%, transparent); }
body.inicio .marca, body.inicio .nav .enlace { color: #fff; }
body.inicio .marca i { color: var(--apps); }
body.inicio .nav .boton.lleno { background: #fff; color: var(--noche); border-color: #fff; }
body.inicio .nav .boton.lleno:hover { background: var(--apps); border-color: var(--apps); }

/* ---------- Portada ---------- */
.hero { padding: 28px 0 48px; }
.hero .wrap { gap: 36px; justify-content: space-between; }
.hero-cab { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: end; }
.hero h1 { margin: 0; font: 800 clamp(2.9rem, 6vw, 5.9rem)/0.95 var(--display); letter-spacing: -0.05em; font-variation-settings: "wdth" 86; color: #fff; }
.hero h1 .c1 { color: var(--video); } .hero h1 .c2 { color: var(--apps); } .hero h1 .c3 { color: var(--lab); }
.hero-lado p { margin: 0; color: var(--noche-suave); font-size: 1.15rem; max-width: 34ch; }
.hero-lado .acciones { margin-top: 22px; }
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pieza { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: clamp(280px, calc(100svh - 72px - 380px), 470px); border-radius: 22px; overflow: hidden; background: var(--noche-2); border: 1px solid var(--noche-linea); color: #fff; text-decoration: none; transition: transform 200ms ease, border-color 200ms ease; }
.pieza:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.pieza-pie { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 40px 20px 18px; background: linear-gradient(to top, rgba(16,22,58,.95) 30%, rgba(16,22,58,0)); }
.pieza-pie b { font: 700 1.5rem/1 var(--display); letter-spacing: -0.03em; }
.pieza-pie span { color: var(--noche-suave); font-size: 0.92rem; text-align: right; }
.pieza-pie b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 10px; vertical-align: 0.15em; background: var(--c); }

/* Historias: videos que pasan solos */
.historias { position: absolute; inset: 0; }
.historias img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; opacity: 0; transition: opacity 600ms ease; }
.historias img.ver { opacity: 1; }
.barras { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; gap: 5px; }
.barras i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.barras i b { display: block; height: 100%; width: 0; background: #fff; }
.barras i.hecha b { width: 100%; }
.barras i.ahora b { animation: llena var(--dur, 3000ms) linear forwards; }
.historias.quieta .barras i.ahora b { animation-play-state: paused; }
@keyframes llena { to { width: 100%; } }

/* La app trabajando (portada) */
.mini { position: absolute; inset: 18px 18px auto 18px; background: #232a5c; border: 1px solid #343d78; border-radius: 14px; padding: 12px; }
.mini-fila { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: #2b336b; }
.mini-fila + .mini-fila { margin-top: 8px; }
.mini-fila img { width: 38px; height: 62px; object-fit: cover; border-radius: 6px; }
.mini-fila b { display: block; font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.mini-fila small { display: block; color: var(--noche-suave); font-size: 0.74rem; margin-top: 2px; }
.mini .barra { height: 6px; margin: 8px 0 0; background: #3a4384; }
.mini .barra i { background: var(--apps); }
.mini .barra.vive i { animation: avanza 3.2s ease-in-out infinite; }
@keyframes avanza { 0% { width: 12%; } 80% { width: 96%; } 100% { width: 100%; } }
.mini .ok { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: var(--apps); color: var(--noche); font-size: 0.7rem; font-weight: 700; }

/* Lienzos del laboratorio */
.pieza canvas, .lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Videos ---------- */
.videos .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.canal-lista { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--tinta); }
.canal-lista li { border-bottom: 1px solid var(--linea); }
.canal-lista button { width: 100%; display: grid; grid-template-columns: 52px 1fr 40px; gap: 16px; align-items: center; padding: 12px 8px; background: none; border: 0; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; border-radius: 12px; transition: background-color 160ms ease; }
.canal-lista button:hover { background: rgba(25,27,44,.05); }
.canal-lista img { width: 52px; height: 52px; border-radius: 13px; }
.canal-lista b { display: block; font: 700 1.25rem/1.15 var(--display); letter-spacing: -0.02em; }
.canal-lista span { display: block; color: var(--pizarra); font-size: 0.95rem; }
.canal-lista .flecha { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linea); display: grid; place-items: center; transition: background-color 160ms, border-color 160ms, color 160ms; }
.canal-lista .flecha svg { width: 14px; height: 14px; }
.canal-lista button[aria-pressed="true"] { background: #fff; }
.canal-lista button[aria-pressed="true"] .flecha { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.videos .acciones { margin-top: 26px; }
.telefono-zona { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.telefono { position: relative; width: min(100%, 330px, calc((100svh - 72px - 220px) * 9 / 18.5)); aspect-ratio: 9 / 18.5; border-radius: 46px; background: var(--noche); padding: 11px; box-shadow: 0 40px 80px -40px rgba(16,22,58,.6), inset 0 0 0 2px #2a3166; }
.pantalla .historias img { object-position: center; }
.pantalla { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #000; }
.telefono-ctrl { display: flex; gap: 12px; align-items: center; color: var(--pizarra); font-size: 0.92rem; }
.pausa { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linea); background: transparent; color: var(--tinta); cursor: pointer; display: grid; place-items: center; transition: transform 160ms ease, background-color 160ms; }
.pausa:hover { transform: translateY(-2px); background: #fff; }
.pausa:active { transform: scale(.96); }
.pausa svg { width: 14px; height: 14px; }

/* ---------- Apps ---------- */
.apps .wrap { gap: 36px; }
.apps-cab { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: end; }
.apps-cab .entrada { margin: 0; }
.apps-cuerpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.oscura .ventana { background: var(--noche-2); border-color: var(--noche-linea); box-shadow: none; }
.oscura .ventana-barra { border-color: var(--noche-linea); }
.ventana .pestanas { margin: 14px 0 16px; }
.ventana .pestanas button { padding: 0 14px; min-height: 36px; border-radius: 999px; font: 500 0.85rem/1 var(--texto); color: #c3c9ea; background: #262e63; border: 0; cursor: pointer; transition: background-color 160ms, color 160ms, transform 160ms; }
.ventana .pestanas button:hover { transform: translateY(-1px); color: #fff; }
.ventana .pestanas button[aria-selected="true"] { background: #fff; color: var(--noche); font-weight: 600; }
.vista[hidden] { display: none; }
.oscura .trabajo { background: #232a5c; }
.oscura .trabajo .barra { background: #3a4384; }
.oscura .trabajo .barra i { background: var(--apps); }
.guion-linea { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #232a5c; }
.guion-linea + .guion-linea { margin-top: 8px; }
.guion-linea b { color: #fff; font-size: 0.92rem; font-weight: 600; }
.guion-linea small { display: block; color: var(--noche-suave); font-size: 0.78rem; margin-top: 2px; }
.etiqueta { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.etiqueta.alta { background: var(--apps); color: var(--noche); }
.etiqueta.media { background: var(--video); color: var(--noche); }
.etiqueta.hora { background: #2f3874; color: #dfe3fb; font-weight: 600; }
.flujo { position: relative; border-radius: 18px; background: var(--noche-2); border: 1px solid var(--noche-linea); padding: 18px; display: flex; align-items: center; }
.flujo svg { width: 100%; height: auto; display: block; }
.flujo .nodo rect { fill: #232a5c; stroke: #3a4384; }
.flujo .nodo.central rect { fill: var(--apps); stroke: var(--apps); }
.flujo .nodo text { fill: #e9ecfb; font: 600 13px "Instrument Sans", Arial, sans-serif; }
.flujo .nodo.central text { fill: var(--noche); font-weight: 700; font-size: 14px; }
.flujo .via { stroke: #3a4384; stroke-width: 2; fill: none; }
.flujo .pulso { fill: var(--apps); }

/* ---------- Laboratorio ---------- */
.lab .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.lienzo { position: relative; aspect-ratio: 1 / 1; width: min(100%, calc(100svh - 72px - 144px)); border-radius: 28px; overflow: hidden; background: var(--noche); }
.ideas { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ideas li { display: grid; grid-template-columns: 12px 1fr; gap: 16px; padding: 16px 20px; background: var(--superficie); border-radius: 16px; border: 1px solid var(--linea); }
.ideas li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; background: var(--c, var(--cobalto)); }
.ideas b { display: block; font: 700 1.15rem/1.25 var(--display); }
.ideas span { color: var(--pizarra); font-size: 0.98rem; }
.lab .acciones { margin-top: 26px; }

/* ---------- Contacto ---------- */
.contacto2 .wrap { justify-content: center; }
.contacto2 .correo { color: #fff; background-image: linear-gradient(var(--apps), var(--apps)); }
.contacto2 .correo:hover, .contacto2 .correo:focus-visible { color: var(--apps); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.redes a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; border-radius: 999px; border: 1px solid var(--noche-linea); color: #fff; text-decoration: none; transition: transform 160ms, border-color 160ms; }
.redes a:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.5); }
.redes img { width: 36px; height: 36px; border-radius: 50%; }
body.inicio .pie { border-top-color: var(--noche-linea); background: var(--noche); }
body.inicio .pie .wrap, body.inicio .pie a { color: var(--noche-suave); }

@media (max-width: 1100px) {
  .hero-cab, .apps-cab { grid-template-columns: 1fr; gap: 20px; }
  .apps-cuerpo { grid-template-columns: 1fr; }
  .videos .wrap, .lab .wrap { grid-template-columns: 1fr; gap: 44px; }
  .lienzo { width: min(100%, 560px); }
  .telefono { width: min(100%, 320px); }
}
@media (max-width: 760px) {
  .mosaico { grid-template-columns: 1fr 1fr; }
  .pieza { height: 340px; }
  .pieza:nth-child(3) { grid-column: 1 / -1; height: 220px; }
}
@media (max-width: 480px) {
  .mosaico { grid-template-columns: 1fr; }
  .pieza, .pieza:nth-child(3) { height: 320px; grid-column: auto; }
  .telefono { width: min(100%, 290px); }
  .canal-lista button { grid-template-columns: 44px 1fr 40px; gap: 12px; }
  .canal-lista img { width: 44px; height: 44px; }
  .hero-lado .acciones .boton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-enter] .hero-cab > *, [data-enter] .pieza { animation: sube 800ms cubic-bezier(.2,.7,.1,1) both; }
  [data-enter] .hero-lado { animation-delay: 100ms; }
  [data-enter] .pieza:nth-child(1) { animation-delay: 180ms; }
  [data-enter] .pieza:nth-child(2) { animation-delay: 260ms; }
  [data-enter] .pieza:nth-child(3) { animation-delay: 340ms; }
}
@media (prefers-reduced-motion: reduce) {
  .mini .barra.vive i { animation: none; width: 70%; }
  .barras i.ahora b { animation: none; width: 100%; }
}
.pausa [hidden] { display: none; }

/* Calendario de la semana (sección Apps) */
.mini .ok.prox { background: #2f3874; color: #dfe3fb; }
.calendario { border-radius: 18px; background: var(--noche-2); border: 1px solid var(--noche-linea); padding: 14px; overflow-x: auto; }
.cal-cab, .cal-fila { display: grid; grid-template-columns: 170px repeat(7, minmax(84px, 1fr)); gap: 8px; min-width: 820px; }
.cal-cab { padding: 4px 0 10px; }
.cal-cab span { color: var(--noche-suave); font-size: 0.85rem; text-align: center; }
.cal-cab span:first-child { text-align: left; color: #fff; font-weight: 600; }
.cal-cab span.hoy { color: var(--apps); font-weight: 700; }
.cal-fila + .cal-fila { margin-top: 8px; }
.cal-canal { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 0.92rem; }
.cal-canal img { width: 32px; height: 32px; border-radius: 9px; }
.cal-celda { position: relative; height: clamp(64px, calc((100svh - 72px - 560px) / 4), 104px); border-radius: 10px; overflow: hidden; background: #232a5c; }
.cal-celda img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity 200ms, transform 300ms; }
.cal-celda:hover img { opacity: 1; transform: scale(1.03); }
.cal-celda span { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(16,22,58,.85); color: #fff; font-size: 0.72rem; font-weight: 600; }
.cal-celda.hoy { outline: 2px solid var(--apps); outline-offset: -2px; }
.cal-celda.hoy img { opacity: 1; }
.apps-pie { margin: 0; color: var(--noche-suave); font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.apps-pie a { color: #fff; display: inline-flex; min-height: 44px; align-items: center; }

/* Cómo somos */
.somos .wrap { justify-content: center; gap: 56px; }
.somos-frase { margin: 0; font: 800 clamp(2.4rem, 5.6vw, 5.4rem)/1.02 var(--display); letter-spacing: -0.045em; max-width: 19ch; }
.somos-frase span { color: #3b4480; transition: color 500ms ease; }
.somos-frase span.encendida { color: #fff; }
.somos-frase span.marca-c.encendida { color: var(--apps); }
.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.valores > div { padding: 26px; border-radius: 20px; background: var(--noche-2); border: 1px solid var(--noche-linea); transition: transform 200ms ease, border-color 200ms ease; }
.valores > div:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.valores svg { width: 40px; height: 40px; color: var(--c); }
.valores h3 { margin: 18px 0 6px; font: 700 1.4rem/1.15 var(--display); letter-spacing: -0.02em; color: #fff; }
.valores p { margin: 0; color: var(--noche-suave); }
@media (max-width: 900px) { .valores { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .somos-frase span { color: #fff; } .somos-frase span.marca-c { color: var(--apps); } }