/* ═══════════════════════════════════════════════════════
   ZENTRO · Landing styles
   Forest 60% · Cream 30% · Coral 10%
   ═══════════════════════════════════════════════════════ */

:root{
  --green:#2A4A3C;
  --green-deep:#21392F;
  --cream:#F1EBDF;
  --cream-warm:#E9E2D2;
  --coral:#E8634A;
  --coral-deep:#D5512F;
  --charcoal:#1A2620;
  --gray:#7A8580;
  --border:#D4CFC4;

  --maxw:1240px;
  --r-sm:8px;
  --r-md:16px;
  --r-lg:24px;

  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;

  --shadow-sm:0 2px 8px rgba(26,38,32,.06), 0 1px 2px rgba(26,38,32,.05);
  --shadow-md:0 18px 40px -18px rgba(26,38,32,.28), 0 6px 14px -8px rgba(26,38,32,.18);
  --shadow-lg:0 40px 80px -28px rgba(26,38,32,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:auto; } }

body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* ── Type scale ──────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:.01em; }
h2{ font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem); }
h3{ font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem); line-height:1.12; }
h4{ font-size:1rem; font-family:var(--sans); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.eyebrow--coral{ color:var(--coral); }
.eyebrow--cream{ color:rgba(241,235,223,.62); }

/* ── Section heads ───────────────────────────────────── */
.section-head{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.section-head h2{ margin-top:.5rem; max-width:14ch; text-wrap:balance; }
.section-head--cream h2{ color:var(--green); }
.section-head--dark h2{ color:var(--cream); }

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  --bg:var(--coral);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.98rem; letter-spacing:.01em;
  padding:.85em 1.6em; border:none; border-radius:999px;
  background:var(--bg); color:#fff; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, filter .2s;
  box-shadow:0 10px 24px -12px rgba(232,99,74,.7);
  position:relative;
}
.btn--coral:hover{ transform:scale(1.025) translateY(-1px); box-shadow:0 16px 34px -12px rgba(232,99,74,.8); }
.btn--coral:active{ transform:scale(.99); filter:brightness(.95); }
.btn--lg{ font-size:1.05rem; padding:1.02em 2em; }
.btn--block{ width:100%; }

.btn--ghost{
  background:transparent; color:var(--cream);
  border:1.5px solid rgba(241,235,223,.45);
  box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--cream); background:rgba(241,235,223,.08); transform:scale(1.025); }
.btn--ghost:active{ transform:scale(.99); }

/* spinner inside submit */
.btn__spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  display:none;
}
.btn.is-loading .btn__label{ opacity:.5; }
.btn.is-loading .btn__spinner{ display:inline-block; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ═══ LOADER ═════════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
/* Loader = <img> PNG (símbolo cream). Entrada premium: fade-in + scale. */
.loader__logo{ width:120px; height:auto; animation:logoIn 1s var(--ease) both; }
@keyframes logoIn{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }
/* [DESACTIVADO] Estilos del coil SVG self-draw del loader (reemplazado por el <img> + logoIn de arriba):
.loader__coil{
  fill:none; stroke:var(--cream); stroke-width:8.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.loader__bead{ fill:var(--coral); opacity:0; animation:beadIn .5s var(--ease) 1.4s forwards; }
@keyframes beadIn{ from{ opacity:0; transform:scale(0); transform-box:fill-box; transform-origin:center; } to{ opacity:1; transform:scale(1); } }
*/

/* ═══ CUSTOM CURSOR ══════════════════════════════════ */
.cursor{
  position:fixed; top:0; left:0; z-index:900;
  width:26px; height:26px; border-radius:50%;
  background:rgba(232,99,74,.18);
  border:1.5px solid rgba(232,99,74,.55);
  transform:translate(-50%,-50%);
  pointer-events:none; mix-blend-mode:normal;
  transition:width .25s var(--ease), height .25s var(--ease), background .25s, opacity .3s;
  opacity:0;
}
.cursor.is-active{ opacity:1; }
.cursor.is-hot{ width:46px; height:46px; background:rgba(232,99,74,.12); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ═══ NAV ════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  border-bottom:1px solid transparent;
  transition:background .3s ease-out, backdrop-filter .3s ease-out, border-color .3s ease-out;
}
/* [DESACTIVADO] hide/show del header al scrollear (translateY + .is-visible). Ahora queda siempre visible:
.nav{ transform:translateY(-100%); transition:transform .4s var(--ease), background .35s, backdrop-filter .35s; }
.nav.is-visible{ transform:translateY(0); }
*/
.nav.is-top{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
.nav.is-scrolled{                                  /* glass premium */
  background:rgba(42,74,60,.65);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(241,235,223,.12);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(14px,2vw,20px) clamp(20px,5vw,64px);
  display:flex; justify-content:center; align-items:center;   /* wordmark centrado */
}
.nav__login{
  position:absolute; top:50%; right:clamp(20px,5vw,64px); transform:translateY(-50%);
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:var(--cream); text-decoration:none; opacity:.85;
  padding:8px 16px; border:1px solid rgba(241,235,223,.35); border-radius:var(--r-sm);
  transition:opacity .2s ease, border-color .2s ease;
}
.nav__login:hover{ opacity:1; border-color:var(--cream); }
.nav__brand{
  font-family:var(--serif);
  font-size:clamp(2.25rem, 1.9rem + 1.6vw, 3.125rem);   /* ~36px (mobile) → ~50px (desktop) */
  color:var(--cream); line-height:1;
  letter-spacing:.2em; padding-left:.2em;                 /* respira + compensa el trailing del centrado */
}
/* [DESACTIVADO] Brand viejo: contenedor flex del PNG lockup horizontal. Reemplazado por el wordmark de texto:
.nav__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav__logo{ height:30px; width:auto; display:block; }
*/
/* [DESACTIVADO] Coil SVG + wordmark de texto del nav. Reemplazados por el PNG lockup (.nav__logo):
.nav__mark{ width:30px; height:35px; overflow:visible; }
.nav__coil{ fill:none; stroke:var(--cream); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.nav__bead{ fill:var(--coral); }
.nav__word{ font-family:var(--serif); color:var(--cream); font-size:1.32rem; letter-spacing:.18em; }
*/

/* [DESACTIVADO] Links del nav (subrayado coral animado + active state), CTA del header, hamburguesa
   y menú mobile desplegable. Removidos en el rediseño minimalista. Conservados por si la web crece:
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  color:rgba(241,235,223,.82); font-size:.92rem; font-weight:500;
  position:relative; padding:4px 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--coral); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after, .nav__links a.is-current::after{ transform:scaleX(1); }
.nav__cta{ padding:.6em 1.2em; font-size:.9rem; }

.nav__burger{ display:none; width:40px; height:40px; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:22px; height:2px; background:var(--cream); border-radius:2px; transition:transform .3s var(--ease), opacity .25s; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:6px;
  padding:0 clamp(20px,5vw,64px) 20px;
  background:rgba(42,74,60,.96); backdrop-filter:blur(14px);
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s;
}
.nav.is-open .nav__mobile{ max-height:340px; padding-top:8px; }
.nav__mobile a{ color:var(--cream); padding:12px 0; font-size:1.05rem; border-bottom:1px solid rgba(241,235,223,.1); }
.nav__mobile .btn{ margin-top:12px; border-bottom:none; }
*/

/* ═══ HERO ═══════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  background:var(--green); color:var(--cream);
  display:flex; align-items:center;
  padding:120px clamp(20px,5vw,64px) 90px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 72% 38%, rgba(241,235,223,.06) 0%, rgba(241,235,223,0) 60%), var(--green);
}
.hero__inner{
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(30px,5vw,72px); align-items:center;
}
.hero__title{
  font-size:clamp(2.7rem,1.6rem + 4.6vw,5.2rem);
  color:var(--cream); margin:.5rem 0 1.4rem; max-width:13ch; letter-spacing:0;
}
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > span{ display:block; }
.hero__sub{
  font-size:clamp(1.02rem,.95rem + .5vw,1.28rem);
  color:rgba(241,235,223,.72); max-width:46ch; line-height:1.55;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; }

.hero__visual{ display:flex; justify-content:center; align-items:center; }
.hero__machine-wrap{ position:relative; width:min(100%,360px); will-change:transform; }
.machine{ width:100%; height:auto; filter:drop-shadow(0 40px 60px rgba(0,0,0,.4)); }

.hero__float{ position:absolute; top:-44px; right:-30px; width:84px; opacity:.5; animation:floaty 7s ease-in-out infinite; }
.hero__float img{ width:100%; display:block; }   /* símbolo cream PNG; wrapper mantiene opacity + floaty */
/* [DESACTIVADO] Coil SVG decorativo del hero (era coral). Ahora usa el PNG símbolo cream:
.hero__float-coil{ fill:none; stroke:var(--coral); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
*/
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-16px) rotate(4deg); } }

.hero__scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(241,235,223,.5);
}
.hero__scroll-label{ font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; }
.hero__scroll-line{ width:1.5px; height:48px; background:linear-gradient(rgba(241,235,223,.5),rgba(241,235,223,0)); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:''; position:absolute; top:0; left:0; right:0; height:40%; background:var(--coral); animation:scrolldn 2s var(--ease) infinite; }
@keyframes scrolldn{ 0%{ transform:translateY(-120%); } 60%,100%{ transform:translateY(280%); } }

/* ═══ STORY (problema/solución) ══════════════════════ */
.story{ background:var(--cream); padding:clamp(90px,13vw,180px) clamp(20px,5vw,64px); }
.story__inner{ max-width:820px; margin:0 auto; text-align:center; }
.story__lead{
  font-family:var(--serif); color:var(--green);
  font-size:clamp(1.8rem,1.1rem + 3vw,3.3rem); line-height:1.18;
  letter-spacing:.005em; text-wrap:balance;
}
.story__lead .word{ display:inline-block; }
.reveals-on .story__lead .word{ opacity:0; transform:translateY(.5em); }
.reveals-on .story__lead.is-in .word{ animation:wordUp .6s var(--ease) forwards; }
@keyframes wordUp{ to{ opacity:1; transform:none; } }
.story__body{
  margin-top:1.8rem; font-size:clamp(1.05rem,1rem + .5vw,1.32rem);
  color:var(--gray); max-width:60ch; margin-inline:auto; line-height:1.6;
}
.story__body strong{ color:var(--coral); font-weight:600; }

/* ═══ DIFF cards (qué es Zentro) ═════════════════════ */
.diff{ background:var(--green); color:var(--cream); padding:clamp(80px,11vw,150px) 0; }
.diff .section-head h2{ color:var(--cream); }
.diff__grid{
  max-width:var(--maxw); margin:clamp(40px,6vw,72px) auto 0;
  padding:0 clamp(20px,5vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.card{ border-radius:var(--r-md); }
.card--diff{
  background:rgba(241,235,223,.04);
  border:1px solid rgba(241,235,223,.12);
  padding:38px 32px 34px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, border-color .3s;
}
.card--diff:hover{ transform:translateY(-8px); background:rgba(241,235,223,.07); border-color:rgba(232,99,74,.45); box-shadow:0 30px 50px -28px rgba(0,0,0,.5); }
.card__icon{ width:46px; height:46px; margin-bottom:24px; }
.card__icon svg{ width:100%; height:100%; }
.card__icon path,.card__icon circle,.card__icon line,.card__icon rect{ stroke:var(--coral); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset .6s var(--ease); }
.card--diff:hover .card__icon{ animation:iconpop .5s var(--ease); }
@keyframes iconpop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12) rotate(-3deg); } 100%{ transform:scale(1); } }
.card--diff h3{ color:var(--cream); margin-bottom:.6rem; }
.card--diff p{ color:rgba(241,235,223,.7); font-size:.98rem; line-height:1.6; }

/* ═══ WHO (para quién es) ════════════════════════════ */
.who{ background:var(--cream); padding:clamp(80px,11vw,150px) 0; }
.who__grid{
  max-width:var(--maxw); margin:clamp(40px,6vw,72px) auto 0;
  padding:0 clamp(20px,5vw,64px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px);
}
.usecase{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.usecase:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.usecase__media{ position:relative; overflow:hidden; }
.usecase-art{
  width:100%; height:clamp(200px,26vw,300px);
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(rgba(42,74,60,.08) 1.4px, transparent 1.4px) 0 0/22px 22px,
    var(--cream-warm);
}
.usecase-art__icon{ width:60px; height:60px; transition:transform .4s var(--ease); }
.usecase-art__icon svg{ width:100%; height:100%; }
.usecase-art__icon path,.usecase-art__icon circle,.usecase-art__icon rect{
  stroke:var(--green); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.usecase:hover .usecase-art__icon{ transform:scale(1.1) rotate(-2deg); }
.usecase__tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--serif); font-size:1.1rem; color:#fff;
  background:var(--coral); width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(232,99,74,.7);
}
.usecase__text{ padding:26px 28px 30px; }
.usecase__text h3{ color:var(--green); margin-bottom:.4rem; }
.usecase__text p{ color:var(--gray); font-size:.98rem; }

/* ═══ TECH ═══════════════════════════════════════════ */
.tech{ background:var(--green); color:var(--cream); padding:clamp(80px,11vw,150px) 0; overflow:hidden; }
.tech__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;
}
.tech h2{ color:var(--cream); margin-top:.5rem; }
.tech__sub{ color:rgba(241,235,223,.7); font-size:1.15rem; margin-top:1rem; max-width:38ch; }
.feature-list{ margin-top:2.4rem; display:flex; flex-direction:column; gap:20px; }
.feature-list li{ display:flex; align-items:center; gap:18px; font-size:1.08rem; }
.feature-list strong{ color:var(--cream); font-weight:600; }
.feature-list li span:last-child{ color:rgba(241,235,223,.78); }
.feature-list__icon{ flex:none; width:48px; height:48px; border-radius:12px; background:rgba(232,99,74,.14); display:flex; align-items:center; justify-content:center; }
.feature-list__icon svg{ width:24px; height:24px; }
.feature-list__icon path,.feature-list__icon circle,.feature-list__icon rect,.feature-list__icon line{ stroke:var(--coral); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.tech__visual{ display:flex; justify-content:center; }
.tech__phone{ width:min(100%,320px); will-change:transform; transition:transform .15s ease-out; }
.tech__phone svg{ width:100%; height:auto; filter:drop-shadow(0 40px 70px rgba(0,0,0,.5)); animation:breath 6s ease-in-out infinite; }
@keyframes breath{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ═══ PROCESS (cómo trabajamos) ══════════════════════ */
.process{ background:var(--cream); padding:clamp(80px,11vw,150px) 0; }
.timeline{ max-width:var(--maxw); margin:clamp(48px,6vw,80px) auto 0; padding:0 clamp(20px,5vw,64px); position:relative; }
.timeline__track{ position:absolute; top:calc(clamp(48px,6vw,80px) + 31px); left:clamp(20px,5vw,64px); right:clamp(20px,5vw,64px); height:2px; background:var(--border); border-radius:2px; }
.timeline__progress{ position:absolute; inset:0 100% 0 0; background:var(--coral); border-radius:2px; transition:right .1s linear; }
.timeline__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; }
.step{ text-align:left; }
.step__num{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:var(--cream); border:2px solid var(--border);
  font-family:var(--serif); font-size:1.7rem; color:var(--coral);
  margin-bottom:22px; transition:transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.step.is-in .step__num{ animation:numpop .6s var(--ease); border-color:var(--coral); }
@keyframes numpop{ 0%{ transform:scale(.6); opacity:.4; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
.step:hover .step__num{ box-shadow:0 12px 28px -12px rgba(232,99,74,.6); transform:translateY(-3px); }
.step h3{ color:var(--green); margin-bottom:.5rem; }
.step p{ color:var(--gray); font-size:.96rem; }

/* ═══ GALLERY ════════════════════════════════════════ */
.gallery{ background:var(--green); padding:clamp(80px,11vw,150px) 0; overflow:hidden; }
.gallery__viewport{ max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding:0 clamp(20px,5vw,64px); }
.gallery__track{ display:flex; gap:24px; transition:transform .7s var(--ease); }
.gallery__slide{ flex:0 0 100%; }
.gallery-art{
  width:100%; height:clamp(280px,42vw,520px); border-radius:20px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(rgba(241,235,223,.09) 1.6px, transparent 1.6px) 0 0/28px 28px,
    linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%);
}
.gallery-art__icon{ width:104px; height:104px; opacity:.92; }
.gallery-art__icon svg{ width:100%; height:100%; }
.gallery-art__icon path,.gallery-art__icon circle,.gallery-art__icon rect{
  stroke:var(--cream); stroke-width:1.2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.gallery__slide figcaption{ margin-top:18px; color:rgba(241,235,223,.7); font-size:.95rem; letter-spacing:.04em; }
.gallery__dots{ display:flex; gap:12px; justify-content:center; margin-top:34px; }
.gallery__dots button{ width:34px; height:3px; border-radius:3px; border:none; background:rgba(241,235,223,.25); cursor:pointer; transition:background .3s, transform .3s; padding:0; }
.gallery__dots button.is-active{ background:var(--coral); transform:scaleY(1.6); }

/* ═══ CTA BAND ═══════════════════════════════════════ */
.cta-band{ position:relative; background:var(--green-deep); color:var(--cream); padding:clamp(90px,13vw,170px) clamp(20px,5vw,64px); text-align:center; overflow:hidden; }
.cta-band__pattern{ position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(241,235,223,.07) 1.4px, transparent 1.4px);
  background-size:26px 26px; mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 75%);
}
.cta-band__inner{ position:relative; max-width:680px; margin:0 auto; }
.cta-band h2{ color:var(--cream); font-size:clamp(2.1rem,1.3rem + 3.4vw,3.7rem); text-wrap:balance; }
.cta-band p{ color:rgba(241,235,223,.72); font-size:1.2rem; margin:1.1rem 0 2.4rem; }

/* ═══ CONTACT FORM ═══════════════════════════════════ */
.contact{ background:var(--cream); padding:clamp(80px,11vw,150px) 0 clamp(90px,12vw,160px); }
.contact__card{
  max-width:640px; margin:clamp(36px,5vw,56px) auto 0;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-md);
  position:relative; perspective:1600px;
}
.form{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; transition:opacity .35s, transform .5s var(--ease); backface-visibility:hidden; }
.contact__card.is-success .form{ opacity:0; transform:rotateX(-90deg); pointer-events:none; position:absolute; inset:clamp(28px,4vw,48px); }
.field{ position:relative; }
.field--full{ grid-column:1 / -1; }

.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--charcoal);
  background:var(--cream); border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:22px 14px 8px; transition:border-color .25s, background .25s, box-shadow .25s;
  appearance:none;
}
.field textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.field label{
  position:absolute; left:14px; top:15px; color:var(--gray); font-size:1rem;
  pointer-events:none; transition:transform .2s var(--ease), color .2s, font-size .2s;
  transform-origin:left;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(42,74,60,.1); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-11px) scale(.74); color:var(--green); font-weight:500;
}
.field--select::after{
  content:''; position:absolute; right:16px; top:24px; width:9px; height:9px;
  border-right:2px solid var(--gray); border-bottom:2px solid var(--gray);
  transform:rotate(45deg); pointer-events:none;
}
.field__error{ display:block; font-size:.78rem; color:var(--coral); margin-top:5px; min-height:1em; opacity:0; transform:translateY(-3px); transition:opacity .2s, transform .2s; }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:var(--coral); background:#fff; }
.field.is-invalid .field__error{ opacity:1; transform:none; }
.form .btn{ grid-column:1 / -1; }

.form-success{
  position:absolute; inset:clamp(28px,4vw,48px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  opacity:0; transform:rotateX(90deg); pointer-events:none;
  transition:opacity .4s .15s, transform .5s .1s var(--ease);
  backface-visibility:hidden;
}
.contact__card.is-success .form-success{ opacity:1; transform:none; pointer-events:auto; }
.form-success__mark{ width:70px; height:70px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.form-success__mark svg{ width:38px; height:38px; fill:none; stroke:var(--cream); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; }
.contact__card.is-success .form-success__mark svg{ animation:check .6s .25s var(--ease) forwards; }
@keyframes check{ to{ stroke-dashoffset:0; } }
.form-success h3{ color:var(--green); margin-bottom:.5rem; }
.form-success p{ color:var(--gray); font-size:1.05rem; }

/* ═══ FOOTER ═════════════════════════════════════════ */
.footer{ background:var(--green); color:var(--cream); padding:clamp(60px,8vw,90px) clamp(20px,5vw,64px) 30px; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr; gap:40px; } /* 2 cols; volver a "1.6fr 1fr 1fr" al reactivar Seguinos */
.footer__logo{ display:flex; align-items:center; gap:10px; }
.footer__logo-img{ height:34px; width:auto; display:block; }   /* PNG lockup horizontal (coil + ZENTRO) */
/* [DESACTIVADO] Coil SVG + wordmark de texto del footer. Reemplazados por el PNG lockup (.footer__logo-img):
.footer__mark{ width:30px; height:35px; overflow:visible; }
.footer__word{ font-family:var(--serif); font-size:1.4rem; letter-spacing:.18em; color:var(--cream); }
*/
.footer__tagline{ margin-top:14px; color:rgba(241,235,223,.6); font-size:.96rem; max-width:28ch; }
.footer__col h4{ color:rgba(241,235,223,.5); margin-bottom:16px; font-size:.78rem; letter-spacing:.16em; }
.footer__list li{ margin-bottom:11px; }
.footer__list a,.footer__list span{ color:rgba(241,235,223,.82); font-size:.96rem; transition:color .2s; display:inline-flex; align-items:center; gap:10px; }
.footer__list a:hover{ color:var(--coral); }
.social-ico{ width:18px; height:18px; display:inline-flex; }
.social-ico svg{ width:100%; height:100%; fill:currentColor; }
.footer__bottom{ max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding-top:24px; border-top:1px solid var(--coral); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; color:rgba(241,235,223,.55); font-size:.86rem; }
.footer__domain{ letter-spacing:.1em; }

/* ═══ FLOATING WHATSAPP ══════════════════════════════ */
.wa-float{
  position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:550;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; box-shadow:0 12px 28px -8px rgba(37,211,102,.6);
  transition:transform .25s var(--ease);
}
.wa-float svg{ width:34px; height:34px; }
.wa-float::before{ content:''; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1; animation:waPulse 2.6s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(1.7); opacity:0; } }
.wa-float:hover{ transform:scale(1.08); }

/* CTA flotante "Contacto" — apilado ARRIBA del WhatsApp (mismo sistema, sin competir). */
.cta-float{
  position:fixed; right:22px; bottom:calc(96px + env(safe-area-inset-bottom)); z-index:550;
  display:flex; align-items:center; gap:8px;
  height:52px; padding:0 22px; border-radius:999px;
  background:var(--coral); color:var(--cream);
  font-family:var(--sans); font-weight:600; font-size:.95rem; white-space:nowrap;
  box-shadow:0 12px 28px -8px rgba(232,99,74,.55);
  transition:transform .25s var(--ease);
}
.cta-float svg{ width:18px; height:18px; }
.cta-float::before{ content:''; position:absolute; inset:0; border-radius:999px; background:var(--coral); z-index:-1; animation:ctaPulse 4s ease-out infinite; }
@keyframes ctaPulse{ 0%{ transform:scale(1); opacity:.38; } 70%,100%{ transform:scale(1.16); opacity:0; } }
.cta-float:hover{ transform:scale(1.05); }
@media (max-width:560px){ .cta-float{ height:48px; padding:0 18px; font-size:.9rem; } }

/* ═══ REVEAL ANIMATIONS ══════════════════════════════ */
/* Hiding is gated behind .reveals-on — only added by JS when the animation
   clock is confirmed to run, so content is NEVER stuck hidden otherwise. */
.reveals-on .reveal,.reveals-on [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveals-on .reveal.is-in,.reveals-on [data-reveal].is-in{ opacity:1; transform:none; }
.reveals-on .reveal-line > [data-reveal]{ transform:translateY(110%); transition:transform .85s var(--ease), opacity .85s; opacity:1; }
.reveals-on .reveal-line > [data-reveal].is-in{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveals-on .reveal,.reveals-on [data-reveal],.reveals-on .reveal-line > [data-reveal]{ opacity:1 !important; transform:none !important; }
  .reveals-on .story__lead .word{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ═══ RESPONSIVE ═════════════════════════════════════ */
@media (max-width:980px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav__mobile{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; gap:44px; }
  .hero__title{ margin-inline:auto; font-size:clamp(2.2rem,6.4vw,3.6rem); max-width:16ch; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .hero__machine-wrap{ width:min(72%,300px); }
  .tech__inner{ grid-template-columns:1fr; gap:50px; }
  .tech__copy{ text-align:center; }
  .tech__sub{ margin-inline:auto; }
  .feature-list{ max-width:420px; margin-inline:auto; }
}
@media (max-width:760px){
  .diff__grid{ grid-template-columns:1fr; max-width:440px; }
  .who__grid{ grid-template-columns:1fr; max-width:460px; }
  .timeline__steps{ grid-template-columns:1fr; gap:0; }
  .timeline__track{ left:calc(clamp(20px,5vw,64px) + 31px); right:auto; top:clamp(48px,6vw,80px); bottom:60px; width:2px; height:auto; }
  .timeline__progress{ inset:0 0 100% 0; }
  .step{ display:grid; grid-template-columns:64px 1fr; gap:0 22px; padding-bottom:34px; align-items:start; }
  .step__num{ margin-bottom:0; grid-row:span 2; }
  .step h3{ margin-top:14px; }
}
@media (max-width:560px){
  .form{ grid-template-columns:1fr; }
  .hero{ padding-top:104px; }
  .footer__inner{ grid-template-columns:1fr; gap:34px; }
  .footer__bottom{ justify-content:center; text-align:center; }
}