/* ===================== B2B / SUSCRIPCIONES ===================== */
.b2b .wrap{
  padding-top:34px;
  padding-bottom:38px;
  text-align:center; /* centrado general */
}

/* ======= TIPOGRAFÍA Y ENCABEZADO ======= */
.subs__head .title-stamp{
  font-size:55px;
  margin-bottom:10px;
  text-align:center;
}
.subs__subtitle{
  font-size:24px;
  line-height:1.5;
  max-width:880px;
  margin:10px auto;
  text-align:center;
}

/* ======= BOTONES ======= */
.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:6px;
  background:#111;
  color:#fff;
  text-decoration:none;
  border:1px solid #0d0d0d;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  text-align:center;
}
.btn:hover{ filter:brightness(1.05); }

.btn--whatsapp{
  background:#25D366;
  border-color:#1fb457;
  color:#0a2614;
  margin-bottom:3vw;
}

#openPlans.btn{
  background:#000;
  border:1px solid #000;
  color:#fff;
  font-size:16px;
  padding:14px 22px;
  border-radius:8px;
  display:block;
  margin:20px auto;
}
#openPlans.btn:hover{ filter:brightness(1.1); }

/* ======= TARJETAS (ASIDE) ======= */
.subs__aside{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  justify-items:center;     /* centra columnas del grid */
  text-align:center;        /* centra textos dentro */
}
@media (min-width:900px){
  .subs__aside{
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
}

.subs__aside .card{
  background:#0f0f0f;
  color:#fff;
  border:1px solid #222;
  box-shadow:none;
  border-radius:12px;
  padding:20px;
  transition:transform .2s ease, box-shadow .2s ease;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  max-width:560px;          /* limita ancho en mobile */
}
.subs__aside .card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(0,0,0,.4);
}
.subs__aside .card__title{
  color:#fff;
  font-size:18px;
  font-weight:900;
  margin-bottom:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* Iconos por CSS sin tocar HTML */
/* 1) ¿Cómo funciona? (1ª card) → ícono pregunta */
.subs__aside .card:nth-of-type(1) .card__title::before{
  content:"";
  width:20px; height:20px;
  display:inline-block;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm.002 17.001a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zM12 14c-.552 0-1-.448-1-1 0-1.657 1.343-3 3-3 .552 0 1-.448 1-1s-.448-1-1-1c-1.654 0-3 1.346-3 3 0 .552-.448 1-1 1s-1-.448-1-1c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5z"/></svg>');
}

/* 2) Beneficios B2B (2ª card) → ícono handshake */
.subs__aside .card:nth-of-type(2) .card__title::before{
  content:"";
  width:20px; height:20px;
  display:inline-block;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 640 512" fill="%23ffffff"><path d="M434.7 64H272c-17 0-33.3 6.7-45.3 18.7L160 149.3 192 181.3l66.7-66.7c4.2-4.2 9.9-6.6 15.9-6.6H416c8.8 0 16 7.2 16 16v48h48c17.7 0 32 14.3 32 32v64H448l-96 96-32-32-32 32c-12.5 12.5-32.8 12.5-45.3 0L96 304H32c-17.7 0-32-14.3-32-32V176c0-17.7 14.3-32 32-32h64l96-96C212 28.7 241.1 16 272 16h162.7C468.4 16 496 43.6 496 77.3V128h-32V77.3c0-23.5-19.1-42.7-42.7-42.7zM576 208h32c17.7 0 32 14.3 32 32v96c0 35.3-28.7 64-64 64H448c-8.5 0-16.6-3.4-22.6-9.4L384 416l-32 32c-25 25-65.5 25-90.5 0L224 421.3l-21.3 21.3c-12.5 12.5-32.8 12.5-45.3 0L96 381.3V352h48l96 96 32-32 32 32 96-96h176c8.8 0 16-7.2 16-16v-96c0-8.8-7.2-16-16-16z"/></svg>');
}

.subs__aside .steps,
.subs__aside .bullets{
  font-size:18px;
  line-height:1.5;
  padding-left:0;
  list-style-position:inside;
  text-align:center;
}
.subs__aside .steps li,
.subs__aside .bullets li{ margin:6px 0; }

/* Card CTA especial */
.card--cta{
  background:#0f0f0f;
  border:1px solid #222;
  color:#fff;
  text-align:center;
}
.card--cta a.btn{
  background:#25D366;
  border:1px solid #1fb457;
  color:#0a2614;
  font-weight:700;
  padding:10px 14px;
  border-radius:8px;
  display:inline-block;
  margin-top:10px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card--cta a.btn:hover{
  transform:scale(1.04);
  box-shadow:0 0 12px rgba(37,211,102,.5);
}
.card--cta .ico svg{
  width:28px; height:28px; margin-bottom:8px;
}

/* ======= CARRUSEL DE MARCAS ======= */
.brands{ margin-top:24px; margin-bottom:28px; }
.brands__title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:35px;
  color:#2a1200;
  margin:0 0 20px 0;
  text-align:center;
}
.brands__rail{
  position:relative;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0 50px;
}
.brands__viewport{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(220px,28vw,320px);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.brands__viewport::-webkit-scrollbar{ display:none; }
.brands .brand{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
  display:flex;
}
.brands .brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  transition:transform .25s ease, filter .25s ease;
}
.brands .brand:hover img{
  transform:scale(1.06);
  filter:none;
}
.brands__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff9;
  backdrop-filter:blur(2px);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brands__btn--prev{ left:8px; }
.brands__btn--next{ right:8px; }
.brands__btn:hover{ background:#fff; }

/* ===================== MODAL DE PLANES (ROBUSTO) ===================== */
.subsModal{
  position:fixed; inset:0; z-index:1000;
  visibility:hidden; opacity:0; pointer-events:none;
  display:block;
  transition:opacity .18s ease, visibility .18s ease;
}
.subsModal.is-open{ visibility:visible; opacity:1; pointer-events:auto; }
.subsModal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
}
.subsModal__panel{
  position:relative;
  margin:4vh auto;
  max-width:1100px;
  background:#fff; color:#1b1b1b;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:16px;
  transform:translateY(6px) scale(.995);
  transition:transform .18s ease;
}
.subsModal.is-open .subsModal__panel{ transform:translateY(0) scale(1); }
.subsModal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 10px;
  border-bottom:1px solid #eee;
}
.subsModal__head h3{
  margin:0; font:900 20px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
.subsModal__close{
  width:36px; height:36px; border-radius:999px;
  border:1px solid #e8e8e8; background:#fff; cursor:pointer;
}
.subsModal__close:hover{ background:#f6f6f6; }
.subsModal__grid{
  display:grid; grid-template-columns:1fr; gap:14px; padding-top:14px;
}
@media (min-width:680px){ .subsModal__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .subsModal__grid{ grid-template-columns:repeat(3,1fr); } }
.subsModal .plan{ height:100%; display:flex; flex-direction:column; border-radius:12px; }
.subsModal .plan .btn{ margin-top:auto; }
body.modal-open{ overflow:hidden; }

.ico_b2b{ align-items:center; }

/* Subs: centrar el BLOQUE (no solo el texto) */
.subs__legal{
  display:block;
  text-align:center;
  width:auto !important;            /* quita el 100vw */
  max-width:900px;                  /* ancho razonable en desktop */
  margin:14px auto 0 !important;    /* centra el bloque */
  padding:10px 18px;
}

/* Mobile: respiración lateral y ancho fluido */
@media (max-width: 899px){
  .subs__legal{
    max-width: calc(100% - 32px);   /* 16px de margen por lado */
    padding:10px 16px;
  }
}


/* ===================== MOBILE REFINEMENTS ===================== */
/* Respira lateral en mobile, centra todo, y da margen a los bloques */
@media (max-width:899px){
  .b2b .wrap{ padding-left:16px; padding-right:16px; }
  .subs__aside{ gap:16px; }
  .subs__aside .card{ margin-inline:6px; }
  #openPlans.btn{ width:100%; max-width:520px; }

  .brands__rail{ padding:0 32px; }
  .brands__viewport{ grid-auto-columns: clamp(180px, 60vw, 280px); }
  .subs__head .title-stamp{ font-size: clamp(34px, 8vw, 55px); } /* solo ajuste fluido */
  .subs__subtitle{ font-size: clamp(18px, 4.5vw, 24px); }
}

/* ===== Card CTA: centrado total + texto blanco ===== */
.card--cta{
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;     /* centra horizontalmente los hijos */
  justify-content: center; /* centra verticalmente si hay altura extra */
}

.card--cta :is(p, small, h1, h2, h3, h4, h5, h6, strong, em){
  color: #fff;             /* fuerza blanco en textos dentro del bloque negro */
  margin-left: auto;
  margin-right: auto;      /* asegura centrado aunque traigan estilos inline */
}

/* Ícono de WhatsApp centrado */
.card--cta .ico_b2b{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 10px;
}
.card--cta .ico_b2b svg{ display:block; }

/* Botón centrado */
.card--cta .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
}

/* Nota final centrada */
.card--cta .muted{
  display: block;
  text-align: center;
  color: #fff;             /* blanco también para la nota */
}

/* B2B → curva a NEGRO y sin fisura con el footer */
.b2b .shape--bottom{ bottom:-1px; }                   /* tapa el 1px de anti-aliasing */
.b2b .shape--bottom path{ fill: var(--black) !important; }

/* por las dudas, quitamos cualquier margen entre bloques */
.b2b{ margin-bottom:0; }
footer.section--black{ margin-top:0; }

/* Card CTA: icono de WhatsApp más grande */
.card--cta .ico_b2b svg{
  width: 36px !important;
  height: 36px !important;
}

@media (min-width: 900px){
  .card--cta .ico_b2b svg{
    width: 42px !important;
    height: 42px !important;
  }
}

/* (opcional) un poco más de respiro alrededor del icono */
.card--cta .ico_b2b{
  margin: 8px 0 12px;
}