/* ============================================================
   RESPONSIVE — la base es escritorio en styles.css y aquí se
   adapta hacia abajo. Probado en 375×667, 390×844, 430×932,
   tableta y escritorio.
   ============================================================ */

/* ---------- TABLETA ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .agent-layout{grid-template-columns:1fr;gap:32px}
  .agent-portrait{max-width:420px}
  .track-item .track-card{margin-left:-8%}
  .track-item:nth-child(even) .track-card{margin-right:-8%}
  .panel-shell{grid-template-columns:210px minmax(0,1fr)}
}

/* ---------- MÓVIL ---------- */
@media (max-width:768px){
  body{font-size:16px}

  /* Navegación */
  .nav-toggle{display:inline-flex;align-items:center;gap:8px}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,11,15,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:8px 0 16px;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px var(--gutter);border-bottom:1px solid rgba(174,183,194,.08);font-size:1rem}
  .nav a[aria-current="page"]::after{display:none}
  .nav .btn{margin:14px var(--gutter) 0}

  /* Hero: la foto va detrás, el texto siempre legible */
  .hero{min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:0}
  .hero--agent-left .hero-inner{direction:ltr}
  .hero-copy{padding-block:56px 34px;order:2;max-width:none}
  .hero-figure{order:1;max-width:340px;margin-inline:auto;margin-top:26px}
  .hero-figure img{mask-image:linear-gradient(180deg,#000 66%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
  .hero-badge{position:static;margin-top:-24px;display:inline-block}
  .hero::before{background:
    radial-gradient(120% 70% at 60% 12%,rgba(35,168,224,.22),transparent 60%),
    linear-gradient(180deg,rgba(8,11,15,.35) 0%,rgba(7,19,31,.88) 46%,var(--carbon) 100%)}
  .btn-row .btn{width:100%}
  .btn-row--secondary .btn{width:auto;flex:1 1 auto}

  /* Confianza */
  .trust-list{gap:12px 20px;padding:18px 0}
  .trust-list li{font-size:.64rem;letter-spacing:.14em}

  /* Servicios: tarjeta completa bajo la imagen */
  .track::before{display:none}
  .track{gap:34px}
  .track-item{grid-template-columns:1fr;gap:0}
  .track-item .track-media,
  .track-item:nth-child(even) .track-media{grid-column:1;grid-row:1}
  .track-item .track-card,
  .track-item:nth-child(even) .track-card{grid-column:1;grid-row:2;margin:-34px 12px 0;}
  .track-meta div{flex-direction:column;gap:2px}
  .track-meta dt{min-width:0}

  /* Proceso */
  .step{grid-template-columns:1fr;gap:8px}
  .step-num{font-size:1.9rem}

  /* Formularios cómodos */
  .form-grid{grid-template-columns:1fr}
  .field input,.field select,.field textarea{font-size:16px} /* evita el zoom de iOS */

  /* Barra inferior */
  .mobile-bar{display:flex}
  .fab{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.has-mobile-bar{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

  /* Panel */
  .panel-shell{grid-template-columns:1fr}
  .panel-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .panel-nav{grid-template-columns:repeat(2,1fr);display:grid}
  .footer-grid{gap:28px}
}

/* ---------- MÓVIL PEQUEÑO (375×667) ---------- */
@media (max-width:400px){
  :root{--gutter:18px}
  h1{font-size:2.35rem}
  .hero-figure{max-width:280px}
  .mobile-bar a{font-size:.72rem;padding:11px 4px}
  .stat-row{gap:22px}
}

/* ---------- ESCRITORIO AMPLIO ---------- */
@media (min-width:1440px){
  :root{--maxw:1320px}
}

/* ---------- ORIENTACIÓN HORIZONTAL EN MÓVIL ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-copy{padding-block:40px}
}