/* ==========================================================================
   MOVIL-TECH ROMA — hoja de estilos
   Escala de referencia: mockup de 1440px de ancho, contenedor de 1296px.
   ========================================================================== */

:root{
  /* color */
  --azul:        #0663F5;
  --azul-hover:  #0453D6;
  --azul-deep:   #0A3BC4;
  --azul-navy:   #0B2560;
  --azul-soft:   #E8F0FE;
  --tinta:       #0A0A0F;
  --tinta-2:     #16213F;
  --gris:        #5F6472;
  --gris-2:      #8A8F9C;
  --linea:       #E7EAF0;
  --linea-2:     #EDF0F5;
  --bg:          #FAFBFD;
  --bg-2:        #F4F6FA;
  --blanco:      #FFFFFF;
  --amarillo:    #F5B915;

  /* forma */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* sombra */
  --sh-card:  0 2px 10px rgba(19,35,72,.05), 0 1px 2px rgba(19,35,72,.04);
  --sh-hover: 0 12px 28px rgba(6,99,245,.13), 0 3px 8px rgba(19,35,72,.06);
  --sh-btn:   0 6px 18px rgba(6,99,245,.30);

  /* medida */
  --container: 1296px;
  --gutter: 24px;
  --content: 1248px;  /* container menos los dos gutters */
  --hdr-h: 104px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 12px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--tinta);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
  font-size:13px; font-weight:700;
}
.skip-link:focus{ left:0; }

:where(a,button,input,iframe):focus-visible{
  outline:3px solid rgba(6,99,245,.55);
  outline-offset:3px;
  border-radius:6px;
}

.ico{ width:1em; height:1em; display:block; flex:none; }

/* ============================================================== BOTONES == */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border:0; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), filter .25s var(--ease);
}
.btn--primary{
  background:var(--azul); color:#fff;
  border-radius:var(--r-sm);
  box-shadow:var(--sh-btn);
}
.btn--primary:hover{ background:var(--azul-hover); transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 10px 24px rgba(6,99,245,.38); }
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{
  background:#fff; color:var(--azul);
  border:1.5px solid #C9DCFB;
  border-radius:var(--r-sm);
  box-shadow:0 2px 8px rgba(19,35,72,.05);
}
.btn--ghost:hover{ border-color:var(--azul); transform:translateY(-2px); box-shadow:0 8px 20px rgba(6,99,245,.14); }

.btn__waCircle{
  display:grid; place-items:center;
  width:1.65em; height:1.65em; border-radius:50%;
  background:rgba(255,255,255,.22); font-size:1em;
}
.btn__waCircle .ico{ width:1.05em; height:1.05em; }

.btn--hdr{ font-size:12px; padding:11px 14px 11px 18px; letter-spacing:.05em; }
.btn--hdr .btn__waCircle{ background:rgba(255,255,255,.24); }

.btn--lg{ font-size:12.5px; padding:15px 26px; }
.btn--lg .btn__waCircle{ margin-left:-6px; }
.ico--arrow{ width:15px; height:15px; }

.btn--acc{ font-size:12px; padding:12px 20px; }
.btn--cta{ font-size:11.5px; padding:12px 20px 12px 14px; }

/* =============================================================== HEADER == */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(231,234,240,.9);
  transition:box-shadow .3s var(--ease);
}
.hdr.is-stuck{ box-shadow:0 6px 22px rgba(19,35,72,.07); }
.hdr__in{
  height:var(--hdr-h);
  display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; align-items:center; gap:13px; flex:none; }
/* medidas calcadas del mockup: logo 78px de alto, "MOVIL-TECH ROMA" 300px
   de ancho y "TECNOLOGÍA MÓVIL" 238px. El alto manda en el logo; el ancho
   lo pone su relación de aspecto (1.14). */
.brand__mark{ display:block; height:78px; flex:none; }
.brand__mark img{ height:100%; width:auto; max-width:none; display:block; }
.brand__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.brand__name{
  font-size:29px; font-weight:800; letter-spacing:-.005em;
  line-height:1; color:var(--tinta); white-space:nowrap;
}
.brand__tag{
  font-size:13px; font-weight:600; letter-spacing:.48em;
  color:#3D4354; line-height:1; white-space:nowrap;
}

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:30px; }
/* el CTA de WhatsApp del menú sólo existe en la versión móvil */
.nav__waLi{ display:none; }
.nav__link{
  position:relative; display:block; padding:6px 0;
  font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#565B6A;
  transition:color .22s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2.5px;
  background:var(--azul); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav__link:hover{ color:var(--azul); }
.nav__link:hover::after{ transform:scaleX(.6); }
.nav__link.is-active{ color:var(--azul); font-weight:700; }
.nav__link.is-active::after{ transform:scaleX(1); }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  padding:10px; border-radius:10px;
}
.burger span{
  display:block; height:2.5px; border-radius:2px; background:var(--tinta);
  transition:transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.burger span + span{ margin-top:5px; }
.burger span:nth-child(2){ width:70%; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.navScrim{
  position:fixed; inset:var(--hdr-h) 0 0; z-index:90;
  background:rgba(10,16,32,.34);
  opacity:0; transition:opacity .28s var(--ease);
}
.navScrim.is-on{ opacity:1; }

/* ================================================================= HERO == */
.hero{ position:relative; overflow:hidden; padding-top:34px; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(58% 70% at 74% 30%, rgba(6,99,245,.075) 0%, rgba(6,99,245,0) 62%),
    radial-gradient(46% 60% at 10% 8%, rgba(6,99,245,.05) 0%, rgba(6,99,245,0) 60%),
    linear-gradient(180deg,#F3F5FA 0%, #FAFBFD 62%, #FAFBFD 100%);
}
.hero__circuit{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23C3D3EC' stroke-width='1'%3E%3Cpath d='M0 42h74l20 20h96M300 96H214l-18-18h-52M0 150h48l24 24h70l22-22h136M300 214H196l-20 20H92l-22-22H0M0 268h120l18 18h162'/%3E%3Cpath d='M42 0v58l18 18v76M108 300v-52l-16-16V96l20-20V0M186 0v40l22 22v92l-20 20v126M258 300v-70l-20-20V78l18-18V0'/%3E%3C/g%3E%3Cg fill='%23BACCEA'%3E%3Ccircle cx='74' cy='42' r='2.6'/%3E%3Ccircle cx='196' cy='78' r='2.6'/%3E%3Ccircle cx='72' cy='174' r='2.6'/%3E%3Ccircle cx='208' cy='62' r='2.6'/%3E%3Ccircle cx='138' cy='286' r='2.6'/%3E%3Ccircle cx='92' cy='214' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:300px 300px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,0) 92%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,0) 92%);
}
.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,576px) minmax(0,1fr);
  align-items:center; gap:8px;
  min-height:452px;
}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:var(--azul); margin-bottom:16px;
}
.eyebrow__l{ display:block; width:20px; height:1.5px; background:var(--azul); opacity:.75; border-radius:2px; }

.hero__title{
  /* 47px = mismo ancho de línea que el mockup para "SOLUCIONES MÓVILES" */
  font-size:clamp(30px, 3.27vw, 47px);
  font-weight:800; line-height:1.1; letter-spacing:-.022em;
  text-transform:uppercase; color:var(--tinta);
  margin-bottom:20px;
}
.hero__title .az{ color:var(--azul); }

.hero__desc{
  font-size:13.5px; line-height:1.9; color:var(--gris);
  margin-bottom:26px; max-width:430px;
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* la composición sangra hasta el borde del viewport, como en el mockup */
.hero__art{
  position:relative; justify-self:end; width:100%;
  margin-right:min(0px, calc((var(--content) - 100vw) / 2));
}
.hero__art img{
  width:100%; max-width:none; margin-left:auto;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion: reduce){ .hero__art img{ animation:none; } }

/* perks bajo el hero */
.perks{
  position:relative; z-index:2;
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:30px;
  background:#fff; border:1px solid var(--linea-2);
  border-radius:var(--r-pill);
  padding:13px 30px;
  box-shadow:0 4px 18px rgba(19,35,72,.055);
  margin-top:-46px;
}
.perks li{ display:flex; align-items:center; gap:10px; }
.perk__ico{
  display:grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:7px; background:var(--azul-soft); color:var(--azul);
}
.perk__ico .ico{ width:15px; height:15px; }
.perk__txt{
  font-size:9.5px; font-weight:700; letter-spacing:.045em; line-height:1.35;
  text-transform:uppercase; color:#2C3244; white-space:pre-line;
}

/* ============================================================= SECCIONES = */
.sec{ position:relative; }
.sec--servicios{ padding:44px 0 0; }
.sec--accesorios{ padding:36px 0 0; }
.sec--promo{ padding:30px 0 0; }
.sec--proceso{ padding:36px 0 0; }
.sec--trust{ padding:36px 0 0; }
.sec--marcas{ padding:40px 0 0; }
.sec--contacto{ padding:36px 0 28px; }

.secTitle{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:23px; font-weight:800; letter-spacing:.005em; text-transform:uppercase;
  color:var(--tinta); text-align:center;
}
.secTitle__rule{ display:block; width:34px; height:1.5px; background:#C6D2E4; border-radius:2px; flex:none; }
.secTitle .az{ color:var(--azul); }
.secTitle--plain{ font-size:16px; letter-spacing:.03em; }
.secSub{
  margin-top:7px; text-align:center;
  font-size:12.5px; color:var(--gris-2); font-weight:500;
}

/* ============================================================= SERVICIOS = */
.svcGrid{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:13px;
}
.svcCard{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  padding:20px 11px 20px;
  box-shadow:var(--sh-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svcCard:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--sh-hover); border-color:#D7E4FA; }
.svcCard__art{
  height:70px; display:grid; place-items:center; margin-bottom:14px;
}
.svcCard__art img{ max-height:70px; max-width:100%; width:auto; object-fit:contain; }
.svcCard__art .ico{ width:44px; height:44px; color:var(--azul); }
.svcCard__h{
  font-size:11.5px; font-weight:800; letter-spacing:.02em; line-height:1.35;
  text-transform:uppercase; color:var(--tinta); white-space:pre-line;
  margin-bottom:8px;
}
.svcCard__p{ font-size:10.5px; line-height:1.62; color:var(--gris); }

/* ============================================================ ACCESORIOS = */
.accBox{
  display:grid; grid-template-columns:236px minmax(0,1fr); gap:16px; align-items:center;
  background:#F7F9FE; border:1px solid #EAEFF8; border-radius:var(--r-xl);
  padding:16px 18px;
}
.accBox__title{
  font-size:26px; font-weight:800; line-height:1.12; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--tinta-2); white-space:pre-line;
  margin-bottom:12px;
}
.accBox__desc{ font-size:11.5px; line-height:1.72; color:var(--gris); margin-bottom:18px; white-space:pre-line; }

.accGrid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:11px; }
.accCard{
  display:flex; flex-direction:column; align-items:center;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  padding:14px 8px 13px;
  box-shadow:var(--sh-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.accCard:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--sh-hover); border-color:#D7E4FA; }
.accCard__art{ height:96px; display:grid; place-items:center; width:100%; }
.accCard__art img{ max-height:96px; max-width:100%; width:auto; object-fit:contain; }
.accCard__n{
  margin-top:10px;
  font-size:9.5px; font-weight:700; letter-spacing:.045em; text-transform:uppercase;
  color:#2C3244; text-align:center; line-height:1.3;
}

.accPerks{
  margin-top:12px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  background:#F4F7FC; border:1px solid #EAEFF8; border-radius:var(--r-md);
  padding:11px 22px;
}
.accPerks li{ display:flex; align-items:center; justify-content:center; gap:9px; }
.accPerks .ico{ width:16px; height:16px; color:var(--azul); }
.accPerks span{
  font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#3B4152;
}

/* ================================================================ PROMO == */
.promo{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  background:
    radial-gradient(78% 150% at 88% 40%, #2F8CFF 0%, rgba(47,140,255,0) 58%),
    radial-gradient(60% 120% at 30% 10%, #1160FF 0%, rgba(17,96,255,0) 60%),
    linear-gradient(102deg, #062B9C 0%, #0A44D8 34%, #0B57F0 62%, #1E72FF 100%);
  box-shadow:0 16px 40px rgba(9,49,150,.30);
  min-height:170px;
}
.promo__glow{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' viewBox='0 0 260 170'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 28h84l16 16h160M260 84H150l-18 18H0M0 140h96l18-18h146'/%3E%3Cpath d='M44 0v46l14 14v110M156 170v-44l16-16V0M214 0v54l-14 14v102'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 170px;
  opacity:.85;
}
.promo__grid{
  position:relative;
  display:grid; grid-template-columns:minmax(0,362px) minmax(0,282px) minmax(0,178px) minmax(0,1fr);
  align-items:center; gap:16px;
  padding:22px 0 22px 34px;
  min-height:170px;
}
.promo__left{ position:relative; padding-left:22px; }
.promo__bracket{
  position:absolute; left:0; width:22px; height:22px;
  border-color:rgba(255,255,255,.55); border-style:solid; border-width:0;
}
.promo__bracket--tl{ top:-6px; border-left-width:2px; border-top-width:2px; border-top-left-radius:6px; }
.promo__bracket--bl{ bottom:-6px; border-left-width:2px; border-bottom-width:2px; border-bottom-left-radius:6px; }
.promo__title{
  font-size:29px; font-weight:800; line-height:1.16; letter-spacing:-.005em;
  text-transform:uppercase; color:#fff; white-space:pre-line;
}
.promo__line{
  display:block; margin-top:14px; height:2px; width:78%;
  background:linear-gradient(90deg, rgba(255,255,255,0), #8FC4FF 45%, rgba(143,196,255,0));
  border-radius:2px;
}
.promo__off{
  font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em; color:#fff;
}
.promo__off .pct{ font-size:.72em; }
.promo__sub{
  margin-top:8px;
  font-size:15px; font-weight:700; letter-spacing:.015em; text-transform:uppercase; color:#fff;
}
.promo__fine{
  margin-top:9px;
  font-size:10px; line-height:1.65; color:rgba(255,255,255,.86); white-space:pre-line;
}
.promo__code{
  border:1.5px dashed rgba(255,255,255,.75); border-radius:var(--r-sm);
  padding:12px 14px; text-align:center;
}
.promo__codeLabel{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.92); margin-bottom:5px;
}
.promo__codeValue{ font-size:21px; font-weight:800; letter-spacing:.01em; color:#fff; }
.promo__art{ align-self:stretch; position:relative; overflow:hidden; }
.promo__art img{
  position:absolute; right:-14px; bottom:-14px; height:176%; width:auto; max-width:none;
  object-fit:contain; object-position:right bottom;
}

/* ============================================================== PROCESO == */
.steps{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  position:relative;
}
.step{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:0 10px;
}
.step__top{ position:relative; height:56px; width:100%; display:flex; align-items:center; justify-content:center; }
.step__num{
  position:relative; z-index:2;
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--azul); color:#fff;
  font-size:12px; font-weight:800; line-height:1;
  box-shadow:0 4px 12px rgba(6,99,245,.34);
  margin-right:-4px; align-self:flex-end; margin-bottom:8px;
}
.step__ico{
  position:relative; z-index:1;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #EAF2FE 0%, rgba(234,242,254,0) 72%);
  color:var(--azul);
  margin-left:-6px; align-self:flex-start;
}
.step__ico .ico{ width:22px; height:22px; }
/* línea punteada que conecta */
.step:not(:last-child)::after{
  content:''; position:absolute; z-index:0;
  top:38px; left:calc(50% + 34px); right:calc(-50% + 34px); height:1.5px;
  background-image:linear-gradient(90deg, #9CBEEA 0 8px, transparent 8px 15px);
  background-size:15px 1.5px;
}
.step__h{
  margin-top:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; color:var(--tinta);
}
.step__p{ margin-top:6px; font-size:10px; line-height:1.5; color:var(--gris); max-width:180px; }

/* ================================================================ TRUST == */
.card{
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
}
.trust{
  display:grid; grid-template-columns:298fr 362fr 606fr; gap:16px; align-items:stretch;
}
.trust__why{ padding:20px 20px; }
.trust__whyTitle{
  font-size:14.5px; font-weight:800; line-height:1.35; letter-spacing:.005em;
  text-transform:uppercase; color:var(--tinta); white-space:pre-line;
  margin-bottom:14px;
}
.trust__list li{
  position:relative; padding-left:16px; margin-bottom:9px;
  font-size:10.5px; line-height:1.5; color:#41475A;
}
.trust__list li:last-child{ margin-bottom:0; }
.trust__list li::before{
  content:''; position:absolute; left:0; top:6px;
  width:5px; height:5px; border-radius:50%; background:var(--azul);
}

.trust__stats{ display:grid; place-items:center; padding:24px 18px; }
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; width:100%; }
.stat{ text-align:center; }
.stat__v{
  font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1;
  color:var(--azul); margin-bottom:9px;
}
.stat__l{
  font-size:8px; font-weight:600; letter-spacing:.055em; line-height:1.5;
  text-transform:uppercase; color:var(--gris); white-space:pre-line;
}

.trust__testi{ padding:18px 18px 18px; }
.trust__testiTitle{
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tinta); text-align:center; margin-bottom:12px;
}
.testiGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; }
.testi{
  background:#FCFDFF; border:1px solid var(--linea-2); border-radius:var(--r-sm);
  padding:12px 12px 13px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testi:hover{ transform:translateY(-4px); box-shadow:var(--sh-hover); }
.testi__top{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.testi__ph{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(19,35,72,.14);
  background:var(--bg-2);
}
.testi__stars{ display:flex; gap:1px; color:var(--amarillo); font-size:11px; line-height:1; }
.testi__stars svg{ width:11px; height:11px; }
.testi__q{ font-size:10px; line-height:1.62; color:#41475A; white-space:pre-line; margin-bottom:10px; }
.testi__a{ font-size:10px; font-weight:600; color:#2C3244; }

/* =============================================================== MARCAS == */
.brands{
  margin-top:11px;
  display:grid; grid-template-columns:repeat(8, minmax(0,1fr));
  align-items:center;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  padding:14px 22px;
  box-shadow:var(--sh-card);
}
.brands li{ display:grid; place-items:center; }
.brands svg{ height:22px; width:auto; max-width:100%; opacity:.92; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.brands li:hover svg{ opacity:1; transform:scale(1.05); }

/* ============================================================= CONTACTO == */
.contactRow{ display:grid; grid-template-columns:334fr 470fr 476fr; gap:16px; align-items:stretch; }

.contactCard{ padding:16px 20px 16px; }
.contactCard__title{
  font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tinta); margin-bottom:14px;
}
.contactList li{ margin-bottom:4px; }
.contactList li:last-child{ margin-bottom:0; }
.contactList a, .contactList .row{ display:flex; align-items:center; gap:11px; }
.contactList a{ transition:transform .22s var(--ease); }
.contactList a:hover{ transform:translateX(3px); }
.contactList a:hover .contactList__t{ color:var(--azul); }
.contactList__ico{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  color:#fff; flex:none;
}
.contactList__ico .ico{ width:13px; height:13px; }
.ico-bg-usuario  { background:linear-gradient(140deg,#2F6FE0,#12409C); }
.ico-bg-whatsapp { background:linear-gradient(140deg,#5BE07E,#1FA84C); }
.ico-bg-instagram{ background:radial-gradient(circle at 28% 100%, #FDD75A 0%, #F35C4A 36%, #C837AB 66%, #6A2CC0 100%); }
.ico-bg-facebook { background:linear-gradient(140deg,#3B86F7,#1358CC); }
.ico-bg-tiktok   { background:#111; border-radius:6px; }
.contactList__t{
  font-size:10.5px; font-weight:600; letter-spacing:.02em; color:#2C3244;
  transition:color .22s var(--ease);
}
.contactList li:first-child .contactList__t{ font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

.mapCard{ position:relative; overflow:hidden; min-height:200px; }
.mapCard__map{ position:absolute; inset:0; }
.mapCard__map .mapArt{ width:100%; height:100%; display:block; object-fit:cover; }
.mapCard__map iframe{ width:100%; height:100%; border:0; display:block; }
.mapCard__panel{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:min(52%, 190px);
  background:rgba(255,255,255,.96); border:1px solid var(--linea-2);
  border-radius:var(--r-sm); padding:14px 15px;
  box-shadow:0 8px 22px rgba(19,35,72,.13);
  backdrop-filter:blur(4px);
}
.mapCard__title{
  font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--tinta); margin-bottom:10px;
}
.mapCard__city{ font-size:10.5px; font-weight:600; color:#2C3244; margin-bottom:9px; }
.mapCard__note{ font-size:10px; line-height:1.55; color:var(--gris); white-space:pre-line; }

.ctaCard{ position:relative; overflow:hidden; padding:20px 22px 20px; display:flex; flex-direction:column; justify-content:center; }
.ctaCard__circuit{
  position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200' viewBox='0 0 220 200'%3E%3Cg fill='none' stroke='%23C7D6EE' stroke-width='1'%3E%3Cpath d='M220 30H150l-16 16H36M220 76h-52l-18 18H60M220 122h-84l-18-18H24M220 168h-70l-16-16H48'/%3E%3Cpath d='M182 0v22l-14 14v78l16 16v70M138 200v-58l14-14V50l-16-16V0M96 0v34l14 14v56l-16 16v80'/%3E%3C/g%3E%3Cg fill='%23BACCEA'%3E%3Ccircle cx='150' cy='30' r='2.4'/%3E%3Ccircle cx='168' cy='76' r='2.4'/%3E%3Ccircle cx='136' cy='104' r='2.4'/%3E%3Ccircle cx='150' cy='152' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 200px; background-position:right center; background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 62%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 62%);
}
.ctaCard > *:not(.ctaCard__circuit){ position:relative; z-index:1; }
.ctaCard__title{
  font-size:16.5px; font-weight:800; line-height:1.32; letter-spacing:.005em;
  text-transform:uppercase; color:var(--tinta); white-space:pre-line;
  margin-bottom:12px;
}
.ctaCard__text{ font-size:10.5px; line-height:1.65; color:var(--gris); white-space:pre-line; margin-bottom:14px; }
.btn--cta{ align-self:flex-start; }

/* =============================================================== FOOTER == */
.ftr{ position:relative; background:#fff; border-top:1px solid var(--linea); margin-top:8px; overflow:hidden; }
.ftr__circuit{
  position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200' viewBox='0 0 260 200'%3E%3Cg fill='none' stroke='%23C7D6EE' stroke-width='1'%3E%3Cpath d='M260 36H176l-18 18H70M260 92h-64l-20 20H96M260 148h-88l-18-18H60'/%3E%3Cpath d='M216 0v26l-16 16v72l18 18v68M158 200v-46l16-16V54l-16-16V0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 200px; background-position:right top; background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 62%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 62%, rgba(0,0,0,1) 100%);
}
.ftr__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:2.05fr 1fr 1.5fr 1.15fr 1.5fr;
  gap:22px; padding:15px 0 12px; align-items:start;
}
.brand--ftr .brand__mark{ height:68px; }
.brand--ftr .brand__name{ font-size:19px; }
.brand--ftr .brand__tag{ font-size:9.5px; letter-spacing:.47em; }
.ftr__blurb{ margin-top:10px; font-size:10px; line-height:1.7; color:var(--gris); white-space:pre-line; }

.ftr__col--div{ position:relative; padding-left:22px; }
.ftr__col--div::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--linea);
}
.ftr__h{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta); margin-bottom:10px;
}
.ftr__links li{ margin-bottom:4px; line-height:1; }
.ftr__links a{ display:block; font-size:10px; line-height:1.5; color:var(--gris); transition:color .22s var(--ease), padding-left .22s var(--ease); }
.ftr__links a:hover{ color:var(--azul); padding-left:3px; }

.ftr__social{ display:flex; gap:10px; align-items:center; }
.ftr__social a{
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  color:#fff; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ftr__social a:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(19,35,72,.20); }
.ftr__social .ico{ width:16px; height:16px; }
.sc-instagram{ background:radial-gradient(circle at 28% 100%, #FDD75A 0%, #F35C4A 36%, #C837AB 66%, #6A2CC0 100%); }
.sc-facebook { background:linear-gradient(140deg,#3B86F7,#1358CC); }
.sc-tiktok   { background:#111; }

.ftr__pay{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ftr__pay svg{ height:20px; width:auto; }

.ftr__bar{ position:relative; z-index:1; border-top:1px solid var(--linea); }
.ftr__barIn{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:7px 24px; }
.ftr__bar p{ font-size:9px; color:var(--gris-2); }
.ftr__sign{ display:flex; align-items:center; gap:6px; }
.ftr__sign svg{ width:11px; height:11px; color:var(--azul); }

/* ========================================================= CTA INTERMEDIO */
.sec--ctaMedio{ padding:38px 0 0; }
.ctaBand{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:26px;
  padding:26px 30px;
  background:
    radial-gradient(70% 140% at 85% 30%, #2F8CFF 0%, rgba(47,140,255,0) 60%),
    linear-gradient(100deg, #062B9C 0%, #0A44D8 42%, #0B57F0 100%);
  box-shadow:0 16px 40px rgba(9,49,150,.26);
}
.ctaBand__circuit{
  position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 26h78l16 16h146M240 76H136l-18 18H0M0 124h88l18-18h134'/%3E%3Cpath d='M40 0v42l14 14v94M148 150v-40l16-16V0M206 0v50l-14 14v86'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 150px;
}
/* OJO: no usar `.ctaBand > *`, porque igualaría en especificidad a
   .ctaBand__circuit y le quitaría el position:absolute, con lo cual el fondo
   de circuitos pasaría a ocupar una columna del grid y descuadraría todo. */
.ctaBand__txt, .ctaBand__btns{ position:relative; z-index:1; }
.ctaBand__title{
  font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.01em;
  text-transform:uppercase; color:#fff; white-space:pre-line; margin-bottom:8px;
}
.ctaBand__p{ font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.9); max-width:640px; }
.ctaBand__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.btn--ghostWhite{
  background:rgba(255,255,255,.10); color:#fff;
  border:1.5px solid rgba(255,255,255,.65); border-radius:var(--r-sm);
  backdrop-filter:blur(3px);
}
.btn--ghostWhite:hover{ background:rgba(255,255,255,.2); border-color:#fff; transform:translateY(-2px); }
.ico--tel{ width:15px; height:15px; }

/* =============================================================== GARANTÍA */
.sec--garantia{ padding:44px 0 0; }
.garGrid{
  margin-top:24px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
.garCard{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  padding:24px 20px 26px;
  box-shadow:var(--sh-card);
  transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.garCard::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(6,99,245,.10), transparent 70%);
  transition:opacity .35s var(--ease);
}
.garCard:hover{ box-shadow:var(--sh-hover); border-color:#CFE0FB; }
.garCard:hover::before{ opacity:1; }
.garCard__ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:linear-gradient(140deg, #E8F0FE, #D3E3FD); color:var(--azul);
  margin-bottom:14px;
  transition:transform .35s var(--ease);
}
.garCard:hover .garCard__ico{ transform:translateY(-3px) scale(1.06) rotate(-4deg); }
.garCard__ico .ico{ width:24px; height:24px; }
.garCard__h{
  font-size:12px; font-weight:800; letter-spacing:.035em; text-transform:uppercase;
  color:var(--tinta); margin-bottom:9px;
}
.garCard__p{ font-size:11px; line-height:1.65; color:var(--gris); }

.garNota{
  margin-top:16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#F4F7FC; border:1px solid #E4EBF6; border-radius:var(--r-md);
  padding:14px 20px;
}
.garNota .ico{ width:22px; height:22px; color:var(--azul); flex:none; }
.garNota p{ font-size:11px; line-height:1.6; color:#3B4152; flex:1 1 340px; }

/* ======================================================= NUESTRO TRABAJO */
.sec--trabajo{ padding:44px 0 0; }
.trabGrid{
  margin-top:24px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
}
.trabCard{
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--sh-card);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.trabCard:hover{ transform:translateY(-6px); box-shadow:var(--sh-hover); border-color:#D7E4FA; }
.trabCard__fig{ position:relative; margin:0; overflow:hidden; aspect-ratio:4 / 3; background:var(--bg-2); }
.trabCard__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.trabCard:hover .trabCard__fig img{ transform:scale(1.07); filter:saturate(1.08); }
.trabCard__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,20,54,0) 45%, rgba(4,20,54,.55) 100%);
}
.trabCard__tag{
  position:absolute; left:12px; bottom:11px; z-index:1;
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 6px rgba(4,20,54,.5);
}
.trabCard__p{ font-size:11px; line-height:1.6; color:var(--gris); padding:13px 15px 15px; }

/* ==================================================================== FAQ */
.sec--faq{ padding:44px 0 0; }
.faqGrid{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 16px;
  align-items:start;
}
.faqItem{
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  box-shadow:var(--sh-card); overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faqItem:hover{ border-color:#D7E4FA; box-shadow:var(--sh-hover); }
.faqItem.is-open{ border-color:#BFD7FA; }
.faqItem__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:15px 17px;
  font-size:12px; font-weight:700; letter-spacing:.005em; color:var(--tinta);
  transition:color .25s var(--ease);
}
.faqItem__q:hover{ color:var(--azul); }
.faqItem__sign{
  width:19px; height:19px; flex:none; color:var(--azul);
  transition:transform .32s var(--ease);
}
.faqItem.is-open .faqItem__sign{ transform:rotate(135deg); }
.faqItem__a{
  max-height:0; overflow:hidden;
  transition:max-height .28s var(--ease);
}
.faqItem__a p{
  font-size:11px; line-height:1.75; color:var(--gris);
  padding:0 17px 16px;
  border-top:1px solid var(--linea-2); padding-top:13px; margin-top:2px;
}

/* ================================================== FLOTANTES (WA / TOP) */
.waFab{
  position:fixed; right:22px; bottom:22px; z-index:120;
  display:flex; align-items:center; gap:10px;
  padding:13px 18px 13px 15px; border-radius:var(--r-pill);
  background:linear-gradient(140deg,#3BD07A,#1FA84C); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.03em;
  box-shadow:0 10px 26px rgba(20,140,70,.38);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.94);
  transition:opacity .32s var(--ease), transform .32s var(--ease),
             visibility .32s var(--ease), box-shadow .32s var(--ease);
}
.waFab.is-on{ opacity:1; visibility:visible; transform:none; }
.waFab:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 32px rgba(20,140,70,.5); }
.waFab .ico{ width:23px; height:23px; position:relative; z-index:1; }
.waFab__txt{ position:relative; z-index:1; }
.waFab__pulse{
  position:absolute; left:11px; top:50%; translate:0 -50%;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.5);
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{
  0%   { transform:scale(.75); opacity:.55; }
  70%  { transform:scale(2.1);  opacity:0; }
  100% { transform:scale(2.1);  opacity:0; }
}

.toTop{
  position:fixed; right:26px; bottom:86px; z-index:119;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:#fff; color:var(--azul); border:1px solid var(--linea);
  box-shadow:0 8px 22px rgba(19,35,72,.14);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.toTop.is-on{ opacity:1; visibility:visible; transform:none; }
.toTop:hover{ background:var(--azul); color:#fff; transform:translateY(-3px); }
.toTop svg{ width:19px; height:19px; }

/* ============================================================== REVEAL == */
.rv{ opacity:0; transform:translateY(22px); }
.rv.is-in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }

/* brillo que barre los botones principales */
.btn--shine{ position:relative; overflow:hidden; }
.btn--shine::after{
  content:''; position:absolute; top:-60%; left:-70%; width:45%; height:220%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
  transform:skewX(-18deg); pointer-events:none;
  animation:btnShine 4.2s ease-in-out infinite;
}
@keyframes btnShine{
  0%, 62%  { left:-70%; }
  86%,100% { left:135%; }
}
.btn--primary:hover .btn__waCircle{ animation:wiggle .5s var(--ease); }
@keyframes wiggle{
  0%,100%{ transform:rotate(0); }
  30%{ transform:rotate(-12deg) scale(1.08); }
  65%{ transform:rotate(9deg) scale(1.05); }
}

/* iconos que reaccionan en las tarjetas */
.svcCard__art img, .svcCard__art .ico,
.accCard__art img{ transition:transform .38s var(--ease), filter .38s var(--ease); }
.svcCard:hover .svcCard__art img,
.svcCard:hover .svcCard__art .ico{ transform:translateY(-4px) scale(1.09); }
.accCard:hover .accCard__art img{ transform:translateY(-4px) scale(1.10) rotate(-2deg); }

.perks li .perk__ico{ transition:transform .3s var(--ease), background-color .3s var(--ease); }
.perks li:hover .perk__ico{ transform:translateY(-2px) scale(1.1); background:#D6E6FE; }

.step__ico{ transition:transform .35s var(--ease); }
.step:hover .step__ico{ transform:scale(1.14); }
.step__num{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.step:hover .step__num{ transform:scale(1.12); box-shadow:0 6px 16px rgba(6,99,245,.45); }

.stat{ transition:transform .3s var(--ease); }
.stat:hover{ transform:translateY(-4px); }
.stat__v{ transition:text-shadow .3s var(--ease); }
.stat:hover .stat__v{ text-shadow:0 6px 18px rgba(6,99,245,.30); }

.testi__ph{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.testi:hover .testi__ph{ transform:scale(1.09); box-shadow:0 6px 16px rgba(19,35,72,.22); }

.contactList__ico{ transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.contactList a:hover .contactList__ico{ transform:scale(1.14); box-shadow:0 5px 14px rgba(19,35,72,.24); }

.brand{ transition:transform .3s var(--ease); }
.brand:hover{ transform:translateY(-1px); }
.brand__mark img{ transition:transform .45s var(--ease), filter .45s var(--ease); }
.brand:hover .brand__mark img{ transform:scale(1.06) rotate(-3deg); filter:drop-shadow(0 5px 12px rgba(12,50,130,.28)); }

.promo{ transition:box-shadow .4s var(--ease); }
.promo:hover{ box-shadow:0 22px 52px rgba(9,49,150,.38); }
.promo__art img{ transition:transform .5s var(--ease); }
.promo:hover .promo__art img{ transform:scale(1.04); }
.promo__codeValue{ transition:transform .3s var(--ease); }
.promo:hover .promo__codeValue{ transform:scale(1.05); }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; }
  .rv.is-in{ transition:none; }
  .btn--shine::after, .waFab__pulse{ animation:none; }
  .hero__art img{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ========================================================== RESPONSIVE == */
@media (max-width:1360px){
  :root{ --gutter:22px; }
  .hero__in{ grid-template-columns:minmax(0,44%) minmax(0,1fr); }
}

@media (max-width:1180px){
  :root{ --hdr-h:78px; }
  .nav__list{ gap:20px; }
  .brand__name{ font-size:20px; }
  .brand__mark{ height:48px; }
  .svcGrid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .accBox{ grid-template-columns:1fr; }
  .accGrid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .garGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .trabGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .trust{ grid-template-columns:1fr 1fr; }
  .trust__testi{ grid-column:1 / -1; }
  .contactRow{ grid-template-columns:1fr 1fr; }
  .ctaCard{ grid-column:1 / -1; }
  .promo__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,180px) minmax(0,240px); }
  .promo__title{ font-size:25px; }
  .ftr__grid{ grid-template-columns:1.6fr 1fr 1.2fr; row-gap:26px; }
  .ftr__col--div{ padding-left:0; }
  .ftr__col--div::before{ display:none; }
}

@media (max-width:1024px){
  .hdr__in{ gap:16px; }
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto; z-index:95;
    margin:0; background:#fff;
    border-bottom:1px solid var(--linea);
    box-shadow:0 18px 40px rgba(19,35,72,.12);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .28s var(--ease);
    max-height:calc(100dvh - var(--hdr-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__list{
    flex-direction:column; align-items:stretch; gap:0;
    max-width:var(--container); margin-inline:auto; padding:8px var(--gutter) 18px;
  }
  .nav__list li{ border-bottom:1px solid var(--linea-2); }
  .nav__list li:last-child{ border-bottom:0; }
  .nav__link{ padding:15px 2px; font-size:13px; letter-spacing:.08em; }
  .nav__link::after{ display:none; }
  .nav__link.is-active{ color:var(--azul); }
  .burger{ display:block; margin-left:auto; }
  .btn--hdr{ display:none; }
  .nav__waLi{ display:block; padding-top:14px; border-bottom:0 !important; }
  .nav__waLi .btn{ width:100%; font-size:12px; padding:14px 18px; }

  .hero__in{ grid-template-columns:1fr; gap:8px; min-height:0; padding-top:8px; }
  .hero__copy{ text-align:center; }
  .eyebrow{ justify-content:center; }
  .hero__desc{ margin-inline:auto; }
  .hero__btns{ justify-content:center; }
  .hero__art{ justify-self:center; max-width:640px; }
  .hero__art img{ margin-inline:auto; }
  .perks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 22px; width:100%; border-radius:var(--r-lg); margin-top:14px; padding:16px 20px; }

  .promo__grid{
    grid-template-columns:1fr 1fr; grid-template-areas:'left mid' 'code art';
    padding:24px; gap:20px;
  }
  .promo__left{ grid-area:left; }
  .promo__mid{ grid-area:mid; }
  .promo__code{ grid-area:code; justify-self:start; }
  .promo__art{ grid-area:art; min-height:150px; }
  .promo__art img{ position:absolute; right:0; bottom:0; height:100%; }

  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 12px; }
  .step:not(:last-child)::after{ display:none; }
  .step__p{ max-width:none; }

  .ctaBand{ grid-template-columns:1fr; gap:18px; }
}

@media (max-width:860px){
  .svcGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .accGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .trust{ grid-template-columns:1fr; }
  .testiGrid{ grid-template-columns:1fr; }
  .contactRow{ grid-template-columns:1fr; }
  .mapCard{ min-height:230px; }
  .brands{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px 10px; }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
  .ftr__brandCol{ grid-column:1 / -1; }
  .trabGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .faqGrid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  :root{ --gutter:18px; --hdr-h:70px; }
  body{ font-size:14px; }
  .brand__mark{ height:42px; }
  .brand__name{ font-size:17px; }
  .brand__tag{ font-size:7.5px; letter-spacing:.28em; }

  .hero{ padding-top:22px; }
  .hero__title{ font-size:clamp(28px, 8.4vw, 40px); }
  .hero__desc{ font-size:13px; }
  .hero__btns .btn{ width:100%; }
  .perks{ grid-template-columns:1fr; gap:14px; }
  .perk__txt{ font-size:10.5px; }

  .sec--servicios{ padding-top:40px; }
  .secTitle{ font-size:19px; gap:10px; }
  .secTitle__rule{ width:20px; }
  .secTitle--plain{ font-size:14px; }

  .svcGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .svcCard__h{ font-size:11px; }
  .svcCard__p{ font-size:10.5px; }

  .accBox{ padding:18px; }
  .accBox__title{ font-size:22px; }
  .accGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .accPerks{ grid-template-columns:1fr; gap:10px; padding:14px 16px; }
  .accPerks li{ justify-content:flex-start; }

  .promo__grid{ grid-template-columns:1fr; grid-template-areas:'left' 'mid' 'code' 'art'; padding:24px 20px; gap:16px; }
  .promo__title{ font-size:23px; }
  .promo__off{ font-size:40px; }
  .promo__code{ justify-self:stretch; }
  .promo__art{ min-height:170px; }
  .promo__art img{ left:50%; right:auto; transform:translateX(-50%); }

  .steps{ grid-template-columns:1fr; gap:22px; }
  .step{ display:grid; grid-template-columns:64px 1fr; text-align:left; align-items:center; column-gap:12px; padding:0; }
  .step__top{ height:auto; grid-row:1 / span 3; justify-content:flex-start; }
  .step__num{ align-self:center; margin-bottom:0; }
  .step__ico{ align-self:center; margin-left:-8px; }
  .step__h{ margin-top:0; }
  .step__p{ font-size:11px; }

  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 8px; }
  .stat__v{ font-size:30px; }
  .stat__l{ font-size:9px; }
  .trust__whyTitle{ font-size:15px; }
  .trust__list li{ font-size:11.5px; }
  .testi__q, .testi__a{ font-size:11px; }

  .brands{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 10px; padding:18px; }
  .brands svg{ height:20px; }

  .mapCard{ min-height:auto; display:grid; }
  .mapCard__map{ position:relative; inset:auto; height:190px; }
  .mapCard__panel{ position:relative; right:auto; top:auto; transform:none; width:auto; border:0; border-top:1px solid var(--linea-2); border-radius:0 0 var(--r-md) var(--r-md); box-shadow:none; }
  .contactList__t{ font-size:11.5px; }
  .ctaCard__title{ font-size:17px; }
  .ctaCard__text{ font-size:11.5px; }
  .btn--cta{ align-self:stretch; width:100%; }

  .ftr__grid{ grid-template-columns:1fr; gap:24px; }
  .ftr__barIn{ flex-direction:column; gap:6px; text-align:center; padding:14px 18px; }

  .ctaBand{ padding:22px 20px; }
  .ctaBand__title{ font-size:20px; }
  .ctaBand__p{ font-size:12px; }
  .ctaBand__btns{ flex-direction:column; }
  .ctaBand__btns .btn{ width:100%; }

  .garGrid{ grid-template-columns:1fr; gap:12px; }
  .garCard{ padding:20px 18px; }
  .garCard__p{ font-size:11.5px; }
  .garNota{ padding:14px 16px; }
  .garNota p{ font-size:11.5px; }

  .trabGrid{ grid-template-columns:1fr; gap:14px; }
  .trabCard__p{ font-size:11.5px; }

  .faqItem__q{ font-size:12.5px; padding:14px 15px; }
  .faqItem__a p{ font-size:12px; padding-left:15px; padding-right:15px; }

  /* en móvil el botón flotante se queda sólo con el icono */
  .waFab{ right:14px; bottom:14px; padding:14px; gap:0; }
  .waFab__txt{ display:none; }
  .waFab__pulse{ left:50%; translate:-50% -50%; }
  .toTop{ right:18px; bottom:78px; width:38px; height:38px; }
}

@media (max-width:400px){
  :root{ --gutter:15px; }
  .brand__name{ font-size:15.5px; }
  .brand__tag{ letter-spacing:.22em; }
  .svcGrid{ grid-template-columns:1fr; }
  .accGrid{ grid-template-columns:1fr 1fr; }
  .hero__title{ font-size:27px; }
}