/* 1. Importación desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

/* =================================================
   VARIABLES GLOBALES
   Aquí definimos los colores corporativos
   para reutilizarlos en todo el sitio
================================================= */
:root {
  --azul-principal: #131FA9;     /* Azul corporativo INDUMEQ */
  --azul-claro: #e9efff;         /* Fondo claro para secciones */
  --gris-claro: #f2f2f2;         /* Fondo gris */
  --negro: #111;                 /* Negro para footer */
  --blanco: #ffffff;             /* Blanco base */
  --texto: #222;                 /* Color de texto general */
  --radius-sm: 0.6rem;
  --radius-md: 1.2rem;
  --radius-lg: 2rem;

  --shadow-soft: 0 0.8rem 2rem rgba(0,0,0,0.08);
  --shadow-strong: 0 2rem 4rem rgba(0,0,0,0.15);
}

/* =================================================
   RESET GENERAL
   Eliminamos estilos por defecto del navegador
================================================= */
*,
*::before,
*::after {
  margin: 0;                     /* Elimina márgenes */
  padding: 0;                    /* Elimina rellenos */
  box-sizing: border-box;        /* Evita errores de tamaño */
  margin: 0;
  padding: 0;
}
body {
  font-family: "Poppins", system-ui, sans-serif;
}


html {
  font-size: 100%;
  scroll-behavior: smooth;
}
/* =================================================
   ESTILOS GENERALES DEL BODY
================================================= */
body {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--texto);           /* Color de texto */
  line-height: 1.6;              /* Espaciado entre líneas */
  background: var(--blanco);     /* Fondo blanco */
  line-height: 1.6;
  overflow-x: hidden; /* No scroll horizontal */
}

/* =================================================
   HEADER
================================================= */
.header {
  background: var(--blanco);     /* Fondo blanco */
  box-shadow: 0 2px 10px rgba(16, 28, 252, 0.05); /* Sombra ligera */
  position: sticky;              /* Header fijo al hacer scroll */
  top: 0;
  z-index: 1000;                 /* Siempre encima */
  transition: all 0.35s ease;
}

/* Contenedor del header */
.header-container {
  display: flex;                 /* Alinea elementos en fila */
  align-items: center;           /* Centra verticalmente */
  justify-content: space-between;/* Logo izquierda, menú derecha */
  padding: 1rem 4rem;
}

/* Logo */
.header-logo img {
  height: 5.5rem;                  /* Tamaño del logo */
}

/* Estado al hacer scroll */
.header.scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.12);
}

/* Logo se hace más pequeño */
.header.scrolled .header-logo img {
  height: 4.8rem;
  transition: height 0.3s ease;
}

/* =================================================
   NAVEGACIÓN
================================================= */
.nav-list {
  display: flex;                 /* Menú horizontal */
  list-style: none;              /* Quita viñetas */
  gap: 1.5rem;                     /* Espacio entre enlaces */
  margin-bottom: auto;
}

/* Enlaces del menú */
.nav-link {

  text-decoration: none;         /* Quita subrayado */
  color: #333;                   /* Color del texto */
  font-weight: 500;              /* Grosor medio */
  transition: color 0.3s ease;   /* Animación suave */
  padding: 1rem 1.4rem;
  border-radius: 0.6rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover (NO activo) */
.nav-link:hover {
  background-color: rgba(19, 31, 169, 0.12);
  color: var(--azul-principal);
}
/* Activo */
.nav-link.active {
  background-color: var(--azul-principal);
  color: #ffffff;
}
/* Línea inferior animada SOLO para activo */
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: -0.6rem;
  width: 80%;
  height: 0.3rem;
  background-color: var(--azul-principal);
  border-radius: 0.2rem;
}
/* Estilos para el botón Hamburguesa */
.nav-toggle {
    display: none; /* Oculto en escritorio */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.nav-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--azul-principal, #131fa9);
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* MEDIA QUERY PARA MÓVILES (Menos de 768px) */
@media (max-width: 768px) {
    .header-container {
        padding: 1rem 2rem; /* Reducimos padding lateral */
    }

    .nav-toggle {
        display: flex; /* Mostramos el botón */
    }

    .nav-list {
        position: fixed;
        top: 0;
        right: -100%; /* Oculto fuera de la pantalla */
        flex-direction: column;
        background-color: white;
        width: 70%; /* Ancho del menú lateral */
        height: 100vh;
        padding: 8rem 2rem;
        gap: 2rem;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s ease;
    }

    /* Clase que activaremos con JS */
    .nav-list.nav-list-visible {
        right: 0;
    }

    .nav-link {
        display: block;
        font-size: 1.2rem;
    }
}
/* =================================================
   HERO (IMAGEN PRINCIPAL)
================================================= */
.hero {
  position: relative;            /* Para usar overlay */
  min-height: min(85vh, 50rem);                  /* Altura casi pantalla completa */
  overflow: hidden;              /* Evita desbordes */
}

/* Imagen del hero */
.hero-img {
  width: 100%;                   /* Ocupa todo el ancho */
  height: 100%;                  /* Ocupa toda la altura */
  object-fit: cover;             /* No se deforma */

    /* Animación inicial */
  transform: scale(1.1);
  animation: heroZoom 18s ease-in-out infinite alternate;
}
/* Zoom suave de fondo */
@keyframes heroZoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1.5);
  }
}

/* Capa oscura encima de la imagen */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;                      /* Cubre todo */
  background: rgba(0, 0, 0, 0.792);  /* Oscurece la imagen */
  z-index: 0;
}

/* Contenedor del texto */
.hero-overlay {
  position: absolute; /* Fija la capa sobre la imagen */
  inset: 0;           /* Cubre el 100% del contenedor padre */
  display: flex;      /* Activa Flexbox para alinear el contenido */
  align-items: center;           /* Centrado vertical */
  justify-content: center;       /* Centrado horizontal */
  text-align: center;
  padding: 2rem;            /* Margen lateral para que el texto no toque el borde */
  z-index: 1;                    /* Sobre la capa oscura */
}

/* Texto principal */
.hero-title {
  color: var(--blanco);          /* Texto blanco */
  font-size: 3rem;               /* Tamaño grande */
  max-width: 70rem;              /* No se extiende demasiado */
  line-height: 1.2;               /* Ajusta el espacio vertical entre líneas; 1.2 hace que el título se vea compacto y sólido. */

  /* Estado inicial para una animación */
  opacity: 0;                    /* Hace que el elemento sea totalmente invisible al cargar la página. */
  transform: translateY(4rem);   /* Empuja el elemento 30px hacia abajo de su posición real para luego "subirlo". */
}

/* Animación del texto */
.animate-text {
  animation: textFadeUp 1.6s ease-out forwards;
  animation-delay: 0.4s;
}

/* Fade + slide */
@keyframes textFadeUp {
  to {
    opacity: 2;
    transform: translateY(0);
  }
}

/* =================================================
   BOTONES (REUTILIZABLES)
================================================= */
.btn {
  display: inline-block;
  padding: 1.2rem 2.8rem;            /* Tamaño del botón */
  border-radius: 2.5rem;           /* Bordes redondeados */
  text-decoration: none;         /* Quita subrayado */
  font-weight: 500;
  transition: all 0.3s ease;     /* Animación suave */
}

/* Botón principal */
.btn-primary {
  background: var(--azul-principal);
  color: var(--blanco);
}

/* Hover del botón principal */
.btn-primary:hover {
  background: #14238a;           /* Azul más oscuro */
}

/* Botón con borde */
.btn-outline {
  border: 0.2rem solid var(--azul-principal);
  color: var(--azul-principal);
}

/* Hover botón borde */
.btn-outline:hover {
  background: var(--azul-principal);
  color: var(--blanco);
}

/* =================================================
   QUIÉNES SOMOS
================================================= */
.about {
  display: grid;                 /* Layout en columnas */
  grid-template-columns: 1fr 1fr;/* Texto + imagen */
  gap: clamp(3rem, 6vw, 6rem);
  padding: clamp(4rem, 8vw, 8rem) 10%;
  align-items: center;
}

/* Texto de la sección */
.about-description {
  line-height: 1.8;
  max-width: 56rem;
}

/* Subtítulo */
.section-subtitle {
  text-transform: uppercase;
  color: var(--azul-principal);
  font-size:  clamp(0.9rem, 1.5vw, 1.1rem);
  margin-bottom: 0.5rem;
}

/* Título */
.section-title {
  font-family: 'Fredoka', sans-serif; /* 1. Cambia el tipo de letra */
  font-weight: bold;               /* 2. Lo pone en negrita */
  font-size: clamp(2rem, 4vw, 3.5rem);               /* 3. Aumenta el tamaño (era 2.3rem) */
  margin-bottom: 2rem;
}

/* Descripción */
.about-description {
font-size: clamp(1rem, 1.4vw, 1.25rem); 
  margin-bottom: 2.5rem;
  text-align: justify;
}

/* Botones de la sección */
.about-buttons {
  display: flex;
  gap: 1.5rem;
}

/* Imagen */
.about-image img {
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 2rem 4rem rgba(0,0,0,0.15);
  transform: scale(1.05);
}

/* =================================================
   QUÉ OFRECEMOS
================================================= */
.offer {
  background: var(--blanco); /* Fondo azul corporativo */
  color: var(--blanco);              /* Texto blanco */
  text-align: center;                /* Texto centrado */
  padding: 5rem 20%;                 /* Espaciado interno */

  /*para centrar*/
  display: flex;                /* Convierte al padre en un contenedor flexible */
  justify-content: center;      /* Centra la tarjeta horizontalmente */
  align-items: center;
}

/********tajeta nueva*******/
.ind-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rem;
  padding: 0.2rem;
  border-radius: 2.4rem;
  overflow: hidden;
  line-height: 1.6;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  
}

.ind-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;  /*centra el heading*/
  gap: 2.4rem;
  padding: 3.4rem;
  border-radius: 2.2rem;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.ind-card-heading {
  font-weight: 20rem;
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1.3;
  z-index: 1;
  color: #ffffff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.ind-card-text {
  z-index: 1;
  opacity: 0.8;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  color: #ffffff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Borde animado */
.ind-card::before {
  content: "";
  position: absolute;
  height: 350%;
  width: 1000%;
  border-radius: inherit;
  background: linear-gradient(to right, #131FA9, #131FA9);
  transform-origin: center;
  animation: ind-card-rotate 4.8s linear infinite paused;
  transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover */
.ind-card:hover::before {
  animation-play-state: running;
  z-index: -1;
  width: 20%;
}

.ind-card:hover .ind-card-heading,
.ind-card:hover .ind-card-text {
  color: #000000;
}

.ind-card:hover {
  box-shadow:
    0rem 6px 13px rgba(10, 60, 255, 0.1),
    0rem 24px 24px rgba(10, 60, 255, 0.09),
    0rem 55px 33px rgba(10, 60, 255, 0.05),
    0rem 97px 39px rgba(10, 60, 255, 0.01),
    0rem 152px 43px rgba(10, 60, 255, 0);
  transform: scale(1.05);
}

/* Animación única */
@keyframes ind-card-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* =================================================
   MERCADOS
================================================= */
.markets {
  padding: 8rem 10% 2rem 10%;
  text-align: center;
}

/* Contenedor de tarjetas */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr); /* 4 columnas */
  gap: 2rem;
  margin-top: 4rem;
}

/* Tarjeta individual */
.market-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;                  /* Oculta desbordes */
}

/* imagenes */
/* Contenedor general */
.wrapper {
  width: 100%;
  height: 26rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: -4rem;
}

/* Carrusel 3D */
.inner {
  --w: 9rem;
  --h: 5rem;
  --translateZ: 20rem;
  --rotateX: -12deg;
  --perspective: 100rem;

  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) perspective(var(--perspective));
  animation: rotating 25s linear infinite;
}

/* Animación */
@keyframes rotating {
  from {
    transform: translate(-50%, -50%) perspective(var(--perspective))
      rotateX(var(--rotateX)) rotateY(0);
  }
  to {
    transform: translate(-50%, -50%) perspective(var(--perspective))
      rotateX(var(--rotateX)) rotateY(1turn);
  }
}

/* Tarjeta */
.card {
  position: absolute;
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
    translateZ(var(--translateZ));
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen real */
.card-img {
  width: 180%;
  height: auto;
  object-fit: contain;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover */
.card:hover .card-img {
  filter: grayscale(0%);
  transform: scale(1.05);
}
/*-----------------------------------------------------------*/

/* Texto encima de la imagen */
.market-label {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);       /* Capa oscura */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: 1.3rem;
  font-weight: 600;
}

/* ===============================
   CLIENTES - GALERÍA
================================ */
.imq-clientes {
  padding: 90px 10%;
  background: #f5f6fa;
  text-align: center;
}

.imq-clientes-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 50px;
  font-family: "Fredoka";
}

/* CONTENEDOR PRINCIPAL */
.imq-clientes-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VENTANA */
.imq-clientes-window {
  max-width: min(100%, 90rem);
  max-width: 90rem;
  overflow: hidden;
}

/* TRACK */
.imq-clientes-track {
  display: flex;
  transition: transform 0.6s ease;
}

/* SLIDE */
.imq-clientes-slide {
  min-width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
}

/* LOGOS */
.imq-clientes-slide img {
  object-fit: contain;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.imq-clientes-slide img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/*   clientes    */
.cliente-item-1{
  width: 20%;
}
.cliente-item-2{
  width: 30%;
}
.cliente-item-3{
  width: 25%;
}
.cliente-item-4 {
  width: 15%;
}
.cliente-item-5{
  width: 14%;
}
.cliente-item-6{
  width: 23%;
}
.cliente-item-7{
  width: 25%;
}
.cliente-item-8{
  width: 25%;
}
.cliente-item-9{
  width: 27%;
}
.cliente-item-10{
  width: 20%;
}
.cliente-item-11{
  width: 25%;
}
.cliente-item-12{
  width: 30%;
}
.cliente-item-13{
  width: 27%;
}
.cliente-item-14{
  width: 20%;
}
.cliente-item-15{
  width: 25%;
}
.cliente-item-16{
  width: 30%;
}

/* BOTONES */
.imq-slider-btn {
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  width: 30%;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.imq-slider-btn:hover {
  background: rgba(0,0,0,0.85);
}

.imq-slider-btn.left {
  margin-right: 2rem;
}

.imq-slider-btn.right {
  margin-left: 2rem;
}



/* ===============================
   CONTACTO
================================ */
.contact {
  background: linear-gradient(135deg, #eef2ff, #f8f9ff);
  padding: 8.5rem 10%;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
}

/* TEXTO IZQUIERDA */
.contact-desc {
  font-size: 1.2rem;
  line-height: 2rem;
  margin-bottom: 3rem;
  color: #444;
  font-family: "fredoka";
}
.contact-subtitle{
  font-family: "fredoka";
  font-size: 2rem;
}
.contact-title{
  font-family: "fredoka";
  font-size: 3rem;
  margin: 0.5rem;
  line-height: 3rem;
}

/* COLUMNA CENTRAL */
.contact-center {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-item-content{
  font-family: "fredoka";
  font-size: 1.2rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.05rem;
  color: #222;
}

.contact-item i {
  color: var(--azul-principal);
  font-size: 1.2rem;
  margin-top: 0.3rem;
}

/* MAPA */
.contact-map iframe {
  width: 100%;
  height: 28rem;
  border-radius: 14px;
  border: none;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.15);
}

/* ===============================
   ANIMACIONES CONTACTO
================================ */
.reveal-contact {
  opacity: 0;
  transform: translateY(3rem);
}

.reveal-contact.active {
  animation: contactFadeUp 0.9s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

@keyframes contactFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================================================
   FOOTER
================================================= */
.main-footer {
  background-color: #1a1a1a;
  color: white;
  padding: 6rem 10%;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
  padding-bottom: 3.5rem;
  margin-bottom: 3.5rem;
}

.footer-logo {
  max-width: 15rem;
}

.footer-slogan {
  font-size: 2rem;
  font-weight: 40rem;
  text-align: right;
  max-width: 40rem;
  font-family: "fredoka";
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}

.footer-col h4 {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #fff;
}


.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 1rem;
}

.footer-col a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: #fff;
}

/* =================================================
   RESPONSIVE GLOBAL – TODOS LOS DISPOSITIVOS
================================================= */

/* ============== HEADER Y FOOTER ================*/
/* ===============================
   TABLETS (≤ 1024px)
================================ */
@media (max-width: 64rem) {

  /* HEADER */
  .header-container {
    padding: 1rem 2rem;
  }

  /* HERO */
  .hero-title {
    font-size: clamp(2rem, 4vw, 2.6rem);
  }

  /* CONTACTO → 2 COLUMNAS */
  .contact {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .contact-map iframe {
    height: 22rem;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  .footer-slogan {
    text-align: center;
  }
}

/* ===============================
   MÓVILES GRANDES (≤ 768px)
================================ */
@media (max-width: 48rem) {

  /* HERO */

  .hero {
    min-height: auto;       /* 👈 deja que la imagen mande */
    height: auto;           /* 👈 elimina alturas forzadas */
  }

  .hero-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  /* CONTACTO → 1 COLUMNA */
  .contact {
    grid-template-columns: 1fr;
    padding: 6rem 6%;
  }

  .contact-center {
    align-items: flex-start;
  }

  .contact-map iframe {
    height: 20rem;
  }

  /* FOOTER */
  .footer-top {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-logo {
    margin-inline: auto;
  }
}

/* ===============================
   MÓVILES PEQUEÑOS (≤ 480px)
================================ */
@media (max-width: 30rem) {

  /* HEADER */
  .header-logo img {
    height: 3.8rem;
  }

  /* HERO */
  .hero-title {
    font-size: 1.5rem;
  }

  /* BOTONES */
  .btn {
    width: 100%;
    text-align: center;
  }

  /* CONTACTO */
  .contact-desc {
    font-size: 1rem;
  }

  .contact-item-content {
    font-size: 1rem;
  }

  /* MAPA */
  .contact-map iframe {
    height: 18rem;
  }
}

/* ===============================
   PANTALLAS GRANDES / 4K (≥ 1600px)
================================ */
@media (min-width: 100rem) {

  /* CONTENEDORES CENTRADOS */
  .header-container,
  .hero,
  .contact,
  .main-footer {
    max-width: 120rem;
    margin-inline: auto;
  }

  body {
    font-size: 110%;
  }
}

/*======================== MENU ===========================*/

/* =================================================
   RESPONSIVE – SECCIONES CENTRALES
   ABOUT · OFFER · MERCADOS · CLIENTES
================================================= */

/* ===============================
   TABLETS GRANDES (≤ 1024px)
================================ */
@media (max-width: 64rem) {

  /* ===== QUIÉNES SOMOS ===== */
  .about {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-description {
    margin-inline: auto;
    text-align: center;
  }

  .about-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .about-image img {
    max-width: 40rem;
    margin-inline: auto;
    transform: none;
  }

  /* ===== QUÉ OFRECEMOS ===== */
  .offer {
    padding: 4rem 8%;
  }

  .ind-card {
    width: 100%;
  }

  .ind-card-content {
    padding: 3rem;
  }

  /* ===== MERCADOS ===== */
  .wrapper {
    height: 28rem;
  }

  .inner {
    --translateZ: 16rem;
  }

  /* ===== CLIENTES ===== */
  .imq-clientes-slide {
    justify-content: space-evenly;
  }
}

/* ===============================
   TABLETS / MÓVILES GRANDES (≤ 768px)
================================ */
@media (max-width: 48rem) {

  /* ===== QUIÉNES SOMOS ===== */
  .about {
    padding: 4rem 6%;
    gap: 3rem;
  }

  .section-title {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  /* ===== QUÉ OFRECEMOS ===== */
  .ind-card-content {
    padding: 2.5rem 2rem;
    gap: 1.8rem;
  }

  .ind-card-heading {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }

  .ind-card-text {
    font-size: 1rem;
  }

  /* ===== MERCADOS ===== */
  .wrapper {
    height: 24rem;
  }

  .inner {
    --w: 7rem;
    --h: 4rem;
    --translateZ: 14rem;
  }

  .card-img {
    width: 160%;
  }

  /* ===== CLIENTES ===== */
  .imq-clientes {
    padding: 4rem 6%;
  }

  .imq-clientes-slide {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .cliente-item-1,
  .cliente-item-2,
  .cliente-item-3,
  .cliente-item-4,
  .cliente-item-5,
  .cliente-item-6,
  .cliente-item-7,
  .cliente-item-8,
  .cliente-item-9,
  .cliente-item-10,
  .cliente-item-11,
  .cliente-item-12 {
    width: clamp(8rem, 30vw, 14rem);
  }

  .imq-slider-btn {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.2rem;
  }
}

/* ===============================
   MÓVILES PEQUEÑOS (≤ 480px)
================================ */
@media (max-width: 30rem) {

  /* ===== QUIÉNES SOMOS ===== */
  .about {
    padding: 3.5rem 5%;
  }

  .about-description {
    font-size: 1rem;
  }

  /* ===== QUÉ OFRECEMOS ===== */
  .offer {
    padding: 3.5rem 5%;
  }

  .ind-card-content {
    padding: 2rem 1.5rem;
  }

  /* ===== MERCADOS ===== */
  .wrapper {
    height: 20rem;
  }

  .inner {
    --w: 6rem;
    --h: 3.5rem;
    --translateZ: 12rem;
  }

  /* ===== CLIENTES ===== */
  .imq-clientes-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .imq-clientes-slide {
    justify-content: center;
  }

  .imq-slider-btn {
    display: none; /* en móvil se navega automático */
  }
}

/* ===============================
   PANTALLAS GRANDES / 4K (≥ 1600px)
================================ */
@media (min-width: 100rem) {

  .about,
  .offer,
  .markets,
  .imq-clientes {
    max-width: 120rem;
    margin-inline: auto;
  }

  .wrapper {
    height: 40rem;
  }

  .inner {
    --translateZ: 24rem;
  }
}