/* Va en @layer components por la misma razon que cine-scoped.css: una regla
   sin capa gana a cualquier utilidad de Tailwind, y eso rompia los componentes
   heredados (colores de texto y rellenos). Aqui queda por debajo de ellas. */
@layer components {
/* =============================================================================
   Octopus Search & Workspace — capa cinematográfica
   Personalidad: tinta en el agua. Verde y violeta sobre negro con reflejo verde,
   el buscador flotando sobre la escena y el muro de las 31 aplicaciones.
   ========================================================================== */

.cine {
  --bg: #050A07;
  --bg-2: #0B1710;
  --fg: #E9F6ED;
  --fg-2: #A9C7B5;
  --fg-3: #83A491;
  --light: #F3F8F4;
  --light-2: #E2EEE6;
  --ink: #08150D;
  --ink-2: #37503F;
  --ink-3: #4F6B58;
  --b1: #22C55E;
  --b2: #7C4DEE;
  --b3: #86EFAC;
  --on-b1: #05170C;
  --grad: linear-gradient(115deg, #7C4DEE, #22C55E 58%, #86EFAC);
  --veil: 5, 10, 7;

  --font-d: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-b: var(--font-inter, "Inter"), system-ui, sans-serif;
  --font-m: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1200px;
}
.cine h1, .cine h2, .cine h3 { font-weight: 700; letter-spacing: -.03em; }

/* --- el buscador flotando sobre la escena --------------------------------- */
.oc-hero { min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 96px 0 6rem; }
.oc-hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.045em; margin-top: 1.2rem; }
.oc-kicker { font-family: var(--font-m); font-size: .68rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--b3); margin-top: .7rem; }
.oc-search { width: 100%; max-width: 40rem; margin: 2.4rem auto 0; }
/* La caja de búsqueda es un componente existente: aquí solo se le da el vestido
   de cristal que pide el fondo 3D, sin tocar su marcado ni su comportamiento. */
.oc-search input, .oc-search [role="combobox"] { background: rgba(255,255,255,.08) !important;
  border-color: rgba(134,239,172,.34) !important; color: var(--fg) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.oc-search input::placeholder { color: #9FBFAC !important; }
.oc-hero .oc-note { font-size: .84rem; color: var(--fg-3); margin-top: 1.4rem; }

/* La esquina de sesion vive AHORA dentro de la barra (.oc-nav-in), como un item
   flexible mas. Antes esta regla la sacaba del flujo (`position:absolute; right:0`)
   por herencia de una maqueta anterior en la que flotaba sobre el heroe: al no
   ocupar sitio, el menu se estiraba hasta el borde derecho y los iconos se pintaban
   ENCIMA de "Precios" y "Contacto" —y, por debajo de 981 px, encima del boton de
   menu, que quedaba muerto—. Se deja solo el ajuste vertical. */
.oc-corner { display: flex; align-items: center; }

/* --- el muro de aplicaciones ---------------------------------------------- */
.oc-suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.oc-group { background: #fff; border: 1px solid rgba(8,21,13,.08); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.3vw, 1.9rem); box-shadow: var(--shadow-1); }
.oc-group h3 { font-size: 1.02rem; color: var(--ink); display: flex; align-items: center; gap: .6rem; }
.oc-group h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); }
.oc-apps { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.oc-apps span { font-size: .78rem; padding: .35rem .75rem; border-radius: 999px;
  background: var(--light-2); color: var(--ink-2); border: 1px solid rgba(8,21,13,.07); }
@media (max-width: 900px) { .oc-suite { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .oc-suite { grid-template-columns: 1fr; } }

/* --- razones ---------------------------------------------------------------- */
.oc-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.oc-reason { border-radius: var(--radius); padding: clamp(1.5rem, 2.4vw, 2rem);
  background: linear-gradient(150deg, rgba(34,197,94,.14), rgba(124,77,238,.07));
  border: 1px solid rgba(134,239,172,.22); }
.oc-reason h3 { font-size: 1.06rem; }
.oc-reason p { color: var(--fg-2); font-size: .91rem; margin-top: .7rem; }
@media (max-width: 900px) { .oc-reasons { grid-template-columns: 1fr; } }

/* --- pie ------------------------------------------------------------------- */
.oc-foot { background: #030704; border-top: 1px solid rgba(134,239,172,.14); }
.oc-foot .foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; }
.oc-foot h4 { font-family: var(--font-m); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; }
.oc-foot ul { list-style: none; margin-top: 1.1rem; display: grid; gap: .55rem; }
.oc-foot a { font-size: .88rem; color: var(--fg-2); transition: color .25s; }
.oc-foot a:hover { color: var(--b3); }
.oc-foot-brand p { color: var(--fg-3); font-size: .87rem; margin-top: 1rem; max-width: 34ch; }
.oc-foot-mark { font-size: clamp(2.2rem, 12vw, 10rem); font-weight: 800; letter-spacing: -.055em;
  line-height: .84; background: linear-gradient(180deg, rgba(134,239,172,.20), rgba(134,239,172,0));
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; padding-bottom: .1em; }
.oc-foot-legal { border-top: 1px solid rgba(134,239,172,.12); padding: 1.3rem 0 2.2rem;
  font-size: .8rem; color: var(--fg-3); }
@media (max-width: 860px) { .oc-foot .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .oc-foot .foot-top { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .oc-foot a { min-height: 44px; display: inline-flex; align-items: center; } }


/* --- cabecera con el logo oficial ----------------------------------------- */
.oc-nav { position: fixed; inset: 0 0 auto; z-index: 90; border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s; }
.oc-nav.is-stuck { background: rgba(5,10,7,.88); backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: rgba(134,239,172,.18); }
.oc-nav-in { display: flex; align-items: center; gap: 1rem; height: 72px; }
.oc-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: #fff; }
.oc-logo span { display: grid; line-height: 1.1; font-weight: 700; font-size: .96rem; letter-spacing: -.02em; }
.oc-logo em { font-style: normal; font-family: var(--font-m); font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--b3); margin-top: .25rem; }
.oc-corner { margin-left: auto; }
.oc-nav .nav-menu { margin-left: auto; }
.oc-nav .nav-menu + .oc-corner { margin-left: 0; }
@media (max-width: 980px) { .oc-nav .nav-menu { display: none; } }


/* El heroe empieza por debajo de la cabecera fija. */
.oc-hero { padding-top: 128px; }

/* --- precios (recuperados de la portada anterior) ------------------------- */
.oc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2.2rem, 4vw, 3rem); align-items: start; }
.oc-plan { background: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid rgba(8,21,13,.09); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.oc-plan.is-top { border-color: var(--b1); box-shadow: 0 30px 64px -26px rgba(34,197,94,.42); }
.oc-plan-tag { font-family: var(--font-m); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); }
.oc-plan h3 { font-size: 1.2rem; margin-top: .8rem; color: var(--ink); }
.oc-price { margin-top: 1rem; display: flex; align-items: baseline; gap: .4rem; }
.oc-price b { font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.oc-price span { font-size: .78rem; color: var(--ink-3); }
.oc-storage { font-size: .78rem; color: var(--ink-3); margin-top: .4rem; }
.oc-plan ul { list-style: none; margin-top: 1.2rem; display: grid; gap: .55rem; flex: 1; }
.oc-plan li { display: flex; gap: .55rem; font-size: .85rem; color: var(--ink-2); align-items: flex-start; }
.oc-plan li svg { width: 15px; height: 15px; color: #0E7A39; flex: 0 0 auto; margin-top: .2rem; }
.oc-plan .btn { margin-top: 1.5rem; width: 100%; }
[data-billing="monthly"] [data-price="annual"], [data-billing="annual"] [data-price="monthly"] { display: none; }
@media (max-width: 940px) { .oc-plans { grid-template-columns: 1fr; } }
.oc-fine { margin-top: 1.4rem; font-size: .87rem; color: var(--ink-2); max-width: 78ch; }
.oc-fine a { color: #0B6B32; font-weight: 600; text-decoration: underline; }


/* =============================================================================
   LANDING DE CAMPANA (/programa) Y PAGINA DE GRACIAS (/gracias)   2026-08-29
   -----------------------------------------------------------------------------
   Estas dos paginas se sirven en sus propios subdominios (landing. y gracias.)
   pero viven en esta misma app. Usan las primitivas de cine-scoped.css
   (.scene, .wrap, .sec, .on-light, .card, .faq, .btn) y solo anaden aqui lo
   que es propio del embudo.

   TRAMPA CONOCIDA: `.cine` fija el color de texto CLARO para todo lo que
   envuelve. Cada seccion clara de estas paginas lleva `.on-light` de forma
   EXPLICITA; si se anade una seccion nueva sin esa clase, saldra claro sobre
   claro. No hay excepciones a esto en /programa.
   ========================================================================== */

/* --- Barra de la landing: logotipo y CTA, sin menu a proposito ------------- */
.cine .pg-bar { position: sticky; top: 0; z-index: 90; background: rgba(5,10,7,.92);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--b3) 14%, transparent); }
.cine .pg-bar-in { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.cine .pg-bar .oc-logo { color: var(--fg); }
.cine .pg-bar-cta { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.cine .pg-bar-precio { font-family: var(--font-m); font-size: .72rem; letter-spacing: .06em;
  color: var(--fg-2); white-space: nowrap; }
@media (max-width: 620px) { .cine .pg-bar-precio { display: none; } }
.cine .pg-bar .btn { min-height: 44px; padding: .6rem 1.15rem; font-size: .88rem; }

/* --- Heroe --------------------------------------------------------------- */
.cine .pg-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.cine .pg-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .cine .pg-hero-grid { grid-template-columns: 1fr; } }
.cine .pg-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06;
  letter-spacing: -.04em; margin-top: 1.2rem; max-width: 20ch; }
.cine .pg-hero .lead { margin-top: 1.3rem; max-width: 50ch; }
.cine .pg-prueba { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.5rem;
  font-size: .85rem; color: var(--fg-2); }
.cine .pg-prueba span { display: inline-flex; align-items: center; gap: .45rem; }
.cine .pg-prueba svg { width: 15px; height: 15px; color: var(--b3); flex: none; }

/* --- Tarjeta de precio del heroe (el value stack) ------------------------- */
.cine .pg-oferta { border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: rgba(255,255,255,.05);
  border: 1px solid color-mix(in srgb, var(--b3) 26%, transparent);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.85); }
.cine .pg-oferta h2 { font-size: 1rem; letter-spacing: -.01em; }
.cine .pg-oferta ul { list-style: none; margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.cine .pg-oferta li { display: flex; gap: .8rem; align-items: baseline; font-size: .87rem;
  color: var(--fg-2); border-bottom: 1px dashed rgba(255,255,255,.10); padding-bottom: .5rem; }
.cine .pg-oferta li b { margin-left: auto; font-family: var(--font-m); font-weight: 500;
  color: var(--fg); white-space: nowrap; }
.cine .pg-oferta-total { display: flex; align-items: baseline; gap: .8rem; margin-top: 1rem;
  font-size: .87rem; color: var(--fg-3); }
.cine .pg-oferta-total b { margin-left: auto; font-family: var(--font-m); }
.cine .pg-oferta-precio { margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--b3) 26%, transparent); }
.cine .pg-oferta-precio strong { display: block; font-size: clamp(2.3rem, 5vw, 3rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; color: var(--b3); }
.cine .pg-oferta-precio em { display: block; font-style: normal; margin-top: .5rem;
  font-size: .82rem; color: var(--fg-2); line-height: 1.55; }

/* --- Listas numeradas de mecanismo ---------------------------------------- */
.cine .pg-pasos { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.3rem); margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  list-style: none; counter-reset: pgp; }
@media (max-width: 940px) { .cine .pg-pasos { grid-template-columns: 1fr; } }
.cine .pg-paso { counter-increment: pgp; border-radius: var(--radius);
  padding: clamp(1.4rem, 2.2vw, 1.9rem); background: rgba(255,255,255,.045);
  border: 1px solid color-mix(in srgb, var(--fg) 17%, transparent); }
.cine .on-light .pg-paso { background: #fff; border-color: color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: var(--shadow-1); }
.cine .pg-paso::before { content: counter(pgp, decimal-leading-zero);
  font-family: var(--font-m); font-size: .72rem; letter-spacing: .2em; color: var(--b3); }
.cine .on-light .pg-paso::before { color: var(--b-on-light); }
.cine .pg-paso h3 { font-size: 1.06rem; margin-top: .85rem; letter-spacing: -.02em; }
.cine .pg-paso p { font-size: .92rem; line-height: 1.65; margin-top: .6rem; color: var(--fg-2); }
.cine .on-light .pg-paso h3 { color: var(--ink); }
.cine .on-light .pg-paso p { color: var(--ink-2); }

/* --- Calendario de la semana (seccion clara) ------------------------------ */
.cine .pg-semana { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem;
  margin-top: clamp(2.2rem, 4vw, 3rem); list-style: none; }
@media (max-width: 900px) { .cine .pg-semana { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cine .pg-semana { grid-template-columns: 1fr; } }
.cine .pg-dia { border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: var(--shadow-1); }
.cine .pg-dia b { display: block; font-family: var(--font-m); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--b-on-light); }
.cine .pg-dia p { margin-top: .6rem; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }

/* --- Bloque de honestidad (lo que NO hacemos) ----------------------------- */
.cine .pg-limites { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.9rem, 1.6vw, 1.3rem); margin-top: clamp(2.2rem, 4vw, 3rem); }
@media (max-width: 820px) { .cine .pg-limites { grid-template-columns: 1fr; } }
.cine .pg-limite { border-radius: var(--radius); padding: clamp(1.3rem, 2.2vw, 1.8rem);
  background: rgba(255,255,255,.045);
  border: 1px solid color-mix(in srgb, var(--fg) 17%, transparent); }
.cine .pg-limite h3 { font-size: 1rem; display: flex; align-items: center; gap: .6rem; }
.cine .pg-limite h3 svg { width: 18px; height: 18px; flex: none; }
.cine .pg-limite ul { list-style: none; margin-top: 1rem; display: grid; gap: .7rem; }
.cine .pg-limite li { font-size: .91rem; line-height: 1.6; color: var(--fg-2);
  display: flex; gap: .65rem; }
.cine .pg-limite li svg { width: 15px; height: 15px; flex: none; margin-top: .28rem; }

/* --- Zona de reserva ------------------------------------------------------ */
.cine .pg-reserva { display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.4rem); align-items: start;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
@media (max-width: 940px) { .cine .pg-reserva { grid-template-columns: 1fr; } }
.cine .pg-reserva-copy ul { list-style: none; margin-top: 1.5rem; display: grid; gap: .8rem; }
.cine .pg-reserva-copy li { display: flex; gap: .7rem; font-size: .93rem; line-height: 1.6;
  color: var(--fg-2); }
.cine .pg-reserva-copy li svg { width: 16px; height: 16px; color: var(--b3); flex: none; margin-top: .25rem; }
.cine .pg-reserva-copy li strong { color: var(--fg); font-weight: 650; }
/* Un `strong` dentro de un parrafo de apoyo heredaba el gris del cuerpo y solo
   quedaba en negrita: sobre fondo oscuro apenas se distinguia. Se sube al color
   de titulo, y en las secciones claras a la tinta, no al gris. */
.cine .lead strong { color: var(--fg); font-weight: 650; }
.cine .on-light .lead strong { color: var(--ink); }

/* --- Pie minimo de la landing -------------------------------------------- */
.cine .pg-foot { background: #030704; border-top: 1px solid rgba(134,239,172,.14);
  padding: 1.6rem 0 2.2rem; }
.cine .pg-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .1rem 1rem; text-align: center; }
.cine .pg-foot a { font-size: .82rem; color: var(--fg-3); min-height: 44px;
  display: inline-flex; align-items: center; padding-inline: .35rem; }
.cine .pg-foot a:hover { color: var(--b3); }
.cine .pg-foot p { font-size: .82rem; color: var(--fg-3); width: 100%; }

/* =============================================================================
   PAGINA DE GRACIAS
   ========================================================================== */
.cine .gr-cita { border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2rem);
  background: rgba(255,255,255,.055);
  border: 1px solid color-mix(in srgb, var(--b3) 30%, transparent);
  text-align: left; margin-top: 2rem; }
.cine .gr-cita dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; margin: 0; }
.cine .gr-cita dt { font-family: var(--font-m); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); align-self: center; }
.cine .gr-cita dd { margin: 0; font-size: .96rem; color: var(--fg); min-width: 0;
  overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .cine .gr-cita dl { grid-template-columns: 1fr; gap: .15rem; }
  .cine .gr-cita dd { margin-bottom: .7rem; } }
.cine .gr-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.cine .gr-acciones .btn { min-height: 44px; font-size: .88rem; padding: .7rem 1.2rem; }

.cine .gr-agenda { list-style: none; display: grid; gap: .7rem; margin-top: 1.6rem; }
.cine .gr-agenda li { display: grid; grid-template-columns: 5.6rem 1fr; gap: 1rem;
  padding: .95rem 1.1rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  text-align: left; }
@media (max-width: 560px) { .cine .gr-agenda li { grid-template-columns: 1fr; gap: .2rem; } }
.cine .gr-agenda b { font-family: var(--font-m); font-size: .74rem; letter-spacing: .08em;
  color: var(--b3); }
.cine .gr-agenda p { font-size: .9rem; line-height: 1.55; color: var(--fg-2); }

.cine .gr-bloque { text-align: left; margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.cine .gr-bloque h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -.03em; }
.cine .gr-bloque > p { color: var(--fg-2); font-size: .95rem; line-height: 1.7; margin-top: .8rem;
  text-wrap: pretty; }
.cine .gr-form { display: grid; gap: .9rem; margin-top: 1.4rem; padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border-radius: var(--radius); background: rgba(255,255,255,.045);
  border: 1px solid color-mix(in srgb, var(--fg) 17%, transparent); }
.cine .gr-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--fg);
  margin-bottom: .4rem; }
.cine .gr-form input, .cine .gr-form select, .cine .gr-form textarea {
  width: 100%; min-width: 0; min-height: 44px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,.34); color: var(--fg); font: inherit; font-size: .92rem;
  border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); padding: .6rem .85rem; }
.cine .gr-form textarea { min-height: 84px; }
.cine .gr-form input:focus-visible, .cine .gr-form select:focus-visible,
.cine .gr-form textarea:focus-visible { outline: 2px solid var(--b3); outline-offset: 1px; }
.cine .gr-form input::placeholder, .cine .gr-form textarea::placeholder { color: #86A594; }
.cine .gr-form .btn { width: 100%; }
.cine .gr-nota { font-size: .82rem; color: var(--fg-2); margin-top: .7rem; }
.cine .gr-ok { border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .9rem;
  background: color-mix(in srgb, var(--b1) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--b1) 42%, transparent); color: var(--fg); }
.cine .gr-error { border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .86rem;
  background: rgba(248,113,113,.16); border: 1px solid rgba(248,113,113,.45); color: #FECACA; }

.cine .gr-deberes { list-style: none; display: grid; gap: .7rem; margin-top: 1.4rem;
  counter-reset: grd; }
.cine .gr-deberes li { counter-increment: grd; display: grid; grid-template-columns: auto 1fr;
  gap: .9rem; padding: .95rem 1.1rem; border-radius: var(--radius-sm); text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  font-size: .91rem; line-height: 1.6; color: var(--fg-2); }
.cine .gr-deberes li::before { content: counter(grd); font-family: var(--font-m); font-size: .8rem;
  color: var(--b3); width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--b1) 22%, transparent); }
.cine .gr-deberes strong { color: var(--fg); font-weight: 650; }

}

/* --------------------------------------------------------------------------
   FUERA de `@layer components` A PROPOSITO: las utilidades de Tailwind viven en
   una capa posterior y ganarian a cualquier regla de dentro por muy especifica
   que fuese (`inline-flex` contra `display:none`). Lo de aqui tiene que imponerse.

   Por debajo de 981 px el menu se va al panel del burger y la barra solo tiene
   sitio para el logotipo, la identidad y el propio burger. Los tres controles de
   la esquina (incognito, rejilla y "Iniciar sesion") no caben en 360 px: se queda
   el que NO esta ya en ese panel —el avatar de quien tiene sesion— y el resto se
   sirve desde el menu y desde el pie. Sin esto, devolver la esquina al flujo
   desbordaria la barra.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .oc-nav .oc-corner [data-corner="incognito"],
  .oc-nav .oc-corner [data-corner="apps"],
  .oc-nav .oc-corner [data-corner="login"] { display: none; }
  /* Sin sesion no queda ningun control: se retira tambien la caja para que no deje
     su hueco de separacion. (La regla de arriba ya oculta el boton en navegadores
     sin `:has()`.) */
  .oc-nav .oc-corner:has([data-auth="anon"]) { display: none; }
}

/* El logotipo cede espacio antes que los controles: el burger y la esquina son
   objetivos tactiles de 44-48 px y no deben encogerse (con la esquina todavia en
   su tamano completo, a 360 px el burger se quedaba en 33 px de ancho). */
.oc-nav .oc-logo { min-width: 0; flex: 0 1 auto; }
.oc-nav .oc-logo span { min-width: 0; overflow: hidden; }
.oc-nav .oc-corner,
.oc-nav .burger { flex: 0 0 auto; }