/* ============================================================
   SOCIOS ECOM — Interior · «terciopelo negro»
   La plataforma por dentro, a juego con la portada:

   - Lienzo negro puro, sin halos ni retículas: el vacío es el
     diseño. Las superficies apenas se separan del negro.
   - Fuera las anillas de cuaderno.
   - Titulares en peso 400 con tracking negativo; rótulos en
     dorado y mayúsculas.
   - Un solo color de acción (el verde, plano) y el dorado de
     chispa.
   - Movimiento: la vista entra con un fundido corto y las
     tarjetas responden al pasar.

   Se carga después de interior.css y antes de botones.css. Casi
   todo va bajo [data-tema="oscuro"]: el tema claro se queda como
   estaba salvo las anillas y la tipografía.
   ============================================================ */

/* ---------- 1 · Tokens ---------- */

[data-tema="oscuro"] {
  --se-papel: #0a0a0a;
  --se-papel-calido: #0d0d0d;
  --se-papel-hundido: #050505;
  --se-control-fondo: #141414;
  --se-cubierta: #000;
  --se-cubierta-alta: #070707;
  --se-cubierta-linea: rgba(255, 255, 255, .07);

  --se-tinta: #ffffff;
  --se-tinta-2: #bdbdbd;
  --se-tinta-3: #9a9a9a;

  --se-linea: rgba(255, 255, 255, .08);
  --se-linea-suave: rgba(255, 255, 255, .05);
  --se-linea-fuerte: rgba(255, 255, 255, .14);
  --se-borde-marcado: rgba(255, 255, 255, .22);

  --se-dorado-tinta: #ecb94f;
  --se-verde-tinta: #2fd4a8;

  --se-sombra-papel: none;
  --se-sombra-suave: 0 30px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07);

  --se-nav-activo-fondo: rgba(255, 255, 255, .06);
  --se-nav-activo-texto: #ffffff;
  --se-nav-activo-icono: #14c39a;

  --in-borde: rgba(255, 255, 255, .08);
  --in-vidrio: #0a0a0a;
  --in-filo: none;
  --se-r-card: 18px;
}
/* El menú sigue al tema (2026-11-10): en claro, el activo sobre papel */
:root:not([data-tema="oscuro"]) {
  --se-nav-activo-fondo: var(--se-lateral-activo);
  --se-nav-activo-texto: var(--se-lateral-tinta);
  --se-nav-activo-icono: #0b8a6b;
}
:root {
  --tp-salida: cubic-bezier(.16, 1, .3, 1);
  --tp-chispa: #ecb94f;
}

/* ---------- 2 · Chasis ---------- */

/* Sin anillas de archivador, y la hoja recupera ese margen */
.perforacion { display: none !important; }
.hoja { padding-left: 32px; }
@media (max-width: 1024px) { .hoja { padding-left: 16px; } }
@media (max-width: 640px) { .hoja { padding-left: 14px; padding-right: 14px; } }

[data-tema="oscuro"] body,
[data-tema="oscuro"] .app,
[data-tema="oscuro"] .lienzo { background: #000; }
[data-tema="oscuro"] .hoja { background: #000; }
[data-tema="oscuro"] .hoja::before { display: none; }

[data-tema="oscuro"] .sidebar {
  background: #000;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
[data-tema="oscuro"] .topbar {
  background: rgba(0, 0, 0, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none;
}

/* El menú: etiquetas de grupo en mayúscula espaciada, ítems con su marca a la izquierda */
.nav-grupo__titulo, .nav-titulo, .sidebar__grupo-titulo {
  letter-spacing: .14em !important;
  font-weight: 600 !important;
}
.nav-item { position: relative; transition: background-color .2s ease, color .2s ease; }
.nav-item.es-activo:not(.nav-item--hijo)::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  border-radius: 2px;
  background: var(--se-verde);
}

/* ---------- 3 · Tipografía ---------- */

.pagina__titulo, .ruta__hola, .ruta__ahora h2 {
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
}
.hoja :is(h2, h3) { letter-spacing: -.02em; }

/* ---------- 4 · La cabecera de cada sección ----------
   Antes, un panel con halo verde, rejilla y un brillo que respiraba.
   Ahora la tipografía flota sobre el negro; el ejemplo de la derecha
   se queda, sin marco. */

[data-tema="oscuro"] .banner {
  min-height: 0;
  padding: 18px 0 30px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  overflow: visible;
}
.banner__fondo { display: none; }
.banner__rotulo {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: 600 11px/1.2 var(--se-fuente) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--tp-chispa) !important;
}
.banner__rotulo i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 0 !important;
  background: currentColor !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: none !important;
}
[data-tema="oscuro"] .banner .pagina__titulo {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.02;
}
.banner .pagina__titulo svg { display: none; }
[data-tema="oscuro"] .banner .pagina__bajada { font-size: 16px; font-weight: 300; color: #bdbdbd; }
[data-tema="oscuro"] .banner__puntos li {
  height: auto;
  padding: 0 14px 0 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
}
.banner__ejemplo { background: rgba(0, 0, 0, .8) !important; }

/* ---------- 5 · Superficies ---------- */

/* Las tarjetas se separan por un hilo, no por sombra ni degradado */
[data-tema="oscuro"] :is(.tarjeta, .card, .panel, .caja, .herramienta, .cifra, .stat, .inicio-cifra, .ruta) {
  box-shadow: none;
}
[data-tema="oscuro"] .ruta {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .07);
}
[data-tema="oscuro"] .ruta__fondo { opacity: .35; }
.ruta__eyebrow {
  font-family: var(--se-fuente) !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  color: var(--tp-chispa) !important;
}
.ruta__eyebrow i { background: currentColor !important; box-shadow: none !important; border-radius: 0 !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Lo que se puede pulsar responde: sube un pelo y el hilo se enciende */
[data-tema="oscuro"] :is(a, button):is(.tarjeta, .herramienta, .card, .inicio-herramienta, .ref-tarjeta) {
  transition: transform .5s var(--tp-salida), border-color .3s ease, background-color .3s ease;
}
[data-tema="oscuro"] :is(a, button):is(.tarjeta, .herramienta, .card, .inicio-herramienta, .ref-tarjeta):hover {
  transform: translateY(-2px);
  border-color: rgba(20, 195, 154, .45);
}

/* Campos: negro, hilo fino y el verde al enfocar */
[data-tema="oscuro"] :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"]) {
  background-color: #070707;
  border-color: rgba(255, 255, 255, .12);
}
[data-tema="oscuro"] :is(input, select, textarea):focus {
  border-color: #14c39a;
  box-shadow: 0 0 0 4px rgba(20, 195, 154, .14);
}

/* El chip de créditos y el del referente, en píldora fina */
[data-tema="oscuro"] .ref-chip { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- 6 · Movimiento ---------- */

/* Cada vista entra con un fundido corto desde abajo */
/* backwards, no both: si la animación se queda «puesta» al acabar, el contenido
   pasa a ser el marco de las ventanas fijas (position: fixed) que lleva dentro,
   y la del vídeo de la biblioteca se salía de la pantalla. */
.hoja__contenido > * { animation: tp-entra .7s var(--tp-salida) backwards; }
.hoja__contenido > :nth-child(2) { animation-delay: .06s; }
.hoja__contenido > :nth-child(3) { animation-delay: .12s; }
.hoja__contenido > :nth-child(n+4) { animation-delay: .18s; }
@keyframes tp-entra { from { opacity: 0; transform: translateY(14px); } }


@media (prefers-reduced-motion: reduce) {
  .hoja__contenido > * { animation: none; }
}

/* ---------- 7 · Cabeceras propias de sección (motor de imagen) ---------- */

[data-tema="oscuro"] .mt-hero {
  padding: 18px 0 30px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.mt-hero__rotulo {
  font: 600 11px/1.2 var(--se-fuente) !important;
  letter-spacing: .14em !important;
  color: var(--tp-chispa) !important;
}
.mt-hero__rotulo i { border-radius: 0 !important; box-shadow: none !important; background: currentColor !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 7px !important; height: 7px !important; }
.mt-hero__titulo { font-weight: 400 !important; letter-spacing: -.04em !important; font-size: clamp(34px, 3.8vw, 54px) !important; }
.mt-hero__titulo svg { display: none; }
[data-tema="oscuro"] .mt-hero__pasos li { background: transparent; }

/* ---------- 8 · A juego con la portada futurista ---------- */

/* Rótulos de interfaz en monoespaciada, como en la portada */
.banner__rotulo, .mt-hero__rotulo, .ruta__eyebrow {
  font-family: "Geist Mono", var(--se-fuente-mono) !important;
  font-weight: 500 !important;
  color: var(--se-verde-tinta) !important;
}
.banner__rotulo i, .mt-hero__rotulo i, .ruta__eyebrow i {
  clip-path: none !important; border-radius: 50% !important;
  box-shadow: 0 0 10px currentColor !important;
}
.pagina__titulo, .ruta__hola, .ruta__ahora h2, .mt-hero__titulo { font-weight: 500 !important; letter-spacing: -.05em !important; }

/* El botón principal brilla como en la portada */
[data-tema="oscuro"] :is(.btn--primario, .ficha__btn--clonar, .acceso__enviar) {
  box-shadow: 0 0 0 1px rgba(95, 245, 207, .45) inset, 0 10px 34px -10px rgba(20, 195, 154, .7);
}
[data-tema="oscuro"] :is(.btn--primario, .ficha__btn--clonar, .acceso__enviar):hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset, 0 14px 44px -8px rgba(20, 195, 154, .9);
}

/* La sección activa del menú, con su marca de luz */
[data-tema="oscuro"] .nav-item.es-activo:not(.nav-item--hijo)::after { box-shadow: 0 0 12px #14c39a; }
[data-tema="oscuro"] .nav-item.es-activo .nav-item__icono { filter: drop-shadow(0 0 6px rgba(20, 195, 154, .8)); }

/* La tarjeta del camino en el inicio: cristal con filo de luz */
[data-tema="oscuro"] .ruta {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 120px -60px rgba(20, 195, 154, .45);
}

/* ---------- 9 · Tipografía a juego con la portada ----------
   Titulares en Inter Tight; el énfasis en Instrument Serif cursiva. */
.pagina__titulo, .ruta__hola, .ruta__ahora h2, .mt-hero__titulo, .hoja h2 {
  font-family: "Inter Tight", var(--se-fuente-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.04em !important;
}
.pagina__titulo em, .ruta__hola em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--se-verde-tinta); }

/* ---------- 10 · Roger IA con su cara ----------
   El avatar de Roger (assets/img/roger-ia.webp, hecho en Higgsfield a partir
   de su foto) sustituye a la «R» en el chat y en el banner. */
.roger-avatar {
  background: url("../img/roger-ia.webp") center / cover no-repeat !important;
  color: transparent !important;
  box-shadow: 0 0 0 2px #14c39a, 0 0 14px rgba(20, 195, 154, .5) !important;
}
.bn-inicial--foto { width: 34px !important; height: 34px !important; flex: none; border-radius: 50%; object-fit: cover; padding: 0 !important; background: none !important; box-shadow: 0 0 0 2px #14c39a; }
.roger-vacio__cara { display: block; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #14c39a, 0 0 40px -6px rgba(20, 195, 154, .8); }

/* ---------- 11 · El interior con el lenguaje de la portada ----------
   Lo mismo que se ve antes de entrar: negro con un aura verde muy tenue,
   paneles de cristal con filo de luz y un foco que sigue al ratón,
   botones con volumen y titulares con la última palabra en cursiva.
   Va con `html[data-tema="oscuro"]` delante para ganar a botones.css. */

/* El aura: dos manchas de luz muy suaves, fijas detrás del contenido */
html[data-tema="oscuro"] .hoja {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(20, 195, 154, .085), transparent 70%),
    radial-gradient(700px 480px at -6% 104%, rgba(20, 195, 154, .05), transparent 70%),
    #000;
  background-attachment: fixed;
}

/* Paneles de cristal: un hilo, un filo de luz arriba y el foco del ratón */
html[data-tema="oscuro"] :is(
  .ini-panel, .ini-herr, .rf-puerta, .cl-card, .mt-tarjeta, .crea.vs, .cr-plan, .cr-gasta, .cr-tabla-caja,
  .ref-caja, .ref-cifra, .perfil-caja, .marco-portada, .marco-terreno, .mt-ejemplo, .vacio, .biblio__vacio
) {
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(420px circle at var(--tp-mx, -999px) var(--tp-my, -999px), rgba(20, 195, 154, .09), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .008) 60%),
    #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
/* Lo que se pulsa sube un poco y el hilo se enciende */
html[data-tema="oscuro"] :is(.ini-herr, .rf-puerta, .marco-terreno, .cr-plan, .mt-ejemplo) {
  transition: transform .55s var(--tp-salida), border-color .35s ease, box-shadow .45s ease;
}
html[data-tema="oscuro"] :is(.ini-herr, .rf-puerta, .marco-terreno, .cr-plan, .mt-ejemplo):hover {
  transform: translateY(-3px);
  border-color: rgba(95, 245, 207, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 70px -36px rgba(20, 195, 154, .55);
}
/* El plan destacado y el paso de ahora llevan el borde verde */
html[data-tema="oscuro"] :is(.cr-plan.es-destacado, .ini-herr.es-ahora) {
  border-color: rgba(95, 245, 207, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(20, 195, 154, .12), 0 40px 90px -50px rgba(20, 195, 154, .7);
}
html[data-tema="oscuro"] .cr-plan.es-destacado {
  background:
    radial-gradient(420px circle at var(--tp-mx, -999px) var(--tp-my, -999px), rgba(20, 195, 154, .12), transparent 45%),
    radial-gradient(120% 60% at 50% 0%, rgba(20, 195, 154, .14), transparent 70%),
    #050505;
}

/* Las cajas para soltar fotos: borde de trazos que se enciende */
html[data-tema="oscuro"] :is(.mt-soltar, .vs-hueco) {
  background: radial-gradient(120% 90% at 50% 0%, rgba(20, 195, 154, .06), transparent 70%), #040404;
  border: 1px dashed rgba(255, 255, 255, .16);
  transition: border-color .3s ease, transform .5s var(--tp-salida);
}
html[data-tema="oscuro"] :is(.mt-soltar, .vs-hueco):hover { border-color: rgba(95, 245, 207, .6); }

/* ---------- Botones con volumen, como en la portada ---------- */

html[data-tema="oscuro"] :is(.btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton) {
  color: #02140f;
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) no-repeat -160% 0 / 250% 100%,
    linear-gradient(180deg, #5ff5cf 0%, #14c39a 52%, #0ea583 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .15),
    0 0 0 1px rgba(95, 245, 207, .4), 0 10px 32px -12px rgba(20, 195, 154, .8);
  transition: background-position .9s var(--tp-salida), box-shadow .4s ease, transform .45s var(--tp-salida);
}
html[data-tema="oscuro"] :is(.btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton):hover {
  color: #02140f;
  background-position: 160% 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .15),
    0 0 0 1px rgba(255, 255, 255, .55), 0 16px 44px -10px rgba(20, 195, 154, .95), 0 0 80px -20px rgba(20, 195, 154, .9);
  transform: translateY(-2px);
}
html[data-tema="oscuro"] :is(.btn--primario, .ficha__btn--clonar):active { transform: translateY(0) scale(.97); }

/* Los de contorno pasan a cristal */
html[data-tema="oscuro"] :is(
  .btn--contorno, .ficha__btn:not(.ficha__btn--clonar, .es-abierto, [aria-expanded="true"]),
  .cr-plan:not(.es-destacado) .cr-plan__boton, .tg-atajo, .pf-boton, .marco-portada__guardados
) {
  color: #fff;
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px -16px #000;
  transition: box-shadow .35s ease, transform .45s var(--tp-salida);
}
html[data-tema="oscuro"] :is(
  .btn--contorno, .ficha__btn:not(.ficha__btn--clonar, .es-abierto, [aria-expanded="true"]),
  .cr-plan:not(.es-destacado) .cr-plan__boton, .tg-atajo, .pf-boton, .marco-portada__guardados
):hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(95, 245, 207, .55), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 34px -12px rgba(20, 195, 154, .7);
  transform: translateY(-1px);
}

/* Las pestañas elegidas (crear / clonar, rodar / mis vídeos), con el mismo volumen */
html[data-tema="oscuro"] :is(.crea-pestana.es-activa, .cr-periodo.es-activo) {
  background: linear-gradient(180deg, #5ff5cf 0%, #14c39a 60%, #0ea583 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 20px -8px rgba(20, 195, 154, .8);
}

/* ---------- Cabecera de cada sección ---------- */

/* La última palabra del titular, en cursiva serif y verde (la pone interior.js) */
:is(.pagina__titulo, .mt-hero__titulo, .ini-hero__hola h1) .tp-enfasis {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  padding: 0 .08em .06em 0;
  background: linear-gradient(100deg, #5ff5cf, #14c39a 60%, #c8ffef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root:not([data-tema="oscuro"]) :is(.pagina__titulo, .mt-hero__titulo):not(.banner *) .tp-enfasis { background: linear-gradient(100deg, #0ea583, #0b7a60); -webkit-background-clip: text; background-clip: text; }

/* El titular entra palabra a palabra, como el de la portada */
:is(.pagina__titulo, .mt-hero__titulo) .tp-palabra { display: inline-block; animation: tp-palabra .9s var(--tp-salida) both; animation-delay: calc(var(--n) * 70ms + 60ms); }
@keyframes tp-palabra { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } }

/* Los puntos de la cabecera, en cápsulas finas */
html[data-tema="oscuro"] .banner__puntos { gap: 8px !important; }
html[data-tema="oscuro"] .banner__puntos li {
  padding: 6px 12px 6px 10px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
  color: #d6d6d6 !important;
  animation: tp-entra .7s var(--tp-salida) both;
  animation-delay: calc(var(--n, 0) * 80ms + 350ms);
}
html[data-tema="oscuro"] .banner__puntos li svg { color: #2fd4a8; }

/* La línea bajo la cabecera, con luz que se apaga hacia los lados */
html[data-tema="oscuro"] :is(.banner, .mt-hero) {
  border-bottom: 0 !important;
  background-image: linear-gradient(90deg, transparent, rgba(95, 245, 207, .35) 30%, rgba(255, 255, 255, .12) 60%, transparent) !important;
  background-size: 100% 1px !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
}

/* Planes: la gema del saldo, facetada y flotando (antes giraba y parecía un cuadrado) */
.bn-saldo--gema svg { width: 72px; height: 72px; animation: tp-gema 6s ease-in-out infinite; }
@keyframes tp-gema { 50% { transform: translateY(-6px) rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
  :is(.pagina__titulo, .mt-hero__titulo) .tp-palabra, html[data-tema="oscuro"] .banner__puntos li { animation: none; }
}

/* ---------- 12 · El tema claro, a juego ----------
   Papel limpio en vez de cuadrícula, con el mismo aura verde; tarjetas
   blancas con hilo y sombra suave que se encienden al pasar, y los mismos
   botones con volumen. Las cabeceras siguen oscuras, como la del inicio. */

html:not([data-tema="oscuro"]) .hoja {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(20, 195, 154, .09), transparent 70%),
    radial-gradient(700px 480px at -6% 104%, rgba(20, 195, 154, .05), transparent 70%),
    #f6f7f6;
  background-attachment: fixed;
}
html:not([data-tema="oscuro"]) .hoja::before { display: none; }

html:not([data-tema="oscuro"]) :is(
  .ini-panel, .ini-herr, .rf-puerta, .cl-card, .mt-tarjeta, .crea.vs, .cr-plan, .cr-gasta, .cr-tabla-caja,
  .ref-caja, .ref-cifra, .perfil-caja, .marco-portada, .marco-terreno, .mt-ejemplo, .vacio, .biblio__vacio
) {
  border: 1px solid rgba(16, 24, 26, .08);
  background:
    radial-gradient(420px circle at var(--tp-mx, -999px) var(--tp-my, -999px), rgba(20, 195, 154, .08), transparent 45%),
    #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(16, 24, 26, .04), 0 18px 40px -28px rgba(16, 24, 26, .25);
}
html:not([data-tema="oscuro"]) :is(.ini-herr, .rf-puerta, .marco-terreno, .cr-plan, .mt-ejemplo) {
  transition: transform .55s var(--tp-salida), border-color .35s ease, box-shadow .45s ease;
}
html:not([data-tema="oscuro"]) :is(.ini-herr, .rf-puerta, .marco-terreno, .cr-plan, .mt-ejemplo):hover {
  transform: translateY(-3px);
  border-color: rgba(20, 195, 154, .45);
  box-shadow: 0 1px 2px rgba(16, 24, 26, .04), 0 26px 50px -26px rgba(14, 143, 113, .45);
}
html:not([data-tema="oscuro"]) :is(.cr-plan.es-destacado, .ini-herr.es-ahora) {
  border-color: rgba(20, 195, 154, .55);
  box-shadow: 0 0 0 3px rgba(20, 195, 154, .1), 0 26px 50px -26px rgba(14, 143, 113, .45);
}

/* Botones: el mismo volumen que en oscuro */
html:not([data-tema="oscuro"]) :is(.btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton) {
  color: #02140f;
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat -160% 0 / 250% 100%,
    linear-gradient(180deg, #5ff5cf 0%, #14c39a 52%, #0ea583 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 8px 22px -10px rgba(14, 143, 113, .7);
  transition: background-position .9s var(--tp-salida), box-shadow .4s ease, transform .45s var(--tp-salida);
}
html:not([data-tema="oscuro"]) :is(.btn--primario, .ficha__btn--clonar, .marco-plan__copiar, .es-destacado .cr-plan__boton):hover {
  color: #02140f;
  background-position: 160% 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 0 0 4px rgba(20, 195, 154, .16), 0 14px 30px -10px rgba(14, 143, 113, .75);
  transform: translateY(-2px);
}
html:not([data-tema="oscuro"]) :is(.btn--contorno, .cr-plan:not(.es-destacado) .cr-plan__boton, .marco-portada__guardados) {
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, .06);
}
html:not([data-tema="oscuro"]) :is(.btn--contorno, .cr-plan:not(.es-destacado) .cr-plan__boton, .marco-portada__guardados):hover {
  border-color: rgba(20, 195, 154, .7) !important;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(20, 195, 154, .12);
}

/* ---------- 13 · Roger IA: lo que hace, en tres tarjetas ---------- */

.roger-pronto {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(20, 195, 154, .2), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(20, 195, 154, .08), transparent 60%),
    #070808;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -50px rgba(0, 0, 0, .8);
}
.roger-pronto__cabeza { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; max-width: 860px; }
.roger-pronto__cara { position: relative; width: 112px; height: 112px; }
.roger-pronto__cara img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px #070808, 0 0 0 4px rgba(95, 245, 207, .7), 0 0 50px -6px rgba(20, 195, 154, .8);
}
.roger-pronto__cara::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px dashed rgba(95, 245, 207, .35); animation: bn-gira 28s linear infinite;
}
.roger-pronto__en-linea {
  position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: #14c39a; box-shadow: 0 0 0 3px #070808, 0 0 12px #14c39a;
  animation: tp-latido 2.4s ease-in-out infinite;
}
@keyframes tp-latido { 50% { box-shadow: 0 0 0 3px #070808, 0 0 0 7px rgba(20, 195, 154, .25), 0 0 16px #14c39a; } }
.roger-pronto__rotulo {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 500 11px/1.2 "Geist Mono", var(--se-fuente-mono); letter-spacing: .14em; text-transform: uppercase; color: #2fd4a8;
}
.roger-pronto__rotulo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.roger-pronto__titulo {
  margin: 0; font: 600 clamp(26px, 2.8vw, 38px)/1.05 "Inter Tight", var(--se-fuente-display); letter-spacing: -.04em; color: #fff;
}
.roger-pronto__titulo em {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400; padding-right: .08em;
  background: linear-gradient(100deg, #5ff5cf, #14c39a 60%, #c8ffef); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roger-pronto__texto { margin: 12px 0 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: #bdbdbd; }

.roger-pronto__tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.roger-pronto__tarjeta {
  display: flex; flex-direction: column; padding: 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: tp-entra .8s var(--tp-salida) both; animation-delay: calc(var(--n) * 110ms + 200ms);
  transition: transform .55s var(--tp-salida), box-shadow .4s ease;
}
.roger-pronto__tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(95, 245, 207, .4), inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(20, 195, 154, .55); }
.roger-pronto__icono {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #5ff5cf;
  background: rgba(20, 195, 154, .12); box-shadow: inset 0 0 0 1px rgba(95, 245, 207, .25);
}
.roger-pronto__icono svg { width: 19px; height: 19px; }
.roger-pronto__tarjeta h3 { margin: 16px 0 6px; font: 600 17px/1.2 "Inter Tight", var(--se-fuente-display); letter-spacing: -.02em; color: #fff; }
.roger-pronto__tarjeta > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #a9a9a9; }

.roger-pronto__demo {
  margin-top: auto; padding-top: 18px;
}
.roger-pronto__demo--chat { display: grid; gap: 8px; }
.roger-pronto__demo--chat p { margin: 0; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.roger-pronto__demo--chat .es-tu { justify-self: end; color: #02140f; background: linear-gradient(180deg, #5ff5cf, #14c39a); border-bottom-right-radius: 4px; }
.roger-pronto__demo--chat .es-roger { display: flex; gap: 8px; align-items: flex-start; color: #e8e8e8; background: rgba(255, 255, 255, .06); border-bottom-left-radius: 4px; }
.roger-pronto__demo--chat .es-roger img { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #14c39a; }
.roger-pronto__paso { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.roger-pronto__paso b { font: 500 12px/1.3 "Geist Mono", var(--se-fuente-mono); color: #5ff5cf; }
.roger-pronto__paso span { color: #e8e8e8; text-align: right; }
.roger-pronto__barra { height: 6px; margin-top: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.roger-pronto__barra i {
  display: block; width: var(--p); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #0ea583, #5ff5cf); box-shadow: 0 0 12px rgba(20, 195, 154, .8);
  transform-origin: left; animation: tp-barra 1.6s var(--tp-salida) .6s both;
}
@keyframes tp-barra { from { transform: scaleX(0); } }
.roger-pronto__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.roger-pronto__cifras div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.roger-pronto__cifras small { display: block; font-size: 10.5px; color: #8f8f8f; }
.roger-pronto__cifras b { display: block; margin-top: 3px; font: 500 15px/1.1 "Geist Mono", var(--se-fuente-mono); letter-spacing: -.03em; color: #fff; }

.roger-pronto__nota {
  display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 9px 16px 9px 12px;
  border-radius: 999px; font-size: 13px; color: #d6d6d6;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.roger-pronto__nota i { width: 8px; height: 8px; border-radius: 50%; background: #ecb94f; box-shadow: 0 0 10px #ecb94f; }

@media (max-width: 900px) {
  .roger-pronto__tarjetas { grid-template-columns: 1fr; }
  .roger-pronto__cabeza { grid-template-columns: 1fr; gap: 18px; }
  .roger-pronto__cara { width: 84px; height: 84px; }
}

/* Las burbujas del banner de Roger, de cristal */
.banner--roger .bn-burbuja {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), rgba(10, 12, 12, .85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 50px -24px rgba(0, 0, 0, .9);
  color: #ececec;
}
.banner--roger .bn-burbuja--tu {
  color: #02140f;
  background: linear-gradient(180deg, #5ff5cf, #14c39a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 40px -16px rgba(20, 195, 154, .8);
  border-bottom-right-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .roger-pronto__tarjeta, .roger-pronto__barra i, .roger-pronto__en-linea, .roger-pronto__cara::before { animation: none; }
}