/* ===========================================================
   GAELSTOCK.COM — ESTILOS
   Paleta basada en el logo dorado
   =========================================================== */

:root{
  --oro:      #d99a2b;
  --oro-claro:#e9b959;
  --oro-osc:  #b97d16;
  --negro:    #1c1c1c;
  --gris:     #6b6b6b;
  --gris-cl:  #f4f2ee;
  --blanco:   #ffffff;
  --verde-wa: #25d366;
  --sombra:   0 6px 24px rgba(0,0,0,.08);
  --radio:    14px;
  --max:      1200px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Poppins',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--negro);
  background:var(--blanco);
  line-height:1.55;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 18px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:50px; transition:.2s; text-align:center;
}
.btn-oro{ background:linear-gradient(135deg,var(--oro-claro),var(--oro-osc)); color:#fff; }
.btn-oro:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.btn-wa{ background:var(--verde-wa); color:#fff; }
.btn-wa:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.btn-outline{ background:transparent; border:2px solid var(--oro); color:var(--oro-osc); }
.btn-outline:hover{ background:var(--oro); color:#fff; }
.btn-block{ width:100%; }

/* ---------- HEADER ---------- */
.topbar{
  background:var(--negro); color:#f1e9da; font-size:.82rem;
  text-align:center; padding:7px 12px; letter-spacing:.3px;
}
.topbar b{ color:var(--oro-claro); }

header.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:56px; width:auto; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a.link{
  padding:9px 14px; border-radius:50px; font-weight:600; font-size:.92rem; color:var(--negro);
  transition:.2s;
}
.nav-links a.link:hover{ background:var(--gris-cl); color:var(--oro-osc); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.socials{ display:flex; align-items:center; gap:10px; }
.socials a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gris-cl); transition:.2s;
}
.socials a:hover{ background:var(--oro); transform:translateY(-2px); }
.socials a svg{ width:19px; height:19px; }
.socials a.wa:hover{ background:var(--verde-wa); }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle span{ display:block; width:26px; height:3px; background:var(--negro); margin:5px 0; border-radius:3px; transition:.3s; }

/* ---------- HERO ---------- */
.hero{
  background:linear-gradient(120deg,#fff8ec 0%,#fdeecb 100%);
  padding:56px 0; position:relative; overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.hero h1{ font-size:2.6rem; line-height:1.15; margin-bottom:14px; }
.hero h1 span{
  background:linear-gradient(135deg,var(--oro-claro),var(--oro-osc));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{ color:var(--gris); font-size:1.08rem; margin-bottom:24px; max-width:520px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-img{ text-align:center; }
.hero-img img{ margin:0 auto; max-height:340px; width:auto; filter:drop-shadow(0 20px 30px rgba(185,125,22,.25)); }

/* ---------- FRANJA BENEFICIOS ---------- */
.benefits{ background:var(--negro); color:#fff; }
.benefits .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 18px; }
.benefit{ display:flex; align-items:center; gap:12px; }
.benefit svg{ width:34px; height:34px; color:var(--oro-claro); flex-shrink:0; }
.benefit b{ display:block; font-size:.98rem; }
.benefit small{ color:#c9c2b6; font-size:.8rem; }

/* ---------- SECCIONES ---------- */
.section{ padding:52px 0; }
.section-head{ text-align:center; margin-bottom:34px; }
.section-head h2{ font-size:2rem; margin-bottom:8px; }
.section-head h2 span{ color:var(--oro-osc); }
.section-head p{ color:var(--gris); }
.section.alt{ background:var(--gris-cl); }

/* ---------- CATEGORÍAS ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.cat-card{
  background:#fff; border-radius:var(--radio); padding:20px 10px; text-align:center;
  box-shadow:var(--sombra); transition:.2s; border:1px solid #eee;
}
.cat-card:hover{ transform:translateY(-4px); border-color:var(--oro-claro); }
.cat-card .ic{
  width:54px; height:54px; margin:0 auto 10px; border-radius:50%;
  background:linear-gradient(135deg,#fff2d8,#fbe0ab);
  display:flex; align-items:center; justify-content:center;
}
.cat-card .ic svg{ width:26px; height:26px; color:var(--oro-osc); }
.cat-card b{ font-size:.85rem; font-weight:600; }

/* ---------- GRILLA PRODUCTOS ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prod-card{
  background:#fff; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); border:1px solid #eee; transition:.2s;
  display:flex; flex-direction:column;
}
.prod-card:hover{ transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,0,0,.12); }
.prod-thumb{ position:relative; aspect-ratio:1/1; background:var(--gris-cl); }
.prod-thumb img{ width:100%; height:100%; object-fit:cover; }
.badge{
  position:absolute; top:10px; left:10px; background:#e23b3b; color:#fff;
  font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:50px;
}
.badge.free{ top:10px; left:auto; right:10px; background:var(--verde-wa); }
.prod-body{ padding:14px; display:flex; flex-direction:column; flex:1; }
.prod-cat{ font-size:.72rem; color:var(--oro-osc); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.prod-name{ font-size:.98rem; font-weight:600; margin:4px 0 8px; min-height:2.6em; }
.prod-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.prod-price .now{ font-size:1.25rem; font-weight:700; color:var(--negro); }
.prod-price .before{ font-size:.9rem; color:#aaa; text-decoration:line-through; }
.prod-actions{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }

/* ---------- BUSCADOR / FILTROS ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:26px; }
.search-box{ position:relative; flex:1; min-width:240px; }
.search-box input{
  width:100%; padding:12px 16px 12px 44px; border:1px solid #ddd; border-radius:50px; font-size:.95rem; font-family:inherit;
}
.search-box input:focus{ outline:none; border-color:var(--oro); }
.search-box svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#999; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:8px 16px; border-radius:50px; border:1px solid #ddd; background:#fff; cursor:pointer;
  font-size:.85rem; font-weight:500; transition:.2s; font-family:inherit;
}
.chip:hover{ border-color:var(--oro); }
.chip.active{ background:var(--oro); color:#fff; border-color:var(--oro); }

.empty{ text-align:center; padding:50px 20px; color:var(--gris); grid-column:1/-1; }
.result-count{ font-size:.85rem; color:var(--gris); margin-bottom:18px; font-weight:500; }

/* ---------- PÁGINA PRODUCTO ---------- */
.crumbs{ font-size:.85rem; color:var(--gris); padding:18px 0; }
.crumbs a:hover{ color:var(--oro-osc); }
.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-bottom:40px; }
.gallery .main-img{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); background:var(--gris-cl); aspect-ratio:1/1; }
.gallery .main-img img{ width:100%; height:100%; object-fit:cover; }
.thumbs{ display:flex; gap:10px; margin-top:12px; }
.thumbs img{ width:70px; height:70px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent; }
.thumbs img.active{ border-color:var(--oro); }

.pd-cat{ color:var(--oro-osc); font-weight:600; text-transform:uppercase; font-size:.78rem; letter-spacing:.6px; }
.pd-title{ font-size:1.9rem; margin:6px 0 12px; }
.pd-price{ display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }
.pd-price .now{ font-size:2rem; font-weight:700; color:var(--oro-osc); }
.pd-price .before{ font-size:1.1rem; color:#aaa; text-decoration:line-through; }
.pd-save{ display:inline-block; background:#ffe9c9; color:var(--oro-osc); font-weight:600; font-size:.82rem; padding:4px 12px; border-radius:50px; margin-bottom:16px; }
.pd-desc{ color:#444; margin-bottom:18px; }
.pd-feats{ list-style:none; margin-bottom:22px; }
.pd-feats li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:8px; color:#333; }
.pd-feats li svg{ width:20px; height:20px; color:var(--verde-wa); flex-shrink:0; margin-top:2px; }

/* ---------- FORMULARIO CONTRAENTREGA ---------- */
.order-box{ background:var(--gris-cl); border:1px solid #ece6da; border-radius:var(--radio); padding:22px; margin-top:8px; }
.order-box h3{ display:flex; align-items:center; gap:8px; font-size:1.15rem; margin-bottom:4px; }
.order-box .sub{ font-size:.85rem; color:var(--gris); margin-bottom:16px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border:1px solid #d5d0c6; border-radius:10px; font-size:.95rem; font-family:inherit; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--oro); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qty{ display:flex; align-items:center; gap:0; width:fit-content; border:1px solid #d5d0c6; border-radius:10px; overflow:hidden; background:#fff; }
.qty button{ width:40px; height:42px; border:none; background:#fff; font-size:1.2rem; cursor:pointer; color:var(--oro-osc); }
.qty input{ width:52px; text-align:center; border:none; border-left:1px solid #eee; border-right:1px solid #eee; font-size:1rem; }
.total-line{ display:flex; justify-content:space-between; align-items:center; margin:14px 0; padding-top:14px; border-top:1px dashed #ccc; font-size:1.05rem; }
.total-line b{ font-size:1.4rem; color:var(--oro-osc); }
.form-note{ font-size:.78rem; color:var(--gris); text-align:center; margin-top:10px; }

/* ---------- CÓMO FUNCIONA ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ text-align:center; padding:24px; background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); }
.step .num{ width:48px; height:48px; margin:0 auto 12px; border-radius:50%; background:linear-gradient(135deg,var(--oro-claro),var(--oro-osc)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; }
.step h4{ margin-bottom:6px; }
.step p{ color:var(--gris); font-size:.9rem; }

/* ---------- FOOTER ---------- */
footer.site-footer{ background:var(--negro); color:#cfc8bb; padding:44px 0 20px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:28px; }
.foot-grid img{ height:60px; margin-bottom:12px; }
.foot-brand{ font-size:1.5rem; font-weight:700; letter-spacing:.5px; margin-bottom:10px;
  background:linear-gradient(135deg,var(--oro-claro),var(--oro)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.foot-grid h5{ color:#fff; margin-bottom:12px; font-size:1rem; }
.foot-grid a{ display:block; padding:4px 0; font-size:.9rem; color:#cfc8bb; }
.foot-grid a:hover{ color:var(--oro-claro); }
.foot-social{ display:flex; gap:10px; margin-top:10px; }
.foot-social a{ width:38px; height:38px; border-radius:50%; background:#2c2c2c; display:flex; align-items:center; justify-content:center; }
.foot-social a:hover{ background:var(--oro); }
.foot-social svg{ width:18px; height:18px; color:#fff; }
.foot-bottom{ text-align:center; border-top:1px solid #333; padding-top:18px; font-size:.82rem; color:#9a938700; color:#948d80; }

/* ---------- BOTÓN FLOTANTE WHATSAPP ---------- */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:99;
  width:60px; height:60px; border-radius:50%; background:var(--verde-wa);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(37,211,102,.5);
  animation:pulse 2s infinite;
}
.wa-float svg{ width:32px; height:32px; color:#fff; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------- ESTRELLAS ---------- */
.stars{ display:inline-flex; gap:1px; font-size:.95rem; line-height:1; }
.star{ position:relative; color:#e0d6c4; }
.star-fill{ position:absolute; left:0; top:0; overflow:hidden; color:#f5b301; white-space:nowrap; }
.prod-rate{ display:flex; align-items:center; gap:6px; margin:2px 0 6px; }
.prod-rate small{ color:#999; font-size:.78rem; }
.prod-sold{ display:inline-block; font-size:.76rem; color:#e0632b; font-weight:600; margin-bottom:8px; }

/* ---------- CATEGORÍA: contador ---------- */
.cat-card small{ display:block; font-size:.72rem; color:#a99; margin-top:2px; }

/* ---------- FRANJA GARANTÍA ---------- */
.guarantee{ background:linear-gradient(120deg,#fff8ec,#fdeecb); }
.guarantee .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:34px 18px; }
.g-card{ text-align:center; }
.g-card .g-ic{ width:56px; height:56px; margin:0 auto 10px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra); }
.g-card .g-ic svg{ width:28px; height:28px; color:var(--oro-osc); }
.g-card b{ display:block; font-size:1rem; }
.g-card small{ color:var(--gris); font-size:.82rem; }

/* ---------- TESTIMONIOS ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.testi{ background:#fff; border-radius:var(--radio); padding:22px; box-shadow:var(--sombra); border:1px solid #eee; }
.testi p{ color:#444; font-size:.92rem; margin:10px 0 16px; font-style:italic; }
.testi-user{ display:flex; align-items:center; gap:10px; }
.testi-user .avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--oro-claro),var(--oro-osc)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.testi-user b{ display:block; font-size:.9rem; }
.testi-user small{ color:var(--gris); font-size:.78rem; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ background:#fff; border:1px solid #eee; border-radius:12px; margin-bottom:12px; overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:1rem; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--negro); }
.faq-ic{ font-size:1.4rem; color:var(--oro-osc); transition:.2s; flex-shrink:0; }
.faq-item.open .faq-ic{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:300px; }
.faq-a p{ padding:0 18px 16px; color:var(--gris); font-size:.92rem; }

/* ---------- PRODUCTO: extras ---------- */
.pd-rate{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; color:var(--gris); font-size:.86rem; }
.pd-rate .dot{ color:#ccc; }
.pd-free{ display:inline-block; background:#d8f5e3; color:#149c4e; font-weight:600; font-size:.85rem; padding:5px 14px; border-radius:50px; margin-bottom:12px; }
.urgency{ background:#fff3e0; border:1px solid #ffd9a8; color:#c2570a; font-size:.86rem; font-weight:500; padding:10px 14px; border-radius:10px; margin-bottom:16px; }
.urgency b{ color:#e0632b; }
.trust-mini{ display:flex; flex-wrap:wrap; gap:14px; padding:14px 0; margin-bottom:6px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.trust-mini span{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:#555; font-weight:500; }
.trust-mini svg{ width:18px; height:18px; color:var(--oro-osc); }
.gallery .main-img{ position:relative; }
.gallery .main-img .badge{ z-index:2; }

/* ---------- BARRA DE COMPRA FIJA (móvil) ---------- */
.buybar{ position:fixed; left:0; right:0; bottom:-90px; z-index:80; background:#fff; box-shadow:0 -4px 20px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; transition:bottom .3s; }
.buybar.show{ bottom:0; }
.buybar .bb-info b{ display:block; font-size:1.15rem; color:var(--oro-osc); }
.buybar .bb-info small{ display:block; font-size:.78rem; color:var(--gris); max-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar .btn{ padding:12px 28px; }

/* ---------- ANIMACIÓN REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.show{ opacity:1; transform:none; }

/* ---------- PÁGINAS LEGALES / TEXTO ---------- */
.legal{ max-width:820px; margin:0 auto; padding:40px 0; }
.legal h1{ font-size:2rem; margin-bottom:8px; }
.legal .updated{ color:var(--gris); font-size:.85rem; margin-bottom:26px; }
.legal h2{ font-size:1.3rem; margin:28px 0 10px; color:var(--oro-osc); scroll-margin-top:90px; }
.legal p, .legal li{ color:#444; margin-bottom:10px; font-size:.95rem; }
.legal ul{ padding-left:20px; margin-bottom:12px; }
.legal .toc{ background:var(--gris-cl); border-radius:12px; padding:18px 22px; margin-bottom:20px; }
.legal .toc a{ color:var(--oro-osc); display:block; padding:3px 0; font-size:.92rem; }
.legal .toc a:hover{ text-decoration:underline; }

/* ---------- 404 ---------- */
.err-wrap{ text-align:center; padding:80px 20px; }
.err-wrap h1{ font-size:5rem; color:var(--oro); line-height:1; }
.err-wrap p{ color:var(--gris); margin:10px 0 24px; }

/* ---------- RESPONSIVE ---------- */
/* La barra fija de compra es solo para móvil */
@media(min-width:721px){ .buybar{ display:none !important; } }

@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-img{ order:-1; }
  .hero p{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .benefits .container{ grid-template-columns:repeat(2,1fr); }
  .guarantee .container{ grid-template-columns:repeat(2,1fr); }
  .testi-grid{ grid-template-columns:repeat(2,1fr); }
  .product-detail{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:720px){
  .nav-links, .nav-right .socials{ display:none; }
  .menu-toggle{ display:block; }
  .nav-links.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:14px 18px; box-shadow:var(--sombra); align-items:stretch; gap:2px;
  }
  .nav-links.open a.link{ padding:12px; border-radius:8px; }
  .nav-links.open .socials{ display:flex; justify-content:center; margin-top:10px; padding-top:10px; border-top:1px solid #eee; }
  .hero h1{ font-size:2rem; }
  .section-head h2{ font-size:1.6rem; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .guarantee .container{ grid-template-columns:1fr 1fr; }
}
@media(max-width:420px){
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .prod-name{ font-size:.85rem; }
  .prod-price .now{ font-size:1.05rem; }
}