/* ==========================================================================
   BERRÍO & ASOCIADOS — Hoja de estilos responsive
   --------------------------------------------------------------------------
   El diseño base (css/styles.css) está construido "mobile first".
   Aquí se añaden progresivamente los ajustes para pantallas mayores.

   Puntos de quiebre utilizados:
     480px   → móviles grandes
     640px   → móviles horizontales / tablets pequeñas
     768px   → tablets
     1024px  → escritorio (navegación horizontal)
     1280px  → escritorio amplio
   ========================================================================== */

/* ==========================================================================
   ≥ 480px — MÓVILES GRANDES
   ========================================================================== */
@media (min-width: 480px) {
  :root { --gutter: 1.5rem; }

  /* Los botones dejan de ocupar todo el ancho */
  .hero__actions,
  .cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cta__actions { justify-content: center; }

  .radios { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ≥ 640px — MÓVILES HORIZONTALES / TABLETS PEQUEÑAS
   ========================================================================== */
@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .auto-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .tech-cards { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }

  /* Los conectores verticales sobran cuando hay varias columnas */
  .flow__step::after { display: none; }

  .form__row { grid-template-columns: repeat(2, 1fr); gap: 0 var(--esp-md); }

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

  /* --- Diagrama circular de tecnología transversal ---
     A partir de aquí hay espacio suficiente para distribuir las
     disciplinas alrededor del núcleo sin recortar las etiquetas. */
  .orbit {
    --radio-orbita: 150px;
    display: block;
    aspect-ratio: 1;
  }
  .orbit__ring {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(201, 162, 39, 0.25);
  }
  .orbit__ring--outer { width: 100%; height: 100%; animation: spinSlow 60s linear infinite; }
  .orbit__ring--inner {
    width: 62%; height: 62%;
    border-style: solid;
    border-color: rgba(248, 247, 242, 0.1);
  }

  .orbit__core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 42%;
  }

  .orbit__items { display: block; position: absolute; inset: 0; }
  .orbit__item {
    position: absolute;
    top: 50%; left: 50%;
    /* --i: índice del elemento; 9 elementos = 40° de separación */
    transform:
      rotate(calc(var(--i) * 40deg))
      translate(var(--radio-orbita))
      rotate(calc(var(--i) * -40deg));
  }
  .orbit__item span { transform: translate(-50%, -50%); }

  /* Tarjetas flotantes decorativas del hero */
  .hero-card--float { display: inline-flex; position: absolute; }
  .hero-card--float-1 { top: -18px; left: -12px; animation: floatY 6s ease-in-out infinite; }
  .hero-card--float-2 { bottom: -20px; right: -8px; animation: floatY 7s ease-in-out infinite 1.5s; }

  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

/* ==========================================================================
   ≥ 768px — TABLETS
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 2rem; --header-h: 80px; }

  .form { padding: var(--esp-lg); }

  .footer__top { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); gap: var(--esp-md); }

  /* Enfoque multidisciplinario */
  .venn { width: min(100%, 460px); }

  /* Órbita: se amplía el radio */
  .orbit { --radio-orbita: 175px; }
  .orbit__item span { font-size: 0.68rem; }

  /* Analítica: la tercera tarjeta ocupa el ancho completo */
  .analytics { grid-template-columns: repeat(2, 1fr); }
  .analytics__item:last-child { grid-column: 1 / -1; }
  .analytics__item:last-child .flow-svg { max-width: 420px; margin-inline: auto; }

  /* Proceso: línea horizontal */
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-md);
  }
  .steps::before {
    top: 22px; bottom: auto; left: 12%; right: 12%;
    width: auto; height: 1px;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.15), var(--dorado), rgba(201, 162, 39, 0.15));
  }
  .step { flex-direction: column; gap: var(--esp-sm); text-align: center; }
  .step__num { margin-inline: auto; }

  .whatsapp { right: 1.5rem; bottom: 1.5rem; }
  .to-top { right: 1.5rem; bottom: 5.75rem; }
}

/* ==========================================================================
   ≥ 900px — TABLETS GRANDES
   ========================================================================== */
@media (min-width: 900px) {
  .services { grid-template-columns: repeat(3, 1fr); }
  .tech-cards { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .diff-grid { grid-template-columns: repeat(4, 1fr); }
  .auto-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   ≥ 1024px — ESCRITORIO
   La navegación pasa de menú lateral a barra horizontal.
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- Navegación horizontal --- */
  .nav-toggle { display: none; }

  .nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    /* Se anula el panel deslizante del móvil: sin transformación
       y sin transición, para que no quede un estado intermedio
       si la ventana cambia de tamaño durante la animación. */
    transform: none;
    transition: none;
    overflow: visible;
  }
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }
  .nav__link {
    position: relative;
    padding: 0.5rem 0.75rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--verde-oscuro);
    border-bottom: none;
    /* Se anulan los estados iniciales de la animación móvil */
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .nav__cta-item { opacity: 1; transform: none; margin-top: 0; margin-left: 0.5rem; animation: none !important; }
  .nav__cta-item .btn { width: auto; }

  /* Subrayado dorado animado */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: 0.25rem;
    height: 1.5px;
    background: var(--dorado);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--trans);
  }
  .nav__link:hover::after,
  .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
  .nav__link:hover, .nav__link.is-active { color: var(--verde-esmeralda); }

  .nav-backdrop { display: none !important; }

  /* --- Hero a dos columnas --- */
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }

  /* --- Quiénes somos --- */
  .about__layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .pillars { grid-template-columns: 1fr; }

  /* --- Enfoque multidisciplinario --- */
  .venn__layout { grid-template-columns: 1fr 1fr; }
  .section__head .section__eyebrow { justify-content: center; }

  /* --- Tecnología --- */
  .tech-cards { grid-template-columns: repeat(4, 1fr); }

  /* --- Analítica --- */
  .analytics { grid-template-columns: repeat(3, 1fr); }
  .analytics__item:last-child { grid-column: auto; }
  .analytics__item:last-child .flow-svg { max-width: none; }

  /* --- Del dato a la decisión: cinco columnas con conector --- */
  .flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }
  .flow__step { text-align: center; }
  .flow__step::after {
    display: block;
    left: auto; right: -0.6rem; bottom: auto; top: 50%;
    width: 0.6rem; height: 1px;
    background: linear-gradient(90deg, var(--dorado), transparent);
  }

  /* --- Órbita --- */
  .orbit__layout { grid-template-columns: 0.95fr 1.05fr; }
  .orbit { --radio-orbita: 200px; }

  /* --- Contacto --- */
  .contact__layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }

  /* --- Servicios --- */
  .areas { grid-template-columns: repeat(5, 1fr); }
  .radios { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ≥ 1280px — ESCRITORIO AMPLIO
   ========================================================================== */
@media (min-width: 1280px) {
  :root { --gutter: 2.5rem; }

  .nav__link { font-size: 0.92rem; padding: 0.5rem 0.95rem; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__name { font-size: 1.12rem; }

  .services { grid-template-columns: repeat(3, 1fr); }
  .hero-card--main { padding: var(--esp-lg); }
}

/* ==========================================================================
   AJUSTES PARA PANTALLAS MUY PEQUEÑAS (< 360px)
   ========================================================================== */
@media (max-width: 359px) {
  :root { --gutter: 1rem; }
  .brand__tagline { display: none; }
  .brand__name { font-size: 0.92rem; }
  .filters { justify-content: flex-start; }
  .whatsapp { width: 52px; height: 52px; }
}

/* ==========================================================================
   ORIENTACIÓN HORIZONTAL EN MÓVILES BAJOS
   Evita que el hero ocupe demasiado alto.
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--header-h) + 1.5rem); }
  .nav { padding-top: calc(var(--header-h) + 0.75rem); }
  .nav__link { padding: 0.6rem 0; }
}

/* ==========================================================================
   DISPOSITIVOS SIN HOVER (táctiles)
   Se neutralizan los efectos que dependen del cursor.
   ========================================================================== */
@media (hover: none) {
  .btn:hover { transform: none; }
  .service-card:hover,
  .pillar:hover,
  .tech-card:hover,
  .diff-card:hover,
  .auto-card:hover,
  .analytics__item:hover { transform: none; }
  .whatsapp__tooltip { display: none; }
}