/* ==========================================================================
   Ecovia Energy - Landing page stylesheet
   Palette: graphite / cold paper / slate-blue / wool-amber / pine-green
   Type: Zilla Slab (display) + Work Sans (body)
   ========================================================================== */

:root {
  /* Palette rebuilt around a "Spain + energy + conversion" direction:
     pale blue background (matching Effy/CertiCasa), dark navy instead of
     near-black text, mint as the general eco/trust accent, and a
     saturated yellow reserved for primary CTAs. Applied site-wide. */
  --color-graphite: #0b192c;
  --color-paper: #eef3fb;
  --color-paper-dim: #e2ebf7;
  --color-slate: #51637b;
  --color-amber: #f59e0b;
  --color-amber-light: #ffd580;
  --color-pine: #12a67d;
  --color-pine-dark: #0b7d5e;
  --color-alert: #a6432f;

  --color-mint: #12a67d;
  --color-mint-light: #e6f7f1;
  --color-mint-dark: #0b7d5e;

  /* Amarillo Gualda (Spanish flag yellow) - the site's primary CTA color. */
  --color-sun: #fabd00;
  --color-sun-dark: #e5ab00;
  --color-text: #0b192c;
  --color-text-muted: #51637b;
  --color-border: #d6e2f3;

  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1180px;
  --radius: 6px;
  --shadow-soft: 0 4px 20px rgba(11, 25, 44, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-graphite);
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  /* Prevents short orphan words/phrases from wrapping alone onto their own
     line (e.g. "sin trucos." or "a fin" left dangling) by balancing line
     lengths across the whole heading instead of naive greedy wrapping.
     Supported by all major browsers; falls back to normal wrap harmlessly
     where unsupported. */
  text-wrap: balance;
}
h3 { font-size: 1.15rem; }

p {
  margin: 0 0 1em;
  max-width: 68ch;
}

.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

.section--dark {
  background: var(--color-graphite);
  color: var(--color-paper);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-paper);
}

.section--muted {
  background: var(--color-paper-dim);
}

/* Width is constrained on the paragraph only, not the heading - a title
   needs its natural width to stay on one line, while body text benefits
   from a narrower measure for readability. Constraining the whole
   .section-head box (title + paragraph together) was forcing long titles
   to wrap awkwardly even though the page had plenty of room. */
.section-head {
  margin-bottom: 44px;
}

.section-head p {
  max-width: 720px;
  color: var(--color-text-muted);
}

/* Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--color-sun);
  color: var(--color-graphite);
  border-color: var(--color-sun);
}

.btn-primary:hover {
  background: var(--color-sun-dark);
  border-color: var(--color-sun-dark);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-graphite);
  color: var(--color-graphite);
}

.btn-secondary:hover {
  background: var(--color-graphite);
  color: var(--color-paper);
}

.btn-whatsapp {
  background: #ffffff;
  color: var(--color-pine);
  border-color: var(--color-pine);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1.05rem;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 244, 239, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

/* Deliberately not the shared .container (max-width 1180px, centered):
   a nav bar reads better spanning the true viewport width, with the logo
   and CTA anchored to the real left/right edges - the same fix already
   applied to the hero, for the same reason (Effy's nav does this too). */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px clamp(20px, 4vw, 64px);
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-graphite);
}

.logo-suffix {
  color: var(--color-pine);
  font-weight: 500;
}

/* On narrow phones, "Ecovia.energy" next to the header button gets cramped
   (confirmed on an iPhone 14 screenshot). Stacking the two parts avoids
   the squeeze without shrinking the logo or the button. */
@media (max-width: 420px) {
  .logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
}

.header-contact {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-phone {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-graphite);
  display: none;
}

@media (min-width: 640px) {
  .header-phone {
    display: inline-block;
  }
}

/* Hero (full-bleed photo background, text overlay) ---------------------- */

.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, #1c2b2e 0%, #3e5c63 55%, #1f4a3d 100%);
}

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

/* Two photos: crossfade between them, one full cycle every 14s. */
.hero-media--2-slides .hero-slide {
  animation: heroCrossfade 9s ease-in-out infinite;
}

.hero-media--2-slides .hero-slide:nth-child(1) {
  animation-delay: 0s;
}

.hero-media--2-slides .hero-slide:nth-child(2) {
  animation-delay: 4.5s;
}

@keyframes heroCrossfade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Only one photo available: show it statically, no animation. */
.hero-media--1-slides .hero-slide {
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  /* Localized to the left/bottom area where the text sits, so the rest of
     the photo (sky, house, heat pump) stays bright and visible, matching
     the Effy reference instead of darkening the whole frame. */
  background:
    linear-gradient(90deg, rgba(28, 43, 46, 0.75) 0%, rgba(28, 43, 46, 0.45) 42%, rgba(28, 43, 46, 0) 68%),
    linear-gradient(0deg, rgba(28, 43, 46, 0.55) 0%, rgba(28, 43, 46, 0) 45%);
}

/* Deliberately NOT using the shared .container here: that class caps at
   --max-width (1180px) and centers itself, which on large monitors left
   the hero text looking like a small block stranded in the middle of a
   huge photo. The hero text now anchors near the left edge with its own
   responsive padding and reads close to full-bleed on any screen size,
   matching the Effy reference instead of sitting inside a shrunk column. */
/* No max-width here on purpose: the two headline lines are already
   explicit (headline_line1 / headline_line2 in hero.json, joined by a
   real <br> in index.php), so a fixed pixel cap only fights the large
   font-size and forces unwanted extra wraps. Instead, padding-right
   scales with the viewport so the text block naturally keeps clear of
   the photo's right side on any screen width, without an arbitrary cap. */
.hero-content {
  position: relative;
  z-index: 2;
  color: var(--color-paper);
  width: 100%;
  padding: 0 24px;
  margin: 0;
}

@media (min-width: 900px) {
  .hero-content {
    padding-left: clamp(32px, 8vw, 140px);
    padding-right: clamp(60px, 28vw, 460px);
  }
}

/* The hero H1 gets its own, much larger scale than the site-wide h1 default
   (which stays modest for normal content headings elsewhere on the page).
   Effy's hero fills a big share of the available width with confident,
   heavy type - our previous 3.4rem cap read as timid by comparison. */
.hero-content h1 {
  color: var(--color-paper);
  font-size: clamp(2.6rem, 7.8vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
}

.hero-content .hero-sub {
  color: rgba(246, 244, 239, 0.85);
  font-size: 1.15rem;
  max-width: 56ch;
}

.eyebrow {
  display: inline-block;
  color: var(--color-amber-light);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.btn-hero-secondary {
  background: transparent;
  border-color: rgba(246, 244, 239, 0.7);
  color: var(--color-paper);
}

.btn-hero-secondary:hover {
  background: rgba(246, 244, 239, 0.12);
  border-color: var(--color-paper);
}

/* Compact stats strip, sits right below the hero as its own thin band -
   kept deliberately small so it never competes with the hero photo. */
.stats-strip {
  background: var(--color-paper-dim);
  border-bottom: 1px solid var(--color-border);
}

.stats-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 40px 24px;
}

@media (min-width: 720px) {
  .stats-strip-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* The strongest argument on the site gets the loudest type: big bold
   numbers, stacked above a short label, not a thin inline aside. */
.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
  padding: 0 12px;
}

@media (min-width: 720px) {
  .stat-chip:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 8%;
    height: 84%;
    width: 1px;
    background: var(--color-border);
  }
}

.stat-chip .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.5vw, 2.8rem);
  color: var(--color-pine);
  line-height: 1;
}

.stat-chip .label {
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* Inline variant (hero overlay, variant B): a compact pill over the photo,
   still noticeably bigger than the original but scaled down from the full
   strip treatment so it doesn't overwhelm the hero photo itself. */
.stat-chip--inline {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  padding: 10px 16px;
}

.stat-chip--inline::after {
  display: none;
}

.stat-chip--inline .value {
  font-size: 1.5rem;
}

.stat-chip--inline .label {
  font-size: 0.88rem;
  max-width: none;
}

/* Hero A/B/C variants: variant A puts the stats strip above the hero
   (lighter, since it's not overlaying the header), variant B puts them
   inline over the photo as translucent glass chips. */

.stats-strip--top .stats-strip-inner {
  padding-top: 12px;
  padding-bottom: 12px;
}

.hero-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 4px;
}

.stat-chip--inline {
  padding: 10px 16px;
  background: rgba(246, 244, 239, 0.1);
  border: 1px solid rgba(246, 244, 239, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.stat-chip--inline .value {
  color: var(--color-amber-light);
}

.stat-chip--inline .label {
  color: rgba(246, 244, 239, 0.85);
}

/* Trust section -------------------------------------------------------- */

.trust-grid {
  display: grid;
  gap: 24px;
  margin-top: 8px;
}

@media (min-width: 720px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.trust-item {
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.trust-item h3 {
  margin-bottom: 8px;
}

.trust-item p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* How it works (3 simple steps) ------------------------------------------ */

.steps-list {
  counter-reset: step;
  display: grid;
  gap: 22px;
}

@media (min-width: 720px) {
  .steps-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 720px) and (max-width: 960px) {
  .steps-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.step-item {
  position: relative;
  padding-top: 44px;
}

.step-item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--color-amber);
  display: block;
  margin-bottom: 10px;
}

.step-item p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.source-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 20px;
}

/* Why now (urgency + comfort) --------------------------------------------- */

.why-now-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 720px) {
  .why-now-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-now-card {
  border-radius: 10px;
  overflow: hidden;
}

.why-now-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.why-now-card-body {
  padding: 28px;
}

.why-now-card.urgency {
  background: var(--color-graphite);
  color: var(--color-paper);
}

.why-now-card.urgency h3 {
  color: var(--color-amber-light);
}

.why-now-card.urgency p {
  color: rgba(246, 244, 239, 0.8);
  margin: 0;
}

.why-now-card.comfort {
  background: #ffffff;
  border: 1px solid var(--color-border);
}

.why-now-card.comfort p {
  color: var(--color-text-muted);
  margin: 0;
}

/* Full-width decorative banner photo, used above the how-it-works steps
   and above the trust items - purely illustrative, not a card.
   The border-radius lives on the wrapping div (which clips via
   overflow:hidden), not on the <img> itself - border-radius directly on a
   replaced element combined with object-fit:cover can leave a hairline
   rendering gap at one edge in some browsers (seen on a real screenshot).
   Clipping via a parent avoids that rendering bug entirely. */
.section-banner {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}

.section-banner img {
  width: 100%;
  height: clamp(200px, 32vw, 380px);
  object-fit: cover;
  display: block;
}

/* Nuestras soluciones: two clearly separate cards (aislamiento / bomba de
   calor). Kept visually distinct on purpose - different accent colors and
   independent financing notes - so the two offers never blur into a
   single blanket claim. */

.solutions-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 800px) {
  .solutions-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.solution-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.solution-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.solution-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
}

/* First card (aislamiento) in pine, second (bomba de calor) in slate -
   a real color difference, not just a text difference, so the eye
   immediately registers "these are two different things". */
.solution-card:nth-child(1) {
  border-top: 4px solid var(--color-pine);
}

.solution-card:nth-child(2) {
  border-top: 4px solid var(--color-slate);
}

.solution-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.solution-card:nth-child(1) .solution-badge {
  background: var(--color-mint-light);
  color: var(--color-mint-dark);
}

.solution-card:nth-child(2) .solution-badge {
  background: var(--color-paper-dim);
  color: var(--color-slate);
}

.solution-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.solution-intro {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.solution-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex-grow: 1;
}

.solution-benefits li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: var(--color-text);
}

.solution-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-pine);
}

.solution-card:nth-child(2) .solution-benefits li::before {
  background: var(--color-slate);
}

.solution-financing-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* Eligibility checker (optional/secondary tool) --------------------------- */

.checker-optional-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(31, 74, 61, 0.10);
  color: var(--color-pine);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.checker {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.checker-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.checker-question:last-of-type {
  border-bottom: none;
}

.checker-question-text {
  font-size: 0.98rem;
}

.toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.toggle-option {
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
}

.toggle-option.is-active[data-value="yes"] {
  background: var(--color-pine);
  color: #ffffff;
}

.toggle-option.is-active[data-value="no"] {
  background: var(--color-alert);
  color: #ffffff;
}

.checker-result {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius);
  display: none;
}

.checker-result.is-visible {
  display: block;
}

.checker-result.state-eligible {
  background: rgba(31, 74, 61, 0.10);
  border: 1px solid var(--color-pine);
}

.checker-result.state-uncertain {
  background: rgba(184, 129, 60, 0.12);
  border: 1px solid var(--color-amber);
}

.checker-result.state-not-eligible {
  background: rgba(166, 67, 47, 0.10);
  border: 1px solid var(--color-alert);
}

.checker-result h3 {
  margin-bottom: 6px;
}

.checker-result p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
}

/* Savings estimator (euro range, sourced to IDAE) ------------------------- */

.savings-estimator {
  position: relative;
  margin: 18px 0;
  padding: 20px;
  background: var(--color-graphite);
  border-radius: var(--radius);
  color: var(--color-paper);
}

.savings-estimator-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(228, 200, 148, 0.16);
  color: var(--color-amber-light);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.savings-estimator h4 {
  color: var(--color-paper);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.savings-estimator-helper {
  color: rgba(246, 244, 239, 0.7);
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.savings-estimator-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: rgba(246, 244, 239, 0.85);
}

.savings-estimator-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.savings-estimator-input-row input {
  width: 120px;
  padding: 10px 12px;
  border: 1px solid rgba(246, 244, 239, 0.25);
  border-radius: var(--radius);
  background: rgba(246, 244, 239, 0.08);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1rem;
}

.savings-estimator-suffix {
  font-size: 0.85rem;
  color: rgba(246, 244, 239, 0.6);
}

.savings-estimator-output {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-amber-light);
  margin: 0 0 10px;
  min-height: 1.6rem;
}

.savings-estimator-source {
  font-size: 0.78rem;
  color: rgba(246, 244, 239, 0.55);
  margin: 0;
}

/* FAQ ------------------------------------------------------------------ */

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-graphite);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-pine);
  transition: transform 0.2s ease;
}

.faq-icon::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
}

.faq-icon::after {
  top: 0;
  left: 9px;
  width: 2px;
  height: 20px;
}

.faq-item.is-open .faq-icon::after {
  transform: scaleY(0);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer p {
  padding-bottom: 20px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Contact form ------------------------------------------------------------ */

.contact-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.included-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.included-list li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 12px;
  color: var(--color-text-muted);
}

.included-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-pine);
}

.form-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-paper);
}

.form-row-double {
  display: grid;
  gap: 16px;
}

@media (min-width: 480px) {
  .form-row-double {
    grid-template-columns: 1fr 1fr;
  }
}

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}

.form-feedback {
  display: none;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.form-feedback.is-visible {
  display: block;
}

.form-feedback.state-success {
  background: rgba(31, 74, 61, 0.10);
  border: 1px solid var(--color-pine);
}

.form-feedback.state-error {
  background: rgba(166, 67, 47, 0.10);
  border: 1px solid var(--color-alert);
}

/* Sticky WhatsApp button -------------------------------------------------- */

.sticky-whatsapp {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 50;
  background: var(--color-pine);
  color: #ffffff;
  border-radius: 999px;
  padding: 14px 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--color-graphite);
  color: rgba(246, 244, 239, 0.75);
  padding: 48px 0 90px;
  font-size: 0.88rem;
}

.footer-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer-grid h4 {
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.footer-grid a {
  color: rgba(246, 244, 239, 0.75);
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--color-amber-light);
}

.footer-legal {
  border-top: 1px solid rgba(246, 244, 239, 0.15);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 0.8rem;
  color: rgba(246, 244, 239, 0.55);
}

/* Mobile hero adjustments ------------------------------------------------- */

@media (max-width: 720px) {
  .hero {
    min-height: 72vh;
  }

  .hero-slide {
    object-position: center 38%;
  }

  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(28, 43, 46, 0.35) 0%, rgba(28, 43, 46, 0.78) 55%, rgba(28, 43, 46, 0.92) 100%);
  }

  .hero-actions {
    flex-direction: column;
  }

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

  /* The sticky WhatsApp button would otherwise sit on top of whatever
     section is at the bottom of the viewport (here, the stats strip right
     after the hero). Shrinking it to an icon-only pill on small screens
     keeps its footprint small enough to not obscure content behind it. */
  .sticky-whatsapp {
    padding: 14px;
    font-size: 0;
    gap: 0;
  }

  .sticky-whatsapp::before {
    content: "\1F4AC";
    font-size: 1.3rem;
  }

  .stats-strip-inner {
    justify-content: flex-start;
    gap: 20px;
    padding: 16px 24px;
    padding-right: 70px;
  }
}

/* Utility ------------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .faq-answer,
  .btn {
    transition: none;
  }

  .hero-slide {
    animation: none !important;
  }

  .hero-media--2-slides .hero-slide:nth-child(1),
  .hero-media--1-slides .hero-slide {
    opacity: 1;
  }

  .hero-media--2-slides .hero-slide:nth-child(2) {
    opacity: 0;
  }
}

/* ==========================================================================
   Quote quiz (presupuesto.php) - server-rendered multi-step form.
   Layout adapted from a reference template the user supplied (rounded
   answer cards with an icon zone, segmented progress pills, centered
   question card) - recolored and re-typed entirely in Ecovia's own
   palette (graphite/pine/amber, Zilla Slab + Work Sans) rather than the
   template's navy/teal/Poppins.
   Custom radio/checkbox styling below uses only CSS (:checked + sibling
   selector), so selection states work with zero JavaScript.
   ========================================================================== */

.quiz-page {
  background: var(--color-paper-dim);
}

.quiz-header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}

.quiz-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 64px);
}

.quiz-header-phone {
  font-weight: 600;
  color: var(--color-graphite);
  text-decoration: none;
}

.quiz-main {
  display: flex;
  justify-content: center;
  padding: 40px 20px 80px;
}

.quiz-wrap {
  width: 100%;
  max-width: 660px;
}

/* Intro / hero block ------------------------------------------------------ */

.quiz-intro {
  text-align: center;
  margin-bottom: 30px;
}

.quiz-intro h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.quiz-intro-highlight {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-mint-dark);
  font-size: clamp(1.6rem, 4.2vw, 2.2rem);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.quiz-intro-tagline {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  max-width: 46ch;
  margin: 0 auto 20px;
}

.quiz-intro-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-intro-stat {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.quiz-intro-stat .value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-mint-dark);
  font-size: 1rem;
}

.quiz-intro-stat .label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Progress: segmented pills, one per step ---------------------------------- */

.quiz-progress {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.quiz-progress span {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--color-border);
}

.quiz-progress span.active {
  background: var(--color-mint);
}

.quiz-progress-label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 24px;
}

/* Notice (never-reject redirect messages) ----------------------------- */

.quiz-notice {
  background: rgba(184, 129, 60, 0.12);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.92rem;
  color: var(--color-text);
  margin-bottom: 24px;
}

/* Question card ------------------------------------------------------------ */

.quiz-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 44px 40px;
  box-shadow: 0 3px 14px rgba(28, 43, 46, 0.08);
}

@media (max-width: 600px) {
  .quiz-card {
    padding: 30px 22px;
    border-radius: 18px;
  }
}

.quiz-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 32px;
}

.quiz-fieldset:last-of-type {
  margin-bottom: 0;
}

.quiz-legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-graphite);
  text-align: center;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.quiz-step-title {
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 18px;
}

.quiz-helper {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  text-align: center;
  margin-bottom: 22px;
}

.quiz-error {
  color: var(--color-alert);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
}

/* Answer cards --------------------------------------------------------- */

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Two or more options with icons become a proper card grid, matching the
   reference template's two-column layout of illustrated answer buttons. */
.quiz-options--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
}

@media (max-width: 460px) {
  .quiz-options--grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

.quiz-option {
  display: block;
  cursor: pointer;
  position: relative;
}

/* The native input stays in the accessibility tree and keyboard-operable,
   just visually minimized in a corner - the card carries the visible
   styling and the checked state. */
.quiz-option input {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-pine);
  z-index: 2;
}

.quiz-options:not(.quiz-options--grid) .quiz-option input {
  position: static;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-right: 14px;
  float: left;
  margin-top: 18px;
}

.quiz-option-card {
  display: block;
  overflow: hidden;
  border: 2px solid var(--color-border);
  border-radius: 15px;
  background: #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  height: 100%;
}

.quiz-options:not(.quiz-options--grid) .quiz-option-card {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  gap: 14px;
}

.quiz-option:hover .quiz-option-card {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(28, 43, 46, 0.10);
}

.quiz-option input:checked + .quiz-option-card {
  border-color: var(--color-mint);
  box-shadow: 0 0 0 2px rgba(18, 166, 125, 0.18);
}

.quiz-option input:focus-visible + .quiz-option-card {
  outline: 2px solid var(--color-mint);
  outline-offset: 2px;
}

/* Icon "illustration" zone - colored from the start (not just on
   selection). A neutral beige background with a thin gray icon read as
   "no color allowed" - matching CertiCasa's own pattern of a permanently
   tinted card background fixes that directly. */
.quiz-option-illustration {
  height: 118px;
  background: var(--color-mint-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.quiz-options:not(.quiz-options--grid) .quiz-option-illustration {
  height: 48px;
  width: 48px;
  flex-shrink: 0;
  border-radius: 10px;
}

.quiz-option input:checked + .quiz-option-card .quiz-option-illustration {
  background: var(--color-mint);
}

.quiz-option-icon {
  width: 50px;
  height: 50px;
  color: var(--color-mint-dark);
  stroke-width: 1.9;
  transition: color 0.15s ease;
}

.quiz-options:not(.quiz-options--grid) .quiz-option-icon {
  width: 26px;
  height: 26px;
}

.quiz-option input:checked + .quiz-option-card .quiz-option-icon {
  color: #ffffff;
}

.quiz-option-label {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-text);
}

.quiz-options:not(.quiz-options--grid) .quiz-option-label {
  min-height: 0;
  padding: 0;
  text-align: left;
  justify-content: flex-start;
  font-size: 0.98rem;
}

.quiz-option input:checked + .quiz-option-card .quiz-option-label {
  color: var(--color-mint-dark);
}

/* Text fields ----------------------------------------------------------- */

.quiz-field {
  margin-bottom: 20px;
}

.quiz-field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.quiz-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-paper);
}

.quiz-field input:focus-visible {
  outline: 2px solid var(--color-pine);
  outline-offset: 1px;
}

/* Consent checkbox ------------------------------------------------------- */

.quiz-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  cursor: pointer;
}

.quiz-consent input {
  margin-top: 3px;
  accent-color: var(--color-pine);
  flex-shrink: 0;
}

.quiz-consent a {
  color: var(--color-pine);
  font-weight: 600;
}

.quiz-submit {
  margin-top: 20px;
  background: var(--color-sun);
  color: var(--color-graphite);
  border: none;
}

.quiz-submit:hover {
  background: var(--color-sun-dark);
}

/* Confirmation page ------------------------------------------------------- */

.quiz-confirmation h1 {
  font-size: 1.7rem;
  margin-bottom: 12px;
  text-align: center;
}

.quiz-confirmation > p {
  color: var(--color-text-muted);
  margin-bottom: 24px;
  text-align: center;
}

.quiz-confirmation-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quiz-confirmation-steps li {
  display: flex;
  gap: 14px;
}

.quiz-confirmation-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-pine);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.quiz-confirmation-steps h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.quiz-confirmation-steps p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.quiz-cadastral-tip {
  background: var(--color-paper-dim);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.quiz-cadastral-tip h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.quiz-cadastral-tip p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}