/* ===================== B2C / COMPRA DIRECTA ===================== */
.cta__text{ font-size:20px; text-transform:none; letter-spacing:.4px; opacity:.92; margin-bottom:2vw; margin-top: 10px; margin-left: 4%;}

/* Reordenado sin tocar tu HTML: el contenedor es el primer DIV después del H2 */
.cta .wrap > h2 + div{
  display:grid !important;
  gap:18px !important;
  grid-template-columns:1fr !important;   /* mobile */
  align-items:start;
  text-align: center;
}

/* Desktop: dos columnas (form izquierda / info derecha) */
@media (min-width:900px){
  .cta .wrap > h2 + div{
    grid-template-columns:1.05fr .95fr !important;
    gap:24px !important;
  }
  .cta .wrap > h2 + div > div:nth-child(1){ order:2; } /* info -> derecha */
  .cta .wrap > h2 + div > div:nth-child(2){ order:1; } /* CTA  -> izquierda */
}

/* Tarjeta base (por si la usás) */
.cta-card{
  background:#0f0f0f; border:1px solid #232323; border-radius:10px; padding:16px;
}

/* ===================== CTA PEDIDO ===================== */
.cta__pedido {
  background: #0f0f0f;
  border: 1px solid #232323;
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cta__pedido-title {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.cta__pedido-icon {
  margin-bottom: 16px;
  width: 60px;
  height: 60px;
}
.cta__pedido-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Botón principal verde */
.btn--wsp {
  background: #25D366;
  border: 1px solid #1fb457;
  color: #0a2614;
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn--wsp:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.4);
}

/* Botones de tamaños */
.cta__pedido-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.btn--dark {
  background: #1b1b1b;
  color: #fff;
  border: 1px solid #2c2c2c;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.btn--dark:hover {
  background: #232323;
}


/* ===== B2C: título más grande (sigue negro) ===== */
.cta .title-stamp{
  font-size: clamp(42px, 6.2vw, 88px);
  margin-bottom: 14px;
  margin-left: 4%;
  color: var(--ink);
  text-align: center;            /* quitá si lo querés a la izquierda en desktop */
}
@media (min-width:900px){
  .cta .title-stamp{ text-align:left; }
}

/* ===== B2C: texto general NEGRO por defecto en la sección ===== */
.cta{ color: var(--ink); }
.cta :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong){ color: var(--ink); }

/* ===== B2C: SOLO los bloques negros con tipografía BLANCA ===== */
/* ✅ si podés, añadí class="cta-card" a los DIVs negros */
.cta__pedido,
.cta .cta-card{
  color:#fff;
}
.cta__pedido :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong),
.cta .cta-card :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong){
  color:#fff;
}

/* ❌ si no podés tocar el HTML, usamos selectores por estilo inline (fallback) */
.cta [style*="background:#0f0f0f"],
.cta [style*="background: #0f0f0f"],
.cta [style*="background:#111"],
.cta [style*="background: #111"]{
  color:#fff;
}
.cta [style*="background:#0f0f0f"] :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong),
.cta [style*="background: #0f0f0f"] :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong),
.cta [style*="background:#111"] :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong),
.cta [style*="background: #111"] :is(h1,h2,h3,h4,h5,h6,p,li,small,em,strong){
  color:#fff;
}

/* opcional: más aire vertical en la sección */
.cta .wrap{ padding:72px 0; }
@media (min-width:900px){ .cta .wrap{ padding:96px 0; } }