/* MetroExtra landing - CSS externo
   Refactor conservador desde v235.
   Objetivo: mantener visualmente la versión anterior, externalizando estilos e imágenes.
*/

:root { --ink:#0a122a; --blue:#2f6bff; --red:#ff3b3c; --header-h-mobile:108px; --header-h-desktop:128px; }
      html { scroll-behavior:smooth; }
      body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
      .ink { color: var(--ink); }
      .cta { background: linear-gradient(90deg, var(--blue), var(--red)); color:#fff; box-shadow: 0 8px 18px rgba(47,107,255,.18); }
      .cta-ghost { border:2px solid rgba(10,18,42,.5); color:var(--ink); background:transparent; }
      .divider { height:4px; background: linear-gradient(90deg, var(--blue), var(--red)); }
      .navlink {
        color: var(--ink); font-weight:700; padding:10px 12px; border-radius:999px;
        background: linear-gradient(90deg, rgba(47,107,255,.10), rgba(255,59,60,.10));
        box-shadow: inset 0 0 0 1px rgba(16,24,40,.08);
        display:inline-flex; align-items:center; height:40px; white-space:nowrap; font-size:.95rem;
        letter-spacing: .1px;
      }
      .nav-cta{ background:linear-gradient(90deg, var(--blue), var(--red)); color:#fff; }
      .anchor-offset{ scroll-margin-top: var(--header-h-mobile); }
      @media (min-width:768px){ .anchor-offset{ scroll-margin-top: var(--header-h-desktop); } }
      .card { border: 1px solid rgb(226,232,240); border-radius: 16px; background: rgba(47,107,255,.06); }
      .card-inner { padding: 1rem; min-height: 100px; overflow: hidden; }
      .card-title { font-weight: 800; }
      .list-disc li::marker { color: var(--blue); }

/* v26.2: WA sticky "freeze" + verde consistente (override fuerte) */
.wa-sticky{
  background-color:#25D366 !important;
  background-image:none !important;
  color:#fff !important;
}
.wa-sticky:hover{ background-color:#1EBE5D !important; }

.wa-sticky{
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    background: #25d366;
    color: #fff;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    display: inline-flex; /* visible in desktop & mobile */
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .wa-sticky:hover{ filter: brightness(0.95); }

  .wa-sticky{ transition: opacity .18s ease, transform .18s ease, filter .15s ease; }
  .wa-sticky:active{ filter: brightness(0.9); }

  @media (max-width: 768px){
    .wa-sticky{ display: inline-flex; }
  }
  .wa-sticky:hover{ filter: brightness(.95); }
  @media (min-width: 900px){
    .wa-sticky{ bottom: 22px; right: 22px; }
  }

@media (max-width: 640px){
    body{ padding-bottom: 92px; }
  }

/* v23 fallback utilities (para que se vea bien incluso si Tailwind CDN no carga) */
.mx-auto{margin-left:auto;margin-right:auto;}
.max-w-6xl{max-width:72rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.p-6{padding:1.5rem;}
.p-10{padding:2.5rem;}
.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;}
.mb-2{margin-bottom:.5rem;}
.mb-4{margin-bottom:1rem;}
.mb-5{margin-bottom:1.25rem;}
.mb-6{margin-bottom:1.5rem;}
.gap-2{gap:.5rem;}
.gap-3{gap:.75rem;}
.gap-5{gap:1.25rem;}
.flex{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.space-y-3> :not([hidden]) ~ :not([hidden]){margin-top:.75rem;}
.rounded-xl{border-radius:.75rem;}
.rounded-2xl{border-radius:1rem;}
.border{border-width:1px;border-style:solid;}
.border-slate-200{border-color:rgb(226,232,240);}
.bg-white{background:#fff;}
.shadow-sm{box-shadow:0 1px 2px rgba(16,24,40,.06);}

.text-xs{font-size:.75rem;line-height:1rem;}
.text-sm{font-size:.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.font-bold{font-weight:700;}
.font-extrabold{font-weight:800;}
.font-semibold{font-weight:600;}
.text-slate-500{color:rgb(100,116,139);}
.text-slate-600{color:rgb(71,85,105);}
.text-slate-700{color:rgb(51,65,85);}

/* Mejoras mobile */
header img{max-height:64px;width:auto;height:auto;display:block;}
@media (min-width:768px){
  .md\:px-4{padding-left:1rem;padding-right:1rem;}
  .md\:py-12{padding-top:3rem;padding-bottom:3rem;}
  .md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
  .md\:p-10{padding:2.5rem;}
  .md\:gap-5{gap:1.25rem;}
  .md\:text-base{font-size:1rem;line-height:1.5rem;}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem;}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:640px){
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:1024px){
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
}

/* v23.1 fixes: visibility utilities + header mobile layout */
.hidden{display:none !important;}
.block{display:block !important;}
.inline-block{display:inline-block !important;}

@media (min-width:768px){
  .md\:flex{display:flex !important;}
  .md\:hidden{display:none !important;}
  .md\:block{display:block !important;}
}

/* Header: evitar menú vertical gigante y blancos */
header .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:767px){
  header .topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  header .topbar .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  header .topbar nav{
    width:100%;
  }
  header .topbar nav a.navlink{
    margin-bottom:6px;
  }
  /* Forzar solo menú mobile */
  header nav.hidden.md\:flex{display:none !important;}
  header nav.md\:hidden{display:flex !important; flex-wrap:wrap;}
}

/* v23.2 polish: header pills + footer/contact spacing */
@media (max-width:767px){
  /* Logo + descriptor */
  header .brand img{max-width:240px; height:auto;}
  header .brand + div, header .topbar .tagline{
    font-size:14px;
    line-height:1.2;
  }

  /* Nav pills: más compactas */
  header nav.md\:hidden{
    gap:10px !important;
    margin-top:8px !important;
  }
  header nav.md\:hidden a.navlink{
    padding:10px 14px !important;
    font-size:14px !important;
    border-radius:999px !important;
  }
  header nav.md\:hidden a.nav-cta{
    padding:12px 16px !important;
    font-weight:800 !important;
  }

  /* Evitar “pegado” general */
  section{ scroll-margin-top: 90px; }
}

/* Contacto / footer: aire */
#contacto, #contact, section#contacto, section#contact{
  margin-top: 12px;
}
#contacto .card, #contact .card{ }
#contacto .card-inner, #contact .card-inner{
  padding: 18px !important;
}
#contacto p, #contact p, footer p{
  line-height: 1.45;
}
footer{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
footer .footer-inner, footer .container{
  gap: 10px;
}
footer a{
  text-decoration: none;
}

/* v23.3: más aire entre CTAs y recuadros de "próximamente" */
@media (max-width:767px){
  /* Recuadro grande de "Próximamente: fotos..." dentro del hero */
  #metroextra .photo-box,
  #metroextra .media-box,
  #metroextra .preview-box,
  #metroextra .mockup-box{
    margin-top: 14px !important;
  }
  #metroextra .photo-box p{ margin-top: 0 !important; }

  /* Pastilla "Mapa/Foto del frente próximamente" */
  .mapa-prox{
    display:inline-block;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }
}

/* MAPA ZONA */
.mapa-box{
  margin-top: 18px;
  margin-bottom: 24px;
}
.mapa-box img{
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  display: block;
}
.mapa-caption{
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: -2px;
}

/* v23.5: mapa solo en Contacto + asegurar que cargue y ocupe el ancho del recuadro */
#contacto .mapa-box img, #contact .mapa-box img{
  max-width: 100% !important;
}

/* v23.6: Contacto + mapa (solo) - asegurar carga desde /assets y estética */
#contacto .mapa-box, #contact .mapa-box{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#contacto .mapa-box img, #contact .mapa-box img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  display: block !important;
}
#contacto .mapa-caption, #contact .mapa-caption{
  margin-top: 10px !important;
  font-size: 0.9rem !important;
  color: #6b7280 !important;
  line-height: 1.35 !important;
}
/* Dar más "aire" dentro del recuadro derecho */
#contacto .card-inner, #contacto .card-inner{
  padding: 18px !important;
}

/* MAPA ZONA (Contacto) */
.mapa-box img{
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  display: block;
}
.mapa-caption{
  margin-top: 10px;
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.35;
}

/* WhatsApp icon button (header) */
@media (max-width: 768px) {
  }

/* WhatsApp icon button (header) – v25.2 polish */
.btn-whatsapp-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background-color:#25D366;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-whatsapp-icon:hover{
  background-color:#1EBE5D; /* ligeramente más oscuro */
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,0.18);
}
.btn-whatsapp-icon:active{
  background-color:#1AAE55;
  transform:translateY(0);
}
.btn-whatsapp-icon:focus-visible{
  outline:3px solid rgba(37,211,102,0.35);
  outline-offset:3px;
}
@media (max-width:768px){
  /* un poquito menos "inflado" en mobile */
  .btn-whatsapp-icon{
    width:42px;
    height:42px;
  }
  .btn-whatsapp-icon svg{
    width:20px !important;
    height:20px !important;
  }
}

/* Unified WhatsApp buttons (green everywhere WhatsApp appears) */
.wa-btn{
  background-color:#25D366 !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 18px rgba(37,211,102,.20) !important;
  transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wa-btn:hover{
  background-color:#1EBE5D !important;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(37,211,102,.24) !important;
}
.wa-btn:active{
  background-color:#1AAE55 !important;
  transform:translateY(0);
}
.wa-btn:focus-visible{
  outline:3px solid rgba(37,211,102,0.35);
  outline-offset:3px;
}

/* Sticky WhatsApp: only mobile */
.wa-sticky{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  text-decoration:none;
}

/* v26.3 override: WA sticky visible en desktop+mobile, verde fijo */
.wa-sticky{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color:#25D366 !important;
  background-image:none !important;
  color:#fff !important;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.wa-sticky:hover{ background-color:#1EBE5D !important; filter:none !important; }
.wa-sticky:active{ background-color:#1AAE55 !important; }

/* === v99 visual patches on top of v32 === */
:root{
  --mx-header-dark:#0A2E73;
  --mx-hero-dark-1:#08337c;
  --mx-hero-dark-2:#062a68;
  --mx-hero-dark-3:#041f4f;
}

.divider{
  background:#08265c !important;
  height:8px !important;
}

header.sticky{
  background: var(--mx-header-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(8px);
}
header .ink,
header .navlink,
header .brand + div{
  color:#fff !important;
}
header .navlink{
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
header .navlink:hover{
  background: rgba(255,255,255,.12) !important;
}

#metroextra{
  background: linear-gradient(180deg,var(--mx-hero-dark-1) 0%, var(--mx-hero-dark-2) 55%, var(--mx-hero-dark-3) 100%) !important;
}
#metroextra h1,
#metroextra .text-\[11px\],
#metroextra p,
#metroextra li,
#metroextra .text-slate-600,
#metroextra .text-slate-700,
#metroextra .text-slate-800{
  color:#fff !important;
}
#metroextra .cta-ghost{
  color:#fff !important;
  border-color: rgba(255,255,255,.45) !important;
}
#metroextra .rounded-2xl,
#metroextra .rounded-3xl{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.20) !important;
}
#metroextra .rounded-2xl p,
#metroextra .rounded-3xl p{
  color: rgba(255,255,255,.82) !important;
}

.mx-gallery-main{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  background: rgba(255,255,255,.08);
}
.mx-gallery-main img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.mx-thumb{
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.mx-thumb.is-active{
  box-shadow: 0 0 0 2px rgba(65,162,255,.55), 0 8px 20px rgba(0,0,0,.16);
}

header img[alt="Metroextra"]{
  height:56px !important;
  width:auto !important;
  max-height:56px !important;
  object-fit:contain !important;
}
@media (min-width:768px){
  header img[alt="Metroextra"]{
    height:68px !important;
    max-height:68px !important;
  }
}

/* v100 fixes: embed gallery images + reliable map */
.mx-gallery-main img{display:block !important; width:100% !important; height:auto !important;}
.mx-thumb img{display:block !important; width:100% !important;}

/* v101 palette preview - MetroExtra blue */
:root{
  --mx-blue:#1E4FA6;
  --mx-blue-dark:#163F8A;
  --mx-blue-light:#3B6FD6;
  --mx-white:#FFFFFF;
  --mx-gray:#E5E7EB;
}
.divider{
  background:#163F8A !important;
  height:8px !important;
}
header.sticky{
  background: linear-gradient(180deg,#1E4FA6 0%, #163F8A 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
header .ink,
header .navlink,
header .brand + div{
  color:#fff !important;
}
header .navlink{
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
header .navlink:hover{
  background: rgba(255,255,255,.14) !important;
}
#metroextra{
  background: linear-gradient(180deg,#1E4FA6 0%, #163F8A 100%) !important;
}
#metroextra h1,
#metroextra p,
#metroextra li,
#metroextra .text-slate-600,
#metroextra .text-slate-700,
#metroextra .text-slate-800,
#metroextra .ink{
  color:#fff !important;
}
#metroextra .cta-ghost{
  color:#fff !important;
  border-color: rgba(255,255,255,.45) !important;
  background: transparent !important;
}
#metroextra .rounded-2xl,
#metroextra .rounded-3xl{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
}
#metroextra .rounded-2xl p,
#metroextra .rounded-3xl p{
  color: rgba(255,255,255,.85) !important;
}
.card{
  background: rgba(30,79,166,.06) !important;
  border-color: rgba(30,79,166,.12) !important;
}
.cta{
  background: linear-gradient(180deg,#3B6FD6 0%, #1E4FA6 100%) !important;
  color:#fff !important;
}
.cta-ghost{
  border-color:#1E4FA6 !important;
  color:#163F8A !important;
}
.list-disc li::marker{
  color:#3B6FD6 !important;
}
.mx-thumb.is-active{
  box-shadow: 0 0 0 2px rgba(59,111,214,.75), 0 8px 20px rgba(0,0,0,.16) !important;
}
footer{
  background: linear-gradient(180deg,#163F8A 0%, #12326d 100%) !important;
  color:#fff !important;
}
footer p, footer a, footer .text-slate-600, footer .text-slate-700{
  color:#fff !important;
}

/* v107 header full dark strip like logo background */
header.sticky{
  background: linear-gradient(180deg,#1f3f7a 0%, #183564 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.divider{
  background: transparent;
}
header .navlink{
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
header .navlink:hover{
  background: rgba(255,255,255,.12) !important;
}
header .flex.items-center.gap-3{
  gap:16px !important;
}
header img[alt="Metroextra"]{
  height:60px !important;
  width:auto !important;
  display:block !important;
  object-fit:contain !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
header .ink{
  color:#fff !important;
  font-weight:700 !important;
}
@media (max-width:768px){
  header img[alt="Metroextra"]{
    height:52px !important;
  }
}

/* v110: transparent vector logo in header */
header .brand,
header .brand *,
header .flex.items-center.gap-3{
  background: transparent !important;
}
header img[alt="Metroextra"]{
  height:48px !important;
  width:auto !important;
  max-height:48px !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (min-width:768px){
  header img[alt="Metroextra"]{
    height:48px !important;
    max-height:48px !important;
  }
}

/* v111 adjustments */
header img[alt="Metroextra"]{
  height:60px !important;
  max-height:60px !important;
  margin-right:14px !important;
}

header .flex.items-center.gap-3{
  align-items:center !important;
}

header .ink{
  margin-left:6px !important;
  font-size:20px !important;
}

/* v112 fine alignment */
header img[alt="Metroextra"]{
  height:60px !important;
  max-height:60px !important;
  margin-right:14px !important;
  transform: translateY(4px); /* baja el logo para alinear METROEXTRA con el texto */
}

header .ink{
  display:flex !important;
  align-items:center !important;
  font-size:20px !important;
}

/* v113 premium alignment */
header .flex.items-center.gap-3{
  gap:12px !important;
  align-items:center !important;
}

header img[alt="Metroextra"]{
  height:62px !important;
  max-height:62px !important;
  transform: translateY(6px);
}

header .ink{
  margin-left:4px !important;
  font-size:20px !important;
  display:flex !important;
  align-items:center !important;
  letter-spacing:0.2px;
}

/* v114 premium polish + mobile WhatsApp balance */
header.sticky{
  box-shadow: 0 6px 18px rgba(7, 24, 61, .18);
  transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
}
header .navlink{
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
header .navlink:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(8, 20, 42, .18), inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

/* mobile: avoid lonely WhatsApp button floating in a sea of blue */
@media (max-width: 768px){
  header .mx-auto.max-w-6xl{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* stack top area a bit cleaner on mobile */
  header .w-full.flex.items-center.justify-between.gap-2{
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* keep logo/title area readable */
  header .flex.items-center.gap-3{
    gap: 10px !important;
    flex-wrap: wrap !important;
    max-width: calc(100% - 70px);
  }

  header img[alt="Metroextra"]{
    height: 56px !important;
    max-height: 56px !important;
    transform: translateY(2px) !important;
  }

  header .ink{
    font-size: 18px !important;
    line-height: 1.05 !important;
    max-width: 150px !important;
  }

  /* WhatsApp button becomes compact and anchored into layout */
  header a[href*="whatsapp"],
  header a[href*="wa.me"],
  header .wa-btn,
  header .whatsapp-btn{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -2px !important;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .18) !important;
  }

  header a[href*="whatsapp"] span,
  header a[href*="wa.me"] span,
  header .wa-btn span,
  header .whatsapp-btn span{
    display: none !important;
  }

  /* pull nav chips up closer so green button doesn't look isolated */
  header nav,
  header .nav,
  header .menu{
    margin-top: -2px !important;
  }

  /* stronger rhythm for the whole mobile hero header block */
  header.sticky + *{
    margin-top: 0 !important;
  }
}

/* v115 mobile header redesign */
@media (max-width: 768px){
  header .w-full.flex.items-center.justify-between.gap-2{
    display:block !important;
  }

  /* brand block centered, stacked */
  header .flex.items-center.gap-3{
    width:100% !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    text-align:center !important;
  }

  header img[alt="Metroextra"]{
    height:66px !important;
    max-height:66px !important;
    transform:none !important;
    margin:0 !important;
  }

  header .ink{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    font-size:18px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    text-align:center !important;
    display:block !important;
  }

  /* mobile nav centered on one rhythm line */
  header nav.md\:hidden{
    margin-top:14px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
  }

  header nav.md\:hidden .navlink{
    padding:14px 20px !important;
    border-radius:999px !important;
    font-size:17px !important;
    line-height:1 !important;
  }

  /* WhatsApp integrated with buttons, not floating alone */
  header nav.md\:hidden .btn-whatsapp-icon{
    width:auto !important;
    height:auto !important;
    min-width:unset !important;
    min-height:unset !important;
    padding:14px 18px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#25D366 !important;
    box-shadow:none !important;
    margin:0 !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon svg{
    width:20px !important;
    height:20px !important;
  }
}

/* v116 mobile: smaller chips so WhatsApp fits to the right of Cómo funciona */
@media (max-width: 768px){
  header nav.md\:hidden{
    display:grid !important;
    grid-template-columns: repeat(4, max-content) !important;
    justify-content:center !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:10px !important;
    margin-top:14px !important;
  }

  header nav.md\:hidden .navlink{
    padding:12px 16px !important;
    border-radius:999px !important;
    font-size:16px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#25D366 !important;
    margin:0 !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon svg{
    width:20px !important;
    height:20px !important;
  }
}

/* v117 mobile final: 4 actions on one centered row with balanced sizing */
@media (max-width: 768px){
  header nav.md\:hidden{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:14px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scrollbar-width:none;
  }
  header nav.md\:hidden::-webkit-scrollbar{
    display:none;
  }

  header nav.md\:hidden .navlink{
    padding:11px 14px !important;
    border-radius:999px !important;
    font-size:15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#25D366 !important;
    flex:0 0 auto !important;
    margin:0 !important;
    box-shadow:0 8px 16px rgba(15,23,42,.14) !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon svg{
    width:19px !important;
    height:19px !important;
  }

  /* slight compacting of title block to give row more room */
  header img[alt="Metroextra"]{
    height:62px !important;
    max-height:62px !important;
  }
  header .ink{
    font-size:17px !important;
  }
}

/* v118 mobile fixes: buttons fit + gallery stays in one compact spot */
@media (max-width: 768px){

  /* Header brand slightly more compact to free space */
  header img[alt="Metroextra"]{
    height:58px !important;
    max-height:58px !important;
  }
  header .ink{
    font-size:16px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  /* 4 actions fit without cutting edges */
  header nav.md\:hidden{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    margin-top:12px !important;
    padding:0 6px !important;
    overflow:visible !important;
  }

  header nav.md\:hidden .navlink{
    padding:10px 11px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    flex:0 1 auto !important;
    min-width:0 !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    margin:0 !important;
  }
  header nav.md\:hidden .btn-whatsapp-icon svg{
    width:18px !important;
    height:18px !important;
  }

  /* Gallery: keep one image, compact controls in same place */
  #mxHeroGalleryMain{
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    object-fit: cover !important;
  }

  /* Turn thumbs into compact dots instead of big stacked previews */
  .mt-4 > div:has(.mx-thumb),
  .mx-gallery-thumbs,
  .thumbs-row{
    margin-top:10px !important;
  }

  .mx-thumb{
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
    padding:0 !important;
    border-radius:999px !important;
    border:2px solid rgba(255,255,255,.45) !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 5px !important;
  }
  .mx-thumb img{
    display:none !important;
  }
  .mx-thumb.is-active{
    background:#22c55e !important;
    border-color:#22c55e !important;
    box-shadow:0 0 0 3px rgba(34,197,94,.16) !important;
  }

  /* Center compact dots row */
  .mx-thumb{
    vertical-align:middle !important;
  }
  #metroextra .mt-4 > div + div,
  #metroextra .mt-4 .text-xs.text-slate-500{
    text-align:center !important;
  }

  /* Tip text more compact */
  #metroextra .mt-3.text-xs{
    margin-top:10px !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }
}

/* v119 mobile polish: button parity + visible gallery dots */
@media (max-width: 768px){
  /* better visual balance between Cómo funciona and WhatsApp */
  header nav.md\:hidden{
    gap:8px !important;
  }

  header nav.md\:hidden .navlink{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    flex:0 0 46px !important;
  }

  /* gallery controls: horizontal, visible, centered */
  .mx-gallery-main{
    margin-bottom:10px !important;
  }

  #metroextra .mt-4 > div:has(.mx-thumb),
  #metroextra .mx-gallery-dots,
  #metroextra .thumbs-row{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:12px !important;
    margin-bottom:8px !important;
  }

  .mx-thumb{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
    margin:0 !important;
    display:inline-flex !important;
    vertical-align:middle !important;
  }

  #metroextra .mt-3.text-xs{
    margin-top:8px !important;
    text-align:center !important;
  }
}

/* v120 mobile gallery cleanup */
@media (max-width: 768px){
  /* hide the explanatory text only on mobile */
  #metroextra .rounded-2xl .text-center p.mt-1.text-xs,
  #metroextra .rounded-3xl .text-center p.mt-1.text-xs{
    display:none !important;
  }

  /* keep single image compact and visible */
  #mxHeroGalleryMain{
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;
  }

  /* dots stay visible and centered */
  .mx-thumb{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
    border-radius:999px !important;
  }

  /* tip text a bit tighter */
  #metroextra .mt-3.text-xs{
    margin-top:8px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }
}

/* v121 mobile final: centered buttons + stable single-photo gallery */
@media (max-width: 768px){
  /* action row centered and balanced */
  header nav.md\:hidden{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    padding:0 10px !important;
    margin-top:12px !important;
    overflow:visible !important;
  }

  header nav.md\:hidden .navlink{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:46px !important;
    padding:10px 12px !important;
    border-radius:999px !important;
    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    flex:0 1 auto !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    flex:0 0 46px !important;
    border-radius:999px !important;
    margin:0 !important;
  }

  /* gallery */
  #mxHeroGalleryMain{
    height:235px !important;
    min-height:235px !important;
    max-height:235px !important;
    object-fit:cover !important;
    object-position:center !important;
    transition: opacity .22s ease !important;
  }

  /* dots clearly visible */
  .mx-thumb{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
    border-radius:999px !important;
    border:2px solid rgba(255,255,255,.55) !important;
    background:transparent !important;
    box-shadow:none !important;
    display:inline-flex !important;
    margin:0 4px !important;
  }
  .mx-thumb img{ display:none !important; }
  .mx-thumb.is-active{
    background:#22c55e !important;
    border-color:#22c55e !important;
    box-shadow:0 0 0 3px rgba(34,197,94,.16) !important;
  }

  /* center the dots row */
  #metroextra .mt-4 > div:nth-of-type(2){
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:12px !important;
    margin-bottom:8px !important;
  }
}

@media (max-width: 768px){
  #mxGalleryCounter{
    display:block !important;
    text-align:center !important;
    font-size:11px !important;
    color:rgba(255,255,255,.75) !important;
    margin-top:6px !important;
  }
}

/* v124: keep desktop autoplay, fix mobile manual gallery */
@media (max-width: 768px){
  .mx-gallery-main{
    position:relative !important;
    background:rgba(16,33,70,.18) !important;
  }
  #mxHeroGalleryMain{
    height:235px !important;
    min-height:235px !important;
    max-height:235px !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:transparent !important;
    padding:4px !important;
    transition:opacity .22s ease !important;
  }
  .mx-gallery-arrow{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:34px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.22) !important;
    background:rgba(10,23,48,.58) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:3 !important;
    cursor:pointer !important;
  }
  .mx-gallery-arrow.prev{ left:10px !important; }
  .mx-gallery-arrow.next{ right:10px !important; }
  .mx-gallery-arrow svg{ width:16px !important; height:16px !important; }

  .mx-thumb{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
    border-radius:999px !important;
    border:2px solid rgba(255,255,255,.55) !important;
    background:transparent !important;
    box-shadow:none !important;
    display:inline-flex !important;
    margin:0 4px !important;
  }
  .mx-thumb img{ display:none !important; }
  .mx-thumb.is-active{
    background:#22c55e !important;
    border-color:#22c55e !important;
    box-shadow:0 0 0 3px rgba(34,197,94,.16) !important;
  }

  #metroextra .rounded-2xl .text-center p.mt-1.text-xs,
  #metroextra .rounded-3xl .text-center p.mt-1.text-xs{
    display:none !important;
  }

  #metroextra .mt-4 > div:nth-of-type(2){
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:12px !important;
    margin-bottom:8px !important;
  }
}

/* v125 mobile header spacing + tighter action pills */
@media (max-width: 768px){
  header .flex.items-center.gap-3{
    gap:6px !important;
  }

  header img[alt="Metroextra"]{
    height:60px !important;
    max-height:60px !important;
    margin-bottom:2px !important;
  }

  header .ink{
    font-size:17px !important;
    line-height:1 !important;
    margin-top:-2px !important;
    margin-bottom:4px !important;
    white-space:nowrap !important;
  }

  header nav.md\:hidden{
    gap:6px !important;
    margin-top:10px !important;
  }

  header nav.md\:hidden .navlink{
    padding:8px 12px !important;
    min-height:40px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon svg{
    width:17px !important;
    height:17px !important;
  }
}

/* v126 mobile: big title + ultra tight pills */
@media (max-width: 768px){

  /* BIGGER title like logo */
  header .ink{
    font-size:24px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    margin-top:2px !important;
    margin-bottom:6px !important;
  }

  /* ultra tight pills */
  header nav.md\:hidden .navlink{
    padding:6px 10px !important;
    min-height:auto !important;
    height:auto !important;
    font-size:13px !important;
    border-radius:999px !important;
  }

  /* make pill border closer to text */
  header nav.md\:hidden .navlink span,
  header nav.md\:hidden .navlink{
    line-height:1 !important;
  }

  /* whatsapp proportional */
  header nav.md\:hidden .btn-whatsapp-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  header nav.md\:hidden{
    gap:5px !important;
  }
}

@media (min-width: 769px){
  header .max-w-6xl{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items:center !important;
  }
  header .flex.items-center.gap-3{
    justify-self:start !important;
  }
  header .ink{
    justify-self:center !important;
    text-align:center !important;
    font-weight:700 !important;
    letter-spacing:0.6px !important;
    margin:0 !important;
  }
  header nav{
    justify-self:end !important;
  }
}

/* v130 desktop title truly centered + blue content sections */
@media (min-width: 769px){
  header .desktop-header-row{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    width:100% !important;
  }
  header .desktop-header-row .header-left{
    justify-self:start !important;
  }
  header .desktop-header-row .header-center{
    justify-self:center !important;
    text-align:center !important;
    width:100% !important;
    margin:0 !important;
    letter-spacing:.4px !important;
    font-weight:700 !important;
  }
  header .desktop-header-row > nav.hidden.md\:flex{
    justify-self:end !important;
  }
}

/* make the white sections blue */
section#problema,
section#que-es,
section#beneficios,
section#tamanos,
section#3pasos,
section#ubicacion,
section#preguntas,
section#faq{
  background: linear-gradient(180deg,#214b97 0%, #1c4389 100%) !important;
}

section#problema h2,
section#que-es h2,
section#beneficios h2,
section#tamanos h2,
section#3pasos h2,
section#ubicacion h2,
section#preguntas h2,
section#faq h2,
section#problema .ink,
section#que-es .ink,
section#beneficios .ink,
section#tamanos .ink,
section#3pasos .ink,
section#ubicacion .ink,
section#preguntas .ink,
section#faq .ink{
  color:#ffffff !important;
}
section#problema p,
section#que-es p,
section#beneficios p,
section#tamanos p,
section#3pasos p,
section#ubicacion p,
section#preguntas p,
section#faq p,
section#problema li,
section#que-es li,
section#beneficios li,
section#tamanos li,
section#3pasos li,
section#ubicacion li,
section#preguntas li,
section#faq li{
  color:rgba(255,255,255,.92) !important;
}
section#problema strong,
section#que-es strong,
section#beneficios strong,
section#tamanos strong,
section#3pasos strong,
section#ubicacion strong,
section#preguntas strong,
section#faq strong{
  color:#fff !important;
}

@media (min-width: 769px){
  header .desktop-header-row{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
  }
  header .header-center{
    text-align:center !important;
    justify-self:center !important;
    white-space:nowrap !important;
    width:100% !important;
  }
}

/* global blue */
body{
  background: linear-gradient(180deg,#214b97 0%, #1c4389 100%);
}

/* remove whites */
section{
  background: transparent !important;
}

/* text white */
section *{
  color:#ffffff !important;
}

/* v132 fix: blue backgrounds actually applied */
body{
  background:#214b97 !important;
}

section:not(#metroextra){
  background: linear-gradient(180deg,#214b97 0%, #1c4389 100%) !important;
}

section:not(#metroextra) > div,
section:not(#metroextra) .mx-auto.max-w-6xl,
section:not(#metroextra) .rounded-2xl,
section:not(#metroextra) .rounded-3xl,
section:not(#metroextra) .card{
  background: transparent !important;
}

/* force all body/content backgrounds that were white */
.bg-white,
.bg-slate-50,
.bg-gray-50,
.bg-white\/95{
  background: transparent !important;
}

section:not(#metroextra) h1,
section:not(#metroextra) h2,
section:not(#metroextra) h3,
section:not(#metroextra) h4,
section:not(#metroextra) p,
section:not(#metroextra) li,
section:not(#metroextra) span,
section:not(#metroextra) strong{
  color:#fff !important;
}

/* keep dividers blue too */
.divider{
  background:#214b97 !important;
}

footer,
footer h1, footer h2, footer h3,
footer p, footer span, footer a{
  color:#ffffff !important;
}

section:last-of-type,
section:last-of-type h1,
section:last-of-type h2,
section:last-of-type h3,
section:last-of-type p,
section:last-of-type span,
section:last-of-type a{
  color:#ffffff !important;
}

footer p, footer span,
section:last-of-type p,
section:last-of-type span{
  color:rgba(255,255,255,0.85) !important;
}

/* premium footer fix */
footer{
  background: linear-gradient(180deg,#214b97 0%, #1c4389 100%) !important;
}

footer *{
  color:#ffffff !important;
}

footer h1, footer h2, footer h3{
  font-weight:700 !important;
  letter-spacing:0.3px !important;
}

footer p, footer span{
  color:rgba(255,255,255,0.85) !important;
  line-height:1.6 !important;
}

/* also catch non-footer last section */
section:last-of-type{
  background: linear-gradient(180deg,#214b97 0%, #1c4389 100%) !important;
}

section:last-of-type *{
  color:#ffffff !important;
}

section:last-of-type p,
section:last-of-type span{
  color:rgba(255,255,255,0.85) !important;
}

/* improve spacing */
section:last-of-type .mx-auto,
footer .mx-auto{
  padding-top:48px !important;
  padding-bottom:48px !important;
}

/* v135 premium interactions */
:root{
  --mx-ease:cubic-bezier(.2,.8,.2,1);
}

/* smooth page feel */
html{
  scroll-behavior:smooth;
}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* premium header */
header.sticky{
  box-shadow: 0 8px 24px rgba(8,20,42,.16) !important;
  transition: box-shadow .28s var(--mx-ease), backdrop-filter .28s var(--mx-ease), transform .28s var(--mx-ease);
}

/* nav buttons */
.navlink{
  transition:
    transform .18s var(--mx-ease),
    background .18s var(--mx-ease),
    box-shadow .18s var(--mx-ease),
    border-color .18s var(--mx-ease) !important;
  position:relative;
  overflow:hidden;
}
.navlink:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.13) !important;
  box-shadow:
    0 8px 20px rgba(8,20,42,.16),
    inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
.navlink:active{
  transform:translateY(0);
}
.navlink::after{
  content:"";
  position:absolute;
  inset:auto 18px 8px 18px;
  height:1px;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.6), transparent);
  opacity:0;
  transition:opacity .18s var(--mx-ease);
}
.navlink:hover::after{
  opacity:1;
}

/* whatsapp / cta tech glow */
.btn-whatsapp-icon,
a[href*="whatsapp"],
a[href*="wa.me"]{
  transition:
    transform .18s var(--mx-ease),
    box-shadow .18s var(--mx-ease),
    filter .18s var(--mx-ease) !important;
}
.btn-whatsapp-icon:hover,
a[href*="whatsapp"]:hover,
a[href*="wa.me"]:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:
    0 10px 22px rgba(37,211,102,.25),
    0 0 0 6px rgba(37,211,102,.08) !important;
}

/* hero CTAs */
a[href*="whatsapp"].cta,
.cta,
button.cta{
  transition:
    transform .18s var(--mx-ease),
    box-shadow .18s var(--mx-ease),
    filter .18s var(--mx-ease) !important;
}
a[href*="whatsapp"].cta:hover,
.cta:hover,
button.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(37,211,102,.20) !important;
}
.cta-ghost{
  transition:
    transform .18s var(--mx-ease),
    background .18s var(--mx-ease),
    box-shadow .18s var(--mx-ease) !important;
}
.cta-ghost:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 8px 18px rgba(8,20,42,.14) !important;
}

/* cards / sections subtle elevation */
.rounded-2xl,
.rounded-3xl,
.card{
  transition:
    transform .22s var(--mx-ease),
    box-shadow .22s var(--mx-ease),
    border-color .22s var(--mx-ease) !important;
}
.rounded-2xl:hover,
.rounded-3xl:hover,
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(8,20,42,.14) !important;
}

/* footer links */
footer a,
section:last-of-type a{
  transition:opacity .18s var(--mx-ease), color .18s var(--mx-ease);
}
footer a:hover,
section:last-of-type a:hover{
  opacity:1 !important;
  color:#ffffff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* mobile keep subtle, not too jumpy */
@media (max-width:768px){
  .navlink:hover,
  .btn-whatsapp-icon:hover,
  .cta:hover,
  .cta-ghost:hover,
  .rounded-2xl:hover,
  .rounded-3xl:hover,
  .card:hover{
    transform:none !important;
  }
}

/* v136 tweak: reduce subtitle size */
header .ink {
    font-size: 0.85em !important;
}

@media (max-width:768px){
  /* hide location kicker in hero (Piñeyro · Avellaneda — visitas...) */
  #metroextra .tracking-widest,
  #metroextra .text-[11px]{
    display:none !important;
  }
}

@media (max-width:768px){
  /* force hide first line (location text) */
  #metroextra p:first-of-type{
    display:none !important;
  }
}

@media (max-width:768px){
  /* Hero title slightly smaller */
  #metroextra h1{
    font-size: 1.05rem !important;
  }

  /* Paragraph slightly bigger */
  #metroextra p{
    font-size: 1.05rem !important;
  }

  /* Bullets bigger */
  #metroextra ul li{
    font-size: 1.05rem !important;
  }
}

@media (max-width:768px){
  /* Keep title larger but slightly reduced */
  #metroextra h1{
    font-size: 1.4rem !important;
  }

  /* Paragraph */
  #metroextra p{
    font-size: 1.05rem !important;
  }

  /* Bullets */
  #metroextra ul li{
    font-size: 1.05rem !important;
  }
}

@media (max-width:768px){
  /* mobile only: show one fixed hero image */
  .mx-gallery-arrow,
  .mx-thumb,
  #mxGalleryCounter,
  #metroextra .mt-3.text-xs{
    display:none !important;
  }

  /* hide thumbs row / counter containers if present */
  #metroextra .mt-4 > div:nth-of-type(2){
    display:none !important;
  }

  #mxHeroGalleryMain{
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width:768px){
  /* force subtitle size close to logo */
  header .ink + *{
    font-size: 1.25rem !important;
    letter-spacing: 0.5px;
  }
}

@media (max-width:768px){
  header .header-center{
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    margin-top: -2px !important;
    margin-bottom: 10px !important;
  }
}

.ubicacion-bullets{
  color:#ffffff !important;
}
.ubicacion-bullets li{
  color:#ffffff !important;
  margin:8px 0 !important;
}
.ubicacion-bullets li::marker{
  color:#ffffff !important;
}

.section-full {
  width: 100%;
}
.container-custom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* v168: desktop hero wider, mobile unchanged */
@media (min-width: 1024px){
  /* make the hero section use more desktop width */
  #metroextra > div.mx-auto{
    max-width: 1100px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 72px !important;
  }

  /* give the text column a bit more presence */
  #metroextra > div > div:first-child{
    max-width: 680px !important;
  }

  /* let the gallery card breathe and feel larger */
  #metroextra > div > div:last-child{
    width: 100% !important;
    max-width: 700px !important;
    justify-self: end !important;
  }

  /* make the image panel a touch larger on desktop */
  #metroextra #mxHeroGalleryMain{
    min-height: 380px !important;
    max-height: 380px !important;
    object-fit: cover !important;
  }

  /* make the overall section feel less boxed-in */
  #metroextra{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* v169: desktop-wide layout across all blocks + slightly larger desktop typography */
@media (min-width: 1024px){
  /* apply a wider content container to all main sections */
  section > div.mx-auto,
  header > div.mx-auto,
  footer > div.mx-auto{
    max-width: 1100px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* global desktop type scale */
  h1{
    font-size: 4rem !important;
    line-height: 1.08 !important;
  }
  h2{
    font-size: 3rem !important;
    line-height: 1.12 !important;
  }
  h3{
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
  p, li{
    font-size: 1.28rem !important;
    line-height: 1.55 !important;
  }

  /* header sizing aligned with the wider layout */
  header .ink{
    font-size: 3rem !important;
    line-height: 1 !important;
  }
  header nav a{
    font-size: 1.15rem !important;
  }

  /* hero balance */
  #metroextra > div.mx-auto{
    column-gap: 72px !important;
  }
  #metroextra > div > div:first-child{
    max-width: 700px !important;
  }
  #metroextra > div > div:last-child{
    max-width: 720px !important;
  }
  #metroextra #mxHeroGalleryMain{
    min-height: 420px !important;
    max-height: 420px !important;
  }

  /* cards and text blocks breathe better */
  .rounded-2xl, .rounded-3xl{
    padding: 24px !important;
  }

  /* tighten enormous vertical whitespace while keeping sections generous */
  section > div.mx-auto{
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* footer */
  footer{
    font-size: 1.12rem !important;
  }
}

/* v170: header hierarchy fix (desktop only) */
@media (min-width: 1024px){

  /* Make METROEXTRA (logo/text) bigger */
  header .logo-text,
  header .brand,
  header .ink{
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
  }

  /* Reduce DEPOSITOS Y BAULERAS */
  header .subtitle,
  header .tagline,
  header h2,
  header span{
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    opacity: 0.9;
  }

  /* Adjust spacing so hierarchy reads better */
  header{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Prevent nav buttons from looking oversized */
  header nav a{
    font-size: 1rem !important;
  }
}

/* v171 fine hierarchy tuning */
@media (min-width:1024px){

  /* Logo slightly bigger */
  header .logo-text,
  header .brand,
  header .ink{
    font-size: 2.6rem !important;
  }

  /* Subtitle slightly smaller */
  header .subtitle,
  header h2,
  header span{
    font-size: 1.35rem !important;
  }

  /* Hero title slightly smaller for balance */
  #metroextra h1{
    font-size: 3.4rem !important;
    line-height: 1.1 !important;
  }
}

@media (min-width:1024px){

  /* Force METROEXTRA to match previous big size */
  header .logo-text,
  header .brand,
  header .ink{
    font-size: 3rem !important;
    font-weight: 700 !important;
  }

  /* Make DEPOSITOS Y BAULERAS clearly smaller */
  header .subtitle,
  header h2,
  header span{
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    opacity: 0.85;
  }

}

@media (min-width:1024px){

  /* FORCE real hierarchy */
  header img{
    height: 48px !important;
  }

  header .logo-text{
    font-size: 2.8rem !important;
    font-weight: 700 !important;
  }

  /* Target specifically the big title */
  header .tracking-wide,
  header .uppercase{
    font-size: 1.2rem !important;
    letter-spacing: 0.08em !important;
  }

}

/* v174: rebuild desktop header hierarchy correctly */
@media (min-width:1024px){
  /* bigger MetroExtra logo lockup */
  header .header-left img{
    height: 64px !important;
    width: auto !important;
  }

  /* make the service label clearly secondary */
  header .header-center{
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.1 !important;
    opacity: 0.95 !important;
    justify-self: start !important;
    margin-left: 10px !important;
    white-space: nowrap !important;
  }

  /* prevent broad previous .ink rules from winning */
  header .header-center.ink{
    font-size: 1.15rem !important;
    font-weight: 600 !important;
  }

  /* keep nav balanced */
  header nav.hidden.md\:flex a.navlink{
    font-size: 1rem !important;
  }

  /* a bit more breathing room so logo reads first */
  .desktop-header-row{
    grid-template-columns: auto auto 1fr !important;
    column-gap: 22px !important;
  }

  .header-left{
    min-width: max-content !important;
  }
}

/* v175 ChatGPT: Header + hero hierarchy update */
@media (min-width: 769px){
  header .desktop-header-row{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:center !important;
    column-gap:28px !important;
  }
  header .header-left{
    justify-self:start !important;
  }
  header .header-left img,
  header img[alt="Metroextra"]{
    height:82px !important;
    max-height:82px !important;
    width:auto !important;
    transform:none !important;
    margin:0 !important;
  }
  header nav.hidden.md\:flex{
    justify-self:end !important;
  }
}
@media (max-width: 768px){
  header img[alt="Metroextra"]{
    height:72px !important;
    max-height:72px !important;
  }
}
#metroextra .mx-hero-product-title{
  color:#ffffff !important;
  letter-spacing:.02em !important;
  text-transform:uppercase;
}
#metroextra .mx-hero-benefit-title{
  color:rgba(255,255,255,.94) !important;
}
@media (min-width: 1024px){
  #metroextra .mx-hero-product-title{
    font-size:3.95rem !important;
    line-height:1.02 !important;
    margin-bottom:14px !important;
  }
  #metroextra .mx-hero-benefit-title{
    font-size:2.05rem !important;
    line-height:1.18 !important;
    max-width:720px !important;
  }
}
@media (max-width:768px){
  #metroextra .mx-hero-product-title{
    font-size:2rem !important;
    line-height:1.08 !important;
  }
  #metroextra .mx-hero-benefit-title{
    font-size:1.28rem !important;
    line-height:1.18 !important;
  }
}

/* FIX REAL DEL TITULO HERO */
#metroextra .mx-hero-title{
  font-size: 44px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  max-width: 780px !important;
  margin-top: -90px !important;
  margin-bottom: 26px !important;
  color: #ffffff !important;
}

/* Evita que reglas globales tipo h1{font-size:4rem} vuelvan a pisarlo */
@media (min-width:1024px){
  #metroextra .mx-hero-title{
    font-size: 44px !important;
    line-height: 1.05 !important;
    max-width: 780px !important;
  }
}

@media (max-width:768px){
  #metroextra .mx-hero-title{
    font-size: 30px !important;
    white-space: normal !important;
    margin-top: 0 !important;
  }
}

#metroextra .mx-hero-title{
  margin-top: -150px !important;
  margin-bottom: 18px !important;
}

#metroextra .mx-hero-title + *{
  margin-top: 0 !important;
}

header nav.hidden.md\:flex{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap: 26px !important;
}

header nav.hidden.md\:flex a.navlink{
  font-size: 1.35rem !important;
  padding: 18px 34px !important;
  border-radius: 24px !important;
}

header nav.hidden.md\:flex a.btn-whatsapp-icon{
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;
}

header nav.hidden.md\:flex a.btn-whatsapp-icon svg{
  width: 30px !important;
  height: 30px !important;
}

header .header-left,
header .logo{
  display:flex !important;
  align-items:center !important;
}

header .header-left img,
header .logo img,
header img[alt="Metroextra"]{
  height: 96px !important;
  max-height: 96px !important;
  width:auto !important;
}

header .header-left,
header .logo{
  margin-top: 6px !important;
}

header nav.hidden.md\:flex{
  align-items:center !important;
}

header nav.hidden.md\:flex{
  position: relative !important;
  top: -8px !important;
  align-items:center !important;
}

header nav.hidden.md\:flex{
  width: calc(100% - 420px) !important;
  margin-left: 120px !important;
  justify-content: center !important;
  gap: 34px !important;
}

header{
  overflow: hidden !important;
}

header nav.hidden.md\:flex{
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 20px !important;
  padding-left: 80px !important;
  padding-right: 40px !important;
  top: -8px !important;
}

header nav.hidden.md\:flex a.navlink{
  white-space: nowrap !important;
  font-size: 1.25rem !important;
  padding: 16px 28px !important;
}

header nav.hidden.md\:flex a.navlink{
  font-size: 1.38rem !important;
  font-weight: 700 !important;
  padding: 18px 32px !important;
}

header nav.hidden.md\:flex{
  padding-left: 20px !important;
  padding-right: 120px !important;
  gap: 18px !important;
}

.hero p,
.hero li,
section p,
section li{
  font-weight: 700 !important;
}

section ul,
.benefits-list,
.hero ul{
  padding-left: 40px !important;
  margin-left: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
}

section ul li,
.benefits-list li,
.hero ul li{
  text-align: left !important;
  justify-content: flex-start !important;
}

.size-card,
.tamano-card,
[class*="size"],
[class*="tamano"]{
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid rgba(255,255,255,0.22) !important;
  border-radius: 22px !important;
  padding: 26px 24px !important;
  backdrop-filter: blur(6px) !important;
  transition: all .25s ease !important;
}

.size-card:hover,
.tamano-card:hover,
[class*="size"]:hover,
[class*="tamano"]:hover{
  border-color: rgba(255,255,255,0.40) !important;
  transform: translateY(-2px);
}

/* Recuadros reales en cada caja de m² dentro de la sección Tamaños */
#tamanos .grid > div{
  background: rgba(255,255,255,0.10) !important;
  border: 2px solid rgba(255,255,255,0.42) !important;
  border-radius: 22px !important;
  padding: 28px 24px !important;
  min-height: 150px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12) !important;
}

#tamanos .grid > div:hover{
  border-color: rgba(255,255,255,0.70) !important;
  background: rgba(255,255,255,0.14) !important;
}

/* MOBILE ADAPTATION - basada en v198 desktop, sin quitar contenido ni fotos */
@media (max-width: 768px){

  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    background:#214b97 !important;
  }

  /* Header mobile */
  header{
    overflow:visible !important;
  }

  header .mx-auto.max-w-6xl,
  header .container-custom{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  header .desktop-header-row,
  header .w-full.flex.items-center.justify-between{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }

  header .header-left,
  header .flex.items-center.gap-3{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 !important;
  }

  header img[alt="Metroextra"]{
    height:70px !important;
    max-height:70px !important;
    width:auto !important;
    margin:0 auto !important;
    transform:none !important;
  }

  header nav.hidden.md\:flex{
    display:none !important;
  }

  header nav.md\:hidden{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    padding:0 4px !important;
    margin-top:8px !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }

  header nav.md\:hidden::-webkit-scrollbar{
    display:none !important;
  }

  header nav.md\:hidden .navlink{
    font-size:13px !important;
    line-height:1 !important;
    padding:9px 10px !important;
    min-height:38px !important;
    height:auto !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
    border-radius:999px !important;
  }

  header nav.md\:hidden .btn-whatsapp-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
    padding:0 !important;
  }

  /* Hero mobile */
  #metroextra > div.mx-auto{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
    padding:28px 18px 34px !important;
    max-width:100% !important;
  }

  #metroextra > div > div:first-child{
    max-width:100% !important;
    width:100% !important;
  }

  #metroextra .mx-hero-title{
    font-size:30px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    margin-top:0 !important;
    margin-bottom:14px !important;
    max-width:100% !important;
    letter-spacing:.01em !important;
  }

  #metroextra .mx-hero-benefit-title{
    font-size:23px !important;
    line-height:1.12 !important;
    margin-bottom:14px !important;
  }

  #metroextra p,
  #metroextra li{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  #metroextra ul{
    padding-left:22px !important;
    margin-top:16px !important;
  }

  #metroextra .wa-btn,
  #metroextra .cta-ghost{
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
    padding:15px 16px !important;
    font-size:16px !important;
    border-radius:16px !important;
  }

  #metroextra .mt-5,
  #metroextra .md\:mt-6{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  /* Fotos del hero: conservarlas y hacerlas mobile friendly */
  #metroextra .rounded-2xl,
  #metroextra .rounded-3xl{
    width:100% !important;
    padding:12px !important;
    border-radius:20px !important;
    margin:0 !important;
  }

  .mx-gallery-main{
    width:100% !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  #mxHeroGalleryMain{
    width:100% !important;
    height:255px !important;
    min-height:255px !important;
    max-height:255px !important;
    object-fit:cover !important;
    object-position:center center !important;
    padding:0 !important;
  }

  .mx-gallery-arrow{
    display:flex !important;
    width:34px !important;
    height:34px !important;
  }

  .mx-thumb{
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    min-height:13px !important;
    border-radius:999px !important;
  }

  .mx-thumb img{
    display:none !important;
  }

  /* Secciones */
  section > div.mx-auto,
  section .container-custom,
  footer > div.mx-auto{
    max-width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  section > div.mx-auto{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  section h1,
  section h2{
    font-size:30px !important;
    line-height:1.12 !important;
    margin-bottom:16px !important;
  }

  section h3{
    font-size:22px !important;
    line-height:1.15 !important;
  }

  section p,
  section li{
    font-size:16px !important;
    line-height:1.5 !important;
  }

  /* Grids a una columna */
  .grid,
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .lg\:grid-cols-6,
  .sm\:grid-cols-3{
    grid-template-columns:1fr !important;
  }

  /* Cards mobile */
  .card,
  .rounded-2xl,
  .rounded-3xl,
  #tamanos .grid > div{
    border-radius:20px !important;
    padding:20px !important;
    min-height:auto !important;
  }

  #tamanos .grid{
    gap:14px !important;
  }

  #tamanos .grid > div{
    background:rgba(255,255,255,0.10) !important;
    border:2px solid rgba(255,255,255,0.38) !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.10) !important;
  }

  /* Bloque corregido: pregunta + respuesta + nuevo texto */
  #problema h2,
  #que-es h2,
  #beneficios h2{
    text-align:left !important;
  }

  /* Evitar cajas demasiado anchas o texto pegado */
  .px-3, .px-4{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  /* WhatsApp sticky mobile */
  .wa-sticky{
    right:14px !important;
    bottom:14px !important;
    padding:12px 16px !important;
    font-size:15px !important;
  }
}

/* Cambio de bullets en sección "Te falta espacio" para desktop + mobile */
#problema .mx-use-footer,
#beneficios .mx-use-footer,
section .mx-use-footer{
  display:block !important;
  margin-top:28px !important;
  font-weight:800 !important;
  color:#ffffff !important;
}

/* Desktop */
@media (min-width:769px){
  #problema .mx-use-footer,
  #beneficios .mx-use-footer,
  section .mx-use-footer{
    font-size:1.45rem !important;
    line-height:1.25 !important;
  }
}

/* Mobile */
@media (max-width:768px){
  #problema .mx-use-footer,
  #beneficios .mx-use-footer,
  section .mx-use-footer{
    font-size:20px !important;
    line-height:1.25 !important;
    margin-top:22px !important;
  }
}

.mx-guardado-title{
  display:block !important;
  color:#ffffff !important;
  font-weight:700 !important;
  margin-top:18px !important;
  margin-bottom:18px !important;
}

@media (min-width:769px){
  .mx-guardado-title{
    font-size:2rem !important;
    line-height:1.2 !important;
  }
}

@media (max-width:768px){
  .mx-guardado-title{
    font-size:1.6rem !important;
    line-height:1.2 !important;
  }
}

.mx-final-line{
  text-align:center !important;
  font-weight:800 !important;
  color:#ffffff !important;
  margin-top:34px !important;
  width:100% !important;
}

@media (min-width:769px){
  .mx-final-line{
    font-size:2.05rem !important;
    line-height:1.2 !important;
  }
}

@media (max-width:768px){
  .mx-final-line{
    font-size:1.55rem !important;
    line-height:1.25 !important;
  }
}

.mx-subtitle{
    display:block !important;
    text-align:left !important;
    width:auto !important;
    font-weight:700 !important;
    color:#ffffff !important;
}

@media (min-width:769px){
    .mx-subtitle{
        font-size:2rem !important;
        margin-left:16px !important;
        padding-left:24px !important;
        margin-top:14px !important;
        margin-bottom:14px !important;
    }
}

@media (max-width:768px){
    .mx-subtitle{
        font-size:1.35rem !important;
        margin-left:16px !important;
        padding-left:16px !important;
    }
}

/* Ajuste real del bloque "Guardá lo que necesitás:" */
.mx-subtitle{
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  line-height: 1.05 !important;
}

/* La lista que viene después del subtítulo queda casi pegada */
.mx-subtitle + ul,
.mx-subtitle ~ ul:first-of-type{
  margin-top: 4px !important;
  padding-top: 0 !important;
}

/* Mobile + desktop: quitar separación excesiva generada por estilos anteriores */
@media (max-width:768px){
  .mx-subtitle{
    margin-bottom: 4px !important;
  }
  .mx-subtitle + ul,
  .mx-subtitle ~ ul:first-of-type{
    margin-top: 4px !important;
  }
}

@media (min-width:769px){
  .mx-subtitle{
    margin-bottom: 4px !important;
  }
  .mx-subtitle + ul,
  .mx-subtitle ~ ul:first-of-type{
    margin-top: 4px !important;
  }
}

/* Guardá lo que necesitás */
.mx-subtitle{
  font-size: 0.88em !important;
  margin-top: 38px !important;
  margin-bottom: 14px !important;
}

/* Frase final alineada a izquierda */
.mx-bottom-claim{
  text-align: left !important;
  margin-left: 60px !important;
  width: auto !important;
}

/* Igualar tamaño al de los bullets */
.mx-subtitle{
  font-size: 1em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.mx-bottom-claim{
  font-size: 1em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Igualar exactamente al tamaño de "Durante mudanzas o reformas" */
.mx-subtitle,
.mx-bottom-claim{
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.mx-bottom-claim{
  margin-left: 28px !important;
  text-align: left !important;
}

.mx-subtitle,
.mx-bottom-claim{
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
}

.mx-subtitle,
.mx-bottom-claim{
  font-size: 24px !important;
}

/* Corrige botones CTA cortados en mobile */
@media (max-width:768px){
  #metroextra .mt-5,
  #metroextra .md\:mt-6,
  #metroextra .flex.gap-2,
  #metroextra .flex.gap-2\.5{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }

  #metroextra a.wa-btn,
  #metroextra a.cta-ghost{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:16px 18px !important;
    border-radius:16px !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  #metroextra{
    overflow-x:hidden !important;
  }

  #metroextra > div.mx-auto{
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
}

/* SOLO MOBILE: ocultar tildes/checks y dejar un único bullet */
@media (max-width:768px){

  /* ocultar iconos tipo check */
  #metroextra .fa-check,
  #metroextra .fa-check-circle,
  #metroextra .lucide-check,
  #metroextra svg,
  #metroextra .check-icon{
    display:none !important;
  }

  /* mantener únicamente el bullet */
  #metroextra ul li{
    list-style: disc !important;
  }
}

/* Reemplazar checks por bullets */
#metroextra .fa-check,
#metroextra .fa-check-circle,
#metroextra .lucide-check,
#metroextra svg,
#metroextra .check-icon{
  display:none !important;
}

#metroextra ul{
  list-style: disc !important;
  padding-left: 36px !important;
}

#metroextra li{
  list-style: disc !important;
  display:list-item !important;
}

/* Hero gallery (v29: zoom suave + menos recorte) */
      .mx-gallery-main{ position: relative; overflow: hidden; border-radius: 16px; }
      #mxHeroGalleryMain{
        width: 100%;
        height: clamp(260px, 40vw, 380px);
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
        border: 1px solid rgba(226,232,240,1);
        background: rgba(248,250,252,1);
        transition: transform .28s ease, opacity .2s ease;
        will-change: transform;
        cursor: zoom-in;
      }
      @media (min-width: 768px){
        #mxHeroGalleryMain{ height: clamp(320px, 28vw, 440px); border-radius: 18px; }
      }
      #mxHeroGalleryMain:hover{ transform: scale(1.04); }
      #mxHeroGalleryMain.is-zoom{ transform: scale(1.06); cursor: zoom-out; }

      .mx-thumb{ border-radius: 14px; padding: 0; border: 2px solid transparent; background: transparent; overflow: hidden; }
      .mx-thumb.is-active{ border-color: rgba(34,197,94,.9); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
      .mx-thumb:focus{ outline: none; }
      .mx-thumb:focus-visible{ box-shadow: 0 0 0 4px rgba(59,130,246,.25); border-color: rgba(59,130,246,.6); }


/* Fix separación blanca entre secciones */
html, body {
  margin: 0;
  padding: 0;
  background: #0D47A1;
}

section,
.section-full,
#metroextra,
#problema,
#contacto {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* v237 robust mobile fix: mirrors critical style in head */


html,body{margin:0!important;padding:0!important;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#214b97!important;color:#fff!important;overflow-x:hidden!important}
body *{box-sizing:border-box}
.divider{display:none!important}
header.sticky{background:linear-gradient(180deg,#1f3f7a 0%,#183564 100%)!important;border:0!important;box-shadow:0 8px 24px rgba(8,20,42,.16)!important}
header a{text-decoration:none!important}
.navlink{color:#fff!important;font-weight:700!important;padding:10px 12px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important;font-size:.95rem!important}
.btn-whatsapp-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;border-radius:999px!important;background:#25D366!important}
#metroextra,section:not(#metroextra),footer{background:linear-gradient(180deg,#214b97 0%,#1c4389 100%)!important;color:#fff!important}
section *{color:#fff!important}
.card,#tamanos .grid>div,.rounded-2xl,.rounded-3xl{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important}
.wa-btn{background:#25D366!important;color:#fff!important;border:none!important;display:inline-flex!important;text-decoration:none!important}
.cta-ghost{color:#fff!important;border:2px solid rgba(255,255,255,.45)!important;background:transparent!important;text-decoration:none!important}
.mx-gallery-main{position:relative!important;border-radius:16px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.08)!important}
.mx-gallery-main img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important}
.mx-gallery-arrow{display:flex!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:3!important;width:34px!important;height:34px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(10,23,48,.58)!important;color:#fff!important;align-items:center!important;justify-content:center!important}
.mx-gallery-arrow.prev{left:10px!important}.mx-gallery-arrow.next{right:10px!important}
.mx-thumb{border-radius:999px!important;border:2px solid rgba(255,255,255,.55)!important;background:transparent!important;display:inline-flex!important;overflow:hidden!important}
.mx-thumb.is-active{background:#22c55e!important;border-color:#22c55e!important}
.mx-thumb img{display:none!important}
.wa-sticky{position:fixed!important;right:16px!important;bottom:16px!important;z-index:99999!important;border-radius:999px!important;padding:12px 16px!important;font-weight:800!important;background:#25D366!important;color:#fff!important;text-decoration:none!important}
@media (min-width:1024px){
section>div.mx-auto,header>div.mx-auto,footer>div.mx-auto{max-width:1100px!important;padding-left:0!important;padding-right:0!important}
#metroextra>div.mx-auto{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:72px!important;align-items:center!important;padding-top:56px!important;padding-bottom:56px!important}
#metroextra .mx-hero-title{font-size:44px!important;line-height:1.05!important;font-weight:800!important;letter-spacing:.01em!important;white-space:nowrap!important;margin-top:-150px!important;margin-bottom:18px!important}
#metroextra .mx-hero-benefit-title{font-size:2.05rem!important;line-height:1.18!important}
p,li{font-size:1.28rem!important;line-height:1.55!important}
h2{font-size:3rem!important;line-height:1.12!important}
}
@media (max-width:768px){
header .desktop-header-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important}
header img[alt="Metroextra"]{height:70px!important;max-height:70px!important;width:auto!important;margin:0 auto!important}
header nav.hidden.md\:flex{display:none!important}
header nav.md\:hidden{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;gap:7px!important;width:100%!important;overflow-x:auto!important;padding:0 4px!important;margin-top:8px!important}
header nav.md\:hidden .navlink{font-size:13px!important;line-height:1!important;padding:9px 10px!important;min-height:38px!important}
header nav.md\:hidden .btn-whatsapp-icon{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
#metroextra>div.mx-auto{display:flex!important;flex-direction:column!important;gap:22px!important;padding:28px 18px 34px!important;max-width:100%!important}
#metroextra .mx-hero-title{font-size:30px!important;line-height:1.05!important;font-weight:800!important;white-space:nowrap!important;margin:0 0 14px!important}
#metroextra .mx-hero-benefit-title{font-size:23px!important;line-height:1.12!important;margin-bottom:14px!important}
#metroextra p,#metroextra li,section p,section li{font-size:16px!important;line-height:1.5!important}
#metroextra ul{padding-left:22px!important;margin-top:16px!important}
#metroextra .wa-btn,#metroextra .cta-ghost{width:100%!important;text-align:center!important;justify-content:center!important;padding:15px 16px!important;font-size:16px!important;border-radius:16px!important}
#metroextra .mt-5,#metroextra .md\:mt-6{width:100%!important;display:flex!important;flex-direction:column!important;gap:12px!important}
#mxHeroGalleryMain{height:255px!important;min-height:255px!important;max-height:255px!important;object-fit:cover!important;aspect-ratio:auto!important}
section>div.mx-auto,section .container-custom,footer>div.mx-auto{max-width:100%!important;padding-left:18px!important;padding-right:18px!important}
section>div.mx-auto{padding-top:34px!important;padding-bottom:34px!important}
section h1,section h2{font-size:30px!important;line-height:1.12!important;margin-bottom:16px!important}
.grid,.md\:grid-cols-2,.md\:grid-cols-3,.lg\:grid-cols-6,.sm\:grid-cols-3{grid-template-columns:1fr!important}
.card,.rounded-2xl,.rounded-3xl,#tamanos .grid>div{border-radius:20px!important;padding:20px!important;min-height:auto!important}
}



/* v238 - Mobile: eliminar doble bullets en beneficios */
@media (max-width: 768px){

  #beneficios ul{
    list-style: disc !important;
    padding-left: 24px !important;
  }

  #beneficios li{
    list-style: disc !important;
  }

  #beneficios li::marker{
    color: rgba(255,255,255,.95) !important;
  }

  /* Oculta los checks/tildes duplicados */
  #beneficios li::before{
    display:none !important;
    content:none !important;
  }
}