:root{
  --navy:#03071E;
  --navy-2:#060C2E;
  --amber:#FFBA08;
  --orange:#E85D04;
  --bright:#FFFFFF;
  --dim:#A3A9C2;
  --line:rgba(255,186,8,.5);
  /* ancho del contenedor en TODA la página, fijado por René */
  --wrap:1344px;
  --display:"Anton",Impact,sans-serif;
  --sans:"Work Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
/* el body va blanco: es lo que asoma por el corte en zigzag del hero */
body{
  margin:0;background:#fff;color:var(--bright);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--navy);padding:.7rem 1rem;z-index:200}
.skip:focus{left:0}

/* ---------- navbar ---------- */
.nav{position:absolute;top:0;left:0;width:100%;z-index:60;padding:1.5rem 0}
.nav__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem);
  display:flex;align-items:center;gap:2rem;
  border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:1.4rem;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--orange)}
.brand__mark{width:auto;height:40px;flex:none;object-fit:contain}
.brand__mark--foot{height:140px}
.brand--foot{justify-content:center}
.foot__brand{text-align:center}
.brand__text{
  display:flex;flex-direction:column;line-height:1;
  font-family:var(--display);font-size:1.5rem;letter-spacing:.03em;color:var(--bright);
}
.brand__text small{
  font-family:var(--sans);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-top:.35rem;font-weight:500;
}
.nav__links{display:none;gap:2.5rem;margin:0 auto;font-family:var(--display);font-size:1.1rem;letter-spacing:.06em}
.nav__links a{text-decoration:none;color:var(--bright);transition:color .2s}
.nav__links a:hover,.nav__links .is-active{color:var(--orange)}
.nav__inner .nav__cta{display:none}

/* botones con esquina cortada */
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--display);font-size:1.08rem;letter-spacing:.05em;
  padding:1.25rem 2.1rem;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 58%,calc(100% - 24px) 100%,0 100%);
  transition:filter .2s,transform .2s;
}
.btn svg{width:25px;height:25px;flex:none}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange:hover{filter:brightness(1.12);transform:translateY(-2px)}

.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;background:none;border:0;cursor:pointer;padding:0;margin-left:auto}
.burger span{display:block;height:2px;background:var(--bright);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  display:flex;flex-direction:column;
  margin-top:1rem;padding:.5rem clamp(1.2rem,4vw,3.5rem) 1.2rem;
  background:var(--navy-2);animation:drop .25s ease;
}
.drawer[hidden]{display:none}
.drawer a{padding:.85rem 0;text-decoration:none;color:#C7CCDE;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--display);letter-spacing:.06em}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{
  /* sin 100svh: en pantallas altas el hero se estiraba y dejaba huecos enormes
     arriba y abajo. El padding superior solo debe librar el navbar absoluto */
  position:relative;min-height:660px;
  padding:clamp(8rem,13.5vh,9.5rem) 0 clamp(3rem,5.5vh,4.5rem);
  display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(1200px 700px at 72% 45%,rgba(232,93,4,.16),transparent 62%),var(--navy);
  /* borde inferior en zigzag, como el demo: asoma el blanco del body */
  clip-path:polygon(
    0 0, 100% 0,
    100% calc(100% - 58px),
    64% 100%,
    31% calc(100% - 48px),
    0 calc(100% - 40px)
  );
}
.hero__diagonal{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 0 30%,rgba(255,255,255,.028) 30% 63%,transparent 63%);
}

.blueprint{
  position:absolute;z-index:1;pointer-events:none;color:var(--line);
  right:-6%;top:44%;transform:translateY(-50%);
  width:min(680px,80vw);height:auto;opacity:.26;
  animation:bpSpin 190s linear infinite;
}
@keyframes bpSpin{to{transform:translateY(-50%) rotate(360deg)}}
.bp__draw{
  stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);
  animation:bpDraw 2.6s ease-out forwards;
}
@keyframes bpDraw{to{stroke-dashoffset:0}}

.sparks{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}

.hero__grid{
  position:relative;z-index:5;width:100%;
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:start;
}

/* headline */
.hero__head{position:relative;padding-left:1.6rem}
.hero__head::before{
  content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:5px;background:var(--orange);
}
.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,7.2vw,6.2rem);
  line-height:.94;letter-spacing:-.006em;margin:0;color:var(--bright);
}
.hero__title em{font-style:normal;color:var(--amber)}
/* la última línea va chica y en un solo renglón, para que las tres de arriba
   pesen y la imagen pueda montarse encima */
.t-sm{
  display:block;margin-top:.5rem;
  /* .543em: medido para que "MANUFACTURA PARA MINERÍA" termine justo bajo la
     O de MANTENIMIENTO */
  font-size:.543em;line-height:1.05;letter-spacing:.005em;color:var(--bright);
  text-transform:uppercase;
}

/* tarjeta ámbar con esquina cortada */
.card{
  background:var(--amber);color:var(--navy);
  padding:2.1rem 2rem 1.9rem;
  clip-path:polygon(0 0,calc(100% - 50px) 0,100% 50px,100% 100%,0 100%);
}
.card__kicker{margin:0 0 .9rem;font-family:var(--display);font-size:1.75rem;letter-spacing:.02em;line-height:1.05}
.card__text{margin:0 0 1.4rem;font-size:1.1rem;font-weight:400;line-height:1.5}
.card__link{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--display);font-size:1.02rem;letter-spacing:.06em;
}
.card__link svg{width:24px;height:24px}

/* arte: bloque ámbar cortado + máquina grande encima */
.hero__art{position:relative;display:flex;align-items:flex-end;justify-content:center}
.artblock{
  position:absolute;left:0;right:0;bottom:0;height:72%;
  background:var(--amber);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%);
}
.hero__art img{
  position:relative;z-index:2;
  width:auto;max-width:none;
  height:clamp(250px,38vh,455px);object-fit:contain;
  margin-left:-7%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.62));
  animation:float 11s ease-in-out infinite;will-change:transform;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

/* columna derecha */
/* sin max-width: el párrafo debe usar todo el ancho de su columna, no cortarse
   antes y dejar margen muerto a la derecha */
.lede{
  margin:0 0 2.2rem;color:#D2D7E8;
  font-size:clamp(1.12rem,1.6vw,1.4rem);font-weight:400;line-height:1.55;
}
.cta{display:flex;align-items:center;gap:2.4rem;margin-bottom:3.55rem;flex-wrap:wrap}
.dial{
  position:relative;
  width:66px;height:66px;flex:none;border-radius:50%;
  background:var(--amber);color:var(--navy);
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 0 0 7px rgba(255,186,8,.16);
  transition:transform .2s,box-shadow .2s;
}
.dial svg{width:26px;height:26px;position:relative;z-index:2}
.dial:hover{transform:scale(1.06);box-shadow:0 0 0 11px rgba(255,186,8,.2)}
/* pulso: dos anillos desfasados que se expanden y desvanecen */
.dial::before,.dial::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--amber);
  animation:pulse 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.dial::after{animation-delay:1.2s}
@keyframes pulse{
  0%{transform:scale(1);opacity:.75}
  100%{transform:scale(1.85);opacity:0}
}

/* los tres bloques se reparten todo el ancho de la columna: si se agrupan a la
   izquierda queda un hueco muerto a la derecha */
.stats{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:1rem;margin:0;width:100%}
.stats > div{
  flex:1;padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.18);
  white-space:nowrap;text-align:center;
}
.stats > div:first-child{padding-left:0;border-left:0}
.stats dt{display:flex;align-items:flex-start;justify-content:center;gap:.28rem;font-family:var(--display);line-height:1}
/* calcado de Aspro: etiquetas Anton a 20px, número ~2.7x la etiqueta */
.stats dt span{font-size:clamp(3.4rem,5.4vw,4.6rem);color:var(--bright)}
/* el glifo "+" ocupa poco de su caja em, así que necesita un font-size
   desproporcionado para verse del grosor que tiene en el original */
.stats dt i{font-style:normal;font-size:3.1rem;line-height:.9;color:var(--orange)}
.stats dd{margin:.6rem 0 0;font-family:var(--display);font-size:1.25rem;letter-spacing:.03em;color:var(--bright)}

/* ---------- sección "por qué CHELDAM" (fondo blanco) ---------- */
.why{background:#fff;color:#111;padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,8vw,6.5rem)}
.why__inner{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem);display:grid;gap:clamp(2rem,4vw,3.2rem)}

.why__head{display:grid;gap:2rem;align-items:start}
.why__title{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(2rem,4.2vw,3.75rem);line-height:1.2;letter-spacing:-.004em;color:#111;
}
.why__title em{font-style:normal;color:var(--amber)}
/* cada span es una línea: sin esto "CHELDAM" se caía sola a un cuarto renglón */
.why__title span{display:block;white-space:nowrap}
.why__intro p{margin:0 0 1.6rem;color:#3F4453;font-size:1.125rem;font-weight:400;line-height:1.6;max-width:50ch}
.linkarrow{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:#111;
  font-family:var(--display);font-size:1.125rem;letter-spacing:.05em;
}
.linkarrow svg{width:24px;height:24px;color:var(--orange)}
.linkarrow:hover{color:var(--orange)}

.why__grid{display:grid;gap:clamp(1.4rem,2.5vw,2rem)}

/* clip-path recorta también el box-shadow, por eso la sombra va con
   filter: drop-shadow, que sí sigue la silueta recortada */
.promise,.video__tag,.sectors{filter:drop-shadow(0 18px 34px rgba(3,7,30,.22))}
.video{filter:drop-shadow(0 18px 34px rgba(3,7,30,.28))}

.promise{
  background:var(--amber);color:var(--navy);
  padding:clamp(1.6rem,3vw,2.3rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 54px),calc(100% - 54px) 100%,0 100%);
}
.promise__quote{margin:0 0 1.8rem;font-size:1.25rem;line-height:1.5;font-weight:600}
.promise__list{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.promise__list li{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--display);font-size:1.5rem;line-height:1.5;letter-spacing:.03em;
}
.promise__list li::before{
  content:"";flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--navy);
  background:
    linear-gradient(45deg,transparent 46%,var(--navy) 46% 54%,transparent 54%) no-repeat 6px 2px/6px 10px,
    linear-gradient(-45deg,transparent 46%,var(--navy) 46% 54%,transparent 54%) no-repeat 9px 0/10px 14px;
}

.video{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-2);
}
.video video{width:100%;height:100%;object-fit:cover;display:block}
.video__play{
  position:absolute;top:0;left:0;width:74px;height:74px;
  background:var(--navy);color:var(--orange);border:0;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.video__play svg{width:26px;height:26px;grid-area:1/1}
.video__play svg[hidden]{display:none}
.video__play:hover{background:var(--orange);color:#fff}
.video__tag{
  position:absolute;right:0;bottom:0;margin:0;
  background:var(--amber);color:var(--navy);
  padding:1.1rem 1.4rem;
  font-family:var(--display);font-size:2.25rem;line-height:1.2;letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
}
.video__tag span{font-size:.72rem;letter-spacing:.12em;opacity:.75}

.sectors{
  background:var(--navy);color:#fff;
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.5rem,3vw,2.4rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%);
  display:grid;gap:1.4rem;align-items:center;
}
.sectors__title{
  margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.9vw,2.25rem);
  line-height:1.08;letter-spacing:.02em;white-space:nowrap;
  border-right:3px solid var(--orange);padding-right:2.2rem;
}
.sectors__title em{font-style:normal;color:var(--amber)}

/* marquesina infinita: la lista va duplicada por JS y el track se desplaza
   -50%, así el bucle no tiene salto */
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
}
.marquee__track{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:3.2rem;width:max-content;
  animation:scrollX 32s linear infinite;
}
@media (hover:hover){.marquee:hover .marquee__track{animation-play-state:paused}}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee__track li{
  display:flex;align-items:center;gap:.85rem;flex:none;
  font-family:var(--display);font-size:1.5rem;letter-spacing:.03em;color:#fff;
}
.marquee__track svg{width:34px;height:34px;flex:none;color:var(--orange)}

/* ---------- servicios (calcado de las price cards de Aspro, sin precio) ---------- */
.services{position:relative;background:#F3F4F6;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(4rem,9vw,7rem);overflow:hidden}
.services__diag{
  position:absolute;top:0;left:0;width:100%;height:110px;z-index:0;pointer-events:none;
  background:#fff;
  clip-path:polygon(0 0,100% 0,100% 20%,0 100%);
}
.services__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem)}

.services__head{text-align:center;max-width:860px;margin:0 auto clamp(2.4rem,5vw,3.4rem)}
/* 60px en desktop: valor medido en el demo de referencia */
.services__title{
  font-family:var(--display);font-weight:400;margin:0 0 1.1rem;color:#111;
  font-size:clamp(2rem,4.4vw,3.75rem);line-height:1.08;letter-spacing:-.006em;
}
.services__title em{font-style:normal;color:var(--orange)}
.services__sub{margin:0 auto;max-width:640px;color:#5A5F6E;font-size:1.125rem;line-height:1.55}

.services__grid{display:grid;gap:1.6rem}

.scard{
  position:relative;background:#DCDEE5;padding:1.7rem 1.7rem 25px;
  display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
  filter:drop-shadow(0 18px 34px rgba(3,7,30,.07));
}
/* fila superior: etiqueta chica a la izquierda, numero grande a la derecha —
   ocupa el lugar que en la referencia tienen las estrellas y el precio */
.scard__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.1rem;border-bottom:1px solid rgba(3,7,30,.11);
}
.scard__kicker{
  margin:0;font-family:var(--display);font-size:.78rem;
  letter-spacing:.14em;color:var(--orange);
}
.scard__num{
  margin:0;font-family:var(--display);font-size:2.4rem;line-height:.8;
  color:#111;letter-spacing:-.02em;
}
.scard__title{
  margin:0 0 .7rem;font-family:var(--display);font-weight:400;
  font-size:1.5rem;line-height:1.12;color:#111;
  text-transform:uppercase;letter-spacing:.005em;
}
.scard__text{margin:0 0 1.5rem;color:#4A4F5E;font-size:.98rem;line-height:1.55;min-height:5.4em}
.scard__cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--amber);color:#111;text-decoration:none;
  font-family:var(--display);font-size:.92rem;letter-spacing:.04em;
  padding:1rem 1.5rem;margin-bottom:1.6rem;
  clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 18px) 100%,0 100%);
  transition:background .2s,color .2s;
}
.scard__cta svg{width:20px;height:20px}
.scard__cta:hover{background:var(--orange);color:#fff}
/* la pieza flota sobre el gris de la tarjeta: sin caja, sin recorte al borde */
.scard__media{
  margin:auto -1.7rem 0;height:230px;
  display:flex;align-items:flex-end;justify-content:center;
}
.scard__media img{
  max-height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(3,7,30,.22));
}

.services__more{text-align:center;margin:clamp(2rem,4vw,2.8rem) 0 0;color:#4A4F5E;font-size:1rem}
.services__more a{color:var(--orange);text-decoration:none;font-weight:600}
.services__more a:hover{text-decoration:underline}

/* ---------- nosotros ---------- */
.about{position:relative;background:var(--navy);overflow:hidden;
  padding:clamp(7rem,14vw,11rem) 0 clamp(4rem,9vw,7rem)}
/* el pico claro de arriba: es la seccion anterior asomandose */
.about__notch{
  position:absolute;top:0;left:0;width:100%;height:clamp(60px,9vw,130px);z-index:0;
  pointer-events:none;background:#F3F4F6;
  clip-path:polygon(0 0,100% 0,100% 42%,70% 100%,0 26%);
}
.about__inner{
  position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3.5rem);
  display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center;
}

.about__media{position:relative;padding-top:2.5rem}
/* PLACEHOLDER de foto: bloque ambar con la esquina superior derecha cortada.
   Sustituir el .ph por <img> cuando llegue la foto real del taller */
.ph{
  position:relative;aspect-ratio:1/1;
  background:linear-gradient(150deg,#FFBA08 0%,#F0A505 55%,#E08C04 100%);
  clip-path:polygon(0 0,82% 0,100% 17%,100% 100%,0 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph__gear{
  position:absolute;right:-6%;bottom:-14%;width:62%;height:auto;
  color:rgba(3,7,30,.11);
}
.ph__label{
  position:absolute;z-index:1;right:1.5rem;bottom:1.3rem;
  display:flex;flex-direction:column;gap:.3rem;
  font-family:var(--display);font-size:1rem;letter-spacing:.16em;
  color:rgba(3,7,30,.5);text-align:right;
}
.ph__label i{font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em}

.about__card{
  position:relative;background:var(--orange);color:#fff;
  padding:1.7rem 1.6rem 1.5rem;margin:-3.5rem 0 0 1.2rem;width:min(320px,86%);
}
.about__card-title{
  margin:0 0 .7rem;font-family:var(--display);font-weight:400;
  font-size:1.35rem;line-height:1.15;letter-spacing:.01em;
}
.about__card p{margin:0 0 1.1rem;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.9)}
.about__card .linkarrow{color:#fff}
.about__card .linkarrow svg{color:#fff}
.about__card .linkarrow:hover{color:var(--amber)}
.about__card .linkarrow:hover svg{color:var(--amber)}

.about__body{position:relative;padding-left:clamp(1.2rem,2vw,1.8rem)}
.about__title{
  margin:0 0 1.6rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.08;
  letter-spacing:-.006em;color:var(--bright);text-transform:uppercase;
}
.about__title::before{
  content:"";position:absolute;left:calc(-1 * clamp(1.2rem,2vw,1.8rem));
  top:.06em;bottom:.06em;width:5px;background:var(--orange);
}
.about__title em{font-style:normal;color:var(--amber)}
/* renglones forzados: evita que queden articulos sueltos al final de linea */
.about__title > span{display:block}
.about__body p{margin:0 0 1.1rem;color:var(--dim);font-size:1.06rem;line-height:1.72;max-width:56ch}
.about__cta{
  margin-top:1rem;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% 58%,calc(100% - 22px) 100%,0 100%);
  padding:1.15rem 1.9rem;
}

/* ---------- testimonios ---------- */
.quotes{position:relative;background:#F3F4F6;overflow:hidden;
  padding:clamp(4rem,9vw,7rem) 0 clamp(4rem,9vw,7rem)}
/* el navy de la seccion anterior asoma en diagonal */
.quotes__diag{
  position:absolute;top:0;left:0;width:100%;height:clamp(50px,7vw,110px);z-index:0;
  pointer-events:none;background:var(--navy);
  clip-path:polygon(0 0,100% 0,100% 12%,0 100%);
}
.quotes__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3.5rem)}
.quotes__head{margin:0 0 clamp(2.2rem,5vw,3.2rem)}
.quotes__kicker{
  margin:0 0 .7rem;font-family:var(--display);font-size:.85rem;
  letter-spacing:.16em;color:var(--orange);
}
.quotes__title{
  margin:0;font-family:var(--display);font-weight:400;color:#111;
  font-size:clamp(1.9rem,3.9vw,3.4rem);line-height:1.08;letter-spacing:-.006em;
}
.quotes__title em{font-style:normal;color:var(--orange)}
.quotes__grid{display:grid;gap:1.6rem}
.quote{
  position:relative;margin:0;background:#fff;padding:2.6rem 1.9rem 1.9rem;
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);
  filter:drop-shadow(0 16px 30px rgba(3,7,30,.08));
}
.quote__mark{
  position:absolute;top:.35rem;left:1.7rem;
  font-family:var(--display);font-size:4.6rem;line-height:1;color:var(--amber);
}
.quote blockquote{margin:0 0 1.4rem;color:#2C3140;font-size:1.06rem;line-height:1.6}
.logos-marquee{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;position:relative;margin-top:clamp(2.5rem,6vw,4rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logos-marquee__track{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:clamp(2.4rem,5vw,4.5rem);width:max-content;animation:scrollX 36s linear infinite;
}
@media (hover:hover){.logos-marquee:hover .logos-marquee__track{animation-play-state:paused}}
.logos-marquee__track li{
  flex:none;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(3,7,30,.08);border-radius:15px;
  padding:.85rem 1.6rem;box-shadow:0 2px 10px rgba(3,7,30,.06);
}
.logos-marquee__track img{height:clamp(56px,7vw,84px);width:auto;object-fit:contain}

.quote figcaption{
  display:flex;flex-direction:column;gap:.25rem;padding-top:1.1rem;
  border-top:1px solid rgba(3,7,30,.1);
  font-family:var(--display);font-size:1.02rem;letter-spacing:.03em;color:#111;
}
.quote figcaption i{
  font-style:normal;font-family:var(--sans);font-size:.82rem;
  letter-spacing:.04em;color:#6B7183;font-weight:400;
}

/* ---------- contacto ---------- */
.contact{position:relative;background:var(--navy);overflow:hidden;
  padding:clamp(4.5rem,9vw,7rem) 0 clamp(4rem,8vw,6rem)}
.contact__diag{
  position:absolute;top:0;left:0;width:100%;height:clamp(50px,7vw,110px);z-index:0;
  pointer-events:none;background:#F3F4F6;
  clip-path:polygon(0 0,100% 0,100% 18%,0 100%);
}
.contact__inner{
  position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3.5rem);
  display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start;
}
.contact__kicker{
  margin:0 0 .7rem;font-family:var(--display);font-size:.85rem;
  letter-spacing:.16em;color:var(--amber);
}
.contact__title{
  margin:0 0 1.2rem;font-family:var(--display);font-weight:400;color:var(--bright);
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.006em;
}
.contact__title em{font-style:normal;color:var(--orange)}
.contact__lede{margin:0 0 2rem;color:var(--dim);font-size:1.06rem;line-height:1.65;max-width:46ch}

.contact__list{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;gap:1.3rem}
.contact__list li{display:flex;gap:1rem;align-items:flex-start}
.contact__list svg{width:26px;height:26px;flex:none;color:var(--amber);margin-top:.15rem}
.contact__list span{display:flex;flex-direction:column;gap:.2rem;color:#C7CCDE;font-size:.98rem;line-height:1.5}
.contact__list b{font-family:var(--display);font-weight:400;font-size:.85rem;letter-spacing:.14em;color:var(--orange)}
.contact__list a{color:#E8EAF3;text-decoration:none}
.contact__list a:hover{color:var(--amber)}

.contact__map{
  border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);
}
.contact__map iframe{display:block;width:100%;height:260px;border:0;filter:grayscale(.35) contrast(1.05)}

.contact__form{
  background:var(--navy-2);border:1px solid rgba(255,255,255,.09);
  padding:clamp(1.6rem,3vw,2.4rem);
  clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%);
  display:grid;gap:1.1rem;
}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{
  font-family:var(--display);font-weight:400;font-size:.8rem;
  letter-spacing:.13em;color:var(--dim);
}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--bright);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  padding:.85rem .9rem;border-radius:0;width:100%;
  transition:border-color .18s,background .18s;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--amber);background:rgba(255,255,255,.07);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:var(--navy-2);color:var(--bright)}
/* honeypot: fuera de pantalla, no display:none — algunos bots ignoran lo oculto */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn--amber{background:var(--amber);color:var(--navy);justify-content:center}
.btn--amber:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn--whatsapp{background:#25D366;color:#04331d;justify-content:center;width:100%;margin-top:.9rem}
.btn--whatsapp:hover{filter:brightness(1.08);transform:translateY(-2px)}
.contact__note{margin:0;color:#8189A6;font-size:.85rem;line-height:1.5}

/* ---------- footer ---------- */
.foot{background:var(--navy-2);color:#C7CCDE;padding:clamp(3rem,6vw,4.5rem) 0 0}
.foot__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem);
  display:grid;gap:2.6rem;
}
.foot__brand p{margin:1.2rem auto 0;font-size:.95rem;line-height:1.65;color:#9AA1BC;max-width:42ch}
.foot .brand{color:var(--orange)}
.foot__h{
  margin:0 0 1.1rem;font-family:var(--display);font-weight:400;font-size:.9rem;
  letter-spacing:.16em;color:var(--amber);
}
.foot__nav,.foot__contact{display:flex;flex-direction:column;gap:.6rem}
.foot__nav a,.foot__contact a{
  color:#C7CCDE;text-decoration:none;font-size:.95rem;transition:color .18s;
}
.foot__nav a:hover,.foot__contact a:hover{color:var(--amber)}
.foot__contact p{margin:.6rem 0 0;font-size:.95rem;line-height:1.6;color:#9AA1BC}
.foot__bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.4rem clamp(1.2rem,4vw,3.5rem);
}
.foot__bar p{margin:0;font-size:.85rem;color:#7E86A4}
.foot__by{color:var(--amber) !important;font-family:var(--display);letter-spacing:.06em}

/* entrada al hacer scroll */
.js .services__head,.js .scard{opacity:0}
.in.services__head{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both}
.in.scard{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both}
.in.scard:nth-child(2){animation-delay:.10s}
.in.scard:nth-child(3){animation-delay:.20s}
.in.scard:nth-child(4){animation-delay:.30s}
.in.scard:nth-child(5){animation-delay:.40s}
.in.scard:nth-child(6){animation-delay:.50s}

.js .about__media,.js .about__body,
.js .quotes__head,.js .quote,.js .contact__aside,.js .contact__form{opacity:0}
.in.quotes__head{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both}
.in.quote{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both}
.in.quote:nth-child(2){animation-delay:.12s}
.in.quote:nth-child(3){animation-delay:.24s}
.in.contact__aside{animation:riseIn .85s cubic-bezier(.22,.61,.36,1) both}
.in.contact__form{animation:fromRight .85s cubic-bezier(.22,.61,.36,1) .15s both}
.in.about__media{animation:fromLeft .9s cubic-bezier(.22,.61,.36,1) both}
.in.about__body{animation:riseIn .85s cubic-bezier(.22,.61,.36,1) .18s both}

/* ---------- animaciones de entrada (el header no entra: queda fijo) ---------- */
@keyframes wipeIn{
  from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(18px)}
  to{opacity:1;clip-path:inset(0 -2% 0 0);transform:none}
}
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fromRight{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes fromLeft{from{opacity:0;transform:translateX(-90px) scale(.93)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.hero__head::before{transform-origin:top;animation:growY .7s cubic-bezier(.22,.61,.36,1) .1s both}

.ln{display:block;animation:wipeIn .85s cubic-bezier(.22,.61,.36,1) both}
.ln:nth-child(1){animation-delay:.25s}
.ln:nth-child(2){animation-delay:.38s}
.ln:nth-child(3){animation-delay:.51s}
.ln:nth-child(4){animation-delay:.64s}

.card{animation:fromRight .8s cubic-bezier(.22,.61,.36,1) .55s both}
.artblock{transform-origin:left;animation:growX .8s cubic-bezier(.22,.61,.36,1) .7s both}
/* la entrada corre primero y el flotado arranca cuando aquella termina */
.hero__art img{animation:fromLeft 1s cubic-bezier(.22,.61,.36,1) .8s both,float 11s ease-in-out 1.9s infinite}
.lede{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) .95s both}
.cta{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) 1.08s both}
.stats > div{animation:riseIn .7s cubic-bezier(.22,.61,.36,1) both}
.stats > div:nth-child(1){animation-delay:1.2s}
.stats > div:nth-child(2){animation-delay:1.32s}
.stats > div:nth-child(3){animation-delay:1.44s}

/* la sección blanca entra al hacer scroll: .in la añade el IntersectionObserver.
   El opacity:0 va condicionado a .js (que pone el propio script): si el JS
   falla o no carga, el contenido se ve igual en vez de quedar invisible */
.js .why__title,.js .why__intro,.js .promise,.js .video,.js .sectors{opacity:0}
.in .why__title{animation:wipeIn .9s cubic-bezier(.22,.61,.36,1) .05s both}
.in .why__intro{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) .22s both}
.in.promise{animation:fromLeft .85s cubic-bezier(.22,.61,.36,1) .1s both}
.in.video{animation:zoomIn .95s cubic-bezier(.22,.61,.36,1) .24s both}
/* growX no toca la opacidad; con .sectors{opacity:0} de base se quedaba
   invisible, por eso lleva su propio keyframe */
.in.sectors{animation:growXIn .85s cubic-bezier(.22,.61,.36,1) .12s both;transform-origin:left}
@keyframes growXIn{
  from{opacity:0;transform:scaleX(0)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes zoomIn{
  from{opacity:0;transform:scale(.9) translateY(40px)}
  to{opacity:1;transform:none}
}
/* el recuadro ámbar del video entra después, ya con el video puesto */
.in.video .video__tag{animation:fromRight .7s cubic-bezier(.22,.61,.36,1) .85s both}
.in.video .video__play{animation:riseIn .6s cubic-bezier(.22,.61,.36,1) .95s both}

/* ---------- responsive ---------- */
/* Los renglones forzados del H2 y de la barra de sectores son una decisión de
   desktop: con `nowrap` en pantalla chica el texto se sale y aparece scroll
   horizontal en toda la página. Abajo de 1000px se dejan fluir. */
@media (max-width:999px){
  .brand__text{display:none}
  .brand__mark{height:64px}
  .why__title span{display:inline;white-space:normal}
  .sectors__title{white-space:normal;border-right:0;padding-right:0;
    border-bottom:3px solid var(--orange);padding-bottom:1rem}
  .stats{flex-wrap:wrap;row-gap:1.6rem}
  .stats > div{flex:1 1 42%}
}

@media (min-width:640px) and (max-width:999px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .quotes__grid{grid-template-columns:repeat(2,1fr)}
  .foot__inner{grid-template-columns:1fr 1fr}
}

@media (min-width:1000px){
  .nav__links{display:flex}
  .nav__inner .nav__cta{display:inline-flex}
  .burger{display:none}
  .drawer{display:none !important}
  .hero__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:2.5rem;row-gap:clamp(2rem,5vh,4rem);
    align-items:center;
  }
  .hero__head{grid-column:1 / 9;position:relative;z-index:4}
  .card{grid-column:9 / 13;max-width:390px;justify-self:end}
  /* margen negativo + z-index mayor: la máquina se monta sobre las últimas
     líneas del titular, como en el original */
  .hero__art{grid-column:1 / 7;align-self:end;position:relative;z-index:6;margin-top:-3.75rem}
  .hero__side{grid-column:7 / 13}
  .why__head{grid-template-columns:1.4fr 1fr;gap:3.5rem}
  .why__grid{grid-template-columns:.82fr 1.18fr}
  .sectors{grid-template-columns:auto 1fr;gap:2.5rem}
  .services__grid{grid-template-columns:repeat(3,1fr);gap:2rem}
  .about__inner{grid-template-columns:1.02fr 1fr}
  .about__card{position:absolute;left:-2.5rem;top:2.5rem;margin:0;width:320px}
  .about__media{padding-top:0;padding-left:2.5rem}
  .quotes__grid{grid-template-columns:repeat(3,1fr);gap:2rem}
  .contact__inner{grid-template-columns:1fr 1fr}
  .contact__form{grid-template-columns:1fr 1fr;gap:1.2rem 1.3rem}
  .field--full,.contact__form .btn,.contact__note{grid-column:1 / -1}
  .foot__inner{grid-template-columns:1.5fr 1fr 1fr;gap:3.5rem}
  .foot__bar{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem;
    padding:1.4rem clamp(1.2rem,4vw,3.5rem);max-width:var(--wrap);margin-left:auto;margin-right:auto}
}

.totop{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:var(--orange);color:var(--bright);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(3,7,30,.35);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .2s ease;
}
.totop svg{width:22px;height:22px}
.totop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.totop:hover{background:var(--amber)}
.totop[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .totop{transition:none}
  html{scroll-behavior:auto}
  .blueprint{animation:none}
  .bp__draw{animation:none;stroke-dashoffset:0}
  .hero__art img{animation:none}
  .dial::before,.dial::after{animation:none;opacity:0}
  .drawer{animation:none}
  .hero__head::before,.ln,.card,.artblock,.lede,.cta,.stats > div,
  .why__title,.why__intro,.promise,.video,.sectors,
  .video__tag,.video__play,.services__head,.scard,.about__media,.about__body,
  .quotes__head,.quote,.contact__aside,.contact__form{
    animation:none;opacity:1;transform:none;
  }
  .ln,.why__title{clip-path:none}
  *{transition-duration:.01ms !important}
}