/* ====================================================================
   RESPONSIVE — media queries mobile-first (min-width)
   Orden de breakpoints: 480px → 768px → 1024px → 1440px
   ==================================================================== */

/* ------------------------------ 480px ------------------------------ */
@media (min-width: 480px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.9rem; }
}

/* ------------------------------ 768px ------------------------------ */
@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }

  .contenedor {
    padding-inline: var(--space-md);
  }

  .seccion {
    padding-block: var(--space-xl);
  }

  /* Nav horizontal: se oculta la hamburguesa y se muestra el menú en línea */
  .nav__toggle {
    display: none;
  }

  .nav__menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
    background-color: transparent;
    border-bottom: none;
  }

  .nav__lista {
    flex-direction: row;
    gap: var(--space-md);
  }
}

/* ----------------------------- 1024px ------------------------------ */
@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }

  .nav {
    padding-block: 0.75rem;
  }
}

/* ----------------------------- 1440px ------------------------------ */
@media (min-width: 1440px) {
  h1 { font-size: 4rem; }
}

/* ------------------- Categorías: grid de tarjetas por breakpoint ----- */
@media (min-width: 768px) {
  .categorias__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ------------------- CTA: foto y contenido lado a lado --------------- */
@media (min-width: 768px) {
  .cta__tarjeta {
    flex-direction: row-reverse;
    align-items: stretch;
  }

  .cta__contenido {
    flex: 1 1 55%;
    text-align: left;
    align-items: flex-start;
  }

  .cta__foto-marco {
    flex: 1 1 45%;
    aspect-ratio: auto;
  }
}

/* ------------------- Servicios: columnas por breakpoint ------------- */
@media (min-width: 768px) {
  .servicios__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ------------------------- Footer en columnas ----------------------- */
@media (min-width: 768px) {
  .footer__contenedor {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-lg);
    /* Con 4 columnas, 3 gaps de 4rem y la dirección completa en una de
       ellas, entre 768px y ~1000px no cabe todo en una fila. Sin wrap las
       columnas se comprimen y la dirección se parte en muchas líneas; con
       wrap + una base mínima para la columna de contacto, bajan a una
       segunda fila y luego se reagrupan solas al haber ancho. */
    flex-wrap: wrap;
  }

  .footer__marca {
    flex: 0 0 auto; /* el logo nunca se comprime */
  }

  .footer__nav,
  .footer__redes {
    flex: 0 1 auto;
  }

  .footer__contacto {
    flex: 1 1 16rem; /* la dirección se queda con el ancho sobrante */
  }
}

/* --------- Escala del radio "arco colonial" en pantallas más grandes -
   (afecta concepto/identidad/bienvenida/detalle, no solo el hero) ----- */
@media (min-width: 768px) {
  :root {
    --radius-arco: 110px 110px 18px 18px;
  }
}

@media (min-width: 1024px) {
  :root {
    --radius-arco: 140px 140px 22px 22px;
  }
}

/* ------------------- Hero: contenido más grande y alineado ----------- */
@media (min-width: 768px) {
  .hero__contenido {
    text-align: left;
    max-width: 40rem;
  }

  .hero__separador {
    margin-inline: 0;
  }

  .hero__subtitulo {
    margin-inline: 0;
  }

  .hero__acciones {
    justify-content: flex-start;
  }
}

/* ----- Concepto/Identidad/Bienvenida/Visítanos: foto + texto en --------
   columnas, alternado -------------------------------------------------- */
@media (min-width: 768px) {
  .concepto__grid,
  .identidad__grid,
  .bienvenida__grid,
  .visitanos__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .identidad__grid {
    flex-direction: row-reverse;
  }

  .concepto__texto-col,
  .identidad__texto-col,
  .bienvenida__texto-col,
  .visitanos__texto-col {
    text-align: left;
    flex: 1 1 50%;
  }

  .concepto__foto-marco,
  .identidad__foto-marco,
  .bienvenida__foto-marco,
  .visitanos__foto-marco {
    flex: 1 1 38%;
    max-width: 20rem;
  }

  .visitanos__acciones {
    justify-content: flex-start;
  }
}

/* ------------------- Tecnología: equipos en fila ---------------------- */
@media (min-width: 768px) {
  .tecnologia__equipos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------- Diferenciadores: columnas por breakpoint -------- */
@media (min-width: 768px) {
  .diferenciadores__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ------------------- Contacto: grid de tarjetas de info -------------- */
@media (min-width: 480px) {
  .contacto__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ------------------- Collage (Conócenos): más columnas ---------------- */
@media (min-width: 768px) {
  .collage__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 10rem;
    gap: var(--space-sm);
  }
}

@media (min-width: 1024px) {
  .collage__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 11rem;
  }
}

/* ------------------- Galería: columnas por breakpoint ----------------- */
@media (min-width: 768px) {
  .galeria__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ------------------- Detalle de experiencia: dos columnas ------------ */
@media (min-width: 768px) {
  .detalle__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .detalle__foto-marco {
    flex: 1 1 42%;
    aspect-ratio: 3 / 4;
  }

  .detalle__contenido {
    flex: 1 1 55%;
  }
}