/* ============================================================================
   INNOVATIONS WELDER · Landing premium
   Material: Liquid Glass (Apple / visionOS) — cristal físico, no glassmorphism.
   Movimiento: transform / opacity, compositor GPU, 60 fps.
   ========================================================================== */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root{
  /* Color */
  --bg:            #050505;
  --bg-2:          #0a0a0b;
  --ink:           #f5f5f7;
  --ink-2:         rgba(245,245,247,.72);
  --ink-3:         rgba(245,245,247,.46);
  --accent:        #ff6a00;
  --accent-2:      #ff9a3c;
  --accent-deep:   #c74400;
  --logo-ink:      #ffe6d2;

  /* ── Material Liquid Glass ──
     Poco desenfoque a propósito: el cristal REFRACTA el fondo, no lo tapa. */
  --glass-blur:     11px;
  --glass-sat:      190%;
  --glass-bright:   1.05;
  --glass-contrast: 1.06;

  /* Estado del material — la interacción del cursor sólo escribe aquí */
  --mxn: .5;          /* posición X del cursor, 0–1 */
  --myn: .0;          /* posición Y del cursor, 0–1 */
  --mx: calc(var(--mxn) * 100%);
  --my: calc(var(--myn) * 100%);
  --lg-glow: .34;     /* intensidad del reflejo especular */
  --lg-rim:  .28;     /* intensidad del borde iluminado */
  --ix: 0px;          /* desplazamiento del contenido interno */
  --iy: 0px;

  /* Forma */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --r-pill: 999px;

  /* Ritmo */
  --shell: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --sec: clamp(90px, 12vw, 168px);

  /* Movimiento */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
  --t-fast: .3s;
  --t-med:  .62s;
  --t-slow: 1.1s;

  --watermark: "INNOVATIONS WELDER";
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.6;
  letter-spacing:-.011em;
  font-feature-settings:'ss01' 1,'cv01' 1;   /* alternativas de interfaz */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100%; }
/* Esta regla es obligatoria: la línea de arriba (display:block en autor) gana
   al [hidden]{display:none} del navegador, así que sin esto un elemento con
   atributo hidden se seguiría viendo. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:10px 16px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-weight:600;
  transform:translateY(-160%);
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus{ transform:translateY(0); }

.lg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.shell{ width:min(100% - var(--pad)*2, var(--shell)); margin-inline:auto; }


/* ─────────────────── 2. ATMÓSFERA DE FONDO ─────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:0; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.glow-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(120px); will-change:transform; }
.orb-1{
  width:46vmax; height:46vmax; top:-14vmax; right:-10vmax;
  background:radial-gradient(circle,rgba(255,106,0,.20),transparent 68%);
  animation:drift1 26s var(--ease-io) infinite alternate;
}
.orb-2{
  width:38vmax; height:38vmax; bottom:-14vmax; left:-8vmax;
  background:radial-gradient(circle,rgba(255,106,0,.11),transparent 70%);
  animation:drift2 32s var(--ease-io) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(-6vmax,5vmax,0) scale(1.12); } }
@keyframes drift2{ to{ transform:translate3d(7vmax,-4vmax,0) scale(1.08); } }


/* ══════════════════════════════════════════════════════════════════════════
   3. MATERIAL LIQUID GLASS
   Se construye por capas, como el vidrio real:
     a) cuerpo translúcido con tinte multicapa
     b) refracción óptica del fondo (feDisplacementMap) + desenfoque mínimo
     c) canto biselado que atrapa la luz (sombras internas)
     d) reflejo especular que responde al cursor  → ::before, blend screen
     e) borde iluminado iridiscente               → ::after, máscara xor
   ══════════════════════════════════════════════════════════════════════════ */
.lg{
  position:relative;
  isolation:isolate;
  border-radius:var(--r-lg);

  /* a) cuerpo del cristal — cuatro paradas, no un velo plano */
  background:
    linear-gradient(157deg,
      rgba(255,255,255,.115) 0%,
      rgba(255,255,255,.042) 26%,
      rgba(255,255,255,.014) 55%,
      rgba(255,255,255,.030) 78%,
      rgba(255,255,255,.075) 100%);

  /* b) refracción + desenfoque contenido */
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) contrast(var(--glass-contrast));
          backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) contrast(var(--glass-contrast));

  border:1px solid rgba(255,255,255,.085);

  /* c) bisel: filo superior encendido, base en sombra, grosor perceptible */
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.36),
    inset  1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(255,255,255,.055),
    inset 0  9px 20px -14px rgba(255,255,255,.34),
    inset 0 -14px 30px -20px rgba(0,0,0,.66),
    0 26px 68px -14px rgba(0,0,0,.60),
    0  2px  8px rgba(0,0,0,.38);

  transition:
    box-shadow var(--t-med) var(--ease-soft),
    border-color var(--t-med) var(--ease-soft),
    background var(--t-med) var(--ease-soft);
}

/* Refracción real: el desplazamiento actúa sobre el fondo ANTES del desenfoque,
   en la misma cadena del elemento (nunca anidada dentro de otro cristal). */
html.has-refract .lg{
  -webkit-backdrop-filter:url(#lg-r1) blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) contrast(var(--glass-contrast));
          backdrop-filter:url(#lg-r1) blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) contrast(var(--glass-contrast));
}
/* Con el cursor encima la refracción se intensifica: el cristal "respira" */
html.has-refract .lg.is-hover,
html.has-refract .lg.lg-strong.is-hover{
  -webkit-backdrop-filter:url(#lg-r2) blur(calc(var(--glass-blur) * .82)) saturate(205%) brightness(1.08) contrast(1.08);
          backdrop-filter:url(#lg-r2) blur(calc(var(--glass-blur) * .82)) saturate(205%) brightness(1.08) contrast(1.08);
}

/* d) reflejo especular — sigue al cursor con retardo, se funde en modo screen */
.lg::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(var(--lg-r,300px) circle at var(--mx) var(--my),
      rgba(255,255,255,.26) 0%,
      rgba(255,236,214,.10) 32%,
      rgba(255,255,255,0) 66%),
    linear-gradient(180deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.028) 20%,
      rgba(255,255,255,0) 44%);
  mix-blend-mode:screen;
  opacity:var(--lg-glow);
  transition:opacity var(--t-med) var(--ease);
}

/* e) borde iluminado — el filo del cristal recogiendo luz según el ángulo */
.lg::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  padding:1px;
  background:
    conic-gradient(from calc(var(--lg-ang,180) * 1deg) at var(--mx) var(--my),
      rgba(255,255,255,.72),
      rgba(255,164,80,.40) 16%,
      rgba(255,255,255,.06) 44%,
      rgba(255,255,255,.34) 74%,
      rgba(255,255,255,.72));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:var(--lg-rim);
  transition:opacity var(--t-med) var(--ease);
}

/* El contenido flota sobre el material y se desplaza levemente con el cursor.
   La transición propia le da ese arrastre de líquido al seguir al puntero. */
.lg > *{
  position:relative; z-index:2;
  transform:translate3d(var(--ix),var(--iy),0);
  transition:transform .45s var(--ease-soft);
}

.lg.is-hover,
html:not(.js-ready) .lg:hover{
  border-color:rgba(255,255,255,.17);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.52),
    inset  1px 0 0 rgba(255,255,255,.14),
    inset -1px 0 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0  12px 26px -14px rgba(255,255,255,.46),
    inset 0 -16px 34px -20px rgba(0,0,0,.60),
    0 34px 84px -16px rgba(0,0,0,.66),
    0  2px 10px rgba(0,0,0,.40);
}



/* ─────────────────────────── 4. BOTONES ─────────────────────────── */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.86em 1.5em;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-pill);
  font-size:.9rem; font-weight:600; letter-spacing:.012em;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  -webkit-backdrop-filter:blur(9px) saturate(185%) brightness(1.05);
          backdrop-filter:blur(9px) saturate(185%) brightness(1.05);
  background:linear-gradient(157deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 55%,rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -8px 16px -12px rgba(0,0,0,.5),
    0 12px 28px -8px rgba(0,0,0,.45);
  transition:
    box-shadow var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    background var(--t-fast) var(--ease);
}
.btn > *{
  position:relative; z-index:2;
  transform:translate3d(var(--ix),var(--iy),0);
  transition:transform .4s var(--ease-soft);
}

/* Especular del botón */
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(150px circle at var(--mx) var(--my),
             rgba(255,255,255,.38),rgba(255,255,255,.08) 44%,transparent 70%);
  mix-blend-mode:screen;
  opacity:var(--lg-glow);
  transition:opacity var(--t-fast) var(--ease);
}
/* Reflejo que barre el filo */
.btn::after{
  content:""; position:absolute; z-index:1;
  top:-60%; bottom:-60%; left:-40%; width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translate3d(-160%,0,0) rotate(14deg);
  pointer-events:none; opacity:0;
}
.btn.is-hover,.btn:focus-visible,
html:not(.js-ready) .btn:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -8px 18px -12px rgba(0,0,0,.45),
    0 20px 44px -10px rgba(0,0,0,.55);
}
.btn.is-hover::after,.btn:focus-visible::after{ opacity:1; animation:sheen 1s var(--ease) forwards; }
@keyframes sheen{ to{ transform:translate3d(580%,0,0) rotate(14deg); } }

.btn:active{ transform:scale(.978) !important; }

.btn .ico{ width:1.05em; height:1.05em; fill:currentColor; transition:transform var(--t-fast) var(--ease-soft); }
.btn.is-hover .ico{ transform:translate3d(3px,0,0); }

.btn-primary{
  color:#fff;
  border-color:rgba(255,170,90,.44);
  background:
    linear-gradient(157deg,rgba(255,255,255,.26),rgba(255,255,255,.02) 58%,rgba(255,255,255,.10)),
    linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -3px 10px rgba(140,50,0,.34),
    0 14px 34px -8px rgba(255,106,0,.30),
    0 4px 12px rgba(0,0,0,.40);
}
.btn-primary.is-hover,.btn-primary:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -3px 12px rgba(140,50,0,.28),
    0 24px 56px -10px rgba(255,106,0,.40),
    0 6px 18px rgba(0,0,0,.44);
}

.btn-solid{
  color:#fff;
  border-color:rgba(255,170,90,.38);
  background:linear-gradient(157deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),
             linear-gradient(135deg,var(--accent),var(--accent-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 10px 24px -6px rgba(255,106,0,.26);
}

.btn-ghost{ color:var(--ink); }
.btn-sm{ padding:.62em 1.15em; font-size:.82rem; }
.btn-lg{ padding:1.02em 1.9em; font-size:.96rem; }
.btn-block{ width:100%; }


/* ─────────────────────── 5. NAVEGACIÓN STICKY ─────────────────────── */
.nav-wrap{
  position:fixed;
  top:max(14px,env(safe-area-inset-top));
  left:0; right:0; z-index:100;
  padding-inline:var(--pad);
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  width:min(100%,var(--shell));
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(12px,2.4vw,30px);
  padding:9px 10px 9px 16px;
  border-radius:var(--r-pill);
  --glass-blur:13px;
  --lg-r:220px;
}
.nav.is-stuck{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -14px 30px -20px rgba(0,0,0,.66),
    0 22px 58px -14px rgba(0,0,0,.70);
}

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand-mark{
  position:relative;
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  color:var(--logo-ink);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.20),rgba(255,255,255,.03) 62%),
    linear-gradient(150deg,rgba(255,106,0,.20),rgba(0,0,0,.30));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -4px 10px -6px rgba(0,0,0,.7),
    0 5px 16px rgba(0,0,0,.5);
  transition:transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease);
}
.brand-mark .logo-svg{ width:25px; height:25px; }
.brand-mark .lm-body{ fill:currentColor; }
.brand-mark .lm-spark{ fill:var(--accent); }
.brand-mark .logo-img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
/* Con logo propio el badge desaparece: nada de círculo, tinte ni degradado.
   El archivo manda, y se le da algo más de caja porque un logotipo completo
   (emblema + monograma + palabra) necesita más aire que un icono suelto. */
.brand-mark.has-logo{
  width:46px; height:46px;
  background:none;
  border-radius:0;
  box-shadow:none;
}
.brand-mark.has-logo .logo-img{ border-radius:0; }
/* Arte negro sobre fondo negro no se ve: se invierte a blanco. El brillo
   compensa el gris que deja la inversión en los bordes suavizados. */
.brand-mark.has-logo.is-invertido .logo-img{
  filter:invert(1) brightness(1.06) contrast(1.04);
}
.footer-brand .brand-mark.has-logo{ width:62px; height:62px; }
/* El giro y el halo circular del emblema no le sientan a un logotipo completo:
   con logo propio sólo crece un poco. */
.brand:hover .brand-mark.has-logo{
  transform:scale(1.05);
  box-shadow:none;
}
.brand:hover .brand-mark{
  transform:rotate(-7deg) scale(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -4px 10px -6px rgba(0,0,0,.6),
    0 8px 22px rgba(255,106,0,.28);
}

.brand-text{
  font-size:.86rem; font-weight:700; letter-spacing:-.02em; line-height:1.1;
  white-space:nowrap;
}
.brand-text em{
  display:block; font-style:normal; font-weight:400;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
}

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{
  position:relative; display:block;
  padding:.56em 1.05em;
  border-radius:var(--r-pill);
  font-size:.83rem; font-weight:500;
  color:var(--ink-2);
  transition:color var(--t-fast) var(--ease);
  overflow:hidden;
}
.nav-link::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(157deg,rgba(255,255,255,.16),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
  opacity:0; transform:scale(.84);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.nav-link:hover,.nav-link:focus-visible,.nav-link.is-active{ color:#fff; }
.nav-link:hover::before,.nav-link:focus-visible::before,.nav-link.is-active::before{ opacity:1; transform:scale(1); }
.nav-link.is-active{ color:var(--accent-2); }

.nav-actions{ display:flex; align-items:center; gap:8px; }

.nav-toggle{
  display:none;
  width:40px; height:40px; padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  cursor:pointer; place-items:center; gap:5px;
}
.nav-toggle span{
  display:block; width:16px; height:1.6px; border-radius:2px; background:var(--ink);
  transition:transform var(--t-fast) var(--ease-soft), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{  transform:translateY(-3.3px) rotate(-45deg); }


/* ────────────────────────────── 6. HERO ────────────────────────────── */
/* Dos filas reales: el mensaje ocupa el hueco disponible y las cintas van
   DESPUÉS, en el flujo. Así nunca pueden solaparse con el botón, pase lo que
   pase con la altura de la pantalla. */
.hero{
  position:relative;
  min-height:min(100svh,960px);
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center; align-items:center;
  row-gap:clamp(46px,5vh,72px);
  padding:clamp(128px,16vh,180px) var(--pad) clamp(64px,8vh,96px);
  isolation:isolate; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }

.bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.1s var(--ease);
}
.bg-video.is-ready{ opacity:1; }

.hero-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 8%,rgba(255,106,0,.24),transparent 62%),
    radial-gradient(50% 45% at 78% 62%,rgba(255,106,0,.13),transparent 68%),
    conic-gradient(from 200deg at 50% 40%,#101013,#08080a 30%,#141417 55%,#08080a 80%,#101013);
  filter:blur(2px) saturate(115%);
  transform:scale(1.06);
}
.hero-fallback::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(78deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);
  opacity:.55;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,rgba(5,5,5,.72) 0%,rgba(5,5,5,.30) 34%,rgba(5,5,5,.60) 74%,var(--bg) 100%),
    radial-gradient(64% 52% at 50% 46%,transparent 30%,rgba(5,5,5,.55) 100%);
}

.hero-inner{ max-width:920px; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.42em 1em;
  margin-bottom:clamp(20px,3.4vw,30px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-pill);
  background:linear-gradient(157deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 60%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(9px) saturate(190%) brightness(1.05);
          backdrop-filter:blur(9px) saturate(190%) brightness(1.05);
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -6px 14px -10px rgba(0,0,0,.5),
    0 8px 20px -8px rgba(0,0,0,.45);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,106,0,.18);
  animation:pulse 2.6s var(--ease-io) infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.62; }
}

.hero-title{
  font-size:clamp(2.55rem,7.2vw,5.35rem);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:600;
  margin-bottom:clamp(20px,2.6vw,28px);
  text-wrap:balance;
}
.hero-title em{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:400; letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--accent-2) 0%,var(--accent) 46%,var(--accent-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-right:.06em;
}

.hero-sub{
  max-width:56ch; margin:0 auto clamp(30px,4vw,42px);
  font-size:clamp(1rem,1.32vw,1.14rem);
  color:var(--ink-2); font-weight:300; text-wrap:pretty;
}

.scroll-hint{
  position:absolute; bottom:20px; left:50%; translate:-50% 0; z-index:3;
  width:22px; height:36px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);
}
.scroll-hint span{
  position:absolute; top:7px; left:50%; translate:-50% 0;
  width:3px; height:7px; border-radius:2px; background:var(--accent-2);
  animation:wheel 2.1s var(--ease-io) infinite;
}
@keyframes wheel{
  0%{ transform:translateY(0); opacity:0; }
  22%{ opacity:1; }
  70%{ transform:translateY(14px); opacity:0; }
  100%{ opacity:0; }
}


/* ───────────── 7. BARRAS CRUZADAS · prueba social en movimiento ───────────── */
.crossbars{
  position:relative;
  grid-row:2;
  align-self:end;
  width:100%;
  height:clamp(100px,12vh,132px);
  z-index:2;
  pointer-events:none;
}
.crossbar{
  position:absolute; left:50%; top:50%;
  /* Más anchas que la ventana: las cintas sangran por los dos lados y el
     hero (overflow:hidden) recorta el sobrante. */
  width:128vw;
  height:clamp(40px,4.8vh,50px);
  border-radius:var(--r-pill);
  display:flex; align-items:center;
  overflow:hidden;
  pointer-events:auto;
  transition:box-shadow var(--t-med) var(--ease-soft), filter var(--t-med) var(--ease);
}

/* Cinta naranja — pasa por encima, inclinada a la izquierda */
.crossbar--a{
  z-index:2;
  translate:-50% -50%;
  rotate:-3.8deg;
  color:#1a0c02;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%),
    linear-gradient(96deg,var(--accent-2),var(--accent) 48%,var(--accent-deep));
  border:1px solid rgba(255,190,130,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -8px 18px -10px rgba(120,42,0,.7),
    0 16px 40px -10px rgba(255,106,0,.34),
    0 3px 10px rgba(0,0,0,.44);
}

/* Cinta de cristal — pasa por debajo, inclinada a la derecha */
.crossbar--b{
  z-index:1;
  translate:-50% -50%;
  rotate:3.8deg;
  color:var(--ink-2);
  --glass-blur:10px;
  --lg-r:200px;
}

.crossbar-strip{
  display:flex; align-items:center;
  width:max-content;
  will-change:transform;
}
.crossbar-strip.is-looping{ animation:cb-scroll var(--dur,42s) linear infinite; }
.crossbar-strip.is-looping[data-reverse]{ animation-direction:reverse; }
@keyframes cb-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
.crossbar:hover .crossbar-strip,
.crossbars.is-idle .crossbar-strip{ animation-play-state:paused; }

.cb-item{
  padding-inline:clamp(14px,1.6vw,22px);
  font-size:clamp(.62rem,.78vw,.74rem);
  font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap;
}
.crossbar--a .cb-item:first-child,
.crossbar--b .cb-item:first-child{ font-weight:800; }
.cb-sep{
  width:6px; height:6px; flex:none;
  rotate:45deg;
  background:currentColor;
  opacity:.5;
}
.crossbar--a .cb-sep{ opacity:.42; }


/* ────────── 8. SHOWCASE (video) + BARRA FLOTANTE DE COTIZACIÓN ────────── */
.showcase{ position:relative; padding:clamp(10px,2vw,26px) 0 clamp(70px,9vw,120px); }

.showcase-stage{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  min-height:clamp(520px,62vw,660px);
  display:grid; place-items:center;
  padding:clamp(28px,5vw,64px);
  isolation:isolate;
  box-shadow:0 40px 110px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08);
}
.showcase-stage .bg-video{ z-index:0; }

.stage-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(58% 52% at 30% 26%,rgba(255,106,0,.20),transparent 66%),
    radial-gradient(46% 42% at 76% 74%,rgba(255,154,60,.11),transparent 70%),
    linear-gradient(158deg,#141416 0%,#0a0a0c 42%,#111114 72%,#08080a 100%);
}
.stage-fallback::after{
  content:""; position:absolute; inset:-20%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.055) 40deg,transparent 90deg,rgba(255,106,0,.07) 180deg,transparent 260deg);
  animation:sweep 22s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }

.stage-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom,rgba(5,5,5,.42),rgba(5,5,5,.20) 40%,rgba(5,5,5,.55)),
    radial-gradient(70% 60% at 50% 50%,transparent 24%,rgba(5,5,5,.50));
}
.stage-edge{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.16);
}

.quotebar{
  position:relative; z-index:3;
  width:min(100%,1020px);
  padding:clamp(24px,3vw,34px) clamp(22px,3vw,36px) clamp(20px,2.4vw,28px);
  border-radius:var(--r-lg);
  --glass-blur:14px;
  --lg-r:420px;
  transition:
    opacity 1.05s var(--ease-soft) .18s,
    transform 1.05s var(--ease-soft) .18s,
    filter 1.05s var(--ease-soft) .18s,
    box-shadow var(--t-med) var(--ease-soft),
    border-color var(--t-med) var(--ease-soft);
}
.js .quotebar{
  opacity:0;
  transform:translate3d(0,44px,0) scale(.975);
  filter:blur(9px) brightness(.4);
  will-change:transform,opacity,filter;
}
.js .quotebar.is-in{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0) brightness(1); }
.js .quotebar.is-done{ filter:none; will-change:auto; }

.quotebar-head{ text-align:center; margin-bottom:clamp(18px,2.4vw,26px); }
.quotebar-head h2{ font-size:clamp(1.45rem,2.5vw,2rem); font-weight:600; letter-spacing:-.03em; line-height:1.14; }
.quotebar-head h2 em{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:var(--accent-2); }
.quotebar-head p{ margin-top:7px; font-size:.87rem; color:var(--ink-3); font-weight:300; }


/* ══════════════════════════════════════════════════════════════════════════
   PANEL CLARO · el cotizador en vidrio blanco sobre el fondo negro.
   Es el punto de contraste de la página, así que aquí el material se lleva
   al extremo. Cinco cosas, cada una con su capa:

     DEPTH       bisel interior grueso + sombra proyectada larga
     REFRACTION  el fondo se dobla al atravesar el cristal (feDisplacementMap)
     DISPERSION  cada canal RGB se desvía distinto → borde de prisma
     FROST       grano fino incrustado en el propio vidrio
     SPLAY       la luz del cursor se abre en abanico, no como un punto
   ══════════════════════════════════════════════════════════════════════════ */
.quotebar{
  --panel-ink:   #1a1209;
  --panel-ink-2: rgba(26,18,9,.80);
  --panel-ink-3: rgba(26,18,9,.70);
  --panel-linea: rgba(26,18,9,.10);

  color:var(--panel-ink);

  /* FROST · grano fino incrustado sobre el cuerpo claro del vidrio */
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(152deg,
      rgba(255,251,247,.94) 0%,
      rgba(255,243,233,.87) 34%,
      rgba(255,248,242,.84) 62%,
      rgba(255,238,225,.91) 100%);
  background-blend-mode:overlay, normal;

  border:1px solid rgba(255,255,255,.62);

  /* DEPTH · canto grueso arriba, base en sombra, caída larga debajo */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.5),
    inset -1.5px 0 0 rgba(255,255,255,.5),
    inset 0 -1.5px 0 rgba(255,180,120,.34),
    inset 0 16px 30px -22px rgba(255,255,255,1),
    inset 0 -26px 48px -34px rgba(150,80,20,.42),
    0 2px 6px rgba(0,0,0,.34),
    0 34px 70px -20px rgba(0,0,0,.62),
    0 70px 130px -50px rgba(255,106,0,.30);
}

/* REFRACTION + DISPERSION · sólo donde hay cursor fino: la cadena es cara */
html.has-refract .quotebar{
  -webkit-backdrop-filter:url(#lg-disp) blur(16px) saturate(150%) brightness(1.12);
          backdrop-filter:url(#lg-disp) blur(16px) saturate(150%) brightness(1.12);
}
html.has-refract .quotebar.is-hover{
  -webkit-backdrop-filter:url(#lg-disp) blur(13px) saturate(165%) brightness(1.16);
          backdrop-filter:url(#lg-disp) blur(13px) saturate(165%) brightness(1.16);
}

/* SPLAY · la luz no cae como un punto, se abre en abanico desde el cursor */
.quotebar::before{
  background:
    radial-gradient(120% 70% at var(--mx) var(--my),
      rgba(255,255,255,.85) 0%,
      rgba(255,236,214,.34) 22%,
      rgba(255,190,130,.14) 44%,
      rgba(255,255,255,0) 72%),
    radial-gradient(260% 130% at var(--mx) calc(var(--my) - 20%),
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 26%);
  mix-blend-mode:soft-light;
  opacity:calc(.4 + var(--lg-glow) * .6);
}

/* DISPERSION en el filo: cálidos por un lado, fríos por el otro */
.quotebar::after{
  padding:1.5px;
  background:
    conic-gradient(from calc(var(--lg-ang,180) * 1deg) at var(--mx) var(--my),
      rgba(255,255,255,.95),
      rgba(255,120,60,.55) 12%,
      rgba(255,220,140,.35) 26%,
      rgba(255,255,255,.10) 46%,
      rgba(120,180,255,.42) 66%,
      rgba(200,160,255,.34) 78%,
      rgba(255,255,255,.95));
  opacity:calc(.42 + var(--lg-rim) * .58);
}

/* ── El contenido se invierte a tinta oscura ── */
.quotebar .quotebar-head h2,
.quotebar .qz-q,
.quotebar .qz-aviso h3,
.quotebar .qz-fin h3{ color:var(--panel-ink); }

.quotebar .quotebar-head p,
.quotebar .qz-aviso p,
.quotebar .qz-fin p,
.quotebar .qz-hint,
.quotebar .qz-nota-suave,
.quotebar .qz-note,
.quotebar .qz-opt-s,
.quotebar .qz-drop-s{ color:var(--panel-ink-3); }

.quotebar .qz-field label,
.quotebar .qz-step-label{ color:var(--panel-ink-3); }
.quotebar .qz-field:focus-within label{ color:var(--accent-deep); }

.quotebar .quotebar-head h2 em,
.quotebar .qz-fin-sub{ color:var(--accent-deep); }

.quotebar .qz-back{
  border-color:var(--panel-linea);
  background:rgba(26,18,9,.05);
  color:var(--panel-ink-2);
}
.quotebar .qz-back:hover{ color:var(--panel-ink); background:rgba(26,18,9,.10); border-color:rgba(26,18,9,.2); }

.quotebar .qz-card,
.quotebar .qz-opt{
  border:1px solid rgba(26,18,9,.10);
  background:linear-gradient(157deg,rgba(255,255,255,.92),rgba(255,246,238,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(120,70,20,.10),
    0 8px 18px -10px rgba(120,70,20,.24);
  color:var(--panel-ink);
}
.quotebar .qz-card:hover,
.quotebar .qz-opt:hover{
  border-color:rgba(255,106,0,.45);
  background:linear-gradient(157deg,#fff,rgba(255,238,222,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 14px 28px -12px rgba(255,106,0,.38);
}
.quotebar .qz-card.is-sel,
.quotebar .qz-opt.is-sel{
  border-color:var(--accent);
  background:linear-gradient(157deg,var(--accent-2),var(--accent));
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 14px 30px -10px rgba(255,106,0,.55);
}
.quotebar .qz-card.is-sel .qz-ico,
.quotebar .qz-opt.is-sel .qz-ico{ color:#fff; }
.quotebar .qz-opt.is-sel .qz-opt-s{ color:rgba(255,255,255,.85); }
.quotebar .qz-ico{ color:var(--accent-deep); }

.quotebar .qz-field input,
.quotebar .qz-field textarea{
  border:1px solid rgba(26,18,9,.14);
  background:rgba(255,255,255,.82);
  color:var(--panel-ink);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:
    inset 0 2px 4px rgba(120,70,20,.10),
    inset 0 -1px 0 rgba(255,255,255,.9);
}
.quotebar .qz-field input::placeholder,
.quotebar .qz-field textarea::placeholder{ color:rgba(26,18,9,.45); }
.quotebar .qz-field input:hover,
.quotebar .qz-field textarea:hover{ border-color:rgba(26,18,9,.26); }
.quotebar .qz-field input:focus,
.quotebar .qz-field textarea:focus{
  border-color:var(--accent);
  background:#fff;
  box-shadow:inset 0 2px 4px rgba(120,70,20,.08), 0 0 0 3px rgba(255,106,0,.20);
}
.quotebar .qz-unidad{ color:var(--panel-ink-3); }

.quotebar .qz-drop{
  border:1.5px dashed rgba(255,106,0,.42);
  background:linear-gradient(157deg,rgba(255,106,0,.07),rgba(255,255,255,.45));
}
.quotebar .qz-drop:hover,
.quotebar .qz-drop.is-over{
  border-color:var(--accent);
  background:linear-gradient(157deg,rgba(255,106,0,.14),rgba(255,255,255,.6));
}
.quotebar .qz-drop-t{ color:var(--panel-ink); }
.quotebar .qz-thumb{ border-color:rgba(26,18,9,.14); }

.quotebar .qz-opcional{
  border-color:rgba(26,18,9,.16);
  background:rgba(26,18,9,.05);
  color:var(--panel-ink-3);
}
.quotebar .qz-fin-extra{
  border-color:rgba(255,106,0,.3);
  background:rgba(255,106,0,.09);
  color:var(--panel-ink-2);
}
.quotebar .qz-fallback{ color:var(--panel-ink-3); }
.quotebar .qz-fallback a{ color:var(--accent-deep); }
.quotebar .qz-progress{ border-top-color:var(--panel-linea); }
.quotebar .qz-dots i{ background:rgba(26,18,9,.16); box-shadow:none; }
.quotebar .qz-dots i.is-on{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,106,0,.20);
}
.quotebar .qz-note.is-bad{ color:#c0392b; }

@media (max-width:860px){
  html.has-refract .quotebar,
  html.has-refract .quotebar.is-hover{
    -webkit-backdrop-filter:blur(12px) saturate(150%) brightness(1.1);
            backdrop-filter:blur(12px) saturate(150%) brightness(1.1);
  }
}


/* ══════════════════ COTIZADOR · asistente paso a paso ══════════════════ */

.qz-back{
  position:absolute; top:14px; left:14px; z-index:5;
  display:inline-flex; align-items:center; gap:5px;
  padding:.42em .85em .42em .6em;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  color:var(--ink-3);
  font-size:.74rem; font-weight:600;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qz-back svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.qz-back:hover{ color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); }

/* Escenario: la pantalla que sale se saca del flujo para que no dé saltos */
.qz-stage{ position:relative; }
.qz-screen{
  opacity:0;
  transform:translate3d(0,16px,0);
  filter:blur(9px);
  transition:opacity .38s var(--ease-soft), transform .38s var(--ease-soft), filter .38s var(--ease-soft);
}
.qz-screen.is-active{ opacity:1; transform:none; filter:none; }
.qz-screen.is-out{
  position:absolute; top:0; left:0; right:0;
  opacity:0; transform:translate3d(0,-14px,0); filter:blur(9px);
  pointer-events:none;
}

.qz-q{
  text-align:center;
  font-size:clamp(1.02rem,1.6vw,1.24rem);
  font-weight:600; letter-spacing:-.028em;
  margin-bottom:clamp(14px,2vw,20px);
}

/* ── Iconos ── */
.qz-ico{
  width:30px; height:30px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  color:var(--accent-2);
  transition:transform var(--t-med) var(--ease-soft), color var(--t-fast) var(--ease);
}

/* ── Paso 1 · tarjetas de trabajo ── */
.qz-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:clamp(9px,1.1vw,13px);
}
.qz-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  min-height:104px;
  padding:16px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  background:linear-gradient(157deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px -10px rgba(0,0,0,.5);
  color:var(--ink);
  cursor:pointer;
  transition:
    transform var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.qz-card-t{ font-size:.79rem; font-weight:600; letter-spacing:-.01em; text-align:center; line-height:1.25; }
.qz-card:hover{
  transform:translate3d(0,-3px,0);
  border-color:rgba(255,170,90,.42);
  background:linear-gradient(157deg,rgba(255,106,0,.14),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 34px -12px rgba(255,106,0,.28);
}
.qz-card:hover .qz-ico{ transform:scale(1.09); }
.qz-card.is-sel{
  border-color:var(--accent);
  background:linear-gradient(157deg,rgba(255,106,0,.26),rgba(255,106,0,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 0 0 1px rgba(255,106,0,.45), 0 18px 40px -12px rgba(255,106,0,.4);
}
.qz-card.is-sel .qz-ico{ color:#fff; }

/* ── Opciones de dos ── */
.qz-opts{ display:grid; gap:clamp(10px,1.3vw,14px); }
.qz-opts-2{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.qz-opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:112px;
  padding:20px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md);
  background:linear-gradient(157deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px -10px rgba(0,0,0,.5);
  color:var(--ink); cursor:pointer; text-align:center;
  transition:
    transform var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.qz-opt-t{ font-size:.94rem; font-weight:600; letter-spacing:-.015em; }
.qz-opt-s{ font-size:.75rem; color:var(--ink-3); font-weight:300; }
.qz-opt:hover{
  transform:translate3d(0,-3px,0);
  border-color:rgba(255,170,90,.42);
  background:linear-gradient(157deg,rgba(255,106,0,.14),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 34px -12px rgba(255,106,0,.28);
}
.qz-opt:hover .qz-ico{ transform:scale(1.09); }
.qz-opt.is-sel{
  border-color:var(--accent);
  background:linear-gradient(157deg,rgba(255,106,0,.26),rgba(255,106,0,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 0 0 1px rgba(255,106,0,.45), 0 18px 40px -12px rgba(255,106,0,.4);
}
.qz-opt.is-sel .qz-opt-s{ color:rgba(255,255,255,.75); }

/* ── Campos ── */
.qz-fields{ display:grid; gap:14px; }
.qz-datos{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:18px; }
.qz-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.qz-field label{
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
  transition:color var(--t-fast) var(--ease);
}
.qz-field:focus-within label{ color:var(--accent-2); }

.qz-field input,
.qz-field textarea{
  width:100%;
  padding:.86em .95em;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-sm);
  background:linear-gradient(157deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(7px) saturate(170%);
          backdrop-filter:blur(7px) saturate(170%);
  font-size:.94rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(255,255,255,.05),
    inset 0 -8px 18px -12px rgba(0,0,0,.55);
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.qz-field textarea{ resize:vertical; min-height:104px; font-family:inherit; line-height:1.55; }
.qz-field input::placeholder,
.qz-field textarea::placeholder{ color:rgba(245,245,247,.30); }
.qz-field input:hover,.qz-field textarea:hover{ border-color:rgba(255,255,255,.20); }
.qz-field input:focus,.qz-field textarea:focus{
  outline:none;
  border-color:rgba(255,170,90,.58);
  background:linear-gradient(157deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 0 0 3px rgba(255,106,0,.14);
}
.qz-field .is-error{
  border-color:rgba(255,86,86,.62) !important;
  box-shadow:0 0 0 3px rgba(255,86,86,.14) !important;
  animation:shake .38s var(--ease-io);
}
@keyframes shake{
  0%,100%{ transform:translate3d(0,0,0); }
  25%{ transform:translate3d(-5px,0,0); }
  75%{ transform:translate3d(5px,0,0); }
}
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Un cuadro y su unidad. Todas las medidas usan ya este mismo patrón. */
.qz-medida{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
.qz-unidad{ font-size:.78rem; color:var(--ink-3); white-space:nowrap; }
.qz-hint{ font-size:.76rem; color:var(--ink-3); font-weight:300; text-align:center; }

.qz-actions{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:clamp(18px,2.4vw,26px);
}

/* ── Aviso "no hay problema" ── */
.qz-aviso{ text-align:center; padding:clamp(14px,2vw,24px) 0; }
.qz-aviso-ico,.qz-fin-ico{
  display:grid; place-items:center;
  width:58px; height:58px; margin:0 auto 16px;
  border-radius:50%;
  border:1px solid rgba(255,170,90,.4);
  background:linear-gradient(157deg,rgba(255,106,0,.28),rgba(255,106,0,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px -10px rgba(255,106,0,.45);
}
.qz-aviso-ico svg,.qz-fin-ico svg{
  width:26px; height:26px;
  fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.qz-aviso h3,.qz-fin h3{ font-size:clamp(1.15rem,2vw,1.5rem); font-weight:600; letter-spacing:-.025em; }
.qz-aviso p{ max-width:46ch; margin:10px auto 0; color:var(--ink-2); font-weight:300; font-size:.92rem; }

/* ── Fotos ── */
.qz-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:clamp(22px,3.4vw,34px) 20px;
  border:1.5px dashed rgba(255,170,90,.36);
  border-radius:var(--r-md);
  background:linear-gradient(157deg,rgba(255,106,0,.07),rgba(255,255,255,.015));
  cursor:pointer; text-align:center;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.qz-drop:hover,.qz-drop.is-over,.qz-drop:focus-visible{
  border-color:var(--accent);
  background:linear-gradient(157deg,rgba(255,106,0,.15),rgba(255,255,255,.03));
  transform:translate3d(0,-2px,0);
}
.qz-drop .qz-ico{ width:34px; height:34px; }
.qz-drop-t{ font-size:.96rem; font-weight:600; }
.qz-drop-s{ font-size:.78rem; color:var(--ink-3); font-weight:300; }

.qz-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:9px; margin-top:12px;
}
.qz-thumbs.is-empty{ display:none; }

/* Marcas de "opcional": deliberadamente apagadas. No deben competir con el
   naranja de la marca ni parecer un aviso de error. */
.qz-opcional{
  display:inline-block;
  margin-left:.55em;
  padding:.24em .7em .28em;
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);
  font-size:.56em;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  vertical-align:middle;
  white-space:nowrap;
}
.qz-nota-suave{
  max-width:44ch;
  margin:11px auto 0;
  text-align:center;
  font-size:.75rem;
  font-weight:300;
  line-height:1.5;
  color:var(--ink-3);
}
.qz-thumb{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--r-xs);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6);
  animation:thumb-in .4s var(--ease-soft);
}
@keyframes thumb-in{ from{ opacity:0; transform:scale(.86); } }
.qz-thumb img{ width:100%; height:100%; object-fit:cover; }
.qz-thumb-x{
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(5,5,5,.68);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.qz-thumb-x svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.qz-thumb-x:hover{ background:#c0392b; transform:scale(1.12); }

.qz-note{
  margin-top:12px; text-align:center; min-height:1.2em;
  font-size:.78rem; color:var(--ink-3);
}
.qz-note.is-bad{ color:#ff7a7a; }

/* ── Paso 4 · confirmación ── */
.qz-fin{ text-align:center; padding:clamp(10px,2vw,22px) 0; }
.qz-fin-sub{ margin-top:8px; font-size:1rem; color:var(--accent-2); font-weight:500; }
.qz-fin p{ max-width:48ch; margin-inline:auto; color:var(--ink-2); font-weight:300; font-size:.92rem; }
.qz-fin > p:not(.qz-fin-sub){ margin-top:12px; }
.qz-fin-extra{
  margin-top:16px !important;
  padding:12px 16px;
  border:1px solid rgba(255,170,90,.24);
  border-radius:var(--r-sm);
  background:rgba(255,106,0,.07);
  font-size:.86rem !important;
}

/* ── Enlace de rescate + progreso ── */
.qz-fallback{
  margin-top:clamp(16px,2.2vw,22px);
  text-align:center; font-size:.76rem; color:var(--ink-3);
}
.qz-fallback a{ color:var(--accent-2); font-weight:600; }
.qz-fallback a:hover{ text-decoration:underline; }

.qz-progress{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(14px,2vw,20px);
  padding-top:clamp(14px,2vw,18px);
  border-top:1px solid rgba(255,255,255,.07);
}
.qz-step-label{
  font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.qz-dots{ display:flex; gap:7px; }
.qz-dots i{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease-soft);
}
.qz-dots i.is-on{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,106,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
  transform:scale(1.14);
}


/* ────────────────────────── 9. SECCIONES ────────────────────────── */
.section{ position:relative; padding-block:var(--sec); }
.section-head{ max-width:720px; margin-bottom:clamp(38px,5vw,60px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-title{
  font-size:clamp(2rem,4.4vw,3.4rem);
  font-weight:600;
  letter-spacing:-.042em;
  line-height:1.06;
  text-wrap:balance;
}
.section-title em{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  background:linear-gradient(96deg,var(--accent-2),var(--accent) 55%,var(--accent-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-right:.05em;
}
.section-sub{
  margin-top:14px; max-width:56ch;
  color:var(--ink-2); font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.06rem);
}


/* ───────────── 10. TESTIMONIOS · SLIDER INFINITO ───────────── */
.testimonials{ overflow:hidden; }

.marquee{
  position:relative;
  padding-block:8px 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
}
.marquee-track{
  display:flex;
  gap:clamp(14px,1.6vw,22px);
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.marquee-track.is-looping{ animation:marquee-loop var(--dur,60s) linear infinite; }
@keyframes marquee-loop{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-50% - clamp(7px,.8vw,11px)),0,0); }
}
.marquee.is-paused .marquee-track,
.marquee.is-idle .marquee-track{ animation-play-state:paused; }

.tcard{
  flex:none;
  width:clamp(238px,23vw,290px);
  border-radius:var(--r-md);
  overflow:hidden;
  --glass-blur:9px;
  --lg-r:200px;
}

.tcard-media{
  position:relative;
  aspect-ratio:4/5;
  display:grid; place-items:center;
  background:
    radial-gradient(90% 70% at 50% 26%,rgba(255,255,255,.10),transparent 62%),
    linear-gradient(158deg,var(--accent) 0%,var(--accent-deep) 58%,#5c2000 100%);
  overflow:hidden;
}
.tcard-media[data-tone="b"]{ background:radial-gradient(90% 70% at 50% 26%,rgba(255,255,255,.12),transparent 60%),linear-gradient(158deg,#ff8330,var(--accent-deep) 62%,#4c1a00); }
.tcard-media[data-tone="c"]{ background:radial-gradient(90% 70% at 50% 26%,rgba(255,255,255,.09),transparent 60%),linear-gradient(158deg,#e85f00,#8e3200 62%,#3d1500); }
.tcard-media[data-tone="d"]{ background:radial-gradient(90% 70% at 50% 26%,rgba(255,255,255,.11),transparent 60%),linear-gradient(158deg,#ff7a1a,#a63b00 60%,#451800); }
.tcard-media[data-tone="e"]{ background:radial-gradient(90% 70% at 50% 26%,rgba(255,255,255,.10),transparent 60%),linear-gradient(158deg,#ff6a00,#7d2c00 64%,#331100); }
.tcard-media[data-tone="f"]{ background:radial-gradient(90% 70% at 50% 26%,rgba(255,255,255,.13),transparent 60%),linear-gradient(158deg,#ff9440,#b34200 60%,#3f1600); }

.tcard-media::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(120deg,rgba(0,0,0,.10) 0 1px,transparent 1px 14px);
  opacity:.7;
}
.tcard-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.42),transparent 52%);
}

.play{
  position:relative; z-index:2;
  width:56px; height:56px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  background:linear-gradient(157deg,rgba(255,255,255,.26),rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(8px) saturate(180%);
          backdrop-filter:blur(8px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px rgba(0,0,0,.36);
  color:#fff; cursor:pointer;
  transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.play svg{ width:19px; height:19px; fill:currentColor; margin-left:3px; }
.play.is-hover,
html:not(.js-ready) .play:hover{
  background:linear-gradient(157deg,rgba(255,255,255,.40),rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 16px 36px rgba(0,0,0,.44);
}
.play:active{ transform:scale(.96) !important; }

.tcard-body{ padding:14px 16px 17px; }
.tname{ display:flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; letter-spacing:-.012em; }
.verified{
  display:grid; place-items:center;
  width:15px; height:15px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.56rem; line-height:1;
}
.trole{ font-size:.74rem; color:var(--ink-3); margin-top:2px; }
.stars{ display:flex; gap:2px; margin-top:8px; }
.stars svg{ width:13px; height:13px; fill:var(--accent-2); }


/* ────────────────────────── 11. CIERRE ────────────────────────── */
.closing{ padding-bottom:clamp(60px,8vw,110px); }
.closing-card{
  text-align:center;
  padding:clamp(42px,6vw,78px) var(--pad);
  border-radius:var(--r-xl);
  --glass-blur:13px;
  --lg-r:460px;
}
.closing-card p{ max-width:48ch; margin:14px auto 30px; color:var(--ink-2); font-weight:300; }
.closing-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }


/* ────────────────────────── 12. FOOTER ────────────────────────── */
.footer{
  position:relative;
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to bottom,rgba(255,255,255,.018),transparent);
  padding-top:clamp(48px,6vw,72px);
}
.footer-inner{
  display:grid; grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,4vw,54px);
  padding-bottom:clamp(34px,4vw,50px);
}
.footer-brand .brand-mark{ margin-bottom:12px; }
.footer-brand .brand-text{ font-size:1rem; font-weight:700; }
.footer-tag{ margin-top:12px; max-width:38ch; font-size:.86rem; color:var(--ink-3); font-weight:300; }
.footer-col h3{
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
}
.footer-col li + li{ margin-top:9px; }
.footer-col a{ position:relative; font-size:.9rem; color:var(--ink-2); transition:color var(--t-fast) var(--ease); }
.footer-col a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--accent);
  transition:right var(--t-fast) var(--ease);
}
.footer-col a:hover{ color:#fff; }
.footer-col a:hover::after{ right:0; }

.footer-base{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding-block:20px 28px;
  border-top:1px solid rgba(255,255,255,.055);
  font-size:.76rem; color:var(--ink-3);
}

/* Crédito de la agencia: el nombre destaca un punto sobre el resto del pie,
   sin robarle protagonismo a la marca del cliente. */
.creditos span{
  color:var(--ink-2);
  font-weight:500;
  letter-spacing:-.005em;
}


/* ─────────────── 13. TOAST + ENTRADA EN DESENFOQUE OSCURO ─────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; translate:-50% 0; z-index:150;
  padding:.85em 1.4em; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:500;
  --glass-blur:12px;
  --lg-r:220px;
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-soft);
  pointer-events:none;
}
.toast.is-in{ opacity:1; transform:translate3d(0,0,0); }

/* Cada apartado entra desenfocado y a oscuras, y se enfoca al llegar.
   Al terminar se retira el filtro (`is-done`) para que el cristal que
   contenga vuelva a refractar el fondo real.

   Todo el estado oculto cuelga de `.js`: si el navegador tiene JavaScript
   bloqueado la página se ve entera y nítida, sin animación de entrada. */
.reveal{
  transition:
    opacity 1.05s var(--ease-soft) var(--d,0ms),
    transform 1.25s var(--ease-soft) var(--d,0ms),
    filter 1.25s var(--ease-soft) var(--d,0ms);
}
.js .reveal{
  opacity:0;
  transform:translate3d(0,56px,0) scale(.972);
  filter:blur(22px) brightness(.22) saturate(.5);
  will-change:transform,opacity,filter;
}
.js .reveal.is-in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) brightness(1) saturate(1);
}
.js .reveal.is-done{ filter:none; will-change:auto; }


/* ══════════════════ MODAL DE NOVEDADES ══════════════════ */
.modal{
  position:fixed; inset:0; z-index:160;
  display:grid; place-items:center;
  padding:var(--pad);
}
.modal-fondo{
  position:absolute; inset:0;
  background:rgba(3,3,4,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .38s var(--ease);
}
.modal.is-in .modal-fondo{ opacity:1; }

.modal-caja{
  position:relative;
  width:min(100%,420px);
  padding:clamp(30px,4vw,42px) clamp(24px,3.4vw,34px) clamp(22px,2.6vw,28px);
  border-radius:var(--r-xl);
  text-align:center;
  --glass-blur:16px;
  --lg-r:340px;
  opacity:0;
  transform:translate3d(0,26px,0) scale(.96);
  filter:blur(8px);
  transition:opacity .42s var(--ease-soft), transform .42s var(--ease-soft), filter .42s var(--ease-soft);
}
.modal.is-in .modal-caja{ opacity:1; transform:none; filter:none; }

.modal-x{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:var(--ink-3); cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.modal-x svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.modal-x:hover{ color:#fff; background:rgba(255,255,255,.12); transform:rotate(90deg); }

.mn-ico{
  display:grid; place-items:center;
  width:56px; height:56px; margin:0 auto 18px;
  border-radius:var(--r-md);
  border:1px solid rgba(255,170,90,.36);
  background:linear-gradient(157deg,rgba(255,106,0,.26),rgba(255,106,0,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 12px 28px -10px rgba(255,106,0,.42);
}
.mn-ico svg{
  width:26px; height:26px;
  fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.modal-caja h2{
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.14;
}
.modal-caja h2 em{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  color:var(--accent-2);
}
.mn-sub{
  max-width:36ch; margin:10px auto 22px;
  font-size:.88rem; color:var(--ink-2); font-weight:300; line-height:1.55;
}
#form-novedades .qz-field{ text-align:left; margin-bottom:14px; }
.mn-nota{
  margin-top:14px;
  font-size:.74rem; color:var(--ink-3); font-weight:300;
  min-height:1.3em;
}
.mn-nota.is-ok{ color:var(--accent-2); }
.mn-nota.is-bad{ color:#ff7a7a; }

@media (max-width:620px){
  .modal-caja{ width:100%; padding:28px 20px 22px; border-radius:var(--r-lg); }
}


/* ══════════════════════════════════════════════════════════════════════════
   AVISO DE SERVICIOS
   Tarjeta que se abre sola al llegar a la segunda sección. Esquinas marcadas
   —rectangular, no pastilla— y borde bien visible, para que se lea como un
   aviso y no como parte del fondo. Va a la derecha: el cotizador está
   centrado y no debe taparse.
   ══════════════════════════════════════════════════════════════════════════ */
.aviso{
  position:fixed;
  right:clamp(16px,2.4vw,32px);
  bottom:clamp(16px,2.4vh,32px);
  z-index:95;
  width:min(calc(100vw - 32px), 372px);
  padding:20px 20px 18px;

  /* Rectangular, con la esquina bien definida */
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  --glass-blur:17px;
  --lg-r:300px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(255,255,255,.08),
    inset 0 -16px 34px -24px rgba(0,0,0,.7),
    0 3px 10px rgba(0,0,0,.45),
    0 30px 68px -18px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,106,0,.10);

  opacity:0;
  transform:translate3d(0,30px,0) scale(.96);
  filter:blur(9px);
  transition:
    opacity .52s var(--ease-soft),
    transform .52s var(--ease-soft),
    filter .52s var(--ease-soft),
    box-shadow var(--t-med) var(--ease-soft);
  will-change:transform,opacity;
}
.aviso.is-in{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:none; }

.aviso-x{
  position:absolute; top:11px; right:11px; z-index:4;
  width:28px; height:28px; padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  background:rgba(255,255,255,.05);
  color:var(--ink-3); cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.aviso-x svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.aviso-x:hover{ color:#fff; background:rgba(255,255,255,.12); transform:rotate(90deg); }

.aviso-cab{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.aviso-marca{
  flex:none;
  display:grid; place-items:center;
  width:26px; height:26px;
  border-radius:8px;
  border:1px solid rgba(255,170,90,.42);
  background:linear-gradient(157deg,rgba(255,106,0,.36),rgba(255,106,0,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
.aviso-marca svg{ width:12px; height:12px; fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.aviso-rotulo{
  font-size:.6rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-2);
}

.aviso-intro{
  font-size:.855rem; font-weight:300; line-height:1.55;
  color:var(--ink-2);
  margin-bottom:14px;
}
.aviso-intro strong{ font-weight:500; color:var(--ink); }

.aviso-lista{ display:grid; gap:7px; margin-bottom:14px; }
.aviso-lista li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:.82rem; font-weight:400; line-height:1.4;
  color:var(--ink);
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .5s var(--ease-soft) var(--d,0ms), transform .5s var(--ease-soft) var(--d,0ms);
}
.aviso-lista li.is-in{ opacity:1; transform:none; }

.aviso-tic{
  flex:none;
  display:grid; place-items:center;
  width:17px; height:17px; margin-top:1px;
  border-radius:6px;
  background:linear-gradient(157deg,var(--accent-2),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px -2px rgba(255,106,0,.5);
}
.aviso-tic svg{ width:9px; height:9px; fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }

.aviso-cierre{
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.82rem; font-weight:300; line-height:1.5;
  color:var(--ink-2);
  margin-bottom:15px;
}
.aviso-cierre em{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:1.08em;
  color:var(--accent-2);
}

.aviso-pie{ display:flex; align-items:center; gap:12px; }

/* ── Botón de Instagram ──
   El degradado se desplaza en bucle y un destello lo recorre al pasar el
   cursor. Sólo transform y opacity: no cuesta nada. */
.btn-ig{
  position:relative;
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.78em 1.1em;
  border-radius:11px;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  font-size:.84rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(110deg,#f09433,#e6683c 22%,#dc2743 46%,#cc2366 66%,#bc1888 88%,#f09433);
  background-size:280% 100%;
  animation:ig-fluir 7s linear infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 8px 22px -8px rgba(220,39,67,.6);
  transition:transform var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease);
}
@keyframes ig-fluir{ to{ background-position:280% 0; } }

.btn-ig-icono{
  width:1.15em; height:1.15em;
  fill:none; stroke:currentColor; stroke-width:1.8;
  transition:transform var(--t-fast) var(--ease-soft);
}
.btn-ig span{ position:relative; z-index:2; }

/* Destello que recorre el botón */
.btn-ig-brillo{
  position:absolute; z-index:1;
  top:-60%; bottom:-60%; left:-40%; width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translate3d(-180%,0,0) rotate(14deg);
  pointer-events:none;
}
.btn-ig:hover{
  transform:translate3d(0,-2px,0) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 16px 34px -10px rgba(220,39,67,.7);
}
.btn-ig:hover .btn-ig-icono{ transform:rotate(-8deg) scale(1.12); }
.btn-ig:hover .btn-ig-brillo{ animation:ig-destello 1s var(--ease) forwards; }
@keyframes ig-destello{ to{ transform:translate3d(560%,0,0) rotate(14deg); } }
.btn-ig:active{ transform:translate3d(0,0,0) scale(.98); }

/* Latido suave al aparecer, para que la vista vaya al botón */
.aviso.is-in .btn-ig{ animation:ig-fluir 7s linear infinite, ig-latido 2.4s var(--ease-io) 1.2s 2; }
@keyframes ig-latido{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 8px 22px -8px rgba(220,39,67,.6); }
  50%    { box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 8px 22px -8px rgba(220,39,67,.6), 0 0 0 7px rgba(220,39,67,.16); }
}

.aviso-alt{
  flex:none;
  font-size:.76rem; font-weight:500;
  color:var(--ink-3);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.aviso-alt:hover{ color:var(--accent-2); border-bottom-color:currentColor; }

/* En pantallas bajas la tarjeta podría no caber: se recorta con desplazamiento */
@media (max-height:720px){
  .aviso{ max-height:calc(100vh - 32px); overflow-y:auto; }
}

@media (max-width:860px){
  .aviso{
    left:clamp(12px,3vw,20px);
    right:clamp(12px,3vw,20px);
    bottom:clamp(12px,2vh,20px);
    width:auto;
    max-height:min(76vh, 560px);
    overflow-y:auto;
  }
  .aviso-pie{ flex-direction:column; align-items:stretch; gap:9px; }
  .aviso-alt{ text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .btn-ig,
  .aviso.is-in .btn-ig{ animation:none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE PORTAFOLIO
   Mismo vidrio blanco que el cotizador, para que la galería respire.
   ══════════════════════════════════════════════════════════════════════════ */
.pagina-portafolio{ padding-top:clamp(110px,14vh,150px); }

.pf-wrap{ padding-bottom:clamp(70px,9vw,120px); }

.pf-intro{ text-align:center; max-width:720px; margin:0 auto clamp(30px,4vw,46px); }
.pf-titulo{
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  font-weight:600; letter-spacing:-.045em; line-height:1.04;
  margin-top:clamp(14px,2vw,20px);
  text-wrap:balance;
}
.pf-titulo em{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  background:linear-gradient(96deg,var(--accent-2),var(--accent) 55%,var(--accent-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-right:.05em;
}
.pf-sub{
  margin-top:14px;
  color:var(--ink-2); font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.06rem);
}

/* El panel hereda el material claro del cotizador */
.pf-panel{
  --panel-ink:   #1a1209;
  --panel-ink-2: rgba(26,18,9,.80);
  --panel-ink-3: rgba(26,18,9,.70);
  --panel-linea: rgba(26,18,9,.10);
  --glass-blur:14px;
  --lg-r:520px;

  color:var(--panel-ink);
  padding:clamp(20px,3vw,34px);
  border-radius:var(--r-xl);

  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(152deg,
      rgba(255,251,247,.94) 0%,
      rgba(255,243,233,.87) 34%,
      rgba(255,248,242,.84) 62%,
      rgba(255,238,225,.91) 100%);
  background-blend-mode:overlay, normal;

  border:1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.5),
    inset -1.5px 0 0 rgba(255,255,255,.5),
    inset 0 -1.5px 0 rgba(255,180,120,.34),
    inset 0 16px 30px -22px rgba(255,255,255,1),
    inset 0 -26px 48px -34px rgba(150,80,20,.42),
    0 2px 6px rgba(0,0,0,.34),
    0 34px 70px -20px rgba(0,0,0,.62),
    0 70px 130px -50px rgba(255,106,0,.30);
}
html.has-refract .pf-panel{
  -webkit-backdrop-filter:url(#lg-disp) blur(16px) saturate(150%) brightness(1.12);
          backdrop-filter:url(#lg-disp) blur(16px) saturate(150%) brightness(1.12);
}
.pf-panel::before{
  background:
    radial-gradient(120% 70% at var(--mx) var(--my),
      rgba(255,255,255,.85) 0%,
      rgba(255,236,214,.34) 22%,
      rgba(255,190,130,.14) 44%,
      rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%);
  mix-blend-mode:soft-light;
  opacity:calc(.4 + var(--lg-glow) * .6);
}
.pf-panel::after{
  padding:1.5px;
  background:
    conic-gradient(from calc(var(--lg-ang,180) * 1deg) at var(--mx) var(--my),
      rgba(255,255,255,.95),
      rgba(255,120,60,.55) 12%,
      rgba(255,220,140,.35) 26%,
      rgba(255,255,255,.10) 46%,
      rgba(120,180,255,.42) 66%,
      rgba(200,160,255,.34) 78%,
      rgba(255,255,255,.95));
  opacity:calc(.42 + var(--lg-rim) * .58);
}

/* ── Filtros ── */
.pf-filtros{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-bottom:clamp(18px,2.4vw,26px);
}
.pf-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:.54em 1.1em;
  border:1px solid rgba(26,18,9,.14);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  color:var(--panel-ink);
  font-size:.82rem; font-weight:600; letter-spacing:-.012em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 2px 5px rgba(120,70,20,.10);
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease-soft),
    box-shadow var(--t-fast) var(--ease);
}
.pf-chip:hover{ transform:translate3d(0,-2px,0); border-color:rgba(255,106,0,.45); }
.pf-chip.is-on{
  border-color:var(--accent);
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px -8px rgba(255,106,0,.5);
}
.pf-num{
  font-size:.68rem; font-weight:700;
  padding:.12em .5em;
  border-radius:var(--r-pill);
  background:rgba(26,18,9,.09);
  color:var(--panel-ink-3);
}
.pf-chip.is-on .pf-num{ background:rgba(255,255,255,.26); color:#fff; }

/* ── Cuadrícula de fotos ── */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(10px,1.3vw,16px);
}
.pf-item{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--r-md);
  overflow:hidden;
  cursor:zoom-in;
  background:linear-gradient(160deg,rgba(26,18,9,.10),rgba(26,18,9,.04));
  border:1px solid rgba(26,18,9,.10);
  box-shadow:0 2px 6px rgba(120,70,20,.12);
  opacity:0;
  transform:translate3d(0,22px,0) scale(.97);
  transition:
    opacity .7s var(--ease-soft) var(--d,0ms),
    transform .7s var(--ease-soft) var(--d,0ms),
    box-shadow var(--t-med) var(--ease-soft),
    border-color var(--t-med) var(--ease);
}
.pf-item.is-in{ opacity:1; transform:none; }
.pf-item:hover{
  border-color:rgba(255,106,0,.5);
  box-shadow:0 18px 40px -14px rgba(120,50,0,.5);
}
.pf-item img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .7s var(--ease), transform .9s var(--ease-soft);
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;         /* sin menú de guardar al mantener pulsado */
  pointer-events:none;                /* el clic lo recoge la tarjeta */
}
.pf-item.is-lista img{ opacity:1; transform:scale(1); }
.pf-item:hover img{ transform:scale(1.06); }

.pf-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 12px 10px;
  background:linear-gradient(to top,rgba(10,6,2,.78),transparent);
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-soft);
  pointer-events:none;
}
.pf-cap span{
  font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff;
}
.pf-item:hover .pf-cap{ opacity:1; transform:none; }

.pf-lupa{
  position:absolute; top:10px; right:10px; z-index:2;
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(10,6,2,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0;
  transform:scale(.8);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
  pointer-events:none;
}
.pf-lupa svg{ width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.pf-item:hover .pf-lupa{ opacity:1; transform:scale(1); }

.pf-vacio,
.pf-nota{
  text-align:center;
  font-size:.78rem; font-weight:300;
  color:var(--panel-ink-3);
}
.pf-vacio{ padding:clamp(30px,5vw,56px) 0; font-size:.92rem; }
.pf-nota{ margin-top:clamp(16px,2vw,22px); }

.pf-cta{
  text-align:center;
  margin-top:clamp(46px,6vw,80px);
}
.pf-cta p{
  max-width:44ch; margin:12px auto 26px;
  color:var(--ink-2); font-weight:300;
}

/* ── Visor a pantalla completa ── */
.visor{
  position:fixed; inset:0; z-index:170;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,40px);
}
.visor-fondo{
  position:absolute; inset:0;
  background:rgba(3,3,4,.90);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .34s var(--ease);
}
.visor.is-in .visor-fondo{ opacity:1; }

.visor-caja{
  position:relative;
  max-width:min(100%,1100px);
  max-height:86vh;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0;
  transform:scale(.94);
  filter:blur(8px);
  transition:opacity .38s var(--ease-soft), transform .38s var(--ease-soft), filter .38s var(--ease-soft);
}
.visor.is-in .visor-caja{ opacity:1; transform:none; filter:none; }
.visor-caja img{
  max-width:100%; max-height:78vh;
  border-radius:var(--r-md);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.visor-caja figcaption{
  font-size:.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}

.visor-x,
.visor-nav{
  position:absolute; z-index:3;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  color:#fff; cursor:pointer; padding:0;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.visor-x{ top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); width:42px; height:42px; }
.visor-x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.visor-x:hover{ background:rgba(255,255,255,.18); transform:rotate(90deg); }

.visor-nav{ top:50%; translate:0 -50%; width:48px; height:48px; }
.visor-nav svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.visor-prev{ left:clamp(10px,2.4vw,28px); }
.visor-next{ right:clamp(10px,2.4vw,28px); }
.visor-next svg{ transform:rotate(180deg); }
.visor-nav:hover{ background:rgba(255,255,255,.18); }

@media (max-width:620px){
  .pf-grid{ grid-template-columns:repeat(2,1fr); }
  .pf-panel{ padding:14px; border-radius:var(--r-lg); }
  .visor-nav{ width:40px; height:40px; }
  .visor-caja img{ max-height:70vh; }
  html.has-refract .pf-panel{
    -webkit-backdrop-filter:blur(12px) saturate(150%) brightness(1.1);
            backdrop-filter:blur(12px) saturate(150%) brightness(1.1);
  }
}


/* ────────────────────── 14. RESPONSIVE ────────────────────── */
@media (max-width:1080px){
  .qz-datos{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
}

@media (max-width:860px){
  html{ scroll-padding-top:88px; }
  .nav{ padding:8px 8px 8px 14px; flex-wrap:wrap; }
  .nav-toggle{ display:grid; }
  .nav-links{
    order:3; width:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height var(--t-med) var(--ease), opacity var(--t-fast) var(--ease), padding var(--t-med) var(--ease);
  }
  .nav-links.is-open{ max-height:260px; opacity:1; padding:8px 0 6px; }
  .nav-link{ padding:.72em 1em; font-size:.9rem; }

  .showcase-stage{ min-height:auto; padding:clamp(18px,4vw,28px); border-radius:var(--r-lg); }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }

  .crossbar{ height:clamp(34px,5vh,42px); }
}

@media (max-width:620px){
  /* Cotizador en celular: objetivos de toque grandes y una sola columna.
     Se recortan los rellenos anidados para devolverle ancho al asistente. */
  .showcase-stage{ padding:12px; }
  .quotebar{ padding:clamp(20px,4vw,26px) 15px 16px; }
  .qz-grid{ grid-template-columns:repeat(2,1fr); }
  .qz-card{ min-height:96px; }
  .qz-opts-2{ grid-template-columns:1fr; }
  .qz-opt{ min-height:84px; padding:16px; }
  .qz-datos{ grid-template-columns:1fr; }
  .qz-actions .btn{ width:100%; }
  .qz-back{ top:10px; left:10px; }
  .qz-progress{ flex-direction:column; gap:9px; }

  .hero{ min-height:auto; padding-bottom:clamp(178px,29vh,230px); }
  .hero-title{ font-size:clamp(2.2rem,10vw,3rem); }
  /* En móvil el indicador de scroll pelearía sitio con las cintas */
  .scroll-hint{ display:none; }
  .closing-actions .btn{ width:100%; }
  .footer-inner{ grid-template-columns:1fr; }
  .tcard{ width:min(74vw,268px); }
  .crossbars{ height:100px; }
  .cb-item{ letter-spacing:.18em; }
  /* En móvil el cristal se aligera. Hay que nombrar los componentes: cada uno
     fija su propio --glass-blur, así que un valor en :root no les llegaría. */
  :root,
  .nav,.quotebar,.closing-card,.tcard,.toast,.crossbar--b{ --glass-blur:8px; }
}


/* ────────────── 15. PREFERENCIAS DEL SISTEMA ──────────────
   Sólo se detiene el movimiento intrusivo (deriva, barrido, autoplay).
   Cristal, reflejos y fundidos se mantienen: son la identidad del sitio. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .orb,
  .stage-fallback::after,
  .scroll-hint span,
  .eyebrow .dot{ animation:none !important; }
  .marquee-track{ animation-duration:150s !important; }
  .crossbar-strip{ animation-duration:160s !important; }
}

/* Sin backdrop-filter el fondo se refuerza para conservar contraste */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg,.btn,.field input,.eyebrow,.play,.crossbar--b{
    background:linear-gradient(157deg,rgba(30,30,34,.94),rgba(14,14,17,.96));
  }
  .btn-primary,.btn-solid{ background:linear-gradient(135deg,var(--accent),var(--accent-deep)); }
  .crossbar--a{ background:linear-gradient(96deg,var(--accent-2),var(--accent) 48%,var(--accent-deep)); }
}

@media print{
  .nav-wrap,.marquee,.grain,.glow-field,.scroll-hint,.crossbars{ display:none; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; filter:none; transform:none; }
}