/* Portada de kinetae.com: texto y PC/Mac a la izquierda, carrusel grande a la derecha.
   Mismos colores y marca que la app (ui/utils/estilo.py) y que la página /descargar. */
:root {
  --hondo:#030407; --fondo:#090c12; --barra:#0d1320;
  --tarjeta:#1a2235; --tarjeta-hover:#1f2a3f;
  --linea:#263248; --linea-fuerte:#2c3850;
  --texto:#e8ecf2; --suave:#c8d0dc; --apagado:#8f9ab0;
  --azul:#50A0FF; --lila:#B98CFF; --rojo:#DC143C;
  --relleno:#3d8ef5; --relleno-fin:#9a72f0;
  --cristal:rgba(9,12,18,.72);
  --sombra:rgba(0,0,0,.6);
  --filo:rgba(255,255,255,.1);
  --alto-barra:61px;
  color-scheme:dark;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Roboto,sans-serif;
  background:var(--fondo); color:var(--texto); line-height:1.55; font-size:16px; }
a { color:var(--azul); }
h1 { line-height:1.14; font-weight:600; text-wrap:balance; }
:focus-visible { outline:2px solid var(--azul); outline-offset:2px; border-radius:6px; }
[hidden] { display:none !important; }

.contenedor { max-width:1560px; margin:0 auto;
  padding-left:max(24px, env(safe-area-inset-left, 0px));
  padding-right:max(24px, env(safe-area-inset-right, 0px)); }

/* Marca: la K siempre roja */
.marca { font-size:1.35rem; font-weight:600; text-decoration:none; color:var(--azul); letter-spacing:.01em; }
.marca .k { color:var(--rojo); }

/* Barra de arriba */
.barra { position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:rgba(13,19,32,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea); }
.barra .contenedor { display:flex; align-items:center; gap:24px; height:60px; }

/* Portada */
.portada { position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:calc(100vh - var(--alto-barra));
  background:
    radial-gradient(760px 460px at 8% -8%, rgba(61,142,245,.17), transparent 62%),
    radial-gradient(760px 520px at 96% 8%, rgba(154,114,240,.15), transparent 62%), var(--hondo); }
.portada .contenedor { width:100%; display:grid; padding-block:36px;
  grid-template-columns:minmax(320px,400px) minmax(0,1fr);
  grid-template-areas:"presenta galeria" "eleccion galeria";
  grid-template-rows:auto auto; column-gap:clamp(36px,4vw,64px); row-gap:22px; align-content:center; }
.presenta { grid-area:presenta; align-self:end; min-width:0; }
.eleccion { grid-area:eleccion; align-self:start; min-width:0; }
.galeria { grid-area:galeria; align-self:center; justify-self:center; width:100%; min-width:0;
  max-width:max(720px, calc((100vh - 262px) * 5 / 3)); }

.pildora { display:inline-flex; align-items:center; padding:3px 12px; border-radius:999px;
  font-size:.82rem; font-weight:500; background:rgba(185,140,255,.14);
  border:1px solid rgba(185,140,255,.32); color:var(--lila); }
h1 { font-size:clamp(2.1rem,3.5vw,3.2rem); letter-spacing:-.01em; margin:16px 0 14px; }
h1 em { font-style:normal; background:linear-gradient(90deg,var(--azul),var(--lila));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.entrada { font-size:1.1rem; color:var(--suave); max-width:32em; }

/* Elegir ordenador */
.pregunta { font-size:1.06rem; font-weight:600; margin-bottom:10px; }
.selector { display:grid; gap:10px; }
.opcion { display:flex; align-items:center; gap:14px; padding:11px 16px; text-decoration:none;
  color:var(--texto); background:var(--tarjeta); border:1px solid var(--linea-fuerte); border-radius:14px;
  transition:background .15s, border-color .15s; }
.opcion:hover { background:var(--tarjeta-hover); border-color:rgba(154,114,240,.7); }
.opcion b { display:block; font-size:1.02rem; font-weight:600; line-height:1.3; }
.opcion small { color:var(--apagado); font-size:.85rem; }
.icono { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:rgba(80,160,255,.14); color:var(--azul); }
.icono svg { width:21px; height:21px; }
.nota { font-size:.88rem; color:var(--apagado); margin-top:12px; }
.nota + .nota { margin-top:4px; }

/* Carrusel: el color del resplandor y de la línea va con cada foto */
.galeria { --brillo:#3d8ef5; }
.galeria[data-color="rojo"] { --brillo:#e8324f; }
.galeria[data-color="verde"] { --brillo:#35c46f; }
.galeria[data-color="lila"] { --brillo:#9a72f0; }

.escenario { position:relative; isolation:isolate; }
.resplandor { position:absolute; inset:7% 5% -5%; z-index:-1; border-radius:40px; opacity:.34;
  background-color:var(--brillo); filter:blur(64px); transition:background-color .9s ease; }
.marco { position:relative; aspect-ratio:5/3; max-width:100%; overflow:hidden; border-radius:14px;
  background:var(--fondo); box-shadow:0 0 0 1px var(--filo), 0 30px 70px var(--sombra); }

/* Sin JavaScript y en móvil, las fotos van en una fila que se desliza */
.diapositivas { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.diapositivas::-webkit-scrollbar { display:none; }
.diapositiva { flex:0 0 100%; min-width:0; scroll-snap-align:center; }
.ampliar { display:block; width:100%; height:100%; cursor:zoom-in; }
.ampliar:focus-visible { outline-offset:-4px; }
.ampliar img { display:block; width:100%; height:100%; object-fit:cover; }

.sello, .lupa { position:absolute; bottom:12px; display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px; font-size:.76rem; color:var(--suave); pointer-events:none;
  background:var(--cristal); box-shadow:0 0 0 1px var(--filo);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sello { left:12px; }
.lupa { right:12px; opacity:0; transition:opacity .2s; }
.lupa svg { width:13px; height:13px; }
.marco:hover .lupa, .marco:focus-within .lupa { opacity:1; }
@media (hover:none) { .lupa { opacity:1; } }

/* Mandos: los cuatro nombres siempre a la vista, y la línea que marca el tiempo de cada foto */
.mandos { position:relative; display:flex; gap:14px; margin-top:18px; }
.pestanas { flex:1; min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pestana { display:block; min-width:0; text-decoration:none; color:var(--suave); padding-bottom:2px; }
.pestana b { display:block; font-size:.96rem; font-weight:600; line-height:1.3; margin-top:9px; transition:color .2s; }
.pestana small { display:block; font-size:.82rem; line-height:1.35; color:var(--apagado); margin-top:2px; }
.pestana:hover b { color:var(--texto); }
.pestana[aria-selected="true"] b { color:var(--texto); }
.linea { display:block; height:2px; border-radius:2px; overflow:hidden; background:var(--linea-fuerte); }
.linea i { display:block; height:100%; background:var(--brillo); transform:scaleX(0); transform-origin:left;
  transition:background-color .9s ease; }
.pestana[aria-selected="true"] .linea i { transform:scaleX(1); }

.pausa { display:none; flex:none; width:32px; height:32px; margin-top:6px; border-radius:50%;
  place-items:center; order:2; cursor:pointer; color:var(--suave);
  background:var(--tarjeta); border:1px solid var(--linea-fuerte); transition:background .15s, color .15s; }
.pausa:hover { background:var(--tarjeta-hover); color:var(--texto); }
.pausa svg { width:15px; height:15px; }
.icono-seguir { display:none; }
.detenida .icono-pausa { display:none; }
.detenida .icono-seguir { display:block; }

/* Con JavaScript, en ordenador: las fotos se funden una sobre otra */
.js .pausa { display:grid; }
.js .galeria:not(.detenida) .pestana[aria-selected="true"] .linea i {
  animation:llenar var(--segundos) linear forwards; }
.js .galeria.en-pausa .linea i { animation-play-state:paused !important; }
@keyframes llenar { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (min-width:641px) {
  .js .diapositivas { display:block; overflow:hidden; }
  .js .diapositiva { position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity .7s ease, visibility 0s linear .7s; }
  .js .diapositiva.activa { opacity:1; visibility:visible; transition:opacity .7s ease; }
  .js .diapositiva.activa img { animation:asentar 1.4s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes asentar { from { transform:scale(1.018); } to { transform:scale(1); } }

/* Pie */
footer { padding:20px 0; border-top:1px solid var(--linea); background:var(--hondo);
  color:var(--apagado); font-size:.9rem; }
footer .contenedor { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
footer .marca { font-size:1.1rem; }
footer .derecha { margin-left:auto; color:var(--suave); text-decoration:none; }
footer .derecha:hover { color:var(--texto); }
.legales a { color:var(--suave); text-decoration:none; }
.legales a:hover { color:var(--texto); text-decoration:underline; }

/* Páginas legales: texto corrido, a unos 70 caracteres por línea */
.legal { min-height:calc(100vh - var(--alto-barra) - 70px); padding-block:44px 64px;
  background:radial-gradient(760px 460px at 8% -8%, rgba(61,142,245,.12), transparent 62%), var(--hondo); }
.legal article { max-width:66ch; margin:0 auto; color:var(--suave); line-height:1.65; overflow-wrap:break-word; }
.legal h1 { font-size:clamp(2rem,4.4vw,2.6rem); margin:0 0 24px; color:var(--texto); }
.legal h2 { font-size:1.18rem; font-weight:600; line-height:1.3; margin:34px 0 8px; color:var(--texto); }
.legal p { margin-bottom:12px; }
.legal em { color:var(--apagado); }

/* Foto ampliada */
.visor { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none;
  margin:0; padding:24px 72px; border:0; background:transparent; color:var(--texto); }
.visor[open] { display:grid; place-items:center; }
.visor::backdrop { background:rgba(3,4,7,.93); }
.visor img { display:block; max-width:100%; max-height:calc(100vh - 48px); border-radius:10px;
  box-shadow:0 0 0 1px var(--filo); }
.visor-boton { position:absolute; width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--linea-fuerte); background:var(--tarjeta); color:var(--texto); }
.visor-boton:hover { background:var(--tarjeta-hover); }
.visor-boton svg { width:20px; height:20px; }
.visor-boton.cerrar { top:16px; right:14px; }
.visor-boton.atras { left:14px; top:calc(50% - 22px); }
.visor-boton.alante { right:14px; top:calc(50% - 22px); }

/* Tableta y móvil: una sola columna, con la foto justo después del título */
@media (max-width:1023px) {
  .portada { min-height:0; }
  .portada .contenedor { grid-template-columns:minmax(0,1fr);
    grid-template-areas:"presenta" "galeria" "eleccion"; row-gap:30px; padding-block:34px 44px; }
  .galeria { max-width:none; }
  .selector { grid-template-columns:1fr 1fr; }
  h1 { font-size:clamp(2.1rem,6.4vw,3rem); }
}

@media (max-width:640px) {
  .marco { aspect-ratio:11/10; }
  .selector { grid-template-columns:minmax(0,1fr); }
  .lupa, .sello { bottom:9px; }
  .sello { left:9px; }
  .lupa { right:9px; }
  /* Los cuatro nombres caben; la frase de la foto activa va debajo, junto a la pausa */
  .mandos { display:block; padding-bottom:36px; margin-top:14px; }
  .pestanas { gap:8px; }
  .pestana b { font-size:.8rem; margin-top:7px; }
  .pestana small { display:none; }
  .pestana[aria-selected="true"] small { display:block; position:absolute; left:0; right:44px; bottom:6px;
    font-size:.88rem; }
  .pausa { position:absolute; right:0; bottom:0; margin:0; }
  .visor { padding:62px 8px 70px; }
  .visor img { max-height:calc(100vh - 140px); }
  .visor-boton.atras, .visor-boton.alante { top:auto; bottom:14px; }
  .visor-boton.atras { left:calc(50% - 54px); }
  .visor-boton.alante { right:calc(50% - 54px); }
}

@media (prefers-reduced-motion:reduce) {
  .js .diapositiva, .js .diapositiva.activa { transition:none; }
  .js .diapositiva.activa img { animation:none; }
  .resplandor, .linea i { transition:none; }
}