/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/cine-modelos.css */
/* Del catálogo al Estudio: crédito editorial, nunca un anuncio sobre el video.
   Colores SOLO de tokens.css (revisión de diseño, 5-oct-2026): antes había
   ~40 sueltos y un lima distinto del oficial. Las superficies con un toque verde se
   mezclan desde los tokens para conservar el aspecto. */
:root{
  --cine-motor-superficie:color-mix(in srgb,var(--verde-cocuyo) 8%,var(--negro-elevado));
  --cine-motor-superficie-baja:color-mix(in srgb,var(--verde-cocuyo) 3%,var(--negro-elevado));
  --cine-motor-superficie-media:color-mix(in srgb,var(--verde-cocuyo) 5%,var(--negro-elevado));
  --cine-motor-chip:color-mix(in srgb,var(--verde-cocuyo) 14%,var(--negro-elevado));
  --cine-motor-boton:color-mix(in srgb,var(--verde-cocuyo) 10%,var(--negro-elevado));
  --cine-motor-borde:color-mix(in srgb,var(--verde-cocuyo) 18%,var(--negro-borde));
  --cine-motor-borde-vivo:color-mix(in srgb,var(--verde-cocuyo) 35%,var(--negro-borde));
  --cine-motor-borde-claro:color-mix(in srgb,var(--verde-cocuyo) 65%,var(--negro-borde));
}
.cine-motor{display:flex;align-items:center;gap:20px;margin:28px 0 34px;padding:24px;border:1px solid var(--cine-motor-borde);border-radius:18px;background:linear-gradient(110deg,var(--cine-motor-superficie),var(--cine-motor-superficie-baja) 65%,var(--cine-motor-superficie-media));color:var(--blanco-luz);box-sizing:border-box}
.cine-motor-icono,.cine-motor-dialogo-icono{display:grid;place-items:center;flex:none;width:58px;height:58px;border:1px solid var(--cine-motor-borde-vivo);border-radius:16px;color:var(--verde-cocuyo);background:var(--cine-motor-chip)}
.cine-motor-info{flex:1;min-width:0}
.cine-motor-etiqueta{display:block;font-size:10px;font-weight:650;letter-spacing:.15em;line-height:1.4;color:var(--verde-cocuyo)}
.cine-motor-info h3{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:24px;letter-spacing:-.04em;line-height:1.1;font-weight:620;color:var(--blanco-luz)}
.cine-motor-version{padding:4px 7px;border:1px solid var(--cine-motor-borde);border-radius:6px;font-size:13px;letter-spacing:0;color:var(--gris-niebla);font-weight:550}
.cine-motor-info p{margin:0;color:var(--gris-niebla);font-size:13px;line-height:1.5}
.cine-motor-crear{display:inline-flex;align-items:center;justify-content:center;gap:13px;flex:none;min-height:46px;padding:10px 16px;border:1px solid var(--verde-cocuyo);border-radius:10px;background:var(--verde-cocuyo);color:var(--tinta-sobre-verde);text-decoration:none;line-height:1.35;font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;box-sizing:border-box;transition:background .18s,box-shadow .18s,transform .18s}
.cine-motor-crear svg{flex:none}.cine-motor-crear:hover{background:var(--lima-clara);color:var(--tinta-sobre-verde);box-shadow:0 0 0 4px color-mix(in srgb,var(--verde-cocuyo) 7%,transparent);transform:translateY(-1px)}
.cine-motor-crear:focus-visible,.cine-motor-dialogo :focus-visible{outline:2px solid var(--lima-clara);outline-offset:4px}
.cine-motor-crear[aria-busy="true"]{opacity:.65;cursor:progress}
.cine-motor-dialogo{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:38px;margin:auto;border:1px solid var(--cine-motor-borde);border-radius:24px;background:radial-gradient(ellipse at top left,var(--cine-motor-chip) 0,transparent 65%),var(--cine-motor-superficie-baja);color:var(--blanco-luz);box-shadow:0 36px 100px color-mix(in srgb,var(--negro-abismo) 53%,transparent);font-family:var(--fuente)}
.cine-motor-dialogo::backdrop{background:color-mix(in srgb,var(--negro-abismo) 72%,transparent);backdrop-filter:blur(7px)}
.cine-motor-dialogo[open]{animation:cine-motor-entrada .2s ease-out}
.cine-motor-dialogo-icono{margin-bottom:24px}.cine-motor-dialogo h2{margin:14px 0;font-size:30px;font-weight:600;letter-spacing:-.045em;line-height:1.14}.cine-motor-dialogo h2 span{color:var(--verde-cocuyo)}
.cine-motor-dialogo p{margin:0 0 26px;font-size:14px;line-height:1.65;color:var(--gris-niebla)}.cine-motor-dialogo .cine-motor-crear{width:100%;min-height:50px;font-size:14px}
.cine-motor-entrar{display:block;padding:17px 8px;text-align:center;color:var(--blanco-luz);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.cine-motor-dialogo small{display:block;margin-top:12px;color:var(--gris-humo);text-align:center;font-size:12px;line-height:1.5}
.cine-motor-cerrar{position:absolute;right:13px;top:13px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--cine-motor-borde);border-radius:50%;background:var(--cine-motor-boton);color:var(--gris-niebla);cursor:pointer;font:24px/1 var(--fuente)}
.cine-motor-aviso{position:fixed;z-index:1100;right:24px;bottom:28px;box-sizing:border-box;width:min(390px,calc(100% - 32px));padding:18px 46px 18px 18px;border:1px solid var(--cine-motor-borde-vivo);border-radius:14px;background:var(--cine-motor-superficie);color:var(--blanco-luz);box-shadow:0 12px 42px color-mix(in srgb,var(--negro-abismo) 33%,transparent);font:14px/1.5 var(--fuente)}
.cine-motor-aviso p{margin:0}.cine-motor-aviso button:not(.cine-motor-cerrar){display:block;margin-top:12px;padding:7px 12px;border:1px solid var(--cine-motor-borde-claro);border-radius:7px;background:var(--cine-motor-chip);color:var(--lima-clara);cursor:pointer;font:inherit}.cine-motor-aviso .cine-motor-cerrar{top:9px;right:9px;width:28px;height:28px;font-size:20px}
@keyframes cine-motor-entrada{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.cine-motor{flex-wrap:wrap;gap:14px;margin:22px 0 28px;padding:18px;border-radius:15px}.cine-motor-icono{width:48px;height:48px;border-radius:13px}.cine-motor-info h3{font-size:22px}.cine-motor-crear{width:100%;min-height:46px}.cine-motor-dialogo{padding:28px 24px}.cine-motor-dialogo h2{font-size:28px}.cine-motor-aviso{right:16px;bottom:max(18px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.cine-motor-crear{transition:none}.cine-motor-crear:hover{transform:none}.cine-motor-dialogo[open]{animation:none}}


/* cocuyo-css: assets/css/cine-microvideos.css */
html[data-vista="cine"] #filas .cine-obra{position:relative}
.cine-card-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.cine-preview-ready .cine-card-preview{opacity:1}
.cine-adelanto-controles [hidden]{display:none!important}
html[data-vista="cine"] .cine-obra:has([data-microvideo]) .cine-obra-abrir{display:none}
.cine-card-motion{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:12px;border:1px solid color-mix(in srgb,var(--blanco-luz) 27%,transparent);border-radius:50%;background:color-mix(in srgb,var(--negro-elevado) 79%,transparent);color:var(--blanco-luz);cursor:pointer;backdrop-filter:blur(8px)}
/* Colores de tokens.css (revisión de diseño, 5-oct-2026). */
.cine-card-motion:hover,.cine-card-motion:focus-visible{border-color:var(--verde-cocuyo);color:var(--verde-cocuyo);background:color-mix(in srgb,color-mix(in srgb,var(--verde-cocuyo) 4%,var(--negro-elevado)) 91%,transparent)}
.cine-card-motion:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
[data-playing="true"] .micro-play,[data-micro-control]:not([data-playing="true"]) .micro-pause{display:none}
@media(prefers-reduced-motion:no-preference){.cine-card-preview{transition:opacity .22s ease}}


/* cocuyo-css: assets/css/familia.css */
/* ============================================================
   COCUYO · FAMILIA — sistema de diseño de la web pública
   (dueño, 29-sep-2026: «Familia Cocuyo»; concepto aprobado en
   propuestas/familia/sistema.css, aligerado al promoverlo).
   ------------------------------------------------------------
   Una sola piel: cabecera, mega menú, menú ☰ móvil y pie comunes a
   todas las páginas públicas (fase 1) y los componentes que usarán
   las páginas al rediseñarse (fase 2).

   Acabado: ligero y limpio (Runway/Apple). Titulares Geist 500–550,
   cuerpo 400, pocas líneas (la superficie ya separa), sombras
   mínimas y la luz lima SOLO en la acción principal, muy suave.

   Reglas:
   - Colores y fuentes SOLO desde tokens.css (var()). Aquí solo hay
     tokens --f-* construidos sobre ellos. Sin colores sueltos.
   - Clases con prefijo f-: no chocan con el CSS de cada página.
   - La cabecera, la hoja ☰ y el pie se protegen de los estilos de la
     página (fuente, listas, botones, márgenes) porque conviven con
     hojas antiguas hasta la fase 2.
   - Móvil primero. Movimiento reducido: sin transiciones.
   ============================================================ */

:root {
  /* ---------- Superficies: negro con escalones muy finos ---------- */
  --f-fondo: var(--negro-abismo);
  --f-sup-1: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  --f-sup-2: color-mix(in srgb, var(--blanco-luz) 5.5%, var(--negro-abismo));
  --f-sup-3: color-mix(in srgb, var(--blanco-luz) 9%, var(--negro-abismo));
  --f-vidrio: color-mix(in srgb, var(--negro-abismo) 80%, transparent);
  /* Fondo de la cabecera y del menú lateral del móvil: el del Estudio en el móvil (≈ #0b0b0b). */
  --f-cajon-fondo: color-mix(in srgb, var(--blanco-luz) 2.4%, var(--negro-abismo));
  --f-linea: color-mix(in srgb, var(--blanco-luz) 6%, transparent);
  --f-linea-fuerte: color-mix(in srgb, var(--blanco-luz) 12%, transparent);

  /* ---------- Texto ---------- */
  --f-texto: var(--blanco-luz);
  --f-texto-2: color-mix(in srgb, var(--blanco-luz) 70%, var(--negro-abismo));
  --f-texto-3: color-mix(in srgb, var(--blanco-luz) 52%, var(--negro-abismo));

  /* ---------- Acento: lima SOLO para acción y estado activo ---------- */
  --f-lima: var(--verde-cocuyo);
  --f-lima-hover: var(--lima-clara);
  --f-lima-tinta: var(--tinta-sobre-verde);
  --f-lima-suave: color-mix(in srgb, var(--verde-cocuyo) 10%, transparent);
  --f-lima-linea: color-mix(in srgb, var(--verde-cocuyo) 32%, transparent);
  /* La única luz: el botón principal al pasar, apenas perceptible. */
  --f-luz: 0 0 18px color-mix(in srgb, var(--verde-cocuyo) 16%, transparent);

  /* ---------- Tipografía: Geist; escala fluida ---------- */
  --f-fuente: var(--fuente);
  --f-t-display: clamp(2.5rem, 1.4rem + 4.8vw, 5rem);
  --f-t-1: clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem);
  --f-t-2: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  --f-t-3: clamp(1.15rem, 1.08rem + .4vw, 1.4rem);
  --f-t-4: 1.0625rem;
  --f-t-cuerpo: 1rem;
  --f-t-lead: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --f-t-sm: .875rem;
  --f-t-xs: .75rem;
  --f-peso-display: 500;
  --f-peso-titulo: 550;
  --f-peso-cuerpo: 400;
  --f-peso-ui: 500;
  --f-tracking-display: -0.04em;
  --f-tracking-titulo: -0.025em;

  /* ---------- Espacio: base 4 px, más aire entre secciones ---------- */
  --f-e-1: 4px;  --f-e-2: 8px;  --f-e-3: 12px; --f-e-4: 16px; --f-e-5: 20px;
  --f-e-6: 24px; --f-e-8: 32px; --f-e-10: 40px; --f-e-12: 48px; --f-e-16: 64px;
  --f-seccion: clamp(88px, 5.5rem + 5vw, 168px);
  --f-gutter: 16px;
  --f-ancho: 1240px;
  --f-ancho-texto: 68ch;

  /* ---------- Forma ---------- */
  --f-r-control: 10px;
  --f-r-tarjeta: 16px;
  --f-r-media: 22px;
  --f-r-pill: 999px;

  /* ---------- Elevación mínima ---------- */
  --f-sombra-menu: 0 24px 48px color-mix(in srgb, var(--negro-abismo) 55%, transparent);

  /* ---------- Movimiento ---------- */
  --f-curva: var(--curva-suave);
  --f-rapido: 160ms var(--curva-suave);
  --f-medio: 300ms var(--curva-suave);

  /* ---------- Iconos de línea ---------- */
  --f-trazo: 1.5;

  --f-alto-cabecera: 64px;
}
@media (min-width: 960px) { :root { --f-gutter: 32px; } }

/* ============ Base (solo páginas ya migradas: <body class="familia">) ============ */
.familia {
  background: var(--f-fondo);
  color: var(--f-texto);
  font-family: var(--f-fuente);
  font-size: var(--f-t-cuerpo);
  font-weight: var(--f-peso-cuerpo);
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: clip;
}
.familia ::selection { background: var(--f-lima); color: var(--f-lima-tinta); }
.f-contenedor { width: min(100% - 2 * var(--f-gutter), var(--f-ancho)); margin-inline: auto; }
.f-seccion { padding-block: var(--f-seccion); }
.f-seccion--corta { padding-block: calc(var(--f-seccion) * .55); }
.f-seccion + .f-seccion { padding-top: 0; }
.f-separador { border: 0; border-top: 1px solid var(--f-linea); }
.f-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Tipografía ============ */
.f-display, .f-h1, .f-h2, .f-h3 { font-family: var(--f-fuente); font-weight: var(--f-peso-titulo); color: var(--f-texto); text-wrap: balance; margin: 0; }
.f-display { font-size: var(--f-t-display); font-weight: var(--f-peso-display); line-height: 1; letter-spacing: var(--f-tracking-display); }
.f-h1 { font-size: var(--f-t-1); font-weight: var(--f-peso-display); line-height: 1.05; letter-spacing: var(--f-tracking-titulo); }
.f-h2 { font-size: var(--f-t-2); line-height: 1.1; letter-spacing: var(--f-tracking-titulo); }
.f-h3 { font-size: var(--f-t-3); line-height: 1.25; letter-spacing: -0.015em; }
.f-h4 { font-size: var(--f-t-4); line-height: 1.3; font-weight: var(--f-peso-titulo); letter-spacing: -0.01em; margin: 0; }
.f-tenue { color: var(--f-texto-3); }
.f-lead { font-size: var(--f-t-lead); line-height: 1.55; color: var(--f-texto-2); max-width: 46ch; text-wrap: pretty; margin: 0; }
.f-texto { color: var(--f-texto-2); max-width: var(--f-ancho-texto); }
.f-pequeno { font-size: var(--f-t-sm); color: var(--f-texto-3); }
.f-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-t-xs); font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); }
.f-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--f-lima); }
.f-mono { font-family: var(--fuente-mono); font-size: .9em; }
.f-cabeza-seccion { display: grid; gap: var(--f-e-4); margin-bottom: var(--f-e-12); }
@media (min-width: 960px) { .f-cabeza-seccion--fila { grid-template-columns: 1fr auto; align-items: end; } }
.f-centro { text-align: center; justify-items: center; }
.f-centro .f-lead { margin-inline: auto; }

/* Wordmark: COCUYO con las dos O encendidas (ley de marca), sin halo. */
.f-marca { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-fuente); font-weight: 650; font-size: 1.125rem; letter-spacing: .07em; color: var(--f-texto); line-height: 1; text-decoration: none; white-space: nowrap; }
.f-marca .o-viva { color: var(--f-lima); text-shadow: none; }
.f-marca:focus-visible { border-radius: var(--f-r-control); }

/* ============ Botones ============ */
.f-btn {
  --alto: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto); padding: 0 20px; border-radius: var(--f-r-pill);
  font-family: var(--f-fuente); font-size: .9375rem; font-weight: var(--f-peso-ui); letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--f-rapido), color var(--f-rapido), border-color var(--f-rapido), transform var(--f-rapido), box-shadow var(--f-rapido);
}
.f-btn:focus-visible { border-radius: var(--f-r-pill); }
.f-btn:active { transform: scale(.98); }
.f-btn svg { width: 16px; height: 16px; flex: none; }
/* RTL: la flecha «siguiente» de los botones (p. ej. «ابدأ الإنشاء» del héroe) apunta
   a la izquierda, hacia donde se avanza en árabe y urdu (auditoría v338, idi-12). */
html[dir="rtl"] .f-btn svg:has(> use[href*="#i-siguiente"]) { transform: scaleX(-1); }
.f-btn.f-btn--primario { background: var(--f-lima); color: var(--f-lima-tinta); }
.f-btn.f-btn--primario:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
.f-btn.f-btn--claro { background: var(--f-texto); color: var(--negro-abismo); }
.f-btn.f-btn--claro:hover { background: color-mix(in srgb, var(--blanco-luz) 86%, var(--negro-abismo)); }
.f-btn.f-btn--secundario { background: var(--f-sup-2); color: var(--f-texto); }
.f-btn.f-btn--secundario:hover { background: var(--f-sup-3); }
.f-btn.f-btn--fantasma { background: transparent; color: var(--f-texto); border-color: var(--f-linea-fuerte); }
.f-btn.f-btn--fantasma:hover { background: var(--f-sup-2); }
.f-btn--sm { --alto: 36px; padding: 0 14px; font-size: .875rem; }
.f-btn--lg { --alto: 52px; padding: 0 26px; font-size: 1rem; }
.f-btn--bloque { width: 100%; }
.f-btn--icono { width: var(--alto); padding: 0; }
.f-btn[disabled], .f-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.f-enlace { display: inline-flex; align-items: center; gap: 6px; color: var(--f-texto); font-weight: var(--f-peso-ui); font-size: .9375rem; text-decoration: none; }
.f-enlace svg { width: 14px; height: 14px; transition: transform var(--f-rapido); }
.f-enlace:hover svg { transform: translateX(3px); }
/* RTL: las flechas de avance (icono «siguiente») de la cabecera, el menú ☰ y el
   pie apuntan a la izquierda, como el chevron del idioma (auditoría v338, MW-05). */
html[dir="rtl"] :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) svg.icono:has(> use[href*="#i-siguiente"]) { transform: scaleX(-1); }
html[dir="rtl"] :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-enlace:hover svg.icono:has(> use[href*="#i-siguiente"]) { transform: scaleX(-1) translateX(3px); }
.f-enlace:hover { color: var(--f-lima); }
.f-acciones { display: flex; flex-wrap: wrap; gap: var(--f-e-3); align-items: center; }

/* ============ Etiquetas ============ */
.f-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 9px; border-radius: var(--f-r-pill); font-size: .75rem; font-weight: var(--f-peso-ui); line-height: 1; color: var(--f-texto-2); background: var(--f-sup-2); white-space: nowrap; }
.f-chip--lima { color: var(--f-lima); background: var(--f-lima-suave); }
.f-chip--vidrio { background: var(--f-vidrio); backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); color: var(--f-texto); }
.f-chip--pronto { color: var(--f-texto-3); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
/* Insignias de los modelos (dueño, 11-oct-2026): TOP (el mejor), NEW (el más
   nuevo) y ECONÓMICO (el más barato), una de cada por medio. */
/*   Los mismos colores en todo Cocuyo: TOP rosa, NEW azul y ECONÓMICO lima. */
.f-chip--top, .f-chip--new, .f-chip--eco { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blanco-luz); }
.f-chip--top { background: var(--precio-rosa); }
.f-chip--new { background: var(--precio-azul); }
.f-chip--eco { color: var(--f-lima-tinta); background: var(--precio-lima); }
.f-punto-vivo { width: 6px; height: 6px; border-radius: 50%; background: var(--f-lima); }

/* ============ Media con clip ============ */
.f-media { position: relative; overflow: hidden; border-radius: var(--f-r-tarjeta); background: var(--f-sup-2); aspect-ratio: 16 / 10; isolation: isolate; }
.f-media > img, .f-media > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 700ms var(--f-curva); }
.f-media--cuadrada { aspect-ratio: 1; }
.f-media--vertical { aspect-ratio: 4 / 5; }
.f-media--cine { aspect-ratio: 16 / 9; }

/* ============================================================
   CABECERA COMÚN · mega menú · hoja ☰ · pie
   Protegidos de las hojas antiguas de cada página.
   ============================================================ */
/* Raíces: sin márgenes, bordes ni disposición heredados de hojas de página
   (p. ej. «footer { display:flex; padding: 30px 5vw }» de las SEO). */
.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio { margin: 0; border: 0; padding-inline: 0; font-size: 1rem; }
.f-cabecera, .f-pie { display: block; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) nav { display: block; gap: normal; font-size: inherit; color: inherit; }
/* text-align: start (no left): en árabe y urdu los títulos del menú ☰ y las
   columnas del pie van a la derecha, con sus elementos (auditoría v338, MW-05). */
.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio { font-family: var(--f-fuente); font-weight: var(--f-peso-cuerpo); line-height: 1.5; letter-spacing: -0.005em; color: var(--f-texto); text-align: start; -webkit-font-smoothing: antialiased; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) *, :where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) *::before, :where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) *::after { box-sizing: border-box; }
/* Reinicio sin peso (:where): cualquier clase f- de abajo manda sobre él. */
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(h2, h3, p) { margin: 0; font-size: inherit; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(a) { color: inherit; text-decoration: none; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(svg) { fill: none; stroke: currentColor; stroke-width: var(--f-trazo); stroke-linecap: round; stroke-linejoin: round; }
/* Iconos del sistema común (assets/icons/iconos.svg, scripts/iconos.mjs;
   helper assets/js/iconos.js). Trazo fino y color del texto; el tamaño lo
   fija cada contexto de arriba o estas tres medidas. */
.icono { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: var(--f-trazo, 1.5); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icono--16 { width: 16px; height: 16px; }
.icono--20 { width: 20px; height: 20px; }
.icono--24 { width: 24px; height: 24px; }
:where(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) :where(img, video) { display: block; max-width: none; }

.f-saltar { position: absolute; left: var(--f-gutter); top: -60px; z-index: calc(var(--z-overlay) + 1); padding: 10px 16px; border-radius: var(--f-r-pill); background: var(--f-lima); color: var(--f-lima-tinta); font: var(--f-peso-ui) .875rem/1 var(--f-fuente); text-decoration: none; }
.f-saltar:focus { top: 12px; }

/* ============ Cabecera ============ */
.f-cabecera {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  background: var(--f-vidrio);
  backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio);
  box-shadow: 0 1px 0 var(--f-linea);
}
.f-cabecera__fila { height: var(--f-alto-cabecera); display: flex; align-items: center; gap: var(--f-e-6); min-width: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav { display: none; }
.f-cabecera__fin { margin-left: auto; display: flex; align-items: center; gap: var(--f-e-2); min-width: 0; }
.f-cabecera__cta { --alto: 36px; padding: 0 16px; font-size: .875rem; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; flex: none; border-radius: var(--f-r-pill); color: var(--f-texto); }
.f-cabecera .f-menu-boton:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton svg { width: 20px; height: 20px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton:focus-visible { border-radius: var(--f-r-pill); }
/* Identidad (la de cada página: .cabecera-acciones). Login sigue en el DOM
   para la identidad pero no se ve: «Empieza a crear» es el único botón. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta { display: flex; align-items: center; gap: var(--f-e-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .cabecera-acciones { display: flex; align-items: center; gap: var(--f-e-2); margin: 0; padding: 0; flex-wrap: nowrap; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #btn-entrar-cabecera, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .saludo, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .cuenta-espera, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta [data-idioma-slot], :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta .oculto { display: none !important; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine { display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: var(--f-sup-3); color: var(--f-texto); font: var(--f-peso-ui) .8125rem/1 var(--f-fuente); overflow: hidden; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine:hover { background: color-mix(in srgb, var(--blanco-luz) 14%, var(--negro-abismo)); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine:focus-visible { border-radius: 50%; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-cuenta #avatar-cine img { width: 100%; height: 100%; object-fit: cover; }
/* Agente: solo con acceso confirmado (agente-beta.js pone data-agente-beta="si"). */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-agente { display: none; }
html[data-agente-beta="si"] .f-agente { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--f-r-pill); font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
html[data-agente-beta="si"] .f-agente:hover { color: var(--f-texto); background: var(--f-sup-2); }

@media (max-width: 380px) {
  .f-cabecera__fila { gap: var(--f-e-2); }
  .f-cabecera__fin { gap: var(--f-e-1); }
  .f-cabecera__cta { --alto: 34px; min-width: 0; padding: 4px 8px; font-size: .8125rem; line-height: 1.15; white-space: normal; text-align: center; }
  .f-cabecera .f-marca { font-size: 1rem; flex: none; }
  .f-cabecera .f-cuenta { flex: none; }
  html[data-agente-beta="si"] .f-cabecera .f-agente { display: none; }
}

@media (min-width: 1080px) {
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-menu-boton { display: none; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--f-e-4); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__item { position: static; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace {
    display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px;
    border-radius: var(--f-r-pill); font-size: .875rem; font-weight: 450; color: var(--f-texto-2); white-space: nowrap;
    transition: color var(--f-rapido), background var(--f-rapido);
  }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace:focus-visible { border-radius: var(--f-r-pill); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace svg { width: 12px; height: 12px; opacity: .55; transition: transform var(--f-medio); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace:hover, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-expanded="true"] { color: var(--f-texto); background: var(--f-sup-2); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-expanded="true"] svg { transform: rotate(180deg); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-current="page"] { color: var(--f-texto); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--f-lima); margin-left: 3px; }
}
/* Ocho apartados desde el 7-oct-2026 (Útiles gratis): entre 1080 y 1279 px
   la barra se aprieta un poco para caber en los 20 idiomas. */
/* Ordenador: la barra ocupa todo el ancho, con 24 px a cada lado, como la de
   Crear (dueño, 11-oct-2026: «para que todo se vea ya parejo»): el logo y los
   menús no saltan al pasar de una página pública al Estudio. */
@media (min-width: 1080px) { .f-cabecera .f-cabecera__fila { width: 100%; max-width: none; padding-inline: 24px; } }
.f-nav__corto { display: none; }
html:is(:lang(ru), :lang(vi)) .f-nav__largo { display: none; }
html:is(:lang(ru), :lang(vi)) .f-nav__corto { display: inline; }
@media (min-width: 1080px) and (max-width: 1279px) {
  .f-cabecera__fila { gap: var(--f-e-3); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav { margin-left: 0; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace { padding: 0 7px; }
  /* El ruso es el idioma más largo: un punto menos de letra en esta franja. */
  html:lang(ru) :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-nav__enlace { font-size: .8125rem; padding: 0 5px; }
}

/* ============ Mega menú (columnas · destacado con clip) ============ */
.f-cabecera .f-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--f-alto-cabecera)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--f-fondo);
  box-shadow: 0 1px 0 var(--f-linea), var(--f-sombra-menu);
}
.f-cabecera .f-mega:not([hidden]) { animation: f-baja 240ms var(--f-curva); }
@keyframes f-baja { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Dueño, 30-sep-2026: «al hacer clic en Imagen o Video salían TODOS los
   modelos; mejor que siga así». Arriba, a todo lo ancho, todos los modelos
   agrupados por empresa (columnas que se reparten solas); debajo, una franja
   discreta con las Apps del medio, los útiles gratis y los enlaces. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--f-e-5); padding-block: var(--f-e-6) var(--f-e-6); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col h3, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel h3 { font-size: .6875rem; font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); }
/* Todas las columnas empiezan a la misma altura que el texto del panel de
   modelos (que lleva ese mismo relleno): los títulos quedan en una línea. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col { padding-top: var(--f-e-4); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col h3 { margin-bottom: var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col .f-mega__lista + h3 { margin-top: var(--f-e-6); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista a, :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-mega__pronto {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 10px; margin-inline: -10px; border-radius: var(--f-r-control);
  font-size: .9063rem; color: var(--f-texto); transition: background var(--f-rapido);
}
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista a:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista a:focus-visible { border-radius: var(--f-r-control); }
/* Un nombre largo pasa a dos líneas antes que cortarse (idiomas, «Muy pronto»). */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__nombre { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-chip { margin-left: auto; height: 20px; padding: 0 7px; font-size: .6875rem; flex: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-mega__pronto { color: var(--f-texto-3); cursor: default; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--f-sup-2); color: var(--f-texto-2); overflow: hidden; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono svg { width: 16px; height: 16px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono img { width: 100%; height: 100%; object-fit: cover; }

/* Modelos (dueño, 29-sep-2026: «los modelos son muy importantes»): la primera
   columna, con la marca en verde Cocuyo, el nombre, una frase y «Top». La fila
   abre el editor con el modelo; el botón de la derecha, su ficha. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-logos-ia { position: absolute; width: 0; height: 0; overflow: hidden; }
/* La columna se ve primero: un panel apenas más claro. Su caja se alinea con
   el margen de la página y con la tarjeta destacada (misma línea de arriba),
   sin sobresalir; el texto va dentro, con su relleno. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos { padding: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupos { columns: 4 220px; column-gap: var(--f-e-6); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupo { break-inside: avoid; padding-bottom: var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupo h4 { margin: 0 0 2px; font-size: .75rem; font-weight: var(--f-peso-ui); letter-spacing: -0.005em; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-mega__lista .f-modelo__abrir { min-height: 44px; padding-block: 4px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-mega__icono { width: 28px; height: 28px; border-radius: 7px; background: var(--f-sup-1); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-mega__nombre { font-size: .875rem; -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__col--modelos .f-modelo__frase { font-size: .75rem; -webkit-line-clamp: 1; line-clamp: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-ia { color: var(--f-lima); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__icono.f-ia svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo { display: flex; align-items: center; margin-inline: -10px; border-radius: var(--f-r-control); transition: background var(--f-rapido); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo > a { margin-inline: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo > a:hover { background: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__abrir { flex: 1; min-width: 0; min-height: 50px; padding: 6px 4px 6px 10px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelo__txt { display: grid; gap: 1px; min-width: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelo__cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.3; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__cabeza .f-chip { margin-left: 0; }
/* La frase es el dato que distingue al modelo: si no cabe (móvil de 320 px),
   pasa a una segunda línea en vez de cortarse con puntos suspensivos. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelo__frase { font-size: .78rem; line-height: 1.35; color: var(--f-texto-3); text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__ficha { flex: none; justify-content: center; width: 36px; min-height: 36px; padding: 0; margin-right: 4px; color: var(--f-texto-3); opacity: 0; transition: opacity var(--f-rapido), color var(--f-rapido), background var(--f-rapido); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__ficha svg { width: 16px; height: 16px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo:hover .f-modelo__ficha,
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo:focus-within .f-modelo__ficha { opacity: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo > .f-modelo__ficha:hover { color: var(--f-texto); background: var(--f-sup-3); }
@media (hover: none) { :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__lista .f-modelo__ficha { opacity: 1; } }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__ver { margin-top: var(--f-e-3); min-height: 32px; }
/* Franja discreta bajo los modelos: secciones en línea, enlaces pequeños. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, .6fr); gap: var(--f-e-3) var(--f-e-8); padding-top: var(--f-e-4); box-shadow: 0 -1px 0 var(--f-linea); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__col { padding-top: 0; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__col h3 { margin-bottom: var(--f-e-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__col .f-mega__lista + h3 { margin-top: var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista { display: flex; flex-wrap: wrap; gap: 2px 4px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista :is(a, .f-mega__pronto) { min-height: 32px; gap: 7px; padding: 3px 9px 3px 4px; margin-inline: 0; font-size: .8125rem; color: var(--f-texto-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista a:hover { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__icono { width: 22px; height: 22px; border-radius: 6px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__icono svg { width: 13px; height: 13px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__nombre { -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista .f-chip { margin-left: 0; height: auto; padding: 0; background: none; font-size: .6875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__extra .f-mega__lista .f-chip--lima { color: var(--f-lima); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__pie { display: grid; align-content: start; justify-items: start; gap: 2px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__pie .f-enlace { min-height: 30px; font-size: .8125rem; }

/* Útiles gratis (dueño, 8-oct-2026: estilo Higgsfield). A la izquierda, los
   más buscados, cada uno con su icono propio (Nano Banana,
   assets/media/utiles/iconos/) y su categoría debajo; a la derecha, las
   categorías con su recuento real. Las dos, en dos columnas de cuatro filas.
   En la hoja ☰, las mismas filas en una columna.
   Ningún nombre se corta, en ningún idioma: los largos («Инструменты для
   изображений», «Transcrire un audio ou une vidéo en texte») pasan a una
   segunda línea, y en las categorías de la cabecera el recuento («37
   gratis») va debajo del nombre, no a su lado quitándole sitio (en la
   hoja ☰, con todo el ancho, sigue a su lado). */
#f-mega-utiles .f-mega__extra { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--f-e-10); padding-top: var(--f-e-2); box-shadow: none; }
#f-mega-utiles .f-mega__col h3 { margin-bottom: var(--f-e-3); }
#f-mega-utiles .f-mega__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
#f-mega-utiles .f-mega__col .f-mega__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--f-e-4); }
#f-mega-utiles .f-mega__lista a { min-height: 60px; gap: 12px; padding: 8px; margin-inline: -8px; border-radius: 14px; font-size: .875rem; color: var(--f-texto); }
#f-mega-utiles .f-mega__lista a:hover { background: var(--f-sup-2); }
#f-mega-utiles .f-mega__icono, #f-hoja-utiles .f-mega__icono { width: 44px; height: 44px; border-radius: 12px; background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto-2); }
#f-mega-utiles .f-mega__icono svg, #f-hoja-utiles .f-mega__icono svg { width: 18px; height: 18px; }
#f-mega-utiles .f-mega__lista a:hover .f-mega__icono { color: var(--f-texto); }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__txt { display: grid; gap: 1px; min-width: 0; }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__txt .f-mega__nombre { font-weight: var(--f-peso-ui); }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__lista .f-mega__nombre { display: block; overflow: visible; white-space: normal; text-overflow: clip; -webkit-line-clamp: none; line-clamp: none; overflow-wrap: break-word; hyphens: auto; text-wrap: pretty; }
:is(#f-mega-utiles, #f-hoja-utiles) .f-mega__sub { font-size: .75rem; line-height: 1.35; color: var(--f-texto-3); }
#f-mega-utiles .f-mega__lista .f-chip { margin-left: 0; margin-inline-start: auto; }
/* Categoría: icono a la izquierda; nombre y, debajo, su recuento. */
#f-mega-utiles .f-mega__lista a:has(> .f-chip) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 12px; row-gap: 2px; }
#f-mega-utiles .f-mega__lista a:has(> .f-chip) > .f-mega__icono { grid-row: 1 / span 2; align-self: center; }
#f-mega-utiles .f-mega__lista a:has(> .f-chip) > .f-mega__nombre { align-self: end; }
#f-mega-utiles .f-mega__lista a:has(> .f-chip) > .f-chip { justify-self: start; align-self: start; margin: 0; }
#f-hoja-utiles .f-mega__lista a { min-height: 56px; gap: 12px; }
#f-hoja-utiles .f-mega__icono { width: 40px; height: 40px; border-radius: 11px; }

/* Apps: categorías en filas compactas + pocas Apps destacadas pequeñas. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__rejilla--apps { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--f-e-10); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--f-e-8); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; margin-inline: -10px; border-radius: var(--f-r-control); transition: background var(--f-rapido); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat:focus-visible { border-radius: var(--f-r-control); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__img { width: 36px; height: 36px; border-radius: 9px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__txt strong { display: block; font-size: .875rem; font-weight: var(--f-peso-ui); line-height: 1.3; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__txt span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; line-height: 1.35; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat__n { flex: none; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f-e-4) var(--f-e-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app { position: relative; display: grid; gap: 7px; border-radius: 12px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app .f-media { aspect-ratio: 16 / 10; border-radius: 12px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:hover .f-media > * { transform: scale(1.04); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:focus-visible { outline: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:focus-visible .f-media { box-shadow: 0 0 0 2px var(--f-lima); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app > .f-chip { position: absolute; top: 6px; left: 6px; z-index: 1; height: 18px; padding: 0 6px; font-size: .625rem; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app .f-mega__nombre { font-size: .8125rem; color: var(--f-texto-2); -webkit-line-clamp: 1; line-clamp: 1; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-app:hover .f-mega__nombre { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas { justify-content: space-between; margin: var(--f-e-4) 0 0; padding: 10px 14px; background: var(--f-sup-1); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas strong { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas > svg { width: 16px; height: 16px; color: var(--f-texto-3); flex: none; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega-cat--todas:hover > svg { color: var(--f-lima); }
@media (max-width: 1279px) {
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-modelos__grupos { columns: 3 200px; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-mega__rejilla--apps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Hoja ☰: las empresas separan la lista larga sin cajas. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel .f-modelos__grupos { columns: auto; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel .f-modelos__grupo { padding-bottom: var(--f-e-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-hoja__panel .f-modelos__grupo h4 { margin: var(--f-e-2) 0 0 4px; }
/* ============ Menú «Tareas» de Imagen, Video y Audio (dueño, v340) ============
   Versión limpia (dueño, 11-oct-2026): panel flotante de 968 px de ancho bajo
   su botón; a la izquierda Modelos, Útiles gratis y las Apps del medio, más la
   tarjeta «Muy pronto»; a la derecha, solo nombres e imágenes. El alto es el
   del panel más alto de cada medio: al pasar por el riel no salta. Sin «Nuevo»:
   solo «Top» (rosa, como la cinta de Precios), «Beta» y «Muy pronto».
   navegacion-global.js pone --f-mega-x (alineado con el botón del menú).
   El mismo panel va en el desplegable de Crear (.f-tareas-estudio,
   estudio-explorar.js): sus reglas valen en las dos cabeceras. */
.f-cabecera .f-mega--tareas {
  left: var(--f-mega-x, var(--f-gutter)); right: auto; top: calc(100% + 8px);
  width: min(968px, calc(100vw - 32px)); max-height: none; overflow: visible;
  background: transparent; box-shadow: none;
}
/* El resto de la página se desenfoca detrás del panel (no recibe el puntero:
   al salir del panel el menú se cierra como siempre). */
.f-cabecera:has(> .f-mega--tareas:not([hidden]))::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100dvh; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--negro-abismo) 45%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: f-baja 240ms var(--f-curva);
}
:is(.f-cabecera, .f-tareas-estudio) :is(.f-tareas, .f-t-panel) { --f-t-fondo: color-mix(in srgb, var(--blanco-luz) 4.5%, var(--negro-abismo)); }
.f-tareas {
  display: grid; grid-template-columns: 262px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  max-height: calc(100dvh - var(--f-alto-cabecera) - 24px);
  border-radius: 22px; overflow: hidden;
  background: var(--f-t-fondo);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte), 0 30px 80px color-mix(in srgb, var(--negro-abismo) 70%, transparent);
}
/* Cifras aparte (nunca dentro de una frase traducida). */
:is(.f-cabecera, .f-tareas-estudio) .f-n { font-variant-numeric: tabular-nums; color: var(--f-texto-3); font-weight: var(--f-peso-cuerpo); }
/* Flechas y cheurones dibujados por el CSS (sin SVG repetido en cada página). */
:is(.f-cabecera, .f-tareas-estudio) :is(.f-t-fl, .f-t-ch) {
  flex: none; display: inline-block; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--f-t-mascara) center / contain no-repeat; mask: var(--f-t-mascara) center / contain no-repeat;
}
:is(.f-cabecera, .f-tareas-estudio) .f-t-fl { --f-t-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: transform var(--f-rapido); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-ch { --f-t-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-ch--atras, html[dir="rtl"] :is(.f-cabecera, .f-tareas-estudio) :is(.f-t-fl, .f-t-ch:not(.f-t-ch--atras)) { transform: scaleX(-1); }
html[dir="rtl"] :is(.f-cabecera, .f-tareas-estudio) .f-t-ch--atras { transform: none; }
:is(.f-cabecera, .f-tareas-estudio) a:hover > .f-t-fl { transform: translateX(3px); }
html[dir="rtl"] :is(.f-cabecera, .f-tareas-estudio) a:hover > .f-t-fl { transform: scaleX(-1) translateX(3px); }

/* ---- Riel de tareas ---- */
.f-t-riel { display: flex; flex-direction: column; min-height: 0; padding: 22px 12px 14px; background: color-mix(in srgb, var(--blanco-luz) 2.5%, var(--negro-abismo)); box-shadow: inset -1px 0 0 var(--f-linea); }
html[dir="rtl"] .f-t-riel { box-shadow: inset 1px 0 0 var(--f-linea); }
.f-t-riel__medio { margin: 0 0 12px 8px; font-size: .6875rem; font-weight: var(--f-peso-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--f-texto-3); }
.f-t-riel__lista { display: grid; gap: 2px; }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px 0 9px; border-radius: 14px;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--f-texto); text-align: start;
  transition: background var(--f-rapido);
}
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab:hover { background: var(--f-sup-2); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab[aria-selected="true"] { background: var(--f-sup-3); }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab:focus-visible { border-radius: 14px; }
.f-t-tab__icono { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--f-sup-2); color: var(--f-texto-2); }
.f-t-tab__icono svg { width: 17px; height: 17px; }
:is(.f-cabecera, .f-tareas-estudio) .f-t-tab[aria-selected="true"] .f-t-tab__icono { background: var(--f-lima-suave); color: var(--f-lima); box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-t-tab__nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-t-tab__d { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--f-texto-3); }
.f-t-tab .f-n { font-size: .875rem; }
.f-t-tab__flecha { display: inline-flex; color: var(--f-texto-3); }
.f-t-tab[aria-selected="true"] .f-t-tab__flecha { color: var(--f-texto); }
.f-t-pronto {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 12px 9px 9px; border-radius: 16px; cursor: default;
  background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--blanco-luz) 2.5%, transparent) 9px 18px), var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
}
.f-t-pronto__img { width: 50px; height: 50px; flex: none; border-radius: 12px; overflow: hidden; background: var(--negro-abismo); }
.f-t-pronto__img img, .f-ti__i img { width: 100%; height: 100%; object-fit: cover; }
.f-t-pronto__txt { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.f-t-pronto__txt strong { font-size: .875rem; font-weight: 600; line-height: 1.25; }
:is(.f-cabecera, .f-tareas-estudio) .f-chip--pronto { height: 19px; padding: 0 7px; font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--f-texto); }

/* ---- Cuerpo y paneles ---- */
/* Los paneles comparten celda: los ocultos no se ven ni se tocan, pero miden. */
.f-t-cuerpo { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; }
.f-t-panel { grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 22px 26px 0; }
/* tokens.css esconde todo [hidden] con !important: aquí se mide igual. */
.f-tareas .f-t-panel[hidden] { display: grid !important; visibility: hidden; }
.f-t-panel > ul { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.f-t-ver { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: .875rem; font-weight: 600; color: var(--f-texto); white-space: nowrap; }
.f-t-ver:hover { color: var(--f-lima); }
.f-t-ver .f-n { color: inherit; font-weight: inherit; }
.f-t-lista { display: grid; gap: 1px; }
/* Fila: icono y nombre. */
.f-ti {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px;
  min-height: 42px; padding: 2px 8px; margin-inline: -8px; border-radius: 12px; transition: background var(--f-rapido);
}
a.f-ti:hover { background: var(--f-sup-2); }
a.f-ti:focus-visible { border-radius: 12px; }
.f-ti__i { grid-row: 1; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--f-sup-2); color: var(--f-texto-2); box-shadow: inset 0 0 0 1px var(--f-linea); }
.f-ti__i svg { width: 18px; height: 18px; }
.f-ti__n { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
:is(.f-cabecera, .f-tareas-estudio) .f-chip--beta { color: var(--f-texto); background: var(--f-sup-3); }
/* Insignias de los modelos: la cinta de Precios, en cursiva. TOP rosa; NEW y
   ECONÓMICO (dueño, 11-oct-2026), azul y lima. */
:is(.f-cabecera, .f-tareas-estudio) :is(.f-chip--top, .f-tareas .f-modelo .f-chip) {
  height: 18px; padding: 0 7px; border-radius: 5px; font-size: .625rem; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blanco-luz); background: var(--precio-rosa);
}
:is(.f-cabecera, .f-tareas-estudio) .f-tareas .f-modelo .f-chip--new { background: var(--precio-azul); }
:is(.f-cabecera, .f-tareas-estudio) .f-tareas .f-modelo .f-chip--eco { color: var(--f-lima-tinta); background: var(--precio-lima); }
/* Portadas de las Apps del medio. */
.f-t-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 10px; }
.f-t-resultado { display: grid; gap: 0; padding: 4px; border-radius: 14px; background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); transition: background var(--f-rapido); }
.f-t-resultado:hover { background: var(--f-sup-2); }
.f-t-resultado:focus-visible { border-radius: 14px; }
.f-t-resultado__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--f-sup-2); }
.f-t-resultado__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--f-curva); }
.f-t-resultado:hover .f-t-resultado__img img { transform: scale(1.05); }
.f-t-resultado__img .f-chip { position: absolute; top: 6px; left: 6px; }
html[dir="rtl"] .f-t-resultado__img .f-chip { left: auto; right: 6px; }
.f-t-resultado__nombre { padding: 8px 4px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; letter-spacing: -.01em; font-weight: 600; }
/* Filas de modelo dentro de los paneles. */
.f-tareas .f-modelo { position: relative; display: flex; align-items: center; margin-inline: -8px; border-radius: 12px; transition: background var(--f-rapido); }
.f-tareas .f-modelo:hover { background: var(--f-sup-2); }
.f-tareas .f-modelo__abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 5px 8px; border-radius: 12px; }
.f-tareas .f-modelo__abrir:focus-visible { border-radius: 12px; }
.f-tareas .f-modelo .f-mega__icono { width: 40px; height: 40px; border-radius: 11px; background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto); }
.f-tareas .f-modelo:has([data-f-top], .f-chip--top) .f-mega__icono, .f-tareas .f-modelo[data-f-top] .f-mega__icono { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-rosa) 45%, transparent); }
.f-tareas .f-modelo:has(.f-chip--new) .f-mega__icono { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-azul) 55%, transparent); }
.f-tareas .f-modelo:has(.f-chip--eco) .f-mega__icono { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-lima) 40%, transparent); }
.f-tareas .f-modelo .f-mega__icono.f-ia svg { width: 19px; height: 19px; }
.f-tareas .f-modelo .f-mega__nombre { font-size: .9375rem; font-weight: 600; -webkit-line-clamp: 1; line-clamp: 1; }
.f-t-ficha { flex: none; width: 34px; height: 34px; margin-inline-end: 6px; display: grid; place-items: center; border-radius: 9px; color: var(--f-texto-3); opacity: 0; transition: opacity var(--f-rapido); }
.f-t-ficha::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.f-modelo:hover .f-t-ficha, .f-modelo:focus-within .f-t-ficha, .f-t-ficha:focus-visible { opacity: 1; }
.f-t-ficha:hover { color: var(--f-texto); background: var(--f-sup-3); }
@media (hover: none) { .f-t-ficha { opacity: 1; } }

/* ---- Listas de Modelos y Útiles gratis, y «Ver todo» al pie ---- */
:is(.f-cabecera, .f-tareas-estudio) .f-t-modelos.f-mega__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2px 28px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline: 8px; margin-inline: -8px; }
.f-t-utiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 4px 28px; }
.f-t-utiles .f-ti { min-height: 52px; }
.f-t-utiles .f-ti__i { width: 42px; height: 42px; }
.f-t-ancho__pie { display: flex; align-items: center; gap: 16px; margin: 12px -14px 0; padding: 12px 14px 14px; box-shadow: 0 -1px 0 var(--f-linea); }
/* Video tiene 16 modelos: filas algo más bajas para que quepan en el panel. */
.f-tareas .f-t-modelos .f-modelo__abrir { min-height: 46px; padding-block: 3px; }
.f-tareas .f-t-modelos .f-mega__icono { width: 36px; height: 36px; }

@media (max-width: 1079px) { :is(.f-cabecera, .f-tareas-estudio) .f-mega { display: none !important; } }

/* ============ Móvil: la misma cabecera y el mismo menú lateral que el Estudio ============
   Dueño, 11-oct-2026 («todo lo que muestre el menú viejo debe mejorarse»):
   hasta 1079 px, la cabecera pública es la del Estudio en el móvil
   (estudio-movil.css, .hf-*): botón de panel a la izquierda, COCUYO en el
   centro y, a la derecha, «Entrar» (sin sesión) o «Mejorar» (con sesión),
   en lima. Crear cuenta, idioma, avatar y Precios no se ven arriba: van en el
   menú lateral, en la barra de abajo y en el pie. Mismos colores que el
   Estudio (su fondo casi negro y su gris). :not(#f) gana a cabecera-acceso.css y
   barra-inferior.css, que se cargan después. */
@media (max-width: 1079px) {
  html:not(#f) .f-cabecera { background: var(--f-cajon-fondo); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:not(#f) .f-cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: 100%; max-width: none; margin: 0; padding-inline: 10px 9px; }
  /* El menú de ordenador (vacío aquí) no ocupa una segunda fila de la rejilla:
     así ☰, el título y «Entrar» quedan centrados en los 56 px. */
  html:not(#f) .f-cabecera .f-nav-envoltura { display: none; }
  html:not(#f) .f-cabecera__fin { display: contents; }
  html:not(#f) .f-cabecera .f-menu-boton { grid-area: 1 / 1; justify-self: start; width: 32px; height: 32px; margin: 0; border-radius: 8px; color: var(--f-texto-3); }
  html:not(#f) .f-cabecera .f-menu-boton:hover { background: transparent; color: var(--f-texto); }
  html:not(#f) .f-cabecera .f-menu-boton svg { width: 20px; height: 20px; }
  html:not(#f) .f-cabecera .f-marca { grid-area: 1 / 2; font-size: 18px; letter-spacing: -.05em; }
  html:not(#f) .f-cabecera :is(.cy-acceso--entrar, .f-mejorar) {
    grid-area: 1 / 3; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 12px;
    border-radius: 999px; background: var(--precio-lima); color: var(--f-lima-tinta); box-shadow: none; font: 500 12px/16px var(--f-fuente); white-space: nowrap;
  }
  html:not(#f) .f-cabecera :is(.cy-acceso--entrar, .f-mejorar) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html:not(#f) .f-cabecera .f-mejorar svg { width: 14px; height: 14px; flex: none; }
  html:not(#f) .f-cabecera :is(.cy-acceso--alta, .cy-idioma-cab, .cy-cab-precios, .f-cuenta, .f-agente, .f-cabecera__cta) { display: none !important; }
  html:not(#f):not([data-cy-acceso="cuenta"]) .f-cabecera .f-mejorar, html:not(#f)[data-cy-acceso="cuenta"] .f-cabecera .cy-acceso--entrar { display: none !important; }
  /* Modelo de la app (dueño, 11-oct-2026: «todo compacto y perfecto en la
     app»): cabecera de 56 px como la de Crear y, en el centro, el nombre de
     la página («Útiles gratis», «Juegos», «Apps»), como Crear enseña
     «Creaciones». Ese nombre es el último paso de las migas (la página en
     la que estás), que se sube a la cabecera: sale ya escrito en el HTML,
     sin esperar a ningún script (nada cambia después del primer pintado).
     El resto de las migas no se ve. Sin migas, sigue COCUYO. */
  html:not(#f) { --f-alto-cabecera: 56px; }
  html:not(#f) body:has(> .f-cabecera) main :is(.migas, .apps-migas):has(> [aria-current]) {
    position: fixed; z-index: calc(var(--z-nav) + 1); inset-block-start: env(safe-area-inset-top, 0px); inset-inline: var(--f-titulo-ini, 104px) var(--f-titulo-fin, 104px);
    display: flex; justify-content: center; align-items: center; block-size: var(--f-alto-cabecera); margin: 0; padding: 0; pointer-events: none;
  }
  html:not(#f) body:has(> .f-cabecera) main :is(.migas, .apps-migas):has(> [aria-current]) > :not([aria-current]) { display: none; }
  html:not(#f) body:has(> .f-cabecera) main :is(.migas, .apps-migas) > [aria-current] {
    min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--f-texto); font: 500 16px/20px var(--f-fuente); letter-spacing: 0;
  }
  html:not(#f) body:has(> .f-cabecera):has(main :is(.migas, .apps-migas) > [aria-current]) > .f-cabecera .f-marca { visibility: hidden; }
  /* Hasta que llega <main> no se sabe si habrá nombre: sin logo, para que
     con una conexión lenta no salga COCUYO y luego cambie. */
  html:not(#f) body:has(> .f-cabecera):not(:has(main)) > .f-cabecera .f-marca { visibility: hidden; }
}
/* En el teléfono, las portadas de Útiles, Apps y Juegos (las pantallas de
   la app) llevan el mismo fondo que Crear (el de la cabecera y el menú
   lateral), sin la franja más clara arriba (revisión 11-oct-2026). Solo
   ellas: en las demás páginas con migas (guías, modelos, cada útil…) sus
   tarjetas se distinguen sobre el negro de siempre. */
@media (max-width: 767px) {
  html:not(#f) body:is(.utl-portada, .apps-portada):has(> .f-cabecera),
  html:not(#f) body:is(.utl-portada, .apps-portada):has(> .f-cabecera) > .f-pie,
  html:not(#f) body.jgp:has(> .f-cabecera):has(main .jgp-indice),
  html:not(#f) body.jgp:has(> .f-cabecera):has(main .jgp-indice) > .f-pie { background: var(--f-cajon-fondo); }
  /* Pie compacto (Iván: «todo compacto»): los mismos enlaces, en letra más
     pequeña y con menos aire; cada enlace sigue con 44 px para el dedo. */
  .f-pie { padding-block: var(--f-e-10) calc(var(--f-e-6) + env(safe-area-inset-bottom)); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__rejilla { gap: var(--f-e-6) var(--f-e-4); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--f-e-4); row-gap: var(--f-e-1); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca .f-marca { font-size: 18px; letter-spacing: -.05em; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca p { grid-column: 1 / -1; grid-row: 2; font-size: .8125rem; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca .f-pie__redes { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .f-pie h2 { margin-bottom: var(--f-e-1); }
  .f-pie ul { gap: 0; }
  .f-pie ul a, .f-pie ul button { font-size: .8125rem; }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__base { margin-top: var(--f-e-6); padding-top: var(--f-e-4); font-size: .75rem; }
}
/* «Mejorar» es solo del móvil. */
.f-mejorar { display: none; }

/* ---- Menú lateral (id f-hoja; navegacion-global.js lo abre y lo cierra) ---- */
.f-cajon { position: fixed; inset: 0; z-index: calc(var(--z-nav) + 2); background: color-mix(in srgb, var(--negro-abismo) 50%, transparent); }
.f-cajon__panel {
  display: flex; flex-direction: column; width: min(327px, 87vw); height: 100%;
  padding: env(safe-area-inset-top, 0px) 0 calc(16px + env(safe-area-inset-bottom, 0px));
  border-right: 1px solid var(--f-linea); background: var(--f-cajon-fondo); color: var(--f-texto);
}
html[dir="rtl"] .f-cajon__panel { border-right: 0; border-left: 1px solid var(--f-linea); }
.f-cajon:not([hidden]) .f-cajon__panel { animation: f-cajon-entra .24s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] .f-cajon:not([hidden]) .f-cajon__panel { animation-name: f-cajon-entra-rtl; }
@keyframes f-cajon-entra { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes f-cajon-entra-rtl { from { transform: translateX(100%); } to { transform: none; } }
.f-cajon__cab { flex: none; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 10px 0 16px; }
html[dir="rtl"] .f-cajon__cab { padding: 0 16px 0 10px; }
.f-hoja .f-cajon__marca { font-size: 18px; letter-spacing: -.05em; }
.f-cajon__cerrar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--f-texto-3); }
.f-cajon__cerrar svg { width: 20px; height: 20px; }
.f-cajon__lista { flex: 1; display: grid; align-content: start; padding: 6px 16px 0; overflow: auto; overscroll-behavior: contain; }
.f-hoja .f-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px 6px 4px; border-radius: 10px; color: var(--f-texto); font: 500 16px/20px var(--f-fuente); text-align: start; }
.f-hoja .f-fila svg { flex: none; width: 24px; height: 24px; }
.f-hoja .f-fila:hover { background: color-mix(in srgb, var(--blanco-luz) 5%, transparent); }
/* La lima del menú lateral es la de la app (--precio-lima), como en Crear. */
.f-hoja .f-fila.is-actual { min-height: 44px; padding: 8px 10px 8px 8px; background: color-mix(in srgb, var(--precio-lima) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--precio-lima) 12%, transparent); color: var(--precio-lima); font-weight: 600; }
.f-hoja .f-fila.is-actual svg { width: 20px; height: 20px; }
.f-hoja :is(.f-fila, .f-cajon__cerrar, .f-cajon__entrar, .f-cajon__cuenta):focus-visible { outline: 2px solid var(--precio-lima); outline-offset: -2px; }
.f-fila__txt { flex: 1; min-width: 0; }
.f-fila__chip { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--precio-lima); color: var(--f-lima-tinta); font: 500 12px/16px var(--f-fuente); }
.f-fila__valor { color: var(--f-texto-3); font-size: 14px; }
.f-cajon__pie { flex: none; padding: 16px 16px 0; border-top: 1px solid var(--f-linea); }
.f-cajon__t { font: 500 14px/18px var(--f-fuente); color: var(--f-texto); }
.f-hoja .f-cajon__s { margin: 4px 0 20px; font: 400 14px/18px var(--f-fuente); color: var(--f-texto-3); }
.f-cajon__entrar { display: grid; place-items: center; width: 100%; height: 48px; border-radius: 999px; background: var(--blanco-luz); color: var(--f-lima-tinta); font: 500 16px/18px var(--f-fuente); }
.f-cajon__cuenta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--blanco-luz) 5%, transparent); color: var(--f-texto); }
.f-cajon__avatar { display: grid; place-items: center; grid-auto-flow: column; gap: 3px; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--f-sup-3); }
.f-cajon__avatar i { width: 6px; height: 6px; border-radius: 50%; background: var(--precio-lima); box-shadow: 0 0 6px var(--precio-lima); }
.f-cajon__cuenta-txt { flex: 1; min-width: 0; font: 500 14px/18px var(--f-fuente); }
.f-cajon__cuenta svg { width: 16px; height: 16px; color: var(--f-texto-3); }
html[dir="rtl"] .f-cajon__cuenta svg { transform: scaleX(-1); }
/* Sin sesión, «Entrar»; con sesión (data-cy-acceso, cabecera-acceso.js), la cuenta. */
html[data-cy-acceso="cuenta"] .f-cajon__visitante, html:not([data-cy-acceso="cuenta"]) .f-cajon__cuenta { display: none; }
html.f-sin-scroll, html.f-sin-scroll body { overflow: hidden; }
@media (min-width: 1080px) { .f-hoja { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .f-cajon:not([hidden]) .f-cajon__panel { animation: none; } }

/* ============ Pie ============ */
.f-pie { position: relative; z-index: 1; background: var(--f-fondo); box-shadow: 0 -1px 0 var(--f-linea); padding-block: var(--f-e-16) calc(var(--f-e-8) + env(safe-area-inset-bottom)); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__rejilla { display: grid; gap: var(--f-e-10) var(--f-e-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca { grid-column: 1 / -1; display: grid; gap: var(--f-e-3); align-content: start; justify-items: start; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca p { color: var(--f-texto-3); font-size: .9375rem; max-width: 32ch; }
.f-pie h2 { font-size: .6875rem; font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); margin-bottom: var(--f-e-4); }
.f-pie ul { display: grid; gap: 4px; }
.f-pie ul a, .f-pie ul button { display: inline-flex; align-items: center; min-height: 32px; font-size: .9063rem; color: var(--f-texto-2); text-align: start; }
.f-pie ul a:hover, .f-pie ul button:hover { color: var(--f-texto); }
.f-pie ul a:focus-visible, .f-pie ul button:focus-visible { border-radius: var(--f-r-control); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--f-e-4); margin-top: var(--f-e-12); padding-top: var(--f-e-6); box-shadow: 0 -1px 0 var(--f-linea); font-size: .8125rem; color: var(--f-texto-3); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes { display: flex; gap: 4px; margin-top: var(--f-e-1); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--f-texto-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes a:hover { color: var(--f-texto); background: var(--f-sup-2); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes svg { width: 18px; height: 18px; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__redes a:focus-visible { border-radius: 50%; }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; border-radius: var(--f-r-pill); background: var(--f-sup-1); gap: 2px; }
/* Con muchos idiomas el selector salta de línea en vez de desbordar el móvil. */
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma:has(> :nth-child(6)) { border-radius: var(--f-r-tarjeta); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma :is(button, a) { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--f-r-pill); font-size: .8125rem; color: var(--f-texto-3); font-weight: var(--f-peso-ui); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma :is(button, a):hover { color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma [aria-pressed="true"], :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma [aria-current="true"] { background: var(--f-sup-3); color: var(--f-texto); }
:is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-idioma :is(button, a):focus-visible { border-radius: var(--f-r-pill); }
/* Idioma con bandera (dueño, 4-oct-2026): un botón en el pie abre una pantalla
   grande con los 20 idiomas. Los enlaces originales siguen en el HTML, ocultos. */
.f-bandera { flex: none; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--f-linea-fuerte); }
.f-pie .f-idioma-boton { display: inline-flex; align-items: center; gap: var(--f-e-2); min-height: 40px; padding: 0 var(--f-e-3) 0 var(--f-e-2); border-radius: var(--f-r-pill); background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto-2); font-size: .875rem; font-weight: var(--f-peso-ui); }
.f-pie .f-idioma-boton:hover { color: var(--f-texto); background: var(--f-sup-2); }
.f-pie .f-idioma-boton:focus-visible { border-radius: var(--f-r-pill); }
.f-pie .f-idioma-boton svg { width: 14px; height: 14px; }
.f-idiomas { width: min(880px, calc(100vw - 2 * var(--f-gutter))); max-height: min(720px, calc(100dvh - 2 * var(--f-gutter))); margin: auto; padding: var(--f-e-6); border: 0; border-radius: var(--f-r-media); background: var(--f-sup-1); color: var(--f-texto); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte), var(--f-sombra-menu); overflow: auto; overscroll-behavior: contain; }
.f-idiomas::backdrop { background: color-mix(in srgb, var(--negro-abismo) 72%, transparent); backdrop-filter: blur(6px); }
.f-idiomas[open] { animation: f-idiomas-entra var(--f-medio) both; }
@keyframes f-idiomas-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .f-idiomas[open] { animation: none; } }
.f-idiomas__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4); margin-bottom: var(--f-e-5); }
.f-pie .f-idiomas h2 { margin: 0; font-size: var(--f-t-3); font-weight: var(--f-peso-titulo); letter-spacing: var(--f-tracking-titulo); text-transform: none; color: var(--f-texto); }
.f-idiomas__cerrar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--f-texto-2); }
.f-idiomas__cerrar:hover { color: var(--f-texto); background: var(--f-sup-3); }
.f-idiomas__cerrar:focus-visible { border-radius: 50%; }
.f-idiomas__cerrar svg { width: 20px; height: 20px; }
.f-pie .f-idiomas__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--f-e-2); }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion { display: flex; line-height: 1.2; align-items: center; gap: var(--f-e-3); width: 100%; min-height: 52px; padding: 0 var(--f-e-4); border-radius: var(--f-r-tarjeta); background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-texto-2); font-size: .9375rem; font-weight: var(--f-peso-ui); text-align: start; }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion:hover { color: var(--f-texto); background: var(--f-sup-3); }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion:focus-visible { border-radius: var(--f-r-tarjeta); }
.f-pie .f-idiomas__rejilla .f-idiomas__opcion:is([aria-current="true"], [aria-pressed="true"]) { color: var(--f-texto); background: var(--f-lima-suave); box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-idiomas__opcion .f-bandera { width: 32px; height: 24px; border-radius: 4px; }
@media (max-width: 520px) {
  .f-idiomas { padding: var(--f-e-4); }
  .f-pie .f-idiomas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-pie .f-idiomas__rejilla .f-idiomas__opcion { min-height: 48px; padding: 0 var(--f-e-3); gap: var(--f-e-2); font-size: .875rem; }
}
@media (min-width: 900px) {
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__rejilla { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
  :is(.f-cabecera, .f-hoja, .f-pie, .f-tareas-estudio) .f-pie__marca { grid-column: auto; }
}

/* ============ Páginas con la cabecera común ============
   La cabecera y el pie antiguos se quedan en el HTML solo como respaldo
   sin JavaScript (data-f-legado). Con el caparazón montado, fuera. */
html.f-caparazon [data-f-legado],
html.f-caparazon #intro-publica footer { display: none !important; }
/* Desde el primer pintado (dueño, 10-oct-2026: «al entrar se ven como 2»):
   navegacion-pronta.js, síncrono en el <head>, pone html.f-pronto cuando la
   cabecera común está en camino. Hasta que llega (html.f-caparazon) la de
   respaldo no se ve y en su sitio queda un hueco con la altura, el fondo y el
   filete de la cabecera común, pegado arriba como ella: nunca dos cabeceras
   ni saltos al montarse (navegacion-global.js la antepone a <body> en el mismo
   instante en que pone f-caparazon). Sin JavaScript no hay f-pronto y se ve la
   de respaldo; si la común no llega, navegacion-pronta.js quita f-pronto
   (al terminar de leer la página o, como tarde, 3,5 s después de verse). */
html.f-pronto:not(.f-caparazon) [data-f-legado],
html.f-pronto:not(.f-caparazon) #intro-publica footer { display: none !important; }
html.f-pronto:not(.f-caparazon) body::before {
  content: ""; display: block; position: sticky; top: 0; z-index: var(--z-nav);
  height: calc(var(--f-alto-cabecera) + env(safe-area-inset-top));
  background: var(--f-vidrio);
  backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio);
  box-shadow: 0 1px 0 var(--f-linea);
}
/* Botones de acceso ya escritos en la cabecera de las páginas generadas
   (data-cy-estatico, scripts/familia-caparazon.mjs accesoEstatico): se ven
   desde el primer pintado solo en el estado que navegacion-pronta.js anuncia
   en <html> (y que después confirman cabecera-acceso.js y barra-inferior.js).
   Sin JavaScript, o si esos scripts no llegan, no se ven y queda «Empieza a crear». */
html:not([data-cy-acceso="visitante"]) .f-cabecera .cy-acceso[data-cy-estatico],
html:not([data-cy-acceso]) .f-cabecera .cy-idioma-cab[data-cy-estatico],
html:not([data-cy-acceso="cuenta"]) .f-cabecera .cy-cab-precios[data-cy-estatico] { display: none !important; }
html.f-caparazon .cn-unified { padding-top: 0 !important; }
/* Conectores: su barra propia conserva solo «Mis conexiones» (el acceso a la
   gestión de la página), compacta bajo la cabecera común, hasta la fase 2. */
html.f-caparazon .cn-page > .cn-header { height: auto; min-height: 0; justify-content: flex-end; padding-block: var(--f-e-2); border-bottom: 0; }

/* ============================================================
   COMPONENTES (fase 2: páginas que se rediseñan con la familia)
   ============================================================ */

/* ============ Tarjeta ============ */
.f-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: var(--f-e-3);
  border-radius: calc(var(--f-r-tarjeta) + 6px); padding: 6px 6px var(--f-e-4);
  background: var(--f-sup-1); color: var(--f-texto); text-decoration: none;
  transition: background var(--f-rapido), transform var(--f-medio);
}
.f-tarjeta:hover { background: var(--f-sup-2); }
.f-tarjeta:hover .f-media > img, .f-tarjeta:hover .f-media > video { transform: scale(1.03); }
.f-tarjeta:focus-visible { border-radius: calc(var(--f-r-tarjeta) + 6px); }
.f-tarjeta__cuerpo { padding-inline: 10px; display: grid; gap: 4px; }
.f-tarjeta__titulo { font-size: var(--f-t-4); font-weight: var(--f-peso-titulo); letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.f-tarjeta__texto { font-size: .875rem; color: var(--f-texto-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-tarjeta__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .75rem; color: var(--f-texto-3); margin-top: 4px; }
.f-tarjeta__etiquetas { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; }
.f-tarjeta__ir { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--f-vidrio); backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); color: var(--f-texto); opacity: 0; transform: translateY(4px); transition: opacity var(--f-rapido), transform var(--f-medio); }
.f-tarjeta__ir svg { width: 14px; height: 14px; }
.f-tarjeta:hover .f-tarjeta__ir, .f-tarjeta:focus-visible .f-tarjeta__ir { opacity: 1; transform: none; }
.f-tarjeta--plana { padding: var(--f-e-6); gap: var(--f-e-3); border-radius: var(--f-r-media); }
.f-tarjeta--pronto { opacity: .7; }
.f-icono-caja { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--f-sup-2); color: var(--f-texto); }
.f-icono-caja svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: var(--f-trazo); stroke-linecap: round; stroke-linejoin: round; }
.f-icono-caja--lima { color: var(--f-lima); background: var(--f-lima-suave); }

/* ============ Rejillas ============ */
.f-rejilla { display: grid; gap: var(--f-e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-rejilla--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .f-rejilla--3, .f-rejilla--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-rejilla--2m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719px) { .f-rejilla--2m, .f-rejilla--1m { grid-template-columns: minmax(0, 1fr); } }
.f-carril { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--f-e-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--f-gutter); padding-bottom: 4px; margin-inline: calc(var(--f-gutter) * -1); padding-inline: var(--f-gutter); scrollbar-width: none; }
.f-carril::-webkit-scrollbar { display: none; }
.f-carril > * { scroll-snap-align: start; }
@media (min-width: 960px) { .f-carril { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* ============ Bento ============ */
.f-bento { display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
.f-bento__celda { position: relative; overflow: hidden; border-radius: var(--f-r-media); background: var(--f-sup-1); padding: var(--f-e-8); display: flex; flex-direction: column; gap: var(--f-e-2); min-height: 200px; }
.f-bento__celda .f-h3 { margin-top: auto; }
.f-bento__celda p { color: var(--f-texto-3); font-size: .9375rem; max-width: 40ch; margin: 0; }
.f-bento__celda--media { padding: 0; min-height: 320px; justify-content: flex-end; }
.f-bento__celda--media .f-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.f-bento__txt { position: relative; z-index: 1; padding: var(--f-e-8); display: grid; gap: 6px; }
.f-bento__celda--media .f-bento__txt { background: linear-gradient(to top, color-mix(in srgb, var(--negro-abismo) 88%, transparent) 20%, transparent); }
.f-bento__celda--media:hover .f-media > * { transform: scale(1.03); }
.f-bento__celda:focus-visible { border-radius: var(--f-r-media); }
.f-bento__cifra { font-size: clamp(2.6rem, 2rem + 3vw, 4.25rem); font-weight: var(--f-peso-display); letter-spacing: -0.045em; line-height: 1; }
.f-bento__cifra .lima { color: var(--f-lima); }
@media (min-width: 720px) {
  .f-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .f-bento__celda { grid-column: span 3; }
  .f-bento__celda.s2 { grid-column: span 2; }
  .f-bento__celda.s4 { grid-column: span 4; }
  .f-bento__celda.s6 { grid-column: span 6; }
  .f-bento__celda.r2 { grid-row: span 2; }
}
@media (max-width: 719px) {
  .f-bento__celda:not(.f-bento__celda--media) { min-height: 0; padding: var(--f-e-6); }
  .f-bento__celda--media { min-height: 260px; }
}

/* ============ Héroe ============ */
.f-heroe { position: relative; isolation: isolate; overflow: hidden; }
.f-heroe--video { min-height: min(88svh, 820px); display: grid; align-items: end; padding-block: calc(var(--f-e-16) * 1.5) var(--f-e-12); }
.f-heroe__fondo { position: absolute; inset: 0; z-index: -1; }
.f-heroe__fondo > video, .f-heroe__fondo > img, .f-heroe__fondo .f-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
.f-heroe__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--f-fondo) 2%, color-mix(in srgb, var(--negro-abismo) 50%, transparent) 45%, color-mix(in srgb, var(--negro-abismo) 25%, transparent)); }
.f-heroe__contenido { display: grid; gap: var(--f-e-6); max-width: 820px; }
.f-heroe--pagina { padding-block: clamp(64px, 4.5rem + 4vw, 136px) clamp(32px, 2rem + 2vw, 64px); }
@media (max-width: 719px) { .f-heroe--video { min-height: 0; padding-block: 200px 40px; } }

/* Barra de prompt */
.f-prompt { display: grid; gap: var(--f-e-3); padding: var(--f-e-3); border-radius: var(--f-r-media); background: var(--f-vidrio); backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); max-width: 720px; }
.f-prompt:focus-within { box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-prompt textarea { width: 100%; min-height: 56px; resize: none; background: transparent; border: 0; color: var(--f-texto); font-size: 1.0625rem; line-height: 1.45; padding: 8px 10px; }
.f-prompt textarea:focus-visible { box-shadow: none; outline: none; }
.f-prompt__barra { display: flex; align-items: center; gap: var(--f-e-2); flex-wrap: wrap; }
.f-prompt__barra .f-btn { margin-left: auto; }

/* ============ Pestañas ============ */
.f-tabs { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: var(--f-r-pill); background: var(--f-sup-1); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.f-tabs::-webkit-scrollbar { display: none; }
.f-tab { position: relative; z-index: 1; height: 36px; padding: 0 16px; border-radius: var(--f-r-pill); font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); white-space: nowrap; transition: color var(--f-rapido); display: inline-flex; align-items: center; gap: 6px; }
.f-tab:hover { color: var(--f-texto); }
.f-tab[aria-selected="true"], .f-tab[aria-current="true"] { color: var(--negro-abismo); }
.f-tab:focus-visible { border-radius: var(--f-r-pill); }
.f-tabs__indicador { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--f-r-pill); background: var(--f-texto); transition: transform var(--f-medio), width var(--f-medio); }

/* ============ Formularios ============ */
.f-campo { display: grid; gap: 6px; }
.f-campo label, .f-etiqueta { font-size: .8125rem; font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
.f-input, .f-select, .f-textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--f-r-control); background: var(--f-sup-1); border: 1px solid var(--f-linea-fuerte); color: var(--f-texto); font-size: .9375rem; transition: border-color var(--f-rapido), box-shadow var(--f-rapido); }
/* Los campos marcan el foco con su propio borde lima (como en Entrar): sin
   el contorno común encima, que dibujaría dos marcos a la vez. */
.f-input:focus-visible, .f-select:focus-visible, .f-textarea:focus-visible { outline: none; border-color: var(--f-lima); box-shadow: 0 0 0 3px var(--f-lima-suave); border-radius: var(--f-r-control); }
.f-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.f-ayuda { font-size: .75rem; color: var(--f-texto-3); }

/* ============ Precios ============ */
.f-segmento { display: inline-flex; padding: 4px; border-radius: var(--f-r-pill); background: var(--f-sup-1); gap: 4px; }
.f-segmento button { height: 34px; padding: 0 16px; border-radius: var(--f-r-pill); font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); display: inline-flex; align-items: center; gap: 6px; }
.f-segmento button[aria-pressed="true"] { background: var(--f-texto); color: var(--negro-abismo); }
.f-segmento button:focus-visible { border-radius: var(--f-r-pill); }
.f-planes { display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .f-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.f-plan { position: relative; display: flex; flex-direction: column; gap: var(--f-e-5); padding: var(--f-e-8) var(--f-e-6) var(--f-e-6); border-radius: var(--f-r-media); background: var(--f-sup-1); }
.f-plan--destacado { box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.f-plan__importe { font-size: clamp(2.4rem, 2rem + 1.4vw, 3.1rem); font-weight: var(--f-peso-display); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; color: var(--f-texto-2); }
.f-lista-check li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.f-lista-check svg { width: 18px; height: 18px; margin-top: 2px; color: var(--f-lima); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Preguntas (acordeón nativo) ============ */
.f-faq { display: grid; box-shadow: 0 -1px 0 var(--f-linea); }
.f-faq details { box-shadow: 0 1px 0 var(--f-linea); }
.f-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4); min-height: 64px; cursor: pointer; font-size: 1.0625rem; font-weight: var(--f-peso-ui); letter-spacing: -0.01em; }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 1.5px solid var(--f-texto-3); border-bottom: 1.5px solid var(--f-texto-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--f-medio); }
.f-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.f-faq summary:focus-visible { border-radius: var(--f-r-control); }
.f-faq p { color: var(--f-texto-2); padding: 0 0 var(--f-e-6); max-width: 62ch; margin: 0; }

/* ============ Sub-navegación de página ============ */
.f-subnav { position: sticky; top: calc(var(--f-alto-cabecera) + env(safe-area-inset-top)); z-index: 6; background: var(--f-vidrio); backdrop-filter: var(--vidrio); -webkit-backdrop-filter: var(--vidrio); box-shadow: 0 1px 0 var(--f-linea); }
.f-subnav .f-contenedor { display: flex; gap: var(--f-e-1); overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.f-subnav a { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--f-r-pill); font-size: .8125rem; font-weight: var(--f-peso-ui); color: var(--f-texto-3); white-space: nowrap; }
.f-subnav a:hover { color: var(--f-texto); }
.f-subnav a[aria-current="true"] { color: var(--f-texto); background: var(--f-sup-2); }
.f-subnav a:focus-visible { border-radius: var(--f-r-pill); }
[id].f-ancla { scroll-margin-top: calc(var(--f-alto-cabecera) + 64px); }

/* ============ Banda CTA y pasos ============ */
.f-cta { position: relative; overflow: hidden; border-radius: calc(var(--f-r-media) + 8px); padding: clamp(48px, 2.5rem + 4vw, 112px) var(--f-e-6); text-align: center; display: grid; justify-items: center; gap: var(--f-e-5); background: var(--f-sup-1); }
.f-cta .f-lead { margin-inline: auto; }
.f-cta .f-acciones { justify-content: center; }
.f-luces { display: inline-flex; gap: 10px; }
.f-luces i { width: 10px; height: 10px; border-radius: 50%; background: var(--f-lima); }
.f-pasos { display: grid; gap: var(--f-e-4); counter-reset: paso; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .f-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-paso { counter-increment: paso; padding: var(--f-e-8) var(--f-e-6); border-radius: var(--f-r-media); background: var(--f-sup-1); display: grid; gap: var(--f-e-2); align-content: start; }
.f-paso::before { content: counter(paso, decimal-leading-zero); font-family: var(--fuente-mono); font-size: .75rem; color: var(--f-lima); }
.f-paso p { color: var(--f-texto-3); font-size: .9375rem; margin: 0; }

/* ============ Aparecer al hacer scroll (sutil) ============ */
.f-aparece { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--f-curva), transform 700ms var(--f-curva); }
.f-aparece.visto { opacity: 1; transform: none; }
html.sin-js .f-aparece { opacity: 1; transform: none; }

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  :is(.familia, .f-cabecera, .f-hoja, .f-pie) *, :is(.familia, .f-cabecera, .f-hoja, .f-pie) *::before, :is(.familia, .f-cabecera, .f-hoja, .f-pie) *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .f-mega:not([hidden]), .f-hoja:not([hidden]) { animation: none; }
  .f-aparece { opacity: 1; transform: none; }
  .f-tarjeta:hover .f-media > *, .f-bento__celda--media:hover .f-media > *, .f-destacado:hover .f-media > * { transform: none; }
}

/* ============================================================
   CONTROLES v340 EN LAS PÁGINAS PÚBLICAS (dueño, 11-oct-2026:
   «todos los útiles, juegos, apps… aún se ven en la versión vieja,
   intégralo a la versión nueva»). Lleva a Útiles, Apps, guías y
   Comunidad los mismos botones, chips, carriles y campos que
   controles-v340.css pone en Crear: lima con luz arriba y rebote al
   pulsar, secundarios con contorno fino, la opción elegida en lima
   suave y campos de radio 12 con su flecha propia.
   Solo cuerpo de página: la cabecera, el mega menú, la hoja ☰ y el
   pie (f-cabecera/f-hoja/f-pie, navegacion-global) no se tocan.
   Conectores y Precios conservan sus selectores de referencia.
   Los juegos llevan lo suyo en juegos.css (también sirve en Crear).
   ============================================================ */
:root {
  --c-r-campo: 12px;
  --c-r-pill: 999px;
  --c-muelle: cubic-bezier(.34, 1.56, .64, 1);
  --c-suave: cubic-bezier(.22, 1, .36, 1);
  --c-t-hundir: 90ms;
  --c-t-volver: 320ms;
  --c-t-color: 160ms;
  --c-hundir: scale(.96);
  --c-hundir-grande: scale(.975);
  --c-lima-relieve: linear-gradient(180deg, color-mix(in srgb, var(--lima-clara) 38%, var(--verde-cocuyo)) 0%, var(--verde-cocuyo) 58%);
  --c-lima-labio: inset 0 1px 0 color-mix(in srgb, var(--blanco-luz) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--tinta-sobre-verde) 16%, transparent);
  --c-lima-halo: 0 8px 24px -10px color-mix(in srgb, var(--verde-cocuyo) 70%, transparent);
  --c-sombra-pulsado: inset 0 2px 4px color-mix(in srgb, var(--tinta-sobre-verde) 22%, transparent);
  /* Flecha de los desplegables, dibujada con dos degradados (sin colores sueltos). */
  --c-flecha: linear-gradient(45deg, transparent calc(50% - .75px), var(--f-texto-2) calc(50% - .75px), var(--f-texto-2) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(-45deg, transparent calc(50% - .75px), var(--f-texto-2) calc(50% - .75px), var(--f-texto-2) calc(50% + .75px), transparent calc(50% + .75px));
}

/* 1. Principal (lima): la acción que avanza. */
:is(.f-btn.f-btn--primario, .cta:not(.secondary), .uth-btn-primario):not(:is(.f-cabecera, .f-hoja, .f-pie) *) {
  border: 0;
  border-radius: var(--c-r-pill);
  background: var(--c-lima-relieve);
  background-color: var(--f-lima);
  color: var(--f-lima-tinta);
  box-shadow: var(--c-lima-labio);
  transition: transform var(--c-t-volver) var(--c-muelle), box-shadow var(--c-t-color) var(--c-suave), background-color var(--c-t-color) var(--c-suave), color var(--c-t-color) var(--c-suave);
}
:is(.f-btn.f-btn--primario, .cta:not(.secondary), .uth-btn-primario):not(:is(.f-cabecera, .f-hoja, .f-pie) *):hover:not(:disabled) {
  background: var(--f-lima-hover);
  box-shadow: var(--c-lima-labio), var(--c-lima-halo);
  transform: translateY(-1px);
  filter: none;
}
:is(.f-btn.f-btn--primario, .cta:not(.secondary), .uth-btn-primario):not(:is(.f-cabecera, .f-hoja, .f-pie) *):active:not(:disabled) {
  background: var(--f-lima);
  box-shadow: var(--c-sombra-pulsado);
  transform: var(--c-hundir-grande);
  transition-duration: var(--c-t-hundir);
}
/* Desactivado: gris legible, como «Generar» sin texto en Crear. */
.uth-btn-primario:disabled {
  opacity: 1;
  background: var(--f-sup-2);
  color: var(--f-texto-2);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transform: none;
}
/* Cargando (aria-busy): la franja de luz de Crear. */
:is(.uth-btn-primario, .f-btn--primario)[aria-busy="true"] {
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--blanco-luz) 32%, transparent) 50%, transparent 80%);
  background-color: var(--f-lima);
  background-size: 220% 100%;
  color: var(--f-lima-tinta);
  cursor: progress;
  animation: c-cargando-pag 1.3s linear infinite;
}
@keyframes c-cargando-pag { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* 2. Secundario y fantasma: contorno fino sobre la superficie. */
:is(.f-btn.f-btn--secundario, .f-btn.f-btn--fantasma, .cta.secondary, .uth-btn-fantasma, .uth-btn-icono, .ucal-copiar):not(:is(.f-cabecera, .f-hoja, .f-pie) *) {
  border: 0;
  background: var(--f-sup-1);
  color: var(--f-texto);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: transform var(--c-t-volver) var(--c-muelle), background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave), color var(--c-t-color) var(--c-suave);
}
:is(.f-btn.f-btn--secundario, .f-btn.f-btn--fantasma, .cta.secondary, .uth-btn-fantasma, .uth-btn-icono, .ucal-copiar):not(:is(.f-cabecera, .f-hoja, .f-pie) *):hover:not(:disabled) {
  background: var(--f-sup-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 18%, transparent);
  color: var(--f-texto);
}
:is(.f-btn, .cta, .uth-btn, .apps-flecha, .utl-flecha):not(:is(.f-cabecera, .f-hoja, .f-pie) *):active:not(:disabled) {
  transform: var(--c-hundir);
  transition-duration: var(--c-t-hundir);
}
.uth-btn-fantasma[aria-pressed="true"] {
  background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea);
  color: var(--f-texto);
}

/* 3. Carriles (segmentados): un carril con contorno fino y la opción
   elegida en lima suave (lima = lo activo), como Inicio/Final de Video. */
.uth-pastillas-op {
  gap: 2px;
  padding: 3px;
  border-radius: var(--c-r-pill);
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
}
.uth-pastillas-op { display: inline-flex; flex-wrap: wrap; justify-self: start; max-width: 100%; }
.uth-pastilla,
.ut-tabs button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--f-texto-2);
  transition: transform var(--c-t-volver) var(--c-muelle), background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave), color var(--c-t-color) var(--c-suave);
}
.uth-pastilla { border-radius: var(--c-r-pill); }
.uth-pastilla:hover:not(.is-desactivada),
.ut-tabs button:hover { background: var(--f-sup-2); color: var(--f-texto); }
.uth-pastilla.is-activa,
.ut-tabs button[aria-selected="true"] {
  background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea);
  color: var(--f-texto);
}
.uth-pastilla:active:not(.is-desactivada),
.ut-tabs button:active { transform: var(--c-hundir); transition-duration: var(--c-t-hundir); }
/* utiles.html: las tarjetas de cada útil (icono + dos líneas) son una
   rejilla, no un carril: cada una lleva la caja de los campos de Crear. */
.ut-tabs button { border-radius: var(--c-r-campo); background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.ut-tabs button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 18%, transparent); }
/* Carriles que ya existían (hubs de Útiles y Apps): solo cambia la elegida. */
.utl-tabs a[aria-current],
.apps-portada .apps-indice a[aria-current] {
  background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea);
  color: var(--f-texto);
}
.utl-tabs a[aria-current] > span { color: var(--f-texto-2); }

/* 4. Campos: caja de radio 12, contorno fino, más luz al pasar y anillo
   lima al escribir; los desplegables llevan la flecha de Crear. */
:is(.uth input:is([type=text], [type=url], [type=tel], [type=email], [type=number]), .uth select, .uth textarea, .f-input, .f-select, .f-textarea) {
  border: 0;
  border-radius: var(--c-r-campo);
  background-color: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  color: var(--f-texto);
  transition: background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave);
}
:is(.uth input:is([type=text], [type=url], [type=tel], [type=email], [type=number]), .uth select, .uth textarea, .f-input, .f-select, .f-textarea):hover:not(:disabled) {
  background-color: var(--f-sup-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 18%, transparent);
}
:is(.uth input:is([type=text], [type=url], [type=tel], [type=email], [type=number]), .uth select, .uth textarea, .f-input, .f-select, .f-textarea):focus-visible {
  outline: none;
  background-color: var(--f-sup-2);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea), 0 0 0 3px var(--f-lima-suave);
}
:is(.uth select, .f-select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: var(--c-flecha);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
:is(.uth select, .f-select) option { background: var(--f-sup-2); color: var(--f-texto); }
.uth input[type=color] { border: 0; border-radius: var(--c-r-campo); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.uth input[type=range] { accent-color: var(--f-lima); }
.uth-campo > label, .uth-pastillas legend { color: var(--f-texto-3); font-weight: var(--f-peso-ui, 500); }
/* Buscadores de los hubs: mismo contorno y anillo que los campos. */
.utl-buscar,
.apps-portada .apps-buscar {
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: background-color var(--c-t-color) var(--c-suave), box-shadow var(--c-t-color) var(--c-suave);
}
.utl-buscar:hover,
.apps-portada .apps-buscar:hover { background: var(--f-sup-2); }
.utl-buscar:focus-within,
.apps-portada .apps-buscar:focus-within { background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-lima-linea), 0 0 0 3px var(--f-lima-suave); }

/* 5. Zona de soltar archivos: misma caja que las tarjetas de Crear,
   en lima suave al pasar y con el rebote al pulsar. */
.uth-drop { border-radius: var(--c-r-campo); transition: transform var(--c-t-volver) var(--c-muelle), border-color var(--c-t-color) var(--c-suave), background-color var(--c-t-color) var(--c-suave); }
.uth-drop:hover:not(:disabled) { border-color: var(--f-lima-linea); background: var(--f-lima-suave); }
.uth-drop:active:not(:disabled) { transform: var(--c-hundir-grande); transition-duration: var(--c-t-hundir); }

@media (prefers-reduced-motion: reduce) {
  :is(.f-btn, .cta, .uth-btn, .uth-pastilla, .ut-tabs button, .uth-drop):not(:is(.f-cabecera, .f-hoja, .f-pie) *) { transition: none; transform: none !important; animation: none !important; }
}


/* cocuyo-css: assets/css/experiencia.css */
.experiencia-preview{position:fixed;bottom:16px;left:16px;z-index:110;display:flex;gap:14px;align-items:center;padding:10px 14px;background:#141614ed;border:1px solid #ffffff26;border-radius:12px;box-shadow:0 8px 30px #0006;font:500 11px/1.4 system-ui,sans-serif;color:#a6ada2;backdrop-filter:blur(15px)}
.experiencia-preview a{color:#d1fa98;text-decoration:none;white-space:nowrap}.experiencia-preview a:hover{color:white}.experiencia-preview a:focus-visible{outline:2px solid #b4f65b;outline-offset:4px}
.studio-workbench .experiencia-preview{left:auto;right:16px}
body:has(dialog[open],.modal.on,.accmenu.open) .experiencia-preview{display:none}
@media(max-width:900px){.studio-workbench .experiencia-preview{bottom:calc(72px + env(safe-area-inset-bottom));left:10px;padding:8px 10px;gap:10px;font-size:10px}}
/* El Agente se mantiene visible, con su acceso de beta privada explícito. */
.agente-beta{display:inline-flex;align-items:center;margin-inline-start:6px;padding:2px 5px;border:1px solid rgb(174 239 69 / .25);border-radius:5px;font-family:inherit;font-size:9px;font-weight:600;line-height:1.2;letter-spacing:.02em;color:#c5e9a0;background:rgb(174 239 69 / .06);vertical-align:middle}
[aria-disabled="true"]:is(.cn-agent,.sn-agent-entry,.sm-create,a[href*="vista=cocuyo"],a[data-cocuyo-abrir]){cursor:not-allowed;opacity:.65}
.cocuyo-beta-editor{display:inline-flex;margin-block-start:12px;padding:10px 16px;border:1px solid #343b35;border-radius:10px;color:#d2f7a4;text-decoration:none;font-weight:600}
.cocuyo-beta-editor:hover,.cocuyo-beta-editor:focus-visible{border-color:#a6e545;background:rgb(174 239 69 / .06)}


/* cocuyo-css: assets/css/inicio-nuevo.css */
/* ============================================================
   PORTADA (inicio-nuevo.js) — Familia Cocuyo, fase 2 (29-sep-2026).
   El interior usa los componentes de familia.css (f-seccion, f-bento,
   f-tabs, f-carril, f-tarjeta, f-cta…) con el acabado ligero: Geist
   450–550 en titulares, cuerpo 400, casi sin bordes, sombras mínimas y
   la lima solo en la acción principal. Aquí solo va lo propio de la
   portada: héroe con el casting, barra de prompt fija y ajustes finos.
   Colores SOLO desde tokens.css (y los --f-* de familia.css, que salen
   de ellos). «Reducir movimiento» apaga animaciones y vídeos automáticos.
   ============================================================ */
.inicio-layout.inuevo {
  --in-verde: var(--verde-cocuyo);
  --in-texto: var(--blanco-luz);
  --in-suave: var(--gris-niebla);
  --in-tenue: var(--gris-humo);
  --in-borde: color-mix(in srgb, var(--blanco-luz) 12%, transparent);
  --in-superficie: var(--negro-elevado);
  --in-fondo: var(--negro-abismo);
  --in-velo: color-mix(in srgb, var(--negro-abismo) 55%, transparent);
  --in-curva: var(--curva-suave);
  --in-rapida: 180ms;
  --in-media: 280ms;
  --in-lenta: 400ms;
  color: var(--in-texto);
  background: var(--in-fondo);
  font-family: var(--f-fuente, var(--fuente));
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow: clip;
  isolation: isolate;
}
/* Mientras llegan los scripts, la portada heredada (Cine, retirado de la
   oferta) no debe asomar: solo el fondo, hasta que inicio-nuevo.js la
   sustituye. Así tampoco se descargan sus imágenes diferidas. */
html[data-experiencia="nueva"] #intro-publica .inicio-layout:not(.inuevo) { min-height: 100svh; background: var(--negro-abismo); }
html[data-experiencia="nueva"] #intro-publica .inicio-layout:not(.inuevo) > * { display: none; }
.in-nav-inicial-movil { display: none; }
.in-nav-inicial-movil summary { cursor: pointer; }
.in-nav-inicial-movil nav { position: absolute; right: 12px; top: 60px; padding: 16px; border-radius: 12px; background: var(--negro-elevado); }
.in-nav-inicial-movil ul { list-style: none; margin: 0; padding: 0; }
.in-nav-inicial-movil a { display: block; padding: 8px 12px; }
@media (max-width: 1100px) { .in-nav-inicial-movil { display: block; } }
/* Hasta que navegacion-global.js monta la cabecera común (html.f-caparazon),
   el sitio se lo guarda el hueco de familia.css (html.f-pronto, que pone
   navegacion-pronta.js en el <head>), igual en todas las páginas. Aquí ya no
   se reserva aparte (10-oct-2026): con la cabecera de respaldo a la vista
   (sin JavaScript) ese relleno era una franja vacía encima de ella, y con
   JavaScript se sumaba a las dos cabeceras apiladas del móvil. */
/* Reinicios sin peso (:where): las clases f- de familia.css mandan sobre ellos. */
.inuevo *, .inuevo *::before, .inuevo *::after { box-sizing: border-box; }
:where(.inuevo) a { color: inherit; text-decoration: none; }
:where(.inuevo) button { font: inherit; }
:where(.inuevo) :is(h1, h2, h3, p) { margin: 0; }
:where(.inuevo) ul[role="list"] { list-style: none; margin: 0; padding: 0; }
.inuevo a:focus-visible, .inuevo button:focus-visible { outline: 2px solid var(--in-verde); outline-offset: 4px; }
.inuevo svg { flex: 0 0 auto; }
.in-wrap { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }

/* El Agente solo se ve con acceso confirmado (agente-beta.js pone
   data-agente-beta="si"). Hasta saberlo, la cabecera no lo pinta: así no
   aparece y desaparece al llegar la respuesta (salto de la navegación). */
html[data-experiencia="nueva"]:not([data-agente-beta="si"]) :is(.cn-header .cn-agent, .inuevo a[href*="vista=cocuyo"]) { display: none !important; }

/* ---------- Héroe: muro de clips + barra de prompt fija ---------- */
/* Cabe entero en la primera pantalla, bajo la cabecera común. */
.in-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 790px; min-height: max(560px, min(960px, calc(100svh - var(--f-alto-cabecera, 64px)))); padding: 96px 0 72px; overflow: clip; background: var(--in-fondo); }
/* La barra fija (inicio-barra.js) mide su alto en --in-barra-hero (inicio-prompt.js);
   inicio-nuevo.js lo estabiliza en --in-reserva para que el héroe no baile. */
.in-hero { padding-bottom: calc(40px + var(--in-reserva, var(--in-barra-hero, 40px))); }
.in-hero-sombra { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Muro (escritorio y tableta): cinco columnas de clips detrás del titular.
   Cada pista contiene su tanda DOS veces y se desplaza justo la mitad: el
   final del bucle coincide píxel a píxel con el principio (sin saltos).
   Solo se anima transform (compositor): no mueve el diseño ni cuenta en CLS. */
.in-muro { --in-muro-hueco: 14px; position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--in-muro-hueco); padding-inline: var(--in-muro-hueco); overflow: hidden; animation: in-muro-entra 1.1s var(--in-curva) both; }
.in-muro-col { position: relative; min-width: 0; }
.in-muro-pista { display: flex; flex-direction: column; will-change: transform; animation: in-muro-sube var(--in-muro-dur, 90s) linear var(--in-muro-retraso, 0s) infinite; }
.in-muro-col--baja .in-muro-pista { animation-name: in-muro-baja; }
/* Velocidades y fases distintas: las columnas nunca van al compás. */
.in-muro-col--1 { --in-muro-dur: 78s; --in-muro-retraso: -12s; }
.in-muro-col--2 { --in-muro-dur: 92s; --in-muro-retraso: -40s; margin-top: -120px; }
.in-muro-col--3 { --in-muro-dur: 86s; --in-muro-retraso: -25s; }
.in-muro-col--4 { --in-muro-dur: 96s; --in-muro-retraso: -58s; margin-top: -60px; }
.in-muro-col--5 { --in-muro-dur: 110s; --in-muro-retraso: -33s; }
@keyframes in-muro-sube { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes in-muro-baja { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes in-muro-entra { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
/* Pieza: tamaño reservado por proporción (9:16 o 1:1) antes de cargar nada. */
.inuevo .in-muro-pieza { position: relative; display: block; flex: none; aspect-ratio: 9 / 16; margin-bottom: var(--in-muro-hueco); border-radius: var(--f-r-media, 20px); overflow: hidden; background: var(--in-superficie); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 6%, transparent); -webkit-user-drag: none; user-select: none; }
.in-muro-pieza--cuadrada { aspect-ratio: 1 / 1; }
.in-muro-media, .in-muro-media > img, .in-muro-media > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.in-muro-media > img, .in-muro-media > video { object-fit: cover; transition: transform 700ms var(--in-curva), filter var(--in-media) ease; }
/* El vídeo aparece cuando ya se mueve (clips-tarjeta.js pone .clip-listo en
   su contenedor); mientras, y con la pausa, se ve el póster de debajo. */
.in-muro-media > video.clip-tarjeta { opacity: 0; transition: opacity .5s ease, transform 700ms var(--in-curva); }
.in-muro-media.clip-listo > video.clip-tarjeta { opacity: 1; }
/* Etiqueta mínima al pasar el ratón: la App que haría ese clip. */
.in-muro-etiqueta { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 6px 10px 6px 12px; border-radius: var(--f-r-pill, 999px); background: color-mix(in srgb, var(--negro-abismo) 62%, transparent); color: var(--blanco-luz); font-size: .75rem; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); opacity: 0; transform: translateY(6px); transition: opacity var(--in-media) ease, transform var(--in-media) var(--in-curva); pointer-events: none; }
.in-muro-etiqueta svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  /* La columna bajo el ratón se detiene: así se puede pulsar una pieza. */
  .in-muro-col:hover .in-muro-pista { animation-play-state: paused; }
  .in-muro-pieza:hover .in-muro-etiqueta { opacity: 1; transform: none; }
  .in-muro-pieza:hover .in-muro-media > * { transform: scale(1.04); filter: brightness(1.12); }
}
/* Pausa voluntaria (botón), héroe fuera de pantalla o pestaña oculta. */
.in-hero:is(.in-muro-pausa, .in-muro-fuera) .in-muro-pista { animation-play-state: paused; }
.in-hero.in-muro-pausa :is(.in-muro, .in-franja) video { display: none; }

/* Velo para leer el texto (AA sobre cualquier clip): foco oscuro detrás del
   titular, cabecera y pie fundidos a negro, y un poco de sombra general. */
.in-hero-sombra { background:
  radial-gradient(ellipse 38% 46% at 50% 47%, color-mix(in srgb, var(--negro-abismo) 92%, transparent) 0%, color-mix(in srgb, var(--negro-abismo) 84%, transparent) 52%, transparent 100%),
  linear-gradient(180deg, var(--negro-abismo) 0%, color-mix(in srgb, var(--negro-abismo) 40%, transparent) 16%, color-mix(in srgb, var(--negro-abismo) 30%, transparent) 50%, color-mix(in srgb, var(--negro-abismo) 58%, transparent) 82%, var(--negro-abismo) 100%); }

/* Franja del móvil (≤ 760 px): dos filas horizontales bajo el texto. */
.in-franja { display: none; }
@keyframes in-franja-izq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes in-franja-der { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.in-hero > .f-contenedor { position: relative; pointer-events: none; }
/* Con la barra de prompt presente, ella es la llamada a crear: el héroe se
   queda con antetítulo, titular, frase, nota e ideas. */
html.in-con-barra .in-hero .in-acciones { display: none; }
.in-hero-copy { max-width: 860px; position: relative; margin-inline: auto; display: grid; justify-items: center; text-align: center; pointer-events: auto; }
.inuevo .in-hero-eyebrow { color: color-mix(in srgb, var(--blanco-luz) 78%, transparent); text-shadow: 0 1px 10px color-mix(in srgb, var(--negro-abismo) 60%, transparent); animation: in-entrada var(--in-lenta) var(--in-curva) both; }
.inuevo .in-hero h1 { margin: 18px auto 20px; max-width: 100%; font-family: var(--f-fuente, var(--fuente)); font-size: clamp(2.75rem, 1rem + 5vw, 5.5rem); line-height: 1; letter-spacing: var(--f-tracking-display, -0.04em); font-weight: var(--f-peso-display, 500); font-kerning: normal; font-synthesis: none; color: var(--blanco-luz); text-wrap: balance; text-shadow: 0 1px 28px color-mix(in srgb, var(--negro-abismo) 45%, transparent); animation: in-entrada var(--in-lenta) var(--in-curva) 40ms both; }
/* Segunda línea atenuada (estilo Apple), legible sobre el velo del muro. */
.in-hero h1 .in-tenue { color: color-mix(in srgb, var(--blanco-luz) 72%, transparent); }
.in-hero-desc { color: color-mix(in srgb, var(--blanco-luz) 88%, transparent); max-width: 62ch; font-size: var(--f-t-lead, 1.125rem); font-weight: 400; line-height: 1.55; text-wrap: balance; text-shadow: 0 1px 12px color-mix(in srgb, var(--negro-abismo) 60%, transparent); animation: in-entrada var(--in-lenta) var(--in-curva) 80ms both; }
@keyframes in-entrada { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.in-acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.in-hero .in-acciones { animation: in-entrada var(--in-lenta) var(--in-curva) 140ms both; }
.in-hero-nota { margin-top: 14px; color: color-mix(in srgb, var(--blanco-luz) 70%, transparent); font-size: var(--f-t-sm, .875rem); line-height: 1.6; text-wrap: balance; text-shadow: 0 1px 8px color-mix(in srgb, var(--negro-abismo) 55%, transparent); }
/* Ideas del héroe: rellenan la barra de prompt (inicio-prompt.js). */
.in-ideas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 24px auto 0; max-width: 700px; animation: in-entrada var(--in-lenta) var(--in-curva) 200ms both; }
.in-ideas-titulo { color: color-mix(in srgb, var(--blanco-luz) 70%, transparent); font-size: .8125rem; margin-right: 2px; text-shadow: 0 1px 6px color-mix(in srgb, var(--negro-abismo) 60%, transparent); }
.inuevo .in-idea { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 7px 14px; border-radius: var(--f-r-pill, 999px); background: color-mix(in srgb, var(--negro-abismo) 70%, transparent); box-shadow: inset 0 0 0 1px var(--in-borde); color: var(--blanco-luz); font-size: .8125rem; line-height: 1.3; backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); transition: background var(--in-rapida) ease, box-shadow var(--in-rapida) ease; }
.in-idea span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-idea svg { color: color-mix(in srgb, var(--blanco-luz) 70%, transparent); }
.inuevo .in-idea:hover { background: color-mix(in srgb, var(--negro-abismo) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 24%, transparent); }
/* «Pausar movimiento» (WCAG 2.2.2): visible con ratón, teclado y tacto, una
   pastilla discreta en una esquina del héroe. Su posición absoluta no mueve
   el contenido ni la barra. En el móvil va bajo la franja. */
.in-media-toggle { position: absolute; z-index: 1; top: 20px; right: var(--f-gutter); display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--f-r-pill); background: var(--in-velo); color: var(--blanco-luz); cursor: pointer; font-size: var(--f-t-xs) !important; backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); }
.in-media-toggle:hover { background: var(--f-vidrio); }
.inuevo .in-media-toggle:focus-visible { outline: 2px solid var(--in-verde); outline-offset: 3px; }
.in-media-toggle svg { width: 14px; height: 14px; }
.in-media-toggle[hidden] { display: none; }

/* ---------- Secciones (el aire lo da .f-seccion) ---------- */
.in-cabeza-texto { display: grid; gap: var(--f-e-4, 16px); justify-items: start; }
.inuevo .f-h2 { font-family: var(--f-fuente, var(--fuente)); }
.inuevo .f-tenue { color: var(--f-texto-3); }
/* Enlaces de sección: blancos; la lima queda para la acción principal. */
.inuevo .f-enlace { color: var(--f-texto); }
.inuevo .f-enlace:hover { color: var(--f-texto-2); }
.inuevo .f-cabeza-seccion--fila > .f-enlace, .inuevo .f-cabeza-seccion--fila > .in-scenes-toggle { justify-self: start; }
@media (min-width: 960px) { .inuevo .f-cabeza-seccion--fila > .f-enlace, .inuevo .f-cabeza-seccion--fila > .in-scenes-toggle { justify-self: end; margin-bottom: 6px; } }

/* Clips de las tarjetas (clips-tarjeta.js): el fotograma es una <img> debajo;
   el vídeo aparece cuando ya se mueve (.clip-listo en su contenedor). */
.inuevo .f-media > video.clip-tarjeta, .in-cta-media > video.clip-tarjeta { opacity: 0; transition: opacity .4s ease, transform 700ms var(--in-curva); }
.inuevo .clip-listo > video.clip-tarjeta { opacity: 1; }
.inuevo .f-media > video[data-in-scene-src] { opacity: 0; transition: opacity .3s ease; }
.inuevo .f-media > video.in-scene-ready { opacity: 1; }
/* «Pausar escenas» (inicio-escenas.js): sin vídeo, queda el fotograma fijo. */
html.in-escenas-pausa .inuevo video[data-clip] { display: none; }
.inuevo .in-scenes-toggle { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--f-r-pill, 999px); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); color: var(--f-texto-2); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: color var(--in-rapida) ease, background var(--in-rapida) ease; }
.inuevo .in-scenes-toggle:hover { color: var(--f-texto); background: var(--f-sup-2); }
.inuevo .in-scenes-toggle[hidden] { display: none; }

/* ---------- Una App para cada tarea (pestañas + carril) ---------- */
.inuevo .in-tabs { margin-bottom: var(--f-e-6, 24px); }
.inuevo .in-tabs .f-tab { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: .875rem; font-weight: 500; transition: color var(--in-rapida) ease, background var(--in-rapida) ease; }
.inuevo .in-tabs .f-tab:hover { color: var(--f-texto); }
.inuevo .in-tabs .f-tab[aria-selected="true"] { background: var(--f-texto); color: var(--negro-abismo); }
.in-apps-mas { margin-top: var(--f-e-8, 32px); }

/* ---------- Paga por lo que creas ---------- */
/* Planes reales (planes-estudio.js), con el acabado de la familia. */
.in-planes { margin-top: var(--f-e-16, 64px); }
.in-planes > p { color: var(--f-texto-2); }
.inuevo .cplanes { --cp-lima: var(--verde-cocuyo); --cp-texto: var(--blanco-luz); --cp-mut: var(--f-texto-2); --cp-borde: var(--f-linea); font-family: var(--f-fuente, var(--fuente)); }
.inuevo .cplanes-top h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); font-weight: 550; letter-spacing: var(--f-tracking-titulo, -0.025em); }
.inuevo .cplanes-kicker { color: var(--f-texto-3); }
.inuevo .cplan { border-color: transparent; border-radius: var(--f-r-media, 22px); background: var(--f-sup-1); }
.inuevo .cplan-pro49 { background: var(--f-sup-1); border-color: var(--f-lima-linea); }
.inuevo .cplan-btn { border-radius: var(--f-r-pill, 999px); border-color: var(--f-linea-fuerte); background: transparent; color: var(--f-texto); }
.inuevo .cplan-btn:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
.inuevo .cplan-pro49 .cplan-btn, .inuevo .cplan-btn-primary { background: var(--verde-cocuyo); border-color: var(--verde-cocuyo); color: var(--tinta-sobre-verde); }
.inuevo .cplan-pro49 .cplan-btn:hover, .inuevo .cplan-btn-primary:hover { background: var(--lima-clara); border-color: var(--lima-clara); }
.inuevo .cplanes-extra a { color: var(--f-texto); }
/* Letra legible con la escala de la familia: planes-estudio.css baja hasta
   10–11 px, que en la portada (y más en el móvil) cuesta leer. */
.inuevo .cplanes-top > p { max-width: 44ch; color: var(--f-texto-2); font-size: .875rem; line-height: 1.6; }
.inuevo .cplanes-aviso { color: var(--f-texto-3); font-size: .75rem; }
.inuevo .cplan-desc { color: var(--f-texto-2); font-size: .8125rem; }
.inuevo :is(.cplan-precio span, .cplan-referencia, .cplan-status) { color: var(--f-texto-3); font-size: .75rem; }
.inuevo .cplan-creditos { border-top-color: var(--f-linea); color: var(--f-texto-2); font-size: .8125rem; }
.inuevo .cplan-lista li { color: var(--f-texto-2); font-size: .8125rem; }
.inuevo .cplan-ahorro { font-size: .6875rem; }
.inuevo .cplan-btn { min-height: 44px; font-size: .875rem !important; font-weight: 500 !important; }
.inuevo .cplanes-extra p, .inuevo .cplanes-extra a, .inuevo .cplanes-compare-link { font-size: .8125rem; }
.inuevo .cplanes-extra p { color: var(--f-texto-2); }
.inuevo .cplanes-porque { color: var(--f-texto-3); font-size: .75rem; }

/* ---------- Conectores ---------- */
.inuevo .in-chat { justify-content: center; gap: var(--f-e-3, 12px); background: var(--f-sup-1); }
.inuevo .in-burbuja { max-width: 88%; display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--f-sup-2); color: var(--f-texto-2); font-size: .9375rem; line-height: 1.5; }
.in-burbuja strong { color: var(--f-texto); font-size: .875rem; font-weight: 550; }
.inuevo .in-chat .in-burbuja-yo { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--f-texto); color: var(--negro-abismo); }
.in-burbuja-opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.inuevo .in-burbuja-opciones .f-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); color: var(--f-texto); }

/* ---------- Cierre «La luz que sueña» ---------- */
.inuevo .in-cta { isolation: isolate; min-height: 420px; align-content: center; }
.in-cta-media { position: absolute; inset: 0; z-index: -1; background: var(--f-sup-1); }
.in-cta-media > img, .in-cta-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.in-cta-media > img { opacity: .5; }
.inuevo .in-cta-media > video.clip-tarjeta { transition: opacity .6s ease; }
.inuevo .in-cta-media.clip-listo > video.clip-tarjeta { opacity: .55; }
.in-cta-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--negro-abismo) 72%, transparent), color-mix(in srgb, var(--negro-abismo) 45%, transparent) 70%), linear-gradient(0deg, color-mix(in srgb, var(--negro-abismo) 55%, transparent), transparent 40%); }
.inuevo .in-cta .f-h1 { font-family: var(--f-fuente, var(--fuente)); }
.inuevo .in-cta .f-lead { color: var(--f-texto-2); }

/* ---------- Pie propio (respaldo: con la cabecera común se oculta) ---------- */
.in-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 25px calc(28px + env(safe-area-inset-bottom) + var(--in-barra-alto, 0px)); color: var(--gris-humo); font-size: 11px; line-height: 1.8; }
.in-footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.in-footer a:hover { color: var(--f-texto); }
/* El pie común sube por encima de la barra fija para leerlo y pulsarlo. */
html.in-con-barra .f-pie { padding-bottom: calc(var(--f-e-8, 32px) + env(safe-area-inset-bottom) + var(--in-barra-alto, 0px)); }
/* Con el teclado, lo que recibe el foco no queda tapado por la barra fija: el
   navegador deja libre su alto al desplazar (WCAG 2.4.11; auditoría v338, A11Y-06). */
html.in-con-barra { scroll-padding-bottom: calc(var(--in-barra-alto, 0px) + 12px); }

/* Pantallas táctiles: zona de toque mayor sin cambiar el aspecto. */
@media (pointer: coarse) {
  .inuevo :is(.in-idea, .f-enlace), .in-footer a { position: relative; }
  .inuevo :is(.in-idea, .f-enlace)::after, .in-footer a::after { content: ""; position: absolute; }
  .inuevo .in-idea::after { inset: -4px 0; }
  .inuevo .f-enlace::after { inset: -12px -4px; }
  .in-footer a::after { inset: -5px -10px; }
}

/* ---------- Integración con la barra de prompt fija (inicio-barra.js) ---------- */
html[data-experiencia="nueva"] .ib-barra.inp-portada { transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida), opacity 200ms ease, visibility 240ms, transform 200ms var(--curva-suave); }
/* Cambio de forma sin salto de diseño (inicio-prompt.js): al desplazarse, la
   barra baja fuera de la pantalla, cambia de alto ahí y vuelve a subir. El
   transform no cuenta como salto (CLS); el alto medido sí contaría. */
html[data-experiencia="nueva"] .ib-barra.inp-portada.inp-fuera { opacity: 0; pointer-events: none; transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom) + var(--ib-teclado, 0px))); }
/* Foco: un filete claro, sin halo ni lima (el lima es solo de Crear). */
html[data-experiencia="nueva"] .ib-barra.inp-portada:focus-within { border-color: color-mix(in srgb, var(--blanco-luz) 26%, transparent); box-shadow: var(--sombra-3), 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 8%, transparent); }
html[data-experiencia="nueva"] .ib-barra.inp-destello { animation: inp-destello 900ms var(--curva-suave); }
@keyframes inp-destello { 0% { box-shadow: var(--sombra-3), 0 0 0 2px var(--verde-cocuyo); } 100% { box-shadow: var(--sombra-3); } }
/* Con el menú ☰ abierto la barra no compite con él. */
html.smx-bloqueo .ib-barra { opacity: 0; visibility: hidden; pointer-events: none; }
/* Aviso de cookies abierto en escritorio (1200–1640 px): subir la barra por
   encima de la tarjeta la llevaba encima de las ideas del hero. Aquí cabe a la
   derecha de la tarjeta (16 + 385 + 16 px), así que se queda abajo, centrada en
   el hueco libre, y no tapa ni el aviso ni el contenido. Más estrecho, la sube
   inicio-barra.css y inicio-prompt.js la deja en una fila. */
@media (min-width: 1200px) and (max-width: 1640px) {
  html:is(.cocuyo-con-aviso-cookies, .in-aviso-previsto)[data-experiencia="nueva"] .ib-barra.inp-portada {
    --ib-aviso: 0px;
    left: calc(417px + (100% - 433px) / 2);
    width: min(760px, calc(100% - 433px));
  }
}
/* Tableta, portátil pequeño y móvil apaisado (760–1199 px) con la tarjeta de
   cookies: la barra en una fila cabe a su derecha, abajo. Así no sube sobre
   el titular y no depende del alto de la tarjeta (que cambia al llegar o al
   traducirse): cero saltos. Al escribir se abre centrada, sobre la tarjeta. */
@media (min-width: 760px) and (max-width: 1199px) {
  html:is(.cocuyo-con-aviso-cookies, .in-aviso-previsto)[data-experiencia="nueva"] .ib-barra.inp-portada.inp-compacta {
    --ib-aviso: 0px;
    left: calc(417px + (100% - 433px) / 2);
    width: min(760px, calc(100% - 433px));
  }
}
/* consent.js reserva el alto de la tarjeta bajo el hero (≤ 1100 px), pero la
   barra ya sube por encima de ella: --in-barra-hero mide las dos juntas. */
/* .in-aviso-previsto (inicio-prompt.js): la tarjeta aún no está, pero llegará. */
html.in-con-barra:is(.cocuyo-con-aviso-cookies, .in-aviso-previsto) .in-hero { padding-bottom: calc(24px + var(--in-reserva, var(--in-barra-hero, 20px))); }
/* in-con-barra lo anuncia navegacion-pronta.js en el <head> (portada nueva,
   ≥ 768 px); la barra llega al final del <body>. Mientras no está, la
   entrada del héroe espera (sigue invisible, como en su primer fotograma de
   la animación) en lugar de pintarse con un relleno que cambia al llegar ella.
   Si la barra no llega, navegacion-pronta.js quita in-con-barra (al terminar
   de leer la página o a los 3,5 s) y la entrada sigue sola. */
html.in-con-barra:not(:has(#inicio-barra)) .inuevo .in-hero * { animation-play-state: paused; }
.ib-barra .ib-prompt { position: relative; }
.inp-contador { position: absolute; right: 6px; bottom: 4px; padding: 1px 6px; border-radius: var(--radio-pill); background: var(--negro-elevado); color: var(--gris-humo); font-family: var(--fuente-mono); font-size: 10.5px; pointer-events: none; }
.inp-contador-lleno { color: var(--peligro); }
.inp-contador[hidden] { display: none; }
.inp-crear { display: none; }
/* Dock: fuera del hero o en pantallas bajas, una sola fila (texto · Crear).
   Tocar el texto la vuelve a abrir con todos los ajustes. */
html[data-experiencia="nueva"] .ib-barra.inp-compacta { padding: 8px 8px 8px 12px; }
.ib-barra.inp-compacta :is(.ib-cabeza, .ib-referencias, .ib-mas, .ib-ajustes, .ib-coste, .ib-nota, .ib-plegar) { display: none !important; }
.ib-barra.inp-compacta .ib-formulario { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; overflow: visible; }
.ib-barra.inp-compacta .ib-estado { grid-column: 1 / -1; }
.ib-barra.inp-compacta .ib-prompt textarea { height: 40px; min-height: 40px; padding-block: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ib-barra.inp-compacta .ib-controles { display: flex; gap: 6px; }
@media (max-width: 599px) {
  .ib-barra.inp-compacta .ib-prompt textarea { font-size: 15px; }
}
/* Crear con su nombre visible en todos los tamaños: es la acción. */
html[data-experiencia="nueva"] .ib-barra.inp-portada #ib-enviar { width: auto; gap: 7px; padding-inline: 12px 15px; font-weight: 600; font-size: 14px; }
html[data-experiencia="nueva"] .ib-barra.inp-portada #ib-enviar .inp-crear { display: inline; }
html[data-experiencia="nueva"] .ib-barra.inp-portada #ib-enviar svg { width: 18px; height: 18px; transform: rotate(90deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .in-wrap { width: calc(100% - 64px); }
  .in-hero { min-height: 720px; min-height: max(560px, calc(94svh - var(--f-alto-cabecera, 64px))); }
  .in-hero { padding-top: 56px; padding-bottom: calc(36px + var(--in-reserva, var(--in-barra-hero, 36px))); }
  /* Tableta: el texto ocupa casi todo el ancho; el foco oscuro se ensancha. */
  .in-hero-sombra { background:
    radial-gradient(ellipse 58% 42% at 50% 47%, color-mix(in srgb, var(--negro-abismo) 92%, transparent) 0%, color-mix(in srgb, var(--negro-abismo) 84%, transparent) 60%, transparent 100%),
    linear-gradient(180deg, var(--negro-abismo) 0%, color-mix(in srgb, var(--negro-abismo) 40%, transparent) 16%, color-mix(in srgb, var(--negro-abismo) 30%, transparent) 50%, color-mix(in srgb, var(--negro-abismo) 58%, transparent) 82%, var(--negro-abismo) 100%); }
}
/* Tableta (30-sep-2026): cinco columnas quedaban en tiras de ~150 px. Con
   tres (761–880 px) o cuatro (881–1100 px) cada clip mide 200–280 px de
   ancho, como en el escritorio. Las columnas que sobran no se pintan: sus
   pósters diferidos no se descargan y sus vídeos no se reproducen. */
@media (min-width: 761px) and (max-width: 880px) {
  .in-muro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-muro-col--4, .in-muro-col--5 { display: none; }
}
@media (min-width: 881px) and (max-width: 1100px) {
  .in-muro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .in-muro-col--5 { display: none; }
}
@media (min-width: 720px) {
  /* Bento del estudio: Video grande a la izquierda; Imagen y Audio apiladas. */
}
@media (max-width: 760px) {
  .in-wrap { width: calc(100% - 32px); }
  .in-hero { min-height: calc(100svh - var(--f-alto-cabecera, 64px)); align-items: center; padding: 48px 0 40px; }
  /* Móvil (30-sep-2026): titular arriba, la franja de clips ocupa el hueco
     libre hasta la barra fija y las ideas quedan justo encima de ella. La
     franja crece o encoge (flex) según lo que mida la barra: con la barra
     abierta cabe una fila grande; con la barra en una fila (aviso de cookies)
     caben las dos. Nada queda detrás de la barra en la primera pantalla. */
  .in-hero { flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: 20px; padding-bottom: calc(14px + var(--in-reserva, var(--in-barra-hero, 20px))); }
  /* Móvil: texto y barra primero; el muro pasa a dos filas bajo el texto. */
  .in-muro, .in-hero-sombra { display: none; }
  /* El contenedor y la columna de texto se «disuelven» para poder ordenar
     sus piezas alrededor de la franja (el DOM y el orden de lectura siguen). */
  .in-hero > .f-contenedor, .in-hero-copy { display: contents; }
  .in-hero-copy > * { order: 1; align-self: center; text-align: center; margin-inline: var(--f-gutter, 16px); }
  .in-franja { order: 3; display: grid; flex: 1 1 0; min-height: 112px; max-height: 400px; container-type: size; grid-template-rows: minmax(0, 1fr); gap: 10px; margin-top: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--negro-abismo) 6%, var(--negro-abismo) 94%, transparent); mask-image: linear-gradient(90deg, transparent, var(--negro-abismo) 6%, var(--negro-abismo) 94%, transparent); }
  /* La franja es decorativa: va siempre de izquierda a derecha, también en
     árabe y urdu; en rtl la pista se alineaba a la derecha y el desplazamiento
     del -50 % dejaba la fila vacía a mitad de vuelta. */
  .in-franja-fila { overflow: hidden; min-height: 0; direction: ltr; }
  .in-franja .in-muro-pista { flex-direction: row; width: max-content; height: 100%; animation: in-franja-izq 58s linear infinite; }
  .in-franja-fila--derecha .in-muro-pista { animation-name: in-franja-der; animation-duration: 64s; }
  .in-hero:is(.in-muro-pausa, .in-muro-fuera) .in-franja .in-muro-pista { animation-play-state: paused; }
  /* Una fila llena la franja; la segunda solo aparece si cabe entera. */
  .in-franja-fila--derecha { display: none; }
  .inuevo .in-franja .in-muro-pieza { --in-muro-hueco: 10px; height: min(100cqh, 260px); margin: 0 var(--in-muro-hueco) 0 0; border-radius: 14px; }
  @container (min-height: 250px) {
    .in-franja { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .in-franja-fila--derecha { display: block; }
    .inuevo .in-franja .in-muro-pieza { height: calc((100cqh - 10px) / 2); }
  }
  /* Ideas: una fila deslizable justo encima de la barra (la rellenan). */
  .in-hero-copy > .in-ideas { order: 4; align-self: stretch; width: auto; max-width: none; margin: 12px 0 0; }
  /* Con la barra abierta (sin aviso de cookies) no cabe todo: su propia nota
     ya dice que el coste se ve antes de generar, así que la frase del héroe
     cede su sitio a la franja. Con la barra en una fila, sí se ve. */
  .in-hero-copy > .in-hero-nota { order: 5; margin-top: 12px; }
  html.in-con-barra:not(.cocuyo-con-aviso-cookies, .in-aviso-previsto) .in-hero-copy > .in-hero-nota { display: none; }
  /* La pausa: botón redondo sobre la esquina de la franja (su texto sigue
     siendo el nombre accesible). */
  .in-media-toggle { order: 2; position: relative; z-index: 2; top: auto; right: auto; align-self: flex-end; width: 36px; min-height: 36px; height: 36px; margin: 24px calc(var(--f-gutter, 16px) + 8px) -60px 0; padding: 0; background: color-mix(in srgb, var(--negro-abismo) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanco-luz) 14%, transparent); }
  .in-media-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .inuevo .in-hero h1 { font-size: clamp(2.25rem, 9.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; margin: 12px auto 12px; }
  .in-hero-desc { font-size: 1rem; line-height: 1.5; max-width: 34ch; }
  .in-acciones { gap: 9px; margin-top: 20px; }
  .in-hero-nota { font-size: .8125rem; max-width: 320px; }
  /* En móvil las ideas se deslizan en una sola fila. */
  .in-ideas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + 32px); margin: 16px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, var(--negro-abismo) 16px, var(--negro-abismo) calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, var(--negro-abismo) 16px, var(--negro-abismo) calc(100% - 24px), transparent); }
  .in-ideas::-webkit-scrollbar { display: none; }
  .in-ideas-titulo { display: none; }
  .inuevo .in-idea { flex: none; }
  .in-footer { flex-direction: column; align-items: start; gap: 15px; }
}
@media (max-width: 719px) {
  .inuevo .in-chat { padding: var(--f-e-5, 20px); }
  .in-cta { padding-inline: var(--f-e-5, 20px); }
  .inuevo .in-cta { min-height: 380px; }
  .inuevo .cplanes-top { flex-direction: column; align-items: start; gap: 12px; }
  /* Planes en carril deslizable (como las Apps): la portada no se alarga
     con tres tarjetas apiladas; se ve Free y asoma Plus. */
  .inuevo .cplanes-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--f-e-3, 12px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--f-gutter, 16px); margin-inline: calc(var(--f-gutter, 16px) * -1); padding-inline: var(--f-gutter, 16px); padding-bottom: 4px; scrollbar-width: none; }
  .inuevo .cplanes-grid::-webkit-scrollbar { display: none; }
  .inuevo .cplanes-grid > * { scroll-snap-align: start; }
}
@media (max-width: 760px) and (orientation: portrait) {
  /* Franja del móvil: cada clip llena su pieza, sin bandas. */
  .in-franja .in-muro-media > img, .in-franja .in-muro-media > video { object-fit: cover; object-position: center; }
}
@media (max-width: 375px) {
  .inuevo .in-hero h1 { font-size: clamp(2rem, 9.6vw, 2.25rem); letter-spacing: -.03em; }
  .in-acciones { align-items: stretch; flex-direction: column; max-width: 280px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .in-hero { min-height: max(420px, calc(100svh - var(--f-alto-cabecera, 64px))); padding: 56px 0 34px; }
  .inuevo .in-hero h1 { font-size: 2.5rem; margin-block: 10px 14px; }
  .in-hero .in-acciones { margin-top: 18px; }
  .in-hero-nota { margin-top: 12px; }
  .in-ideas { display: none; }
  .in-franja { min-height: 120px; }
}
/* Móvil bajo (375×667) con la tarjeta de cookies: la barra en una fila sube
   sobre la tarjeta y la frase quedaría debajo; cede su sitio a la franja. */
@media (max-width: 760px) and (max-height: 699px) {
  html.in-con-barra .in-hero-copy > .in-hero-nota { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inuevo *, .inuevo *::before, .inuevo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .inuevo .f-aparece { opacity: 1; transform: none; }
  .inuevo .f-tarjeta:hover .f-media > *, .inuevo .f-bento__celda--media:hover .f-media > * { transform: none; }
  html[data-experiencia="nueva"] .ib-barra.inp-destello { animation: none; }
  html[data-experiencia="nueva"] .ib-barra.inp-portada { transition: none; }
}
/* La marca identifica la portada; Agente es la entrada funcional. */
html[data-experiencia="nueva"] .cn-brand-static{cursor:default;filter:none}
html[data-experiencia="nueva"] .cn-brand-static:hover{filter:none}


/* cocuyo-css: assets/css/planes-tarjetas.css */
/* ============================================================
   COCUYO — TARJETAS DE PLANES (planes-tarjetas.css)
   Las tres tarjetas de Precios (Free · Básico · Pro) y su pie. Salen de
   planes-pagina.css (12-oct-2026) para que la portada las pinte iguales
   (dueño: «los planes de pago hay que ponerlos como ya están en precios»):
   - planes.html: api/planes-pagina-render.php (servidor) y planes-pagina.css
     para el resto de la página;
   - portada: planes-estudio.js (data-planes-estudio="tarjetas").
   Todo va dentro de .pricing-catalog #precios. Solo tokens.
   ============================================================ */
.pricing-catalog{background:var(--precio-fondo);color:var(--f-texto);font-family:var(--f-fuente)}
.pricing-catalog #precios{--pq-lima:var(--precio-lima);--pq-tinta:var(--precio-tinta);
 --pq-b4:color-mix(in srgb,var(--blanco-luz) 4%,transparent);--pq-b5:color-mix(in srgb,var(--blanco-luz) 5%,transparent);
 --pq-b6:color-mix(in srgb,var(--blanco-luz) 6%,transparent);--pq-b8:color-mix(in srgb,var(--blanco-luz) 8%,transparent);
 --pq-b10:color-mix(in srgb,var(--blanco-luz) 10%,transparent);--pq-b14:color-mix(in srgb,var(--blanco-luz) 14%,transparent);
 --pq-t40:color-mix(in srgb,var(--blanco-luz) 40%,transparent);--pq-t50:color-mix(in srgb,var(--blanco-luz) 52%,transparent);
 --pq-t60:color-mix(in srgb,var(--blanco-luz) 62%,transparent);--pq-t75:color-mix(in srgb,var(--blanco-luz) 76%,transparent);
 --pq-t85:color-mix(in srgb,var(--blanco-luz) 88%,transparent);
 min-width:0;font-size:var(--f-t-cuerpo);line-height:1.5;color:var(--f-texto);-webkit-font-smoothing:antialiased}
.pricing-catalog #precios :is(a,button,summary,input):focus-visible{outline:2px solid var(--pq-lima);outline-offset:3px}
.pricing-catalog #precios :is(h1,h2,h3,p,li,th,td){overflow-wrap:break-word}

/* ---------- Tarjetas (filas alineadas entre tarjetas) ---------- */
.pq-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:16px}
.pq-card{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:14px;min-width:0;padding:20px 16px 16px;border:1px solid var(--pq-b6);border-radius:20px;
 background:radial-gradient(90% 50% at 50% 0%,color-mix(in srgb,var(--blanco-luz) 9%,transparent),transparent 72%),var(--precio-tarjeta);
 opacity:0;transform:translateY(16px);animation:pq-aparece .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms + 60ms) forwards;transition:border-color .25s}
.pq-card[data-pq-popular]{border-color:color-mix(in srgb,var(--pq-lima) 16%,transparent);background:linear-gradient(225deg,color-mix(in srgb,var(--pq-lima) 16%,transparent) 0%,color-mix(in srgb,var(--pq-lima) 8%,transparent) 28%,transparent 62%),var(--precio-tarjeta)}
.pq-card-destacada{border-color:color-mix(in srgb,var(--precio-rosa) 24%,transparent);background:radial-gradient(145% 54% at 100% 0%,color-mix(in srgb,var(--precio-rosa) 32%,transparent) 0%,color-mix(in srgb,var(--precio-rosa) 15%,transparent) 42%,transparent 100%),var(--precio-tarjeta)}
[dir=rtl] .pq-card-destacada{background:radial-gradient(145% 54% at 0% 0%,color-mix(in srgb,var(--precio-rosa) 32%,transparent) 0%,color-mix(in srgb,var(--precio-rosa) 15%,transparent) 42%,transparent 100%),var(--precio-tarjeta)}
.pq-card:hover{border-color:var(--pq-b14)}
.pq-card-cab{display:grid;gap:4px;align-content:start}
.pq-card-nombre{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.pq-card-cab h3{font-size:24px;line-height:28px;font-weight:800;letter-spacing:-.04em;text-transform:uppercase}
.pq-card-cab p{font-size:13px;line-height:18px;color:var(--pq-t50)}
.pq-insignia,.pq-cinta{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:3px;font-size:11px;font-weight:800;font-style:italic;line-height:1;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
/* Rosa un punto más hondo bajo el texto blanco de 11–12 px: 3,7:1 → 5:1 (AA). */
.pq-insignia{background:color-mix(in srgb,var(--precio-rosa) 84%,var(--negro-abismo));color:var(--blanco-luz)}
.pq-cinta{background:var(--pq-lima);color:var(--pq-tinta)}
.pq-caja{display:grid;gap:4px;align-content:start;padding:12px;border-radius:12px;background:var(--pq-b5)}
.pq-caja-cifra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600}
.pq-caja-cifra svg{flex:none;color:var(--pq-lima)}
.pq-caja-cifra strong{font-size:18px;line-height:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pq-caja-cifra span{color:var(--pq-t85)}
.pq-caja-eq{padding-inline-start:24px;font-size:12px;line-height:18px;color:var(--pq-t50)}
.pq-caja-extra{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border:1px solid var(--pq-b6);border-radius:8px;font-size:12px;line-height:16px;color:var(--pq-t75)}
.pq-chip-lima{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--pq-lima) 16%,transparent);color:var(--pq-lima);font-size:12px;font-weight:800;line-height:16px}
.pq-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;align-self:end;padding-inline:4px}
.pq-precio b{font-size:32px;line-height:36px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pq-precio small{font-size:12px;line-height:18px;color:var(--pq-t50)}
/* Bandeja de pago con la nota dentro (como «Save $144…» de Higgsfield). */
.pq-pago{display:grid;align-self:start;padding:1px;border:1px solid var(--pq-b5);border-radius:12px;background:var(--pq-b5)}
.pricing-catalog #precios .pq-accion{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:6px 14px;border:0;border-radius:10px;font:700 14px/1.2 var(--f-fuente);text-align:center;cursor:pointer;transition:transform .12s,filter .16s}
.pricing-catalog #precios .pq-accion-pago{background:var(--blanco-luz);color:var(--pq-tinta);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--negro-abismo) 14%,transparent),0 8px 18px -10px color-mix(in srgb,var(--negro-abismo) 70%,transparent)}
.pq-accion-chip{flex:none;padding:5px 8px;border-radius:7px;background:var(--pq-lima);color:var(--pq-tinta);font-size:12px;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.pricing-catalog #precios .pq-accion-sec{background:var(--pq-b10);color:var(--blanco-luz);box-shadow:inset 0 0 0 1px var(--pq-b10),inset 0 -3px 0 color-mix(in srgb,var(--negro-abismo) 30%,transparent)}
.pricing-catalog #precios .pq-accion-lima{background:linear-gradient(180deg,var(--pq-lima) 0%,color-mix(in srgb,var(--pq-lima) 60%,var(--precio-lima-luz)) 100%);color:var(--pq-tinta);box-shadow:inset 0 -3px 0 var(--precio-lima-labio),0 10px 24px -14px var(--pq-lima)}
.pricing-catalog #precios .pq-accion:hover{filter:brightness(1.06)}
.pricing-catalog #precios .pq-accion:active{transform:translateY(1px)}
.pricing-catalog #precios .pq-accion:disabled{opacity:.6;cursor:wait;filter:none}
.pq-accion svg{flex:none}
/* De derecha a izquierda (ar, ur): las flechas de avance apuntan a la izquierda. */
[dir=rtl] #precios :is(.pq-accion,.pq-enlaces a,.f-enlace) svg{transform:scaleX(-1)}
.pq-card-estado{padding:9px 8px 8px;text-align:center;font-size:12px;line-height:16px;color:var(--pq-t50)}
.pq-incluye{display:grid;align-content:start;padding:0 4px}
.pq-incluye-t{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;margin:0;list-style:none;cursor:pointer;font-size:11px;line-height:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pq-t50);transition:color .16s}
.pq-incluye-t::-webkit-details-marker{display:none}
.pq-incluye-t::after{content:"";flex:none;width:7px;height:7px;margin-inline-end:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.pq-incluye[open]>.pq-incluye-t::after{transform:rotate(-135deg) translateY(-1px)}
.pq-incluye-t:hover{color:var(--blanco-luz)}
.pq-ventajas{display:grid;margin:0;padding:0;list-style:none}
.pq-ventaja{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-top:1px solid var(--pq-b5);font-size:13px;line-height:18px;color:var(--pq-t75)}
.pq-ventaja:first-child{border-top:0}
.pq-ventaja b{color:var(--blanco-luz);font-weight:700}
.pq-ventaja-ico{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;color:var(--pq-lima)}
.pq-ventaja-ico svg{width:16px;height:16px}
.pq-ventaja-base{color:var(--pq-t50)}
.pq-ventaja-base .pq-ventaja-ico{color:var(--pq-t40)}
.pq-bajo{display:grid;justify-items:center;gap:10px;margin-top:20px;text-align:center}
.pq-enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
.pq-enlaces a{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:13px;color:var(--pq-t60);transition:color .16s}
.pq-enlaces a:hover{color:var(--blanco-luz)}
.pq-nota-precios{max-width:72ch;font-size:12px;line-height:18px;color:var(--pq-t50)}
.pq-pronto{color:var(--pq-lima)}

@keyframes pq-aparece{to{opacity:1;transform:none}}

:is(:lang(zh),:lang(ja),:lang(ko),:lang(ar),:lang(ur),:lang(hi),:lang(bn),:lang(th)) #precios :is(.pq-card-cab h3,.pq-insignia,.pq-cinta,.pq-eyebrow,.pq-recarga-tag,.pq-recarga-txt h2,.pq-tabla-nombre,.pq-incluye-t,h1){text-transform:none;letter-spacing:0;font-style:normal}

@media (max-width:1000px){
 .pq-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px;max-width:560px;margin-inline:auto}
 .pq-card{display:flex;flex-direction:column;grid-row:auto}
 .pq-cards:not(.pq-orden-dom) .pq-card[data-pq-popular]{order:1}.pq-cards:not(.pq-orden-dom) .pq-card-destacada{order:2}.pq-cards:not(.pq-orden-dom) .pq-card-free{order:3}
 .pq-precio,.pq-pago{align-self:stretch}
}
@media (max-width:640px){
 .pq-cards{row-gap:24px}
 .pq-card{padding:18px 16px 12px;margin:5px;box-shadow:0 0 0 4px var(--precio-fondo),0 0 0 5px var(--pq-b5)}
 .pq-incluye-t{min-height:44px;font-size:13px;letter-spacing:.02em;color:var(--pq-t85)}
}
@media (prefers-reduced-motion:reduce){
 .pq-card,.pq-sin-movimiento .pq-card{opacity:1;transform:none;animation:none}
 .pq-pulso{animation:none}
}
.pq-sin-movimiento .pq-card{opacity:1;transform:none;animation:none}


/* cocuyo-css: assets/css/juegos-minis.css */
/* ============================================================
   COCUYO — MINIATURAS DE LOS JUEGOS (juegos-minis.css)
   Salen de juegos.css (12-oct-2026) para que la portada dibuje las
   miniaturas sin cargar toda la hoja de los juegos. Se carga justo
   DESPUÉS de juegos.css (Estudio y páginas de juegos) para conservar el
   orden de siempre; la portada la carga sola.
   ============================================================ */
/* --- Miniaturas dibujadas de cada juego (sala, índice y panel lateral) ---
   Cada miniatura es una rejilla de <i>; el texto sale de data-t (así los
   buscadores no leen «2 4 2048…» como contenido). Al pasar el ratón por la
   tarjeta, cada una hace un gesto pequeño de su juego. */
.jg-mini {
  --mini-tinta: var(--blanco-luz);
  position: relative; display: grid; place-content: center; gap: 3px; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--negro-borde); container-type: inline-size;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--verde-cocuyo) 14%, var(--negro-abismo)), var(--negro-abismo) 70%);
}
.jg-mini i { position: relative; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--mini-tinta); line-height: 1; transition: transform .35s ease, background .35s ease, box-shadow .35s ease, opacity .35s ease; }
.jg-mini i::before { content: attr(data-t); }
.jg-mini i[data-t]::before { font-size: inherit; }

/* Solitario: cuatro cartas en abanico que se abren al pasar el ratón. */
.jg-mini-solitario { display: block; }
.jg-mini-solitario i {
  position: absolute; left: 50%; top: 18%; width: 24%; aspect-ratio: 5 / 7; margin-left: -12%; border-radius: 6px; font-size: 6cqw; padding: 5% 7%;
  place-items: start; background: var(--blanco-luz); color: var(--negro-abismo); box-shadow: 0 6px 16px -6px var(--negro-abismo); transform-origin: 50% 140%;
}
.jg-mini-solitario i.alt { color: var(--peligro); }
.jg-mini-solitario i:nth-child(1) { transform: rotate(-18deg); }
.jg-mini-solitario i:nth-child(2) { transform: rotate(-6deg); }
.jg-mini-solitario i:nth-child(3) { transform: rotate(6deg); }
.jg-mini-solitario i:nth-child(4) { transform: rotate(18deg); box-shadow: 0 0 0 2px var(--verde-cocuyo), var(--glow-suave); }
.jg-tarjeta:hover .jg-mini-solitario i:nth-child(1) { transform: rotate(-28deg); }
.jg-tarjeta:hover .jg-mini-solitario i:nth-child(2) { transform: rotate(-10deg); }
.jg-tarjeta:hover .jg-mini-solitario i:nth-child(3) { transform: rotate(10deg); }
.jg-tarjeta:hover .jg-mini-solitario i:nth-child(4) { transform: rotate(28deg) translateY(-4%); }

/* Sudoku: un 4×4 con cajas marcadas; el número encendido late. */
.jg-mini-sudoku { grid-template-columns: repeat(4, 13%); gap: 2px; padding: 2px; }
.jg-mini-sudoku i { aspect-ratio: 1; }
.jg-mini-sudoku i { background: var(--negro-elevado); border-radius: 3px; font-size: 7cqw; font-weight: 700; color: var(--verde-cocuyo); }
.jg-mini-sudoku i:nth-child(4n + 2) { margin-right: 3px; }
.jg-mini-sudoku i:nth-child(n + 5):nth-child(-n + 8) { margin-bottom: 3px; }
.jg-mini-sudoku i.on { background: var(--verde-cocuyo); color: var(--tinta-sobre-verde); box-shadow: var(--glow-suave); }
.jg-tarjeta:hover .jg-mini-sudoku i:not([data-t]) { background: color-mix(in srgb, var(--verde-cocuyo) 14%, var(--negro-elevado)); }
.jg-tarjeta:hover .jg-mini-sudoku i.on { animation: jg-mini-latir .9s ease-in-out infinite; }

/* Buscaminas: casillas tapadas (en relieve) y abiertas con números. */
.jg-mini-buscaminas { grid-template-columns: repeat(6, 11%); gap: 2px; }
.jg-mini-buscaminas i { aspect-ratio: 1; }
.jg-mini-buscaminas i { background: var(--negro-elevado); border-radius: 3px; font-size: 6.5cqw; color: var(--verde-cocuyo); }
.jg-mini-buscaminas i.off { background: linear-gradient(160deg, color-mix(in srgb, var(--blanco-luz) 16%, var(--pizarra)), var(--pizarra)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--negro-abismo) 50%, transparent); }
.jg-mini-buscaminas i.alt { font-size: 6cqw; }
.jg-mini-buscaminas i[data-t="2"] { color: var(--lima-clara); }
.jg-tarjeta:hover .jg-mini-buscaminas i.off:not(.alt):nth-child(4), .jg-tarjeta:hover .jg-mini-buscaminas i.off:not(.alt):nth-child(10) { background: var(--negro-elevado); box-shadow: inset 0 0 0 1px var(--jg-luz-media); }

/* Sopa de letras: una palabra encerrada en una cápsula de luz. */
.jg-mini-sopa-letras { grid-template-columns: repeat(6, 11%); gap: 1px; }
.jg-mini-sopa-letras i { aspect-ratio: 1; }
.jg-mini-sopa-letras i { font-size: 6.5cqw; color: var(--gris-niebla); }
.jg-mini-sopa-letras i.on { color: var(--blanco-luz); background: color-mix(in srgb, var(--verde-cocuyo) 30%, transparent); }
.jg-mini-sopa-letras i.on:nth-child(7) { border-radius: 999px 0 0 999px; }
.jg-mini-sopa-letras i.on:nth-child(12) { border-radius: 0 999px 999px 0; }
.jg-tarjeta:hover .jg-mini-sopa-letras i.on { background: color-mix(in srgb, var(--lima-clara) 55%, transparent); color: var(--tinta-sobre-verde); box-shadow: var(--glow-suave); }

/* 2048: el tablero con la ficha 2048 encendida. */
.jg-mini-2048 { grid-template-columns: repeat(4, 12.5%); gap: 3px; padding: 4px; }
.jg-mini-2048 i { aspect-ratio: 1; }
.jg-mini-2048 i { border-radius: 4px; background: color-mix(in srgb, var(--pizarra) 75%, var(--verde-cocuyo)); font-size: 4.6cqw; }
.jg-mini-2048 i:not([data-t]) { background: var(--negro-elevado); }
.jg-mini-2048 i.alt { background: color-mix(in srgb, var(--pizarra) 30%, var(--verde-cocuyo)); color: var(--tinta-sobre-verde); }
.jg-mini-2048 i.on { background: var(--lima-clara); color: var(--tinta-sobre-verde); box-shadow: var(--glow-medio); font-size: 3.8cqw; }
.jg-tarjeta:hover .jg-mini-2048 i.on { transform: scale(1.12); }
.jg-tarjeta:hover .jg-mini-2048 i.alt { transform: translateX(-3px); }

/* Tres en raya: la diagonal ganadora encendida. */
.jg-mini-tres-en-raya { grid-template-columns: repeat(3, 15%); gap: 4px; }
.jg-mini-tres-en-raya i { aspect-ratio: 1; }
.jg-mini-tres-en-raya i { background: var(--negro-elevado); border-radius: 6px; font-size: 8cqw; color: var(--gris-niebla); }
.jg-mini-tres-en-raya i.on { color: var(--verde-cocuyo); text-shadow: var(--glow-suave); }
.jg-tarjeta:hover .jg-mini-tres-en-raya i.on { background: color-mix(in srgb, var(--verde-cocuyo) 22%, var(--negro-elevado)); transform: scale(1.06); }

/* Serpiente: cuerpo de luz, cabeza y una luciérnaga. */
.jg-mini-serpiente { grid-template-columns: repeat(8, 8.5%); gap: 2px; }
.jg-mini-serpiente i { aspect-ratio: 1; }
.jg-mini-serpiente i { border-radius: 2px; }
.jg-mini-serpiente i:not(.on):not(.cab):not(.alt)::after { content: ''; width: 2px; height: 2px; border-radius: 50%; background: var(--negro-borde); }
.jg-mini-serpiente i.on { background: color-mix(in srgb, var(--verde-cocuyo) 75%, var(--negro-abismo)); border-radius: 3px; }
.jg-mini-serpiente i.cab { background: var(--verde-cocuyo); border-radius: 40%; box-shadow: var(--glow-suave); }
.jg-mini-serpiente i.alt::after { content: ''; width: 60%; height: 60%; border-radius: 50%; background: var(--lima-clara); box-shadow: var(--glow-medio); }
.jg-tarjeta:hover .jg-mini-serpiente i.alt::after { animation: jg-mini-latir .8s ease-in-out infinite; }
.jg-tarjeta:hover .jg-mini-serpiente i.on, .jg-tarjeta:hover .jg-mini-serpiente i.cab { box-shadow: var(--glow-suave); }

/* Memorama: cartas boca abajo y dos parejas a la vista. */
.jg-mini-memorama { grid-template-columns: repeat(4, 13%); gap: 4px; perspective: 400px; }
.jg-mini-memorama i { aspect-ratio: 13 / 17; }
.jg-mini-memorama i { border-radius: 5px; font-size: 8cqw; background: var(--pizarra); border: 1px solid var(--jg-celda-borde); }
.jg-mini-memorama i.off { background: linear-gradient(150deg, color-mix(in srgb, var(--verde-cocuyo) 40%, var(--negro-elevado)), var(--negro-elevado)); }
.jg-mini-memorama i.on { box-shadow: 0 0 0 1px var(--verde-cocuyo), var(--glow-suave); }
.jg-tarjeta:hover .jg-mini-memorama i.off:nth-child(1), .jg-tarjeta:hover .jg-mini-memorama i.off:nth-child(8) { transform: rotateY(180deg); }

/* Vuelo del Cocuyo: dos ramas y el insecto con sus dos faros. */
.jg-mini-vuelo-cocuyo { display: block; background: radial-gradient(60% 50% at 80% 10%, color-mix(in srgb, var(--blanco-luz) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--negro-abismo), color-mix(in srgb, var(--verde-cocuyo) 10%, var(--negro-abismo))); }
.jg-mini-vuelo-cocuyo i { position: absolute; width: 11%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--pizarra) 60%, var(--verde-profundo)), var(--pizarra)); }
.jg-mini-vuelo-cocuyo i:nth-child(1) { left: 42%; top: 0; height: 32%; }
.jg-mini-vuelo-cocuyo i:nth-child(2) { left: 42%; bottom: 0; height: 30%; }
.jg-mini-vuelo-cocuyo i:nth-child(3) { left: 80%; top: 0; height: 48%; }
.jg-mini-vuelo-cocuyo i:nth-child(4) { left: 80%; bottom: 0; height: 16%; }
.jg-mini-vuelo-cocuyo i.on {
  left: 18%; top: 44%; width: 14%; height: auto; aspect-ratio: 1.4; border-radius: 50% 50% 45% 45%;
  background: color-mix(in srgb, var(--negro-elevado) 70%, var(--verde-profundo)); box-shadow: 0 0 22px 4px color-mix(in srgb, var(--verde-cocuyo) 35%, transparent);
}
.jg-mini-vuelo-cocuyo i.on::before, .jg-mini-vuelo-cocuyo i.on::after { content: ''; position: absolute; top: 34%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--verde-cocuyo); box-shadow: var(--glow-medio); }
.jg-mini-vuelo-cocuyo i.on::before { left: 22%; }
.jg-mini-vuelo-cocuyo i.on::after { right: 22%; }
.jg-tarjeta:hover .jg-mini-vuelo-cocuyo i.on { transform: translate(40%, -55%) rotate(-12deg); }
.jg-tarjeta:hover .jg-mini-vuelo-cocuyo i:not(.on) { transform: translateX(-12%); }

/* Palabra del día: tres intentos con sus colores (lima = en su sitio, ámbar con rayas = está en otro sitio, gris = no está). */
.jg-mini-palabra-dia { grid-template-columns: repeat(5, 11%); gap: 3px; }
.jg-mini-palabra-dia i { aspect-ratio: 1; border-radius: 3px; font-size: 6cqw; background: var(--negro-elevado); border: 1px solid var(--negro-borde); }
.jg-mini-palabra-dia i.off { background: color-mix(in srgb, var(--pizarra) 70%, var(--negro-abismo)); color: var(--gris-humo); }
.jg-mini-palabra-dia i.alt { color: var(--blanco-luz); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--peligro) 45%, var(--lima-clara)) 0 3px, color-mix(in srgb, var(--peligro) 30%, var(--negro-elevado)) 3px 6px); }
.jg-mini-palabra-dia i.on { background: var(--verde-cocuyo); color: var(--tinta-sobre-verde); border-color: var(--verde-cocuyo); }
.jg-mini-palabra-dia i.on:nth-child(n + 11) { box-shadow: var(--glow-suave); }
.jg-tarjeta:hover .jg-mini-palabra-dia i:nth-child(n + 11) { transform: rotateX(360deg); }
.jg-tarjeta:hover .jg-mini-palabra-dia i:nth-child(12) { transition-delay: .06s; }
.jg-tarjeta:hover .jg-mini-palabra-dia i:nth-child(13) { transition-delay: .12s; }
.jg-tarjeta:hover .jg-mini-palabra-dia i:nth-child(14) { transition-delay: .18s; }
.jg-tarjeta:hover .jg-mini-palabra-dia i:nth-child(15) { transition-delay: .24s; }

/* Bloques: una pieza en «Z» cayendo sobre filas casi llenas. */
.jg-mini-bloques { grid-template-columns: repeat(6, 9%); gap: 2px; padding: 4px 6px; border-left: 0; }
.jg-mini-bloques i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--negro-elevado) 60%, transparent); }
.jg-mini-bloques i.on { background: var(--lima-clara); box-shadow: var(--glow-suave); }
.jg-mini-bloques i.alt { background: color-mix(in srgb, var(--verde-cocuyo) 45%, var(--pizarra)); }
.jg-tarjeta:hover .jg-mini-bloques i.on { transform: translateY(115%); }

/* Cuatro en raya: tablero con huecos y cuatro fichas lima en diagonal. */
.jg-mini-cuatro-en-raya { grid-template-columns: repeat(7, 8%); gap: 3px; padding: 6px; border-radius: 12px; }
.jg-mini-cuatro-en-raya i { aspect-ratio: 1; border-radius: 50%; background: var(--negro-abismo); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--negro-abismo) 80%, transparent); outline: 2px solid color-mix(in srgb, var(--verde-profundo) 60%, var(--negro-elevado)); }
.jg-mini-cuatro-en-raya i.on { background: var(--verde-cocuyo); box-shadow: var(--glow-suave); }
.jg-mini-cuatro-en-raya i.alt { background: var(--gris-niebla); }
.jg-tarjeta:hover .jg-mini-cuatro-en-raya i.on { background: var(--lima-clara); box-shadow: var(--glow-medio); }

@keyframes jg-mini-latir { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .jg-tarjeta, .jg-mini i { transition: none; }
  .jg-tarjeta:hover { transform: none; }
  .jg-tarjeta:hover .jg-mini i, .jg-tarjeta:hover .jg-mini i::after { animation: none !important; transform: none !important; }
}


/* cocuyo-css: assets/css/inicio-portada.css */
/* ============================================================
   COCUYO — PORTADA debajo de la intro (inicio-portada.css)
   ------------------------------------------------------------
   Dueño, 12-oct-2026: «el video de intro está perfecto, pero todo lo que
   sigue abajo ya está obsoleto». Eligió «la mezcla»: los modelos de la
   propuesta 1 (títulos en mayúsculas, TOP / NEW / ECONÓMICO), los útiles y
   juegos de la propuesta 3, los planes iguales que en Precios
   (planes-tarjetas.css) y referencias nuevas que no se repiten.
   Marcado: inicio-nuevo.js → contenido(). Prototipos y fotos en
   docs/portada-v341/.
   Tarjetas que el cocuyo ilumina (.pv-luz): «Card Spotlight» de Aceternity
   rehecho en CSS; inicio-nuevo.js solo apunta --mx/--my.
   Colores solo de tokens.css / familia.css. En el móvil la portada no se
   enseña (vista-init.js lleva a Crear), pero todo se apila igual.
   ============================================================ */

.inuevo .pv {
  --pv-sup: color-mix(in srgb, var(--blanco-luz) 3.2%, var(--negro-abismo));
  --pv-sup-2: color-mix(in srgb, var(--blanco-luz) 5.5%, var(--negro-abismo));
  --pv-linea: color-mix(in srgb, var(--blanco-luz) 7%, transparent);
  --pv-r: 20px;
}
.inuevo .pv.f-seccion { padding-block: clamp(72px, 4rem + 3vw, 128px) 0; }
.inuevo .pv + .in-final { padding-top: clamp(72px, 4rem + 3vw, 128px); }

/* ---------- Cabeza de sección ---------- */
.pv-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.pv-cabeza .f-eyebrow { margin-bottom: 14px; }
.pv-cabeza .f-lead { margin-top: 14px; }
.pv-cabeza > .f-enlace, .pv-cabeza-fin { flex: none; white-space: nowrap; }
.pv-cabeza-fin { display: flex; align-items: center; gap: 16px; }
.pv-mayus {
  margin: 0; color: var(--f-texto); font-weight: 700; text-transform: uppercase; text-wrap: balance;
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.4rem); line-height: .98; letter-spacing: -0.035em;
}
/* Sin mayúsculas ni interletraje negativo donde la escritura no los tiene. */
:is(:lang(zh), :lang(ja), :lang(ko), :lang(ar), :lang(ur), :lang(hi), :lang(bn), :lang(th)) :is(.pv-mayus, .pa-medio-nombre strong) { text-transform: none; letter-spacing: 0; line-height: 1.15; }

/* ---------- Tarjeta que el cocuyo ilumina ---------- */
.pv-luz {
  position: relative; isolation: isolate; border-radius: var(--pv-r);
  background: var(--pv-sup); box-shadow: inset 0 0 0 1px var(--pv-linea);
  color: var(--f-texto); text-decoration: none;
  transition: box-shadow var(--f-medio), background var(--f-medio);
}
.pv-luz::before, .pv-luz::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 260ms ease;
}
.pv-luz::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--verde-cocuyo) 11%, transparent), transparent 70%); }
.pv-luz::after {
  z-index: 2; padding: 1px;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--verde-cocuyo) 85%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(var(--negro-abismo) 0 0) content-box, linear-gradient(var(--negro-abismo) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--negro-abismo) 0 0) content-box exclude, linear-gradient(var(--negro-abismo) 0 0);
}
.pv-luz:hover::before, .pv-luz:hover::after, .pv-luz:focus-visible::after, .pv-luz:focus-within::after { opacity: 1; }
.pv-luz:hover { background: var(--pv-sup-2); }
.pv-media { position: relative; display: block; overflow: hidden; border-radius: calc(var(--pv-r) - 6px); }
.pv-media > img, .pv-media > video { transition: transform 700ms var(--in-curva, ease); }
a.pv-luz:hover .pv-media > img, .pa-medio-media:hover .pv-media > img, .pa-medio-media:hover .pv-media > video { transform: scale(1.04); }

/* ---------- Un solo estudio: Video / Imagen / Audio ---------- */
.pa-medios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pa-medio { display: grid; align-content: start; gap: 10px; padding: 10px; }
.pa-medio-media { position: relative; display: block; color: var(--f-texto); text-decoration: none; border-radius: calc(var(--pv-r) - 6px); }
.pa-medio-media:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; }
.pa-medio-media .pv-media { aspect-ratio: 16 / 11; background: var(--f-sup-2); }
.pa-medio-media .pv-media > img, .pa-medio-media .pv-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pa-medio-media .pv-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, var(--negro-abismo) 85%, transparent), transparent 55%); }
.pa-medio-nombre { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 4px; }
.pa-medio-nombre strong { font-size: 1.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; }
.pa-medio-nombre span { font-size: .875rem; color: var(--f-texto-2); }
.pa-medio-lista { display: grid; gap: 2px; }
.pa-medio-mas { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 8px; color: var(--f-texto-2); font-size: .875rem; font-weight: 500; text-decoration: none; }
.pa-medio-mas:hover { color: var(--f-texto); }
/* Imagen: cuatro fotos distintas. */
.pa-medio-media .pd-mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--negro-abismo); }
.pa-medio-media .pd-mosaico > img { position: static; width: 100%; height: 100%; min-height: 0; }
/* Audio: el micrófono, una onda lima que late y la frase que se dice. */
.pd-audio > img { filter: brightness(.75); }
.pd-onda { position: absolute; left: 18px; right: 18px; top: 34%; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.pd-onda i { width: 4px; border-radius: 4px; background: var(--f-lima); box-shadow: var(--glow-suave); animation: pd-latir 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -90ms); }
@keyframes pd-latir { 50% { transform: scaleY(.45); } }
.pd-voz { position: absolute; left: 18px; top: 16px; z-index: 2; display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--f-vidrio); backdrop-filter: var(--vidrio-fino); -webkit-backdrop-filter: var(--vidrio-fino); font-size: .75rem; }
.pd-voz b { font-weight: 600; color: var(--f-lima); }
.pd-voz em { font-style: normal; color: var(--f-texto-2); }
/* «Pausar escenas» (inicio-escenas.js) también para la onda. */
.in-escenas-pausa .pd-onda i { animation: none; }

/* Fila de modelo: logo de la marca, nombre, frase y su insignia del editor. */
.pv-logo {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--pv-sup-2); box-shadow: inset 0 0 0 1px var(--pv-linea); color: var(--f-texto);
}
.pv-logo svg { width: 18px; height: 18px; }
.pv-modelo {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 12px;
  color: var(--f-texto); text-decoration: none; transition: background var(--f-rapido);
}
.pv-modelo:hover { background: var(--pv-sup-2); }
.pv-modelo-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pv-modelo-txt strong { font-weight: 550; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-modelo-txt span { font-size: .8125rem; color: var(--f-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-modelo .f-chip { flex: none; height: 20px; padding: 0 7px; font-size: .625rem; }

/* ---------- Apps: pastillas y ocho tarjetas ---------- */
.pv-pastillas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.inuevo .in-apps .pv-pastillas .f-tab {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 0; border-radius: var(--f-r-pill);
  background: var(--pv-sup); box-shadow: inset 0 0 0 1px var(--pv-linea); color: var(--f-texto-2);
  font: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background var(--f-rapido), color var(--f-rapido), box-shadow var(--f-rapido);
}
.inuevo .in-apps .pv-pastillas .f-tab:hover { color: var(--f-texto); background: var(--pv-sup-2); }
.inuevo .in-apps .pv-pastillas .f-tab[aria-selected="true"] { background: var(--f-lima-suave); color: var(--f-texto); box-shadow: inset 0 0 0 1px var(--f-lima-linea), 0 0 18px -6px var(--verde-cocuyo); }
.pa-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pa-apps > li { display: flex; min-width: 0; }
.pv-app { flex: 1; display: grid; align-content: start; gap: 12px; min-width: 0; padding: 8px 8px 16px; }
.pv-app .pv-media { aspect-ratio: 16 / 9; }
.pv-app .pv-media > img { width: 100%; height: 100%; object-fit: cover; }
.pv-app .pv-media--entera { position: relative; overflow: hidden; }
.pv-app .pv-media--entera > .pv-fondo { position: absolute; inset: 0; filter: blur(20px) brightness(.32) saturate(1.2); transform: scale(1.2); }
a.pv-luz:hover .pv-media--entera > .pv-fondo { transform: scale(1.24); }
.pv-app .pv-media--entera > .pv-frente { position: relative; object-fit: contain; padding-block: 8px; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--negro-abismo) 45%, transparent)); }
.pv-app-chips { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; gap: 6px; }
.pv-app-cuerpo { display: grid; gap: 4px; padding-inline: 8px; }
.pv-app-cuerpo strong { font-weight: 550; }
.pv-app-cuerpo span { font-size: .875rem; color: var(--f-texto-3); }

/* ---------- Útiles y juegos gratis ---------- */
.pc-gratis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pc-mitad { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px; overflow: hidden; }
.pc-mitad p { margin: 0; color: var(--f-texto-3); max-width: 42ch; }
.pc-mitad .f-h3 a { color: inherit; text-decoration: none; }
.pc-mitad > .f-enlace { margin-top: auto; padding-top: 8px; }
.pc-grande {
  font-size: 7.5rem; font-weight: 700; line-height: .85; letter-spacing: -0.06em;
  background: linear-gradient(180deg, var(--lima-clara), var(--verde-cocuyo) 60%, color-mix(in srgb, var(--verde-cocuyo) 30%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pd-utiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
.pv-util {
  display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 104px; padding: 16px 10px;
  background: var(--pv-sup-2); text-align: center; font-size: .8125rem; font-weight: 500; line-height: 1.3;
}
.pv-util img { width: 44px; height: 44px; }
.pc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-cats .f-chip { height: 26px; padding: 0 10px; font-size: .75rem; }
.pc-cats .f-chip { text-decoration: none; }
.pc-cats .f-chip:hover { color: var(--f-texto); background: var(--f-sup-3); }
.pc-cats b { font-weight: 500; color: var(--f-texto-3); margin-inline-start: 4px; }
/* Juegos: miniatura dibujada (juegos-minis.css) y nombre. */
.pc-juegos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
.pc-juego { display: grid; gap: 6px; min-width: 0; color: var(--f-texto-2); font-size: .8125rem; text-decoration: none; border-radius: 14px; }
.pc-juego:hover { color: var(--f-texto); }
.pc-juego .jg-mini { aspect-ratio: 1; }
.pc-juego-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 2px; }

/* ---------- Precios: las tarjetas de planes.html ---------- */
.inuevo .in-precio .in-planes { margin-top: 8px; }
.inuevo .in-precio .pricing-catalog, .inuevo .in-precio #precios { background: none; }

/* ---------- Conectores ---------- */
.pa-conector { display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; gap: 40px; align-items: center; padding: 32px 40px; }
.pa-conector-texto { display: grid; gap: 8px; }
.pa-conector .f-h3 { margin: 4px 0 0; font-size: 1.375rem; letter-spacing: -0.02em; }
.pa-conector-texto p { margin: 0; max-width: 46ch; color: var(--f-texto-3); font-size: .9375rem; }
/* Los cinco clientes del conector: fichas iguales con su marca de trazo. */
.pa-clientes { display: grid; grid-template-columns: repeat(5, 76px); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pa-cliente {
  display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 14px;
  background: var(--pv-sup-2); box-shadow: inset 0 0 0 1px var(--pv-linea);
  color: var(--f-texto-2); font-size: .75rem; font-weight: 500;
  transition: color var(--f-rapido), box-shadow var(--f-rapido), transform var(--f-medio);
}
.pa-cliente svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pa-conector:hover .pa-cliente { color: var(--f-texto); }
.pa-cliente:hover { box-shadow: inset 0 0 0 1px var(--f-lima-linea); transform: translateY(-2px); }
.pa-cliente:hover svg { color: var(--verde-cocuyo); }
/* Cierre: la escena del casting se ve de verdad, con el título grande de la portada. */
.inuevo .in-final .in-cta { min-height: 520px; box-shadow: inset 0 0 0 1px var(--pv-linea); }
.inuevo .in-final .in-cta-media > img { opacity: .8; }
.inuevo .in-final .in-cta-media.clip-listo > video.clip-tarjeta { opacity: .85; }
.inuevo .in-final .in-cta-media::after {
  background: radial-gradient(ellipse 50% 55% at 50% 55%, color-mix(in srgb, var(--negro-abismo) 70%, transparent), transparent 80%),
    linear-gradient(to top, var(--negro-abismo), transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--negro-abismo) 55%, transparent), transparent 35%);
}
.inuevo .in-final .f-h1 { font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); font-weight: 700; line-height: .95; letter-spacing: -0.045em; text-transform: uppercase; }
:is(:lang(zh), :lang(ja), :lang(ko), :lang(ar), :lang(ur), :lang(hi), :lang(bn), :lang(th)) .inuevo .in-final .f-h1 { text-transform: none; letter-spacing: 0; line-height: 1.15; }
.inuevo .in-final .f-luces { filter: drop-shadow(0 0 14px var(--verde-cocuyo)); }
/* Cierre según la sesión (cabecera-acceso.js pone html[data-cy-acceso]). */
html[data-cy-acceso="cuenta"] .inuevo .in-solo-visitante, html:not([data-cy-acceso="cuenta"]) .inuevo .in-solo-cuenta { display: none; }

/* ---------- Tableta y móvil (la portada móvil no se enseña; se apila igual) ---------- */
@media (max-width: 1000px) {
  .pa-medios { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .pa-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-gratis, .pa-conector { grid-template-columns: minmax(0, 1fr); }
  .pa-conector { padding: 28px; gap: 24px; justify-items: start; }
  .pa-clientes { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 640px) {
  .pv-cabeza { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pv-cabeza > .f-enlace, .pv-cabeza-fin { white-space: normal; }
  .pa-apps { grid-template-columns: minmax(0, 1fr); }
  .pc-mitad { padding: 24px; }
  .pc-grande { font-size: 5rem; }
  .pd-utiles, .pc-juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-luz, .pv-luz::before, .pv-luz::after, .pv-media > img, .pv-media > video { transition: none; }
  .pd-onda i { animation: none; }
}

/* ---------- Efectos (Aceternity UI rehecho sin librerías, 12-oct-2026) ---------- */
/* Píldora que se desliza hasta la categoría elegida (inicio-nuevo.js, pildora()). */
.pv-pastillas { position: relative; isolation: isolate; }
.pv-pildora {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  border-radius: var(--f-r-pill); background: var(--f-lima-suave);
  box-shadow: inset 0 0 0 1px var(--f-lima-linea), 0 0 18px -6px var(--verde-cocuyo);
  transition: transform 420ms var(--in-curva, cubic-bezier(.2, .8, .2, 1)), width 420ms var(--in-curva, cubic-bezier(.2, .8, .2, 1)), height 420ms var(--in-curva, ease);
}
.inuevo .in-apps .pv-pastillas .f-tab { position: relative; z-index: 1; }
.inuevo .in-apps .pv-pildora-on .f-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
/* Cifras grandes: ancho fijo por cifra para que no bailen al contar. */
.pc-grande { font-variant-numeric: tabular-nums; }
/* Útiles: la tarjeta sube un poco y el icono crece al pasar. */
.pv-util { transition: transform var(--f-medio), background var(--f-medio); }
.pv-util img { transition: transform 360ms var(--in-curva, ease); }
.pv-util:hover { transform: translateY(-2px); }
.pv-util:hover img { transform: scale(1.08); }
.pc-juego .jg-mini { transition: transform var(--f-medio), box-shadow var(--f-medio); }
.pc-juego:hover .jg-mini { transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--verde-cocuyo); }
/* «Empieza a crear» del cierre: halo lima que respira, como Generar en Crear. */
@keyframes pv-halo { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde-cocuyo) 40%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--verde-cocuyo) 0%, transparent); } }
.inuevo .in-cta .f-btn--primario { animation: pv-halo 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pv-pildora, .pv-util, .pv-util img, .pc-juego .jg-mini, .pa-cliente { transition: none; }
  .pa-cliente:hover { transform: none; }
  .pv-util:hover, .pv-util:hover img, .pc-juego:hover .jg-mini { transform: none; }
  .inuevo .in-cta .f-btn--primario { animation: none; }
}


/* cocuyo-css: assets/css/planes-estudio.css */
.cplanes, .cplan-dialog { --cp-lima:#b9f54b; --cp-texto:#f4f7ef; --cp-mut:#aeb7a6; --cp-borde:#e9f5dd21; font-family:var(--fuente,var(--font,Inter,Arial,sans-serif)); color:var(--cp-texto); }
.cplanes *, .cplan-dialog * { box-sizing:border-box; }
.cplanes a, .cplan-dialog a { color:inherit; text-decoration:none; }
.cplanes button, .cplan-dialog button { font:inherit; cursor:pointer; }
.cplanes h2, .cplanes h3, .cplanes p, .cplan-dialog h2, .cplan-dialog h3, .cplan-dialog p { margin:0; }
.cplanes a:focus-visible, .cplanes button:focus-visible, .cplan-dialog a:focus-visible, .cplan-dialog button:focus-visible { outline:2px solid var(--cp-lima); outline-offset:4px; }
.cplanes-top { display:flex; gap:25px; align-items:end; justify-content:space-between; margin-bottom:26px; }
.cplanes-kicker { color:#a7b59a; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:13px !important; }
.cplanes-top h2 { font-size:clamp(29px,3vw,43px); line-height:1.12; letter-spacing:-.045em; font-weight:550; }
.cplanes-top > p { color:var(--cp-mut); max-width:365px; font-size:13px; line-height:1.7; }
.cplanes-aviso { display:flex; gap:8px; align-items:center; margin:0 0 15px !important; color:#acb59f; font-size:11px; line-height:1.5; }
.cplanes-aviso::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:#cbd8ad; }
.cplanes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cplan { min-width:0; display:flex; flex-direction:column; padding:28px; border:1px solid var(--cp-borde); border-radius:17px; background:#10140f; }
.cplan-pro49 { background:radial-gradient(ellipse at 90% 0,#93ca3020,transparent 55%),#141b0f; border-color:#b9f54b66; }
.cplan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cplan-heading h3 { font-size:23px; line-height:1.2; font-weight:600; letter-spacing:-.04em; }
.cplan-ahorro { border:1px solid #b9f54b2e; border-radius:100px; color:#c7ef95; background:#b9f54b0a; padding:5px 9px; font-size:10px; line-height:1.3; white-space:nowrap; }
.cplan-desc { margin-top:11px !important; color:var(--cp-mut); font-size:12px; line-height:1.6; min-height:38px; }
.cplan-precio { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:6px; row-gap:2px; margin-top:26px; font-variant-numeric:tabular-nums; }
.cplan-precio b { font-size:46px; font-weight:550; line-height:1.1; letter-spacing:-.05em; }
.cplan-precio span { color:#a8b49c; font-size:11px; }
.cplan-referencia { margin-top:10px !important; color:#97a68c; font-size:10px; line-height:1.6; min-height:33px; }
.cplan-creditos { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; padding-top:18px; margin-top:18px; border-top:1px solid var(--cp-borde); color:#cad7be; font-size:11px; line-height:1.6; }
.cplan-creditos strong { font-size:20px; font-weight:550; letter-spacing:-.025em; color:var(--cp-texto); }
.cplan-lista { display:flex; flex-direction:column; gap:11px; margin:22px 0 27px; padding:0; list-style:none; }
.cplan-lista li { display:flex; gap:8px; align-items:start; font-size:11px; color:#bac6ad; line-height:1.55; }
.cplan-lista svg { flex-shrink:0; width:14px; height:14px; margin-top:2px; color:#91ab77; }
.cplan-btn { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:45px; margin-top:auto; padding:11px 15px; border-radius:10px; border:1px solid #d3e4c42b; background:#ffffff05; color:#f0f6e9; font-size:12px !important; font-weight:600 !important; line-height:1.4; text-align:center; transition:background .18s,border-color .18s; }
.cplan-btn:hover { background:#26341b; border-color:#b9f54b70; }
.cplan-btn[hidden] { display:none; }
.cplan-pro49 .cplan-btn, .cplan-btn-primary { background:var(--cp-lima); color:#132009; border-color:var(--cp-lima); }
.cplan-pro49 .cplan-btn:hover, .cplan-btn-primary:hover { background:#ccfb7b; border-color:#ccfb7b; }
.cplan-status { margin-top:10px !important; color:#92a182; font-size:10px; text-align:center; line-height:1.5; }
.cplanes-extra { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:22px 2px 0; }
.cplanes-extra p { color:#acb79f; font-size:12px; line-height:1.7; max-width:760px; }
.cplanes-extra strong { color:#d9e5ce; font-weight:550; }
.cplanes-extra a { color:var(--cp-lima); font-size:12px; font-weight:550; white-space:nowrap; }
.cplanes-porque { margin-top:16px !important; color:#87977b; font-size:11px; line-height:1.75; max-width:930px; }
.cplanes-compare-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; min-height:40px; padding:9px 13px; margin:10px 0 16px; border:1px solid #b9f54b30; border-radius:9px; background:#b9f54b06; color:#ceeca5; font:inherit; font-size:12px; line-height:1.45; text-align:center; cursor:pointer; transition:background .18s,border-color .18s; }
.cplanes-compare-link:hover { background:#b9f54b12; border-color:#b9f54b66; color:#e3fac6; }
.cplanes-compare-link:focus-visible { outline:2px solid #b9f54b; outline-offset:3px; }
.cplanes-compare-link > :first-child { min-width:0; overflow-wrap:anywhere; }
.cplanes-compare-link > [aria-hidden] { flex-shrink:0; }
.cplan-dialog { position:fixed; inset:0; width:min(560px,calc(100vw - 28px)); max-width:calc(100vw - 28px); max-height:calc(100dvh - 28px); padding:25px 28px; margin:auto; border:1px solid #d4edb83d; border-radius:21px; background:radial-gradient(ellipse at 100% 0,#5673231f,transparent 45%),#11150f; box-shadow:0 35px 100px #000a; overflow-y:auto; overscroll-behavior:contain; }
.cplan-dialog:not([open]) { display:none; }
.cplan-dialog::backdrop { background:#020502c9; backdrop-filter:blur(8px); }
.cplan-dialog-close { position:absolute; top:14px; right:14px; display:flex; align-items:center; justify-content:center; width:33px; height:33px; border:1px solid #ffffff12; border-radius:50%; background:#ffffff05; color:#b9c5ae; }
.cplan-dialog-close:hover { background:#ffffff13; color:white; }
.cplan-dialog h2 { padding-right:25px; font-size:28px; line-height:1.2; font-weight:550; letter-spacing:-.045em; }
.cplan-dialog-intro { margin-top:8px !important; color:var(--cp-mut); font-size:12px; line-height:1.5; }
.cplan-actual { display:flex; flex-direction:column; gap:5px; padding:12px 14px; margin-top:17px; border:1px solid #b9f54b32; border-radius:9px; background:#b9f54b07; font-size:11px; line-height:1.5; }
.cplan-actual strong { color:#cee9b0; font-weight:550; }
.cplan-actual span { color:#a8b79b; }
.cplan-dialog-price { display:flex; gap:5px; align-items:baseline; margin-top:17px; }
.cplan-dialog-price b { font-size:43px; line-height:1.1; font-weight:550; letter-spacing:-.045em; }
.cplan-dialog-price span { font-size:12px; color:#a9b59d; }
.cplan-resumen { margin:17px 0; display:flex; flex-direction:column; gap:8px; padding:14px 0; border-block:1px solid var(--cp-borde); }
.cplan-resumen div { display:flex; justify-content:space-between; align-items:start; gap:25px; font-size:12px; line-height:1.6; }
.cplan-resumen dt { color:#acb9a0; }
.cplan-resumen dd { margin:0; color:#e6efdd; text-align:right; font-variant-numeric:tabular-nums; }
.cplan-dialog-nota { color:#a8b59e; font-size:11px; line-height:1.65; margin:12px 0 !important; }
.cplan-dialog-aviso { padding:9px 12px; border:1px solid #bccaa821; border-radius:9px; background:#d4e1c606; color:#bfccb0; font-size:11px; line-height:1.55; margin-bottom:12px !important; }
.cplan-dialog-aviso:empty { display:none; }
.cplan-dialog .cplan-btn { margin-top:0; }
.cplan-dialog .cplan-btn[disabled] { cursor:default; opacity:.55; background:#252e1d; border-color:#6f815554; color:#b5c3a4; }
.cplan-dialog-secondary { display:block; width:100%; margin-top:8px; border:0; padding:8px 10px; background:transparent; color:#bdcbb1; font-size:11px !important; text-align:center; }
.cplan-dialog-secondary:hover { color:var(--cp-lima); }
.cplan-dialog-legal { display:flex; justify-content:center; gap:15px; margin-top:11px; font-size:10px; color:#a2b194; }
.cplan-dialog-legal a:hover { color:var(--cp-lima); }
.cplan-return { position:fixed; right:22px; bottom:22px; z-index:11000; width:min(355px,calc(100vw - 28px)); box-sizing:border-box; padding:19px 39px 16px 19px; border:1px solid #b9f54b39; border-radius:14px; background:#141a11f7; color:#f1f7e9; box-shadow:0 12px 45px #0008; font-family:var(--fuente,var(--font,Inter,Arial,sans-serif)); }
.cplan-return strong { font-size:13px; font-weight:600; line-height:1.4; }
.cplan-return p { margin:8px 0 12px; font-size:12px; line-height:1.6; color:#bbc8ad; }
.cplan-return-close { position:absolute; top:10px; right:9px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; color:#bdcbb0; cursor:pointer; }
.cplan-return-close:hover { background:#ffffff12; color:#fff; }
.cplan-return-action { border:0; padding:0; background:transparent; color:#c1f276; font:inherit; font-size:12px; line-height:1.5; font-weight:600; cursor:pointer; }
.cplan-return-action[disabled] { cursor:default; color:#9dae90; }
.cplan-return button:focus-visible { outline:2px solid #b9f54b; outline-offset:3px; }
@media (max-width:480px) { .cplan-return { right:14px; bottom:max(14px,env(safe-area-inset-bottom)); } }
@media (max-width:1000px) { .cplan { padding:22px; }.cplan-precio b { font-size:39px; }.cplan-heading { align-items:start; flex-direction:column; gap:8px; }.cplan-ahorro { min-height:23px; }.cplan-free .cplan-heading::after, .cplan-basico .cplan-heading::after { content:''; height:23px; }.cplan-desc { min-height:40px; } }
@media (max-width:760px) {
 .cplanes-top { flex-direction:column; align-items:start; gap:14px; }.cplanes-top h2 { font-size:32px; }.cplanes-top > p { font-size:12px; }
 .cplanes-grid { grid-template-columns:1fr; gap:13px; }.cplan { padding:25px; border-radius:14px; }.cplan-heading { flex-direction:row; align-items:center; gap:12px; }.cplan-free .cplan-heading::after, .cplan-basico .cplan-heading::after { content:none; }.cplan-desc { min-height:0; }
 .cplan-precio { margin-top:20px; }.cplan-precio b { font-size:42px; }.cplan-referencia { min-height:0; }.cplan-lista { margin-block:19px 23px; gap:9px; }.cplan-creditos { margin-top:14px; padding-top:14px; }
 .cplanes-extra { align-items:start; flex-direction:column; gap:13px; padding-top:18px; }.cplanes-extra p { font-size:11px; }.cplanes-porque { font-size:10px; }
 .cplan-dialog { padding:28px 21px 24px; border-radius:17px; }.cplan-dialog h2 { font-size:26px; }.cplan-dialog-intro { font-size:12px; }.cplan-resumen { margin-block:19px; padding-block:17px; }.cplan-resumen div { font-size:11px; gap:15px; }.cplan-dialog-nota { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .cplanes *, .cplan-dialog *, .cplanes-compare-link { transition:none !important; animation:none !important; } }

/* ============ Precios del Estudio móvil estilo Higgsfield (dueño, 8-oct-2026) ============
   planes-estudio.js → htmlHf(): solo con body.hf-movil (Estudio móvil). Página a pantalla
   completa: vídeo arriba, tarjetas de plan que se eligen, recarga en azul, «Qué incluye»
   y el botón de pago fijo abajo: blanco con letra negra y los créditos en una pastilla lima
   (dueño: «es el botón el que se ve raro … lo demás no molestaba tanto»). */
.cplan-dialog.cplan-hf{--hfp-lima:#d1fe17;position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#0b0b0b;color:#fff;overflow-y:auto;overscroll-behavior:contain;font-family:var(--font,system-ui,sans-serif);box-shadow:none}
.cplan-dialog.cplan-hf::backdrop{background:#0b0b0b}
/* Cabecera fija (10-oct-2026): la ✕ vive en una barra pegada arriba. Sobre el vídeo es
   transparente; al bajar (planes-estudio.js → barraFija, clase .is-fija) se vuelve opaca
   y muestra el título, así la ✕ nunca queda encima de una tarjeta o de un precio. En
   árabe la ✕ pasa a la derecha (inicio de la línea). Lo de detrás no se mueve. */
html:has(dialog.cplan-dialog.cplan-hf[open]){overflow:hidden}
.cplan-hf-barra{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;box-sizing:border-box;height:calc(58px + env(safe-area-inset-top,0px));margin-bottom:calc(-58px - env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 12px 0;transition:background-color .2s,box-shadow .2s}
.cplan-hf-barra.is-fija{background:rgb(11 11 11/.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgb(255 255 255/.07)}
.cplan-hf-barra__t{flex:1;min-width:0;margin-inline-end:44px;overflow:hidden;text-align:center;white-space:nowrap;text-overflow:ellipsis;font:700 16px/1.2 var(--font,system-ui);opacity:0;transition:opacity .2s}
.cplan-hf-barra.is-fija .cplan-hf-barra__t{opacity:1}
.cplan-hf .cplan-dialog-close{position:static;flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgb(0 0 0/.5);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cplan-hf-barra.is-fija .cplan-dialog-close{background:#1f1f1f}
.cplan-hf-hero{position:relative;height:250px;overflow:hidden;background:#111 url(/assets/media/explorar/h-astronauta.webp) center/cover}
.cplan-hf-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cplan-hf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0/.15) 0%,transparent 40%,rgb(11 11 11/.85) 88%,#0b0b0b 100%)}
.cplan-hf-hero p{position:absolute;left:0;right:0;bottom:44px;z-index:1;display:grid;justify-items:center;gap:8px;margin:0;text-align:center}
.cplan-hf-hero span{padding:5px 12px;border-radius:8px;background:var(--hfp-lima);color:#131517;font:italic 800 13px/1 var(--font,system-ui);transform:rotate(-3deg);box-shadow:0 6px 18px rgb(209 254 23/.25)}
.cplan-hf-hero b{font:italic 900 34px/1 var(--font,system-ui);letter-spacing:-.02em;text-shadow:0 4px 24px rgb(0 0 0/.6)}
.cplan-hf-cuerpo{position:relative;margin-top:-26px;padding:20px 12px 128px;border-radius:24px 24px 0 0;background:#111;box-shadow:0 -1px 0 rgb(255 255 255/.06)}
.cplan-hf h2{margin:0;text-align:center;font:700 19px/24px var(--font,system-ui)}
/* Crear sin créditos: el saldo y lo que cuesta esa creación, encima de «Elige tu plan». */
.cplan-hf-falta{display:grid;grid-template-columns:1fr 1fr;margin:0 0 16px;padding:10px 0;border-radius:14px;background:#1a1a1a;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);text-align:center}
.cplan-hf-falta>div+div{border-inline-start:1px solid rgb(255 255 255/.08)}
.cplan-hf-falta dt{margin:0 0 3px;font:500 11px/1.3 var(--font,system-ui);color:#8a8a8a}
.cplan-hf-falta dd{margin:0;font:800 20px/1.1 var(--font,system-ui);font-variant-numeric:tabular-nums;color:#fff}
.cplan-hf-falta dd span{font:500 11px/1 var(--font,system-ui);color:#8a8a8a}
.cplan-hf-falta>div:first-child dd{color:#ff8a7a}
.cplan-hf .cplan-dialog-intro{margin:6px auto 16px;max-width:34ch;text-align:center;font:400 12px/18px var(--font,system-ui);color:#8a8a8a}
.cplan-hf .cplan-actual{display:grid;gap:4px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#1a1a1a;font-size:12px;line-height:17px;color:#bdbdbd}
.cplan-hf .cplan-actual strong{color:#fff}
.cplan-hf-planes{display:grid;gap:12px}
.cplan-hf-plan{display:block;width:100%;padding:0;overflow:hidden;border:1.5px solid rgb(255 255 255/.08);border-radius:18px;background:#191919;color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.cplan-hf-plan.is-sel{border-color:var(--hfp-lima);background:color-mix(in srgb,var(--hfp-lima) 9%,#151515);box-shadow:0 0 0 3px rgb(209 254 23/.12)}
.cplan-hf-cinta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:26px;padding:4px 10px;font:600 12px/1 var(--font,system-ui);background:var(--hfp-lima);color:#131517}
/* Rosa algo más hondo (auditoría v338): con #ff2e88, «Mejor valor» en blanco daba 3,5:1 y
   «-10% en recargas» en rosa sobre blanco 3,15:1. Con #d4006a, 5,2:1 y 4,7:1. */
.cplan-hf-plan[data-tipo="pro49"] .cplan-hf-cinta{background:#d4006a;color:#fff}
.cplan-hf-cinta em{padding:3px 6px;border-radius:6px;background:rgb(255 255 255/.92);color:#d4006a;font:italic 800 11px/1 var(--font,system-ui)}
.cplan-hf-cab{display:flex;align-items:center;gap:12px;padding:14px 14px 12px}
.cplan-hf-radio{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #4a4a4a;color:transparent}
.cplan-hf-plan.is-sel .cplan-hf-radio{border-color:var(--hfp-lima);background:var(--hfp-lima);color:#131517}
.cplan-hf-radio svg{width:13px;height:13px}
/* Icono 3D de cada plan (assets/media/iconos/plan-*.webp, decorativo). */
.cplan-hf-ic{flex:none;display:block;width:40px;height:40px;border-radius:10px;background:#0b0b0b;object-fit:cover;outline:1px solid rgb(255 255 255/.09);outline-offset:-1px}
.cplan-hf-nom{flex:1;min-width:0;display:grid;gap:3px}
.cplan-hf-nom b{font:800 21px/1.05 var(--font,system-ui);letter-spacing:-.01em}
.cplan-hf-nom small{font:400 12px/16px var(--font,system-ui);color:#9a9a9a}
.cplan-hf-precio{flex:none;display:grid;justify-items:center;min-width:86px;padding:9px 10px;border-radius:12px;background:#262626}
.cplan-hf-plan.is-sel .cplan-hf-precio{background:var(--hfp-lima);color:#131517}
.cplan-hf-precio b{font:900 24px/1 var(--font,system-ui)}
.cplan-hf-precio small{margin-top:3px;font:500 11px/1 var(--font,system-ui);opacity:.75}
.cplan-hf-lista{display:grid;gap:7px;padding:12px 16px 15px;border-top:1px solid rgb(255 255 255/.07);font:400 13px/18px var(--font,system-ui);color:#d6d6d6}
.cplan-hf-lista span{display:flex;align-items:center;gap:8px}
.cplan-hf-plan.is-sel .cplan-hf-lista svg{color:var(--hfp-lima)}
.cplan-hf .cplan-dialog-aviso{margin:12px 4px 0;text-align:center;font:500 12px/17px var(--font,system-ui);color:var(--hfp-lima)}
.cplan-hf .cplan-dialog-aviso:empty{display:none}
.cplan-hf [data-cplan-portal]{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:12px;border:1px solid rgb(255 255 255/.14);border-radius:12px;background:#1d1d1d;color:#fff;font:600 14px/1 var(--font,system-ui)}
.cplan-hf-recarga{display:grid;gap:8px;margin-top:16px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#1f55ff 0%,#3f86ff 55%,#7cb6ff 100%);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgb(255 255 255/.15)}
.cplan-hf-recarga__t{display:flex;align-items:center;gap:8px;font:italic 900 18px/1.1 var(--font,system-ui)}
.cplan-hf-recarga__t em{padding:3px 7px;border-radius:6px;background:#ff2e88;font:italic 800 11px/1 var(--font,system-ui)}
.cplan-hf-recarga__s{font:400 13px/18px var(--font,system-ui);color:rgb(255 255 255/.86)}
.cplan-hf-recarga__b{display:grid;place-items:center;height:44px;margin-top:4px;border-radius:12px;background:var(--hfp-lima);color:#131517;font:700 14px/1 var(--font,system-ui);box-shadow:0 3px 0 #8fb10b}
.cplan-hf .cplan-dialog-nota{margin:14px 6px 0;text-align:center;font:400 11px/16px var(--font,system-ui);color:#7a7a7a}
.cplan-hf-tabla{width:100%;margin-top:22px;border-collapse:separate;border-spacing:0;font:400 12px/16px var(--font,system-ui)}
.cplan-hf-tabla caption{padding:0 4px 10px;text-align:start;font:700 16px/22px var(--font,system-ui);color:#fff}
/* «Qué incluye» sin salirse por los lados (10-oct-2026): en ruso «30 использований» y
   «Без ограничений» no cabían (la tabla medía 385 px a 360 y 390 de ancho, la columna Pro
   quedaba cortada y la hoja se podía arrastrar de lado). Relleno lateral de 4 px y, en
   ruso por debajo de 381 px, guiones donde hagan falta; los demás idiomas caben enteros. */
.cplan-hf-tabla th,.cplan-hf-tabla td{padding:10px 4px;border-bottom:1px dashed rgb(255 255 255/.09);text-align:center;color:#cfcfcf}
@media (max-width:380px){.cplan-hf-tabla td:lang(ru){-webkit-hyphens:auto;hyphens:auto}}
.cplan-hf-tabla thead th{font:700 13px/1 var(--font,system-ui);color:#fff}
.cplan-hf-tabla tbody th{text-align:start;font-weight:400;color:#8f8f8f}
.cplan-hf-tabla .is-sel{background:rgb(209 254 23/.08);color:var(--hfp-lima)}
.cplan-hf-tabla thead .is-sel{border-radius:10px 10px 0 0}
.cplan-hf-tabla tbody tr:last-child .is-sel{border-radius:0 0 10px 10px}
/* El reset global «svg{display:block}» dejaba la ✓ pegada a la izquierda de su celda (a la derecha en árabe): centrada con margin-inline. */
.cplan-hf-tabla svg{display:block;width:14px;height:14px;margin-inline:auto}
.cplan-hf .cplan-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cplan-hf .cplan-dialog-legal{display:flex;justify-content:center;gap:18px;margin-top:18px;font-size:12px}
.cplan-hf .cplan-dialog-legal a{color:#8a8a8a}
/* Pie: opaco justo detrás del botón (antes asomaba la tarjeta azul de la recarga por las
   esquinas); el degradado queda solo por encima. Sin botón visible (plan ya activo), fuera. */
.cplan-hf-pie{position:fixed;left:0;right:0;bottom:0;z-index:2;padding:22px 12px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgb(11 11 11/0) 0,#0b0b0b 20px)}
.cplan-hf-pie:not(:has(.cplan-btn:not([hidden]))){display:none}
.cplan-hf-pie .cplan-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:56px;border:0;border-radius:16px;background:#fff;color:#050505;font:800 17px/1 var(--font,system-ui);letter-spacing:-.01em;box-shadow:inset 0 -3px 0 rgb(0 0 0/.12),0 10px 28px rgb(0 0 0/.6);text-decoration:none}
.cplan-hf-pie .cplan-btn:active{transform:translateY(1px)}
.cplan-hf-pie .cplan-btn:disabled{opacity:.55;box-shadow:none}
.cplan-hf-pie .cplan-btn[hidden]{display:none}
.cplan-hf-chip{padding:6px 10px;border-radius:9px;background:var(--hfp-lima);color:#131517;font:800 13px/1 var(--font,system-ui)}
.cplan-hf :is(button,a):focus-visible{outline:2px solid var(--hfp-lima);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cplan-hf-hero video{display:none}}


/* cocuyo-css: assets/css/marca.css */
/* Una misma firma en portada, Estudio, cuenta, acceso y precios.
   Las dos O son las dos luces; no se mezcla con el control de energía del Agente. */
:root{--cocuyo-marca-size:24px;--cocuyo-marca-luz:#aff33e}
html body .cn-header .cn-brand,
html body.studio-workbench .studio-public-nav #studioHomeButton .wordmark,
html body .pp-header .pp-brand,
html body .pi-header .pi-brand,
html body .cabecera>a.wordmark.wordmark-cabecera,
html body .cabecera>a.wordmark{
 font-family:"Geist",Arial,sans-serif;font-size:var(--cocuyo-marca-size);font-weight:800;
 font-style:normal;line-height:1;letter-spacing:-.055em;text-transform:none;
 color:#f5f7f2;text-shadow:none;white-space:nowrap;gap:0;
}
html body .cn-header .cn-brand .o-viva,
html body.studio-workbench .studio-public-nav #studioHomeButton .o-viva,
html body .pp-header .pp-brand .o-viva,
html body .pi-header .pi-brand .o-viva,
html body .cabecera>a.wordmark.wordmark-cabecera .o-viva,
html body .cabecera>a.wordmark .o-viva{
 color:var(--cocuyo-marca-luz);text-shadow:0 0 13px #aff33e38;
}
html body .cn-header .cn-brand,
html body .pp-header .pp-brand,
html body .pi-header .pi-brand,
html body .cabecera>a.wordmark,
html body.studio-workbench .studio-public-nav #studioHomeButton{
 display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
}
html body.studio-workbench .studio-public-nav #studioHomeButton .cocuyologo{display:none}
@media(max-width:900px){:root{--cocuyo-marca-size:20px}}
@media(max-width:370px){:root{--cocuyo-marca-size:18px}}
/* En la fila compacta del Estudio queda espacio para los tres editores e idioma. */
@media(max-width:420px){
 html body.studio-workbench .studio-public-nav #studioHomeButton{min-width:44px}
 html body.studio-workbench .studio-public-nav #studioHomeButton .wordmark{font-size:18px}
}
@media(max-width:370px){
 html body.studio-workbench .studio-public-nav #studioHomeButton .wordmark{font-size:16px}
}

/* La misma firma tipográfica en las páginas públicas añadidas después. */
@media(max-width:370px){
 html body.studio-workbench.studio-simple .studio-public-nav{padding-inline:8px;gap:4px}
 html body.studio-workbench.studio-simple .studio-public-nav .st-nav-group>a{padding-inline:0}
 html body.studio-workbench.studio-simple .studio-public-nav .st-nav-group>button{width:24px;min-width:24px;min-height:44px;padding-inline:2px}
}
html body :is(.header .brand,.seo-brand){
 font-family:"Geist",Arial,sans-serif;font-weight:800;font-style:normal;
 letter-spacing:-.055em;line-height:1;color:#f5f7f2;white-space:nowrap;gap:0;
}
html body :is(.header .brand,.seo-brand,.acceso-modal-marca,.apoyo-eyebrow,.in-demo-marca,.cocuyo-compose-heading) .o-viva{
 color:var(--cocuyo-marca-luz);font:inherit;letter-spacing:inherit;text-shadow:0 0 13px #aff33e38;
}


/* cocuyo-css: assets/css/comunidad-nav.css */
/* Colores de los tokens compartidos; no modifica la barra inferior móvil. */
.cn-community-entry{display:flex;align-items:center;align-self:center;flex:none;order:4}
.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--gris-niebla);font:550 13px/1.2 var(--fuente);white-space:nowrap;cursor:pointer}
.cn-community-toggle>svg{width:12px;height:12px;transition:transform var(--trans-rapida)}
.cn-community-toggle[aria-expanded=true]>svg{transform:rotate(180deg)}
.cn-header .cn-community-toggle:hover,.studio-public-nav .cn-community-toggle:hover,.cn-community-toggle[aria-expanded=true]{color:var(--blanco-luz);background:var(--negro-elevado)}
.cn-community-panel{position:fixed;z-index:var(--z-overlay,200);box-sizing:border-box;display:grid;grid-template-columns:1.15fr 1fr;gap:24px;padding:24px;border:1px solid var(--negro-borde);border-radius:16px;background:var(--negro-elevado);color:var(--blanco-luz);box-shadow:var(--sombra-2,0 18px 48px color-mix(in srgb,var(--negro-abismo) 85%,transparent));overflow:auto;overscroll-behavior:contain;font-family:var(--fuente)}
.cn-community-panel[hidden]{display:none!important}
.cn-community-panel *{box-sizing:border-box}
.cn-community-panel a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 8px;border-radius:8px;color:var(--gris-niebla);text-decoration:none;font-size:13px;line-height:1.4}
.cn-community-panel a:hover{background:var(--negro-abismo);color:var(--blanco-luz)}
.cn-community-panel a>svg{width:20px;height:20px;flex:none;color:var(--gris-humo)}
.cn-community-panel a>svg:last-child{width:14px;height:14px;margin-left:auto}
.cn-community-panel a>span{display:grid;gap:4px;min-width:0}
.cn-community-panel b{font-size:13px;font-weight:600;color:var(--blanco-luz)}
.cn-community-panel small{font-size:11px;color:var(--gris-humo);white-space:normal}
.cn-community-panel .cn-community-overview{position:relative;display:grid;gap:7px;margin-bottom:10px;padding:6px 8px 18px;border-bottom:1px solid var(--negro-borde);border-radius:0}
.cn-community-overview>b{font-size:17px!important}
.cn-community-overview>span{font-size:12px;color:var(--gris-humo)}
.cn-community-panel .cn-community-overview>svg{position:absolute;right:8px;top:8px;color:var(--verde-cocuyo)}
.cn-community-follow{padding-left:24px;border-left:1px solid var(--negro-borde)}
.cn-community-follow h2{margin:4px 8px 8px;font-size:12px;font-weight:650;color:var(--blanco-luz)}
.cn-community-follow p{margin:0 8px 12px;font-size:11px;color:var(--gris-humo)}
.cn-community-panel :is(a,button):focus-visible,.cn-community-toggle:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
/* Redes secundarias en una línea (Familia, 29-sep-2026): el menú no repite las siete. */
.cn-community-panel .cn-community-mas{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:6px 8px 0;font-size:11px;color:var(--gris-humo)}
.cn-community-panel .cn-community-mas a{display:inline-flex;min-height:44px;padding:0;gap:0;border-radius:4px;font-size:12px;color:var(--gris-niebla);text-decoration:underline;text-decoration-color:var(--negro-borde);text-underline-offset:4px}
.cn-community-panel .cn-community-mas>span{flex-basis:100%;margin-top:4px}
.cn-community-panel .cn-community-mas a:hover{background:none;color:var(--blanco-luz);text-decoration-color:currentColor}
@media(max-width:1180px){.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{padding-inline:8px;font-size:12px}}
@media(max-width:900px){.cn-nav.cn-has-community,.studio-public-nav .st-nav.cn-has-community{overflow-x:auto;scrollbar-width:none}.cn-has-community::-webkit-scrollbar{display:none}.cn-community-entry{justify-content:center}.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{padding-inline:6px;font-size:11px}.cn-community-toggle>svg{width:10px;height:10px}.cn-community-panel{gap:16px;padding:18px}.cn-community-follow{padding-left:16px}}
@media(max-width:450px){.cn-community-panel{grid-template-columns:1fr;gap:16px}.cn-community-follow{padding:16px 0 0;border-left:0;border-top:1px solid var(--negro-borde);display:grid;grid-template-columns:1fr 1fr;gap:0 6px}.cn-community-follow h2,.cn-community-follow p,.cn-community-follow .cn-community-mas{grid-column:1/-1}.cn-community-panel a{min-height:48px}.cn-community-follow a>svg:first-child{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.cn-community-toggle>svg{transition:none}}


/* cocuyo-css: assets/css/inicio-intro.css */
/* ============================================================
   COCUYO — Intro de la portada (provisional, activa desde el 9-oct-2026).
   inicio-intro.js marca el héroe con .in-con-intro: vídeo a sangre en
   lugar del muro de clips y, como único texto, «Escribe lo imposible» en el
   idioma de la página. Solo en el ordenador (> 760 px, con ratón o panel
   táctil y hover; la misma consulta que inicio-intro.js): el móvil no
   cambia, tampoco girado (844×390) ni en la tableta.
   ============================================================ */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .in-hero.in-con-intro { background: var(--negro-abismo, #050505); }
  /* Sin destello: el héroe llega en el HTML con el muro y el titular, y la intro
     se monta en cuanto se pinta (inicio-intro.js va justo detrás de
     inicio-nuevo.js). El muro no se enseña (ni se piden sus pósters) y el
     titular espera oculto; si el script no llegara, vuelve a verse a los 4 s. */
  .inuevo .in-hero :is(.in-muro, .in-franja) { display: none !important; }
  .inuevo .in-hero:not(.in-con-intro) .in-hero-copy { animation: in-intro-espera 0s 4s backwards; }
  @keyframes in-intro-espera { from, to { visibility: hidden; } }

  /* Vídeo y póster: cubren el héroe y se acercan muy despacio. */
  .in-intro { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
  .in-intro > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 45%; animation: in-intro-acerca 26s ease-in-out infinite alternate; }
  .in-intro video { opacity: 0; transition: opacity .9s ease; }
  .in-intro video.listo { opacity: 1; }
  @keyframes in-intro-acerca { from { transform: scale(1.02); } to { transform: scale(1.08); } }
  .in-con-intro:is(.in-muro-pausa, .in-muro-fuera) .in-intro > * { animation-play-state: paused; }

  /* Sin botón «Pausar movimiento» en la intro (dueño, 8-oct-2026: «es innecesario»).
     Con «reducir movimiento» del sistema no se pinta el vídeo (inicio-intro.js). */
  .in-con-intro .in-media-toggle { display: none; }

  /* Velo mínimo: la cabecera arriba y el pie fundido con la página. */
  .in-con-intro .in-hero-sombra { display: block; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, transparent 14%, transparent 68%, rgb(0 0 0 / .55) 88%, var(--negro-abismo, #050505) 100%); }

  /* El lema («Escribe lo imposible»): título de la barra de prompts, pegado encima de ella
     (inicio-intro.js mide la barra) y alineado con su borde; Fraunces en cursiva,
     la letra de la marca. */
  .in-intro-lema { position: absolute; left: 0; right: 0; bottom: var(--in-lema-abajo, 230px); z-index: 1; width: min(var(--in-lema-ancho, 760px), calc(100% - 48px)); margin: 0 auto; padding: 0 6px; text-align: start; font-family: var(--fuente-display, Georgia, serif); font-style: italic; font-weight: 450; font-size: clamp(2.6rem, 1.2rem + 2.6vw, 4.1rem); line-height: 1; letter-spacing: -.02em; color: var(--blanco-luz, #fff); text-shadow: 0 2px 30px rgb(0 0 0 / .55); pointer-events: none; animation: in-entrada var(--in-lenta, .7s) var(--in-curva, ease) both; }
  /* Ya medida la barra, el lema toma su borde izquierdo y su ancho, y la sigue
     con suavidad cuando se aparta por la tarjeta de cookies. */
  .in-intro-lema.in-lema-medido { left: var(--in-lema-izq); right: auto; width: var(--in-lema-ancho); margin: 0; transition: left .45s var(--in-curva, ease), width .45s var(--in-curva, ease), bottom .45s var(--in-curva, ease); }
  /* Fraunces (fraunces-latin.woff2) solo tiene el latín básico: los demás idiomas
     van en la letra de la web. También el polaco (ż), el turco (İ) y el
     vietnamita (đ, ể), para no mezclar dos tipos de letra en una palabra. */
  .in-intro-lema:not(:lang(es), :lang(en), :lang(fr), :lang(pt), :lang(it), :lang(de), :lang(id), :lang(fil)) { font-family: var(--f-fuente, var(--fuente)); font-style: normal; font-weight: 500; letter-spacing: 0; }
  /* Animado: cada palabra sube desde el desenfoque, una tras otra, y luego un
     brillo lima recorre la frase cada pocos segundos. */
  .in-intro-palabra { display: inline-block; padding-right: .04em; background: linear-gradient(100deg, #fff 0%, #fff 42%, var(--lima, #d1fe17) 50%, #fff 58%, #fff 100%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 18px rgb(0 0 0 / .55)); animation: in-intro-sube .9s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--i) * .16s) both, in-intro-brillo 7s ease-in-out calc(1.6s + var(--i) * .12s) infinite; }
  @keyframes in-intro-sube { from { opacity: 0; transform: translateY(.35em); filter: blur(12px) drop-shadow(0 2px 18px rgb(0 0 0 / .55)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 2px 18px rgb(0 0 0 / .55)); } }
  @keyframes in-intro-brillo { 0%, 62% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  .in-con-intro:is(.in-muro-pausa, .in-muro-fuera) .in-intro-palabra { animation-play-state: paused; }

  /* Los demás textos no se ven: siguen en la página para buscadores y lectores. */
  .in-con-intro .in-hero-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  /* Sus enlaces («Empieza a crear» y los tres de «Prueba con») tampoco se
     enfocan: el Tab se paraba en ellos sin que se viera nada (WCAG 2.4.7) y
     cambiaba el placeholder de la barra. Llamar a crear es cosa de la barra;
     el h1, la descripción y la nota siguen para buscadores y lectores. */
  .in-con-intro .in-hero-copy :is(.in-acciones, .in-ideas) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .in-intro > *, .in-intro-palabra { animation: none; }
}


/* cocuyo-css: assets/css/barra-inferior.css */
/* ============================================================
   BARRA INFERIOR DEL MÓVIL + CABECERA UNIFORME (oct-2026)
   ------------------------------------------------------------
   Va en el <head> de las páginas con la cabecera común (10-oct-2026); si
   no, la carga assets/js/barra-inferior.js (en el Estudio, estudio-movil.js
   carga ese script). Todo lo
   visible va dentro de media queries de móvil: en ordenador nada cambia.
     · La barra se dibuja hasta 900 px, pero fuera del Estudio solo se
       ve hasta 767 px (de 768 a 900 px se esconde: ver más abajo).
     · En el Estudio (crear.html), cuya vista de móvil llega hasta
       900 px, la barra es la misma (cy-barra--estudio) y su cabecera
       móvil imita la de fuera: último bloque de esta hoja.

   Medidas y colores: tokens de tokens.css (--alto-barra-inferior,
   --boton-central-*, --labio-tecla, --verde-cocuyo…). Cada var() lleva
   su valor de respaldo por si una página aún sirve un tokens.css viejo.
   ============================================================ */

/* Marca de «hoja ya puesta» (10-oct-2026): la página trae esta hoja en su
   <head> (sola o dentro de un paquete de build-css) y el JS la da por
   lista desde el primer pintado, sin volver a pedirla. */
:root { --cy-hoja-barra: 1; }

/* Menú ☰ abierto después de bajar por la página (auditoría cine-01).
   familia.css bloquea el desplazamiento con overflow:hidden en <html> Y en
   <body>; entonces <body> se convierte en su propia caja con scroll, la
   cabecera «pegajosa» deja de seguir a la pantalla y se queda arriba del
   todo, fuera de la vista: el menú aparecía sin su botón X para cerrarlo.
   Basta con bloquear el desplazamiento solo en <html>: <body> recorta lo
   que sobra sin volverse una caja con scroll y la cabecera sigue visible.
   Llega hasta 1079 px porque la hoja ☰ también existe en tableta y allí
   pasaba lo mismo (en ordenador no hay hoja). «visible» es el respaldo
   para navegadores que aún no conocen «clip».
   Respaldo para iPhone con iOS anterior a 16 (no comprobado en un aparato
   real): allí overflow:hidden en <html> puede no frenar el dedo, así que
   además se corta el «rebote» que arrastra el fondo al llegar al final de
   la hoja (overscroll-behavior). La hoja ya lo tiene en familia.css. */
@media (max-width: 1079px) {
  html.f-sin-scroll body { overflow: visible; overflow: clip; }
  html.f-sin-scroll { overscroll-behavior: none; }
}

/* Fuera del móvil, ni la barra ni el botón Precios de la cabecera existen. */
.cy-barra, .cy-cab-precios { display: none; }

/* ---------- La barra ----------
   Hasta 900 px. Fuera del Estudio, de 768 a 900 px se esconde enseguida
   (siguiente bloque): en tableta las páginas públicas no llevan barra. */
@media (max-width: 900px) {
  .cy-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav, 100);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
    height: calc(var(--alto-barra-inferior, 56px) + env(safe-area-inset-bottom));
    margin: 0; padding: 0 4px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--negro-abismo) 96%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--blanco-luz) 7%, transparent);
    font-family: var(--fuente); line-height: 1.1; letter-spacing: 0;
  }
  .cy-barra[hidden] { display: none; }
  /* Mientras la hoja ☰ está abierta, la barra se aparta (no se tapan). */
  html.f-sin-scroll .cy-barra { display: none; }
  /* Mientras escribes en un campo de texto (teclado abierto), también se
     aparta, para no tapar lo que escribes (barra-inferior.js pone cy-teclado). */
  html.cy-teclado .cy-barra { display: none; }

  /* Cada botón: icono arriba y nombre debajo, en gris; el actual, en blanco. */
  .cy-barra .cy-barra__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; height: var(--alto-barra-inferior, 56px); padding: 0 2px;
    color: color-mix(in srgb, var(--blanco-luz) 55%, var(--negro-abismo));
    font-size: 11px; font-weight: 500; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--trans-rapida, 160ms ease);
  }
  .cy-barra .cy-icono { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .cy-barra .cy-barra__texto { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .cy-barra .cy-barra__item:hover, .cy-barra .cy-barra__item[aria-current="page"] { color: var(--blanco-luz); }
  .cy-barra .cy-barra__item:focus-visible { outline: 2px solid var(--verde-cocuyo); outline-offset: -2px; border-radius: var(--radio-md, 12px); }

  /* Activo: los dos faros del cocuyo encendidos encima del icono. */
  .cy-barra .cy-barra__item[aria-current="page"]::before {
    content: ""; position: absolute; top: 5px; left: 50%;
    width: 4px; height: 4px; margin-left: -6px; border-radius: 50%;
    background: var(--verde-cocuyo);
    box-shadow: 8px 0 0 var(--verde-cocuyo), 0 0 6px var(--verde-cocuyo), 8px 0 6px var(--verde-cocuyo);
  }

  /* Crear: la tecla verde del centro (solo icono; el nombre lo leen los
     lectores de pantalla). */
  .cy-barra .cy-barra__crear {
    justify-self: center; flex-direction: row;
    width: var(--boton-central-ancho, 66px); height: var(--boton-central-alto, 44px); padding: 0;
    border-radius: var(--radio-boton-central, 12px);
    background: var(--verde-cocuyo); color: var(--tinta-sobre-verde);
    box-shadow: var(--labio-tecla), 0 0 18px color-mix(in srgb, var(--verde-cocuyo) 28%, transparent);
    transition: transform var(--trans-rapida, 160ms ease), box-shadow var(--trans-rapida, 160ms ease);
  }
  .cy-barra .cy-barra__crear:hover { color: var(--tinta-sobre-verde); }
  .cy-barra .cy-barra__crear:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--verde-cocuyo) 55%, var(--negro-abismo)); }
  .cy-barra .cy-barra__crear .cy-icono { width: 24px; height: 24px; stroke-width: 1.75; }
  .cy-barra .cy-barra__crear .cy-barra__texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .cy-barra .cy-barra__crear:focus-visible { outline: none; box-shadow: var(--labio-tecla), var(--anillo-foco); }
  /* Crear encendido (solo en el Estudio, mientras se crea): los dos faros
     van encima de la tecla, en el hueco entre la tecla y el borde de la
     barra (sobre el verde no se verían). */
  .cy-barra .cy-barra__crear[aria-current="page"] { color: var(--tinta-sobre-verde); }
  .cy-barra .cy-barra__crear[aria-current="page"]::before { top: -5px; }
}
/* De 768 a 900 px, la barra solo existe en el Estudio. */
@media (min-width: 768px) {
  .cy-barra:not(.cy-barra--estudio) { display: none; }
}

@media (max-width: 767px) {
  /* ---------- Convivencia con lo que ya había ---------- */
  /* Espacio al final de la página para que la barra no tape el pie, y
     margen al saltar a un campo o a un ancla para que no quede debajo. */
  html.cy-con-barra { scroll-padding-bottom: calc(var(--alto-barra-inferior, 56px) + env(safe-area-inset-bottom)); }
  html.cy-con-barra body { padding-bottom: calc(var(--alto-barra-inferior, 56px) + env(safe-area-inset-bottom)); }
  /* La barra antigua de las páginas legales (Cine · Estudio · Mi cuenta):
     no sale nunca en el móvil, y su hueco de 80 px al final (cocuyo-app.css)
     tampoco. Fuera del Estudio ya no hay barra (Iván, 11-oct-2026), así que
     esto ya no depende de cy-con-barra, que ahora solo pone el Estudio. */
  .nav-inferior { display: none !important; }
  html:not(.cy-con-barra) body.app-page:not(.creator-page) { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* La barra de ideas de la portada no se monta en móvil (inicio-barra.js);
     esto es el respaldo si la portada se abrió ancha y luego se gira o se
     estrecha la pantalla. En ese caso el héroe recupera su botón
     «Empieza a crear» (la barra de ideas lo había escondido). */
  #inicio-barra { display: none !important; }
  html.in-con-barra .in-hero .in-acciones { display: flex; }
  /* El aviso de cookies sube por encima de la barra (si la barra se ve:
     con la hoja ☰ abierta o escribiendo, vuelve a su sitio). */
  html.cy-con-barra:not(.f-sin-scroll):not(.cy-teclado) #cocuyo-consent { bottom: calc(var(--alto-barra-inferior, 56px) + 8px + env(safe-area-inset-bottom)); }
  /* El aviso «Volver a tu plan» de Planes también sube. */
  html.cy-con-barra .cplan-return { bottom: calc(var(--alto-barra-inferior, 56px) + 12px + env(safe-area-inset-bottom)); }

  /* Selector de idioma del pie: en varias filas, como manda familia.css.
     Respaldo para las portadas de idioma (/en/, /ru/…) que aún sirven un
     paquete de estilos anterior sin esa regla: allí los 20 idiomas iban en
     una sola fila de 1.300 px, la página se ensanchaba y la barra quedaba
     fuera de la pantalla. Es la misma regla de familia.css, nada nuevo. */
  .f-pie .f-idioma { flex-wrap: wrap; max-width: 100%; }

  /* ---------- Cabecera uniforme: logo · Precios (con sesión) · ☰ ----------
     «Empieza a crear» sale de la cabecera, como en Crear: sigue dentro de la
     hoja ☰. Con html[data-cy-acceso] (lo pone el JS), para que sin JavaScript
     quede «Empieza a crear». Sin sesión, en lugar de Precios van
     «Entrar · Crear cuenta» (cabecera-acceso.css, dueño 6-oct-2026). */
  html[data-cy-acceso] .f-cabecera [data-f-empezar] { display: none !important; }
  html[data-cy-acceso] .f-cabecera .f-cabecera__fin { gap: 6px; }
  .f-cabecera .cy-cab-precios {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; max-width: 132px; padding: 0 12px; flex: none;
    border-radius: var(--f-r-pill, 999px);
    font: 500 .8125rem/1 var(--fuente); white-space: nowrap;
    text-decoration: none;
  }
  /* El texto va en su propia cajita para cortarlo con «…» si no cabe, sin
     recortar la zona para el dedo de abajo. */
  .f-cabecera .cy-cab-precios .cy-cab-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .f-cabecera .cy-cab-precios { background: var(--f-sup-2, color-mix(in srgb, var(--blanco-luz) 6%, var(--negro-abismo))); color: var(--blanco-luz); }
  .f-cabecera .cy-cab-precios[aria-current="page"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-cocuyo) 45%, transparent); }
  /* Zona para el dedo de 44 px de alto (se ven de 34 px): una capa
     invisible que sobresale 5 px por arriba y por abajo. Lo justo para no
     invadir al vecino de los lados. */
  .f-cabecera .cy-cab-precios::after { content: ""; position: absolute; inset: -5px 0; }
  .f-cabecera .cy-cab-precios:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
  /* Oculto por el JS mientras no toca (sin sesión, hoja aún sin cargar). */
  .f-cabecera .cy-cab-precios[hidden] { display: none !important; }
}

/* ---------- Zonas para el dedo de 44 px (auditoría móvil, oct-2026) ----------
   Respaldo de familia.css, que no se toca desde aquí: solo en móvil y sin
   cambiar colores ni el tamaño que se ve. */
@media (max-width: 767px) {
  /* Avatar de la cabecera: se sigue viendo un círculo de 34 px, pero la
     zona que responde al dedo mide 44 px (el relleno no lleva fondo). */
  .f-cabecera .f-cuenta #avatar-cine { width: 44px; height: 44px; min-height: 44px; padding: 5px; background-clip: content-box; }
  .f-cabecera .f-cuenta #avatar-cine img { border-radius: 50%; }
  /* Enlaces del pie: filas de 44 px en vez de 32 px con 4 px entre ellas,
     y redes sociales de 44 × 44. */
  .f-pie ul { gap: 0; }
  .f-pie ul a, .f-pie ul button { min-height: 44px; }
  .f-pie .f-pie__redes a { width: 44px; height: 44px; }
  /* Pestañas de sección (Precios: Planes · Recargas · …): se ven de 32 px
     y una capa invisible las alarga hasta 44 px. */
  .f-subnav a { position: relative; }
  .f-subnav a::after { content: ""; position: absolute; inset: -6px 0; }
  /* Vista Cine: la cabecera de vidrio dejaba ver el botón verde del
     cartel al bajar (auditoría cine-08). Fondo casi opaco, mismo negro. */
  html[data-vista="cine"] .f-cabecera { background: color-mix(in srgb, var(--negro-abismo) 92%, transparent); }
}

/* Pantallas muy estrechas: un poco menos de relleno para que quepa todo. */
@media (max-width: 380px) {
  .f-cabecera .cy-cab-precios { padding: 0 10px; max-width: 112px; font-size: .75rem; }
  .cy-barra .cy-barra__item { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-barra .cy-barra__item, .cy-barra .cy-barra__crear { transition: none; }
  .cy-barra .cy-barra__crear:active { transform: none; }
}

/* ============================================================
   EL ESTUDIO (crear.html) EN EL MÓVIL (dueño, 6-oct-2026)
   ------------------------------------------------------------
   Una sola barra de abajo y una sola cabecera: dentro del Estudio se
   ven como fuera. estudio-movil.js monta esta misma barra
   (cy-barra--estudio) y su cabecera .sm-header, que tiene dos caras:
     · Mientras se crea (body.sm-herramienta): «Crear imagen ⌄» y la X,
       como siempre (estudio-movil.css). Aquí no se toca.
     · En Creaciones y en Explorar: como la cabecera móvil de fuera
       (.f-cabecera): el logo a la izquierda y, a la derecha, «Entrar ·
       Crear cuenta» sin sesión o «Precios» y el avatar con sesión, y el
       menú ☰. La barra del ordenador (.studio-public-nav) no sale en
       el móvil: apretada no cabía («Imagen ⌄ Video ⌄ Audio ⌄ Conector…»).
   Esta hoja llega en <head> y los paquetes del Estudio van después, en
   <body>: por eso estos selectores llevan html.cy-con-barra (la pone
   barra-inferior.js) y :not(#f), para ganar (también a sus !important)
   sin tocar los paquetes. Medidas y colores: los de la cabecera común
   (familia.css, --f-*; cabecera-acceso.css para Entrar y Crear cuenta),
   siempre con tokens.
   ============================================================ */
@media (max-width: 900px) {
  /* La barra común ocupa el sitio de la antigua (56 px + zona segura).
     --sm-bottom es el hueco que el Estudio deja abajo para ella (menú de
     la cuenta, avisos, Generar de Audio…). El Estudio reserva su propio
     espacio: sin el relleno de <body> de las páginas públicas. */
  html.cy-con-barra body.studio-workbench { --sm-bottom: var(--alto-barra-inferior, 56px); padding-bottom: 0; }
  /* La misma capa que tenía la barra antigua del Estudio: sus hojas, menús
     y visores quedan por encima, y la barra por encima del contenido. */
  html.cy-con-barra body.studio-workbench .cy-barra { z-index: 65; }

  /* ---------- Cabecera de Creaciones y Explorar ---------- */
  html.cy-con-barra body.studio-workbench:not(#f) .studio-public-nav { display: none !important; }
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header {
    display: flex !important; align-items: center; gap: var(--f-e-3, 12px);
    height: calc(var(--f-alto-cabecera, 64px) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(var(--f-gutter, 16px), env(safe-area-inset-right, 0px)) 0 max(var(--f-gutter, 16px), env(safe-area-inset-left, 0px));
    border-bottom: 0;
    background: var(--f-vidrio); -webkit-backdrop-filter: var(--vidrio); backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  /* El título del modo y la X son del compositor. */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header :is(.sm-mode, .sm-close) { display: none; }
  /* Logo: el wordmark de fuera (.f-marca), con las dos O encendidas. */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header button.sm-brand {
    display: inline-flex; align-items: center; gap: 0; flex: none; min-height: 44px; padding: 0;
    border-radius: var(--f-r-control, 10px);
    font: 650 1.125rem/1 var(--f-fuente, var(--fuente)); letter-spacing: .07em; color: var(--f-texto);
    direction: ltr; /* en árabe y urdu la marca se sigue leyendo COCUYO */
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-brand .o-viva { color: var(--f-lima); }

  /* A la derecha: Entrar · Crear cuenta, o Precios · avatar; y el ☰. */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header .sm-cab {
    display: flex; align-items: center; gap: 6px; min-width: 0; margin-inline-start: auto;
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab [hidden],
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab[hidden],
  html.cy-con-barra body.studio-workbench.sm-herramienta:not(#f) .sm-header .sm-cab { display: none !important; }
  /* Pastillas de 34 px (como Entrar, Crear cuenta y Precios de fuera), con
     una capa invisible que las alarga a 44 px para el dedo. */
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 48px;
    height: 34px; max-width: 132px; padding: 0 12px;
    border-radius: var(--f-r-pill, 999px);
    font: var(--f-peso-ui, 500) .8125rem/1 var(--f-fuente, var(--fuente));
    white-space: nowrap; text-decoration: none;
    transition: background var(--f-rapido, 160ms ease), box-shadow var(--f-rapido, 160ms ease);
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla::after { content: ""; position: absolute; inset: -5px 0; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__entrar { color: var(--f-texto); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__entrar:hover { background: var(--f-sup-2); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__alta { color: var(--f-lima-tinta); background: var(--f-lima); font-weight: 600; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__alta:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__precios { flex: none; color: var(--blanco-luz); background: var(--f-sup-2); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__precios:hover { background: var(--f-sup-3); }
  /* Avatar: círculo con los dos faros y zona de 44 px para el dedo (como
     #avatar-cine en la cabecera de fuera). */
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header button.sm-cab__avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; min-height: 44px; padding: 5px; margin: 0;
    border: 1px solid color-mix(in srgb, var(--verde-cocuyo) 48%, transparent); border-radius: 50%;
    background: var(--f-sup-3); background-clip: content-box;
    box-shadow: var(--glow-suave); color: var(--f-texto);
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__avatar .faros { display: inline-flex; align-items: center; gap: .28em; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__avatar .faros i {
    display: block; width: .4rem; height: .4rem; border-radius: 50%;
    background: var(--verde-cocuyo); box-shadow: 0 0 6px var(--verde-cocuyo);
  }
  /* ☰: abre la hoja del Estudio (Imagen, Video, Audio, Apps, Útiles,
     Conectores, Comunidad y Precios), como el ☰ de fuera. */
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header button.sm-cab__menu {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; min-height: 44px; margin: 0; margin-inline-end: -6px; padding: 0;
    border-radius: var(--f-r-pill, 999px); background: transparent; color: var(--f-texto);
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__menu:hover { background: var(--f-sup-2); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__menu .ic { width: 20px; height: 20px; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header :is(.sm-cab__pastilla, .sm-cab__avatar, .sm-cab__menu, .sm-brand):focus-visible { outline: none; box-shadow: var(--anillo-foco); }
  /* Aviso breve bajo la cabecera (borrador que no se pudo guardar). */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-aviso:not([hidden]) {
    position: fixed; top: calc(var(--f-alto-cabecera, 64px) + 8px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; z-index: 70;
    margin: 0; padding: 12px 14px; border: 1px solid var(--f-linea-fuerte); border-radius: var(--f-r-control, 10px);
    background: var(--f-sup-2); color: var(--f-texto); font: 500 14px/1.4 var(--fuente);
  }
}
/* Tableta (768-900 px): pastillas un poco mayores, como fuera. */
@media (min-width: 768px) and (max-width: 900px) {
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla { height: 36px; max-width: 168px; padding: 0 14px; font-size: .875rem; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla::after { inset: -4px 0; }
}
/* Pantallas muy estrechas: como fuera, logo y pastillas algo menores. */
@media (max-width: 380px) {
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header button.sm-brand { font-size: 1rem; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla { max-width: 112px; padding: 0 10px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla { transition: none; }
}


/* cocuyo-css: assets/css/cabecera-acceso.css */
/* ============================================================
   CABECERA: ENTRAR · CREAR CUENTA · IDIOMA CON MAPA (dueño, 6-oct-2026)
   ------------------------------------------------------------
   Va en el <head> de las páginas con la cabecera común (10-oct-2026,
   la cabecera completa desde el primer pintado); si una página vieja no
   la trae, la carga assets/js/cabecera-acceso.js con la misma versión ?v=.

   Colores, medidas y fuentes: solo tokens (tokens.css y los --f-* de
   familia.css). Móvil primero; zonas para el dedo de 44 px.
   ============================================================ */

/* Marca de «hoja ya puesta» (10-oct-2026): la página trae esta hoja en su
   <head> (sola o dentro de un paquete de build-css) y el JS la da por
   lista desde el primer pintado, sin volver a pedirla. */
:root { --cy-hoja-acceso: 1; }

/* Ocultos por el JS mientras no tocan (sesión, hoja aún sin cargar). */
.f-cabecera :is(.cy-acceso, .cy-idioma-cab)[hidden], .f-hoja .cy-hoja-idioma[hidden] { display: none !important; }

/* ---------- Entrar · Crear cuenta ---------- */
.f-cabecera .cy-acceso {
  position: relative;
  /* Si faltara sitio (idiomas de palabras largas), se estrechan con «…»
     antes que desbordar la cabecera. */
  display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 48px;
  height: 34px; max-width: 132px; padding: 0 12px;
  border-radius: var(--f-r-pill, 999px);
  font: var(--f-peso-ui, 500) .8125rem/1 var(--f-fuente, var(--fuente));
  white-space: nowrap; text-decoration: none;
  transition: background var(--f-rapido, 160ms ease), box-shadow var(--f-rapido, 160ms ease), color var(--f-rapido, 160ms ease);
}
/* El texto va en su propia cajita para cortarlo con «…» si no cabe. */
.f-cabecera .cy-acceso__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Entrar: discreto, solo con borde fino. */
.f-cabecera .cy-acceso--entrar { color: var(--f-texto); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.f-cabecera .cy-acceso--entrar:hover { background: var(--f-sup-2); }
/* Crear cuenta: la acción principal, en lima. */
.f-cabecera .cy-acceso--alta { color: var(--f-lima-tinta); background: var(--f-lima); font-weight: 600; }
.f-cabecera .cy-acceso--alta:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
/* Zona para el dedo de 44 px de alto (se ven de 34): capa invisible que
   sobresale 5 px por arriba y por abajo, sin invadir a los vecinos. */
.f-cabecera .cy-acceso::after { content: ""; position: absolute; inset: -5px 0; }
.f-cabecera .cy-acceso:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.f-cabecera .cy-acceso:active { transform: scale(.98); }

/* Sin sesión, Entrar y Crear cuenta sustituyen a «Empieza a crear»
   (vuelve con la sesión, junto al avatar). */
html[data-cy-acceso="visitante"] .f-cabecera .f-cabecera__cta { display: none; }

/* ---------- Botón del idioma (mundo) ---------- */
.f-cabecera .cy-idioma-cab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: var(--f-r-pill, 999px);
  color: var(--f-texto-2);
  font: var(--f-peso-ui, 500) .75rem/1 var(--f-fuente, var(--fuente)); letter-spacing: .04em;
  transition: background var(--f-rapido, 160ms ease), color var(--f-rapido, 160ms ease);
}
.f-cabecera .cy-idioma-cab:hover { color: var(--f-texto); background: var(--f-sup-2); }
.f-cabecera .cy-idioma-cab:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.f-cabecera .cy-idioma-cab .cy-icono-mundo { width: 20px; height: 20px; flex: none; }

/* ---------- Fila «Idioma» del menú ☰ (solo móvil) ---------- */
.f-hoja .cy-hoja-idioma { box-shadow: 0 1px 0 var(--f-linea); }
.f-hoja .cy-hoja-idioma__boton {
  width: 100%; display: flex; align-items: center; gap: var(--f-e-3, 12px);
  min-height: 56px; padding: 0;
  color: var(--f-texto); font-size: 1.0625rem; font-weight: var(--f-peso-ui, 500); text-align: start;
}
.f-hoja .cy-hoja-idioma__boton:focus-visible { outline: none; border-radius: var(--f-r-control, 10px); box-shadow: var(--anillo-foco); }
.f-hoja .cy-hoja-idioma__boton .cy-icono-mundo { width: 20px; height: 20px; flex: none; color: var(--f-texto-2); }
.f-hoja .cy-hoja-idioma__actual { margin-inline-start: auto; color: var(--f-texto-3); font-size: .9375rem; }
.f-hoja .cy-hoja-idioma__flecha { width: 16px; height: 16px; flex: none; color: var(--f-texto-3); }
html[dir="rtl"] .f-hoja .cy-hoja-idioma__flecha { transform: scaleX(-1); }

/* Móvil: el mundo no cabe en la cabecera (va al menú ☰), y entre el logo
   y los botones basta un hueco menor (en árabe «تسجيل الدخول» es largo). */
@media (max-width: 767px) {
  .f-cabecera .cy-idioma-cab { display: none !important; }
  html[data-cy-acceso="visitante"] .f-cabecera .f-cabecera__fila { gap: var(--f-e-3, 12px); }
}
/* Tableta y ordenador: el mundo está arriba; sin fila en el menú ☰. */
@media (min-width: 768px) {
  .f-hoja .cy-hoja-idioma { display: none !important; }
  .f-cabecera .cy-acceso { height: 36px; max-width: 168px; padding: 0 14px; font-size: .875rem; }
  .f-cabecera .cy-acceso::after { inset: -4px 0; }
}
/* Ordenador estrecho: menú completo a la vista; el mundo, sin el código. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .f-cabecera .cy-idioma-cab__codigo { display: none; }
  .f-cabecera .cy-acceso { max-width: 140px; padding: 0 12px; }
}
/* De 1080 a 1199 px, en los idiomas de palabras largas (ruso, filipino,
   vietnamita, polaco…), el menú y los botones se juntan un poco para que
   quepa todo en una fila (medido en scripts/test-cabecera-acceso-idioma.mjs). */
@media (min-width: 1080px) and (max-width: 1199px) {
  .f-cabecera .f-cabecera__fila { gap: var(--f-e-3, 12px); }
  .f-cabecera .f-nav { margin-left: var(--f-e-1, 4px); }
  .f-cabecera .f-nav__enlace { padding: 0 8px; }
  .f-cabecera .f-cabecera__fin { gap: 6px; }
  .f-cabecera .cy-idioma-cab { min-width: 40px; padding: 0 8px; }
  .f-cabecera .cy-acceso { padding: 0 10px; }
}
/* Pantallas muy estrechas: un poco menos de relleno para que quepa todo. */
@media (max-width: 380px) {
  .f-cabecera .cy-acceso { max-width: 112px; padding: 0 10px; font-size: .75rem; }
}
/* Ruso, filipino y polaco (auditoría v338, idi-01): su menú es tan ancho que
   desde 1280 px (la fila mide de 1.216 a 1.240 px, también a 1920) «Entrar» y
   «Crear cuenta» quedaban en «В…» y «Ре…». Se aprietan como entre 1080 y
   1279 px. En el móvil, filipino y polaco llevan algo menos de relleno
   («Zaloguj …», «Mag-sign …» a 390 y 360). */
@media (min-width: 1280px) {
  html:is(:lang(ru), :lang(fil), :lang(pl)) .f-cabecera .f-cabecera__fila { gap: var(--f-e-3, 12px); }
  html:is(:lang(ru), :lang(fil), :lang(pl)) .f-cabecera .f-nav { margin-left: 0; }
  html:is(:lang(ru), :lang(fil), :lang(pl)) .f-cabecera .f-nav__enlace { padding: 0 8px; }
}
/* Entre 1080 y 1279 px ni así cabían en ruso, filipino, polaco, portugués y
   vietnamita (cortes desde 1080 hasta 1150): «Útiles gratis» va con su nombre
   corto, como ya en ruso y vietnamita, y la letra baja un punto, como en ruso. */
@media (min-width: 1080px) and (max-width: 1279px) {
  html:is(:lang(fil), :lang(pl), :lang(pt)) .f-cabecera .f-nav__largo { display: none; }
  html:is(:lang(fil), :lang(pl), :lang(pt)) .f-cabecera .f-nav__corto { display: inline; }
  html:is(:lang(fil), :lang(pl), :lang(vi)) .f-cabecera .f-nav__enlace { font-size: .8125rem; padding: 0 5px; }
}
/* El ruso, el más largo, aún necesitaba 46 px a 1080: medio punto menos y menos aire. */
@media (min-width: 1080px) and (max-width: 1199px) {
  html:lang(ru) .f-cabecera .f-cabecera__fila { gap: var(--f-e-2, 8px); }
  html:lang(ru) .f-cabecera .f-nav { gap: 0; margin-left: 0; }
  html:lang(ru) .f-cabecera .f-nav__enlace { font-size: .78125rem; padding: 0 4px; }
  /* Alemán: en las páginas SEO el punto de la sección actual le quitaba los 7 px que faltaban a 1080. */
  html:lang(de) .f-cabecera .f-nav__enlace { padding: 0 5px; }
}
@media (max-width: 767px) {
  html:is(:lang(fil), :lang(pl)) .f-cabecera .cy-acceso { padding: 0 10px; }
}
@media (max-width: 380px) {
  html:is(:lang(fil), :lang(pl)) .f-cabecera .cy-acceso { padding: 0 8px; }
}

/* ============================================================
   DIÁLOGO: los 20 idiomas con su bandera (como la pantalla del pie)
   Vive fuera de .f-cabecera: trae su propio reinicio para que no le
   afecten las hojas antiguas de cada página.
   ============================================================ */
.cy-idiomas {
  box-sizing: border-box;
  width: min(880px, calc(100vw - 2 * var(--f-gutter, 16px))); max-width: none;
  max-height: min(800px, calc(100dvh - 2 * var(--f-gutter, 16px)));
  margin: auto; padding: var(--f-e-6, 24px);
  border: 0; border-radius: var(--f-r-media, 22px);
  background: var(--f-sup-1); color: var(--f-texto);
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte), var(--f-sombra-menu);
  overflow: auto; overscroll-behavior: contain;
  font-family: var(--f-fuente, var(--fuente)); font-size: 1rem; font-weight: var(--f-peso-cuerpo, 400);
  line-height: 1.4; letter-spacing: normal; text-align: start;
  -webkit-font-smoothing: antialiased;
}
.cy-idiomas:not([open]) { display: none; }
.cy-idiomas *, .cy-idiomas *::before, .cy-idiomas *::after { box-sizing: border-box; }
.cy-idiomas :where(h2, h3, p, ul, li) { margin: 0; padding: 0; font-size: inherit; }
.cy-idiomas :where(ul) { list-style: none; }
.cy-idiomas :where(a) { color: inherit; text-decoration: none; }
.cy-idiomas :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; }
.cy-idiomas::backdrop { background: color-mix(in srgb, var(--negro-abismo) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cy-idiomas[open] { animation: cy-idiomas-entra var(--f-medio, 300ms ease) both; }
@keyframes cy-idiomas-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.cy-idiomas__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4, 16px); margin-bottom: var(--f-e-5, 20px); }
.cy-idiomas h2 { font-size: var(--f-t-3, 1.25rem); font-weight: var(--f-peso-titulo, 550); line-height: 1.2; color: var(--f-texto); }
.cy-idiomas__cerrar { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--f-texto-2); }
.cy-idiomas__cerrar:hover { color: var(--f-texto); background: var(--f-sup-3); }
.cy-idiomas__cerrar svg { width: 20px; height: 20px; }
.cy-idiomas :is(a, button):focus-visible { outline: none; box-shadow: var(--anillo-foco); }

/* ---------- Lista de idiomas: bandera y nombre, como la pantalla del pie ---------- */
.cy-idiomas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--f-e-2, 8px); }
.cy-idiomas__opcion {
  display: flex; align-items: center; gap: var(--f-e-3, 12px);
  width: 100%; min-height: 52px; padding: 0 var(--f-e-4, 16px);
  border-radius: var(--f-r-tarjeta, 16px);
  background: var(--f-sup-2); box-shadow: inset 0 0 0 1px var(--f-linea);
  color: var(--f-texto-2); font-size: .9375rem; font-weight: var(--f-peso-ui, 500); line-height: 1.2; text-align: start;
  transition: background var(--f-rapido, 160ms ease), color var(--f-rapido, 160ms ease), box-shadow var(--f-rapido, 160ms ease);
}
.cy-idiomas__opcion:hover { color: var(--f-texto); background: var(--f-sup-3); }
.cy-idiomas__opcion[aria-current="true"] { color: var(--f-texto); background: var(--f-lima-suave); box-shadow: inset 0 0 0 1px var(--f-lima-linea); }
.cy-idiomas__bandera { flex: none; width: 32px; height: 24px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px var(--f-linea-fuerte); }
.cy-idiomas__nombre { min-width: 0; overflow-wrap: anywhere; }
.cy-idiomas .cy-idiomas__opcion:focus-visible { box-shadow: var(--anillo-foco); }

/* Móvil (v338, 10-oct-2026): hoja desde abajo como las de Higgsfield, en
   lugar de la ventana centrada de dos columnas, que en un teléfono corto se
   salía de la pantalla. Asa, título centrado con la X, y una sola columna
   con los 20 idiomas que se desliza por dentro (la cabecera queda fija); el
   actual va marcado en lima con su ✓. Mismo diálogo y mismas opciones: solo
   cambia la forma. En árabe y urdu, todo de derecha a izquierda. */
@media (max-width: 767px) {
  /* Tokens propios con respaldo: la hoja también se abre en páginas sin la
     hoja de la familia (Mi cuenta, perfil.html), solo con tokens.css. */
  .cy-idiomas {
    --cyi-fondo: var(--f-sup-1, color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo)));
    --cyi-sup-2: var(--f-sup-2, color-mix(in srgb, var(--blanco-luz) 5.5%, var(--negro-abismo)));
    --cyi-sup-3: var(--f-sup-3, color-mix(in srgb, var(--blanco-luz) 9%, var(--negro-abismo)));
    --cyi-texto: var(--f-texto, var(--blanco-luz));
    --cyi-lima: var(--f-lima, var(--verde-cocuyo));
    --cyi-lima-suave: var(--f-lima-suave, color-mix(in srgb, var(--verde-cocuyo) 10%, transparent));
    --cyi-linea-fuerte: var(--f-linea-fuerte, color-mix(in srgb, var(--blanco-luz) 12%, transparent));
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: 100%;
    max-height: min(88dvh, 760px);
    margin: auto 0 0; padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-radius: var(--f-r-media, 22px) var(--f-r-media, 22px) 0 0;
    background: var(--cyi-fondo); color: var(--cyi-texto);
    box-shadow: inset 0 1px 0 var(--cyi-linea-fuerte), var(--f-sombra-menu, 0 24px 48px transparent);
    flex-direction: column; overflow: hidden;
  }
  .cy-idiomas[open] { display: flex; animation: cy-idiomas-sube var(--f-medio, 300ms ease) both; }
  .cy-idiomas::before { content: ""; flex: none; width: 36px; height: 4px; margin: var(--f-e-2, 8px) auto 0; border-radius: var(--f-r-pill, 999px); background: var(--cyi-linea-fuerte); }
  .cy-idiomas__cabeza { position: relative; flex: none; justify-content: center; min-height: 52px; margin: 0; padding: 0 60px; }
  .cy-idiomas h2 { font-size: var(--f-t-4, 1.0625rem); font-weight: 600; text-align: center; color: var(--cyi-texto); }
  .cy-idiomas__cerrar { position: absolute; inset-inline-end: var(--f-e-3, 12px); top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: var(--f-r-control, 10px); background: var(--cyi-sup-3); color: var(--cyi-texto); }
  .cy-idiomas__lista { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--f-e-1, 4px) var(--f-e-2, 8px) var(--f-e-4, 16px); }
  .cy-idiomas__opcion { position: relative; min-height: 52px; padding: 0 var(--f-e-3, 12px); gap: 14px; border-radius: var(--f-r-control, 10px); background: transparent; box-shadow: none; color: var(--cyi-texto); font-size: 1rem; }
  .cy-idiomas__opcion:hover { background: var(--cyi-sup-2); color: var(--cyi-texto); }
  .cy-idiomas__opcion[aria-current="true"] { background: var(--cyi-lima-suave); box-shadow: none; color: var(--cyi-lima); font-weight: 600; }
  /* ✓ dibujado con dos bordes (sin icono ni color propios). */
  .cy-idiomas__opcion[aria-current="true"]::after { content: ""; flex: none; width: 6px; height: 12px; margin-inline-start: auto; margin-inline-end: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .cy-idiomas__bandera { width: 28px; height: 21px; box-shadow: 0 0 0 1px var(--cyi-linea-fuerte); }
  .cy-idiomas .cy-idiomas__opcion:focus-visible { box-shadow: inset 0 0 0 2px var(--cyi-lima); }
}
@keyframes cy-idiomas-sube { from { transform: translateY(40px); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .cy-idiomas[open] { animation: none; }
  .f-cabecera :is(.cy-acceso, .cy-idioma-cab), .cy-idiomas__opcion { transition: none; }
  .f-cabecera .cy-acceso:active { transform: none; }
}


/* cocuyo-css: assets/css/crear-hoja.css */
/* ============================================================
   HOJA «CREAR» DEL MÓVIL (oct-2026)
   ------------------------------------------------------------
   La carga assets/js/crear-hoja.js. Ventana a pantalla completa con
   pestañas en píldora y una rejilla de 2 columnas de tarjetas (imagen
   arriba, título en mayúsculas debajo), como la hoja «Create» de las
   apps de referencia, con los colores y medidas de tokens.css.
   Cada var() lleva su valor de respaldo por si una página sirve un
   tokens.css viejo. Márgenes lógicos: en árabe y urdu se da la vuelta.
   ============================================================ */

/* Marca de «hoja ya puesta» (10-oct-2026): la página trae esta hoja en su
   <head> (sola o dentro de un paquete de build-css) y el JS la da por
   lista desde el primer pintado, sin volver a pedirla. */
:root { --cy-hoja-crear: 1; }
.cy-crear {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: env(safe-area-inset-top) 0 0;
  border: 0;
  background: var(--negro-abismo, #050505);
  color: var(--blanco-luz, #F8FAFC);
  font-family: var(--fuente, system-ui, sans-serif);
  overflow: hidden;
}
.cy-crear[open] { display: flex; flex-direction: column; }
.cy-crear[hidden] { display: none; }
.cy-crear::backdrop { background: var(--negro-abismo, #050505); }
html.cy-creando, html.cy-creando body { overflow: hidden; }

.cy-crear .cy-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Cabeza: «Crear» y la X */
.cy-crear__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; }
.cy-crear__cabeza h2 { margin: 0; font: 700 28px/1.1 var(--fuente, system-ui, sans-serif); letter-spacing: -0.02em; }
.cy-crear__cerrar {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--f-borde, #262626); border-radius: 50%;
  background: color-mix(in srgb, var(--blanco-luz, #F8FAFC) 8%, transparent);
  color: var(--blanco-luz, #F8FAFC); cursor: pointer;
}

/* Pestañas: fila deslizable de píldoras; la elegida, blanca */
.cy-crear__pestanas {
  display: flex; gap: 6px; padding: 10px 16px 12px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cy-crear__pestanas::-webkit-scrollbar { display: none; }
.cy-crear__pestanas button {
  flex: none; height: 40px; margin: 0; padding: 0 16px;
  border: 0; border-radius: var(--radio-pill, 999px);
  background: transparent;
  color: color-mix(in srgb, var(--blanco-luz, #F8FAFC) 62%, transparent);
  font: 600 15px/1 var(--fuente, system-ui, sans-serif);
  white-space: nowrap; cursor: pointer;
}
.cy-crear__pestanas button[aria-selected="true"] { background: var(--blanco-luz, #F8FAFC); color: var(--negro-abismo, #050505); }

.cy-crear__cerrar:focus-visible,
.cy-crear__pestanas button:focus-visible,
.cy-crear a:focus-visible { outline: 2px solid var(--verde-cocuyo, #AFF33E); outline-offset: 2px; }

/* Cuerpo desplazable */
.cy-crear__cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 8px calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.cy-crear__cuerpo:focus { outline: none; }

/* Rejilla de 2 columnas */
.cy-crear__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cy-crear__tile {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--radio-md, 16px);
  background: var(--f-sup-2, #121212);
  color: inherit; text-decoration: none; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.cy-crear__tile--grande { grid-column: 1 / -1; }
.cy-crear__media {
  position: relative; display: block; aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--blanco-luz, #F8FAFC) 6%, var(--negro-abismo, #050505));
  overflow: hidden;
}
.cy-crear__tile--grande .cy-crear__media { aspect-ratio: 2 / 1; }
.cy-crear__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cy-crear__media-icono {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--verde-cocuyo, #AFF33E);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--verde-cocuyo, #AFF33E) 14%, transparent), transparent 70%);
}
.cy-crear__media-icono .cy-icono { width: 32px; height: 32px; }
.cy-crear__insignia {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  padding: 3px 6px; border-radius: 4px;
  background: var(--verde-cocuyo, #AFF33E); color: var(--tinta-sobre-verde, #050505);
  font: 700 11px/1 var(--fuente, system-ui, sans-serif); text-transform: uppercase;
}
.cy-crear__titulo {
  display: block; padding: 10px 12px 12px;
  font: 700 14px/1.2 var(--fuente, system-ui, sans-serif);
  letter-spacing: -0.01em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cy-crear__tile--grande .cy-crear__titulo { font-size: 16px; }

/* Secciones: título y «Ver todo» */
.cy-crear__seccion { margin-top: 20px; }
.cy-crear__cabeza-seccion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 10px; }
.cy-crear__cabeza-seccion h3 { margin: 0; font: 700 18px/1.2 var(--fuente, system-ui, sans-serif); }
.cy-crear__cabeza-seccion a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--verde-cocuyo, #AFF33E); font: 600 14px/1 var(--fuente, system-ui, sans-serif);
  text-decoration: none;
}

/* Útiles gratis: filas compactas en 2 columnas, icono + nombre + GRATIS */
.cy-crear__utiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cy-crear__util {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; min-height: 64px; padding: 10px;
  border-radius: var(--radio-md, 16px); background: var(--f-sup-2, #121212);
  color: inherit; text-decoration: none;
}
.cy-crear__util-icono {
  grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; color: var(--verde-cocuyo, #AFF33E);
  background: color-mix(in srgb, var(--verde-cocuyo, #AFF33E) 12%, transparent);
}
.cy-crear__util-nombre {
  font: 600 14px/1.2 var(--fuente, system-ui, sans-serif);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cy-crear__util-icono .mrc { width: 20px; height: 20px; }
.cy-crear__empresa { color: color-mix(in srgb, var(--blanco-luz, #F8FAFC) 55%, transparent); font: 400 12px/1.4 var(--fuente, system-ui, sans-serif); }
.cy-crear__gratis { color: var(--verde-cocuyo, #AFF33E); font: 700 11px/1.4 var(--fuente, system-ui, sans-serif); text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .cy-crear[open] { animation: cy-crear-entra .22s ease-out; }
  @keyframes cy-crear-entra { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Portada del móvil (crear-hoja.js, ponerPortada) ---------- */
.cy-portada { display: none; }
@media (max-width: 767px) {
  .cy-portada {
    display: block; padding: 20px 8px 8px;
    background: var(--negro-abismo, #050505); color: var(--blanco-luz, #F8FAFC);
    font-family: var(--fuente, system-ui, sans-serif);
  }
  .cy-portada[hidden] { display: none; }
  .cy-portada .cy-crear__cabeza-seccion h2 { margin: 0; font: 700 22px/1.2 var(--fuente, system-ui, sans-serif); letter-spacing: -0.02em; }
  .cy-portada .cy-crear__icono, .cy-portada .cy-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .cy-portada a:focus-visible { outline: 2px solid var(--verde-cocuyo, #AFF33E); outline-offset: 2px; }
  /* «¿Qué quieres crear?»: 4 accesos cuadrados en una fila */
  .cy-portada__accesos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cy-portada__accesos .cy-crear__media { aspect-ratio: 1; }
  .cy-portada__accesos .cy-crear__titulo { padding: 8px 6px 10px; font-size: 12px; text-align: center; }
  /* Nombres largos (ruso «Изображение», turco «Uygulamalar»): en dos líneas con guion
     en vez de cortarse con «…» (auditoría v338). */
  .cy-portada__accesos .cy-crear__titulo { white-space: normal; text-overflow: clip; hyphens: auto; overflow-wrap: break-word; line-height: 1.15; }
  /* Modelos: carril que se desliza */
  .cy-portada__carril {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin: 0 -8px; padding: 0 8px;
  }
  .cy-portada__carril::-webkit-scrollbar { display: none; }
  .cy-portada__carril > * { flex: 0 0 72%; scroll-snap-align: start; }
  /* Explora más: píldoras con las secciones del sitio */
  .cy-portada__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
  .cy-portada__chip {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--f-borde, #262626); border-radius: var(--radio-pill, 999px);
    color: var(--blanco-luz, #F8FAFC); font: 600 14px/1 var(--fuente, system-ui, sans-serif); text-decoration: none;
  }
  /* Con la portada nueva puesta, fuera los bloques largos que repite. Desde
     el primer pintado (10-oct-2026): navegacion-pronta.js pone en el <head>
     cy-portada-pronta y esta hoja va en el <head> de la portada, así que esos
     bloques nunca se ven para desaparecer segundos después (la página pasaba
     de 5.884 a 1.226 px de golpe). Si crear-hoja.js no llega, esa clase se
     quita y vuelven. */
  html:is(.cy-portada-lista, .cy-portada-pronta) .in-estudio,
  html:is(.cy-portada-lista, .cy-portada-pronta) .in-apps,
  html:is(.cy-portada-lista, .cy-portada-pronta) .in-gratis,
  html:is(.cy-portada-lista, .cy-portada-pronta) .in-precio,
  html:is(.cy-portada-lista, .cy-portada-pronta) .in-conectores { display: none; }
}