/* ==========================================================================
   responsive.css — Media queries mobile-first
   Breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px
   Los estilos base (sin media query) son para movil (<640px).
   ========================================================================== */

/* ==========================================================================
   SM — 640px+
   Ajustes menores: tipografia, padding
   ========================================================================== */

@media (min-width: 640px) {
  /* Contenedor con mas padding lateral */
  :root {
    --container-pad: var(--space-8);
  }

  /* Grid de networks: ya 2 columnas por defecto, sin cambio */

  /* Footer: 2 columnas */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   MD — 768px+
   Navbar completa, grids de 2 columnas, hero ajustes
   ========================================================================== */

@media (min-width: 768px) {
  /* --- Navbar: mostrar links, ocultar hamburguesa ---------------------- */
  .nav-links {
    display: flex;
  }

  .hamburger {
    display: none;
  }

  .navbar__cta {
    display: inline-flex;
  }

  .mobile-menu {
    display: none;
  }

  /* --- Secciones con mas espacio vertical ------------------------------- */
  .section {
    padding-block: var(--space-24);
  }

  .section--sm {
    padding-block: var(--space-16);
  }

  /* --- Grids de 2 columnas --------------------------------------------- */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Features: 2 columnas */
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Networks: 3 columnas */
  .networks__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Security blocks: 2 columnas alternantes */
  .security__block {
    grid-template-columns: repeat(2, 1fr);
  }

  .security__block-content {
    order: 1;
  }

  .security__block-visual {
    order: 2;
  }

  /* Invertir orden en bloques pares */
  .security__block:nth-child(even) .security__block-content {
    order: 2;
  }

  .security__block:nth-child(even) .security__block-visual {
    order: 1;
  }

  /* Pricing: 2 columnas (la tercera se desbordara hasta lg) */
  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 4 columnas (brand ocupa 2) */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Circuit breaker: horizontal */
  .circuit-breaker {
    flex-direction: row;
    align-items: stretch;
  }

  .circuit-breaker__arrow {
    transform: rotate(-90deg);
    align-self: center;
  }
}

/* ==========================================================================
   LG — 1024px+
   Hero split, grids de 3 columnas, pasos horizontales
   ========================================================================== */

@media (min-width: 1024px) {
  /* --- Hero: layout 60/40 ---------------------------------------------- */
  .hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-16);
  }

  /* --- Grids de 3 columnas --------------------------------------------- */
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Features: 3 columnas */
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Pricing: 3 columnas */
  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Networks: 4 columnas */
  .networks__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- How it works: pasos horizontales con linea ---------------------- */
  .steps {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-6);
  }

  /* Linea conectora horizontal en vez de vertical */
  .steps::before {
    left: auto;
    top: 24px;
    bottom: auto;
    height: 2px;
    width: calc(100% - 200px);
    left: 100px;
  }

  .steps__progress {
    left: 100px;
    top: 24px;
    height: 2px;
    width: 0;
    transition: width 0.8s var(--ease-out-expo);
  }

  .step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
  }

  .step__content {
    padding-top: var(--space-4);
  }

  .step__text {
    max-width: 260px;
    margin-inline: auto;
  }

  /* --- Footer: 4 columnas reales --------------------------------------- */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

  /* --- Section header con mas margen ----------------------------------- */
  .section__header {
    margin-bottom: var(--space-20);
  }
}

/* ==========================================================================
   XL — 1280px+
   Espaciado generoso, grids de 4 columnas
   ========================================================================== */

@media (min-width: 1280px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hero con aun mas espacio */
  .hero__grid {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-20);
  }

  /* Secciones con mas breathing room */
  .section {
    padding-block: var(--space-32);
  }

  /* Navbar inner mas amplio */
  .navbar__inner {
    max-width: var(--container-2xl);
  }
}

/* ==========================================================================
   2XL — 1536px+
   Ajustes finales para pantallas grandes
   ========================================================================== */

@media (min-width: 1536px) {
  :root {
    --container-pad: var(--space-10);
  }

  /* Limitar anchos maximos para legibilidad */
  .hero__description {
    max-width: 600px;
  }

  .section-subtitle {
    max-width: 720px;
  }
}

/* ==========================================================================
   PANTALLAS MUY PEQUENAS — 320px a 380px
   Ajustes defensivos para evitar desbordamiento horizontal
   ========================================================================== */

@media (max-width: 380px) {
  :root {
    --container-pad: var(--space-4);
  }

  /* Reducir padding en cards */
  .card {
    padding: var(--space-4);
  }

  /* Botones a ancho completo */
  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Trust badges en columna */
  .hero__trust {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Tabla con scroll */
  .comparison-table {
    font-size: var(--font-size-xs);
  }

  /* Pricing card padding reducido */
  .pricing-card {
    padding: var(--space-5);
  }

  /* Networks: 2 columnas con menos gap */
  .networks__grid {
    gap: var(--space-3);
  }

  /* Reducir tamano de orbs en hero */
  .hero__orbs::before {
    width: 300px;
    height: 300px;
  }

  .hero__orbs::after {
    width: 250px;
    height: 250px;
  }
}

/* ==========================================================================
   LANDSCAPE en movil — evitar hero demasiado alto
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(72px + var(--space-6));
    padding-bottom: var(--space-8);
  }

  .section {
    padding-block: var(--space-12);
  }
}

/* ==========================================================================
   PRINT — estilos minimos para impresion
   ========================================================================== */

@media print {
  .navbar,
  .mobile-menu,
  .hero__orbs,
  .hero__particle,
  .logo-carousel,
  .cta-final__button::before,
  .steps__progress,
  .timeline__progress {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .card {
    backdrop-filter: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .section {
    padding-block: 2rem;
  }

  a {
    color: black;
    text-decoration: underline;
  }
}