/* ============================================================
   VISA ABORDO CONSULTING — HOME PAGE STYLES
   Page-specific extensions on top of the design system.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   HERO — wider text column + horizontal layout
   Grid shifts to 60/40 so the title fills more horizontal space.
   font-size inherits from components.css (text-7xl max = 72px).
   Subtitle max-width lifted to match the wider column.
────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .hero__grid {
    grid-template-columns: 3fr 2fr;
  }
}

.hero__title {
  font-size: clamp(var(--text-4xl), 5.2vw, 64px);
}

.hero__desc {
  max-width: none;
}

/* ──────────────────────────────────────────────────────────────
   HERO — placeholder visual (replace with photo)
────────────────────────────────────────────────────────────── */

.hero__placeholder {
  width: 100%;
  height: 480px;
  background: linear-gradient(145deg,
    var(--color-accent-50)   0%,
    var(--color-accent-100)  40%,
    var(--color-primary-50)  75%,
    #F0FFFE                  100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-8);
}

.hero__placeholder-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-600);
}

.hero__placeholder-icon svg { width: 36px; height: 36px; }

.hero__placeholder-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  max-width: none;
}

.hero__destinations {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.hero__dest-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
}

/* ──────────────────────────────────────────────────────────────
   IDENTIFICATION HOOKS SECTION
────────────────────────────────────────────────────────────── */

.hook-section {
  padding-block: var(--space-24);
  background: linear-gradient(160deg,
    var(--color-primary-800) 0%,
    var(--color-primary-900) 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative blob */
.hook-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,211,209,.07) 0%, transparent 65%);
  pointer-events: none;
}

.hook-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,211,209,.05) 0%, transparent 65%);
  pointer-events: none;
}

/* Invert section header text on dark bg */
.hook-section .section-eyebrow { color: var(--color-accent-400); }
.hook-section .section-title   { color: var(--text-inverse); }

.hook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

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

.hook-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  backdrop-filter: blur(8px);
  transition:
    background  var(--dur-normal) var(--ease),
    border-color var(--dur-normal) var(--ease),
    transform   var(--dur-normal) var(--ease);
}

.hook-card:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(90,211,209,.25);
  transform: translateY(-3px);
}

.hook-card__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

.hook-card__text {
  font-size: var(--text-base);
  color: rgba(255,255,255,.88);
  line-height: var(--lh-relaxed);
  font-style: italic;
  max-width: none;
}

.hook-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  position: relative;
  z-index: 1;
}

.hook-footer__text {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.75);
  font-weight: var(--fw-medium);
  max-width: none;
}

@media (max-width: 768px) {
  .hook-section { padding-block: var(--space-16); }
}

/* Layout de dos columnas */
.hook-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-12);
  align-items: stretch;
}

.hook-col-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hook-col-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: calc(-1 * var(--space-24));
}

/* Columna del CEO */
.hook-founder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

.hook-founder__glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 700px;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(90, 211, 209, 0.18) 0%,
    rgba(33, 79, 134, 0.12) 45%,
    transparent 72%
  );
  filter: blur(28px);
  pointer-events: none;
  border-radius: 50%;
}

.hook-founder__img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  height: 640px;
  object-fit: cover;
  object-position: top center;
  display: block;
  mask-image: linear-gradient(to bottom, black 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 84%, transparent 100%);
}

.hook-founder__bio {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding-top: var(--space-3);
}

.hook-founder__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: #ffffff;
  letter-spacing: var(--ls-snug);
  display: block;
}

.hook-founder__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--brand-accent);
  letter-spacing: 0.03em;
  display: block;
}

.hook-founder__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.80);
  line-height: var(--lh-relaxed);
  font-style: normal;
  margin-top: var(--space-2);
  max-width: 340px;
}

/* Tablet */
@media (max-width: 1024px) {
  .hook-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-10);
  }
  .hook-founder__img {
    max-width: 300px;
    height: 460px;
  }
  .hook-founder__glow {
    width: 380px;
    height: 540px;
  }
}

/* Móvil: imagen y bio debajo de las tarjetas */
@media (max-width: 768px) {
  .hook-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .hook-col-right {
    order: 3;
    margin-top: 0;
  }
  .hook-founder {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    height: auto;
  }
  .hook-founder__glow {
    display: none;
  }
  .hook-founder__img {
    max-width: 140px;
    height: 190px;
    flex-shrink: 0;
  }
  .hook-founder__bio {
    align-items: flex-start;
    text-align: left;
    padding-top: 0;
  }
  .hook-founder__desc {
    max-width: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   "NO ESTÁS SOLO" MID-PAGE CTA STRIP
────────────────────────────────────────────────────────────── */

.not-alone-strip {
  padding-block: var(--space-12);
  background: var(--color-accent-50);
  border-top: 1px solid var(--color-accent-100);
  border-bottom: 1px solid var(--color-accent-100);
}

.not-alone-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.not-alone-strip__text { flex: 1; min-width: 260px; }

.not-alone-strip__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  color: var(--color-primary-800);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-2);
}

.not-alone-strip__desc {
  font-size: var(--text-base);
  color: var(--color-primary-600);
  line-height: var(--lh-relaxed);
  max-width: none;
}

@media (max-width: 640px) {
  .not-alone-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

/* ──────────────────────────────────────────────────────────────
   SERVICES GRID & FOOTER NOTE
────────────────────────────────────────────────────────────── */

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ── SRV-CARD — Clean icon card ─────────────────────────────── */

.srv-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition:
    transform        var(--dur-normal) var(--ease),
    box-shadow       var(--dur-normal) var(--ease),
    border-color     var(--dur-normal) var(--ease);
}

/* Shimmer sweep on hover */
.srv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.62) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0.55s ease;
}

.srv-card:hover::before {
  left: 140%;
}

.srv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(33,79,134,0.10);
  border-color: var(--color-accent-200);
}

.srv-card__circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--circle-bg, var(--color-accent-50));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease);
}

@keyframes srv-circle-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  62%  { transform: scale(0.93); }
  82%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.srv-card:hover .srv-card__circle {
  animation: srv-circle-bounce 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.srv-card__circle svg {
  width: 26px;
  height: 26px;
  color: var(--circle-icon, var(--color-accent-600));
}

.srv-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  transition: color 0.28s var(--ease);
}

.srv-card:hover .srv-card__name {
  color: var(--circle-icon, var(--brand-primary));
}

.srv-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* Badge variant inside section-eyebrow (overrides the line decorators) */
.section-eyebrow--badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.section-eyebrow--badge::before,
.section-eyebrow--badge::after { display: none; }

.section-eyebrow__icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.services-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.services-footer__icon {
  width: 36px;
  height: 36px;
  color: var(--brand-accent);
}

.services-footer__icon svg {
  width: 100%;
  height: 100%;
}

.services-footer__question {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.services-footer__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────
   PRICING GRID & NOTE
────────────────────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
  }
}

.pricing-note {
  max-width: 700px;
  margin-inline: auto;
}

.pricing-note__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--brand-accent);
}

.pricing-note__icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent-600);
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-note__icon svg { width: 100%; height: 100%; }

.pricing-note__text {
  font-size: var(--text-sm);
  color: var(--color-accent-800);
  line-height: var(--lh-relaxed);
  max-width: none;
}

/* ──────────────────────────────────────────────────────────────
   CURRENCY TOGGLE — pill switch discreto
────────────────────────────────────────────────────────────── */

.pricing-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .pricing-controls { align-items: center; }
}

.currency-toggle {
  position: relative;
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid rgba(33, 79, 134, 0.13);
  border-radius: 100px;
  padding: 3px;
}

.currency-toggle__opt {
  position: relative;
  z-index: 1;
  min-width: 48px;
  padding: 5px 13px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
  line-height: 1;
}

.currency-toggle__opt[aria-pressed="true"] {
  color: #ffffff;
}

.currency-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  background: var(--brand-primary);
  border-radius: 100px;
  transition: transform 0.24s cubic-bezier(0.34, 1.2, 0.64, 1), width 0.24s ease;
  pointer-events: none;
  z-index: 0;
  will-change: transform, width;
}

.pricing-approx-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.pricing-approx-note.is-visible {
  opacity: 0.65;
  pointer-events: auto;
}

.price-card__amount-row {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ──────────────────────────────────────────────────────────────
   FAQ SECTION
────────────────────────────────────────────────────────────── */

.faq-container {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.faq-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  text-align: center;
}

.faq-more p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: none;
}

/* ──────────────────────────────────────────────────────────────
   BOARDING PASS — Cómo funciona el proceso
────────────────────────────────────────────────────────────── */

.boarding-pass {
  max-width: 1040px;
  margin-inline: auto;
}

/* ── Tarjeta principal ──────────────────────────────── */

.bp-card {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  border: 1px solid rgba(33, 79, 134, 0.13);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 6px 32px rgba(33, 79, 134, 0.10);
  overflow: hidden;
}

/* ── Panel izquierdo oscuro ─────────────────────────── */

.bp-header {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--brand-primary);
  color: #ffffff;
}

.bp-header__brand {
  display: flex;
  align-items: center;
  overflow: hidden;
  flex: 1;
}

.bp-header__logo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform: scale(1.5);
  transform-origin: center center;
}

.bp-header__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bp-header__footer-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.22);
}

.bp-header__footer-plane {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand-accent);
}

/* ── Borde escalonado (tear/perforation effect) ──────
   El degradado radial crea semicírculos blancos en el
   borde derecho del panel azul, simulando la línea de
   desgarre de un boleto físico.
────────────────────────────────────────────────────── */

.bp-tear {
  width: 22px;
  flex-shrink: 0;
  background:
    radial-gradient(
      circle at 100% 50%,
      #ffffff 10px,
      transparent 10px
    ) right center / 22px 20px repeat-y,
    var(--brand-primary);
}

/* ── Área blanca con los cuatro pasos ──────────────── */

.bp-content {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* Segmento de cada paso */
.bp-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6) var(--space-5);
  gap: var(--space-1);
  min-width: 0;
  transition: background var(--dur-normal) var(--ease);
}

.bp-step:hover { background: rgba(90, 211, 209, 0.045); }

/* Número prominente */
.bp-step__num {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Etiqueta de puerta estilo aerolínea */
.bp-step__gate {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent);
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* Ícono en turquesa */
.bp-step__icon {
  width: 38px;
  height: 38px;
  color: var(--brand-accent);
  margin-block: var(--space-3);
}

.bp-step__icon svg { width: 100%; height: 100%; }

/* Título */
.bp-step__title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-800);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  margin-top: var(--space-1);
}

/* Descripción */
.bp-step__desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: none;
  flex: 1;
}

/* Divisor sólido sutil entre pasos */
.bp-step-divider {
  width: 1px;
  background: rgba(33, 79, 134, 0.08);
  flex-shrink: 0;
  align-self: stretch;
  margin-block: var(--space-6);
}

/* Línea perforada antes del stub */
.bp-perf-divider {
  position: relative;
  width: 2px;
  flex-shrink: 0;
  align-self: stretch;
  background: repeating-linear-gradient(
    to bottom,
    rgba(33, 79, 134, 0.28) 0px,
    rgba(33, 79, 134, 0.28) 5px,
    transparent 5px,
    transparent 10px
  );
}

.bp-perf-notch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  background: #ffffff;
  z-index: 2;
}

.bp-perf-notch--top    { top: 0;    border-radius: 0 0 10px 10px; }
.bp-perf-notch--bottom { bottom: 0; border-radius: 10px 10px 0 0; }

/* Stub con código de barras */
.bp-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: rgba(33, 79, 134, 0.028);
  flex-shrink: 0;
  width: 68px;
}

.bp-stub__label {
  font-family: var(--font-heading);
  font-size: 7px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brand-primary);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.55;
}

.bp-stub__barcode {
  flex: 1;
  width: 30px;
  max-height: 120px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(33, 79, 134, 0.50) 0px,
    rgba(33, 79, 134, 0.50) 3px,
    transparent 3px,
    transparent 6px,
    rgba(33, 79, 134, 0.50) 6px,
    rgba(33, 79, 134, 0.50) 7px,
    transparent 7px,
    transparent 10px,
    rgba(33, 79, 134, 0.50) 10px,
    rgba(33, 79, 134, 0.50) 14px,
    transparent 14px,
    transparent 16px,
    rgba(33, 79, 134, 0.50) 16px,
    rgba(33, 79, 134, 0.50) 17px,
    transparent 17px,
    transparent 20px
  );
}

/* ── Mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
  /* La tarjeta se apila verticalmente */
  .bp-card { flex-direction: column; }

  /* El panel izquierdo se convierte en franja superior */
  .bp-header {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-5);
  }

  .bp-header__logo-img {
    width: auto;
    max-width: 180px;
    height: 48px;
    object-fit: contain;
  }

  .bp-header__footer { display: none; }

  /* El borde escalonado se vuelve horizontal */
  .bp-tear {
    width: 100%;
    height: 22px;
    background:
      radial-gradient(
        circle at 50% 100%,
        #ffffff 10px,
        transparent 10px
      ) center bottom / 20px 22px repeat-x,
      var(--brand-primary);
  }

  /* Los pasos se apilan */
  .bp-content { flex-direction: column; }

  /* Grid de 2 columnas: ícono | texto */
  .bp-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "num   gate"
      "icon  title"
      "icon  desc";
    gap: var(--space-1) var(--space-4);
    padding: var(--space-5);
    align-items: start;
  }

  .bp-step__num  { grid-area: num;  font-size: 20px; }
  .bp-step__gate { grid-area: gate; align-self: end; padding-bottom: 1px; }
  .bp-step__icon {
    grid-area: icon;
    width: 30px;
    height: 30px;
    margin-block: 0;
    margin-top: var(--space-1);
    justify-self: center;
  }
  .bp-step__title { grid-area: title; font-size: var(--text-base); margin-top: 0; }
  .bp-step__desc  { grid-area: desc; }

  /* Divisores horizontales entre pasos */
  .bp-step-divider {
    width: auto;
    height: 1px;
    margin-block: 0;
    margin-inline: var(--space-5);
  }

  /* Perforación horizontal */
  .bp-perf-divider {
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      rgba(33, 79, 134, 0.28) 0px,
      rgba(33, 79, 134, 0.28) 5px,
      transparent 5px,
      transparent 10px
    );
    align-self: auto;
  }

  .bp-perf-notch {
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    width: 10px;
    height: 20px;
  }

  .bp-perf-notch--top {
    left: 0;
    bottom: auto;
    border-radius: 0 10px 10px 0;
  }

  .bp-perf-notch--bottom {
    right: 0;
    left: auto;
    bottom: auto;
    border-radius: 10px 0 0 10px;
  }

  /* Stub horizontal al final */
  .bp-stub {
    flex-direction: row;
    width: auto;
    height: 50px;
    padding: var(--space-3) var(--space-5);
    gap: var(--space-4);
  }

  .bp-stub__label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .bp-stub__barcode {
    flex: 1;
    width: auto;
    height: 26px;
    max-height: none;
    max-width: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   TESTIMONIOS — Carrusel infinito WhatsApp-style
────────────────────────────────────────────────────────────── */

.testi-section {
  padding-block: var(--space-24);
  background: var(--bg-surface);
  overflow: hidden;
}

@media (max-width: 768px) {
  .testi-section { padding-block: var(--space-16); }
}

.testi-section .section-header {
  margin-bottom: var(--space-10);
}

/* Viewport: aplica fades en los bordes con mask-image */
.testi-carousel {
  position: relative;
  padding-block: 20px;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Track: usa margin-right en lugar de gap para que -50% = exactamente un set */
.testi-track {
  display: flex;
  width: max-content;
  animation: testi-scroll 60s linear infinite;
  will-change: transform;
}

@keyframes testi-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tarjeta individual */
.testi-card {
  flex: 0 0 310px;
  margin-right: 20px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(33, 79, 134, 0.08);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 20px rgba(33, 79, 134, 0.07);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: default;
  user-select: none;
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
}

.testi-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 20px 56px rgba(33, 79, 134, 0.14);
}

/* Cabecera: ícono WhatsApp + etiqueta */
.testi-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(33, 79, 134, 0.06);
}

.testi-card__wa-icon {
  width: 14px;
  height: 14px;
  color: #25D366;
  flex-shrink: 0;
}

.testi-card__wa-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Burbuja de mensaje */
.testi-card__bubble {
  background: rgba(90, 211, 209, 0.09);
  border-radius: 16px 16px 16px 4px;
  padding: var(--space-4);
  flex: 1;
}

.testi-card__msg {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.65;
  max-width: none;
}

/* Hora y ticks de lectura */
.testi-card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: var(--space-2);
}

.testi-card__time {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.testi-card__read {
  width: 18px;
  height: 11px;
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* Pie: avatar + identidad */
.testi-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(33, 79, 134, 0.06);
}

.testi-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #2A6DB5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: #ffffff;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.testi-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testi-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  display: block;
}

.testi-card__location {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
}

.testi-card__pin {
  width: 8px;
  height: 11px;
  color: var(--brand-accent);
  flex-shrink: 0;
}

/* Móvil: tarjetas ligeramente más pequeñas */
@media (max-width: 640px) {
  .testi-carousel {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }

  .testi-card {
    flex: 0 0 270px;
  }
}

/* ──────────────────────────────────────────────────────────────
   FINAL CTA SECTION WRAPPER
────────────────────────────────────────────────────────────── */

.section--cta-wrapper {
  background: var(--bg-surface);
  padding-block: var(--space-20);
}

@media (max-width: 768px) {
  .section--cta-wrapper { padding-block: var(--space-14); }
}