:root{
  --bg:#0b0e14;
  --bg-soft:#101521;
  --card:#121722;
  --text:#f4f1eb;
  --muted:#8f96a7;
  --line:rgba(255,255,255,.06);
  --accent:#A6D608;
  --style-gold:#d89a57;
  --radius:20px;
  --shadow:0 18px 40px rgba(0,0,0,.28);
}

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

body{
  background:radial-gradient(circle at top, #0f1420 0%, #0b0e14 48%, #080b10 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto}
a{color:inherit}

.container{width:min(100% - 32px, 1100px);margin:0 auto}
.narrow{width:min(100%, 860px)}

h1,h2,h3{
  margin:0 0 14px 0;
  line-height:1.08;
  letter-spacing:-0.03em;
  font-family:Georgia, "Times New Roman", serif;
}

h1{font-size:clamp(2.2rem, 6vw, 4rem)}
h2{font-size:clamp(1.7rem, 4.5vw, 2.7rem)}
h3{font-size:clamp(1.1rem, 2.8vw, 1.35rem)}

p{margin:0;color:var(--muted)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}

.section{padding:72px 0}
.section-soft{background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0))}
.section-head{margin-bottom:28px}

.cards{display:grid;gap:18px}
.cards-3{grid-template-columns:1fr}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
  box-shadow:var(--shadow);
}

.card p{margin-top:8px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.01em;
  transition:.18s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#111}
.btn-primary:hover{background:#b9ec0d}
.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--text);
  border-color:var(--line);
}

.hero{padding:90px 0 48px 0}
.hero-copy{max-width:760px}
.hero-copy p{
  max-width:680px;
  font-size:1.06rem;
  margin-top:10px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.steps{display:grid;gap:18px}

.step{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:16px;
  align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}

.step-badge{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(166,214,8,.12);
  border:1px solid rgba(166,214,8,.3);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
}

.cta-band{padding:80px 0 100px 0}

.cta-band-inner{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
  background:linear-gradient(180deg, rgba(166,214,8,.06), rgba(166,214,8,.02));
  border:1px solid rgba(166,214,8,.12);
  border-radius:28px;
  padding:28px;
}

.footer-inner{
  padding:40px 0 50px 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.footer-tagline{
  font-size:14px;
  color:var(--muted);
}

.footer-bottom{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

.footer-cta .btn{
  min-width:180px;
}

.quiz-app{
  width:min(100% - 24px, 760px);
  margin:0 auto;
  padding:20px 0 48px 0;
}

.quiz-top{margin-bottom:16px}

.quiz-back-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:12px;
}

.quiz-step{
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}

.quiz-progress,
.progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#222938;
  overflow:hidden;
}

#quiz-progress-bar,
#analysis-bar,
#intro-progress{
  width:0;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), #c2f20f);
  transition:width .35s ease;
}

.quiz-card,
.analysis-card,
.intro-card{
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:28px;
  padding:24px 18px;
  box-shadow:var(--shadow);
}

.quiz-tag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(166,214,8,.18);
  background:rgba(166,214,8,.06);
  margin-bottom:18px;
}

.quiz-subtitle{
  max-width:560px;
  margin-bottom:18px;
}

.quiz-answers{display:grid;gap:12px}

.quiz-answer-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:74px;
  padding:18px 18px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.008));
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
  text-align:left;
}

.quiz-answer-card:hover{
  transform:translateY(-1px);
  border-color:rgba(166,214,8,.32);
  background:rgba(166,214,8,.06);
}

.quiz-answer-label{
  font-size:1.04rem;
  font-weight:600;
  letter-spacing:-0.01em;
}

.quiz-answer-arrow{
  color:var(--accent);
  font-size:24px;
  line-height:1;
}

.quiz-footer{margin-top:18px}

.quiz-link-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:15px;
  cursor:pointer;
  padding:0;
}

.intro-screen{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0 40px 0;
}

.intro-card,
.analysis-card{
  width:min(100% - 24px, 680px);
  margin:0 auto;
  text-align:center;
}

.intro-card p,
.analysis-card p{
  margin-top:10px;
  margin-bottom:18px;
}

/* ===== RESULTADO ===== */

.analysis-card{
  margin:28px auto 0 auto;
  padding:28px 22px;
  max-width:760px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 56px rgba(0,0,0,.34);
}

.analysis-card h1{
  margin-bottom:10px;
  font-size:clamp(2rem, 6vw, 3.3rem);
  line-height:1.04;
}

.analysis-card p{
  max-width:560px;
  margin:0 auto 18px auto;
  color:var(--muted);
  font-size:1rem;
}

.analysis-progress{margin-top:8px}

.result-shell{
  width:min(100%, 780px);
  margin:0 auto;
  padding:22px 0 60px 0;
}

.result-head-block{
  text-align:center;
  margin-bottom:30px;
}

.result-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}

.result-profile-title{
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}

.result-main-profile{
  font-size:clamp(2.3rem, 7vw, 4.4rem);
  line-height:1.01;
  letter-spacing:-0.04em;
  max-width:11ch;
  margin:0 auto;
}

#result-style-summary{
  margin-bottom:22px;
}

.result-style-wrap{
  text-align:center;
  margin-bottom:30px;
}

.result-style-name{
  font-size:clamp(3.1rem, 11vw, 5.8rem);
  line-height:.96;
  letter-spacing:-0.05em;
  margin-bottom:12px;
  color:var(--style-gold);
  text-shadow:0 8px 30px rgba(216,154,87,.08);
}

.result-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}

.result-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:14px;
}

.result-tag.is-restriction{
  border-color:rgba(166,214,8,.35);
  background:rgba(166,214,8,.08);
  color:var(--accent);
}

.result-quote{
  font-size:clamp(1.35rem, 4vw, 2.1rem);
  line-height:1.28;
  color:#c4cad5;
  font-style:italic;
  margin-top:18px;
}

.result-reason-lead{
  margin:18px auto 0 auto;
  max-width:680px;
  font-size:1.03rem;
  line-height:1.72;
  color:var(--text);
}

.style-image-card{
  margin:30px 0;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0c1017;
  box-shadow:0 22px 56px rgba(0,0,0,.34);
}

.style-image-card img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.result-section-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}

.sensory-card{
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:24px 20px;
  margin-bottom:24px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.metric-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.metric-row:last-child{
  border-bottom:none;
}

.metric-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.metric-dots{
  display:flex;
  gap:10px;
}

.metric-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2a3345;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
}

.metric-dot.is-on{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(166,214,8,.08);
}

.beer-pick-card{
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010));
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:22px 18px;
  margin-bottom:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.beer-pick-card.is-primary{
  border-color:rgba(166,214,8,.16);
  box-shadow:
    inset 4px 0 0 var(--accent),
    0 14px 28px rgba(0,0,0,.18);
}

.beer-pick-title{
  margin:0 0 8px 0;
  font-size:1.72rem;
  letter-spacing:-0.025em;
  line-height:1.16;
  color:var(--text);
}

.beer-pick-brewery{
  color:var(--text);
  margin-bottom:6px;
}

.beer-pick-abv{
  color:var(--muted);
  font-size:15px;
}

.alternatives-wrap{
  margin-top:28px;
}

.result-actions{
  margin-top:32px;
  text-align:center;
}

.result-actions .btn{
  min-width:220px;
}

/* ===== INSIGHTS ===== */

.insight-card{
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010));
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:22px 18px;
  margin-bottom:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.insight-card.is-warning{
  border-color:rgba(216,154,87,.22);
  background:linear-gradient(180deg, rgba(216,154,87,.08), rgba(255,255,255,.01));
}

#result-style-summary .insight-card{
  border-color:rgba(216,154,87,.22);
  background:
    linear-gradient(180deg, rgba(216,154,87,.10), rgba(255,255,255,.01));
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
}

#result-style-summary .insight-item{
  font-size:1.02rem;
  line-height:1.72;
}

#result-style-summary .insight-item::before{
  background:var(--style-gold);
  box-shadow:0 0 0 4px rgba(216,154,87,.08);
}

.insight-list{
  display:grid;
  gap:12px;
}

.insight-item{
  color:var(--text);
  line-height:1.65;
  padding-left:18px;
  position:relative;
}

.insight-item::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.insight-card.is-warning .insight-item::before{
  background:var(--style-gold);
}

/* ===== GLUTEN META ===== */

.gluten-meta{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.gluten-meta-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.gluten-meta-note{
  margin-top:6px;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}

.gluten-meta.is-safe{
  border-color:rgba(166,214,8,.30);
  background:rgba(166,214,8,.08);
}

.gluten-meta.is-safe .gluten-meta-label{
  color:var(--accent);
}

.gluten-meta.is-reduced{
  border-color:rgba(216,154,87,.28);
  background:rgba(216,154,87,.08);
}

.gluten-meta.is-reduced .gluten-meta-label{
  color:var(--style-gold);
}

.gluten-meta.is-danger{
  border-color:rgba(255,120,120,.26);
  background:rgba(255,120,120,.08);
}

.gluten-meta.is-danger .gluten-meta-label{
  color:#ff8e8e;
}

.gluten-meta.is-unknown{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}

.gluten-meta.is-unknown .gluten-meta-label{
  color:var(--text);
}

/* ===== NEARBY ===== */

.nearby-wrap{
  margin-top:28px;
}

.nearby-list{
  display:grid;
  gap:14px;
}

.nearby-item{
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nearby-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.nearby-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

.nearby-item-title{
  font-size:1rem;
  font-weight:700;
  color:var(--text);
}

.nearby-item-type{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.nearby-item-meta{
  color:var(--muted);
  line-height:1.6;
  margin-top:4px;
}

.nearby-item-link{
  display:inline-flex;
  margin-top:10px;
  color:var(--accent);
  font-weight:600;
}

/* ===== FALLBACK VISUAL ===== */

.style-fallback-card{
  min-height:min(78vw, 640px);
  aspect-ratio:4/5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:28px 24px;
  background:
    radial-gradient(circle at top left, rgba(166,214,8,.10), transparent 42%),
    radial-gradient(circle at top right, rgba(216,154,87,.16), transparent 38%),
    linear-gradient(180deg, #121722 0%, #0d1119 100%);
}

.style-fallback-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}

.style-fallback-title{
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2.2rem, 8vw, 4.6rem);
  line-height:.96;
  letter-spacing:-0.05em;
  color:var(--style-gold);
  margin-bottom:10px;
  max-width:10ch;
}

.style-fallback-subtitle{
  font-size:14px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#d8dde7;
  margin-bottom:14px;
}

.style-fallback-text{
  max-width:34ch;
  font-size:1rem;
  line-height:1.7;
  color:#b7bfce;
}

#style-fallback{
  width:100%;
}

/* ===== AJUSTE FINO DECISIÓN Y NIVEL ===== */

.beer-pick-card.is-primary .result-tag{
  min-height:34px;
  padding:0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  border-color:rgba(166,214,8,.22);
  background:rgba(166,214,8,.08);
  white-space:nowrap;
}

.beer-pick-card.is-primary .insight-card{
  border-color:rgba(166,214,8,.18);
  background:
    linear-gradient(180deg, rgba(166,214,8,.07), rgba(255,255,255,.01));
  box-shadow:
    0 12px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.beer-pick-card.is-primary .insight-card .result-section-title{
  color:var(--accent);
}

.beer-pick-card.is-primary .insight-item{
  font-size:1rem;
  line-height:1.7;
}

.beer-pick-card.is-primary .insight-item::before{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(166,214,8,.08);
}

.beer-pick-card.is-primary .beer-pick-title{
  max-width:12ch;
}

/* ===== RESPONSIVE ===== */

@media (min-width: 640px){
  .footer-inner{
    align-items:center;
  }
}

@media (min-width: 760px){
  .cards-3{grid-template-columns:repeat(3, 1fr)}
  .steps{grid-template-columns:repeat(3, 1fr)}
  .cta-band-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .quiz-card,
  .analysis-card,
  .intro-card{
    padding:34px 30px;
  }
  .quiz-answer-card{
    min-height:82px;
    padding:20px 20px;
  }
  .metric-dot{
    width:20px;
    height:20px;
  }
}

@media (max-width: 759px){
  .analysis-card{
    margin-top:22px;
    padding:24px 18px;
  }

  .result-main-profile{
    max-width:100%;
  }

  .result-style-name{
    line-height:1;
  }

  .beer-pick-card.is-primary .beer-pick-title{
    max-width:100%;
  }
}

@media (max-width: 480px){
  .result-tag{
    width:100%;
  }

  .beer-pick-title{
    font-size:1.5rem;
  }

  .result-actions .btn{
    width:100%;
  }

  .nearby-item-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .style-fallback-card{
    padding:22px 18px;
  }

  .style-fallback-title{
    max-width:100%;
  }

  .style-fallback-text{
    max-width:100%;
    font-size:.96rem;
  }

  .beer-pick-card.is-primary .result-tag{
    width:auto;
  }
}