/* ==========================================================================
   Responsive overrides
   Este archivo NO modifica style.css (la versión desktop queda intacta).
   Se carga después de style.css, así que estas reglas solo entran en
   juego dentro de los media queries y ganan la cascada por orden de
   aparición cuando el ancho de pantalla coincide.
   ========================================================================== */

/* El botón hamburguesa no existe en el diseño desktop (style.css no lo
   contempla); se oculta por defecto y solo se muestra en el breakpoint
   móvil, donde reemplaza al nav horizontal. */
.nav__toggle { display: none; }

/* ============================== TABLET: <=1023px ============================== */
/* (1024px es el ancho exacto del diseño desktop: debe quedar 100% intacto) */
@media (max-width: 1023px) {

  .wrap { padding: 0 32px; }

  /* ---- Nav ---- */
  /* El nav horizontal (5 links + logo + padding) ya no entra desde acá para
     abajo; pasa a menú hamburguesa. .nav__links usa position:absolute con
     top:100% para colgar siempre justo debajo de .nav, sin depender de su
     alto exacto (que cambia otra vez en el breakpoint móvil). */
  .nav__inner { padding: 0 24px; position: relative; }

  .nav__topline { width: 340px; height: 9px; }
  .footer__bottomline { width: 340px; height: 9px; }

  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
  }

  .nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .25s ease;
  }

  .nav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--red);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }

  .nav__links.is-open { max-height: 320px; }

  .nav__links a {
    width: auto !important;
    text-align: left !important;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }

  /* ---- Hero ---- */
  .hero { height: auto; min-height: 450px; padding: 100px 24px; }
  .hero__logo { width: 460px; margin-bottom: 40px; }
  .hero__title { font-size: 34px; line-height: 1.2; }

  /* ---- Que hacemos ---- */
  .que-hacemos { height: auto; padding: 70px 0; }
  .section-intro { font-size: 23px; }
  .rule { margin: 0 auto 60px; }

  /* Las cascadas con delay de style.css (que hacemos, que compramos,
     contacto) son solo para desktop (fila): aca abajo las filas se apilan
     en columna, asi que cada elemento ya entra en su propio momento por
     posicion, sin necesitar delay artificial. */
  .brand-tag[data-reveal],
  .que-hacemos__text p[data-reveal],
  .collage-photo--a[data-reveal],
  .collage-photo--b[data-reveal],
  .collage-photo--c[data-reveal],
  .que-compramos .section-title__rule[data-reveal],
  .que-compramos .section-title[data-reveal],
  .que-compramos__col[data-reveal],
  .que-compramos__col--shift[data-reveal],
  .slideshow[data-reveal],
  .contacto .rule-white[data-reveal],
  .contacto .section-title[data-reveal],
  .contacto__info p[data-reveal],
  .collage-photo--d[data-reveal],
  .collage-photo--e[data-reveal],
  .collage-photo--f[data-reveal] { transition-delay: 0s; }

  /* align-items:center del desktop centra horizontalmente los bloques al
     pasar a columna; lo llevamos a stretch para que ocupen todo el ancho
     y queden alineados a la izquierda igual que el resto. */
  .que-hacemos__row { flex-direction: column; align-items: stretch; gap: 40px; }
  .que-hacemos__text { flex-basis: auto; width: 100%; }

  /* El collage superpuesto (posiciones absolutas en px) es una técnica
     pensada para el ancho fijo de escritorio. Por debajo de 1024px se
     simplifica a fotos apiladas en flujo normal, mismo estilo visual
     (bordes redondeados, sin sombra), sin overlaps que se rompan. */
  .que-hacemos__collage,
  .contacto__collage {
    position: static;
    flex-basis: auto;
    width: 100%;
    max-width: 622px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .que-hacemos__collage .collage-photo,
  .contacto__collage .collage-photo {
    position: static;
    width: 100% !important;
    height: 260px !important;
  }

  .brand-tag { font-size: 38px; }

  /* ---- Analizador ---- */
  .analizador { height: auto; padding: 50px 0; }
  .analizador__row { flex-direction: column; align-items: flex-start; gap: 30px; }
  .analizador__photo { width: 100%; flex-basis: auto; }

  /* ---- Que compramos ---- */
  .que-compramos { height: auto; padding: 70px 0; }
  .que-compramos .wrap { padding-left: 32px; padding-right: 32px; }
  .que-compramos__row { flex-direction: column; gap: 50px; }
  .que-compramos__left { flex-basis: auto; width: 100%; }
  .section-title__main { font-size: 30px; }

  .slideshow { flex-basis: auto; width: 100%; margin-top: 40px; }
  .slideshow__viewport { height: 320px; }
  .slideshow__controls { justify-content: center; }

  /* ---- Ventajas ---- */
  .ventajas { height: auto; padding: 70px 0; }

  /* ---- Proveedores ---- */
  /* Unifica las 3 columnas en una sola lista continua: los divs de columna
     y el <ul> interno desaparecen del árbol de layout (display:contents) y
     sus <li> pasan a fluir directamente como una sola lista dentro de
     .proveedores__row. */
  .proveedores__row { display: block; }
  .proveedores__col,
  .proveedores__col > ul { display: contents; }

  /* ---- Contacto ---- */
  .contacto { height: auto; padding: 70px 0; }
  .contacto__row { flex-direction: column; align-items: stretch; gap: 50px; }
  .contacto__info { text-align: left; }
  .contacto__info .section-title { margin-bottom: 60px; }
}

/* ============================== MOBILE: <=767px ============================== */
@media (max-width: 767px) {

  body { padding-top: 56px; }

  .wrap { padding: 0 20px; }

  /* ---- Nav ---- */
  .nav { height: 56px; }

  .nav__inner { padding: 0 20px; }

  .nav__logo img { height: 12.75px; }

  .nav__topline { width: 160px; height: 6px; }
  .footer__bottomline { width: 160px; height: 6px; }

  /* ---- Hero ---- */
  .hero { min-height: 390px; padding: 105px 20px; }
  .hero__logo { width: 100%; max-width: 320px; margin-bottom: 28px; }
  .hero__title { font-size: 19px; line-height: 1.2; }

  /* ---- Que hacemos ---- */
  .que-hacemos { padding: 75px 0; }

  .section-intro {
    font-size: 19px;
    margin-bottom: 32px;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .rule { margin: 0 auto 40px; }

  .que-hacemos__collage .collage-photo,
  .contacto__collage .collage-photo {
    height: 220px !important;
  }

  .brand-tag { font-size: 30px; }
  .brand-tag__sub { font-size: 16px; }
  .que-hacemos__text p { font-size: 15px; line-height: 1.6; }

  /* ---- Analizador ---- */
  .analizador { padding: 75px 0; }
  .analizador__text { font-size: 17px; }

  /* ---- Que compramos ---- */
  .que-compramos { padding: 105px 0; }
  .que-compramos .wrap { padding-left: 20px; padding-right: 20px; }
  .section-title__eyebrow { font-size: 20px; }
  .section-title__main { font-size: 26px; }

  .que-compramos__lists { flex-direction: column; gap: 24px; }
  .que-compramos__col--shift { margin-top: 0; }

  /* gap slider <-> segunda lista, reducido 40% (40px -> 24px) */
  .slideshow { margin-top: 24px; }
  .slideshow__viewport { height: 240px; }
  .slideshow__controls { justify-content: center; }

  /* ---- Ventajas ---- */
  .ventajas { padding: 105px 0; }
  .ventajas .section-title { margin-bottom: 40px; }
  .ventajas__list { margin-bottom: 40px; }

  /* line-height:.9 (desktop) queda comodo en una sola linea, pero en mobile
     los li mas largos wrappean a 2 lineas y se ven pegadas. Solo se toca el
     interlineado interno; el margin-bottom entre li y li queda igual. */
  .ventajas__list li { line-height: 1.3; }

  /* ---- Proveedores ---- */
  .proveedores { padding: 135px 0; }
  .proveedores__row { margin-top: 40px; }

  /* padding-top y padding-bottom ya son iguales (135px), pero el ultimo li
     de la ultima columna aporta su margin-bottom de mas (24px -> 16.8px
     mas abajo) que no colapsa con el padding del section, sumandose al
     hueco de abajo. Se anula solo en ese ultimo item para que ambos
     paddings se vean iguales. */
  .proveedores__col:last-child li:last-child { margin-bottom: 0; }

  /* interlineado entre items, 30% menor que en desktop (24px -> 16.8px) */
  .proveedores__col li { margin-bottom: 16.8px; }

  /* ---- Contacto ---- */
  .contacto { padding: 105px 0; }
  .contacto__info .section-title { margin-bottom: 32px; }
  .contacto__collage { height: auto; }

  /* Las fotos quedan mas chicas/comprimidas en mobile, asi que el mismo
     degradado rojo (60% al fondo) se ve mucho mas intenso/sucio que en
     desktop. Se suaviza solo aqui. */
  .contacto__collage .gradient-overlay {
    background: linear-gradient(to bottom, rgba(200, 16, 46, 0), rgba(200, 16, 46, .25) 100%);
  }

  /* ---- Footer ---- */
  .footer { height: auto; padding: 42px 20px; }
  .footer p { font-size: 12px; }
  .footer__brand { display: block; }
}