:root {
    --bg: #121212;
    --panel: #1E1E1E;
    --panel-2: #2A2A2A;
    --linea: #333333;
    --texto: #EDEDED;
    --apagado: #A7A7A7;
    --naranja: #E8763E;
    --rosa: #F5C7CE;
    --lila: #C9B5E8;
    --verde: #1ED760;
    --oro: #E5C15C;
    
    /* Variables de opacidad extraídas */
    --borde-tenue: rgba(255, 255, 255, 0.06);
    --hover-oro: rgba(229, 193, 92, 0.045);
    --bg-verde-claro: rgba(30, 215, 96, 0.10);
    --bg-verde-ultra: rgba(30, 215, 96, 0.07);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--texto); line-height: 1.55; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

  /* ===== Nav ===== */
  nav { padding: 26px 0; }
  nav .wrap { display: flex; justify-content: space-between; align-items: center; }
  .logo { display: inline-flex; align-items: center; }
  .logo img { height: 34px; width: auto; display: block; }
  .nav-cta { font-size: 13px; font-weight: 600; color: var(--apagado); text-decoration: none; }
  .nav-cta:hover { color: #fff; }

  /* ===== Hero ===== */
  .hero { text-align: center; padding: 38px 0 8px; }
  .hero h1 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; color: #fff; letter-spacing: -.01em; }
  .hero h1 em { font-style: normal; color: var(--naranja); }
  .hero p { margin: 16px auto 0; max-width: 560px; font-size: 16px; color: var(--apagado); }

  /* ===== Selectores ===== */
  .selectores { padding: 34px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .pasillos { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--linea); border-radius: 99px; padding: 5px; }
  .pasillo-btn { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); background: transparent; border: none; border-radius: 99px; padding: 10px 24px; cursor: pointer; transition: all .18s; }
  .pasillo-btn.activo { background: #fff; color: #121212; }
  .pasillo-btn:not(.activo):hover { color: #fff; }

  .membresia-linea { font-size: 13px; font-weight: 600; color: var(--verde); letter-spacing: .01em; }
  
  .pasillo-desc { text-align: center; max-width: 640px; margin: 0 auto; min-height: 22px; }
  .pasillo-desc .bname { display: block; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 19px; color: #5AA0E8; letter-spacing: -.01em; margin-bottom: 6px; }
  .pasillo-desc .bdesc { display: block; font-size: 15px; line-height: 1.5; color: var(--apagado); }

  /* ===== Cards ===== */
  .cards-zona { padding: 28px 0 20px; }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .card { background: var(--panel); border-radius: 14px; padding: 30px 26px 26px; display: flex; flex-direction: column; position: relative; transition: background .2s; }
  .card:hover { background: #232323; }
  .card.destacado { outline: 1.5px solid var(--naranja); }

  .t-blanca { color: #fff; }
  .t-rosa { color: var(--rosa); }
  .t-lila { color: var(--lila); }
  .t-naranja { color: var(--naranja); }

  .plan-etiqueta { font-size: 12px; font-weight: 700; color: var(--apagado); letter-spacing: .02em; margin-bottom: 2px; }
  .plan-etiqueta b { color: #fff; font-weight: 800; }
  .plan-nombre { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 30px; letter-spacing: .01em; }
  
  .precio-zona { margin: 20px 0 4px; }
  .precio { display: flex; align-items: baseline; gap: 5px; }
  .precio .num { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 40px; color: #fff; letter-spacing: -.02em; }
  .precio .per { font-size: 14px; color: var(--apagado); font-weight: 600; }
  .periodo { font-size: 12px; color: var(--apagado); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
  
  .valor-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .valor-real { font-size: 13px; color: var(--apagado); }
  .valor-real b { color: var(--texto); font-weight: 600; }
  .ahorro { display: inline-block; font-size: 13px; font-weight: 700; color: var(--verde); background: var(--bg-verde-claro); border-radius: 6px; padding: 2px 9px; }

  .anual-linea { margin-top: 14px; font-size: 12.5px; color: var(--texto); background: var(--panel-2); border-radius: 10px; padding: 9px 13px; line-height: 1.45; }
  .anual-linea b { color: #fff; }

  ul.beneficios { list-style: none; margin-top: 20px; flex: 1; }
  ul.beneficios li { padding: 7px 0 7px 22px; position: relative; font-size: 14px; color: var(--texto); }
  ul.beneficios li b { font-weight: 600; color: #fff; }
  ul.beneficios li .sub { display: block; font-size: 12px; color: var(--apagado); margin-top: 1px; line-height: 1.4; }
  ul.beneficios li::before { content: "•"; position: absolute; left: 4px; top: 6px; color: var(--apagado); }
  ul.beneficios li.oro { font-weight: 400; color: #fff; }
  ul.beneficios li.oro::before { content: "•"; color: var(--oro); }

  /* CTAs convertidas para manejar botones visuales semánticos */
  .cta, .cta-gratis { margin-top: 22px; display: block; width: 100%; text-align: center; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px; padding: 15px 0; border-radius: 99px; cursor: pointer; text-decoration: none; transition: transform .12s, filter .15s; }
  .cta:hover { transform: scale(1.015); filter: brightness(1.05); }
  .cta-gratis { border: 1px solid #5A5A5A; color: #fff; background: transparent; }
  .cta-gratis:hover { border-color: #fff; }
  .cta.b-rosa { background: var(--rosa); color: #121212; }
  .cta.b-lila { background: var(--lila); color: #121212; }
  .cta.b-naranja { background: var(--naranja); color: #1C0F08; }
  
  .nota-addon { margin-top: 14px; font-size: 11.5px; color: var(--apagado); text-align: center; }
  .bono { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: var(--bg-verde-ultra); border: 1px dashed rgba(30,215,96,.4); border-radius: 10px; padding: 10px 13px; font-size: 13px; color: #fff; }
  .bono .tag { background: var(--verde); color: #08210F; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }

  /* ===== Secciones Inferiores ===== */
  .todos { padding: 52px 0 8px; }
  .todos-titulo { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); margin-bottom: 18px; }
  .todos-titulo::before, .todos-titulo::after { content: ""; height: 1px; width: 72px; flex: none; }
  .todos-titulo::before { background: linear-gradient(90deg, transparent, rgba(229,193,92,.55)); }
  .todos-titulo::after { background: linear-gradient(90deg, rgba(229,193,92,.55), transparent); }
  
  .todos-box { position: relative; background: var(--panel-2); border: 1px solid rgba(229,193,92,.28); border-radius: 16px; box-shadow: 0 0 0 1px rgba(232,118,62,.05), 0 18px 42px -22px rgba(229,193,92,.30), inset 0 1px 0 rgba(255,255,255,.03); display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; }
  .todos-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px circle at 50% -10%, rgba(229,193,92,.06), transparent 60%); }
  .todos-item { padding: 22px 24px; border-left: 1px solid var(--borde-tenue); transition: background .2s; }
  .todos-item:hover { background: var(--hover-oro); }
  .todos-item:first-child { border-left: none; }
  .todos-item b { display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #fff; margin-bottom: 5px; }
  .todos-item b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--oro); box-shadow: 0 0 8px rgba(229,193,92,.7); }
  .todos-item span { font-size: 13px; color: var(--apagado); }

  .addon { padding: 44px 0 8px; }
  .addon-box { background: var(--panel); border-radius: 14px; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; }
  .addon-tit { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 19px; color: var(--naranja); text-transform: uppercase; }
  .addon-sub { font-size: 13.5px; color: var(--apagado); margin-top: 5px; max-width: 560px; }
  .addon-precio { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 32px; color: #fff; white-space: nowrap; }
  .addon-precio small { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; color: var(--apagado); display: block; text-align: right; }

  .garantias { padding: 48px 0 64px; }
  .g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .g { padding: 6px 4px; font-size: 13.5px; color: var(--apagado); text-align: center; }
  .g b { display: block; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }

  footer { border-top: 1px solid var(--linea); padding: 24px 0 34px; font-size: 12px; color: #7A7A7A; }
  footer .wrap { display: flex; justify-content: center; text-align: center; gap: 14px; flex-wrap: wrap; }

  @media (max-width: 920px) {
    .cards { grid-template-columns: 1fr; }
    .todos-box { grid-template-columns: 1fr 1fr; }
    .todos-item { border-left: none; border-top: 1px solid var(--borde-tenue); }
    .g-grid { grid-template-columns: 1fr; }
    .pasillos { flex-wrap: wrap; justify-content: center; }
  }