/* ==========================================================================
   SECCIONES específicas de la landing (en orden de aparición)
   ========================================================================== */

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative; overflow: hidden;
  background: var(--g-dark); color: #cfdcec;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 8vw, 6.5rem);
}
/* Grilla sutil de fondo (evoca redes logísticas) */
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(53,198,207,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,198,207,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero__title { color: #fff; margin-bottom: 1.25rem; }
.hero__lead { font-size: var(--fs-lg); color: #b9c9dd; max-width: 600px; margin-bottom: 2rem; }
.hero__lead strong { color: #fff; font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.1rem; }
.hero__calendly { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-cyan); font-size: var(--fs-sm); font-weight: 500; }
.hero__calendly:hover { color: #fff; text-decoration: underline; }
.hero__proof { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.hero__proof li { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: #cfdcec; }
.hero__proof .icon { color: var(--c-green-light); }

/* Órbitas animadas alrededor del logo */
.hero__visual { display: flex; justify-content: center; }
.orbit { position: relative; width: min(420px, 80vw); aspect-ratio: 1; }
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(53,198,207,.35); }
.orbit__ring--1 { animation: spin 40s linear infinite; }
.orbit__ring--2 { inset: 12%; border-style: solid; border-color: rgba(111,211,160,.25); animation: spin 28s linear infinite reverse; }
.orbit__ring--3 { inset: 24%; border-color: rgba(255,255,255,.12); }
.orbit__core {
  position: absolute; inset: 27%; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 80px rgba(53,198,207,.45);
  animation: float 6s ease-in-out infinite;
}
.orbit__core img { width: 96%; border-radius: 50%; }
.orbit__node {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(18, 40, 74, .85); border: 1px solid rgba(53,198,207,.5); color: var(--c-cyan);
  box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: float 5s ease-in-out infinite;
}
.orbit__node .icon { width: 24px; height: 24px; }
.orbit__node--a { top: 4%;  left: 12%; }
.orbit__node--b { top: 16%; right: 0;  animation-delay: -1.2s; color: var(--c-green-light); }
.orbit__node--c { bottom: 8%; right: 12%; animation-delay: -2.4s; }
.orbit__node--d { bottom: 22%; left: -2%; animation-delay: -3.6s; color: var(--c-green-light); }

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ----------------------------------------------------------------- PAINS */
.pain-card {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem;
  border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #bfe3df; }
.pain-card .icon { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: #fdf0e9; color: var(--c-rust); }
.pain-card p { margin: 0; font-weight: 500; }
.pains__bridge {
  margin: 2.75rem auto 0; max-width: 680px; text-align: center; font-family: var(--f-head);
  font-size: var(--fs-lg); font-weight: 600; color: var(--c-teal);
}

/* -------------------------------------------------------------- SHOWREEL */
.reel { max-width: 960px; margin-inline: auto; }
.reel__screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #17406b, var(--c-navy-950) 70%);
  border: 1px solid rgba(53,198,207,.25); box-shadow: var(--shadow-lg);
}
.reel__screen iframe, .reel__screen video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.reel-scene {
  position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 3rem);
  align-items: center; padding: clamp(1.25rem, 5vw, 3.5rem);
  opacity: 0; transform: scale(1.03); transition: opacity .8s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}
.reel-scene.is-active { opacity: 1; transform: none; }
.reel-scene__visual {
  position: relative; width: clamp(90px, 20vw, 190px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--g-brand); color: #fff;
  box-shadow: 0 0 60px rgba(53,198,207,.5);
}
.reel-scene__visual::before, .reel-scene__visual::after {
  content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1.5px solid rgba(53,198,207,.45);
  animation: pulse 2.4s ease-out infinite;
}
.reel-scene__visual::after { animation-delay: 1.2s; }
.reel-scene__visual .icon { width: 44%; height: 44%; stroke-width: 1.6; }
.reel-scene__step { font-family: var(--f-head); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-cyan); }
.reel-scene__title { font-size: clamp(1.15rem, .8rem + 2vw, 2.1rem); color: #fff; margin: .35rem 0 .75rem; }
.reel-scene__items { display: grid; gap: .45rem; }
.reel-scene__items li {
  display: flex; gap: .55rem; align-items: center; color: #cfdcec; font-size: clamp(.8rem, .7rem + .5vw, 1rem);
  opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reel-scene.is-active .reel-scene__items li { opacity: 1; transform: none; }
.reel-scene.is-active .reel-scene__items li:nth-child(2) { transition-delay: .25s; }
.reel-scene.is-active .reel-scene__items li:nth-child(3) { transition-delay: .5s; }
.reel-scene__items .icon { color: var(--c-green-light); width: 1.1em; height: 1.1em; }

@keyframes pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

.reel__controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.reel__play {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.reel__play:hover { background: rgba(255,255,255,.14); }
.reel__steps { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; }
.reel__step { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: #8ea3bd; font-size: var(--fs-xs); font-weight: 500; }
.reel__step.is-active { color: #fff; }
.reel__bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: .45rem; }
.reel__bar i { display: block; height: 100%; width: 0; background: var(--g-brand); }
.reel__step.is-done .reel__bar i { width: 100%; }

/* -------------------------------------------------------------- SERVICES */
.service-card {
  position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem;
  border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card--featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--g-brand) border-box; }
.service-card__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.25rem;
  background: var(--g-brand); color: #fff; box-shadow: 0 8px 20px rgba(19,138,143,.3);
}
.service-card__icon .icon { width: 28px; height: 28px; }
.service-card > p { color: var(--c-muted); font-size: var(--fs-sm); }
.service-card .check-list { margin: .5rem 0 1.25rem; }
.service-card__fit {
  margin: auto 0 0; padding-top: 1rem; border-top: 1px dashed var(--c-line); font-size: var(--fs-sm); color: var(--c-muted);
}
.service-card__fit strong { color: var(--c-teal); }

/* ---------------------------------------------------------------- METHOD */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: step; }
.timeline__item {
  position: relative; padding: 1.75rem 1.5rem 1.5rem; background: #fff; border-radius: var(--radius);
  border: 1px solid var(--c-line); overflow: hidden;
}
.timeline__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g-brand); }
.timeline__num {
  display: block; font-family: var(--f-head); font-weight: 700; font-size: 2.2rem; line-height: 1; margin-bottom: .6rem;
  background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.timeline__item h3 { font-size: 1.1rem; }
.timeline__item p { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: .5rem; }

.kpis { margin-top: 3.5rem; text-align: center; }
.kpis__title { font-size: 1.05rem; color: var(--c-ink); margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------- WHY */
.why__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; }
.reason { display: flex; gap: 1rem; padding: 1.25rem; border-radius: var(--radius); background: var(--c-tint); }
.reason .icon { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: #fff; color: var(--c-teal); box-shadow: var(--shadow-sm); }
.reason h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.reason p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.why__sectors { margin-top: 1.75rem; color: var(--c-muted); font-size: var(--fs-sm); }
.why__sectors strong { color: var(--c-ink); }

.founder {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  text-align: center; padding: 2.25rem 1.75rem; border-radius: var(--radius-lg);
  background: linear-gradient(#fff, #fff) padding-box, var(--g-brand) border-box; border: 2px solid transparent;
  box-shadow: var(--shadow);
}
.founder__photo { width: 140px; height: 140px; margin: 0 auto 1rem; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--c-cyan), var(--shadow); }
.founder__name { margin-bottom: .15rem; }
.founder__role { color: var(--c-teal); font-weight: 600; font-size: var(--fs-sm); }
.founder__quote { font-style: italic; color: var(--c-muted); font-size: var(--fs-sm); }
.founder__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.founder__links .btn:hover .icon { transform: none; }

/* --------------------------------------------------------------- PRICING */
.model-card { padding: 1.75rem 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); text-align: center; }
.model-card .icon { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: #e2f6ec; color: var(--c-green); margin-bottom: 1rem; }
.model-card h3 { font-size: 1.05rem; }
.model-card p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------- CONTACT */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__intro p { color: #b9c9dd; }
.contact__benefits { display: grid; gap: .7rem; margin: 1.75rem 0 2.25rem; }
.contact__benefits li { display: flex; gap: .6rem; align-items: center; color: #e6eef7; }
.contact__benefits .icon { color: var(--c-green-light); }

.calendly-card {
  display: flex; gap: 1rem; padding: 1.5rem; border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid rgba(53,198,207,.3);
}
.calendly-card > .icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(53,198,207,.15); color: var(--c-cyan); }
.calendly-card h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.calendly-card p { font-size: var(--fs-sm); margin-bottom: 1rem; }

.lead-form {
  background: #fff; color: var(--c-ink); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}

/* Barra CTA fija en móvil */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: .6rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(11, 26, 51, .95); backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform .3s var(--ease);
}
.mobile-cta.is-visible { transform: none; }

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1024px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero__grid, .why__grid, .contact__grid { grid-template-columns: 1fr; }
  .orbit { width: min(280px, 70vw); }
  .founder { position: static; }
}

@media (max-width: 600px) {
  .timeline { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .hero__visual { display: none; } /* en móvil, el titular y el CTA van primero */
  .reel__screen { aspect-ratio: 4 / 3; }
  .reel-scene { grid-template-columns: 1fr; text-align: center; justify-items: center; align-content: center; gap: .75rem; }
  .reel-scene__visual { width: 64px; }
  .reel-scene__items { display: none; }
  .reel__step span:last-child { display: none; }
  .mobile-cta { display: flex; }
}