/* =================================================================
   Naaval Sunshine — Landing Page 4 · Villa ROI Calculator
   Inputs card + results card over a project image.
   ================================================================= */

:root {
  --cream: #fbf7ef;
  --sun: #eca63a;
  --sun-soft: #fbe9c8;
  --navy: #22346f;
  --navy-2: #182654;
  --ink: #1d2333;
  --ink-2: #4a5160;
  --muted: #6b7180;
  --line: #e7e2d8;
  --white: #fff;
  --land: #3d5fc0;
  --villa: #c98418;
  --good: #1f7a4d;
  --bad: #b3261e;

  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 400 1rem/1.6 var(--sans); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
select, input { font: inherit; color: inherit; }

.container { width: min(1200px, 100% - 48px); margin-inline: auto; }

/* ---------- Media placeholder ---------- */
.media { position: relative; overflow: hidden; background: var(--navy-2); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media.is-empty { background: linear-gradient(140deg, #22346f, #182654); }
.media.is-empty img { visibility: hidden; }

/* ---------- Header ---------- */
.header { background: var(--white); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.header__logo img { height: 44px; width: auto; }
.header__call { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--sun); color: var(--navy-2); font-weight: 600; font-size: .92rem; transition: background .2s; }
.header__call:hover { background: #f3b553; }
.header__call svg { width: 17px; height: 17px; }

/* ---------- Page ---------- */
.calc-page { position: relative; isolation: isolate; flex: 1; padding: clamp(36px, 6vw, 72px) 0; }
.calc-page__bg { position: absolute; inset: 0 0 auto; height: 520px; z-index: -2; }
.calc-page::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; background: linear-gradient(180deg, rgba(16, 24, 52, .72) 0%, rgba(16, 24, 52, .6) 70%, var(--cream) 100%); }
.calc-page__head { text-align: center; color: var(--white); margin-bottom: 32px; }
.calc-page__head h1 { font: 400 clamp(2rem, 1.4rem + 2vw, 2.9rem)/1.1 var(--serif); margin-bottom: 10px; }
.calc-page__head p { color: rgba(255, 255, 255, .85); max-width: 56ch; margin: 0 auto; }

.roi { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.card { background: var(--white); border-radius: 14px; padding: 28px; box-shadow: 0 5px 20px rgba(0, 0, 0, .06), 0 30px 60px -36px rgba(0, 0, 0, .45); }
.card__title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; }
.card__title--gap { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Inputs ---------- */
.calc__field { margin-bottom: 16px; }
.calc__field label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.calc__field select, .calc__field input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid #d7d2c6; border-radius: 10px; outline: none; background: var(--white);
  font-size: .95rem; transition: border-color .2s, box-shadow .2s;
}
.calc__field select {
  padding-right: 40px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2322346f' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.calc__field select:focus, .calc__field input:focus { border-color: var(--sun); box-shadow: 0 0 0 4px var(--sun-soft); }
.calc__field select:disabled { background-color: #f5f2ec; color: var(--muted); cursor: not-allowed; }

.slider { margin-bottom: 18px; }
.slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; font-weight: 500; margin-bottom: 8px; }
.slider output { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.slider input { width: 100%; accent-color: var(--navy); cursor: pointer; }
.slider--hero { margin: 24px 0 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.slider--hero label { font-size: 1rem; font-weight: 600; }
.slider--hero output { font-size: 1.25rem; }
.slider--hero input { height: 28px; }
.slider__scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* ---------- Results ---------- */
.roi__results { position: sticky; top: 20px; }
.calc__none { margin-bottom: 20px; padding: 16px 18px; border-radius: 10px; background: var(--sun-soft); font-size: .92rem; line-height: 1.55; }
.calc__none a { display: inline-block; margin-top: 8px; padding: 7px 14px; border-radius: 999px; background: var(--navy); color: var(--white); font-weight: 600; font-size: .86rem; }

.hero-stat { background: var(--navy-2); color: var(--white); border-radius: 12px; padding: 24px 26px; }
.hero-stat__label { font-size: .95rem; color: rgba(255, 255, 255, .78); }
.hero-stat__value { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 700; line-height: 1.15; color: #f6c46e; margin: 4px 0; font-variant-numeric: tabular-nums; }
.hero-stat__sub { font-size: .9rem; color: rgba(255, 255, 255, .7); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile__label { font-size: .8rem; color: var(--muted); margin-bottom: 2px; }
.tile__value { font-size: 1.35rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.roi__results:not(.is-empty):not(.is-loss) .tile:first-child .tile__value { color: var(--good); }
.roi__results.is-loss .tile__value { color: var(--bad); }

.chart { margin-top: 24px; }
.chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.chart__head .card__title { margin: 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw--land, .sw--value { background: var(--land); }
.sw--villa { background: var(--villa); }
.sw--line { width: 14px; height: 0; border-top: 2px dashed var(--ink-2); border-radius: 0; }

.chart__plot { position: relative; }
.chart__plot svg { width: 100%; height: auto; overflow: visible; }
.chart__plot .grid { stroke: #ece8df; stroke-width: 1; }
.chart__plot .tick { font-size: 11px; fill: var(--muted); font-family: var(--sans); }
.chart__plot .bar-land, .chart__plot .bar-value { fill: var(--land); }
.chart__plot .bar-villa { fill: var(--villa); }
.chart__plot .invest { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart__plot .invest-label { font-size: 11px; font-weight: 600; fill: var(--ink-2); font-family: var(--sans); paint-order: stroke; stroke: var(--white); stroke-width: 4px; }
.chart__plot .hit { fill: transparent; cursor: default; }
.chart__plot .hit.is-hover { fill: rgba(34, 52, 111, .06); }
.roi-tip {
  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none;
  display: grid; gap: 2px; min-width: 140px; padding: 10px 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .3); font-size: .8rem; color: var(--ink-2);
}
.roi-tip strong { color: var(--ink); font-size: .85rem; }
.roi-tip span { display: flex; align-items: center; gap: 6px; }
.roi-tip .tip-total { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }

.chart__table { margin-top: 8px; font-size: .85rem; }
.chart__table summary { cursor: pointer; color: var(--navy); font-weight: 600; width: fit-content; }
.chart__table table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chart__table th, .chart__table td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.chart__table th:first-child, .chart__table td:first-child { text-align: left; }
.chart__table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }

.breakdown { margin-top: 24px; border-top: 1px solid var(--line); }
.breakdown div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.breakdown dt { color: var(--ink-2); }
.breakdown dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.breakdown .is-strong dt, .breakdown .is-strong dd { color: var(--ink); font-weight: 700; }
.breakdown .is-accent { border-bottom: 0; }
.breakdown .is-accent dd { color: var(--good); }
.roi__results.is-loss .breakdown .is-accent dd { color: var(--bad); }

.roi__results.is-empty .chart, .roi__results.is-empty .breakdown { display: none; }

.calc__note { font-size: .8rem; color: var(--muted); margin-top: 18px; line-height: 1.55; }

/* ---------- PDF download + lead form ---------- */
.pdf-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 14px; height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--sun); color: var(--navy-2); font: 600 .95rem/1 var(--sans); transition: background .2s;
}
.pdf-cta:hover { background: #f3b553; }
.pdf-cta svg { width: 18px; height: 18px; }
.roi__results.is-empty .pdf-cta { display: none; }

.gate { width: min(440px, 100% - 32px); padding: 36px 32px 28px; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45); }
.gate::backdrop { background: rgba(16, 24, 52, .6); }
.gate__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cream); color: var(--navy); cursor: pointer; }
.gate__close svg { width: 18px; height: 18px; }
.gate__title { font: 400 1.7rem/1.15 var(--serif); color: var(--navy-2); margin-bottom: 6px; padding-right: 36px; }
.gate__text { color: var(--muted); font-size: .92rem; margin-bottom: 20px; }
.gate__fine { font-size: .76rem; color: var(--muted); margin-top: 10px; text-align: center; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field .optional { font-weight: 400; color: var(--muted); }
.field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d7d2c6; border-radius: 10px; outline: none; background: var(--cream); font: inherit; transition: border-color .2s, box-shadow .2s; }
.field input:focus { border-color: var(--sun); background: var(--white); box-shadow: 0 0 0 4px var(--sun-soft); }
.field.has-error input { border-color: #c0392b; }
.field__error { display: block; font-size: .78rem; color: #c0392b; margin-top: 4px; }
.btn-sun { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--sun); color: var(--navy-2); font: 600 1rem/1 var(--sans); cursor: pointer; }
.btn-sun:hover { background: #f3b553; }
.btn-sun:disabled { opacity: .7; cursor: progress; }
.btn-sun svg { width: 18px; height: 18px; }
.form-status { font-size: .85rem; color: #c0392b; margin-top: 10px; }
.form-status:empty { display: none; }
.form-success { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--sun-soft); outline: none; }
.form-success svg { flex: none; width: 22px; height: 22px; color: #a96a10; }
form.is-sent > :not([data-success]) { display: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-2); color: rgba(255, 255, 255, .65); font-size: .92rem; }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; padding: 40px 0 28px; }
.footer__brand img { height: 44px; width: auto; margin-bottom: 10px; }
.footer__brand p { color: var(--white); font-weight: 500; }
.footer a:hover { color: var(--white); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; color: rgba(255, 255, 255, .42); }

/* ---------- WhatsApp ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); transition: transform .25s; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 27px; height: 27px; fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .roi { grid-template-columns: 1fr; }
  .roi__results { position: static; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }
  .header__inner { height: 66px; }
  .header__logo img { height: 36px; }
  .header__call span { display: none; }
  .header__call { width: 44px; padding: 0; justify-content: center; }
  .card { padding: 20px 16px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { display: flex; justify-content: space-between; align-items: baseline; }
  .breakdown div { font-size: .88rem; }
  .footer__inner { flex-direction: column; gap: 18px; }
}