:root{
  --crema:#F2ECE1;
  --navy:#232A35;
  --navy-ink:rgba(35,42,53,.72);
  --navy-ink-2:rgba(35,42,53,.55);
  --navy-ink-3:rgba(35,42,53,.2);
  --navy-dark:#0D131E;
  --crema-ink:rgba(242,236,225,.85);
  --crema-ink-2:rgba(242,236,225,.6);
  --crema-ink-3:rgba(242,236,225,.4);
  --terracota:#D2582E;
  --terracota-hover:#b8471f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--crema);color:var(--navy);font-family:'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
a{color:var(--terracota);text-decoration:none}
a:hover{color:var(--terracota-hover)}
input,select,button{font-family:'Manrope',system-ui,-apple-system,sans-serif}
input::placeholder{color:var(--crema-ink-3)}
img{max-width:100%}
h1,h2,h3{text-wrap:pretty}

/* Regla base, antes que cualquier componente: el atributo `hidden` por sí solo
   NO alcanza contra un `display` puesto por una regla de autor (ver el caso
   puntual de .fz-panel-overlay[hidden] más abajo) — el origen de la regla
   decide antes que la especificidad, así que un `display:flex` de autor le
   gana al `display:none` del user-agent aunque `[hidden]` sea más específico
   en teoría. En vez de parchear componente por componente (mismo bug ya visto
   en .fz-success/.fz-form: mensaje de éxito y formulario quedaban superpuestos
   los dos a la vez), esta regla genérica con !important cubre a TODOS los
   elementos que el JS oculta con `el.hidden = true`, sea cual sea su `display`
   de autor. Es siempre correcta: nada que lleve el atributo `hidden` puesto
   quiere seguir ocupando layout.*/
[hidden]{display:none !important}

.fz-btn{
  display:inline-block;background:var(--terracota);color:var(--crema);font-weight:700;
  border-radius:10px;border:none;cursor:pointer;white-space:nowrap;
  transition:background .2s ease;
  padding:14px 26px;font-size:15px;
}
.fz-btn:hover{background:var(--terracota-hover)}
.fz-btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid var(--terracota);outline-offset:2px;
}

@keyframes fz-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ---------- header unificado sticky ---------- */
.fz-header{
  position:sticky;top:0;z-index:50;
  background:rgba(242,236,225,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(35,42,53,.08);
  transition:box-shadow .2s ease, background .2s ease;
}
.fz-header-inner{
  max-width:1280px;margin:0 auto;
  padding:12px clamp(20px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.fz-header-brand{display:flex;align-items:center;gap:10px}
.fz-header-brand img{width:30px;height:30px;object-fit:contain}
.fz-header-name{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--navy)}
.fz-header .fz-btn{font-size:13.5px;padding:10px 20px;flex:none}

/* ---------- hero ---------- */
.fz-hero{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(48px,9vw,100px) clamp(20px,6vw,64px) clamp(40px,6vw,64px);
  max-width:1280px;margin:0 auto;overflow:hidden;gap:clamp(32px,5vw,52px);
}
.fz-hero-text{
  flex:none;width:100%;max-width:760px;display:flex;flex-direction:column;gap:20px;
  text-align:center;align-items:center;
  transition:opacity .1s linear, transform .1s linear;
}
.fz-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.04em;color:var(--terracota);text-transform:uppercase;
}
.fz-hero-text h1{margin:0;font-size:clamp(36px,5.2vw,60px);line-height:1.06;font-weight:800;letter-spacing:-0.02em;color:var(--navy)}
.fz-hero-text p{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--navy-ink);max-width:620px}
.fz-hero-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;justify-content:center}
.fz-hero-cta-row .fz-btn{font-size:16px;padding:16px 30px;box-shadow:0 8px 20px rgba(210,88,46,.25)}
.fz-hero-cta-note{font-size:14px;color:var(--navy-ink-2)}
.fz-trust-row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px;justify-content:center;
}
.fz-trust-item{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--navy-ink);background:rgba(35,42,53,.05);padding:7px 14px;border-radius:999px;
  border:1px solid rgba(35,42,53,.09);
}
.fz-trust-item strong{color:var(--terracota);font-weight:800}
.fz-hero-icon-wrap{
  flex:none;width:100%;max-width:840px;display:flex;flex-direction:column;
  align-items:center;perspective:1200px;transition:transform .1s linear;
}
.fz-app-window{
  width:100%;background:var(--navy-dark);border-radius:16px;
  border:1px solid rgba(242,236,225,.14);
  box-shadow:0 28px 70px rgba(13,19,30,.5), 0 0 0 1px rgba(210,88,46,.2);
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .25s ease-out, box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.fz-app-window:hover{
  box-shadow:0 36px 85px rgba(13,19,30,.65), 0 0 0 1px rgba(210,88,46,.4);
}
.fz-app-bar{
  display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
  background:rgba(242,236,225,.04);border-bottom:1px solid rgba(242,236,225,.08);
}
.fz-app-dots{display:flex;gap:7px;align-items:center}
.fz-app-dot{width:10px;height:10px;border-radius:50%}
.fz-dot-red{background:#ff5f56}
.fz-dot-yellow{background:#ffbd2e}
.fz-dot-green{background:#27c93f}
.fz-app-title{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--crema-ink);font-weight:600}
.fz-app-mini-icon{width:16px;height:16px;object-fit:contain}
.fz-app-status-tag{
  display:flex;align-items:center;gap:6px;font-size:11px;color:#27c93f;font-weight:700;
  background:rgba(39,201,63,.12);padding:3px 9px;border-radius:999px;
}
.fz-status-led{width:6px;height:6px;border-radius:50%;background:#27c93f;box-shadow:0 0 6px #27c93f}
.fz-app-nav-tabs{
  display:flex;align-items:center;gap:8px;padding:9px 14px;background:#141923;
  border-bottom:1px solid rgba(242,236,225,.07);overflow-x:auto;
}
.fz-app-tab{
  background:transparent;border:1px solid rgba(242,236,225,.1);
  color:var(--crema-ink-2);font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;white-space:nowrap;font-family:inherit;
}
.fz-app-tab:hover{
  background:rgba(242,236,225,.08);color:var(--crema);
}
.fz-app-tab.fz-active{
  background:var(--terracota);border-color:var(--terracota);color:#fff;
  box-shadow:0 3px 10px rgba(210,88,46,.35);
}
.fz-app-screen-container{
  position:relative;background:#0d1117;overflow:hidden;
}
.fz-app-screen-view{
  display:none;width:100%;
}
.fz-app-screen-view.fz-active{
  display:block;animation:fz-fade-up .3s ease-out;
}
.fz-app-screen-img{
  width:100%;height:auto;display:block;object-fit:contain;
}
.fz-app-caption-bar{
  display:flex;justify-content:space-between;align-items:center;padding:9px 16px;
  background:rgba(242,236,225,.02);border-top:1px solid rgba(242,236,225,.06);
  font-size:11.5px;color:var(--crema-ink-2);flex-wrap:wrap;gap:8px;
}
.fz-app-caption-tag{font-weight:700;color:var(--terracota)}
.fz-hero-mockup-note{
  margin-top:10px;font-size:12px;color:var(--navy-ink-2);
}


/* ---------- features: secciones de ancho completo ---------- */
/* Reemplaza al cardstack pineado de 4 pasos (ver historial de este archivo):
   ahora son 5 <article> independientes, una por funcionalidad, cada una con
   su propio titular + subtexto + demo — nada de pin ni de scroll-jacking. La
   franja entera sigue llevando el mismo patrón de fondo punteado que ya
   tenía esta sección (.fz-features::before, mismo criterio e intención que
   el ::before de abajo tenía antes en .fz-ventajas). */
.fz-features{background:var(--crema);position:relative}
.fz-features::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(../assets/fenzo-icon-navy-transparent.png);
  background-repeat:repeat;background-size:110px 110px;background-position:center top;
  opacity:.035;
}
.fz-features-head{
  position:relative;z-index:1;max-width:640px;margin:0 auto;
  padding:clamp(48px,8vw,72px) clamp(20px,6vw,64px) 0;text-align:center;
  display:flex;flex-direction:column;gap:10px;animation:fz-fade-up .7s ease-out both;
}
/* Aviso de "demostración simulada": una sola vez para las 5 demos de abajo
   (ver el comentario del mismo texto en el HTML) — chico y en cursiva para
   no competir con el eyebrow, pero con contraste de sobra (no es decorativo). */
.fz-features-nota{margin:0;font-size:13px;font-style:italic;color:var(--navy-ink-2)}

.fz-feature-section{position:relative;z-index:1;padding:clamp(56px,9vw,96px) clamp(20px,6vw,64px)}
.fz-feature-section--oscuro{background:var(--navy-dark)}
.fz-feature{
  max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:clamp(32px,6vw,72px);
}
/* Ritmo tipo Apple/Asus: las secciones oscuras (02 y 04) invierten el orden
   texto/demo respecto de las claras (01, 03, 05), para que la fila no se
   sienta idéntica cada vez. En mobile (ver el media query de abajo) se
   vuelve a un orden fijo (texto primero) — con flex-wrap ya en una sola
   columna, mantener el row-reverse solo invertiría qué bloque queda arriba,
   sin ganar nada. */
.fz-feature-section:nth-of-type(even) .fz-feature{flex-direction:row-reverse}
.fz-feature-text{flex:1 1 380px;min-width:280px;max-width:480px;display:flex;flex-direction:column;gap:16px}
.fz-feature-demo{flex:1 1 480px;min-width:280px;max-width:640px;display:flex;align-items:center;justify-content:center}
.fz-feature-num{font-size:13px;font-weight:800;color:var(--terracota);letter-spacing:.04em}
.fz-feature-text h2{margin:0;font-size:clamp(26px,3.4vw,40px);font-weight:800;color:var(--navy);letter-spacing:-0.01em}
.fz-feature-text p{margin:0;font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:var(--navy-ink);max-width:440px}
.fz-feature-text code{font-family:'Space Mono',monospace;font-size:.9em;background:rgba(35,42,53,.08);padding:2px 7px;border-radius:5px}
.fz-feature-section--oscuro .fz-feature-text h2{color:var(--crema)}
.fz-feature-section--oscuro .fz-feature-text p{color:var(--crema-ink)}
.fz-feature-section--oscuro .fz-feature-text code{background:rgba(242,236,225,.12);color:var(--crema)}
@media (max-width:820px){
  .fz-feature-section:nth-of-type(even) .fz-feature{flex-direction:row}
  .fz-feature-text{text-align:center;align-items:center}
  .fz-feature-text p{max-width:420px}
}

/* --- demo 01: corte automático (guion + espejo + pastilla ---CORTE---) ---
   Mismo truco de dos capas que #guion/#guionEspejo en interfaz.html: el
   <textarea> real queda con el texto transparente (solo deja ver el caret,
   si lo hubiera) y el div-espejo de abajo es quien pinta el texto de
   verdad, con cada ---CORTE--- envuelto en una pastilla. disabled además de
   aria-hidden: nunca fue pensado como control, así que no debe quedar
   alcanzable con Tab (ver el comentario del HTML). */
.fz-demo-guion{
  width:100%;max-width:420px;background:var(--navy-dark);border-radius:20px;
  padding:22px 24px;box-shadow:0 24px 50px rgba(13,19,30,.35);
  display:flex;flex-direction:column;gap:14px;
}
.fz-demo-guion-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fz-demo-guion-head h4{margin:0;font-size:16px;font-weight:800;color:var(--crema)}
.fz-demo-guion-contador{font-size:12px;color:var(--crema-ink-2);font-variant-numeric:tabular-nums}
/* Pulso del contador de partes: se dispara agregando/retirando esta clase
   cada vez que aparece un ---CORTE--- nuevo (ver js/fenzo.js), en vez de
   animar la propiedad con GSAP — una transición CSS no puede interpolar
   var(--terracota) como color de destino de un tween JS, y esto además es
   más barato (una sola clase, sin objeto proxy). */
.fz-demo-guion-contador span{display:inline-block}
.fz-demo-guion-contador span.fz-demo-pulso{animation:fz-demo-partes-pulso .5s ease-out both}
@keyframes fz-demo-partes-pulso{
  0%{transform:scale(1.5);color:var(--terracota)}
  100%{transform:scale(1);color:var(--crema)}
}
.fz-demo-editor-wrap{position:relative;min-height:190px}
.fz-demo-editor,.fz-demo-editor-espejo{
  position:absolute;inset:0;margin:0;width:100%;height:100%;box-sizing:border-box;
  padding:16px 18px;font-size:13.5px;line-height:1.85;font-family:inherit;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;
}
.fz-demo-editor{
  border:1px dashed rgba(242,236,225,.2);border-radius:10px;background:rgba(242,236,225,.05);
  color:transparent;-webkit-text-fill-color:transparent;resize:none;opacity:1;cursor:default;
}
.fz-demo-editor-espejo{color:var(--crema-ink);pointer-events:none}
.corte-chip-demo{
  display:inline-flex;align-items:center;color:var(--terracota);
  border:1px dashed rgba(210,88,46,.55);border-radius:999px;padding:2px 10px;
  font-size:11px;margin:4px 0;
}

/* --- demo 02: subtítulos karaoke + línea de tiempo simulada ---
   @keyframes fz-resalte es el mismo resaltado palabra por palabra que ya
   tenía esta hoja para la fase "Subtítulos" del cardstack retirado — se
   reusa sin tocarle un solo valor, solo cambia quién lo aplica. */
@keyframes fz-resalte{
  0%,16%{color:var(--crema-ink-2)}
  20%,36%{color:#FFD400}
  40%,100%{color:var(--crema-ink-2)}
}
.fz-demo-subtitulo{width:100%;max-width:520px;display:flex;flex-direction:column;gap:16px}
.fz-demo-subtitulo-frame{
  background:var(--navy-dark);border-radius:20px;min-height:190px;
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,32px);
  box-shadow:0 24px 50px rgba(13,19,30,.35);
}
.fz-demo-subtitulo-caption{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
/* Pausada hasta que js/fenzo.js confirma (ScrollTrigger) que la demo entró en
   viewport y agrega .fz-armado al contenedor — ver ese IIFE. Con motion
   reducido esa clase nunca se agrega (el IIFE corta antes); en su lugar el
   propio JS fija ahí mismo el estado final (palabra resaltada, barra llena)
   por estilo inline, así nada queda a medio camino ni pausado para siempre. */
.fz-demo-subtitulo-word{font-size:clamp(16px,2vw,22px);font-weight:800;color:var(--crema-ink-2);animation:fz-resalte 3.2s ease-in-out infinite;animation-play-state:paused}
.fz-demo-subtitulo-word:nth-child(1){animation-delay:0s}
.fz-demo-subtitulo-word:nth-child(2){animation-delay:.27s}
.fz-demo-subtitulo-word:nth-child(3){animation-delay:.54s}
.fz-demo-subtitulo-word:nth-child(4){animation-delay:.81s}
.fz-demo-subtitulo-word:nth-child(5){animation-delay:1.08s}
.fz-demo-subtitulo-word:nth-child(6){animation-delay:1.35s}
.fz-demo-subtitulo-word:nth-child(7){animation-delay:1.62s}
.fz-demo-subtitulo-word:nth-child(8){animation-delay:1.89s}
.fz-demo-subtitulo-word:nth-child(9){animation-delay:2.16s}
.fz-demo-subtitulo.fz-armado .fz-demo-subtitulo-word{animation-play-state:running}
.fz-demo-subtitulo-tl{position:relative;height:6px;border-radius:3px;background:rgba(242,236,225,.12);overflow:hidden}
.fz-demo-subtitulo-tl-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--terracota);border-radius:3px}
.fz-demo-subtitulo.fz-armado .fz-demo-subtitulo-tl-fill{animation:fz-demo-tl-scan 4.4s linear infinite}
@keyframes fz-demo-tl-scan{from{width:0%}to{width:100%}}

/* --- demo 03: todo local (marco de la máquina + camino cortado a la nube) --- */
.fz-demo-local{width:100%;max-width:520px;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap}
.fz-demo-local-frame{
  flex:1 1 240px;max-width:300px;background:var(--navy-dark);border-radius:18px;
  padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 50px rgba(13,19,30,.35);
}
.fz-demo-local-frame-tag{font-size:11.5px;font-weight:800;color:var(--crema-ink-2);text-transform:uppercase;letter-spacing:.05em}
.fz-demo-local-items{display:flex;flex-direction:column;gap:8px}
.fz-demo-local-item{
  background:rgba(242,236,225,.06);border:1px solid rgba(242,236,225,.14);border-radius:10px;
  padding:9px 13px;font-size:12.5px;color:var(--crema-ink);
}
.fz-demo-local-path{position:relative;flex:0 0 auto;width:110px;height:64px;display:flex;align-items:center}
.fz-demo-local-dot{position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--terracota)}
.fz-demo-local-block{
  margin-left:auto;position:relative;width:46px;height:46px;border-radius:50%;
  background:rgba(35,42,53,.08);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--navy-ink-2);
}
.fz-demo-local-slash{position:absolute;width:58px;height:2px;background:var(--terracota);transform:rotate(-45deg)}
@media (max-width:600px){ .fz-demo-local{flex-direction:column} .fz-demo-local-path{width:64px;height:90px;flex-direction:column} .fz-demo-local-dot{left:50%;top:0;margin-left:-5.5px;margin-top:0} .fz-demo-local-slash{transform:rotate(45deg)} }

/* --- demo 04: short 9:16 + largo 16:9 llenándose a la vez ---
   El fondo degradado es el mismo placeholder de "textura de gameplay" que
   ya usaba .fz-mockup-short-frame (retirado de esta hoja): no es una
   captura real, así se aclara también en el comentario del HTML. */
.fz-demo-doble{display:flex;flex-direction:column;align-items:center;gap:18px}
.fz-demo-doble-origen{font-size:11.5px;font-weight:800;color:var(--crema-ink-2);text-transform:uppercase;letter-spacing:.05em}
.fz-demo-doble-marcos{display:flex;align-items:flex-end;gap:clamp(20px,4vw,32px);flex-wrap:wrap;justify-content:center}
.fz-demo-doble-marco{
  position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(160deg,#1b2130,#3a2a1f 60%,#141821);
  box-shadow:0 20px 40px rgba(13,19,30,.35);
}
.fz-demo-doble-marco--corto{width:130px;aspect-ratio:9/16}
.fz-demo-doble-marco--largo{width:260px;aspect-ratio:16/9}
.fz-demo-doble-fill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(0deg,rgba(210,88,46,.5),rgba(210,88,46,0));
}
.fz-demo-doble-tag{
  position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.55);padding:3px 8px;border-radius:999px;
}
@media (max-width:480px){ .fz-demo-doble-marco--largo{width:220px} }

/* --- demo 05: editor integrado (partes con stagger + retoques simulados) --- */
.fz-demo-editor-partes{display:flex;gap:clamp(14px,3vw,22px);flex-wrap:wrap;justify-content:center}
.fz-demo-editor-parte{display:flex;flex-direction:column;gap:8px;align-items:center}
.fz-demo-editor-parte-frame{
  position:relative;width:112px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,#1b2130,#3a2a1f 60%,#141821);
  box-shadow:0 16px 32px rgba(13,19,30,.3);
}
.fz-demo-editor-parte-label{font-size:12px;color:var(--navy-ink-2)}
/* Selección con tiradores (retoque de encuadre simulado): el propio marco
   estira/encoge vía JS, mismo criterio que "el modelo no reconstruye nada,
   solo cambia estilo" del taller real (ver CLAUDE.md, taller.js). */
.fz-demo-editor-sel{
  position:absolute;top:22%;left:22%;width:56%;height:44%;
  border:2px solid var(--terracota);border-radius:6px;
}
.fz-demo-editor-sel::before,.fz-demo-editor-sel::after{content:'';position:absolute;width:8px;height:8px;background:var(--terracota);border-radius:2px}
.fz-demo-editor-sel::before{top:-4px;left:-4px}
.fz-demo-editor-sel::after{bottom:-4px;right:-4px}
.fz-demo-editor-sub{
  position:absolute;left:6px;right:6px;bottom:12%;text-align:center;font-size:11px;font-weight:800;
  line-height:1.25;color:#FFD400;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
.fz-feature-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fz-feature-badge{
  font-size:11px;font-weight:800;color:var(--terracota);background:rgba(210,88,46,.12);
  padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;
}
.fz-feature-section--oscuro .fz-feature-badge{background:rgba(210,88,46,.25);color:var(--crema)}

/* Demo 01 additions */
.fz-demo-silence-bar{
  display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--crema-ink-3);
  padding-top:4px;border-top:1px solid rgba(242,236,225,.08);margin-top:4px;
}
.fz-demo-silence-tag{
  font-size:10.5px;color:var(--crema-ink-2);background:rgba(242,236,225,.06);padding:2px 7px;border-radius:4px;
}

/* Demo 02 additions */
.fz-demo-sub-tag{
  font-size:10.5px;font-weight:700;color:#27c93f;background:rgba(39,201,63,.15);
  padding:2px 8px;border-radius:4px;margin-bottom:12px;display:inline-block;align-self:center;
}

/* Demo 03 additions */
.fz-demo-local-lock{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#27c93f;
  background:rgba(39,201,63,.12);padding:4px 10px;border-radius:999px;margin-top:6px;
}

/* Demo 04 additions */
.fz-demo-social-pill{
  position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.65);padding:2px 7px;border-radius:999px;backdrop-filter:blur(4px);
}
.fz-demo-doble-status{
  font-size:11px;font-weight:700;color:#27c93f;background:rgba(39,201,63,.15);
  padding:3px 10px;border-radius:999px;margin-top:6px;
}

/* ---------- CTA Banner intermedio (regla de 3+ CTAs) ---------- */
.fz-features-cta{
  position:relative;z-index:1;padding:0 clamp(20px,6vw,64px) clamp(56px,9vw,96px);
  max-width:1120px;margin:0 auto;width:100%;
}
.fz-cta-card{
  background:linear-gradient(135deg, var(--navy-dark) 0%, #18202d 100%);
  border:1px solid rgba(210,88,46,.3);border-radius:24px;
  padding:clamp(36px,6vw,60px) clamp(24px,5vw,56px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
  box-shadow:0 30px 60px rgba(13,19,30,.45), 0 0 0 1px rgba(242,236,225,.06);
  position:relative;overflow:hidden;width:100%;box-sizing:border-box;
}
.fz-cta-card::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle at center, rgba(210,88,46,.15) 0%, transparent 60%);
  pointer-events:none;
}
.fz-cta-card h2{
  margin:0;font-size:clamp(26px,3.8vw,42px);font-weight:800;color:var(--crema);
  letter-spacing:-0.02em;max-width:720px;position:relative;z-index:1;
}
.fz-cta-card p{
  margin:0;font-size:clamp(15px,1.5vw,17px);color:var(--crema-ink-2);
  max-width:580px;line-height:1.6;position:relative;z-index:1;
}
.fz-cta-card .fz-btn{
  font-size:16px;padding:16px 36px;box-shadow:0 10px 28px rgba(210,88,46,.35);
  position:relative;z-index:1;
}
.fz-cta-bullets{
  display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,24px);justify-content:center;
  margin-top:6px;position:relative;z-index:1;
}
.fz-cta-bullet{
  font-size:13px;font-weight:600;color:var(--crema-ink-2);
  display:inline-flex;align-items:center;gap:6px;
}
.fz-cta-bullet span{color:#27c93f;font-weight:800}

/* ---------- seccion specs tecnicas ---------- */
.fz-specs{
  background:var(--navy-dark);position:relative;
  padding:clamp(64px,9vw,100px) clamp(20px,6vw,64px);
  border-top:1px solid rgba(242,236,225,.08);
}
.fz-specs-head{
  max-width:680px;margin:0 auto clamp(36px,5vw,56px);text-align:center;
  display:flex;flex-direction:column;gap:12px;
}
.fz-specs-head h2{margin:0;font-size:clamp(28px,3.6vw,42px);font-weight:800;color:var(--crema);letter-spacing:-0.01em}
.fz-specs-head p{margin:0;font-size:15.5px;color:var(--crema-ink-2);line-height:1.6}
.fz-specs-grid{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));gap:20px;
}
.fz-spec-card{
  background:rgba(242,236,225,.03);border:1px solid rgba(242,236,225,.08);
  border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.fz-spec-card:hover{
  background:rgba(242,236,225,.06);border-color:rgba(210,88,46,.35);transform:translateY(-2px);
}
.fz-spec-icon{font-size:24px;line-height:1}
.fz-spec-title{margin:0;font-size:17px;font-weight:800;color:var(--crema)}
.fz-spec-desc{margin:0;font-size:13.5px;color:var(--crema-ink-2);line-height:1.6}
.fz-spec-tag{
  align-self:flex-start;font-size:10.5px;font-weight:800;color:var(--terracota);
  background:rgba(210,88,46,.15);padding:2px 8px;border-radius:6px;
  text-transform:uppercase;letter-spacing:.04em;margin-top:auto;
}


/* ---------- formulario ---------- */
.fz-form-section{background:var(--navy-dark);padding:clamp(56px,9vw,110px) clamp(20px,6vw,64px)}
.fz-form-head{max-width:600px;margin:0 auto 40px;display:flex;flex-direction:column;gap:8px;text-align:center}
.fz-form-head h2{margin:0;font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--crema);letter-spacing:-0.01em}
.fz-form-head p{margin:0;font-size:15px;color:var(--crema-ink-2);line-height:1.5}
.fz-form{
  max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:18px;
  background:rgba(242,236,225,.04);border:1px solid rgba(242,236,225,.1);border-radius:16px;padding:32px 28px;
}
.fz-field{display:flex;flex-direction:column;gap:6px}
.fz-field label{font-size:13px;font-weight:600;color:var(--crema-ink)}
.fz-field input,.fz-field select{
  background:rgba(242,236,225,.08);border:1px solid rgba(242,236,225,.15);border-radius:8px;
  padding:12px 14px;font-size:15px;color:var(--crema);outline:none;
}
.fz-field select option{color:var(--navy)}
.fz-form button[type=submit]{margin-top:6px;font-size:16px;padding:15px;border-radius:9px;width:100%}
.fz-success{
  max-width:480px;margin:0 auto;background:rgba(242,236,225,.06);border:1px solid rgba(210,88,46,.35);
  border-radius:14px;padding:36px 28px;text-align:center;display:flex;flex-direction:column;gap:10px;
  animation:fz-fade-up .5s ease-out both;
}
.fz-success .fz-check{font-size:32px}
.fz-success h3{margin:0;font-size:20px;font-weight:700;color:var(--crema)}
.fz-success p{margin:0;font-size:14px;color:var(--crema-ink-2);line-height:1.5}

/* ---------- footer ---------- */


/* ---------- intro: morphing escalonado + frase ---------- */
.fz-intro{
  position:fixed;inset:0;z-index:60;background:var(--navy-dark);
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(24px,6vw,80px);overflow:hidden;
}
/* Cinco columnas que suben como andenes al terminar */
.fz-intro-cols{position:absolute;inset:0;display:flex}
.fz-intro-cols span{flex:1;background:var(--navy-dark);box-shadow:1px 0 0 var(--navy-dark),-1px 0 0 var(--navy-dark)}
.fz-intro-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fz-intro-lines path{fill:none;stroke:#E2A93B;stroke-opacity:.14;stroke-width:1.4}
.fz-intro-stage{
  position:relative;display:flex;align-items:center;gap:clamp(24px,5vw,64px);
  flex-wrap:wrap;justify-content:center;
}
.fz-intro-morph{width:clamp(120px,18vw,210px);height:clamp(120px,18vw,210px);overflow:visible;flex-shrink:0}
#fz-morph{fill:#C68A1B}
.fz-shape-src{display:none}
.fz-intro-copy{display:grid;min-width:min(76vw,440px)}
.fz-intro-copy > *{grid-area:1/1}
.fz-intro-word{
  margin:0;overflow:hidden;align-self:center;padding:0 0 .14em;
  font-size:clamp(44px,8vw,104px);font-weight:800;letter-spacing:-0.035em;line-height:1.05;
  color:var(--crema);
}
.fz-intro-word .fz-char{display:inline-block;will-change:transform}
.fz-intro-lockup{align-self:center;display:flex;flex-direction:column;gap:10px;visibility:hidden}
.fz-intro-brand{
  margin:0;overflow:hidden;padding:0 0 .12em;font-size:clamp(54px,9vw,120px);font-weight:800;
  letter-spacing:-0.045em;line-height:1;color:var(--crema);
}
.fz-intro-brand .fz-char{display:inline-block}
.fz-intro-tagline{margin:0;font-size:clamp(20px,2.6vw,30px);font-weight:700;color:#E2A93B;letter-spacing:-0.01em}
.fz-intro-origin{margin:0;font-size:14px;color:var(--crema-ink-2)}
.fz-intro-skip{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);
  background:transparent;border:1px solid rgba(242,236,225,.3);color:var(--crema-ink);
  font:600 13px 'Manrope',system-ui,sans-serif;padding:8px 14px;border-radius:8px;cursor:pointer;
}
.fz-intro-skip:hover,.fz-intro-skip:focus-visible{border-color:var(--crema);color:var(--crema)}
@media (max-width:640px){
  .fz-intro-stage{flex-direction:column;text-align:center}
  .fz-intro-lockup{align-items:center}
}

/* ---------- menu radial (Quiénes somos / QoriCore / FAQ) ---------- */
.fz-radial{
  position:fixed;right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;
}
.fz-radial-toggle{
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;position:relative;z-index:2;
  background:var(--navy);color:var(--crema);font-size:26px;line-height:1;font-weight:400;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(13,19,30,.35);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s ease;
}
.fz-radial-toggle:hover{background:var(--navy-dark)}
.fz-radial[data-open="true"] .fz-radial-toggle{transform:rotate(45deg);background:var(--terracota)}
.fz-radial-menu{position:absolute;right:0;bottom:0;width:0;height:0}
.fz-radial-item{
  position:absolute;right:2px;bottom:2px;width:64px;height:64px;border-radius:50%;
  border:none;cursor:pointer;background:var(--crema);color:var(--navy);
  font-size:11px;font-weight:700;line-height:1.15;text-align:center;
  display:flex;align-items:center;justify-content:center;padding:6px;
  box-shadow:0 10px 24px rgba(35,42,53,.3);
  opacity:0;transform:translate(0,0) scale(.4);pointer-events:none;
  transition:opacity .28s ease,transform .34s cubic-bezier(.2,.8,.2,1);
}
.fz-radial[data-open="true"] .fz-radial-item{opacity:1;pointer-events:auto}
.fz-radial-item:nth-child(1){transition-delay:.02s}
.fz-radial-item:nth-child(2){transition-delay:.07s}
.fz-radial-item:nth-child(3){transition-delay:.12s}
.fz-radial[data-open="true"] .fz-radial-item:nth-child(1){transform:translate(2px,-104px) scale(1)}
.fz-radial[data-open="true"] .fz-radial-item:nth-child(2){transform:translate(-72px,-76px) scale(1)}
.fz-radial[data-open="true"] .fz-radial-item:nth-child(3){transform:translate(-104px,-2px) scale(1)}
.fz-radial-item:hover{background:var(--terracota);color:var(--crema)}

.fz-panel-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(13,19,30,.68);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
/* El atributo `hidden` por sí solo NO alcanza: una regla de autor normal
   (esta misma, con `display:flex`) le gana en la cascada a la regla del user
   agent `[hidden]{display:none}` sin importar la especificidad — el origen
   se compara antes que la especificidad. Sin este selector más específico,
   `overlay.hidden = true` no ocultaba nada y el panel quedaba SIEMPRE visible
   (incluido en la carga inicial de la página, antes de tocar el menú radial). */
.fz-panel-overlay[hidden]{display:none}
.fz-panel{
  position:relative;max-width:680px;width:100%;max-height:85vh;overflow-y:auto;
  background:var(--crema);border-radius:20px;padding:clamp(28px,5vw,44px);
  box-shadow:0 30px 70px rgba(13,19,30,.45);
  animation:fz-fade-up .35s ease-out both;
}
.fz-panel h3{margin:0 0 14px;font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--navy)}
.fz-panel p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--navy-ink)}
.fz-panel-close{
  position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  border:none;background:var(--navy-ink-3);color:var(--navy);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.fz-panel-close:hover{background:var(--navy-ink-2);color:var(--crema)}

/* ---------- ecosistema qori en modal ---------- */
.fz-ecosistema-grid{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px;
}
.fz-brand-card{
  background:rgba(35,42,53,.04);border:1px solid rgba(35,42,53,.1);
  border-radius:14px;padding:18px;display:flex;gap:16px;align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fz-brand-card:hover{
  background:rgba(35,42,53,.07);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(35,42,53,.08);border-color:rgba(210,88,46,.3);
}
.fz-brand-logo{
  width:64px;height:64px;flex:none;object-fit:contain;border-radius:10px;
  background:#fff;padding:6px;box-shadow:0 4px 12px rgba(35,42,53,.08);
}
.fz-brand-info{display:flex;flex-direction:column;gap:6px}
.fz-brand-name{
  margin:0;font-size:17px;font-weight:800;color:var(--navy);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.fz-brand-role{
  font-size:10.5px;font-weight:800;color:var(--terracota);
  background:rgba(210,88,46,.12);padding:2px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.04em;
}
.fz-brand-slogan{margin:0;font-size:13px;font-style:italic;font-weight:600;color:var(--navy-ink)}
.fz-brand-desc{margin:0;font-size:13.5px;line-height:1.55;color:var(--navy-ink-2)}

.fz-faq-item{
  margin-bottom:16px;background:rgba(35,42,53,.03);border:1px solid rgba(35,42,53,.08);
  border-radius:12px;padding:16px 18px;
}
.fz-faq-item:last-child{margin-bottom:0}
.fz-faq-item h4{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--navy)}
.fz-faq-item p{margin:0;font-size:14px;color:var(--navy-ink);line-height:1.55}


@media (max-width:420px){
  .fz-radial-toggle{width:50px;height:50px;font-size:22px}
  .fz-radial-item{width:56px;height:56px;font-size:10px}
  .fz-radial[data-open="true"] .fz-radial-item:nth-child(1){transform:translate(2px,-92px) scale(1)}
  .fz-radial[data-open="true"] .fz-radial-item:nth-child(2){transform:translate(-64px,-66px) scale(1)}
  .fz-radial[data-open="true"] .fz-radial-item:nth-child(3){transform:translate(-92px,-2px) scale(1)}
}

/* ==========================================================================
   Estilos inspirados en Apple y ASUS ProArt (Subnav, Bento, Comparativa, Specs)
   ========================================================================== */

/* ---------- subnavegación fija estilo Apple ---------- */
.fz-subnav{
  position:sticky;top:0;z-index:25;
  background:rgba(242,236,225,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(35,42,53,.08);
  transition:box-shadow .2s ease, background .2s ease;
}
.fz-subnav-inner{
  max-width:1280px;margin:0 auto;
  padding:10px clamp(20px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.fz-subnav-title{display:flex;align-items:center;gap:10px}
.fz-subnav-name{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-0.01em}
.fz-subnav-badge{
  font-size:10.5px;font-weight:800;color:var(--terracota);
  background:rgba(210,88,46,.12);padding:2px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.04em;
}
.fz-subnav-links{display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.fz-subnav-link{
  font-size:13px;font-weight:600;color:var(--navy-ink);
  transition:color .18s ease;position:relative;
}
.fz-subnav-link:hover{color:var(--terracota)}
.fz-btn--subnav{font-size:13px;padding:9px 18px;border-radius:8px;box-shadow:none}

@media (max-width:860px){
  .fz-subnav-links{display:none}
}

/* ---------- cabeceras de sección corporativas ---------- */
.fz-section-head{
  text-align:center;max-width:800px;margin:0 auto clamp(36px,5vw,60px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.fz-section-head h2{
  margin:0;font-size:clamp(28px,4vw,44px);font-weight:800;
  color:var(--navy);letter-spacing:-0.02em;line-height:1.12;
}
.fz-section-head p{
  margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.6;
  color:var(--navy-ink);
}

/* ---------- Bento Grid estilo Apple / ASUS ProArt ---------- */
.fz-bento-section{
  padding:clamp(60px,8vw,100px) clamp(20px,5vw,64px);
  max-width:1280px;margin:0 auto;
}
.fz-bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:20px;
}
.fz-bento-card{
  background:#FFFFFF;border:1px solid rgba(35,42,53,.08);
  border-radius:22px;padding:clamp(24px,3.5vw,36px);
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 10px 30px rgba(35,42,53,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;overflow:hidden;
}
.fz-bento-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(35,42,53,.08);
  border-color:rgba(210,88,46,.3);
}
.fz-bento-card--large{grid-column:span 7}
.fz-bento-card--medium{grid-column:span 5}
.fz-bento-card--half{grid-column:span 6}
.fz-bento-card--small{grid-column:span 4}
.fz-bento-card--accent{
  background:linear-gradient(135deg,#FFFFFF 0%,#FAF5EC 100%);
  border-color:rgba(210,88,46,.2);
}
.fz-bento-metric-wrap{
  display:flex;align-items:baseline;gap:12px;margin-bottom:12px;
}
.fz-bento-big-stat{
  font-size:clamp(52px,6.5vw,80px);font-weight:800;color:var(--terracota);
  letter-spacing:-0.04em;line-height:1;font-family:'Space Mono',monospace;
}
.fz-bento-stat-tag{
  font-size:13px;font-weight:700;color:var(--navy-ink);
  text-transform:uppercase;letter-spacing:.04em;
}
.fz-bento-card h3{
  margin:0 0 10px;font-size:clamp(20px,2vw,24px);font-weight:800;
  color:var(--navy);letter-spacing:-0.01em;
}
.fz-bento-card p{
  margin:0;font-size:14.5px;line-height:1.6;color:var(--navy-ink-2);
}
.fz-tech-tag{
  display:inline-block;font-size:11.5px;font-weight:800;color:var(--terracota);
  background:rgba(210,88,46,.1);padding:4px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;align-self:flex-start;
}
.fz-bento-badge-row{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
}
.fz-pill{
  font-size:12px;font-weight:700;color:var(--navy);
  background:rgba(35,42,53,.05);padding:5px 12px;border-radius:999px;
  border:1px solid rgba(35,42,53,.08);
}
.fz-bento-diagram{
  display:flex;align-items:center;gap:8px;margin-top:18px;padding:12px 14px;
  background:rgba(35,42,53,.03);border-radius:12px;font-size:12px;font-weight:700;
  color:var(--navy);flex-wrap:wrap;
}
.fz-diag-node{
  background:#fff;padding:6px 10px;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);border:1px solid rgba(35,42,53,.06);
}
.fz-diag-arrow{color:var(--terracota);font-weight:800;font-size:14px}
.fz-bento-duo-preview{
  display:flex;gap:12px;margin-top:18px;align-items:center;
}
.fz-duo-box{
  background:var(--navy-dark);color:#fff;border-radius:10px;
  font-size:11.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:8px;
  box-shadow:0 4px 12px rgba(13,19,30,.2);
}
.fz-duo-box--vert{
  width:76px;height:114px;
  background:linear-gradient(180deg,#1C2430 0%,#0D131E 100%);
  border:1px solid rgba(210,88,46,.4);
}
.fz-duo-box--horiz{
  flex:1;height:114px;
  background:linear-gradient(180deg,#1C2430 0%,#0D131E 100%);
  border:1px solid rgba(242,236,225,.15);
}

@media (max-width:992px){
  .fz-bento-card--large,.fz-bento-card--medium,.fz-bento-card--half,.fz-bento-card--small{grid-column:span 12}
}

/* ---------- Comparativa Directa (Tradicional vs Fenzo) ---------- */
.fz-comparativa-section{
  padding:clamp(60px,8vw,100px) clamp(20px,5vw,64px);
  max-width:1200px;margin:0 auto;
}
.fz-comparativa{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;
}
.fz-comparativa-col{
  border-radius:24px;padding:clamp(28px,4vw,44px);
  display:flex;flex-direction:column;gap:24px;position:relative;
}
.fz-comparativa-col--tradicional{
  background:rgba(35,42,53,.03);border:1px solid rgba(35,42,53,.09);
}
.fz-comparativa-col--fenzo{
  background:#FFFFFF;border:2px solid var(--terracota);
  box-shadow:0 20px 50px rgba(210,88,46,.12), 0 0 0 1px rgba(210,88,46,.15);
}
.fz-col-badge{
  display:inline-block;align-self:flex-start;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:999px;
}
.fz-col-badge--muted{background:rgba(35,42,53,.07);color:var(--navy-ink-2)}
.fz-col-badge--featured{background:var(--terracota);color:#FFFFFF}
.fz-col-time-stat{
  display:flex;flex-direction:column;gap:4px;padding-bottom:20px;
  border-bottom:1px solid rgba(35,42,53,.08);
}
.fz-time-val{
  font-size:clamp(40px,4.5vw,56px);font-weight:800;font-family:'Space Mono',monospace;
  line-height:1;letter-spacing:-0.03em;
}
.fz-comparativa-col--tradicional .fz-time-val{color:var(--navy-ink-2)}
.fz-comparativa-col--fenzo .fz-time-val{color:var(--terracota)}
.fz-time-lbl{font-size:13.5px;font-weight:600;color:var(--navy-ink-2)}
.fz-comp-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;
}
.fz-comp-item{
  font-size:14.5px;line-height:1.55;color:var(--navy-ink);
  display:flex;align-items:flex-start;gap:12px;
}
.fz-comp-item strong{color:var(--navy);font-weight:700}
.fz-comp-item::before{
  content:'';flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;
}
.fz-comp-item--negative::before{background:#9DA3AE}
.fz-comp-item--positive::before{
  background:var(--terracota);box-shadow:0 0 6px rgba(210,88,46,.6);
}

@media (max-width:800px){
  .fz-comparativa{grid-template-columns:1fr}
}

/* ---------- Flujo de Trabajo ASUS ProArt en 3 Pasos ---------- */
.fz-workflow-section{
  padding:clamp(60px,8vw,100px) clamp(20px,5vw,64px);
  max-width:1280px;margin:0 auto;
}
.fz-workflow-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;
}
.fz-step-card{
  background:#FFFFFF;border:1px solid rgba(35,42,53,.08);
  border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;
  gap:14px;box-shadow:0 8px 24px rgba(35,42,53,.03);position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fz-step-card:hover{
  transform:translateY(-2px);box-shadow:0 14px 36px rgba(35,42,53,.06);
}
.fz-step-num{
  font-family:'Space Mono',monospace;font-size:13px;font-weight:700;
  color:var(--terracota);background:rgba(210,88,46,.1);padding:4px 10px;
  border-radius:6px;align-self:flex-start;
}
.fz-step-card h3{
  margin:0;font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-0.01em;
}
.fz-step-card p{margin:0;font-size:14px;line-height:1.6;color:var(--navy-ink-2)}

@media (max-width:820px){
  .fz-workflow-steps{grid-template-columns:1fr}
}

/* ---------- Especificaciones Técnicas estilo Apple Tech Specs ---------- */
.fz-tech-specs-section{
  padding:clamp(60px,8vw,100px) clamp(20px,5vw,64px);
  max-width:1100px;margin:0 auto;border-top:1px solid rgba(35,42,53,.08);
}
.fz-tech-specs{
  display:flex;flex-direction:column;border-top:1px solid rgba(35,42,53,.1);
}
.fz-spec-row{
  display:grid;grid-template-columns:280px 1fr;padding:22px 0;
  border-bottom:1px solid rgba(35,42,53,.08);gap:20px;align-items:baseline;
}
.fz-spec-group-title{
  font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-0.01em;
}
.fz-spec-group-content{font-size:14.5px;line-height:1.6;color:var(--navy-ink)}
.fz-spec-group-content strong{color:var(--navy);font-weight:700}

@media (max-width:680px){
  .fz-spec-row{grid-template-columns:1fr;gap:8px}
}


/* ---- Toque peruano (sutil): bloques con símbolos de culturas del Perú ---- */
.fz-andes{position:relative;height:0;z-index:2;pointer-events:none}
.fz-blocks{--b:clamp(22px,2.8vw,40px);position:absolute;top:0;width:calc(var(--b)*2);height:calc(var(--b)*2)}
.fz-blocks span{position:absolute;width:var(--b);height:var(--b)}
.fz-blocks span i{position:absolute;inset:20%;background:var(--sym-ink,rgba(242,236,225,.92));-webkit-mask:var(--sym) center/contain no-repeat;mask:var(--sym) center/contain no-repeat}
.fz-blocks--tl{left:0}
.fz-blocks--tl span:nth-child(1){top:0;left:0;background:#C68A1B;--sym-ink:rgba(43,26,4,.72)}
.fz-blocks--tl span:nth-child(2){top:0;left:var(--b);background:var(--terracota)}
.fz-blocks--tl span:nth-child(3){top:var(--b);left:0;background:var(--navy)}
.fz-blocks--tr{right:0}
.fz-blocks--tr span:nth-child(1){top:0;right:0;background:var(--terracota)}
.fz-blocks--tr span:nth-child(2){top:0;right:var(--b);background:var(--navy)}
.fz-blocks--tr span:nth-child(3){top:var(--b);right:0;background:#C68A1B;--sym-ink:rgba(43,26,4,.72)}
.fz-blocks span[data-s="chakana"]{--sym:url("../../qorimotion/assets/simbolos/chakana.svg")}
.fz-blocks span[data-s="inti"]{--sym:url("../../qorimotion/assets/simbolos/inti.svg")}
.fz-blocks span[data-s="colibri"]{--sym:url("../../qorimotion/assets/simbolos/colibri.svg")}
.fz-blocks span[data-s="chavin"]{--sym:url("../../qorimotion/assets/simbolos/chavin.svg")}
.fz-blocks span[data-s="tiahuanaco"]{--sym:url("../../qorimotion/assets/simbolos/tiahuanaco.svg")}
.fz-blocks span[data-s="moche"]{--sym:url("../../qorimotion/assets/simbolos/moche.svg")}

/* ---- Identidad QoriMotion: Nazca en el hero, origen, andenes y pampa ---- */
.fz-hero{position:relative}
.fz-hero > *:not(.fz-nazca){position:relative;z-index:1}
.fz-nazca{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.2}
.fz-nz{fill:none;stroke:#9A6A1A;stroke-linecap:square;stroke-linejoin:miter}
.fz-nz-line{stroke-width:1.4}
.fz-nz-fig{stroke-width:2.4}

.fz-origin{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:14px;font-weight:600;color:var(--navy-ink)}
.fz-origin-mark{position:relative;width:21px;height:14px;flex-shrink:0}
.fz-origin-mark i{position:absolute;width:7px;height:7px}
.fz-origin-mark i:nth-child(1){left:0;top:7px;background:var(--terracota)}
.fz-origin-mark i:nth-child(2){left:7px;top:7px;background:#C68A1B}
.fz-origin-mark i:nth-child(3){left:14px;top:0;background:var(--navy)}
.fz-hero-text .fz-origin{justify-content:center}

/* Marca escalonada junto a los números de las funciones */
.fz-feature-num{display:inline-flex;align-items:center;gap:8px}
.fz-feature-num::before{
  content:"";width:14px;height:14px;background:currentColor;
  clip-path:polygon(0 0,100% 0,100% 100%,66.6% 100%,66.6% 66.6%,33.3% 66.6%,33.3% 33.3%,0 33.3%);
}

/* Pampa tenue en las secciones oscuras */
.fz-feature-section--oscuro,
.fz-form-section{
  background-image:url("../../qorimotion/assets/textura/pampa-oscuro.svg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

/* Cantutas en el cierre (formulario) */
.fz-form-section{position:relative;overflow:hidden}
.fz-form-section > *:not(.fz-cantuta){position:relative;z-index:1}
.fz-cantuta{
  --ct-stem:#8E9C3A;--ct-tube:#E2A93B;--ct-petal:#D8455A;
  position:absolute;width:clamp(120px,15vw,196px);height:clamp(120px,15vw,196px);z-index:0;pointer-events:none;
}
.fz-cantuta--tl{top:0;left:0}
.fz-cantuta--br{bottom:0;right:0;transform:rotate(180deg)}
.fz-cantuta .qc-cantuta-svg{width:100%;height:100%;display:block;overflow:visible}
.fz-cantuta .ct-stem{fill:none;stroke:var(--ct-stem);stroke-width:2.2;stroke-linecap:round}
.fz-cantuta .ct-leaf{fill:var(--ct-stem)}
.fz-cantuta .ct-tube{fill:var(--ct-tube)}
.fz-cantuta .ct-petals{fill:var(--ct-petal)}
@media (max-width:640px){.fz-cantuta{width:96px;height:96px}}

/* ---- Footer de QoriMotion (mismo que la web de la marca) ---- */
.fz-foot{background:#EBE4D8;border-top:1px solid rgba(35,42,53,.12);padding:56px clamp(20px,6vw,64px) 36px;font-size:13.5px;color:var(--navy-ink)}
.fz-foot-inner{max-width:1040px;margin:0 auto}
.fz-foot-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:36px;margin-bottom:40px}
.fz-foot-brand-col{display:flex;flex-direction:column;gap:14px}
.fz-foot-brand-col p{margin:0;font-size:13px;line-height:1.6;max-width:320px}
.fz-foot-brand{display:flex;align-items:center;gap:12px;color:var(--navy)}
.fz-foot-brand:hover{color:var(--navy)}
.fz-foot-logo-wrap{background:#fff;padding:6px 10px;border-radius:10px;display:flex;box-shadow:0 2px 8px rgba(13,19,30,.06);border:1px solid rgba(13,19,30,.08)}
.fz-foot-logo{height:28px;width:auto;object-fit:contain}
.fz-foot-name{font-size:19px;font-weight:800;letter-spacing:-.015em}
.fz-foot-title{margin:0 0 12px;font-size:13px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.05em}
.fz-foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fz-foot-links a{color:var(--navy-ink)}
.fz-foot-links a:hover{color:var(--navy);text-decoration:underline}
.fz-foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #D9D0C2;padding-top:24px}
@media (max-width:768px){.fz-foot-grid{grid-template-columns:1fr 1fr}.fz-foot-brand-col{grid-column:1/-1}}

/* Pampa tenue en todo el fondo crema de la página */
body{
  background-image:url("../../qorimotion/assets/textura/pampa-claro.svg");
  background-size:100% auto;background-repeat:repeat-y;background-position:center top;
}
.fz-features{
  background-image:url("../../qorimotion/assets/textura/pampa-claro.svg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

/* ---- Modos y tecnología: tarjetas con andén escalonado (identidad QoriMotion) ---- */
.fz-bento-card::after{
  content:"";position:absolute;top:0;right:0;width:30px;height:30px;background:var(--terracota);
  clip-path:polygon(0 0,100% 0,100% 100%,66.6% 100%,66.6% 66.6%,33.3% 66.6%,33.3% 33.3%,0 33.3%);
  transform-origin:top right;transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.fz-bento-card:hover::after{transform:scale(1.34)}
.fz-bento-card code{font-family:'Space Mono',monospace;font-size:.9em;background:rgba(35,42,53,.07);padding:1px 6px;border-radius:5px}
.fz-modo-costo{
  margin:20px 0 0 !important;padding-top:14px;border-top:1px dashed rgba(35,42,53,.15);
  font-size:14px !important;color:var(--navy) !important;
}
.fz-modo-costo strong{color:var(--terracota)}
.fz-tecnologia-section .fz-bento-card h3,.fz-modos-section .fz-bento-card h3{font-size:clamp(19px,1.8vw,22px)}
@media (min-width:641px) and (max-width:992px){
  .fz-modos-section .fz-bento-card--small,.fz-tecnologia-section .fz-bento-card--small{grid-column:span 6}
}

/* Casilla "Aún no tengo canal" bajo el link del canal */
.fz-field .fz-check-row{
  display:flex;align-items:center;gap:8px;margin-top:2px;cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--crema-ink-2);width:max-content;
}
.fz-check-row input{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex-shrink:0;cursor:pointer;
  border:1.5px solid rgba(242,236,225,.35);border-radius:3px;background:transparent;display:grid;place-content:center;
}
.fz-check-row input::after{
  content:"";width:9px;height:9px;background:var(--terracota);transform:scale(0);transition:transform .15s ease;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
}
.fz-check-row input:checked{border-color:var(--terracota)}
.fz-check-row input:checked::after{transform:scale(1)}
.fz-check-row input:focus-visible{outline:2px solid var(--terracota);outline-offset:2px}
.fz-field input:disabled{opacity:.45;cursor:not-allowed}

/* ---- Cómo se accede a la beta: postulación → licencia por correo → activar ---- */
.fz-acceso{
  list-style:none;margin:0 auto 32px;padding:0;max-width:760px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:1;
}
.fz-acceso li{
  display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border-radius:12px;
  background:rgba(242,236,225,.05);border:1px solid rgba(242,236,225,.1);
}
.fz-acceso strong{font-size:15px;color:var(--crema)}
.fz-acceso li > span:last-child{font-size:13px;line-height:1.5;color:var(--crema-ink-2)}
.fz-acceso-num{
  width:26px;height:26px;display:grid;place-content:center;margin-bottom:6px;
  font:800 13px 'Manrope',system-ui,sans-serif;color:var(--navy-dark);background:#E2A93B;
  clip-path:polygon(0 0,100% 0,100% 100%,33% 100%,33% 66%,0 66%);
}
@media (max-width:640px){.fz-acceso{grid-template-columns:1fr}}

/* ---- Declaración fijada estilo Apple: +45 → <10 minutos ---- */
.fz-statement{
  position:relative;background:var(--navy-dark);color:var(--crema);overflow:hidden;
  background-image:url("../../qorimotion/assets/textura/pampa-oscuro.svg");background-size:cover;background-position:center;
}
.fz-statement-inner{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,22px);padding:clamp(56px,8vw,96px) clamp(20px,6vw,64px);text-align:center;
}
.fz-statement-kickers{display:grid}
.fz-statement-kickers > *{grid-area:1/1}
.fz-statement-kicker{margin:0;font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--crema-ink)}
.fz-statement-kicker--fenzo{color:#E2A93B}
#fz-kicker-antes{opacity:0}
.fz-statement-num{
  margin:0;display:flex;align-items:baseline;justify-content:center;gap:.12em;
  font-size:clamp(120px,24vw,320px);font-weight:800;letter-spacing:-0.06em;line-height:.9;
  font-variant-numeric:tabular-nums;
}
.fz-statement-unit{font-size:.22em;letter-spacing:-0.02em;color:var(--crema-ink-2)}
.fz-statement-bar{width:min(560px,80vw);height:10px;background:rgba(242,236,225,.1);overflow:hidden}
.fz-statement-bar span{display:block;height:100%;width:100%;background:var(--terracota);transform-origin:left center;transform:scaleX(.222)}
.fz-statement-copy{margin:0;max-width:34em;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--crema-ink)}

/* ---- Barras de tiempo en la comparativa ---- */
.fz-time-bar{display:block;height:8px;margin-top:10px;background:rgba(35,42,53,.08);overflow:hidden}
.fz-time-bar span{display:block;height:100%;transform-origin:left center}
.fz-time-bar--manual span{width:100%;background:#9DA3AE}
.fz-time-bar--fenzo span{width:22.2%;background:var(--terracota)}

/* ---- Titulares que se iluminan palabra por palabra ---- */
.fz-w{display:inline-block;will-change:opacity}

/* ---- Letra pequeña de los tiempos estimados ---- */
.fz-ast{font-size:.45em;vertical-align:super;margin-left:.05em;color:var(--terracota)}
.fz-fineprint{margin:6px 0 0;max-width:620px;font-size:12px;line-height:1.5;color:var(--navy-ink-2)}
.fz-hero-text p.fz-fineprint{margin:2px auto 0;max-width:560px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--navy-ink-2)}
.fz-fineprint--center{margin:18px auto 0;text-align:center;padding:0 20px}
.fz-fineprint--dark{color:var(--crema-ink-3);text-align:center;margin-top:4px}
.fz-statement-pre{font-size:.45em;align-self:center;color:var(--crema-ink-2);margin-right:.04em}

/* ---- Términos y condiciones ---- */
.fz-link-btn{
  background:none;border:0;padding:0;font:inherit;color:var(--terracota);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.fz-link-btn:hover,.fz-link-btn:focus-visible{color:var(--terracota-hover)}
.fz-acceso .fz-link-btn,.fz-form-legal .fz-link-btn{color:#E2A93B}
.fz-link-btn--foot{color:var(--navy-ink)}
.fz-form-legal{margin:0;font-size:12.5px;line-height:1.55;color:var(--crema-ink-2);text-align:center}
.fz-panel .fz-terms-date{font-size:13px;color:var(--navy-ink-2);margin-top:-8px}
.fz-panel .fz-terms-aviso{
  border-left:4px solid var(--terracota);padding:14px 16px;background:rgba(210,88,46,.07);border-radius:0 10px 10px 0;
}
.fz-panel .fz-terms-aviso p{margin-bottom:10px}
.fz-terms-list{margin:0 0 10px;padding-left:18px;font-size:14px;line-height:1.55;color:var(--navy-ink)}
.fz-terms-list li{margin-bottom:6px}
.fz-panel .fz-faq-item a{color:var(--terracota)}

/* Etiquetas de las demos: mínimo 11px para que se lean en cualquier pantalla */
.fz-demo-silence-tag,.fz-demo-sub-tag,.fz-demo-social-pill,.fz-demo-doble-tag{font-size:11px !important}