/* [cortex 2026-09-30 fase1-landings v4] Las tres landings de producto con diseño PROPIO cada una (mxnoz: «es el mismo
   diseño; debe ser referenciado pero no quiero páginas iguales»). Piezas calcadas de las pantallas de la portada: la tarjeta
   «Cobrado hoy», la agenda de la semana, los paneles de color apilados de «Publicar es el primer día», la banda azul oscura
   de «Y la misma web lo hace todo», los pasos en zigzag y el panel con acordeón. Marca: #2455e6 (una sección por página),
   #10225e, #465884, #eef2fd; Outfit en titulares, Hanken en el cuerpo; botones en píldora; sin puntos de estado, sin
   degradados, sin emojis, sin cursivas. Lo mueve /landing4.js. */
:root{--l4-azul:#2455e6;--l4-navy:#10225e;--l4-texto:#465884;--l4-suave:#6b7ba3;--l4-lav:#eef2fd;--l4-borde:#dce4f8;
  --l4-menta:#c6e8da;--l4-lila:#e1defb;--l4-melo:#fbe2d3;--l4-cielo:#dbe7fd;--l4-wa:#0b5c50;--l4-waverde:#e3f6df;
  --l4-sombra:0 34px 70px -38px rgba(16,34,94,.45);--l4-sombra2:0 18px 40px -24px rgba(16,34,94,.4);
  --l4-t:"Outfit",ui-sans-serif,system-ui,sans-serif;--l4-c:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --l4-ease:cubic-bezier(.22,1,.36,1)}
.l4{color:var(--l4-texto);font-family:var(--l4-c)}
.l4 *{box-sizing:border-box}
.l4 img{display:block;max-width:100%}
.l4-env{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.l4-eti{margin:0 0 16px;font:700 12px/1 var(--l4-t);letter-spacing:.12em;text-transform:uppercase;color:var(--l4-azul)}
.l4 h1,.l4 h2,.l4 h3{font-family:var(--l4-t);color:var(--l4-navy);font-weight:700;margin:0;letter-spacing:-.015em}
.l4 h1{font-size:clamp(38px,5.2vw,68px);line-height:1.04}
.l4-h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08}
.l4-sub{margin:14px 0 0;font-size:18px;line-height:1.55;color:var(--l4-texto);max-width:620px}
.l4-centro,.l4 .l4-centro{text-align:center;margin-left:auto;margin-right:auto}
.l4-marca{display:inline-block;padding:0 .18em;border-radius:.22em;background:#fff;box-shadow:0 10px 24px -16px rgba(16,34,94,.5)}
.l4-marca-lav{background:var(--l4-lav);box-shadow:none}
.l4-bajada{margin:20px 0 0;font-size:19px;line-height:1.55;max-width:600px}
.l4-sec{padding:120px 0}
.l4 svg{flex:none;width:18px;height:18px}
.l4-caja-fila svg{width:14px;height:14px}

/* ---------- barra de la portada: la frase viaja al alta (como «Cuéntanos tu negocio» de la portada) ---------- */
.l4-barra{display:flex;align-items:center;gap:8px;margin:32px 0 0;padding:7px 7px 7px 22px;max-width:560px;border-radius:999px;background:#fff;
  border:1px solid var(--l4-borde);box-shadow:var(--l4-sombra2)}
.l4-barra input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 16px/1.2 var(--l4-c);color:var(--l4-navy);padding:12px 0}
.l4-barra input::placeholder{color:#8a97b8;opacity:1}
.l4-barra button{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:14px 22px;border-radius:999px;
  background:var(--l4-azul);color:#fff;font:600 15px/1 var(--l4-t);white-space:nowrap;transition:transform .3s var(--l4-ease)}
.l4-barra button:hover{transform:translateY(-1px)}
.l4-barra button svg{width:18px;height:18px}
.l4-nota{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--l4-suave)}
.l4-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;background:var(--l4-navy);color:#fff;
  font:600 15px/1 var(--l4-t);text-decoration:none;transition:transform .3s var(--l4-ease)}
.l4-btn:hover{transform:translateY(-2px)}
.l4-btn svg{width:18px;height:18px}
.l4-btn-claro{background:#fff;color:var(--l4-navy);border:1px solid var(--l4-borde)}

/* ---------- piezas pequeñas compartidas ---------- */
.l4-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;background:#fff;
  box-shadow:var(--l4-sombra2);font-size:13px;line-height:1.3;color:var(--l4-suave);white-space:nowrap}
.l4-chip b{display:block;font:600 14px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--l4-lav);color:var(--l4-azul)}
.l4-ic svg{width:17px;height:17px}
.l4-ic-ok{background:#dff3e6;color:#1f7a4a}
.l4-tarjeta{border-radius:24px;background:#fff;box-shadow:var(--l4-sombra);border:1px solid rgba(220,228,248,.7)}
.l4-rev{opacity:0;transform:translateY(26px);transition:opacity .8s var(--l4-ease),transform .8s var(--l4-ease)}
.l4-rev.l4-in{opacity:1;transform:none}
.l4-flota{animation:l4Flota 5s ease-in-out infinite}
@keyframes l4Flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes l4Entra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- WhatsApp (la conversación de Nogal, como en la portada) ---------- */
.l4-wa{display:flex;flex-direction:column;border-radius:28px;background:#fff;overflow:hidden;box-shadow:var(--l4-sombra)}
.l4-wa-cab{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--l4-wa);color:#fff}
.l4-wa-cab b{display:block;font:600 15px/1.2 var(--l4-t)}
.l4-wa-cab small{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.72)}
.l4-wa-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#25d366;color:#fff}
.l4-wa-av svg{width:20px;height:20px}
.l4-wa-chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 14px;background:#f4f1ec}
.l4-m{position:relative;max-width:84%;margin:0;padding:9px 12px 20px;border-radius:14px;font:500 14px/1.4 var(--l4-c);color:#1d2a4d;
  box-shadow:0 1px 1px rgba(16,34,94,.08)}
.l4-m>i{position:absolute;right:10px;bottom:5px;font-style:normal;font-size:10.5px;color:#8a97b8}
.l4-m.cli{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.l4-m.bot{align-self:flex-end;background:var(--l4-waverde);border-top-right-radius:4px}
.l4-m-voz{display:flex;align-items:center;gap:8px;min-width:190px}
.l4-m-voz svg{width:22px;height:22px;color:var(--l4-wa)}
.l4-onda{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.l4-onda i{display:block;flex:1;max-width:3px;border-radius:2px;background:#9fb0cf}
.l4-m-pago{display:flex;flex-direction:column;gap:6px;min-width:210px;padding-bottom:12px}
.l4-m-pago span{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--l4-navy)}
.l4-m-pago em{display:block;margin-top:2px;padding:9px 0;border-radius:10px;background:#fff;text-align:center;font:600 13.5px/1 var(--l4-t);
  font-style:normal;color:var(--l4-wa)}
.l4-m-sis{align-self:center;max-width:90%;padding:6px 12px;border-radius:10px;background:#fff6d9;font-size:12.5px;color:#6b5a1f;box-shadow:none}
.l4-escribe{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f4f1ec}
.l4-escribe span{flex:1;padding:10px 14px;border-radius:999px;background:#fff;font-size:13px;color:#8a97b8}
.l4-escribe i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--l4-wa);color:#fff}
.l4-escribe i svg{width:17px;height:17px}
.l4-teclea{align-self:flex-end;display:flex;gap:4px;padding:12px 14px;border-radius:14px;border-top-right-radius:4px;background:var(--l4-waverde)}
.l4-teclea b{width:6px;height:6px;border-radius:50%;background:#7c9a86;animation:l4Tec 1s infinite}
.l4-teclea b:nth-child(2){animation-delay:.15s}.l4-teclea b:nth-child(3){animation-delay:.3s}
@keyframes l4Tec{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
[data-l4-chat] [data-paso]{display:none}
[data-l4-chat] [data-paso].l4-sale{display:flex;animation:l4Entra .5s var(--l4-ease) both}
[data-l4-chat] p[data-paso].l4-sale{display:block}
[data-l4-chat] .l4-m-voz[data-paso].l4-sale,[data-l4-chat] .l4-m-pago[data-paso].l4-sale{display:flex}

/* =====================================================================================================
   BOT DE WHATSAPP
   ===================================================================================================== */
/* portada centrada: el teléfono entre dos fotos, con avisos encima (DOM sobre fotos, como la portada) */
.l4-bh{padding:128px 0 40px;background:#fff;overflow:hidden}
.l4-bh-txt{max-width:1000px;margin:0 auto;text-align:center}
.l4-bh h1{font-size:clamp(38px,4.4vw,62px)}
.l4-bh .l4-bajada{max-width:720px}
.l4-bh-txt .l4-bajada{margin-left:auto;margin-right:auto}
.l4-bh-txt .l4-barra{margin-left:auto;margin-right:auto}
.l4-bh-escena{position:relative;height:600px;max-width:1100px;margin:52px auto 0}
.l4-bh-foto{position:absolute;margin:0;border-radius:32px;overflow:hidden;box-shadow:var(--l4-sombra)}
.l4-bh-foto img{width:100%;height:100%;object-fit:cover}
.l4-bh-f1{left:0;top:40px;width:430px;height:470px}
.l4-bh-f2{right:0;top:90px;width:400px;height:440px}
.l4-bh-movil{position:absolute;left:50%;top:0;z-index:3;width:350px;height:580px;margin-left:-175px;border:8px solid #10225e;border-radius:44px}
.l4-bh-movil .l4-wa{height:100%;border-radius:36px}
.l4-bh-c1{right:calc(50% + 150px);top:430px}
.l4-bh-c2{left:calc(50% + 190px);top:150px}
.l4-bh-c3{right:60px;top:430px}
.l4-bh .l4-chip{opacity:0;animation:l4Entra .6s var(--l4-ease) both}
.l4-bh-c2{animation-delay:3.8s!important}.l4-bh-c1{animation-delay:5.6s!important}.l4-bh-c3{animation-delay:7.4s!important}
.l4-apila-movil{display:none}

/* paneles de color apilados que cambian al bajar (portada: «Publicar es el primer día») */
.l4-apila{padding:40px 0 0;background:#fff}
.l4-apila-pista{position:relative;height:420vh}
.l4-apila-fijo{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:84px 0 24px}
.l4-apila-fijo h2{margin-bottom:30px}
.l4-apila-marco{position:relative;padding-top:26px}
.l4-apila-marco:before,.l4-apila-marco:after{content:"";position:absolute;left:3%;right:3%;top:0;height:60px;border-radius:36px;background:var(--l4-lila);opacity:.7}
.l4-apila-marco:after{left:1.5%;right:1.5%;top:13px;background:var(--l4-cielo);opacity:.9}
.l4-apila-caja{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;min-height:min(520px,calc(100vh - 330px));
  padding:48px 56px;border-radius:36px;background:var(--l4-menta);transition:background-color .7s var(--l4-ease)}
.l4-apila-caja[data-color="1"]{background:var(--l4-lila)}
.l4-apila-caja[data-color="2"]{background:var(--l4-melo)}
.l4-apila-caja[data-color="3"]{background:var(--l4-cielo)}
.l4-apila-lista{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.l4-apila-lista li{padding:18px 0;border-bottom:1px solid rgba(16,34,94,.12);cursor:pointer}
.l4-apila-lista li:last-child{border-bottom:0}
.l4-apila-lista h3{font-size:22px;line-height:1.25;color:rgba(16,34,94,.38);transition:color .4s,font-size .4s var(--l4-ease)}
.l4-apila-lista p{max-height:0;overflow:hidden;opacity:0;margin:0;font-size:16.5px;line-height:1.55;color:#2c3d6b;
  transition:max-height .6s var(--l4-ease),opacity .5s,margin .5s}
.l4-apila-lista li.on h3{font-size:30px;color:var(--l4-navy)}
.l4-apila-lista li.on p{max-height:180px;opacity:1;margin-top:12px}
.l4-apila-lista .l4-marca{box-shadow:none}
.l4-apila-lista li:not(.on) .l4-marca{background:transparent}
.l4-apila-rayas{position:absolute;left:0;top:18px;bottom:18px;display:flex;flex-direction:column;gap:8px}
.l4-apila-rayas i{flex:1;width:4px;border-radius:4px;background:rgba(16,34,94,.16);transition:background .4s}
.l4-apila-rayas i.on{background:var(--l4-navy)}
.l4-apila-vista{position:relative;height:440px}
.l4-apila-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(24px) scale(.98);
  transition:opacity .55s var(--l4-ease),transform .7s var(--l4-ease);pointer-events:none}
.l4-apila-panel.on{opacity:1;transform:none}
.l4-apila-fondo{position:absolute;inset:0;border-radius:28px;background:rgba(255,255,255,.4)}
.l4-apila-panel .l4-wa{position:relative;width:min(400px,92%)}
.l4-apila-panel .l4-wa-chat{min-height:220px}
.l4-ped{position:relative;width:min(380px,92%);padding:22px;border-radius:24px;background:#fff;box-shadow:var(--l4-sombra)}
.l4-ped-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--l4-borde)}
.l4-ped-cab b{font:700 18px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-ped-cab small{font-size:12.5px;color:var(--l4-suave)}
.l4-ped-l{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:14.5px;color:var(--l4-navy)}
.l4-ped-l+.l4-ped-l{border-top:1px dashed var(--l4-borde)}
.l4-ped-l span{color:var(--l4-suave)}
.l4-ped-tot{display:flex;justify-content:space-between;padding:14px 0 0;border-top:1px solid var(--l4-borde);font:700 17px/1 var(--l4-t);color:var(--l4-navy)}
.l4-ped-ok{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px;border-radius:14px;background:var(--l4-lav);font-size:13.5px;color:var(--l4-navy)}
.l4-ped-ok b{font-weight:600}
.l4-res{position:absolute;right:-6%;bottom:6%;z-index:2;width:250px;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--l4-sombra)}
.l4-res small{display:block;font:700 11px/1 var(--l4-t);letter-spacing:.1em;text-transform:uppercase;color:var(--l4-suave)}
.l4-res b{display:block;margin:8px 0 2px;font:600 16px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-res span{display:block;font-size:13px;color:var(--l4-suave)}
.l4-res-bot{display:flex;gap:6px;margin-top:12px}
.l4-res-bot em{flex:1;padding:9px 0;border-radius:999px;text-align:center;font:600 12.5px/1 var(--l4-t);font-style:normal;background:var(--l4-navy);color:#fff}
.l4-res-bot em+em{background:var(--l4-lav);color:var(--l4-navy)}
.l4-apila-panel .l4-wa.l4-wa-bajo{margin-left:-12%}

/* cuándo se aparta: la conversación que pasa a una persona y el correo que llega */
.l4-rel{background:#fafbff}
.l4-rel-in{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
.l4-rel-lista{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.l4-rel-lista li{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--l4-borde)}
.l4-rel-lista b{display:block;font:600 17px/1.3 var(--l4-t);color:var(--l4-navy)}
.l4-rel-lista b+span{display:block;margin-top:4px;font-size:15.5px;line-height:1.5}
.l4-rel-escena{position:relative;height:560px}
.l4-rel-escena .l4-wa{position:absolute;left:0;top:0;width:360px}
.l4-rel-escena .l4-wa-chat{min-height:330px}
.l4-correo{position:absolute;right:0;bottom:24px;z-index:2;width:330px;padding:20px;border-radius:24px;background:#fff;box-shadow:var(--l4-sombra)}
.l4-correo-de{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--l4-borde);font-size:12.5px;color:var(--l4-suave)}
.l4-correo-de b{display:block;font:600 13.5px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-correo h4{margin:14px 0 6px;font:700 17px/1.3 var(--l4-t);color:var(--l4-navy)}
.l4-correo p{margin:0;font-size:14px;line-height:1.5}
.l4-correo em{display:inline-flex;margin-top:14px;padding:11px 18px;border-radius:999px;background:var(--l4-navy);color:#fff;font:600 13.5px/1 var(--l4-t);font-style:normal}
.l4-rel-escena .l4-correo{opacity:0;transform:translateY(20px);transition:opacity .7s var(--l4-ease) 1.4s,transform .7s var(--l4-ease) 1.4s}
.l4-rel-escena.l4-in .l4-correo{opacity:1;transform:none}

/* lo que contesta sale de tu panel: la web a la izquierda, lo que sabe en medio, la respuesta a la derecha */
.l4-sabe-rej{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center;margin-top:56px}
.l4-sabe-web{border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--l4-sombra)}
.l4-sabe-web .l4-nav{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--l4-borde);font-size:12px;color:var(--l4-suave)}
.l4-sabe-web .l4-nav i{width:9px;height:9px;border-radius:50%;background:var(--l4-borde)}
.l4-sabe-web .l4-nav span{margin-left:10px;padding:5px 12px;border-radius:999px;background:var(--l4-lav)}
.l4-sabe-web img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.l4-sabe-datos{display:flex;flex-direction:column;gap:10px}
.l4-sabe-datos>span{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:16px;background:#fff;border:1px solid var(--l4-borde);
  font:600 15px/1.2 var(--l4-t);color:var(--l4-navy);box-shadow:0 12px 26px -22px rgba(16,34,94,.55)}
.l4-sabe-datos .l4-ic{width:30px;height:30px}
.l4-sabe .l4-sabe-datos>span{opacity:0;transform:translateX(-18px);transition:opacity .6s var(--l4-ease),transform .6s var(--l4-ease)}
.l4-sabe.l4-in .l4-sabe-datos>span{opacity:1;transform:none}
.l4-sabe.l4-in .l4-sabe-datos>span:nth-child(2){transition-delay:.12s}.l4-sabe.l4-in .l4-sabe-datos>span:nth-child(3){transition-delay:.24s}
.l4-sabe.l4-in .l4-sabe-datos>span:nth-child(4){transition-delay:.36s}.l4-sabe.l4-in .l4-sabe-datos>span:nth-child(5){transition-delay:.48s}
.l4-sabe-resp .l4-wa-chat{min-height:0;padding:22px 16px}
.l4-sabe-nota{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:16px;border-radius:18px;background:var(--l4-lav);font-size:14.5px;line-height:1.5;color:var(--l4-navy)}

/* oficios en fila que se desliza: foto alta con la pregunta típica encima */
.l4-ofi{padding:120px 0;background:#fff}
.l4-ofi-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.l4-ofi-fila{display:flex;gap:18px;margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 24px 24px;
  scrollbar-width:none;-ms-overflow-style:none}
.l4-ofi-fila::-webkit-scrollbar{display:none}
.l4-ofi-t{position:relative;flex:none;width:300px;height:420px;border-radius:28px;overflow:hidden;scroll-snap-align:start;text-decoration:none;color:#fff}
.l4-ofi-t img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--l4-ease)}
.l4-ofi-t:hover img{transform:scale(1.04)}
.l4-ofi-t .l4-m{position:absolute;left:16px;top:16px;right:auto;max-width:78%;box-shadow:0 12px 26px -16px rgba(0,0,0,.45)}
.l4-ofi-pie{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;padding:14px 16px;border-radius:18px;background:#fff}
.l4-ofi-pie b{display:block;font:700 18px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-ofi-pie span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--l4-texto)}
.l4-ofi-flechas{display:flex;gap:10px}
.l4-ofi-flechas button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--l4-borde);background:#fff;color:var(--l4-navy);cursor:pointer}
.l4-ofi-flechas button svg{width:20px;height:20px}
.l4-ofi-flechas button:first-child svg{transform:scaleX(-1)}

/* cómo se pone en marcha: tres tarjetas en línea con un hilo que se llena al bajar */
.l4-hilo{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.l4-hilo:before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:var(--l4-borde)}
.l4-hilo-lleno{position:absolute;left:8%;top:34px;height:2px;width:0;background:var(--l4-navy);transition:width 1.6s var(--l4-ease)}
.l4-hilo.l4-in .l4-hilo-lleno{width:84%}
.l4-hilo article{position:relative;padding:0 8px;text-align:center}
.l4-hilo-n{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 22px;border-radius:50%;background:#fff;border:2px solid var(--l4-borde);
  font:700 24px/1 var(--l4-t);color:var(--l4-navy);transition:border-color .5s,background .5s,color .5s}
.l4-hilo.l4-in .l4-hilo-n{border-color:var(--l4-navy)}
.l4-hilo h3{font-size:21px;line-height:1.3}
.l4-hilo p{margin:10px auto 0;max-width:300px;font-size:16px;line-height:1.55}

/* =====================================================================================================
   TIENDA ONLINE
   ===================================================================================================== */
.l4-th{padding:140px 0 90px;background:#fafbff;overflow:hidden}
.l4-th-in{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}
.l4-th-escena{position:relative;height:600px}
.l4-th-foto{position:absolute;right:0;top:0;width:88%;height:540px;margin:0;border-radius:36px;overflow:hidden;box-shadow:var(--l4-sombra)}
.l4-th-foto img{width:100%;height:100%;object-fit:cover;object-position:40% center}
.l4-cobrado{position:absolute;left:0;bottom:0;z-index:3;width:330px;padding:22px 22px 10px;border-radius:26px;background:#fff;box-shadow:var(--l4-sombra)}
.l4-cobrado small{display:block;font:700 11px/1 var(--l4-t);letter-spacing:.12em;text-transform:uppercase;color:var(--l4-suave)}
.l4-cobrado-n{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:10px 0 14px}
.l4-cobrado-n b{font:700 44px/1 var(--l4-t);letter-spacing:-.03em;color:var(--l4-navy);font-variant-numeric:tabular-nums}
.l4-barras{display:flex;align-items:flex-end;gap:3px;height:34px}
.l4-barras i{width:5px;border-radius:2px;background:var(--l4-borde)}
.l4-barras i:last-child{background:var(--l4-azul)}
.l4-cobrado-l{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--l4-borde);font-size:14.5px;color:var(--l4-navy)}
.l4-cobrado-l time{font-size:12px;color:var(--l4-suave);font-variant-numeric:tabular-nums}
.l4-cobrado-l span{flex:1}
.l4-cobrado-l b{font:700 15px/1 var(--l4-t)}
.l4-cobrado-l[data-paso]{display:none}
.l4-cobrado-l[data-paso].l4-sale{display:flex;animation:l4Entra .5s var(--l4-ease) both}
.l4-prod{position:absolute;right:26px;top:60px;z-index:3;display:flex;align-items:center;gap:12px;width:300px;padding:12px;border-radius:20px;background:#fff;box-shadow:var(--l4-sombra2)}
.l4-prod img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.l4-prod div{flex:1;min-width:0}
.l4-prod b{display:block;font:600 14.5px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-prod div span{display:block;margin-top:3px;font:600 14px/1 var(--l4-t);color:var(--l4-azul)}
.l4-vendido{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#1f8a55;color:#fff;font:600 12.5px/1 var(--l4-t)}
.l4-vendido svg{width:14px;height:14px}
.l4-th .l4-prod{opacity:0;animation:l4Entra .6s var(--l4-ease) .6s both}
.l4-th .l4-vendido{opacity:0;animation:l4Entra .5s var(--l4-ease) 2.2s both}

/* escaparate: tarjetas de producto de verdad, con filtro por categoría que funciona */
.l4-esc-cab{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.l4-filtro{display:flex;flex-wrap:wrap;gap:8px}
.l4-filtro button{padding:11px 18px;border-radius:999px;border:1px solid var(--l4-borde);background:#fff;font:600 14px/1 var(--l4-t);color:var(--l4-texto);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.l4-filtro button[aria-pressed="true"]{background:var(--l4-navy);border-color:var(--l4-navy);color:#fff}
.l4-esc-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.l4-art{display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid var(--l4-borde);overflow:hidden;
  transition:opacity .45s var(--l4-ease),transform .45s var(--l4-ease),box-shadow .35s}
.l4-art:hover{box-shadow:var(--l4-sombra2);transform:translateY(-3px)}
.l4-art[hidden]{display:none}
.l4-art-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--l4-lav)}
.l4-art-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.l4-art-txt small i{font-style:normal;letter-spacing:0;text-transform:none;color:var(--l4-azul)}
.l4-art-txt{display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px}
.l4-art-txt small{font:600 12px/1 var(--l4-t);letter-spacing:.06em;text-transform:uppercase;color:var(--l4-suave)}
.l4-art-txt b{font:600 18px/1.3 var(--l4-t);color:var(--l4-navy)}
.l4-art-pie{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.l4-art-pie strong{font:700 20px/1 var(--l4-t);color:var(--l4-navy)}
.l4-art-pie em{padding:10px 16px;border-radius:999px;background:var(--l4-lav);font:600 13.5px/1 var(--l4-t);font-style:normal;color:var(--l4-navy)}
.l4-art.l4-sin .l4-art-pie em{background:#f1f3f9;color:#a0abc6}
.l4-art.l4-sin img{filter:grayscale(.6);opacity:.8}

/* banda azul oscura que avanza de lado (portada: «Y la misma web lo hace todo») */
.l4-banda{background:var(--l4-navy);color:#fff}
.l4-banda-pista{position:relative;height:340vh}
.l4-banda-fijo{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:60px}
.l4-banda h2{color:#fff}
.l4-banda .l4-sub{color:rgba(255,255,255,.75)}
.l4-banda-tren{display:flex;gap:26px;margin-top:48px;padding-left:max(24px,calc((100vw - 1152px)/2));will-change:transform}
.l4-bt{flex:none;width:400px;border-radius:30px;background:#fff;color:var(--l4-texto);overflow:hidden}
.l4-bt-ui{display:flex;align-items:center;justify-content:center;height:230px;padding:24px;background:#f3f5fd}
.l4-bt-txt{padding:24px 28px 30px}
.l4-bt-txt h3{font-size:23px}
.l4-bt-txt p{margin:10px 0 0;font-size:15.5px;line-height:1.55}
.l4-banda-avance{height:3px;margin:40px 24px 0;max-width:1152px;align-self:center;width:calc(100% - 48px);border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.l4-banda-avance i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.l4-mini{width:100%;max-width:320px;padding:16px;border-radius:18px;background:#fff;box-shadow:var(--l4-sombra2);font-size:13.5px;color:var(--l4-navy)}
.l4-mini-l{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0}
.l4-mini-l+.l4-mini-l{border-top:1px solid var(--l4-borde)}
.l4-mini-l>span{color:var(--l4-suave)}
.l4-mini-l b{font:600 14px/1 var(--l4-t)}
.l4-mini-tot{display:flex;justify-content:space-between;margin-top:6px;padding-top:10px;border-top:1px solid var(--l4-borde);font:700 16px/1 var(--l4-t)}
.l4-mini-boton{display:block;margin-top:12px;padding:11px 0;border-radius:999px;background:var(--l4-azul);color:#fff;text-align:center;font:600 13.5px/1 var(--l4-t)}
.l4-inter{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:#1f8a55}
.l4-inter:after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.l4-inter.l4-off{background:#cfd6ea}
.l4-inter.l4-off:after{right:auto;left:3px}
.l4-cuenta-big{font:700 64px/1 var(--l4-t);color:var(--l4-navy);letter-spacing:-.03em}

/* comisión 0: la cifra grande y el recibo */
.l4-cero-in{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.l4-cero-n{font:700 clamp(110px,13vw,190px)/.9 var(--l4-t);letter-spacing:-.05em;color:var(--l4-navy)}
.l4-cero-n span{font-size:.5em;letter-spacing:-.02em}
.l4-recibo{padding:26px 28px;border-radius:26px;background:#fff;box-shadow:var(--l4-sombra);font-size:15.5px}
.l4-recibo-l{display:flex;justify-content:space-between;gap:12px;padding:14px 0;color:var(--l4-navy)}
.l4-recibo-l+.l4-recibo-l{border-top:1px dashed var(--l4-borde)}
.l4-recibo-l span{color:var(--l4-texto)}
.l4-recibo-l b{font:600 16px/1.2 var(--l4-t);white-space:nowrap}
.l4-recibo-cero b{color:#1f8a55}
.l4-recibo-fin{display:flex;justify-content:space-between;margin-top:6px;padding-top:16px;border-top:2px solid var(--l4-navy);font:700 18px/1.2 var(--l4-t);color:var(--l4-navy)}

/* pasos en zigzag con su tarjeta (portada: «Cuéntale tu negocio», «Elige cómo se ve») */
.l4-zz{display:flex;flex-direction:column;gap:110px;margin-top:72px}
.l4-zz-f{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.l4-zz-f:nth-child(even) .l4-zz-ui{order:2}
.l4-zz-ui{display:flex;justify-content:center}
.l4-zz-num{display:block;margin-bottom:14px;font:700 13px/1 var(--l4-t);letter-spacing:.12em;text-transform:uppercase;color:var(--l4-azul)}
.l4-zz-f h3{font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.l4-zz-f p{margin:14px 0 0;font-size:17px;line-height:1.6;max-width:440px}
.l4-caja{width:100%;max-width:470px;padding:26px;border-radius:26px;background:#fff;box-shadow:var(--l4-sombra)}
.l4-caja small{display:block;font:700 11.5px/1 var(--l4-t);letter-spacing:.12em;text-transform:uppercase;color:var(--l4-azul)}
.l4-caja-campo{margin-top:16px;padding:16px 18px;border-radius:14px;border:1px solid var(--l4-borde);background:#f8f9fe;font-size:15px;color:var(--l4-navy)}
.l4-caja-boton{display:inline-flex;margin-top:14px;padding:13px 22px;border-radius:999px;background:var(--l4-azul);color:#fff;font:600 14.5px/1 var(--l4-t)}
.l4-caja-fila{display:flex;align-items:center;gap:14px;padding:15px 0;font-size:15px;color:var(--l4-navy)}
.l4-caja-fila+.l4-caja-fila{border-top:1px solid var(--l4-borde)}
.l4-caja-fila span{flex:1}
.l4-caja-fila .l4-ic,.l4-caja-fila .l4-inter,.l4-caja-fila .l4-num{flex:none}
.l4-caja-fila small{display:block;margin-top:3px;font:400 13px/1.3 var(--l4-c);letter-spacing:0;text-transform:none;color:var(--l4-suave)}

/* lo que se vende: mosaico de fotos */
.l4-mos{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:260px 260px;gap:18px;margin-top:48px}
.l4-mos figure{position:relative;margin:0;border-radius:28px;overflow:hidden}
.l4-mos figure:first-child{grid-row:span 2}
.l4-mos figure:nth-child(4){grid-column:span 2}
.l4-mos img{width:100%;height:100%;object-fit:cover}
.l4-mos figcaption{position:absolute;left:16px;bottom:16px;right:16px;display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:18px;
  background:rgba(255,255,255,.94);font-size:13.5px;line-height:1.4;color:var(--l4-texto)}
.l4-mos figcaption b{font:600 16px/1.2 var(--l4-t);color:var(--l4-navy)}

/* =====================================================================================================
   RESERVAS ONLINE
   ===================================================================================================== */
.l4-rh{padding:104px 0 80px;background:#fff}
.l4-rh-caja{position:relative;display:grid;grid-template-columns:1.1fr 1fr;min-height:640px;border-radius:40px;background:var(--l4-lav);overflow:visible}
.l4-rh-txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:64px 20px 64px 64px}
.l4-rh-txt h1{font-size:clamp(34px,3.6vw,52px)}
.l4-rh-foto{position:relative;margin:0;border-radius:0 40px 40px 0;overflow:hidden}
.l4-rh-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.l4-agenda{position:absolute;right:40px;bottom:-60px;z-index:3;width:470px;padding:18px 18px 14px;border-radius:26px;background:#fff;box-shadow:var(--l4-sombra)}
.l4-agenda-cab{display:flex;justify-content:space-between;align-items:flex-start}
.l4-agenda-cab b{display:block;font:700 16px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-agenda-cab small{display:block;margin-top:3px;font-size:12.5px;color:var(--l4-suave)}
.l4-agenda-cab strong{font:700 14px/1 var(--l4-t);color:var(--l4-azul);font-variant-numeric:tabular-nums}
.l4-agenda-rej{display:grid;grid-template-columns:26px repeat(5,1fr);gap:5px;margin-top:14px;font-size:11.5px}
.l4-agenda-rej .l4-dh{text-align:center;font:600 11.5px/1 var(--l4-t);color:var(--l4-suave);padding:4px 0}
.l4-agenda-rej .l4-hh{display:flex;align-items:center;justify-content:flex-end;padding-right:4px;color:#9aa6c4;font-variant-numeric:tabular-nums}
.l4-agenda-rej .l4-cel{height:30px;border-radius:8px;background:#f3f5fb}
.l4-cita{display:flex;align-items:center;height:30px;padding:0 8px;border-radius:8px;font:600 12px/1 var(--l4-t);opacity:0;transform:scale(.9)}
.l4-cita.l4-sale{opacity:1;transform:none;transition:opacity .45s var(--l4-ease),transform .45s var(--l4-ease)}
.l4-cita.a{background:#e3e9fd;color:#2455e6}.l4-cita.b{background:#dff1e8;color:#1f7a4a}.l4-cita.c{background:#efe6fd;color:#6a3fd1}
.l4-aviso{position:absolute;right:40px;top:40px;z-index:3;width:300px;padding:16px;border-radius:22px;background:#fff;box-shadow:var(--l4-sombra);
  opacity:0;animation:l4Entra .6s var(--l4-ease) 2.6s both}
.l4-aviso small{display:block;font:700 11px/1 var(--l4-t);letter-spacing:.1em;text-transform:uppercase;color:var(--l4-suave)}
.l4-aviso b{display:block;margin:8px 0 2px;font:600 16px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-aviso span{display:block;font-size:13px;color:var(--l4-suave)}
.l4-aviso-bot{display:flex;gap:6px;margin-top:12px}
.l4-aviso-bot em{flex:1;padding:10px 0;border-radius:999px;text-align:center;font:600 13px/1 var(--l4-t);font-style:normal;background:var(--l4-navy);color:#fff;transition:background .4s}
.l4-aviso-bot em+em{background:var(--l4-lav);color:var(--l4-navy)}
.l4-aviso.l4-hecho .l4-aviso-bot em:first-child{background:#1f8a55}

/* así reserva tu cliente: tres pantallas que se encienden por turnos */
.l4-flujo{background:#fafbff}
.l4-flujo-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.l4-pant{display:flex;flex-direction:column;gap:18px}
.l4-pant-marco{height:430px;padding:22px 20px;border-radius:32px;background:#fff;border:1px solid var(--l4-borde);box-shadow:0 30px 60px -44px rgba(16,34,94,.5);
  transition:transform .6s var(--l4-ease),box-shadow .6s,border-color .6s}
.l4-flujo .l4-pant{opacity:.45;transition:opacity .6s var(--l4-ease)}
.l4-flujo .l4-pant.on{opacity:1}
.l4-flujo .l4-pant.on .l4-pant-marco{transform:translateY(-8px);border-color:#c9d4f5;box-shadow:var(--l4-sombra)}
.l4-pant-n{display:flex;align-items:center;gap:12px}
.l4-pant-n span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--l4-navy);color:#fff;font:700 15px/1 var(--l4-t)}
.l4-pant-n b{font:600 18px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-pant-t{margin:0 0 14px;font:700 17px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-serv{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;border:1px solid var(--l4-borde);margin-bottom:9px;font-size:14px;color:var(--l4-navy)}
.l4-serv div{flex:1}
.l4-serv b{display:block;font:600 15px/1.2 var(--l4-t)}
.l4-serv small{display:block;margin-top:3px;font-size:12.5px;color:var(--l4-suave)}
.l4-serv strong{font:700 15px/1 var(--l4-t)}
.l4-serv.sel{border-color:var(--l4-navy);box-shadow:inset 0 0 0 1px var(--l4-navy)}
.l4-dias{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:16px}
.l4-dias span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 0;border-radius:12px;background:#f3f5fb;font:600 11px/1 var(--l4-t);color:var(--l4-suave)}
.l4-dias span b{font:700 16px/1 var(--l4-t);color:var(--l4-navy)}
.l4-dias span.sel{background:var(--l4-navy);color:rgba(255,255,255,.75)}.l4-dias span.sel b{color:#fff}
.l4-dias span.cerrado{background:none;color:#c2c9dc}.l4-dias span.cerrado b{color:#c2c9dc;text-decoration:line-through}
.l4-horas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.l4-horas span{padding:11px 0;border-radius:12px;border:1px solid var(--l4-borde);text-align:center;font:600 13.5px/1 var(--l4-t);color:var(--l4-navy)}
.l4-horas span.sel{background:var(--l4-navy);border-color:var(--l4-navy);color:#fff}
.l4-horas span.no{border-style:dashed;color:#c2c9dc}
.l4-campo{margin-bottom:9px;padding:12px 14px;border-radius:12px;border:1px solid var(--l4-borde);font-size:13.5px;color:var(--l4-navy)}
.l4-campo small{display:block;margin-bottom:4px;font-size:11.5px;color:var(--l4-suave)}
.l4-enviada{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px;border-radius:16px;background:#e9f6ee;font-size:13.5px;line-height:1.45;color:#1d4d33}
.l4-enviada b{display:block;font:600 15px/1.2 var(--l4-t);color:#16603a}
.l4-pant p.l4-pant-pie{margin:0;font-size:15px;line-height:1.55}

/* tú confirmas: el panel con su calendario y el acordeón (portada: «Tu web vende. El panel hace el resto») */
.l4-pan-in{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center;margin-top:56px}
.l4-pan{border-radius:26px;background:#fff;box-shadow:var(--l4-sombra);border:1px solid var(--l4-borde);overflow:hidden}
.l4-pan-cab{display:flex;align-items:center;gap:22px;padding:14px 20px;border-bottom:1px solid var(--l4-borde);font-size:13px;color:var(--l4-suave)}
.l4-pan-cab b{font:700 15px/1 var(--l4-t);color:var(--l4-navy)}
.l4-pan-cab span.on{color:var(--l4-navy);font-weight:600}
.l4-pan-cuerpo{position:relative;min-height:400px}
.l4-pan-vista{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px;opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--l4-ease),transform .6s var(--l4-ease);pointer-events:none}
.l4-pan-vista.on{opacity:1;transform:none;pointer-events:auto}
.l4-mes{padding:14px;border-radius:18px;background:#f8f9fe;border:1px solid var(--l4-borde)}
.l4-mes-t{display:flex;justify-content:space-between;margin-bottom:10px;font:700 14px/1 var(--l4-t);color:var(--l4-navy)}
.l4-mes-rej{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px;color:var(--l4-navy);font-variant-numeric:tabular-nums}
.l4-mes-rej span{display:grid;place-items:center;height:32px;border-radius:9px}
.l4-mes-rej .l4-dh{height:22px;font-size:10.5px;color:var(--l4-suave)}
.l4-mes-rej .con{font-weight:700;background:#e3e9fd}
.l4-mes-rej .hoy{background:var(--l4-azul);color:#fff;font-weight:700}
.l4-mes-rej .cer{color:#c2c9dc;text-decoration:line-through}
.l4-mes-rej .esp{box-shadow:inset 0 0 0 1.5px #d19a3f;font-weight:700}
.l4-dia{display:flex;flex-direction:column}
.l4-dia-t{margin-bottom:6px;font:700 14px/1 var(--l4-t);color:var(--l4-navy)}
.l4-dia-l{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--l4-borde);font-size:13.5px;color:var(--l4-navy)}
.l4-dia-l time{width:42px;font:700 13px/1 var(--l4-t);color:var(--l4-azul);font-variant-numeric:tabular-nums}
.l4-dia-l span{flex:1}
.l4-dia-l small{font-size:12px;color:var(--l4-suave)}
.l4-dia-pend{margin-top:12px;padding:14px;border-radius:16px;background:var(--l4-lav)}
.l4-dia-pend b{display:block;font:600 14.5px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-dia-pend span{display:block;margin-top:3px;font-size:12.5px;color:var(--l4-suave)}
.l4-dia-pend div{display:flex;gap:6px;margin-top:10px}
.l4-dia-pend em{flex:1;padding:9px 0;border-radius:999px;text-align:center;font:600 12.5px/1 var(--l4-t);font-style:normal;background:var(--l4-navy);color:#fff}
.l4-dia-pend em+em{background:#fff;color:var(--l4-navy)}
.l4-ajuste{display:flex;flex-direction:column;gap:10px}
.l4-ajuste .l4-caja-fila{padding:13px 14px;border-radius:14px;border:1px solid var(--l4-borde);font-size:14px}
.l4-ajuste .l4-caja-fila+.l4-caja-fila{border-top:1px solid var(--l4-borde)}
.l4-num{display:inline-flex;align-items:center;gap:10px;font:700 14px/1 var(--l4-t);color:var(--l4-navy)}
.l4-num i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--l4-lav);font-style:normal}
.l4-acc{border-top:1px solid var(--l4-borde)}
.l4-acc-f{border-bottom:1px solid var(--l4-borde)}
.l4-acc-f button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:22px 0;border:0;background:none;cursor:pointer;text-align:left;
  font:700 21px/1.3 var(--l4-t);color:rgba(16,34,94,.42);transition:color .3s}
.l4-acc-f button svg{width:20px;height:20px;transition:transform .4s var(--l4-ease)}
.l4-acc-f.on button{color:var(--l4-navy)}
.l4-acc-f.on button svg{transform:rotate(180deg)}
.l4-acc-f div{max-height:0;overflow:hidden;transition:max-height .5s var(--l4-ease)}
.l4-acc-f.on div{max-height:200px}
.l4-acc-f p{margin:0 0 22px;font-size:16.5px;line-height:1.6}

/* el recordatorio del día antes: foto con el correo encima */
.l4-rec-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.l4-rec-escena{position:relative;height:540px}
.l4-rec-foto{position:absolute;left:0;top:0;width:82%;height:470px;margin:0;border-radius:34px;overflow:hidden}
.l4-rec-foto img{width:100%;height:100%;object-fit:cover}
.l4-rec-escena .l4-correo{right:0;bottom:0;width:340px}
.l4-rec-escena .l4-correo em{margin-right:6px}
.l4-rec-escena .l4-correo em+em{background:var(--l4-lav);color:var(--l4-navy)}
.l4-rec-wa{display:flex;align-items:center;gap:14px;margin-top:28px;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--l4-borde);max-width:460px}
.l4-rec-wa span{flex:1;font-size:15px;line-height:1.5}
.l4-rec-wa em{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--l4-wa);color:#fff;font:600 13px/1 var(--l4-t);font-style:normal;white-space:nowrap}
.l4-rec-wa em svg{width:15px;height:15px}

/* oficios con cita: rejilla de fotos de alturas distintas */
.l4-rej-ofi{columns:4;column-gap:18px;margin-top:48px}
.l4-rej-ofi a{position:relative;display:block;margin:0 0 18px;border-radius:26px;overflow:hidden;break-inside:avoid;color:#fff;text-decoration:none}
.l4-rej-ofi a img{width:100%;height:auto;aspect-ratio:900/947;object-fit:cover;transition:transform .8s var(--l4-ease)}
.l4-rej-ofi a:nth-child(3n+2) img{aspect-ratio:4/5}
.l4-rej-ofi a:nth-child(4n) img{aspect-ratio:1/1}
.l4-rej-ofi a:hover img{transform:scale(1.04)}
.l4-rej-ofi span{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.95);font-size:13px;line-height:1.4;color:var(--l4-texto)}
.l4-rej-ofi span b{display:block;font:700 17px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-rej-ofi a.l4-ofi-crear{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:26px;aspect-ratio:1/1;background:var(--l4-lav);color:var(--l4-navy)}
.l4-rej-ofi a.l4-ofi-crear b{font:700 24px/1.2 var(--l4-t)}
.l4-rej-ofi a.l4-ofi-crear em{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:13px 20px;border-radius:999px;background:var(--l4-navy);color:#fff;font:600 14.5px/1 var(--l4-t);font-style:normal}

/* =====================================================================================================
   FINAL COMPARTIDO: plan, blog (tres formas), preguntas y cierre
   ===================================================================================================== */
.l4-plan{padding:110px 0}
.l4-plan-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch}
.l4-plan-t{display:flex;flex-direction:column;gap:10px;padding:30px 28px;border-radius:28px;background:#fff;border:1px solid var(--l4-borde)}
.l4-plan-t h3{font-size:22px}
.l4-plan-t strong{font:700 34px/1 var(--l4-t);color:var(--l4-navy);letter-spacing:-.02em}
.l4-plan-t p{margin:4px 0 0;font-size:15.5px;line-height:1.55}
.l4-plan-t.suyo{background:var(--l4-navy);border-color:var(--l4-navy);color:rgba(255,255,255,.82)}
.l4-plan-t.suyo h3,.l4-plan-t.suyo strong{color:#fff}
.l4-plan-t .l4-plan-aqui{align-self:flex-start;margin-bottom:6px;font:700 12px/1 var(--l4-t);letter-spacing:.1em;text-transform:uppercase;color:var(--l4-azul)}
.l4-plan-t.suyo .l4-plan-aqui{color:#a9c0ff}
.l4-plan-nota{margin:20px 0 0;font-size:14.5px;color:var(--l4-suave)}
.l4-plan-nota a,.l4-sub a,.l4-faq-a a{color:var(--l4-azul)}
.l4-plan-lado{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.l4-plan-lado .l4-plan-rej{grid-template-columns:1fr;gap:12px;margin-top:0}
.l4-plan-lado .l4-plan-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:22px 26px}
.l4-plan-lado .l4-plan-t h3{flex:1}
.l4-plan-lado .l4-plan-t strong{font-size:24px}
.l4-plan-lado .l4-plan-t p{flex-basis:100%;margin:0}
.l4-plan-lado .l4-plan-aqui{flex-basis:100%;margin:0}

.l4-franja{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:56px;border-radius:36px;background:var(--l4-lav)}
.l4-franja-rej{display:flex;flex-direction:column;gap:6px}
.l4-franja-f{display:flex;align-items:center;gap:20px;padding:20px 22px;border-radius:20px}
.l4-franja-f span{flex:1}
.l4-franja-f b{display:block;font:700 20px/1.2 var(--l4-t);color:var(--l4-navy)}
.l4-franja-f small{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--l4-texto)}
.l4-franja-f strong{font:700 22px/1 var(--l4-t);color:var(--l4-navy);white-space:nowrap}
.l4-franja-f.suyo{background:#fff;box-shadow:var(--l4-sombra2)}

.l4-blog{padding:40px 0 110px}
.l4-blog-rej{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.l4-bl{display:flex;flex-direction:column;gap:8px;padding:0 0 22px;border-radius:24px;background:#fff;border:1px solid var(--l4-borde);overflow:hidden;text-decoration:none;
  transition:transform .35s var(--l4-ease),box-shadow .35s}
.l4-bl:hover{transform:translateY(-4px);box-shadow:var(--l4-sombra2)}
.l4-bl img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--l4-lav);margin-bottom:8px}
.l4-bl-t{display:flex;flex-direction:column;gap:8px;padding:0 20px}
.l4-bl span{font:600 12.5px/1.2 var(--l4-t);color:var(--l4-azul)}
.l4-bl b{font:600 17px/1.35 var(--l4-t);color:var(--l4-navy)}
.l4-blog-f-lista .l4-blog-rej{grid-template-columns:1fr;gap:0;border-top:1px solid var(--l4-borde)}
.l4-blog-f-lista .l4-bl{flex-direction:row;align-items:center;gap:22px;padding:18px 0;border:0;border-bottom:1px solid var(--l4-borde);border-radius:0;background:none}
.l4-blog-f-lista .l4-bl:hover{transform:none;box-shadow:none}
.l4-blog-f-lista .l4-bl img{width:120px;flex:none;border-radius:14px;margin:0}
.l4-blog-f-lista .l4-bl-t{flex:1;padding:0}
.l4-blog-f-lista .l4-bl b{font-size:19px}
.l4-blog-f-lista .l4-bl svg{width:22px;height:22px;color:var(--l4-navy)}
.l4-blog-f-dos .l4-blog-rej{grid-template-columns:1.15fr 1fr;grid-template-rows:repeat(3,auto)}
.l4-blog-f-dos .l4-bl:first-child{grid-row:span 3}
.l4-blog-f-dos .l4-bl:first-child img{flex:1;aspect-ratio:auto;min-height:260px}
.l4-blog-f-dos .l4-bl:first-child b{font-size:22px}
.l4-blog-f-dos .l4-bl:not(:first-child){flex-direction:row;align-items:center;gap:18px;padding:14px}
.l4-blog-f-dos .l4-bl:not(:first-child) img{width:150px;flex:none;aspect-ratio:4/3;border-radius:14px;margin:0}
.l4-blog-f-dos .l4-bl:not(:first-child) .l4-bl-t{padding:0}
.l4-todos{margin:24px 0 0}
.l4-todos a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--l4-azul);text-decoration:none}
.l4-todos a svg{width:18px;height:18px}

/* la misma web hace más: las otras dos landings y tu correo y tu dominio (plantilla del plan) */
.l4-otras{padding:100px 0 0}
.l4-otras-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.l4-otra{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:24px;background:#fff;border:1px solid var(--l4-borde);
  text-decoration:none;color:var(--l4-texto);transition:transform .35s var(--l4-ease),box-shadow .35s}
a.l4-otra:hover{transform:translateY(-3px);box-shadow:var(--l4-sombra2)}
.l4-otra b{font:700 20px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-otra>span:not(.l4-ic){font-size:15.5px;line-height:1.55}
.l4-otra em{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:6px;font:600 15px/1.2 var(--l4-t);font-style:normal;color:var(--l4-azul)}
.l4-otra em a{display:inline-flex;align-items:center;gap:6px;color:var(--l4-azul);text-decoration:none}
.l4-otra em svg{width:16px;height:16px}
a.l4-otra em{gap:8px}
/* [cortex 2026-10-02 otras-en-filas] «La misma web hace más» en filas: icono, nombre, qué hace y la flecha; la fila entera es el enlace */
.l4-otras-lista{margin-top:34px;border-top:1px solid var(--l4-borde)}
.l4-otra-f{display:grid;grid-template-columns:44px minmax(200px,.42fr) 1fr auto;gap:22px;align-items:center;padding:22px 10px;border-bottom:1px solid var(--l4-borde);
  text-decoration:none;color:var(--l4-texto);transition:background .3s var(--l4-ease)}
.l4-otra-f:hover{background:var(--l4-lav)}
.l4-otra-f .l4-ic{width:44px;height:44px;border-radius:14px}
.l4-otra-f b{font:700 20px/1.25 var(--l4-t);color:var(--l4-navy)}
.l4-otra-f>span:not(.l4-ic){font-size:15.5px;line-height:1.5}
.l4-otra-f em{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.2 var(--l4-t);font-style:normal;color:var(--l4-azul);white-space:nowrap}
.l4-otra-f em svg{width:16px;height:16px;transition:transform .3s var(--l4-ease)}
.l4-otra-f:hover em svg{transform:translateX(4px)}
/* el subrayado al pasar el ratón de la web no va en las tarjetas enteras que son un enlace */
a.l4-otra:hover,a.l4-otra-f:hover,a.l4-bl:hover,a.l4-ofi-t:hover,.l4-rej-ofi a:hover{text-decoration:none}

/* ---------- móvil ---------- */
@media (max-width:1100px){
  .l4-bh-f1{width:330px;height:400px}.l4-bh-f2{width:300px;height:380px}
  .l4-agenda{width:420px;right:24px}
  .l4-rh-txt{padding:48px 16px 48px 44px}
}
@media (max-width:960px){
  .l4-sec{padding:84px 0}
  .l4-bh{padding:120px 0 24px}
  .l4-bh-escena{height:560px;margin-top:44px}
  .l4-bh-f1,.l4-bh-f2{display:none}
  .l4-bh-movil{width:300px;height:520px;margin-left:-150px}
  .l4-bh-c1{left:0;right:auto;top:auto;bottom:20px}.l4-bh-c2{left:auto;right:0;top:4px}.l4-bh-c3{display:none}
  .l4-apila-pista{height:auto}
  .l4-apila{padding:84px 0 0}
  .l4-apila-fijo{position:relative;height:auto;padding:0 0 84px}
  .l4-apila-marco{padding-top:0}.l4-apila-marco:before,.l4-apila-marco:after{display:none}
  .l4-apila-caja{display:block;padding:0;background:none!important;min-height:0}
  .l4-apila-rayas{display:none}
  .l4-apila-lista{padding:0;display:flex;flex-direction:column;gap:16px}
  .l4-apila-lista li{padding:26px 22px;border:0;border-radius:28px;background:var(--l4-menta)}
  .l4-apila-lista li:nth-child(2){background:var(--l4-lila)}.l4-apila-lista li:nth-child(3){background:var(--l4-melo)}.l4-apila-lista li:nth-child(4){background:var(--l4-cielo)}
  .l4-apila-lista h3,.l4-apila-lista li.on h3{font-size:24px;color:var(--l4-navy)}
  .l4-apila-lista p,.l4-apila-lista li.on p{max-height:none;opacity:1;margin-top:10px}
  .l4-apila-lista li:not(.on) .l4-marca{background:#fff}
  .l4-apila-vista{display:none}
  .l4-apila-lista .l4-apila-movil{display:flex;justify-content:center;margin-top:20px}
  .l4-rel-in,.l4-th-in,.l4-cero-in,.l4-rec-in,.l4-pan-in,.l4-plan-lado{grid-template-columns:1fr;gap:40px}
  .l4-rel-escena{height:auto;display:flex;flex-direction:column;gap:16px}
  .l4-rel-escena .l4-wa,.l4-rel-escena .l4-correo{position:relative;width:100%;left:auto;right:auto;bottom:auto}
  .l4-sabe-rej{grid-template-columns:1fr;gap:24px}
  .l4-sabe-flecha{display:none}
  .l4-hilo{grid-template-columns:1fr;gap:36px}.l4-hilo:before,.l4-hilo-lleno{display:none}
  .l4-th{padding:120px 0 70px}
  .l4-th-escena{height:520px}
  .l4-th-foto{width:100%;height:440px}
  .l4-prod{right:12px;top:18px;width:260px}
  .l4-cobrado{left:12px;width:300px}
  .l4-esc-cab{grid-template-columns:1fr}
  .l4-esc-rej{grid-template-columns:1fr 1fr;gap:14px}
  .l4-banda-pista{height:auto}
  .l4-banda-fijo{position:relative;height:auto;padding:84px 0}
  .l4-banda-tren{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 8px;scrollbar-width:none}
  .l4-banda-tren::-webkit-scrollbar{display:none}
  .l4-bt{width:300px;scroll-snap-align:start}
  .l4-banda-avance{display:none}
  .l4-zz{gap:64px;margin-top:48px}
  .l4-zz-f{grid-template-columns:1fr;gap:28px}
  .l4-zz-f:nth-child(even) .l4-zz-ui{order:0}
  .l4-mos{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .l4-mos figure{height:260px}
  .l4-mos figure:first-child{grid-row:auto;grid-column:span 2}
  .l4-mos figure:nth-child(4){grid-column:auto}
  .l4-rh{padding:96px 0 40px}
  .l4-rh-caja{grid-template-columns:1fr;min-height:0;border-radius:32px}
  .l4-rh-txt{padding:36px 22px 28px}
  .l4-rh-foto{height:520px;border-radius:0 0 32px 32px}
  .l4-agenda{left:12px;right:12px;bottom:14px;width:auto}
  .l4-aviso{right:12px;top:auto;bottom:320px;width:250px}
  .l4-flujo-rej{grid-template-columns:1fr;gap:40px}
  .l4-flujo .l4-pant{opacity:1}
  .l4-pan-cuerpo{min-height:640px}
  .l4-pan-vista{grid-template-columns:1fr}
  .l4-rec-escena{height:500px}
  .l4-rec-foto{width:100%;height:380px}
  .l4-rec-escena .l4-correo{left:12px;right:12px;width:auto}
  .l4-rej-ofi{columns:2}
  .l4-plan-rej{grid-template-columns:1fr}
  .l4-otras{padding:72px 0 0}
  .l4-otras-rej{grid-template-columns:1fr}
  .l4-otra-f{grid-template-columns:40px 1fr;gap:6px 16px;padding:18px 4px}
  .l4-otra-f .l4-ic{width:40px;height:40px;grid-row:1/3}
  .l4-otra-f>span:not(.l4-ic){grid-column:2}
  .l4-otra-f em{grid-column:2;margin-top:4px}
  .l4-franja{grid-template-columns:1fr;gap:28px;padding:32px 20px;border-radius:28px}
  .l4-blog-rej{grid-template-columns:1fr 1fr}
  .l4-blog-f-dos .l4-blog-rej{grid-template-columns:1fr}
  .l4-blog-f-dos .l4-bl:first-child{grid-row:auto}
  .l4-ofi-cab{flex-direction:column;align-items:flex-start}
  .l4-ofi-flechas{display:none}
}
@media (max-width:600px){
  .l4 h1{font-size:38px}
  .l4-bajada{font-size:17px}
  .l4-barra{flex-direction:column;align-items:stretch;padding:8px;border-radius:26px}
  .l4-barra input{padding:12px 14px}
  .l4-barra button{justify-content:center}
  .l4-bh-escena{height:540px}
  .l4-bh-movil{width:280px;margin-left:-140px;height:500px}
  .l4-bh .l4-chip{transform:scale(.92)}
  .l4-esc-rej{grid-template-columns:1fr}
  .l4-cobrado{width:auto;right:12px}
  .l4-cobrado-n b{font-size:36px}
  .l4-prod{width:auto;left:12px;right:12px}
  .l4-agenda-rej{grid-template-columns:22px repeat(5,1fr);gap:4px}
  .l4-cita{padding:0 5px;font-size:10.5px}
  .l4-blog-rej{grid-template-columns:1fr}
  .l4-blog-f-lista .l4-bl img{width:88px}
  .l4-blog-f-lista .l4-bl b{font-size:16.5px}
  .l4-blog-f-dos .l4-bl:not(:first-child) img{width:96px}
  .l4-mos{grid-template-columns:1fr}
  .l4-mos figure:first-child{grid-column:auto}
  .l4-rej-ofi{columns:1}
  .l4-cero-n{font-size:120px}
  .l4-rh-foto{height:560px}
  .l4-aviso{left:12px;width:auto}
  .l4-ofi-t{width:260px;height:380px}
}
@media (prefers-reduced-motion:reduce){
  .l4 *{animation:none!important;transition:none!important}
  .l4-rev,.l4-bh .l4-chip,.l4-th .l4-prod,.l4-th .l4-vendido,.l4-aviso{opacity:1!important;transform:none!important}
  [data-l4-chat] [data-paso],.l4-cobrado-l[data-paso]{display:flex!important}
  [data-l4-chat] p[data-paso]{display:block!important}
  .l4-cita{opacity:1;transform:none}
}