:root{
  --coral:#f06a4f;
  --coral-dark:#df553c;
  --cream:#fff8f4;
  --ink:#191919;
  --muted:#706b68;
  --line:#eaded8;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream);line-height:1.5}
a{text-decoration:none;color:inherit}
.wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,248,244,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;letter-spacing:-1px;font-size:22px}
.brand span{color:var(--coral)}
.nav nav{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:700}
.nav nav a:hover{color:var(--coral)}
.nav-cta{background:var(--coral);color:white!important;padding:10px 17px;border-radius:999px}
.hero{background:var(--coral);color:white;padding:90px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:center}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:2px;opacity:.82;margin-bottom:12px}
.eyebrow.orange{color:var(--coral);opacity:1}
h1{font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-4px;margin:0 0 25px}
h1 strong{font-weight:900}
.hero-copy{font-size:19px;max-width:620px;opacity:.92}
.hero-actions{display:flex;gap:22px;align-items:center;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;font-weight:850}
.btn-light{background:white;color:var(--coral)}
.btn-dark{background:var(--ink);color:white}
.text-link{font-weight:700;text-decoration:underline;text-underline-offset:5px}
.hero-card{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.35);border-radius:28px;padding:32px}
.mini-label{font-size:11px;letter-spacing:2px;font-weight:800;opacity:.75}
.big-number{font-size:58px;line-height:1;font-weight:900;letter-spacing:-3px;margin-top:25px}
.big-caption{font-size:16px;opacity:.9;margin-top:6px}
.stat-line{height:1px;background:rgba(255,255,255,.3);margin:26px 0}
.stats{background:var(--ink);color:white}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stats-grid div{padding:25px;border-right:1px solid #333;display:flex;flex-direction:column}
.stats-grid div:last-child{border:0}
.stats-grid strong{font-size:28px}
.stats-grid span{font-size:13px;color:#c7c2bf}
.section{padding:85px 0}
.section.alt{background:white}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px}
.section-head h2,.simple-grid h2,.how h2,.cta h2{font-size:clamp(30px,4vw,48px);letter-spacing:-2px;line-height:1.05;margin:0}
.section-head>p{max-width:380px;color:var(--muted);font-size:14px;text-align:right}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;min-height:166px;position:relative;transition:.2s transform,.2s box-shadow}
.alt .card{background:var(--cream)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(0,0,0,.07)}
.card.featured{border:2px solid var(--coral)}
.tag{position:absolute;top:14px;right:14px;background:var(--coral);color:white;font-size:9px;font-weight:900;letter-spacing:1px;padding:6px 8px;border-radius:999px}
.card h3{font-size:18px;margin:0 0 10px;padding-right:80px}
.audience{color:var(--muted);font-size:13px}
.price{font-size:24px;font-weight:900;margin-top:23px;color:var(--coral)}
.price small{font-size:11px;font-weight:700;color:var(--muted)}
.offer{padding:20px 0;background:var(--ink);color:white}
.offer-box{background:var(--coral);border-radius:28px;padding:35px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.offer h2{margin:0;font-size:32px;letter-spacing:-1px}
.offer p{margin:7px 0 0;opacity:.9}
.offer-price{text-align:right}
.offer-price span{display:block;font-size:48px;font-weight:900;line-height:1}
.offer-price small{display:block;margin-top:7px}
.simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.simple-grid p{color:var(--muted);font-size:17px}
.note{font-size:13px!important}
.how{background:var(--coral);color:white;padding:85px 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
.steps>div{border-top:1px solid rgba(255,255,255,.35);padding-top:20px}
.steps b{font-size:12px;opacity:.7}
.steps h3{margin:22px 0 8px;font-size:20px}
.steps p{margin:0;opacity:.82;font-size:14px}
.cta{text-align:center;padding:90px 0;background:white}
.cta p{max-width:600px;margin:18px auto 28px;color:var(--muted);font-size:17px}
footer{background:var(--ink);color:#aaa;padding:24px 0;font-size:12px}
.footer-inner{display:flex;justify-content:space-between}
@media(max-width:850px){
  .nav nav a:not(.nav-cta){display:none}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .section-head{align-items:start;flex-direction:column}
  .section-head>p{text-align:left}
  .simple-grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:560px){
  .wrap{width:min(100% - 28px,1160px)}
  .hero{padding:60px 0}
  h1{letter-spacing:-2.5px;font-size:48px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:15px}
  .stats-grid{grid-template-columns:1fr}
  .stats-grid div{border-right:0;border-bottom:1px solid #333}
  .section{padding:60px 0}
  .cards{grid-template-columns:1fr}
  .offer-box{padding:28px;flex-direction:column;align-items:flex-start}
  .offer-price{text-align:left}
  .steps{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:7px}
}

.profile-placeholder{
  width:52px;
  height:52px;
  border-radius:15px;
  background:#2b2b2b;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  margin-bottom:18px;
}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.offers{
  background:#fff;
  padding:70px 0 80px;
}
.offers-head{margin-bottom:28px}
.offer-card{
  border:1px solid var(--line);
  border-radius:24px;
  padding:27px;
  background:var(--cream);
  min-height:245px;
  display:flex;
  flex-direction:column;
}
.offer-card.featured-offer{
  background:var(--coral);
  color:#fff;
  border-color:var(--coral);
  transform:translateY(-6px);
}
.offer-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:1.5px;
  opacity:.72;
}
.offer-card h3{
  font-size:23px;
  line-height:1.1;
  margin:14px 0 10px;
  letter-spacing:-.6px;
}
.offer-card p{
  color:var(--muted);
  font-size:14px;
  margin:0;
}
.featured-offer p{color:rgba(255,255,255,.86)}
.offer-bottom{
  margin-top:auto;
  padding-top:24px;
  display:flex;
  align-items:end;
  gap:10px;
}
.offer-bottom strong{
  font-size:34px;
  line-height:1;
}
.offer-bottom span{
  color:var(--muted);
  font-size:11px;
}
.featured-offer .offer-bottom span{color:rgba(255,255,255,.75)}
.offer-note{
  margin:22px 0 0;
  color:var(--muted);
  font-size:12px;
}
@media(max-width:850px){
  .offer-grid{grid-template-columns:1fr}
  .offer-card.featured-offer{transform:none}
}

.catalog-more{display:flex;justify-content:center;margin-top:28px}.page-hero{background:var(--coral);color:#fff;padding:70px 0}.page-hero h1{font-size:clamp(42px,6vw,64px);letter-spacing:-3px;margin:0 0 14px}.page-hero p{font-size:17px;opacity:.9;margin:0}.card h3 a{text-decoration:underline;text-decoration-color:rgba(240,106,79,.35);text-underline-offset:4px}.card h3 a:hover{color:var(--coral)}

/* Profile images/placeholders */
.card{overflow:hidden}
.profile-right{
  position:absolute;
  top:20px;
  right:20px;
  margin:0;
  width:58px;
  height:58px;
  border-radius:50%;
  border:3px solid var(--white);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.card h3{padding-right:78px}

/* Offer badges */
.offer-card{position:relative;overflow:visible}
.discount-seal{
  position:absolute;
  top:-16px;
  right:18px;
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--coral);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:21px;
  line-height:.9;
  font-weight:950;
  transform:rotate(8deg);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  border:3px solid #fff;
}
.discount-seal small{
  font-size:9px;
  letter-spacing:1px;
  margin-top:5px;
}
.featured-offer .discount-seal{
  background:#fff;
  color:var(--coral);
}
.offer-platform{
  font-size:10px;
  font-weight:950;
  letter-spacing:1.4px;
  margin-bottom:8px;
  opacity:.7;
}
.featured-offer .offer-platform{color:rgba(255,255,255,.8);opacity:1}

.tag{
  top:14px;
  left:20px;
  right:auto;
  z-index:2;
  padding:6px 10px;
}

.catalog-table{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.catalog-header,.catalog-row{display:grid;grid-template-columns:minmax(0,1.8fr) .8fr .8fr;gap:16px;align-items:center}
.catalog-header{padding:13px 18px;background:var(--ink);color:#fff;font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.catalog-row{padding:10px 18px;border-top:1px solid var(--line);min-height:64px;transition:.15s;background:#fff}
.catalog-row:hover{background:var(--cream)}
.row-avatar{width:42px;height:42px;border-radius:50%;background:#292929;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;grid-column:1;float:left;margin-right:12px}
.row-name{font-weight:800;font-size:14px;grid-column:1}
.row-followers{font-size:13px;color:var(--muted);grid-column:2}
.row-price{font-size:15px;font-weight:900;color:var(--coral);grid-column:3}
.x-table .catalog-header,.x-table .catalog-row{grid-template-columns:minmax(0,1.6fr) .7fr .55fr .55fr}
.x-table .row-rt{grid-column:4;font-size:12px;color:var(--muted)}
.payments{background:var(--cream);padding:70px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.payment-grid h2{font-size:clamp(30px,4vw,44px);letter-spacing:-2px;margin:0 0 12px}
.payment-grid p{color:var(--muted);max-width:560px}
.payment-methods{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.payment-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 20px;font-weight:800}
@media(max-width:700px){
  .catalog-header{display:none}
  .catalog-row,.x-table .catalog-row{grid-template-columns:46px 1fr auto;gap:8px;padding:10px 12px}
  .row-avatar{grid-column:1;grid-row:1 / span 2;margin:0}
  .row-name{grid-column:2;grid-row:1;font-size:13px}
  .row-followers{grid-column:2;grid-row:2;font-size:11px}
  .row-price{grid-column:3;grid-row:1;font-size:14px}
  .x-table .row-rt{grid-column:3;grid-row:2;text-align:right;font-size:10px}
  .payment-grid{grid-template-columns:1fr;gap:25px}
  .payment-methods{justify-content:flex-start}
}

.catalog-more{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.catalog-more .btn{
  padding:12px 22px;
}

/* V8: avatar flotante a la izquierda en listados */
.catalog-row{position:relative;display:flex;align-items:center;gap:0;min-height:68px;padding:10px 18px 10px 76px}
.catalog-row .row-avatar{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:42px;height:42px;margin:0;border-radius:50%;background:#292929;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.catalog-row .row-name{flex:1;min-width:0;grid-column:auto}.catalog-row .row-followers{flex:0 0 115px;grid-column:auto}.catalog-row .row-price{flex:0 0 95px;grid-column:auto}.catalog-row .row-rt{flex:0 0 75px;grid-column:auto}
.catalog-offers{margin:0 0 38px}.catalog-offers .section-mini-head{margin-bottom:18px}.catalog-offers .section-mini-head h2{margin:0;font-size:28px;letter-spacing:-1.2px}
.catalog-offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.catalog-offer{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px 20px;box-shadow:0 8px 25px rgba(0,0,0,.04);overflow:hidden}
.catalog-offer .discount-mini{position:absolute;top:14px;right:14px;border-radius:999px;background:var(--coral);color:#fff;font-size:11px;font-weight:950;padding:6px 10px}.catalog-offer .offer-platform{margin-right:72px}.catalog-offer h3{margin:5px 0 8px;font-size:20px}.catalog-offer p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5}.catalog-offer-bottom{display:flex;align-items:baseline;gap:10px}.catalog-offer-bottom strong{font-size:23px;color:var(--coral)}.catalog-offer-bottom span{font-size:11px;color:var(--muted)}
@media(max-width:700px){.catalog-row,.x-table .catalog-row{display:flex;position:relative;padding:10px 10px 10px 62px;min-height:60px;gap:8px}.catalog-row .row-avatar{left:10px;width:38px;height:38px}.catalog-row .row-name{flex:1}.catalog-row .row-followers{display:none}.catalog-row .row-price{flex:0 0 auto}.catalog-row .row-rt{flex:0 0 auto;margin-left:auto}.catalog-offer-grid{grid-template-columns:1fr}}

/* =========================================================
   V10 — efectos profesionales, visibles pero ligeros
   ========================================================= */

/* Aparición de bloques al entrar en pantalla */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Retraso progresivo para las tarjetas */
.cards .card:nth-child(2){transition-delay:.06s}
.cards .card:nth-child(3){transition-delay:.12s}
.cards .card:nth-child(4){transition-delay:.18s}
.cards .card:nth-child(5){transition-delay:.24s}
.cards .card:nth-child(6){transition-delay:.30s}

/* Hero: luz ambiental visible */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.17),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(255,255,255,.08),transparent 30%),
    var(--coral);
}

.hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-220px;
  top:-260px;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  filter:blur(2px);
  z-index:-1;
  animation:heroGlow 10s ease-in-out infinite;
}

.hero::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  left:-160px;
  bottom:-190px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  z-index:-1;
  animation:heroOrbit 12s ease-in-out infinite;
}

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

@keyframes heroGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-35px,28px,0) scale(1.08)}
}

@keyframes heroOrbit{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(35px,-20px,0) scale(1.15)}
}

/* Tarjetas */
.cards .card,
.offer-grid .offer-card,
.catalog-offer-grid .catalog-offer{
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

@media (hover:hover) and (pointer:fine){
  .cards .card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 42px rgba(0,0,0,.11);
    border-color:rgba(240,106,79,.38);
  }

  .offer-card:hover,
  .catalog-offer:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 38px rgba(0,0,0,.10);
  }

  .profile-right{
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }

  .card:hover .profile-right{
    transform:scale(1.08) rotate(4deg);
  }

  .btn{
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  }

  .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 22px rgba(0,0,0,.13);
  }

  .catalog-row{
    transition:background .18s ease,transform .18s ease;
  }

  .catalog-row:hover{
    transform:translateX(4px);
    background:#fffaf7;
  }
}

/* Sello de descuento: pequeño movimiento */
.discount-seal,
.discount-mini{
  animation:sealFloat 3.6s ease-in-out infinite;
}

@keyframes sealFloat{
  0%,100%{transform:rotate(8deg) translateY(0)}
  50%{transform:rotate(5deg) translateY(-4px)}
}

/* Destello sutil en los botones principales */
.nav-cta,
.offer-card.featured-offer .btn,
.hero .btn-light{
  position:relative;
  overflow:hidden;
}

.nav-cta::after,
.hero .btn-light::after{
  content:"";
  position:absolute;
  top:-80%;
  left:-80%;
  width:45%;
  height:260%;
  background:rgba(255,255,255,.28);
  transform:rotate(25deg);
  animation:buttonShine 5.5s ease-in-out infinite;
}

@keyframes buttonShine{
  0%,55%,100%{left:-80%}
  70%{left:145%}
}

/* Cabecera */
.topbar{
  transition:box-shadow .25s ease,background .25s ease;
}

.topbar.scrolled{
  box-shadow:0 6px 28px rgba(0,0,0,.08);
}

/* Ofertas: slider táctil en móvil */
@media(max-width:700px){
  .offer-grid,
  .catalog-offer-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:5px 2px 16px;
    margin-right:-14px;
    padding-right:14px;
    scrollbar-width:thin;
  }

  .offer-grid .offer-card,
  .catalog-offer-grid .catalog-offer{
    flex:0 0 88%;
    scroll-snap-align:start;
  }

  .offer-grid::-webkit-scrollbar,
  .catalog-offer-grid::-webkit-scrollbar{
    height:5px;
  }

  .offer-grid::-webkit-scrollbar-thumb,
  .catalog-offer-grid::-webkit-scrollbar-thumb{
    background:var(--coral);
    border-radius:999px;
  }
}

/* Accesibilidad */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation:none!important;
    transition-duration:.01ms!important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}