/* =============================================================
   NOTAS — comparador y guía de perfumes (Amazon Argentina)
   1. Tokens
   2. Reset & base
   3. Utilities
   4. Typography
   5. Components (nav, btn, card, chip, table, form)
   6. Sections (hero, ficha, comparador, guía, ofertas, legal)
   7. Effects
   8. Responsive
   9. Reduced motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  --bg:            #0f0d0c;
  --bg-raised:     #17130f;
  --bg-card:       #1c1712;
  --line:          rgba(245,239,228,.10);
  --line-strong:   rgba(245,239,228,.20);
  --cream:         #f5efe4;
  --text:          #ece3d2;
  --muted:         #b3a68f;
  --muted-2:       #8a7d68;
  --accent:        #c9a961;
  --accent-2:      #e4c98a;
  --accent-ink:    #1a1410;
  --ok:            #7ea87b;
  --bad:           #c17a6a;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);

  --container: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);

  --fam-fougere:   #6b8f71;
  --fam-oriental:  #c1694f;
  --fam-floral:    #c98fa3;
  --fam-citrica:   #c9b96a;
  --fam-chipre:    #8a8a5c;
  --fam-gourmand:  #a97450;
  --fam-acuatica:  #6f9bb5;
  --fam-amaderada: #9a7a52;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; tab-size:2; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; text-wrap:balance; line-height:1.08; letter-spacing:-.01em; color:var(--cream); }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:fixed; top:-100px; left:1rem; padding:.6rem 1rem;
  background:var(--cream); color:var(--bg); z-index:9999;
  border-radius:8px; font-weight:600;
}
.skip-link:focus{ top:1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.section{ padding-block:clamp(3rem,7vw,6rem); position:relative; }
.section-head{ max-width:640px; margin-bottom:2.4rem; }
.section-head .kicker{ display:block; margin-bottom:.6rem; }
.eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:600; }
.muted{ color:var(--muted); }
.center{ text-align:center; margin-inline:auto; }
.stack{ display:flex; flex-direction:column; gap:1rem; }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }

/* =============================================================
   4. Typography
   ============================================================= */
h1{ font-size:clamp(2.3rem,5.4vw,4rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); }
h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); }
.lede{ font-size:clamp(1.05rem,2vw,1.25rem); color:var(--muted); max-width:60ch; }

/* =============================================================
   5. Components
   ============================================================= */

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:999px; font-weight:600; font-size:.95rem;
  transition:transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 30px -12px rgba(201,169,97,.55); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--accent-2); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:.55rem 1.1rem; font-size:.82rem; }
.btn-block{ width:100%; }
.btn[disabled],.btn.is-sample{ opacity:.9; }

.buy-wrap{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.buy-note{ font-size:.76rem; color:var(--muted-2); }

/* --- nav --- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(15,13,12,.86); backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.3rem; color:var(--cream); font-weight:600; }
.brand-mark{ width:30px; height:30px; border-radius:50%; background:conic-gradient(from 200deg, var(--accent), var(--fam-oriental), var(--fam-fougere), var(--accent)); flex:none; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{ font-size:.92rem; color:var(--muted); transition:color .3s var(--ease-out); }
.nav-links a:hover{ color:var(--cream); }
.nav-links a.nav-cta, .nav-links a.nav-cta:hover{
  color:var(--accent-ink); background:var(--accent); padding:.55rem 1.1rem; border-radius:999px; font-weight:600;
}
.nav-toggle{ display:none; }

/* --- footer --- */
.footer{ border-top:1px solid var(--line); padding-block:3rem 2.2rem; background:var(--bg-raised); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; margin-bottom:2.2rem; }
.footer h4{ font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); margin-bottom:.9rem; }
.footer a{ display:block; color:var(--muted); font-size:.92rem; padding-block:.25rem; transition:color .3s; }
.footer a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:flex-start; }
.aviso-afiliados{ font-size:.78rem; color:var(--muted-2); max-width:74ch; line-height:1.7; }

/* --- badges / chips --- */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.32rem .65rem; border-radius:999px; }
.badge-sample{ background:rgba(201,169,97,.16); color:var(--accent-2); border:1px solid rgba(201,169,97,.35); }
.badge-offer{ background:rgba(126,168,123,.18); color:var(--ok); }
.badge-family{ background:rgba(245,239,228,.08); color:var(--muted); }
.chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px;
  border:1px solid var(--line-strong); font-size:.82rem; color:var(--muted); background:var(--bg-card);
}

/* --- product card --- */
.grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
.card{
  position:relative; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:1.2rem; display:flex; flex-direction:column; gap:.9rem;
  transition:transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-strong); box-shadow:0 24px 50px -30px rgba(0,0,0,.7); }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.card-swatch{ border-radius:var(--radius-m); aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:.9rem; }
.card-swatch::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.22), transparent 60%),
  linear-gradient(200deg, var(--fam-color,var(--accent)), rgba(0,0,0,.55));
}
.card-swatch .sw-name{ position:relative; font-family:var(--serif); color:#fff; font-size:1rem; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.card h3{ font-size:1.05rem; }
.card .marca{ font-size:.8rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.06em; }
.card-meta{ display:flex; flex-wrap:wrap; gap:.4rem; }
.card-price{ display:flex; align-items:baseline; gap:.55rem; margin-top:auto; }
.precio-actual{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); }
.precio-antes{ font-size:.85rem; color:var(--muted-2); text-decoration:line-through; }
.card-rating{ font-size:.82rem; color:var(--muted); display:flex; gap:.3rem; align-items:center; }
.stars{ color:var(--accent); letter-spacing:1px; }
.card-actions{ display:flex; gap:.6rem; }
.card-actions .btn{ flex:1; }

/* --- spec table --- */
.spec-table{ width:100%; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); }
.spec-table caption{ text-align:left; padding:.9rem 1.1rem; font-family:var(--serif); font-size:1.05rem; color:var(--cream); background:var(--bg-raised); border-bottom:1px solid var(--line); }
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table tr:last-child{ border-bottom:0; }
.spec-table th,.spec-table td{ padding:.75rem 1.1rem; font-size:.92rem; text-align:left; }
.spec-table th{ color:var(--muted); font-weight:500; width:44%; }
.spec-table td{ color:var(--cream); }
.spec-table tr:nth-child(even){ background:rgba(245,239,228,.02); }
.notes-row span{ display:inline-block; margin:.1rem .3rem .1rem 0; padding:.18rem .55rem; border-radius:999px; background:var(--bg-raised); border:1px solid var(--line); font-size:.78rem; color:var(--muted); }

/* --- radar chart --- */
.radar-wrap{ display:flex; flex-wrap:wrap; gap:2rem; align-items:center; }
.radar-svg{ width:min(420px,100%); height:auto; overflow:visible; }
.radar-legend{ display:flex; flex-direction:column; gap:.55rem; }
.radar-legend-item{ display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:var(--muted); }
.radar-legend-dot{ width:11px; height:11px; border-radius:50%; flex:none; }

/* --- comparator --- */
.compare-picker{ display:flex; flex-wrap:wrap; gap:.6rem; }
.compare-chip{
  display:flex; align-items:center; gap:.55rem; padding:.55rem .9rem .55rem .6rem; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--bg-card); cursor:pointer; font-size:.86rem;
  transition:border-color .3s,background .3s;
}
.compare-chip input{ accent-color:var(--accent); }
.compare-chip.is-checked{ border-color:var(--accent); background:rgba(201,169,97,.1); }
.compare-empty{ padding:2.4rem; text-align:center; border:1px dashed var(--line-strong); border-radius:var(--radius-l); color:var(--muted); }
.compare-table-wrap{ overflow-x:auto; border-radius:var(--radius-m); border:1px solid var(--line); }
.compare-table{ min-width:640px; }
.compare-table th,.compare-table td{ padding:.8rem 1rem; border-bottom:1px solid var(--line); font-size:.88rem; vertical-align:top; }
.compare-table thead th{ background:var(--bg-raised); position:sticky; top:0; }
.compare-table .row-label{ color:var(--muted); width:180px; }
.compare-table td.best{ color:var(--ok); font-weight:700; }
.compare-col-head{ min-width:180px; }
.compare-col-head .btn{ margin-top:.6rem; }
.compare-remove{ font-size:.72rem; color:var(--muted-2); margin-top:.35rem; display:inline-block; }

/* --- pros/contras --- */
.pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.pc-col h3{ display:flex; align-items:center; gap:.5rem; font-size:1rem; margin-bottom:.7rem; }
.pc-col h3 svg{ width:1.1em; height:1.1em; flex:none; }
.pc-col.pros h3{ color:var(--ok); }
.pc-col.contras h3{ color:var(--bad); }
.pc-col li{ display:flex; gap:.55rem; padding-block:.35rem; font-size:.92rem; color:var(--text); }
.pc-col li svg{ width:1em; height:1em; flex:none; margin-top:.2rem; }
.pc-col.pros li svg{ color:var(--ok); }
.pc-col.contras li svg{ color:var(--bad); }

/* --- reviews --- */
.review{ padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--bg-card); }
.review-head{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin-bottom:.4rem; }
.review-verified{ display:inline-flex; align-items:center; gap:.3rem; color:var(--ok); }
.review-verified svg{ width:1.05em; height:1.05em; }

/* --- forms --- */
.form-row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.field{ flex:1 1 220px; display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.82rem; color:var(--muted); }
.field input,.field select{
  padding:.75rem .9rem; border-radius:var(--radius-s); border:1px solid var(--line-strong);
  background:var(--bg-card); color:var(--text); font:inherit;
}

/* =============================================================
   6. Sections
   ============================================================= */

/* --- hero --- */
.hero{ padding-block:clamp(3.4rem,9vw,7rem) clamp(2.5rem,6vw,4rem); position:relative; overflow:clip; }
.hero-halo{ position:absolute; inset:-40% -10% -60% -10%; background:radial-gradient(45% 40% at 50% 20%, rgba(201,169,97,.22), transparent 70%); filter:blur(90px); pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; position:relative; }
.hero h1{ margin-bottom:1.1rem; }
.hero-actions{ display:flex; gap:.9rem; margin-top:1.8rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:1.8rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--accent-2); }
.hero-stat span{ font-size:.8rem; color:var(--muted); }
.hero-visual{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.hero-visual .card-swatch{ aspect-ratio:3/4; }
.hero-visual .card-swatch:first-child{ grid-column:1/-1; aspect-ratio:16/8; }

/* --- cómo elegimos --- */
.como-elegimos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.como-item{ padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--bg-card); }
.como-item .num{ font-family:var(--serif); font-size:1.6rem; color:var(--accent); display:block; margin-bottom:.6rem; }

/* --- categorías / index --- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.cat-card{ position:relative; padding:2rem 1.6rem; border-radius:var(--radius-l); border:1px solid var(--line); overflow:hidden; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; }
.cat-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, var(--fam-color,var(--accent)) 0%, transparent 70%); opacity:.35; }
.cat-card span{ position:relative; font-size:.8rem; color:var(--muted); }
.cat-card h3{ position:relative; }

/* --- ficha --- */
.ficha{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2.6rem; align-items:start; }
.ficha-galeria .card-swatch{ aspect-ratio:3/4; }
.ficha-thumbs{ display:flex; gap:.6rem; margin-top:.8rem; }
.ficha-thumbs li{ width:56px; height:56px; border-radius:10px; border:1px solid var(--line-strong); }
.ficha-marca{ text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--accent); font-weight:600; }
.ficha-nombre{ margin-block:.35rem .8rem; }
.ficha-rating{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; font-size:.92rem; color:var(--muted); }
.ficha-precio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; margin-bottom:.4rem; }
.ficha-precio .precio-actual{ font-size:1.9rem; }
.precio-nota{ width:100%; font-size:.78rem; color:var(--muted-2); }
.ficha-head .buy-wrap{ margin-top:1.1rem; }
.ficha-block{ padding-block:2.4rem; border-top:1px solid var(--line); }
.ficha-block h2{ margin-bottom:1.2rem; }
.ideal-para{ margin-top:1.2rem; padding:1rem 1.2rem; border-left:3px solid var(--accent); background:var(--bg-card); border-radius:0 var(--radius-m) var(--radius-m) 0; font-size:.95rem; }
.editorial-cuerpo{ color:var(--text); max-width:70ch; }
.editorial-cuerpo p{ margin-bottom:1rem; }
.ficha-similares{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.2rem; }
.cta-repeat{ display:flex; justify-content:center; padding-block:2.2rem; }
.specs-extra summary{ cursor:pointer; color:var(--muted); font-size:.85rem; padding:.9rem 0; }
.specs-extra-body{ padding-bottom:1rem; }

/* --- comparador page --- */
.compare-page .section-head{ max-width:760px; }

/* --- guía / ranking --- */
.guide-hero{ padding-block:2.6rem; border-bottom:1px solid var(--line); }
.guide-list{ counter-reset:rank; }
.guide-item{ counter-increment:rank; display:grid; grid-template-columns:56px 1fr; gap:1.2rem; padding-block:1.6rem; border-bottom:1px solid var(--line); align-items:center; }
.guide-item::before{ content:counter(rank); font-family:var(--serif); font-size:1.8rem; color:var(--accent); }
.guide-item-inner{ display:grid; grid-template-columns:80px 1fr auto; gap:1.1rem; align-items:center; }
.guide-item .card-swatch{ width:80px; aspect-ratio:3/4; border-radius:10px; }
.guide-why{ font-size:.88rem; color:var(--muted); margin-top:.25rem; }
.faq-item{ padding-block:1.2rem; border-bottom:1px solid var(--line); }
.faq-item h3{ font-size:1.02rem; margin-bottom:.5rem; }

/* --- ofertas --- */
.offer-card{ position:relative; }
.offer-pct{ position:absolute; top:.9rem; left:.9rem; z-index:2; background:var(--ok); color:#0e1a0d; font-weight:700; font-size:.78rem; padding:.3rem .6rem; border-radius:999px; }

/* --- legal --- */
.legal-body{ max-width:74ch; color:var(--text); }
.legal-body h2{ margin-block:1.6rem .7rem; font-size:1.25rem; }
.legal-body p{ margin-bottom:.9rem; color:var(--muted); }

/* --- sample banner (site-wide, until populated) --- */
.sample-banner{ background:linear-gradient(90deg, rgba(201,169,97,.16), rgba(201,169,97,.03)); border-bottom:1px solid var(--line); }
.sample-banner .container{ display:flex; align-items:center; gap:.7rem; padding-block:.6rem; font-size:.84rem; color:var(--accent-2); flex-wrap:wrap; }

/* =============================================================
   7. Effects
   ============================================================= */
@keyframes floatSlow{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.hero-visual .card-swatch:hover{ transform:scale(1.02); }
.hero-visual .card-swatch{ transition:transform .5s var(--ease-out); }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (max-width:1023px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .ficha{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .como-elegimos{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .ficha-similares{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:719px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:1.6rem var(--gutter); gap:0; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); border-top:1px solid var(--line);
  }
  .nav-links a{ width:100%; padding-block:.85rem; border-bottom:1px solid var(--line); }
  .nav-links a.nav-cta{ margin-top:.9rem; text-align:center; }
  .nav.is-open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:""; display:block; width:20px; height:2px; background:var(--cream); position:relative; transition:transform .3s;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
  .nav.is-open .nav-toggle span{ background:transparent; }
  .nav.is-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
  .nav.is-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

  .cat-grid{ grid-template-columns:1fr; }
  .como-elegimos{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .pc-grid{ grid-template-columns:1fr; }
  .ficha-similares{ grid-template-columns:1fr; }
  .guide-item-inner{ grid-template-columns:56px 1fr; }
  .guide-item-inner .btn{ grid-column:1/-1; }
}
@media (min-width:540px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } }

/* =============================================================
   9. Reduced motion — only intrusive
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-halo{ display:none; }
}