/* ============================================================
   LEVELUPERU UI-KIT — base.css
   Reset + layout + componentes premium. Requiere tokens.css.
   Convención: .lu-* para componentes. Sin dependencias CSS.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:var(--lh-snug);letter-spacing:var(--track-tight);font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
::selection{background:var(--primary);color:var(--primary-ink)}

/* ---------- Tipografía ---------- */
.lu-hero-title{font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:800}
.lu-h1{font-size:var(--fs-h1)} .lu-h2{font-size:var(--fs-h2)} .lu-h3{font-size:var(--fs-h3)}
.lu-lead{font-size:var(--fs-lead);color:var(--text-2);max-width:60ch}
.lu-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-eyebrow);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--primary);font-weight:600}
.lu-eyebrow::before{content:"";width:1.5rem;height:1px;background:currentColor}
.lu-grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lu-muted{color:var(--text-2)} .lu-small{font-size:var(--fs-small)} .lu-mono{font-family:var(--font-mono)}

/* ---------- Layout ---------- */
.lu-container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.lu-container--wide{width:min(100% - 2*var(--gutter),var(--container-wide));margin-inline:auto}
.lu-section{padding-block:var(--section);position:relative}
.lu-section--alt{background:var(--bg-2)}
.lu-section-head{max-width:720px;margin-bottom:var(--space-12);display:grid;gap:var(--space-4)}
.lu-section-head--center{margin-inline:auto;text-align:center}
.lu-section-head--center .lu-lead{margin-inline:auto}
.lu-grid{display:grid;gap:var(--space-6)}
.lu-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.lu-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* Antes con 1fr las cards se estiraban a lo ancho cuando había pocos items en la fila (4
   productos en un contenedor de 1200px daban cards de 280px+ — demasiado aire). Se tope el
   ancho máximo: cards densas y de tamaño consistente tengas 4 o 20 productos. */
.lu-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),240px))}
.lu-stack{display:grid;gap:var(--space-4)}
.lu-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}

/* ---------- Fondos y efectos ---------- */
.lu-noise::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lu-glow-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none;will-change:transform}
.lu-glow-orb--primary{background:var(--primary)} .lu-glow-orb--accent{background:var(--accent)} .lu-glow-orb--accent2{background:var(--accent-2)}
.lu-grid-bg{background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.lu-glass{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.lu-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}

/* ---------- Botones ---------- */
.lu-btn{--pad:.95rem 1.5rem;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:var(--pad);border-radius:var(--radius-pill);font-weight:600;font-size:.98rem;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur),color var(--dur),border-color var(--dur);white-space:nowrap}
.lu-btn svg{width:1.1em;height:1.1em;transition:transform var(--dur) var(--ease-out)}
.lu-btn:hover svg{transform:translateX(3px)}
.lu-btn:active{transform:translateY(1px) scale(.99)}
.lu-btn--primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow)}
.lu-btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,230,0,.4),0 14px 40px -10px rgba(255,230,0,.7)}
.lu-btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.lu-btn--primary:hover::after{transform:translateX(120%)}
.lu-btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.lu-btn--ghost:hover{background:var(--surface-2);border-color:var(--text-2);transform:translateY(-2px)}
.lu-btn--glass{color:var(--text);background:var(--surface);border-color:var(--border);backdrop-filter:blur(12px)}
.lu-btn--glass:hover{background:var(--surface-2);transform:translateY(-2px)}
.lu-btn--whatsapp{background:#25D366;color:#062b16;box-shadow:0 0 40px -10px rgba(37,211,102,.7)}
.lu-btn--whatsapp:hover{transform:translateY(-2px);background:#2ee06c}
.lu-btn--lg{--pad:1.15rem 2rem;font-size:1.05rem} .lu-btn--sm{--pad:.6rem 1rem;font-size:.88rem}
.lu-btn--block{width:100%}

/* ---------- Badges / pills ---------- */
.lu-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:var(--radius-pill);font-size:.82rem;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--text-2)}
.lu-pill--live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:lu-ping 1.8s infinite}
.lu-pill--primary{background:rgba(255,230,0,.12);border-color:rgba(255,230,0,.35);color:var(--primary)}
@keyframes lu-ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}

/* ---------- Nav ---------- */
.lu-nav{position:sticky;top:0;z-index:50;transition:background var(--dur),border-color var(--dur),padding var(--dur)}
.lu-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:1.1rem}
.lu-nav.is-scrolled{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--border)}
.lu-nav.is-scrolled .lu-nav__inner{padding-block:.75rem}
.lu-nav__logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.lu-nav__logo img{height:32px;width:auto}
.lu-nav__links{display:flex;gap:.25rem;list-style:none;margin:0;padding:.3rem;border-radius:var(--radius-pill)}
.lu-nav__links a{padding:.55rem .95rem;border-radius:var(--radius-pill);color:var(--text-2);font-size:.93rem;font-weight:500;transition:color var(--dur),background var(--dur)}
.lu-nav__links a:hover,.lu-nav__links a.is-active{color:var(--text);background:var(--surface-2)}
.lu-nav__cta{display:flex;gap:.5rem;align-items:center}
.lu-nav__burger{display:none;width:44px;height:44px;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface);cursor:pointer;place-items:center;place-content:center}
.lu-nav__burger span{display:block;width:18px;height:2px;background:var(--text);margin:2px 0;transition:transform var(--dur),opacity var(--dur)}
@media (max-width:900px){
  .lu-nav__links,.lu-nav__cta .lu-btn--ghost{display:none}
  .lu-nav__burger{display:grid}
  .lu-nav.is-open .lu-nav__links{display:flex;flex-direction:column;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + .5rem);padding:.75rem;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--border);box-shadow:var(--shadow-3)}
  .lu-nav.is-open .lu-nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .lu-nav.is-open .lu-nav__burger span:nth-child(2){opacity:0}
  .lu-nav.is-open .lu-nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ---------- Hero ---------- */
.lu-hero{position:relative;min-height:min(92vh,900px);display:grid;align-items:center;overflow:hidden;padding-block:var(--space-16)}
.lu-hero__bg{position:absolute;inset:0;z-index:0}
.lu-hero__bg canvas{position:absolute;inset:0;width:100%;height:100%}
.lu-hero__fade{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.lu-hero__inner{position:relative;z-index:1;display:grid;gap:var(--space-8);align-items:center}
.lu-hero__inner--split{grid-template-columns:1.1fr .9fr}
.lu-hero__content{display:grid;gap:var(--space-6);max-width:680px}
.lu-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.lu-hero__visual{position:relative;min-height:420px}
.lu-hero--center{text-align:center} .lu-hero--center .lu-hero__content{margin-inline:auto;justify-items:center}
.lu-hero--center .lu-hero__actions{justify-content:center}
.lu-hero--center .lu-lead,.lu-hero--center .lu-eyebrow{text-shadow:0 0 6px var(--bg),0 0 22px var(--bg)} /* legible sobre el canvas */
@media (max-width:900px){.lu-hero__inner--split{grid-template-columns:1fr}.lu-hero__visual{min-height:320px;order:-1}}

/* ---------- Marquee ---------- */
.lu-marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lu-marquee__track{display:flex;gap:var(--space-12);width:max-content;animation:lu-marquee var(--marquee-speed,32s) linear infinite}
.lu-marquee:hover .lu-marquee__track{animation-play-state:paused}
.lu-marquee__item{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--text-3);white-space:nowrap;transition:color var(--dur)}
.lu-marquee__item:hover{color:var(--text)}
.lu-marquee__item img{height:28px;width:auto;opacity:.6;filter:grayscale(1);transition:opacity var(--dur),filter var(--dur)}
.lu-marquee__item:hover img{opacity:1;filter:none}
@keyframes lu-marquee{to{transform:translateX(-50%)}}

/* ---------- Cards ---------- */
.lu-card{position:relative;padding:var(--space-8);border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--border);transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur),background var(--dur);overflow:hidden;display:grid;gap:var(--space-4);align-content:start}
.lu-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-3);background:var(--surface-2)}
.lu-card::before{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 40%);opacity:0;transition:opacity var(--dur);pointer-events:none}
.lu-card:hover::before{opacity:1}
/* Antes: rgba(255,230,0,.1) fijo (amarillo) sin relación con la marca del proyecto — se
   veía bien en el cliente donde se escribió, mal en cualquier otro con --primary distinto
   (quedaba un chip amarillo suelto sobre una marca azul, por ejemplo). Ahora deriva de
   --primary con color-mix: se adapta solo a los tokens de cada proyecto. */
.lu-card__icon{width:52px;height:52px;border-radius:var(--radius);display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 28%,transparent)}
.lu-card__icon svg{width:24px;height:24px}
.lu-card__title{font-size:var(--fs-h3)}
.lu-card__text{color:var(--text-2)}
.lu-card__link{display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-weight:600;margin-top:auto}
.lu-card__link svg{width:1em;height:1em;transition:transform var(--dur) var(--ease-out)} .lu-card:hover .lu-card__link svg{transform:translateX(4px)}
.lu-card--glow:hover{box-shadow:var(--shadow-3),var(--glow)}
.lu-card--tilt{transform-style:preserve-3d;will-change:transform}
.lu-card--tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)}
.lu-card--media{padding:0}
.lu-card--media .lu-card__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.lu-card--media .lu-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.lu-card--media:hover .lu-card__media img{transform:scale(1.06)}
.lu-card--media .lu-card__body{padding:var(--space-6);display:grid;gap:var(--space-3)}
.lu-card__badge{position:absolute;top:1rem;left:1rem;z-index:1}
.lu-product__media .lu-pill--primary{background:var(--primary);color:var(--primary-ink);border-color:transparent} /* sólido: sobre fondo blanco el translúcido no se lee */

/* Producto (tienda) — card compacta y densa (regla ecommerce-que-vende: foto >= 60% de la
   card, nunca de agencia). El cuerpo va apretado a propósito para que la foto domine y quepan
   más productos por pantalla (tipo Grainger/Screwfix), no una card larga con mucho aire. */
.lu-product{padding:0;text-align:left}
.lu-product__media{aspect-ratio:1/1;background:#fff;border-radius:var(--radius-l) var(--radius-l) 0 0;overflow:hidden;position:relative;display:grid;place-items:center}
.lu-product__media img{width:92%;height:92%;object-fit:contain;transition:transform var(--dur-slow) var(--ease-out)}
.lu-product:hover .lu-product__media img{transform:scale(1.08) rotate(-1deg)}
.lu-product__body{padding:var(--space-3);display:grid;gap:.22rem}
/* La categoría ya se ve por breadcrumb/filtro en la página de tienda; en la card solo resta
   alto — se mantiene en el DOM (accesibilidad/SEO) pero no ocupa espacio visual. */
.lu-product__cat{display:none}
.lu-product__name{font-size:.92rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.lu-product__price{font-family:var(--font-display);font-size:1.15rem;font-weight:800}
.lu-product__price small{font-size:.7rem;color:var(--text-3);font-weight:500;margin-left:.25rem}
.lu-product__actions{display:flex;gap:.5rem;margin-top:0}
.lu-product .lu-btn--sm{--pad:.5rem .6rem}
@media (max-width:600px){ /* móvil: 2 columnas de producto (1 columna = cards largas, scroll eterno) */
  .lu-grid:has(> .lu-product){grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .lu-product .lu-btn--sm{--pad:.55rem .6rem}
}

/* ---------- Bento ---------- */
.lu-bento{display:grid;gap:var(--space-4);grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto)}
.lu-bento > .lu-card{margin:0}
.lu-bento__item--2{grid-column:span 2} .lu-bento__item--3{grid-column:span 3} .lu-bento__item--4{grid-column:span 4} .lu-bento__item--6{grid-column:span 6}
.lu-bento__item--tall{grid-row:span 2}
.lu-bento__stat{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1;letter-spacing:-.04em}
.lu-bento__stat span{color:var(--primary)}
@media (max-width:900px){.lu-bento__item--2,.lu-bento__item--3,.lu-bento__item--4{grid-column:span 3}}
@media (max-width:600px){.lu-bento{grid-template-columns:1fr}.lu-bento > *{grid-column:span 1!important;grid-row:span 1!important}}

/* ---------- Pasos ---------- */
.lu-steps{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));counter-reset:step}
.lu-step{position:relative;padding-top:var(--space-6);border-top:1px solid var(--border);display:grid;gap:.6rem}
.lu-step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--primary);line-height:1;letter-spacing:-.04em}
.lu-step::after{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--primary);transition:width var(--dur-slow) var(--ease-out)}
.lu-step:hover::after,.lu-step.is-inview::after{width:100%}
.lu-step__title{font-size:1.15rem}
.lu-step__text{color:var(--text-2)}

/* ---------- Testimonios ---------- */
.lu-testimonial{display:grid;gap:var(--space-6)}
.lu-testimonial__quote{font-family:var(--font-display);font-size:1.15rem;line-height:1.5;font-weight:500}
.lu-testimonial__quote::before{content:"“";color:var(--primary);font-size:2.5rem;line-height:0;vertical-align:-.4em;margin-right:.2rem}
.lu-testimonial__author{display:flex;align-items:center;gap:.9rem}
.lu-testimonial__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--grad-cool);border:2px solid var(--border-strong)}
.lu-testimonial__name{font-weight:700;font-size:.95rem} .lu-testimonial__role{color:var(--text-3);font-size:.85rem}
.lu-stars{display:flex;gap:2px;color:var(--primary)} .lu-stars svg{width:16px;height:16px}

/* ---------- Pricing ---------- */
.lu-pricing{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.lu-price{display:grid;gap:var(--space-6);align-content:start}
.lu-price--featured{border-color:rgba(255,230,0,.45);background:linear-gradient(180deg,rgba(255,230,0,.08),transparent 40%),var(--surface);box-shadow:var(--glow)}
.lu-price__amount{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.lu-price__amount small{font-size:1rem;color:var(--text-3);font-weight:500;letter-spacing:0}
.lu-price__amount sup{font-size:1.2rem;vertical-align:top;margin-right:.15rem;color:var(--text-2)}
.lu-price__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;color:var(--text-2)}
.lu-price__list li{display:flex;gap:.6rem;align-items:flex-start}
.lu-price__list li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:rgba(255,230,0,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFE600' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.lu-toggle{display:inline-flex;padding:.3rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border);gap:.25rem}
.lu-toggle button{padding:.5rem 1.1rem;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--text-2);font-weight:600;cursor:pointer;transition:background var(--dur),color var(--dur)}
.lu-toggle button.is-active{background:var(--primary);color:var(--primary-ink)}

/* ---------- FAQ ---------- */
.lu-faq{display:grid;gap:.75rem;max-width:820px;margin-inline:auto}
.lu-faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color var(--dur),background var(--dur)}
.lu-faq details[open]{border-color:var(--border-strong);background:var(--surface-2)}
.lu-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.35rem;font-weight:600;font-family:var(--font-display)}
.lu-faq summary::-webkit-details-marker{display:none}
.lu-faq summary::after{content:"+";font-size:1.4rem;color:var(--primary);transition:transform var(--dur) var(--ease-out);line-height:1}
.lu-faq details[open] summary::after{transform:rotate(45deg)}
.lu-faq__body{padding:0 1.35rem 1.25rem;color:var(--text-2)}

/* ---------- Stats / contadores ---------- */
.lu-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--space-6)}
.lu-stat{display:grid;gap:.3rem;padding-left:var(--space-4);border-left:2px solid var(--primary)}
.lu-stat__num{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.lu-stat__label{color:var(--text-2);font-size:.95rem}

/* ---------- CTA final ---------- */
.lu-cta{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:clamp(3rem,7vw,5.5rem);text-align:center;border:1px solid var(--border);background:var(--surface);isolation:isolate}
.lu-cta::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(255,230,0,.25) 60deg,transparent 120deg,rgba(124,245,255,.2) 200deg,transparent 260deg,rgba(176,140,255,.2) 320deg,transparent 360deg);animation:lu-spin 18s linear infinite;z-index:-1;filter:blur(40px)}
.lu-cta__inner{display:grid;gap:var(--space-6);justify-items:center;max-width:720px;margin-inline:auto}
@keyframes lu-spin{to{transform:rotate(360deg)}}

/* ---------- Formularios ---------- */
.lu-field{display:grid;gap:.4rem}
.lu-field label{font-size:.88rem;font-weight:600;color:var(--text-2)}
.lu-input{width:100%;padding:.9rem 1.1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
.lu-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,230,0,.15);background:var(--surface-2)}
.lu-input::placeholder{color:var(--text-3)}
textarea.lu-input{min-height:130px;resize:vertical}
.lu-form{display:grid;gap:var(--space-4)} .lu-form--2{grid-template-columns:1fr 1fr} .lu-form .lu-field--full{grid-column:1/-1}
@media (max-width:600px){.lu-form--2{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.lu-footer{border-top:1px solid var(--border);padding-block:var(--space-16) var(--space-8);background:var(--bg-2)}
.lu-footer__grid{display:grid;gap:var(--space-8);grid-template-columns:1.5fr 1fr 1fr 1fr}
.lu-footer__brand{display:grid;gap:var(--space-4);align-content:start}
.lu-footer__brand p{color:var(--text-2);max-width:32ch}
.lu-footer h3,.lu-footer h4{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-4)}
.lu-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.lu-footer ul a{color:var(--text-2);transition:color var(--dur)} .lu-footer ul a:hover{color:var(--text)}
.lu-footer__bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);color:var(--text-3);font-size:.85rem}
/* Sello "Libro de reclamaciones": texto HTML real (accesible, nítido), ícono rojo oficial */
.lu-footer__legal{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem .4rem .45rem;border-radius:6px;background:#fff;color:#111;font-size:.62rem;font-weight:700;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;transition:transform var(--dur) var(--ease-out)}
.lu-footer__legal:hover{transform:translateY(-2px)}
.lu-footer__legal svg{width:26px;height:26px;flex:none} .lu-footer__legal img{height:36px;width:auto}
@media (max-width:900px){.lu-footer__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.lu-footer__grid{grid-template-columns:1fr}}
@media (max-width:700px){.lu-footer{padding-bottom:calc(var(--space-8) + 76px)}} /* que el WhatsApp flotante no tape el pie */

/* ---------- WhatsApp flotante ---------- */
.lu-wa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(37,211,102,.8);transition:transform var(--dur) var(--ease-out)}
.lu-wa:hover{transform:scale(1.08) rotate(-6deg)} .lu-wa svg{width:30px;height:30px;fill:#fff}
.lu-wa::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.5);animation:lu-wa-ring 2s infinite}
@keyframes lu-wa-ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* ---------- Reveal (motion.js) ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal].is-inview{opacity:1;transform:none}
[data-reveal="fade"]{transform:none} [data-reveal="left"]{transform:translateX(-32px)} [data-reveal="right"]{transform:translateX(32px)} [data-reveal="scale"]{transform:scale(.94)}
/* Primer hero (above the fold): se anima solo al cargar, sin esperar JS ni al observer → no retrasa el LCP */
@keyframes lu-reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.lu-hero:first-of-type [data-reveal]{opacity:1;transform:none;transition:none;animation:lu-reveal var(--dur-slow) var(--ease-out) both;animation-delay:var(--d,0s)}
/* Título palabra por palabra (motion.js, [data-split]); sin GSAP */
@keyframes lu-word{from{transform:translateY(110%)}to{transform:none}}
.lu-word{display:inline-block;overflow:hidden;vertical-align:top}
.lu-word>span{display:inline-block;animation:lu-word 1s var(--ease-out) both;animation-delay:var(--wd,0s)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.lu-marquee__track,.lu-cta::before,.lu-hero:first-of-type [data-reveal],.lu-word>span{animation:none}}

/* ---------- Cursor glow (opcional) ---------- */
.lu-cursor{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,230,0,.10),transparent 60%);transform:translate(-50%,-50%);transition:opacity .4s;mix-blend-mode:screen}
@media (hover:none){.lu-cursor{display:none}}

/* ---------- Utilidades ---------- */
.lu-center{text-align:center} .lu-mt-4{margin-top:var(--space-4)} .lu-mt-8{margin-top:var(--space-8)} .lu-mt-12{margin-top:var(--space-12)}
.lu-hide-mobile{display:initial} @media (max-width:700px){.lu-hide-mobile{display:none}}
.lu-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Elementos inline dentro de grids (pills, botones sueltos) no se estiran */
.lu-hero__content > .lu-pill,.lu-stack > .lu-pill,.lu-stack > .lu-btn,.lu-section-head > .lu-pill,.lu-card > .lu-pill{justify-self:start}
.lu-hero--center .lu-hero__content > .lu-pill{justify-self:center}
@media (max-width:700px){.lu-glow-orb{opacity:.28;filter:blur(70px)}}