/* =========================================================
   AGL PRODUCE — hoja de estilos principal
   Paleta extraída del logo real de la marca.
   ========================================================= */

:root{
  /* Colores de marca (muestreados del logo AGL Produce) + paleta viva con azul */
  --verde-oscuro:   #1e6b1a;
  --verde-oscurisimo:#154d1a;
  --verde-lima:     #5fd400;
  --verde-lima-2:   #86e619;
  --naranja:        #c2380c;
  --naranja-oscuro: #8f2607;
  --naranja-ridge:  #5c1704;
  --amarillo:       #ffd23f;
  --azul:           #0ea5e9;
  --azul-seguro:    #0a77ad;
  --azul-medio:     #0284c7;
  --azul-oscuro:    #075985;
  --azul-profundo:  #063e60;
  --azul-claro:     #bde8fd;
  --azul-suave:     #e6f7ff;
  --crema:          #fdfdfb;
  --crema-2:        #eef8ff;
  --texto:          #17324a;
  --texto-suave:    #4f6a80;
  --borde:          #d9ecfa;
  --blanco:         #ffffff;

  --radio-s: 8px;
  --radio-m: 14px;
  --radio-l: 22px;
  --sombra: 0 8px 26px rgba(7,89,133,0.16);

  --fuente-titulo: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --fuente-cuerpo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* El header es "sticky" y se queda pegado arriba: sin esto, saltar a una
   sección (desde el menú, el footer o un enlace #ancla) deja el título y el
   texto de esa sección tapados debajo del header. scroll-margin-top empuja
   el punto de destino hacia abajo esa misma distancia antes de hacer scroll. */
#top, #quienes-somos, #clientes, #catalogo, #cobertura,
#asi-trabajamos, #preguntas, #contacto{
  scroll-margin-top: 112px;
}
@media (max-width: 680px){
  #top, #quienes-somos, #clientes, #catalogo, #cobertura,
  #asi-trabajamos, #preguntas, #contacto{
    scroll-margin-top: 82px;
  }
}

/* ---------- Accesibilidad: enlace "saltar al contenido" y foco visible ---------- */
.skip-link{
  position:absolute;
  top:-60px;
  left:12px;
  background:var(--azul-profundo);
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  z-index:300;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

:focus-visible{
  outline:3px solid var(--naranja);
  outline-offset:2px;
  border-radius:4px;
}
body{
  margin:0;
  font-family:var(--fuente-cuerpo);
  color:var(--texto);
  background:var(--crema);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--fuente-titulo); margin:0 0 12px 0; line-height:1.15; color:var(--azul-profundo); }
p{ margin:0 0 14px 0; }
ul{ margin:0; padding:0; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding:76px 0; }
.section-kicker{
  display:inline-block;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--naranja-oscuro);
  background:rgba(245,166,35,0.13);
  padding:5px 14px;
  border-radius:20px;
  margin-bottom:14px;
}
.section-head{ max-width:680px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.section-head p{ color:var(--texto-suave); font-size:16px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:50px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
}

/* Efecto ripple (destello al hacer clic), agregado vía JS en cualquier .btn */
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.55);
  transform:scale(0);
  pointer-events:none;
  animation:rippleAnim .55s ease-out;
}
@keyframes rippleAnim{
  to{ transform:scale(2.4); opacity:0; }
}
/* Estilo "gomoso" con borde inferior sólido para que se vea claramente
   presionable: al pasar el mouse sube, al hacer clic baja y "se aplasta". */
.btn-primary{
  background:linear-gradient(120deg, var(--naranja-oscuro), var(--naranja));
  color:#fff;
  box-shadow:0 5px 0 var(--naranja-ridge), 0 12px 24px rgba(143,38,7,0.35);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--naranja-ridge), 0 16px 28px rgba(143,38,7,0.42); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--naranja-ridge), 0 6px 14px rgba(143,38,7,0.35); }
.btn-outline{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.65);
  color:#fff;
  box-shadow:0 4px 0 rgba(255,255,255,0.15);
}
.btn-outline:hover{ background:#fff; color:var(--azul-profundo); transform:translateY(-3px); box-shadow:0 6px 0 rgba(255,255,255,0.3); }
.btn-outline:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,0.3); }
.btn-outline-dark{
  background:#fff;
  border-color:var(--azul);
  color:var(--azul-oscuro);
  box-shadow:0 4px 0 var(--azul-claro);
}
.btn-outline-dark:hover{ background:var(--azul); color:#fff; transform:translateY(-3px); box-shadow:0 6px 0 var(--azul-medio); }
.btn-outline-dark:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--azul-medio); }
.btn-blue{
  background:linear-gradient(120deg, var(--azul-oscuro), var(--azul-seguro));
  color:#fff;
  box-shadow:0 5px 0 var(--azul-profundo), 0 12px 24px rgba(7,89,133,0.35);
}
.btn-blue:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--azul-profundo), 0 16px 28px rgba(7,89,133,0.42); }
.btn-blue:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--azul-profundo), 0 6px 14px rgba(7,89,133,0.35); }
.btn-whatsapp{
  background:#1f8a3b;
  color:#fff;
  box-shadow:0 5px 0 #146328;
}
.btn-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 8px 0 #146328; }
.btn-whatsapp:active{ transform:translateY(2px); box-shadow:0 2px 0 #146328; }

/* ---------- Header ---------- */
.top-strip{
  background:linear-gradient(90deg, var(--azul-profundo), var(--azul-oscuro));
  color:#cdeeff;
  font-size:12.5px;
}
.top-strip .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:6px;
  padding-bottom:6px;
  flex-wrap:wrap;
  gap:6px;
}
.top-strip a{ color:var(--amarillo); text-decoration:none; font-weight:600; flex-shrink:0; }
.top-strip .zonas{ opacity:0.9; }

/* Ticker: el texto de zonas se desplaza en un loop continuo y sutil */
.zonas-ticker{
  overflow:hidden;
  flex:1 1 auto;
  min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.zonas-track{
  display:inline-flex;
  white-space:nowrap;
  animation:tickerScroll 22s linear infinite;
}
.zonas-track > span{
  padding-right:70px;
  white-space:nowrap;
}
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .zonas-track{ animation:none; }
}

header.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(253,253,251,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--borde);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-link img{ height:46px; width:auto; }
nav.main-nav ul{
  display:flex;
  gap:28px;
  list-style:none;
}
nav.main-nav a{
  text-decoration:none;
  font-weight:600;
  font-size:14.5px;
  color:var(--texto);
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
nav.main-nav a:hover{ border-bottom-color:var(--naranja); color:var(--naranja-oscuro); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.header-actions .tel{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
  color:var(--azul-oscuro);
}
/* ---------- Selector de idioma ES / EN ---------- */
.lang-toggle{
  position:relative;
  display:inline-flex;
  background:var(--crema-2);
  border:1px solid var(--borde);
  border-radius:30px;
  padding:3px;
  gap:2px;
}
.lang-indicator{
  position:absolute;
  top:3px; left:3px;
  width:calc(50% - 3px);
  height:calc(100% - 6px);
  background:linear-gradient(120deg, var(--azul-oscuro), var(--azul-seguro));
  border-radius:20px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 2px 6px rgba(7,89,133,0.35);
}
.lang-indicator.is-en{ transform:translateX(100%); }
.lang-btn{
  position:relative;
  z-index:1;
  border:none;
  background:transparent;
  padding:6px 13px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:0.03em;
  color:var(--azul-oscuro);
  cursor:pointer;
  border-radius:20px;
  transition:color .25s ease;
}
.lang-btn.active{ color:#fff; }

.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:2.5px;
  background:var(--azul-oscuro);
  margin:5px 0;
  border-radius:2px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:#fff;
  min-height:640px;
  display:flex;
  align-items:center;
  background:#111;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:#111 center/cover no-repeat;
  animation:heroKenBurns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.09) translate(-1.5%,-1%); }
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(6,62,96,0.9) 0%, rgba(7,89,133,0.72) 45%, rgba(14,165,233,0.32) 100%);
}
.hero .container{ position:relative; z-index:2; }
.hero-in{
  opacity:0;
  transform:translateY(18px);
  animation:heroFadeUp .7s ease forwards;
  animation-delay:var(--d,0s);
}
@keyframes heroFadeUp{
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; }
  .hero-in{ animation:none; opacity:1; transform:none; }
}
.hero-content{ max-width:640px; padding:64px 0; }
.hero .section-kicker{ background:rgba(251,208,52,0.18); color:var(--amarillo); }
.hero h1{
  color:#fff;
  font-size:clamp(32px,5vw,52px);
  margin-bottom:16px;
}
.hero .slogan{
  font-size:15px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amarillo);
  font-weight:700;
  margin-bottom:18px;
}
.hero p.lead{ font-size:17px; color:#eef0e6; max-width:520px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.hero-trust{
  display:flex;
  gap:26px;
  margin-top:40px;
  flex-wrap:wrap;
}
.hero-trust .item{ font-size:13.5px; color:#dfe6d1; display:flex; align-items:center; gap:8px; }
.hero-trust svg{ flex-shrink:0; }

/* ---------- Franja de estadísticas animadas ---------- */
.stats-strip{
  background:linear-gradient(120deg, var(--azul-profundo), var(--azul-oscuro));
  padding:34px 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-num{
  font-family:var(--fuente-titulo);
  font-size:clamp(28px,3.6vw,40px);
  font-weight:700;
  color:var(--amarillo);
  line-height:1;
}
.stat-label{
  font-size:12.5px;
  color:#bfe3fa;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}

/* ---------- Quienes somos ---------- */
.quienes{
  background:var(--crema-2);
}
.quienes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.quienes-img{
  border-radius:var(--radio-l);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.quienes-img img{ width:100%; height:100%; object-fit:cover; }
.quienes-text h2{ font-size:clamp(26px,3.2vw,36px); }
.quienes-text p{ color:var(--texto-suave); font-size:16px; }
.quienes-text .firma{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--borde);
  font-size:14px;
  color:var(--verde-oscuro);
  font-weight:700;
}

/* ---------- A quien servimos ---------- */
.clientes-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.cliente-card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:var(--radio-m);
  overflow:hidden;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cliente-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.cliente-img{
  aspect-ratio:4/3;
  overflow:hidden;
}
.cliente-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.cliente-card:hover .cliente-img img{ transform:scale(1.08); }
.cliente-body{ padding:24px 20px 28px; }
.cliente-card .icon{
  width:52px; height:52px;
  margin:-46px auto 14px;
  position:relative;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--verde-oscuro), var(--azul-oscuro));
  border-radius:50%;
  color:#fff;
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(7,89,133,0.3);
  transition:transform .3s ease;
}
.cliente-card:hover .icon{ transform:scale(1.1) rotate(-6deg); }
.cliente-card h3{ font-size:17px; margin-bottom:8px; }
.cliente-card p{ font-size:13.5px; color:var(--texto-suave); margin-bottom:0; }

/* ---------- Cobertura: foto de camioneta ---------- */
.cobertura-foto{
  border-radius:var(--radio-l);
  overflow:hidden;
  box-shadow:var(--sombra);
  margin-bottom:36px;
  aspect-ratio:16/7;
}
.cobertura-foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.cobertura-foto:hover img{ transform:scale(1.04); }

/* ---------- Así trabajamos: galería de fotos reales de bodega ----------
   Pensada para crecer: cada nueva tanda de fotos que mande AGL solo agrega
   un .trabajamos-item más a la cuadrícula, sin tocar el resto del layout. */
.trabajamos{ background:var(--crema-2); }
.trabajamos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.trabajamos-item{
  border-radius:var(--radio-m);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--sombra);
  position:relative;
}
.trabajamos-item img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.trabajamos-item:hover img{ transform:scale(1.06); }
.trabajamos-item span{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:28px 16px 14px;
  background:linear-gradient(0deg, rgba(6,62,96,0.88), rgba(6,62,96,0));
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  line-height:1.3;
}

/* ---------- Catalogo ---------- */
.catalogo{ background:linear-gradient(160deg, var(--azul-profundo), var(--azul-oscuro) 55%, var(--azul-medio)); color:#eaf6ff; }
.catalogo .section-kicker{ background:rgba(255,210,63,0.08); color:var(--amarillo); }
.catalogo .section-head h2{ color:#fff; }
.catalogo .section-head p{ color:#bfe3fa; }
.cat-categorias{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.cat-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radio-m);
  padding:20px;
}
.cat-card h3{
  color:var(--amarillo);
  font-size:17px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.cat-items{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.cat-item{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.cat-item img{
  width:100%;
  aspect-ratio:1/0.72;
  object-fit:cover;
  display:block;
}
.cat-item span{
  display:block;
  font-size:9.5px;
  line-height:1.2;
  font-weight:700;
  text-align:center;
  color:var(--azul-oscuro);
  padding:4px 2px 6px;
  text-transform:uppercase;
}
.catalogo-cta{ text-align:center; margin-top:40px; }
.catalogo-cta p{ color:#bfe3fa; margin-bottom:16px; }

/* ---------- Cobertura ---------- */
.cobertura-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:44px;
  align-items:start;
}
.zonas-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:26px;
}
.zona-chip{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:30px;
  padding:8px 16px;
  font-size:13.5px;
  font-family:inherit;
  font-weight:700;
  color:var(--azul-oscuro);
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.zona-chip.sede{
  background:linear-gradient(120deg, var(--azul-oscuro), var(--azul-seguro));
  color:#fff;
  border-color:var(--azul-oscuro);
}
.zona-chip.active{
  background:var(--naranja);
  border-color:var(--naranja);
  color:#fff;
  box-shadow:0 4px 10px rgba(232,93,4,0.3);
}
.zona-chip.active.sede{
  background:linear-gradient(120deg, var(--naranja-oscuro), var(--naranja));
  border-color:var(--naranja);
}
.zona-chip:focus-visible{
  outline:2px solid var(--azul-oscuro);
  outline-offset:2px;
}
.zona-detail{
  display:none;
  align-items:center;
  gap:10px;
  background:var(--crema-2);
  border:1px dashed var(--borde);
  border-radius:var(--radio-m);
  padding:14px 18px;
  margin-bottom:26px;
  font-size:14px;
  color:var(--texto);
}
.zona-detail.visible{ display:flex; }
.zona-detail p{ margin:0; }
.envio-modelos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.modelo-card{
  background:#fff;
  border-radius:var(--radio-m);
  border:1px solid var(--borde);
  padding:24px 22px;
  border-top:5px solid var(--naranja);
}
.modelo-card.menudeo{ border-top-color:var(--verde-lima); }
.modelo-card h3{ font-size:18px; margin-bottom:8px; }
.modelo-card .destaca{
  display:inline-block;
  background:rgba(232,93,4,0.1);
  color:var(--naranja-oscuro);
  font-weight:700;
  font-size:12.5px;
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:10px;
}
.modelo-card.menudeo .destaca{ background:rgba(76,175,20,0.12); color:#357c0c; }
.modelo-card p{ font-size:14px; color:var(--texto-suave); margin-bottom:0; }
.mapa-box{
  background:var(--crema-2);
  border-radius:var(--radio-l);
  padding:26px;
  border:1px solid var(--borde);
}
.mapa-box h3{ font-size:15px; margin-bottom:14px; }
.mapa-lista{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.mapa-lista li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--texto);
  padding-bottom:10px;
  border-bottom:1px dashed var(--borde);
}
.mapa-lista li:last-child{ border-bottom:none; padding-bottom:0; }
.mapa-lista svg{ flex-shrink:0; color:var(--naranja-oscuro); }

/* ---------- Por que elegirnos ---------- */
.razones{ background:var(--crema-2); }
.razones-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.razon-card{ text-align:center; padding:10px; }
.razon-card .icon{
  width:64px; height:64px;
  margin:0 auto 14px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--amarillo);
  display:flex; align-items:center; justify-content:center;
  color:var(--naranja-oscuro);
}
.razon-card h3{ font-size:15px; margin-bottom:6px; }
.razon-card p{ font-size:13px; color:var(--texto-suave); margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:var(--radio-m);
  margin-bottom:12px;
  overflow:hidden;
}
.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:18px 22px;
  font-family:var(--fuente-cuerpo);
  font-weight:700;
  font-size:15.5px;
  color:var(--azul-oscuro);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  cursor:pointer;
}
.faq-question .plus{
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--crema-2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  color:var(--naranja-oscuro);
  transition:transform .2s ease;
}
.faq-item.open .faq-question .plus{ transform:rotate(45deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.faq-answer p{
  padding:0 22px 20px;
  color:var(--texto-suave);
  font-size:14.5px;
  margin:0;
}

/* ---------- Contacto ---------- */
.contacto{ background:linear-gradient(200deg, var(--azul-oscuro), var(--azul-profundo) 65%); color:#eaf6ff; }
.contacto .section-kicker{ background:rgba(255,210,63,0.08); color:var(--amarillo); }
.contacto .section-head h2{ color:#fff; }
.contacto .section-head p{ color:#bfe3fa; }
.contacto-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:44px;
}
.contacto-info{ display:flex; flex-direction:column; gap:18px; }
.info-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radio-m);
  padding:16px 18px;
}
.info-item .icon{
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(251,208,52,0.15);
  color:var(--amarillo);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.info-item h3{ font-size:14px; color:#fff; margin-bottom:4px; }
.info-item p, .info-item a{ font-size:14px; color:#cdeeff; margin-bottom:0; text-decoration:none; }
.info-item a:hover{ color:var(--amarillo); }

form.contact-form{
  background:#fff;
  border-radius:var(--radio-l);
  padding:30px;
  color:var(--texto);
}
form.contact-form label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--azul-oscuro);
}
form.contact-form input,
form.contact-form select,
form.contact-form textarea{
  width:100%;
  padding:11px 13px;
  border-radius:8px;
  border:1px solid var(--borde);
  font-family:var(--fuente-cuerpo);
  font-size:14.5px;
  margin-bottom:16px;
  background:var(--crema);
  color:var(--texto);
}
form.contact-form textarea{ min-height:100px; resize:vertical; }
form.contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
form.contact-form small{ color:var(--texto-suave); font-size:12px; display:block; margin-top:-8px; margin-bottom:14px; }

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--azul-profundo);
  color:#9fc3db;
  border-top:1px solid rgba(255,255,255,0.08);
  padding:50px 0 20px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand img{ height:42px; margin-bottom:14px; }
.footer-brand p{ font-size:13.5px; max-width:320px; }
footer h3{ color:#fff; font-size:14px; margin-bottom:14px; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
footer a{ text-decoration:none; color:#9fc3db; font-size:13.5px; }
footer a:hover{ color:var(--amarillo); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding-top:20px;
  font-size:12.5px;
}
.footer-bottom .proveedor-link{
  color:var(--amarillo);
  font-weight:600;
}

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:58px; height:58px;
  border-radius:50%;
  background:#1f8a3b;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  z-index:60;
  text-decoration:none;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float{ animation:waPulse 2.6s ease-in-out infinite; }
@keyframes waPulse{
  0%,100%{ box-shadow:0 8px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(31,138,59,0.5); }
  50%{ box-shadow:0 8px 20px rgba(0,0,0,0.25), 0 0 0 10px rgba(31,138,59,0); }
}

/* ---------- Botón flotante "volver arriba" ---------- */
.back-to-top{
  position:fixed;
  bottom:22px;
  left:22px;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--azul-oscuro);
  color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(7,89,133,0.35);
  cursor:pointer;
  z-index:60;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .2s ease;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s, background .2s ease;
}
.back-to-top:hover{ background:var(--azul); transform:translateY(-3px); }
.back-to-top:active{ transform:translateY(0); }
@media (max-width: 680px){
  .back-to-top{ left:14px; bottom:14px; width:42px; height:42px; }
}

/* =========================================================
   Scroll-reveal (IntersectionObserver activa .in-view en js/main.js)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Efecto escalonado dentro de grids con varias tarjetas */
.clientes-grid .reveal:nth-child(1){ transition-delay:.05s; }
.clientes-grid .reveal:nth-child(2){ transition-delay:.15s; }
.clientes-grid .reveal:nth-child(3){ transition-delay:.25s; }
.clientes-grid .reveal:nth-child(4){ transition-delay:.35s; }

.cat-categorias .reveal:nth-child(1){ transition-delay:.05s; }
.cat-categorias .reveal:nth-child(2){ transition-delay:.1s; }
.cat-categorias .reveal:nth-child(3){ transition-delay:.15s; }
.cat-categorias .reveal:nth-child(4){ transition-delay:.2s; }
.cat-categorias .reveal:nth-child(5){ transition-delay:.25s; }
.cat-categorias .reveal:nth-child(6){ transition-delay:.3s; }

.razones-grid .reveal:nth-child(1){ transition-delay:.05s; }
.razones-grid .reveal:nth-child(2){ transition-delay:.12s; }
.razones-grid .reveal:nth-child(3){ transition-delay:.19s; }
.razones-grid .reveal:nth-child(4){ transition-delay:.26s; }
.razones-grid .reveal:nth-child(5){ transition-delay:.33s; }

.faq-list .reveal:nth-child(1){ transition-delay:.03s; }
.faq-list .reveal:nth-child(2){ transition-delay:.08s; }
.faq-list .reveal:nth-child(3){ transition-delay:.13s; }
.faq-list .reveal:nth-child(4){ transition-delay:.18s; }
.faq-list .reveal:nth-child(5){ transition-delay:.23s; }
.faq-list .reveal:nth-child(6){ transition-delay:.28s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Micro-interacciones adicionales */
.razon-card .icon{ transition:transform .3s ease, border-color .3s ease; }
.razon-card:hover .icon{ transform:translateY(-4px) scale(1.08); border-color:var(--naranja); }
.modelo-card{ transition:transform .25s ease, box-shadow .25s ease; }
.modelo-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.zona-chip{ transition:transform .2s ease, box-shadow .2s ease; }
.zona-chip:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(7,89,133,0.18); }
.cat-item{ transition:transform .25s ease, box-shadow .25s ease; }
.cat-item:hover{ transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,0.35); }
.cat-item img{ transition:transform .4s ease; }
.cat-item:hover img{ transform:scale(1.06); }
.faq-item{ transition:box-shadow .2s ease; }
.faq-item.open{ box-shadow:var(--sombra); }

/* =========================================================
   Modales legales (Aviso de Privacidad / Términos)
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(6,62,96,0.55);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:200;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.modal-overlay.open{
  opacity:1;
  visibility:visible;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.modal-box{
  background:var(--crema);
  border-radius:var(--radio-l);
  max-width:760px;
  width:100%;
  max-height:86vh;
  overflow-y:auto;
  position:relative;
  padding:20px 20px 10px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  transform:translateY(24px) scale(.97);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:sticky;
  top:0;
  float:right;
  margin-left:auto;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:var(--crema-2);
  color:var(--azul-oscuro);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
  z-index:2;
}
.modal-close:hover{ background:var(--naranja); color:#fff; transform:rotate(90deg); }
.modal-content{ padding-top:6px; }
.modal-content.legal-wrap{ max-width:none; padding:0 4px 20px; margin:0; }
body.modal-open{ overflow:hidden; }

@media (max-width: 680px){
  .modal-box{ padding:16px 14px 6px; max-height:90vh; }
}

/* =========================================================
   Responsive
   ========================================================= */
/* Tablet y escritorio angosto: el menú horizontal completo (6 links + tel +
   botón) necesita ~1230px reales para no encimarse — por debajo de eso usamos
   el mismo menú deslizable de móvil, aunque el resto del layout siga en modo
   "desktop" (grids de 2-3 columnas) hasta los 980px. */
@media (max-width: 1240px){
  nav.main-nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:78%;
    max-width:320px;
    background:var(--crema);
    box-shadow:-8px 0 30px rgba(0,0,0,0.15);
    transform:translateX(100%);
    transition:transform .25s ease;
    padding:90px 30px 30px;
    z-index:55;
    overflow-y:auto;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav ul{ flex-direction:column; gap:20px; }
  .menu-toggle{ display:block; }
}

@media (max-width: 980px){
  .quienes-grid{ grid-template-columns:1fr; }
  .quienes-img{ order:-1; }
  .clientes-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-categorias{ grid-template-columns:repeat(2,1fr); }
  .cobertura-grid{ grid-template-columns:1fr; }
  .razones-grid{ grid-template-columns:repeat(3,1fr); }
  .contacto-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:26px 20px; }
  .trabajamos-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 680px){
  section{ padding:54px 0; }
  .top-strip .container{ gap:10px; }
  .top-strip a{ font-size:12px; }
  .header-actions{ gap:8px; }
  .header-actions .tel span{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .lang-btn{ padding:6px 10px; font-size:11.5px; }
  .hero{ min-height:560px; }
  .hero-content{ padding:44px 0; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .clientes-grid{ grid-template-columns:1fr 1fr; }
  .cat-categorias{ grid-template-columns:1fr; }
  .cat-items{ grid-template-columns:repeat(4,1fr); }
  .razones-grid{ grid-template-columns:repeat(2,1fr); }
  .envio-modelos{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  form.contact-form .row2{ grid-template-columns:1fr; }
  /* La foto de cobertura es una foto real (no la ilustración genérica de antes):
     en el formato panorámico 16/7 queda demasiado angosta en celular, casi
     una franja. Se le da más alto para que se vea completa y con presencia. */
  .cobertura-foto{ aspect-ratio:4/3; }
}