/* =============================================================
   Pakto — PROPUESTA VISUAL "papel en movimiento"
   Se carga DESPUES de ../css/pakto.css y solo agrega: misma marca,
   mismos textos, mismas fotos. Todo el movimiento se apaga con
   prefers-reduced-motion.
   ============================================================= */
:root{
  --arco-1:#83ae38;--arco-2:#a6be30;   /* verdes del manual de marca */
  --suave:cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------- barra de avance */
.avance{position:fixed;inset:0 0 auto 0;height:4px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--arco-1),var(--arco-2));transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ------------------------------------------------------- cabecera */
.header{transition:box-shadow .3s,background .3s}
.header.is-baja{box-shadow:0 10px 30px rgba(20,25,20,.12)}
.header__logo img{transition:width .3s var(--suave)}
.header.is-baja .header__logo img{width:124px}
.nav a,.has-menu__btn{position:relative}
.nav > li > a::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;border-radius:2px;
  background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--suave)}
.nav > li > a:hover::after{transform:scaleX(1)}

/* ----------------------------------------------------------- hero */
.hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h));overflow:hidden}
.hero__inner{flex:1;display:flex;align-items:center;width:min(100% - 2.5rem, var(--container))}
.hero__col{max-width:940px}
.hero h1{text-wrap:wrap}
.hero__lead{font-size:clamp(1.05rem,.98rem + .45vw,1.3rem)}
.hero__slides{transform:translate3d(0,calc(var(--sy,0) * .22px),0);will-change:transform}
.hero__slide.is-active img{animation:acerca 9s var(--suave) both}
@keyframes acerca{from{transform:scale(1.14)}to{transform:scale(1)}}

/* el titulo sube palabra por palabra */
.pal{display:inline-block;overflow:hidden;vertical-align:top;position:relative;padding:.1em 0 .22em;margin:-.1em 0 -.22em}
.pal > span{display:inline-block;transform:translateY(118%);animation:sube .95s var(--suave) forwards;animation-delay:calc(var(--i) * 85ms + 120ms)}
@keyframes sube{to{transform:none}}
/* el arco del logo, trazado bajo "antigrasa" */
.pal--arco::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop stop-color='%2383ae38'/%3E%3Cstop offset='1' stop-color='%23a6be30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 5 Q150 32 295 4' fill='none' stroke='url(%23g)' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);animation:traza .9s var(--suave) 1s forwards}
@keyframes traza{to{clip-path:inset(0)}}

.hero .eyebrow,.hero__lead,.hero__actions,.hero .trustbar{animation:entra .9s var(--suave) both}
.hero .eyebrow{animation-delay:.05s}
.hero__lead{animation-delay:.75s}
.hero__actions{animation-delay:.9s}
.hero .trustbar{animation-delay:1.05s}
@keyframes entra{from{opacity:0;transform:translateY(22px)}}

.hero__ribbon strong{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.7rem);letter-spacing:-.03em}
.hero__ribbon li:nth-child(3) strong{color:#b9e07c}
.hero__ribbon ul{padding:1.4rem 0}

/* -------------------------------------------- botones con brillo */
.btn--primary,.header__cta{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,.header__cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s var(--suave)}
.btn--primary:hover::after,.header__cta:hover::after{transform:translateX(120%)}
.iman{transition:transform .25s var(--suave)}

/* ----------------------------------------- entradas al hacer scroll */
.mov .rv{opacity:0;translate:0 34px;transition:opacity .8s var(--suave),translate .8s var(--suave);transition-delay:0s}
.mov .rv--zoom{translate:0 0;scale:.92;transition:opacity .8s var(--suave),scale .8s var(--suave);transition-delay:0s}
.mov .rv.in{opacity:1;translate:0 0;scale:1}

/* titulos de seccion: mas grandes y con el trazo verde */
.section{position:relative;overflow:hidden}
.section > .container{position:relative;z-index:1}
.section__head h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);letter-spacing:-.035em;line-height:1.08}
.section__head h2::after{content:"";display:block;width:72px;height:6px;border-radius:6px;margin-top:.5em;
  background:linear-gradient(90deg,var(--arco-1),var(--arco-2));transform-origin:0 50%;transition:transform .9s var(--suave) .25s}
.section__head--center{max-width:900px}
.section__head--center h2{text-align:center}
.section__head--center p:not(.eyebrow){max-width:62ch;margin-inline:auto}
.section__head--center h2::after{margin-inline:auto;transform-origin:50% 50%}
.mov .section__head h2.rv:not(.in)::after{transform:scaleX(0)}

/* numero gigante de cada producto, que se desliza con el scroll */
.section[data-num]::before{content:attr(data-num);position:absolute;right:max(1rem,4vw);top:.4rem;z-index:0;pointer-events:none;
  font-size:clamp(6.5rem,17vw,17rem);font-weight:800;line-height:1;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:2px rgba(131,174,56,.5);transform:translate3d(0,calc(var(--py,0) * 1px),0)}

/* ------------------------------------------------- catalogo */
.cat-card{transition:transform .35s var(--suave),box-shadow .35s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.cat-card:hover{box-shadow:0 22px 48px rgba(20,25,20,.2);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px)}
.cat-card img{transition:transform .7s var(--suave)}
.cat-card:hover img{transform:scale(1.08)}
.cat-card__more{transition:gap .3s var(--suave)}
.cat-card:hover .cat-card__more{gap:.8rem}

/* ----------------------------------- por que Pakto: seccion oscura */
#por-que-pakto{background:radial-gradient(90% 70% at 85% 0%,rgba(131,174,56,.18),transparent 60%),#141815;border-color:#141815}
#por-que-pakto h2,#por-que-pakto h3{color:#fff}
#por-que-pakto .section__head p,#por-que-pakto .feature p{color:#c7cec9}
#por-que-pakto .eyebrow{background:rgba(127,181,58,.16);border-color:rgba(127,181,58,.3);color:#a9d572}
#por-que-pakto .feature{position:relative;overflow:hidden;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:none;
  transition:transform .35s var(--suave),border-color .35s}
#por-que-pakto .feature:hover{transform:translateY(-6px);border-color:rgba(166,190,48,.55)}
#por-que-pakto .feature::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(166,190,48,.22),transparent 70%)}
#por-que-pakto .feature:hover::before{opacity:1}
#por-que-pakto .feature__icon{background:rgba(127,181,58,.16);color:#b9e07c;transition:transform .5s var(--suave)}
#por-que-pakto .feature:hover .feature__icon{transform:rotate(-8deg) scale(1.12)}

/* --------------------------------------------- fotos y fichas */
.tile{overflow:hidden}
.tile img{transition:transform .7s var(--suave)}
.tile:hover img{transform:scale(1.07)}
.spec-card{transition:transform .3s var(--suave),box-shadow .3s}
.spec-card:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
.ventaja{transition:box-shadow .3s,border-color .3s}
.ventaja:hover{border-color:var(--green);box-shadow:var(--shadow-md)}
.box-card{transition:transform .35s var(--suave),box-shadow .35s}
.box-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}

/* --------------------------------- como cotizar: la linea se traza */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:-2px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--arco-1),var(--arco-2));transform-origin:0 50%;transform:scaleX(var(--lin,0))}
.steps li{transition:transform .35s var(--suave)}
.steps li:hover{transform:translateY(-6px)}

/* ----------------------------------------------------- flotante */
.fab::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25d366;animation:pulso 2.6s ease-out infinite;pointer-events:none}
.fab{transition:transform .16s,opacity .3s}
.fab.is-espera{opacity:0;pointer-events:none}
@keyframes pulso{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}

/* Computador: la primera vista muestra el hero completo, con la franja de
   cifras entera, tambien en pantallas bajas (portatiles). */
@media (min-width:701px){
  .hero{min-height:0;height:calc(100svh - var(--header-h))}
  .hero__inner{padding-block:clamp(1rem,3.2vh,4.5rem)}
}
@media (min-width:701px) and (max-height:820px){
  .hero__ribbon ul{padding:.8rem 0}
  .hero__ribbon strong{font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem)}
  .hero h1{margin-bottom:.35em}
  .hero__actions{margin:1.1rem 0 1rem}
}
@media (min-width:701px) and (max-height:700px){
  .hero__lead{font-size:1rem;line-height:1.55}
  .hero .eyebrow{margin-bottom:.6rem}
  .hero__actions{margin:.8rem 0 .7rem}
  .hero__ribbon span{font-size:.78rem}
}
@media (min-width:701px) and (max-height:640px){
  .hero__inner{padding-block:.6rem}
  .hero h1{font-size:clamp(1.8rem,1.2rem + 1.9vw,2.5rem)}
  .hero__lead{font-size:.95rem}
  .hero__ribbon ul{padding:.55rem 0}
}
@media (max-width:700px){
  .hero{min-height:0}
  .hero__inner{display:block}
  .section[data-num]::before{top:.2rem;right:.6rem;-webkit-text-stroke-width:1.5px}
  .steps::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .pal > span{transform:none}
  .pal--arco::after{clip-path:none}
  .hero__slides,.section[data-num]::before{transform:none !important}
  .mov .rv{opacity:1;translate:none;scale:none}
  .steps::before{transform:none}
  /* las fotos del hero siguen cambiando, pero solo con un fundido suave */
  .hero__slide{transition:opacity 1.2s ease !important}
}