/* ─── Variables / Design tokens ─────────────────────────────────────── */
:root {
  --background:       #ffffff;
  --foreground:       #1a2332;
  --card:             #f8f6f3;
  --muted:            #f0ede8;
  --muted-fg:         #5c5c6e;
  --border:           rgba(26,35,50,0.1);
  --accent:           #a85a35;
  --accent-light:     rgba(168,90,53,0.08);
  --accent-ring:      #c4714a;
  --primary:          #1a2332;
  --primary-fg:       #ffffff;
  --radius:           0.75rem;
  --radius-sm:        0.5rem;
  --radius-lg:        1rem;
  --font-sans:        'Inter', system-ui, -apple-system, sans-serif;
  --max-w:            640px;
  --transition:       150ms ease;
}

/* ─── Reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ─── Typography ─────────────────────────────────────────────────────── */
h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); font-weight: 700; line-height: 1.25; }
h2 { font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { font-size: 1rem; color: var(--muted-fg); line-height: 1.75; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* ─── Layout ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section { padding-block: 3rem; }
.section--muted { background: var(--muted); }
.section--primary { background: var(--primary); }

/* ─── Navigation ─────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.logo__accent { color: var(--accent); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted-fg);
  transition: color var(--transition);
  white-space: nowrap;
}
.nav__link:hover { color: var(--foreground); }

.nav__cta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  transition: opacity var(--transition);
  white-space: nowrap;
}
.nav__cta:hover { opacity: 0.88; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity var(--transition), transform var(--transition);
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { opacity: 0.88; }

.btn--accent { background: var(--accent); color: white; }
.btn--accent:hover { opacity: 0.88; }

.btn--ghost {
  color: var(--muted-fg);
  font-size: 0.95rem;
  font-weight: 500;
  height: auto;
  padding: 0.75rem 1rem;
}
.btn--ghost:hover { color: var(--foreground); }

.btn--full { width: 100%; }
.btn--outline {
  border: 1px solid var(--border);
  color: var(--muted-fg);
  width: 3rem;
  height: 3.25rem;
  padding: 0;
  flex-shrink: 0;
}
.btn--outline:hover { border-color: rgba(26,35,50,0.3); color: var(--foreground); }

/* ─── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card--flat {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ─── Badge / tag ────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  background: var(--muted);
  color: var(--accent);
}

.badge--accent-bg {
  background: rgba(196,113,74,0.2);
  color: #e8a882;
  border: 1px solid rgba(196,113,74,0.35);
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #2a3545;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(26,35,50,0.72) 0%, rgba(26,35,50,0.35) 100%);
}

.hero__content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 1.25rem 2.5rem;
  max-width: var(--max-w);
  margin-inline: auto;
}

.hero__title { color: white; margin-bottom: 0.75rem; }
.hero__lead { color: rgba(255,255,255,0.78); font-size: 0.95rem; margin-bottom: 1.5rem; }

/* ─── Stats strip ────────────────────────────────────────────────────── */
.stats {
  border-bottom: 1px solid var(--border);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-block: 1.5rem;
  text-align: center;
}
.stats__value { font-size: 1.4rem; font-weight: 700; color: var(--foreground); }
.stats__label { font-size: 0.82rem; color: var(--muted-fg); margin-top: 0.15rem; line-height: 1.3; }

/* ─── How it works ───────────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 1.25rem; }

.step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step__icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.step__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.step__icon--active { background: var(--primary); color: white; }
.step__icon--inactive { background: var(--muted); color: var(--accent); }

.step__line { width: 1px; height: 1.25rem; background: var(--border); }

.step__num { font-size: 0.75rem; font-family: monospace; font-weight: 700; color: var(--muted-fg); margin-bottom: 0.1rem; }
.step__title { font-size: 1rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.2rem; }
.step__desc { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.6; }

/* ─── Fabric grid ────────────────────────────────────────────────────── */
.fabric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.fabric-card { background: var(--background); }

.fabric-card__swatch {
  height: 5rem;
  position: relative;
  overflow: hidden;
}

.fabric-card__swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.4) 3px,
    rgba(255,255,255,0.4) 4px
  );
}

.fabric-card__swatch--screen3  { background: linear-gradient(135deg, #92400e, #451a03); }
.fabric-card__swatch--screen5  { background: linear-gradient(135deg, #b45309, #78350f); }
.fabric-card__swatch--screen10 { background: linear-gradient(135deg, #78716c, #44403c); }
.fabric-card__swatch--blackout { background: linear-gradient(135deg, #334155, #0f172a); }
.fabric-card__swatch--aqua     { background: linear-gradient(135deg, #0284c7, #075985); }
.fabric-card__swatch--lino     { background: linear-gradient(135deg, #d4b896, #a8855a); }

.fabric-card__body { padding: 0.75rem; }
.fabric-card__name { font-size: 0.95rem; font-weight: 700; color: var(--foreground); margin-top: 0.3rem; line-height: 1.2; }
.fabric-card__desc { font-size: 0.85rem; color: var(--muted-fg); margin-top: 0.25rem; line-height: 1.5; }

/* ─── Testimonials ───────────────────────────────────────────────────── */
.testimonials { display: flex; flex-direction: column; gap: 1rem; }

.testimonial { padding: 1.25rem; }

.stars { display: flex; gap: 0.15rem; margin-bottom: 0.75rem; }
.stars span { color: var(--accent); font-size: 0.85rem; }

.testimonial__text { font-size: 0.975rem; color: var(--foreground); line-height: 1.7; margin-bottom: 1rem; }

.testimonial__author { display: flex; align-items: center; gap: 0.6rem; }
.testimonial__avatar {
  width: 2.2rem;
  height: 2.2rem;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial__name { font-size: 0.95rem; font-weight: 600; }
.testimonial__loc  { font-size: 0.82rem; color: var(--muted-fg); }

/* ─── CTA block ──────────────────────────────────────────────────────── */
.cta-block {
  margin: 0 1.25rem 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: calc(var(--max-w) - 2.5rem);
  margin-inline: auto;
}

.cta-block__inner {
  background: var(--primary);
  padding: 2rem 1.5rem;
  text-align: center;
}

.cta-block__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.2rem;
}

.cta-block__title { color: white; margin-bottom: 0.5rem; }
.cta-block__desc  { color: rgba(255,255,255,0.62); font-size: 0.875rem; margin-bottom: 1.5rem; }

/* ─── Blog list ──────────────────────────────────────────────────────── */
.blog-featured {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--background);
  margin-bottom: 1.5rem;
}

.blog-featured__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-featured__body { padding: 1.25rem; }
.blog-featured__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.blog-featured__date { font-size: 0.82rem; color: var(--muted-fg); }
.blog-featured__read { font-size: 0.82rem; color: var(--muted-fg); display: flex; align-items: center; gap: 0.25rem; }
.blog-featured__title { font-size: 1.2rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; line-height: 1.3; }
.blog-featured__excerpt { font-size: 0.95rem; color: var(--muted-fg); line-height: 1.7; margin-bottom: 1rem; }
.blog-featured__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}
.blog-featured__link:hover { opacity: 0.8; }

.blog-list { display: flex; flex-direction: column; gap: 0; }

.blog-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.blog-item:last-child { border-bottom: none; }

.blog-item__img {
  width: 5.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.blog-item__body { flex: 1; min-width: 0; }
.blog-item__cat  { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.2rem; }
.blog-item__title { font-size: 1rem; font-weight: 700; color: var(--foreground); line-height: 1.35; margin-bottom: 0.3rem; }
.blog-item__meta  { font-size: 0.82rem; color: var(--muted-fg); display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ─── Post ───────────────────────────────────────────────────────────── */
.post__header { margin-bottom: 2rem; }
.post__hero {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}
.post__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.post__title { font-size: 1.4rem; font-weight: 700; color: var(--foreground); line-height: 1.25; margin-bottom: 1rem; }

.post__content { margin-bottom: 2rem; }
.post__content h2 { font-size: 1.05rem; color: var(--foreground); margin-bottom: 0.5rem; margin-top: 1.75rem; }
.post__content p  { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.75; margin-bottom: 0; }

.post__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-fg);
  margin-bottom: 1.5rem;
}
.post__back:hover { color: var(--foreground); }

/* ─── Recommender ────────────────────────────────────────────────────── */
.progress-bar {
  margin-bottom: 2rem;
}
.progress-bar__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.progress-bar__step { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-fg); }
.progress-bar__pct  { font-size: 0.82rem; font-weight: 600; color: var(--accent); }

.progress-bar__track {
  height: 2px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.q-hint  { font-size: 0.88rem; color: var(--muted-fg); font-weight: 500; margin-bottom: 0.4rem; }
.q-title { font-size: 1.45rem; font-weight: 700; color: var(--foreground); margin-bottom: 1.5rem; line-height: 1.3; }

.options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }

.option-card {
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--background);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color var(--transition), background var(--transition);
}
.option-card:hover { border-color: rgba(26,35,50,0.2); background: var(--card); }

.option-card--selected { background: var(--primary); border-color: transparent; color: white; }
.option-card--selected:hover { background: var(--primary); border-color: transparent; }

.option-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1.2rem;
  transition: background var(--transition);
}
.option-card--selected .option-card__icon { background: rgba(255,255,255,0.15); color: white; }

.option-card__label { font-size: 1rem; font-weight: 600; color: var(--foreground); }
.option-card__desc  { font-size: 0.875rem; color: var(--muted-fg); margin-top: 0.15rem; line-height: 1.4; }

.option-card--selected .option-card__label { color: white; }
.option-card--selected .option-card__desc  { color: rgba(255,255,255,0.65); }

.option-card__check { margin-left: auto; color: rgba(255,255,255,0.8); font-size: 1rem; flex-shrink: 0; }

.q-nav { display: flex; gap: 0.75rem; }

/* ─── Result screen ──────────────────────────────────────────────────── */
.result__tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.result__tag-icon {
  width: 2rem;
  height: 2rem;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.result__tag-label { font-size: 0.85rem; font-weight: 500; color: var(--muted-fg); }

.result__card { padding: 1.5rem; margin-bottom: 1rem; }

.result__top { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }

.result__swatch {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.result__swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 4px
  );
}

.result__code    { font-size: 0.72rem; font-family: monospace; color: var(--muted-fg); margin-bottom: 0.2rem; }
.result__name    { font-size: 1.2rem; font-weight: 700; color: var(--foreground); line-height: 1.2; }
.result__opacity { font-size: 0.85rem; font-weight: 600; color: var(--accent); margin-top: 0.25rem; }
.result__desc    { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.7; margin-bottom: 1.25rem; }

.result__props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.result__prop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--muted);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--foreground);
}
.result__prop-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.result__note {
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.result__note-icon { color: var(--accent); font-size: 0.9rem; flex-shrink: 0; margin-top: 0.1rem; }
.result__note-text { font-size: 0.83rem; color: var(--muted-fg); line-height: 1.6; }

.result__actions { display: flex; flex-direction: column; gap: 0.5rem; }

/* ─── Legal ──────────────────────────────────────────────────────────── */
.legal-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }

.legal-tab {
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--muted);
  color: var(--muted-fg);
  transition: background var(--transition), color var(--transition);
}
.legal-tab:hover { background: var(--border); color: var(--foreground); }
.legal-tab--active { background: var(--primary); color: white; }

.legal-content { display: none; }
.legal-content--active { display: block; }

.legal-content h2 { font-size: 1.1rem; color: var(--foreground); margin-bottom: 0.75rem; margin-top: 1.75rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p  { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.75; margin-bottom: 0; }

/* ─── Login ──────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: calc(100vh - 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}
.login-card {
  width: 100%;
  max-width: 22rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
}
.login-card__logo { margin-bottom: 1.75rem; }
.login-card__title { font-size: 1.1rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.25rem; }
.login-card__sub   { font-size: 0.83rem; color: var(--muted-fg); margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.4rem;
}
.form-input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--foreground);
  transition: border-color var(--transition);
}
.form-input:focus { outline: none; border-color: var(--accent-ring); }
.form-input--icon { padding-left: 2.6rem; }

.form-icon-wrap { position: relative; }
.form-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-fg);
  font-size: 0.9rem;
  pointer-events: none;
}

.form-error {
  display: none;
  font-size: 0.78rem;
  color: #d4183d;
  margin-top: 0.4rem;
}
.form-error--show { display: block; }

.login-card__footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.footer__main {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2rem 1.25rem;
}
.footer__logo { margin-bottom: 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.footer__col-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 0.75rem;
}
.footer__links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__link { font-size: 0.9rem; color: var(--muted-fg); transition: color var(--transition); }
.footer__link:hover { color: var(--foreground); }

.footer__bottom {
  border-top: 1px solid var(--border);
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer__copy { font-size: 0.8rem; color: var(--muted-fg); }
.footer__admin {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted-fg);
  transition: color var(--transition);
}
.footer__admin:hover { color: var(--foreground); }

/* ─── Alerts / notices ───────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.alert--error { background: rgba(212,24,61,0.08); color: #d4183d; }

/* ─── Utilities ──────────────────────────────────────────────────────── */
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Fade-in animation ──────────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-in { animation: fadeSlideUp 0.35s ease both; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Filtro de categorías (blog) ────────────────────────────────────── */
.cat-filter {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.cat-filter__btn {
  padding: 0.4rem 1rem;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--muted);
  color: var(--muted-fg);
  border: 1.5px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}
.cat-filter__btn:hover { color: var(--foreground); border-color: var(--border); }
.cat-filter__btn--active { background: var(--primary); color: white; border-color: transparent; }

/* ─── Badges de categoría con colores ────────────────────────────────── */
.cat-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  letter-spacing: 0.04em;
}
.cat-badge--guías,
.cat-badge--guias    { background: rgba(59,130,246,0.12); color: #2563eb; }
.cat-badge--instalación,
.cat-badge--instalacion { background: rgba(168,90,53,0.12); color: var(--accent); }
.cat-badge--decoración,
.cat-badge--decoracion  { background: rgba(124,58,237,0.12); color: #7c3aed; }
.cat-badge--consejos { background: rgba(16,185,129,0.12); color: #059669; }

/* ─── Botones WhatsApp y PDF ─────────────────────────────────────────── */
.result__share { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.75rem; }

.btn--whatsapp {
  background: #25d366;
  color: white;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  height: 3.5rem;
}
.btn--whatsapp:hover { opacity: 0.88; }

.btn--pdf {
  background: var(--muted);
  color: var(--foreground);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  height: 3.5rem;
  border: 1px solid var(--border);
}
.btn--pdf:hover { background: var(--card); }

/* ─── Protección anti-copia ──────────────────────────────────────────── */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .cta-block { margin-inline: auto; }
}

/* ─── Desktop: escala tipográfica mayor ─────────────────────────────── */
@media (min-width: 768px) {
  :root { --max-w: 720px; }

  html { font-size: 19px; }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }

  .hero         { height: 560px; }
  .hero__lead   { font-size: 1.05rem; }

  .q-title      { font-size: 1.6rem; }
  .option-card__label { font-size: 1.05rem; }
  .option-card__desc  { font-size: 0.92rem; }

  .blog-featured__title { font-size: 1.35rem; }
  .blog-item__title     { font-size: 1.05rem; }

  .nav__inner { height: 4rem; }
  .logo        { font-size: 1.2rem; }
}

@media (min-width: 1024px) {
  html { font-size: 20px; }
  :root { --max-w: 780px; }
}

/* ─── Móvil pequeño: nunca bajar de 16px en inputs y botones ────────── */
@media (max-width: 380px) {
  html { font-size: 17px; }
  .option-card { padding: 1rem 1rem; }
  .btn         { height: 3.25rem; font-size: 0.95rem; }
}

/* ─── Nav en móvil: el botón "Empezar" se cortaba en pantallas estrechas.
   Ocultamos el icono del logo (queda solo el texto de la marca) y
   ajustamos espaciados — sin quitar el enlace al Blog ni recortar el CTA. */
@media (max-width: 480px) {
  .nav__inner  { padding-inline: 0.85rem; }
  .nav__cta    { padding: 0.55rem 0.9rem; font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Recomendador v4.0 ────────────────────────────────────────────── */
.progress-bar { margin-bottom:2rem; }
.progress-bar__labels { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted-fg); margin-bottom:.4rem; font-weight:600; }
.progress-bar__track { height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-bar__fill { height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }

.question { animation:fadeSlide .3s ease both; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.q-hint  { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:.35rem; }
.q-title { font-size:1.25rem; font-weight:700; margin:0 0 1.5rem; line-height:1.35; }

.options { display:grid; gap:.6rem; margin-bottom:1.5rem; }
.option-card {
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); background:var(--card);
  cursor:pointer; text-align:left; width:100%;
  transition:border-color .15s, background .15s;
}
.option-card:hover { border-color:var(--accent); background:var(--accent-light); }
.option-card--selected { border-color:var(--accent); background:var(--accent-light); }
.option-card__icon { width:2.25rem; height:2.25rem; border-radius:50%; background:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.option-card__icon i { font-size:1.1rem; color:var(--accent); }
.option-card__label { font-size:.95rem; font-weight:600; color:var(--foreground); margin:0 0 .1rem; }
.option-card__desc  { font-size:.8rem; color:var(--muted-fg); margin:0; }

/* Esta sección "v4.0" cambia option-card--selected a fondo claro, pero
   arriba en el archivo hay una definición antigua que pone el texto en
   blanco para el estado seleccionado. Sin este bloque, ese blanco se
   queda aplicado sobre el fondo claro nuevo y el texto no se lee. */
.option-card--selected .option-card__icon,
.option-card--selected .option-card__icon i {
  color: var(--accent);
}
.option-card--selected .option-card__label { color: var(--foreground); }
.option-card--selected .option-card__desc  { color: var(--muted-fg); }

.q-nav { display:flex; gap:.5rem; }
.q-nav .btn--outline { flex:0 0 auto; min-width:2.75rem; display:flex; align-items:center; justify-content:center; }

/* ── Resultado ────────────────────────────────────────────────────── */
.result__tag { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.result__tag-icon { width:1.6rem; height:1.6rem; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; }
.result__tag-icon i { font-size:.75rem; color:#fff; }
.result__tag-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.result__card { margin-bottom:1rem; }
.result__prop { font-size:.83rem; padding:.35rem .5rem; background:var(--muted); border-radius:var(--radius-sm); display:flex; align-items:center; gap:.4rem; }
.result__prop-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.result__note { display:flex; gap:.6rem; background:var(--muted); border-radius:var(--radius-sm); padding:.75rem 1rem; margin-bottom:1rem; }
.result__note-icon { color:var(--accent); flex-shrink:0; font-size:1rem; margin-top:.05rem; }
.result__note-text { font-size:.8rem; color:var(--muted-fg); margin:0; line-height:1.6; }
.result__share { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.result__actions { display:flex; flex-direction:column; gap:.5rem; }
.btn--whatsapp { background:#25D366; color:#fff; border-color:#25D366; }
.btn--whatsapp:hover { background:#1ebe5b; }
.btn--pdf { background:var(--foreground); color:#fff; border-color:var(--foreground); }

/* ── Resultado: contenido dinámico de #result-card ───────────────────── */
.result__eyebrow { font-size:.72rem; font-family:monospace; color:var(--muted-fg); margin-bottom:.2rem; }
.result__name  { font-size:1.3rem; font-weight:700; color:var(--foreground); margin-bottom:.15rem; }
.result__color { font-size:1rem; font-weight:500; color:var(--accent); margin-bottom:1rem; }

.result__context { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-bottom:1.25rem; font-size:.8rem; color:var(--muted-fg); }
.result__context-item { display:inline-flex; align-items:center; gap:.3rem; }
.result__context-item i { color:var(--accent); font-size:.95rem; }

.result__section-title { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-fg); margin:1.25rem 0 .5rem; }

.result__body-text { font-size:.88rem; color:var(--muted-fg); line-height:1.7; margin-bottom:1rem; }

.result__props { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem; }

.result__tips { font-size:.85rem; color:var(--muted-fg); line-height:1.7; margin:0 0 1rem 1.1rem; padding:0; }
.result__tips li { margin-bottom:.4rem; }

.result__alt-item { padding:.6rem .75rem; background:var(--muted); border-radius:var(--radius-sm); font-size:.85rem; margin-bottom:.4rem; }
.result__alt-item strong { color:var(--foreground); }
.result__alt-item span { color:var(--muted-fg); }

.result__adecuacion {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: .3rem .7rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}

.result__stars { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.result__stars-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .83rem;
  color: var(--muted-fg);
}
.result__stars-value { color: var(--accent); letter-spacing: .1em; font-size: .9rem; }