/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/idioma.css */
/* Un solo selector: compacto en la cabecera, con nombres completos en Preferencias. */
.cocuyo-idioma{position:relative;display:block;flex-shrink:0;min-height:44px;padding:0;border:1px solid #ffffff1a;border-radius:10px;background:#181b18;color:#e4e8e1;font:500 12px/1.2 var(--fuente,sans-serif)}
.cocuyo-idioma>summary{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 11px;list-style:none;border-radius:inherit;cursor:pointer;user-select:none;white-space:nowrap}
.cocuyo-idioma>summary::-webkit-details-marker{display:none}
.cocuyo-idioma svg{width:16px;height:16px;flex-shrink:0}
.cocuyo-idioma>summary .cocuyo-idioma-chevron{width:12px;height:12px;opacity:.65}
.cocuyo-idioma[open]>summary .cocuyo-idioma-chevron{transform:rotate(180deg)}
.cocuyo-idioma>summary:hover,.cocuyo-idioma[open]>summary{color:#fff;background:#ffffff0b}
.cocuyo-idioma>summary:focus-visible,.cocuyo-idioma-menu>button:focus-visible{outline:2px solid var(--verde-cocuyo,#b4f64b);outline-offset:3px}
.cocuyo-idioma-menu{position:absolute;z-index:100;right:0;top:calc(100% + 8px);min-width:172px;padding:5px;background:#191d19;border:1px solid #ffffff1c;border-radius:12px;box-shadow:0 12px 36px #0007;font:500 13px/1.3 var(--fuente,sans-serif);letter-spacing:normal}
.cocuyo-idioma:not([open])>.cocuyo-idioma-menu{display:none}
.cocuyo-idioma-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;margin:0;color:#d9dfd5;border:0;border-radius:7px;background:transparent;font:inherit;text-align:left;cursor:pointer}
.cocuyo-idioma-menu>button:hover{background:#ffffff0b;color:#fff}
.cocuyo-idioma-menu>button[aria-checked="true"]{color:var(--verde-cocuyo,#b4f64b);background:#b4f64b0b}
.cocuyo-idioma-menu>button>svg{width:16px;height:16px;margin-inline-start:auto;visibility:hidden}
.cocuyo-idioma-menu>button>span{min-width:0;overflow-wrap:anywhere}
/* Veinte idiomas con bandera (dueño, 4-oct-2026): rejilla de dos columnas con desplazamiento propio. */
.cocuyo-idioma-menu{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;max-width:calc(100vw - 16px);max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain}
.cocuyo-bandera{flex:none;width:24px;height:18px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb,var(--blanco-luz,#fff) 14%,transparent)}
.cocuyo-idioma>summary>.cocuyo-bandera{width:20px;height:15px}
.cocuyo-idioma-menu>button[aria-checked="true"]>svg{visibility:visible}
.cocuyo-idioma-arriba>.cocuyo-idioma-menu{top:auto;bottom:calc(100% + 8px)}
.cocuyo-idioma-derecha>.cocuyo-idioma-menu{right:auto;left:0}
.cocuyo-idioma.cocuyo-idioma-compacto{border-color:transparent;background:transparent;color:#d6dcd1;font-size:11px;letter-spacing:.04em}
.cocuyo-idioma-compacto>summary{gap:6px;padding-inline:9px}
.cabecera>.cocuyo-idioma{margin-left:auto}
/* El menú de cuenta puede desplazar su contenido: las opciones quedan dentro. */
body.studio-workbench #accmenu .acc-language{align-items:flex-start}
body.studio-workbench #accmenu .acc-language>span{padding-top:14px}
body.studio-workbench #accmenu .acc-language .cocuyo-idioma{padding:0;min-height:44px;max-width:none}
body.studio-workbench #accmenu .acc-language .cocuyo-idioma-menu{position:static;min-width:166px;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;margin:0 4px 4px;border:0;box-shadow:none;background:transparent}
@media(max-width:600px){.cocuyo-idioma-compacto>summary{width:44px;padding:0;gap:0}.cocuyo-idioma-compacto>summary [data-idioma-label],.cocuyo-idioma-compacto>summary .cocuyo-idioma-chevron{display:none}.cocuyo-idioma-compacto>summary>svg{width:17px;height:17px}.cocuyo-idioma-menu{grid-template-columns:repeat(2,minmax(0,1fr));width:min(340px,calc(100vw - 16px))}}
@media(prefers-reduced-motion:no-preference){.cocuyo-idioma>summary,.cocuyo-idioma-menu>button{transition:color .15s,background .15s}.cocuyo-idioma[open]>.cocuyo-idioma-menu{animation:cocuyo-language-in .12s ease-out}@keyframes cocuyo-language-in{from{opacity:0}to{opacity:1}}}
.apoyo-idiomas{display:flex;gap:4px;padding:4px;border:1px solid var(--negro-borde);border-radius:10px;margin-left:auto}
.apoyo-idiomas a{padding:8px;color:var(--gris-niebla);font:500 12px/1.2 sans-serif;text-decoration:none;border-radius:6px}
.apoyo-idiomas a[aria-current]{background:var(--negro-elevado);color:var(--blanco-luz)}
.apoyo-idiomas a:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
@media(max-width:480px){.apoyo-cabecera{gap:12px;flex-wrap:wrap}.apoyo-idiomas a{padding:6px}}


/* cocuyo-css: assets/css/estudio-derechos.css */
.derechos-imagen{box-sizing:border-box;width:min(500px,calc(100vw - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:34px;border:1px solid var(--border2,#343434);border-radius:22px;background:var(--surface,#121212);color:var(--text,#f8fafc);font-family:var(--font,sans-serif);overflow:auto;box-shadow:0 24px 90px #0009}
.derechos-imagen::backdrop{background:#000b;backdrop-filter:blur(6px)}
.derechos-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffff08;color:inherit;font-size:24px;cursor:pointer}
.derechos-kicker{font-size:10px;letter-spacing:.13em;color:var(--studio-accent,#aff33e);margin:0 0 12px}
.derechos-imagen h2{font-size:27px;line-height:1.2;letter-spacing:-.7px;margin:0 0 13px;font-weight:600}
.derechos-imagen form>p:not(.derechos-kicker){font-size:13px;line-height:1.65;color:var(--muted2,#a8b0a9)}
.derechos-files{max-height:76px;overflow:auto;padding:10px 14px;margin:16px 0 22px;background:#ffffff04;border:1px solid var(--border,#262626);border-radius:10px;list-style:none;font-size:12px;line-height:1.8;color:var(--muted2,#a8b0a9)}
.derechos-files li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.derechos-check{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.6;cursor:pointer}
.derechos-imagen input{accent-color:var(--studio-accent,#aff33e);width:17px;height:17px;flex:none;margin:3px 0 0}
.derechos-imagen [hidden]{display:none!important}
.derechos-note a{color:var(--text,#f8fafc);text-underline-offset:3px}
.derechos-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
.derechos-actions button{min-height:44px;padding:11px 18px;border:1px solid var(--border2,#343434);border-radius:10px;background:none;color:inherit;font:550 13px var(--font,sans-serif);cursor:pointer}
.derechos-actions [type=submit]{background:var(--studio-accent,#aff33e);border-color:transparent;color:#14200b}
.derechos-actions [type=submit]:disabled{opacity:.4;cursor:default}
.derechos-imagen :is(input,button,a):focus-visible{outline:2px solid var(--studio-accent,#aff33e);outline-offset:3px}
@media(max-width:520px){.derechos-imagen{padding:30px 22px 22px}.derechos-actions{flex-wrap:wrap}.derechos-actions button{flex:1;padding-inline:12px}}


/* 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; }
}