/* ===========================================
   RESET, VARIABLES & BRAND TOKENS – MACVASQUEZ
=========================================== */
:root {
  /* PALETA GLOBAL BASADA EN EL LOGO */
  --mv-black:         #000000;
  --mv-navy-950:      #0c1e36;
  --mv-navy-900:      #0c294a;
  --mv-navy-800:      #0e3a65;
  --mv-navy-700:      #123f6b;
  --mv-orange:        #fe6c00;
  --mv-orange-soft:   #fd940f;
  --mv-gray-200:      #dadfe2;
  --mv-gray-100:      #eef1f3;
  --mv-white:         #ffffff;

  /* TOKENS PRINCIPALES */
  --mv-primary:       var(--mv-navy-900);
  --mv-secondary:     var(--mv-navy-950);
  --mv-accent:        var(--mv-orange);
  --mv-accent-soft:   var(--mv-orange-soft);

  /* Alias de compatibilidad */
  --mv-blue-dark:     var(--mv-navy-950);
  --mv-blue:          var(--mv-navy-900);
  --mv-blue-soft:     var(--mv-navy-800);
  --mv-blue-bg:       var(--mv-navy-700);
  --mv-blue-pale:     var(--mv-gray-100);
  --mv-orange-deep:   var(--mv-orange);
  --mv-purple-soft:   var(--mv-navy-800);
  --mv-node-pink:     var(--mv-orange-soft);

  --mv-text:          var(--mv-navy-950);
  --mv-text-soft:     var(--mv-navy-800);

  --radius-lg:        24px;
  --radius-md:        18px;
  --shadow-soft:      0 18px 45px rgba(0, 0, 0, 0.45);
  --max-width:        1120px;

  /* Gradientes globales */
  --pp-blue:          var(--mv-navy-800);
  --pp-blue-soft:     var(--mv-gray-100);
  --pp-tomato:        var(--mv-orange);
  --pp-tomato-soft:   var(--mv-orange-soft);
  --pp-gradient-main: linear-gradient(
    135deg,
    var(--mv-navy-900) 0%,
    var(--mv-navy-800) 50%,
    var(--mv-orange) 100%
  );
  --pp-gradient-soft: linear-gradient(
    135deg,
    rgba(12, 41, 74, .10),
    rgba(254, 108, 0, .10)
  );
}

/* ===========================================
   UTILIDADES DE DEGRADADOS
=========================================== */

/* Base lineal reutilizable */
.mv-gradient {
  background-image: linear-gradient(
    var(--mv-grad-direction, to right),
    var(--mv-grad-c1, var(--mv-primary)),
    var(--mv-grad-c2, var(--mv-secondary)),
    var(--mv-grad-c3, var(--mv-accent))
  );
}

/* Direcciones */
.mv-grad-to-right         { --mv-grad-direction: to right; }
.mv-grad-to-left          { --mv-grad-direction: to left; }
.mv-grad-to-bottom        { --mv-grad-direction: to bottom; }
.mv-grad-to-top           { --mv-grad-direction: to top; }
.mv-grad-to-bottom-right  { --mv-grad-direction: to bottom right; }
.mv-grad-to-top-left      { --mv-grad-direction: to top left; }

/* Versión hasta 6 colores */
.mv-gradient-6 {
  background-image: linear-gradient(
    var(--mv-grad-direction, to right),
    var(--mv-grad-c1, var(--mv-primary)),
    var(--mv-grad-c2, var(--mv-secondary)),
    var(--mv-grad-c3, #123f6b),
    var(--mv-grad-c4, var(--mv-accent)),
    var(--mv-grad-c5, var(--mv-accent-soft)),
    var(--mv-grad-c6, #ffffff)
  );
}

/* Radial / circular reutilizable */
.mv-gradient-radial {
  background-image: radial-gradient(
    var(--mv-grad-shape, circle) at var(--mv-grad-position, center),
    var(--mv-grad-c1, var(--mv-primary)),
    var(--mv-grad-c2, var(--mv-secondary)),
    var(--mv-grad-c3, var(--mv-accent))
  );
}

/* Posiciones de centro radial */
.mv-grad-center        { --mv-grad-position: center; }
.mv-grad-top-left      { --mv-grad-position: top left; }
.mv-grad-top-right     { --mv-grad-position: top right; }
.mv-grad-bottom-left   { --mv-grad-position: bottom left; }
.mv-grad-bottom-right  { --mv-grad-position: bottom right; }

/* Texto en degradado */
.mv-text-gradient {
  background-image: linear-gradient(
    var(--mv-txt-direction, to right),
    var(--mv-txt-c1, var(--mv-accent)),
    var(--mv-txt-c2, var(--mv-accent-soft)),
    var(--mv-txt-c3, #ffffff)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Degradado MACVASQUEZ más suave (azul → morado → naranja) */
.mv-text-mvbrand {
  --mv-txt-direction: to right;
  --mv-txt-c1: #123f6b;
  --mv-txt-c2: #0e3a65;
  --mv-txt-c3: #fd940f;
}

.mv-text-font {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.mv-text-to-right  { --mv-txt-direction: to right; }
.mv-text-to-left   { --mv-txt-direction: to left; }
.mv-text-to-bottom { --mv-txt-direction: to bottom; }
.mv-text-to-top    { --mv-txt-direction: to top; }

/* Degradado morado → naranja tipo PayPhone */
.mv-text-payphone {
  --mv-txt-direction: to right;
  --mv-txt-c1: #123f6b;
  --mv-txt-c2: #fe6c00;
  --mv-txt-c3: #fe6c00;
}

.mv-text-payphone-strong {
  --mv-txt-direction: to right;
  --mv-txt-c1: #123f6b;
  --mv-txt-c2: #fe6c00;
  --mv-txt-c3: #fe6c00;
}

/* ===========================================
   RESET GLOBAL & TIPOGRAFÍA
=========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  letter-spacing: -0.2px;
  background: radial-gradient(circle at top left, #123f6b 0, #0e3a65 45%, #0c1e36 100%);
  color: var(--mv-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

h4, h5 {
  font-weight: 600;
}

p {
  font-weight: 400;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.btn {
  font-weight: 600;
  letter-spacing: -0.3px;
  font-family: 'Inter', sans-serif;
}

.nav-links a {
  font-weight: 600;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ===========================================
   NAVBAR – estilo PayPhone
=========================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;

  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text span:first-child {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.brand-text span:last-child {
  font-size: 11px;
  color: #dadfe2;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

.nav-links a {
  padding: 6px 0;
  color: #dadfe2;
  position: relative;
  font-weight: 500;
  transition: color 0.18s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mv-orange), #dadfe2);
  transition: width 0.18s ease;
}

.nav-links a:hover {
  color: var(--mv-white);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* NAV – ESTADO TRANSPARENTE */
.nav-payphone:not(.scrolled) .brand-text span:first-child,
.nav-payphone:not(.scrolled) .brand-text span:last-child,
.nav-payphone:not(.scrolled) .nav-links a {
  color: #ffffff;
}

.nav-payphone .nav-links a:hover {
  color: #ffffff;
}

/* NAV – ESTADO SCROLLED */
.nav-payphone.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #dadfe2;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.nav-payphone.scrolled .brand-text span:first-child,
.nav-payphone.scrolled .brand-text span:last-child,
.nav-payphone.scrolled .nav-links a {
  color: #0c1e36;
}

.nav-payphone.scrolled .btn-outline {
  border-color: #dadfe2;
  color: #0c1e36;
  background: #eef1f3;
}

/* NAV RESPONSIVE */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
}

.nav-mobile {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-mobile.open {
  display: block;
}

.nav-mobile-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6px 14px 14px;
}

.nav-mobile-inner a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  color: #eef1f3;
}

.nav-mobile-inner a:hover {
  color: #ffffff;
}

.nav-mobile-inner .btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .nav-inner {
    padding-inline: 14px;
  }
  .nav-links,
  .nav-cta {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* ===========================================
   BOTONES
=========================================== */
.btn {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Azul principal */
.btn-primary {
  background: linear-gradient(135deg, var(--mv-blue-soft), var(--mv-blue-dark));
  color: var(--mv-white);
  box-shadow: 0 14px 32px rgba(18, 63, 107, 0.5);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(18, 63, 107, 0.7);
}

/* Botón contorno */
.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  color: #dadfe2;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

/* Botón fantasma claro */
.btn-ghost {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid #dadfe2;
  background: #ffffff;
  color: #123f6b;
}

.btn-ghost:hover {
  background: #eef1f3;
  border-color: #dadfe2;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(12, 30, 54, 0.08);
}

/* Botón con flecha */
.btn-arrow {
  position: relative;
  padding-right: 2.4rem;
}

.btn-arrow::after {
  content: "➜";
  font-size: 0.85rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Botón checkout naranja */
.btn-checkout {
  background: linear-gradient(135deg, var(--mv-orange), var(--mv-orange-deep));
  border-color: var(--mv-orange-deep);
  color: var(--mv-white);
  box-shadow: 0 14px 32px rgba(254, 108, 0, 0.6);
}

.btn-checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(254, 108, 0, 0.8);
}

/* ===========================================
   SECCIONES GENERALES
=========================================== */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 18px;
}

.section-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.section-subtitle {
  font-size: 13px;
  color: #dadfe2;
  margin-bottom: 16px;
}

/* FULLWIDTH */
.section-fullwidth {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4rem 0;
}

.section-solid-white {
  background: #ffffff;
}

.section-solid-cream {
  background: #eef1f3;
}

.section-solid-soft {
  background: #eef1f3;
}

/* Degradados de secciones */
.section-gradient-orange {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 22%, transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 20%, transparent 60%),
    linear-gradient(135deg, #fd940f 0%, #fd940f 35%, var(--mv-orange) 70%, var(--mv-orange-deep) 100%);
  color: #0c1e36;
}

.section-gradient-purple {
  background: linear-gradient(135deg, #0c1e36 0, #123f6b 40%, #123f6b 100%);
  color: #eef1f3;
}

/* ===========================================
   HERO FULL
=========================================== */
.hero-full {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 5.2rem 0 5rem;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(253, 148, 15, 0.4) 0, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.65) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  color: var(--mv-white);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
}

.hero-title {
  font-size: clamp(3rem, 5.4vw, 4.4rem);
  line-height: 1.06;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

.hero-highlight {
  color: var(--mv-orange);
}

.hero-highlight-dark {
  color: #0c1e36;
}

.hero-subtitle {
  font-size: 1rem;
  max-width: 32rem;
  color: #dadfe2;
  margin-bottom: 1.3rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* ===========================================
   GRID & CARDS GENERALES
=========================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px;
}
/* ===========================================
   GRID · PAYPHONE (REUTILIZABLE)
=========================================== */
.grid-cards-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
  margin-top:18px;
}

@media (max-width:960px){
  .grid-cards-3{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width:640px){
  .grid-cards-3{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  border-radius: var(--radius-md);
  background: #0c1e36;
  border: 1px solid rgba(253, 148, 15, 0.18);
  padding: 14px 14px 12px;
  box-shadow: 0 16px 40px rgba(12, 30, 54, 0.7);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #dadfe2;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
}

.card-body {
  font-size: 13px;
  color: #dadfe2;
}
/* ===========================================
   CARD · PAYPHONE (REUTILIZABLE)
=========================================== */
.card-payphone{
  position: relative;
  background: #ffffff;
  border: 1px solid #dadfe2;
  border-radius: 22px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 16px 42px rgba(12, 30, 54, 0.10);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease,
              box-shadow .18s ease,
              border-color .18s ease;
}

.card-payphone::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 12% 10%, rgba(18, 63, 107, .18), transparent 55%),
    radial-gradient(circle at 90% 12%, rgba(254, 108, 0, .16), transparent 60%);
  pointer-events:none;
}

.card-payphone::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:4px;
  border-radius:999px;
  background: var(--pp-gradient-main);
}

.card-payphone:hover{
  transform: translateY(-6px);
  border-color: rgba(254, 108, 0, .55);
  box-shadow: 0 22px 58px rgba(12, 30, 54, 0.16);
}
/* ===========================================
   PRODUCTOS OSCUROS (product-card)
=========================================== */
.product-card {
  border-radius: var(--radius-md);
  background: #0c1e36;
  border: 1px solid rgba(253, 148, 15, 0.2);
  box-shadow: 0 16px 40px rgba(12, 30, 54, 0.85);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.product-body {
  font-size: 13px;
  color: #dadfe2;
  margin-bottom: 8px;
}

.price-pill {
  font-size: 13px;
  background: rgba(254, 108, 0, 0.12);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--mv-orange);
}

/* ===========================================
   PÁGINAS CLARAS – estilo PayPhone
=========================================== */
.page-payphone {
  background: #eef1f3;
  color: var(--mv-text);
}

/* PARA QUIÉN ES */
.section-header-center {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 2.25rem;
}

.kicker-small {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--mv-blue-soft);
  margin-bottom: 0.35rem;
}

.section-title-strong {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: #0c1e36;
}

.section-subtitle-center {
  font-size: 0.98rem;
  color: #123f6b;
}

.para-quien-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.para-quien-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(12, 30, 54, 0.12);
  display: flex;
  flex-direction: column;
}

.para-quien-image-wrap img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.para-quien-body {
  padding: 1.2rem 1.4rem 1.4rem;
  font-size: 0.95rem;
}

/* Productos claros */
.productos-payphone {
  padding: 4rem 0;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.card-light {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(12, 30, 54, 0.08);
}

.card-chip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #eef1f3;
  color: #123f6b;
  margin-bottom: 0.5rem;
}
/* ===========================================
   CHIP · PAYPHONE (REUTILIZABLE)
=========================================== */
.chip-payphone{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:900;
  color:#ffffff;
  background: var(--pp-gradient-main);
  box-shadow: 0 10px 24px rgba(18, 63, 107, .25);
  margin-bottom:.75rem;
}
/* ===========================================
   CARRUSEL LOGOS CLIENTES (simple)
=========================================== */
.clientes-section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: #ffffff;
  overflow: hidden;
  border-top: 1px solid #dadfe2;
  border-bottom: 1px solid #dadfe2;
}

.clientes-section .logos-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

/* ===========================================
   VALORES (Cards en degradado azul)
=========================================== */
.valores-section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: linear-gradient(135deg, #123f6b 0, #123f6b 45%, #123f6b 100%);
  color: var(--mv-white);
  overflow: hidden;
}

.valores-section .section-title-strong,
.valores-section .section-subtitle-center {
  color: var(--mv-white);
}

.valores-section .productos-grid {
  gap: 1.7rem;
}

.valores-section .card-light {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top left, #eef1f3 0, #ffffff 40%, #dadfe2 100%);
  border-radius: 20px;
  border: 1px solid #dadfe2;
  box-shadow: 0 18px 38px rgba(12, 30, 54, 0.18);
  transform: translateY(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.valores-section .card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 42px rgba(12, 30, 54, 0.3);
  border-color: var(--mv-orange);
}

/* ===========================================
   CARRUSEL NEGOCIOS (business-carousel)
=========================================== */
.business-carousel-section {
  padding: 4rem 0;
  background: transparent;
}

.business-carousel-header {
  max-width: var(--max-width);
  margin: 0 auto 2rem;
  padding: 0 18px;
}

.business-carousel-header h2 {
  font-size: 2.2rem;
  margin-bottom: 0.35rem;
  color: #0c1e36;
}

.business-carousel-header p {
  font-size: 0.98rem;
  color: #123f6b;
}

.business-carousel {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
  overflow: hidden;
  background: transparent !important;
}

.business-carousel-track {
  display: flex;
  gap: 1.5rem;
  animation: businessCarouselSlide 32s linear infinite;
  background: transparent !important;
}

.business-card {
  flex: 0 0 320px;
  background: transparent;
  border-radius: 22px;
  padding: 1.2rem 1.4rem;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease;
}

.business-card-title {
  font-weight: 600;
  font-size: 1.02rem;
  color: #0c1e36;
}

.business-card-meta {
  font-size: 0.82rem;
  color: #123f6b;
}

.business-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 0.75rem;
}

.business-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(12, 30, 54, 0.16);
}

@keyframes businessCarouselSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ===========================================
   EFECTO HOVER EN IMÁGENES (img-hover-tilt)
=========================================== */
.img-hover-tilt {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.img-hover-tilt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
  transform-origin: center center;
}

.img-hover-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left,
    rgba(255, 255, 255, 0.45) 0,
    transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.img-hover-tilt:hover img {
  transform: scale(1.06) translateY(-4px);
  filter: brightness(1.03);
}

.img-hover-tilt:hover::after {
  opacity: 1;
}

/* ===========================================
   HOVER EN CARDS GENERALES
=========================================== */
.card,
.card-light,
.para-quien-card,
.product-card,
.business-card {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.card:hover,
.card-light:hover,
.para-quien-card:hover,
.product-card:hover,
.business-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(12, 30, 54, 0.2);
}

/* ===========================================
   FAQ
=========================================== */
.faq-section {
  width: 100%;
  background: #eef1f3;
  padding: 4rem 0;
}

.faq-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 3rem;
}

.faq-title {
  font-size: 2.4rem;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  color: #0c1e36;
}

.faq-description {
  font-size: 0.98rem;
  color: #123f6b;
}

.faq-list {
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(12, 30, 54, 0.08);
  padding: 0.4rem 0.6rem;
}

.faq-item + .faq-item {
  border-top: 1px solid #dadfe2;
}

.faq-item {
  padding: 0.75rem 0.9rem;
}

.faq-question {
  font-size: 0.96rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  color: #0c1e36;
}

.faq-answer {
  font-size: 0.9rem;
  color: #123f6b;
  margin-top: 0.5rem;
  display: none;
}

.faq-item.is-open .faq-answer {
  display: block;
}

@media (max-width: 900px) {
  .faq-inner {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   PRODUCTOS – Card con imagen 100% y overlay
=========================================== */
.product-card-overlay {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background-image: var(--product-img);
  background-size: cover;
  background-position: center;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 18px 40px rgba(12, 30, 54, 0.18);
  color: #ffffff;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.product-card-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(12, 30, 54, 0.65) 40%,
    rgba(12, 30, 54, 0.25) 75%,
    rgba(12, 30, 54, 0.05) 100%
  );
}

.product-card-overlay:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(12, 30, 54, 0.25);
}

.product-overlay-inner {
  position: relative;
  padding: 1.3rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.card-chip-soft {
  background: rgba(255, 255, 255, 0.18);
  color: #eef1f3;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  backdrop-filter: blur(8px);
}

.product-card-overlay .card-title {
  color: #ffffff;
  font-size: 1.05rem;
}

.product-card-overlay .card-body {
  color: #eef1f3;
  font-size: 0.9rem;
}

.product-card-overlay .btn-primary {
  background: linear-gradient(135deg, var(--mv-orange), var(--mv-orange-deep));
  box-shadow: 0 12px 30px rgba(254, 108, 0, 0.75);
}

/* ===========================================
   SECCIÓN VIDEO TIPO PAYPHONE
=========================================== */
.mv-how-wrapper {
  background: #eef1f3;
  padding: 4rem 0 5rem;
}

.mv-how-gradient {
  max-width: 100%;
  margin: 0 auto;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.25) 0, transparent 45%),
    linear-gradient(120deg, #0c1e36 0%, #fe6c00 55%, #fd940f 100%);
  border-radius: 0 0 0 80px;
  color: #ffffff;
  overflow: hidden;
}

.mv-how-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 18px 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.mv-how-text .kicker-small {
  color: #eef1f3;
}

.mv-how-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.mv-how-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.mv-video-card {
  background: rgba(12, 30, 54, 0.18);
  border-radius: 18px;
  padding: 0.85rem 0.9rem 1rem;
  font-size: 0.86rem;
  box-shadow: 0 14px 32px rgba(12, 30, 54, 0.35);
  backdrop-filter: blur(10px);
  color: #ffffff;
}

.mv-video-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.6rem;
  margin-bottom: 0.25rem;
}

.mv-video-card p {
  font-size: 0.82rem;
  color: #eef1f3;
}

.mv-video-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.mv-video-thumb img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.mv-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fe6c00;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.mv-how-main-video {
  max-width: var(--max-width);
  margin: -4rem auto 0;
  padding: 0 18px;
  display: flex;
  justify-content: center;
}

.mv-video-frame {
  width: min(720px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(12, 30, 54, 0.35);
  background: #000000;
}

.mv-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 960px) {
  .mv-how-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .mv-how-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mv-how-inner {
    padding-bottom: 4rem;
  }
  .mv-how-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .mv-how-main-video {
    margin-top: -3rem;
  }
}

/* ===========================================
   SECCIÓN BENEFICIOS TIPO PAYPHONE (final)
=========================================== */
.mv-benefits-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr);
  gap: 2.5rem;
  align-items: stretch;
}

/* Imagen grande: 1 esquina grande + 3 pequeñas (modo carrusel) */
.mv-benefits-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 40px 14px 14px 14px; /* esquina sup. izquierda grande */
  box-shadow: 0 26px 70px rgba(12, 30, 54, 0.28);
}

/* Track del carrusel: contiene todas las imágenes en fila */
.mv-benefits-track {
  display: flex;
  width: 400%;                  /* 4 imágenes -> 4 * 100% */
  transition: transform 0.6s ease-out;
}

/* Cada slide ocupa el 100% del ancho visible */
.mv-benefits-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Cards 2×2 a la derecha */
.mv-benefits-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

/* Card activa (igual que hover) */
.mv-benefit-card.is-active {
  background: #ffffff;
  border-color: var(--mv-orange);
  box-shadow: 0 22px 40px rgba(12, 30, 54, 0.12);
  transform: translateY(-4px);
}

/* Card base gris (ploma) */
.mv-benefit-card {
  background: #eef1f3;
  border-radius: 24px;
  padding: 1.4rem 1.5rem;
  border: 1px solid transparent;
  box-shadow: 0 10px 28px rgba(12, 30, 54, 0.06);
  cursor: pointer;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease,
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

/* Icono circular */
.mv-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  box-shadow: 0 8px 18px rgba(12, 30, 54, 0.08);
  font-size: 1rem;
  color: var(--mv-orange);
}

.mv-benefit-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: #0c1e36;
}

.mv-benefit-text {
  font-size: 0.9rem;
  color: #123f6b;
}

/* Hover y activa = blanco + borde naranja */
.mv-benefit-card:hover,
.mv-benefit-card.is-active {
  background: #ffffff;
  border-color: var(--mv-orange);
  box-shadow: 0 20px 40px rgba(12, 30, 54, 0.14);
  transform: translateY(-4px);
}

/* RESPONSIVE beneficios */
@media (max-width: 960px) {
  .mv-benefits-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mv-benefits-image-wrap {
    max-width: 520px;
    margin: 0 auto 2rem;
  }
}

@media (max-width: 640px) {
  .mv-benefits-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================
   ANIMACIONES TIPO PAYPHONE – aparecer desde abajo
=========================================== */
.mv-anim {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  will-change: opacity, transform;
}

.mv-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mv-anim-delay-1 { transition-delay: 0.10s; }
.mv-anim-delay-2 { transition-delay: 0.20s; }
.mv-anim-delay-3 { transition-delay: 0.30s; }
.mv-anim-delay-4 { transition-delay: 0.40s; }

/* ===========================================
   UTILITARIOS EXTRA & FOOTER
=========================================== */
.text-purple { color: var(--mv-secondary); }
.text-orange { color: var(--mv-orange); }
.text-muted  { color: #123f6b; }

.heading-highlight-purple {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1.08;
}

.heading-highlight-purple span {
  color: var(--mv-secondary);
}

/* Ajustes para fondo naranja específico */
#cobra-desde .hero-title {
  color: #ffffff;
}
#cobra-desde .hero-highlight {
  color: #0c1e36 !important;
}
#cobra-desde .hero-subtitle {
  color: #0c1e36;
}

/* FOOTER OSCURO */
.footer-payphone {
  background: #000000;
  border-top: 1px solid #0c1e36;
  color: #dadfe2;
}

.footer-payphone .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.2rem 18px 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.footer-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}

.footer-brand h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.footer-brand p {
  font-size: 0.9rem;
  max-width: 18rem;
}

.footer-logo {
  width: 140px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  margin-bottom: 0.8rem;
}

.footer-links-group h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #dadfe2;
  margin-bottom: 0.4rem;
}

.footer-links-list {
  list-style: none;
}

.footer-links-list li + li {
  margin-top: 0.25rem;
}

.footer-links-list a {
  font-size: 0.86rem;
  color: #dadfe2;
  transition: color 0.16s ease, transform 0.16s ease;
}

.footer-links-list a:hover {
  color: var(--mv-orange);
  transform: translateX(2px);
}

.footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  font-size: 0.8rem;
  border-top: 1px solid #0c1e36;
  padding-top: 0.8rem;
}

.footer-bottom-slogan {
  color: #dadfe2;
}

@media (max-width: 720px) {
  .footer-layout {
    flex-direction: column;
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================================
   RESPONSIVE HERO & GRIDS PRINCIPALES
=========================================== */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .beneficios-grid {
    grid-template-columns: 1fr;
  }
  .para-quien-grid {
    grid-template-columns: 1fr;
  }
  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .productos-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   COBRANZAS · ESTILOS ESPECÍFICOS (migrados desde inline <style>)
   - Mantiene el look exacto de la página cobranzas.html
   - No afecta páginas existentes (selectors con prefijo .cob- / hero helpers)
========================================================== */

/* Hero helpers */
.hero-copy{ max-width: 42rem; }
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:#ffffff;
  opacity:.92;
  margin-bottom:.75rem;
}

/* Badges del hero */
.cob-hero-badges{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 1.25rem;
}
.cob-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .75rem; border-radius:999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  color:#ffffff; font-size:.82rem; font-weight:600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}
.cob-badge svg{ width:16px; height:16px; opacity:.95; }

/* Títulos con icono */
.cob-section-title{
  display:flex; align-items:center; gap:.6rem; justify-content:center;
}
.cob-section-title svg{ width:22px; height:22px; }

/* Layout 2 columnas */
.cob-two-col{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
}
@media (max-width: 900px){
  .cob-two-col{ grid-template-columns:1fr; }
}

/* Puntos/beneficios */
.cob-points{ display:flex; flex-direction:column; gap:.75rem; }
.cob-point{
  display:flex; gap:.75rem; align-items:flex-start;
  background:#ffffff;
  border-radius: 18px;
  padding: .9rem 1rem;
  box-shadow: 0 12px 28px rgba(12, 30, 54, 0.08);
  border: 1px solid #eef1f3;
  color: #0c1e36;
}
.cob-point .ic{
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: #eef1f3;
  color: var(--mv-orange);
  box-shadow: 0 10px 18px rgba(12, 30, 54, .08);
  flex: 0 0 auto;
}
.cob-point .ic svg{ width:18px; height:18px; }
.cob-point h4{ font-size: .98rem; margin: 0 0 .2rem; }
.cob-point p{ margin:0; color:#123f6b; font-size:.92rem; }
.cob-mini-note{ font-size:.9rem; color:#123f6b; margin-top:.8rem; }

/* Segmentación por días (pills) */
.cob-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.cob-pill{
  background:#ffffff;
  border:1px solid #eef1f3;
  padding:.5rem .75rem;
  border-radius: 999px;
  font-size:.88rem;
  color:#0c1e36;
  box-shadow: 0 12px 26px rgba(12, 30, 54, .06);
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600;
}
.cob-pill span{
  display:inline-flex;
  padding:.16rem .55rem;
  border-radius:999px;
  background: rgba(254, 108, 0, .12);
  color: var(--mv-orange);
  font-weight:700;
  font-size:.8rem;
}

/* Metodología (timeline) */
.cob-timeline{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 960px){
  .cob-timeline{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cob-timeline{ grid-template-columns: 1fr; }
}
.cob-step{
  background:#ffffff;
  border-radius: 20px;
  padding: 1rem 1.05rem;
  border: 1px solid #eef1f3;
  box-shadow: 0 16px 34px rgba(12, 30, 54, .08);
  position: relative;
  overflow:hidden;
  color:#0c1e36;
}
.cob-step::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, 0) 45%);
  pointer-events:none;
  opacity:.6;
}
.cob-step .n{
  display:inline-flex;
  width:36px; height:36px;
  align-items:center; justify-content:center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mv-blue-soft), var(--mv-blue-dark));
  color:#ffffff;
  font-weight:800;
  margin-bottom:.7rem;
  box-shadow: 0 14px 28px rgba(18, 63, 107, .25);
  position:relative;
  z-index:1;
}
.cob-step h3{ font-size:1rem; margin:0 0 .35rem; position:relative; z-index:1; }
.cob-step p{ margin:0; color:#123f6b; font-size:.92rem; position:relative; z-index:1; }

/* Canales */
.cob-channel{
  display:flex; align-items:center; gap:.75rem;
  background:#ffffff;
  border:1px solid #eef1f3;
  border-radius: 18px;
  padding: .9rem 1rem;
  box-shadow: 0 12px 28px rgba(12, 30, 54, 0.08);
  color:#0c1e36;
}
.cob-channel .ic{
  width:44px; height:44px; border-radius: 16px;
  background: #eef1f3;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 18px rgba(12, 30, 54, .08);
  color: var(--mv-orange);
  flex: 0 0 auto;
}
.cob-channel .ic svg{ width:20px; height:20px; }
.cob-channel strong{ display:block; }
.cob-channel small{ color:#123f6b; display:block; margin-top:.1rem; }

/* KPIs */
.cob-kpi{
  background:#ffffff;
  border:1px solid #eef1f3;
  border-radius: 20px;
  padding: 1.05rem 1.1rem;
  box-shadow: 0 16px 34px rgba(12, 30, 54, .08);
  color:#0c1e36;
  display:flex; flex-direction:column; gap:.25rem;
}
.cob-kpi .top{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.cob-kpi .tag{
  font-size:.78rem;
  padding:.22rem .6rem;
  border-radius:999px;
  background:#eef1f3;
  color:#123f6b;
  font-weight:700;
}
.cob-kpi .val{
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-.4px;
  color:#0c1e36;
}
.cob-kpi p{ margin:0; color:#123f6b; font-size:.92rem; }
/* =========================
   KPIs · Iconos
========================= */
.kpi-left{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}

.kpi-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;

  /* Fondo suave + borde como tus cards */
  background: radial-gradient(circle at top left, #eef1f3 0, #ffffff 55%, #eef1f3 100%);
  border: 1px solid #dadfe2;
  box-shadow: 0 10px 22px rgba(12, 30, 54, .07);

  /* Color del ícono (stroke="currentColor") */
  color: var(--mv-orange);
}

.kpi-icon svg{
  width:20px;
  height:20px;
  display:block;
}

.kpi-icon svg path{
  stroke: currentColor;
}

/* Planes (tarifas) */
.cob-price{
  background: #0c1e36;
  border: 1px solid rgba(253, 148, 15, 0.18);
  border-radius: 22px;
  padding: 1.1rem 1.15rem 1.2rem;
  box-shadow: 0 16px 40px rgba(12, 30, 54, 0.7);
  color:#ffffff;
  display:flex; flex-direction:column; gap:.55rem;
}
.cob-price .chip{
  display:inline-flex;
  width: fit-content;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(254, 108, 0, 0.12);
  color: var(--mv-orange);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
}
.cob-price h3{ margin:0; font-size:1.05rem; }
.cob-price .desc{ margin:0; color:#dadfe2; font-size:.92rem; }
.cob-price ul{ margin:.25rem 0 0; padding-left: 1.05rem; color:#eef1f3; font-size:.9rem; }
.cob-price li + li{ margin-top:.3rem; }

/* CTA final */
.cob-cta-card{ max-width: var(--max-width); margin: 0 auto; padding: 0 18px; }
.cob-cta-inner{
  border-radius: 26px;
  padding: 2rem 1.6rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.30) 0, transparent 45%),
    linear-gradient(120deg, #0c1e36 0%, #fe6c00 55%, #fd940f 100%);
  color:#ffffff;
  box-shadow: 0 28px 70px rgba(12, 30, 54, 0.25);
  overflow:hidden;
  position:relative;
}
.cob-cta-inner::after{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 60%);
  transform: rotate(12deg);
  pointer-events:none;
}
.cob-cta-inner h2{ color:#ffffff; margin:0 0 .55rem; }
.cob-cta-inner p{ margin:0; color:#ffffff; opacity:.92; max-width: 52rem; }
.cob-cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top: 1.2rem; align-items:center; }
.cob-contact-inline{
  margin-top: .9rem;
  display:flex; flex-wrap:wrap; gap:.6rem;
  color:#ffffff; opacity:.95; font-weight:600; font-size:.92rem;
}
.cob-contact-inline a{ color:#ffffff; text-decoration:underline; text-underline-offset: 3px; }

/* Pequeño fix: ícono hamburguesa en nav scrolled */
.nav-payphone.scrolled .nav-toggle span{ background:#0c1e36; }

/* Fondo del menú móvil para mejor legibilidad */
.nav-mobile{
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(12px);
}
.nav-payphone.scrolled + .nav-mobile,
.nav-payphone.scrolled ~ .nav-mobile{
  background: rgba(255, 255, 255, 0.98);
}
.nav-payphone.scrolled ~ .nav-mobile .nav-mobile-inner a{
  color:#0c1e36;
}
.nav-payphone.scrolled ~ .nav-mobile .nav-mobile-inner a:hover{
  color: var(--mv-orange);
}
/* ===========================================
   ONBOARDING · Cards (mejor visibilidad)
   - Mantiene tu HTML
   - Estilo PayPhone: blanco limpio, borde sutil, halo, hover fino
=========================================== */

#onboarding .section{
  padding-top: 0; /* quita aire extra si lo sientes alto */
}

/* Grid un poco más generoso */
#onboarding .grid-3{
  gap: 1.35rem;
}

/* Card base */
#onboarding .grid-3 .card-light.card{
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid #eef1f3;
  box-shadow: 0 14px 34px rgba(12, 30, 54, 0.08);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Halo superior (muy PayPhone) */
#onboarding .grid-3 .card-light.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 18% 8%, rgba(18, 63, 107, .18) 0, transparent 55%),
    radial-gradient(circle at 92% 10%, rgba(254, 108, 0, .14) 0, transparent 60%);
  pointer-events:none;
  opacity:.9;
}

/* Línea/acentito degradado en la parte superior */
#onboarding .grid-3 .card-light.card::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #123f6b, #0e3a65, var(--mv-orange));
  opacity: .9;
  pointer-events:none;
}

/* Hover: más contraste sin exagerar */
#onboarding .grid-3 .card-light.card:hover{
  transform: translateY(-6px);
  border-color: rgba(254, 108, 0, .55);
  box-shadow: 0 22px 48px rgba(12, 30, 54, 0.14);
}

/* Badge del paso (card-chip) más visible y “premium” */
#onboarding .grid-3 .card-chip{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: -0.2px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--mv-blue-soft), var(--mv-blue-dark));
  box-shadow: 0 14px 28px rgba(18, 63, 107, 0.22);
  border: 1px solid rgba(255, 255, 255, .65);
  margin-bottom: .75rem;
}

/* Títulos y texto: mejor jerarquía */
#onboarding .grid-3 .card-title{
  position: relative;
  z-index: 1;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0c1e36;
  margin-bottom: .35rem;
}

#onboarding .grid-3 .card-body{
  position: relative;
  z-index: 1;
  font-size: .93rem;
  line-height: 1.5;
  color: #123f6b;
}

/* Responsive: mejor altura y aire */
@media (max-width: 960px){
  #onboarding .grid-3{ gap: 1.1rem; }
}
@media (max-width: 640px){
  #onboarding .grid-3 .card-light.card{ padding: 1.15rem 1.1rem 1.05rem; }
}
/* ===========================================
   KPIs (Indicadores) · Mejor diseño de cards
   - SOLO afecta #kpis
=========================================== */
#kpis .kpi-grid{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

@media (max-width: 960px){
  #kpis .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #kpis .kpi-grid{ grid-template-columns: 1fr; }
}

#kpis .kpi-card{
  position: relative;
  background: #ffffff;
  border: 1px solid #eef1f3;
  border-radius: 22px;
  padding: 1.15rem 1.2rem 1.1rem;
  box-shadow: 0 14px 34px rgba(12, 30, 54, 0.08);
  color: #0c1e36;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#kpis .kpi-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 16% 8%, rgba(18, 63, 107, .14) 0, transparent 55%),
    radial-gradient(circle at 92% 10%, rgba(254, 108, 0, .12) 0, transparent 60%);
  pointer-events:none;
  opacity:.95;
}

#kpis .kpi-card::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #123f6b, #0e3a65, var(--mv-orange));
  opacity: .9;
  pointer-events:none;
}

#kpis .kpi-card:hover{
  transform: translateY(-6px);
  border-color: rgba(254, 108, 0, .55);
  box-shadow: 0 22px 48px rgba(12, 30, 54, 0.14);
}

#kpis .kpi-head{ position: relative; z-index: 1; margin-bottom: .35rem; }
#kpis .kpi-title{
  font-size: 1.05rem;
  font-weight: 800;
  color: #0c1e36;
  margin: 0;
}
#kpis .kpi-body{
  position: relative;
  z-index: 1;
  margin: .35rem 0 0;
  font-size: .93rem;
  line-height: 1.5;
  color: #123f6b;
}

#kpis .kpi-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #eef1f3 0, #ffffff 55%, #eef1f3 100%);
  border: 1px solid #dadfe2;
  box-shadow: 0 10px 22px rgba(12, 30, 54, .07);
  color: var(--mv-orange);
}
#kpis .kpi-icon svg{ width: 22px; height: 22px; }


/* ===========================================
   TIPOS DE CARTERA · Mejor visibilidad
   - SOLO afecta #tipos-cartera
=========================================== */
#tipos-cartera .cob-types-grid{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

@media (max-width: 960px){
  #tipos-cartera .cob-types-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #tipos-cartera .cob-types-grid{ grid-template-columns: 1fr; }
}

#tipos-cartera .cob-type-card{
  position: relative;
  background: #ffffff;
  border: 1px solid #eef1f3;
  border-radius: 22px;
  padding: 1.15rem 1.2rem 1.1rem;
  box-shadow: 0 14px 34px rgba(12, 30, 54, 0.08);
  color: #0c1e36;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#tipos-cartera .cob-type-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 16% 8%, rgba(18, 63, 107, .12) 0, transparent 55%),
    radial-gradient(circle at 92% 10%, rgba(254, 108, 0, .10) 0, transparent 60%);
  pointer-events:none;
  opacity:.95;
}

#tipos-cartera .cob-type-card::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #123f6b, #0e3a65, var(--mv-orange));
  opacity: .9;
  pointer-events:none;
}

#tipos-cartera .cob-type-card:hover{
  transform: translateY(-6px);
  border-color: rgba(254, 108, 0, .55);
  box-shadow: 0 22px 48px rgba(12, 30, 54, 0.14);
}

#tipos-cartera .cob-type-head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .45rem;
}

#tipos-cartera .cob-type-ic{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #eef1f3 0, #ffffff 55%, #eef1f3 100%);
  border: 1px solid #dadfe2;
  box-shadow: 0 10px 22px rgba(12, 30, 54, .07);
  color: var(--mv-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#tipos-cartera .cob-type-ic svg{ width: 22px; height: 22px; }

#tipos-cartera .cob-type-title{
  font-size: 1.05rem;
  font-weight: 800;
  color: #0c1e36;
  margin: 0;
}

#tipos-cartera .cob-type-chip{
  display: inline-flex;
  width: fit-content;
  margin-top: .25rem;
  padding: .22rem .65rem;
  border-radius: 999px;
  background: rgba(254, 108, 0, .12);
  color: var(--mv-orange);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .72rem;
  text-transform: uppercase;
}

#tipos-cartera .cob-type-text{
  position: relative;
  z-index: 1;
  margin: .35rem 0 0;
  font-size: .93rem;
  line-height: 1.5;
  color: #123f6b;
}


/* ===========================================
   Protección: evita "shapes" gigantes inesperadas
   (solo dentro de Tipos de cartera y KPIs)
   - Si algún pseudo/elemento se desborda, aquí queda contenido
=========================================== */
#tipos-cartera, #kpis{
  overflow: clip; /* no afecta el layout general, solo recorta desbordes */
}
/* ===========================================
   TIPOS DE CARTERA + KPIs
   - Sin barra superior
   - Fondo sólido (sin degradados / halos)
=========================================== */

/* ---- TIPOS DE CARTERA ---- */
#tipos-cartera .cob-type-card::after,
#tipos-cartera .cob-type-card::before{
  content: none !important;         /* elimina barra superior y halo */
  background: none !important;
}

#tipos-cartera .cob-type-card{
  background: #ffffff !important;   /* sólido */
}

/* Icono: sin radial-gradient */
#tipos-cartera .cob-type-ic{
  background: #eef1f3 !important;   /* sólido suave */
  border: 1px solid #dadfe2;
  box-shadow: 0 10px 22px rgba(12, 30, 54, .07);
}


/* ---- KPIs ---- */
#kpis .kpi-card::after,
#kpis .kpi-card::before{
  content: none !important;         /* elimina barra superior y halo */
  background: none !important;
}

#kpis .kpi-card{
  background: #ffffff !important;   /* sólido */
}

/* Icono KPI: sin radial-gradient */
#kpis .kpi-icon{
  background: #eef1f3 !important;   /* sólido suave */
  border: 1px solid #dadfe2;
  box-shadow: 0 10px 22px rgba(12, 30, 54, .07);
}
/* ===========================================
   ONBOARDING
   - Sin barra superior
   - Fondo sólido (sin halo/degradados)
=========================================== */

/* Quitar halo y barra */
#onboarding .grid-3 .card-light.card::before,
#onboarding .grid-3 .card-light.card::after{
  content: none !important;
  background: none !important;
}

/* Card sólida */
#onboarding .grid-3 .card-light.card{
  background: #ffffff !important;
}

/* (Opcional) Círculo/step sólido, sin degradado */
#onboarding .grid-3 .card-chip{
  background: #123f6b !important;   /* sólido azul (ajústalo si deseas) */
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 14px 28px rgba(18, 63, 107, 0.22);
}







/* ==========================================================
   HOME (INDEX) · NUEVOS BLOQUES (PayPhone / MACVASQUEZ)
========================================================== */

/* HERO HOME – cards a la derecha */
.mv-hero-home .hero-grid { align-items: stretch; }
.mv-hero-stats{
  display:flex; flex-wrap:wrap; gap:.65rem;
  margin-top: 1.1rem;
}
.mv-stat{
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: .45rem .75rem;
  display:flex; gap:.5rem; align-items: baseline;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}
.mv-stat-k{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.mv-stat-v{ font-size:.86rem; font-weight:700; }

.mv-hero-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-content: center;
  padding: 1.2rem;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(253, 148, 15, 0.18);
  box-shadow: 0 28px 70px rgba(12, 30, 54, 0.35);
}
.mv-hero-card{
  background: rgba(12, 30, 54, 0.55);
  border: 1px solid rgba(253, 148, 15, 0.20);
  border-radius: 20px;
  padding: 1rem 1.05rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .20);
}
.mv-hero-card h3{ font-size: 1.02rem; margin: .45rem 0 .35rem; }
.mv-hero-card p{ font-size: .9rem; color: #eef1f3; }
.mv-hero-ic{
  width: 40px; height: 40px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}
.mv-hero-link{
  display:inline-flex;
  margin-top: .45rem;
  font-weight: 700;
  color: #ffffff;
  opacity: .92;
  transition: opacity .18s ease, transform .18s ease;
}
.mv-hero-link:hover{ opacity: 1; transform: translateX(2px); }

.mv-hero-orbs{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(18, 63, 107, 0.22) 0, transparent 45%),
    radial-gradient(circle at 85% 12%, rgba(254, 108, 0, 0.18) 0, transparent 48%),
    radial-gradient(circle at 60% 85%, rgba(18, 63, 107, 0.18) 0, transparent 50%);
  pointer-events:none;
}

/* 2 columnas reutilizable (secciones 2–9) */
.mv-split{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
@media (max-width: 900px){
  .mv-split{ grid-template-columns: 1fr; }
  .mv-hero-cards{ grid-template-columns: 1fr; }
}

/* bullets (qué hacemos) */
.mv-bullets{ display:flex; flex-direction:column; gap:.75rem; margin-top: 1.1rem; }
.mv-bullet{
  display:flex; gap:.75rem; align-items:flex-start;
  padding: .8rem .9rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #eef1f3;
  box-shadow: 0 14px 34px rgba(12, 30, 54, 0.08);
  color: #0c1e36;
}
.mv-bullet p{ color:#123f6b; font-size:.92rem; margin-top:.15rem; }
.mv-bullet-ic{
  width: 34px; height: 34px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background:#eef1f3;
  color: var(--mv-orange);
  font-weight: 900;
}

/* right 4 cards (side) */
.mv-side-cards{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1rem;
}
.mv-side-card{
  display:grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: .85rem;
  padding: 1.05rem 1.1rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #eef1f3;
  box-shadow: 0 18px 40px rgba(12, 30, 54, 0.10);
}
.mv-side-ic{
  width: 46px; height: 46px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: #eef1f3;
  color: var(--mv-orange);
  box-shadow: 0 10px 22px rgba(12, 30, 54, 0.08);
}
.mv-side-card h3{ font-size: 1.05rem; color:#0c1e36; margin-bottom:.15rem; }
.mv-side-card p{ color:#123f6b; font-size:.92rem; margin-bottom:.6rem; }

/* variante dark */
.mv-side-cards-dark .mv-side-card-dark{
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.mv-side-cards-dark .mv-side-card-dark h3{ color:#ffffff; }
.mv-side-cards-dark .mv-side-card-dark p{ color:#eef1f3; }
.mv-side-cards-dark .mv-side-card-dark .mv-side-ic{
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* Problemas */
.mv-problem-list{
  margin-top: 1rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.mv-problem-row{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 600;
  color: #0c1e36;
}
.mv-problem-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mv-orange), var(--mv-orange-deep));
  box-shadow: 0 10px 22px rgba(254, 108, 0, 0.25);
}
.mv-pain-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
@media (max-width: 520px){
  .mv-pain-cards{ grid-template-columns: 1fr; }
}
.mv-pain-card{
  background: #ffffff;
  border-radius: 22px;
  padding: 1.05rem 1.1rem;
  border: 1px solid #eef1f3;
  box-shadow: 0 18px 40px rgba(12, 30, 54, 0.08);
}
.mv-pain-card h3{ color:#0c1e36; font-size: 1.05rem; margin-bottom:.25rem; }
.mv-pain-card p{ color:#123f6b; font-size:.92rem; }

/* Solución */
.mv-solution-pills{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top: 1rem; }
.mv-pill{
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 700;
  font-size: .85rem;
}

/* Sectores */
.mv-sectors-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 980px){
  .mv-sectors-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .mv-sectors-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mv-sector{
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #eef1f3;
  box-shadow: 0 18px 40px rgba(12, 30, 54, 0.08);
  padding: 1rem 1rem .9rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .45rem;
  text-align:center;
}
.mv-sector span{ font-size: 1.4rem; }
.mv-sector p{ color:#0c1e36; font-weight:700; }

/* Steps */
.mv-steps{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 980px){
  .mv-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .mv-steps{ grid-template-columns: 1fr; }
}
.mv-step{
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(12, 30, 54, 0.08);
  box-shadow: 0 18px 46px rgba(12, 30, 54, 0.12);
}
.mv-step-n{
  width: 40px; height: 40px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(12, 30, 54, 0.08);
  font-weight: 900;
  color: #0c1e36;
  margin-bottom: .55rem;
}
.mv-step h3{ color:#0c1e36; font-size: 1.02rem; margin-bottom:.2rem; }
.mv-step p{ color:#0c1e36; font-size:.9rem; }

/* Tech list */
.mv-tech-list{ margin-top: 1rem; display:flex; flex-direction:column; gap:.7rem; }
.mv-tech-item{
  display:flex; gap:.75rem; align-items:flex-start;
  padding: .85rem .9rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #eef1f3;
  box-shadow: 0 14px 34px rgba(12, 30, 54, 0.08);
}
.mv-tech-item span{ font-size: 1.1rem; }
.mv-tech-item p{ color:#123f6b; font-size:.92rem; }

/* Testimonios */
.mv-testimonials{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 960px){
  .mv-testimonials{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .mv-testimonials{ grid-template-columns: 1fr; }
}
.mv-testimonial{
  background: #ffffff;
  border-radius: 22px;
  padding: 1.1rem 1.2rem;
  border: 1px solid #eef1f3;
  box-shadow: 0 18px 40px rgba(12, 30, 54, 0.08);
}
.mv-quote{
  color:#0c1e36;
  font-weight: 650;
  font-size: .98rem;
  line-height: 1.45;
}
.mv-quote-meta{
  display:flex; justify-content:space-between; gap: .75rem;
  margin-top: .8rem;
  font-size: .82rem;
}
.mv-quote-name{ color:#0c1e36; font-weight: 800; }
.mv-quote-tag{
  color: var(--mv-orange);
  font-weight: 800;
  background: rgba(254, 108, 0, 0.12);
  padding: .25rem .55rem;
  border-radius: 999px;
}

/* CTA box */
.mv-cta-box{
  background:
    radial-gradient(circle at 20% 20%, rgba(18, 63, 107, 0.22) 0, transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(254, 108, 0, 0.18) 0, transparent 55%),
    linear-gradient(135deg, #0c1e36 0%, #0c1e36 60%, #0c1e36 100%);
  border-radius: 26px;
  border: 1px solid rgba(253, 148, 15, 0.18);
  box-shadow: 0 28px 70px rgba(12, 30, 54, 0.35);
  padding: 1.6rem 1.7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.25rem;
  color: #ffffff;
}
.mv-cta-copy h2{ font-size: 1.7rem; line-height: 1.12; }
.mv-cta-copy p{ color:#dadfe2; max-width: 44rem; margin-top:.35rem; }
.mv-cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width: 900px){
  .mv-cta-box{ flex-direction: column; align-items:flex-start; }
}

/* Footer pills */
.mv-footer-contact{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top: .9rem; }
.mv-footer-pill{
  display:inline-flex;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color:#dadfe2;
  font-weight: 700;
  font-size: .82rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mv-footer-pill:hover{
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Motion: suavizar tilt */
[data-tilt]{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}
/* ===========================================
   NAV MOBILE OVERLAY (COMPATIBLE CON .open y .is-open)
   No rompe el menú actual
=========================================== */

/* Evita scroll cuando el menú móvil está abierto */
.no-scroll {
  overflow: hidden;
}

/* Base: oculto */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* Panel lateral */
.nav-mobile .nav-mobile-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(92vw, 360px);
  height: 100%;
  background: #ffffff;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  box-shadow: -18px 0 42px rgba(12, 30, 54, 0.22);
}

/* Abierto (nuevo estándar) */
.nav-mobile.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile.is-open .nav-mobile-inner {
  transform: translateX(0);
}

/* Abierto (compatibilidad con CSS antiguo) */
.nav-mobile.open {
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile.open .nav-mobile-inner {
  transform: translateX(0);
}

/* Colores correctos cuando el nav está scrolled */
.nav-payphone.scrolled ~ .nav-mobile {
  background: rgba(255, 255, 255, 0.6);
}

.nav-payphone.scrolled ~ .nav-mobile .nav-mobile-inner {
  background: #ffffff;
}

/* Mobile-only */
@media (min-width: 901px) {
  .nav-mobile {
    display: none !important;
  }
}
/* ===========================================
   CONTACTO – adicionales (pegar al FINAL)
=========================================== */

.hero-kicker{
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: #eef1f3;
  margin-bottom: 0.65rem;
}

.mv-sla-pill{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .35rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #ffffff;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.mv-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.9rem;
}

.mv-badge{
  font-size:.82rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background: rgba(255, 255, 255, .12);
  border:1px solid rgba(255, 255, 255, .22);
  color:#ffffff;
}

.mv-contact-split{
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.mv-contact-card{
  border-radius: 22px;
  padding: 1.25rem 1.25rem 1.35rem;
}

.mv-card-head{
  margin-bottom: .75rem;
}

.mv-card-title{
  font-size: 1.15rem;
  color: #0c1e36;
  margin-bottom: .25rem;
  font-weight: 700;
}

.mv-card-sub{
  font-size: .92rem;
  color: #123f6b;
}

.mv-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
}

.mv-form-span-2{ grid-column: 1 / -1; }

.mv-req{ color: var(--mv-orange); font-weight: 800; }

.mv-field-error{
  display:block;
  font-size:.82rem;
  color:#fe6c00;
  margin-top:.35rem;
  min-height: 1.05em;
}

.mv-field-hint{
  display:block;
  font-size:.82rem;
  color:#123f6b;
  margin-top:.35rem;
}

.input-field.is-invalid{
  border-color: rgba(254, 108, 0, .45) !important;
  box-shadow: 0 0 0 4px rgba(254, 108, 0, .10) !important;
}

.mv-file{
  padding: .7rem .9rem;
}

.mv-consent{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.75rem .9rem;
  background:#eef1f3;
  border:1px solid #dadfe2;
  border-radius: 14px;
  color:#0c1e36;
}

.mv-consent input{
  margin-top:.2rem;
}

.mv-consent a{
  color: var(--mv-blue-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mv-mini-legal{
  display:block;
  font-size:.82rem;
  color:#123f6b;
  margin-top:.2rem;
}

.mv-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:flex-start;
  margin-top:.25rem;
}

.mv-contact-aside .mv-aside-stack{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.mv-mini-card{
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 18px;
}

.mv-mini-title{
  font-size: 1rem;
  font-weight: 700;
  color:#0c1e36;
  margin-bottom:.35rem;
}

.mv-mini-text{
  font-size:.92rem;
  color:#123f6b;
  margin-bottom:.75rem;
}

.mv-link{
  color: var(--mv-blue-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mv-bullets{
  margin: .35rem 0 0 1.1rem;
  color:#123f6b;
  font-size:.92rem;
}

.mv-alert{
  border-radius: 14px;
  padding: .75rem .95rem;
  margin: .65rem 0 1rem;
  font-size: .92rem;
  border: 1px solid transparent;
}

.mv-alert.is-ok{
  background: rgba(218, 223, 226, .10);
  border-color: rgba(218, 223, 226, .25);
  color: #123f6b;
}

.mv-alert.is-err{
  background: rgba(254, 108, 0, .08);
  border-color: rgba(254, 108, 0, .20);
  color: #0c1e36;
}

/* SLA cards layout */
.mv-sla-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Testimonios */
.mv-testimonials{
  margin-top: 1.6rem;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.mv-quote-text{
  font-size: .98rem;
  color:#0c1e36;
  line-height:1.55;
}

.mv-quote-meta{
  margin-top:.65rem;
  font-size:.85rem;
  color:#123f6b;
}

/* Legal links final */
.mv-legal-links{
  margin-top: 1.2rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  color:#eef1f3;
  font-size:.9rem;
}

.mv-legal-links a{
  color:#ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 980px){
  .mv-contact-split{ grid-template-columns: 1fr; }
  .mv-sla-grid{ grid-template-columns: 1fr; }
  .mv-testimonials{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .mv-form-grid{ grid-template-columns: 1fr; }
  .mv-form-span-2{ grid-column: auto; }
}

/* ==========================================================
   CONTACTO · FORM UI PRO (pegar al FINAL de styles.css)
   - No cambia tu HTML
   - Mejora: tipografía, inputs, select, textarea, file, focus, errores
========================================================== */

/* Card del formulario: más “premium” (borde + sombra + aire) */
#contacto-form .mv-contact-card{
  border-radius: 24px;
  border: 1px solid #eef1f3;
  box-shadow: 0 18px 55px rgba(12, 30, 54, 0.10);
  background: #ffffff;
}

/* Encabezado del card (separación visual) */
#contacto-form .mv-card-head{
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eef1f3;
}

#contacto-form .mv-card-title{
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

#contacto-form .mv-card-sub{
  font-size: .94rem;
  color: #123f6b;
}

/* Grid del formulario: un poco más de aire */
#contacto-form .mv-form-grid{
  gap: 1rem 1.1rem;
}

/* Labels profesionales */
#contacto-form .form-label{
  display: block;
  font-size: .92rem;
  font-weight: 650;
  color: #0c1e36;
  line-height: 1.2;
}

#contacto-form .form-label .mv-req{
  margin-left: .2rem;
}

/* Inputs unificados */
#contacto-form .input-field{
  margin-top: .55rem;
  width: 100%;
  border-radius: 14px;
  border: 1px solid #dadfe2;
  background: #ffffff;
  color: #0c1e36;

  padding: .82rem .95rem;
  font-size: .95rem;
  line-height: 1.2;

  outline: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

/* Placeholder más fino */
#contacto-form .input-field::placeholder{
  color: #fd940f;
}

/* Hover sutil (pro) */
#contacto-form .input-field:hover{
  background: #ffffff;
  border-color: #dadfe2;
}

/* Focus: anillo azul + micro elevación */
#contacto-form .input-field:focus{
  background: #ffffff;
  border-color: rgba(18, 63, 107, .65);
  box-shadow: 0 0 0 4px rgba(18, 63, 107, .14);
  transform: translateY(-1px);
}

/* Textarea: mejor altura y lectura */
#contacto-form textarea.input-field{
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}

/* Select: apariencia uniforme + flecha custom */
#contacto-form select.input-field{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 2.6rem;

  background-image:
    linear-gradient(45deg, transparent 50%, #123f6b 50%),
    linear-gradient(135deg, #123f6b 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    100% 0;
  background-size:
    6px 6px,
    6px 6px,
    2.6rem 100%;
  background-repeat: no-repeat;
}

/* Estado inválido: consistente con tu JS */
#contacto-form .input-field.is-invalid{
  border-color: rgba(254, 108, 0, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(254, 108, 0, 0.10) !important;
  background: #ffffff !important;
}

/* Mensaje de error: tipografía más clara */
#contacto-form .mv-field-error{
  font-size: .83rem;
  color: #fe6c00;
  margin-top: .45rem;
}

/* Hint */
#contacto-form .mv-field-hint{
  font-size: .83rem;
  color: #123f6b;
}

/* File input: botón moderno */
#contacto-form input[type="file"].input-field{
  padding: .62rem .7rem;
  background: #ffffff;
}

#contacto-form input[type="file"].input-field::file-selector-button{
  border: 1px solid #dadfe2;
  background: #ffffff;
  color: #0c1e36;
  padding: .55rem .8rem;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-right: .85rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#contacto-form input[type="file"].input-field::file-selector-button:hover{
  border-color: rgba(254, 108, 0, .45);
  box-shadow: 0 14px 30px rgba(12, 30, 54, .10);
  transform: translateY(-1px);
}

/* Consent: más pro (compacto y legible) */
#contacto-form .mv-consent{
  background: #ffffff;
  border: 1px solid #eef1f3;
  border-radius: 16px;
  padding: .9rem 1rem;
}

#contacto-form .mv-consent span{
  color: #0c1e36;
  font-weight: 550;
}

#contacto-form .mv-consent a{
  font-weight: 750;
}

/* Botones en formulario: mejor balance visual */
#contacto-form .mv-form-actions{
  margin-top: .25rem;
  gap: .75rem;
}

#contacto-form .mv-form-actions .btn{
  padding: .85rem 1.05rem;
  font-size: .92rem;
}

/* Alert: más “toast-like” */
#contacto-form .mv-alert{
  border-radius: 16px;
  padding: .85rem 1rem;
  box-shadow: 0 14px 40px rgba(12, 30, 54, .10);
}

/* Sidebar: cards con más “peso” visual */
#contacto-form .mv-mini-card{
  border: 1px solid #eef1f3;
  box-shadow: 0 18px 55px rgba(12, 30, 54, .08);
}

/* Responsive: inputs más grandes en móvil */
@media (max-width: 640px){
  #contacto-form .input-field{
    padding: .9rem .95rem;
    font-size: 1rem;
  }
  #contacto-form .mv-form-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================
   CARRITO / CHECKOUT – estilos (antes inline)
   Pegar al final de styles.css
=========================================== */

.section-center{ text-align:center; }

.heading-on-dark{ color:#ffffff; }
.subtitle-on-dark{
  color:#eef1f3;
  margin-top: .75rem;
}

/* Layout del checkout */
.checkout-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
}
@media (max-width: 900px){
  .checkout-layout{ grid-template-columns: 1fr; }
}

.billing-card,
.summary-card{
  border-radius: 24px;
  background: #ffffff;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 45px rgba(12, 30, 54, 0.10);
}

.billing-header{ margin-bottom: 16px; }
.billing-header h2{
  margin: 0 0 4px;
  font-size: 20px;
  color: #0c1e36;
}
.billing-header p{
  margin: 0;
  font-size: 13px;
  color: #123f6b;
}

.billing-form .form-row{ margin-bottom: 12px; }
.billing-form .form-row-inline{
  display: flex;
  gap: 12px;
}
.billing-form .form-row-inline .form-label{ flex: 1; }

.form-label{
  display: block;
  font-size: 13px;
  color: #0c1e36;
}
.form-label span{
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Nota: ya existe .input-field en tu CSS de Contacto;
   esto asegura el look del checkout sin romper lo demás */
.input-field{
  width: 100%;
  border-radius: 10px;
  border: 1px solid #dadfe2;
  padding: 9px 11px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  background: #ffffff;
  color: #0c1e36;
}
.input-field::placeholder{ color: #fd940f; }
.input-field:focus{
  border-color: #fd940f;
  box-shadow: 0 0 0 1px rgba(253, 148, 15, 0.4);
}

.billing-note{
  font-size: 11px;
  color: #123f6b;
  margin-top: 4px;
}

/* Resumen */
.summary-title{ margin: 0 0 4px; }
.summary-subtitle{ margin: 0 0 16px; }

.checkout-card{
  box-shadow: none;
  border-radius: 16px;
}

.checkout-table{
  width: 100%;
  border-collapse: collapse;
}
.checkout-table th,
.checkout-table td{
  padding: 8px 10px;
  font-size: 13px;
}
.checkout-table thead{
  background: rgba(12, 30, 54, 0.03);
}
.checkout-table tbody tr:nth-child(even){
  background: rgba(12, 30, 54, 0.01);
}

.checkout-total-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-weight: 600;
  font-size: 14px;
}
.checkout-total{ font-size: 18px; }

/* PayPhone iframe */
.payphone-iframe-wrap{ margin-top: 16px; }
.payphone-iframe-title{
  font-size: 13px;
  margin-bottom: 6px;
  color: #123f6b;
}
.payphone-iframe{
  width: 100%;
  max-width: 460px;
  height: 420px;
  border: none;
  border-radius: 18px;
  background: #ffffff;
}
/* ===========================================
   EXTRA (Transversal): Trust bar + Mini form + Sticky WhatsApp
=========================================== */

/* Trust bar (3 ítems) */
.mv-trustbar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mv-trustitem {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dadfe2;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 12px 26px rgba(12, 30, 54, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mv-trustic {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef1f3, #ffffff);
  border: 1px solid #dadfe2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mv-orange);
  font-weight: 800;
}
.mv-trusttxt b { display:block; color:#0c1e36; font-size:0.92rem; }
.mv-trusttxt span { display:block; color:#123f6b; font-size:0.86rem; }

@media (max-width: 900px) {
  .mv-trustbar { grid-template-columns: 1fr; }
}

/* Sticky WhatsApp (móvil) */
.mv-sticky-wa {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dadfe2, #123f6b);
  color: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.mv-sticky-wa:hover { transform: translateY(-1px); }
.mv-sticky-wa span { font-weight: 700; font-size: 0.92rem; }
.mv-sticky-wa i {
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display:flex; align-items:center; justify-content:center;
  font-style: normal; font-weight: 900;
}

@media (min-width: 901px) {
  .mv-sticky-wa { display: none; }
}

/* Mini formulario final */
.mv-mini-form {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 18px;
}
.mv-mini-card {
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 22px 50px rgba(12, 30, 54, 0.12);
  overflow: hidden;
  border: 1px solid #dadfe2;
}
.mv-mini-head {
  padding: 22px 22px 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.18) 0, transparent 45%),
    linear-gradient(120deg, #0c1e36 0%, #fe6c00 55%, #fd940f 100%);
}
.mv-mini-head h3 { font-size: 1.4rem; margin-bottom: 6px; }
.mv-mini-head p { color: #eef1f3; max-width: 56rem; }

.mv-mini-body { padding: 18px 22px 22px; }
.mv-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mv-mini-grid .full { grid-column: 1 / -1; }

.mv-field label {
  display: block;
  font-size: 0.82rem;
  color: #123f6b;
  margin-bottom: 6px;
  font-weight: 700;
}
.mv-field input,
.mv-field select,
.mv-field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #dadfe2;
  background: #ffffff;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #0c1e36;
  outline: none;
}
.mv-field textarea { min-height: 110px; resize: vertical; }
.mv-field input:focus,
.mv-field select:focus,
.mv-field textarea:focus {
  border-color: #dadfe2;
  box-shadow: 0 0 0 4px rgba(218, 223, 226, 0.35);
}

.mv-mini-actions {
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .mv-mini-grid { grid-template-columns: 1fr; }
}

/* Secciones extra (colores sólidos / degradados) */
.section-solid-ice { background: #eef1f3; }
.section-solid-mint { background: #ffffff; }

.section-gradient-slate {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.40) 0%, transparent 55%),
    linear-gradient(135deg, #0c1e36 0%, #0e3a65 45%, #123f6b 100%);
  color: #eef1f3;
}
.section-gradient-emerald {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #123f6b 0%, #123f6b 45%, #dadfe2 100%);
  color: #ffffff;
}
.section-gradient-rose {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.30) 0%, transparent 55%),
    linear-gradient(135deg, #0c1e36 0%, #0c1e36 42%, #fe6c00 100%);
  color: #ffffff;
}
/* ===========================================
   SHOP LAYOUT (producto tipo tienda + sidebar)
=========================================== */
.mv-shop-hero{
  padding: clamp(28px, 4vw, 56px) 0;
  background: radial-gradient(900px 420px at 20% 10%, rgba(254, 108, 0, .18), transparent 60%),
              radial-gradient(900px 520px at 80% 0%, rgba(12, 41, 74, .22), transparent 55%),
              linear-gradient(180deg, rgba(12, 30, 54, .96), rgba(0, 0, 0, .98));
}
.mv-shop-hero--alt{
  background: radial-gradient(900px 420px at 15% 10%, rgba(218, 223, 226, .20), transparent 60%),
              radial-gradient(900px 520px at 85% 0%, rgba(254, 108, 0, .14), transparent 55%),
              linear-gradient(180deg, rgba(12, 30, 54, .96), rgba(0, 0, 0, .98));
}
.mv-shop-hero-inner{ width:min(1200px, 92%); margin:0 auto; }

.mv-breadcrumb{
  display:flex; gap:10px; align-items:center;
  color: rgba(255, 255, 255, .82);
  font-size:.92rem;
  margin-bottom: 14px;
}
.mv-breadcrumb a{ color: rgba(255, 255, 255, .82); text-decoration:none; }
.mv-breadcrumb a:hover{ text-decoration:underline; }
.mv-breadcrumb span{ opacity:.7; }

.mv-shop-layout{
  display:grid;
  grid-template-columns: 1.1fr 1.2fr .7fr;
  gap: clamp(16px, 2.2vw, 28px);
  align-items:start;
}

.mv-shop-gallery, .mv-shop-info, .mv-shop-aside{
  border-radius: 18px;
}

.mv-shop-gallery{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 14px;
}
.mv-gallery-main{
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255, 255, 255, .05);
}
.mv-gallery-main img{
  width:100%; height: 360px; object-fit:cover; display:block;
}
.mv-gallery-thumbs{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mv-thumb{
  border-radius: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  cursor:pointer;
  overflow:hidden;
}
.mv-thumb img{ width:100%; height:72px; object-fit:cover; display:block; }
.mv-thumb.is-active{ outline: 2px solid rgba(254, 108, 0, .85); border-color: rgba(254, 108, 0, .55); }

.mv-shop-info{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 18px;
}
.mv-shop-badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.mv-badge-soft{
  font-size:.82rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .92);
}
.mv-shop-title{ color:#ffffff; margin: 6px 0 6px; font-size: clamp(28px, 3.4vw, 40px); line-height:1.05; }
.mv-shop-rating{ display:flex; gap:10px; align-items:center; color: rgba(255, 255, 255, .86); margin-bottom: 10px; }
.mv-stars{ letter-spacing: 2px; }
.mv-rating-note{ font-size:.92rem; opacity:.9; }

.mv-shop-price{ display:flex; gap:10px; align-items:baseline; margin: 4px 0 10px; }
.mv-price-range{ color:#ffffff; font-weight:800; font-size: 1.4rem; }
.mv-price-tax{ color: rgba(255, 255, 255, .78); font-size:.92rem; }

.mv-shop-desc{ color: rgba(255, 255, 255, .86); margin: 0 0 10px; }
.mv-shop-points{
  margin: 0 0 12px; padding-left: 18px;
  color: rgba(255, 255, 255, .86);
}
.mv-shop-points li{ margin: 6px 0; }

.mv-shop-variant{ margin: 10px 0 12px; }
.mv-shop-variant label{ color: rgba(255, 255, 255, .86); font-weight:600; display:block; margin-bottom:6px; }
.mv-shop-variant select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
}

.mv-shop-buy{
  display:flex; gap:12px; align-items:center;
  margin: 10px 0 12px;
}
.mv-qty{
  display:flex; align-items:center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  overflow:hidden;
}
.mv-qty-btn{
  width:40px; height:44px; border:0;
  background: transparent;
  color: rgba(255, 255, 255, .92);
  font-size: 18px;
  cursor:pointer;
}
.mv-qty input{
  width:58px; height:44px;
  border:0;
  text-align:center;
  background: transparent;
  color: rgba(255, 255, 255, .92);
  font-weight:700;
  outline:none;
}

.mv-shop-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.mv-trust-mini{
  display:flex; gap:14px; flex-wrap:wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
}

/* Aside */
.mv-shop-aside{
  position: sticky;
  top: 90px;
}
.mv-aside-card{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 16px;
}
.mv-aside-card h3{ color:#ffffff; margin: 0 0 10px; font-size: 1.05rem; }
.mv-aside-nav{ display:flex; flex-direction:column; gap: 8px; }
.mv-aside-nav a{
  text-decoration:none;
  color: rgba(255, 255, 255, .88);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}
.mv-aside-nav a:hover{ background: rgba(255, 255, 255, .08); }
.mv-aside-nav a.is-active{
  border-color: rgba(254, 108, 0, .55);
  background: rgba(254, 108, 0, .18);
}
.mv-aside-divider{
  height:1px;
  background: rgba(255, 255, 255, .12);
  margin: 12px 0;
}

/* Tabs inside content */
.mv-shop-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin: 0 auto 16px;
}
.mv-tab{
  text-decoration:none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12, 30, 54, .12);
  background: rgba(12, 30, 54, .04);
  color: rgba(12, 30, 54, .86);
  font-weight: 700;
  font-size: .92rem;
}
.mv-tab.is-active{ border-color: rgba(254, 108, 0, .45); background: rgba(254, 108, 0, .12); }

.mv-shop-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.mv-shop-cta-inline{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-end;
  margin-top: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .mv-shop-layout{ grid-template-columns: 1fr; }
  .mv-shop-aside{ position: static; }
  .mv-gallery-main img{ height: 300px; }
  .mv-shop-grid{ grid-template-columns: 1fr; }
  .mv-gallery-thumbs{ grid-template-columns: repeat(4, 1fr); }
}
/* ===========================================
   SHOP LAYOUT · LIGHT (fondo blanco, bajo contraste)
   - Sidebar izquierda
   - Galería centro
   - Ficha derecha
=========================================== */

.mv-shop-hero--light{
  padding: clamp(22px, 3.2vw, 44px) 0;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(254, 108, 0, .10), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(12, 41, 74, .10), transparent 55%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
.mv-shop-hero--altlight{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(218, 223, 226, .12), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(254, 108, 0, .08), transparent 55%),
    linear-gradient(180deg, #ffffff, #ffffff);
}

.mv-shop-hero-inner{ width:min(1240px, 92%); margin:0 auto; }

/* Breadcrumb en claro */
.mv-breadcrumb--dark{
  display:flex; gap:10px; align-items:center;
  color: rgba(12, 30, 54, .72);
  font-size:.92rem;
  margin-bottom: 14px;
}
.mv-breadcrumb--dark a{ color: rgba(12, 30, 54, .78); text-decoration:none; }
.mv-breadcrumb--dark a:hover{ text-decoration:underline; }
.mv-breadcrumb--dark span{ opacity:.7; }

/* Layout: sidebar LEFT */
.mv-shop-layout--leftnav{
  display:grid;
  grid-template-columns: .72fr 1.05fr 1.23fr;
  gap: clamp(14px, 2vw, 22px);
  align-items:start;
}

/* Cards tipo tienda (suaves, no oscuras) */
.mv-shop-gallery--light,
.mv-shop-info--light,
.mv-aside-card--light{
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(12, 30, 54, .10);
  box-shadow: 0 10px 30px rgba(12, 30, 54, .06);
}

.mv-shop-gallery--light{ padding: 14px; }
.mv-gallery-main--light{ border-radius: 14px; overflow:hidden; background: #eef1f3; }
.mv-gallery-main--light img{ width:100%; height: 360px; object-fit:cover; display:block; }

.mv-gallery-thumbs{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mv-thumb{
  border-radius: 12px;
  padding: 0;
  border: 1px solid rgba(12, 30, 54, .12);
  background: #ffffff;
  cursor:pointer;
  overflow:hidden;
}
.mv-thumb img{ width:100%; height:72px; object-fit:cover; display:block; }
.mv-thumb.is-active{
  outline: 2px solid rgba(254, 108, 0, .75);
  border-color: rgba(254, 108, 0, .55);
}

.mv-shop-info--light{ padding: 18px; }

/* Badges */
.mv-shop-badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.mv-badge-soft--light{
  font-size:.82rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 30, 54, .04);
  border: 1px solid rgba(12, 30, 54, .10);
  color: rgba(12, 30, 54, .80);
}

/* Texto principal */
.mv-shop-title--dark{
  color:#0c1e36;
  margin: 6px 0 6px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height:1.05;
}
.mv-accent{ color: var(--mv-accent, #fe6c00); }

.mv-shop-rating--dark{ display:flex; gap:10px; align-items:center; color: rgba(12, 30, 54, .78); margin-bottom: 10px; }
.mv-rating-note{ font-size:.92rem; opacity:.9; }

.mv-shop-price--dark{ display:flex; gap:10px; align-items:baseline; margin: 4px 0 10px; }
.mv-price-range{ color:#0c1e36; font-weight:800; font-size: 1.4rem; }
.mv-price-tax{ color: rgba(12, 30, 54, .60); font-size:.92rem; }

.mv-shop-desc--dark{ color: rgba(12, 30, 54, .78); margin: 0 0 10px; }
.mv-shop-points--dark{ margin: 0 0 12px; padding-left: 18px; color: rgba(12, 30, 54, .74); }
.mv-shop-points--dark li{ margin: 6px 0; }

/* Select */
.mv-shop-variant{ margin: 10px 0 12px; }
.mv-shop-variant label{ color: rgba(12, 30, 54, .78); font-weight:700; display:block; margin-bottom:6px; }
.mv-shop-variant select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12, 30, 54, .14);
  background: #ffffff;
  color: rgba(12, 30, 54, .90);
}

/* Compra */
.mv-shop-buy{ display:flex; gap:12px; align-items:center; margin: 10px 0 12px; }
.mv-qty--light{
  display:flex; align-items:center;
  background: #ffffff;
  border: 1px solid rgba(12, 30, 54, .14);
  border-radius: 14px;
  overflow:hidden;
}
.mv-qty-btn{
  width:40px; height:44px; border:0;
  background: transparent;
  color: rgba(12, 30, 54, .86);
  font-size: 18px;
  cursor:pointer;
}
.mv-qty input{
  width:58px; height:44px;
  border:0;
  text-align:center;
  background: transparent;
  color: rgba(12, 30, 54, .90);
  font-weight:800;
  outline:none;
}

.mv-shop-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }

.mv-trust-mini--light{
  display:flex; gap:14px; flex-wrap:wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(12, 30, 54, .10);
  color: rgba(12, 30, 54, .72);
  font-size: .92rem;
}

/* Aside sticky */
.mv-shop-aside{ position: sticky; top: 90px; }
.mv-aside-card--light{ padding: 16px; }
.mv-aside-title{ margin:0 0 10px; font-size: 1.05rem; color:#0c1e36; }

.mv-aside-nav--light{ display:flex; flex-direction:column; gap: 8px; }
.mv-aside-nav--light a{
  text-decoration:none;
  color: rgba(12, 30, 54, .85);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12, 30, 54, .10);
  background: rgba(12, 30, 54, .02);
}
.mv-aside-nav--light a:hover{ background: rgba(12, 30, 54, .04); }
.mv-aside-nav--light a.is-active{
  border-color: rgba(254, 108, 0, .45);
  background: rgba(254, 108, 0, .10);
}

.mv-aside-divider--light{
  height:1px;
  background: rgba(12, 30, 54, .10);
  margin: 12px 0;
}
.mv-aside-actions{ display:flex; flex-direction:column; gap:8px; }

/* Tabs */
.mv-shop-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin: 0 auto 16px;
}
.mv-tab{
  text-decoration:none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12, 30, 54, .12);
  background: rgba(12, 30, 54, .03);
  color: rgba(12, 30, 54, .86);
  font-weight: 800;
  font-size: .92rem;
}
.mv-tab.is-active{ border-color: rgba(254, 108, 0, .40); background: rgba(254, 108, 0, .10); }

/* Grid de cards */
.mv-shop-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.mv-shop-cta-inline{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-end;
  margin-top: 14px;
}

/* Responsive */
@media (max-width: 1050px){
  .mv-shop-layout--leftnav{ grid-template-columns: 1fr; }
  .mv-shop-aside{ position: static; }
  .mv-gallery-main--light img{ height: 300px; }
  .mv-shop-grid{ grid-template-columns: 1fr; }
}
/* ===========================================
   MV · QuickNav compacta (panel angosto)
=========================================== */
.mv-shop-layout--leftnav{
  /* Antes: fracciones. Ahora: sidebar con ancho controlado */
  grid-template-columns: clamp(190px, 18vw, 240px) 1.05fr 1.23fr;
}

.mv-shop-aside{
  max-width: 240px;
}

.mv-aside-card--light{
  padding: 12px;
  border-radius: 16px;
}

.mv-aside-title{
  font-size: .98rem;
  margin-bottom: 8px;
}

.mv-aside-nav--light{
  gap: 6px;
}

.mv-aside-nav--light a{
  padding: 9px 10px;
  border-radius: 12px;
  font-size: .92rem;
}

/* Responsive: sidebar arriba en pantallas medianas/pequeñas */
@media (max-width: 1050px){
  .mv-shop-layout--leftnav{
    grid-template-columns: 1fr;
  }
  .mv-shop-aside{
    max-width: none;
  }
}

/* ==========================================================
   CARDS LIGHT (portadas desde macvasquez.html)
   - Scoped a páginas claras: .page-payphone
   - Evita conflicto con .card oscuro global
========================================================== */

/* Variables de apoyo (compatibles con tu marca) */
:root{
  --mv-card-light-bg: #ffffff;
  --mv-card-light-border: rgba(12, 30, 54, 0.10);
  --mv-card-light-shadow: 0 12px 40px rgba(0, 0, 0, .08);
  --mv-card-light-radius: 18px;

  /* “Brand” similar a macvasquez.html */
  --mv-brand: #123f6b;
  --mv-brand-2: #123f6b;

  /* Gradientes suaves como en macvasquez.html */
  --mv-grad: linear-gradient(135deg, #123f6b 0%, #dadfe2 100%);
  --mv-svc1: #123f6b;
  --mv-svc2: #fe6c00;
  --mv-grad-svc: linear-gradient(135deg, var(--mv-svc1) 0%, var(--mv-svc2) 100%);
}

/* Card base (light) */
.page-payphone .card.mv-card,
.page-payphone .card.card-light,
.page-payphone .card{
  background: var(--mv-card-light-bg);
  border: 1px solid var(--mv-card-light-border);
  border-radius: var(--mv-card-light-radius);
  padding: 18px;
  box-shadow: var(--mv-card-light-shadow);
  color: var(--mv-text);
}

/* Contenido “stack” */
.page-payphone .card .stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:1;
}

/* Badge */
.page-payphone .badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#eef1f3;
  border:1px solid #dadfe2;
  color:#123f6b;
  font-weight:700;
  font-size:.75rem;
}

/* Emoji spacing */
.page-payphone .emoji{ margin-right:8px; }

/* Chip de precio */
.page-payphone .price-card{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px dashed #dadfe2;
  border-radius:12px;
  background:#eef1f3;
  color:#0e3a65;
  font-weight:800;
  margin-left:8px;
  position:relative;
}
.page-payphone .price-card::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translate(-40%, -50%) rotate(45deg);
  width:10px;
  height:10px;
  background:#eef1f3;
  border-left:1px dashed #dadfe2;
  border-top:1px dashed #dadfe2;
}

/* Tag de descarga */
.page-payphone .download-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:#eef1f3;
  border:1px solid #dadfe2;
  color:#0e3a65;
  font-weight:700;
  text-decoration:none;
}
.page-payphone .download-tag:hover{ background:#dadfe2; }
.page-payphone .download-tag svg{ width:16px; height:16px; }

/* ==========================================================
   VARIANTES: Servicios (card.service dentro de .services-grid)
========================================================== */
.page-payphone .services-grid .card.service{
  position:relative;
  overflow:hidden;
}
.page-payphone .services-grid .card.service::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: var(--mv-grad-svc);
  opacity:.12;
}
.page-payphone .services-grid .card.service .tag{
  display:inline-block;
  background: var(--mv-grad-svc);
  color:#ffffff;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.page-payphone .services-grid .card.service h3{
  display:flex;
  align-items:center;
  margin:4px 0;
}
.page-payphone .services-grid .card.service ul{
  margin:0 0 10px 18px;
  color:#123f6b;
}
.page-payphone .services-grid .card.service .btn{
  background: var(--mv-svc1);
  color:#ffffff;
  border-color: var(--mv-svc1);
}

/* ==========================================================
   VARIANTES: Productos (card.product dentro de .products-grid)
========================================================== */
.page-payphone .products-grid .card.product{
  position:relative;
  overflow:hidden;
}
.page-payphone .products-grid .card.product::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: var(--mv-grad);
  opacity:.12;
}
.page-payphone .products-grid .card.product .tag{
  display:inline-block;
  background: var(--mv-grad);
  color:#ffffff;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.page-payphone .products-grid .card.product h3{
  display:flex;
  align-items:center;
  margin:4px 0;
}
.page-payphone .products-grid .card.product ul{
  margin:0 0 10px 18px;
  color:#123f6b;
}
.page-payphone .products-grid .card.product .btn{
  background: var(--mv-brand);
  color:#ffffff;
  border-color: var(--mv-brand);
}

/* Hover suave (solo light pages) */
.page-payphone .card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-payphone .card:hover{
  transform: translateY(-6px);
  border-color: rgba(18, 63, 107, .35);
  box-shadow: 0 18px 55px rgba(18, 63, 107, .18);
}
/* ==========================================================
   HOTFIX FINAL (PEGAR AL FINAL)
   - Cierra CSS truncado
   - Unifica nav-mobile overlay
   - Evita conflictos input-field (checkout vs contacto)
========================================================== */

/* ==========
   1) FIX: CIERRE DE "CARDS LIGHT" TRUNCADO
========== */

/* Servicios: card.service dentro de .services-grid */
.page-payphone .services-grid .card.service{
  position:relative;
  overflow:hidden;
  background: var(--mv-card-light-bg);
  border: 1px solid var(--mv-card-light-border);
  border-radius: var(--mv-card-light-radius);
  box-shadow: var(--mv-card-light-shadow);
}

.page-payphone .services-grid .card.service::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: var(--mv-grad-svc);
  opacity:.12;
  pointer-events:none;
}

.page-payphone .services-grid .card.service .stack,
.page-payphone .services-grid .card.service > *{
  position:relative;
  z-index:1;
}

.page-payphone .services-grid .card.service .tag{
  display:inline-block;
  background: var(--mv-grad-svc);
  color:#ffffff;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
  font-size:.78rem;
}

.page-payphone .services-grid .card.service h3{
  color:#0c1e36;
  font-size:1.08rem;
  margin:0 0 6px;
  font-weight:900;
  letter-spacing:-.2px;
}

.page-payphone .services-grid .card.service p{
  color:rgba(12, 30, 54, .72);
  margin:0 0 10px;
  line-height:1.5;
  font-size:.94rem;
}

.page-payphone .services-grid .card.service:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(12, 30, 54, .14);
  border-color: rgba(254, 108, 0, .35);
}

/* Productos: card.product dentro de .products-grid (si existe) */
.page-payphone .products-grid .card.product{
  position:relative;
  overflow:hidden;
}

.page-payphone .products-grid .card.product::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: var(--mv-grad);
  opacity:.10;
  pointer-events:none;
}

.page-payphone .products-grid .card.product > *{
  position:relative;
  z-index:1;
}

/* ==========
   2) FIX: NAV MOBILE OVERLAY (UNIFICADO)
   - Respeta .open y .is-open
   - No depende del orden de tus definiciones previas
========== */

.nav-mobile{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* Panel lateral */
.nav-mobile .nav-mobile-inner{
  position: absolute;
  top: 0;
  right: 0;
  width: min(92vw, 360px);
  height: 100%;
  background: #ffffff;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  box-shadow: -18px 0 42px rgba(12, 30, 54, 0.22);
}

/* Abierto (dos clases soportadas) */
.nav-mobile.is-open,
.nav-mobile.open{
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile.is-open .nav-mobile-inner,
.nav-mobile.open .nav-mobile-inner{
  transform: translateX(0);
}

/* Colores correctos si el nav está scrolled */
.nav-payphone.scrolled ~ .nav-mobile{
  background: rgba(255, 255, 255, 0.6);
}

.nav-payphone.scrolled ~ .nav-mobile .nav-mobile-inner{
  background:#ffffff;
}

/* Links del panel */
.nav-mobile .nav-mobile-inner a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(12, 30, 54, .86);
  border: 1px solid rgba(12, 30, 54, .10);
  background: rgba(12, 30, 54, .02);
  font-weight: 700;
}

.nav-mobile .nav-mobile-inner a:hover{
  background: rgba(12, 30, 54, .04);
}

.nav-payphone.scrolled ~ .nav-mobile .nav-mobile-inner a:hover{
  color: var(--mv-orange);
}

/* Desktop: oculto */
@media (min-width: 901px){
  .nav-mobile{ display:none !important; }
}

/* ==========
   3) FIX: INPUTS – EVITAR PISADAS ENTRE CONTACTO Y CHECKOUT
   - Deja #contacto-form como “fuente de verdad”
   - Checkout usa su propio scope
========== */

/* Si existe tu bloque viejo de checkout con .input-field global,
   esto lo neutraliza SOLO en checkout (no toca contacto). */

#checkout .input-field,
.checkout-layout .input-field,
.billing-form .input-field,
.summary-card .input-field{
  width: 100%;
  border-radius: 14px;
  border: 1px solid #dadfe2;
  background: #ffffff;
  color: #0c1e36;

  padding: .82rem .95rem;
  font-size: .95rem;
  line-height: 1.2;

  outline: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

#checkout .input-field:focus,
.checkout-layout .input-field:focus,
.billing-form .input-field:focus,
.summary-card .input-field:focus{
  background: #ffffff;
  border-color: rgba(18, 63, 107, .65);
  box-shadow: 0 0 0 4px rgba(18, 63, 107, .14);
  transform: translateY(-1px);
}

/* ==========
   4) FIX: PÁGINAS CLARAS – asegurar que la card oscura global NO gane
   (solo para .page-payphone)
========== */
.page-payphone .card:not(.product-card):not(.cob-price){
  background: #ffffff;
  color: var(--mv-text);
  border: 1px solid rgba(12, 30, 54, 0.10);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}

/* (Opcional) si quieres que la tipografía se lea más fuerte en cards light */
.page-payphone .card-title,
.page-payphone .card h3{
  color:#0c1e36;
  font-weight: 900;
}

.page-payphone .card-body,
.page-payphone .card p{
  color: rgba(12, 30, 54, .72);
}
/* ==========================================================
   OVERRIDE: cards sin barra superior + tags sin degradado
   + cards sin relleno degradado
   (Pegar al final de styles.css)
========================================================== */

/* 1) Quitar la "barra superior" (si la haces con ::after o ::before) */
.page-payphone .services-grid .card.service::before,
.page-payphone .services-grid .card.service::after{
  content: none !important;
  display: none !important;
}

/* Si tu barra superior es un elemento real (ej .top-bar dentro de la card) */
.page-payphone .services-grid .card.service .top-bar,
.page-payphone .services-grid .card.service .card-topbar{
  display: none !important;
}

/* 2) Card sin relleno degradado: fondo sólido */
.page-payphone .services-grid .card.service{
  background: #ffffff !important;
  border: 1px solid rgba(12, 30, 54, .14) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .10) !important;
}

/* Por si el degradado venía por un overlay interno */
.page-payphone .services-grid .card.service > .overlay,
.page-payphone .services-grid .card.service .bg-grad,
.page-payphone .services-grid .card.service .card-bg{
  display: none !important;
}

/* 3) Tag sin degradado (badge "Qué hacemos") */
.page-payphone .services-grid .card.service .tag{
  background: #0e3a65 !important;     /* color sólido (ajústalo a tu gusto) */
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: none !important;
}

/* (Opcional) si quieres la tag con borde y fondo claro (en vez de azul) */
/*
.page-payphone .services-grid .card.service .tag{
  background: #eef1f3 !important;
  color: #0c1e36 !important;
  border: 1px solid rgba(12, 30, 54, .18) !important;
}
*/







/* ===========================================
   UTILIDADES CENTRALIZADAS
=========================================== */
.no-scroll {
  overflow: hidden;
}

.is-hidden {
  display: none !important;
}

.u-text-center { text-align: center; }
.u-text-white { color: var(--mv-white); }
.u-text-softlight { color: var(--mv-gray-100); }
.u-text-ice { color: var(--mv-gray-100); }
.u-text-ink { color: var(--mv-navy-950); }
.u-text-title-dark { color: var(--mv-navy-950); }
.u-text-slate { color: var(--mv-navy-800); }
.u-text-pale { color: var(--mv-gray-100); }
.u-text-peach { color: var(--mv-orange-soft); }
.u-text-peach-soft { color: var(--mv-gray-100); }
.u-text-mint { color: var(--mv-gray-100); }
.u-text-mint-soft { color: var(--mv-gray-100); }
.u-text-warm-dark { color: var(--mv-navy-900); }

.u-copy-42-left {
  text-align: left;
  max-width: 42rem;
}

.u-copy-28-left {
  text-align: left;
  max-width: 28rem;
}

.u-justify-center { justify-content: center; }
.u-pt-32 { padding-top: 3.2rem; }
.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-12 { margin-top: 12px; }
.u-mt-075 { margin-top: 0.75rem; }
.u-minh-360 { min-height: 360px; }
.u-maxw-page { max-width: var(--max-width); }
.u-overflow-auto { overflow: auto; }

.footer-note {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.84);
}

.checkout-empty {
  text-align: center;
  color: var(--mv-navy-800);
  padding: 1.2rem;
}

.checkout-product-name {
  font-weight: 700;
  color: var(--mv-navy-950);
}

.checkout-product-meta,
.checkout-product-note {
  font-size: 0.86rem;
  margin-top: 0.2rem;
  color: var(--mv-navy-800);
}

.checkout-actions-cell {
  white-space: nowrap;
}

.cart-action-btn {
  border: 1px solid rgba(12, 41, 74, 0.16);
  background: var(--mv-white);
  color: var(--mv-navy-950);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cart-action-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(254, 108, 0, 0.35);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.cart-action-btn-remove {
  color: var(--mv-orange);
}

.mv-alert.is-hidden {
  display: none;
}

.hero-bg-fondo { --hero-img: url("https://assets.macvasquez.com/img/hero/fondo.jpg"); }
.hero-bg-cobranza { --hero-img: url("https://assets.macvasquez.com/img/hero/cobranza.png"); }
.hero-bg-email {
  --hero-img: linear-gradient(135deg, rgba(12, 41, 74, 0.88), rgba(14, 58, 101, 0.52)), url("https://images.unsplash.com/photo-1557200134-90327ee9fafa?auto=format&fit=crop&w=1600&q=70");
}
.hero-bg-whatsapp {
  --hero-img: linear-gradient(135deg, rgba(12, 30, 54, 0.90), rgba(254, 108, 0, 0.20)), url("https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1600&q=70");
}

.product-bg-cobranza-ext { --product-img: url("https://i.ibb.co/1ffSSLVx/cobranza.jpg"); }
.product-bg-test { --product-img: url("https://assets.macvasquez.com/img/hero/test.png"); }
.product-bg-cobranza { --product-img: url("https://assets.macvasquez.com/img/hero/cobranza.png"); }
.product-bg-auto-whatsapp { --product-img: url("https://assets.macvasquez.com/img/hero/auto-whatsapp.jpg"); }
.product-bg-consulta-personas { --product-img: url("https://assets.macvasquez.com/img/hero/consulta-personas.jpg"); }
.product-bg-fondo { --product-img: url("https://assets.macvasquez.com/img/hero/fondo.jpg"); }

/* ===========================================
   CONSULTAS EN LÍNEA / PANEL ADMIN
=========================================== */
.kicker-on-dark { color: #ffe7d6; }
.heading-on-dark, .subtitle-on-dark, .left-on-dark { color: #ffffff; text-align: left; }
.left-on-dark { max-width: 42rem; }
.mv-consultas-hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
}
.mv-status-shell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
.mv-user-badge {
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(10px);
}
.mv-auth-grid,
.mv-admin-layout,
.mv-dashboard-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.mv-dashboard-shell {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
}
.mv-panel-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.09);
  border: 1px solid #d8e6f5;
  padding: 1.35rem;
}
.mv-panel-card.grow { min-width: 0; }
.mv-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.mv-panel-head.compact { margin-bottom: 1rem; }
.mv-panel-head .small { font-size: 1.35rem; }
.mv-inline-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(26,20,70,0.08), rgba(255,107,0,0.16));
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-inline-icon.large { width: 54px; height: 54px; }
.mv-inline-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--mv-primary);
}
.mv-form-grid,
.mv-query-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}
.mv-query-grid { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: end; }
.mv-field {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  min-width: 0;
}
.mv-field.inline { flex-direction: row; align-items: center; gap: 0.7rem; }
.mv-field span {
  font-size: 0.88rem;
  color: #475569;
  font-weight: 600;
}
.mv-field input,
.mv-field select {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #cfe0f2;
  background: #f8fbff;
  padding: 0.8rem 0.95rem;
  color: #0f172a;
  outline: none;
}
.mv-field input:focus,
.mv-field select:focus {
  border-color: var(--mv-orange);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}
.mv-google-wrap { margin-top: 1rem; }
.mv-help-text {
  margin-top: 0.4rem;
  color: #64748b;
  font-size: 0.9rem;
}
.mv-summary-grid {
  display: grid;
  gap: 0.8rem;
}
.mv-summary-item {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: #f7fafc;
  border: 1px solid #e3edf7;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mv-summary-item span { color: #64748b; font-size: 0.83rem; }
.mv-summary-item strong { color: #0f172a; font-size: 1.02rem; }
.mv-summary-item.accent {
  background: linear-gradient(135deg, rgba(255,107,0,0.12), rgba(255,179,71,0.2));
  border-color: rgba(255,107,0,0.24);
}
.mv-recharge-box {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2ebf5;
  display: grid;
  gap: 0.85rem;
}
.mv-results-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.mv-result-chip {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: #edf5ff;
  color: #13507a;
  font-weight: 700;
}
.mv-result-highlight {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1rem;
}
.mv-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.mv-field-card {
  background: #f8fbff;
  border: 1px solid #dfeaf5;
  border-radius: 18px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mv-field-card span {
  font-size: 0.82rem;
  color: #64748b;
}
.mv-field-card strong {
  color: #0f172a;
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
}

.mv-modal[hidden] {
  display: none !important;
}
.mv-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 26, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 60;
}
.mv-modal-card {
  width: min(860px, 100%);
  background: #fff;
  color: #0f172a;
  border-radius: 24px;
  padding: 1.4rem;
  position: relative;
  box-shadow: 0 28px 70px rgba(0,0,0,0.35);
}
.mv-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: #eef4fb;
  cursor: pointer;
  font-size: 1.2rem;
}
.mv-recharge-summary {
  margin: 0.8rem 0 1rem;
  color: #334155;
  font-weight: 600;
}
#rechargeFrame {
  width: 100%;
  min-height: 560px;
  border: 1px solid #d9e5f1;
  border-radius: 18px;
  background: #fff;
}
.mv-table-wrap { overflow: auto; }
.mv-table {
  width: 100%;
  border-collapse: collapse;
}
.mv-table th,
.mv-table td {
  text-align: left;
  padding: 0.85rem 0.8rem;
  border-bottom: 1px solid #e5edf6;
  font-size: 0.92rem;
}
.mv-table th {
  color: #475569;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mv-admin-history {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  max-height: 380px;
  overflow: auto;
}
.mv-history-item {
  background: #f8fbff;
  border: 1px solid #dfe9f5;
  border-radius: 16px;
  padding: 0.85rem;
  display: grid;
  gap: 0.25rem;
}
.mv-history-item strong { color: #0f172a; }
.mv-history-item span,
.mv-history-item small { color: #64748b; }
.mv-sticky-summary {
  position: sticky;
  top: 100px;
}
@media (max-width: 1024px) {
  .mv-dashboard-shell,
  .mv-auth-grid,
  .mv-admin-layout { grid-template-columns: 1fr; }
  .mv-sticky-summary { position: static; }
}
@media (max-width: 720px) {
  .mv-consultas-hero,
  .mv-results-toolbar { flex-direction: column; align-items: flex-start; }
  .mv-status-shell { align-items: flex-start; }
  .mv-form-grid,
  .mv-query-grid,
  .mv-result-grid { grid-template-columns: 1fr; }
  #rechargeFrame { min-height: 500px; }
}


/* =============================
   ADMIN CONSULTAS
============================= */
.mv-admin-layout-advanced {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
  align-items: start;
}
.mv-admin-table-head {
  align-items: flex-start;
}
.mv-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.mv-admin-search {
  min-width: min(320px, 100%);
}
.mv-admin-search input {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #cfe0f2;
  background: #f8fbff;
  padding: 0.8rem 0.95rem;
  color: #0f172a;
  outline: none;
}
.mv-admin-search input:focus {
  border-color: var(--mv-orange);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}
.mv-admin-feedback {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid #dbe7f3;
  background: #f8fbff;
  color: #0f172a;
  font-weight: 600;
}
.mv-admin-feedback.is-success {
  background: rgba(28, 138, 91, 0.08);
  border-color: rgba(28, 138, 91, 0.18);
  color: #166534;
}
.mv-admin-feedback.is-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.16);
  color: #b91c1c;
}
.mv-admin-side {
  display: grid;
  gap: 1.1rem;
}
.mv-admin-statusbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.mv-form-grid-admin {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mv-admin-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.mv-admin-actions-grid.quota {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.btn-danger-soft {
  border-color: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.06);
}
.btn-danger-soft:hover {
  background: rgba(220, 38, 38, 0.11);
}
.mv-admin-quota-box,
.mv-admin-history-shell {
  display: grid;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid #e2ebf5;
}
.mv-admin-history {
  min-height: 160px;
}
.mv-history-empty,
.mv-table-empty {
  color: #64748b;
  font-weight: 500;
}
.mv-badge-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #edf5ff;
  color: #123f6b;
  font-weight: 800;
}
.mv-row-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.btn-table-action {
  min-height: 36px;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
}
.mv-admin-row {
  cursor: pointer;
}
.mv-admin-row.is-selected {
  background: rgba(18, 63, 107, 0.05);
}
.mv-admin-row:hover {
  background: rgba(18, 63, 107, 0.04);
}
@media (max-width: 1180px) {
  .mv-admin-layout-advanced {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .mv-admin-toolbar,
  .mv-admin-statusbar,
  .mv-form-grid-admin,
  .mv-admin-actions-grid,
  .mv-admin-actions-grid.quota {
    grid-template-columns: 1fr;
  }
  .mv-admin-search {
    min-width: 100%;
  }
}

/* ==========================================================
   PRESENTACIÓN / COBRANZA IMPRESA · ESTILOS AISLADOS
   - Agregado sobre styles_original.css
   - No modifica estilos globales del sitio
   - Solo aplica a páginas con .print-page / .proposal-print-body
========================================================== */

@media print {
  @page { size: A4; margin: 0; }

  body:has(.print-page),
  body.proposal-print-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  .no-print { display: none !important; }
  .page-break { page-break-before: always; }

  .print-page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm 22mm;
    box-sizing: border-box;
  }
}

@media screen {
  .print-page {
    max-width: 210mm;
    min-height: 297mm;
    margin: 20px auto;
    padding: 20mm 22mm;
    box-sizing: border-box;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
  }

  body:has(.print-page),
  body.proposal-print-body {
    background: #e5e7eb !important;
    color: #0f172a !important;
  }
}

.print-page,
.print-page * {
  box-sizing: border-box;
}

.print-page {
  font-family: 'Roboto', sans-serif;
  color: #374151;
}

.print-page .font-display {
  font-family: 'Roboto', sans-serif;
}

.print-page .accent-bar {
  width: 60px;
  height: 4px;
  background: #003060;
}

.print-page .accent-bar-gold {
  width: 60px;
  height: 4px;
  background: #FF8C00;
}

.print-page .stage-card {
  border-left: 4px solid #003060;
  background: #f7f9fc;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.print-page .stage-card h4 {
  color: #003060;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.print-page .stage-card p {
  color: #31475C;
  font-size: 12.5px;
  line-height: 1.5;
}

.print-page .method-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.print-page .method-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #FF8C00;
  margin-top: 6px;
}

.print-page .section-title {
  font-family: 'Playfair Display', 'Roboto', sans-serif;
  color: #003060;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.print-page .tool-badge {
  display: inline-block;
  background: #003060;
  color: #ffffff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 3px 2px;
}

.print-page.cover-gradient,
.print-page .cover-gradient {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
}

.print-page .gold-line {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #FF8C00, #FF9E35);
}

.print-page .stat-box {
  text-align: center;
  padding: 12px;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
}

.print-page .stat-box .num {
  font-family: 'Playfair Display', 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #003060;
}

.print-page .stat-box .lbl {
  font-size: 11px;
  color: #5A6F84;
  margin-top: 2px;
}

.print-page .timeline-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
  background: #FF8C00;
  border: 3px solid #FF8C00;
}

.print-page .footer-bar {
  background: #003060;
  color: #ffffff;
  padding: 10px 22mm;
  font-size: 10px;
  text-align: center;
  position: relative;
  bottom: 0;
}

/* Portada gris clara para bajo consumo de tinta */
.print-page.page-break.cob-inline-003,
.proposal-print-body .proposal-cover-page {
  background: #f4f5f7 !important;
  color: #003060 !important;
  position: relative;
  overflow: hidden;
}

.print-page.page-break.cob-inline-003::before,
.proposal-print-body .proposal-cover-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(145deg, #f8f9fb 0%, #eef1f5 100%);
  pointer-events: none;
}

.print-page.page-break.cob-inline-003 .cob-inline-004,
.proposal-print-body .proposal-cover-page .cob-inline-004 {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.print-page.page-break.cob-inline-003 .cob-inline-007,
.print-page.page-break.cob-inline-003 #cover-title,
.proposal-print-body .proposal-cover-page .cob-inline-007,
.proposal-print-body .proposal-cover-page #cover-title {
  color: #003060 !important;
  text-shadow: none !important;
}

.print-page.page-break.cob-inline-003 .cob-inline-008,
.print-page.page-break.cob-inline-003 #cover-subtitle,
.proposal-print-body .proposal-cover-page .cob-inline-008,
.proposal-print-body .proposal-cover-page #cover-subtitle {
  color: #314b66 !important;
}

.print-page.page-break.cob-inline-003 .cob-inline-010,
.print-page.page-break.cob-inline-003 #cover-date,
.proposal-print-body .proposal-cover-page .cob-inline-010,
.proposal-print-body .proposal-cover-page #cover-date {
  color: #0b3d6b !important;
}

@media print {
  .print-page.page-break.cob-inline-003,
  .proposal-print-body .proposal-cover-page {
    background: #f4f5f7 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-page.page-break.cob-inline-003::before,
  .proposal-print-body .proposal-cover-page::before {
    background: #f4f5f7 !important;
  }
}

/* ==========================================================
   COBRANZA.HTML · ESTILOS INLINE MIGRADOS A CLASES
========================================================== */

.is-hidden { display: none !important; }

.cob-inline-001 { background:#0B3D6B; }
.cob-inline-002 { width:18px;height:18px; }
.cob-inline-003 { padding:0; position:relative; overflow:hidden; background:#f4f5f7 !important; color:#003060 !important; }
.cob-inline-004 { padding: 22mm; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:relative; z-index:10; height:100%; }
.cob-inline-005 { width:500px; margin-bottom:50px; }
.cob-inline-006 { width:80px; margin:0 auto 32px; background:linear-gradient(90deg, #FF8C00, #FF9E35); }
.cob-inline-007 { font-size:42px; font-weight:700; line-height:1.2; margin-bottom:18px; color:#003060; }
.cob-inline-008 { font-size:17px; max-width:420px; line-height:1.7; color:#314B66; margin-bottom:32px; }
.cob-inline-009 { display:flex; gap:12px; align-items:center; justify-content:center; }
.cob-inline-010 { font-size:28px; font-weight:700; color:#0B3D6B; }
.cob-inline-011 { position:relative; overflow:hidden; }
.cob-inline-012 { position:absolute;top:50%;right:-120px;transform:translateY(-50%);width:600px;height:600px;opacity:0.03;pointer-events:none; }
.cob-inline-013 { position:relative; z-index:10; }
.cob-inline-014 { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; border-bottom:2px solid #e5e7eb; padding-bottom:14px; }
.cob-inline-015 { height:28px; }
.cob-inline-016 { color:#9ca3af; font-size:11px; }
.cob-inline-017 { margin-bottom:16px; }
.cob-inline-018 { font-size:13px; line-height:1.7; color:#374151; margin-bottom:16px; }
.cob-inline-019 { color:#0B3D6B; }
.cob-inline-020 { font-size:13px; line-height:1.7; color:#374151; margin-bottom:20px; }
.cob-inline-021 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.cob-inline-022 { margin-top:24px; }
.cob-inline-023 { margin-bottom:18px; }
.cob-inline-024 { position:relative; padding-left:28px; }
.cob-inline-025 { position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:linear-gradient(to bottom, #0B3D6B, #FF8C00); }
.cob-inline-026 { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; position:relative; }
.cob-inline-027 { position:absolute; left:-28px; top:2px; }
.cob-inline-028 { font-size:12px; color:#FF8C00; font-weight:700; }
.cob-inline-029 { font-size:13px; color:#374151; line-height:1.5; }
.cob-inline-030 { display:flex; align-items:flex-start; gap:12px; position:relative; }
.cob-inline-031 { margin-top:24px; background:linear-gradient(135deg, #0B3D6B, #0a2e50); border-radius:8px; padding:18px 20px; color:white; }
.cob-inline-032 { font-size:13px; font-style:italic; line-height:1.6; opacity:0.95; }
.cob-inline-033 { font-size:11px; margin-top:8px; color:#FF8C00; font-weight:600; }
.cob-inline-034 { margin-bottom:6px; }
.cob-inline-035 { font-size:12.5px; color:#6b7280; margin-bottom:18px; }
.cob-inline-036 { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cob-inline-037 { background:#0B3D6B; color:white; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.cob-inline-038 { color:#0B3D6B; font-weight:700; font-size:16px; font-family:'Playfair Display',serif; }
.cob-inline-039 { background:#e8f5e9; color:#2e7d32; font-size:10px; padding:2px 10px; border-radius:10px; font-weight:600; }
.cob-inline-040 { background:#fff3e0; color:#e65100; font-size:10px; padding:2px 10px; border-radius:10px; font-weight:600; }
.cob-inline-041 { background:#fce4ec; color:#c62828; font-size:10px; padding:2px 10px; border-radius:10px; font-weight:600; }
.cob-inline-042 { background:#f3e5f5; color:#6a1b9a; font-size:10px; padding:2px 10px; border-radius:10px; font-weight:600; }
.cob-inline-043 { margin-bottom:4px; }
.cob-inline-044 { background:#FF8C00; color:white; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.cob-inline-045 { background:#e8eaf6; color:#283593; font-size:10px; padding:2px 10px; border-radius:10px; font-weight:600; }
.cob-inline-046 { border-left-color:#FF8C00; }
.cob-inline-047 { margin-top:18px; background:#f7f9fc; border-radius:8px; padding:16px; text-align:center; }
.cob-inline-048 { font-size:11px; color:#6b7280; margin-bottom:10px; font-weight:600; }
.cob-inline-049 { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.cob-inline-050 { background:#e8f5e9; color:#2e7d32; padding:6px 12px; border-radius:4px; font-size:11px; font-weight:600; }
.cob-inline-051 { color:#FF8C00; }
.cob-inline-052 { background:#fff3e0; color:#e65100; padding:6px 12px; border-radius:4px; font-size:11px; font-weight:600; }
.cob-inline-053 { background:#fce4ec; color:#c62828; padding:6px 12px; border-radius:4px; font-size:11px; font-weight:600; }
.cob-inline-054 { background:#f3e5f5; color:#6a1b9a; padding:6px 12px; border-radius:4px; font-size:11px; font-weight:600; }
.cob-inline-055 { background:#e8eaf6; color:#283593; padding:6px 12px; border-radius:4px; font-size:11px; font-weight:600; }
.cob-inline-056 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.cob-inline-057 { background:#f7f9fc; border-radius:8px; padding:16px; border-top:3px solid #0B3D6B; }
.cob-inline-058 { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cob-inline-059 { width:20px;height:20px;color:#0B3D6B; }
.cob-inline-060 { color:#0B3D6B; font-weight:700; font-size:13px; }
.cob-inline-061 { font-size:12px; color:#374151; line-height:1.5; }
.cob-inline-062 { background:#f7f9fc; border-radius:8px; padding:16px; border-top:3px solid #FF8C00; }
.cob-inline-063 { width:20px;height:20px;color:#FF8C00; }
.cob-inline-064 { border:1px solid #e5e7eb; border-radius:8px; padding:16px; }
.cob-inline-065 { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cob-inline-066 { background:#0B3D6B; border-radius:6px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.cob-inline-067 { width:18px;height:18px;color:white; }
.cob-inline-068 { background:#FF8C00; border-radius:6px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.cob-inline-069 { color:#0B3D6B; font-weight:700; font-size:14px; margin-bottom:10px; }
.cob-inline-070 { display:flex; flex-wrap:wrap; gap:4px; }
.cob-inline-071 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.cob-inline-072 { display:flex; gap:10px; align-items:flex-start; }
.cob-inline-073 { background:#e8f5e9; border-radius:50%; width:28px; height:28px; min-width:28px; display:flex; align-items:center; justify-content:center; }
.cob-inline-074 { width:16px;height:16px;color:#2e7d32; }
.cob-inline-075 { font-size:13px; font-weight:700; color:#0B3D6B; margin-bottom:2px; }
.cob-inline-076 { font-size:11.5px; color:#6b7280; line-height:1.4; }
.cob-inline-077 { background:#f7f9fc; border-radius:8px; padding:18px; margin-bottom:24px; }
.cob-inline-078 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:center; }
.cob-inline-079 { background:#0B3D6B; color:white; border-radius:8px; padding:14px 10px; margin-bottom:8px; }
.cob-inline-080 { width:24px;height:24px;margin:0 auto 6px;display:block; }
.cob-inline-081 { font-size:12px; font-weight:700; }
.cob-inline-082 { font-size:11px; color:#6b7280; line-height:1.4; }
.cob-inline-083 { background:#FF8C00; color:white; border-radius:8px; padding:14px 10px; margin-bottom:8px; }
.cob-inline-084 { background:linear-gradient(135deg, #0B3D6B, #0a2e50); border-radius:10px; padding:24px; color:white; }
.cob-inline-085 { font-size:13px; line-height:1.6; opacity:0.9; margin-bottom:16px; }
.cob-inline-086 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cob-inline-087 { display:flex; align-items:center; gap:10px; }
.cob-inline-088 { width:18px;height:18px;color:#FF8C00; }
.cob-inline-089 { font-size:10px; color:#FF8C00; }
.cob-inline-090 { font-size:13px; }
.cob-inline-091 { margin-top:18px; text-align:center; padding-top:14px; border-top:1px solid rgba(255,255,255,0.15); }
.cob-inline-092 { height:40px; opacity:0.8; }
.cob-inline-093 { font-size:10px; color:rgba(255,255,255,0.5); margin-top:8px; }


/* ==========================================================
   MVX SERVICE PAGES + RECREATED HOME
   Estilos centralizados para:
   /servicios/automatizacion-procesos.html
   /servicios/cobranza-integral.html
   /servicios/emailMasivo.html
   /servicios/SMSmasivo.html
   /servicios/whatsappMasivo.html
   /productos/AutoWhatsAppPro.html
   /productos/consultaPersonas.html
========================================================== */

.mvx-service-page{
  --page-accent:#2563eb;
  --page-accent-2:#06b6d4;
  --page-ink:#0c1e36;
  --page-muted:#526174;
  background:#eef2f6;
  color:var(--page-ink);
}
.mvx-accent-blue{--page-accent:#2563eb;--page-accent-2:#06b6d4;}
.mvx-accent-orange{--page-accent:#f97316;--page-accent-2:#f59e0b;}
.mvx-accent-purple{--page-accent:#7c3aed;--page-accent-2:#ec4899;}
.mvx-accent-teal{--page-accent:#0891b2;--page-accent-2:#14b8a6;}
.mvx-accent-green{--page-accent:#16a34a;--page-accent-2:#22c55e;}
.mvx-accent-lime{--page-accent:#65a30d;--page-accent-2:#84cc16;}
.mvx-accent-indigo{--page-accent:#4f46e5;--page-accent-2:#2563eb;}

.mvx-shell{padding-top:74px;padding-bottom:72px;}
.mvx-layout{width:min(1280px,94%);margin:0 auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;padding:22px 0 0;}
.mvx-side{position:sticky;top:96px;align-self:start;background:#fff;border:1px solid rgba(12,30,54,.10);box-shadow:0 20px 55px rgba(12,30,54,.10);border-radius:26px;overflow:hidden;}
.side-head{padding:18px 18px 14px;background:linear-gradient(135deg,var(--page-accent),var(--page-accent-2));color:#fff;}
.side-head h2{margin:0;font-size:17px;color:#fff;}
.side-head p{margin:4px 0 0;color:rgba(255,255,255,.82);font-size:12px;}
.side-nav{padding:10px;display:flex;flex-direction:column;gap:8px;}
.side-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;color:var(--page-ink);border:1px solid transparent;font-weight:800;font-size:13px;text-decoration:none;transition:.18s ease;}
.side-link svg{width:18px;height:18px;color:var(--page-accent);flex:0 0 auto;}
.side-link:hover{background:#f7fafc;transform:translateX(2px);border-color:rgba(12,30,54,.08);}
.side-link.is-active{background:#f7fafc;border-color:var(--page-accent);box-shadow:0 10px 28px rgba(12,30,54,.10);}
.mvx-content{min-width:0;}
.mvx-hero{position:relative;overflow:hidden;border-radius:34px;min-height:520px;background:linear-gradient(135deg,rgba(12,30,54,.92),rgba(12,30,54,.72)),url('/img/hero/fondo.jpg') center/cover;box-shadow:0 30px 90px rgba(12,30,54,.24);color:white;}
.mvx-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 16%,rgba(255,255,255,.18),transparent 38%),radial-gradient(circle at 88% 16%,rgba(255,255,255,.12),transparent 42%);}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center;min-height:520px;padding:40px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.eyebrow svg{width:16px;height:16px;}
.mvx-hero h1{margin:18px 0 12px;font-size:clamp(28px,4vw,50px);line-height:1;letter-spacing:-.06em;color:#fff;}
.mvx-hero p{max-width:620px;color:rgba(255,255,255,.86);font-size:17px;line-height:1.65;}
.btn-mvx{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 18px;font-weight:900;border:1px solid transparent;transition:.18s ease;text-decoration:none;}
.btn-mvx.primary{background:linear-gradient(135deg,var(--page-accent),var(--page-accent-2));color:white;box-shadow:0 18px 42px rgba(12,30,54,.20);}
.btn-mvx.light{background:white;color:var(--page-ink);}
.btn-mvx:hover{transform:translateY(-2px);}
.hero-visual{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:16px;backdrop-filter:blur(12px);box-shadow:0 25px 70px rgba(0,0,0,.18);}
.visual-carousel{position:relative;overflow:hidden;border-radius:22px;height:300px;}
.visual-track{display:flex;width:400%;height:100%;transition:transform .7s ease;}
.visual-slide{flex:0 0 25%;width:25%;height:100%;background-size:cover;background-position:center;}
.hero-slide-fondo{background-image:url('/img/hero/fondo.jpg');}
.hero-slide-cobranza{background-image:url('/img/hero/cobranza.png');}
.hero-slide-callcenter{background-image:url('/img/hero/callcenter.png');}
.hero-slide-autowhatsapp{background-image:url('/img/productos/autowhatsapp.png');}
.dots{display:flex;justify-content:center;gap:8px;margin-top:12px;}
.dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.35);}
.dot.active{background:white;}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
.metric{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:13px;}
.metric strong{display:block;font-size:22px;color:#fff;}
.metric span{color:rgba(255,255,255,.78);font-size:12px;font-weight:700;}
.mvx-section{margin-top:22px;background:white;border:1px solid rgba(12,30,54,.08);border-radius:30px;padding:32px;box-shadow:0 18px 50px rgba(12,30,54,.08);}
.section-head{max-width:780px;margin-bottom:22px;}
.section-kicker{color:var(--page-accent);font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.08em;}
.mvx-section h2{font-size:clamp(26px,3vw,42px);line-height:1.08;margin:6px 0 8px;letter-spacing:-.04em;color:var(--page-ink);}
.section-head p{color:var(--page-muted);}
.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.mvx-card{position:relative;border-radius:24px;padding:22px;background:#f8fafc;border:1px solid rgba(12,30,54,.08);overflow:hidden;}
.mvx-card-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,var(--page-accent),var(--page-accent-2));color:white;margin-bottom:14px;}
.mvx-card-icon svg{width:22px;height:22px;}
.mvx-card h3,.info-card h3{color:var(--page-ink);font-size:18px;margin-bottom:8px;}
.mvx-card p,.info-card p{color:var(--page-muted);font-size:14px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.timeline{list-style:none;display:grid;gap:12px;padding:0;margin:0;}
.timeline li{display:flex;gap:12px;align-items:flex-start;background:#f8fafc;border-radius:18px;padding:14px;border:1px solid rgba(12,30,54,.08);color:var(--page-ink);font-weight:800;}
.timeline li span{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:linear-gradient(135deg,var(--page-accent),var(--page-accent-2));color:white;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chips span{padding:10px 14px;border-radius:999px;background:#f8fafc;border:1px solid rgba(12,30,54,.08);color:var(--page-ink);font-weight:800;}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.info-card{border-radius:22px;padding:20px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid rgba(12,30,54,.08);}
.logo-carousel{overflow:hidden;margin-top:18px;}
.logo-track{display:flex;align-items:center;gap:22px;width:max-content;animation:logoMove 28s linear infinite;}
.logo-track img{height:54px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(.05);background:white;border-radius:14px;padding:8px;box-shadow:0 10px 24px rgba(12,30,54,.08);}
@keyframes logoMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mvx-service-page #site-footer{display:block;margin-top:18px;}

.home-hero{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:flex-start;background:linear-gradient(135deg,rgba(12,30,54,.92),rgba(12,30,54,.68)),url('/img/hero/fondo.jpg') center/cover;color:#fff;padding-top:115px;padding-bottom:60px;}
.home-hero-inner{width:min(1180px,92%);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;}
.home-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px;}
.home-hero h1{font-size:clamp(38px,5.2vw,64px);line-height:.98;letter-spacing:-.07em;margin:18px 0;color:#fff;}
.home-hero h1 span{color:var(--mv-orange);}
.home-hero p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.86);max-width:660px;}
.home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.home-actions-left{justify-content:flex-start;}
.home-hero-panel{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:34px;padding:18px;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.24);}
.home-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.home-panel-grid article{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:18px;}
.home-panel-grid svg{width:28px;height:28px;color:var(--mv-orange);}
.home-panel-grid strong{display:block;margin-top:12px;color:#fff;font-size:18px;}
.home-panel-grid span{display:block;margin-top:6px;color:rgba(255,255,255,.76);font-size:13px;}
.home-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.home-service-card{position:relative;overflow:hidden;display:block;border-radius:26px;background:#fff;border:1px solid rgba(12,30,54,.10);padding:24px;text-decoration:none;color:#0c1e36;box-shadow:0 18px 45px rgba(12,30,54,.09);transition:.18s ease;}
.home-service-card:hover{transform:translateY(-6px);box-shadow:0 26px 65px rgba(12,30,54,.15);}
.home-service-card svg{width:34px;height:34px;margin-bottom:18px;}
.home-service-card h3{font-size:20px;margin-bottom:8px;color:#0c1e36;}
.home-service-card p{color:#526174;font-size:14px;}
.home-service-card.service-blue svg{color:#2563eb}.home-service-card.service-orange svg{color:#f97316}.home-service-card.service-purple svg{color:#7c3aed}.home-service-card.service-teal svg{color:#0891b2}.home-service-card.service-green svg{color:#16a34a}.home-service-card.service-indigo svg{color:#4f46e5}
.home-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
.home-left-text{text-align:left;max-width:520px;}
.home-product-cards{display:grid;gap:16px;}
.home-product-cards article{background:#fff;border:1px solid rgba(12,30,54,.10);box-shadow:0 18px 45px rgba(12,30,54,.08);border-radius:26px;padding:24px;}
.home-product-cards svg{width:34px;height:34px;color:var(--mv-orange);}.home-product-cards h3{margin:12px 0 8px;color:#0c1e36;}.home-product-cards p{color:#526174;}
.home-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.home-steps article{background:#fff;border:1px solid rgba(12,30,54,.10);border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(12,30,54,.08);}
.home-steps span{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mv-blue-soft),var(--mv-blue-dark));color:#fff;font-weight:900;margin-bottom:14px;}
.home-steps h3{color:#0c1e36;margin-bottom:8px;}.home-steps p{color:#526174;font-size:14px;}
.home-carousel-head h2,.home-carousel-head p{color:#fff;}.home-logo-track .business-card{background:rgba(255,255,255,.96);padding:12px;}
.home-cta{border-radius:32px;background:linear-gradient(135deg,#0c1e36,#123f6b);color:#fff;text-align:center;padding:44px 28px;box-shadow:0 24px 70px rgba(12,30,54,.18);}
.home-cta h2{font-size:clamp(30px,4vw,48px);color:#fff;}.home-cta p{max-width:700px;margin:12px auto 0;color:#dbeafe;}.home-final-space{padding-bottom:6rem;}

@media(max-width:1060px){.mvx-layout{grid-template-columns:1fr}.mvx-side{position:relative;top:auto}.side-nav{display:grid;grid-template-columns:repeat(2,1fr)}.hero-inner{grid-template-columns:1fr}.cards-grid,.info-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.home-hero-inner,.home-split{grid-template-columns:1fr}.home-service-grid{grid-template-columns:repeat(2,1fr)}.home-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.mvx-shell{padding-top:66px;padding-bottom:54px}.home-hero{padding-top:78px;min-height:auto;padding-bottom:60px}}
@media(max-width:640px){.side-nav{grid-template-columns:1fr}.mvx-hero,.hero-inner{min-height:auto}.hero-inner{padding:26px}.metrics{grid-template-columns:1fr}.mvx-section{padding:24px}.home-service-grid,.home-steps,.home-panel-grid{grid-template-columns:1fr}.home-hero h1{font-size:40px}.home-hero-panel{padding:12px}}

/* ==========================================================
   HOTFIX FORM PLACEHOLDERS + TIENDA DE PLANTILLAS
   - Placeholders grises en contacto/carrito
   - Estilos centralizados para tienda.html
========================================================== */
#contacto-form input::placeholder,
#contacto-form textarea::placeholder,
#contacto-form .input-field::placeholder,
.checkout-layout input::placeholder,
.checkout-layout textarea::placeholder,
.checkout-layout .input-field::placeholder,
.billing-form input::placeholder,
.billing-form textarea::placeholder,
.billing-form .input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

.mvx-store-page {
  --store-accent: #fe6c00;
  --store-accent-2: #123f6b;
  --store-soft: #f4f7fb;
}
.mvx-store-page .mvx-shell { padding-top: 98px; }
.mvx-store-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: radial-gradient(circle at 12% 18%, rgba(254, 108, 0, .16), transparent 36%), radial-gradient(circle at 86% 4%, rgba(18, 63, 107, .18), transparent 40%), linear-gradient(135deg, #ffffff 0%, #f4f7fb 100%);
  border: 1px solid rgba(12, 30, 54, .08);
  box-shadow: 0 18px 55px rgba(12, 30, 54, .10);
  padding: 34px;
  margin-bottom: 26px;
}
.mvx-store-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--store-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mvx-store-hero h1 {
  color: #0c1e36;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  max-width: 760px;
  margin-bottom: 12px;
}
.mvx-store-hero p { color: #40516a; max-width: 760px; font-size: 1rem; }
.mvx-store-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin: 4px 0 18px;
}
.mvx-store-mini-head h2 { color: #0c1e36; font-size: clamp(1.45rem, 2.6vw, 2.1rem); margin-bottom: 4px; }
.mvx-store-mini-head p { color: #52637a; max-width: 680px; }
.store-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 42px;
}
.store-product-card {
  background: #ffffff;
  border: 1px solid rgba(12, 30, 54, .10);
  border-radius: 26px;
  box-shadow: 0 16px 45px rgba(12, 30, 54, .10);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(254, 108, 0, .42);
  box-shadow: 0 24px 65px rgba(12, 30, 54, .16);
}
.store-thumb {
  position: relative;
  min-height: 230px;
  background: linear-gradient(135deg, rgba(12, 30, 54, .70), rgba(18, 63, 107, .30)), var(--store-img);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}
.store-img-autowhatsapp { --store-img: url('/img/hero/autowhatsapp.png'); }
.store-img-consulta { --store-img: url('/img/hero/test.png'); }
.store-thumb::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.store-file-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #0c1e36;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.store-file-badge svg { width: 16px; height: 16px; color: #107c41; }
.store-product-body { padding: 20px; }
.store-product-body h3 { color: #0c1e36; font-size: 1.28rem; margin-bottom: 8px; }
.store-product-body p { color: #4b5d75; font-size: .95rem; margin-bottom: 14px; }
.store-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.store-meta span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f6fa;
  color: #123f6b;
  font-size: 12px;
  font-weight: 800;
}
.store-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(12, 30, 54, .08);
}
.store-price { display: flex; flex-direction: column; gap: 2px; }
.store-price small { color: #728096; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.store-price strong { color: #0c1e36; font-size: 1.45rem; }
.store-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.store-actions .btn-mvx { min-height: 42px; }
.mvx-side .side-nav .side-link[href="/productos/AutoWhatsAppPro.html"],
.mvx-side .side-nav .side-link[href="/productos/consultaPersonas.html"] { display: none !important; }
@media (max-width: 900px) {
  .store-products-grid { grid-template-columns: 1fr; }
  .mvx-store-mini-head { align-items: flex-start; flex-direction: column; }
  .mvx-store-hero { padding: 26px 20px; }
}

/* ==========================================================
   CARRITO · BADGE EN MENÚ + MENSAJE AL AGREGAR
========================================================== */
.nav-cart-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.cart-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e11d48;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(225, 29, 72, .35);
  transform: translateY(-1px);
}

.cart-badge.is-empty {
  display: none;
}

.nav-mobile .nav-cart-link {
  width: 100%;
  justify-content: space-between;
}

.mv-cart-toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.mv-cart-toast {
  min-width: min(360px, calc(100vw - 32px));
  max-width: 420px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(12, 30, 54, .12);
  box-shadow: 0 22px 60px rgba(12, 30, 54, .24);
  color: #0c1e36;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
}

.mv-cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mv-cart-toast-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(34, 197, 94, .28);
}

.mv-cart-toast-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mv-cart-toast-text strong {
  font-size: 14px;
  color: #0c1e36;
}

.mv-cart-toast-text small {
  font-size: 12px;
  color: #526174;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-cart-toast-link {
  color: #fe6c00;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .mv-cart-toast-container {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .mv-cart-toast {
    width: 100%;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .mv-cart-toast-link {
    grid-column: 2;
  }
}

.home-product-card {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(12, 30, 54, 0.10);
  border-radius: 26px;
  padding: 24px;
  color: #0c1e36;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(12, 30, 54, 0.09);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(254, 108, 0, 0.35);
  box-shadow: 0 26px 65px rgba(12, 30, 54, 0.15);
}

.home-product-card svg {
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  color: var(--mv-orange);
}

.home-product-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #0c1e36;
}

.home-product-card p {
  color: #526174;
  font-size: 14px;
}
/* ===========================================
   WHATSAPP REUTILIZABLE – NAV, FOOTER Y FLOTANTE
=========================================== */
.nav-whatsapp-link {
  color: #ffffff !important;
  background: #25d366;
  border-radius: 999px;
  padding: 7px 13px !important;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28);
}

.nav-whatsapp-link::after {
  display: none !important;
}

.nav-whatsapp-link:hover {
  color: #ffffff !important;
  background: #1ebe5d;
  transform: translateY(-1px);
}

.nav-payphone.scrolled .nav-whatsapp-link {
  color: #ffffff !important;
}

.btn-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.32);
}

.btn-whatsapp:hover {
  background: #1ebe5d;
  border-color: #1ebe5d;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-whatsapp-mobile {
  justify-content: center;
}

.mv-whatsapp-float {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24), 0 8px 18px rgba(37, 211, 102, 0.36);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mv-whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: rgba(37, 211, 102, 0.16);
  z-index: -1;
}

.mv-whatsapp-float:hover {
  background: #1ebe5d;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.28), 0 12px 24px rgba(37, 211, 102, 0.42);
}

.mv-whatsapp-float:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.mv-whatsapp-icon {
  width: 34px;
  height: 34px;
  display: block;
  fill: currentColor;
}

@media (max-width: 640px) {
  .mv-whatsapp-float {
    width: 58px;
    height: 58px;
    left: 16px;
    bottom: 16px;
  }

  .mv-whatsapp-icon {
    width: 33px;
    height: 33px;
  }
}

/* ===========================================
   NAV BLANCO DESDE EL INICIO
   Páginas internas: servicios, productos y tienda
=========================================== */
.mvx-nav-solid-start .nav-payphone {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #dadfe2;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
}

.mvx-nav-solid-start .nav-payphone:not(.scrolled) .brand-text span:first-child,
.mvx-nav-solid-start .nav-payphone:not(.scrolled) .brand-text span:last-child,
.mvx-nav-solid-start .nav-payphone:not(.scrolled) .nav-links a,
.mvx-nav-solid-start .nav-payphone .brand-text span:first-child,
.mvx-nav-solid-start .nav-payphone .brand-text span:last-child,
.mvx-nav-solid-start .nav-payphone .nav-links a {
  color: #0c1e36;
}

.mvx-nav-solid-start .nav-payphone .nav-links a:hover {
  color: var(--mv-orange);
}

.mvx-nav-solid-start .nav-payphone .nav-toggle span {
  background: #0c1e36;
}

.mvx-nav-solid-start .nav-payphone ~ .nav-mobile,
.mvx-nav-solid-start .nav-payphone + .nav-mobile {
  background: rgba(255, 255, 255, 0.96);
}

.mvx-nav-solid-start .nav-payphone ~ .nav-mobile .nav-mobile-inner,
.mvx-nav-solid-start .nav-payphone + .nav-mobile .nav-mobile-inner {
  background: #ffffff;
}

.mvx-nav-solid-start .nav-payphone ~ .nav-mobile .nav-mobile-inner a,
.mvx-nav-solid-start .nav-payphone + .nav-mobile .nav-mobile-inner a {
  color: #0c1e36;
}

.mvx-nav-solid-start .nav-payphone ~ .nav-mobile .nav-mobile-inner a:hover,
.mvx-nav-solid-start .nav-payphone + .nav-mobile .nav-mobile-inner a:hover {
  color: var(--mv-orange);
}

/* ==========================================================
   AJUSTE TIENDA.HTML – Hero principal más oscuro
   - Card de título con fondo oscuro desde el inicio
   - Mantiene el resto de la tienda sin cambios
========================================================== */
.mvx-store-page .mvx-store-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(254, 108, 0, 0.28), transparent 36%),
    radial-gradient(circle at 86% 4%, rgba(255, 179, 71, 0.14), transparent 40%),
    linear-gradient(135deg, #071321 0%, #0c1e36 48%, #123f6b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 22px 60px rgba(7, 19, 33, 0.30) !important;
}

.mvx-store-page .mvx-store-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.mvx-store-page .mvx-store-hero p {
  color: #dbeafe !important;
}

.mvx-store-page .mvx-store-hero .eyebrow {
  color: #ffb347 !important;
}

.mvx-store-page .mvx-store-hero .eyebrow svg {
  color: #ffb347 !important;
  stroke: currentColor !important;
}