/* =========================================================
   MEDIC · medic.gt
   Paleta extraída del logotipo: azul #177ABE
   Display: Sora · Texto: Manrope
   ========================================================= */

:root{
  --azul:        #177ABE;
  --azul-osc:    #0F5B90;
  --navy:        #0A2E4A;
  --navy-2:      #123F62;
  --cian:        #46B7E6;
  --azul-50:     #F2F8FC;
  --azul-100:    #E2EFF9;
  --azul-200:    #C7E0F2;
  --borde:       #D9E7F2;
  --texto:       #14293A;
  --texto-2:     #536A7C;
  --blanco:      #FFFFFF;
  --wa:          #25D366;

  --ancho: 1240px;
  --radio: 18px;
  --radio-sm: 12px;
  --sombra: 0 2px 4px rgba(10,46,74,.04), 0 12px 32px -12px rgba(10,46,74,.14);
  --sombra-alta: 0 4px 8px rgba(10,46,74,.06), 0 28px 56px -20px rgba(10,46,74,.26);
  --trans: .35s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%;
  overflow-x:clip;   /* clip y no hidden: no rompe position:sticky de la cabecera */
}

body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--texto);
  background:var(--blanco);
  overflow-x:clip;
}

h1,h2,h3{ font-family:'Sora',sans-serif; line-height:1.14; letter-spacing:-.022em; margin:0; font-weight:700; }
p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* iconos del sprite */
.sprite{ display:none; }
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
      stroke-linecap:round; stroke-linejoin:round; flex:none; }

.contenedor{ width:min(100% - 44px, var(--ancho)); margin-inline:auto; }

.salta{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.salta:focus{ left:0; }

/* ---------- tipografía de sección ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--azul); margin:0 0 12px;
}
.eyebrow::before{ content:''; width:26px; height:2px; background:var(--azul); border-radius:2px; }
.eyebrow--claro{ color:#fff; }
.eyebrow--claro::before{ background:var(--cian); }

.seccion{ padding:clamp(54px,5.4vw,84px) 0; }
.seccion__cab{ max-width:660px; margin-bottom:clamp(30px,3.2vw,44px); }
.seccion__cab--centrada{ margin-inline:auto; text-align:center; }
.seccion__cab--centrada .eyebrow{ justify-content:center; }
.seccion__titulo{ font-size:clamp(29px,3.4vw,42px); text-wrap:balance; }
.seccion__bajada{ margin-top:18px; font-size:17.5px; color:var(--texto-2); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15.5px; line-height:1;
  padding:14px 24px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:var(--trans); white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--lg{ padding:17px 30px; font-size:16.5px; }

.btn--primario{ background:var(--azul); color:#fff; box-shadow:0 10px 24px -10px rgba(23,122,190,.75); }
.btn--primario:hover{ background:var(--azul-osc); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(23,122,190,.85); }

.btn--fantasma{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); backdrop-filter:blur(6px); }
.btn--fantasma:hover{ background:#fff; color:var(--navy); border-color:#fff; transform:translateY(-2px); }

.btn--blanco{ background:#fff; color:var(--azul); }
.btn--blanco:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(0,0,0,.45); }

.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:#1DBF5C; transform:translateY(-2px); }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; color:var(--azul); font-size:16px; transition:var(--trans);
}
.enlace-flecha svg{ transition:var(--trans); }
.enlace-flecha:hover svg{ transform:translateX(5px); }

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */
.topbar{ background:var(--navy); color:#fff; font-size:13.5px; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:42px; }
.topbar__claim{ margin:0; display:flex; align-items:center; gap:9px; font-weight:500; }
.punto{ width:7px; height:7px; border-radius:50%; background:var(--cian); box-shadow:0 0 0 0 rgba(70,183,230,.6); animation:pulso 2.4s infinite; }
@keyframes pulso{ 70%{ box-shadow:0 0 0 9px rgba(70,183,230,0); } 100%{ box-shadow:0 0 0 0 rgba(70,183,230,0); } }
.topbar__links{ display:flex; align-items:center; gap:22px; }
.topbar__links a{ display:inline-flex; align-items:center; gap:7px; transition:var(--trans); }
.topbar__links a:hover{ color:var(--cian); }
.topbar__links svg{ width:15px; height:15px; color:var(--cian); }

/* =========================================================
   CABECERA
   ========================================================= */
.cab{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--borde); transition:var(--trans);
}
.cab.compacta{ box-shadow:0 6px 24px -14px rgba(10,46,74,.35); }
.cab__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:84px; transition:var(--trans); }
.cab.compacta .cab__in{ min-height:70px; }
.cab__logo img{ width:auto; height:44px; transition:var(--trans); }
.cab.compacta .cab__logo img{ height:38px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav > a:not(.btn){
  position:relative; font-weight:600; font-size:15.5px; color:var(--texto); padding:6px 0; transition:var(--trans);
}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--azul); border-radius:2px; transition:var(--trans);
}
.nav > a:not(.btn):hover{ color:var(--azul); }
.nav > a:not(.btn):hover::after,
.nav > a.activo::after{ width:100%; }
.nav > a.activo{ color:var(--azul); }
.nav__cta{ margin-left:4px; }

.hamb{ display:none; width:46px; height:46px; border:1px solid var(--borde); background:#fff;
       border-radius:12px; cursor:pointer; padding:0; place-content:center; }
.hamb span{ display:block; width:20px; height:2px; background:var(--navy); border-radius:2px;
            margin:4px auto; transition:var(--trans); }
.hamb[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamb[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; isolation:isolate; min-height:min(72vh,640px); display:flex; align-items:center;
       padding:clamp(56px,6vw,86px) 0 clamp(74px,7vw,104px); overflow:hidden; }
.hero__foto{
  position:absolute; inset:0; z-index:-2;
  background:url('../fotos/hero-insumos.jpg') center/cover no-repeat;
  transform:scale(1.04);
}
.hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(8,38,62,.95) 0%, rgba(9,42,68,.9) 42%, rgba(13,72,116,.82) 72%, rgba(18,96,152,.72) 100%),
    radial-gradient(120% 95% at 2% 100%, rgba(23,122,190,.5), transparent 62%);
}
/* el contenido arranca en el mismo eje que el logo de la cabecera:
   .contenedor ya lo alinea, así que aquí NO se vuelve a centrar */
.hero__in{ position:relative; color:#fff; }
.hero__titulo{ font-size:clamp(33px,4.4vw,58px); color:#fff; margin-bottom:24px; max-width:1080px; }
.hero__resalte{
  background:linear-gradient(180deg,transparent 60%, rgba(70,183,230,.45) 60%);
  padding:0 7px; margin-left:-7px; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero__texto{ font-size:clamp(16.5px,1.5vw,18.5px); color:#fff; max-width:620px; margin-bottom:30px; }

.hero__acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }

.hero__pills{ display:flex; flex-wrap:wrap; gap:10px 26px; list-style:none; margin:0; padding:0; }
.hero__pills li{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:#fff; }
.hero__pills svg{ width:16px; height:16px; color:var(--cian); stroke-width:2.4; }

.hero__scroll{ position:absolute; left:50%; bottom:26px; translate:-50% 0; width:26px; height:42px;
               border:2px solid rgba(255,255,255,.42); border-radius:14px; display:grid; place-content:center; }
.hero__scroll span{ display:block; width:4px; height:8px; background:#fff; border-radius:3px; animation:baja 1.8s infinite; }
@keyframes baja{ 0%{ transform:translateY(-5px); opacity:0; } 40%{ opacity:1; } 100%{ transform:translateY(6px); opacity:0; } }

/* =========================================================
   CIFRAS
   ========================================================= */
.cifras{ position:relative; margin-top:-64px; z-index:2; padding-bottom:clamp(40px,4vw,58px); }
.cifras__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--borde); border:1px solid var(--borde);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-alta);
}
.cifra{ background:#fff; padding:28px 26px; transition:var(--trans); }
.cifra:hover{ background:var(--azul-50); }
.cifra__n{
  font-family:'Sora',sans-serif; font-size:clamp(38px,4vw,50px); font-weight:700;
  line-height:1; color:var(--azul); margin:0 0 10px; letter-spacing:-.03em;
}
.cifra__n em{ font-style:normal; color:var(--cian); }
.cifra__t{ font-weight:700; font-size:16px; margin:0 0 6px; }
.cifra__d{ font-size:14.5px; color:var(--texto-2); line-height:1.55; margin:0; }

/* =========================================================
   SERVICIOS
   ========================================================= */
.servicios{ background:
   linear-gradient(180deg,#fff 0%, var(--azul-50) 22%, var(--azul-50) 100%); }
.servicios__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.serv{
  position:relative; background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  padding:30px 28px 28px; overflow:hidden; transition:var(--trans);
}
.serv::before{
  content:''; position:absolute; left:0; top:0; width:3px; height:0;
  background:linear-gradient(180deg,var(--cian),var(--azul)); transition:height var(--trans);
}
.serv:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--azul-200); }
.serv:hover::before{ height:100%; }

.serv__n{
  position:absolute; top:24px; right:28px;
  font-family:'Sora',sans-serif; font-size:34px; font-weight:700; color:var(--azul-100);
  line-height:1; letter-spacing:-.03em; transition:var(--trans);
}
.serv:hover .serv__n{ color:var(--azul-200); }

.serv__ico{
  display:grid; place-content:center; width:50px; height:50px; margin-bottom:16px;
  border-radius:15px; background:var(--azul-50); color:var(--azul);
  border:1px solid var(--azul-100); transition:var(--trans);
}
.serv__ico svg{ width:25px; height:25px; }
.serv:hover .serv__ico{ background:var(--azul); color:#fff; border-color:var(--azul); }

.serv h3{ font-size:20.5px; margin-bottom:11px; }
.serv p{ font-size:15.5px; color:var(--texto-2); line-height:1.6; }

.servicios__pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin-top:26px; padding:22px 28px; background:#fff;
  border:1px solid var(--borde); border-left:3px solid var(--azul); border-radius:var(--radio);
}
.servicios__pie p{ margin:0; font-weight:600; }

/* =========================================================
   NOSOTROS
   ========================================================= */
.nosotros__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:center; }

.nosotros__media{ position:relative; }
.nosotros__media img{
  width:100%; border-radius:var(--radio); border-bottom-right-radius:76px;
  box-shadow:var(--sombra-alta);
}
.tarjeta-flotante{
  position:absolute; right:-24px; bottom:44px;
  background:var(--azul); color:#fff; padding:22px 26px; border-radius:var(--radio-sm);
  box-shadow:0 20px 40px -16px rgba(10,46,74,.5);
}
.tarjeta-flotante__n{ font-family:'Sora',sans-serif; font-size:34px; font-weight:700; line-height:1; margin:0 0 6px; letter-spacing:-.03em; }
.tarjeta-flotante__t{ margin:0; font-size:13.5px; line-height:1.45; color:#fff; }

.nosotros__texto p{ color:var(--texto-2); }
.nosotros__texto .seccion__titulo{ margin-bottom:20px; }

.mv{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.mv__caja{ background:var(--azul-50); border:1px solid var(--borde); border-radius:var(--radio); padding:22px 24px 24px; }
.mv__caja h3{ font-size:19px; color:var(--azul); margin-bottom:10px; }
.mv__caja p{ font-size:14.8px; line-height:1.6; margin:0; }
.mv__caja--acento{ background:var(--navy); border-color:var(--navy); }
.mv__caja--acento h3{ color:var(--cian); }
.mv__caja--acento p{ color:#fff; }

/* =========================================================
   CLIENTES
   ========================================================= */
.clientes{ background:var(--azul-50); padding-block:clamp(46px,4.6vw,68px); }
.clientes__lista{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none; margin:0; padding:0;
}
.clientes__lista li{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--borde); border-radius:100px;
  padding:10px 20px 10px 15px; font-weight:600; font-size:14.8px; color:var(--navy);
  transition:var(--trans);
}
.clientes__lista svg{ width:20px; height:20px; color:var(--azul); }
.clientes__lista li:hover{ border-color:var(--azul); color:var(--azul); transform:translateY(-3px); box-shadow:var(--sombra); }

/* =========================================================
   RENTA
   ========================================================= */
.renta{
  position:relative; padding:clamp(54px,5.4vw,84px) 0; color:#fff;
  background:linear-gradient(120deg,var(--navy) 0%, var(--navy-2) 52%, var(--azul-osc) 100%);
  overflow:hidden;
}
.renta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 88% 10%, rgba(70,183,230,.28), transparent 62%);
  pointer-events:none;
}
/* stretch: la foto toma exactamente el alto de la columna de texto */
.renta__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,70px); align-items:stretch; }
.renta__titulo{ font-size:clamp(29px,3.6vw,42px); color:#fff; margin-bottom:20px; }
.renta__texto p{ color:#fff; }
.renta__lista{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:10px; }
.renta__lista li{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:15.5px; color:#fff; }
.renta__lista svg{ width:18px; height:18px; color:var(--cian); stroke-width:2.4; }

.renta__media{ margin:0; display:flex; }
.renta__media img{
  width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center;
  border-radius:var(--radio); border-top-left-radius:76px; box-shadow:0 30px 60px -24px rgba(0,0,0,.6);
}

/* =========================================================
   CANALES
   ========================================================= */
.canales__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.canal{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; transition:var(--trans); display:flex; flex-direction:column;
}
.canal:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--azul-200); }
.canal__media{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.canal__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.canal:hover .canal__media img{ transform:scale(1.06); }
.canal__cuerpo{ padding:26px 28px 28px; display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.canal__etq{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--azul); background:var(--azul-50); border:1px solid var(--azul-100);
  padding:6px 13px; border-radius:100px;
}
.canal h3{ font-size:22px; }
.canal__cuerpo > p{ color:var(--texto-2); font-size:15.5px; margin:0; }
.canal .btn{ margin-top:8px; }

/* =========================================================
   FARMACIAS
   ========================================================= */
.farmacias{ background:var(--azul-50); overflow:hidden; }
.marquesina{ position:relative; margin-top:8px; }
.marquesina::before,.marquesina::after{
  content:''; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
}
.marquesina::before{ left:0;  background:linear-gradient(90deg,var(--azul-50),transparent); }
.marquesina::after{  right:0; background:linear-gradient(270deg,var(--azul-50),transparent); }

.marquesina__pista{ display:flex; width:max-content; animation:desfile 46s linear infinite; }
.marquesina:hover .marquesina__pista{ animation-play-state:paused; }
@keyframes desfile{ to{ transform:translateX(-50%); } }

.marquesina__set{ display:flex; gap:20px; padding:6px 10px; }
.marca{
  flex:none; width:212px; height:118px; background:#fff; border:1px solid var(--borde);
  border-radius:var(--radio-sm); display:grid; place-items:center; padding:14px 16px;
  transition:var(--trans);
}
/* todos los logos se sirven en un lienzo 520×220 con el peso óptico ya igualado */
.marca img{ width:100%; height:auto; transition:var(--trans); }
.marca:hover{ border-color:var(--azul-200); box-shadow:var(--sombra); transform:translateY(-4px); }
.marca:hover img{ transform:scale(1.05); }

@media (prefers-reduced-motion:reduce){
  .marquesina__pista{ animation:none; }
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,52px); align-items:start; }
.contacto__datos{ display:grid; gap:12px; }

.dato{
  display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio-sm);
  padding:16px 20px; transition:var(--trans);
}
.dato:hover{ border-color:var(--azul); box-shadow:var(--sombra); transform:translateX(5px); }
.dato__ico{
  display:grid; place-content:center; width:48px; height:48px; flex:none;
  border-radius:13px; background:var(--azul-50); color:var(--azul); border:1px solid var(--azul-100);
  transition:var(--trans);
}
.dato:hover .dato__ico{ background:var(--azul); color:#fff; border-color:var(--azul); }
.dato__cuerpo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dato__etq{ font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-2); }
.dato__val{ font-family:'Sora',sans-serif; font-weight:600; font-size:19px; color:var(--navy); letter-spacing:-.015em; }
.dato__nota{ font-size:13.5px; color:var(--texto-2); }
.dato__flecha{ margin-left:auto; color:var(--azul-200); transition:var(--trans); }
.dato:hover .dato__flecha{ color:var(--azul); transform:translateX(4px); }

.contacto__mapa{
  position:relative; border-radius:var(--radio); overflow:hidden; border:1px solid var(--borde);
  box-shadow:var(--sombra); min-height:100%;
  background:var(--azul-50);
}
/* respaldo visible mientras el mapa carga */
.contacto__mapa::before{
  content:'6a avenida 3-16, zona 10 · Ciudad de Guatemala';
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:0 40px; font-weight:600; font-size:15px; color:var(--texto-2);
}
.contacto__mapa iframe{ position:relative; }
.contacto__mapa iframe{ display:block; width:100%; height:100%; min-height:452px; border:0; filter:saturate(.9); }

/* =========================================================
   PIE
   ========================================================= */
.pie{ background:var(--navy); color:#fff; padding-top:clamp(44px,4.4vw,62px); }
.pie__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(24px,3vw,44px); padding-bottom:40px; }
.pie__marca img{ height:42px; width:auto; margin-bottom:20px; }
.pie__marca p{ font-size:14.8px; line-height:1.65; max-width:340px; }
.pie__ig{
  display:grid; place-content:center; width:42px; height:42px; margin-top:22px;
  border:1px solid rgba(255,255,255,.3); border-radius:12px; color:#fff; transition:var(--trans);
}
.pie__ig:hover{ background:var(--azul); border-color:var(--azul); color:#fff; }

.pie__col{ display:flex; flex-direction:column; gap:11px; }
.pie__col h3{ font-size:14px; letter-spacing:.11em; text-transform:uppercase; color:#fff; margin-bottom:8px; font-weight:700; }
.pie__col a{ font-size:14.8px; line-height:1.5; color:#fff; transition:var(--trans); }
.pie__col a:hover{ color:var(--cian); padding-left:5px; }

.pie__legal{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.11); font-size:13.5px;
}
.pie__legal p{ margin:0; }

/* =========================================================
   FAB WHATSAPP
   ========================================================= */
.fab{ position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.fab__btn{
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background:var(--wa); color:#fff; display:grid; place-content:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.75); transition:var(--trans);
}
.fab__btn svg{ width:29px; height:29px; stroke-width:1.6; }
.fab__btn:hover{ transform:scale(1.07); }
.fab__btn[aria-expanded="true"]{ transform:rotate(90deg) scale(1.04); }

.fab__menu{ display:grid; gap:9px; animation:sube .3s cubic-bezier(.22,.61,.36,1); }
.fab__menu[hidden]{ display:none; }
.fab__menu a{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--borde);
  border-radius:13px; padding:11px 18px; box-shadow:var(--sombra-alta); transition:var(--trans); min-width:186px;
}
.fab__menu strong{ font-size:14px; color:var(--navy); }
.fab__menu span{ font-size:13px; color:var(--texto-2); }
.fab__menu a:hover{ border-color:var(--wa); transform:translateX(-4px); }
@keyframes sube{ from{ opacity:0; transform:translateY(10px); } }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .servicios__grid{ grid-template-columns:repeat(2,1fr); }
  .cifras__grid{ grid-template-columns:repeat(2,1fr); }
  .pie__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:920px){
  .hamb{ display:grid; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
    background:#fff; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:4px; padding:96px 26px 32px; box-shadow:-16px 0 40px -20px rgba(10,46,74,.4);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.22,.61,.36,1), visibility .4s;
    overflow-y:auto;
    visibility:hidden;   /* cerrado: fuera del foco del teclado y sin generar scroll lateral */
  }
  .nav.abierto{ transform:none; visibility:visible; }
  .nav > a:not(.btn){ padding:14px 4px; border-bottom:1px solid var(--borde); font-size:16.5px; }
  .nav > a:not(.btn)::after{ display:none; }
  .nav__cta{ margin-top:20px; }
  body.menu-abierto{ overflow:hidden; }

  .nosotros__grid,
  .renta__grid,
  .canales__grid,
  .contacto__grid{ grid-template-columns:1fr; }

  .nosotros__media{ max-width:520px; }
  .renta__media{ order:-1; }
  .contacto__mapa iframe{ min-height:340px; }
  .tarjeta-flotante{ right:20px; bottom:20px; }
}

@media (max-width:767px){
  body{ font-size:16px; }
  html{ scroll-padding-top:76px; }

  .topbar__claim{ display:none; }
  .topbar__in{ justify-content:center; }
  .topbar__links{ gap:16px; font-size:12.5px; }
  .oculta-movil{ display:none; }

  .cab__in{ min-height:70px; }
  .cab__logo img{ height:36px; }

  .hero{ min-height:auto; padding:64px 0 90px; text-align:left; }
  .hero__foto{ background-image:url('../fotos/hero-insumos-movil.jpg'); }
  .hero__velo{ background:linear-gradient(165deg, rgba(10,46,74,.96) 0%, rgba(10,46,74,.9) 55%, rgba(15,91,144,.82) 100%); }
  .hero__acciones .btn{ flex:1 1 100%; }
  .hero__scroll{ display:none; }

  .cifras{ margin-top:-52px; }
  .cifras__grid{ grid-template-columns:1fr; }
  .cifra{ padding:26px 24px; }

  .servicios__grid{ grid-template-columns:1fr; }
  .serv{ padding:30px 26px; }
  .servicios__pie{ padding:24px 26px; }

  .mv{ grid-template-columns:1fr; }
  .tarjeta-flotante{ position:static; margin-top:-38px; margin-inline:20px; width:auto; }

  .marca{ width:170px; height:96px; padding:12px 14px; }
  .marquesina::before,.marquesina::after{ width:46px; }

  .canal__cuerpo{ padding:26px 24px 30px; }
  .dato{ padding:17px 18px; gap:14px; }
  .dato__val{ font-size:17.5px; }

  .pie__grid{ grid-template-columns:1fr; gap:34px; }
  .pie__legal{ flex-direction:column; align-items:flex-start; gap:6px; }

  .fab{ right:16px; bottom:16px; }
  .fab__btn{ width:56px; height:56px; }
}

/* =========================================================
   BANNER DE SECCIÓN
   ========================================================= */
.clientes__banner{ margin:0 0 clamp(28px,3vw,40px); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.clientes__banner img{ width:100%; height:clamp(170px,20vw,280px); object-fit:cover; object-position:center 22%; }

/* =========================================================
   FORMULARIO
   ========================================================= */
.form-caja{
  background:#fff; border:1px solid var(--borde); border-top:3px solid var(--azul);
  border-radius:var(--radio); padding:clamp(24px,3vw,34px); box-shadow:var(--sombra);
}
.form__titulo{ font-size:23px; margin-bottom:6px; }
.form__nota{ font-size:15px; color:var(--texto-2); margin-bottom:22px; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.campo{ grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; }
.campo--mitad{ grid-column:auto; }

.campo label{ font-size:13.5px; font-weight:700; color:var(--navy); }
.campo label span{ color:var(--azul); }

.campo input,
.campo select,
.campo textarea{
  font-family:'Manrope',sans-serif; font-size:15.5px; color:var(--texto);
  background:var(--azul-50); border:1px solid var(--borde); border-radius:var(--radio-sm);
  padding:13px 15px; width:100%; transition:var(--trans); appearance:none;
}
.campo textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.campo select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23536A7C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px;
  padding-right:40px; cursor:pointer;
}
.campo input::placeholder,
.campo textarea::placeholder{ color:#8DA2B4; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none; background:#fff; border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(23,122,190,.15);
}
.campo.error input,
.campo.error select,
.campo.error textarea{ border-color:#D8453F; background:#FEF5F5; }

.campo__error{ font-size:12.5px; font-weight:600; color:#D8453F; min-height:0; }
.campo.error .campo__error{ min-height:17px; }

.form__enviar{ grid-column:1 / -1; width:100%; margin-top:4px; }
.form__legal{ grid-column:1 / -1; margin:0; font-size:12.5px; color:var(--texto-2); text-align:center; }
.form__aviso{ grid-column:1 / -1; margin:0; font-size:14px; font-weight:600; color:var(--azul); text-align:center; }
.form__aviso:empty{ display:none; }

/* el mapa pasa a ancho completo, debajo de datos + formulario */
.contacto .contacto__mapa{ margin-top:clamp(22px,2.6vw,32px); }
.contacto .contacto__mapa iframe{ min-height:330px; }

@media (max-width:520px){
  .form{ grid-template-columns:1fr; }
  .campo--mitad{ grid-column:1 / -1; }
}

/* trampa para bots: fuera de vista pero sin display:none (algunos bots lo detectan) */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }