/* ============ AURENG NFC — product page ============ */

.proof-pills{ display:flex; gap:12px; flex-wrap:wrap; }
.proof-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-dim);
  border:1px solid var(--line); padding:9px 15px; border-radius:999px;
}
.proof-pill svg{ width:15px; height:15px; color:var(--gold); stroke-width:1.8; }

/* ---- hero visual: NFC stand + sticker mock ---- */
.nfc-hero .hero-visual{ height:480px; }
.nfc-mock{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

.nfc-ring{
  position:absolute; top:48%; left:46%;
  border:1px solid rgba(150,111,42,.28);
  border-radius:50%; transform:translate(-50%,-50%);
  animation:ringPulse 3.4s ease-out infinite;
}
.r1{ width:260px; height:260px; animation-delay:0s; }
.r2{ width:350px; height:350px; animation-delay:1.1s; }
.r3{ width:440px; height:440px; animation-delay:2.2s; }
@keyframes ringPulse{
  0%{ opacity:.55; transform:translate(-50%,-50%) scale(.9); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.06); }
}
.nfc-glow{ top:38%; left:44%; width:300px; height:300px; }

.nfc-stand{ position:relative; z-index:2; animation:float 7s ease-in-out infinite; }
.nfc-stand-card{
  width:210px; height:270px; border-radius:22px;
  background:linear-gradient(160deg, #fbf6ea, #ffffff 75%);
  border:1px solid rgba(150,111,42,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  box-shadow:0 40px 70px -28px rgba(74,55,24,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.nfc-chip-icon{ width:52px; height:52px; color:var(--gold); stroke-width:1.4; }
.nfc-stand-label{ font-size:11px; letter-spacing:.16em; color:var(--text-faint); font-weight:700; }
.nfc-stand-stars{ color:var(--gold); font-size:17px; letter-spacing:3px; }
.nfc-stand-base{
  width:250px; height:18px; margin:-4px auto 0;
  background:radial-gradient(ellipse, rgba(74,55,24,.18), transparent 72%);
  filter:blur(2px);
}

.nfc-sticker{
  position:absolute; z-index:3; bottom:8%; right:10%;
  width:66px; height:66px; border-radius:16px;
  background:linear-gradient(150deg, rgba(230,196,120,.4), rgba(230,196,120,.08));
  border:1px solid rgba(150,111,42,.45);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  transform:rotate(-9deg);
  box-shadow:0 16px 32px -12px rgba(74,55,24,.25);
  animation:float 8s ease-in-out infinite 1.4s;
}
.nfc-sticker svg{ width:28px; height:28px; stroke-width:1.4; }

/* ---- cómo funciona ---- */
.how{ padding:110px 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.how-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.how-step .step-icon svg{ width:24px; height:24px; stroke-width:1.6; }
.how-step h3{ font-size:18px; margin-bottom:10px; }
.how-step p{ color:var(--text-dim); font-size:14px; max-width:280px; }

/* ---- productos ---- */
.productos{ padding:120px 0; }
.products-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.product-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s;
}
.product-card:hover{ transform:translateY(-6px); border-color:rgba(201,151,63,.45); box-shadow:0 20px 40px -26px rgba(74,55,24,.25); }
.product-visual{ height:210px; display:flex; align-items:center; justify-content:center; }
.product-visual svg{ width:60px; height:60px; color:var(--gold); stroke-width:1.3; }
.visual-stand{ background:radial-gradient(circle at 72% 28%, rgba(230,196,120,.42), transparent 60%), linear-gradient(160deg,#f9f1de,#fffdf9 70%); }
.visual-sticker{ background:radial-gradient(circle at 28% 72%, rgba(230,196,120,.44), transparent 60%), linear-gradient(160deg,#f7efdb,#fffdf9 70%); }
.product-body{ padding:30px 32px 34px; }
.product-eyebrow{ margin-bottom:10px !important; }
.product-body h3{ font-size:21px; margin-bottom:12px; }
.product-body p{ color:var(--text-dim); font-size:14px; margin-bottom:20px; }
.product-features{ display:flex; flex-direction:column; gap:11px; margin-bottom:24px; }
.product-features li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-dim); }
.product-features svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; stroke-width:2; }

/* ---- precios ---- */
.precios{ padding:110px 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{
  position:relative;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 28px 30px; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -26px rgba(74,55,24,.22); }
.price-featured{
  border-color:rgba(201,151,63,.55);
  background:linear-gradient(180deg, rgba(201,151,63,.1), var(--bg-card));
}
.price-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad-gold); color:#241c0e;
  font-size:11px; font-weight:800; letter-spacing:.08em;
  padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.price-card h3{ font-size:19px; margin-bottom:8px; }
.price-desc{ color:var(--text-dim); font-size:14px; margin-bottom:20px; min-height:38px; }
.price-tag{ display:flex; align-items:baseline; gap:8px; margin-bottom:24px; }
.price-amount{ font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--text); }
.price-period{ font-size:12px; color:var(--text-faint); }
.price-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1; }
.price-features li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-dim); }
.price-features svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; stroke-width:2; }
.price-btn{ width:100%; justify-content:center; }
.price-addon{
  margin-top:40px; display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--text-dim); font-size:14px; text-align:center;
}
.price-addon svg{ width:18px; height:18px; color:var(--gold); stroke-width:1.6; }

/* ---- beneficios ---- */
.beneficios{ padding:120px 0; }
.benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.benefit-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; transition:transform .4s var(--ease), border-color .4s;
}
.benefit-card:hover{ transform:translateY(-6px); border-color:rgba(201,151,63,.45); box-shadow:0 20px 40px -26px rgba(74,55,24,.2); }
.benefit-card svg{ width:26px; height:26px; color:var(--gold); margin-bottom:16px; stroke-width:1.6; }
.benefit-card h3{ font-size:16px; margin-bottom:8px; }
.benefit-card p{ color:var(--text-dim); font-size:13.5px; }

/* ---- faq ---- */
.faq{ padding:110px 0 130px; background:var(--bg-soft); border-top:1px solid var(--line); }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:4px 24px; }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 0; font-family:var(--font-display); font-weight:600; font-size:15.5px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; transition:transform .3s var(--ease); stroke-width:1.8; }
.faq-item[open] summary svg{ transform:rotate(180deg); }
.faq-item p{ color:var(--text-dim); font-size:14px; line-height:1.65; padding:0 0 20px; }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .products-grid{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .benefits-grid{ grid-template-columns:1fr 1fr; }
  .how-row{ grid-template-columns:1fr; row-gap:36px; }
}
@media (max-width:860px){
  .nfc-hero .hero-visual{ height:340px; order:-1; }
}
@media (max-width:640px){
  .benefits-grid{ grid-template-columns:1fr; }
}