/*
  Boonuz Landing — Light energetic theme

  This stylesheet defines a fresh, optimistic look for the Boonuz landing page.
  Instead of a dark backdrop, we use a crisp, light background with colorful
  accents inspired by colour psychology for sales and energy. Bright reds and
  oranges stimulate excitement and impulse buying【7436341236472†L769-L787】【7436341236472†L808-L829】, while soft yellows
  add warmth and optimism. Clean cards and generous white space make the
  content easy to read and reinforce trust. The layout is fully responsive
  and adapts gracefully from desktop to mobile.

  Author: ChatGPT
*/

/* CSS reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-color);
  overflow-x: hidden;
}

/* Colour palette variables */
:root {
  --bg-color: #f8f9fc;
  --card-color: #ffffff;
  --card-alt: #f2f5fa;
  --primary-color: #e53935;
  --secondary-color: #fb8c00;
  --accent-color: #ffd54f;
  --text-dark: #222222;
  --text-muted: #555e6c;
  --border-color: #e0e6ef;
  --success-color: #43a047;

  /* Additional colours for modals and founders label */
  --founders-label-color: var(--accent-color);
}

/* Utility classes */
.section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
  color: var(--text-dark);
}

p {
  margin-bottom: 15px;
  color: var(--text-muted);
  font-size: 16px;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

/* Buttons */
.btn {
  display: inline-block;
  cursor: pointer;
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
  border: none;
}

.btn:hover {
  background-color: #c62828;
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 10px 22px;
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-small {
  padding: 8px 14px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
  text-align: center;
}

/* ===== Banner compacto: logo + demo arriba, chip centrado, contador centrado ===== */
.founders-banner{
  position: sticky; top: 0; z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo demo"
    "chips chips"
    "timer timer";
  align-items: center;
  row-gap: 6px; column-gap: 12px;
  padding: 6px 14px;              /* banner más bajo */
  background: linear-gradient(90deg,#101727 0%,#0b1220 45%,#101727 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Logo: más grande y bien pegado a la izquierda */
.logo-wrapper{ grid-area: logo; display:flex; align-items:center; }
.logo-img{
  height: clamp(42px, 6.2vw, 68px);
  width: auto; display: block;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.25));
}

/* Ver demo + nota SIEMPRE en una sola línea */
.demo-cta{
  grid-area: demo;
  display: inline-flex; align-items: center; justify-self: start;
  gap: .5rem; flex-wrap: nowrap;           /* ← no permite salto */
  min-width: 0;
  white-space: nowrap;                      /* ← no permite salto */
}
#founder-btn.btn.btn-small{
  padding: .44rem .78rem;                   /* botón más pequeño */
  border-radius: 10px; font-weight: 800;
  background: #e43d30; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 18px rgba(228,61,48,.28);
}
#founder-btn:hover{ transform: translateY(-1px); }
.demo-note{
  font-size: clamp(11px, 3.2vw, 14px);
  color: #dfe7f6;
  overflow: hidden; text-overflow: ellipsis; /* si no cabe, elipsis */
  max-width: 52vw;                           /* evita overflow lateral */
}

/* Chip centrado: Founders + cupos + Primer mes $0 (resaltado) */
.founders-banner-left{
  grid-area: chips;
  display: flex; justify-content: center; align-items: center;
  width: 100%;
}
.founders-label{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  font-weight: 700; color:#e9eef7; white-space: nowrap;
}
.founders-label strong{
  background: linear-gradient(90deg,#e43d30,#ff9475);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 900;
}
.label-muted{ opacity: .85; font-weight: 600; }
.chip-sep{ opacity: .6; margin-inline: .1rem; }

/* “Primer mes $0” dentro del mismo chip, pero destacado */
.founders-label .founders-message{
  display:inline-flex; align-items:center;
  padding: .26rem .55rem; border-radius: 999px;
  background: linear-gradient(90deg,#e43d30,#ff9475);
  color:#fff; font-weight: 900; border: 1px solid rgba(255,255,255,.18);
}

/* Contador centrado como chip */
.founders-countdown{
  grid-area: timer;
  justify-self: center;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .56rem; border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800; color: #e9eef7; white-space: nowrap;
}
.founders-countdown .cd-ico{ opacity:.9; }

/* Compatibilidad: ocultar contenedor antiguo de cupos si existe */
.founders-cupos{ display:none; }

/* Responsive fino */
@media (max-width: 520px){
  .founders-banner{ padding: 6px 10px; row-gap: 6px; }
  .demo-note{ max-width: 58vw; }
  #founder-btn.btn.btn-small{ padding: .42rem .72rem; }
}

/* Accesibilidad en foco */
#founder-btn:focus-visible{
  outline: 3px solid #ff9475; outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,148,117,.25);
}
/* ==== PATCH: quitar estilo de "botón" en Primer mes y contador ==== */

/* "Primer mes $0" como texto dentro del chip de Founders */
.founders-label .founders-message{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--accent, #e43d30) !important;  /* solo letras en color */
  font-weight: 900;
}

/* Contador centrado como texto (sin pastilla) */
.founders-countdown{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  justify-self: center;         /* sigue centrado en la grilla del banner */
  font-weight: 800;
  color: #e9eef7;
}
.founders-countdown .cd-ico{ margin-right: .35rem; opacity: .9; }

/* Afinar espacios del banner al quitar las pastillas */
.founders-banner{ row-gap: 4px !important; }
.founders-banner-left{ gap: .4rem !important; }

/* Asegurar que "Ver demo" + "Así se vería tu tienda" NO se separen */
.demo-cta{
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap !important;   /* no permite salto de línea */
  white-space: nowrap !important; /* no permite salto de línea */
}
.demo-note{
  font-size: clamp(11px, 3.2vw, 14px);
  color: #dfe7f6;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 52vw;                /* evita overflow lateral en móviles */
}

/* Botón de demo más compacto (por si aún parece grande) */
#founder-btn.btn.btn-small{
  padding: .42rem .7rem !important;
  border-radius: 10px;
}

/* En pantallas muy estrechas, mantener todo en la misma línea */
@media (max-width: 360px){
  .demo-note{ font-size: 11px; max-width: 58vw; }
  #founder-btn.btn.btn-small{ padding: .38rem .62rem; }
}

/* Hero */
/* ===== HERO — fondo sin blanqueo arriba, lectura mejorada ===== */

/* ============= TOKENS ============= */
:root{
  --hero-text:#fff;
  --hero-muted:#e7eef9;
  --hero-card-bg: rgba(9,13,23,.42);
  --hero-card-br: rgba(255,255,255,.30);
  --hero-card-in: rgba(255,255,255,.06);
  --hero-shadow: rgba(0,0,0,.30);
  --accent:#e43d30;
  --accent-2:#ff9475;

  /* Fondo */
  --img-opacity:.32;
  --ov-top:.55;
  --ov-bottom:.72;
  --vignette:.28;

  /* Margen seguro por barra superior */
  --safe-top:0px;
}
@media (min-width:1200px){
  :root{
    --img-opacity:.46;
    --ov-top:.50;
    --ov-bottom:.66;
    --vignette:.22;
  }
}
@media (max-width:480px){
  :root{ --safe-top:88px; }
}

/* ============= HERO + FONDO ============= */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,78vh,860px);
  display:grid; place-items:center;
  padding: calc(var(--safe-top) + clamp(24px,6vw,72px)) clamp(16px,5vw,48px);
  color:var(--hero-text);
  background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:var(--img-opacity);
  filter:brightness(.88) contrast(1.05) saturate(1.05);
  z-index:-2; pointer-events:none; user-select:none;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 340px at 50% 8%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(8,12,22,var(--ov-top)), rgba(8,12,22,var(--ov-bottom)));
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(1200px 600px at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,var(--vignette)) 100%);
}

/* ============= CONTENIDO ============= */
.hero-inner{ width:min(1100px,92vw); text-align:center; }

/* Título (conservar comportamiento) */
.hero-title{
  position:relative; margin:0 0 .6rem;
  font-weight:800; line-height:1.06; color:#fff;
  font-size:clamp(18px,5.2vw,46px);
  white-space:nowrap;
  overflow:visible;
  letter-spacing:-0.01em;
  text-shadow:0 3px 22px var(--hero-shadow);
}
.hero-title::before{
  content:""; position:absolute; inset:-.35em -.6em;
  background:rgba(8,12,22,.58); border:1px solid rgba(255,255,255,.26);
  border-radius:18px; z-index:-1; filter:blur(.6px);
}

/* Tagline (conservar comportamiento) */
.hero-tagline{
  position:relative; margin:0 auto 1.1rem;
  font-size:clamp(15px,2.1vw,18px); color:var(--hero-muted);
  max-width:68ch; text-shadow:0 2px 16px var(--hero-shadow);
  text-wrap:balance;
}
.hero-tagline strong{ color:#fff; }
.hero-tagline::before{
  content:""; position:absolute; inset:-.4em -.6em;
  background:rgba(8,12,22,.38); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; z-index:-1; filter:blur(.4px);
}

/* ============= BENEFICIOS (⛔ → ✅) ============= */
.hero-benefits{
  margin:1.1rem auto 1.25rem; padding:0; list-style:none;
  display:grid; gap:12px;
}

/* Cada fila contiene el par (contra → pro) */
.hero-benefits.hero-benefits--paired li{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:12px; position:relative; background:transparent; border:none; padding:0; box-shadow:none;
}
.hero-benefits.hero-benefits--paired li::after{
  content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px;
  transform:translateX(-1px);
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22),transparent);
  border-radius:2px;
}

/* CHIPS base */
.hero-chip{
  min-width:0; /* ← permite encoger contenido dentro del grid */
  display:flex; align-items:center; gap:.65rem;
  padding:.9rem 1rem; border-radius:16px;
  background:var(--hero-card-bg);
  border:1px solid var(--hero-card-br);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
  box-shadow: inset 0 1px 0 var(--hero-card-in), 0 14px 36px rgba(0,0,0,.18);
  color:#e9eef7; text-shadow:0 1px 1px rgba(0,0,0,.45);
  line-height:1.35; min-height:56px;
  hyphens:auto; word-break:normal; white-space:normal;
}
.hero-chip::before{
  content:""; width:26px; height:26px; flex:0 0 26px;
  display:grid; place-items:center; font-size:14px; font-weight:900;
  border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.28);
}
/* variantes */
.hero-chip.neg{ border-left:4px solid #ff6b6b; color:#ffd8d8; }
.hero-chip.neg::before{
  content:"⛔"; color:#ff6b6b; background:rgba(255,107,107,.18); border:2px solid rgba(255,107,107,.65);
}
.hero-chip.pos{ border-left:4px solid #33d17a; color:#dff6ea; }
.hero-chip.pos::before{
  content:"✅"; color:#33d17a; background:rgba(51,209,122,.18); border:2px solid rgba(51,209,122,.65);
}

/* ============= BOTONES ============= */
.hero-buttons{
  display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; margin-top:12px;
}
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:.95rem 1.15rem; border-radius:14px; color:#fff;
  background:var(--accent); border:1px solid transparent;
  box-shadow:0 14px 32px rgba(228,61,48,.32);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 18px 38px rgba(228,61,48,.38); }
.btn.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); box-shadow:none; }
.btn.btn-outline:hover{ background:rgba(255,255,255,.12); }

/* Badge descuento */
.annual-discount{
  display:inline-block; margin-top:.9rem; padding:.4rem .9rem;
  font-size:.96rem; border-radius:999px; color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px rgba(228,61,48,.28);
}

/* ==== Base: evitar desbordes laterales ==== */
*{ box-sizing:border-box; }
html, body{ width:100%; max-width:100%; overflow-x:hidden; }

/* ============= RESPONSIVE ============= */

/* ≤ 768px: apilar cada par y quitar divisor central */
@media (max-width: 768px){
  .hero-benefits.hero-benefits--paired li{
    grid-template-columns:1fr;
    gap:8px;
  }
  .hero-benefits.hero-benefits--paired li::after{ display:none; }
}

/* ≤ 480px: título y tagline compactos; chips en una sola línea con data-short */
@media (max-width: 480px){
  /* Título y tagline (idéntico a tu comportamiento) */
  .hero-title{
    white-space: nowrap !important;
    font-size: clamp(16px, 5vw, 22px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.2px !important;
  }
  .hero-title::before{ inset: -.28em -.48em !important; }
  .hero-tagline{
    font-size: clamp(13px, 3.4vw, 15px) !important;
    max-width: 34ch !important;
  }
  .hero-tagline::before{ inset: -.32em -.52em !important; }

  /* Chips compactos (sin cortar texto cuando no hay data-short) */
  .hero-chip{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(11.5px, 3.2vw, 13.5px) !important;
    min-height: 40px !important;
    padding: .58rem .8rem !important;
    border-radius: 14px !important;
    gap: .55rem !important;
  }
  .hero-chip::before{ width:22px !important; height:22px !important; font-size:12px !important; }

  /* Si HAY versión corta, úsala; si NO hay, se mantiene el texto largo */
  .hero-chip[data-short]{ font-size:0 !important; }
  .hero-chip[data-short]::after{
    content: attr(data-short);
    font-size: 13.5px; line-height:1; color:#e9eef7;
  }
}

/* ====== PATCH: quita el hueco entre banner y hero ====== */

/* 1) Desactiva el safe-top en todas las vistas (ya no lo necesitas con sticky) */
:root{ --safe-top: 0px !important; }

/* 2) Compacta un poco el padding superior del hero */
.hero{
  /* antes: padding-top: calc(var(--safe-top) + clamp(24px,6vw,72px)) */
  padding-top: clamp(12px, 4.5vw, 36px) !important;
}

/* 3) Banner un pelín más bajo para reforzar el efecto */
.founders-banner{
  padding-block: 6px 8px !important; /* arriba/abajo */
}

/* (opcional) en móvil, aún más compacto */
@media (max-width: 520px){
  .hero{ padding-top: clamp(8px, 3.8vw, 24px) !important; }
}

/* Steps (How it works) */
/* =========================
   ¿Cómo implementamos Boonuz? (bonito + responsive)
   Mantiene clases/IDs originales
   ========================= */

/* Título centrado con acento */
.section.how-works > h2 {
  text-align: center;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.15rem);
  line-height: 1.15;
  margin: 0 auto .75rem;
}
.section.how-works > h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: .6rem auto 0;
  background: var(--primary-color, #e43d30);
  border-radius: 999px;
}

/* Grid responsivo */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2.5vw, 24px);
  margin-top: 22px;
}

/* Tarjetas */
.step {
  background: var(--card-color, #fff);
  border: 1px solid var(--border-color, #e8ecf2);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--primary-color, #e43d30) 35%, #ffffff);
}

/* Número circular */
.step-number {
  --p: var(--primary-color, #e43d30);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-bottom: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--p) 85%, #0000) 0%,
    color-mix(in srgb, var(--p) 60%, #0000) 100%);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--p) 35%, transparent);
}

/* Títulos y texto de cada paso */
.step h3 {
  text-align: center;
  font-size: clamp(1.05rem, .8rem + .6vw, 1.25rem);
  margin: 2px 0 8px;
}
.step p {
  margin: 0;
  color: var(--text-muted, #5b6573);
  line-height: 1.55;
}

/* Resalta automáticamente lo importante (lo que esté en <strong>) */
.section.how-works p strong {
  color: var(--primary-color, #e43d30);
  font-weight: 700;
}

/* Ajustes móviles */
@media (max-width: 640px) {
  .steps-grid { gap: 12px; }
  .step { text-align: center; }
  .step-number { margin-inline: auto; }
}
/* ==== Título con acento elegante ==== */
/* Opción segura: subrayado degradado sutil bajo el título */
.hero-title::after{
  content:""; display:block;
  width: max(140px, 28%); height: 3px;
  margin: .22em auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px; opacity: .9;
}

/* Si quieres colorear solo una palabra del título, envuélvela con <span class="title-accent"> */
.hero-title .title-accent{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 900;
}

/* ==== Resaltado de palabras clave en el tagline ==== */
.hero-tagline .hl{           /* acento principal */
  color: var(--accent);
  font-weight: 800;
}
.hero-tagline .hl-2{         /* segundo acento */
  color: var(--accent-2);
  font-weight: 800;
}
/* versión con subrayado “ink” (opcional: quita si prefieres solo color) */
.hero-tagline .hl-u{
  background: linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--accent) 28%, transparent) 0);
}

/* Ajustes móviles: mantener legibilidad sin romper líneas */
@media (max-width:480px){
  .hero-title::after{ height: 2px; width: 42%; }
  .hero-tagline .hl, .hero-tagline .hl-2{ font-weight: 800; }
}


/* Why Boonuz */
/* =========================
   ¿Por qué Boonuz? — bonito + responsive
   ========================= */

/* Título centrado con acento */
.section.why > h2 {
  text-align: center;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem);
  line-height: 1.15;
  margin: 0 auto .75rem;
}
.section.why > h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: .6rem auto 0;
  background: var(--primary-color, #e43d30);
  border-radius: 999px;
}

/* Grid responsivo */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: 22px;
}

/* Tarjetas */
.why-item {
  position: relative;
  background: var(--card-color, #fff);
  border: 1px solid var(--border-color, #e8ecf2);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Barra de acento superior */
.why-item::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--primary-color, #e43d30);
  border-radius: 16px 16px 0 0;
  opacity: .9;
}

.why-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--primary-color, #e43d30) 30%, #ffffff);
}

/* Títulos y texto */
.why-item h3 {
  text-align: center;
  margin: 4px 0 10px;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.25rem);
  line-height: 1.25;
}
.why-item p {
  margin: 0;
  color: var(--text-muted, #5b6573);
  line-height: 1.6;
  font-size: clamp(.96rem, .88rem + .25vw, 1.06rem);
}

/* Resalta automáticamente lo importante */
.section.why p strong {
  color: var(--primary-color, #e43d30);
  font-weight: 700;
}

/* Ajustes móviles */
@media (max-width: 640px) {
  .section.why { padding-inline: 16px; }
  .why-grid { gap: 12px; }
  .why-item { text-align: center; }
}

/* Video section */
.video {
  text-align: center;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin-top: 20px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Plans */
/* =========================================================
   PLANS 2.0 — limpio, ordenado, responsive y con destacados
   ========================================================= */

/* Título + sublínea */
.section.plans > h2{
  text-align:center;
  font-size:clamp(1.6rem,1rem + 2.2vw,2.2rem);
  line-height:1.15;margin:0 auto .75rem;
}
.section.plans > h2::after{
  content:"";display:block;width:96px;height:4px;margin:.6rem auto 0;
  background:var(--primary-color,#e43d30);border-radius:999px;
}

/* Línea y descripción */
.plan-line-title{
  margin:28px 0 4px;
  font-size:clamp(1.1rem,.9rem + .6vw,1.35rem);
}
.plan-line-desc{color:var(--text-muted,#5b6573);margin:0 0 12px;}

/* Grid responsivo y consistente */
.plan-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,2.2vw,22px);
  margin-top:12px;
}

/* Tarjeta base (flex para evitar montajes) */
.plan-card{
  --pad:22px; --radius:18px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:stretch;
  background:var(--card-color,#fff);
  border:1px solid var(--border-color,#e8ecf2);
  border-radius:var(--radius);
  padding:var(--pad);
  /* espacio extra si hay badge (se ajusta por selector) */
  padding-top:calc(var(--pad) + var(--badge-offset,0px));
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-color:color-mix(in srgb,var(--primary-color,#e43d30) 28%,#fff);
}

/* Título de plan */
.plan-card h4{
  margin:0 0 6px; text-align:center;
  font-size:clamp(1.06rem,.9rem + .55vw,1.28rem);
  line-height:1.25; word-break:break-word;
}

/* Precio SIEMPRE visible (sin gris) */
.plan-price{
  text-align:center; margin:4px 0 14px;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.45rem,1rem + 1.25vw,2.1rem);
  color:var(--heading-color,#1c212b);   /* <- no gris */
}
.plan-price span{
  font-weight:600; font-size:.6em; color:var(--text-muted,#5b6573);
}

/* Lista de features ordenada */
.plan-features{list-style:none; margin:0 0 16px; padding:0;}
.plan-features li{
  margin:7px 0; line-height:1.45;
  color:var(--text-muted,#5b6573);
}

/* Botón al pie, sin montarse */
.plan-card .btn.choose-plan{
  margin-top:auto;  /* pega el botón al fondo de la tarjeta */
  display:inline-block; width:100%; text-align:center;
  border-radius:10px; padding:.7rem 1rem; font-weight:700;
  border:1px solid var(--primary-color,#e43d30);
  color:#fff; background:var(--primary-color,#e43d30);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.plan-card .btn.choose-plan:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px color-mix(in srgb,var(--primary-color,#e43d30) 32%,transparent);
}

/* =============== DESTACADOS =============== */

/* 1) Recomendado genérico (si ya trae .recommended en HTML) */
.plan-card.recommended{
  border-color:color-mix(in srgb,var(--primary-color,#e43d30) 42%,#fff);
  box-shadow:0 16px 40px color-mix(in srgb,var(--primary-color,#e43d30) 24%,transparent);
  transform:translateY(-2px);
}
.plan-card.recommended .badge{
  background:var(--primary-color,#e43d30); color:#fff;
  font-size:.72rem; font-weight:800; padding:.18rem .5rem;
  border-radius:999px; margin-left:.35rem;
}
.plan-card.recommended .plan-price{ color:var(--primary-color,#e43d30); }

/* 2) Recomendado en "Solo" (2ª tarjeta, sin tocar HTML) */
.plan-cards.solo .plan-card:nth-child(2){
  --badge-offset:28px;   /* baja contenido para que no choque con el badge */
  border-color:color-mix(in srgb,var(--primary-color,#e43d30) 42%,#fff);
  box-shadow:0 16px 40px color-mix(in srgb,var(--primary-color,#e43d30) 24%,transparent);
  transform:translateY(-2px);
}
.plan-cards.solo .plan-card:nth-child(2)::before{
  content:"Recomendado";
  position:absolute; top:10px; right:10px; z-index:1;
  padding:.24rem .6rem; font-size:.72rem; font-weight:800;
  color:#fff; background:var(--primary-color,#e43d30);
  border-radius:999px;
}
.plan-cards.solo .plan-card:nth-child(2) .plan-price{ color:var(--primary-color,#e43d30); }

/* 3) Exclusividad anual (última tarjeta Boonuz) */
.plan-cards.boonuz .plan-card:last-child{
  --badge-offset:28px;
  border-width:2px;
  border-color:color-mix(in srgb,var(--primary-color,#e43d30) 52%,#fff);
  box-shadow:0 18px 44px color-mix(in srgb,var(--primary-color,#e43d30) 26%,transparent);
}
.plan-cards.boonuz .plan-card:last-child::before{
  content:"★ Exclusividad ";
  position:absolute; top:10px; left:10px; z-index:1;
  padding:.24rem .6rem; font-size:.72rem; font-weight:800;
  color:var(--primary-color,#e43d30);
  background:color-mix(in srgb,var(--primary-color,#e43d30) 15%,#fff);
  border:1px solid color-mix(in srgb,var(--primary-color,#e43d30) 40%,#fff);
  border-radius:999px;
}
.plan-cards.boonuz .plan-card:last-child .plan-price{ color:var(--primary-color,#e43d30); }

/* =============== MICRO-DETALLES =============== */
.plan-card h4, .plan-line-title { letter-spacing:.2px; }
.plan-card * { word-break:keep-all; }
.plan-card h4, .plan-price, .plan-features, .plan-card .btn { position:relative; z-index:0; }

/* =============== BREAKPOINTS =============== */
@media (max-width: 960px){
  .section.plans{ padding-inline:16px; }
}
@media (max-width: 640px){
  .plan-cards{ gap:12px; }
  .plan-card{ --pad:18px; }
  .plan-card::before{ transform:scale(.98); }
}

/* Note text under plans */
.note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Comparativa */
/* ================================
   Comparativa — bonito + responsive
   ================================ */

.section.comparativa > h2{
  text-align:center;
  font-size:clamp(1.5rem,1rem + 2vw,2.1rem);
  margin:0 auto .75rem;
  line-height:1.15;
}
.section.comparativa > h2::after{
  content:""; display:block; width:90px; height:4px; margin:.6rem auto 0;
  background:var(--primary-color,#e43d30); border-radius:999px;
}

/* Wrapper con scroll horizontal en móviles */
.comparativa-table{
  display:grid; gap:clamp(14px,2.2vw,22px);
  margin-top:14px;
}
.comparativa-table table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--card-color,#fff);
  border:1px solid var(--border-color,#e8ecf2);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  min-width:720px; /* fuerza scroll en pantallas muy pequeñas */
}
.comparativa-table{
  overflow-x:auto; padding-bottom:6px;
}

/* Caption tipo chip */
.comparativa-table table caption{
  caption-side:top;
  text-align:left;
  font-weight:800;
  padding:12px 16px;
  color:var(--primary-color,#e43d30);
  background:color-mix(in srgb,var(--primary-color,#e43d30) 10%, #fff);
  border-bottom:1px solid var(--border-color,#e8ecf2);
}

/* Encabezado */
.comparativa-table thead th{
  background:color-mix(in srgb,var(--primary-color,#e43d30) 7%, #fff);
  color:var(--heading-color,#1c212b);
  font-weight:800;
  padding:12px 14px;
  text-align:center;
  white-space:nowrap;
  border-bottom:1px solid var(--border-color,#e8ecf2);
}
.comparativa-table thead th:first-child{
  text-align:left;
}

/* Filas y celdas */
.comparativa-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--border-color,#eef2f6);
  color:var(--text-muted,#5b6573);
  vertical-align:top;
}
.comparativa-table tbody tr:last-child td{
  border-bottom:none;
}

/* Zebra suave */
.comparativa-table tbody tr:nth-child(odd) td{
  background:color-mix(in srgb,#000 2%, #fff);
}

/* Columna Boonuz (2ª) destacada en toda la tabla */
.comparativa-table td:nth-child(2),
.comparativa-table th:nth-child(2){
  background:color-mix(in srgb,var(--primary-color,#e43d30) 8%, #fff);
  font-weight:700;
  color:var(--heading-color,#1c212b);
}

/* Resaltar palabras clave dentro de celdas */
.comparativa-table td strong{
  color:var(--primary-color,#e43d30);
  font-weight:800;
}

/* Responsive tweaks */
@media (max-width: 800px){
  .comparativa-table table{ min-width:640px; }
}
@media (max-width: 560px){
  .comparativa-table table{ min-width:560px; }
  .comparativa-table thead th, .comparativa-table tbody td{
    padding:10px 12px; font-size:.95rem;
  }
}


/* Forms */
.contact-form {
  background-color: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  z-index: 1000;
}

.modal-content {
  background-color: var(--card-color);
  border-radius: 12px;
  padding: 25px;
  /* Make the modal content responsive. The width will shrink on small screens */
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: var(--text-dark);
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  color: var(--primary-color);
}

.contact-form h3 {
  margin-bottom: 15px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
}

.form-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-alt);
  color: var(--text-dark);
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.contact-form .btn {
  margin-top: 15px;
}

/* Footer */
.footer {
  margin-top: 40px;
  padding: 40px 20px;
  background-color: #eef2f8;
  color: var(--text-dark);
  text-align: center;
}

.footer-payments {
  margin-bottom: 15px;
  font-size: 14px;
}

.footer-nav {
  margin-bottom: 15px;
}

.footer-nav a {
  margin: 0 10px;
  color: var(--primary-color);
  font-size: 14px;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-legal {
  font-size: 12px;
  color: var(--text-muted);
}

/* Admin panel styles */
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.stat {
  background-color: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  flex: 1 1 200px;
  text-align: center;
}

.stat h4 {
  margin-bottom: 5px;
  font-size: 18px;
  color: var(--text-dark);
}

.stat p {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.leads-table th,
.leads-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-dark);
}

.leads-table th {
  background-color: var(--card-alt);
  font-weight: 600;
}

.leads-table tr:last-child td {
  border-bottom: none;
}

.leads-table select {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--card-alt);
  color: var(--text-dark);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }
  .plan-cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  /* Ensure modals fill more width on medium screens */
  .modal-content {
    max-width: 95%;
  }
  /* Break form grid into one column on medium screens */
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Additional responsive tweaks for medium screens */
@media (max-width: 600px) {
  .section {
    padding: 40px 10px;
  }
  .hero {
    padding: 60px 10px;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-tagline {
    font-size: 18px;
  }
  /* Stack founders banner vertically on small screens */
  .founders-banner {
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
  }
  .founders-banner-left,
  .founders-banner-right {
    width: 100%;
    margin-bottom: 6px;
    justify-content: flex-start;
  }
  .plan-cards {
    grid-template-columns: 1fr;
  }
  .steps-grid,
  .why-grid,
  .comparativa-table {
    grid-template-columns: 1fr;
  }
  .modal-content {
    /* On very small screens allow modal to grow a bit wider */
    max-width: 95%;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero-buttons .btn {
    width: 100%;
    text-align: center;
  }
}

/* Even smaller screens: adjust forms and modals */
@media (max-width: 480px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .modal-content {
    max-width: 95%;
    padding: 20px;
  }
  /* Adjust spacing for logo wrapper on very small screens */
  .logo-wrapper {
    margin-right: 8px;
  }
  .founders-banner {
    font-size: 12px;
    padding: 8px 15px;
  }
  .founders-banner-left {
    gap: 8px;
  }
  .founders-banner-right {
    gap: 10px;
  }
}

/* Additional responsive tweaks for medium screens to improve modal forms */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .modal-content {
    max-width: 95%;
  }
}

/* Admin table styling (unify with leads table) */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-dark);
}

.admin-table th {
  background-color: var(--card-alt);
  font-weight: 600;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table select {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--card-alt);
  color: var(--text-dark);
}

/* Styles for login page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--bg-color);
}

.login-container {
  background-color: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 40px 30px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-form .form-group {
  margin-bottom: 20px;
  text-align: left;
}

.login-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--text-dark);
}

.login-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-alt);
  color: var(--text-dark);
  font-size: 14px;
}

.login-form .btn {
  width: 100%;
  margin-top: 10px;
}

.error-message {
  color: var(--primary-color);
  margin-top: 10px;
  font-size: 14px;
}

/* Visitor country list */
.visitor-country-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px;
}

.visitor-country-list li {
  margin-bottom: 4px;
  color: var(--text-dark);
  font-size: 14px;
}

/* Status colours for admin panel */
.status-green { color: var(--success-color); }
.status-orange { color: var(--secondary-color); }
.status-red { color: var(--primary-color); }
/* === Boonuz – Modal de planes (responsive, sin scroll horizontal) === */
/* Todo scopeado al #plan-modal para no romper estilos globales */

#plan-modal,
#plan-modal * {
  box-sizing: border-box;
}

/* Overlay */
#plan-modal.modal {
  position: fixed;
  inset: 0;
  display: none;                 /* se muestra con JS */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 18, 28, 0.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
  overflow: hidden;              /* evita scroll del overlay */
}

/* Contenedor */
#plan-modal .modal-content {
  position: relative;
  width: min(940px, 100%);
  max-width: calc(100vw - 40px); /* asegura que nunca desborde el viewport */
  max-height: 92vh;
  overflow-y: auto;              /* scroll vertical si hace falta */
  overflow-x: hidden;            /* JAMÁS horizontal */
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 50px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.12);
  padding: 28px 24px 22px;
  border: 1px solid rgba(2, 6, 23, 0.06);
  animation: planModalIn .24s ease-out both;
}

/* Animación */
@keyframes planModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Botón cerrar */
#plan-modal .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 999px;
  border: 1px solid rgba(2, 6, 23, 0.08);
  background: #fff;
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
#plan-modal .modal-close:hover {
  background: #f8fafc;
  transform: scale(1.06);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Título */
#plan-modal #modal-title {
  margin: 6px 8px 18px;
  font-size: clamp(1.1rem, 1.2rem + .5vw, 1.6rem);
  line-height: 1.25;
  color: #0f172a;
  font-weight: 800;
  word-break: break-word;
}

/* Grid del formulario (ordenado y fluido) */
#plan-modal .grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);              /* previene overflow */
  margin: 0 4px 18px;
}
@media (min-width: 560px) {
  #plan-modal .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 920px) {
  #plan-modal .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cada control */
#plan-modal .grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .92rem;
  color: #0b1220;
  font-weight: 600;
  min-width: 0;                  /* permite que el contenido se encoja sin desbordar */
  max-width: 100%;
}
#plan-modal .grid > label.full {
  grid-column: 1 / -1;
}

/* Campos de entrada */
#plan-modal input[type="text"],
#plan-modal input[type="email"],
#plan-modal select,
#plan-modal textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;               /* clave contra scroll horizontal */
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 0.95rem;
  line-height: 1.25;
  min-height: 44px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  word-break: break-word;
}

/* Placeholders */
#plan-modal ::placeholder { color: #94a3b8; }

/* Focus */
#plan-modal input:focus,
#plan-modal select:focus,
#plan-modal textarea:focus {
  border-color: #e11d2e;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.15);
}

/* Select: caret sin desbordar */
#plan-modal select {
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    right 18px center,
    right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Resumen de precio */
#plan-modal #price-summary {
  background: #fff7f7;
  border-color: #fecaca !important;
  color: #7f1d1d;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Textarea */
#plan-modal textarea {
  min-height: 110px;
  resize: vertical;
}

/* Botón primario */
#plan-modal #plan-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #ef4444, #e11d2e);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(225, 29, 46, .25), 0 2px 6px rgba(0,0,0,.08);
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
}
#plan-modal #plan-submit:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 24px rgba(225, 29, 46, .28), 0 3px 8px rgba(0,0,0,.1);
}
#plan-modal #plan-submit:active { transform: translateY(1px); }

/* Botón sticky en móviles (no genera ancho extra) */
@media (max-width: 560px) {
  #plan-modal .modal-content {
    padding-bottom: 82px;
  }
  #plan-modal #plan-submit {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;            /* asegura encaje sin overflow */
    width: 100%;
    border-radius: 14px;
    margin-top: 6px;
  }
}

/* Scrollbar suave dentro del modal */
#plan-modal .modal-content::-webkit-scrollbar { width: 10px; }
#plan-modal .modal-content::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 8px;
}
#plan-modal .modal-content:hover::-webkit-scrollbar-thumb { background: #d1d5db; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #plan-modal .modal-content { animation: none; }
  #plan-modal #plan-submit,
  #plan-modal .modal-close { transition: none; }
}
/* ——— Mostrar COMPLETO el “Resumen / Precio” ——— */
/* Hace que el campo ocupe TODA la fila y, si aún sobra texto, permita
   scroll horizontal dentro del input (no en el modal). No cambia tu HTML. */

/* el label que contiene #price-summary ocupa de 1 a -1 columnas */
#plan-modal .grid > label:has(#price-summary) {
  grid-column: 1 / -1;
}

/* el input se adapta al ancho disponible y no se corta con “…” */
#plan-modal #price-summary {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;          /* una sola línea */
  overflow-x: auto;             /* si no cabe, scroll dentro del input */
  overflow-y: hidden;
  text-overflow: clip;          /* sin elipsis */
  -webkit-overflow-scrolling: touch;
  font-weight: 800;             /* mantén el énfasis */
}

/* Evita que el grid/labels provoquen overflow lateral */
#plan-modal .grid,
#plan-modal .grid > label {
  min-width: 0;
}

/* En pantallas muy pequeñas baja un poco el tamaño para que quepa más */
@media (max-width: 420px) {
  #plan-modal #price-summary { font-size: 0.9rem; }
}
/* ===== PATCH: Compactar espacios verticales de toda la landing ===== */

/* 0) Ritmo base (puedes ajustar estos tres) */
:root{
  --vr-xxs: .25rem;   /* 4px aprox */
  --vr-xs:  .5rem;    /* 8px */
  --vr-s:   .75rem;   /* 12px */
  --vr-m:   1rem;     /* 16px */
}

/* 1) Título/hero más pegado al banner */
.hero{
  padding-top: clamp(8px, 3.8vw, 20px) !important;
  padding-bottom: clamp(10px, 4vw, 22px) !important;
}
.hero-title{ margin: 0 0 var(--vr-xs) !important; }
.hero-tagline{ margin: 0 auto var(--vr-s) !important; }
.hero-benefits{ margin: var(--vr-xs) auto var(--vr-s) !important; }
.hero-buttons{ margin-top: var(--vr-xs) !important; }
.annual-discount{ margin-top: var(--vr-xxs) !important; }

/* 2) Banner founders aún más compacto */
.founders-banner{ padding-block: 6px 8px !important; row-gap: 4px !important; }
.founders-banner-left{ gap: .4rem !important; }

/* 3) Secciones generales: menos respiro arriba/abajo */
.section{
  padding-top: clamp(18px, 4.5vw, 36px) !important;
  padding-bottom: clamp(18px, 4.5vw, 36px) !important;
}

/* 4) Títulos y párrafos dentro de secciones */
.section h2{ margin: 0 0 var(--vr-s) !important; }
.section h3{ margin: var(--vr-xs) 0 var(--vr-xxs) !important; }
.section p{  margin: 0 0 var(--vr-s) !important; }

/* 5) ¿Cómo funciona? (steps) */
.how-works .steps-grid{ gap: .75rem !important; }
.how-works .step{ padding: .75rem !important; }
.how-works .step h3{ margin-bottom: var(--vr-xxs) !important; }

/* 6) Por qué Boonuz (why) */
.why .why-grid{ gap: .75rem !important; }
.why .why-item{ padding: .85rem !important; }
.why .why-item h3{ margin-bottom: var(--vr-xxs) !important; }

/* 7) Video */
.video .video-wrapper{ margin-top: var(--vr-xs) !important; }

/* 9) Comparativa */
.comparativa .comparativa-table table{ margin: var(--vr-xs) 0 !important; }

/* 10) FAQ */
.faq .faq-list details{ margin: 0 0 .5rem !important; }
.faq .faq-list details[open]{ margin-bottom: .6rem !important; }

/* 11) Footer más breve */
.footer .footer-payments{ margin: 0 0 var(--vr-s) !important; }
.footer .footer-nav{ gap: .6rem !important; margin: 0 0 var(--vr-xs) !important; }
.footer .footer-legal{ margin: 0 !important; }

/* 12) Ajustes móviles extra compactos */
@media (max-width: 520px){
  .section{ padding-top: 16px !important; padding-bottom: 16px !important; }
  .why .why-item, .how-works .step, .plan-card{ padding: .75rem !important; }
  .plan-cards{ gap: .6rem !important; }
  .hero-buttons .btn{ margin-bottom: var(--vr-xxs) !important; }
}
/* ===== Modal de planes – estilos responsivos y selects ===== */
#plan-modal {
  position: fixed; inset: 0; display: none; place-items: center;
  padding: clamp(12px, 3vw, 24px);
  background: color-mix(in srgb, #000 65%, transparent);
  backdrop-filter: blur(2px);
  z-index: 9999;
}

#plan-modal .modal-content{
  width: min(860px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 16px;
  background: #fff;
  color: #111;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: clamp(16px, 2.5vw, 28px);
}

#plan-modal .modal-close{
  position: sticky; top: 0; margin-left: auto;
  border: 0; background: transparent; font-size: 24px; line-height: 1;
  padding: 8px; cursor: pointer; color: #666;
}
#plan-modal .modal-close:hover{ color:#000; }

#plan-modal h3#modal-title{
  margin: 4px 0 14px; font-size: clamp(18px, 2.4vw, 24px);
}

#plan-modal .grid{
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#plan-modal .grid .full{ grid-column: 1 / -1; }
@media (max-width: 640px){
  #plan-modal .grid{ grid-template-columns: 1fr; }
}

#plan-modal label{
  display: grid; gap: 6px;
  font-weight: 600; font-size: 0.95rem;
}

#plan-modal input,
#plan-modal select,
#plan-modal textarea{
  width: 100%;
  min-height: 44px; /* diana táctil */
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff; color:#111;
  font: 500 1rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline: none;
}
#plan-modal input::placeholder,
#plan-modal textarea::placeholder{ color:#9aa0a6; }

#plan-modal input:focus,
#plan-modal select:focus,
#plan-modal textarea:focus{
  border-color: #7c3aed33;
  box-shadow: 0 0 0 4px #7c3aed1f;
}

/* Select con caret */
#plan-modal select{
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* Botón submit a ancho completo en móvil */
#plan-modal #plan-submit{
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 700;
}

/* Texto del “Resumen / Precio” con look de lectura */
#plan-modal #price-summary{
  background: #fafafa;
  border-style: dashed;
  font-weight: 600;
}

/* Mejor legibilidad de <option> en sistemas que respetan estilos */
#plan-modal select option{
  font-size: 0.98rem;
}
/* ===== Audiencia (chips bajo héroe) ===== */
.audience-chips{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin-top:10px; justify-content:center;
}
.aud-chip{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  background: color-mix(in srgb, #0b1321 70%, transparent);
  color:#e9eefb; border-radius:999px;
  font-weight:600; font-size:clamp(.85rem, 1.6vw, .95rem);
  box-shadow: 0 4px 14px rgba(0,0,0,.18) inset;
  white-space:nowrap;
}
/* ===== Marquee de chips (banner continuo) ===== */
.audience-marquee{
  --speed: 26s;        /* más grande = más lento */
  --gap: 12px;
  position: relative;
  overflow: hidden;
  margin: 10px 0 6px;
  /* Fade en bordes, sin depender del color de fondo */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.audience-track{
  display: flex;
  width: max-content;              /* se expande según contenido */
  gap: var(--gap);
  animation: audience-marquee var(--speed) linear infinite;
  will-change: transform;
}

.audience-marquee:hover .audience-track{
  animation-play-state: paused;    /* accesible */
}

@keyframes audience-marquee{
  to { transform: translateX(-50%); } /* se mueve media pista (porque hay 2 copias) */
}

/* Ajustes de la tira (no envolver, un solo renglón) */
.audience-chips{
  display: flex;
  flex-wrap: nowrap;               /* clave para marquee */
  align-items: center;
  gap: var(--gap);
}

/* Tus estilos existentes de .aud-chip funcionan igual */
/* (si quieres compactarlas un poquito en móvil): */
@media (max-width: 640px){
  .audience-marquee{ --speed: 20s; --gap: 10px; }
  .aud-chip{ padding: 6px 10px; font-size: clamp(.82rem, 3.4vw, .92rem); }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .audience-track{ animation: none; }
}