:root{
    --bg:#0b0b0f;
    --card:#12121a;
    --muted:#a0a3ad;
    --text:#ffffff;
    --primary:#3ba4f6; /* azul acento */
    --primary-700:#2487d6;
    --border:#1d1d27;
    --success:#30d158;
  }

  *{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
    line-height:1.5
  }

  img{max-width:100%;display:block}

  .container{width:min(1120px,92%);margin-inline:auto}

  .nav{
    position:sticky;
    top:0;
    background:rgba(11,11,15,.7);
    backdrop-filter:saturate(160%) blur(8px);
    border-bottom:1px solid var(--border);
    z-index:50
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
  .logo{font-weight:800;text-decoration:none;color:var(--text)}
  .menu{display:flex;gap:1rem;align-items:center}
  .menu a{color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:.6rem}
  .menu a:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .hamburger{display:none;background:transparent;border:0;color:var(--text);font-size:1.4rem}

  .btn{
    display:inline-block;
    padding:.9rem 1.2rem;
    border-radius:.8rem;
    text-decoration:none;
    font-weight:700;
    border:1px solid transparent;
    transition:.2s all
  }
  .btn-primary{background:#4169e1;color:#ffffff}
  .btn-primary:hover{background:#365cc0}
  .btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
  .btn-outline:hover{background:rgba(59,164,246,.12)}
  .block{display:block;text-align:center}

  .hero{padding:6rem 0 3rem;border-bottom:1px solid var(--border)}
  .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
  .hero h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.1;margin:0 0 1rem}
  .lead{color:var(--muted);font-size:1.1rem}
  .cta-row{display:flex;gap:1rem;margin:1.4rem 0}
  .trust-bullets{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.4rem;color:var(--muted)}
  .hero-media img{border-radius:1rem;border:1px solid var(--border);box-shadow:0 8px 30px rgba(0,0,0,.35)}

  .section{padding:4rem 0;border-bottom:1px solid var(--border)}
  .section.alt{background:#0e0e15}
  .section-title{text-align:center;font-size:2rem;margin:0 0 2rem}

  .grid.two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  .grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

  .card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.4rem}
  .card h3{margin-top:0}

  .list{padding-left:1rem}
  .list li{margin:.6rem 0}

  .feature{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.4rem}
  .feature h4{margin:.2rem 0 .4rem}

  .testimonial img{border-radius:.8rem;margin-bottom:.9rem;aspect-ratio:4/3;object-fit:cover}
  .testimonial blockquote{margin:0 0 .6rem;color:var(--muted)}

  .pricing{align-items:stretch}
  .price-card .original-price{font-size:1.2rem;color:var(--muted);text-decoration:line-through;margin:.2rem 0 0}
  .price-card .price{font-size:2rem;margin:.4rem 0}
  .price-card .desc{color:var(--muted)}
  .price-card.featured{border-color:rgba(59,164,246,.5);box-shadow:0 0 0 1px rgba(59,164,246,.35)}

  .note-center{text-align:center;color:var(--muted);margin-top:1rem}

  .faq details{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1rem;margin:.8rem 0}
  .faq summary{cursor:pointer;font-weight:600}

  .footer{padding:2rem 0;background:#0a0a0f}
  .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .footer a{color:var(--muted);text-decoration:none}

  .highlight-text{font-weight:800;font-style:italic}

  .fab-whatsapp{
    position:fixed;
    right:18px;
    bottom:18px;
    background:#25D366;
    color:#0a0a0a;
    border-radius:999px;
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    font-size:1.4rem;
    text-decoration:none;
    border:1px solid #1aa850;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    z-index:60
  }

  /* ===== Responsive ===== */
  @media (max-width: 960px){
    .hero-inner{grid-template-columns:1fr}
    .menu{display:none;position:absolute;top:64px;right:16px;background:#0e0e15;border:1px solid var(--border);border-radius:.8rem;padding:.8rem;flex-direction:column;min-width:220px}
    .menu a{padding:.6rem}
    .hamburger{display:block}
    .grid.two{grid-template-columns:1fr}
    .grid.three{grid-template-columns:1fr}
  }

  /* ====== HERO reordenado en móvil ====== */
  @media (max-width: 960px){
    .hero-inner{display:flex !important;flex-direction:column;gap:1rem}
    .hero-copy{display:contents}
    .hero-copy h1{order:1;text-align:center;margin-top:.25rem}
    .hero-media{order:2}
    .highlight-box{order:3;text-align:center}
    .cta-row{order:4;text-align:center}
    .trust-bullets{order:5;text-align:center}
  }

  /* ====== MENÚ MÓVIL ====== */
  .nav { position: sticky; top: 0; z-index: 1000; }
  .hamburger{
    display:none;
    background:transparent;
    border:0;
    color:var(--text);
    font-size:1.8rem;
    line-height:1;
    cursor:pointer;
    position:relative;
    z-index:1002;
  }
  @media (max-width: 960px){
    #menu{
      display:none !important;
      position:absolute;
      top:64px;
      right:16px;
      background:#0e0e15;
      border:1px solid var(--border);
      border-radius:.8rem;
      padding:.8rem;
      flex-direction:column;
      min-width:220px;
      z-index:1001;
    }
    #menu.is-open{display:flex !important}
    .hamburger{display:block}
    #menu a{padding:.6rem;color:var(--text)}
  }

  /* ====== PRECIOS: tarjetas iguales ====== */
  .grid.two.pricing{
    display:flex;
    gap:1.5rem;
    align-items:stretch;
  }
  .price-card{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .price-card .tag{
    align-self:flex-start;        /* evita que se estire */
    display:inline-block;         /* se ajusta al texto */
    background:rgba(48,209,88,.12);
    color:var(--success);
    border:1px solid rgba(48,209,88,.35);
    padding:2px 6px;
    border-radius:4px;
    font-size:.85rem;
    font-weight:600;
    line-height:1.2;
    margin:.2rem 0 .5rem;
  }
/* ===== Puntos de dolor (cada bullet dentro de una caja) ===== */
.pains-grid{
  display: grid;
  gap: 16px;
}

.pain-card{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0b0b0c;                         /* fondo oscuro */
  border: 1px solid rgba(255,255,255,0.12);     /* borde suave */
  border-radius: 14px;
  padding: 16px 18px;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04),
              0 8px 24px rgba(0,0,0,0.25);      /* sutil */
  transition: transform .18s ease, box-shadow .18s ease;
}

.pain-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(255,255,255,0.05),
              0 14px 28px rgba(0,0,0,0.35);
}

.pain-icon{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  opacity: 0.95;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Mantener 1 por fila (como antes, estilo Transform) */
@media (min-width: 768px){
  .pains-grid{ grid-template-columns: 1fr; }
}
  /* ===== Oferta (mismo estilo que los pain points) ===== */
  .offer {
    margin-top: 80px;
  }

  .offer-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 36px;
  }

  .offer-grid {
    display: grid;
    gap: 16px;
  }

  .offer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0b0b0c;                         /* igual fondo */
    border: 1px solid rgba(255,255,255,0.12);     /* igual borde */
    border-radius: 14px;
    padding: 16px 18px;
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04),
                0 8px 24px rgba(0,0,0,0.25);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(255,255,255,0.05),
                0 14px 28px rgba(0,0,0,0.35);
  }

  .offer-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;                               /* blanco */
    opacity: 0.95;
    border: 1px solid rgba(255,255,255,0.22);
  }

  /* Mantener 1 por fila en pantallas grandes (igual que los pains) */
  @media (min-width: 768px) {
    .offer-grid { grid-template-columns: 1fr; }
  }

}
.pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pay-btn .mp-logo {
  height: 16px; 
  width: auto;
  vertical-align: middle;
}

.pay-safe {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}
/* Pago seguro debajo del botón */
.pago-seguro {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted); /* gris discreto */
  font-weight: 600;
}

.pago-seguro .logo-mp {
  height: 18px; /* tamaño pequeño */
  width: auto;
}
/* ======= FIX LAYOUT PLANES ======= */

/* 2 columnas bien alineadas y misma altura */
.grid.two.pricing{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* Cada tarjeta ocupa el alto completo y ordena su contenido en columna */
.price-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Empuja el botón hacia la parte baja de la tarjeta */
.price-card a.btn{
  margin-top: auto;
}

/* Nota de pago seguro con logo a la derecha */
.price-card .pago-seguro{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--muted);
  font-weight: 600;
  flex-direction: row-reverse; /* <--- cambia el orden: logo queda a la derecha */
}

.price-card .pago-seguro .logo-mp{
  height: 18px;
  width: auto;
}

/* Badges verdes compactos (no súper largos) */
.price-card .tag{
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .85rem;
  max-width: max-content; /* se ajusta al texto */
}

/* En móvil, los planes se apilan en 1 columna */
@media (max-width: 960px){
  .grid.two.pricing{
    grid-template-columns: 1fr !important;
  }
}
/* Centrar la fila "Pago 100% seguro" dentro de cada tarjeta en desktop y móvil
   y dejar el logo a la DERECHA del texto */
.pricing .price-card .pago-seguro{
  display: flex !important;
  align-items: center;
  gap: 8px;
  /* centra de verdad */
  justify-content: center;
  text-align: center;
  width: max-content;
  margin: 8px auto 0;   /* <-- centra el bloque dentro de la tarjeta */
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
}

/* orden: texto primero, logo a la derecha */
.pricing .price-card .pago-seguro span{ order: 0; }
.pricing .price-card .pago-seguro img{ order: 1; height: 18px; width: auto; }
}
/* Centrar el aviso debajo de los planes */
.note-center {
  text-align: center;
  color: var(--muted);
  margin-top: 1rem;
  font-size: 0.95rem;
  max-width: 100%;
}
.logo-mercadopago {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.logo-mercadopago img {
  width: 85px;
  opacity: 0.75;
}

.texto-pago {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}
.logo-mercadopago {
  margin-top: 8px;
  text-align: center;
}

.logo-mercadopago img {
  width: 85px;
  height: auto;
  opacity: 0.75;
  max-width: 100%;
  object-fit: contain;
}
.texto-redirect {
  text-align: center;
  color: var(--muted);
  margin-bottom: 4px;
  font-size: 14px;
}

.logo-mercadopago {
  text-align: center;
  margin-top: 6px;
}

.logo-mercadopago img {
  width: 70px;
  height: auto;
  opacity: 0.7;
  max-width: 100%;
  object-fit: contain;
}

/* En pantallas grandes, separa un poco más */
@media screen and (min-width: 768px) {
  .logo-mercadopago {
    margin-top: 12px;
  }

  .logo-mercadopago img {
    width: 65px;
    opacity: 0.6;
  }
}
.texto-redirect {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2px; /* casi sin espacio */
  font-size: 14px;
}

.logo-mercadopago {
  text-align: center;
  margin-top: 0px; /* sin espacio arriba */
}

.logo-mercadopago img {
  width: 68px;
  height: auto;
  opacity: 0.75;
  max-width: 100%;
  object-fit: contain;
}

@media screen and (min-width: 768px) {
  .logo-mercadopago img {
    width: 62px;
    opacity: 0.6;
  }
}
/* ===== SECCIÓN: ¿Esta asesoría es para mí? ===== */
.fit-box.minimal {
  background: #0b0b0c;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 28px 30px;
  color: #fff;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04),
              0 8px 24px rgba(0,0,0,0.25);
}

.fit-box.minimal h3 {
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 10px;
  margin-bottom: 12px;
  color: #fff;
}

.fit-box.minimal ul {
  list-style-type: disc;
  padding-left: 22px;
  margin-bottom: 24px;
  line-height: 1.65;
  color: #e3e3e3;
  font-weight: 400;
  font-size: 1rem;
}

.fit-box.minimal li {
  margin-bottom: 8px;
}

.fit-box.minimal strong {
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .fit-box.minimal {
    padding: 22px 20px;
    font-size: 0.95rem;
  }

  .fit-box.minimal ul {
    padding-left: 18px;
  }
}
/* ===== Beneficios dentro de los planes ===== */
.plan-benefits {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  color: #e6e6e6;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 400;
}

.plan-benefits li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}

.plan-benefits li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #3483FA; /* Azul CTA de tu marca */
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
}
/* ===== CTA WhatsApp debajo de planes ===== */
.whatsapp-cta {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 10px;
}

.whatsapp-cta p {
  color: #e3e3e3;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.whatsapp-cta .btn-outline {
  display: inline-block;
  border: 1px solid #25D366; /* verde WhatsApp */
  color: #25D366;
  background: transparent;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.whatsapp-cta .btn-outline:hover {
  background: #25D366;
  color: #000;
  transform: translateY(-1px);
}