@charset "utf-8";
/* El @charset va PRIMERO, antes de cualquier comentario: sólo cuenta si está en
   el byte cero del archivo. Está acá porque el Content-Type de este archivo no
   lo pone Node — todo lo que vive en public/ lo sirve el servidor web de
   Hostinger directo del disco, sin pasar por Express (medido: estas respuestas
   no traen ninguno de nuestros headers). Sin él, quien abre la URL suelta lee
   el archivo en latin-1 y ve mojibake en los acentos y en content:"△". */
/* ===== Sitio público — landing + freebies. Paleta de marca compartida. */
/* La fuente de marca vivía solo en styles.css (dashboard); sin esto las páginas
   públicas caían a system-ui. La cargamos también acá. */
@font-face{font-family:'Salvaterra';src:url('/assets/fonts/Salvaterra-Thin.ttf') format('truetype');font-weight:100;font-display:swap;}
@font-face{font-family:'Salvaterra';src:url('/assets/fonts/Salvaterra-Light.ttf') format('truetype');font-weight:300;font-display:swap;}
@font-face{font-family:'Salvaterra';src:url('/assets/fonts/Salvaterra-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Salvaterra';src:url('/assets/fonts/Salvaterra-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'Salvaterra';src:url('/assets/fonts/Salvaterra-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Salvaterra';src:url('/assets/fonts/Salvaterra-Black.ttf') format('truetype');font-weight:900;font-display:swap;}
:root{
  --carbon:#26252B;--bg:#1D1C21;--card:#2A2930;--card2:#322F38;
  --hueso:#EDECE5;--piedra:#A9A7A5;--oro:#B39952;--arena:#AE9568;
  --line:rgba(237,236,229,.10);--line2:rgba(237,236,229,.16);
  --navbg:#151419; /* header un tono más oscuro que --bg para separarlo del hero */
}
/* Un solo tema y es oscuro: el re-mapeo de variables del modo día se eliminó
   el 13/08/2026 junto con el interruptor. */
:root{color-scheme:dark;}
/* Scroll suave para los anclas del sitio (ej. "Recursos" → #recursos). */
html{scroll-behavior:smooth;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Salvaterra',system-ui,sans-serif;font-weight:300;background:var(--bg);color:var(--hueso);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:960px;margin:0 auto;padding:0 24px;}
.muted{color:var(--piedra);}
.oro{color:var(--oro);}

/* Header público */
.site-head{border-bottom:.5px solid var(--line);}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.site-brand{display:flex;align-items:center;gap:12px;}
.site-brand img{width:34px;height:34px;}
.site-brand .nm{font-size:16px;font-weight:400;}
.site-brand .sub{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);}

/* Hero */
.hero{padding:72px 0 40px;text-align:center;}
.hero h1{font-size:40px;font-weight:600;letter-spacing:.01em;line-height:1.15;max-width:720px;margin:0 auto;}
.hero p{font-size:17px;color:var(--piedra);max-width:560px;margin:18px auto 0;}

/* Sección freebies */
.sec-title{font-size:var(--lp-sec-titulo-tam,clamp(18px,3.2vw,28px));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lp-sec-titulo-color,var(--oro));text-align:center;margin:64px 0 10px;}
.sec-sub{text-align:center;color:var(--lp-sec-sub-color,var(--piedra));font-size:var(--lp-sec-sub-tam,clamp(15px,2vw,18.5px));margin-bottom:32px;max-width:640px;margin-left:auto;margin-right:auto;}
/* Grillas de recursos: variable-driven (FASE T3 · editor de estilo pro). Cada
   var --lp-* cae a su valor ACTUAL por defecto, así una grilla SIN estilo se ve
   idéntica a antes; la sección editada define las variables y cascadean acá. */
.free-grid{display:grid;grid-template-columns:var(--lp-cols,repeat(auto-fit,minmax(260px,1fr)));gap:var(--lp-gap,16px);padding-bottom:70px;}
.free-card{background:var(--lp-card-bg,var(--card));border:var(--lp-borde-w,.5px) solid var(--lp-card-borde,var(--line));border-radius:var(--lp-radio,14px);padding:var(--lp-padding,22px 22px 20px);box-shadow:var(--lp-sombra,none);display:flex;flex-direction:column;transition:border-color .2s ease;}
.free-card:hover{border-color:rgba(179,153,82,.42);}
.free-card h3{font-size:var(--lp-titulo-tam,18px);font-weight:600;margin-bottom:8px;color:var(--lp-titulo-color,inherit);}
.free-card p{font-size:13.5px;color:var(--lp-texto-color,var(--piedra));flex:1;}
.free-card .go{margin-top:16px;font-size:13px;color:var(--lp-acento,var(--oro));font-weight:400;}
/* Etiqueta gratis/premium para diferenciar recursos (FASE O). */
.res-tag{align-self:flex-start;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;border-radius:20px;padding:3px 10px;margin-bottom:10px;}
.res-tag.free{background:rgba(120,158,110,.16);color:#8fbf7f;border:.5px solid rgba(120,158,110,.4);}
.res-tag.premium{background:rgba(179,153,82,.16);color:var(--oro);border:.5px solid rgba(179,153,82,.45);}
.empty{text-align:center;color:var(--piedra);font-size:14px;padding:30px 0 70px;}

/* Página de freebie + formulario */
.fb-box{max-width:520px;margin:64px auto 0;padding:0 24px;}
.fb-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);}
.fb-box h1{font-size:30px;font-weight:600;margin-top:10px;line-height:1.2;}
.fb-box .desc{color:var(--piedra);font-size:15px;margin-top:14px;}
.fb-form{background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:26px 24px;margin-top:26px;}
.fb-form label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--piedra);margin:14px 0 6px;}
.fb-form label:first-child{margin-top:0;}
.fb-form input[type=text],.fb-form input[type=email]{width:100%;background:var(--card2);border:.5px solid var(--line2);border-radius:8px;color:var(--hueso);padding:12px 13px;font-size:15px;font-family:inherit;}
.fb-form input:focus{outline:none;border-color:var(--oro);}
.fb-consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:12.5px;color:var(--piedra);line-height:1.5;}
.fb-consent input{margin-top:3px;flex-shrink:0;}
.fb-btn{width:100%;margin-top:20px;background:var(--oro);color:#1D1C21;border:none;border-radius:8px;padding:13px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;}
.fb-btn:hover{filter:brightness(1.08);}
.fb-btn:disabled{opacity:.6;cursor:default;}
.fb-msg{display:none;margin-top:14px;font-size:13px;}
.fb-msg.err{color:#e08f7c;display:block;}
.fb-done{display:none;text-align:center;padding:8px 0;}
.fb-done.show{display:block;}
.fb-done .check{font-size:40px;color:var(--oro);}
.fb-done h2{font-size:22px;font-weight:600;margin:10px 0 6px;}
.fb-done p{color:var(--piedra);font-size:14px;}
.fb-done .dl{display:inline-block;margin-top:18px;background:var(--oro);color:#1D1C21;border-radius:8px;padding:12px 22px;font-weight:600;font-size:14px;}

/* Footer público */
.site-foot{border-top:.5px solid var(--line);padding:26px 0;text-align:center;color:var(--piedra);font-size:12px;}
.site-foot a{color:var(--oro);}

@media(max-width:560px){ .hero h1{font-size:30px;} .fb-box h1{font-size:25px;} }

/* ===== FASE E · CTA, header público con acciones e interactividad ===== */
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.site-actions{display:flex;align-items:center;gap:14px;}
.sa-login{font-size:13.5px;color:var(--piedra);transition:color .2s ease;}
.sa-login:hover{color:var(--hueso);}
.sa-cta{font-size:13.5px;font-weight:600;background:var(--oro);color:#1D1C21;border-radius:9px;padding:9px 18px;transition:filter .2s ease,transform .15s ease;}
.sa-cta:hover{filter:brightness(1.1);transform:translateY(-1px);}
.hero-cta{display:inline-block;margin-top:28px;background:var(--oro);color:#1D1C21;border-radius:11px;padding:15px 34px;font-size:16px;font-weight:600;transition:filter .2s ease,transform .18s ease,box-shadow .2s ease;}
.hero-cta:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 34px rgba(179,153,82,.25);}
.hero-sub{font-size:12.5px;color:var(--piedra);margin-top:12px;}

/* Freebie page: pasos + entrada animada + éxito con pop (dinámico e interactivo). */
.fb-steps{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--piedra);}
.fb-step{display:flex;align-items:center;gap:7px;}
.fb-stepdot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;
  border:1px solid var(--line2);color:var(--piedra);transition:all .3s ease;}
.fb-step.on .fb-stepdot{background:var(--oro);border-color:var(--oro);color:#1D1C21;font-weight:600;}
.fb-step.on{color:var(--hueso);}
.fb-stepline{flex:1;max-width:60px;height:1px;background:var(--line2);}
.fb-box{animation:fadeUp .5s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.fb-form{transition:opacity .3s ease,transform .3s ease;}
.fb-form.out{opacity:0;transform:translateY(-8px);}
.fb-done .check{display:inline-flex;width:64px;height:64px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(179,153,82,.15);border:1.5px solid var(--oro);color:var(--oro);font-size:30px;}
.fb-done.show .check{animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{0%{transform:scale(.3);opacity:0;}70%{transform:scale(1.12);}100%{transform:scale(1);opacity:1;}}
.fb-btn{transition:filter .2s ease,transform .15s ease;}
.fb-btn:hover{transform:translateY(-1px);}
.free-card{transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease;}
/* Hover POR DEFECTO (grillas sin estilo). Las grillas con estilo lo redefinen
   con las clases lp-hover-* de abajo (más específicas). */
.free-card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,.35);}

/* ===== FASE T3 · Estilo pro de grillas (clases que emite el editor) ===== */
/* Alineado centrado */
.lp-centro .free-card{align-items:center;text-align:center;}
.lp-centro .res-tag{align-self:center;}
/* Layout en LISTA: tarjetas horizontales (tag+texto a la izq, acción a la der) */
.lp-lista .free-card{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 18px;}
.lp-lista .free-card .res-tag{order:-1;margin-bottom:0;}
.lp-lista .free-card h3{flex:0 0 auto;margin-bottom:0;}
.lp-lista .free-card p{flex:1 1 240px;margin:0;}
.lp-lista .free-card .go,.lp-lista .free-card .prod-price{margin:0 0 0 auto;}
.lp-lista.lp-centro .free-card{justify-content:center;}
/* Hovers (movimientos). Sobrescriben el hover por defecto (más específicos). */
.lp-hover-ninguno .free-card:hover{transform:none;box-shadow:var(--lp-sombra,none);border-color:var(--lp-card-borde,var(--line));}
.lp-hover-subir .free-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.42);}
.lp-hover-crecer .free-card:hover{transform:scale(1.035);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.lp-hover-borde .free-card:hover{transform:none;box-shadow:none;border-color:var(--lp-acento,var(--oro));}
.lp-hover-glow .free-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(179,153,82,.5),0 12px 42px rgba(179,153,82,.32);border-color:rgba(179,153,82,.5);}
/* Hover "brillo": barrido de luz que cruza la tarjeta. */
.lp-hover-brillo .free-card{position:relative;overflow:hidden;}
.lp-hover-brillo .free-card::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);
  transition:left .6s ease;pointer-events:none;z-index:2;}
.lp-hover-brillo .free-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.lp-hover-brillo .free-card:hover::after{left:130%;}
/* Ocultar el badge Gratis/Premium */
.lp-no-tag .res-tag{display:none;}
/* Animación de entrada al hacer scroll (la aplica el GRID_SCRIPT). */
.lp-card-anim{opacity:0;}
.lp-card-anim.lp-card-shown{animation:lpCardIn .55s cubic-bezier(.22,1,.36,1) both;}
@keyframes lpCardIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.lp-card-anim{opacity:1;}.lp-card-anim.lp-card-shown{animation:none;}}
/* Imagen de fondo de la sección + overlay para legibilidad. */
.lp-grid-fondo{position:relative;background-image:var(--lp-fondo);background-size:cover;background-position:center;
  border-radius:18px;padding-left:26px;padding-right:26px;overflow:hidden;}
.lp-grid-fondo::before{content:"";position:absolute;inset:0;background:var(--lp-fondo-ov,rgba(15,14,18,.55));z-index:0;}
.lp-grid-fondo>*{position:relative;z-index:1;}

/* ======================================================================
   FASE F · Sitio público rediseñado (referencia: markmanson.net, adaptado
   a la marca). Nav con menú, hero grande y directo, bandas con foto,
   funnel de newsletter y footer completo. Todo sobre la paleta existente.
   ====================================================================== */

.wrap-lg{max-width:1120px;margin:0 auto;padding:0 24px;}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:none;border-radius:11px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;line-height:1;transition:filter .2s ease,transform .18s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease;}
.btn-gold{background:var(--oro);color:#1D1C21;padding:14px 28px;}
.btn-gold:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 34px rgba(179,153,82,.28);}
.btn-ghost{background:transparent;color:var(--hueso);border:.5px solid var(--line2);padding:13px 26px;}
.btn-ghost:hover{border-color:var(--oro);color:var(--oro);transform:translateY(-2px);}
.btn-lg{font-size:16px;padding:16px 34px;}
.kicker{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);font-weight:600;}

/* --- Nav superior (sticky, con menú móvil).
   Fondo sólido (sin backdrop-filter): más robusto entre navegadores
   —Safari en particular tiene glitches de backdrop-filter+sticky—.
   Ahora en un tono MÁS OSCURO que el fondo (--navbg) + borde inferior
   siempre visible, para que el header se lea separado del hero. Encima,
   un brillo dorado muy sutil que se desplaza en loop (solo background-position,
   barato de animar; se apaga con prefers-reduced-motion). --- */
.nav{position:sticky;top:0;z-index:50;
  background-color:var(--navbg);
  background-image:linear-gradient(105deg,transparent 30%,rgba(179,153,82,.06) 46%,rgba(179,153,82,.10) 50%,rgba(179,153,82,.06) 54%,transparent 70%);
  background-size:250% 100%;background-position:0% 0;
  animation:navSheen 12s ease-in-out infinite;
  border-bottom:.5px solid var(--line);transition:border-color .25s ease;}
.nav.scrolled{border-bottom-color:var(--line2);}
@keyframes navSheen{0%{background-position:0% 0;}50%{background-position:100% 0;}100%{background-position:0% 0;}}
@media(prefers-reduced-motion:reduce){.nav{animation:none;}}
.nav-in{display:flex;align-items:center;gap:20px;height:74px;}
.nav-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.nav-brand img{width:32px;height:32px;}
.nav-nm{font-size:16px;font-weight:600;letter-spacing:.01em;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:14px;}
.nav-links a{font-size:14.5px;color:var(--piedra);position:relative;transition:color .2s ease;}
.nav-links a:hover,.nav-links a.on{color:var(--hueso);}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--oro);border-radius:2px;}
.nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;}
.nav-login{font-size:14px;color:var(--piedra);transition:color .2s ease;}
.nav-login:hover{color:var(--hueso);}
.nav-cta{font-size:14px;font-weight:600;background:var(--oro);color:#1D1C21;border-radius:9px;padding:9px 18px;transition:filter .2s ease,transform .15s ease;}
.nav-cta:hover{filter:brightness(1.1);transform:translateY(-1px);}
/* Sesión pre-paint (prepaint.js pone sess-user/sess-staff en <html> ANTES de
   pintar, desde el recuerdo de localStorage; site.js corrige contra el server).
   Así los CTAs de invitado y el "Panel de control" no parpadean al recargar.
   Los !important son a propósito: le ganan a ".nav-links.open .mob-only"
   (menú móvil abierto), que tiene más especificidad que una clase sola. */
.nav-admin{display:none !important;}
html.sess-user .nav-guest{display:none !important;}
html.sess-staff .nav-actions .nav-admin{display:inline-block !important;}
html.sess-staff .nav-links.open .nav-admin.mob-only{display:block !important;}
/* El heroCta/heroNote del landing cambian de texto para logueados (site.js);
   hasta que el swap corre, se reservan invisibles para no mostrar el texto de
   invitado (visibility mantiene el layout, no salta nada). */
html.sess-user #heroCta:not(.sw),html.sess-user #heroNote:not(.sw){visibility:hidden;}
/* Chip de usuario logueado (FASE M): avatar + nombre → /perfil. */
.nav-user-wrap{position:relative;display:inline-block;}
.nav-user{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--hueso);font-weight:500;font-size:14px;font-family:inherit;background:transparent;cursor:pointer;border:.5px solid var(--line2);border-radius:22px;padding:5px 13px 5px 5px;transition:border-color .2s ease,color .2s ease;}
.nav-user:hover{border-color:var(--oro);color:var(--oro);}
.nav-user-ava{width:28px;height:28px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:rgba(179,153,82,.18);border:1px solid rgba(179,153,82,.5);color:var(--oro);font-size:13px;font-weight:600;flex-shrink:0;}
.nav-user-ava img{width:100%;height:100%;object-fit:cover;}
.nav-user-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-user-caret{font-size:10px;color:var(--piedra);transition:transform .2s ease;}
.nav-user-wrap.open .nav-user-caret{transform:rotate(180deg);}
/* Menú desplegable del usuario */
.nav-user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:206px;background:var(--card);border:.5px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.42);display:none;flex-direction:column;z-index:120;}
.nav-user-wrap.open .nav-user-menu{display:flex;animation:navUserMenu .16s ease;}
@keyframes navUserMenu{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.nav-user-item{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:14px;color:var(--hueso);padding:10px 12px;border-radius:8px;cursor:pointer;text-decoration:none;transition:background .15s ease;}
.nav-user-item:hover{background:var(--card2);}
/* La línea que separa lo que compraste de la cuenta: son dos cosas distintas y
   sin ella el menú se lee como una lista de cinco cosas sueltas. */
.nav-user-sep{display:block;height:1px;background:var(--line);margin:6px 8px;}
.nav-user-out{color:#e0665a;}
.nav-user-out:hover{background:rgba(224,102,90,.12);color:#e0665a;}
.nav-burger{display:none;margin-left:auto;background:transparent;border:none;color:var(--hueso);font-size:20px;cursor:pointer;line-height:1;padding:6px;}
/* Enlaces de cuenta que SOLO aparecen dentro del menú móvil (en desktop viven en .nav-actions). */
.mob-only{display:none;}

/* --- Marco de imagen con fallback elegante (si la foto no existe, queda un
       degradado con el isotipo tenue en vez de un ícono roto). --- */
.imgframe{position:relative;border-radius:18px;overflow:hidden;border:.5px solid var(--line2);
  background:linear-gradient(150deg,#302d36 0%,#26252b 55%,#1f1e23 100%);}
.imgframe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/assets/img/isotipo-oro.svg') no-repeat center/86px;opacity:.06;}
.imgframe img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;}
/* SIN MARCO: para una imagen recortada —un mockup sin fondo—. Se va la caja, el
   borde y la marca de agua, y la imagen se muestra ENTERA (`contain`): con
   `cover` el marco le comería los costados justo al recorte que se quiso
   conservar. */
.imgframe--limpio{background:none;border:0;border-radius:0;overflow:visible;}
.imgframe--limpio::after{display:none;}
.imgframe--limpio img{object-fit:contain;}

/* --- Hero (home): copy grande + foto al costado.
   padding-top chico a propósito: el header ya separa con su fondo más oscuro,
   así el kicker ("Guía gratuita · …") queda pegado al nav sin un mar de aire. --- */
.lp-hero{padding:18px 0 40px;}
/* Kicker + título viven en la columna izquierda (junto al copy); la imagen va a su
   lado. El aire tras el título lo pone .lp-hero-head (margin-bottom), no la grilla.
   En móvil (≤860px) la grilla colapsa a 1 columna y queda el orden de siempre. */
.lp-hero-head{max-width:none;margin-bottom:34px;}
.lp-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;margin-top:0;}
.lp-hero h1{font-family:'Salvaterra',sans-serif;font-weight:900;font-size:clamp(40px,6.8vw,92px);line-height:1.03;
  letter-spacing:-.015em;margin-top:18px;}
.lp-hero h1 .oro{color:var(--oro);}
.lp-hero p.lead{font-size:18.5px;color:var(--piedra);max-width:520px;margin-top:22px;line-height:1.55;}
.lp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.lp-hero-note{font-size:12.5px;color:var(--piedra);margin-top:18px;}
.lp-hero .imgframe{aspect-ratio:4/5;max-height:560px;}
/* Escritorio (grilla de 2 columnas): el título ahora comparte columna con el copy,
   así que baja de tamaño (vs. el full-width viejo) para que la columna de texto y la
   imagen queden a la misma altura y no sobre hueco debajo del botón. align-items
   center reparte cualquier diferencia de alto a ambos lados. Nada de esto aplica en
   móvil (≤860px), que conserva el título grande y el apilado de siempre. */
@media(min-width:861px){
  .lp-hero-in{align-items:center;}
  .lp-hero h1{font-size:clamp(38px,4.4vw,64px);}
  .lp-hero .imgframe{max-height:600px;}
}

/* ---------------------------------------------------------------------------
   HERO EN MÓVIL — que el botón entre SIN scrollear.

   Medido en el navegador con la landing real: en una pantalla de 390×620 el CTA
   caía en el píxel 719, o sea 100 px POR DEBAJO del pliegue. El título ocupaba
   4 renglones y el kicker se partía en 2.

   Todo lo de acá es sólo para ≤860px. Escritorio (≥861px) queda intacto.
   --------------------------------------------------------------------------- */
@media(max-width:860px){
  .lp-hero{padding-top:4px;}
  /* El kicker tiene que entrar en UNA línea: con tracking .26em no entraba.
     Escala con el ancho para que también entre en pantallas de 320px. */
  .lp-hero .kicker{font-size:clamp(8.5px,2.5vw,10.5px);letter-spacing:.14em;white-space:nowrap;}
  /* El tamaño del título lo pone un style INLINE que genera el editor visual
     (responsiveFontSizes lo convierte a clamp). Un estilo inline le gana a
     cualquier regla de la hoja, así que para bajarlo en móvil no queda otra que
     !important. Se limita al h1 del hero: ninguna otra sección se toca. */
  .lp-hero h1,.lp-hero h1 span{font-size:clamp(34px,9.7vw,43px)!important;}
  .lp-hero h1{line-height:1;letter-spacing:-.032em;margin-top:5px;}
  .lp-hero-head{margin-bottom:8px;}
  /* El orden es el de siempre (título → texto → botón): decisión de Blas, el
     botón va debajo del párrafo. Como no se puede reordenar, el espacio se gana
     comprimiendo: tipografía del copy, aire entre viñetas y márgenes. */
  .lp-hero .lp-rich{font-size:14px;line-height:1.45;}
  .lp-hero .lp-rich p,.lp-hero .lp-rich div{margin-top:9px;}
  .lp-hero .lp-rich ul,.lp-hero .lp-rich ol{margin-top:9px;gap:4px;padding-left:19px;}
  .lp-hero-cta{margin-top:12px;}
  .lp-hero-note{margin-top:10px;}
}

/* ---------------------------------------------------------------------------
   AIRE SEGÚN EL ALTO DE PANTALLA.

   El bloque de arriba está apretado a propósito: es lo que hace entrar el botón
   en las pantallas cortas (360×600 y para abajo), donde cada píxel cuenta. Pero
   en un teléfono actual sobran más de 100px y quedaba todo amontonado.

   Dos escalones, para devolver aire SÓLO donde hay lugar. Medido con la landing
   real (píxeles que quedan libres bajo el botón):
     · 360×600 → sin aire extra, 53px          · 390×620 → medio, 58px
     · 390×660 → completo, 62px                · 430×700 → completo, 134px
   --------------------------------------------------------------------------- */
@media(max-width:860px) and (min-height:620px){
  .lp-hero{padding-top:10px;}
  .lp-hero h1{margin-top:9px;}
  .lp-hero-head{margin-bottom:15px;}
  .lp-hero .lp-rich{font-size:15px;line-height:1.48;}
  .lp-hero .lp-rich p,.lp-hero .lp-rich div{margin-top:11px;}
  .lp-hero .lp-rich ul,.lp-hero .lp-rich ol{margin-top:11px;gap:6px;}
  .lp-hero-cta{margin-top:17px;}
  .lp-hero-note{margin-top:12px;}
}

@media(max-width:860px) and (min-height:660px){
  .lp-hero{padding-top:14px;}
  .lp-hero h1{margin-top:12px;}
  .lp-hero-head{margin-bottom:20px;}
  .lp-hero .lp-rich{font-size:15.5px;line-height:1.5;}
  .lp-hero .lp-rich p,.lp-hero .lp-rich div{margin-top:13px;}
  .lp-hero .lp-rich ul,.lp-hero .lp-rich ol{margin-top:14px;gap:9px;}
  .lp-hero-cta{margin-top:22px;}
  .lp-hero-note{margin-top:14px;}
}

/* --- Banda con foto (Sobre Andrés, etc.), alterna lado --- */
.band{padding:64px 0;border-top:.5px solid var(--line);}
.band-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;}
.band--rev .band-in{grid-template-columns:1.08fr .92fr;}
.band--rev .band-copy{order:2;}
.band--rev .band-media{order:1;}
.band h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.12;
  letter-spacing:-.01em;margin-top:14px;}
.band p{font-size:16px;color:var(--piedra);margin-top:16px;line-height:1.6;max-width:520px;}
.band .imgframe{aspect-ratio:1/1;}
.band ul.checks{list-style:none;margin-top:20px;display:grid;gap:11px;}
.band ul.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--hueso);}
.band ul.checks li::before{content:"△";color:var(--oro);font-size:12px;margin-top:5px;flex-shrink:0;}
.band .band-cta{margin-top:26px;}

/* --- Banda de newsletter (funnel de email) --- */
.nl-band{padding:74px 0;border-top:.5px solid var(--line);
  background:radial-gradient(120% 140% at 15% 0%,rgba(179,153,82,.10) 0%,transparent 55%);}
.nl-band-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.nl-copy .kicker{color:var(--arena);}
.nl-copy h2{font-family:'Salvaterra',sans-serif;font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.08;
  letter-spacing:-.015em;margin-top:14px;}
.nl-copy p{font-size:17px;color:var(--piedra);margin-top:18px;line-height:1.55;max-width:520px;}
.nl-band .imgframe{aspect-ratio:3/4;max-height:480px;}

/* Formulario de email inline (email + botón en una fila; apila en móvil). */
.nl-form{margin-top:26px;max-width:520px;}
.nl-row{display:flex;gap:10px;}
.nl-row input[type=email]{flex:1;min-width:0;background:var(--card2);border:.5px solid var(--line2);border-radius:11px;
  color:var(--hueso);padding:15px 16px;font-size:15.5px;font-family:inherit;transition:border-color .2s ease;}
.nl-row input[type=email]:focus{outline:none;border-color:var(--oro);}
.nl-row .btn{flex-shrink:0;padding:15px 26px;}
.nl-consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--piedra);line-height:1.5;}
.nl-consent input{margin-top:3px;flex-shrink:0;}
.nl-hint{margin-top:12px;font-size:12px;color:var(--piedra);}
.nl-msg{display:none;margin-top:12px;font-size:13.5px;color:#e08f7c;}
.nl-msg.show{display:block;}
.nl-msg.ok{color:var(--oro);}
.nl-done{display:none;}
.nl-done.show{display:block;animation:fadeUp .5s ease;}
.nl-done .check{display:inline-flex;width:60px;height:60px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(179,153,82,.15);border:1.5px solid var(--oro);color:var(--oro);font-size:28px;animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
.nl-done h3{font-size:22px;font-weight:700;margin:14px 0 6px;}
.nl-done p{color:var(--piedra);font-size:15px;}

/* --- Encabezado compacto de páginas internas (Productos, Newsletter) --- */
.page-hero{padding:64px 0 8px;text-align:center;}
.page-hero .kicker{display:block;margin-bottom:14px;}
.page-hero h1{font-family:'Salvaterra',sans-serif;font-weight:900;font-size:clamp(34px,5vw,58px);line-height:1.05;
  letter-spacing:-.015em;max-width:820px;margin:0 auto;}
.page-hero p{font-size:18px;color:var(--piedra);max-width:600px;margin:20px auto 0;line-height:1.55;}
.page-hero .page-hero-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* --- Tarjeta "¿Qué recibís?" (bullets del newsletter) --- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:44px 0 10px;}
.value-card{background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:24px 22px;}
.value-card .vc-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(179,153,82,.14);color:var(--oro);font-size:19px;margin-bottom:14px;}
.value-card h3{font-size:17px;font-weight:600;margin-bottom:7px;}
.value-card p{font-size:13.5px;color:var(--piedra);line-height:1.55;}

/* --- Precio en la card de producto --- */
.prod-price{margin-top:12px;color:var(--oro);font-weight:600;font-size:17px;}
.prod-soon{font-size:13px;color:var(--piedra);}
.prod-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;}
.prod-save{background:transparent;border:.5px solid var(--line2);border-radius:8px;color:var(--piedra);font-family:inherit;font-size:12.5px;padding:7px 12px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease;}
.prod-save:hover{border-color:var(--oro);color:var(--oro);}
.prod-save.on{border-color:var(--oro);color:var(--oro);background:rgba(179,153,82,.1);}

/* --- Footer completo --- */
.foot{border-top:.5px solid var(--line);margin-top:20px;padding:56px 0 30px;background:var(--carbon);}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;}
.foot-brand .fb-top{display:flex;align-items:center;gap:11px;}
.foot-brand img{width:30px;height:30px;}
.foot-brand .fb-nm{font-size:16px;font-weight:600;}
.foot-brand p{margin-top:14px;font-size:13.5px;color:var(--piedra);line-height:1.6;max-width:300px;}
.foot-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--arena);margin-bottom:14px;}
.foot-col a{display:block;font-size:14px;color:var(--piedra);margin-bottom:10px;transition:color .2s ease;}
.foot-col a:hover{color:var(--hueso);}
.foot-legal{margin-top:34px;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;}
.foot-legal a{font-size:12.5px;color:var(--piedra);transition:color .2s ease;}
.foot-legal a:hover{color:var(--hueso);text-decoration:underline;}
.foot-bottom{margin-top:22px;padding-top:22px;border-top:.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--piedra);}

/* --- Responsive --- */
@media(max-width:860px){
  .nav-links,.nav-actions{display:none;}
  .nav-burger{display:block;}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--carbon);border-bottom:.5px solid var(--line);padding:8px 24px 16px;}
  .nav-links.open a{width:100%;padding:13px 0;border-bottom:.5px solid var(--line);font-size:15px;color:var(--hueso);}
  .nav-links.open a:last-child{border-bottom:none;}
  .nav-links.open .mob-only{display:block;}
  .nav-links.open .mob-only.cta{color:var(--oro);font-weight:600;}
  /* En el drawer móvil, el chip muestra su menú DESPLEGADO (Perfil + Cerrar
     sesión), sin un segundo toggle anidado. */
  .nav-links.open .nav-user-wrap.mob-only{display:block;width:auto;margin-top:10px;}
  .nav-links.open .nav-user{display:inline-flex;width:auto;border-bottom:none;}
  .nav-links.open .nav-user-caret{display:none;}
  .nav-links.open .nav-user-menu{position:static;display:flex;box-shadow:none;background:transparent;border:none;padding:6px 0 0;min-width:0;animation:none;}
  .nav-links.open .nav-user-menu a{width:auto;padding:10px 12px;border-bottom:none;font-size:14px;color:var(--hueso);}
  .lp-hero-in,.band-in,.band--rev .band-in,.nl-band-in{grid-template-columns:1fr;gap:34px;}
  .band--rev .band-copy{order:1;}
  .band--rev .band-media{order:2;}
  .lp-hero .imgframe,.band .imgframe,.nl-band .imgframe{max-height:420px;}
  .foot-in{grid-template-columns:1fr 1fr;gap:30px;}
  .foot-brand{grid-column:1 / -1;}
}
@media(max-width:520px){
  .nl-row{flex-direction:column;}
  .nl-row .btn{width:100%;}
  .foot-in{grid-template-columns:1fr;}
  .lp-hero-cta,.page-hero .page-hero-cta{flex-direction:column;}
  .lp-hero-cta .btn,.page-hero .page-hero-cta .btn{width:100%;}
}

/* ======================================================================
   FASE H · Blog público — índice (tarjetas) + lectura + comentarios
   ====================================================================== */
/* Grilla de artículos */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding-bottom:64px;}
.blog-card{background:var(--card);border:.5px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.blog-card:hover{border-color:rgba(179,153,82,.42);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.bc-cover{height:180px;background:var(--card2) center/cover no-repeat;}
.bc-cover-ph{background:linear-gradient(150deg,#302d36 0%,#26252b 55%,#1f1e23 100%) center/cover;position:relative;}
.bc-cover-ph::after{content:"";position:absolute;inset:0;background:url('/assets/img/isotipo-oro.svg') no-repeat center/54px;opacity:.07;}
.bc-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1;}
.bc-fav{align-self:flex-start;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--oro);
  border:.5px solid rgba(179,153,82,.4);border-radius:20px;padding:3px 10px;margin-bottom:10px;}
.blog-card h3{font-size:20px;font-weight:600;line-height:1.25;margin-bottom:8px;}
.blog-card p{font-size:14px;color:var(--piedra);line-height:1.55;flex:1;}
.bc-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:var(--piedra);}
.bc-stats{color:var(--arena);}

/* Lectura de un artículo */
.art-wrap{max-width:720px;margin:0 auto;padding:44px 24px 72px;}
.art-back{display:inline-block;font-size:13px;color:var(--piedra);margin-bottom:26px;transition:color .2s ease;}
.art-back:hover{color:var(--oro);}
.art-eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--arena);margin-bottom:12px;}
.art-wrap h1{font-family:'Salvaterra',sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.015em;}
.art-cover{height:clamp(220px,42vw,420px);border-radius:16px;margin:26px 0 8px;background:var(--card2) center/cover no-repeat;border:.5px solid var(--line2);}

/* Cuerpo del artículo (tipografía de lectura) */
.article-body{font-size:18px;line-height:1.75;color:var(--hueso);margin-top:26px;}
.article-body p{margin:0 0 20px;}
.article-body h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:28px;line-height:1.2;margin:36px 0 12px;}
.article-body h3{font-family:'Salvaterra',sans-serif;font-weight:600;font-size:22px;margin:28px 0 10px;}
.article-body ul,.article-body ol{margin:0 0 20px 24px;}
.article-body li{margin-bottom:8px;}
.article-body a{color:var(--oro);text-decoration:underline;text-underline-offset:2px;}
.article-body img{max-width:100%;height:auto;border-radius:12px;margin:18px 0;}
.article-body iframe{max-width:100%;width:100%;border:0;border-radius:12px;margin:18px 0;display:block;}
.article-body blockquote{border-left:3px solid var(--oro);padding:4px 0 4px 20px;margin:24px 0;color:var(--piedra);font-style:italic;font-size:19px;}
.article-body strong{color:var(--hueso);font-weight:700;}

/* Barra de acciones (like / guardar) */
.art-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:40px 0 8px;padding-top:22px;border-top:.5px solid var(--line);}
.art-act{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:.5px solid var(--line2);border-radius:24px;
  color:var(--hueso);font-family:inherit;font-size:14px;padding:10px 18px;cursor:pointer;transition:all .18s ease;}
.art-act:hover{border-color:rgba(179,153,82,.5);transform:translateY(-1px);}
.art-act .ico{font-size:16px;line-height:1;color:var(--piedra);transition:color .18s ease;}
.art-act.on{border-color:var(--oro);color:var(--oro);background:rgba(179,153,82,.1);}
.art-act.on .ico{color:var(--oro);}
.art-msg{font-size:13px;color:var(--arena);}
.art-msg.err{color:#e08f7c;}

/* Comentarios */
.art-comments{margin-top:44px;}
.art-comments h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:22px;margin-bottom:18px;}
.cm-new textarea,.cm-edit{width:100%;min-height:80px;resize:vertical;background:var(--card2);border:.5px solid var(--line2);
  border-radius:11px;color:var(--hueso);padding:13px 15px;font-size:15px;font-family:inherit;line-height:1.5;}
.cm-new textarea:focus,.cm-edit:focus{outline:none;border-color:var(--oro);}
.cm-new-foot{display:flex;gap:10px;align-items:center;margin-top:10px;}
.cm-login{background:var(--card);border:.5px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14px;color:var(--piedra);}
.cm-login a{color:var(--oro);}
.cm-item{border-top:.5px solid var(--line);padding:18px 0;}
.cm-item:first-child{border-top:none;}
.cm-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;}
.cm-autor{font-size:14px;font-weight:600;color:var(--hueso);}
.cm-fecha{font-size:11.5px;color:var(--piedra);}
.cm-body{font-size:15px;color:var(--hueso);line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.cm-acts{display:flex;gap:14px;margin-top:8px;}
.cm-link{background:none;border:none;color:var(--piedra);font-family:inherit;font-size:12.5px;cursor:pointer;padding:0;transition:color .2s ease;}
.cm-link:hover{color:var(--oro);}
.cm-top{display:flex;gap:12px;}
.cm-main{flex:1;min-width:0;}
.cm-ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:rgba(179,153,82,.16);border:1px solid var(--line2);color:var(--oro);font-weight:600;font-size:15px;}
.cm-ava img{width:100%;height:100%;object-fit:cover;}
@media(max-width:520px){.blog-grid{grid-template-columns:1fr;}}

/* ===== FASE T · Landing renderizada desde la DB (editor visual del panel) =====
   .lp-rich envuelve el HTML rico del editor; hereda la tipografía del bloque
   donde vive (hero, banda, newsletter…) replicando los estilos de los <p>
   originales, valga lo que valga la etiqueta interna (p, div, listas). */
.lp-rich p,.lp-rich div{margin-top:12px;}
.lp-rich>*:first-child{margin-top:0;}
.lp-rich img{max-width:100%;height:auto;border-radius:12px;}
.lp-rich ul,.lp-rich ol{margin-top:12px;padding-left:22px;display:grid;gap:6px;}
.lp-rich blockquote{border-left:2px solid var(--oro);padding-left:14px;color:var(--piedra);font-style:italic;margin-top:12px;}
.lp-rich a{color:var(--oro);text-decoration:underline;text-underline-offset:3px;}
/* margin-top 0: el aire tras el título ya lo pone .lp-hero-head (margin-bottom). */
.lp-hero .lp-rich{font-size:18.5px;color:var(--piedra);max-width:520px;margin-top:0;line-height:1.55;}
.band-copy .lp-rich{font-size:16px;color:var(--piedra);margin-top:16px;line-height:1.6;max-width:520px;}
.nl-copy .lp-rich{font-size:17px;color:var(--piedra);margin-top:18px;line-height:1.55;max-width:520px;}
/* La media de una sección puede ser video subido o embed (además de imagen). */
.imgframe video,.imgframe iframe{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border:0;}
.imgframe.imgframe-embed{aspect-ratio:16/9 !important;max-height:none;}
/* Bordes esfumados (editor de imagen): el marco desaparece (sin borde, sin fondo,
   sin marca de agua) y la imagen se funde con el fondo de la página vía la máscara
   inline que genera el render (mask-image con dos gradientes). */
.imgframe.imgframe--fade{border:none;background:none;box-shadow:none;}
.imgframe.imgframe--fade::after{display:none;}
/* Bloque libre (sección "texto") */
.lp-texto{padding:56px 24px;}
.lp-texto--angosto .lp-rich{max-width:720px;margin:0 auto;}
.lp-texto .lp-rich{font-size:16.5px;line-height:1.65;color:var(--hueso);}
.lp-texto .lp-rich h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,36px);line-height:1.15;margin-top:26px;}
.lp-texto .lp-rich h3{font-weight:600;font-size:20px;margin-top:20px;}
.lp-texto .lp-rich iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;margin-top:12px;}
/* Cierre con botones (sección "cta") */
.lp-ctaband{padding:72px 0;border-top:.5px solid var(--line);text-align:center;}
.lp-ctaband h2{font-family:'Salvaterra',sans-serif;font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.1;margin-top:14px;}
.lp-ctaband .lp-rich{font-size:16.5px;color:var(--piedra);max-width:560px;margin:16px auto 0;line-height:1.6;}
.lp-ctaband-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
@media(max-width:560px){.lp-ctaband-btns{flex-direction:column;align-items:stretch;}}

/* ===========================================================================
   LANDING · bandas de Recursos GRATIS vs PREMIUM (rediseño 2026-07)
   ---------------------------------------------------------------------------
   Cada grilla vive en una BANDA de ancho completo (.res-band): el fondo y las
   líneas con brillo (.res-line) cruzan TODA la página. Identidad por clase:
     res-band--free    → verde tenue sobre tono carbón (accesible, cercano)
     res-band--premium → banda oscura de lujo con auras y texturas ORO
   El encabezado (.res-head) es idéntico en ambas → títulos alineados igual.
   Las variables --lp-* del editor de estilo del panel SIGUEN mandando: acá solo
   se enriquecen los fallbacks (si el admin definió un color/tamaño, gana él).
   =========================================================================== */
.res-band{position:relative;margin-top:64px;padding:72px 0 64px;overflow:hidden;}
.res-band+.res-band{margin-top:0;}
.res-band .free-grid{padding-bottom:0;}
.res-band .empty{padding:20px 0 6px;}

/* Fondo GRATIS: aura verde que baja desde la línea superior, sobre carbón. */
.res-band--free{
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(120,158,110,.16), transparent 62%),
    radial-gradient(55% 45% at 8% 100%, rgba(120,158,110,.07), transparent 72%),
    var(--carbon);
}
/* Fondo PREMIUM: profundo casi negro con auras doradas y un rayado diagonal
   finísimo (textura de "papel de lujo"). Notablemente distinto al resto. */
.res-band--premium{
  background:
    radial-gradient(100% 75% at 50% 0%, rgba(179,153,82,.18), transparent 62%),
    radial-gradient(50% 42% at 90% 100%, rgba(179,153,82,.09), transparent 72%),
    repeating-linear-gradient(115deg, rgba(179,153,82,.03) 0 1px, transparent 1px 12px),
    linear-gradient(180deg,#211E1A 0%,#181613 100%);
}
/* Con imagen de fondo del editor (lp-grid-fondo) la banda ya no es "tarjeta":
   ocupa todo el ancho, sin radio ni padding lateral extra. */
.res-band.lp-grid-fondo{border-radius:0;padding-left:0;padding-right:0;}

/* Líneas con efecto (elementos <i>, no pseudos: conviven con lp-grid-fondo). */
.res-line{position:absolute;left:0;right:0;height:2px;pointer-events:none;z-index:2;
  background-size:220% 100%;animation:lp-shimmer 3.8s linear infinite;}
.res-line-top{top:0;}
.res-line-bot{bottom:0;opacity:.55;animation-direction:reverse;}
.res-band--free .res-line{background-image:linear-gradient(90deg,transparent 8%,rgba(143,191,127,.9) 50%,transparent 92%);}
.res-band--premium .res-line{background-image:linear-gradient(90deg,transparent 4%,var(--oro) 35%,#F1E0AE 50%,var(--oro) 65%,transparent 96%);}
.res-band--premium .res-line-top{box-shadow:0 0 22px rgba(179,153,82,.4);}
@keyframes lp-shimmer{0%{background-position:220% 0}100%{background-position:-220% 0}}

/* --- Encabezado: MISMA estructura y tamaño en ambas bandas (centrado, con
   filetes a los lados del título). max() pone un piso al tamaño: aunque una
   sección tenga guardado un --lp-sec-titulo-tam chico, los dos títulos se ven
   grandes e iguales; un tamaño mayor elegido en el panel sigue ganando. --- */
.res-head{text-align:center;max-width:780px;margin:0 auto 42px;}
.res-band .sec-title{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 14px;
  font-size:max(var(--lp-sec-titulo-tam,0px),clamp(24px,3.4vw,34px));font-weight:800;letter-spacing:.14em;line-height:1.15;}
.res-band .sec-title::before,.res-band .sec-title::after{content:"";height:1px;flex:1;max-width:150px;}
.res-band .sec-sub{margin:0 auto;font-size:max(var(--lp-sec-sub-tam,0px),clamp(15px,2vw,18.5px));}
.res-band--free .sec-title{color:var(--lp-sec-titulo-color,#A6D296);}
.res-band--free .sec-title::before{background:linear-gradient(90deg,transparent,rgba(143,191,127,.55));}
.res-band--free .sec-title::after{background:linear-gradient(90deg,rgba(143,191,127,.55),transparent);}
/* Título premium: texto con degradado de oro pulido que "respira" (sheen). Si el
   panel define un color, ese color tapa el degradado (gana el admin). */
.res-band--premium .sec-title{color:var(--lp-sec-titulo-color,transparent);
  background:linear-gradient(100deg,#8A7239,var(--oro) 30%,#EDDCA9 50%,var(--oro) 70%,#8A7239);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  animation:res-gold-sheen 5.5s ease-in-out infinite;}
.res-band--premium .sec-title::before{background:linear-gradient(90deg,transparent,rgba(179,153,82,.65));}
.res-band--premium .sec-title::after{background:linear-gradient(90deg,rgba(179,153,82,.65),transparent);}
@keyframes res-gold-sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* --- Tarjetas: nada genéricas. Relieve con degradado, barra de acento superior
   que se extiende al hover, brillo de esquina (gratis) o barrido de luz
   (premium), y CTA en píldora que se enciende. Los --lp-* del editor mandan. --- */
.res-band .free-card{position:relative;overflow:hidden;isolation:isolate;
  background:var(--lp-card-bg,linear-gradient(160deg,var(--card2) 0%,var(--card) 58%));
  border:var(--lp-borde-w,1px) solid var(--lp-card-borde,var(--line2));
  border-radius:var(--lp-radio,16px);
  padding:var(--lp-padding,26px 24px 22px);
  box-shadow:var(--lp-sombra,0 10px 30px rgba(0,0,0,.22));}
.res-band--premium .free-card{
  background:var(--lp-card-bg,linear-gradient(155deg,rgba(179,153,82,.15) 0%,rgba(179,153,82,.04) 40%,transparent 65%),linear-gradient(160deg,var(--card2),var(--card)));
  border-color:var(--lp-card-borde,rgba(179,153,82,.32));
  box-shadow:var(--lp-sombra,0 14px 34px rgba(0,0,0,.30),0 0 0 1px rgba(179,153,82,.08));}
.res-band .free-card h3{font-size:var(--lp-titulo-tam,19px);letter-spacing:.01em;}
/* Barra de acento superior: nace corta y se extiende al pasar el mouse. */
.res-band .free-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  transform:scaleX(.35);transform-origin:left;transition:transform .35s ease;z-index:1;}
.res-band--free .free-card::before{background:linear-gradient(90deg,#8FBF7F,rgba(143,191,127,0));}
.res-band--premium .free-card::before{background:linear-gradient(90deg,var(--oro),#EDDCA9 45%,rgba(179,153,82,0));}
.res-band .free-card:hover::before{transform:scaleX(1);}
/* Gratis: brillo suave en la esquina inferior. Premium: barrido de luz dorada. */
.res-band--free .free-card::after{content:"";position:absolute;right:-44px;bottom:-44px;width:140px;height:140px;
  border-radius:50%;background:radial-gradient(circle,rgba(143,191,127,.12),transparent 70%);pointer-events:none;z-index:0;}
.res-band--premium .free-card::after{content:"";position:absolute;top:-60%;left:-85%;width:50%;height:220%;
  transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(244,227,178,.11),transparent);
  transition:left .65s ease;pointer-events:none;z-index:2;}
.res-band--premium .free-card:hover::after{left:160%;}
/* Hover por defecto de cada banda (solo si la grilla NO tiene estilo del panel:
   con estilo, mandan las clases lp-hover-* elegidas por el admin). */
.res-band--free .free-grid:not(.lp-grid-styled) .free-card:hover{transform:translateY(-5px);
  border-color:rgba(143,191,127,.55);box-shadow:0 20px 44px rgba(0,0,0,.35),0 0 0 1px rgba(143,191,127,.22);}
.res-band--premium .free-grid:not(.lp-grid-styled) .free-card:hover{transform:translateY(-5px);
  border-color:rgba(179,153,82,.6);box-shadow:0 22px 48px rgba(0,0,0,.45),0 0 30px rgba(179,153,82,.16),0 0 0 1px rgba(179,153,82,.32);}

/* Etiquetas: la de gratis, chip verde con degradado; la PREMIUM, chip de oro
   macizo con destello ✦ y sombra (jerarquía de valor a primera vista). */
.res-band .res-tag{font-size:10.5px;letter-spacing:.16em;padding:5px 13px;margin-bottom:14px;z-index:1;}
.res-band .res-tag.free{background:linear-gradient(120deg,rgba(120,158,110,.24),rgba(120,158,110,.10));}
.res-band .res-tag.premium{background:linear-gradient(120deg,#D8BC72,var(--oro) 45%,#8A7239);color:#1A150C;
  border:none;box-shadow:0 4px 14px rgba(179,153,82,.35);}
.res-band .res-tag.premium::before{content:"✦";margin-right:6px;}

/* CTA de la tarjeta como píldora que se enciende al hover (en premium se llena
   de oro: el ojo va directo a "Obtener acceso"). */
.res-band .free-card .go{margin-top:20px;align-self:flex-start;display:inline-flex;align-items:center;
  font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;border:1px solid;
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;z-index:1;}
.res-band--free .free-card .go{color:var(--lp-acento,#9ECF8D);border-color:rgba(143,191,127,.4);}
.res-band--free .free-card:hover .go{background:rgba(143,191,127,.16);border-color:rgba(143,191,127,.8);}
.res-band--premium .free-card .go{color:var(--lp-acento,var(--oro));border-color:rgba(179,153,82,.45);}
.res-band--premium .free-card:hover .go{background:linear-gradient(120deg,#D8BC72,var(--oro));color:#1A150C;
  border-color:var(--oro);box-shadow:0 6px 20px rgba(179,153,82,.35);}
.res-band .free-card .go.muted{color:var(--piedra);border-color:var(--line2);}
.res-band--premium .free-card:hover .go.muted{background:none;color:var(--piedra);border-color:var(--line2);box-shadow:none;}
/* En layout lista (editor) el CTA vuelve a alinearse a la derecha. */
.res-band .lp-lista .free-card .go{margin:0 0 0 auto;}

/* Precio premium: número grande en oro pulido (degradado de texto). */
.res-band--premium .prod-price{margin-top:14px;font-size:22px;font-weight:800;letter-spacing:.01em;
  color:var(--lp-acento,transparent);background:linear-gradient(100deg,var(--oro),#EDDCA9 60%,var(--oro));
  -webkit-background-clip:text;background-clip:text;}

@media(max-width:560px){
  .res-band{padding:56px 0 48px;}
  .res-band .sec-title{gap:12px;letter-spacing:.08em;}
  .res-band .sec-title::before,.res-band .sec-title::after{max-width:48px;}
}
@media(prefers-reduced-motion:reduce){
  .res-line,.res-band--premium .sec-title{animation:none;}
  .res-band--premium .free-card::after{display:none;}
}

/* Nav: ancla "Recursos GRATIS" resaltada — píldora verde con pulso (llama la
   atención sin gritar). */
.nav-links a.nav-gratis{color:#8fbf7f;font-weight:600;padding:5px 13px;border-radius:999px;border:1px solid rgba(120,158,110,.5);background:rgba(120,158,110,.12);transition:color .2s ease,background .2s ease,border-color .2s ease;animation:lp-gratis-pulse 2.4s ease-in-out infinite;}
.nav-links a.nav-gratis:hover{color:#c0e6b0;border-color:#8fbf7f;background:rgba(120,158,110,.22);}
.nav-links a.nav-gratis.on::after{display:none;}
@keyframes lp-gratis-pulse{0%,100%{box-shadow:0 0 0 0 rgba(120,158,110,.40)}50%{box-shadow:0 0 0 7px rgba(120,158,110,0)}}
@media(prefers-reduced-motion:reduce){.nav-links a.nav-gratis{animation:none;}}

/* Logo del header: nombre + bajada "Vínculos modernos". */
.nav-brandtxt{display:flex;flex-direction:column;line-height:1.05;}
.nav-sub{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin-top:2px;}

/* ======================================================================
   Bloques LONG-FORM (guía): voces · manifiesto · tarjetas · pasos ·
   precio · preguntas. Todo sobre la paleta y la tipografía de marca.
   Dos adornos compartidos: el "reloj" (kicker narrativo con una línea que
   se apaga a la derecha) y el "remate" (frase de cierre en serif con oro).
   ====================================================================== */
.lp-narrow{max-width:680px;}
.lp-reloj{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.lp-reloj span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--arena);font-weight:600;white-space:nowrap;}
.lp-reloj::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--line2),transparent);}
.lp-remate{font-family:'Salvaterra',sans-serif;font-weight:400;font-size:clamp(19px,2.6vw,26px);line-height:1.42;
  color:var(--hueso);border-left:2px solid var(--oro);padding-left:20px;margin-top:34px;max-width:32em;}

/* --- Voces (problema): dos citas contrapuestas --- */
.lp-voces-band{padding:64px 0;border-top:.5px solid var(--line);}
.lp-voces-band h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.01em;}
.lp-voces-intro{margin-top:18px;color:var(--piedra);font-size:16.5px;line-height:1.65;}
.lp-voces{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:.5px solid var(--line);border-radius:14px;overflow:hidden;margin:28px 0;}
.lp-voz{background:var(--card);padding:22px 20px;}
.lp-voz-q{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--arena);margin-bottom:10px;}
.lp-voz p{font-family:'Salvaterra',sans-serif;font-size:17px;line-height:1.45;color:var(--hueso);margin:0;}
.lp-voces-cierre{color:var(--piedra);font-size:16px;line-height:1.6;max-width:34em;}
@media(max-width:600px){.lp-voces{grid-template-columns:1fr;}}

/* --- Manifiesto (prosa angosta) --- */
.lp-manifiesto{padding:64px 0;border-top:.5px solid var(--line);}
.lp-manifiesto h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.01em;margin-bottom:18px;}
.lp-manifiesto .lp-rich{font-size:16.5px;line-height:1.7;color:var(--piedra);}
.lp-manifiesto .lp-rich strong{color:var(--hueso);}

/* --- Encabezado centrado compartido (tarjetas / pasos) --- */
.lp-tj-head{text-align:center;max-width:680px;margin:0 auto;}
.lp-tj-head .kicker{display:block;margin-bottom:12px;}
.lp-tj-head h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.14;letter-spacing:-.01em;}
.lp-tj-sub{color:var(--piedra);font-size:16px;margin-top:12px;line-height:1.55;}

/* --- Tarjetas (grilla): 3 variantes --- */
.lp-tarjetas{padding:64px 0;border-top:.5px solid var(--line);}
.lp-tj-grid{display:grid;grid-template-columns:repeat(var(--tj-cols,3),1fr);gap:16px;margin-top:38px;}
.lp-tj-card{background:var(--card);border:.5px solid var(--line);border-radius:16px;padding:26px 24px;}
.lp-tj-card h3{font-size:14.5px;font-weight:600;letter-spacing:.06em;color:var(--oro);text-transform:uppercase;margin-bottom:12px;}
.lp-tj-card p{font-size:15px;line-height:1.65;color:var(--piedra);}
/* variante objeción: la "a" es una objeción destacada en itálica */
.lp-tj-obj .lp-tj-q{font-family:'Salvaterra',sans-serif;font-style:italic;font-weight:400;font-size:19px;line-height:1.3;color:var(--oro);margin-bottom:12px;}
.lp-tj-obj p:last-child{color:var(--piedra);font-size:15px;line-height:1.65;}
/* variante lista: sin caja, separadas por una línea superior (1 columna) */
.lp-tj--lista .lp-tj-grid{grid-template-columns:1fr;gap:0;max-width:720px;margin-left:auto;margin-right:auto;}
.lp-tj-item{border-top:.5px solid var(--line2);padding:22px 0;}
.lp-tj-item h3{font-family:'Salvaterra',sans-serif;font-weight:600;font-size:20px;color:var(--hueso);margin-bottom:8px;}
.lp-tj-item p{color:var(--piedra);font-size:15px;line-height:1.6;}
.lp-tarjetas .lp-remate{margin:34px auto 0;}
@media(max-width:820px){.lp-tj-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.lp-tj-grid{grid-template-columns:1fr;}}

/* --- Pasos numerados --- */
.lp-pasos{padding:64px 0;border-top:.5px solid var(--line);}
.lp-pasos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;}
.lp-paso{border-top:1px solid var(--oro);padding-top:18px;}
.lp-paso-n{font-family:'Salvaterra',sans-serif;font-weight:900;font-size:40px;line-height:1;color:var(--oro);display:block;margin-bottom:14px;}
.lp-paso h3{font-family:'Salvaterra',sans-serif;font-weight:600;font-size:20px;color:var(--hueso);margin-bottom:8px;}
.lp-paso p{color:var(--piedra);font-size:15px;line-height:1.6;}
.lp-longform-cta{margin-top:36px;text-align:center;}
@media(max-width:720px){.lp-pasos-grid{grid-template-columns:1fr;gap:6px;}}

/* --- Precio / oferta --- */
.lp-precio-band{padding:64px 0;border-top:.5px solid var(--line);}
.lp-precio-in{text-align:center;}
.lp-precio-band .kicker{display:block;margin-bottom:12px;}
.lp-precio-band h2{font-family:'Salvaterra',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,38px);margin-bottom:28px;}
.lp-precio{border:.5px solid var(--oro);border-radius:18px;background:var(--card);padding:clamp(28px,5vw,44px);max-width:460px;margin:0 auto;
  box-shadow:0 0 0 1px rgba(179,153,82,.12),0 22px 60px rgba(0,0,0,.35);}
.lp-precio-qual{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra);}
.lp-precio-val{font-family:'Salvaterra',sans-serif;font-weight:900;font-size:clamp(48px,9vw,72px);line-height:1;color:var(--oro);margin:8px 0 22px;}
.lp-precio-list{list-style:none;text-align:left;display:inline-block;margin:0 0 26px;padding:0;}
.lp-precio-list li{position:relative;padding:7px 0 7px 22px;font-size:14.5px;color:var(--piedra);line-height:1.5;}
.lp-precio-list li::before{content:"△";position:absolute;left:0;top:10px;color:var(--oro);font-size:10px;}
.lp-precio-cta .btn{width:100%;}
.lp-precio-nota{color:var(--piedra);font-size:14px;line-height:1.6;max-width:520px;margin:24px auto 0;}

/* --- Preguntas (acordeón nativo <details>) --- */
.lp-faq{padding:64px 0;border-top:.5px solid var(--line);}
.lp-faq .lp-tj-head{margin-bottom:30px;}
.lp-faq-list{margin:0 auto;}
.lp-faq-item{border-bottom:.5px solid var(--line2);}
.lp-faq-item summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:16.5px;color:var(--hueso);font-weight:500;transition:color .2s ease;}
.lp-faq-item summary:hover{color:var(--oro);}
.lp-faq-item summary::-webkit-details-marker{display:none;}
.lp-faq-item summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:'Salvaterra',sans-serif;font-size:24px;color:var(--oro);}
.lp-faq-item[open] summary::after{content:"–";}
.lp-faq-a{padding:0 0 22px;color:var(--piedra);font-size:15.5px;line-height:1.65;max-width:640px;}


/* EL ANCLA PROPIA de una sección: un punto de aterrizaje invisible, puesto
   antes del bloque para no pisar el id que algunas secciones ya usan. El
   desplazamiento deja aire para la cabecera fija, que si no tapa el título. */
.lp-ancla{ display:block; position:relative; top:-88px; visibility:hidden; height:0; }

/* Los botones de una sección de contenido: centrados y con aire, para que se
   lean como el cierre del bloque y no como parte de la última tarjeta. */
.lp-bloque-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:38px; }

/* ============================================================================
   REPRODUCTOR DEL ÁREA PRIVADA
   Vivía dentro de biblioteca.html. Se mudó acá cuando el reproductor pasó a
   vivir en el armazón (services/privShell.ts) para no cortarse al navegar: si
   las reglas se quedaban en esa página, en /perfil el bloque aparecía sin el
   display:none y se veía una barra vacía.
   ========================================================================= */
.rep{position:fixed;left:0;right:0;bottom:0;background:var(--card2);
  border-top:.5px solid var(--line2);padding:12px 22px;display:none;z-index:40;}
.rep.on{display:block;}
.rep-in{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:14px;}
.rep-tit{font-size:13px;color:var(--hueso);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rep-t{font-size:11.5px;color:var(--piedra);font-variant-numeric:tabular-nums;flex:none;}
.rep audio{width:100%;}
.rep-barra{width:100%;margin-top:8px;}

/* ============================================================================
   LA CUENTA EN BAJA
   Reemplaza la vista entera y no es un aviso arriba de la biblioteca: enseñarle
   sus audios con candado a alguien que YA los compró sería decirle que los
   perdió, y no los perdió. Nada se borró.
   ========================================================================= */
.baja-caja{max-width:780px;margin:0 auto;padding:60px 22px 120px;}
.baja{border:.5px solid var(--oro);border-radius:18px;padding:clamp(26px,5vw,42px);
  background:linear-gradient(150deg,rgba(179,153,82,.10),transparent 66%);}
.baja .eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);font-weight:600;}
.baja h1{font-size:clamp(24px,4.4vw,32px);font-weight:300;letter-spacing:-.02em;
  line-height:1.15;margin-top:14px;}
.baja .baja-p{color:var(--piedra);font-size:14.5px;line-height:1.7;margin-top:16px;max-width:44em;}
.baja-acs{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px;}
.baja-si{background:var(--oro);color:#1D1C21;border:0;border-radius:9px;padding:14px 22px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;}
.baja-si:hover{filter:brightness(1.08);}
.baja-si:disabled{opacity:.6;cursor:default;}
.baja-no{color:var(--piedra);font-size:13.5px;text-decoration:underline;text-underline-offset:4px;}
.baja-err{color:#F2B8A2;font-size:13px;margin-top:14px;min-height:1em;}

/* ============================================================================
   «ESTÁS VIENDO COMO…» · sólo para cuentas admin
   Un admin tiene todos los productos sin haberlos comprado, así que la pantalla
   que ve NO es la que ve un cliente. Este conmutador es la única forma de
   revisar la biblioteca bloqueada sin cerrar sesión y crearse una cuenta falsa.
   ========================================================================= */
/* Vive en la barra de arriba, a la izquierda de «Mi perfil» (18/08/2026). Antes
   era una franja con su explicación encima del contenido: un renglón entero de
   todas las pantallas, gastado en una aclaración interna que sólo mira un
   admin. Los dos botones solos dicen lo mismo. */
/* El conmutador «CON compra / SIN compra» se maqueta en armazon.css y no acá:
   vive dentro del marco de la aplicación, y `.ap-der button{padding:0}` de esa
   hoja —que carga DESPUÉS— le ganaba a todo lo que se declarara en site.css.
   El botón salía sin padding y el toggle se veía apretado. */

/* ===== VENTA DE LA APP (11/11/2026) — `escena` y `pantallas` =====
   Espacios de la serie de Fibonacci (8·13·21·34·55·89) y tipografía en pasos
   áureos, como el resto del diseño de la app (doctrina/salvaterra.md §10). */

/* --- escena: portada a pantalla completa con la foto de fondo --- */
.lp-escena{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,920px);display:flex;border-bottom:.5px solid var(--line);background:#141317;}
.lp-esc-foto{position:absolute;top:0;right:0;bottom:0;width:68%;z-index:-1;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%);mask-image:linear-gradient(to right,transparent 0,#000 42%);}
.lp-esc-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  filter:grayscale(.9) contrast(1.06) brightness(.72);animation:lpEscFoto 1.6s cubic-bezier(.2,.7,.2,1) both;}
.lp-esc-foto::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,#141317 0,rgba(20,19,23,0) 34%),
  radial-gradient(120% 90% at 78% 30%,rgba(179,153,82,.10),rgba(20,19,23,0) 60%);}
@keyframes lpEscFoto{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}}
.lp-esc-in{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,610px) 1fr;gap:34px;align-items:end;padding-top:76px;padding-bottom:55px;}
.lp-esc-copy>*{animation:lpEscSube .9s cubic-bezier(.2,.7,.2,1) both;}
.lp-esc-copy>*:nth-child(2){animation-delay:.08s;}.lp-esc-copy>*:nth-child(3){animation-delay:.16s;}
.lp-esc-copy>*:nth-child(4){animation-delay:.24s;}.lp-esc-copy>*:nth-child(5){animation-delay:.32s;}
@keyframes lpEscSube{from{opacity:0;transform:translateY(21px);}to{opacity:1;transform:none;}}
.lp-escena h1{font-family:'Salvaterra',sans-serif;font-weight:300;font-size:clamp(40px,4.7vw,68px);line-height:1.08;letter-spacing:-.015em;margin:21px 0;}
.lp-escena h1 .oro,.lp-escena h1 b,.lp-escena h1 strong{color:var(--oro);font-weight:400;}
.lp-esc-lead{font-size:18px;line-height:1.625;color:var(--piedra);max-width:480px;}
.lp-esc-lead p{margin:0;}
.lp-esc-lista{margin-top:34px;border-top:.5px solid var(--line2);}
.lp-esc-fila{display:grid;grid-template-columns:34px 1fr auto;gap:13px;align-items:center;padding:13px 0;border-bottom:.5px solid var(--line2);
  transition:background .3s ease,padding .3s ease;}
.lp-esc-fila:hover{background:linear-gradient(to right,rgba(179,153,82,.07),rgba(179,153,82,0));padding-left:8px;}
.lp-esc-n{font-size:12px;letter-spacing:.08em;color:var(--piedra);font-variant-numeric:tabular-nums;}
.lp-esc-t b{display:block;font-weight:400;font-size:20px;line-height:1.3;color:var(--hueso);}
.lp-esc-t i{display:block;font-style:normal;font-size:13px;color:var(--piedra);margin-top:3px;}
.lp-esc-ir{font-size:13px;color:var(--hueso);border:.5px solid var(--line2);border-radius:99px;padding:8px 16px;white-space:nowrap;transition:border-color .3s ease,color .3s ease,transform .3s ease;}
.lp-esc-fila:hover .lp-esc-ir{border-color:var(--oro);color:var(--oro);transform:translateX(3px);}
.lp-esc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:13px 21px;margin-top:34px;}
.lp-esc-nota{font-size:13px;color:var(--piedra);}
.lp-esc-cita{justify-self:end;align-self:end;max-width:340px;margin:0;animation:lpEscSube 1.1s .5s cubic-bezier(.2,.7,.2,1) both;}
.lp-esc-cita blockquote{font-size:22px;line-height:1.4;font-weight:300;font-style:italic;color:var(--hueso);margin:0;}
.lp-esc-cita figcaption{margin-top:13px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--piedra);}
.lp-escena--sin .lp-esc-in{grid-template-columns:minmax(0,720px);}
@media(max-width:860px){
  .lp-escena{min-height:0;}
  .lp-esc-foto{left:0;width:100%;bottom:auto;height:62vh;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent);}
  .lp-esc-foto::after{background:linear-gradient(to top,#141317 0,rgba(20,19,23,0) 55%);}
  .lp-esc-in{grid-template-columns:1fr;padding-top:38vh;padding-bottom:34px;}
  .lp-escena--sin .lp-esc-in{padding-top:55px;}
  .lp-esc-cita{justify-self:start;max-width:none;margin-top:13px;}
  .lp-esc-cita blockquote{font-size:20px;}
  .lp-esc-cta .btn{width:100%;}
}

/* --- pantallas: capturas de la app en un marco de teléfono --- */
.lp-pantallas{padding:89px 0;border-top:.5px solid var(--line);overflow:hidden;}
.lp-pantallas .lp-tj-head h2{font-weight:300;font-size:clamp(30px,4.2vw,52px);line-height:1.15;letter-spacing:-.01em;}
.lp-pan-fila{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;max-width:960px;margin:89px auto 0;scroll-margin-top:89px;}
.lp-pan-fila--rev .lp-pan-tel{order:2;}
.lp-pan-tel{display:flex;justify-content:center;position:relative;}
.lp-pan-tel::before{content:"";position:absolute;inset:-13% -21%;z-index:0;background:radial-gradient(closest-side,rgba(179,153,82,.16),rgba(179,153,82,0));filter:blur(8px);}
.lp-tel{position:relative;z-index:1;width:min(300px,72vw);aspect-ratio:393/852;border-radius:44px;padding:8px;
  background:linear-gradient(145deg,#3d3b44,#17161b 55%,#2b2a31);
  box-shadow:0 34px 89px rgba(0,0,0,.55),0 0 0 1px rgba(237,236,229,.09),inset 0 0 0 1px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease;}
.lp-tel img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px;display:block;background:#1D1C21;}
.lp-pan-fila:hover .lp-tel{transform:translateY(-8px);box-shadow:0 55px 110px rgba(0,0,0,.6),0 0 0 1px rgba(179,153,82,.28),inset 0 0 0 1px rgba(0,0,0,.6);}
.lp-pan-n{display:block;font-size:13px;letter-spacing:.26em;color:var(--oro);font-weight:600;font-variant-numeric:tabular-nums;}
.lp-pan-txt h3{font-family:'Salvaterra',sans-serif;font-weight:300;font-size:clamp(26px,3.3vw,42px);line-height:1.2;letter-spacing:-.01em;margin:13px 0 21px;}
.lp-pan-txt p{font-size:17px;line-height:1.65;color:var(--piedra);max-width:440px;}
.lp-pantallas .lp-bloque-cta{margin-top:89px;}
html.lp-js .lp-rev{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
html.lp-js .lp-rev.lp-in{opacity:1;transform:none;}
@media(max-width:860px){
  .lp-pantallas{padding:55px 0;}
  .lp-pan-fila{grid-template-columns:1fr;gap:34px;margin-top:55px;}
  .lp-pan-fila--rev .lp-pan-tel{order:0;}
  .lp-pan-txt{text-align:center;}
  .lp-pan-txt p{margin:0 auto;}
}
@media(prefers-reduced-motion:reduce){.lp-esc-foto img,.lp-esc-copy>*,.lp-esc-cita{animation:none;}.lp-tel{transition:none;}}