:root{
  --bg:#070b13;
  --card:#111722;
  --text:#f4f0eb;
  --muted:#858da0;
  --accent:#A6D608;
  --gold:#d8a159;
  --line:rgba(255,255,255,.07);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

body{
  background:radial-gradient(circle at top,#101827 0%,#070b13 44%,#04070d 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

.fh-fira{
  width:min(100% - 34px,760px);
  margin:0 auto;
}

.screen{
  min-height:100vh;
  padding:28px 0 46px 0;
}

.screen-center{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.brand{
  color:var(--accent);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:14px;
  font-weight:800;
}

.brand.small{
  font-size:12px;
}

.kicker,
.mode-label,
.question-kicker,
.section-title{
  color:var(--accent);
  letter-spacing:.25em;
  text-transform:uppercase;
  font-size:12px;
  margin-top:12px;
}

h1,h2{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.045em;
  line-height:1;
}

h1{
  font-size:clamp(3rem,12vw,5rem);
  margin:24px 0 18px 0;
}

h2{
  font-size:clamp(2.7rem,10vw,4.7rem);
  margin:0 0 18px 0;
}

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

.btn-primary{
  margin-top:30px;
  width:100%;
  min-height:74px;
  border:none;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 0 34px rgba(166,214,8,.16);
}

.back-home{
  display:inline-flex;
  margin-top:28px;
  justify-content:center;
  color:rgba(255,255,255,.38);
  font-size:15px;
}

.back-home.top{
  margin-top:0;
  margin-bottom:28px;
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.step-label{
  color:var(--muted);
  font-size:14px;
}

.progress,
.mini-progress{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#202938;
  margin:18px 0 0 0;
}

.mini-progress{
  width:min(320px,70%);
  margin:28px auto 0 auto;
}

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

.question-wrap{
  margin-top:48px;
}

.question-wrap p{
  margin-bottom:28px;
}

.answers{
  display:grid;
  gap:14px;
}

.answer-btn{
  width:100%;
  min-height:86px;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
  color:rgba(255,255,255,.82);
  text-align:left;
  padding:0 24px;
  font-size:17px;
  cursor:pointer;
}

.answer-btn:hover{
  border-color:rgba(166,214,8,.34);
  background:rgba(166,214,8,.055);
}

.btn-secondary{
  margin-top:28px;
  border:none;
  background:none;
  color:rgba(255,255,255,.42);
  font-size:16px;
  cursor:pointer;
}

.analysis-center{
  width:100%;
  margin:auto;
  text-align:center;
}

.result-screen{
  text-align:center;
}

.result-screen .brand{
  margin-top:8px;
}

#profile-name{
  margin-top:28px;
}

.style-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.3rem,12vw,5.8rem);
  line-height:.95;
  color:var(--gold);
  margin:34px 0 18px 0;
}

.tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0;
}

.tags span{
  border:1px solid var(--line);
  border-radius:999px;
  color:rgba(255,255,255,.45);
  padding:12px 16px;
}

.reason-card{
  margin:28px 0;
  padding:24px;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
  color:rgba(255,255,255,.72);
  line-height:1.55;
  text-align:left;
}

.selection{
  margin-top:36px;
  text-align:left;
}

.secondary-title{
  margin-top:34px;
}

.beer-card{
  margin-top:14px;
  padding:24px;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
}

.beer-card.primary{
  box-shadow:inset 4px 0 0 var(--accent);
}

.beer-card h2,
.beer-card h3{
  font-family:inherit;
  letter-spacing:-.02em;
  font-size:24px;
  margin:0 0 8px 0;
}

.beer-card strong{
  color:var(--accent);
  display:block;
  margin-top:10px;
}

@media(min-width:760px){
  .btn-primary{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
}
.fira-guidance{
  margin-top:26px;
}

.fira-guidance ul{
  margin:14px 0 0 0;
  padding:0;
  list-style:none;
}

.fira-guidance li{
  position:relative;
  padding-left:24px;
  margin:10px 0;
  color:rgba(255,255,255,.72);
}

.fira-guidance li::before{
  content:"•";
  position:absolute;
  left:4px;
  top:0;
  color:var(--accent);
}
.stand-box{
  margin-top:18px;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(166,214,8,.08);
  border:1px solid rgba(166,214,8,.22);
}

.stand-box span{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}

.stand-box strong{
  display:block;
  color:var(--text);
  font-size:20px;
}
.brewery-name{
    color:#b7e000;
    font-size:.8rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    margin-bottom:12px;
    font-weight:700;
}

.beer-meta{
    color:#9ca3af;
    margin-bottom:18px;
}

.gluten-badge{
    display:inline-block;
    margin-top:14px;
    padding:8px 14px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
}

.gluten-gluten_free{
    background:#143d14;
    color:#9cff9c;
}

.gluten-gluten_reduced{
    background:#3d3314;
    color:#ffe08a;
}

.gluten-contains{
    background:#3d1414;
    color:#ff9c9c;
}

.gluten-unknown{
    background:#1f2937;
    color:#d1d5db;
}
.tried-btn{
  width:100%;
  margin-top:14px;
  min-height:48px;
  border-radius:18px;
  border:1px solid rgba(166,214,8,.22);
  background:rgba(166,214,8,.06);
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.02em;
}

.tried-btn.is-saved,
.tried-btn:disabled{
  opacity:.72;
  cursor:default;
  background:rgba(166,214,8,.12);
}
.tried-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px auto;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.68);
  font-size:14px;
}
.favorite-link{
  display:block;
  width:100%;
  margin-top:10px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.46);
  font-size:14px;
  cursor:pointer;
  text-align:center;
}

.favorite-link.is-saved{
  color:var(--accent);
}
.route-link{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:18px;
  color:rgba(255,255,255,.52);
  font-size:15px;
  text-align:center;
}

.route-link:hover{
  color:var(--accent);
}
.route-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:28px;
}

.route-clear-secondary{
  min-height:48px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.62);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.route-clear-secondary:hover{
  border-color:rgba(166,214,8,.24);
  color:var(--accent);
}

@media(max-width:520px){
  .route-actions{
    grid-template-columns:1fr;
  }
}
.recorrido-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.remove-route-item{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.42);
  font-size:13px;
  cursor:pointer;
}

.remove-route-item:hover{
  color:var(--accent);
}

@media(max-width:520px){
  .recorrido-item-head{
    align-items:flex-start;
  }
}
.empty-route-box{
  margin:26px 0 10px 0;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(166,214,8,.18);
  background:rgba(166,214,8,.045);
  text-align:left;
}

.empty-route-box h2{
  font-family:inherit;
  font-size:24px;
  letter-spacing:-.02em;
  margin:0 0 12px 0;
}

.empty-route-box p{
  margin-bottom:18px;
}

.empty-route-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;
  border-radius:18px;
  background:rgba(166,214,8,.12);
  border:1px solid rgba(166,214,8,.24);
  color:var(--accent);
  font-size:14px;
  font-weight:800;
}
.intro-route-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:8px auto 22px auto;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.62);
  font-size:14px;
}
.rating-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
}

.rating-label{
  color:rgba(255,255,255,.42);
  font-size:13px;
  margin-bottom:8px;
}

.rating-buttons{
  display:flex;
  gap:6px;
}

.rating-hop{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.22);
  font-size:24px;
  cursor:pointer;
  padding:2px;
}

.rating-hop.is-active{
  color:var(--accent);
}
.rating-summary-box{
  margin:0 auto 24px auto;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(166,214,8,.16);
  background:rgba(166,214,8,.045);
  color:rgba(255,255,255,.72);
  text-align:center;
}

.rating-summary-main{
  color:var(--accent);
  font-size:14px;
  font-weight:800;
  margin-bottom:6px;
}

.rating-summary-best{
  color:rgba(255,255,255,.58);
  font-size:14px;
}
.top-beers-box{
  margin:0 auto 24px auto;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(166,214,8,.14);
  background:rgba(166,214,8,.03);
}

.top-beers-title{
  color:var(--accent);
  font-size:15px;
  font-weight:800;
  margin-bottom:12px;
}

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

.top-beer-row:first-of-type{
  border-top:none;
}
.fira-profile-box{
  margin:0 auto 24px auto;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(166,214,8,.14);
  background:rgba(166,214,8,.03);
}

.fira-profile-title{
  color:var(--accent);
  font-size:15px;
  font-weight:800;
  margin-bottom:12px;
}

.fira-profile-text{
  color:rgba(255,255,255,.72);
  line-height:1.6;
}
.share-card-section{
  margin-top:36px;
  text-align:left;
}

.share-card{
  margin-top:14px;
  padding:28px;
  border-radius:32px;
  background:
    radial-gradient(circle at top left, rgba(166,214,8,.18), transparent 34%),
    linear-gradient(180deg,#111722,#070b13);
  border:1px solid rgba(166,214,8,.18);
  text-align:left;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.share-card-brand{
  color:var(--accent);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
}

.share-card-mode{
  color:rgba(255,255,255,.42);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:11px;
  margin-top:8px;
}

.share-card-label{
  margin-top:28px;
  color:rgba(255,255,255,.42);
  font-size:13px;
}

.share-card-profile{
  margin-top:6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  line-height:.95;
  color:var(--gold);
  letter-spacing:-.04em;
}

.share-card-beer{
  margin-top:8px;
  color:var(--text);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
}

.share-card-brewery{
  margin-top:6px;
  color:var(--accent);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
}

.share-card-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.62);
}

.share-card-footer strong{
  color:var(--accent);
}

.share-card-url{
  margin-top:24px;
  color:rgba(255,255,255,.38);
  font-size:13px;
  text-align:center;
}
.share-card-section{
  margin-top:36px;
  text-align:left;
}

.share-card{
  margin-top:14px;
  padding:28px;
  border-radius:32px;
  background:
    radial-gradient(circle at top left, rgba(166,214,8,.18), transparent 34%),
    linear-gradient(180deg,#111722,#070b13);
  border:1px solid rgba(166,214,8,.18);
  text-align:left;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.share-card-brand{
  color:var(--accent);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
}

.share-card-mode{
  color:rgba(255,255,255,.42);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:11px;
  margin-top:8px;
}

.share-card-label{
  margin-top:28px;
  color:rgba(255,255,255,.42);
  font-size:13px;
}

.share-card-profile{
  margin-top:6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  line-height:.95;
  color:var(--gold);
  letter-spacing:-.04em;
}

.share-card-beer{
  margin-top:8px;
  color:var(--text);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
}

.share-card-brewery{
  margin-top:6px;
  color:var(--accent);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
}

.share-card-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.62);
}

.share-card-footer strong{
  color:var(--accent);
}

.share-card-url{
  margin-top:24px;
  color:rgba(255,255,255,.38);
  font-size:13px;
  text-align:center;
}

.share-image-output{
  margin-top:26px;
}

.share-image-output img{
  display:block;
  width:100%;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
}
.fira-profile-styles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.fira-profile-styles span{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(166,214,8,.08);
  border:1px solid rgba(166,214,8,.18);
  color:var(--accent);
  font-size:13px;
  font-weight:700;
}
.learning-notice{
  margin:0 0 28px 0;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid rgba(166,214,8,.14);
  background:rgba(166,214,8,.035);
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.45;
  text-align:left;
}
.avoidance-notice{
  margin:0 0 28px 0;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(216,161,89,.18);
  background:rgba(216,161,89,.045);
  color:rgba(255,255,255,.68);
  text-align:left;
}

.avoidance-title{
  color:var(--gold);
  font-size:14px;
  font-weight:800;
  margin-bottom:10px;
}

.avoidance-notice ul{
  margin:0;
  padding-left:18px;
}

.avoidance-notice li{
  margin:7px 0;
  line-height:1.45;
}
.fira-legal-links {
  text-align: center;
  font-size: 12px;
  opacity: 0.7;
  padding: 20px 16px 10px;
}

.fira-legal-links a {
  color: inherit;
  text-decoration: underline;
}

.fira-legal-links a:hover {
  opacity: 1;
}
.cookie-banner{
  position:fixed;
  bottom:16px;
  left:16px;
  right:16px;
  z-index:9999;
}

.cookie-banner-content{
  max-width:720px;
  margin:auto;
  background:#111;
  color:#fff;
  padding:14px 16px;
  border-radius:14px;
  display:flex;
  gap:14px;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
}

.cookie-banner p{
  margin:0;
  font-size:13px;
  line-height:1.45;
}

.cookie-banner a{
  color:#fff;
  text-decoration:underline;
}

.cookie-btn{
  border:none;
  cursor:pointer;
  padding:9px 16px;
  border-radius:999px;
  font-weight:700;
}

@media (max-width:640px){
  .cookie-banner-content{
    flex-direction:column;
    align-items:flex-start;
  }
}
.result-screen .route-link {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 14px 20px;
  color: #b8ff00;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(184, 255, 0, 0.45);
  border-radius: 999px;
  background: rgba(184, 255, 0, 0.06);
}

.result-screen .route-link + .route-link {
  margin-top: 12px;
}

.result-screen .route-link:hover {
  background: rgba(184, 255, 0, 0.12);
}