/* ============================================================
   FUMIPLAG V9 - AJUSTE FINAL SEGUN FEEDBACK DEL CLIENTE
   Objetivo: recuperar impacto/dinamismo, mantener video + dengue,
   usar los colores del logo con mas energia y mostrar 3 fotos reales
   de presentacion sin recortes agresivos.
   ============================================================ */
:root{
  --v9-green:#009447;
  --v9-green-dark:#006c34;
  --v9-green-deep:#06452b;
  --v9-red:#e5322c;
  --v9-red-dark:#bf211d;
  --v9-cream:#f8fbf7;
  --v9-ink:#101712;
}

/* La segunda propuesta se sentia plana: aqui recuperamos contraste y profundidad. */
body{
  color:var(--v9-ink);
  background:
    radial-gradient(circle at 8% 4%,rgba(0,148,71,.045),transparent 20rem),
    radial-gradient(circle at 94% 15%,rgba(229,50,44,.035),transparent 18rem),
    #fff;
}

.scroll-progress{
  height:4px;
  background:linear-gradient(90deg,var(--v9-green) 0 70%,var(--v9-red) 70% 100%);
}

/* Franja viva: verde de marca, no negro dominante. */
.brand-motion{
  border-bottom:3px solid var(--v9-red);
  background:linear-gradient(100deg,#006c34 0%,#009447 45%,#00793b 78%,#005f2d 100%);
  box-shadow:0 9px 26px rgba(0,108,52,.16);
}
.brand-motion::before{background:linear-gradient(90deg,#006c34,transparent)}
.brand-motion::after{background:linear-gradient(270deg,#005f2d,transparent)}
.brand-motion-item{color:#f4fff8}
.brand-motion-item b{color:#fff}
.brand-motion-item::before{background:var(--v9-red);box-shadow:0 0 0 4px rgba(255,255,255,.14)}


/* Barra utilitaria premium: contacto visible antes del header. */
.utility-bar{
  position:relative;
  z-index:15;
  background:linear-gradient(90deg,#063f28 0%,#006c34 28%,#009447 70%,#0b7e43 100%);
  color:#f7fff9;
  box-shadow:0 10px 26px rgba(0,76,38,.12);
}
.utility-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--v9-red),#ffcf24,var(--v9-green));
}
.utility-bar-shell{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:44px;padding:10px 0;
}
.utility-links{display:flex;flex-wrap:wrap;gap:10px}
.utility-links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;
  color:#fff;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.01em;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.utility-links a:hover{transform:translateY(-2px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.26)}
.utility-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;background:rgba(6,18,11,.18);
  border:1px solid rgba(255,255,255,.14);font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
}

/* Portada: colores mas vivos, capas y movimiento visual. */
.hero.hero-v6{
  position:relative;
  overflow:hidden;
  padding-top:48px;
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(229,50,44,.15),transparent 19rem),
    radial-gradient(circle at 9% 26%,rgba(0,148,71,.18),transparent 25rem),
    linear-gradient(135deg,#f5fff9 0%,#ffffff 48%,#fff6f5 100%);
  box-shadow:inset 0 -1px 0 rgba(0,108,52,.1);
}
.hero.hero-v6::before{
  width:510px;height:510px;right:-210px;top:25px;
  border:2px solid rgba(0,148,71,.18);
  box-shadow:inset 0 0 0 44px rgba(0,148,71,.035),0 0 0 18px rgba(229,50,44,.018);
}
.hero.hero-v6::after{
  left:-120px;bottom:35px;width:330px;height:330px;
  background:radial-gradient(circle at 60% 42%,rgba(229,50,44,.16),rgba(229,50,44,.035) 55%,transparent 65%);
}
.hero-v6-brand{
  border:1px solid rgba(0,148,71,.22);
  box-shadow:0 18px 46px rgba(0,90,44,.12),0 0 0 5px rgba(255,255,255,.72);
}
.hero-v6-brandline b{background:linear-gradient(135deg,var(--v9-red),#f04c45)}
.hero-v6-kicker{color:var(--v9-green-dark)}
.hero-v6 h1{
  max-width:800px;
  color:var(--v9-ink);
  background:linear-gradient(96deg,#101712 0%,#101712 58%,var(--v9-green-dark) 82%,var(--v9-green) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-v6-special{
  border:1px solid rgba(229,50,44,.15);
  background:linear-gradient(90deg,#fff5f4,#fff 55%,#f2fff7);
  box-shadow:0 12px 30px rgba(93,33,28,.05);
}
.hero-v6-details>div{
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 24px rgba(0,86,42,.055);
}
.hero-v6-details>div:nth-child(2)::after{background:linear-gradient(var(--v9-red),var(--v9-green))}


.hero-v9-impact{
  display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px;
}
.hero-v9-impact span{
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:10px 14px;border-radius:16px;
  background:linear-gradient(180deg,#fff,#f6fdf8);border:1px solid rgba(0,148,71,.16);
  box-shadow:0 12px 28px rgba(0,86,42,.06);font-size:11px;font-weight:800;color:#1e2b23;
}
.hero-v6-proof div:nth-child(3){border-left:3px solid var(--v9-red)}

/* Video y afiche dengue se mantienen como protagonistas, pero con mas impacto. */
.hero-v7-media::before{
  inset:44px -10px 44px 35px;
  background:
    radial-gradient(circle at 82% 18%,rgba(229,50,44,.22),transparent 34%),
    radial-gradient(circle at 18% 76%,rgba(0,148,71,.2),transparent 38%),
    linear-gradient(145deg,#dcf6e7,#fff 58%,#fff0ef);
  border:1px solid rgba(0,148,71,.08);
}
.hero-v7-video-card{
  border:2px solid rgba(0,148,71,.34);
  box-shadow:0 32px 82px rgba(0,74,37,.22),14px 14px 0 -7px rgba(229,50,44,.22);
  animation:v9VideoGlow 5.8s ease-in-out infinite;
}
.hero-v7-video-topline{background:linear-gradient(90deg,rgba(0,92,45,.88),rgba(5,30,18,.76))}
.hero-v7-dengue-card{
  border:7px solid #fff;
  box-shadow:0 28px 68px rgba(0,77,38,.27),0 0 0 3px rgba(229,50,44,.24);
  outline:1px dashed rgba(229,50,44,.55);
  outline-offset:6px;
}
.hero-v7-float{
  border:1px solid rgba(0,148,71,.24);
  box-shadow:0 14px 34px rgba(0,80,40,.12);
}

/* Contacto: el cliente pidio DOS telefonos visibles y un correo. */
.hero-v7-contactbar{
  border:1px solid rgba(0,148,71,.18);
  box-shadow:0 20px 52px rgba(0,83,41,.11);
  background:rgba(255,255,255,.96);
}
.hero-v7-contact-title{
  background:linear-gradient(135deg,#06452b,#009447);
}
.hero-v7-contact-title::after{background:var(--v9-red)}
.hero-v7-contactbar>a{
  position:relative;overflow:hidden;
  background:#fff;
}
.hero-v7-contactbar>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--v9-green),var(--v9-red));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.hero-v7-contactbar>a:hover::after{transform:scaleX(1)}

/* Tres fotos de presentacion reales, completas y sin acercamientos agresivos. */
.presentation-v9{
  position:relative;
  overflow:hidden;
  padding:34px 0 50px;
  background:
    linear-gradient(180deg,#fff 0%,#f6fbf8 100%);
  border-bottom:1px solid rgba(0,148,71,.08);
}
.presentation-v9::before{
  content:"";position:absolute;left:0;top:0;width:42%;height:5px;
  background:var(--v9-green);
}
.presentation-v9::after{
  content:"";position:absolute;right:0;top:0;width:18%;height:5px;
  background:var(--v9-red);
}
.presentation-v9-shell{position:relative;z-index:1}
.presentation-v9-head{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr);gap:42px;align-items:end;
  margin-bottom:22px;
}
.presentation-v9-kicker{
  display:flex;align-items:center;gap:9px;margin:0 0 8px;
  color:var(--v9-green-dark);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
.presentation-v9-kicker span{
  width:9px;height:9px;border-radius:50%;background:var(--v9-red);
  box-shadow:0 0 0 5px rgba(229,50,44,.11);
  animation:v9Pulse 2.4s ease-out infinite;
}
.presentation-v9-head h2{
  max-width:780px;margin:0;
  color:#111713;font-family:var(--font-display);font-size:clamp(2rem,3.5vw,3.55rem);line-height:.98;letter-spacing:-.052em;
}
.presentation-v9-head h2::after{
  content:"";display:block;width:92px;height:5px;margin-top:16px;border-radius:99px;
  background:linear-gradient(90deg,var(--v9-green) 0 65%,var(--v9-red) 65% 100%);
}
.presentation-v9-head>p{
  margin:0;padding-left:18px;border-left:3px solid var(--v9-red);
  color:#59675f;font-size:12px;line-height:1.65;
}
.presentation-v9-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.presentation-v9-card{
  position:relative;overflow:hidden;margin:0;
  border:1px solid rgba(0,104,50,.14);border-radius:22px;background:#fff;
  box-shadow:0 18px 45px rgba(0,69,35,.1);
  transition:box-shadow .28s ease,border-color .28s ease,transform .28s ease;
}
.presentation-v9-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:3;
  background:var(--v9-green);
}
.presentation-v9-card--red::before{background:var(--v9-red)}
.presentation-v9-card::after{
  content:"";position:absolute;z-index:4;top:-40%;bottom:-40%;left:-35%;width:22%;pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:v9PhotoSheen 8.5s ease-in-out infinite;
}
.presentation-v9-card:nth-child(2)::after{animation-delay:1.2s}
.presentation-v9-card:nth-child(3)::after{animation-delay:2.4s}
.presentation-v9-card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,148,71,.28);
  box-shadow:0 26px 60px rgba(0,69,35,.16);
}
.presentation-v9-card img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  background:#edf4f0;filter:saturate(1.04) contrast(1.02);
  transition:filter .3s ease;
}
.presentation-v9-card:hover img{filter:saturate(1.12) contrast(1.04)}
.presentation-v9-card figcaption{
  display:grid;gap:4px;padding:14px 16px 16px;background:#fff;
}
.presentation-v9-card figcaption strong{color:#101713;font-size:12px}
.presentation-v9-card figcaption span{color:#647169;font-size:9px;line-height:1.45}


.presentation-v9-grid{align-items:stretch}
.presentation-v9-card figcaption strong{font-size:13px}
.presentation-v9-card:first-child{
  background:linear-gradient(180deg,#fff,#fbfffc);
}
.presentation-v9-card:first-child img{background:linear-gradient(180deg,#eef8f1,#f8fbf9)}

/* Secciones: menos plano, mas jerarquia visual sin saturar. */
.about{background:linear-gradient(180deg,#fff,#fbfdfc)}
.about-visual>img{box-shadow:0 28px 62px rgba(0,73,37,.15)}
.about-visual::before{background:linear-gradient(135deg,rgba(0,148,71,.14),rgba(229,50,44,.09))}
.section-head h2::after,.about-copy h2::after,.faq-intro h2::after{
  background:linear-gradient(90deg,var(--v9-green) 0 68%,var(--v9-red) 68%)!important;
}
.service-card{
  position:relative;
  border-color:rgba(0,108,52,.13);
  box-shadow:0 10px 28px rgba(0,76,38,.07);
}
.service-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--v9-green),var(--v9-red));
  transform:scaleX(.14);transform-origin:left;transition:transform .32s ease;
}
.service-card:hover::after{transform:scaleX(1)}
.coverage-card{box-shadow:0 28px 72px rgba(0,72,37,.12)}

@keyframes v9VideoGlow{
  0%,100%{box-shadow:0 32px 82px rgba(0,74,37,.22),14px 14px 0 -7px rgba(229,50,44,.22)}
  50%{box-shadow:0 38px 92px rgba(0,74,37,.28),16px 16px 0 -6px rgba(229,50,44,.28)}
}
@keyframes v9Pulse{0%{box-shadow:0 0 0 0 rgba(229,50,44,.22)}75%,100%{box-shadow:0 0 0 12px rgba(229,50,44,0)}}
@keyframes v9PhotoSheen{0%,68%{transform:translateX(-220%) skewX(-18deg)}82%,100%{transform:translateX(720%) skewX(-18deg)}}

@media(max-width:900px){
  .hero.hero-v6{padding-top:32px}
  .presentation-v9-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .presentation-v9-head>p{max-width:720px}
  .presentation-v9-grid{gap:10px}
  .presentation-v9-card figcaption{padding:12px}
}

@media(max-width:640px){
  .brand-motion{border-bottom-width:2px}
  .hero.hero-v6{padding-top:24px}
  .hero-v7-video-card{animation:none}
  .hero-v7-dengue-card::before{display:none}
  .hero-v7-contactbar>a::after{display:none}
  .presentation-v9{padding:28px 0 36px}
  .presentation-v9-head{margin-bottom:16px}
  .presentation-v9-head h2{font-size:clamp(1.85rem,10vw,2.6rem)}
  .presentation-v9-head>p{padding-left:12px;font-size:10px}
  .presentation-v9-grid{grid-template-columns:1fr 1fr;gap:9px}
  .presentation-v9-card:first-child{grid-column:1/-1}
  .presentation-v9-card{border-radius:17px}
  .presentation-v9-card:hover{transform:none}
  .presentation-v9-card figcaption{padding:10px 11px 12px}
  .presentation-v9-card figcaption strong{font-size:10px}
  .presentation-v9-card figcaption span{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .hero-v7-video-card,.presentation-v9-kicker span,.presentation-v9-card::after{animation:none!important}
  .presentation-v9-card:hover{transform:none}
}

/* ============================================================
   V10 FINAL RESPONSIVE - validacion movil/tablet de entrega
   Corrige apilados, overflow y jerarquia en pantallas pequenas.
   ============================================================ */
@media(max-width:960px){
  /* En tablet/movil la barra superior se oculta para no duplicar
     contactos ni interferir con el menu fijo. Los 2 telefonos y
     el correo siguen visibles en el bloque de contacto del hero. */
  .utility-bar{display:none}
  .site-header{top:0}
}

@media(max-width:900px){
  .hero.hero-v6{padding-top:26px}
  .hero-v6-shell{gap:28px}
  .hero-v9-impact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hero-v9-impact span{justify-content:center;text-align:center;padding:10px 9px;font-size:10px}
  .hero-v7-contactbar{grid-template-columns:1fr 1fr}
  .hero-v7-contact-title{grid-column:1/-1}
  .hero-v7-contactbar>a:nth-child(4){grid-column:1/-1}
}

@media(max-width:640px){
  html{scroll-padding-top:72px}
  body{overflow-x:hidden}
  .brand-motion{font-size:9px}
  .brand-motion-item{padding-inline:14px}

  .hero.hero-v6{padding-top:18px}
  .hero-v6-shell{width:calc(100% - 24px);gap:24px}
  .hero-v6-copy{width:100%;min-width:0}
  .hero-v6-brand{width:100%;max-width:100%;margin-bottom:16px}
  .hero-v6-brandcopy{min-width:0}
  .hero-v6-brandline{flex-wrap:wrap}
  .hero-v6 h1{font-size:clamp(2rem,9.6vw,2.65rem);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
  .hero-v6-lead{font-size:13.5px;line-height:1.58}
  .hero-v6-special{padding:11px 12px;border-radius:14px;font-size:10.5px;line-height:1.5}
  .hero-v6-actions{gap:9px}
  .hero-v6-actions .button{min-height:47px;font-size:12px}

  .hero-v9-impact{display:grid;grid-template-columns:1fr;gap:7px;margin-top:12px}
  .hero-v9-impact span{justify-content:flex-start;text-align:left;min-height:40px;padding:9px 11px;border-radius:13px;font-size:10px;line-height:1.35}

  /* Media principal: limpio, sin salirse del viewport. */
  .hero-v7-media{width:100%;max-width:none;display:grid;grid-template-columns:1fr;gap:0;min-height:0;padding:0;margin:0;overflow:visible}
  .hero-v7-media::before{inset:40px 10px 24px 28px;border-radius:24px}
  .hero-v7-video-card{width:100%;max-width:none;aspect-ratio:1/1;margin:0;border-radius:20px;box-shadow:0 22px 50px rgba(0,74,37,.18),8px 8px 0 -5px rgba(229,50,44,.2)}
  .hero-v7-video-topline{top:10px;left:10px;max-width:calc(100% - 20px)}
  .hero-v7-video-overlay{left:10px;right:10px;bottom:10px}
  .hero-v7-sound{min-height:35px;padding:7px 10px;font-size:7.5px}
  .hero-v7-dengue-card{position:relative;left:auto;right:auto;bottom:auto;width:min(82%,290px);max-width:290px;margin:-42px 10px 0 auto;border-width:5px;border-radius:18px;outline:none;transform:none;box-shadow:0 20px 46px rgba(0,77,38,.22),0 0 0 2px rgba(229,50,44,.18)}
  .hero-v7-dengue-copy{left:11px;right:11px;bottom:10px}
  .hero-v7-dengue-copy strong{font-size:11px}
  .hero-v7-float{display:none}

  /* Contacto solicitado por el cliente: 2 telefonos juntos y correo completo. */
  .hero-v7-contactbar{width:calc(100% - 24px);grid-template-columns:1fr 1fr;gap:7px;margin-top:18px;padding:7px;border-radius:16px}
  .hero-v7-contact-title{grid-column:1/-1;min-height:48px;padding:9px 11px}
  .hero-v7-contactbar>a{min-height:58px;padding:8px 8px;gap:7px;border:1px solid rgba(0,148,71,.08);background:#fff}
  .hero-v7-contactbar>a:nth-child(4){grid-column:1/-1;min-height:52px}
  .hero-v7-contactbar strong{font-size:9.5px;line-height:1.22;overflow-wrap:anywhere}
  .hero-v7-contactbar small{font-size:6.5px;letter-spacing:.055em}
  .contact-ico{width:31px;height:31px;border-radius:10px;font-size:12px}
  .hero-v6-proof{width:calc(100% - 24px);margin-top:14px;border-radius:16px}
  .hero-v6-proof>div{padding:12px 14px}

  /* Fotos de presentacion: una por fila para no perder impacto en celular. */
  .presentation-v9{padding:34px 0 42px}
  .presentation-v9-head{gap:12px;margin-bottom:16px}
  .presentation-v9-head h2{font-size:clamp(1.9rem,8.8vw,2.55rem);line-height:1.02}
  .presentation-v9-head>p{padding-left:11px;font-size:10.5px;line-height:1.55}
  .presentation-v9-grid{grid-template-columns:1fr;gap:12px}
  .presentation-v9-card:first-child{grid-column:auto}
  .presentation-v9-card{border-radius:18px}
  .presentation-v9-card img{aspect-ratio:4/3;object-fit:contain;background:#eef5f1}
  .presentation-v9-card figcaption{padding:12px 13px 14px}
  .presentation-v9-card figcaption strong{font-size:11.5px}
  .presentation-v9-card figcaption span{font-size:9px}

  /* Secciones generales */
  .section{padding:62px 0}
  .section-head{margin-bottom:24px}
  .section-head h2,.about-copy h2,.dengue-copy h2,.coverage-copy h2,.quote-intro h2,.faq-intro h2{font-size:clamp(1.9rem,8.6vw,2.65rem);line-height:1.04}
  .section-head p,.about-copy>p,.dengue-copy>p,.coverage-copy>p,.quote-intro>p,.responsibility-card>div>p,.faq-intro>p{font-size:14px;line-height:1.6}
  .about-grid,.dengue-grid{gap:32px}
  .service-grid{gap:13px}
  .service-card{border-radius:17px}
  .service-body{padding:17px}
  .service-body h3{font-size:18px}
  .service-body p{font-size:12px;line-height:1.55}
  .gallery{gap:12px}
  .coverage-card{padding:24px 16px}
  .quote-form{padding:16px 12px}
  .contact-mini{display:grid;grid-template-columns:1fr;gap:7px}
  .contact-mini a{width:100%;overflow-wrap:anywhere}
  footer a{width:auto;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
}

@media(max-width:390px){
  .hero-v6-shell{width:calc(100% - 18px)}
  .hero-v6 h1{font-size:clamp(1.9rem,9.3vw,2.35rem)}
  .hero-v6-lead{font-size:13px}
  .hero-v7-dengue-card{width:86%;margin-top:-34px}
  .hero-v7-contactbar{width:calc(100% - 18px)}
  .hero-v7-contactbar>a{padding:8px 6px;gap:6px}
  .hero-v7-contactbar strong{font-size:9px}
  .hero-v6-proof{width:calc(100% - 18px)}
  .presentation-v9-head h2{font-size:1.9rem}
}

@media(max-width:350px){
  .brand-copy strong{font-size:12px}
  .brand-copy strong em{margin-left:3px;padding:3px 5px}
  .hero-v6 h1{font-size:1.85rem}
  .hero-v7-contactbar{grid-template-columns:1fr}
  .hero-v7-contact-title,.hero-v7-contactbar>a:nth-child(4){grid-column:auto}
  .hero-v7-contactbar>a{min-height:50px}
  .hero-v7-dengue-card{width:92%}
}

/* Evita que el menu oculto genere ancho horizontal en movil/tablet. */
@media(max-width:960px){
  .main-nav{
    left:0!important;
    right:0!important;
    width:100vw!important;
    transform:none!important;
    clip-path:inset(0 0 0 100%);
    opacity:0!important;
    visibility:hidden;
    pointer-events:none;
    transition:clip-path .28s cubic-bezier(.22,.8,.22,1),opacity .18s ease,visibility .28s ease!important;
  }
  .main-nav.open{
    clip-path:inset(0 0 0 0);
    opacity:1!important;
    visibility:visible;
    pointer-events:auto;
  }
}

/* Altura explicita del panel movil: evita que quede reducido a una franja. */
@media(max-width:960px){
  .main-nav{top:70px!important;bottom:auto!important;height:calc(100dvh - 70px)!important;max-height:calc(100dvh - 70px)!important}
}
@media(max-width:640px){
  .main-nav{top:66px!important;height:calc(100dvh - 66px)!important;max-height:calc(100dvh - 66px)!important}
}


/* ============================================================
   V11 CIERRE RESPONSIVE DEFINITIVO
   - El breakpoint del menu coincide con JS (960px).
   - Fallback vh + dvh para Safari/Android antiguos.
   - Menu horizontal de telefono en dos columnas para evitar
     desplazamiento innecesario en pantallas bajas.
   - Scroll tactil estable dentro del panel movil.
   ============================================================ */
@media(max-width:960px){
  .main-nav{
    height:calc(100vh - 70px)!important;
    max-height:calc(100vh - 70px)!important;
    height:calc(100dvh - 70px)!important;
    max-height:calc(100dvh - 70px)!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
}
@media(max-width:640px){
  .main-nav{
    height:calc(100vh - 66px)!important;
    max-height:calc(100vh - 66px)!important;
    height:calc(100dvh - 66px)!important;
    max-height:calc(100dvh - 66px)!important;
  }
}
@media(max-width:960px) and (max-height:540px) and (orientation:landscape){
  .main-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    column-gap:12px;
    row-gap:0;
    padding:9px 16px max(10px,env(safe-area-inset-bottom));
  }
  .main-nav::before,
  .main-nav .nav-cta{grid-column:1/-1}
  .main-nav a:not(.nav-cta){min-height:36px}
  .main-nav .nav-cta{min-height:40px;margin-top:9px}
}