/* ==================================================
   BOLETIX HOME CSS v3.0
   Página principal de ventas — rediseño (DEC-0085)
   Requiere: boletix-base.css

   Principios de este rediseño:
   - Un solo acento (--bx-primary), sin degradados oscuros genéricos.
   - Composición asimétrica: columnas desiguales, bloques descentrados.
   - Máximo un "eyebrow" por cada 3 secciones (aquí solo el del hero).
   - Cada sección usa una familia de layout distinta (nada de 3 tarjetas
     iguales repetidas, nada de zig-zag imagen/texto más de 2 veces seguidas).
================================================== */

/* ===== EYEBROW (usado una sola vez, en el hero) ===== */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--bx-primary);
}

.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bx-primary);
}

/* ===== HERO ===== */

.home-hero{
  position:relative;
  overflow:hidden;
  background:var(--bx-bg);
  padding-top:56px;
  padding-bottom:64px;
}

.hero-grid{
  display:grid;
  gap:48px;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.hero-title{
  margin-top:18px;
  font-size:2.35rem;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.01em;
  max-width:15ch;
}

.hero-title span{
  color:var(--bx-primary);
}

.hero-text{
  margin-top:22px;
  font-size:1.05rem;
  color:var(--bx-text-soft);
  max-width:46ch;
}

.hero-actions{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* Visual del hero: descentrado a propósito, con un bloque plano de color
   detrás (no un glow ni degradado) para romper la composición centrada. */
.hero-visual{
  position:relative;
  justify-self:center;
}

.hero-visual::before{
  content:"";
  position:absolute;
  top:-24px;
  right:-24px;
  width:78%;
  height:88%;
  background:var(--bx-primary);
  opacity:.08;
  border-radius:var(--bx-radius-lg);
  z-index:0;
}

.hero-dashboard-image{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  height:auto;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(17,24,39,.14);
}

/* ===== PROOF STRIP (reemplaza hero-benefits + trust-strip) =====
   Patrón número/etiqueta en vez de lista con checks, para no repetir la
   familia de layout del bento de abajo. */

.proof-strip{
  padding:40px 0;
  border-top:1px solid var(--bx-border);
  border-bottom:1px solid var(--bx-border);
  background:var(--bx-bg-soft);
}

.proof-grid{
  display:grid;
  gap:28px;
}

.proof-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.proof-item strong{
  font-size:1.15rem;
  font-weight:800;
  color:var(--bx-text);
}

.proof-item span{
  font-size:.92rem;
  color:var(--bx-text-soft);
  line-height:1.5;
}

/* ===== FEATURES — BENTO ASIMÉTRICO =====
   6 celdas para 6 funciones: una celda grande con fondo tintado (no
   oscuro), y variación real de fondo en 2 celdas más para que no se vea
   "todo blanco con texto adentro". */

.features-section{
  background:var(--bx-bg);
}

.bento-grid{
  margin-top:44px;
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}

.bento-cell{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px;
  border-radius:var(--bx-radius);
  background:var(--bx-bg);
  border:1px solid var(--bx-border);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}

.bento-cell:hover{
  transform:translateY(-4px);
  box-shadow:var(--bx-shadow);
  border-color:transparent;
}

.bento-icon{
  width:48px;
  height:48px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f0ff;
  flex-shrink:0;
}

/* Sin esto, los <svg> de los íconos se rellenan en negro sólido por
   defecto del navegador (se ven como cuadros negros en vez de líneas). */
.bento-icon svg{
  width:26px;
  height:26px;
  stroke:var(--bx-primary);
  stroke-width:1.75;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bento-cell h3{
  font-size:1.08rem;
  font-weight:700;
}

.bento-cell p{
  color:var(--bx-text-soft);
  font-size:.94rem;
  line-height:1.55;
}

/* Celda destacada: fondo tintado con la marca (no negro/degradado), texto
   siempre oscuro para mantener contraste AA. */
.bento-cell--feature{
  background:linear-gradient(160deg, #f3f0ff 0%, #ede7ff 100%);
  border-color:transparent;
}

.bento-cell--feature .bento-icon{
  background:#ffffff;
}

/* Segunda variación de fondo, más sutil, para cumplir la diversidad del
   bento sin caer en "todo blanco". */
.bento-cell--tint{
  background:var(--bx-bg-soft);
  border-color:transparent;
}

/* ===== CÓMO FUNCIONA — timeline conectada ===== */

.how-section{
  background:var(--bx-bg-soft);
}

.timeline{
  margin-top:48px;
  display:grid;
  gap:0;
}

.timeline-step{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:20px;
  padding-bottom:36px;
}

.timeline-step:last-child{
  padding-bottom:0;
}

.timeline-marker{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--bx-primary);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.05rem;
  position:relative;
  z-index:2;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.timeline-step:hover .timeline-marker{
  transform:scale(1.08);
}

.timeline-step:not(:last-child)::before{
  content:"";
  position:absolute;
  top:44px;
  left:21px;
  width:2px;
  bottom:0;
  background:var(--bx-border);
  z-index:1;
}

.timeline-body{
  padding-top:8px;
}

.timeline-body h3{
  font-size:1.15rem;
  font-weight:700;
}

.timeline-body p{
  margin-top:8px;
  color:var(--bx-text-soft);
}

/* ===== PROOF SHOWCASE (reemplaza la sección oscura "Excel") =====
   Mismo mensaje (deja el Excel), pero sin fondo negro con degradado:
   fondo claro, imagen real a la izquierda esta vez (invierte el split
   del hero para no repetir el mismo lado dos veces seguidas), y
   estadísticas grandes en vez de una lista de checks más. */

.excel-section{
  background:var(--bx-bg);
  overflow:hidden;
}

.excel-content{
  display:grid;
  gap:40px;
  align-items:center;
}

.excel-content .section-title,
.excel-content .section-subtitle{
  text-align:left;
  margin-left:0;
  margin-right:0;
  max-width:none;
}

.admin-preview{
  position:relative;
}

.admin-preview::before{
  content:"";
  position:absolute;
  bottom:-20px;
  left:-20px;
  width:70%;
  height:80%;
  background:var(--bx-primary);
  opacity:.07;
  border-radius:var(--bx-radius-lg);
  z-index:0;
}

.admin-preview-img{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  display:block;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(17,24,39,.14);
}

.excel-list{
  margin-top:20px;
  display:grid;
  gap:12px;
}

.excel-list li{
  display:flex;
  gap:10px;
  color:var(--bx-text-soft);
  align-items:flex-start;
  font-size:.96rem;
}

.excel-list li .icon-check{
  color:var(--bx-primary);
  flex-shrink:0;
  margin-top:2px;
}

.stat-row{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  padding-top:24px;
  border-top:1px solid var(--bx-border);
}

.stat-value{
  display:block;
  font-size:1.5rem;
  font-weight:800;
  color:var(--bx-text);
  font-variant-numeric:tabular-nums;
}

.stat-label{
  display:block;
  margin-top:4px;
  font-size:.78rem;
  color:var(--bx-text-soft);
  line-height:1.4;
}

.stat-disclaimer{
  margin-top:14px;
  font-size:.78rem;
  color:var(--bx-text-soft);
  opacity:.8;
}

/* ===== PRICING — comparación asimétrica ===== */

.pricing-section{
  background:var(--bx-bg-soft);
}

.pricing-grid{
  margin-top:50px;
  align-items:end;
}

.pricing-card{
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}

.pricing-card:hover{
  transform:translateY(-4px);
}

.pricing-name{
  font-size:1.3rem;
  font-weight:800;
  color:var(--bx-primary);
}

.pricing-desc{
  color:var(--bx-text-soft);
  font-size:.95rem;
}

.pricing-list{
  display:grid;
  gap:12px;
  margin-top:6px;
}

.pricing-list li{
  display:flex;
  gap:10px;
  color:var(--bx-text-soft);
  font-size:.94rem;
  align-items:flex-start;
}

.pricing-list li .icon-check{
  color:var(--bx-primary);
  flex-shrink:0;
  margin-top:2px;
}

.pricing-card .btn{
  margin-top:auto;
}

.pricing-note{
  text-align:center;
  margin-top:40px;
}

.pricing-note p{
  color:var(--bx-text-soft);
  margin-bottom:16px;
}

/* ===== CTA FINAL ===== */

.final-cta{
  background:var(--bx-bg);
}

.cta-box{
  position:relative;
  background:white;
  border:1px solid var(--bx-border);
  border-radius:var(--bx-radius-lg);
  padding:32px 24px;
  box-shadow:var(--bx-shadow-lg);
  text-align:center;
  overflow:hidden;
}

.cta-box::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-15%;
  width:60%;
  height:180%;
  background:var(--bx-primary);
  opacity:.05;
  border-radius:50%;
  z-index:0;
}

.cta-box > *{
  position:relative;
  z-index:1;
}

.cta-box .section-title{
  text-align:center;
}

.cta-actions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

/* ===== INTERACTIVIDAD / MICROANIMACIONES =====
   Estado activo táctil en botones y tarjetas, coherente con el resto del
   sitio (usa el mismo .reveal / IntersectionObserver ya cableado en
   main.js, solo se le agregan más selectores). */

.btn:active{
  transform:translateY(0) scale(.97);
}

.card-hover:active,
.bento-cell:active{
  transform:translateY(-1px) scale(.99);
}

@media(prefers-reduced-motion:reduce){
  .bento-cell,
  .pricing-card,
  .timeline-marker,
  .btn,
  .card-hover{
    transition:none !important;
  }
}

/* Cascada al aparecer en pantalla (usa el mismo .reveal de main.js) — la
   secuencia refuerza el orden de lectura, no es decoración suelta. */
.proof-item:nth-child(2){ transition-delay:.08s; }
.proof-item:nth-child(3){ transition-delay:.16s; }

.timeline-step:nth-child(2){ transition-delay:.08s; }
.timeline-step:nth-child(3){ transition-delay:.16s; }

.bento-grid .bento-cell:nth-child(2){ transition-delay:.05s; }
.bento-grid .bento-cell:nth-child(3){ transition-delay:.1s; }
.bento-grid .bento-cell:nth-child(4){ transition-delay:.15s; }
.bento-grid .bento-cell:nth-child(5){ transition-delay:.2s; }
.bento-grid .bento-cell:nth-child(6){ transition-delay:.25s; }

/* ===== MOBILE AJUSTES ===== */

@media(max-width:420px){

  .hero-title{
    font-size:2.1rem;
  }

  .btn{
    width:100%;
  }

  .hero-visual::before,
  .admin-preview::before,
  .cta-box::before{
    display:none;
  }

  .stat-row{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* ===== TABLET ===== */

@media(min-width:768px){

  .proof-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
  }

  .bento-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .bento-cell--feature{
    grid-column:span 2;
  }

  .pricing-grid{
    grid-template-columns:repeat(2, minmax(280px, 390px));
    justify-content:center;
  }

  .excel-content{
    grid-template-columns:1fr 1fr;
  }

  .cta-box{
    padding:54px;
  }

  .timeline{
    grid-template-columns:1fr;
  }
}

/* ===== DESKTOP ===== */

@media(min-width:1024px){

  .home-hero{
    padding-top:64px;
    padding-bottom:80px;
  }

  .hero-grid{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:32px;
  }

  .hero-title{
    font-size:3.4rem;
  }

  .hero-visual{
    justify-self:end;
  }

  .bento-grid{
    grid-template-columns:1.35fr 1fr 1fr;
    grid-auto-rows:auto;
  }

  .bento-cell--feature{
    grid-column:1;
    grid-row:span 2;
  }

  /* Reordena: la celda destacada queda a la izquierda, ocupando dos filas;
     el resto se acomoda alrededor sin repetir el mismo patrón de 3x2. */
  .bento-cell:nth-child(2){ grid-column:2; grid-row:1; }
  .bento-cell:nth-child(3){ grid-column:3; grid-row:1; }
  .bento-cell:nth-child(4){ grid-column:2; grid-row:2; }
  .bento-cell:nth-child(5){ grid-column:3; grid-row:2; }
  .bento-cell:nth-child(6){ grid-column:2 / span 2; grid-row:3; }

  /* La timeline pasa a horizontal en desktop */
  .timeline{
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }

  .timeline-step{
    grid-template-columns:1fr;
    padding-bottom:0;
    text-align:left;
  }

  .timeline-step:not(:last-child)::before{
    top:22px;
    left:44px;
    right:calc(-28px - 22px);
    bottom:auto;
    width:auto;
    height:2px;
  }

  .timeline-marker{
    margin-bottom:16px;
  }

  .timeline-body{
    padding-top:0;
  }

  .excel-content{
    grid-template-columns:1fr 1.1fr;
    gap:64px;
  }

  /* Pricing: comparación deliberadamente desigual, el plan Pro se eleva y
     crece un poco en vez de solo llevar una cinta de "popular" sobre una
     tarjeta idéntica a la otra. */
  .pricing-grid{
    grid-template-columns:340px 380px;
    justify-content:center;
    gap:0;
  }

  .pricing-card{
    padding:32px;
  }

  .pricing-card.popular{
    padding:40px 36px;
    transform:translateY(-20px);
    box-shadow:var(--bx-shadow-lg);
  }

  .pricing-card.popular:hover{
    transform:translateY(-24px);
  }
}