/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* 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/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/estudio-familia.css */
/* ============================================================
   ESTUDIO · ACABADO FAMILIA COCUYO (dueño, 29-sep-2026)
   ------------------------------------------------------------
   El Estudio se viste igual que el resto de la web (familia.css y el
   concepto de propuestas/familia/estudio.html), con el acabado ligero
   tipo Runway/Apple: Geist 450–550 en titulares y navegación, cuerpo
   400, casi sin bordes, sombras mínimas, mucho aire, lima SOLO en la
   acción principal y en lo activo, y las dos O verdes sin halo.

   Qué NO cambia: el negro, «Esperando para crear», la posición de los
   paneles (Crear a la izquierda, resultados a la derecha), el Agente
   privado (data-agente-beta), los flujos, los ids, los data-atributos
   y los estados que pinta el JavaScript (saldo bajo, en marcha, etc.).

   Cómo se aplica: esta hoja es la ÚLTIMA capa del Estudio. El Estudio
   acumula muchas hojas con selectores largos (#mesa #headicons…), así
   que cada regla de aquí empieza por el prefijo
       body.studio-workbench:not(#f)
   El «:not(#f)» no filtra nada (no existe un #f): solo suma el peso de
   un id para quedar por encima de las capas anteriores sin recurrir a
   !important. Solo se usa !important donde una hoja anterior ya lo usa.

   Colores y letra: tokens --f-* del espejo de crear.html (los mismos
   valores que assets/css/familia.css). Sin colores sueltos.
   Movimiento reducido: sin transiciones ni animaciones al final.
   ============================================================ */

/* ============ Base: letra y titulares ============ */
/* Titulares en Geist (Fraunces queda fuera de los titulares). */
body.studio-workbench:not(#f) {
  --display: var(--fuente);
  font-weight: var(--f-peso-cuerpo);
  letter-spacing: -0.005em;
  font-kerning: normal;
}
body.studio-workbench:not(#f) :is(h1, .title, .hello, .bv-vacio h3, .hist-nada b) {
  font-family: var(--fuente);
  font-weight: var(--f-peso-display);
  letter-spacing: var(--f-tracking-titulo);
}
body.studio-workbench:not(#f) :is(h2, h3) { font-weight: var(--f-peso-titulo); letter-spacing: -0.015em; }

/* ============ Cabecera del Estudio (escritorio) ============ */
/* El mismo lenguaje que la cabecera común (.f-cabecera): 64 px, vidrio
   negro, una línea finísima debajo, enlaces 450 en gris que pasan a
   blanco, y el activo en blanco con un punto lima. */
@media (min-width: 901px) {
  html body.studio-workbench:not(#f) { --st-top: 64px; }
  body.studio-workbench:not(#f) .studio-public-nav {
    --cn-top: 64px;
    height: 64px;
    gap: var(--f-e-4);
    padding: 0 var(--f-e-6);
    border-bottom: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav { gap: 2px; align-items: center; height: auto; }
  body.studio-workbench:not(#f) .studio-public-nav .st-actions { gap: var(--f-e-2); }
}

/* Marca: COCUYO con las dos O encendidas, sin halo (ley de marca). */
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton { filter: none; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton:hover { filter: none; opacity: .86; }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton[aria-current="page"]::after { display: none; }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .wordmark {
  font-family: var(--fuente);
  font-weight: 650;
  font-size: 1.125rem;
  letter-spacing: .07em;
  line-height: 1;
  color: var(--f-texto);
}
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .o-viva { color: var(--f-lima); text-shadow: none; }

/* Enlaces del menú: Imagen · Video · Audio (con su flecha de modelos),
   Apps, Comunidad, Agente (solo con acceso), Creaciones, Proyectos y
   Precios. Todos con la misma pastilla. */
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--fuente);
  font-size: .875rem;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--f-texto-2);
  white-space: nowrap;
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing):hover {
  color: var(--f-texto);
  background: var(--f-sup-2);
}
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing, .st-nav-group > button):focus-visible {
  outline: 2px solid var(--f-lima);
  outline-offset: 2px;
}
/* Imagen · Video · Audio: enlace + flecha forman una sola pastilla. */
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group {
  align-items: center;
  height: 36px;
  border-radius: var(--f-r-pill);
  box-shadow: none;
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-right: 2px; }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:hover > a { color: var(--f-texto); background: transparent; }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button {
  width: 26px;
  height: 36px;
  padding: 0 6px 0 2px;
  border-radius: 0 var(--f-r-pill) var(--f-r-pill) 0;
  color: var(--f-texto-3);
  background: transparent;
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button:hover,
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button[aria-expanded="true"] { color: var(--f-texto); }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button > svg { width: 12px; height: 12px; opacity: .8; }
/* Activo: blanco y un punto lima (como la cabecera común). */
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .sn-agent-entry, .st-workspace-nav button, .st-pricing)[aria-current="page"] {
  color: var(--f-texto);
  background: transparent;
  box-shadow: none;
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:has(> a[aria-current="page"]) { box-shadow: none; }
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .sn-agent-entry, .st-workspace-nav button, .st-pricing)[aria-current="page"]::after,
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto::after {
  content: "";
  display: block;
  position: static;
  flex: none;
  width: 4px;
  height: 4px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--f-lima);
  box-shadow: none;
}
/* Hueco del punto reservado también en los no activos (dueño, 10-oct-2026: «se
   cambia la posición de arriba»): Imagen, Video y Audio no se mueven al cambiar de modo. */
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a:not([aria-current="page"])::after {
  content: "";
  display: block;
  position: static;
  flex: none;
  width: 4px;
  height: 4px;
  margin-left: 2px;
  background: none;
  transform: none;
  visibility: hidden;
}
/* Apps y Comunidad sin iconos de colores: la lima es para lo activo. */
body.studio-workbench:not(#f) .studio-public-nav .st-apps .ic { display: none; }
body.studio-workbench:not(#f) .studio-public-nav .cn-community-toggle > svg { width: 12px; height: 12px; opacity: .55; margin-left: -2px; }
/* Creaciones · Proyectos: separados por una línea fina, como la maqueta. */
body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav {
  gap: 2px;
  margin-left: var(--f-e-1);
  padding-left: var(--f-e-3);
  border-left: 0;
  box-shadow: inset 1px 0 0 var(--f-linea-fuerte);
  height: 18px;
  overflow: visible;
}
body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button svg { width: 16px; height: 16px; stroke-width: 1.5; }
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton .cpro-actual { color: var(--f-texto); font-weight: 450; }
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto > svg { color: inherit; }
/* Con sitio de sobra, texto sin iconos (como la cabecera común); entre
   901 y 1180 px quedan solo los iconos, como hasta ahora. */
@media (min-width: 1181px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button > svg { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button { width: 36px; padding: 0; justify-content: center; }
  body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto::after { display: none; }
  body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-pricing) { padding-inline: 9px; font-size: .8125rem; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-right: 1px; }
}

/* Precios: un enlace más, sin la pastilla «No caducan» (Familia, 29-sep). */
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-badge,
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-label > svg { display: none; }
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-label { gap: 0; }

/* Saldo: una pastilla fina con la cifra. El icono conserva sus colores de
   estado (rojo con poco saldo), que pinta estudio-creditos.css. */
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos {
  height: 36px;
  min-height: 36px;
  gap: 7px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos .credit-wallet-icon { width: 15px; height: 15px; flex-basis: 15px; stroke-width: 1.6; }
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos [data-credit-value] { font-size: .875rem; font-weight: var(--f-peso-ui); letter-spacing: 0; }

/* Ayuda, idioma y sesiones: iconos redondos y transparentes. */
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle) {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--f-texto-2);
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle):hover { color: var(--f-texto); background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle) svg { width: 18px; height: 18px; stroke-width: 1.5; }
body.studio-workbench:not(#f) .studio-public-nav .st-language summary {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  color: var(--f-texto-2);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: .02em;
}
body.studio-workbench:not(#f) .studio-public-nav .st-language summary:hover { color: var(--f-texto); background: var(--f-sup-2); }

/* Avatar: círculo gris con la inicial (como .f-cuenta #avatar-cine). */
body.studio-workbench:not(#f) .studio-public-nav #acct {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
body.studio-workbench:not(#f) .studio-public-nav #acct .av {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--f-sup-3);
  color: var(--f-texto);
  font-family: var(--fuente);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav #acct:hover .av,
body.studio-workbench:not(#f) .studio-public-nav #acct[aria-expanded="true"] .av { background: color-mix(in srgb, var(--blanco-luz) 14%, var(--negro-abismo)); }
body.studio-workbench:not(#f) .studio-public-nav #acct:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 2px; }

/* Visitante: «Empieza a crear» es el botón lima de la cabecera común. */
body.studio-workbench:not(#f) .studio-public-nav .st-guest .st-start {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-lima);
  color: var(--f-lima-tinta);
  font-family: var(--fuente);
  font-size: .875rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.005em;
  transition: background var(--f-rapido), box-shadow var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav .st-guest .st-start:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }

/* ============ Cabecera del Estudio (móvil) ============ */
@media (max-width: 900px) {
  body.studio-workbench:not(#f) .studio-public-nav {
    border-bottom: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .wordmark { font-size: 1rem; }
  /* El punto activo y la flecha caben junto al nombre completo. La rejilla
     heredada daba el mismo ancho a cada editor y recortaba «Imagen» junto
     a la marca; el mínimo global de los botones ensanchaba las flechas. */
  body.studio-workbench:not(#f) .studio-public-nav .st-nav { display: flex; align-items: center; gap: 0; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group { flex: 1 0 auto; min-width: max-content; height: 44px; justify-content: center; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { min-height: 44px; padding: 0 1px 0 8px; font-size: .8125rem; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button { width: var(--f-e-6); min-width: var(--f-e-6); padding: 0 4px 0 1px; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:has(> a[aria-current="page"]) { background: var(--f-sup-2); }
}
@media (max-width: 380px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-left: 6px; font-size: .75rem; }
  body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a)[aria-current="page"]::after { display: none; }
}

/* ============ Menú de modelos (la flecha de Imagen/Video/Audio) ============ */
body.studio-workbench:not(#f) .studio-public-nav .st-model-panel.cn-mega {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  background: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}
body.studio-workbench:not(#f) .cn-mega .cn-panel-heading { border-bottom: 0; box-shadow: 0 1px 0 var(--f-linea); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-heading h2 { font-weight: var(--f-peso-titulo); }
body.studio-workbench:not(#f) .cn-mega .cn-family { font-weight: 450; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .cn-mega .cn-family:is(:hover, [aria-expanded="true"]) { background: var(--f-sup-2); border-color: transparent; }
body.studio-workbench:not(#f) .cn-mega .cn-family-deck { border-left: 0; box-shadow: inset 1px 0 0 var(--f-linea); background: transparent; }
body.studio-workbench:not(#f) .cn-mega .cn-family-heading { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .cn-mega .cn-model { border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .cn-mega .cn-model:hover { background: var(--f-sup-2) !important; border-color: transparent !important; }
body.studio-workbench:not(#f) .cn-mega .cn-model b { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-footer { border-top: 0; box-shadow: 0 -1px 0 var(--f-linea); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-footer > :is(a, button) { font-weight: var(--f-peso-ui); }

/* ============ Panel Crear ============ */
/* Rótulo «CREAR»: la etiqueta pequeña en mayúsculas de la familia. */
body.studio-workbench:not(#f) #mesa .studio-editor-head > span:first-child {
  font-family: var(--fuente);
  font-size: .75rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-texto-3);
}
/* Modelo: la tarjeta con la marca en verde, sin borde marcado. */
body.studio-workbench:not(#f) #mesa #studioVideoModel .param {
  min-height: 56px;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-tarjeta);
  background: var(--f-sup-1);
  box-shadow: none;
  font-size: .9375rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.01em;
  transition: background var(--f-rapido), border-color var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #studioVideoModel .param:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #studioVideoModel .param .mrcbox {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: var(--f-r-control);
  background: var(--f-lima-suave);
  color: var(--f-lima);
}
/* Inicio / Final · Referencias: el segmento de la familia (pastilla,
   la opción elegida en blanco). */
body.studio-workbench:not(#f) #mesa .ref-mode-switch {
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea);
}
body.studio-workbench:not(#f) #mesa .ref-mode-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--fuente);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  color: var(--f-texto-3);
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa .ref-mode-switch button:hover { color: var(--f-texto); }
body.studio-workbench:not(#f) #mesa .ref-mode-switch button[aria-pressed="true"] { background: var(--f-texto); color: var(--negro-abismo); }
/* Añadir fotogramas / referencias: recuadro de puntos, sin relleno. */
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact {
  border: 1px dashed var(--f-linea-fuerte);
  border-radius: var(--f-r-tarjeta);
  background: transparent;
  box-shadow: none;
  font-weight: var(--f-peso-ui);
  transition: border-color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact:hover { border-color: var(--f-lima-linea); background: var(--f-lima-suave); }
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact .ref-orb { background: var(--f-sup-2); border-color: transparent; box-shadow: none; }
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact .ref-add-label { font-size: .8125rem; font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ref-mode-hint { font-size: .75rem; color: var(--f-texto-3); }
/* Descripción: campo de la familia (superficie apenas más clara). */
body.studio-workbench:not(#f) #mesa #ta {
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-tarjeta);
  background: var(--f-sup-1);
  box-shadow: none;
  font-weight: var(--f-peso-cuerpo);
  line-height: 1.5;
  transition: border-color var(--f-rapido), box-shadow var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #ta:hover { border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #ta:focus { border-color: var(--f-lima-linea); box-shadow: 0 0 0 3px var(--f-lima-suave); outline: 0; }
body.studio-workbench:not(#f) #mesa #ta:empty::before { color: var(--f-texto-3); }
/* Ayuda con el prompt · Mis referencias: chips de la familia. */
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-sup-2);
  color: var(--f-texto-2);
  font-family: var(--fuente);
  font-size: .75rem;
  font-weight: var(--f-peso-ui);
  text-decoration: none;
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry):hover { color: var(--f-texto); background: var(--f-sup-3); }
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry):focus-visible { outline: 2px solid var(--f-lima); outline-offset: 2px; }
body.studio-workbench:not(#f) #mesa #studioComposerActions { gap: 6px; }
/* Ajustes (formato, resolución, duración…): controles de 10 px de radio. */
body.studio-workbench:not(#f) #mesa #parambar .param {
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-control);
  background: var(--f-sup-1);
  box-shadow: none;
  font-weight: var(--f-peso-ui);
  transition: background var(--f-rapido), border-color var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #parambar .param:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #parambar .studio-param-label { font-weight: 450; color: var(--f-texto-3); }
body.studio-workbench:not(#f) #mesa #parambar .studio-param-value { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa #parambar .cost { font-weight: 450; }
body.studio-workbench:not(#f) #mesa #parambar .cost b { font-weight: var(--f-peso-ui); }

/* Generar: el botón principal de la familia (pastilla lima). El coste
   sigue dentro del botón; los estados del JS (en marcha, sin saldo,
   desactivado) conservan su lógica. */
body.studio-workbench:not(#f) #mesa #headicons .roundbtn,
body.studio-workbench:not(#f) #mesa .ap-gen {
  min-height: 52px;
  border: 0;
  border-radius: var(--f-r-pill);
  box-shadow: none;
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.005em;
  transition: background var(--f-rapido), box-shadow var(--f-rapido), transform var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:not(:disabled) { background: var(--f-lima); color: var(--f-lima-tinta); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:hover:not(:disabled),
body.studio-workbench:not(#f) #mesa .ap-gen:hover:not(:disabled) { background: var(--f-lima-hover); box-shadow: var(--f-luz); transform: none; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:active:not(:disabled),
body.studio-workbench:not(#f) #mesa .ap-gen:active:not(:disabled) { transform: scale(.98); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn::after { display: none; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn .rlbl { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn .studio-generate-cost { font-weight: 450; opacity: .72; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:focus-visible,
body.studio-workbench:not(#f) #mesa .ap-gen:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; }

/* ============ Vídeo en escritorio: columna Crear ============ */
/* Mismo negro que la página y una línea finísima hacia los resultados. */
@media (min-width: 1001px) {
  body.studio-workbench:not(#f)[data-studio-mode="video"] #mesa .mesa-in {
    background: var(--f-fondo);
    box-shadow: inset -1px 0 0 var(--f-linea);
  }
  body.studio-workbench:not(#f)[data-studio-mode="video"] #mesa #headicons {
    background: linear-gradient(to top, var(--f-fondo) 72%, transparent);
  }
}

/* ============ Imagen: barra de creación ============ */
/* Una tarjeta apenas más clara que el fondo, con su filete fino. */
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa .mesa-in {
  border: 0;
  border-radius: var(--f-r-media);
  background: var(--f-sup-1);
  box-shadow: 0 0 0 1px var(--f-linea), 0 24px 48px color-mix(in srgb, var(--negro-abismo) 55%, transparent);
}
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta { background: transparent; border-color: transparent; }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta:focus { box-shadow: none; border-color: transparent; }
/* La barra no tiene borde: el foco de teclado debe seguir siendo visible
   aunque el prompt conserve su superficie transparente. No cambia el tamaño. */
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa :is(#parambar .param, .image-ref-add) { background: var(--f-sup-2); border-color: transparent; }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa :is(#parambar .param, .image-ref-add):hover { background: var(--f-sup-3); }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa .image-ref-add { border-radius: var(--f-r-control); box-shadow: none; }

/* ============ Audio ============ */
body.studio-workbench:not(#f).audio-redesign #mesa .mesa-in {
  border: 0;
  background: var(--f-fondo);
  box-shadow: 0 0 0 1px var(--f-linea);
  border-radius: var(--f-r-media);
}
body.studio-workbench:not(#f) #mesa .audio-type-tabs button { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-voz { border-radius: var(--f-r-tarjeta); border-color: var(--f-linea); }
body.studio-workbench:not(#f) #mesa .ap-voz b { font-weight: var(--f-peso-titulo); letter-spacing: -0.02em; }
body.studio-workbench:not(#f) #mesa .ap-vozcambia { border-radius: var(--f-r-pill); font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-idioma select {
  min-height: 36px;
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-control);
  background-color: var(--f-sup-1);
  color: var(--f-texto);
  font-family: var(--fuente);
  font-weight: 450;
}
body.studio-workbench:not(#f) #mesa :is(.ap-rot, .ap-idioma > span) { font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
body.studio-workbench:not(#f) #mesa .ap-nota { color: var(--f-texto-3); }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila,
body.studio-workbench:not(#f) #mesa .ap-avwrap > .ap-fila {
  border-radius: var(--f-r-tarjeta);
  font-weight: 450;
}
body.studio-workbench:not(#f) #mesa #parambar .ap-fila { border: 1px solid var(--f-linea); background: var(--f-sup-1); box-shadow: none; }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila b { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-gen:not(:disabled) { background: var(--f-lima); color: var(--f-lima-tinta); }

/* ============ Resultados vacíos: «Esperando para crear» ============ */
/* Las dos luces del cocuyo, redondas y sin halo (como .f-luces). */
body.studio-workbench:not(#f) .ej-waiting-lights { gap: 10px; }
body.studio-workbench:not(#f) .ej-waiting-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: none;
  background: var(--f-lima);
  box-shadow: none;
}
body.studio-workbench:not(#f) .ej-waiting > p { color: var(--f-texto-3); font-weight: 450; letter-spacing: -0.005em; }

/* ============ Barra inferior del móvil ============ */
/* Proyectos · Apps · Creaciones · Precios · Cuenta: vidrio negro, iconos
   de línea y etiquetas pequeñas en gris; lo activo en blanco. */
@media (max-width: 900px) {
  body.studio-workbench:not(#f) .sm-nav {
    border-top: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 -1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) {
    border: 0;
    border-radius: var(--f-r-control);
    background: transparent;
    color: var(--f-texto-3);
    font-family: var(--fuente);
    font-size: .6875rem;
    font-weight: 450;
    letter-spacing: 0;
    transition: color var(--f-rapido), background var(--f-rapido);
  }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) :is(span, small) { font-weight: inherit; }
  body.studio-workbench:not(#f) .sm-nav .st-pricing .cn-pricing-label { color: inherit; font-weight: inherit; }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):hover,
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):is([aria-current="page"], [aria-expanded="true"], .on, .active) { color: var(--f-texto); }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) svg { width: 20px; height: 20px; stroke-width: 1.5; }
  body.studio-workbench:not(#f) .sm-nav .sm-apps .ic { color: inherit; }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):focus-visible { outline: 2px solid var(--f-lima); outline-offset: -2px; }
}

/* ============ Menú de cuenta y saldo ============ */
body.studio-workbench:not(#f) #accmenu {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  background: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}
body.studio-workbench:not(#f) #accmenu .mi { border-radius: var(--f-r-control); font-weight: 450; color: var(--f-texto-2); }
body.studio-workbench:not(#f) #accmenu .mi:hover { background: var(--f-sup-2); color: var(--f-texto); }
body.studio-workbench:not(#f) #accmenu .sec { border-top-color: var(--f-linea); }
body.studio-workbench:not(#f) #accmenu .acc-identidad strong { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .studio-wallet-panel {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  body.studio-workbench:not(#f) :is(.studio-public-nav *, .sm-nav > *, #mesa #ta, #mesa .param, #mesa .roundbtn, #mesa .ap-gen, #mesa .refbox, #mesa .ref-mode-switch button, #mesa .prompt-help-trigger, #mesa .ckit-entry) { transition: none; }
  body.studio-workbench:not(#f) :is(#mesa #headicons .roundbtn, #mesa .ap-gen):active:not(:disabled) { transform: none; }
  body.studio-workbench:not(#f) .ej-waiting-lights i { animation: none; opacity: .85; }
}

/* ===== Desplegable de Crear con el menú «Tareas» (dueño, 11-oct-2026: «para
   que todo se vea ya parejo») =====
   estudio-explorar.js dibuja dentro de #studioTopModels el mismo panel que la
   cabecera pública (familia-menu.js, CocuyoFamilia.tareas) y le pone
   --cn-menu-left. La caja la pone el propio panel (.f-tareas, familia.css):
   aquí solo se quita la del desplegable de antes. */
body.studio-workbench .studio-public-nav .st-model-panel.cn-mega.st-model-panel--tareas {
  width: min(968px, calc(100vw - 32px)); max-height: none; padding: 0; overflow: visible;
  border: 0; border-radius: 22px; background: transparent; box-shadow: none;
}
.st-model-panel--tareas .f-tareas { max-height: calc(100dvh - var(--cn-top, 72px) - 24px); }
.st-model-panel--tareas .cn-editor-status { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--f-sup-2); color: var(--f-texto); font-size: .875rem; }
.st-model-panel--tareas .cn-editor-status[hidden] { display: none; }