/* =========================================================
   Landing – Estilos base
   Colores: principal #1a3e4b, secundario #f08139
   ========================================================= */
:root{
  /* Paleta */
  --color-primary:#1a3e4b;
  --color-secondary:#f08139;
  --color-text:#111827;
  --color-muted:#374151;
  --surface:#ffffff;
  --surface-alt:#f9fafb;

  /* UI */
  --radius:16px;
  --shadow:0 4px 12px rgba(0,0,0,.08);

  /* Hero */
  --hero-h-desktop:706px;       /* altura fija para desktop */

  /* Logos (experiencia) */
  --logo-gap:2rem;              /* separación entre tarjetas */
  --logo-card-w:180px;          /* ancho tarjeta */
  --logo-card-h:120px;          /* alto tarjeta */
  --logo-img-h:100px;           /* alto del logo interno */
  --logo-speed:25s;             /* velocidad del scroll */
  --logo-items:6;               /* cantidad de tarjetas únicas en la pista */
}

*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

#landing{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--color-text);
}

.section{padding:80px 20px}
.section-title{
  font-size:2rem;line-height:1.2;text-align:center;margin:0 0 40px;font-weight:800;color:var(--color-primary)
}

/* =========================================================
   HERO
   - Desktop: altura fija var(--hero-h-desktop)
   - Mobile: proporción 4:5 (altura=125vw, con tope)
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  overflow:hidden;
  color:#fff;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  /* Mobile por defecto: ~4/5 */
  height:clamp(420px, 125vw, 1350px);
}
@media (min-width:1024px){
  .hero{height:var(--hero-h-desktop);} /* altura fija desktop */
}

.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:translateZ(0);
}

/* Scrim para legibilidad del texto */
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

.hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 20px; text-align:center; z-index:1; max-width:1000px; margin:0 auto;
}
.hero-content h1{font-size:clamp(2rem,4vw,3rem); margin:0 0 16px; font-weight:800}
.hero-content p{font-size:clamp(1rem,1.6vw,1.25rem); margin:0 0 22px; max-width:820px}

/* =========================================================
   CTAs
   ========================================================= */
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.btn{
  display:inline-block; padding:12px 24px; border-radius:999px; font-weight:700; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-2px)} /* DRY: unificamos el hover */
.btn:focus-visible{outline:3px solid rgba(255,255,255,.9); outline-offset:2px}
.btn-primary{background:var(--color-secondary); color:#fff}
.btn-whatsapp{background:#25d366; color:#fff}
.btn-lg{padding:14px 28px; font-size:1.05rem}

/* =========================================================
   TARJETAS (reutilizable)
   ========================================================= */
.cards-grid{display:grid; gap:25px; max-width:1100px; margin:0 auto}
.cards-3{grid-template-columns:1fr}
@media (min-width:768px){ .cards-3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
  padding:28px 22px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.12)}
.card-title{font-size:1.15rem; margin:10px 0; color:var(--color-text); font-weight:700}
.card-text{font-size:.96rem; color:var(--color-muted); line-height:1.55}
.card-icon{width:48px; height:48px; margin-bottom:12px; flex:0 0 48px}

/* =========================================================
   TESTIMONIOS & CONTACTO
   ========================================================= */
.testimonials, .contact{background: var(--surface-alt);} /* fondo gris compartido */
.testimonials .card{display:flex; flex-direction:column; gap:10px}
.card-sign{font-weight:700; color:var(--color-primary); margin-top:6px}

.stars{display:flex; gap:4px; margin-top:8px}
.stars img{width:30px; height:30px}

/* =========================================================
   FORMULARIO
   ========================================================= */
.contact .form-card{max-width:640px; margin:0 auto; backdrop-filter:saturate(110%) blur(0px)}
.contact-cta{margin-top:24px; text-align:center}

/* =========================================================
   Experiencia (logos)
   ========================================================= */
.logo-carousel{overflow:hidden; width:100%; padding:2rem 0}

.logo-track{
  display:flex;
  gap:var(--logo-gap);
  animation: scroll var(--logo-speed) linear infinite;
  min-width:fit-content;
  white-space:nowrap;
}

.logo-card{
  flex:0 0 auto;
  background:#fff;
  padding:1rem;
  border-radius:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  display:flex; align-items:center; justify-content:center;
  width:var(--logo-card-w); height:var(--logo-card-h);
}

/* BUGFIX: faltaba el punto en la versión anterior (.logo-card img) */
.logo-card img{
  height:var(--logo-img-h);
  width:auto;
  object-fit:contain;
}

/* Animación parametrizada por variables */
@keyframes scroll{to{transform:translateX(calc(-1 * (var(--logo-card-w) + var(--logo-gap)) * var(--logo-items)));}}

/* Accesibilidad: respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .logo-track{animation-duration:1ms; animation-iteration-count:1}
}

/* =========================================================
   Ajustes responsivos finos
   ========================================================= */
@media (max-width:767px){
  .section{padding:64px 16px}
  .card{padding:24px 18px}

  /* Logos: variables específicas para mobile */
  :root{
    --logo-gap:1rem;
    --logo-card-w:120px;
    --logo-card-h:90px;
    --logo-img-h:70px;
    --logo-speed:13s;
  }
}

/* =========================================================
   Navegación móvil
   ========================================================= */
/* Texto blanco en menú móvil (si el fondo es oscuro) */
.mobile-menu.menu-container a{color:#ffffff !important}