/* GENERADO por 5 herramientas/generar-tema-teal.py desde app8-lujo.css — NO SE EDITA A MANO.
   Es la misma hoja con la tinta cambiada por teal (45 colores traducidos); cada regla
   traducida lleva su gemela oscura para lo que va sobre la foto ([data-pz-foto]). Lo que
   el teal necesita de más va a mano en su archivo de ajustes. */
/* ═══════════════════════════════════════════════════════════════════════════
   PERLA · PRESENTACIONES Y LANDINGS (app8) — LA LÍNEA DE LUJO, MOLDE ARIA (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   Refresco PRISMA, sólo visual: las funciones, los ids y los eventos no cambian. Es el molde
   de ARIA (app-agentecotizador/public/aria-lujo.css) para una app sin menú a la izquierda:
     · la barra `header.cab-marca` sobre la foto, con el logo, la pastilla del usuario y los
       botones redondos (el del tema es el modelo: círculo de tinta, filete crema, 2,1 rem);
     · una portada con carrusel en cada lista (Presentaciones y Landings), con las pestañas
       en vidrio sobre la foto;
     · los dos constructores como mesas de trabajo: la barra de herramientas en círculos, las
       columnas en tinta y el lienzo —el contenido del cliente— tal cual lo pinta su motor.
   Todo dentro del libro de marca: tinta #1A2633, deep #005565, teal #006D82, salvia #7D9B5B
   (sólo relleno), crema #EADFCE y blanco; ocre #8A6A2F y rojo #B3261E sólo de relleno. Sin
   negrita, nada brilla ni se levanta, una sola sombra (la del modal), velo de foto hasta 45 %.
   Letra: Marcellus en los títulos y Figtree en todo lo demás.

   LO QUE NO SE TOCA: las diapositivas (`.tn-deck-root`, el motor de la maestra, igual en el
   editor, en la miniatura y en el visor público), la vista previa de la landing (su propio
   documento, en el iframe) y la muestra de cada plantilla. Son el trabajo del cliente.

   Esta hoja es la del tema oscuro. El teal es ella misma traducida (app8-lujo-teal.css, de
   5 herramientas/generar-tema-teal.py) y el claro, su gemela (app8-tema-claro.css, de
   generar-tema-claro.py) más los ajustes a mano. Lo que va sobre la foto (la barra y las
   portadas) lleva `data-pz-foto` y sus colores escritos a mano: no cambia con el tema.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --c-tinta:#046477; --c-hondo:#03505f; --c-hoja:#005565; --c-campo:#0b6576;
  --c-salvia:#b7cc9a; --c-crema:#EADFCE; --c-crema70:rgba(255,255,255,.86); --c-filete:rgba(234,223,206,.16);
  --c-filete-s:rgba(234,223,206,.09); --c-glare:Marcellus, 'PP Fragment Glare', Georgia, serif;
  --c-sans:Figtree, 'PP Fragment Sans', system-ui, sans-serif; --c-sombra:0 30px 70px -18px rgba(4,100,119,.62); }
:root:where([data-pz-foto]){--c-tinta:#1A2633;--c-hondo:#141D27;--c-hoja:#222E3A;--c-campo:#2A3541;--c-salvia:#7D9B5B;--c-crema70:rgba(234,223,206,.70);--c-sombra:0 30px 70px -18px rgba(26,38,51,.62)}
:root :where([data-pz-foto]){--c-tinta:#1A2633;--c-hondo:#141D27;--c-hoja:#222E3A;--c-campo:#2A3541;--c-salvia:#7D9B5B;--c-crema70:rgba(234,223,206,.70);--c-sombra:0 30px 70px -18px rgba(26,38,51,.62)}

/* LO QUE VA SOBRE LA FOTO LLEVA LAS VARIABLES DEL OSCURO (la tercera de las cuatro capas de
   reference-tema-sobre-foto): los temas las cambian en la raíz y heredarían hasta acá. */
[data-pz-foto], [data-pz-foto] *{ --c-tinta:#1A2633; --c-hondo:#141D27; --c-hoja:#222E3A; --c-campo:#2A3541; --c-salvia:#7D9B5B;
  --c-crema:#EADFCE; --c-crema70:rgba(234,223,206,.70); --c-filete:rgba(234,223,206,.16); --c-filete-s:rgba(234,223,206,.09); }

/* ── 1 · EL SUELO, LA LETRA Y EL PESO ────────────────────────────────────── */
html.a8-lujo body{ background:var(--c-tinta); color:var(--c-crema); font-family:var(--c-sans); -webkit-tap-highlight-color:transparent; }
html.a8-lujo body :not(.tn-deck-root *):not(.template-card-preview){ font-weight:400 !important; font-style:normal !important; }
html.a8-lujo :is(h1, h2, h3, h4, .font-display):not(.tn-deck-root *){ font-family:var(--c-glare) !important; letter-spacing:.01em !important; }
html.a8-lujo:not([data-tema="claro"]){ color-scheme:dark; }
html.a8-lujo ::selection{ background-color:#006d82; color:#FFFFFF; }
html.a8-lujo :where([data-pz-foto])::selection{background-color:#005565}
/* SIN BARRAS DE DESPLAZAMIENTO (Luis, 2026-09-29: «es obvio que hay un scroll, no hace falta
   mostrar esa barra; el scroll tiene que funcionar, pero la barra tiene que desaparecer»). Se
   desplaza igual, con la rueda, el panel táctil, el dedo o el teclado. */
html.a8-lujo, html.a8-lujo *{ scrollbar-width:none; }
html.a8-lujo ::-webkit-scrollbar{ width:0; height:0; display:none; }
html.a8-lujo #main-app{ background:var(--c-tinta); }

/* Las vistas: cada una entra con un fundido, sin subir (nada se levanta). */
.view-section{ display:none; animation:a8Entra .32s ease; }
.view-section.active{ display:flex; flex-direction:column; }
@keyframes a8Entra{ from{ opacity:0; } to{ opacity:1; } }
/* ENTRE LAS DOS LISTAS NO HAY BRINCO (Luis, 2026-09-29): la vista no entra con fundido —la
   portada y el interruptor tienen que quedarse quietos—; se funden sólo las tarjetas y, en la
   portada, lo que cambia de una lista a la otra (el título, la cifra y los botones propios).
   La foto pasa sola a la siguiente (app8-lujo.js §2). */
.a8-vista.view-section{ animation:none; }
.a8-vista.active .a8-cuerpo{ animation:a8Entra .32s ease; }
.a8-cambio .a8-portada__tit, .a8-cambio .a8-portada__acc > :not(.a8-portada__pestanas){ animation:a8Entra .36s ease; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 2 · LO QUE TAILWIND NO PINTA (la capa general de ARIA, CAMPO y RAÍCES) ── */
/* lo que era blanco es la hoja: tinta un paso más clara */
html.a8-lujo .bg-white.bg-white:not(.pl-pantalla *):not(.tn-deck-root *){ background-color:var(--c-hoja); }
html.a8-lujo :is([class^="bg-white/"], [class*=" bg-white/"]):not(.pl-pantalla *){ background-color:rgba(234,223,206,.05) !important; }
html.a8-lujo :is([class^="hover:bg-white/"], [class*=" hover:bg-white/"]):hover{ background-color:rgba(234,223,206,.10) !important; }
html.a8-lujo :is([class^="border-white/"], [class*=" border-white/"]){ border-color:var(--c-filete) !important; }
html.a8-lujo :is([class^="bg-black/"], [class*=" bg-black/"]):not(.media-item *):not(#lp-fotos *){ background-color:rgba(3,80,95,.55) !important; }
html.a8-lujo :is([class^="bg-black/"], [class*=" bg-black/"]):not(.media-item *):not(#lp-fotos *):where([data-pz-foto]){background-color:rgba(20,29,39,.55) !important}
/* una sola sombra en el producto, la del modal */
html.a8-lujo :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl):not(.tn-deck-root *){ box-shadow:none !important; }
html.a8-lujo :is(.hover\:scale-105, .active\:scale-95, .active\:scale-\[0\.98\]):not(.tn-deck-root *){ transform:none !important; }
/* los campos: la hoja un paso más clara; el foco con anillo doble */
html.a8-lujo body input:not(.pl-pantalla *):not(.a8-portada__buscar):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(.border-0):not(.bg-transparent),
html.a8-lujo body textarea:not(.pl-pantalla *):not(.border-0):not(.bg-transparent),
html.a8-lujo body select:not(.pl-pantalla *):not(.border-0):not(.bg-transparent){
  background-color:var(--c-campo) !important; color:var(--c-crema) !important; border:1px solid var(--c-filete) !important; border-radius:9px !important; box-shadow:none !important; }
html.a8-lujo body :is(input, textarea, select, button):not(.pl-pantalla *):focus-visible{
  outline:2px solid #006D82 !important; outline-offset:0; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; }
html.a8-lujo select option{ background-color:var(--c-hoja); color:var(--c-crema); }
html.a8-lujo :is(input, textarea)::placeholder{ color:rgba(255,255,255,.86) !important; opacity:.75; }
html.a8-lujo :is(input, textarea):where([data-pz-foto])::placeholder{color:rgba(234,223,206,.70) !important}
html.a8-lujo :is(input[type=checkbox], input[type=radio]){ accent-color:#006d82; }
html.a8-lujo :is(input[type=checkbox], input[type=radio]):where([data-pz-foto]){accent-color:#005565}
html.a8-lujo input[type="file"]::file-selector-button{ background-color:#006d82; color:#FFFFFF; border:0; border-radius:99px; padding:.35rem .8rem; }
html.a8-lujo input[type="file"]::file-selector-button:where([data-pz-foto]){background-color:#005565}
html.a8-lujo input[type=color]{ border-color:var(--c-filete) !important; background-color:var(--c-campo) !important; }
html.a8-lujo code{ background:rgba(234,223,206,.08) !important; color:var(--c-crema); border-radius:6px; }
/* los colores propios de la app son el libro: como relleno se quedan; como letra sobre tinta
   el teal no se lee (2,56:1) y la salvia es sólo relleno, así que van en crema */
html.a8-lujo .bg-tnteal:not(.tn-deck-root *){ background-color:#006d82 !important; color:#FFFFFF !important; }
html.a8-lujo .bg-tnteal:not(.tn-deck-root *):where([data-pz-foto]){background-color:#005565 !important}
html.a8-lujo .hover\:bg-tntealdeep:hover, html.a8-lujo .bg-tnteal:hover:not(.tn-deck-root *){ background-color:#006D82 !important; }
html.a8-lujo .bg-tntealdeep{ background-color:#006d82 !important; color:#FFFFFF !important; }
html.a8-lujo .bg-tntealdeep:where([data-pz-foto]){background-color:#005565 !important}
html.a8-lujo :is(.text-tnteal, .text-tntealdeep, .text-tnsage, .hover\:text-tnteal:hover, .hover\:text-tntealdeep:hover):not(.tn-deck-root *){ color:var(--c-crema) !important; }
html.a8-lujo :is(.text-tnteal, .text-tnsage).material-icons-outlined{ color:var(--c-crema70) !important; }
html.a8-lujo :is(.bg-tnteal\/5, .bg-tnteal\/10, .hover\:bg-tnteal\/5:hover, .hover\:bg-tnteal\/10:hover){ background-color:rgba(0,109,130,.20) !important; }
html.a8-lujo :is(.border-tnteal\/40, .border-tnteal\/50, .hover\:border-tnteal:hover){ border-color:rgba(0,109,130,.75) !important; }
html.a8-lujo .bg-tnsage\/20{ background-color:rgba(125,155,91,.30) !important; }
html.a8-lujo :is(.hover\:text-rose-500, .hover\:text-red-400, .hover\:text-red-300, .hover\:text-red-600):hover{ color:#FFFFFF !important; background-color:#B3261E !important; }
/* los tonos 300–500 de las rampas son relleno, nunca letra (ARIA §13): sobre tinta se leen en
   crema. El rojo de «eliminar» del inspector daba 2,1:1 y además es sólo de relleno: se enciende
   en rojo al pasar, como relleno. */
html.a8-lujo :is([class*="text-red-3"], [class*="text-red-4"], [class*="text-red-5"], [class*="text-rose-4"], [class*="text-rose-5"],
  [class*="text-amber-3"], [class*="text-amber-4"], [class*="text-amber-5"], [class*="text-emerald-4"], [class*="text-emerald-5"],
  [class*="text-teal-4"], [class*="text-teal-5"], [class*="text-sky-4"], [class*="text-sky-5"]):not(.tn-deck-root *){ color:var(--c-crema) !important; }
/* los neutros claros usados como letra (los de la mesa oscura de antes) */
html.a8-lujo :is(.text-slate-200, .text-slate-300):not(.tn-deck-root *){ color:var(--c-crema) !important; }
html.a8-lujo .text-white\/70, html.a8-lujo .text-white\/60{ color:var(--c-crema70); }

/* ── 3 · EL LOGIN (la estructura es la de prisma-login.css) ──────────────────
   PERLA · Presentaciones. El amanecer sobre la cordillera de Talamanca, fijo y exclusivo de
   esta app (Luis, 2026-09-25). El botón sale de la foto: el cielo teal, la cordillera deep, el verde del
   bosque y el sol que asoma, que sube despacio como el amanecer. */
#login-screen{ background-image:url('fotos/1551430872-6b11a04a2be1.webp') !important; background-size:cover !important; background-position:center center !important; }
#login-screen > .pl-velo{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(26,38,51,.18) 0%, rgba(26,38,51,.18) 45%, rgba(26,38,51,.45) 100%); }
html:not(#_):not(#_) .pl-caja[data-pl="perla"]{ --pl-grad:linear-gradient(180deg, #006D82 0%, #006d82 30%, #4F6749 58%, #8A6A2F 78%, #006d82 100%);
  --pl-tam:100% 320%; --pl-mov:plAmanecer 10s ease-in-out infinite alternate; }
html:not(#_):not(#_) .pl-caja[data-pl="perla"]:where([data-pz-foto]){--pl-grad:linear-gradient(180deg, #006D82 0%, #005565 30%, #4F6749 58%, #8A6A2F 78%, #005565 100%)}
html:not(#_):not(#_) .pl-caja[data-pl="perla"] :where([data-pz-foto]){--pl-grad:linear-gradient(180deg, #006D82 0%, #005565 30%, #4F6749 58%, #8A6A2F 78%, #005565 100%)}
@keyframes plAmanecer{ from{ background-position:50% 100%; } to{ background-position:50% 0%; } }
#login-temp-change-section{ display:flex; flex-direction:column; gap:12px; }
#login-temp-change-section.hidden{ display:none; }

/* ── 4 · LA BARRA DE ARRIBA: EL LOGO, EL TEMA Y LA PASTILLA DEL USUARIO ──────
   Es la de ARIA (`header.cab-marca`). En las listas va siempre sobre la foto de la portada,
   que se achica pero no se va (§5); en los constructores es sólida. `data-pz-foto`: nada de
   esto cambia con el tema; lo único que cambia es el color de la barra sólida
   (app8-tema-claro-ajustes.css y app8-tema-teal.css). */
html.a8-lujo header.cab-marca{ position:relative; z-index:30; flex:none; padding:8px 22px; color:#EADFCE;
  background-color:rgba(26,38,51,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(234,223,206,.10); transition:background-color .35s ease, border-color .35s ease; }
html.a8-lujo header.cab-marca.cab-sobre-foto{ background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
/* en las dos listas la barra va ENCIMA de la portada: la foto sube detrás de ella */
html.a8-lujo #main-app:has(> #view-dashboard.active, > #view-landings.active) > header.cab-marca{ position:absolute; top:0; left:0; right:0; }
html.a8-lujo .cab-marca__fila{ display:flex; align-items:center; gap:14px; min-height:2.6rem; }
/* EL LOGO, MÁS GRANDE SIN MOVER NADA (Luis, 2026-09-29: «se ve muy pequeño… hay suficiente
   espacio»): 46 px en la misma barra de 62 (ARIA lleva 56 en una de 66). */
html.a8-lujo header.cab-marca img.logo-marca{ display:block; height:46px; width:auto; flex:none; }
/* sobre la foto el logo lleva una sombra de tinta doble —cerca, para el borde de las letras;
   lejos, para despegarlo— y se lee sobre cualquier imagen, también un bosque claro (Luis,
   2026-09-29: «dale más contraste a títulos y logo»). */
html.a8-lujo header.cab-marca.cab-sobre-foto img.logo-marca{ filter:drop-shadow(0 1px 2px rgba(10,16,22,.7)) drop-shadow(0 2px 14px rgba(10,16,22,.6)); }
html.a8-lujo .cab-marca__nombre{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
html.a8-lujo .cab-marca__acc{ margin-left:auto; display:flex; align-items:center; gap:10px; }
html.a8-lujo .cab-marca__tema{ display:inline-flex; }
/* EL CÍRCULO DEL TEMA ES EL MODELO (§4.3 del PLAN): tinta al 62 %, filete crema al 34 %, ícono
   blanco de 16 px, 2,1 rem. La pastilla del usuario, del mismo alto y con el mismo vidrio. */
html.a8-lujo header.cab-marca :is(.pz-tema-btn, .ses){ height:2.1rem; border-radius:99px; box-sizing:border-box;
  background-color:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); color:#FFFFFF; box-shadow:none;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
html.a8-lujo header.cab-marca .pz-tema-btn{ width:2.1rem; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer;
  transition:background-color 120ms linear, border-color 120ms linear; }
html.a8-lujo header.cab-marca .pz-tema-btn:hover{ background-color:rgba(13,23,32,.75); border-color:#EADFCE; }
html.a8-lujo header.cab-marca .pz-tema-btn .material-icons-outlined{ font-size:16px; line-height:1; color:#FFFFFF; }
/* la pastilla: el disco, el nombre y Salir adentro, como en ARIA y las demás apps. Salir es
   un ícono, sin caja: una caja dentro de la pastilla se leería como otra pieza. */
html.a8-lujo header.cab-marca .ses{ display:inline-flex; align-items:center; gap:8px; padding:0 8px 0 4px; min-width:0; }
html.a8-lujo header.cab-marca .ses__disco{ width:1.55rem; height:1.55rem; border-radius:99px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; background:rgba(0,109,130,.30); border:1px solid rgba(0,109,130,.50); color:#FFFFFF; }
html.a8-lujo header.cab-marca .ses__yo{ font:400 12.5px/1 var(--c-sans); color:#FFFFFF; white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
html.a8-lujo header.cab-marca .ses__salir{ display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; margin-left:2px; padding:0;
  background:none; border:0; border-radius:99px; box-shadow:none; color:rgba(234,223,206,.62); cursor:pointer; transition:color 120ms linear; }
html.a8-lujo header.cab-marca .ses__salir:hover{ color:#FFFFFF; }
html.a8-lujo header.cab-marca .ses__salir .material-icons-outlined{ font-size:16px; line-height:1; }

/* ── 5 · LA PORTADA DE CADA LISTA: UNA FOTO DE COSTA RICA ────────────────────
   Va a sangre, pegada arriba (la barra va encima). Abajo, el título en Marcellus con su ceja
   y, a la derecha, las pestañas y la acción de la vista en vidrio. Las dos capas de foto las
   pone el motor (app8-viaje.js). El velo es el del libro: tinta arriba para la barra, limpia
   al medio y 45 % abajo.

   AL BAJAR SE ACHICA, SIN IRSE (Luis, 2026-09-29: «que se haga pequeño como en las fases de
   ARIA»). Es una lámina de presentación que se recoge: la portada se queda pegada arriba y sólo
   se ve su última franja; la foto sube a la mitad de velocidad (se ve pasar, sin acercarse:
   donde se trabaja no hay zoom), la ceja y la cifra se apagan, el título se reduce hacia su
   esquina y, abajo, una línea crema cuenta cuánto de la lista se lleva recorrido, como la
   barra de avance del visor. Todo lo mueve app8-lujo.js con estas variables:
   --a8-arriba (la parte que se esconde), --a8-p (0 abierta → 1 recogida), --a8-d (cuánto
   recorre), --a8-achica y --a8-bajar (el título) y --a8-avance. En el celular no se recoge:
   pasa de largo y la barra se vuelve sólida.

   EL FUNDIDO: debajo del título hay un tramo propio (--a8-tramo) donde la foto se funde con el
   suelo del tema. La letra nunca queda encima del fundido, así que se lee igual en los tres
   temas; y como la portada recogida termina en ese tramo, las tarjetas se desvanecen en él al
   pasar por debajo. El color del fundido es el del suelo de cada tema (el teal y el claro, en
   sus hojas): es lo único de la portada que cambia de tema, a propósito, como en ARIA. */
.a8-vista{ padding:0 !important; --a8-tramo:72px; }
.a8-portada{ position:sticky; top:var(--a8-arriba, 0px); z-index:5; isolation:isolate; overflow:hidden; flex:none; display:flex; align-items:flex-end;
  min-height:calc(262px + var(--a8-tramo)); padding:96px 40px calc(24px + var(--a8-tramo)); background:#141D27; color:#EADFCE; }
.a8-portada__fotos{ position:absolute; inset:0; z-index:-3; transform:translate3d(0, calc(var(--a8-p, 0) * var(--a8-d, 0px) * .5), 0); }
.a8-portada__foto{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .62s cubic-bezier(.22,.9,.24,1); }
.a8-portada__foto.activa{ opacity:1; }
.a8-portada__velo{ position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,.12) 30%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) calc(100% - var(--a8-tramo))); }
/* y un velo suave sólo detrás de lo que se lee: el logo arriba a la izquierda y el bloque del
   título abajo a la izquierda. La foto sigue entera a la vista; sólo se asienta donde va letra. */
.a8-portada__velo::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 34% 30% at 12% 6%, rgba(26,38,51,.34), rgba(26,38,51,0) 100%),
             radial-gradient(ellipse 46% 52% at 14% calc(100% - var(--a8-tramo) - 40px), rgba(26,38,51,.40), rgba(26,38,51,0) 100%); }
/* un píxel más abajo del borde: con alturas fraccionarias el fondo de la portada asomaba como una raya */
.a8-portada__fundido{ position:absolute; left:0; right:0; bottom:-1px; height:calc(var(--a8-tramo) + 25px); z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,38,51,0) 0%, rgba(26,38,51,.62) 42%, rgba(26,38,51,.92) 74%, #1A2633 100%); }
.a8-portada__avance{ position:absolute; left:40px; right:40px; bottom:calc(var(--a8-tramo) - 1px); height:1px; pointer-events:none; opacity:var(--a8-p, 0);
  background:linear-gradient(90deg, rgba(255,255,255,.85) calc(var(--a8-avance, 0) * 100%), rgba(255,255,255,.18) 0); }
.a8-portada__lugar{ position:absolute; right:40px; top:82px; font:400 9.5px/1 var(--c-sans); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.80);
  opacity:calc(1 - var(--a8-p, 0) * 2.4); }
.a8-portada__lugar:empty{ display:none; }
.a8-portada__lugar{ text-align:right; max-width:min(60%, 460px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(13,23,32,.75), 0 0 2px rgba(13,23,32,.5); }   /* se lee también sobre espuma o cielo claro */
.a8-portada__in{ width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; }
.a8-portada__tit{ min-width:0; transform:translate3d(0, calc(var(--a8-p, 0) * var(--a8-bajar, 0px)), 0); }
.a8-portada__ceja{ display:block; margin-bottom:.7rem; font:400 .66rem/1.2 var(--c-sans); letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(10,16,22,.65), 0 1px 12px rgba(10,16,22,.6);
  opacity:calc(1 - var(--a8-p, 0) * 2.2); }
html.a8-lujo .a8-portada h1, html.a8-lujo .a8-portada h2{ margin:0; font-family:var(--c-glare) !important; font-size:clamp(2.1rem, 3.2vw, 3rem) !important; line-height:1.05 !important;
  letter-spacing:-.005em !important; color:#FFFFFF !important; transform-origin:left bottom; transform:scale(calc(1 - var(--a8-p, 0) * var(--a8-achica, 0)));
  text-shadow:0 1px 2px rgba(10,16,22,.5), 0 2px 18px rgba(10,16,22,.6), 0 0 40px rgba(10,16,22,.35); }
.a8-portada__cifra{ margin:.75rem 0 0; font:400 .72rem/1.3 var(--c-sans); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(10,16,22,.65), 0 1px 12px rgba(10,16,22,.6);
  opacity:calc(1 - var(--a8-p, 0) * 2.2); }
.a8-portada__cifra b{ font-family:var(--c-glare); font-size:1.15rem; letter-spacing:.02em; color:#FFFFFF; margin-right:.35rem; text-transform:none; vertical-align:-1px; }
.a8-portada__cifra[hidden]{ display:none; }
.a8-portada__acc{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
/* el interruptor va SIEMPRE al extremo derecho, en las dos listas: lo que es propio de cada una
   (el buscador, «Nueva…») crece hacia la izquierda y el interruptor no se mueve al cambiar */
.a8-portada__acc > .a8-portada__buscar{ order:1; }
.a8-portada__acc > .a8-portada__bt{ order:2; }
.a8-portada__acc > .a8-portada__pestanas{ order:3; }
/* EL INTERRUPTOR DE PRESENTACIONES Y LANDINGS: dos mitades iguales en un riel de vidrio y una
   pastilla crema que se desliza hasta la elegida (al cambiar de lista se la ve cruzar). */
.a8-portada__pestanas{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; align-items:stretch; height:2.6rem; padding:4px; border-radius:99px;
  background:rgba(13,23,32,.62); border:1px solid rgba(234,223,206,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.a8-portada__pestanas::before{ content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:99px; background:#EADFCE;
  transition:transform .5s cubic-bezier(.22,.9,.24,1); }
.a8-portada__pestanas:has(> .tab-a8.active:last-child)::before{ transform:translateX(100%); }
#view-dashboard.active .a8-portada__pestanas::before{ animation:a8PasaIzq .55s cubic-bezier(.22,.9,.24,1); }
#view-landings.active .a8-portada__pestanas::before{ animation:a8PasaDer .55s cubic-bezier(.22,.9,.24,1); }
@keyframes a8PasaIzq{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes a8PasaDer{ from{ transform:translateX(0); } to{ transform:translateX(100%); } }
/* si los permisos dejan una sola lista, el riel es de una sola pieza */
.a8-portada__pestanas:has(> .tab-a8[style*="none"]){ grid-template-columns:1fr; }
.a8-portada__pestanas:has(> .tab-a8[style*="none"])::before{ width:calc(100% - 8px); transform:none; animation:none; }
html.a8-lujo .a8-portada__pestanas .tab-a8{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:auto; padding:0 18px;
  margin:0; border:0; border-radius:99px; background:transparent; font:400 10.5px/1 var(--c-sans); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82); cursor:pointer; white-space:nowrap; transition:color .35s ease; }
html.a8-lujo .a8-portada__pestanas .tab-a8 .material-icons-outlined{ font-size:16px; line-height:1; }
html.a8-lujo .a8-portada__pestanas .tab-a8:hover{ color:#FFFFFF; }
html.a8-lujo .a8-portada__pestanas .tab-a8.active{ color:#1A2633; cursor:default; }
/* la acción de la vista y el buscador, en el mismo vidrio y a la altura del interruptor */
html.a8-lujo .a8-portada__bt{ display:inline-flex; align-items:center; gap:8px; height:2.6rem; padding:0 20px 0 16px; border-radius:99px; cursor:pointer;
  background:rgba(0,85,101,.85); border:1px solid rgba(255,255,255,.34); color:#FFFFFF; font:400 10.5px/1 var(--c-sans); letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background-color 120ms linear, border-color 120ms linear; }
html.a8-lujo .a8-portada__bt:hover{ background:#006D82; border-color:#FFFFFF; }
html.a8-lujo .a8-portada__bt .material-icons-outlined{ font-size:17px; color:#FFFFFF; }
html.a8-lujo .a8-portada input.a8-portada__buscar{ height:2.6rem; width:12.5rem; padding:0 16px 0 38px !important; border-radius:99px !important;
  background:rgba(13,23,32,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") no-repeat 14px 50% / 15px !important;
  border:1px solid rgba(234,223,206,.34) !important; color:#FFFFFF !important; font:400 12.5px/1 var(--c-sans); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
html.a8-lujo .a8-portada input.a8-portada__buscar::placeholder{ color:rgba(255,255,255,.72) !important; opacity:1; }
html.a8-lujo .a8-portada input.a8-portada__buscar:focus{ outline:none !important; border-color:#FFFFFF !important; box-shadow:none !important; }
/* el contenido de la lista, debajo de la portada (el fundido ya hace de aire arriba) */
.a8-cuerpo{ position:relative; z-index:1; padding:8px 40px 48px; }

/* ── 6 · LAS TARJETAS: CADA UNA CON SU PORTADA DE VERDAD ─────────────────────
   Una presentación muestra su primera diapositiva (el mismo motor del editor y del visor) y una
   landing su primera sección (su motor, en un marco a escala). Las dibuja app8-lujo.js cuando
   la tarjeta entra en pantalla; mientras tanto, deep con la estrella. La portada es la cara
   del trabajo del cliente: no cambia con el tema (`data-pz-foto`).
   EL FOCO al pasar (feedback-efectos-hover): en reposo las portadas van apenas apagadas; la que
   se toca cobra vida —el velo se retira y se acerca muy despacio—, las demás se hunden en la
   sombra. Nada se levanta: la tarjeta se queda donde está y sólo se enciende su filete. */
.deck-card{ display:flex; flex-direction:column; background:var(--c-hoja); border:1px solid var(--c-filete-s); border-radius:16px; overflow:hidden;
  transition:border-color .3s ease; }
.deck-card:hover{ border-color:rgba(234,223,206,.34); }
.deck-card-thumb{ aspect-ratio:16/9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #006d82 0%, #046477 78%); transition:filter .5s ease; }
.deck-card-thumb:where([data-pz-foto]){background:linear-gradient(160deg, #005565 0%, #1A2633 78%)}
.deck-card-thumb .deck-card-estrella{ width:46px; height:46px; opacity:.34; transition:opacity .4s ease; }
.deck-card-portada{ position:absolute; inset:0; overflow:hidden; opacity:0; filter:brightness(.9) saturate(.92);
  transition:opacity .6s ease, filter .5s ease, transform 2.6s cubic-bezier(.22,.9,.24,1); }
.deck-card-portada.lista{ opacity:1; }
.deck-card-thumb:has(.deck-card-portada.lista) .deck-card-estrella{ opacity:0; }
.deck-card-portada iframe{ position:absolute; left:0; top:0; width:1280px; height:720px; border:0; transform-origin:0 0; transform:scale(var(--a8-esc, .25)); pointer-events:none; }
.deck-card-portada .tn-slide-wrap{ background:transparent !important; }
.deck-card-velo{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,23,32,.42) 0%, rgba(13,23,32,0) 34%, rgba(13,23,32,0) 66%, rgba(13,23,32,.34) 100%); transition:opacity .5s ease; }
.deck-card:hover .deck-card-portada{ filter:none; transform:scale(1.04); }
.deck-card:hover .deck-card-velo{ opacity:.35; }
:is(#dashboard-grid, #lp-lista):has(> .deck-card:hover) > .deck-card:not(:hover) .deck-card-thumb{ filter:brightness(.58) saturate(.55); }
.deck-card-thumb .status-pill{ position:absolute; top:12px; left:12px; z-index:2; }
.status-pill{ font:400 9.5px/1 var(--c-sans); text-transform:uppercase; letter-spacing:.16em; padding:6px 11px; border-radius:99px; }
.status-Borrador{ background:rgba(2,62,74,.62); color:#FFFFFF; border:1px solid rgba(234,223,206,.34); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.status-Borrador:where([data-pz-foto]){background:rgba(13,23,32,.62)}
.status-Publicada{ background:#7D9B5B; color:#1A2633; }
.deck-card-cuerpo{ flex:1; display:flex; flex-direction:column; padding:18px 20px 18px; }
.deck-card-ceja{ margin:0 0 8px; font:400 9.5px/1.3 var(--c-sans); letter-spacing:.22em; text-transform:uppercase; color:var(--c-crema70);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.a8-lujo .deck-card h3{ margin:0; font-family:var(--c-glare) !important; font-size:1.34rem !important; line-height:1.18 !important; color:#FFFFFF !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deck-card-sub{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--c-crema70); }
.deck-card-meta{ margin:10px 0 0; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.86); }
.deck-card-meta:where([data-pz-foto]){color:rgba(234,223,206,.66)}
.deck-card-acc{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:18px; }
/* la acción de la tarjeta (editar, abrir): deep lleno; lo demás, círculos con filete */
.deck-card-editar{ display:inline-flex; align-items:center; gap:6px; height:2.1rem; padding:0 16px 0 12px; margin-right:auto; border-radius:99px; border:0; cursor:pointer;
  background:#006d82; color:#FFFFFF; font:400 12px/1 var(--c-sans); letter-spacing:.06em; transition:background-color 120ms linear; }
.deck-card-editar:where([data-pz-foto]){background:#005565}
.deck-card-editar:hover{ background:#006D82; }
.deck-card-circ{ width:2.1rem; height:2.1rem; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; cursor:pointer;
  background:transparent; border:1px solid var(--c-filete); color:var(--c-crema); transition:border-color 120ms linear, color 120ms linear, background-color 120ms linear; }
.deck-card-circ:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
.deck-card-circ--borrar:hover{ background:#B3261E; border-color:#B3261E; }
:is(.deck-card-editar, .deck-card-circ) .material-icons-outlined{ font-size:16px; line-height:1; }
/* sin nada que mostrar */
html.a8-lujo #dashboard-empty{ background:transparent !important; border:1px dashed var(--c-filete) !important; border-radius:16px !important; }
html.a8-lujo #dashboard-empty p:first-of-type{ font-family:var(--c-glare); font-size:1.5rem; color:#FFFFFF !important; }
html.a8-lujo #dashboard-empty .material-icons-outlined, html.a8-lujo #lp-lista > .col-span-full .material-icons-outlined{ color:var(--c-crema70) !important; }

/* ── 6 bis · EL CIERRE: LA COSTA, CON EL LOGO (Luis, 2026-09-29) ─────────────
   Al final de cada lista, como cierran el Nido y la bandeja de ARIA: una foto de costa a lo
   ancho que nace del suelo de la página (un solo difuminado, arriba) con el logo encima. La foto
   la elige la sesión `fotos`; hasta que esté aprobada el cierre no se muestra (`hidden`). El
   difuminado muere en el suelo de cada tema (el teal y el claro, en sus hojas); la foto y el
   logo no cambian. */
.a8-cierre{ position:relative; isolation:isolate; overflow:hidden; margin-top:8px; padding:clamp(190px,26vw,340px) 24px clamp(90px,8vw,120px);
  display:flex; align-items:flex-end; justify-content:center; }
.a8-cierre[hidden]{ display:none; }
.a8-cierre__foto{ position:absolute; inset:0; z-index:-2; pointer-events:none; background-size:cover; background-position:center 62%; background-repeat:no-repeat;
  filter:brightness(.62) saturate(.98);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 10%, rgba(0,0,0,.74) 22%, #000 38%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 10%, rgba(0,0,0,.74) 22%, #000 38%, #000 100%); }
.a8-cierre__tinta{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, #046477 0%, rgba(4,100,119,.86) 9%, rgba(4,100,119,.34) 24%, rgba(4,100,119,.12) 40%, rgba(4,100,119,.12) 100%); }
.a8-cierre__tinta:where([data-pz-foto]){background:linear-gradient(180deg, #1A2633 0%, rgba(26,38,51,.86) 9%, rgba(26,38,51,.34) 24%, rgba(26,38,51,.12) 40%, rgba(26,38,51,.12) 100%)}
.a8-cierre__logo{ height:clamp(46px,5.2vw,78px); width:auto; opacity:.94;
  filter:drop-shadow(0 2px 6px rgba(6,12,18,.75)) drop-shadow(0 10px 30px rgba(6,12,18,.55)); }
@media (max-width:640px){ .a8-cierre{ padding-top:clamp(150px,44vw,240px); } }

/* ── 7 · LOS BOTONES DE LA APP: PASTILLAS ────────────────────────────────── */
.insp-action-btn{ width:100%; min-height:2.1rem; padding:0 12px; border-radius:99px; font:400 12px/1.1 var(--c-sans); letter-spacing:.03em; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:background-color 120ms linear, border-color 120ms linear, color 120ms linear;
  border:1px solid transparent; }
html.a8-lujo .insp-action-btn.bg-white\/10, html.a8-lujo .insp-action-btn.bg-white\/5{ background-color:transparent !important; border-color:var(--c-filete) !important; color:var(--c-crema) !important; }
html.a8-lujo .insp-action-btn.bg-white\/10:hover, html.a8-lujo .insp-action-btn.bg-white\/5:hover{ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; background-color:rgba(234,223,206,.05) !important; }
html.a8-lujo .insp-action-btn.bg-red-500\/10{ background-color:transparent !important; border-color:var(--c-filete) !important; color:var(--c-crema70) !important; }
html.a8-lujo .insp-action-btn.bg-red-500\/10:hover{ background-color:#B3261E !important; border-color:#B3261E !important; color:#FFFFFF !important; }
html.a8-lujo .insp-action-btn .material-icons-outlined{ font-size:15px !important; }
/* los botones de Tailwind en los modales y en las columnas: pastillas */
html.a8-lujo :is(.modal-container, #lp-aside-bloques, #lp-aside-props) button:is(.rounded-xl, .rounded-lg):not(.lp-vista-btn):not(.text-left):not(.aspect-square){ border-radius:99px !important; }
html.a8-lujo .modal-container button.bg-tnteal{ padding-left:1.1rem; padding-right:1.1rem; letter-spacing:.08em !important; }

/* ── 8 · EL CONSTRUCTOR DE PRESENTACIONES ────────────────────────────────── */
/* la barra de herramientas: la hoja, y cada herramienta un círculo (como la barra de ARIA:
   «círculos sin texto, también en escritorio»; el nombre va en el globo del ratón). Guardar
   y Publicar llevan su nombre: son las dos acciones que cierran el trabajo. */
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila{ background:var(--c-hoja) !important; background-image:none !important; animation:none !important;
  border-bottom:1px solid var(--c-filete-s) !important; box-shadow:none !important; padding:10px 18px !important; gap:10px !important; color:var(--c-crema) !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button{ height:2.1rem; min-width:2.1rem; padding:0 14px !important; border-radius:99px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; background:transparent !important; border:1px solid var(--c-filete) !important;
  color:var(--c-crema) !important; font:400 12px/1 var(--c-sans) !important; letter-spacing:.04em !important; text-transform:none !important; box-shadow:none !important;
  transition:background-color 120ms linear, border-color 120ms linear, color 120ms linear; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button:hover:not(:disabled){ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button .material-icons-outlined{ font-size:16px !important; line-height:1; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(.tb-sec, #undo-btn, #redo-btn, button[title="Volver"]){ width:2.1rem; padding:0 !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila .tb-lbl{ display:none !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila button:disabled{ opacity:.35; cursor:not-allowed; }
/* lo encendido (En vivo) y la acción principal (Publicar): deep lleno */
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(button.bg-tnteal, #editor-publish-btn.bg-tnsage, #lp-btn-publicar){
  background:#006d82 !important; border-color:#006d82 !important; color:#FFFFFF !important; }
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(button.bg-tnteal, #editor-publish-btn.bg-tnsage, #lp-btn-publicar):where([data-pz-foto]){background:#005565 !important;border-color:#005565 !important}
html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila :is(button.bg-tnteal, #editor-publish-btn.bg-tnsage, #lp-btn-publicar):hover{ background:#006D82 !important; border-color:#006D82 !important; }
html.a8-lujo :is(#editor-publish-btn, #lp-btn-publicar){ letter-spacing:.1em !important; text-transform:uppercase !important; font-size:11px !important; }
/* el modo Claude: su nombre, en una pastilla; puesto, deep */
.mc-toggle .mc-chispa{ font-size:12px; line-height:1; color:var(--c-crema70); }
html.a8-lujo .modo-claude :is(#view-editor, #view-landing-editor) > .mc-barra-fila .mc-toggle{ background:#006d82 !important; border-color:#006d82 !important; color:#FFFFFF !important; }
html.a8-lujo .modo-claude :is(#view-editor, #view-landing-editor) > .mc-barra-fila .mc-toggle:where([data-pz-foto]){background:#005565 !important;border-color:#005565 !important}
.modo-claude .mc-toggle .mc-chispa{ color:#FFFFFF; }
/* los dos grupos de pastillas (escritorio / móvil y los idiomas): el elegido en crema */
html.a8-lujo #view-landing-editor .mc-barra > .bg-black\/25, html.a8-lujo #lp-idiomas-pills{ background:transparent !important; border:1px solid var(--c-filete); border-radius:99px !important; padding:2px !important; gap:2px; }
html.a8-lujo #view-landing-editor > .mc-barra-fila .lp-vista-btn{ height:calc(2.1rem - 6px) !important; min-width:calc(2.1rem - 6px) !important; border:0 !important; padding:0 10px !important; color:var(--c-crema70) !important; }
html.a8-lujo #view-landing-editor > .mc-barra-fila .lp-vista-btn.active{ background:var(--c-crema) !important; color:var(--c-tinta) !important; }
html.a8-lujo #view-landing-editor > .mc-barra-fila :is(#lp-btn-esc, #lp-btn-mov){ width:calc(2.1rem - 6px); padding:0 !important; }
/* el título y el cliente, como texto: Marcellus, sin caja hasta que se escriben */
html.a8-lujo :is(#editor-titulo-input, #lp-titulo){ background:transparent !important; border:0 !important; border-bottom:1px solid transparent !important; border-radius:0 !important;
  font-family:var(--c-glare) !important; font-size:18px !important; color:#FFFFFF !important; padding:2px 2px !important; }
html.a8-lujo #editor-cliente-input{ background:transparent !important; border:0 !important; border-bottom:1px solid transparent !important; border-radius:0 !important;
  font-size:12.5px !important; color:var(--c-crema70) !important; }
html.a8-lujo :is(#editor-titulo-input, #lp-titulo, #editor-cliente-input):is(:hover, :focus){ border-bottom-color:var(--c-filete) !important; outline:none !important; box-shadow:none !important; }
html.a8-lujo #view-editor > .mc-barra-fila > .border-l{ border-left-color:var(--c-filete-s) !important; }
html.a8-lujo #lp-estado{ font:400 9.5px/1 var(--c-sans) !important; letter-spacing:.16em !important; padding:5px 10px !important; border-radius:99px; background:transparent !important;
  border:1px solid var(--c-filete); color:var(--c-crema70); }
html.a8-lujo #lp-estado.bg-tnsage{ background:#7D9B5B !important; border-color:#7D9B5B; color:#1A2633 !important; }

.editor-shell{ display:flex; height:100%; overflow:hidden; }
/* el riel de diapositivas */
.slide-rail{ width:170px; flex-shrink:0; background:var(--c-tinta); border-right:1px solid var(--c-filete-s); overflow-y:auto; padding:14px 12px; }
.slide-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:9px; overflow:hidden; border:2px solid transparent; cursor:pointer; margin-bottom:12px;
  background:var(--c-hondo); transition:border-color .15s ease; }
.slide-thumb:hover{ border-color:rgba(234,223,206,.34); }
.slide-thumb.active{ border-color:#006D82; box-shadow:0 0 0 3px rgba(0,109,130,.35); }
.slide-thumb .thumb-num{ position:absolute; top:5px; left:6px; font:400 9px/1 var(--c-sans); letter-spacing:.04em; color:#FFFFFF; background:rgba(2,62,74,.62);
  padding:3px 7px; border-radius:99px; z-index:5; }
.slide-thumb .thumb-num:where([data-pz-foto]){background:rgba(13,23,32,.62)}
.slide-thumb .thumb-del{ position:absolute; top:4px; right:6px; z-index:6; width:18px; height:18px; border-radius:99px; background:rgba(2,62,74,.72); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
.slide-thumb .thumb-del:where([data-pz-foto]){background:rgba(13,23,32,.72)}
.slide-thumb:hover .thumb-del{ opacity:1; }
.add-slide-btn{ width:100%; aspect-ratio:16/9; border-radius:9px; border:1px dashed rgba(234,223,206,.26); color:var(--c-crema70); display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; gap:2px; }
.add-slide-btn:hover{ border-color:var(--c-crema); color:#FFFFFF; }
/* la mesa: el lienzo sobre tinta honda, con su filete para que no se confunda con ella */
.canvas-stage{ flex-grow:1; background:var(--c-hondo); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:28px; }
.canvas-stage-inner{ position:relative; width:100%; height:100%; }
/* al pasar de diapositiva con la rueda, la nueva entra desde el lado por el que se llegó */
.canvas-stage-inner.a8-entra-abajo{ animation:a8EntraAbajo .34s cubic-bezier(.22,.9,.24,1); }
.canvas-stage-inner.a8-entra-arriba{ animation:a8EntraArriba .34s cubic-bezier(.22,.9,.24,1); }
@keyframes a8EntraAbajo{ from{ opacity:.2; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes a8EntraArriba{ from{ opacity:.2; transform:translateY(-22px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .canvas-stage-inner.a8-entra-abajo, .canvas-stage-inner.a8-entra-arriba{ animation:none; } }
/* el marco del motor pinta negro alrededor de la diapositiva (en el visor público es el
   telón); en la mesa del editor ese marco es la mesa misma */
:is(.canvas-stage-inner, .slide-thumb) .tn-slide-wrap{ background:transparent !important; }
.canvas-stage-inner .tn-canvas{ box-shadow:0 0 0 1px rgba(234,223,206,.18), 0 25px 70px rgba(13,23,32,.65) !important; }
/* el inspector */
.inspector-panel{ width:290px; flex-shrink:0; background:var(--c-hoja); border-left:1px solid var(--c-filete-s); overflow-y:auto; padding:18px 16px; color:var(--c-crema); }
.insp-label{ display:block; margin-bottom:9px; font:400 9.5px/1.2 var(--c-sans); text-transform:uppercase; letter-spacing:.22em; color:var(--c-crema70); }
.insp-section{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--c-filete-s); }
.insp-row{ display:flex; gap:8px; margin-bottom:8px; }
.insp-btn{ flex:1; padding:8px; border-radius:9px; background:transparent; border:1px solid var(--c-filete); color:var(--c-crema); font-size:16px; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease; display:flex; align-items:center; justify-content:center; }
.insp-btn:hover{ border-color:rgba(234,223,206,.70); }
.insp-btn.active{ background:#006d82; color:#FFFFFF; border-color:#006d82; }
.insp-btn.active:where([data-pz-foto]){background:#005565;border-color:#005565}
.insp-input{ width:100%; background:var(--c-campo); border:1px solid var(--c-filete); color:var(--c-crema); border-radius:9px; padding:7px 10px; font-size:12px; }
.insp-input:focus{ outline:none; border-color:var(--c-crema); }
input[type=range].insp-slider{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:99px; background:var(--c-filete); margin:6px 0; }
input[type=range].insp-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:99px; background:var(--c-crema); cursor:pointer; border:2px solid var(--c-hoja); }
input[type=range].insp-slider::-moz-range-thumb{ width:14px; height:14px; border-radius:99px; background:var(--c-crema); cursor:pointer; border:2px solid var(--c-hoja); }
.insp-slider-label{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--c-crema70); margin-top:8px; }
select.insp-input option{ background:var(--c-hoja); }
html.a8-lujo .inspector-panel .text-white{ color:#FFFFFF !important; }
html.a8-lujo .inspector-panel :is(.text-slate-400, .text-slate-500){ color:var(--c-crema70) !important; }
/* la cabecera de cada elemento en el inspector: su nombre en Marcellus y sus dos acciones en
   círculos (duplicar; eliminar, que se enciende en rojo de relleno al pasar) */
html.a8-lujo .inspector-panel > .flex.justify-between.mb-4:first-child > span{ font-family:var(--c-glare); font-size:17px; color:#FFFFFF !important; }
html.a8-lujo .inspector-panel > .flex.justify-between.mb-4:first-child button{ width:1.9rem; height:1.9rem; border-radius:99px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--c-filete); color:var(--c-crema) !important; transition:border-color 120ms linear, background-color 120ms linear; }
html.a8-lujo .inspector-panel > .flex.justify-between.mb-4:first-child button:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF !important; }
html.a8-lujo .inspector-panel > .flex.justify-between.mb-4:first-child button[title="Eliminar"]:hover{ background:#B3261E; border-color:#B3261E; }
html.a8-lujo .inspector-panel > .flex.justify-between.mb-4:first-child button .material-icons-outlined{ font-size:16px !important; }
.swatch{ width:26px; height:26px; border-radius:99px; border:2px solid rgba(234,223,206,.26); cursor:pointer; flex-shrink:0; padding:0; }
.swatch.active{ border-color:var(--c-crema); box-shadow:0 0 0 2px #006d82; }
.swatch.active:where([data-pz-foto]){box-shadow:0 0 0 2px #005565}
/* la selección sobre el lienzo: herramientas del editor, en rellenos del libro */
.tn-editor-selection{ position:absolute; border:1.5px dashed #7D9B5B; pointer-events:none; z-index:40; }
.tn-handle{ position:absolute; width:12px; height:12px; background:#7D9B5B; border:1.5px solid #046477; border-radius:3px; pointer-events:auto; z-index:41; }
.tn-handle:where([data-pz-foto]){border:1.5px solid #1A2633}
.tn-handle-nw{ left:-6px; top:-6px; cursor:nwse-resize; } .tn-handle-n{ left:50%; top:-6px; margin-left:-6px; cursor:ns-resize; }
.tn-handle-ne{ right:-6px; top:-6px; cursor:nesw-resize; } .tn-handle-e{ right:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.tn-handle-se{ right:-6px; bottom:-6px; cursor:nwse-resize; } .tn-handle-s{ left:50%; bottom:-6px; margin-left:-6px; cursor:ns-resize; }
.tn-handle-sw{ left:-6px; bottom:-6px; cursor:nesw-resize; } .tn-handle-w{ left:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.tn-el[data-el-type]{ cursor:grab; }
.tn-el[data-el-type]:active{ cursor:grabbing; }
.tn-el.tn-editing{ outline:2px solid #006D82; cursor:text; }
.tn-handle-rotate{ position:absolute; width:13px; height:13px; background:#006D82; border:1.5px solid #046477; border-radius:99px; pointer-events:auto; z-index:42; left:50%; top:-32px; margin-left:-6.5px; cursor:grab; }
.tn-handle-rotate:where([data-pz-foto]){border:1.5px solid #1A2633}
.tn-rotate-stem{ position:absolute; left:50%; top:-24px; width:1px; height:24px; background:rgba(125,155,91,.6); pointer-events:none; z-index:41; }
.tn-editor-selection.multi{ border-color:#006D82; }
.tn-marquee{ position:absolute; border:1.5px dashed #006D82; background:rgba(0,109,130,.12); pointer-events:none; z-index:39; }
/* la guía de ajuste: roja del libro, visible sobre cualquier diapositiva */
.tn-snap-guide{ position:absolute; background:#B3261E; pointer-events:none; z-index:45; }
.tn-snap-guide-v{ top:0; bottom:0; width:1px; }
.tn-snap-guide-h{ left:0; right:0; height:1px; }
.tn-canvas-dragover{ outline:3px dashed #7D9B5B; outline-offset:-3px; }
/* la barra flotante de formato de texto */
#text-toolbar{ position:absolute; display:none; background:var(--c-hoja); border:1px solid var(--c-filete); border-radius:99px; padding:4px 6px; box-shadow:var(--c-sombra); z-index:60; gap:2px; align-items:center; }
#text-toolbar.visible{ display:flex; }
#text-toolbar button{ width:28px; height:28px; border-radius:99px; color:var(--c-crema); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }
#text-toolbar button:hover{ background:rgba(234,223,206,.08); }
#text-toolbar button.active{ background:#006d82; color:#FFFFFF; }
#text-toolbar button.active:where([data-pz-foto]){background:#005565}
#text-toolbar .tt-sep{ width:1px; height:18px; background:var(--c-filete); margin:0 3px; }
#text-toolbar input[type=color]{ width:24px; height:24px; border:none; padding:0; background:none; cursor:pointer; border-radius:99px; overflow:hidden; }
/* las capas */
.layer-row{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:9px; background:rgba(234,223,206,.03); margin-bottom:4px; cursor:pointer; border:1px solid transparent; }
.layer-row:hover{ background:rgba(234,223,206,.07); }
.layer-row.active{ border-color:#006D82; background:rgba(0,109,130,.20); }
.layer-row .layer-icon{ font-size:15px; color:var(--c-crema70); flex-shrink:0; }
.layer-shape-swatch{ width:14px; height:14px; flex-shrink:0; background:#7D9B5B; }
.layer-row .layer-name{ flex-grow:1; font-size:11.5px; color:var(--c-crema); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-row .layer-action{ color:rgba(255,255,255,.76); flex-shrink:0; }
.layer-row .layer-action:where([data-pz-foto]){color:rgba(234,223,206,.45)}
.layer-row .layer-action:hover{ color:#FFFFFF; }
/* el color completo, la orientación, la IA y los selectores de elementos */
.color-picker-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.color-picker-row input[type=color]{ width:34px; height:34px; border:none; padding:0; background:none; cursor:pointer; border-radius:9px; overflow:hidden; flex-shrink:0; }
.color-picker-row input[type=text]{ flex-grow:1; }
.format-toggle{ display:flex; gap:8px; margin-bottom:16px; }
.format-toggle button{ flex:1; padding:12px; border-radius:14px; background:transparent; border:1px solid var(--c-filete); color:var(--c-crema70); display:flex; flex-direction:column;
  align-items:center; gap:6px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.format-toggle button.active{ border-color:var(--c-crema); color:#FFFFFF; background:rgba(0,109,130,.20); }
.format-toggle .fmt-icon{ width:26px; height:18px; border:1.5px solid currentColor; border-radius:2px; }
.format-toggle button[data-fmt="vertical"] .fmt-icon{ width:18px; height:26px; }
.ai-example-chip{ display:inline-block; padding:5px 12px; border-radius:99px; background:transparent; color:var(--c-crema); font-size:11px; cursor:pointer; margin:3px 4px 0 0; border:1px solid var(--c-filete); }
.ai-example-chip:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
.ornament-category-pill{ padding:5px 12px; border-radius:99px; background:transparent; color:var(--c-crema70); font-size:11px; cursor:pointer; border:1px solid var(--c-filete); white-space:nowrap; }
.ornament-category-pill:hover{ color:var(--c-crema); border-color:rgba(234,223,206,.45); }
.ornament-category-pill.active{ background:#006d82; color:#FFFFFF; border-color:#006d82; }
.ornament-category-pill.active:where([data-pz-foto]){background:#005565;border-color:#005565}
.icon-pick-btn{ aspect-ratio:1; border-radius:9px; background:rgba(234,223,206,.03); border:1px solid var(--c-filete-s); color:var(--c-crema); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; }
.icon-pick-btn:hover{ background:#006d82; color:#FFFFFF; border-color:#006d82; }
.icon-pick-btn:hover:where([data-pz-foto]){background:#005565;border-color:#005565}
.ornament-pick-btn{ aspect-ratio:1; border-radius:14px; background:rgba(234,223,206,.03); border:1px solid var(--c-filete-s); color:var(--c-crema); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:14px; transition:border-color .15s ease; }
.ornament-pick-btn:hover{ border-color:rgba(234,223,206,.55); }
.ornament-pick-btn svg{ width:60%; height:60%; }
.ornament-pick-btn span{ font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--c-crema70); }
.shape-pick-btn{ aspect-ratio:1; border-radius:14px; background:rgba(234,223,206,.03); border:1px solid var(--c-filete-s); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:12px; transition:border-color .15s ease; }
.shape-pick-btn:hover{ border-color:rgba(234,223,206,.55); }
.shape-pick-preview{ width:52%; height:52%; }
.shape-pick-btn span{ font-size:8.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--c-crema70); text-align:center; }
/* las plantillas de arranque: la muestra es de la plantilla; el rótulo, de la app */
.template-card{ border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--c-filete); transition:border-color .15s ease; text-align:left; }
.template-card:hover{ border-color:rgba(234,223,206,.55); }
.template-card.active{ border-color:#006D82; box-shadow:0 0 0 2px rgba(0,109,130,.4); }
.template-card-preview{ height:80px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:11px; letter-spacing:.05em; }
.template-card-label{ padding:9px 11px; background:var(--c-tinta); }
.template-card-label b{ display:block; font-size:11.5px; color:var(--c-crema); }
.template-card-label span{ font-size:9.5px; color:var(--c-crema70); }

/* ── 9 · LA LIBRERÍA DE FOTOS: EL FOCO ──────────────────────────────────────
   La foto que se toca cobra vida y las demás se apagan (feedback-efectos-hover). Sin marcos
   ni reflejos; sin acercamiento, porque aquí se trabaja. */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.media-item{ position:relative; aspect-ratio:1; border-radius:9px; overflow:hidden; cursor:pointer; border:0; background:var(--c-hondo); }
.media-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .4s ease; }
.media-grid:hover .media-item:not(:hover) img, #lp-fotos:hover > *:not(:hover) img{ filter:brightness(.58) saturate(.55); }
.media-item .media-del{ position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:99px; background:rgba(2,62,74,.72); color:#FFFFFF; display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
.media-item .media-del:where([data-pz-foto]){background:rgba(13,23,32,.72)}
.media-item:hover .media-del{ opacity:1; }
.media-item .media-del:hover{ background:#B3261E; }
/* EL NOMBRE de la foto es lo que se le pega a Claude en el chat (mediaName): la URL de descarga
   vence en horas y el nombre no. Siempre visible, también en pantallas táctiles. */
.media-item .media-name{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:4px; padding:14px 4px 4px 7px;
  background:linear-gradient(to bottom, transparent, rgba(2,62,74,.88)); }
.media-item .media-name:where([data-pz-foto]){background:linear-gradient(to bottom, transparent, rgba(13,23,32,.88))}
.media-item .media-name-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,Consolas,monospace; font-size:9px; color:#EADFCE; }
.media-item .media-copy{ flex-shrink:0; width:24px; height:24px; border-radius:99px; background:rgba(255,255,255,.14); color:#FFFFFF; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; transition:background-color .15s ease; }
.media-item .media-copy:hover{ background:#006d82; }
.media-item .media-copy:hover:where([data-pz-foto]){background:#005565}
.media-item.media-nueva{ box-shadow:inset 0 0 0 2px #7D9B5B; }
.media-item .media-badge-nueva{ position:absolute; top:5px; left:5px; background:#7D9B5B; color:#1A2633; font-size:9px; letter-spacing:.1em; padding:2px 8px; border-radius:99px; text-transform:uppercase; }
.media-upload-zone{ border:1px dashed rgba(234,223,206,.26); border-radius:14px; padding:22px; text-align:center; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
.media-upload-zone:hover, .media-upload-zone.dragover{ border-color:var(--c-crema); background:rgba(234,223,206,.04); }
html.a8-lujo #lp-fotos > *{ border-radius:9px !important; overflow:hidden; }
html.a8-lujo #lp-fotos img{ transition:filter .4s ease; }

/* ── 10 · EL CONSTRUCTOR DE LANDINGS ─────────────────────────────────────── */
/* el constructor ocupa lo que queda bajo la barra, no el alto entero: con `h-full` medía la
   pantalla más la barra, y al elegir un bloque la página entera se corría hacia arriba */
html.a8-lujo #view-landing-editor{ height:auto !important; flex:1 1 0%; min-height:0; }
html.a8-lujo #lp-cuerpo{ background:var(--c-hondo) !important; }
html.a8-lujo :is(#lp-aside-bloques, #lp-aside-props){ background:var(--c-hoja) !important; border-color:var(--c-filete-s) !important; }
html.a8-lujo :is(#lp-aside-bloques .lp-bloques-cab, #lp-props-cab){ border-bottom-color:var(--c-filete-s) !important; padding-top:12px !important; padding-bottom:12px !important; }
html.a8-lujo :is(.lp-bloques-rotulo, #lp-props-cab > span){ font:400 9.5px/1.2 var(--c-sans) !important; letter-spacing:.22em !important; color:var(--c-crema70) !important; }
html.a8-lujo .lp-bloques-cab button{ width:2.1rem !important; height:2.1rem !important; border-radius:99px !important; background:#006d82 !important; }
html.a8-lujo .lp-bloques-cab button:where([data-pz-foto]){background:#005565 !important}
html.a8-lujo .lp-bloques-cab button:hover{ background:#006D82 !important; }
html.a8-lujo .lp-bloque{ border-radius:9px !important; }
html.a8-lujo .lp-bloque:hover{ background:rgba(234,223,206,.05) !important; }
html.a8-lujo .lp-bloque.border-tnteal\/40{ background:rgba(0,109,130,.24) !important; border-color:rgba(0,109,130,.75) !important; }
html.a8-lujo .lp-bloque p.text-\[12px\]{ font-size:12.5px; color:var(--c-crema) !important; }
html.a8-lujo .lp-bloque p.text-\[10px\]{ color:rgba(255,255,255,.86) !important; }
html.a8-lujo .lp-bloque p.text-\[10px\]:where([data-pz-foto]){color:rgba(234,223,206,.66) !important}
html.a8-lujo .lp-bloque button{ border-radius:99px !important; }
html.a8-lujo #lp-escenario{ background:transparent; }
html.a8-lujo #lp-marco{ background:#FFFFFF !important; border-radius:9px !important; box-shadow:0 0 0 1px rgba(234,223,206,.18), 0 25px 70px rgba(13,23,32,.65) !important; }
/* las propiedades */
html.a8-lujo #lp-props-cab p.text-\[12px\]{ font-family:var(--c-glare); font-size:15px; color:#FFFFFF !important; }
html.a8-lujo #lp-props label.text-\[11px\], html.a8-lujo #lp-props summary.text-\[11px\], html.a8-lujo #lp-props .text-\[11px\].font-bold{ color:var(--c-crema) !important; }
html.a8-lujo #lp-props .lp-grupo > summary{ font:400 9.5px/1.2 var(--c-sans) !important; letter-spacing:.22em !important; color:var(--c-crema70) !important; }
html.a8-lujo #lp-props :is(details, div).border{ border-color:var(--c-filete-s) !important; }
html.a8-lujo #lp-props details.bg-white{ background:rgba(234,223,206,.03) !important; }
html.a8-lujo #lp-props .border-dashed{ border-color:rgba(234,223,206,.26) !important; }
.lp-grupo summary::-webkit-details-marker{ display:none; }
.lp-grupo > summary::before{ content:'▸'; display:inline-block; margin-right:6px; transition:transform .2s ease; }
.lp-grupo[open] > summary::before{ transform:rotate(90deg); }
.lp-vista-btn{ color:rgba(255,255,255,.86); transition:background-color .2s ease, color .2s ease; }
.lp-vista-btn:where([data-pz-foto]){color:rgba(234,223,206,.70)}
.lp-vista-btn.active{ background:#EADFCE; color:#1A2633; }

/* ── 11 · EL MODO CLAUDE ─────────────────────────────────────────────────────
   Disposición compacta para trabajar con la app en el panel angosto del chat: una sola barra
   de íconos, columna izquierda mínima y el panel de propiedades FLOTANDO encima (empujar le
   robaría ancho a la vista previa, que es lo que manda). Sólo cambia la disposición. */
.mc-toggle{ white-space:nowrap; }
.mc-fab, .mc-cerrar{ display:none; }
/* Dentro de un editor, el encabezado de la app no aporta: el editor ya tiene su propia barra
   con «volver». Es alto que se le devuelve al lienzo. */
.modo-claude #main-app:has(#view-editor.active) > header, .modo-claude #main-app:has(#view-landing-editor.active) > header{ display:none; }
.modo-claude .mc-barra{ flex-wrap:nowrap !important; gap:4px !important; }
.modo-claude .mc-barra-fila{ flex-wrap:nowrap !important; padding-top:6px !important; padding-bottom:6px !important; }
/* presentaciones */
.modo-claude #editor-titulo-input{ width:9.5rem; min-width:0; }
.modo-claude #editor-cliente-input{ width:6.5rem; min-width:0; }
.modo-claude .slide-rail{ width:92px; padding:10px 8px; }
.modo-claude .slide-thumb{ margin-bottom:8px; border-radius:7px; }
.modo-claude .add-slide-btn{ border-radius:7px; font-size:0; }
.modo-claude .canvas-stage{ padding:18px; background-image:radial-gradient(rgba(234,223,206,.08) 1px, transparent 1px); background-size:18px 18px; }
.modo-claude .editor-shell{ position:relative; }
.modo-claude .inspector-panel{ position:absolute; top:12px; right:12px; bottom:12px; width:300px; max-width:calc(100% - 120px); z-index:40; border-radius:14px; border:1px solid var(--c-filete);
  box-shadow:var(--c-sombra); transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform .22s ease, opacity .18s ease; padding-top:40px; }
.modo-claude .mc-abierto .inspector-panel{ transform:none; opacity:1; pointer-events:auto; }
.modo-claude .editor-shell .mc-cerrar{ position:absolute; top:20px; right:20px; z-index:41; }
.modo-claude .editor-shell.mc-abierto .mc-cerrar{ display:flex; }
.modo-claude .editor-shell .mc-fab{ display:flex; position:absolute; top:14px; right:14px; z-index:39; }
.modo-claude .editor-shell.mc-abierto .mc-fab{ display:none; }
.mc-cerrar{ width:2.1rem; height:2.1rem; border-radius:99px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--c-filete); color:var(--c-crema); }
.mc-cerrar:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
.mc-fab{ align-items:center; gap:6px; height:2.1rem; padding:0 14px; border-radius:99px; font-size:12px; letter-spacing:.04em; background:var(--c-hoja); color:var(--c-crema);
  border:1px solid var(--c-filete); box-shadow:var(--c-sombra); }
.mc-fab:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF; }
/* landings */
.modo-claude #lp-titulo{ width:10rem; }
.modo-claude #lp-cuerpo{ position:relative; overflow:hidden; background-image:radial-gradient(rgba(234,223,206,.08) 1px, transparent 1px) !important; background-size:18px 18px; }
.modo-claude #lp-aside-bloques{ position:absolute; left:0; top:0; bottom:0; width:56px !important; z-index:30; overflow:hidden; transition:width .2s ease, box-shadow .2s ease; }
.modo-claude #lp-aside-bloques:hover{ width:250px !important; box-shadow:var(--c-sombra); }
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloque > div,
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloques-rotulo,
.modo-claude #lp-aside-bloques:not(:hover) #lp-bloques > :not(.lp-bloque){ display:none; }
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloques-cab{ justify-content:center; padding-left:0; padding-right:0; }
.modo-claude #lp-aside-bloques:not(:hover) .lp-bloque{ justify-content:center; padding-left:0; padding-right:0; }
.modo-claude #lp-escenario{ padding:14px 14px 14px 70px; }
.modo-claude #lp-aside-props{ position:absolute; top:12px; right:12px; bottom:12px; width:310px !important; max-width:calc(100% - 90px); z-index:35; border:1px solid var(--c-filete) !important;
  border-radius:14px; box-shadow:var(--c-sombra); overflow:hidden; transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform .22s ease, opacity .18s ease; }
.modo-claude #lp-cuerpo.mc-abierto #lp-aside-props{ transform:none; opacity:1; pointer-events:auto; }
.modo-claude #lp-cuerpo .mc-cerrar{ display:flex; position:absolute; top:8px; right:8px; z-index:2; }
.modo-claude #lp-props-cab{ padding-right:48px; }
.modo-claude #lp-cuerpo .mc-fab{ display:flex; position:absolute; top:14px; right:14px; z-index:34; }
.modo-claude #lp-cuerpo.mc-abierto .mc-fab{ display:none; }

/* ── 12 · LOS MODALES: HOJAS CON EL TÍTULO EN MARCELLUS ──────────────────────
   Sin la barra de color de antes: la franja del título es la misma hoja, con su filete. */
.modal-container{ position:fixed; inset:0; background-color:rgba(3,80,95,.78); z-index:999; display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; transition:opacity .3s ease; pointer-events:none; }
.modal-container:where([data-pz-foto]){background-color:rgba(20,29,39,.78)}
.modal-container.visible{ opacity:1; pointer-events:auto; }
html.a8-lujo .modal-container > div{ background-color:var(--c-hoja) !important; border:1px solid var(--c-filete) !important; border-radius:18px !important; box-shadow:var(--c-sombra) !important; color:var(--c-crema); }
.a8-modal__cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 14px 22px; background:var(--c-hoja); border-bottom:1px solid var(--c-filete-s); }
html.a8-lujo .a8-modal__cab h3{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--c-glare) !important; font-size:1.35rem !important; line-height:1.2; color:#FFFFFF !important; letter-spacing:.005em !important; }
html.a8-lujo .a8-modal__cab h3 .material-icons-outlined{ font-size:20px; color:var(--c-crema70); }
html.a8-lujo .a8-modal__cab p{ color:var(--c-crema70) !important; }
html.a8-lujo .a8-modal__cab button{ width:2.1rem; height:2.1rem; padding:0 !important; border-radius:99px !important; display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:1px solid var(--c-filete); color:var(--c-crema) !important; }
html.a8-lujo .a8-modal__cab button:hover{ border-color:rgba(234,223,206,.70); color:#FFFFFF !important; }
html.a8-lujo .a8-modal__cab button .material-icons-outlined{ font-size:17px !important; color:inherit; }
/* los pies y las cajas de los modales */
html.a8-lujo .modal-container .bg-slate-50{ background-color:transparent !important; }
html.a8-lujo .modal-container :is(.border-t, .border-b):not(.a8-modal__cab){ border-color:var(--c-filete-s) !important; }
html.a8-lujo .modal-container .text-slate-700, html.a8-lujo .modal-container .text-slate-600{ color:var(--c-crema) !important; }
html.a8-lujo .modal-container :is(.text-slate-400, .text-slate-500){ color:var(--c-crema70) !important; }
html.a8-lujo #confirmation-message{ font-size:14px; line-height:1.55; color:var(--c-crema) !important; }
html.a8-lujo :is(#btn-confirm-ok, .modal-container button.bg-tnteal){ background:#006d82 !important; border-color:#006d82 !important; color:#FFFFFF !important; border-radius:99px !important; }
html.a8-lujo :is(#btn-confirm-ok, .modal-container button.bg-tnteal):where([data-pz-foto]){background:#005565 !important;border-color:#005565 !important}
html.a8-lujo :is(#btn-confirm-ok, .modal-container button.bg-tnteal):hover{ background:#006D82 !important; }
html.a8-lujo #btn-confirm-cancel{ background:transparent !important; border:1px solid var(--c-filete) !important; color:var(--c-crema) !important; border-radius:99px !important; }
html.a8-lujo #btn-confirm-cancel:hover{ border-color:rgba(234,223,206,.70) !important; color:#FFFFFF !important; }
/* las plantillas de landing */
html.a8-lujo #lp-plantillas > button{ border-radius:14px !important; border-color:var(--c-filete) !important; }
html.a8-lujo #lp-plantillas > button:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.03) !important; }
html.a8-lujo #lp-plantillas h4{ font-family:var(--c-glare) !important; font-size:1.05rem; color:#FFFFFF !important; }
/* la paleta de bloques */
html.a8-lujo #lp-paleta > button{ border-radius:14px !important; border-color:var(--c-filete) !important; }
html.a8-lujo #lp-paleta > button:hover{ border-color:rgba(234,223,206,.55) !important; background:rgba(234,223,206,.03) !important; }

/* ── 13 · LA CARGA Y LOS AVISOS ──────────────────────────────────────────── */
/* sin velo: la pantalla no se lava. Sólo la estrella gira, sin disco y sin rótulo (Luis,
   2026-09-29: «ese círculo no me gusta… me gusta la estrella dando vueltas, nada más, no hace
   falta ni siquiera que diga cargando; debe tener contraste atrás para verse»; lo mismo que en
   CAMPO y RAÍCES). Su sombra de tinta la despega de cualquier fondo, foto o papel. El velo sigue
   ahí, transparente, para que no se pueda tocar nada mientras carga; el rótulo que escribe la app
   queda para los lectores de pantalla. */
html.a8-lujo #loader{ background:transparent !important; backdrop-filter:none !important; }
html.a8-lujo #loader .a8-carga{ width:46px; height:46px; animation:a8Gira 4s linear infinite;
  filter:drop-shadow(0 2px 5px rgba(13,23,32,.85)) drop-shadow(0 0 16px rgba(13,23,32,.55)); }
html.a8-lujo #loader-msg{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; }
@keyframes a8Gira{ to{ transform:rotate(360deg); } }
html.a8-lujo #toast{ border-radius:99px !important; border:1px solid rgba(234,223,206,.22) !important; box-shadow:0 30px 70px -18px rgba(13,23,32,.62) !important;
  font:400 12.5px/1.3 var(--c-sans) !important; letter-spacing:.01em; color:#FFFFFF !important; padding:.7rem 1.2rem !important; }

/* ── 14 · LOS TAMAÑOS ────────────────────────────────────────────────────── */
@media (max-width:1099px){
  .a8-portada{ padding-left:28px; padding-right:28px; }
  .a8-cuerpo{ padding:8px 28px 40px; }
  .a8-portada__avance{ left:28px; right:28px; }
  .a8-portada__lugar{ right:28px; }
}
/* EL CONSTRUCTOR DE LANDINGS EN TABLETA: la fila del título (volver, título, estado) arriba y las
   herramientas en su renglón. Con el modo Claude la fila no se partía, el título se aplastaba a
   4 px y «Publicada» quedaba debajo del botón de Claude (medido a 768 px). */
@media (max-width:1023px){
  html.a8-lujo #view-landing-editor > .mc-barra-fila{ flex-wrap:wrap !important; }
  html.a8-lujo #view-landing-editor > .mc-barra-fila > :first-child{ flex:1 1 100%; }
  html.a8-lujo #view-landing-editor > .mc-barra-fila #lp-titulo{ flex:1 1 auto; width:auto !important; }
}
@media (max-width:767px){
  html.a8-lujo header.cab-marca{ padding:8px 14px; }
  html.a8-lujo header.cab-marca img.logo-marca{ height:34px; }
  html.a8-lujo header.cab-marca .ses{ padding:0 4px; gap:4px; }
  html.a8-lujo header.cab-marca .ses__yo{ display:none; }
  .a8-vista{ --a8-tramo:48px; }
  .a8-portada{ position:relative; top:0; min-height:calc(230px + var(--a8-tramo)); padding:78px 16px calc(18px + var(--a8-tramo)); }
  .a8-portada__avance{ display:none; }
  .a8-portada__pestanas{ flex:1 1 100%; }
  .a8-portada__acc > .a8-portada__pestanas{ order:0; }
  html.a8-lujo .a8-portada__bt{ flex:none; }
  .a8-portada__in{ gap:14px; }
  .a8-portada__acc{ width:100%; justify-content:flex-start; }
  html.a8-lujo .a8-portada h1, html.a8-lujo .a8-portada h2{ font-size:2rem !important; }
  html.a8-lujo .a8-portada input.a8-portada__buscar{ width:100%; flex:1 1 100%; order:3; }
  .a8-portada__lugar{ top:62px; right:16px; }
  .a8-cuerpo{ padding:4px 16px 32px; }
  /* en el celular las barras de los constructores bajan a dos renglones en vez de salirse */
  html.a8-lujo :is(#view-editor, #view-landing-editor) > .mc-barra-fila{ flex-wrap:wrap !important; padding:8px 10px !important; gap:6px !important; }
  html.a8-lujo #view-landing-editor > .mc-barra-fila .mc-barra{ flex-wrap:wrap !important; }
}
@media (prefers-reduced-motion:reduce){
  .a8-portada__foto{ transition:opacity .2s linear; }
  .a8-portada__fotos{ transform:none; }
  .a8-portada__pestanas::before{ transition:none; animation:none !important; }
  .deck-card-portada{ transition:opacity .2s linear; }
  .deck-card:hover .deck-card-portada{ transform:none; }
  html.a8-lujo #loader .a8-carga{ animation:none; }
  .view-section{ animation:none; }
}