/*
Theme Name: GlowUp
Theme URI: https://glowup.octopusops.org
Author: GlowUp
Description: Tema a medida para la pagina de producto de GlowUp (serum de acido hialuronico), estilo Necessaire.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: glowup
*/

:root{
  --purple:#510D8E;
  --purple-dark:#3D0A6B;
  --purple-tint:#F4EEFB;
  --ink:#1A1A1A;
  --ink-soft:#5C5C5C;
  --paper:#FAF9F7;
  --line:#E9E5E0;
  --white:#FFFFFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple); margin-bottom:14px; display:block;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--purple); color:#fff; font-family:'Poppins',sans-serif;
  font-weight:600; font-size:16px; padding:16px 34px; border-radius:999px;
  border:none; cursor:pointer; transition:background .15s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--purple-dark); transform:translateY(-1px); color:#fff;}

/* Header */
header{
  position:sticky; top:0; z-index:50; background:rgba(250,249,247,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:1140px; margin:0 auto;
}
.nav img{height:26px;}
.nav-links{display:flex; gap:32px; font-size:14px; font-weight:500; color:var(--ink-soft);}
.nav-links a:hover{color:var(--purple);}
.nav-cta{display:flex; align-items:center; gap:24px;}
.nav .btn{padding:11px 24px; font-size:14px;}
@media (max-width:820px){ .nav-links{display:none;} }

/* Hero */
.hero{padding:64px 0 40px;}
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.hero h1{font-size:44px; line-height:1.12; font-weight:700; margin-bottom:20px; letter-spacing:-.01em;}
.hero p.sub{font-size:18px; color:var(--ink-soft); margin-bottom:32px; max-width:440px;}
.hero-cta-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:18px;}
.price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:28px;}
.price-now{font-size:26px; font-weight:700; font-family:'Poppins',sans-serif;}
.price-was{font-size:16px; color:#9A9A9A; text-decoration:line-through;}
.hero-note{font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.hero-visual{
  background:linear-gradient(160deg,#F4EEFB 0%, #EFE7FA 60%, #F7F3FC 100%);
  border-radius:28px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.hero-visual svg{width:52%; height:auto;}
.hero-visual img.product-photo{width:100%; height:100%; object-fit:cover; border-radius:28px;}
.hero-visual .glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(81,13,142,.14) 0%, rgba(81,13,142,0) 70%);
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero h1{font-size:32px;}
  .hero-visual{order:-1; aspect-ratio:4/3;}
}

/* Trust bar */
.trust{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0;}
.trust-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; color:var(--ink-soft); flex:1; min-width:180px; justify-content:center;}
.trust-item svg{flex-shrink:0; color:var(--purple);}

/* Section headers */
.section-head{text-align:center; max-width:560px; margin:0 auto 56px;}
.section-head h2{font-size:32px; font-weight:700; letter-spacing:-.01em;}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:16px;}

/* Benefits */
.benefits-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.benefit-card{
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:32px 24px; text-align:center; transition:border-color .15s ease, transform .15s ease;
}
.benefit-card:hover{border-color:var(--purple); transform:translateY(-3px);}
.icon-circle{
  width:52px; height:52px; border-radius:50%; background:var(--purple-tint);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--purple);
}
.benefit-card h3{font-size:16px; font-weight:600; margin-bottom:6px;}
.benefit-card p{font-size:14px; color:var(--ink-soft);}
@media (max-width:900px){ .benefits-grid{grid-template-columns:repeat(2,1fr);} }

/* How to use */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; counter-reset:step;}
.step{text-align:center; position:relative;}
.step .num{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--purple); color:var(--purple);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-weight:700; font-family:'Poppins',sans-serif;
}
.step h3{font-size:17px; font-weight:600; margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft); max-width:240px; margin:0 auto;}
@media (max-width:820px){ .steps{grid-template-columns:1fr; gap:32px;} }

/* Reviews */
.reviews-alt{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.review-card{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:28px;}
.stars{color:var(--purple); font-size:15px; margin-bottom:14px; letter-spacing:2px;}
.review-card p{font-size:14.5px; color:var(--ink); margin-bottom:18px;}
.reviewer{display:flex; align-items:center; gap:10px;}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:'Poppins',sans-serif;}
.reviewer .name{font-size:13.5px; font-weight:600;}
.reviewer .meta{font-size:12px; color:var(--ink-soft);}
@media (max-width:900px){ .reviews-grid{grid-template-columns:1fr;} }

/* Ingredients */
.ingredients-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:820px; margin:0 auto;}
.ing-card{border-radius:20px; padding:32px; border:1px solid var(--line);}
.ing-card.yes{background:var(--purple-tint); border-color:transparent;}
.ing-card.no{background:var(--white);}
.ing-card h3{font-size:16px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.ing-card ul{list-style:none;}
.ing-card li{font-size:14.5px; color:var(--ink); padding:9px 0; border-bottom:1px solid rgba(0,0,0,.06); display:flex; align-items:center; gap:10px;}
.ing-card li:last-child{border-bottom:none;}
@media (max-width:700px){ .ingredients-grid{grid-template-columns:1fr;} }

/* FAQ */
.faq{max-width:720px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 4px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; color:var(--ink);
}
.faq-q .plus{font-size:20px; color:var(--purple); transition:transform .2s ease; font-weight:400;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{font-size:14.5px; color:var(--ink-soft); padding:0 4px 22px;}

/* Final CTA */
.final-cta{
  background:var(--purple); color:#fff; border-radius:28px; text-align:center;
  padding:72px 40px; margin:0 24px;
}
.final-cta h2{font-size:32px; font-weight:700; margin-bottom:14px; color:#fff;}
.final-cta p{font-size:16px; color:#E3D6F5; margin-bottom:32px; max-width:480px; margin-left:auto; margin-right:auto;}
.final-cta .btn{background:#fff; color:var(--purple);}
.final-cta .btn:hover{background:#F0E8FA; color:var(--purple-dark);}
.guarantee-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.12); padding:8px 16px; border-radius:999px; margin-bottom:20px;
}

footer.site-footer{padding:48px 0 32px; text-align:center;}
footer.site-footer img{height:20px; margin:0 auto 12px; opacity:.7;}
footer.site-footer p{font-size:13px; color:var(--ink-soft);}