/* =========================================================
   LIENZO ÁUREO · Método ACD-IA® — capa aditiva sobre Alpint
   Prefijo lz-. No reemplaza estilos existentes, pinta encima.
   Roles de color mapeados a la paleta real de Alpint (§5):
     tinta       -> --grafito  (#12181F)
     primario    -> --azul     (#0E2A54)
     profundidad -> --azul-oscuro (#081B38)
     emoción     -> --naranja  (#C24E08)
     luz         -> ámbar nuevo, coherente con el naranja de marca
     vida        -> verde-azulado nuevo, para datos/éxito
     papel       -> --concreto / #FFFFFF
     conversación-> verde WhatsApp ya usado (--btn-wsp #1E7B45)
   ========================================================= */
:root{
  --lz-ink: var(--grafito, #12181F);
  --lz-primary: var(--azul, #0E2A54);
  --lz-depth: var(--azul-oscuro, #081B38);
  --lz-emotion: var(--naranja, #C24E08);
  --lz-light: #FFC24E;
  --lz-light-20: rgba(255,194,78,.20);
  --lz-light-32: rgba(255,194,78,.32);
  --lz-life: #1F9E88;
  --lz-paper: var(--concreto, #F3F4F1);
  --lz-chat: #1E7B45;
}

/* -------- Grano de tela (muy sutil, sitio completo) -------- */
.lz-grain{
  position:fixed; inset:0; z-index:2147483000;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* -------- Boceto áureo por sección -------- */
.lz-sketch-host{
  position:relative;
  isolation:isolate;
}
.lz-sketch{
  position:absolute;
  z-index:-1;
  width:min(640px,80vw);
  pointer-events:none;
}
.lz-sketch.o-tl{ top:8px; left:8px; }
.lz-sketch.o-br{ bottom:8px; right:8px; transform:scale(-1,-1); }
.lz-sketch.o-tr{ top:8px; right:8px; transform:scaleX(-1); }
.lz-sketch.o-bl{ bottom:8px; left:8px; transform:scaleY(-1); }
.lz-sketch .lz-grid{ fill:none; stroke:currentColor; stroke-width:1.1; }
.lz-sketch .lz-spiral{
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 2.6s cubic-bezier(.2,.6,.2,1);
}
.lz-sketch .lz-eye{ fill:currentColor; opacity:0; transition:opacity .6s ease 2s; }
.lz-sketch-host.is-visible .lz-sketch .lz-spiral{ stroke-dashoffset:0; }
.lz-sketch-host.is-visible .lz-sketch .lz-eye{ opacity:.9; animation:lz-eye-pulse 2.4s ease-in-out 2.6s 1; }
@keyframes lz-eye-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.8); } }

.lz-sketch-host.lz-dark .lz-sketch{ color:rgba(255,255,255,.14); }
.lz-sketch-host:not(.lz-dark) .lz-sketch{ color:rgba(14,42,84,.10); }

/* -------- Cartela de galería -------- */
.lz-plate{
  position:absolute; z-index:2;
  top:14px; right:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.04em;
  padding:6px 10px;
  border-radius:3px;
  background:rgba(255,255,255,.85);
  color:var(--lz-ink);
  border:1px solid rgba(14,42,84,.12);
  pointer-events:none;
}
.lz-sketch-host.lz-dark .lz-plate{
  background:rgba(8,27,56,.55);
  color:#dfe6f0;
  border-color:rgba(255,255,255,.18);
}
@media (max-width:860px){ .lz-plate{ display:none; } }

/* -------- Pincelada bajo títulos de sección -------- */
.lz-brush-wrap{ position:relative; display:inline-block; }
.lz-brush{
  display:block;
  width:61.8%;
  height:10px;
  margin-top:2px;
  overflow:visible;
}
.lz-brush path{
  fill:none; stroke:var(--lz-emotion); stroke-width:5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1) .15s;
  opacity:.75;
  /* stroke-dasharray/-dashoffset iniciales se fijan por JS con la longitud
     real del trazo (path.getTotalLength()): con preserveAspectRatio="none"
     (escala no uniforme) el pathLength normalizado por CSS no es fiable
     en todos los navegadores y el trazo queda invisible. */
}
.lz-brush-wrap.is-visible .lz-brush path{ stroke-dashoffset:0 !important; }

/* -------- Primera cartela: invitación --------
   Ancla al mismo .lz-sketch-host (position:relative) que usa la
   cartela — antes quedaba sin posición propia y cualquier layout de
   la sección la aplastaba contra el borde izquierdo. */
.lz-invite{
  position:absolute; z-index:2;
  top:48px; right:14px; max-width:200px;
  text-align:right;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lz-emotion);
  opacity:0; transition:opacity .6s ease;
  pointer-events:none;
}
.lz-invite.is-visible{ opacity:.8; }
@media (max-width:860px){ .lz-invite{ display:none; } }

/* -------- Fotos reales: revelado a color + zoom suave -------- */
.lz-photo-clip{ display:block; overflow:hidden; position:relative; }
.lz-photo-fx{
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .9s ease;
  filter:saturate(.78) grayscale(.3) contrast(.98);
}
.lz-photo-fx.is-visible{ filter:saturate(1) grayscale(0) contrast(1); }
.lz-photo-clip:hover .lz-photo-fx{ transform:scale(1.06); }
.lz-photo-fx--frame{ transition:filter .9s ease, transform .4s ease; }
.lz-photo-fx--frame:hover{ transform:scale(1.025); }

.lz-photo-veil{
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--lz-primary, #0E2A54) 0%, transparent 62%);
  mix-blend-mode:multiply;
  opacity:.28;
  transition:opacity 1s ease;
  pointer-events:none;
}
.lz-photo-clip.is-visible .lz-photo-veil{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .lz-photo-fx, .lz-photo-fx--frame{ filter:none; transition:none; transform:none; }
  .lz-photo-clip:hover .lz-photo-fx, .lz-photo-fx--frame:hover{ transform:none; }
  .lz-photo-veil{ opacity:0; transition:none; }
}

/* -------- Videos livianos: no cargan ni un byte hasta acercarse,
   y se quedan solo en su foto de portada en modo lite/reducido -------- */
.lz-video{
  display:block; width:100%; height:100%;
  object-fit:cover;
  background:#0E2A54;
  opacity:0;
  transition:opacity .7s ease;
}
.lz-video.is-visible{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .lz-video{ opacity:1; transition:none; }
}

/* -------- Cursor de marca (solo escritorio con mouse) --------
   Un punto de plomada fijo (el punto exacto de apoyo) + una mira de
   precisión con escuadras de nivel que se retrasa levemente detrás —
   simboliza la precisión de obra de ALPINT (nivel, plomada, calce
   exacto), no un efecto decorativo. Dos transform por frame, sin
   canvas ni estela. */
body.lz-cursor-on, body.lz-cursor-on *{ cursor:none; }

.lz-cursor-dot,
.lz-cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:2147482999;
  transform:translate(-50vw,-50vh);
  will-change:transform;
}
/* punto de plomada: el punto exacto que el cursor señala */
.lz-cursor-dot{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--lz-emotion);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.55);
  transition:transform .15s ease;
}
.lz-cursor-dot.is-down{ transform-origin:center; }

/* mira de nivel: cuatro escuadras tipo "nivel de obra / target de
   precisión", con una cruz fina en el centro — nada de aro liso. */
.lz-cursor-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  transition:width .2s ease, height .2s ease, margin .2s ease, transform .2s ease, opacity .2s ease;
}
.lz-cursor-ring svg{ display:block; width:100%; height:100%; overflow:visible; }
.lz-cursor-ring .lz-cf-corner{
  fill:none; stroke:var(--lz-light-32, rgba(255,194,78,.55));
  stroke-width:2; stroke-linecap:square;
  transition:stroke .2s ease;
}
.lz-cursor-ring .lz-cf-cross{
  stroke:var(--lz-light-32, rgba(255,194,78,.55));
  stroke-width:1; transition:stroke .2s ease, opacity .2s ease;
  opacity:.7;
}
.lz-cursor-ring.is-hover{
  width:50px; height:50px; margin:-25px 0 0 -25px;
  transform:rotate(45deg);
}
.lz-cursor-ring.is-hover .lz-cf-corner{ stroke:var(--lz-emotion); }
.lz-cursor-ring.is-hover .lz-cf-cross{ stroke:var(--lz-emotion); opacity:1; }
.lz-cursor-ring.is-down{ opacity:.55; }

@media (prefers-reduced-motion: reduce){
  .lz-sketch .lz-spiral{ stroke-dashoffset:0; transition:none; }
  .lz-sketch .lz-eye{ opacity:.9; animation:none; }
  .lz-brush path{ stroke-dashoffset:0; transition:none; }
  .lz-cursor-dot, .lz-cursor-ring{ display:none; }
  body.lz-cursor-on, body.lz-cursor-on *{ cursor:auto; }
}

/* -------- Banner de consentimiento -------- */
.lz-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:2147483647;
  display:flex; justify-content:center;
  padding:16px;
  transform:translateY(120%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.lz-consent.is-open{ transform:translateY(0); pointer-events:auto; }
.lz-consent-box{
  max-width:720px; width:100%;
  background:var(--lz-depth);
  color:#dfe6f0;
  border-radius:8px;
  padding:18px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  border:1px solid rgba(255,255,255,.1);
}
.lz-consent-txt{ flex:1 1 320px; font-size:13.5px; line-height:1.5; margin:0; }
.lz-consent-txt a{ color:var(--lz-light); text-decoration:underline; }
.lz-consent-actions{ display:flex; gap:10px; flex:0 0 auto; }
.lz-consent-btn{
  font-family:'Inter'; font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:3px; border:none; cursor:pointer;
}
.lz-consent-reject{ background:transparent; color:#dfe6f0; border:1.5px solid rgba(255,255,255,.4); }
.lz-consent-reject:hover{ border-color:#fff; }
.lz-consent-accept{ background:var(--lz-emotion); color:#fff; }
.lz-consent-accept:hover{ background:var(--naranja-oscuro, #A34004); }
@media (max-width:560px){
  .lz-consent{ padding:10px; }
  .lz-consent-box{ flex-direction:column; align-items:stretch; padding:16px; }
  .lz-consent-actions{ justify-content:stretch; }
  .lz-consent-btn{ flex:1; text-align:center; }
}