/*
Theme Name: Lucespro
Theme URI: https://lucespro.com
Description: Child theme de Bricks para Lucespro — Audio & luces para profesionales. Sistema de diseño de marca (rojo #EB0000 / negro / blanco), tipografías y componentes con firma.
Author: Lucespro · Grupo Minoret
Template: bricks
Version: 1.0.0
Text Domain: lucespro
*/

/* =========================================================
   1) TOKENS DE MARCA  (variables globales)
   Usalas en Bricks como var(--lp-red), etc.
   ========================================================= */
:root{
  --lp-ink:#0E0E11;        /* negro de marca */
  --lp-ink-2:#161619;
  --lp-paper:#FFFFFF;
  --lp-paper-2:#F2F2F3;
  --lp-line:#E6E6E8;
  --lp-muted:#6E6E73;
  --lp-text:#16161A;
  --lp-red:#EB0000;        /* Pantone Red 032 */
  --lp-red-deep:#C20000;
  --lp-red-soft:#FF4A4A;

  --lp-font-display:'Archivo',sans-serif;
  --lp-font-body:'Hanken Grotesk',system-ui,sans-serif;
  --lp-font-mono:'Space Mono',monospace;

  --lp-r:16px;
  --lp-ease:cubic-bezier(.2,.7,.2,1);
  --lp-maxw:1180px;
}

/* =========================================================
   2) BASE
   ========================================================= */
body{font-family:var(--lp-font-body);color:var(--lp-text);-webkit-font-smoothing:antialiased}
.lp-display{font-family:var(--lp-font-display);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.lp-mono{font-family:var(--lp-font-mono)}
.lp-eyebrow{font-family:var(--lp-font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lp-muted)}
.lp-wordmark{font-family:var(--lp-font-display);font-weight:900;letter-spacing:.06em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--lp-red);outline-offset:3px;border-radius:4px}

/* =========================================================
   3) BOTONES
   ========================================================= */
.lp-btn{border:none;cursor:pointer;font-family:var(--lp-font-body);font-weight:600;font-size:15.5px;
  padding:15px 26px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .2s var(--lp-ease),box-shadow .25s,background .25s;text-decoration:none}
.lp-btn--red{background:var(--lp-red);color:#fff}
.lp-btn--red:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(235,0,0,.4);background:var(--lp-red-deep)}
.lp-btn--dark{background:var(--lp-ink);color:#fff}
.lp-btn--dark:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(14,14,17,.3)}
.lp-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.lp-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* =========================================================
   4) COMPONENTE FIRMA: HERO + BEAM
   En Bricks: sección con clase .lp-hero, dentro divs con estas clases.
   ========================================================= */
.lp-hero{position:relative;background:var(--lp-ink);color:#fff;overflow:hidden;isolation:isolate}
.lp-beam{position:absolute;top:-8%;left:50%;z-index:1;width:700px;height:150%;
  transform:translateX(-50%) rotate(0);transform-origin:top center;
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(255,255,255,.5) 0%,rgba(235,0,0,.42) 26%,rgba(235,0,0,.12) 58%,transparent 100%);
  filter:blur(16px);mix-blend-mode:screen;animation:lp-sway 9s ease-in-out infinite;pointer-events:none}
.lp-beam--2{width:340px;opacity:.55;animation-duration:13s;animation-direction:reverse}
@keyframes lp-sway{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
.lp-hero-glow{position:absolute;left:50%;top:34%;z-index:0;width:540px;height:540px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(235,0,0,.28),transparent 62%);filter:blur(22px);pointer-events:none}

/* =========================================================
   5) MARQUEE DE MARCAS
   ========================================================= */
.lp-marquee{overflow:hidden;padding:30px 0;border-block:1px solid var(--lp-line)}
.lp-mtrack{display:flex;gap:60px;width:max-content;align-items:center;animation:lp-scroll 32s linear infinite}
.lp-marquee:hover .lp-mtrack{animation-play-state:paused}
.lp-mtrack span{font-family:var(--lp-font-display);font-weight:800;font-size:24px;color:#1a1a1e;opacity:.55;
  white-space:nowrap;transition:opacity .2s,color .2s}
.lp-mtrack span:hover{opacity:1;color:var(--lp-red)}
@keyframes lp-scroll{to{transform:translateX(-50%)}}

/* =========================================================
   6) FICHA DE PRODUCTO: TABLA DE SPECS
   (alimentada por ACF — ver functions.php)
   ========================================================= */
.lp-specs{border:1px solid var(--lp-line);border-radius:14px;overflow:hidden}
.lp-specs .row{display:flex;justify-content:space-between;padding:13px 18px;font-size:14px;border-bottom:1px solid var(--lp-line)}
.lp-specs .row:last-child{border-bottom:none}
.lp-specs .row .k{color:var(--lp-muted)}
.lp-specs .row .v{font-family:var(--lp-font-mono);font-weight:700}

/* =========================================================
   7) STICKY ADD-TO-CART
   ========================================================= */
.lp-sticky-cart{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--lp-line);transform:translateY(110%);
  transition:transform .4s var(--lp-ease)}
.lp-sticky-cart.show{transform:translateY(0)}

/* =========================================================
   8) REVEAL ON SCROLL  +  reduce motion
   ========================================================= */
.lp-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--lp-ease),transform .7s var(--lp-ease)}
.lp-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .lp-reveal{opacity:1;transform:none}
}