/* ─── Variables ─────────────────────────────────────────── */
:root {
  --navy:         #003D7A;
  --navy-deep:    #001B3F;
  --navy-darker:  #001228;
  --cyan:         #00C5D9;
  --cyan-dark:    #009DB0;
  --gray:         #808080;
  --ink:          #0A0F1C;
  --slate:        #1E293B;
  --mist:         #F5F8FC;
  --paper:        #FFFFFF;
  --line:         #E5E7EB;
  --success:      #10B981;
  --wa:           #25D366;

  --enseso:       #0D5C45;
  --enseso-light: #00BD87;
  --enseso-bg:    #F0FAF6;

  --s1:  0.5rem;   --s2:  1rem;    --s3:  1.5rem;
  --s4:  2rem;     --s6:  3rem;    --s8:  4rem;
  --s10: 5rem;     --s12: 6rem;    --s16: 8rem;

  --r-sm: 6px;   --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;

  --sh-sm: 0 1px 3px rgba(0,61,122,.06), 0 1px 2px rgba(0,61,122,.04);
  --sh-md: 0 4px 12px rgba(0,61,122,.08), 0 2px 4px rgba(0,61,122,.04);
  --sh-lg: 0 10px 30px rgba(0,61,122,.12);

  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h1:      clamp(2rem, 4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.125rem);
  --fs-h3:      1.25rem;
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-eyebrow: 0.7rem;

  --nav-h: 72px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; color: var(--navy); }
p { line-height: 1.7; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }

/* ─── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--s4); }
.container--narrow { max-width: 760px; }
section { scroll-margin-top: var(--nav-h); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--cyan);
}
.eyebrow--enseso { color: var(--enseso-light); }
.section-title    { font-size: var(--fs-h1); margin-top: var(--s2); }
.section-subtitle { font-size: var(--fs-lead); color: var(--slate); margin-top: var(--s2); max-width: 54ch; line-height: 1.75; }
.section-header   { margin-bottom: var(--s10); }
.section-header--center { text-align: center; }
.section-header--center .section-subtitle { margin-left: auto; margin-right: auto; }

/* ─── Fade-in ─────────────────────────────────────────────── */
.fi { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.fi.on { opacity: 1; transform: none; }
.fi:nth-child(2) { transition-delay: .08s; }
.fi:nth-child(3) { transition-delay: .16s; }
.fi:nth-child(4) { transition-delay: .24s; }
.fi:nth-child(5) { transition-delay: .32s; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn-wa   { background: var(--wa); color:#fff; box-shadow: 0 4px 14px rgba(37,211,102,.3); }
.btn-wa:hover { background:#1fc85a; box-shadow: 0 6px 20px rgba(37,211,102,.45); }
.btn-ghost-white { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-ghost-white:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6); }
.btn-ghost-navy  { background:transparent; color:var(--navy); border:1px solid var(--line); }
.btn-ghost-navy:hover  { border-color:var(--navy); box-shadow:var(--sh-sm); }
.btn-cyan { background:var(--cyan); color:#fff; box-shadow: 0 4px 14px rgba(0,197,217,.3); }
.btn-cyan:hover { background:var(--cyan-dark); box-shadow: 0 6px 20px rgba(0,197,217,.45); }
.btn-sm   { padding:.5rem 1.125rem; font-size:var(--fs-sm); }
.btn-lg   { padding:1rem 2rem; font-size:1.0625rem; }
.btn-full { width:100%; justify-content:center; }

/* ─── WA float ─────────────────────────────────────────────── */
@keyframes dot-pulse  { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55);} 50%{box-shadow:0 0 0 5px rgba(16,185,129,0);} }
@keyframes wa-pulse   { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4);transform:scale(1);} 50%{box-shadow:0 6px 28px rgba(37,211,102,.65);transform:scale(1.05);} }
.wa-float { position:fixed; bottom:24px; right:24px; width:60px; height:60px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; animation:wa-pulse 3s ease-in-out infinite; z-index:1000; }
.wa-float:hover { animation:none; transform:scale(1.08); box-shadow:0 8px 30px rgba(37,211,102,.65); }

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav.scrolled {
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-sm);
  border-bottom-color:var(--line);
}
.nav__inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.nav__logo { display:flex; align-items:center; flex-shrink:0; }
.nav__logo img { height:36px; width:auto; transition:filter .3s ease; }
.nav:not(.scrolled) .nav__logo img { filter:brightness(0) invert(1); }
.nav__links ul { display:flex; align-items:center; gap:var(--s4); }
.nav__links a { font-size:var(--fs-sm); font-weight:500; color:rgba(255,255,255,.85); position:relative; transition:color .2s ease; }
.nav.scrolled .nav__links a { color:var(--slate); }
.nav__links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.nav__links a:hover { color:var(--cyan); }
.nav.scrolled .nav__links a:hover { color:var(--navy); }
.nav__links a:hover::after { transform:scaleX(1); }
.nav:not(.scrolled) .btn-cyan { background:rgba(0,197,217,.2); border:1px solid rgba(0,197,217,.5); box-shadow:none; }
.nav:not(.scrolled) .btn-cyan:hover { background:rgba(0,197,217,.35); }

.nav__drop { position:relative; }
.nav__drop > a { display:inline-flex; align-items:center; gap:4px; }
.nav__drop-caret { transition:transform .2s ease; }
.nav__drop:hover .nav__drop-caret { transform:rotate(180deg); }
/* Outer element sits flush against the trigger (no gap) so :hover never breaks
   between the link and the menu; padding-top reserves the visual gap instead
   of margin-top, keeping the hit area continuous. */
.nav__drop-menu {
  position:absolute; top:100%; left:0; padding-top:var(--s2);
  min-width:240px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s;
}
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu {
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav__drop-menu__inner {
  background:var(--paper); border-radius:var(--r-md); box-shadow:var(--sh-lg);
  padding:.5rem; transform:translateY(4px); transition:transform .2s ease;
}
.nav__drop:hover .nav__drop-menu__inner,
.nav__drop:focus-within .nav__drop-menu__inner {
  transform:translateY(0);
}
.nav__drop-menu a {
  display:block; padding:.75rem .9rem; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:600; color:var(--slate) !important;
}
.nav__drop-menu a::after { display:none; }
.nav__drop-menu a:hover { background:var(--mist); color:var(--navy) !important; }

.nav__ham { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; border-radius:var(--r-sm); transition:background .2s ease; }
.nav:not(.scrolled) .nav__ham span { background:#fff; }
.nav__ham span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav__ham.on span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__ham.on span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav__ham.on span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.drawer { position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:var(--paper); z-index:850; padding:var(--s6) var(--s4); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
.drawer.on { transform:translateX(0); }
.drawer ul { display:flex; flex-direction:column; margin-bottom:var(--s6); }
.drawer ul a { display:block; font-size:1.125rem; font-weight:600; color:var(--navy); padding:var(--s3) 0; border-bottom:1px solid var(--line); transition:color .2s ease, padding-left .2s ease; }
.drawer ul a:hover { color:var(--cyan); padding-left:var(--s2); }
.drawer ul li:last-child a { border-bottom:none; }

@media (max-width:900px) { .nav__links, .nav__cta-wrap { display:none; } .nav__ham { display:flex; } }

/* ═══════════════════════════════════════════════════════════
   HERO — VIDEO
═══════════════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--navy-darker);
}
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__overlay {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 55% 70% at 15% 50%, rgba(0,197,217,.1) 0%, transparent 55%),
    linear-gradient(160deg, rgba(0,27,63,.65) 0%, rgba(0,10,30,.88) 55%, rgba(0,5,20,.97) 100%);
}
.hero__inner {
  position:relative; z-index:2; width:100%;
  max-width:880px; margin:0 auto; text-align:center;
  padding:calc(var(--nav-h) + var(--s12)) var(--s4) var(--s16);
}
.hero__badge {
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:6px 20px;
  border:1px solid rgba(0,197,217,.35);
  background:rgba(0,197,217,.07);
  border-radius:100px;
  font-size:var(--fs-eyebrow); font-weight:600;
  color:var(--cyan); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:var(--s6); backdrop-filter:blur(6px);
}
.hero__badge-dot { width:6px; height:6px; background:var(--cyan); border-radius:50%; animation:dot-pulse 2s ease-in-out infinite; }

@keyframes heroWordIn { 0%{opacity:0;transform:translateY(28px);filter:blur(6px);} 100%{opacity:1;transform:translateY(0);filter:blur(0);} }
.hero__title { font-size:var(--fs-display); font-weight:800; color:#fff; line-height:1.08; margin-bottom:var(--s4); letter-spacing:-.02em; }
.hero__title .ht-brand { color:var(--cyan); display:block; opacity:0; animation:heroWordIn .65s cubic-bezier(.22,1,.36,1) .2s forwards; }
.hero__title .ht-main  { display:block; opacity:0; animation:heroWordIn .65s cubic-bezier(.22,1,.36,1) .55s forwards; }
.hero__title .ht-sub   { display:block; font-size:clamp(1.5rem,3.5vw,2.5rem); font-weight:500; color:rgba(255,255,255,.8); letter-spacing:0; opacity:0; animation:heroWordIn .65s cubic-bezier(.22,1,.36,1) .9s forwards; }
.hero__sub  { font-size:var(--fs-lead); color:rgba(255,255,255,.65); line-height:1.75; max-width:580px; margin:0 auto var(--s8); opacity:0; animation:heroWordIn .65s cubic-bezier(.22,1,.36,1) 1.1s forwards; }
.hero__cta  { display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; opacity:0; animation:heroWordIn .65s cubic-bezier(.22,1,.36,1) 1.3s forwards; }
.hero__cta .btn { font-size:1rem; padding:.9rem 1.875rem; }

@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
.hero__scroll { position:absolute; bottom:var(--s6); left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:var(--s1); opacity:0; animation:heroWordIn .5s ease 1.8s forwards; }
.hero__scroll span { font-size:.6rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.hero__scroll svg { color:rgba(255,255,255,.25); animation:bounce 2s ease-in-out 2s infinite; }

@media (max-width:640px) {
  .hero__inner { padding:calc(var(--nav-h) + var(--s8)) var(--s3) var(--s12); }
  .hero__cta { flex-direction:column; align-items:stretch; }
  .hero__cta .btn { justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════════ */
.stats { background:var(--paper); border-bottom:1px solid var(--line); }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { text-align:center; padding:var(--s6) var(--s4); border-right:1px solid var(--line); }
.stat:last-child { border-right:none; }
.stat__n { font-size:clamp(1.875rem,3.5vw,2.75rem); font-weight:700; color:var(--navy); line-height:1; margin-bottom:var(--s1); letter-spacing:-.01em; }
.stat__l { font-size:var(--fs-eyebrow); font-weight:500; color:var(--gray); text-transform:uppercase; letter-spacing:.1em; line-height:1.5; }
@media (max-width:768px) { .stats__grid { grid-template-columns:repeat(2,1fr); } .stat:nth-child(2) { border-right:none; } .stat:nth-child(3),.stat:nth-child(4) { border-top:1px solid var(--line); } .stat:nth-child(4) { border-right:none; } }
@media (max-width:400px) { .stats__grid { grid-template-columns:1fr; } .stat { border-right:none !important; } .stat+.stat { border-top:1px solid var(--line); } }

/* ═══════════════════════════════════════════════════════════
   PROBLEMA
═══════════════════════════════════════════════════════════ */
.problem { padding:var(--s16) 0; background:var(--paper); }
.problem__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s10); }
.prob-card { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); position:relative; overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; }
.prob-card:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.prob-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right, var(--navy), var(--cyan)); }
.prob-card__icon { width:52px; height:52px; background:rgba(0,61,122,.05); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
.prob-card h3 { font-size:var(--fs-h3); font-weight:600; color:var(--navy); margin-bottom:var(--s1); }
.prob-card p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; }
@media (max-width:768px) { .problem__grid { grid-template-columns:1fr; } }
@media (min-width:481px) and (max-width:768px) { .problem__grid { grid-template-columns:1fr 1fr; } .prob-card:last-child { grid-column:1/-1; max-width:380px; margin:0 auto; width:100%; } }

/* ═══════════════════════════════════════════════════════════
   VIDEO DEMO
═══════════════════════════════════════════════════════════ */
.video-demo { padding:var(--s16) 0; background:var(--mist); }
.video-demo .section-header { margin-bottom:var(--s10); }
.video-wrapper {
  position:relative; width:100%; max-width:900px; margin:0 auto;
  padding-bottom:56.25%; /* 16:9 */
  height:0; overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:0 20px 60px rgba(0,61,122,.18), 0 6px 20px rgba(0,61,122,.1);
}
.video-wrapper iframe {
  position:absolute; top:0; left:0; width:100%; height:100%;
  border:none; border-radius:var(--r-xl);
}

/* ═══════════════════════════════════════════════════════════
   PROCESO — ENSESO4FOOD
═══════════════════════════════════════════════════════════ */
.process {
  padding:var(--s16) 0;
  background:linear-gradient(155deg, #001228 0%, #002558 45%, #001a3e 100%);
  position:relative; overflow:hidden;
}
.process::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 80%, rgba(0,189,135,.05) 0%, transparent 40%),
             radial-gradient(circle at 80% 20%, rgba(0,197,217,.07) 0%, transparent 40%);
  pointer-events:none;
}
.process .section-title    { color:#fff; }
.process .section-subtitle { color:rgba(255,255,255,.58); }
.enseso-badge {
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:6px 16px;
  background:rgba(0,189,135,.1); border:1px solid rgba(0,189,135,.28);
  border-radius:100px;
  font-size:var(--fs-eyebrow); font-weight:600;
  color:var(--enseso-light); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:var(--s3);
}
.process__track {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2);
  position:relative; margin-top:var(--s10);
}
.process__track::before {
  content:''; position:absolute;
  top:44px; left:calc(12.5% + 20px); right:calc(12.5% + 20px); height:2px;
  background:linear-gradient(to right, var(--cyan), var(--enseso-light)); opacity:.35; z-index:0;
}
.pstep { text-align:center; position:relative; z-index:1; padding:0 var(--s2) var(--s4); }
.pstep__icon {
  width:88px; height:88px; border-radius:50%;
  background:rgba(0,27,63,.6); border:2px solid rgba(0,197,217,.25);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--s3);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
  position:relative;
}
.pstep:hover .pstep__icon { border-color:var(--cyan); background:rgba(0,197,217,.1); transform:translateY(-4px); }
.pstep__num { position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:var(--cyan); color:var(--navy-deep); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pstep h3 { color:#fff; font-size:1rem; font-weight:700; margin-bottom:var(--s1); }
.pstep p  { color:rgba(255,255,255,.52); font-size:.8rem; line-height:1.6; }
.pstep__tag { display:inline-block; margin-top:var(--s2); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--enseso-light); background:rgba(0,189,135,.1); border:1px solid rgba(0,189,135,.2); border-radius:100px; padding:3px 10px; }
@media (max-width:768px) { .process__track { grid-template-columns:repeat(2,1fr); gap:var(--s6); } .process__track::before { display:none; } }
@media (max-width:480px) { .process__track { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   BENEFICIOS
═══════════════════════════════════════════════════════════ */
.benefits { padding:var(--s16) 0; background:var(--enseso-bg); }
.benefits__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.bcard { background:var(--paper); border:1px solid rgba(0,189,135,.15); border-radius:var(--r-lg); padding:var(--s6); transition:box-shadow .25s ease, transform .25s ease; }
.bcard:hover { box-shadow:0 8px 24px rgba(13,92,69,.1); transform:translateY(-3px); }
.bcard__icon { width:52px; height:52px; background:rgba(0,189,135,.1); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
.bcard h3 { font-size:var(--fs-h3); font-weight:600; color:var(--enseso); margin-bottom:var(--s1); }
.bcard p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; }
@media (max-width:768px) { .benefits__grid { grid-template-columns:1fr; } }
@media (min-width:481px) and (max-width:900px) { .benefits__grid { grid-template-columns:repeat(2,1fr); } }

/* ═══════════════════════════════════════════════════════════
   NOSOTROS
═══════════════════════════════════════════════════════════ */
.about { padding:var(--s16) 0; background:var(--mist); }
.about__text p { color:var(--slate); }
.about__text p+p { margin-top:var(--s3); }
.about__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s10); }
.acard { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); transition:box-shadow .25s ease, transform .25s ease; }
.acard:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.acard__icon { width:56px; height:56px; background:rgba(0,197,217,.08); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
.acard h3 { font-size:var(--fs-h3); font-weight:600; color:var(--navy); margin-bottom:var(--s1); }
.acard p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; }
@media (max-width:768px) { .about__cards { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   POR QUÉ PRINTEL
═══════════════════════════════════════════════════════════ */
.why { padding:var(--s16) 0; background:var(--paper); }
.why__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.wcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); transition:box-shadow .25s ease, transform .25s ease; }
.wcard:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.wcard__icon { width:52px; height:52px; background:rgba(0,197,217,.08); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
.wcard h3 { font-size:var(--fs-h3); font-weight:600; color:var(--navy); margin-bottom:var(--s1); }
.wcard p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; }
@media (max-width:640px) { .why__grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   TILES DE PRODUCTOS — grid full-bleed estilo catálogo
═══════════════════════════════════════════════════════════ */
.product-tiles { padding:var(--s16) 0 0; background:var(--paper); }
.product-tiles .section-header { margin-bottom:var(--s10); }

.tiles-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
}
.tile {
  position:relative; display:flex; flex-direction:column;
  aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(155deg, #001228 0%, #002558 45%, #001a3e 100%);
  transition:box-shadow .25s ease;
}
.tile:hover { box-shadow:0 14px 34px rgba(0,10,30,.35); z-index:1; }
.tile__media { flex:1; display:flex; align-items:center; justify-content:center; padding:1.75rem 1.75rem 0; overflow:hidden; }
.tile__media img { max-width:100%; max-height:100%; object-fit:contain; transition:transform .4s ease; }
.tile:hover .tile__media img { transform:scale(1.06); }
.tile__foot { padding:1.1rem 1.375rem 1.5rem; position:relative; z-index:2; }
.tile__eyebrow { display:block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cyan); margin-bottom:.35rem; }
.tile__title {
  color:#fff; font-size:1.05rem; font-weight:700; line-height:1.3;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.tile__title svg { flex-shrink:0; opacity:.55; transition:transform .2s ease, opacity .2s ease; }
.tile:hover .tile__title svg { opacity:1; transform:translateX(3px); }

@media (max-width:1100px) { .tiles-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px)  { .tiles-grid { grid-template-columns:repeat(2,1fr); } .tile { aspect-ratio:1/1; } }
@media (max-width:420px)  { .tiles-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   TIVE — tarjetas de producto (con imagen)
═══════════════════════════════════════════════════════════ */
.tive-products { padding:var(--s16) 0; background:var(--mist); }
.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.tcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease; }
.tcard:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.tcard__img { background:var(--mist); display:flex; align-items:center; justify-content:center; padding:var(--s6); aspect-ratio:4/3; }
.tcard__img img { max-height:190px; width:auto; object-fit:contain; }
.tcard__body { padding:var(--s6); display:flex; flex-direction:column; flex:1; }
.tcard__tagline { font-size:var(--fs-eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:var(--s1); }
.tcard h3 { font-size:var(--fs-h3); font-weight:600; color:var(--navy); margin-bottom:var(--s1); }
.tcard p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; flex:1; }
.tcard__cta { margin-top:var(--s4); font-size:var(--fs-sm); font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:.35rem; }
.tcard__cta svg { transition:transform .2s ease; }
.tcard:hover .tcard__cta svg { transform:translateX(3px); }
.tcard.hide { display:none; }
.tive-cta { text-align:center; margin-top:var(--s10); }
.tgrid--2col { grid-template-columns:repeat(2,1fr); max-width:800px; margin:0 auto; }
@media (max-width:768px) { .tgrid { grid-template-columns:1fr; } .tive-products { padding:var(--s12) 0; } }
@media (min-width:481px) and (max-width:900px) { .tgrid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .tive-products { padding:var(--s8) 0; } }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — cabecera de páginas interiores
═══════════════════════════════════════════════════════════ */
.page-hero {
  padding:calc(var(--nav-h) + var(--s10)) 0 var(--s10);
  background:linear-gradient(155deg, #001228 0%, #002558 45%, #001a3e 100%);
  text-align:center;
}
.page-hero .eyebrow { color:var(--cyan); }
.page-hero h1 { color:#fff; font-size:var(--fs-h1); margin-top:var(--s2); }
.page-hero p  { color:rgba(255,255,255,.65); font-size:var(--fs-lead); max-width:640px; margin:var(--s3) auto 0; line-height:1.75; }
@media (max-width:768px) { .page-hero { padding:calc(var(--nav-h) + var(--s6)) 0 var(--s8); } }

/* ═══════════════════════════════════════════════════════════
   FILTRO POR INDUSTRIA
═══════════════════════════════════════════════════════════ */
.industry-filter { padding:var(--s8) 0 var(--s4); background:var(--paper); }
.industry-filter__label { text-align:center; font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.1em; color:var(--gray); margin-bottom:var(--s3); }
.industry-pills { display:flex; flex-wrap:wrap; gap:.625rem; justify-content:center; }
.ipill {
  padding:.6rem 1.25rem; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); font-size:var(--fs-sm); font-weight:600; color:var(--slate);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.ipill:hover { border-color:var(--cyan); color:var(--navy); }
.ipill.active { background:var(--navy); border-color:var(--navy); color:#fff; }

.tive-catalog { padding:var(--s10) 0 var(--s16); background:var(--paper); }
.tive-catalog__empty { text-align:center; color:var(--gray); padding:var(--s10) 0; display:none; }
.tive-catalog__empty.show { display:block; }

/* ═══════════════════════════════════════════════════════════
   COMPARACIÓN RÁPIDA DE PRODUCTOS
═══════════════════════════════════════════════════════════ */
.comparison { padding:var(--s16) 0; background:var(--mist); }
.comparison-table { overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--sh-md); }
.comparison-table table { width:100%; min-width:640px; border-collapse:collapse; background:var(--paper); }
.comparison-table th, .comparison-table td { padding:var(--s4); border-bottom:1px solid var(--line); }
.comparison-table thead th { background:var(--paper); vertical-align:bottom; }
.comparison-table thead th:first-child { background:var(--mist); }
.comparison-table__product { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.comparison-table__product img { height:64px; width:auto; object-fit:contain; }
.comparison-table__product span { font-size:var(--fs-body); font-weight:700; color:var(--navy); }
.comparison-table tbody th { text-align:left; font-size:var(--fs-sm); font-weight:600; color:var(--slate); background:var(--mist); white-space:nowrap; }
.comparison-table tbody td { text-align:center; font-size:var(--fs-sm); color:var(--slate); }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom:none; }
.comparison-table tbody tr:hover td, .comparison-table tbody tr:hover th { background:rgba(0,197,217,.05); }

/* ═══════════════════════════════════════════════════════════
   PLATAFORMA TIVE
═══════════════════════════════════════════════════════════ */
.platform { padding:var(--s16) 0; background:var(--mist); }
.platform__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s10); align-items:center; }
.platform__img { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); background:var(--paper); padding:var(--s4); }
.platform__features { display:flex; flex-direction:column; gap:var(--s4); margin-top:var(--s6); }
.platform__feature { display:flex; gap:var(--s3); align-items:flex-start; }
.platform__feature-icon { width:40px; height:40px; border-radius:var(--r-md); background:rgba(0,197,217,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.platform__feature h4 { font-size:var(--fs-body); font-weight:600; color:var(--navy); margin-bottom:2px; }
.platform__feature p { font-size:var(--fs-sm); color:var(--gray); line-height:1.6; }
@media (max-width:860px) { .platform__grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   FILA DE MARCAS COMPATIBLES
═══════════════════════════════════════════════════════════ */
.brands { padding:var(--s6) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brands__label { text-align:center; font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.1em; color:var(--gray); margin-bottom:var(--s4); }
.brands__row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s8); }
.brands__row img { height:28px; width:auto; opacity:.65; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease; }
.brands__row img:hover { opacity:1; filter:grayscale(0); }

/* ═══════════════════════════════════════════════════════════
   PÁGINA DE PRODUCTO — hero con foto
═══════════════════════════════════════════════════════════ */
.product-hero {
  position:relative; min-height:60vh; display:flex; align-items:flex-end;
  padding-top:var(--nav-h); overflow:hidden; background:var(--navy-darker);
}
.product-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.product-hero__overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,10,30,.92) 0%, rgba(0,10,30,.55) 55%, rgba(0,10,30,.25) 100%);
}
.product-hero__inner { position:relative; z-index:2; width:100%; padding:var(--s10) 0 var(--s8); }
.product-hero .eyebrow { color:var(--cyan); }
.product-hero h1 { color:#fff; font-size:var(--fs-h1); margin-top:var(--s2); }
.product-hero p { color:rgba(255,255,255,.7); font-size:var(--fs-lead); max-width:640px; margin-top:var(--s3); line-height:1.75; }

/* ─── Franja de highlights ─── */
.phighlights { background:var(--paper); border-bottom:1px solid var(--line); }
.phighlights__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.phighlight { display:flex; align-items:center; gap:var(--s3); padding:var(--s6) var(--s4); border-right:1px solid var(--line); }
.phighlight:last-child { border-right:none; }
.phighlight__icon { width:44px; height:44px; border-radius:var(--r-md); background:rgba(0,197,217,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phighlight h4 { font-size:var(--fs-sm); font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; }
.phighlight p { font-size:.8rem; color:var(--gray); line-height:1.4; }
@media (max-width:900px) { .phighlights__grid { grid-template-columns:repeat(2,1fr); } .phighlight:nth-child(2) { border-right:none; } .phighlight:nth-child(3),.phighlight:nth-child(4) { border-top:1px solid var(--line); } .phighlight:nth-child(4) { border-right:none; } }
@media (max-width:480px) { .phighlights__grid { grid-template-columns:1fr; } .phighlight { border-right:none !important; } .phighlight+.phighlight { border-top:1px solid var(--line); } }

/* ─── Ficha técnica ─── */
.specs { padding:var(--s16) 0; background:var(--mist); }
.specs__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.spec-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); }
.spec-card h3 { font-size:var(--fs-h3); color:var(--navy); margin-bottom:var(--s3); }
.spec-row { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); padding:.55rem 0; border-bottom:1px solid var(--line); }
.spec-row:last-child { border-bottom:none; }
.spec-row dt { font-size:var(--fs-sm); color:var(--gray); }
.spec-row dd { font-size:var(--fs-sm); color:var(--slate); font-weight:600; text-align:right; }
@media (max-width:860px) { .specs__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .specs__grid { grid-template-columns:1fr; } }

/* ─── Diseñado para estos envíos (franja oscura) ─── */
.shipped-for { background:var(--navy-darker); padding:var(--s8) 0; }
.shipped-for__label { text-align:center; color:#fff; font-size:var(--fs-h3); font-weight:700; margin-bottom:var(--s6); }
.shipped-for__grid { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s8) var(--s10); }
.shipped-for__item { text-align:center; color:rgba(255,255,255,.65); font-size:var(--fs-sm); font-weight:500; max-width:110px; }
.shipped-for__item svg { margin:0 auto var(--s2); display:block; }

/* ═══════════════════════════════════════════════════════════
   CONTACTO
═══════════════════════════════════════════════════════════ */
.contact { padding:var(--s16) 0; background:var(--paper); }
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:center; }
.cinfo-items { display:flex; flex-direction:column; gap:var(--s4); margin-top:var(--s6); }
.citem { display:flex; align-items:center; gap:var(--s3); }
.citem__icon { width:48px; height:48px; background:rgba(0,197,217,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.citem__label { font-size:var(--fs-eyebrow); font-weight:500; color:var(--gray); text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:2px; }
.citem__val { font-size:var(--fs-body); font-weight:600; color:var(--navy); transition:color .2s ease; }
a.citem__val:hover { color:var(--cyan); }
.cta-card { background:var(--navy); background-image:radial-gradient(circle,rgba(0,197,217,.06) 1px,transparent 1px); background-size:22px 22px; border-radius:var(--r-lg); padding:var(--s8); color:#fff; }
.cta-card h3 { font-size:var(--fs-h2); color:#fff; margin-bottom:var(--s3); line-height:1.2; }
.cta-card p  { color:rgba(255,255,255,.7); margin-bottom:var(--s6); line-height:1.75; }
.cta-card__btns { display:flex; flex-direction:column; gap:var(--s3); }
@media (max-width:860px) { .contact__grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer { background:var(--navy-darker); border-top:1px solid rgba(255,255,255,.06); }
.footer__main { padding:var(--s8) 0 var(--s6); display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s4); }
.footer__logo img { height:32px; width:auto; filter:brightness(0) invert(1); opacity:.85; }
.footer__tag { font-size:var(--fs-sm); color:rgba(255,255,255,.42); }
.footer__contact { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.375rem var(--s3); font-size:var(--fs-sm); color:rgba(255,255,255,.42); }
.footer__contact a { transition:color .2s ease; }
.footer__contact a:hover { color:var(--cyan); }
.footer__sep { width:1px; height:12px; background:rgba(255,255,255,.15); display:inline-block; }
.footer__copy { padding:var(--s3) 0; border-top:1px solid rgba(255,255,255,.06); text-align:center; font-size:.78rem; color:rgba(255,255,255,.25); }

/* ─── Mobile spacing ─────────────────────────────────────── */
@media (max-width:768px) {
  .problem,.benefits,.about,.why,.contact { padding:var(--s12) 0; }
  .process { padding:var(--s12) 0; }
  .section-header { margin-bottom:var(--s6); }
  .contact__grid { gap:var(--s8); }
  .cta-card { padding:var(--s6); }
}
@media (max-width:480px) {
  .problem,.benefits,.about,.why,.contact { padding:var(--s8) 0; }
  .container { padding:0 var(--s3); }
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .fi,.hero__title .ht-brand,.hero__title .ht-main,.hero__title .ht-sub,.hero__sub,.hero__cta,.hero__scroll { opacity:1; transform:none; filter:none; }
  html { scroll-behavior:auto; }
}