/* 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 — estilo Higgsfield (8-oct-2026). Mismos componentes que la
   ventana de acceso (acceso-modal.css: .ac-*, .acceso-visual y --acx-*).
   Ordenador: vídeo real de Cocuyo fijo a la izquierda (margen y esquinas de
   12) y el formulario centrado a la derecha, bajo una barra de 64 px con el
   idioma y «Volver al inicio». Móvil, tableta y app: sin vídeo; barra de
   56 px con COCUYO, el idioma y una «X»; el contenido empieza arriba.
   También conserva los estilos del OTP de la intro (#intro-otp).
   ============================================================ */
/* Lienzo liso #0b0b0b: sin el resplandor lima del fondo común (tokens.css). */
body.acceso-pagina:not(.paquete-activo)::before { content: none; display: none; }
body.acceso-pagina { min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; background: var(--acx-lienzo, #0b0b0b); color: var(--acx-texto, #f7f7f8); font-family: var(--acx-fuente); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Los pasos ocultos (hidden) nunca se ven: lo garantiza la regla común de
   tokens.css. El formulario va primero en el DOM; el vídeo, en la columna 1. */
.acceso-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr); min-height: 100vh; min-height: 100dvh; }
.acceso-escena { grid-column: 1; grid-row: 1; position: sticky; top: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); margin: 12px; border-radius: 12px; }
html.en-app-cine .acceso-escena, body.paquete-activo .acceso-escena { display: none; }
.acceso-lado { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }
.acceso-cabecera { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 16px; height: 64px; padding: 0 24px; }
/* En el ordenador la palabra COCUYO va en el formulario, no en la barra. */
.acceso-pagina .acceso-cabecera .acceso-marca { display: none; margin: 0; font-size: 20px; line-height: 28px; text-align: start; }
.acceso-cabecera-acciones { display: flex; align-items: center; gap: 16px; }
.acceso-volver { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 0 2px; border-radius: 8px; color: var(--acx-texto-2); font-size: 14px; line-height: 20px; text-decoration: none; transition: color var(--acx-t) var(--acx-curva), background-color var(--acx-t) var(--acx-curva); }
.acceso-volver:hover { color: #fff; }
.acceso-volver-x { display: none; flex: none; }
.acceso-pagina .columna { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 431px; margin: 0 auto; padding: 0 24px 24px; gap: 0; }
/* Marca + paso visible, centrados en el alto libre; el pie, abajo. */
.acceso-pagina .acceso-form-marca { margin-top: auto; padding-top: 16px; }
.acceso-pagina .hero-entrar { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0 0 auto; padding: 0; text-align: start; }
.acceso-pagina .ac-form { width: 100%; }
.acceso-pagina .acceso-correo-campos { display: flex; flex-direction: column; }
.acceso-pagina .ac-linea { margin: 0; text-align: center; }
.acceso-pagina .ac-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 52px var(--acx-lienzo) inset; }
.acceso-pagina .aviso-pago { margin: 16px 0 0; }
/* Un fallo no se pinta con el verde de «todo bien» (pasada 11-oct-2026). */
.aviso-pago.aviso-pago--error { border-color: color-mix(in srgb, var(--peligro) 55%, transparent); background: color-mix(in srgb, var(--peligro) 12%, transparent); }
.acceso-pagina .acceso-estado:empty { display: none; }
.acceso-pagina .acceso-estado { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 13px; line-height: 18px; text-align: center; }
.acceso-pagina #acceso-vinculo-volver { align-self: center; margin-top: 12px; }
.acceso-pagina .panel-revisa .ac-principal { margin-top: 6px; }
.acceso-pagina .pie-legal { flex: none; margin-top: 40px; padding: 0; color: var(--acx-texto-2); font-size: 12px; line-height: 16px; text-align: center; }
.acceso-pagina .pie-legal p { margin: 0 0 4px; }
/* Enlaces separados por aire, sin «·»: al partirse en dos líneas (árabe,
   ruso…) ninguna empieza con un punto suelto. */
.acceso-pagina .pie-legal .pie-legal-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 0; }
.acceso-pagina .pie-legal a { display: inline-flex; align-items: center; min-height: 28px; padding-inline: 4px; color: var(--acx-texto-2); text-decoration: none; }
.acceso-pagina .pie-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* 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; }
body.acceso-pagina.paquete-activo .acceso-form-marca { display: none; }
body.acceso-pagina.paquete-activo .acceso-cabecera { justify-content: space-between; }
body.acceso-pagina.paquete-activo .acceso-cabecera .acceso-marca { display: block; }
.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; }

/* ---------- Móvil, tableta y app: sin vídeo, barra con COCUYO y «X» ---------- */
@media (max-width: 1023px) {
  .acceso-layout { display: flex; flex-direction: column; }
  .acceso-escena { display: none; }
  .acceso-lado { min-height: 100vh; min-height: 100dvh; }
  .acceso-cabecera { justify-content: space-between; height: 56px; padding: env(safe-area-inset-top) 20px 0; box-sizing: content-box; }
  .acceso-pagina .acceso-cabecera .acceso-marca { display: block; }
  .acceso-cabecera-acciones { gap: 12px; }
  .acceso-volver { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .04); border-radius: 50%; background: rgba(255, 255, 255, .05); color: #fff; }
  .acceso-volver:hover { background: rgba(255, 255, 255, .1); }
  .acceso-volver-x { display: block; }
  .acceso-volver-texto { display: none; }
  .acceso-pagina .acceso-form-marca { display: none; }
  .acceso-pagina .columna { max-width: 440px; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .acceso-pagina .hero-entrar { margin: 0; }
  .acceso-pagina .hero-entrar > .ac-titulo:first-child { margin-top: 0; }
  .acceso-pagina .aviso-pago { margin: 0 0 16px; }
  .acceso-pagina .pie-legal { margin-top: auto; padding-top: 40px; }
}
html.en-app-cine .acceso-cabecera { justify-content: space-between; height: 56px; padding: env(safe-area-inset-top) 20px 0; box-sizing: content-box; }
html.en-app-cine .acceso-pagina .acceso-cabecera .acceso-marca, html.en-app-cine body.acceso-pagina .acceso-cabecera .acceso-marca { display: block; }
html.en-app-cine .acceso-volver { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .05); color: #fff; }
html.en-app-cine .acceso-volver-x { display: block; }
html.en-app-cine .acceso-volver-texto, html.en-app-cine .acceso-pagina .acceso-form-marca { display: none; }
html.en-app-cine .acceso-pagina .columna { max-width: 440px; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
html.en-app-cine .acceso-pagina .hero-entrar { margin: 0; }
html.en-app-cine .acceso-pagina .hero-entrar > .ac-titulo:first-child { margin-top: 0; }
@media (max-width: 360px) {
  .acceso-cabecera { padding-inline: 16px; }
  .acceso-pagina .columna { padding-inline: 16px; }
}
@media (max-width: 340px) {
  .acceso-cabecera-acciones .cocuyo-idioma { display: none; }
}

/* Mientras se comprueba la sesión: esqueleto del formulario con los mismos
   colores; sin formulario falso ni cortina. «Comprobando tu cuenta…» se
   anuncia al lector de pantalla. */
.acceso-espera { display: none; margin: auto 0; padding: 24px 0; }
.acceso-espera p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
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: 100%; height: 14px; margin: 12px auto 0; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.acceso-espera-linea.marca { width: 112px; height: 24px; margin-top: 0; }
.acceso-espera-linea.titulo { width: min(260px, 70%); height: 32px; margin-top: 16px; }
.acceso-espera-linea.corta { width: min(220px, 60%); }
.acceso-espera-linea.boton { height: 40px; margin-top: 16px; border-radius: 10px; }
.acceso-espera-linea.campo { height: 52px; margin-top: 32px; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.acceso-espera-linea.marca + .acceso-espera-linea.titulo { margin-top: 16px; }
@media (max-width: 1023px) {
  .acceso-espera { margin: 0; padding-top: 0; }
  .acceso-espera-linea.marca { display: none; }
  .acceso-espera-linea.titulo { margin-top: 0; }
}

/* ---------- 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 (también en el Estudio móvil) y
   formulario de entrar.html. Estilo Higgsfield (8-oct-2026): gris oscuro,
   tipografía fuerte (solo Geist), botones sobrios y la lima con moderación:
   solo en las O de COCUYO, el punto de la etiqueta, el foco, «Usar» y la
   casilla marcada. Valores literales en variables propias (--acx-*): no
   dependen de tokens.css, que crear.html no carga. El gris #737475 de
   Higgsfield (3,85:1) queda para lo desactivado; el texto secundario va en
   #898a8b (5,2:1 sobre #131517).
   ============================================================ */
.acceso-modal, .acceso-pagina, .acceso-legal, .acceso-marketing {
  --acx-fondo: #131517;
  --acx-lienzo: #0b0b0b;
  --acx-linea: rgba(255, 255, 255, .10);
  --acx-linea-suave: rgba(255, 255, 255, .08);
  --acx-linea-hover: rgba(255, 255, 255, .20);
  --acx-texto: #f7f7f8;
  --acx-texto-2: #898a8b;
  --acx-off: #737475;
  --acx-boton: #23262a;
  --acx-boton-hover: #2c2f33;
  --acx-boton-off: #292b2c;
  --acx-lima: #d1fe17;
  --acx-error: #f87171;
  --acx-curva: cubic-bezier(.4, 0, .2, 1);
  --acx-t: .2s;
  --acx-fuente: "Geist", Inter, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Ventana ---------- */
html.acceso-modal-abierto { overflow: hidden; }
.acceso-modal { display: grid; grid-template-columns: minmax(0, 535px) minmax(440px, 1fr); grid-template-rows: minmax(0, 1fr); width: min(1120px, calc(100vw - 64px)); height: min(776px, calc(100vh - 64px)); height: min(776px, calc(100dvh - 64px)); max-width: none; max-height: none; margin: auto; padding: 12px; box-sizing: border-box; border: 1px solid rgba(217, 217, 217, .04); border-radius: 24px; background: var(--acx-fondo); color: var(--acx-texto); box-shadow: inset 0 0 32px rgba(0, 0, 0, .2); font-family: var(--acx-fuente); overflow: hidden; overscroll-behavior: contain; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.acceso-modal:not([open]) { display: none; }
.acceso-modal::backdrop { background: rgba(0, 0, 0, .8); }
.acceso-modal[open] { animation: acx-entrada var(--acx-t) var(--acx-curva); }
@keyframes acx-entrada { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* crear.html (y sus traducciones) carga esta hoja SIN tokens.css. */
.acceso-modal [hidden] { display: none !important; }
.acceso-modal *, .acceso-pagina .hero-entrar * { box-sizing: border-box; }
.acceso-modal button, .acceso-modal a, .acceso-modal input { -webkit-tap-highlight-color: transparent; }
.acceso-modal button { font-family: inherit; cursor: pointer; }
/* El formulario va primero en el DOM; el vídeo ocupa la primera columna. */
.acceso-modal-visual { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; border-radius: 12px; }
.acceso-modal-contenido { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 20px 76px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
/* margin-block:auto centra; si no cabe, empieza arriba y se desplaza. */
.acceso-modal-formulario { width: 100%; max-width: 383px; margin: auto; }
.acceso-modal-cerrar { position: absolute; z-index: 3; top: 15px; inset-inline-end: 15px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .04); border-radius: 50%; background: rgba(255, 255, 255, .05); color: #fff; transition: background-color var(--acx-t) var(--acx-curva); }
.acceso-modal-cerrar:hover { background: rgba(255, 255, 255, .1); }
.acceso-modal :is(button, a, input[type="checkbox"]):focus-visible, .acceso-pagina :is(button, a, input[type="checkbox"], summary):focus-visible, .acceso-legal a:focus-visible { outline: 2px solid var(--acx-lima, #d1fe17); outline-offset: 2px; }

/* ---------- Visual de marca: un vídeo real con tres pestañas (compartido) ---------- */
.acceso-visual { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; font-family: var(--acx-fuente, sans-serif); }
.acceso-visual-clips { position: absolute; inset: 0; }
.acceso-visual-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--acx-curva, ease); }
.acceso-visual-clip.acceso-visual-activo { opacity: 1; }
/* Encuadre de cada clip (16:9) en la columna vertical: el colibrí, la
   cascada y la locutora con su micrófono. */
.acceso-visual-clip[data-acceso-visual-clip="0"] { object-position: 36% 50%; }
.acceso-visual-clip[data-acceso-visual-clip="2"] { object-position: 60% 50%; }
/* Velo algo más oscuro abajo (10-oct-2026): el subtítulo quedaba a 3,1:1
   sobre zonas claras del vídeo (la blusa de la locutora en Audio). */
.acceso-visual-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .82) 100%); }
.acceso-visual-texto { position: absolute; z-index: 2; inset-inline: 20px; bottom: 20px; }
.acceso-visual .acceso-visual-kicker { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.acceso-visual-punto { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acx-lima, #d1fe17); }
.acceso-visual .acceso-visual-titulo { margin: 12px 0 0; color: #fff; font-size: 40px; font-weight: 800; line-height: 48px; letter-spacing: -.8px; text-transform: uppercase; overflow-wrap: anywhere; }
.acceso-visual .acceso-visual-sub { max-width: 40ch; min-height: 40px; margin: 4px 0 0; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 20px; text-wrap: pretty; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.acceso-visual-pestanas { display: grid; grid-template-columns: repeat(var(--acceso-pestanas, 3), minmax(0, 1fr)); gap: 4px; margin-top: 24px; }
.acceso-visual-pestana { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0 0 2px; border: 0; border-radius: 4px; background: none; color: rgba(255, 255, 255, .6); font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; text-align: start; cursor: pointer; transition: color var(--acx-t, .2s) var(--acx-curva, ease); }
.acceso-visual-pestana:hover, .acceso-visual-pestana[aria-selected="true"] { color: #fff; }
.acceso-visual-pestana:focus-visible { outline: 2px solid var(--acx-lima, #d1fe17); outline-offset: 4px; }
.acceso-visual-pestana-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acceso-visual-barra { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.acceso-visual-barra i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .acceso-visual-barra i { transform-origin: right center; }
/* La barra activa se llena en ~9 s (unas dos vueltas del clip) y pasa a la
   siguiente pestaña. Pausa u oculta: se congela. Sistema quieto: llena. */
.acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { animation: acx-progreso 9s linear forwards; }
.acceso-visual-quieto .acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { animation-play-state: paused; }
.acceso-visual-fijo .acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { animation: none; transform: none; }
@keyframes acx-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.acceso-visual-pausa { position: absolute; z-index: 3; top: 16px; inset-inline-start: 16px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .06); border-radius: 50%; background: rgba(19, 21, 23, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color var(--acx-t, .2s) var(--acx-curva, ease); }
.acceso-visual-pausa:hover { background: rgba(19, 21, 23, .8); }
.acceso-visual-pausa:focus-visible { outline: 2px solid var(--acx-lima, #d1fe17); outline-offset: 2px; }
/* Redondos también con el foco del teclado: la regla global de crear.html
   («:focus-visible { border-radius: 6px }») los volvía cuadrados. */
.acceso-modal-cerrar:focus-visible, .acceso-visual-pausa:focus-visible { border-radius: 50%; }

/* ---------- Formulario (compartido con entrar.html) ---------- */
:is(.acceso-modal, .acceso-pagina) .ac-marca { display: block; margin: 0; color: #fff; font-family: var(--acx-fuente); font-size: 22px; font-weight: 800; line-height: 32px; letter-spacing: -.04em; text-align: center; text-decoration: none; }
:is(.acceso-modal, .acceso-pagina) .ac-marca b { font-weight: 800; color: var(--acx-lima); }
:is(.acceso-modal, .acceso-pagina) .ac-titulo { margin: 16px 0 0; color: var(--acx-texto); font-family: var(--acx-fuente); font-size: 30px; font-weight: 600; line-height: 36px; letter-spacing: -.02em; text-align: center; text-wrap: balance; outline: none; }
: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-sub { margin: 12px 0 0; color: var(--acx-texto-2); font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; text-wrap: balance; }
/* Japonés y coreano: sin partir palabras por la mitad («確 / 認», «크 / 레딧»,
   «くだ / さい»). El japonés corta por frases (auto-phrase; donde no exista,
   como siempre); el coreano, por los espacios entre palabras (y, si una
   palabra no cabe, donde haga falta). Todo el acceso: títulos, avisos y notas. */
:is(.acceso-modal, .acceso-pagina):lang(ja) { word-break: auto-phrase; }
:is(.acceso-modal, .acceso-pagina):lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
/* Bloque social a 40 px del subtítulo; sin proveedores, el campo va a 32. */
:is(.acceso-modal, .acceso-pagina) .ac-social { min-height: 0; margin: 0; }
:is(.acceso-modal, .acceso-pagina) .ac-social > .acceso-social { margin-top: 40px; }
:is(.acceso-modal, .acceso-pagina) .ac-social.ac-social-nota { margin-top: 24px; color: var(--acx-texto-2); font-size: 13px; line-height: 18px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) :is([data-am-form], .ac-form) { display: flex; flex-direction: column; margin: 32px 0 0; }
:is(.acceso-modal, .acceso-pagina) .ac-social:has(> .acceso-social:not([hidden])) ~ :is([data-am-form], .ac-form) { margin-top: 0; }
/* Consulta fallida: una línea con «Reintentar» y, sin «o», el campo a 24. */
:is(.acceso-modal, .acceso-pagina) .ac-social:has(> .acceso-social[data-social-error="si"]) ~ :is([data-am-form], .ac-form) { margin-top: 24px; }
:is(.acceso-modal, .acceso-pagina) .ac-label { display: block; margin: 0 0 8px; color: var(--acx-texto-2); font-size: 12px; font-weight: 400; line-height: 18px; text-align: start; }
:is(.acceso-modal, .acceso-pagina) .ac-input + .ac-label { margin-top: 16px; }
:is(.acceso-modal, .acceso-pagina) .ac-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(.acceso-modal, .acceso-pagina) .ac-input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--acx-linea); border-radius: 12px; background: transparent; color: #fff; font-family: inherit; font-size: 14px; line-height: 20px; outline: none; box-shadow: none; caret-color: #fff; transition: border-color var(--acx-t) var(--acx-curva); -webkit-appearance: none; appearance: none; }
:is(.acceso-modal, .acceso-pagina) .ac-input::placeholder { color: var(--acx-texto-2); opacity: 1; }
:is(.acceso-modal, .acceso-pagina) .ac-input:hover { border-color: var(--acx-linea-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-input:focus { border-color: #fff; box-shadow: none; }
/* El Estudio pinta un anillo de foco en todos los campos (body.studio-workbench):
   aquí el foco de un campo es su borde blanco, sin halo. */
html body :is(.acceso-modal, .acceso-pagina) :is(.ac-input, .ac-otp-caja):is(:focus, :focus-visible) { outline: none; box-shadow: none; }
:is(.acceso-modal, .acceso-pagina) .ac-input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 52px var(--acx-fondo) inset; transition: background-color 9999s; }
:is(.acceso-modal, .acceso-pagina) .ac-input[aria-invalid="true"], :is(.acceso-modal, .acceso-pagina) .ac-input[aria-invalid="true"]:focus { border-color: var(--acx-error); }
:is(.acceso-modal, .acceso-pagina) .ac-input:disabled { opacity: .6; }
/* El correo siempre en LTR; en árabe y urdu, alineado a la derecha. */
[dir="rtl"] :is(.acceso-modal, .acceso-pagina) .ac-input[dir="ltr"] { text-align: right; }
:is(.acceso-modal, .acceso-pagina) .ac-aviso { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 13px; line-height: 18px; text-align: start; text-wrap: pretty; }
:is(.acceso-modal, .acceso-pagina) .ac-aviso.es-error { color: var(--acx-error); }
/* Continuar: 40 px; vacío, apagado pero enfocable (aria-disabled). */
:is(.acceso-modal, .acceso-pagina) .ac-principal { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; min-height: 40px; margin: 16px 0 0; padding: 0 16px; border: 0; border-radius: 10px; background: var(--acx-boton); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; cursor: pointer; transition: background-color var(--acx-t) var(--acx-curva), color var(--acx-t) var(--acx-curva); }
:is(.acceso-modal, .acceso-pagina) .ac-principal:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--acx-boton-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-principal:is(:disabled, [aria-disabled="true"]) { background: var(--acx-boton-off); color: var(--acx-off); cursor: default; opacity: 1; }
:is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando] { background: var(--acx-boton); color: #fff; cursor: progress; }
:is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando]::before { content: ''; flex: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: acx-giro .7s linear infinite; }
@keyframes acx-giro { to { transform: rotate(360deg); } }
:is(.acceso-modal, .acceso-pagina) .ac-enlace { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 4px; border: 0; background: transparent; color: var(--acx-texto-2); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; cursor: pointer; transition: color var(--acx-t) var(--acx-curva); }
:is(.acceso-modal, .acceso-pagina) .ac-enlace:hover:not(:disabled) { color: #fff; text-decoration-color: currentColor; }
:is(.acceso-modal, .acceso-pagina) .ac-enlace:disabled { opacity: .5; cursor: default; }
/* «Entrar con contraseña» y otras vías: texto gris sin subrayado. */
:is(.acceso-modal, .acceso-pagina) .ac-alternativa { display: flex; justify-content: center; width: fit-content; min-height: 32px; margin: 12px auto 0; padding: 6px 8px; text-decoration: none; }
:is(.acceso-modal, .acceso-pagina) .ac-alternativa:hover:not(:disabled) { color: #fff; }
/* Pie con divisoria: «¿Es tu primera vez? Crea tu cuenta» / «¿Ya tienes cuenta? Login». */
:is(.acceso-modal, .acceso-pagina) :is(.ac-cambio, .ac-pie) { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--acx-linea-suave); color: var(--acx-texto-2); font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio :is(button, a) { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; padding: 0 2px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio :is(button, a):hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.acceso-modal, .acceso-pagina) .ac-pie .ac-alternativa { margin: -6px auto; }

/* ---------- Código de 6 dígitos ---------- */
:is(.acceso-modal, .acceso-pagina) .ac-correo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 4px 0 0; color: #fff; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-correo bdi { min-width: 0; overflow-wrap: anywhere; }
:is(.acceso-modal, .acceso-pagina) .ac-correo .ac-enlace { min-height: 28px; padding: 2px 4px; font-weight: 500; }
:is(.acceso-modal, .acceso-pagina) .ac-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 28px 0 0; direction: ltr; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja { display: block; width: 100%; min-width: 0; height: 56px; margin: 0; padding: 0; border: 1px solid var(--acx-linea); border-radius: 12px; background: transparent; color: #fff; font-family: var(--acx-fuente); font-size: 22px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; caret-color: #fff; outline: none; box-shadow: none; transition: border-color var(--acx-t) var(--acx-curva); -webkit-appearance: none; appearance: none; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:not(:placeholder-shown) { border-color: var(--acx-linea-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:hover { border-color: var(--acx-linea-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:focus { border-color: #fff; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja[aria-invalid="true"] { border-color: var(--acx-error); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:disabled { opacity: .6; }
:is(.acceso-modal, .acceso-pagina) .ac-reenviar { display: block; min-height: 32px; margin: 20px auto 0; padding: 6px 8px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-reenviar:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
:is(.acceso-modal, .acceso-pagina) .ac-reenviar:disabled { color: var(--acx-off); cursor: default; }
:is(.acceso-modal, .acceso-pagina) .ac-caduca { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 12px; line-height: 16px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-nota { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 12px; line-height: 16px; text-align: center; text-wrap: pretty; }
:is(.acceso-modal, .acceso-pagina) .ac-nota .ac-enlace { display: inline; min-height: 0; padding: 0; font-size: 12px; line-height: 16px; color: #fff; }

/* Alta sin casilla: frase legal pequeña bajo el botón; enlaces en blanco
   subrayados. p.acceso-legal gana a los «.hero-entrar p» / «.intro-* p». */
p.acceso-legal { margin: 12px 0 0; color: var(--acx-texto-2); font-family: var(--acx-fuente); font-size: 12px; font-weight: 400; line-height: 16px; text-align: center; text-wrap: pretty; }
.acceso-legal a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 2px; }
.acceso-legal a:hover { color: #fff; text-decoration-color: currentColor; }
.acceso-legal[hidden] { display: none !important; }
.formulario > .acceso-legal { margin-top: 12px; }
.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, #898a8b); }
/* Japonés y chino no separan palabras con espacios (10-oct-2026): en
   entrar.html el hueco entre un trozo traducido y su enlace va en su propio
   span y en esos idiomas no se pinta (la ventana lo une igual: sinEspacios). */
:lang(ja) .ac-espacio, :lang(zh) .ac-espacio { display: none; }

/* Correos de novedades y ofertas (4-oct-2026): casilla OPCIONAL y desmarcada
   antes de Continuar. Discreta; lima solo al marcar. */
.acceso-marketing { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; color: var(--acx-texto-2); font-family: var(--acx-fuente); font-size: 12px; font-weight: 400; line-height: 16px; text-align: start; cursor: pointer; }
.acceso-marketing[hidden] { display: none !important; }
.acceso-marketing input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--acx-lima); cursor: pointer; }
.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, #898a8b); }

/* ---------- Correo que no puede existir (8-oct-2026) ----------
   «¿Quisiste decir…? Usar» y «Mi correo está bien escrito» bajo el aviso del
   campo. La lima solo en el botón «Usar». */
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia { display: grid; justify-items: start; gap: 2px; margin: 8px 0 0; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia[hidden] { display: none; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 8px 8px 12px; padding-inline: 12px 8px; border-radius: 12px; background: rgba(209, 254, 23, .08); color: #e8e8e8; font-size: 13px; line-height: 18px; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-fila p { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: start; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-fila b { color: #fff; font-weight: 600; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-usar { flex: none; height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--acx-lima); color: #131517; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-usar:hover { background: #dcff4d; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia .ac-enlace { min-height: 32px; padding: 6px 0; font-size: 12px; font-weight: 400; line-height: 16px; }

/* ---------- Pantallas bajas: también cabe con Apple activo ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  :is(.acceso-modal, .acceso-pagina) .ac-titulo { margin-top: 12px; }
  :is(.acceso-modal, .acceso-pagina) .ac-social > .acceso-social { margin-top: 24px; }
  :is(.acceso-modal, .acceso-pagina) :is([data-am-form], .ac-form) { margin-top: 24px; }
  :is(.acceso-modal, .acceso-pagina) :is(.ac-cambio, .ac-pie) { margin-top: 16px; }
}

/* ---------- Tableta: sin vídeo, ventana de 560 ---------- */
@media (max-width: 1023px) {
  .acceso-modal { grid-template-columns: minmax(0, 1fr); width: min(560px, calc(100vw - 48px)); height: -moz-fit-content; height: fit-content; max-height: min(700px, calc(100vh - 48px)); max-height: min(700px, calc(100dvh - 48px)); padding: 0; }
  .acceso-modal-visual { display: none; }
  .acceso-modal-contenido { grid-column: 1; padding: 32px 40px; }
  .acceso-modal-cerrar { top: 16px; inset-inline-end: 16px; }
}

/* ---------- Móvil (también el Estudio móvil): tarjeta centrada ---------- */
@media (max-width: 640px) {
  .acceso-modal { width: min(352px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .acceso-modal-contenido { padding: 24px 20px; }
  .acceso-modal-cerrar { top: 12px; inset-inline-end: 12px; }
  :is(.acceso-modal, .acceso-pagina) .ac-social > .acceso-social { margin-top: 24px; }
  :is(.acceso-modal, .acceso-pagina) :is([data-am-form], .ac-form) { margin-top: 24px; }
  /* 16 px: el iPhone no hace zoom al escribir. */
  :is(.acceso-modal, .acceso-pagina) .ac-input { font-size: 16px; }
  :is(.acceso-modal, .acceso-pagina) .ac-principal { height: 44px; min-height: 44px; }
  :is(.acceso-modal, .acceso-pagina) .ac-otp { gap: 6px; }
  :is(.acceso-modal, .acceso-pagina) .ac-otp-caja { height: 52px; }
}
/* Con el teclado abierto (pantalla baja): hoja a pantalla completa, sin
   desplazamientos anidados. */
@media (max-width: 640px) and (max-height: 640px) {
  .acceso-modal { width: 100%; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .acceso-modal-contenido { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .acceso-modal-contenido { padding-inline: 16px; }
  :is(.acceso-modal, .acceso-pagina) .ac-titulo { font-size: 26px; line-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso-modal[open] { animation: none; }
  .acceso-visual-clip { transition: none; }
  :is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando]::before { animation-duration: 2.4s; }
  :is(.acceso-modal, .acceso-pagina) :is(.ac-input, .ac-otp-caja, .ac-principal, .ac-enlace), .acceso-modal-cerrar { transition: none; }
}