/* Identidad peruana de Fenzo / QoriMotion, recuperada de la web anterior: intro con morphing y andenes,
   bloques con símbolos de culturas del Perú, líneas de Nazca, pampa, cantutas con nombre (js/plantas.js)
   y el pie de QoriMotion con la franja de marcas de Grupo Qori. Va aparte de landing.css para que se
   pueda reconocer y mantener como un bloque. Los símbolos y texturas son los de la web de QoriMotion. */
:root{
  --terracota:var(--accent);
  --navy-dark:#0D131E;
  --navy-ink:rgba(35,42,53,.72);
  --navy-ink-2:rgba(35,42,53,.55);
  --crema-ink:rgba(242,236,225,.85);
  --crema-ink-2:rgba(242,236,225,.6);
}

/* ---------- 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 var(--sans);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}
}


/* La intro arranca oculta y el script de la cabecera la muestra antes de pintar (una vez por sesión) */
html.fz-con-intro #fz-intro[hidden]{display:flex !important}
html.fz-con-intro body{overflow:hidden}
/* Hasta que GSAP prepara las letras, las palabras no se ven (si no, se pisan un instante) */
.fz-intro:not(.is-listo) .fz-intro-word{visibility:hidden}

/* ---- 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")}
.fz-blocks span[data-s="paracas"]{--sym:url("../../qorimotion/assets/simbolos/paracas.svg")}
/* Grupos repartidos por la página: el padre (sección o paso) es su referencia */
.fz-section,.fz-step--dark,.fz-final{position:relative}
.fz-section > .fz-andes,.fz-step--dark > .fz-andes,.fz-final > .fz-andes{position:absolute;top:0;left:0;right:0}
/* En secciones oscuras el bloque navy se vuelve crema para que se note */
.fz-andes--oscuro .fz-blocks span:nth-child(2),.fz-andes--oscuro .fz-blocks--tl span:nth-child(3){background:var(--crema);--sym-ink:rgba(35,42,53,.8)}
.fz-andes--oscuro .fz-blocks--tl span:nth-child(2){background:var(--terracota);--sym-ink:rgba(242,236,225,.92)}
/* Entrada de los bloques con CSS (no depende de GSAP: si algo no carga, igual quedan visibles).
   Esperan a que termine la intro y no se mueven con movimiento reducido. */
@keyframes fz-bloque{from{transform:scale(0)}to{transform:none}}
@keyframes fz-simbolo{from{opacity:0;transform:scale(.4) rotate(-90deg)}to{opacity:1;transform:none}}
.fz-blocks--tl span{transform-origin:top left}
.fz-blocks--tr span{transform-origin:top right}
.fz-blocks span{animation:fz-bloque .6s cubic-bezier(.2,.7,.2,1) both}
.fz-blocks span i{animation:fz-simbolo .5s cubic-bezier(.34,1.56,.64,1) both}
.fz-blocks span:nth-child(1){animation-delay:.15s}.fz-blocks span:nth-child(1) i{animation-delay:.45s}
.fz-blocks span:nth-child(2){animation-delay:.27s}.fz-blocks span:nth-child(2) i{animation-delay:.55s}
.fz-blocks span:nth-child(3){animation-delay:.39s}.fz-blocks span:nth-child(3) i{animation-delay:.65s}
html.fz-con-intro .fz-blocks span,html.fz-con-intro .fz-blocks span i{animation-play-state:paused}
.fz-andes:not(.is-in) .fz-blocks span,.fz-andes:not(.is-in) .fz-blocks span i{animation-play-state:paused}
.no-js .fz-blocks span,.no-js .fz-blocks span i{animation:none}
@media (prefers-reduced-motion:reduce){.fz-blocks span,.fz-blocks span i{animation:none}}

/* ---- Nazca en el hero ---- */
.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}

/* ---- Fila de confianza y origen bajo el CTA del hero ---- */
.fz-hero-nocard{margin-top:8px;font-size:14px;color:var(--navy-ink-2)}
.fz-trust-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:22px}
.fz-trust-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;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(--accent-texto);font-weight:700}
.fz-origin{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 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)}

/* ---- Pampa tenue: en el fondo crema y en las secciones oscuras ---- */
body{background-image:url("../../qorimotion/assets/textura/pampa-claro.svg");background-size:100% auto;background-repeat:repeat-y;background-position:center top}
.fz-step--dark,.fz-beta,.fz-final{background-image:url("../../qorimotion/assets/textura/pampa-oscuro.svg");background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---- Cantutas con nombre en la beta (las rotula js/plantas.js) ---- */
.fz-form-section{position:relative;overflow:hidden;--suyu-qosqo:#E2A93B;--suyu-chinchay:#E2505F;--suyu-colla:#A874DB;--suyu-conti:#4C9BE8;--suyu-anti:#66BB6A}
.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)}
.fz-form-section .qp-label{color:var(--crema)}
@media (max-width:640px){.fz-cantuta{width:96px;height:96px}}

/* ---- Pie de QoriMotion (el mismo de la web de la marca) ---- */
.fz-foot{background:#EBE4D8;border-top:1px solid rgba(35,42,53,.12);padding:56px clamp(20px,6vw,64px) 0;font-size:13.5px;color:var(--navy-ink)}
.fz-foot a{text-decoration:none}
.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-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:700;letter-spacing:-.015em}
.fz-foot-title{margin:0 0 12px;font-size:13px;font-weight:700;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,.fz-foot-bottom a:hover,.fz-foot-bottom .fz-linkbtn: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}
.fz-foot-bottom a,.fz-foot-bottom .fz-linkbtn{color:var(--navy-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:768px){.fz-foot-grid{grid-template-columns:1fr 1fr}.fz-foot-brand-col{grid-column:1/-1}}

/* ---- Franja base: todas las marcas de Grupo Qori (misma que el sitio corporativo) ---- */
.qc-marcas-base{background:#242424;padding:34px 0 40px;margin:36px calc(-1 * clamp(20px,6vw,64px)) 0}
.qc-marcas-base-inner{max-width:1240px;margin:0 auto;padding:26px clamp(20px,4vw,40px) 0;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px 40px}
.qc-marcas-base a{display:inline-flex;align-items:center;gap:10px;color:#BDBDBD;font:700 19px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;opacity:.62;transition:opacity .3s ease}
.qc-marcas-base img{height:54px;width:auto;filter:brightness(0) invert(.78);transition:filter .3s ease,transform .3s ease}
.qc-marcas-base a:hover,.qc-marcas-base a:focus-visible{opacity:1}
.qc-marcas-base a:hover img,.qc-marcas-base a:focus-visible img{filter:none;transform:translateY(-2px)}
.qc-marcas-base a:focus-visible{outline:2px solid #E2A93B;outline-offset:6px}
.qc-marcas-base .qc-marcas-base-producto img{height:34px}
@media (max-width:719px){.qc-marcas-base-inner{justify-content:center;gap:22px 30px}.qc-marcas-base img{height:42px}.qc-marcas-base .qc-marcas-base-producto img{height:28px}}

/* Grupos que cruzan la división entre secciones: la mitad sube a la sección de arriba (andén escalonado
   simétrico respecto del borde), así el motivo se lee como uno solo y no delata dónde empieza la sección. */
.fz-blocks--puente{height:calc(var(--b)*2)}
.fz-blocks--puente.fz-blocks--tl span:nth-child(4){top:calc(var(--b)*-1);left:0;background:var(--navy)}
.fz-blocks--puente.fz-blocks--tl span:nth-child(5){top:calc(var(--b)*-1);left:var(--b);background:#C68A1B;--sym-ink:rgba(43,26,4,.72)}
.fz-blocks--puente.fz-blocks--tl span:nth-child(6){top:calc(var(--b)*-2);left:0;background:var(--terracota)}
.fz-blocks--puente.fz-blocks--tr span:nth-child(4){top:calc(var(--b)*-1);right:0;background:var(--navy)}
.fz-blocks--puente.fz-blocks--tr span:nth-child(5){top:calc(var(--b)*-1);right:var(--b);background:#C68A1B;--sym-ink:rgba(43,26,4,.72)}
.fz-blocks--puente.fz-blocks--tr span:nth-child(6){top:calc(var(--b)*-2);right:0;background:var(--terracota)}
.fz-blocks--puente span:nth-child(4){animation-delay:.03s}.fz-blocks--puente span:nth-child(4) i{animation-delay:.35s}
.fz-blocks--puente span:nth-child(5){animation-delay:.09s}.fz-blocks--puente span:nth-child(5) i{animation-delay:.4s}
.fz-blocks--puente span:nth-child(6){animation-delay:0s}.fz-blocks--puente span:nth-child(6) i{animation-delay:.3s}
.fz-blocks--puente.fz-blocks--tl span:nth-child(n+4){transform-origin:bottom left}
.fz-blocks--puente.fz-blocks--tr span:nth-child(n+4){transform-origin:bottom right}