/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/cine-catalogo.css */
/* Cocuyo Cine · 5-sep-2026. La intro aprobada no participa en esta hoja.
   Un catálogo pequeño se presenta con intención, sin inventar rankings. */
html[data-vista="cine"]{--cine-ancho:1320px;--cine-margen:clamp(20px,4.3vw,76px)}
html[data-vista="cine"] body{background:var(--negro-abismo);overflow-x:clip}
html[data-vista="cine"] .cabecera{
  position:fixed;inset:0 0 auto;width:100%;max-width:none;margin:0;min-height:78px;
  padding:17px var(--cine-margen);gap:38px;border:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--negro-abismo) 93%,transparent),color-mix(in srgb,var(--negro-abismo) 50%,transparent));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-vista="cine"] .wordmark-cabecera{font-family:var(--fuente);font-size:27px;letter-spacing:-.05em;font-weight:750;white-space:nowrap}
html[data-vista="cine"] .cine-nav{display:flex;align-items:center;gap:25px;min-width:0}
html[data-vista="cine"] .cine-nav a{font-size:12px;color:var(--gris-niebla);white-space:nowrap;min-height:40px;display:flex;align-items:center;gap:4px}
html[data-vista="cine"] .cine-nav a[aria-current]{font-weight:650;color:var(--blanco-luz)}
html[data-vista="cine"] .cine-nav a:hover{color:var(--verde-cocuyo)}
html[data-vista="cine"] .cabecera-acciones{gap:15px}


html[data-vista="cine"] .avatar-cine{width:35px;height:35px;border-radius:9px;background:var(--negro-elevado);box-shadow:none;border-color:var(--negro-borde)}
html[data-vista="cine"] .btn-entrar-cabecera{border-radius:8px;min-height:36px;font-size:11px;padding:8px 13px;box-shadow:none}

html[data-vista="cine"] #hero{
  min-height:560px;height:min(760px,86svh);max-height:none;align-items:center;
  background:var(--negro-abismo);isolation:isolate;
}
html[data-vista="cine"] #hero-fondo{inset:0;filter:none;animation:none;background-position:center 26%;background-size:cover}
html[data-vista="cine"] #hero-fondo::before,html[data-vista="cine"] .hero-aliento{display:none}
html[data-vista="cine"] #hero-fondo::after{
  background:linear-gradient(90deg,color-mix(in srgb,var(--negro-abismo) 95%,transparent),color-mix(in srgb,var(--negro-abismo) 42%,transparent) 51%,transparent 90%),
    linear-gradient(0deg,var(--negro-abismo),transparent 40%);
}
html[data-vista="cine"] #hero-contenido{
  width:100%;max-width:none;margin:0;padding:110px var(--cine-margen) 100px;
  display:flex;align-items:flex-start;gap:18px;position:relative;z-index:1;
}
html[data-vista="cine"] #hero-contenido>*{animation:none;opacity:1;transform:none}
html[data-vista="cine"] .badge-destacada{font-size:10px;letter-spacing:.18em;font-weight:600;text-shadow:none;padding:6px 9px;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 55%,transparent);border-radius:4px}
html[data-vista="cine"] .hero-titulo{font-family:var(--fuente-display);font-size:clamp(58px,6.8vw,100px);line-height:.98;letter-spacing:-.045em;font-weight:650;max-width:9ch;margin:0}
html[data-vista="cine"] .hero-meta{font-size:12px;gap:11px;font-weight:450;margin:1px 0;color:var(--gris-niebla)}
html[data-vista="cine"] .hero-sinopsis{font-size:14px;line-height:1.8;max-width:470px;margin:0;color:var(--gris-niebla);-webkit-line-clamp:3}
html[data-vista="cine"] .hero-botones{margin-top:5px;gap:12px}
html[data-vista="cine"] .hero-botones .btn{min-width:173px;min-height:48px;border-radius:9px;font-size:13px;box-shadow:none}
html[data-vista="cine"] .hero-adelanto{object-position:60% center}

html[data-vista="cine"] #catalogo{position:relative;padding:0 var(--cine-margen) 70px;max-width:calc(var(--cine-ancho) + var(--cine-margen) * 2);margin:-18px auto 0;scroll-margin-top:100px}
html[data-vista="cine"] .cine-catalogo-cabecera{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:24px}
html[data-vista="cine"] .cine-eyebrow{font-size:9px;letter-spacing:.14em;color:var(--gris-humo);font-weight:550}
html[data-vista="cine"] .cine-catalogo-cabecera h2{font-size:27px;line-height:1.2;letter-spacing:-.04em;font-weight:550;margin:9px 0 0;font-family:var(--fuente)}
html[data-vista="cine"] .cine-busqueda{display:flex;align-items:center;gap:10px;width:290px;min-width:0;min-height:45px;background:var(--negro-elevado);border:1px solid var(--negro-borde);border-radius:9px;padding:10px 13px;color:var(--gris-humo)}
html[data-vista="cine"] .cine-busqueda:focus-within{border-color:var(--verde-cocuyo);box-shadow:var(--anillo-foco)}
html[data-vista="cine"] .cine-busqueda svg{flex-shrink:0}
html[data-vista="cine"] #cineBuscar{width:100%;min-width:0;padding:0;border:0;outline:0;background:none;font-size:12px;color:var(--blanco-luz);box-shadow:none}
html[data-vista="cine"] #cineBuscar::placeholder{color:var(--gris-humo)}
html[data-vista="cine"] .cine-sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
html[data-vista="cine"] .cine-catalogo-opciones{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 35px;border-bottom:1px solid var(--negro-borde);padding-bottom:22px}
html[data-vista="cine"] .cine-filtros{display:flex;flex-wrap:wrap;gap:8px}
html[data-vista="cine"] .cine-filtros button{min-height:37px;padding:9px 14px;font-size:11px;border:1px solid var(--negro-borde);border-radius:7px;color:var(--gris-niebla);background:transparent;font-weight:450}
html[data-vista="cine"] .cine-filtros button[aria-pressed="true"]{background:var(--blanco-luz);border-color:var(--blanco-luz);color:var(--negro-abismo);font-weight:600}
html[data-vista="cine"] .cine-filtros button:hover{border-color:var(--gris-humo)}
html[data-vista="cine"] #cineRecuento{margin:0;font-size:10px;color:var(--gris-humo);text-align:right}
html[data-vista="cine"] #filas{width:100%;max-width:none;margin:0;padding:0}
html[data-vista="cine"] #filas>.fila-cine{margin:0;padding:0}
html[data-vista="cine"] #filas>.fila-cine+.fila-cine{margin-top:47px}
html[data-vista="cine"] .cine-fila-cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
html[data-vista="cine"] .fila-cine .fila-titulo{font-family:var(--fuente);font-size:19px;font-weight:600;letter-spacing:-.025em;margin:0}
html[data-vista="cine"] .cine-fila-cabecera p{font-size:11px;line-height:1.5;color:var(--gris-humo);margin:6px 0 0}
html[data-vista="cine"] .cine-fila-cuenta{font-size:11px;font-weight:500;color:var(--gris-humo);width:29px;height:27px;border-radius:6px;background:var(--negro-elevado);display:grid;place-items:center}
html[data-vista="cine"] #filas .fila-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0}
html[data-vista="cine"] #filas .mundo-tile{min-width:0;margin:0;transform:none;opacity:1}
html[data-vista="cine"] #filas .mundo-card{border-radius:12px;outline-offset:5px}
html[data-vista="cine"] #filas .caratula{aspect-ratio:4/5;min-height:0;border:1px solid var(--negro-borde);border-radius:12px;box-shadow:none;background-position:center;background-size:cover;transform:none}
html[data-vista="cine"] #filas .caratula::before{display:none}
html[data-vista="cine"] #filas .caratula::after{background:linear-gradient(0deg,color-mix(in srgb,var(--negro-abismo) 90%,transparent),transparent 60%)}
html[data-vista="cine"] #filas .mundo-card:hover .caratula{transform:translateY(-3px);border-color:var(--gris-humo);box-shadow:var(--sombra-2)}
html[data-vista="cine"] #filas .caratula-genero{top:15px;left:15px;padding:5px 7px;font-size:9px;font-weight:600;letter-spacing:.055em;border-radius:4px;box-shadow:none;text-shadow:none}
html[data-vista="cine"] #filas .caratula-genero.disponible{color:var(--blanco-luz);border-color:var(--escarcha-borde)}
html[data-vista="cine"] #filas .caratula-pie{padding:24px;gap:10px}
html[data-vista="cine"] #filas .caratula-titulo{font-family:var(--fuente-display);font-size:clamp(27px,3vw,45px);font-weight:600;letter-spacing:-.035em;line-height:1.02;max-width:10ch;text-transform:none}
html[data-vista="cine"] #filas .caratula-meta{font-size:10px;color:var(--gris-niebla);font-weight:500;letter-spacing:0}
html[data-vista="cine"] .cine-tile-caption{padding:16px 2px 0}
html[data-vista="cine"] .cine-tile-caption>span:first-child{font-size:13px;font-weight:550;color:var(--blanco-luz)}
html[data-vista="cine"] .cine-tile-caption p{font-size:11px;line-height:1.75;color:var(--gris-humo);margin:7px 0 13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.5em}
html[data-vista="cine"] .cine-tile-accion{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:500;color:var(--gris-niebla)}
html[data-vista="cine"] .cine-tile-accion i{font-size:15px;color:var(--verde-cocuyo);font-style:normal}
html[data-vista="cine"] [data-cine-grupo="proximo"] .caratula{aspect-ratio:16/11}
html[data-vista="cine"] [data-cine-grupo="proximo"] .caratula-titulo{font-size:clamp(23px,2.3vw,33px)}
html[data-vista="cine"] [data-cine-grupo="proximo"] .caratula-play{display:none}
html[data-vista="cine"] #filas [hidden],html[data-vista="cine"] #cineSinResultados[hidden]{display:none!important}
html[data-vista="cine"] .cine-sin-resultados{text-align:center;padding:45px 20px 65px;border:1px solid var(--negro-borde);border-radius:14px;background:var(--negro-elevado)}
html[data-vista="cine"] .cine-sin-resultados>span{font-size:34px;color:var(--verde-cocuyo)}
html[data-vista="cine"] .cine-sin-resultados h3{font-size:21px;font-weight:550;letter-spacing:-.03em;margin:13px 0}
html[data-vista="cine"] .cine-sin-resultados p{font-size:12px;color:var(--gris-humo);margin:0 0 20px}

/* Ficha cinematográfica: un solo scroll desde la imagen hasta el último
   capítulo. Mantiene todos los enlaces autorizados del catálogo original. */
html[data-vista="cine"] #ficha-cine{
  inset:24px 0 auto;width:min(980px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 48px);margin:0 auto;
  display:block;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--negro-borde);border-radius:18px;
  background:var(--negro-elevado);scrollbar-width:thin;box-shadow:var(--sombra-3);
}
html[data-vista="cine"] .ficha-cine-hero{height:420px;min-height:0;background-position:center 25%}
html[data-vista="cine"] .ficha-cine-hero::after{height:80%;background:linear-gradient(0deg,var(--negro-elevado),transparent)}
html[data-vista="cine"] .ficha-cine-logo{font-family:var(--fuente-display);font-size:clamp(35px,5vw,60px);font-weight:650;letter-spacing:-.04em;left:36px;bottom:86px;max-width:12ch}
html[data-vista="cine"] .ficha-cine-hero-acciones{left:36px;bottom:23px}
html[data-vista="cine"] .ficha-cine-play{min-height:43px;border-radius:8px;font-size:12px;font-weight:600;box-shadow:none;padding:10px 18px}
html[data-vista="cine"] .ficha-cine-cerrar,html[data-vista="cine"] .ficha-cine-inicio{top:17px;background:color-mix(in srgb,var(--negro-abismo) 85%,transparent);border:1px solid var(--negro-borde);border-radius:50%;width:36px;height:36px;z-index:3}
html[data-vista="cine"] .ficha-cine-cerrar{right:18px}
html[data-vista="cine"] .ficha-cine-inicio{left:18px}
html[data-vista="cine"] .ficha-cine-cuerpo{overflow:visible;padding:0 36px 36px}
html[data-vista="cine"] .ficha-cine-grid{gap:32px;margin-bottom:33px}
html[data-vista="cine"] .ficha-cine-sinopsis{font-size:13px;line-height:1.9;color:var(--gris-niebla)}
html[data-vista="cine"] .ficha-cine-lado{font-size:11px;line-height:1.8;padding-top:9px}
html[data-vista="cine"] .ficha-cine-lado p{margin-bottom:8px}
html[data-vista="cine"] .ficha-cine-eps-cabeza{padding-bottom:14px;border-bottom:1px solid var(--negro-borde);margin-bottom:0}
html[data-vista="cine"] .ficha-cine-eps-cabeza h3{font-family:var(--fuente);font-size:21px;font-weight:550;letter-spacing:-.03em}
html[data-vista="cine"] .ficha-cine-temp{font-size:10px;min-height:0;font-weight:450;border:0;background:none;padding:0;color:var(--gris-humo)}
html[data-vista="cine"] .ficha-cine-ep{grid-template-columns:22px minmax(100px,148px) 1fr;gap:17px;padding:20px 0;border-top:0;border-bottom:1px solid var(--negro-borde);border-radius:0}
html[data-vista="cine"] .ficha-cine-ep-num{font-size:14px;color:var(--gris-humo)}
html[data-vista="cine"] .ficha-cine-ep-art{border-radius:7px;aspect-ratio:16/9;background-size:cover}
html[data-vista="cine"] .ficha-cine-ep-nom{font-size:13px;font-weight:550}
html[data-vista="cine"] .ficha-cine-ep-dur{font-size:10px;color:var(--gris-humo)}
html[data-vista="cine"] .ficha-cine-ep-linea{gap:10px;flex-wrap:wrap}
html[data-vista="cine"] .ficha-cine-ep-desc{font-size:11px;line-height:1.7;margin-top:8px;color:var(--gris-humo)}
html[data-vista="cine"] .cine-ficha-proxima{padding:24px;border:1px solid var(--negro-borde);border-radius:11px;background:var(--negro-abismo)}
html[data-vista="cine"] .cine-ficha-proxima>span{font-size:9px;letter-spacing:.1em;color:var(--verde-cocuyo)}
html[data-vista="cine"] .cine-ficha-proxima h3{font-size:21px;letter-spacing:-.03em;font-weight:550;margin:10px 0}
html[data-vista="cine"] .cine-ficha-proxima p{font-size:12px;line-height:1.8;color:var(--gris-humo);margin:0}
html[data-vista="cine"] .pie-legal{border-top:1px solid var(--negro-borde);max-width:var(--cine-ancho);margin:auto;padding:32px var(--cine-margen) 40px;font-size:11px}
html[data-vista="cine"] :is(.cine-nav a,.cine-filtros button,.mundo-card,.ficha-cine-ep):focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:4px}

@media(max-width:1000px){
  html[data-vista="cine"] .cabecera{gap:24px}
  html[data-vista="cine"] .cine-nav{gap:17px}
  html[data-vista="cine"] #hero{height:720px;min-height:0;max-height:90svh}
  html[data-vista="cine"] #hero-contenido{padding-bottom:80px}
  html[data-vista="cine"] .cine-catalogo-cabecera h2{font-size:23px}
  html[data-vista="cine"] .cine-busqueda{width:250px}
  html[data-vista="cine"] #filas .fila-grid{gap:17px}
  html[data-vista="cine"] #filas .caratula-pie{padding:18px}
}
@media(max-width:720px){
  html[data-vista="cine"] .cabecera{padding:14px 20px;gap:20px;flex-wrap:wrap;min-height:104px}
  html[data-vista="cine"] .wordmark-cabecera{font-size:24px}
  html[data-vista="cine"] .cine-nav{order:3;width:100%;justify-content:flex-start;gap:24px;margin-top:-6px}
  html[data-vista="cine"] .cine-nav a{min-height:27px;font-size:11px}
  html[data-vista="cine"] .cabecera-acciones{gap:9px}
  html[data-vista="cine"] #hero{height:730px;min-height:590px;max-height:95svh;align-items:flex-end}
  html[data-vista="cine"] #hero-fondo{background-position:62% top}
  html[data-vista="cine"] #hero-fondo::after{background:linear-gradient(0deg,var(--negro-abismo),color-mix(in srgb,var(--negro-abismo) 75%,transparent) 32%,transparent 77%)}
  html[data-vista="cine"] #hero-contenido{padding:160px 22px 60px;gap:14px}
  html[data-vista="cine"] .hero-titulo{font-size:65px;max-width:9ch}
  html[data-vista="cine"] .hero-sinopsis{font-size:12px;line-height:1.8;max-width:390px}
  html[data-vista="cine"] .hero-meta{font-size:10px}
  html[data-vista="cine"] .hero-botones .btn{min-width:170px;min-height:46px}
  html[data-vista="cine"] #catalogo{margin:0;scroll-margin-top:128px;padding-bottom:48px}
  html[data-vista="cine"] .cine-catalogo-cabecera{display:block;margin-bottom:17px}
  html[data-vista="cine"] .cine-catalogo-cabecera h2{font-size:26px;max-width:270px;margin-bottom:20px}
  html[data-vista="cine"] .cine-busqueda{width:100%;min-height:46px}
  html[data-vista="cine"] #cineBuscar{font-size:14px}
  html[data-vista="cine"] .cine-catalogo-opciones{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:25px;padding-bottom:18px}
  html[data-vista="cine"] .cine-filtros{gap:7px}
  html[data-vista="cine"] .cine-filtros button{min-height:40px;font-size:10px;padding:10px 13px}
  html[data-vista="cine"] #filas .fila-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 13px}
  html[data-vista="cine"] .cine-fila-cabecera{margin-bottom:16px}
  html[data-vista="cine"] .fila-cine .fila-titulo{font-size:18px}
  html[data-vista="cine"] .cine-fila-cabecera p{font-size:10px;max-width:220px}
  html[data-vista="cine"] #filas .caratula{aspect-ratio:3/4;border-radius:9px}
  html[data-vista="cine"] #filas .caratula-genero{top:10px;left:10px;font-size:8px;padding:4px 5px;max-width:calc(100% - 20px)}
  html[data-vista="cine"] #filas .caratula-pie{padding:13px;gap:7px}
  html[data-vista="cine"] #filas .caratula-titulo{font-size:25px}
  html[data-vista="cine"] #filas .caratula-meta{font-size:9px}
  html[data-vista="cine"] .cine-tile-caption{padding:11px 1px 0}
  html[data-vista="cine"] .cine-tile-caption>span:first-child{font-size:11px}
  html[data-vista="cine"] .cine-tile-caption p{font-size:10px;margin-bottom:9px;line-height:1.6;min-height:3.2em}
  html[data-vista="cine"] .cine-tile-accion{font-size:9px}
  html[data-vista="cine"] [data-cine-grupo="proximo"] .caratula{aspect-ratio:3/4}
  html[data-vista="cine"] [data-cine-grupo="proximo"] .caratula-titulo{font-size:24px}
  html[data-vista="cine"] #ficha-cine{inset:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  html[data-vista="cine"] .ficha-cine-hero{height:360px}
  html[data-vista="cine"] .ficha-cine-logo{left:23px;right:50px;bottom:82px;font-size:43px}
  html[data-vista="cine"] .ficha-cine-hero-acciones{left:23px}
  html[data-vista="cine"] .ficha-cine-cuerpo{padding:0 23px 32px}
  html[data-vista="cine"] .ficha-cine-grid{grid-template-columns:1fr;gap:15px;margin-bottom:25px}
  html[data-vista="cine"] .ficha-cine-lado{display:flex;gap:10px;flex-wrap:wrap;padding:0}
  html[data-vista="cine"] .ficha-cine-lado p{margin:0}
  html[data-vista="cine"] .ficha-cine-ep{grid-template-columns:17px 99px 1fr;gap:11px;padding:17px 0}
  html[data-vista="cine"] .ficha-cine-ep-nom{font-size:11px;line-height:1.5}
  html[data-vista="cine"] .ficha-cine-ep-num{font-size:12px}
  html[data-vista="cine"] .ficha-cine-ep-desc{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  html[data-vista="cine"] #filas .caratula{transition:none}
  html[data-vista="cine"] #filas .mundo-card:hover .caratula{transform:none}
}

/* Fichas con presencia cinematográfica. Imagen, numeración y entrada de play
   inspiradas en Cinematic List de daiwiikharihar (21st.dev, demo 9860).
   Altura estable para que los capítulos no se desplacen al elegirlos. */
html[data-vista="cine"] #ficha-cine{width:min(1120px,calc(100vw - 40px));inset:20px 0 auto;max-height:calc(100dvh - 40px);border-radius:22px}
html[data-vista="cine"] .ficha-cine-hero{height:540px;background-position:center 30%;isolation:isolate}
html[data-vista="cine"] .ficha-cine-hero::after{inset:0;height:100%;background:linear-gradient(0deg,var(--negro-elevado) 0%,color-mix(in srgb,var(--negro-abismo) 68%,transparent) 28%,transparent 76%),linear-gradient(90deg,color-mix(in srgb,var(--negro-abismo) 62%,transparent),transparent 78%);z-index:1;pointer-events:none}
html[data-vista="cine"] .ficha-cine-presentacion{position:absolute;inset:auto 48px 34px;z-index:2;display:grid;justify-items:start;gap:20px}
html[data-vista="cine"] .ficha-cine-marca{font-size:10px;letter-spacing:.28em;font-weight:750;color:var(--verde-cocuyo)}
html[data-vista="cine"] .ficha-cine-logo{position:static;font-family:var(--fuente);font-size:clamp(42px,6.5vw,78px);font-weight:750;line-height:.98;letter-spacing:-.065em;margin:0;max-width:15ch;text-wrap:balance;text-shadow:0 3px 28px rgb(0 0 0 / .45)}
html[data-vista="cine"] .ficha-cine-hero-acciones{position:static;margin-top:5px}
html[data-vista="cine"] .ficha-cine-play{min-height:52px;padding:12px 28px;border-radius:12px;font-size:15px;gap:12px;background:var(--verde-cocuyo);color:var(--negro-abismo);box-shadow:0 5px 25px color-mix(in srgb,var(--verde-cocuyo) 12%,transparent)}
html[data-vista="cine"] .ficha-cine-play:hover{background:var(--blanco-luz);transform:translateY(-1px)}
html[data-vista="cine"] :is(.ficha-cine-cerrar,.ficha-cine-inicio){width:44px;height:44px;backdrop-filter:blur(16px)}
html[data-vista="cine"] .ficha-cine-cuerpo{padding:0 48px 48px}
html[data-vista="cine"] .ficha-cine-grid{grid-template-columns:minmax(0,1fr) 220px;gap:50px;margin:0 0 38px}
html[data-vista="cine"] .ficha-cine-sinopsis{font-size:15px;line-height:1.8;color:var(--gris-niebla);max-width:66ch}
html[data-vista="cine"] .ficha-cine-lado{font-size:12px;line-height:1.8;border-left:1px solid var(--negro-borde);padding:10px 0 0 24px}
html[data-vista="cine"] .ficha-cine-eps-kicker{display:block;color:var(--gris-humo);font-size:9px;letter-spacing:.16em;margin-bottom:8px}
html[data-vista="cine"] .ficha-cine-eps-cabeza{align-items:end;border-bottom:0;margin-bottom:18px;padding-bottom:0}
html[data-vista="cine"] .ficha-cine-eps-cabeza h3{font-size:30px;font-weight:650;letter-spacing:-.045em}
html[data-vista="cine"] .ficha-cine-temp{font-size:12px}
html[data-vista="cine"] .ficha-cine-eps{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
html[data-vista="cine"] .ficha-cine-ep{display:grid;grid-template-columns:1fr;position:relative;overflow:hidden;gap:0;padding:0;border:1px solid var(--negro-borde);border-radius:14px;background:color-mix(in srgb,var(--blanco-luz) 2%,var(--negro-elevado));transition:border-color 200ms ease,background 200ms ease}
html[data-vista="cine"] .ficha-cine-ep-art{width:100%;aspect-ratio:16/9;border-radius:0;overflow:hidden;transition:filter 250ms ease;filter:brightness(.9)}
html[data-vista="cine"] .ficha-cine-ep-num{position:absolute;top:12px;left:12px;z-index:2;display:grid;place-items:center;min-width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--negro-abismo) 82%,transparent);font-size:12px;font-weight:700;color:var(--blanco-luz);backdrop-filter:blur(12px)}
html[data-vista="cine"] .ficha-cine-ep-info{padding:18px 20px 20px;min-width:0}
html[data-vista="cine"] .ficha-cine-ep-nom{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.025em}
html[data-vista="cine"] .ficha-cine-ep-dur{font-size:11px}
html[data-vista="cine"] .ficha-cine-ep-desc{font-size:12px;line-height:1.7;margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-vista="cine"] a.ficha-cine-ep:hover,html[data-vista="cine"] a.ficha-cine-ep:focus-visible{border-color:color-mix(in srgb,var(--verde-cocuyo) 55%,var(--negro-borde));background:color-mix(in srgb,var(--verde-cocuyo) 4%,var(--negro-elevado))}
html[data-vista="cine"] a.ficha-cine-ep:hover .ficha-cine-ep-art,html[data-vista="cine"] a.ficha-cine-ep:focus-visible .ficha-cine-ep-art{filter:brightness(1.08)}
html[data-vista="cine"] .ficha-cine-ep-play{width:46px;height:46px;background:color-mix(in srgb,var(--negro-abismo) 60%,transparent);color:var(--blanco-luz);border:1px solid color-mix(in srgb,var(--blanco-luz) 55%,transparent);backdrop-filter:blur(12px)}
html[data-vista="cine"] a.ficha-cine-ep:hover .ficha-cine-ep-play,html[data-vista="cine"] a.ficha-cine-ep:focus-visible .ficha-cine-ep-play{background:var(--verde-cocuyo);color:var(--negro-abismo);border-color:var(--verde-cocuyo)}
@media(max-width:700px){
 html[data-vista="cine"] #ficha-cine{inset:0;width:100%;max-height:100dvh;border-radius:0}
 html[data-vista="cine"] .ficha-cine-hero{height:470px}
 html[data-vista="cine"] .ficha-cine-presentacion{inset:auto 24px 30px;gap:18px}
 html[data-vista="cine"] .ficha-cine-logo{font-size:clamp(36px,10.5vw,58px);max-width:14ch}
 html[data-vista="cine"] .ficha-cine-cuerpo{padding:0 24px 32px}
 html[data-vista="cine"] .ficha-cine-grid{grid-template-columns:1fr;gap:16px;margin-bottom:30px}
 html[data-vista="cine"] .ficha-cine-lado{border:0;padding:0}
 html[data-vista="cine"] .ficha-cine-sinopsis{font-size:14px}
 html[data-vista="cine"] .ficha-cine-eps{grid-template-columns:1fr}
 html[data-vista="cine"] .ficha-cine-eps-cabeza{gap:12px;align-items:start;flex-wrap:wrap}
 html[data-vista="cine"] .ficha-cine-eps-cabeza h3{font-size:27px}
 html[data-vista="cine"] .ficha-cine-ep-info{padding:16px}
}
@media(prefers-reduced-motion:reduce){html[data-vista="cine"] :is(.ficha-cine-ep,.ficha-cine-ep-art,.ficha-cine-play){transition:none;transform:none}}

/* Los fotogramas del catálogo son horizontales. Conservar su encuadre
   evita cortar las caras al colocarlos en los antiguos carteles 4:5. */
html[data-vista="cine"] #filas .caratula{aspect-ratio:16/9;background-position:center;border-radius:13px}
html[data-vista="cine"] #filas .caratula::after{background:linear-gradient(0deg,color-mix(in srgb,var(--negro-abismo) 66%,transparent),transparent 64%)}
html[data-vista="cine"] #filas .caratula-pie{padding:17px;gap:7px}
html[data-vista="cine"] #filas .caratula-titulo{font-family:var(--fuente);font-size:clamp(19px,2.1vw,30px);font-weight:650;letter-spacing:-.04em;max-width:16ch}
html[data-vista="cine"] #filas .caratula-genero{top:12px;left:12px;font-size:8px}
html[data-vista="cine"] #filas .cine-tile-caption{padding-top:13px}
.cine-adelanto-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s;pointer-events:none}
.cine-adelanto-video.listo{opacity:1}
/* Controles del adelanto al FINAL de la línea (inset-inline-end): en árabe
   y urdu pasan a la izquierda y no tapan «Ver episodio», que va a la derecha.
   Colores de tokens.css (revisión de diseño, 5-oct-2026). */
.cine-adelanto-controles{position:absolute;inset-inline-end:24px;bottom:25px;z-index:4;display:flex;gap:8px;align-items:center;color:var(--blanco-luz)}
.cine-adelanto-controles>span:first-child{font:500 11px var(--fuente);padding:7px 10px;border-radius:20px;background:color-mix(in srgb,var(--negro-abismo) 60%,transparent)}
.cine-adelanto-controles button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--blanco-luz) 50%,transparent);background:color-mix(in srgb,var(--negro-abismo) 66%,transparent);color:var(--blanco-luz);cursor:pointer}
.cine-adelanto-controles button:hover{background:color-mix(in srgb,var(--negro-abismo) 90%,transparent);border-color:var(--verde-cocuyo)}
.cine-adelanto-controles button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.cine-adelanto-estado{position:absolute;inset-inline-end:0;top:-30px;font-size:11px;white-space:nowrap}
@media(max-width:600px){.cine-adelanto-controles{inset-inline-end:15px;bottom:20px}.cine-adelanto-controles>span:first-child{display:none}}
@media(prefers-reduced-motion:reduce){.cine-adelanto-video{transition:none}}
@media(max-width:600px){
 html[data-vista="cine"] #filas .fila-grid{grid-template-columns:1fr;gap:25px}
 html[data-vista="cine"] #filas .caratula{aspect-ratio:16/9}
 html[data-vista="cine"] #filas .caratula-titulo{font-size:27px}
}


/* cocuyo-css: assets/css/cine-coleccion.css */
/* Colección Cocuyo · Portada y navegación aprobadas el 7-sep-2026.
   Todas las reglas están limitadas a Cine; la intro conserva su diseño. */
html[data-vista="cine"]{--cine-ancho:1440px;--cine-margen:clamp(20px,4.3vw,76px)}
html[data-vista="cine"] .cabecera{min-height:88px;gap:28px;padding:16px var(--cine-margen);border-bottom:1px solid color-mix(in srgb,var(--blanco-luz) 8%,transparent);background:color-mix(in srgb,var(--negro-abismo) 78%,transparent);transition:background .2s,border-color .2s}
html[data-vista="cine"] .cabecera.cine-con-scroll{background:color-mix(in srgb,var(--negro-abismo) 95%,transparent);border-color:var(--negro-borde)}
html[data-vista="cine"] .wordmark-cabecera{font-size:28px;letter-spacing:-.065em}
html[data-vista="cine"] .cine-nav{gap:5px;padding:5px;border:1px solid color-mix(in srgb,var(--blanco-luz) 12%,transparent);border-radius:16px;background:color-mix(in srgb,var(--negro-elevado) 82%,transparent)}
html[data-vista="cine"] .cine-nav a{gap:9px;padding:0 18px;min-height:42px;border-radius:11px;font-size:14px;font-weight:550;transition:background .2s,color .2s;position:relative}
html[data-vista="cine"] .cine-nav a[aria-current]{background:color-mix(in srgb,var(--blanco-luz) 9%,transparent);color:var(--blanco-luz);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blanco-luz) 8%,transparent)}
html[data-vista="cine"] .cine-nav a[aria-current] svg{color:var(--verde-cocuyo)}
html[data-vista="cine"] .cine-nav a:hover{background:color-mix(in srgb,var(--blanco-luz) 13%,transparent);color:var(--blanco-luz)}
html[data-vista="cine"] .cine-nav-salida{color:var(--gris-humo);font-size:16px;margin-left:4px;transition:transform .2s}
html[data-vista="cine"] .cine-nav a:hover .cine-nav-salida{transform:translate(2px,-2px);color:var(--verde-cocuyo)}
html[data-vista="cine"] .cabecera-acciones{margin-left:auto;gap:14px;flex-wrap:nowrap}


html[data-vista="cine"] .avatar-cine{width:44px;height:44px;border-radius:13px;box-shadow:0 0 0 3px color-mix(in srgb,var(--blanco-luz) 4%,transparent);transition:border-color .2s,box-shadow .2s}
html[data-vista="cine"] .avatar-cine:hover{border-color:var(--verde-cocuyo);box-shadow:0 0 0 3px color-mix(in srgb,var(--verde-cocuyo) 12%,transparent)}
html[data-vista="cine"] .btn-entrar-cabecera{font-size:13px;min-height:44px;border-radius:12px;padding:10px 18px}
html[data-vista="cine"] #hero{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:660px;height:min(840px,94svh);max-height:none;padding:110px 0 80px}
html[data-vista="cine"] #hero-fondo{background-position:64% center;filter:saturate(.55);transition:opacity .35s}
html[data-vista="cine"] #hero-fondo::after{background:linear-gradient(90deg,var(--negro-abismo),color-mix(in srgb,var(--negro-abismo) 78%,transparent) 27%,transparent 76%),linear-gradient(0deg,var(--negro-abismo),transparent 45%)}
html[data-vista="cine"] #hero-contenido{padding:28px var(--cine-margen) 42px;gap:20px;max-width:calc(var(--cine-ancho) + var(--cine-margen) * 2);margin:auto;width:100%}
html[data-vista="cine"] #hero-contenido>*{animation:cine-portada-entra .32s ease-out both}
@keyframes cine-portada-entra{from{transform:translateY(6px)}to{transform:translateY(0)}}
html[data-vista="cine"] .cine-portada-kicker{font-size:12px;font-weight:600;letter-spacing:.09em;color:var(--verde-cocuyo)}
html[data-vista="cine"] .hero-titulo{font-family:var(--fuente);font-size:clamp(52px,6.7vw,96px);font-weight:760;line-height:.98;letter-spacing:-.065em;max-width:10.5ch;color:var(--blanco-luz);text-shadow:0 3px 28px var(--negro-abismo);text-wrap:balance}
html[data-vista="cine"] .hero-meta{font-size:13px;gap:12px;color:var(--gris-niebla)}
html[data-vista="cine"] .hero-sinopsis{font-size:16px;line-height:1.65;max-width:440px;color:var(--blanco-luz);display:block;overflow:visible;text-shadow:0 2px 16px var(--negro-abismo)}
html[data-vista="cine"] .hero-botones{margin-top:5px;display:flex;gap:12px;flex-wrap:wrap}
html[data-vista="cine"] .hero-botones .btn{display:inline-flex;gap:11px;align-items:center;justify-content:center;min-height:52px;padding:12px 25px;font-size:15px;border-radius:12px;font-weight:650;transition:transform .2s,box-shadow .2s}
html[data-vista="cine"] .hero-botones .btn svg{width:20px;height:20px}
html[data-vista="cine"] .hero-botones .btn:hover{transform:translateY(-2px);box-shadow:var(--glow-suave)}
html[data-vista="cine"] #catalogo{margin:0 auto;padding-top:20px;padding-bottom:55px;scroll-margin-top:110px}
html[data-vista="cine"] .cine-catalogo-cabecera{margin-bottom:25px;display:flex}
html[data-vista="cine"] .cine-catalogo-cabecera h2{font:650 clamp(30px,3vw,42px)/1.1 var(--fuente);letter-spacing:-.05em;margin:0;color:var(--blanco-luz)}
html[data-vista="cine"] .cine-catalogo-cabecera p{font-size:15px;color:var(--gris-niebla);margin:10px 0 0}
html[data-vista="cine"] .cine-buscador{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;max-width:600px}

html[data-vista="cine"] .cine-busqueda{width:auto;flex:1;min-height:48px;border-radius:12px}
html[data-vista="cine"] #cineBuscar{font-size:15px}

html[data-vista="cine"] #cineRecuento{width:100%;text-align:left;font-size:13px;color:var(--gris-niebla)}
html[data-vista="cine"] #cineRecuento:empty{display:none}
html[data-vista="cine"] #filas .fila-grid{gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-vista="cine"] #filas .mundo-tile{opacity:1;animation:none;filter:none;visibility:visible}
html[data-vista="cine"] #filas>.fila-cine.revela{opacity:1;transform:none;transition:none}
html[data-vista="cine"] #filas .cine-obra .mundo-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--negro-borde);border-radius:16px;background:var(--negro-elevado);overflow:hidden;box-shadow:none;color:var(--blanco-luz);transition:transform .24s,border-color .24s,box-shadow .24s}
html[data-vista="cine"] #filas .cine-obra .mundo-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--verde-cocuyo) 55%,var(--negro-borde));box-shadow:var(--sombra-2)}
html[data-vista="cine"] #filas .cine-obra .caratula{width:100%;aspect-ratio:16/9;min-height:0;border:0;border-radius:0;filter:saturate(.7);transform:none;animation:none;box-shadow:none;position:relative}
html[data-vista="cine"] #filas .cine-obra .caratula::before,html[data-vista="cine"] #filas .cine-obra .caratula::after{display:none}
html[data-vista="cine"] .cine-obra-abrir{position:absolute;right:15px;bottom:15px;display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--blanco-luz) 55%,transparent);border-radius:50%;background:color-mix(in srgb,var(--negro-abismo) 65%,transparent);color:var(--blanco-luz);backdrop-filter:blur(10px);opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}
html[data-vista="cine"] .cine-obra-abrir svg{width:17px;height:17px}
html[data-vista="cine"] .mundo-card:is(:hover,:focus-visible) .cine-obra-abrir{opacity:1;transform:scale(1)}
html[data-vista="cine"] #filas .cine-tile-caption{display:flex;flex:1;flex-direction:column;padding:20px;min-width:0;color:var(--blanco-luz)}
html[data-vista="cine"] .cine-tile-caption h3{font:650 clamp(21px,2.1vw,29px)/1.2 var(--fuente);letter-spacing:-.04em;margin:0;color:var(--blanco-luz)}
html[data-vista="cine"] .cine-obra-meta{display:block;font-size:12px;color:var(--gris-niebla);margin:9px 0 0}
html[data-vista="cine"] .cine-tile-caption p{font-size:14px;line-height:1.6;color:var(--gris-niebla);margin:12px 0 18px;min-height:3.2em}
html[data-vista="cine"] .cine-tile-accion{margin-top:auto;border-top:1px solid var(--negro-borde);padding-top:15px;font-size:13px;font-weight:600;color:var(--blanco-luz);line-height:1.4}
html[data-vista="cine"] .cine-tile-accion svg{color:var(--verde-cocuyo);flex-shrink:0;transition:transform .2s}
html[data-vista="cine"] .mundo-card:hover .cine-tile-accion svg{transform:translateX(3px)}
html[data-vista="cine"] #filas>[data-cine-grupo="proximo"]{margin-top:40px;padding-top:25px;border-top:1px solid var(--negro-borde)}
html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-fila-cabecera{justify-content:flex-start;align-items:baseline;gap:20px;margin-bottom:20px}
html[data-vista="cine"] [data-cine-grupo="proximo"] .fila-titulo{font-size:23px;color:var(--blanco-luz)}
html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-fila-cabecera p{font-size:13px;color:var(--gris-niebla);margin:0}
html[data-vista="cine"] #filas [data-cine-grupo="proximo"] .mundo-card{flex-direction:row;align-items:center;padding:10px;border-radius:13px;gap:14px}
html[data-vista="cine"] #filas [data-cine-grupo="proximo"] .caratula{width:110px;height:75px;aspect-ratio:auto;border-radius:8px;flex-shrink:0}
html[data-vista="cine"] #filas [data-cine-grupo="proximo"] .cine-tile-caption{padding:0 4px 0 0;gap:10px}
html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-tile-caption h3{font-size:18px}
html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-tile-accion{padding:0;border:0;font-size:11px;gap:5px;color:var(--gris-niebla)}
html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-obra-abrir{width:32px;height:32px;right:8px;bottom:8px}
html[data-vista="cine"] :is(.cine-portada-movimiento,.avatar-cine,.cine-ver-episodios):focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:4px}
@media(max-width:1000px){
 html[data-vista="cine"] #hero{height:auto;min-height:660px}
 html[data-vista="cine"] #filas .fila-grid{gap:16px}
 html[data-vista="cine"] #filas .cine-tile-caption{padding:17px}
 html[data-vista="cine"] #filas [data-cine-grupo="proximo"] .caratula{width:82px;height:68px}
 html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-tile-accion svg{display:none}
}
@media(max-width:720px){
 html[data-vista="cine"] .cabecera{display:grid;grid-template-columns:1fr auto;padding:12px 20px;gap:12px;min-height:124px}
 html[data-vista="cine"] .wordmark-cabecera{font-size:25px}
 html[data-vista="cine"] .cabecera-acciones{grid-column:2;grid-row:1;gap:10px}
 html[data-vista="cine"] .cine-nav{grid-column:1/-1;grid-row:2;width:100%;margin:0;gap:5px;padding:4px;justify-content:stretch;border-radius:13px}
 html[data-vista="cine"] .cine-nav a{flex:1;justify-content:center;min-height:39px;font-size:13px;padding:0 12px;border-radius:9px}
 html[data-vista="cine"] .cine-nav a svg{width:17px;height:17px}
 html[data-vista="cine"] .avatar-cine{width:38px;height:38px;border-radius:11px}
 html[data-vista="cine"] #hero{min-height:700px;max-height:none;padding:145px 0 84px;justify-content:flex-end}
 html[data-vista="cine"] #hero-fondo{background-position:62% top;background-size:auto 100%;background-repeat:no-repeat}
 html[data-vista="cine"] #hero-fondo::after{background:linear-gradient(0deg,var(--negro-abismo) 5%,color-mix(in srgb,var(--negro-abismo) 85%,transparent) 32%,color-mix(in srgb,var(--negro-abismo) 30%,transparent) 76%,transparent 100%)}
 html[data-vista="cine"] #hero-contenido{padding:125px 22px 0;margin:0;gap:17px}
 html[data-vista="cine"] .hero-titulo{font-size:clamp(45px,11vw,68px);max-width:12ch}
 html[data-vista="cine"] .hero-sinopsis{font-size:15px;max-width:400px}
 html[data-vista="cine"] .hero-meta{font-size:12px}
 html[data-vista="cine"] .cine-portada-kicker{font-size:11px}
 html[data-vista="cine"] #catalogo{scroll-margin-top:145px;padding-top:25px}
 html[data-vista="cine"] .cine-catalogo-cabecera h2{font-size:32px;margin-bottom:0;max-width:none}
 html[data-vista="cine"] .cine-catalogo-cabecera p{font-size:14px}
 html[data-vista="cine"] #filas .fila-grid{grid-template-columns:1fr;gap:20px}
 html[data-vista="cine"] #filas .cine-tile-caption{padding:20px}
 html[data-vista="cine"] .cine-tile-caption h3{font-size:26px}
 html[data-vista="cine"] .cine-tile-caption p{min-height:0}
 html[data-vista="cine"] .cine-obra-abrir{opacity:1;transform:none}
 html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-fila-cabecera{display:block}
 html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-fila-cabecera p{font-size:13px;margin-top:9px;max-width:none}
 html[data-vista="cine"] #filas [data-cine-grupo="proximo"] .fila-grid{gap:12px}
 html[data-vista="cine"] #filas [data-cine-grupo="proximo"] .caratula{width:112px;height:74px}
 html[data-vista="cine"] [data-cine-grupo="proximo"] .cine-tile-accion svg{display:block}
}
@media(prefers-reduced-motion:reduce){html[data-vista="cine"] :is(.cabecera,.cine-nav a,.cine-nav-salida,.cine-portada-movimiento,.mundo-card,.cine-obra-abrir,.hero-botones .btn,.cine-tile-accion svg){transition:none!important;transform:none!important}html[data-vista="cine"] #hero-contenido>*{animation:none}}

/* El primer fotograma y el vídeo comparten exactamente tamaño y encuadre. */
html[data-vista="cine"] #hero-fondo{background-size:cover;animation:none;filter:saturate(.55)}
html[data-vista="cine"] #hero .hero-aliento{display:none}
html[data-vista="cine"] .cine-portada-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;opacity:0;pointer-events:none}
html[data-vista="cine"] .cine-portada-video.listo{opacity:1}
html[data-vista="cine"] .cine-portada-movimiento{position:absolute;right:var(--cine-margen);bottom:40px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid color-mix(in srgb,var(--blanco-luz) 40%,transparent);border-radius:50%;background:color-mix(in srgb,var(--negro-abismo) 65%,transparent);color:var(--blanco-luz);cursor:pointer}
html[data-vista="cine"] .cine-portada-movimiento:hover{border-color:var(--verde-cocuyo);color:var(--verde-cocuyo)}
html[data-vista="cine"] .cine-portada-movimiento[hidden]{display:none}
/* Letra auxiliar legible y navegación coherente con el resto de Cocuyo. */
html[data-vista="cine"] :is(.ficha-cine-ep-desc,.ficha-cine-lado){font-size:13px;line-height:1.65}
html[data-vista="cine"] .ficha-cine-ep-nom{font-size:15px;line-height:1.45}
html[data-vista="cine"] :is(.ficha-cine-ep-dur,.ficha-cine-temp,.caratula-meta){font-size:12px;font-variant-numeric:tabular-nums}
html[data-vista="cine"] .cine-tile-accion{font-size:13px;min-height:32px}
html[data-vista="cine"] .pie-legal{font-size:12px;line-height:1.7}
html[data-vista="cine"] .ficha-cine-ep:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:4px}
@media(max-width:720px){
 html[data-vista="cine"] #hero-fondo{background-position:62% top}
 html[data-vista="cine"] .cine-portada-video{object-position:62% top}
 html[data-vista="cine"] .cine-portada-movimiento{bottom:20px;right:20px}
}

/* Pantallas táctiles: el buscador a 16 px. Con menos, Safari del iPhone
   amplía toda la página al tocarlo (auditoría móvil, oct-2026). En
   ordenador sigue igual. */
@media (pointer:coarse){html[data-vista="cine"] #cineBuscar{font-size:16px}}


/* cocuyo-css: assets/css/acceso.css */
/* ============================================================
   entrar.html — Familia Cocuyo (29-sep-2026). Mismos componentes que
   la ventana de acceso (acceso-modal.css: .ac-*, .acceso-visual).
   Escritorio: visual del casting a la izquierda, formulario a la derecha.
   Móvil: formulario a pantalla completa y franja visual arriba.
   También conserva los estilos del OTP de la intro (#intro-otp).
   ============================================================ */
.acceso-pagina { min-height: 100vh; min-height: 100dvh; padding: 0; background: var(--ac-fondo, var(--negro-abismo)); color: var(--blanco-luz); font-family: var(--fuente); }
/* Los pasos ocultos (hidden) nunca se ven: lo garantiza la regla común de
   tokens.css, que sustituye al parche que había aquí. */
.acceso-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 560px); min-height: 100vh; min-height: 100dvh; }
.acceso-escena { position: sticky; top: 0; height: 100vh; height: 100dvh; margin: 0; border-right: 1px solid var(--ac-linea); }
html.en-app-cine .acceso-escena { display: none; }
.acceso-lado { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }
.acceso-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 4vw, 48px); }
.acceso-pagina .acceso-marca { margin: 0; font-size: 16px; text-decoration: none; }
.acceso-cabecera-acciones { display: flex; align-items: center; gap: 12px; }
.acceso-volver { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ac-texto-2); font-size: 14px; text-decoration: none; }
.acceso-volver:hover { color: var(--ac-texto); }
.acceso-pagina .columna { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 412px; margin: 0 auto; padding: clamp(12px, 6vh, 72px) 24px 28px; gap: 0; }
.acceso-pagina .hero-entrar { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: auto 0; padding: 0; text-align: left; }
.acceso-pagina .ac-form { width: 100%; }
.acceso-pagina .acceso-correo-campos { display: flex; flex-direction: column; }
.acceso-pagina .ac-linea { margin: 14px 0 0; text-align: center; }
.acceso-pagina .ac-cambio a { color: var(--ac-texto); font-weight: 550; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blanco-luz) 32%, transparent); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.acceso-pagina .ac-cambio a:hover { text-decoration-color: currentColor; }
.acceso-pagina .ac-correo { margin-bottom: 4px; }
.acceso-pagina .aviso-pago { margin: 0 0 24px; }
.acceso-pagina .acceso-estado:empty { display: none; }
.acceso-pagina #acceso-vinculo-volver { align-self: center; margin-top: 12px; }
.acceso-pagina .panel-revisa .ac-principal { margin-top: 6px; }
.acceso-pagina .pie-legal { margin-top: 40px; padding: 18px 0 0; border-top: 1px solid var(--ac-linea); color: var(--ac-texto-3); font-size: 12px; line-height: 1.6; text-align: center; }
.acceso-pagina .pie-legal p { margin: 0 0 6px; }
.acceso-pagina .pie-legal a { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 4px; color: var(--ac-texto-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blanco-luz) 25%, transparent); text-underline-offset: 3px; }
.acceso-pagina .pie-legal a:hover { color: var(--ac-texto); }
/* Paso de créditos (#planes) y apps nativas: una sola columna amplia. */
body.acceso-pagina.paquete-activo .acceso-layout, html.en-app-cine .acceso-layout { display: block; }
body.acceso-pagina.paquete-activo .columna { max-width: 1120px; }
body.acceso-pagina.paquete-activo .hero-entrar { margin: 0; }
.acceso-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 22px; border-bottom: 1px solid var(--negro-borde); margin-bottom: 24px; }
.acceso-cuenta > div { min-width: 0; display: grid; gap: 5px; }
.acceso-cuenta span { color: var(--gris-niebla); font-size: 12px; }
.acceso-cuenta strong { overflow-wrap: anywhere; font-size: 14px; font-weight: 500; }
.acceso-cuenta button { flex-shrink: 0; font-size: 12px; }
@media (max-width: 1100px) and (min-width: 821px) {
  .acceso-layout { grid-template-columns: minmax(0, .85fr) minmax(420px, 1fr); }
}
/* Móvil: franja visual arriba y formulario a pantalla completa. */
@media (max-width: 820px) {
  .acceso-layout { display: flex; flex-direction: column; }
  .acceso-escena { position: relative; height: 132px; border-right: 0; flex: none; }
  .acceso-pagina .acceso-escena .acceso-visual-pausa { top: auto; bottom: 10px; left: 12px; width: 30px; height: 30px; }
  .acceso-lado { min-height: 0; flex: 1; }
  .acceso-cabecera { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: calc(10px + env(safe-area-inset-top)) 16px 0; }
  .acceso-cabecera .acceso-marca { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--negro-abismo) 55%, transparent); backdrop-filter: blur(10px); }
  .acceso-volver { padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--negro-abismo) 55%, transparent); backdrop-filter: blur(10px); color: var(--ac-texto); font-size: 13px; }
  .acceso-pagina .columna { max-width: 440px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .acceso-pagina .hero-entrar { margin: 0; }
  body.otp-activa .acceso-escena, body.acceso-password .acceso-escena { height: 64px; }
  body.acceso-pagina.paquete-activo .acceso-cabecera, html.en-app-cine .acceso-cabecera { position: static; padding-top: calc(16px + env(safe-area-inset-top)); }
}
@media (max-width: 380px) {
  .acceso-pagina .columna { padding-inline: 16px; }
  .acceso-cabecera-acciones .cocuyo-idioma { display: none; }
}

/* Reserva discreta mientras se comprueba la sesión; sin formulario falso ni cortina. */
.acceso-espera{display:none;min-height:220px;padding:40px 0;color:var(--gris-niebla,#a8adb7);font-size:14px}
body[data-acceso-pendiente] #contenido>:not(.acceso-espera):not(noscript){display:none!important}
body[data-acceso-pendiente] .acceso-escena{visibility:hidden}
body[data-acceso-pendiente] .acceso-espera{display:block}
.acceso-espera-linea{display:block;width:min(340px,80%);height:28px;background:var(--ac-campo,rgba(255,255,255,.07));border-radius:8px;margin-bottom:14px}
.acceso-espera-linea.corta{width:min(240px,60%);height:14px}

/* ---------- OTP de la intro (index.html) ---------- */
.acceso-codigo-label { margin: 5px 0 12px; font-size: 13px; font-weight: 550; }
.acceso-pista { font-size: 12px; color: var(--gris-niebla); line-height: 1.6; margin: 12px 0 20px; }
.acceso-estado { min-height: 18px; color: var(--verde-cocuyo); font-size: 12px; line-height: 1.5; margin: 10px 0 14px; }
#intro-otp .otp-email-barra { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--negro-borde); border-radius: 12px; background: var(--negro-elevado); }
#intro-otp .otp-email-barra span { min-width: 0; flex: 1; font-size: 13px; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
#intro-otp .otp-email-barra button { font-size: 12px; flex: 0 0 auto; min-height: 40px; padding-inline: 8px; }
/* Seis dígitos en una sola fila (antes repeat(4): heredado del código de 4). */
#intro-otp .otp-cajas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#intro-otp .otp-caja { width: 100%; max-width: none; height: 60px; border-radius: 12px; border: 1px solid var(--negro-borde); background: var(--negro-elevado); color: var(--blanco-luz); font-size: 24px; font-weight: 550; text-align: center; padding: 0; caret-color: var(--verde-cocuyo); }
#intro-otp .otp-caja:focus { outline: var(--foco-contorno); outline-offset: var(--foco-separacion); border-width: 1px; border-color: var(--verde-cocuyo); box-shadow: none; }
#intro-otp .otp-caja.con-error, #intro-otp .otp-caja[aria-invalid="true"] { border-color: var(--peligro); }
#intro-otp .otp-meta { color: var(--gris-niebla); font-size: 12px; line-height: 1.65; display: grid; gap: 10px; }
#intro-otp .otp-enlace { color: var(--verde-cocuyo); font-weight: 500; text-decoration: none; cursor: pointer; min-height: 30px; }
#intro-otp .otp-ayuda { color: var(--gris-niebla); display: inline-block; margin-top: 22px; font-size: 12px; }
#intro-otp .aviso-otp { color: var(--peligro); font-size: 13px; line-height: 1.6; margin: 10px 0; }
#intro-otp button:disabled { cursor: wait; opacity: .55; }
html[data-intro-acceso] .intro-billboard { min-height: 100svh; padding: 120px 20px 60px; }
html[data-intro-acceso] { scroll-behavior: auto; }
/* El enlace #intro-email abre una pantalla de acceso, no una sección lejana.
   Evita que el ancla inicial esconda la cabecera encima del campo. */
html[data-intro-acceso] #intro-email { scroll-margin-block-start: 100vh; scroll-margin-block-start: 100svh; }
html[data-intro-acceso] .intro-hero-contenido,
html[data-intro-acceso] .form-intro-correo { animation: none; transform: none; }
html[data-intro-acceso] .intro-mosaico { opacity: .15; }
html[data-intro-acceso] .intro-hero-contenido { max-width: 470px; width: 100%; padding: 32px; border-radius: 24px; border: 1px solid var(--negro-borde); background: var(--negro-abismo); text-align: left; }
html[data-intro-acceso] .intro-hero-contenido::before { display: none; }
html[data-intro-acceso] .intro-hero-contenido > h1 { font-size: 31px; line-height: 1.15; letter-spacing: -.04em; }
html[data-intro-acceso] .intro-tagline, html[data-intro-acceso] .intro-precio { font-size: 13px; line-height: 1.6; }
html[data-intro-acceso] .form-intro-correo { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: transparent; box-shadow: none; }
html[data-intro-acceso] .form-intro-correo input { flex: none; border: 1px solid var(--negro-borde); background: var(--negro-elevado); min-height: 54px; border-radius: 12px; text-align: left; width: 100%; }
html[data-intro-acceso] .form-intro-correo .btn { border-radius: 100px; min-height: 52px; width: 100%; }
html[data-intro-acceso] #intro-otp { padding: 0; background: transparent; border: none; }
html[data-intro-acceso] .intro-otp-titulo { font-size: 30px; font-weight: 550; letter-spacing: -.04em; }
@media (max-width: 560px) {
  #intro-otp .otp-caja { height: 54px; }
  html[data-intro-acceso] .intro-hero-contenido { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) { .acceso-pagina *, #intro-otp * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* cocuyo-css: assets/css/acceso-modal.css */
/* ============================================================
   ACCESO COCUYO — ventana de acceso y entrar.html (Familia Cocuyo,
   29-sep-2026). Negro, casi sin bordes, mucho aire; la lima solo en la
   acción principal. Escritorio: pantalla dividida con las creaciones del
   casting en movimiento. Móvil: formulario a pantalla completa con una
   franja visual discreta arriba. Colores solo desde tokens.css.
   ============================================================ */
:root {
  --ac-fondo: var(--negro-abismo);
  --ac-campo: color-mix(in srgb, var(--blanco-luz) 6%, var(--negro-abismo));
  --ac-campo-hover: color-mix(in srgb, var(--blanco-luz) 8.5%, var(--negro-abismo));
  --ac-linea: color-mix(in srgb, var(--blanco-luz) 8%, transparent);
  --ac-linea-fuerte: color-mix(in srgb, var(--blanco-luz) 20%, transparent);
  /* Borde de los campos (revisión de diseño, 5-oct-2026): sin él, el
     recuadro al 6 % quedaba a 1,1:1 del fondo y solo se veía el texto de
     ejemplo flotando. Es el mismo blanco al 32 % de los subrayados. */
  --ac-borde-campo: color-mix(in srgb, var(--blanco-luz) 32%, transparent);
  --ac-texto: var(--blanco-luz);
  --ac-texto-2: color-mix(in srgb, var(--blanco-luz) 70%, var(--negro-abismo));
  --ac-texto-3: color-mix(in srgb, var(--blanco-luz) 52%, var(--negro-abismo));
  --ac-lima: var(--verde-cocuyo);
  --ac-foco: 0 0 0 3px color-mix(in srgb, var(--verde-cocuyo) 22%, transparent);
  --ac-error: var(--peligro);
  --ac-foco-error: 0 0 0 3px color-mix(in srgb, var(--peligro) 20%, transparent);
  --ac-curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Diálogo ---------- */
html.acceso-modal-abierto { overflow: hidden; }
.acceso-modal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 468px); width: min(1080px, calc(100% - 48px)); height: min(700px, calc(100dvh - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--ac-linea); border-radius: 22px; background: var(--ac-fondo); color: var(--ac-texto); box-shadow: var(--sombra-3); font-family: var(--fuente); overflow: hidden; overscroll-behavior: contain; }
.acceso-modal:not([open]) { display: none; }
.acceso-modal::backdrop { background: color-mix(in srgb, var(--negro-abismo) 84%, transparent); backdrop-filter: blur(8px); }
.acceso-modal[open] { animation: ac-entrada 260ms var(--ac-curva); }
@keyframes ac-entrada { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
/* crear.html (y sus traducciones) carga esta hoja SIN tokens.css: los parches
   de [hidden] se quedan y el foco lleva valores de respaldo (5-oct-2026). */
.acceso-modal [hidden] { display: none !important; }
.acceso-modal button, .acceso-modal a, .acceso-modal input { -webkit-tap-highlight-color: transparent; }
.acceso-modal button { font-family: inherit; cursor: pointer; }
.acceso-modal-visual { position: relative; min-width: 0; min-height: 0; }
.acceso-modal-contenido { position: relative; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 64px 52px 40px; }
.acceso-modal-formulario { width: 100%; max-width: 364px; margin: auto; }
.acceso-modal-cerrar { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ac-texto-3); transition: background-color 160ms ease, color 160ms ease; }
.acceso-modal-cerrar:hover { color: var(--ac-texto); background: var(--ac-campo); }
.acceso-modal :is(button, a):focus-visible, .acceso-legal a:focus-visible { outline: var(--foco-contorno, 2px solid var(--verde-cocuyo)); outline-offset: var(--foco-separacion, 2px); }

/* ---------- Visual de marca: mosaico del casting (compartido) ---------- */
.acceso-visual { position: relative; isolation: isolate; overflow: hidden; background: var(--negro-abismo); }
.acceso-visual-mosaico { position: absolute; inset: -4% 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 10px; }
.acceso-visual-columna { display: flex; flex-direction: column; gap: 10px; animation: ac-deriva 48s ease-in-out infinite alternate; will-change: transform; }
.acceso-visual-columna:nth-child(2) { margin-top: -22%; animation-duration: 56s; animation-direction: alternate-reverse; }
.acceso-visual-columna:nth-child(3) { margin-top: -9%; animation-duration: 52s; }
.acceso-visual-pieza { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: var(--ac-campo); }
.acceso-visual-pieza video { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes ac-deriva { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12%, 0); } }
.acceso-visual-quieto .acceso-visual-columna, .acceso-visual-quieto .acceso-visual-mosaico { animation-play-state: paused; }
.acceso-visual-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--negro-abismo) 40%, transparent) 0%, transparent 20%, transparent 36%, color-mix(in srgb, var(--negro-abismo) 78%, transparent) 62%, var(--negro-abismo) 92%), linear-gradient(90deg, transparent 70%, color-mix(in srgb, var(--negro-abismo) 60%, transparent)); }
.acceso-visual-texto { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 36px; }
.acceso-visual .acceso-visual-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--ac-texto-2); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.acceso-visual-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ac-lima); }
.acceso-visual .acceso-visual-titulo { max-width: 13ch; margin: 0; color: var(--ac-texto); font-family: var(--fuente); font-size: clamp(30px, 3.1vw, 42px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.acceso-visual .acceso-visual-sub { max-width: 34ch; margin: 12px 0 0; color: var(--ac-texto-2); font-size: 15px; line-height: 1.5; }
.acceso-visual-pausa { position: absolute; z-index: 2; top: 16px; left: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--negro-abismo) 55%, transparent); color: var(--ac-texto); backdrop-filter: blur(10px); cursor: pointer; }
.acceso-visual-pausa:hover { background: color-mix(in srgb, var(--negro-abismo) 75%, transparent); }
.acceso-visual-pausa:focus-visible { outline: var(--foco-contorno, 2px solid var(--verde-cocuyo)); outline-offset: var(--foco-separacion, 2px); }

/* ---------- Formulario (compartido con entrar.html) ---------- */
:is(.acceso-modal, .acceso-pagina) .ac-marca { display: inline-block; margin: 0 0 30px; color: var(--ac-texto); font-size: 15px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
:is(.acceso-modal, .acceso-pagina) .ac-marca .o-viva { color: var(--ac-lima); text-shadow: none; }
:is(.acceso-modal, .acceso-pagina) .ac-titulo { margin: 0; color: var(--ac-texto); font-family: var(--fuente); font-size: 30px; font-weight: 550; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; outline: none; }
:is(.acceso-modal, .acceso-pagina) .ac-sub { margin: 10px 0 30px; color: var(--ac-texto-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
:is(.acceso-modal, .acceso-pagina) .ac-titulo:focus, :is(.acceso-modal, .acceso-pagina) .ac-titulo:focus-visible { outline: none; box-shadow: none; }
:is(.acceso-modal, .acceso-pagina) .ac-social { min-height: 0; }
:is(.acceso-modal, .acceso-pagina) .ac-social .acceso-social-separador { margin-top: 24px; }
:is(.acceso-modal, .acceso-pagina) [data-am-form], :is(.acceso-modal, .acceso-pagina) .ac-form { display: flex; flex-direction: column; margin: 0; }
:is(.acceso-modal, .acceso-pagina) .ac-label { display: block; margin: 22px 0 8px; color: var(--ac-texto-2); font-size: 13px; font-weight: 500; line-height: 1.4; }
:is(.acceso-modal, .acceso-pagina) [data-am-form] > .ac-label:first-child { margin-top: 18px; }
:is(.acceso-modal, .acceso-pagina) .ac-input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--ac-borde-campo); border-radius: 14px; background: var(--ac-campo); color: var(--ac-texto); font-family: inherit; font-size: 16px; line-height: 1.4; outline: none; box-shadow: none; caret-color: var(--ac-lima); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
:is(.acceso-modal, .acceso-pagina) .ac-input::placeholder { color: var(--ac-texto-3); }
:is(.acceso-modal, .acceso-pagina) .ac-input:hover { background: var(--ac-campo-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-input:focus { border-color: color-mix(in srgb, var(--verde-cocuyo) 55%, transparent); box-shadow: var(--ac-foco); background: var(--ac-campo); }
:is(.acceso-modal, .acceso-pagina) .ac-input[aria-invalid="true"], :is(.acceso-modal, .acceso-pagina) .ac-input[aria-invalid="true"]:focus { border-color: var(--ac-error); box-shadow: var(--ac-foco-error); }
:is(.acceso-modal, .acceso-pagina) .ac-aviso { margin: 10px 0 0; color: var(--ac-texto-2); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
:is(.acceso-modal, .acceso-pagina) .ac-aviso.es-error { color: var(--ac-error); }
:is(.acceso-modal, .acceso-pagina) .ac-principal { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin: 18px 0 0; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--ac-lima); color: var(--tinta-sobre-verde); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; cursor: pointer; transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease; }
:is(.acceso-modal, .acceso-pagina) .ac-principal:hover:not(:disabled) { background: var(--lima-clara); box-shadow: 0 0 22px color-mix(in srgb, var(--verde-cocuyo) 22%, transparent); }
:is(.acceso-modal, .acceso-pagina) .ac-principal:active:not(:disabled) { transform: scale(.99); }
:is(.acceso-modal, .acceso-pagina) .ac-principal:disabled { opacity: .42; cursor: not-allowed; }
:is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando] { opacity: .88; cursor: progress; }
:is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando]::before { content: ''; flex: none; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--tinta-sobre-verde) 25%, transparent); border-top-color: var(--tinta-sobre-verde); border-radius: 50%; animation: ac-giro 700ms linear infinite; }
@keyframes ac-giro { to { transform: rotate(360deg); } }
:is(.acceso-modal, .acceso-pagina) .ac-principal:focus-visible { outline: var(--foco-contorno, 2px solid var(--verde-cocuyo)); outline-offset: var(--foco-separacion, 2px); }
:is(.acceso-modal, .acceso-pagina) .ac-enlace { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 4px; border: 0; background: transparent; color: var(--ac-texto); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blanco-luz) 32%, transparent); text-underline-offset: 3px; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-enlace:hover:not(:disabled) { text-decoration-color: currentColor; }
:is(.acceso-modal, .acceso-pagina) .ac-enlace:disabled { opacity: .5; cursor: default; }
:is(.acceso-modal, .acceso-pagina) .ac-alternativa { display: flex; justify-content: center; width: 100%; margin: 14px 0 0; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio { margin: 26px 0 0; color: var(--ac-texto-3); font-size: 14px; line-height: 1.5; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio button { min-height: 44px; padding: 10px 4px; border: 0; background: transparent; color: var(--ac-texto); font: inherit; font-weight: 550; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blanco-luz) 32%, transparent); text-underline-offset: 3px; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio button:hover { text-decoration-color: currentColor; }
:is(.acceso-modal, .acceso-pagina) .ac-correo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0 0 6px; padding: 4px 6px 4px 16px; border-radius: 14px; background: var(--ac-campo); }
:is(.acceso-modal, .acceso-pagina) .ac-correo > span { min-width: 0; color: var(--ac-texto); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
:is(.acceso-modal, .acceso-pagina) .ac-correo .ac-enlace { flex: none; padding-inline: 10px; }
:is(.acceso-modal, .acceso-pagina) .ac-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja { display: block; width: 100%; min-width: 0; height: 60px; margin: 0; padding: 0; border: 1px solid var(--ac-borde-campo); border-radius: 14px; background: var(--ac-campo); color: var(--ac-texto); font-family: var(--fuente); font-size: 24px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--ac-lima); outline: none; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:hover { background: var(--ac-campo-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:focus { border-color: color-mix(in srgb, var(--verde-cocuyo) 55%, transparent); box-shadow: var(--ac-foco); background: var(--ac-campo); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja[aria-invalid="true"] { border-color: var(--ac-error); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:disabled { opacity: .6; }
:is(.acceso-modal, .acceso-pagina) .ac-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; color: var(--ac-texto-3); font-size: 13px; line-height: 1.45; }
:is(.acceso-modal, .acceso-pagina) .ac-meta .ac-enlace { flex: none; font-size: 13px; }
:is(.acceso-modal, .acceso-pagina) .ac-nota { margin: 18px 0 0; color: var(--ac-texto-3); font-size: 13px; line-height: 1.55; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-nota .ac-enlace { display: inline; min-height: 0; padding: 0; font-size: 13px; }
:is(.acceso-modal, .acceso-pagina) p.acceso-legal { margin: 16px 0 0; color: var(--ac-texto-3); font-size: 12px; line-height: 1.6; text-align: center; }

/* Alta sin casilla: frase legal pequeña y atenuada bajo el botón; enlaces
   subrayados. p.acceso-legal gana a los «.hero-entrar p» / «.intro-* p». */
p.acceso-legal { margin: 16px 0 0; color: var(--ac-texto-3); font-family: var(--fuente); font-size: 12px; font-weight: 400; line-height: 1.6; text-align: center; text-wrap: pretty; }
.acceso-legal a { color: var(--ac-texto-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blanco-luz) 32%, transparent); text-underline-offset: 3px; }
.acceso-legal a:hover { color: var(--ac-texto); text-decoration-color: currentColor; }
.acceso-legal[hidden] { display: none !important; }
.formulario > .acceso-legal { margin-top: -6px; }
.form-intro-correo .acceso-legal { flex: 0 0 100%; grid-column: 1 / -1; width: 100%; margin: 4px 0 2px; padding: 0 .75rem .35rem; color: var(--gris-niebla); }

/* Correos de novedades y ofertas (4-oct-2026): casilla OPCIONAL y desmarcada
   antes de Continuar. Discreta, alineada a la izquierda; lima solo al marcar. */
.acceso-marketing { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; color: var(--ac-texto-2); font-family: var(--fuente); font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; cursor: pointer; }
.acceso-marketing[hidden] { display: none !important; }
.acceso-marketing input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ac-lima); cursor: pointer; }
.acceso-marketing input:focus-visible { outline: var(--foco-contorno, 2px solid var(--verde-cocuyo)); outline-offset: var(--foco-separacion, 2px); }
.acceso-marketing:has(input:disabled) { opacity: .6; cursor: default; }
.form-intro-correo .acceso-marketing { flex: 0 0 100%; grid-column: 1 / -1; width: 100%; margin: 4px 0 0; padding: 0 .75rem; color: var(--gris-niebla); }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1000px) and (min-width: 821px) {
  .acceso-modal { grid-template-columns: minmax(0, .8fr) minmax(380px, 1fr); }
  .acceso-modal-contenido { padding: 56px 40px 36px; }
  .acceso-visual-texto { left: 28px; right: 28px; bottom: 28px; }
}
@media (max-height: 720px) and (min-width: 821px) {
  .acceso-modal-contenido { padding-top: 48px; padding-bottom: 28px; }
  :is(.acceso-modal, .acceso-pagina) .ac-marca { margin-bottom: 22px; }
  :is(.acceso-modal, .acceso-pagina) .ac-sub { margin-bottom: 22px; }
}

/* ---------- Móvil: pantalla completa y franja visual arriba ---------- */
@media (max-width: 820px) {
  .acceso-modal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .acceso-modal[open] { animation-name: ac-entrada-movil; }
  @keyframes ac-entrada-movil { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .acceso-modal-visual { height: calc(128px + env(safe-area-inset-top)); }
  .acceso-modal-contenido { padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); }
  .acceso-modal-formulario { max-width: 440px; margin: 0 auto; }
  .acceso-modal-cerrar { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; color: var(--ac-texto); background: color-mix(in srgb, var(--negro-abismo) 55%, transparent); backdrop-filter: blur(10px); }
  .acceso-modal-cerrar:hover { background: color-mix(in srgb, var(--negro-abismo) 75%, transparent); }
  /* Paso del código y contraseña: el teclado necesita el sitio. */
  .acceso-modal:is([data-acceso-paso="codigo"], [data-acceso-paso="password"]) .acceso-modal-visual { height: calc(56px + env(safe-area-inset-top)); }
  .acceso-modal .acceso-visual-pausa { top: auto; bottom: 10px; left: 12px; width: 30px; height: 30px; }
  :is(.acceso-modal, .acceso-pagina) .ac-marca { margin-bottom: 18px; }
  :is(.acceso-modal, .acceso-pagina) .ac-titulo { font-size: 26px; }
  :is(.acceso-modal, .acceso-pagina) .ac-sub { margin: 8px 0 22px; font-size: 15px; }
  /* Franja: una fila de tres creaciones con un paneo lento. */
  .acceso-visual-mosaico { inset: 0; padding: 0; gap: 4px; animation: ac-paneo 36s ease-in-out infinite alternate; }
  .acceso-visual-columna { gap: 0; margin-top: 0 !important; animation: none; }
  .acceso-visual-pieza { height: 100%; aspect-ratio: auto; border-radius: 0; }
  .acceso-visual-pieza:not(:first-child) { display: none; }
  .acceso-visual-texto { display: none; }
  .acceso-visual-velo { background: linear-gradient(180deg, color-mix(in srgb, var(--negro-abismo) 25%, transparent) 0%, transparent 35%, var(--negro-abismo) 100%); }
  @keyframes ac-paneo { from { transform: scale(1.08) translate3d(-2%, 0, 0); } to { transform: scale(1.08) translate3d(2%, 0, 0); } }
}
@media (max-width: 820px) and (max-height: 640px) {
  .acceso-modal-visual { height: calc(72px + env(safe-area-inset-top)); }
  :is(.acceso-modal, .acceso-pagina) .ac-marca { display: none; }
}
@media (max-width: 380px) {
  .acceso-modal-contenido { padding-inline: 16px; }
  :is(.acceso-modal, .acceso-pagina) .ac-otp { gap: 6px; }
  :is(.acceso-modal, .acceso-pagina) .ac-otp-caja { height: 54px; font-size: 22px; border-radius: 12px; }
  :is(.acceso-modal, .acceso-pagina) .ac-meta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso-modal[open], .acceso-visual-columna, .acceso-visual-mosaico { animation: none !important; }
  :is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando]::before { animation-duration: 2.4s; }
  :is(.acceso-modal, .acceso-pagina) .ac-input, :is(.acceso-modal, .acceso-pagina) .ac-otp-caja, :is(.acceso-modal, .acceso-pagina) .ac-principal, .acceso-modal-cerrar { transition: none; }
}