/* ============================================================
   ACOMAR — Base
   ============================================================ */
html, body { background: #0b1b33; }
body { overflow-x: clip; }

::selection { background: #f2661d; color: #fff; }

.site-header {
  background: linear-gradient(to bottom, rgba(6,14,28,.75), transparent);
  backdrop-filter: blur(2px);
  transition: background .3s ease;
}
.site-header.is-scrolled {
  background: rgba(6,14,28,.92);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* ============================================================
   HERO ZOOM — Acercamiento masivo (Deep Zoom)
   #hero-zoom-container (450vh) se fija con ScrollTrigger
   (pin:true). La foto del barco hace scale() gigante con
   transform-origin fijo sobre un contenedor real de la cubierta;
   al llegar al máximo zoom se hace crossfade a fotos reales de
   lámina corrugada (3 colores) que ocupan toda la pantalla,
   simulando estar "dentro" de contenedores distintos mientras
   aparecen los textos de El Reto / Nuestra Propuesta / Why Choose Us.
   ============================================================ */
#hero-zoom-container {
  position: relative;
  /* la altura de scroll real la genera ScrollTrigger (pin:true + pinSpacing) */
}
.zoom-window {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #04202e;
}

.zoom-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.zoom-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* punto exacto sobre un contenedor real, bien adentro de la
     cubierta (no cerca del borde/agua) */
  transform-origin: 44% 74%;
  will-change: transform;
}

.zoom-texture-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Las texturas se dibujan más grandes que la pantalla (con margen
   de sobra) para que el paneo de #zoomTextureWrap nunca deje ver
   un borde vacío, sea cual sea la dirección del desplazamiento. */
.zoom-texture-img {
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  max-width: none;
  height: 130%;
  object-fit: cover;
  opacity: 0;
}

.zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,10,20,.4) 0%, rgba(0,10,20,.1) 25%, rgba(0,10,20,.1) 70%, rgba(0,10,20,.5) 100%);
}

/* ---- Texto héroe (Fase 1) ---- */
.zoom-hero-text {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  padding: 0 6vw;
}
.hero-eyebrow {
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(.7rem, 1vw, .9rem);
  color: #f2661d;
  margin-bottom: 1rem;
}
.hero-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.5rem, 13vw, 11rem);
  line-height: .88;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.hero-sub {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  color: rgba(255,255,255,.9);
  max-width: 28ch;
  margin-top: 1rem;
  margin-left: auto;
}
.zoom-hero-cta {
  margin-top: 2rem;
}
.hero-scroll-cue {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hero-scroll-cue span {
  width: 28px; height: 1px; background: rgba(255,255,255,.85);
}

/* ---- Paneles de texto sobre las texturas (Fases 3-5) ----
   pointer-events:none porque, aunque están en opacity:0 al inicio,
   siguen ocupando toda la pantalla y van después en el DOM que
   #zoomHeroText: sin esto, tapaban invisiblemente el botón del hero. */
.zoom-panel {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8vw;
  opacity: 0;
  pointer-events: none;
}
.dev-kicker {
  display: block;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: #f2661d;
  margin-bottom: 1.4rem;
}
/* En el panel naranja el kicker naranja-sobre-naranja no contrasta:
   ahí lo forzamos a blanco, pero al mismo tamaño que el resto de
   los kickers (sinergia con "Nuestra Propuesta"). */
#panelReto .dev-kicker {
  color: #fff;
}
.zoom-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1100px;
}
.dev-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* min-height en rem/vw (no em) reserva el mismo espacio en TODOS
   los títulos sin importar el font-size de cada uno individualmente,
   así los 3 párrafos siempre arrancan a la misma altura. */
.dev-item h4 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  min-height: clamp(3.7rem, 6.9vw, 5.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* "Complejidad Operativa" es más largo que los otros dos títulos:
   se reduce un poco su tamaño para que quepa en un solo renglón,
   igual que "Riesgo Financiero" y "Barreras Legales". */
.zoom-panel-grid .dev-item:first-child h4 {
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
}
.dev-item p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  font-weight: 500;
}
.dev-lead {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: #fff;
  text-transform: uppercase;
  max-width: 32ch;
  margin-bottom: 1.6rem;
}
.dev-desc {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  max-width: 62ch;
}

/* ---- Why Choose Us (Fase 5) ---- */
.wcu-title-solid {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .95;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.wcu-bullets-solid {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
  max-width: 1000px;
}
.wcu-bullets-solid .wcu-col { width: min(28vw, 300px); text-align: left; }
.wcu-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1.6rem;
}
.wcu-item:last-child { margin-bottom: 0; }
.wcu-item span {
  font-family: 'Anton', sans-serif;
  color: #f2661d;
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.wcu-item h5 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: #fff;
  margin-bottom: .5rem;
  letter-spacing: .01em;
}
.wcu-item p {
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255,255,255,.8);
  font-weight: 500;
}

/* ============================================================
   ESCENA 2 — Proceso en 4 pasos (pin horizontal)
   ============================================================ */
.scene2 {
  position: relative;
  background: #060e1c;
}
.scene2-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scene2-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.scene2-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #060e1c 0%, rgba(6,14,28,.55) 25%, rgba(6,14,28,.75) 75%, #060e1c 100%);
}

.scene2-header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: clamp(2.5rem, 8vh, 5rem);
  padding: 0 6vw;
}
.scene2-eyebrow {
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .8rem;
  color: #f2661d;
  margin-bottom: .75rem;
}
.scene2-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .95;
  color: #fff;
}

.scene2-track {
  position: relative;
  z-index: 2;
  width: min(90vw, 1200px);
  margin: 0 auto;
  height: 40vh;
}
.track-line {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.2);
}
.track-ship {
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  transform: translate(0, -50%);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
}
.track-ship-svg {
  width: 100%;
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
}
.track-step {
  position: absolute;
  width: 22%;
  opacity: 0;
  transform: translateY(28px);
}
.step-num {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  color: #f2661d;
  display: block;
  margin-bottom: .5rem;
}
.track-step h4 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .5rem;
}
.track-step p {
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255,255,255,.6);
}
.step-1 { left: 0%;  top: 8%; }
.step-2 { left: 26%; top: 62%; }
.step-3 { left: 52%; top: 8%; }
.step-4 { left: 78%; top: 62%; }

.scene2-progress {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(80vw, 900px);
  height: 3px;
  background: rgba(255,255,255,.12);
  z-index: 2;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: #f2661d;
}

/* ============================================================
   Secciones estándar
   ============================================================ */
.section-eyebrow {
  display: flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .8rem;
  color: #f2661d;
  margin-bottom: 1rem;
}
.section-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: .98;
  text-transform: uppercase;
  color: #fff;
}

.why-section { background: #0b1b33; border-top: 1px solid rgba(255,255,255,.06); }

.services-section { background: #060e1c; }
.service-card {
  background: #0f1e37;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 2.2rem;
}
.service-card-featured {
  background: linear-gradient(160deg, #f2661d, #c94f12);
  border-color: transparent;
}
.service-card-num {
  font-family: 'Anton', sans-serif;
  color: #f2661d;
  font-size: 1.1rem;
}
.service-card-featured .service-card-num { color: rgba(255,255,255,.85); }
.service-card h3 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 1.6rem;
  margin: .6rem 0 .2rem;
}
.service-card-tag {
  font-size: .85rem;
  font-style: italic;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.2rem;
}
.service-card-featured .service-card-tag { color: rgba(255,255,255,.85); }
.service-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.service-card li {
  font-size: .92rem;
  line-height: 1.4;
  color: rgba(255,255,255,.75);
  padding-left: 1.1rem;
  position: relative;
}
.service-card li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  background: #f2661d;
}
.service-card-featured li { color: rgba(255,255,255,.95); }
.service-card-featured li::before { background: #fff; }

.contact-section { background: #0b1b33; border-top: 1px solid rgba(255,255,255,.06); }
.cta-button {
  display: inline-block;
  background: #f2661d;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.cta-button:hover { background: #c94f12; transform: translateY(-2px); }

.cta-tagline {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: .01em;
  color: rgba(255,255,255,.75);
}

/* Dos contactos, misma estructura visual lado a lado (apilados en mobile) */
.contact-people {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .contact-people { grid-template-columns: 1fr 1fr; }
}
.contact-people .contact-grid:first-child {
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) {
  .contact-people .contact-grid:first-child {
    padding-bottom: 0;
    padding-right: 3rem;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.08);
  }
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  text-align: left;
}
.contact-grid span {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #f2661d;
  margin-bottom: .5rem;
}
.contact-grid p, .contact-grid a { font-size: 1rem; color: rgba(255,255,255,.85); }
.contact-grid a:hover { color: #f2661d; }

.contact-web {
  margin-top: 3rem;
  text-align: center;
}
.contact-web span {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #f2661d;
  margin-bottom: .5rem;
}
.contact-web p { font-size: 1rem; color: rgba(255,255,255,.85); }

.site-footer { background: #060e1c; border-top: 1px solid rgba(255,255,255,.06); }

/* ============================================================
   Responsive: ajustes para pantallas pequeñas
   ============================================================ */
@media (max-width: 768px) {
  /* En móvil el contenido de los paneles (El Reto / Nuestra Propuesta /
     Por Qué Elegirnos) es más alto que la pantalla. Si se queda
     centrado, se desborda tanto arriba (tapando el título detrás del
     header) como abajo. Anclamos arriba en vez de centrar: así el
     desborde ocurre solo abajo, donde no se nota. */
  .zoom-panel {
    justify-content: flex-start;
    padding-top: 110px;
  }
}