/*
Theme Name: TIVI 4K
Theme URI: https://tivi4k.example
Author: Safae
Author URI: https://tivi4k.example
Description: Tema de venta de alta conversión para IPTV: urgencia, contador, prueba social, garantía y CTA a WhatsApp. Negro con acento lima, tipografía Big Shoulders Display. Adaptado del diseño Vault 47.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tivi4k
*/

/* =========================================
   TOKENS
   ========================================= */
:root{
  --bg:        #0b0c10;
  --bg-2:      #14161d;
  --bg-3:      #1c1e28;
  --panel:     #181a23;
  --line:      #262936;
  --line-soft: #1f222d;
  --text:      #f5f0e3;
  --text-dim:  #a4a6b1;
  --text-mute: #6e7180;

  --lime:      #d4ff3a;
  --orange:    #ff5934;
  --pink:      #ff3e8b;
  --gold:      #ffb300;
  --good:      #6fe7a3;

  --display: 'Big Shoulders Display', sans-serif;
  --body:    'DM Sans', sans-serif;
  --hand:    'Caveat', cursive;
  --mono:    'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Compensa el header fijo al saltar a una sección por ancla (#pricing, etc.) */
#pricing, #stack, #blog, #faq, #comprar{ scroll-margin-top: 120px; }
@media(max-width:760px){
  #pricing, #stack, #blog, #faq, #comprar{ scroll-margin-top: 80px; }
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}

::selection{ background:var(--lime); color:var(--bg); }

a{ color:inherit; text-decoration:none; }

/* =========================================
   TOP URGENCY BAR
   ========================================= */
.urgency-bar{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  background: var(--lime);
  color: var(--bg);
  padding: 10px 24px;
  display:flex; justify-content:center; align-items:center;
  gap:24px;
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  flex-wrap:wrap;
}
.urgency-bar strong{ font-weight:700; }
.urgency-bar .countdown{
  display:inline-flex; gap:6px; align-items:center;
  font-family:var(--mono);
  font-weight:700;
}
.urgency-bar .cd-box{
  background: var(--bg);
  color: var(--lime);
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.urgency-bar .spots{ font-weight:700; }
.urgency-bar .pulse-dot{
  width:8px; height:8px;
  background:var(--bg);
  border-radius:50%;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(1.3); }
}

/* =========================================
   NAV
   ========================================= */
nav{
  position:fixed;
  top:44px; left:0; right:0;
  z-index:90;
  padding: 16px 32px;
  display:flex; justify-content:space-between; align-items:center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo{
  font-family:var(--display);
  font-weight:900;
  font-size:24px;
  letter-spacing:-0.02em;
  color:var(--text);
}
.logo .num{ color:var(--lime); }
.nav-cta{
  background:var(--text);
  color:var(--bg);
  padding:10px 18px;
  border-radius:100px;
  font-family:var(--body);
  font-weight:700;
  font-size:13px;
  border:none;
  cursor:pointer;
  transition: transform .2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-link{
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dim);
  transition: color .2s ease;
}
.nav-link:hover{ color: var(--lime); }
@media(max-width:600px){ .nav-link{ display:none; } }
.nav-trial{
  display:inline-flex; align-items:center; gap:6px;
  background: transparent;
  color: var(--lime);
  border: 1px solid var(--lime);
  padding: 9px 16px;
  border-radius: 100px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: all .2s ease;
}
.nav-trial:hover{ background: var(--lime); color: var(--bg); }
.btn-trial{
  color: var(--lime);
  border-color: var(--lime);
}
.btn-trial:hover{ background: var(--lime); color: var(--bg); border-color: var(--lime); }
.nav-rating{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-dim);
}
.nav-rating .stars{ color:var(--gold); letter-spacing:0.05em; }
.nav-rating strong{ color:var(--text); }
@media(max-width:760px){ .nav-rating{ display:none; } }

/* =========================================
   HERO
   ========================================= */
.hero{
  padding: 160px 32px 60px;
  max-width: 1300px;
  margin: 0 auto;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media(max-width:980px){
  .hero-grid{ grid-template-columns: 1fr; gap:40px; }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 14px;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:100px;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom: 26px;
}
.eyebrow .avatars{
  display:inline-flex;
}
.eyebrow .avatars span{
  width:22px; height:22px;
  border-radius:50%;
  border:2px solid var(--bg-2);
  margin-left:-8px;
  background-size: cover;
}
.eyebrow .avatars span:nth-child(1){ background: linear-gradient(135deg, #ff6b6b, #feca57); margin-left:0;}
.eyebrow .avatars span:nth-child(2){ background: linear-gradient(135deg, #54a0ff, #5f27cd); }
.eyebrow .avatars span:nth-child(3){ background: linear-gradient(135deg, #00d2d3, #1dd1a1); }
.eyebrow strong{ color:var(--text); }

h1.hero-title{
  font-family:var(--display);
  font-weight:900;
  font-size: clamp(48px, 8vw, 110px);
  line-height:0.92;
  letter-spacing:-0.02em;
  margin-bottom:24px;
  color:var(--text);
}
h1.hero-title .hl{
  background: var(--lime);
  color: var(--bg);
  padding: 0 12px;
  display: inline-block;
  transform: rotate(-1.5deg);
  border-radius: 6px;
}
h1.hero-title .strike{
  text-decoration: line-through;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 8px;
  color: var(--text-mute);
}

.hero-sub{
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-sub strong{ color: var(--text); }

.hero-checklist{
  list-style:none;
  margin-bottom: 36px;
  display:flex; flex-direction:column; gap:10px;
}
.hero-checklist li{
  display:flex; align-items:center; gap:12px;
  font-size: 15px;
  color: var(--text);
}
.hero-checklist li::before{
  content:"✓";
  background: var(--good);
  color: var(--bg);
  width:22px; height:22px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:13px;
  flex-shrink:0;
}

/* Price block */
.price-block{
  display:flex; align-items:flex-end; gap:18px;
  margin-bottom: 24px;
}
.price-block .old{
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  color: var(--text-mute);
  text-decoration: line-through;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 3px;
  line-height: 1;
}
.price-block .new{
  font-family: var(--display);
  font-weight: 900;
  font-size: 78px;
  color: var(--lime);
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.price-block .new sup{
  font-size: 28px;
  vertical-align: super;
  margin-right: 4px;
}
.price-block .save{
  background: var(--orange);
  color: var(--bg);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: rotate(-3deg);
}

.cta-row{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-bottom: 24px;
}
.btn-buy{
  background: var(--lime);
  color: var(--bg);
  padding: 22px 30px;
  border-radius: 100px;
  border: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent);
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 50%, transparent); }
  50%     { box-shadow: 0 0 0 14px color-mix(in srgb, var(--lime) 0%, transparent); }
}
.btn-buy:hover{ transform: translateY(-2px); }
.btn-buy .arrow{
  background:var(--bg);
  color:var(--lime);
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.btn-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 22px 26px;
  border-radius: 100px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-ghost:hover{ background: var(--bg-2); border-color: var(--text-dim); }

.trust-row{
  display:flex; flex-wrap:wrap; gap:24px;
  font-size: 13px;
  color: var(--text-dim);
}
.trust-row .item{ display:flex; align-items:center; gap:8px;}
.trust-row .item::before{
  content:"✓"; color:var(--good); font-weight:700;
}

/* HERO VISUAL — stacked products */
.hero-visual{
  position: relative;
  aspect-ratio: 1 / 1.05;
  max-width: 520px;
  margin: 0 auto;
}
.hero-visual .stack-card{
  position: absolute;
  inset: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.hero-visual .sc-1{ transform: rotate(-7deg) translate(-12%, -2%); opacity:.7; }
.hero-visual .sc-2{ transform: rotate(5deg) translate(12%, -1%); opacity:.85; }
.hero-visual .sc-3{ transform: rotate(-1deg); }

.sc-1{ background: linear-gradient(135deg, #ff6b6b 0%, #ff3e8b 100%); border-color:transparent; }
.sc-2{ background: linear-gradient(135deg, #54a0ff 0%, #5f27cd 100%); border-color:transparent; }
.sc-3{ background: var(--bg-2); }

.sc-3 .card-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sc-3 .card-head .live{
  color: var(--lime);
  display: flex; align-items: center; gap: 6px;
}
.sc-3 .card-head .live::before{
  content:""; width:6px; height:6px;
  background:var(--lime); border-radius:50%;
  animation: pulse 1.2s infinite;
}
.sc-3 h3{
  font-family: var(--display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  margin-bottom: 6px;
}
.sc-3 h3 .num{ color: var(--lime); }
.sc-3 .vault-tagline{
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 22px;
}
.sc-3 .items-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.sc-3 .item-box{
  aspect-ratio: 1;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px;
  transition: transform .3s ease;
}
.sc-3 .item-box:hover{ transform: scale(1.08); border-color:var(--lime); }
.sc-3 .footer-line{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-dim);
}
.sc-3 .footer-line strong{ color:var(--lime); font-family:var(--display); font-weight:900; font-size:22px; }

/* =========================================
   LIVE ACTIVITY BAR (under hero)
   ========================================= */
.activity-bar{
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.activity-track{
  display: inline-flex;
  gap: 50px;
  animation: marquee 40s linear infinite;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  align-items: center;
}
.activity-track .ping{
  color: var(--good);
  margin-right: 6px;
}
.activity-track strong{ color: var(--text); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================
   SECTION BASE
   ========================================= */
section.container{
  padding: 100px 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.sec-eyebrow{
  display:inline-block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sec-eyebrow::before{ content:"// "; opacity:.6; }
h2.sec-title{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 800px;
}
h2.sec-title .hl{
  background: var(--lime);
  color: var(--bg);
  padding: 0 10px;
  border-radius: 6px;
  display: inline-block;
  transform: rotate(-1deg);
}
.sec-sub{
  font-size: 18px;
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: 50px;
}

/* =========================================
   PROBLEM / SOLUTION
   ========================================= */
.ps-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top:30px;
}
@media(max-width:780px){ .ps-grid{ grid-template-columns:1fr; } }

.ps-card{
  padding: 32px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.ps-card.bad{
  background: color-mix(in srgb, var(--orange) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--orange) 30%, var(--line));
}
.ps-card.good{
  background: color-mix(in srgb, var(--lime) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--lime) 30%, var(--line));
}
.ps-card .label{
  font-family:var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.ps-card.bad .label{ color: var(--orange); }
.ps-card.good .label{ color: var(--lime); }
.ps-card h4{
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  margin-bottom: 18px;
}
.ps-card ul{
  list-style:none;
  display:flex; flex-direction:column; gap:12px;
}
.ps-card li{
  display:flex; gap:12px; align-items:flex-start;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.45;
}
.ps-card.bad li::before{
  content: "✕";
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: color-mix(in srgb, var(--orange) 15%, transparent);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  margin-top: 2px;
}
.ps-card.good li::before{
  content: "✓";
  color: var(--bg);
  background: var(--lime);
  font-weight: 700;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  margin-top: 2px;
}
.ps-card.good li{ color: var(--text); }

/* =========================================
   THE STACK
   ========================================= */
.stack-section{
  background: var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stack-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
@media(max-width:880px){ .stack-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .stack-grid{ grid-template-columns: 1fr; } }

.stack-item{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  transition: transform .25s ease, border-color .25s ease;
}
.stack-item:hover{
  transform: translateY(-4px);
  border-color: var(--lime);
}
.stack-item .icon{
  width: 48px; height: 48px;
  background: var(--bg-2);
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 24px;
  margin-bottom: 16px;
}
/* Sin emoji: no mostramos el recuadro vacío */
.stack-item .icon:empty{ display: none; }
.stack-item h5{
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.stack-item .qty{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.stack-item p{
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 14px;
}
.stack-item .value{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
}
.stack-item .value strong{
  color: var(--lime);
  font-size: 14px;
}

/* TOTAL CALCULATION */
.total-box{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  max-width: 540px;
  margin: 0 auto;
}
.total-box .calc{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom: 24px;
}
.total-box .row{
  display:flex; justify-content:space-between;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-dim);
}
.total-box .row .v{ color: var(--text); }
.total-box .row.total{
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 10px;
  font-size: 18px;
}
.total-box .row.total .v{
  color: var(--text-mute);
  text-decoration: line-through;
}
.total-box .row.today{
  background: color-mix(in srgb, var(--lime) 14%, transparent);
  border: 1px solid var(--lime);
  margin: 12px -8px 0;
  padding: 16px;
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  color: var(--text);
  align-items: center;
}
.total-box .row.today .v{
  color: var(--lime);
  font-size: 38px;
}

/* =========================================
   PRICING
   ========================================= */
.pricing-section{
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}
@media(max-width:880px){ .pricing-grid{ grid-template-columns: 1fr; max-width:460px; margin-left:auto; margin-right:auto; } }

.price-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 28px;
  display:flex; flex-direction:column;
  position: relative;
  transition: transform .25s ease, border-color .25s ease;
}
.price-card:hover{ transform: translateY(-4px); border-color: var(--lime); }
.price-card.featured{
  border-color: var(--lime);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 10%, var(--bg)) 0%, var(--bg) 60%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.price-card .pc-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--lime); color: var(--bg);
  font-family: var(--mono); font-size: 11px; font-weight:700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px;
  white-space: nowrap;
}
.price-card .pc-name{
  font-family: var(--display); font-weight:800; font-size: 26px;
  line-height:1; margin-bottom: 4px; color: var(--text);
}
.price-card .pc-dur{
  font-family: var(--mono); font-size: 12px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px;
}
.price-card .pc-price{
  font-family: var(--display); font-weight:900; font-size: 60px;
  line-height: 0.9; color: var(--lime); letter-spacing:-0.02em;
}
.price-card .pc-price sup{ font-size: 26px; vertical-align: super; }
.price-card .pc-save{
  display:inline-block; margin-top:10px;
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange); font-size: 12px; font-weight:700;
  padding: 4px 10px; border-radius: 6px;
}
.price-card .pc-feats{
  list-style:none; margin: 22px 0 26px;
  display:flex; flex-direction:column; gap:11px;
  flex-grow: 1;
}
.price-card .pc-feats li{
  display:flex; gap:10px; align-items:flex-start;
  font-size: 14px; color: var(--text-dim); line-height:1.4;
}
.price-card .pc-feats li::before{
  content:"✓"; color: var(--bg); background: var(--lime);
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; margin-top:2px;
}
.price-card .pc-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: transparent; color: var(--lime);
  border: 1px solid var(--lime);
  padding: 15px; border-radius: 100px;
  font-family: var(--body); font-weight:700; font-size: 15px;
  transition: all .2s ease;
}
.price-card .pc-btn:hover{ background: var(--lime); color: var(--bg); }
.price-card.featured .pc-btn{ background: var(--lime); color: var(--bg); }
.price-card.featured .pc-btn:hover{ transform: translateY(-2px); }

/* =========================================
   TESTIMONIALS WALL
   ========================================= */
.testi-section .stats-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 30px 0 60px;
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
}
@media(max-width:780px){ .testi-section .stats-row{ grid-template-columns: 1fr 1fr; gap:24px; } }
.stat-cell{ text-align: center; }
.stat-cell .num{
  font-family: var(--display);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: var(--lime);
  letter-spacing: -0.02em;
}
.stat-cell .lbl{
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}

.testi-grid{
  columns: 3;
  column-gap: 18px;
}
@media(max-width:980px){ .testi-grid{ columns: 2;} }
@media(max-width:620px){ .testi-grid{ columns: 1;} }

.testi{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 18px;
  break-inside: avoid;
}
.testi.featured{
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 12%, var(--panel)) 0%, var(--panel) 100%);
  border-color: var(--lime);
}
.testi .stars{
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.testi .head-line{
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 10px;
}
.testi p{
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 16px;
}
.testi p strong{ color: var(--text); background: color-mix(in srgb, var(--lime) 20%, transparent); padding: 0 4px; border-radius:4px;}
.testi .who{
  display:flex; align-items:center; gap:12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.testi .av{
  width: 36px; height: 36px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  color: var(--bg);
  font-size: 14px;
  flex-shrink:0;
}
.testi .av-1{ background: linear-gradient(135deg, #ff6b6b, #feca57); }
.testi .av-2{ background: linear-gradient(135deg, #54a0ff, #5f27cd); }
.testi .av-3{ background: linear-gradient(135deg, #00d2d3, #1dd1a1); }
.testi .av-4{ background: linear-gradient(135deg, #ff9ff3, #ee5253); }
.testi .av-5{ background: linear-gradient(135deg, #feca57, #ff9f43); }
.testi .av-6{ background: linear-gradient(135deg, #5f27cd, #341f97); }
.testi .name{ font-weight: 600; font-size: 14px; color: var(--text);}
.testi .role{ font-size: 12px; color: var(--text-mute); }
.testi .verified{
  margin-left: auto;
  font-size: 11px;
  color: var(--good);
  display:flex; align-items:center; gap:4px;
}
.testi .verified::before{ content:"✓"; }

/* =========================================
   GUARANTEE
   ========================================= */
.guarantee{
  background: var(--lime);
  color: var(--bg);
  padding: 80px 32px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.guarantee-inner{
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: center;
  text-align: left;
}
@media(max-width:680px){
  .guarantee-inner{ grid-template-columns: 1fr; text-align: center; }
  .guarantee-inner .seal{ margin: 0 auto; }
}

.guarantee .seal{
  width: 160px; height: 160px;
  background: var(--bg);
  color: var(--lime);
  border-radius: 50%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-family: var(--display);
  font-weight: 900;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.guarantee .seal::before{
  content:"";
  position:absolute; inset:8px;
  border:2px dashed var(--lime);
  border-radius: 50%;
  animation: spin 30s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
.guarantee .seal .big{ font-size: 48px; line-height: 1; }
.guarantee .seal .small{ font-size: 14px; letter-spacing: 0.1em; margin-top: 4px; }

.guarantee h3{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 0.95;
  margin-bottom: 14px;
}
.guarantee p{
  font-size: 17px;
  line-height: 1.55;
  max-width: 540px;
}
.guarantee p strong{ font-weight: 700; }

/* =========================================
   FINAL PRICING / CTA
   ========================================= */
.final-cta{
  padding: 100px 32px;
  text-align: center;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lime) 14%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.final-cta-inner{ position:relative; z-index:2; max-width:900px; margin:0 auto;}

.final-cta .micro{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.final-cta h2{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(50px, 9vw, 130px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.final-cta h2 .hl{
  background: var(--lime);
  color: var(--bg);
  padding: 0 12px;
  border-radius: 8px;
  display: inline-block;
  transform: rotate(-1.5deg);
}
.final-cta .sub{
  font-size: 19px;
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto 36px;
}

/* COUNTDOWN BIG */
.countdown-big{
  display: inline-flex;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 28px;
  margin-bottom: 30px;
}
.cd-unit{ text-align: center; min-width: 60px;}
.cd-unit .v{
  font-family: var(--display);
  font-weight: 900;
  font-size: 44px;
  color: var(--lime);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-unit .l{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 6px;
}
.cd-sep{
  font-family: var(--display);
  font-weight: 900;
  font-size: 44px;
  color: var(--text-mute);
  line-height: 1;
}

.final-cta .btn-buy{ font-size: 19px; padding: 26px 36px; }
.final-cta .trust-final{
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.final-cta .trust-final span{ display:flex; align-items:center; gap:6px;}

/* =========================================
   FAQ
   ========================================= */
.faq-section{
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.faq-list{ max-width: 800px; margin: 30px auto 0; }
.faq-item{
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  cursor: pointer;
}
.faq-item .q{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
}
.faq-item .q .plus{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--lime);
  transition: transform .3s ease;
  flex-shrink: 0;
}
.faq-item.open .q .plus{ transform: rotate(45deg); background: var(--lime); color: var(--bg); }
.faq-item .a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}
.faq-item.open .a{ max-height: 300px; padding-top: 16px; }

/* =========================================
   LIVE TOAST (purchase notifications)
   ========================================= */
.live-toast{
  position: fixed;
  bottom: 20px; left: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px 14px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  z-index: 200;
  max-width: 340px;
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3), opacity .3s ease;
}
.live-toast.show{ transform: translateX(0); opacity: 1; }
.live-toast .av{
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  color: var(--bg);
  font-size: 14px;
}
.live-toast .text{ font-size: 13px; line-height: 1.3; color: var(--text-dim);}
.live-toast .text strong{ color: var(--text); }
.live-toast .ago{
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.live-toast .ago::before{
  content:"";
  width: 6px; height: 6px;
  background: var(--good);
  border-radius: 50%;
}
@media(max-width:560px){
  .live-toast{ left: 12px; right: 12px; max-width: none; bottom: 80px;}
}

/* =========================================
   STICKY BOTTOM (mobile)
   ========================================= */
.sticky-bottom{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 95;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sticky-bottom .price-mini{
  display:flex; flex-direction:column;
  line-height: 1;
}
.sticky-bottom .pm-old{
  font-size: 12px; color: var(--text-mute);
  text-decoration: line-through;
}
.sticky-bottom .pm-new{
  font-family: var(--display);
  font-weight: 900;
  font-size: 24px;
  color: var(--lime);
}
.sticky-bottom .btn-buy{
  animation: none;
  padding: 14px 20px;
  font-size: 14px;
}
@media(max-width:560px){ .sticky-bottom{ display: flex; } }

/* =========================================
   FOOTER
   ========================================= */
.site-footer{
  padding: 50px 32px 30px;
  text-align: center;
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-size: 13px;
}
.site-footer .logo{ margin-bottom: 14px; }
.site-footer .links{
  display:flex; justify-content:center; gap:24px; flex-wrap:wrap;
  margin-bottom: 14px;
  font-size: 13px;
}
.site-footer .links a{ color: var(--text-dim); }
.site-footer .links a:hover{ color: var(--lime); }

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.9,.3,1);
}
.reveal.in{ opacity:1; transform: translateY(0); }

/* =========================================
   BLOG: LISTADO
   ========================================= */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
@media(max-width:880px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width:560px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.blog-card:hover{ transform: translateY(-4px); border-color: var(--lime); }
.blog-card-link{ display:block; color:inherit; }
.blog-card-img{ aspect-ratio: 1200 / 630; overflow:hidden; border-bottom:1px solid var(--line); }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; }
.blog-card-body{ padding: 22px; }
.blog-card-title{
  font-family: var(--display); font-weight:800; font-size: 23px;
  line-height: 1.05; color: var(--text); margin-bottom: 10px;
}
.blog-card-excerpt{ font-size: 14px; color: var(--text-dim); line-height:1.5; margin-bottom: 14px; }
.blog-card-more{ font-family: var(--mono); font-size: 12px; font-weight:700; color: var(--lime); letter-spacing:0.05em; }

/* =========================================
   BLOG: ARTÍCULO
   ========================================= */
.post-single{ padding: 70px 32px 90px; }
.post-wrap{ max-width: 820px; margin: 0 auto; }
.post-head{ margin-bottom: 32px; }
.post-title{
  font-family: var(--display); font-weight:900;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 0.98; letter-spacing:-0.02em;
  color: var(--text); margin: 12px 0 14px;
}
.post-meta{ font-family: var(--mono); font-size: 12px; color: var(--text-mute); letter-spacing:0.05em; text-transform: uppercase; }
.post-cover{ margin: 0 0 40px; border:1px solid var(--line); border-radius: 16px; overflow:hidden; }
.post-cover img{ display:block; width:100%; height:auto; }

.post-content{ font-size: 17.5px; line-height: 1.75; color: var(--text-dim); }
.post-content h2{
  font-family: var(--display); font-weight:800; font-size: 32px;
  line-height: 1.05; color: var(--text); letter-spacing:-0.01em;
  margin: 42px 0 14px;
}
.post-content h3{ font-family: var(--display); font-weight:700; font-size: 23px; color: var(--text); margin: 26px 0 10px; }
.post-content p{ margin-bottom: 18px; }
.post-content strong{ color: var(--text); }
.post-content em{ color: var(--text); }
.post-content a{ color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover{ color: var(--text); }
.post-content ul, .post-content ol{ margin: 0 0 22px; padding-left: 0; list-style: none; }
.post-content ul li, .post-content ol li{ position: relative; padding: 7px 0 7px 28px; border-bottom: 1px solid var(--line-soft); }
.post-content ul li::before{ content:"✓"; position:absolute; left:0; top:8px; color: var(--bg); background: var(--lime); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.post-content ol{ counter-reset: step; }
.post-content ol li::before{ counter-increment: step; content: counter(step); position:absolute; left:0; top:8px; color: var(--bg); background: var(--lime); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family: var(--mono); }
.post-content code{ background: var(--bg-3); color: var(--lime); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: 14px; }

.post-table{ overflow-x:auto; margin: 0 0 24px; }
.post-table table{ width:100%; border-collapse: collapse; font-size: 15px; }
.post-table th, .post-table td{ text-align:left; padding: 12px 14px; border:1px solid var(--line); }
.post-table th{ background: var(--bg-3); color: var(--text); font-family: var(--display); font-weight:700; }
.post-table td{ color: var(--text-dim); }

.post-code{ background: var(--bg-3); border:1px solid var(--line); border-radius: 10px; padding: 16px 18px; font-family: var(--mono); font-size: 13.5px; color: var(--text); margin: 0 0 24px; line-height: 1.7; overflow-x:auto; }

.post-cta{ background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 10%, var(--panel)) 0%, var(--panel) 100%); border:1px solid var(--lime); border-radius: 18px; padding: 28px 30px; margin: 36px 0; }
.post-cta h3{ font-family: var(--display); font-weight:800; font-size: 24px; color: var(--text); margin: 0 0 10px; }
.post-cta p{ color: var(--text-dim); margin: 0 0 16px; }
.post-cta .post-cta-btns{ display:flex; flex-wrap:wrap; gap: 12px; margin: 0; }
.post-cta-btn{ display:inline-flex; align-items:center; gap:8px; background: var(--lime); color: var(--bg); padding: 14px 22px; border-radius: 100px; font-family: var(--body); font-weight:700; font-size: 15px; }
.post-cta-btn:hover{ transform: translateY(-2px); }
.post-cta-btn.ghost{ background: transparent; color: var(--lime); border:1px solid var(--lime); }
.post-cta-btn.ghost:hover{ background: var(--lime); color: var(--bg); }

.post-nav{ margin-top: 46px; border-top:1px solid var(--line); padding-top: 28px; }

/* =========================================
   RESPONSIVE MÓVIL (Android / iOS)
   ========================================= */

/* Notch / safe areas iOS */
.urgency-bar{ padding-top: max(10px, env(safe-area-inset-top)); }
.sticky-bottom{ padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.live-toast{ left: max(20px, env(safe-area-inset-left)); }

@media(max-width:760px){
  /* La barra de oferta deja de ser fija y el nav pasa a sticky:
     así no se solapan cuando la barra ocupa 2 líneas en móvil. */
  .urgency-bar{
    position: static;
    font-size: 12px;
    gap: 6px 12px;
    padding: 9px 14px;
  }
  nav{
    position: sticky;
    top: 0;
    padding: 12px 18px;
  }
  .hero{ padding: 36px 20px 50px; }
  .hero-title{ margin-bottom: 18px; }
  .hero-sub{ font-size: 17px; }

  /* Botones del nav compactos */
  .nav-actions{ gap: 8px; }
  .nav-trial{ padding: 8px 12px; font-size: 12px; }
  .nav-cta{ padding: 9px 14px; font-size: 12px; }

  /* Menos padding lateral/vertical en secciones */
  section.container{ padding: 64px 20px; }
  .stack-section .container,
  .pricing-section .container,
  .faq-section .container{ padding: 64px 20px !important; }
  .guarantee{ padding: 60px 20px; }
  .final-cta{ padding: 70px 20px; }

  /* CTA del hero a ancho completo y apilados */
  .cta-row .btn-buy,
  .cta-row .btn-ghost{ flex: 1 1 100%; justify-content: center; }
  .price-block{ flex-wrap: wrap; gap: 12px; }
}

@media(max-width:480px){
  .logo{ font-size: 20px; }
  .nav-trial{ padding: 7px 10px; font-size: 11px; }
  .nav-cta{ padding: 8px 12px; font-size: 11px; }
  .countdown-big{ padding: 16px 18px; gap: 6px; }
  .cd-unit{ min-width: 48px; }
  .cd-unit .v, .cd-sep{ font-size: 34px; }
}

/* Deja hueco para la barra fija inferior (móvil) y evita zoom raro en iOS */
@media(max-width:560px){
  body{ padding-bottom: 78px; }
}
@media(max-width:760px){
  input, select, textarea{ font-size: 16px; }
}

/* =========================================
   PAGO PAYPAL (híbrido con WhatsApp)
   ========================================= */
.pc-btns{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.pc-btn-paypal{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffc439;
  color: #0a0a0a;
  border: none;
  padding: 14px 16px;
  border-radius: 100px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  min-height: 44px;
  touch-action: manipulation;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.pc-btn-paypal .ppl{ height: 17px; width: auto; display: block; }
.pc-btn-paypal span{ line-height: 1; }
.pc-btn-paypal:hover{
  background: #f0b90b;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,196,57,0.35);
}
.pp-note{
  text-align: center;
  margin-top: 26px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.pp-note a{ color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* Logos de pago + sellos de seguridad */
.trust-badges{ max-width: 760px; margin: 22px auto 0; text-align: center; }
.pay-row{
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 10px;
}
.pay-chip{
  background: #fff;
  border-radius: 7px;
  height: 34px;
  min-width: 52px;
  padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.pay-chip .wm{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.3px;
}
.pay-chip .visa{ color: #1434CB; font-style: italic; font-size: 16px; letter-spacing: 1px; }
.pay-chip .amex{ color: #2e77bb; letter-spacing: 0.5px; }
.pay-chip .bizum{ color: #14b6c0; font-size: 16px; text-transform: lowercase; letter-spacing: 0; }
.pay-chip .logo-mc{ height: 22px; width: auto; display: block; }
.pay-chip .ppl{ height: 16px; width: auto; display: block; }

.sec-row{
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px 22px;
  margin-top: 16px;
  font-size: 13px; color: var(--text-dim);
}
.sec-badge{ display: inline-flex; align-items: center; gap: 7px; }
.sec-badge svg{ width: 17px; height: 17px; color: var(--lime); flex-shrink: 0; }

/* Footer: fila de pagos compacta */
.footer-pay{ margin: 4px 0 18px; }
.footer-pay .pay-chip{ height: 30px; min-width: 46px; padding: 0 10px; }
.footer-pay .pay-chip .wm{ font-size: 13px; }
.footer-pay .pay-chip .visa,
.footer-pay .pay-chip .bizum{ font-size: 14px; }
.footer-pay .pay-chip .logo-mc{ height: 19px; }
.footer-pay .pay-chip .ppl{ height: 14px; }

@media(max-width:480px){
  .pay-chip{ height: 30px; min-width: 46px; padding: 0 9px; }
  .pay-chip .wm{ font-size: 13px; }
  .sec-row{ gap: 8px 16px; font-size: 12px; }
}

/* =========================================
   MODAL DE PAGO PAYPAL
   ========================================= */
.pp-modal{
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(5,6,9,0.78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.pp-modal.show{ display: flex; }
.pp-modal-card{
  position: relative;
  width: 100%; max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 28px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: ppmIn .25s ease;
}
@keyframes ppmIn{ from{ opacity:0; transform: translateY(16px) scale(.98);} to{ opacity:1; transform:none;} }
.pp-modal-x{
  position: absolute; top: 12px; right: 16px;
  background: transparent; border: none;
  color: var(--text-mute); font-size: 28px; line-height: 1;
  cursor: pointer;
}
.pp-modal-x:hover{ color: var(--text); }
.pp-modal-badge{
  display: inline-block;
  background: color-mix(in srgb, var(--lime) 14%, transparent);
  color: var(--lime);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  font-family: var(--mono); font-size: 12px;
  padding: 5px 12px; border-radius: 100px;
  margin-bottom: 14px;
}
.pp-modal-card h3{
  font-family: var(--display); font-weight: 900;
  font-size: 30px; line-height: 1;
  color: var(--text); margin-bottom: 6px;
}
.pp-modal-card h3 span{ color: var(--lime); }
.ppm-plan{ color: var(--text-dim); font-size: 14px; margin-bottom: 18px; min-height: 18px; }
.ppm-steps{
  list-style: none; counter-reset: s;
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 22px; padding: 0; text-align: left;
}
.ppm-steps li{
  position: relative; padding-left: 44px;
  color: var(--text-dim); font-size: 15px; line-height: 1.4;
  min-height: 32px; display: flex; align-items: center;
}
.ppm-steps li strong{ color: var(--text); }
.ppm-steps li::before{
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lime); color: var(--bg);
  font-family: var(--display); font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ppm-go{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #ffc439; color: #0a0a0a; border: none;
  padding: 16px; border-radius: 100px;
  font-family: var(--body); font-weight: 800; font-size: 16px;
  cursor: pointer; width: 100%;
  min-height: 44px; touch-action: manipulation;
  transition: transform .2s ease, background .2s ease;
}
.ppm-go .ppl{ height: 18px; width: auto; display: block; }
.ppm-go:hover{ background: #f0b90b; transform: translateY(-2px); }
.ppm-cancel{
  display: block; width: 100%; margin-top: 10px;
  background: transparent; border: none;
  color: var(--text-mute); font-size: 13px; cursor: pointer; padding: 10px;
}
.ppm-cancel:hover{ color: var(--text); }
.ppm-foot{ margin-top: 14px; font-size: 12px; color: var(--text-mute); text-align: center; }

/* =========================================
   MODAL LISTA DE CANALES
   ========================================= */
.ch-modal-card{ max-width: 640px; }
.chm-sub{ color: var(--text-dim); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.ch-list{
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 46vh; overflow-y: auto;
  margin-bottom: 16px; padding-right: 4px;
}
.ch-chip{
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
}
.chm-foot{ font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 18px; }
.chm-foot strong{ color: var(--lime); }

/* Pista "Ver lista de canales" en la tarjeta clicable */
.stack-more{
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.04em;
}
.stack-item:hover .stack-more{ text-decoration: underline; }

/* =========================================
   PÁGINA GRACIAS
   ========================================= */
.gracias-page{ padding-top: 120px; }
.gracias-check{
  width: 88px; height: 88px; margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--lime); color: var(--bg);
  font-size: 46px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--lime) 14%, transparent);
}
.gracias-lead{ font-size: 18px; color: var(--text-dim); max-width: 560px; margin: 8px auto 0; line-height: 1.6; }
.gracias-lead strong{ color: var(--text); }
.gracias-steps{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 40px 0 30px; text-align: left;
}
@media(max-width:720px){ .gracias-steps{ grid-template-columns: 1fr; } }
.g-step{
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px;
}
.g-step-main{
  border-color: var(--lime);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 10%, var(--panel)) 0%, var(--panel) 70%);
}
.g-step .g-ico{ font-size: 30px; margin-bottom: 10px; }
.g-step h3{ font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--text); margin-bottom: 8px; }
.g-step p{ font-size: 14.5px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.gracias-cta-label{ font-size: 15px; color: var(--text-dim); max-width: 600px; margin: 0 auto 18px; }
.gracias-cta-label strong{ color: var(--text); }
.gracias-contact{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 30px; }
.gracias-trust{ margin: 10px 0 8px; }
.gracias-back{ font-size: 13px; color: var(--text-mute); margin-top: 22px; }
.gracias-back a{ color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================
   POSTER ROLL — carrusel de pósters
   ========================================= */
.poster-roll-section{
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 56px 0;
}
.poster-roll-head{
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 32px;
}
.poster-roll-title{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text);
}
.poster-roll-title .hl{
  background: var(--lime);
  color: var(--bg);
  padding: 0 10px;
  border-radius: 6px;
  display: inline-block;
  transform: rotate(-1deg);
}
.poster-roll{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.poster-track{
  display: flex;
  width: max-content;
  animation: posterScroll 70s linear infinite;
}
.poster-roll:hover .poster-track{ animation-play-state: paused; }
.poster-set{ display: flex; gap: 18px; padding-right: 18px; }
.poster-card{
  flex: 0 0 auto;
  width: 180px;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.poster-card:hover{
  transform: translateY(-6px) scale(1.03);
  border-color: var(--lime);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.poster-card img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes posterScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

@media(max-width:760px){
  .poster-roll-section{ padding: 44px 0; }
  .poster-roll-head{ padding: 0 20px; margin-bottom: 22px; }
  .poster-card{ width: 132px; border-radius: 12px; }
  .poster-set{ gap: 12px; padding-right: 12px; }
}
@media(max-width:480px){
  .poster-card{ width: 110px; }
}
/* Sin animación: permite arrastrar/scroll manual del carrusel */
@media(prefers-reduced-motion: reduce){
  .poster-roll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =========================================
   FREE TRIAL — botón destacado con brillo
   ========================================= */
@keyframes trialGlow{
  0%,100%{
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--lime) 55%, transparent),
      0 0 16px 2px color-mix(in srgb, var(--lime) 45%, transparent);
  }
  50%{
    box-shadow:
      0 0 0 12px color-mix(in srgb, var(--lime) 0%, transparent),
      0 0 34px 8px color-mix(in srgb, var(--lime) 70%, transparent);
  }
}

/* NAV: "Prueba gratis" pasa a relleno lima y con brillo */
.nav-trial{
  background: var(--lime);
  color: var(--bg);
  border-color: var(--lime);
  font-weight: 800;
  font-size: 14px;
  padding: 11px 20px;
  animation: trialGlow 2s ease-in-out infinite;
}
.nav-trial:hover{
  background: var(--lime);
  color: var(--bg);
  transform: translateY(-1px) scale(1.03);
}

/* HERO: botón "Prueba gratis" grande, relleno y con brillo */
.btn-trial{
  background: var(--lime);
  color: var(--bg);
  border: 2px solid color-mix(in srgb, var(--lime) 60%, #fff);
  font-weight: 800;
  font-size: 18px;
  padding: 24px 36px;
  letter-spacing: 0.01em;
  animation: trialGlow 2.2s ease-in-out infinite;
}
.btn-trial:hover{
  background: var(--lime);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--lime) 60%, #fff);
  transform: translateY(-2px) scale(1.02);
}

/* CTAs de artículo (no fantasma) con brillo suave */
.post-cta-btn:not(.ghost){
  animation: trialGlow 2.6s ease-in-out infinite;
  font-size: 16px;
  padding: 16px 26px;
}

/* =========================================
   STICKY BOTTOM (móvil): añade prueba gratis
   ========================================= */
.sticky-bottom .btn-trial{
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
  padding: 13px 14px;
  font-size: 13.5px;
  border-width: 2px;
}
.sticky-bottom .btn-buy{
  flex: 0 0 auto;
  padding: 13px 16px;
  font-size: 13.5px;
}
.sticky-bottom .price-mini{ flex: 0 0 auto; }
@media(max-width:400px){
  .sticky-bottom .price-mini{ display:none; }
  .sticky-bottom .btn-buy{ padding: 13px 14px; }
}

/* =========================================
   ÁREAS TÁCTILES + TABLET / MÓVIL FINO
   ========================================= */
/* Objetivos táctiles cómodos (Apple/Android: mínimo ~44px) */
a, button, input, select, textarea{ -webkit-tap-highlight-color: rgba(212,255,58,0.18); }
.nav-cta, .nav-trial,
.btn-buy, .btn-ghost, .btn-trial,
.pc-btn, .post-cta-btn,
.faq-item .q{
  min-height: 44px;
  touch-action: manipulation;
}
img{ max-width:100%; height:auto; }

/* TABLETS (incl. iPad / Android landscape) */
@media(min-width:761px) and (max-width:1024px){
  .hero{ padding: 130px 28px 50px; }
  section.container{ padding: 80px 28px; }
  .guarantee{ padding: 70px 28px; }
  .final-cta{ padding: 80px 28px; }
  .testi-grid{ columns: 2; }
  .pricing-grid{ gap: 16px; }
  .stack-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* En móvil el botón prueba gratis va a ancho completo y bien grande */
@media(max-width:760px){
  .cta-row .btn-trial{ flex: 1 1 100%; font-size: 17px; padding: 20px 24px; }
  .nav-trial{ padding: 9px 14px; font-size: 12.5px; }
}
@media(max-width:600px){
  /* Mostramos también en móvil los enlaces del nav (Guías / Precios) */
  .nav-link{ display: inline-flex; align-items: center; font-size: 13px; }
  .nav-actions{ gap: 10px; }
  /* La compra ya está en el hero y en la barra inferior: liberamos espacio */
  .nav-cta{ display: none; }
}
@media(max-width:480px){
  .nav-trial{ padding: 8px 12px; font-size: 12px; }
  .nav-actions{ gap: 8px; }
}
@media(max-width:430px){
  /* En pantallas muy estrechas priorizamos "Precios" y ocultamos "Guías" */
  .nav-link-guias{ display: none; }
  .nav-link{ font-size: 12.5px; }
}

@media(prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1; transform:none; }
}