/* Finestreta: a pale sage ground, Bricolage Grotesque for headings and
   Atkinson Hyperlegible for text. Two colours: municipal green for actions
   and a warm yellow for the arched window, the one motif, which frames the
   demo chat in the intro. No scripts of our own, so everything but the
   contact form's bot check works without JS. */

/* Bricolage Grotesque and Atkinson Hyperlegible (SIL Open Font License 1.1),
   served from this site so no request reaches a third party. Latin and
   Latin Extended cover Spanish, Valencian and English. Bricolage Grotesque
   is a variable font. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(assets/fonts/bricolage-grotesque-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/atkinson-hyperlegible-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/atkinson-hyperlegible-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/atkinson-hyperlegible-bold-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/atkinson-hyperlegible-bold-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --ground: #F2F4EF;
  --tile: #FFFFFF;
  --ink: #15231C;
  --body: #33443B;
  --muted: #4B5A52;
  --rule: #D5DCD4;
  --rule-soft: #E3E8E1;
  --field: #B9CBBF;
  --verde: #0E6A48;
  --verde-dark: #0A4F36;
  --verde-soft: #E1F0E8;
  --verde-line: #CFE3D7;
  --on-verde: #D6E9DE;
  --on-ink: #C9D6CE;
  --sol: #F3C84B;
  --sol-soft: #FBEFC4;
  --sol-ink: #5C4600;
  --sol-line: #EBD892;
  --error: #A23B2A;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --gutter: clamp(20px, 6.6vw, 96px);
  --pill: 999px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--ground); }
body { font-family: var(--sans); color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
::selection { background: var(--sol-soft); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
/* Skip link: off-screen until focused */
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 20; padding: 10px 16px; background: var(--ink); color: #FFFFFF; font-weight: 700; border-radius: var(--pill); }
.skip:focus { top: 12px; }
main:focus { outline: none; }

.link { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--verde); }

/* Buttons: green pills, ink for the secondary ones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 26px; background: var(--verde); color: #FFFFFF; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; border: 0; border-radius: var(--pill); cursor: pointer; transition: background .25s, transform .25s var(--ease); }
.btn:hover { background: var(--verde-dark); transform: translateY(-1px); }
.btn-ink { background: var(--ink); }
.btn-ink:hover { background: #26382E; }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 16px; }

/* ---------- Header ---------- */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; padding-bottom: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { display: block; width: 30px; height: 32px; }
.brand-name { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.brand-by { font-size: 14px; color: var(--muted); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; }
.nav-link { text-decoration: none; }
.nav-link:hover { color: var(--verde); text-decoration: underline; text-underline-offset: 4px; }

/* Language switch: a pill group, the current language filled in green */
.lang { display: inline-flex; gap: 4px; padding: 4px; background: var(--tile); border: 1px solid var(--rule); border-radius: var(--pill); }
.lang-opt { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; font-size: 14px; color: var(--body); text-decoration: none; border-radius: var(--pill); transition: background .2s, color .2s; }
.lang-opt:hover { background: var(--ground); color: var(--ink); }
.lang-opt.is-on { background: var(--verde); color: #FFFFFF; font-weight: 700; }

/* ---------- Intro: headline and lede beside the arched window ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px 72px; align-items: center; padding-top: 64px; padding-bottom: 96px; }
.intro-text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.badge { margin: 0; padding: 8px 14px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--sol-ink); background: var(--sol-soft); border-radius: var(--pill); }
.intro h1 { margin: 0; font-size: clamp(44px, 5.6vw, 80px); font-weight: 800; line-height: .98; letter-spacing: -0.03em; }
.lede { margin: 0; max-width: 34em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--body); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 8px; }
.actions .link { font-size: 18px; }
.highlights { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 20px 0 0; list-style: none; font-size: 15px; color: var(--muted); }

/* The arched window: yellow arch behind, the chat card in front of it */
.window { position: relative; padding: 90px 40px 48px 0; }
.window::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 40px; background: var(--sol); border-radius: 50% 50% 28px 28px / min(300px, 40vw) min(300px, 40vw) 28px 28px; }
.chat { position: relative; display: flex; flex-direction: column; background: var(--tile); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(21, 35, 28, .35); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--rule-soft); }
.chat-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--verde); border-radius: 50%; }
.chat-avatar svg { width: 16px; height: 18px; }
.chat-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.chat-who strong { font-size: 15px; }
.chat-who span { font-size: 13px; color: var(--muted); }
.chat-ai { flex: none; padding: 5px 10px; font-size: 12px; font-weight: 700; color: var(--verde-dark); background: var(--verde-soft); border-radius: 6px; text-decoration: none; cursor: help; }
.chat-log { min-height: 300px; padding: 22px; }
.turn { display: none; flex-direction: column; gap: 16px; }
.msg { margin: 0; font-size: 16px; line-height: 1.5; }
.msg-q { align-self: flex-end; max-width: 80%; padding: 12px 16px; background: var(--ink); color: #FFFFFF; border-radius: 16px 16px 4px 16px; }
.msg-a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 90%; padding: 14px 16px; background: var(--ground); border-radius: 16px 16px 16px 4px; }
.msg-a p { margin: 0; }
.msg-src { padding: 6px 10px; font-size: 13px; line-height: 1.35; color: var(--verde-dark); background: var(--tile); border: 1px solid var(--verde-line); border-radius: 8px; }
.msg-a.is-handoff { background: var(--sol-soft); }
.msg-a.is-handoff .msg-src { color: var(--sol-ink); border-color: var(--sol-line); }
/* The checked chip picks the answer; the first one shows by default */
.turn[data-q="0"] { display: flex; }
.chat:has(input[value="1"]:checked) .turn[data-q="0"], .chat:has(input[value="2"]:checked) .turn[data-q="0"] { display: none; }
.chat:has(input[value="1"]:checked) .turn[data-q="1"], .chat:has(input[value="2"]:checked) .turn[data-q="2"] { display: flex; }
.chat-try { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0 22px 22px; border: 0; }
.chat-try legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--tile); border: 1.5px solid var(--field); border-radius: var(--pill); transition: background .2s, border-color .2s, color .2s; }
.chip:hover span { border-color: var(--verde); }
.chip input:checked + span { color: #FFFFFF; background: var(--verde); border-color: var(--verde); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.chat-note { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------- Trust strip ---------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 32px 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.trust li { display: flex; flex-direction: column; gap: 6px; }
.trust strong { font-size: 17px; }
.trust span { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- Sections ---------- */
.block { padding-top: 120px; padding-bottom: 40px; }
.block-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.block-head h2 { margin: 0; max-width: 14em; font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.block-head p { margin: 0; max-width: 36em; font-size: 18px; line-height: 1.55; color: var(--muted); }
.block-head-split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.block-head-split p { max-width: 26em; }
.block-center .block-head { align-items: center; text-align: center; }
.block-center .block-head p { font-size: 19px; }

/* Video: a dark frame with two arches, until the video exists */
.video { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 1080px; aspect-ratio: 16 / 9; margin: 0 auto; background: var(--ink); color: #FFFFFF; border-radius: 28px; overflow: hidden; }
.video::before, .video::after { content: ""; position: absolute; border-radius: 50% 50% 0 0 / 260px 260px 0 0; }
.video::before { left: -11%; bottom: -36%; width: 48%; height: 102%; background: var(--verde); opacity: .55; }
.video::after { right: -7%; top: -26%; width: 33%; height: 76%; background: var(--sol); opacity: .25; }
.video > * { position: relative; z-index: 1; }
.video p { margin: 0; padding: 0 20px; font-size: 18px; font-weight: 700; text-align: center; }
.video-play { display: grid; place-items: center; width: 96px; height: 96px; background: var(--sol); border-radius: 50%; }
.video-play svg { width: 34px; height: 38px; margin-left: 6px; }
video.video { display: block; object-fit: cover; }

/* What it does: six cards, the last one dark */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--tile); border-radius: 20px; }
.feature h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.feature p { margin: 0; line-height: 1.55; color: var(--muted); }
.feature:last-child { background: var(--ink); color: #FFFFFF; }
.feature:last-child p { color: var(--on-ink); }

/* Getting started: the heading beside three numbered steps */
.steps-block { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.steps-block .block-head { margin-bottom: 0; }
.steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; padding: 28px; background: var(--tile); border-radius: 20px; }
.step-n { display: grid; place-items: center; width: 52px; height: 52px; font-family: var(--display); font-size: 22px; font-weight: 800; background: var(--sol); border-radius: 50%; }
.steps h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 1.2; }
.steps p { margin: 0; line-height: 1.5; color: var(--muted); }

/* ---------- Close: a green panel with the form on the right ---------- */
.closing { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: start; margin-top: 120px; padding: clamp(28px, 5vw, 72px); background: var(--verde); color: #FFFFFF; border-radius: 32px; }
.closing :focus-visible { outline-color: var(--sol); }
.closing-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.closing h2 { margin: 0; font-size: clamp(38px, 3.9vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
.closing-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-verde); }
.closing-mails { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.closing-mail { font-size: 18px; font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; }
.closing-mail:hover { color: var(--sol); }

/* Contact form: white card, labels above fields */
.form { --gap: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 36px; background: var(--tile); color: var(--ink); border-radius: 22px; }
.form :focus-visible { outline-color: var(--verde); }
.form > .form-legal, .form > .btn, .field-wide { grid-column: 1 / -1; }
/* The bot check, the no-JS note, the consent and the privacy notice flow as
   blocks rather than grid rows. Turnstile's widget stays empty unless
   Cloudflare needs the visitor to click, and an empty block's margin
   collapses into the next one's, so it leaves no gap until it shows. */
.form-legal { margin-top: calc(-1 * var(--gap)); }
.form-legal > * { margin-top: var(--gap); }
.form-legal > noscript { display: block; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 700; }
.opt { font-weight: 400; color: var(--muted); }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--tile); border: 1.5px solid var(--field); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { resize: vertical; min-height: 112px; line-height: 1.5; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-line); }
.form input:user-invalid, .form textarea:user-invalid { border-color: var(--error); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--verde); }
.check input:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.privacy { font-size: 13px; color: var(--muted); }
.privacy summary { width: fit-content; font-weight: 700; color: var(--verde); cursor: pointer; }
.privacy dl { display: grid; gap: 6px; margin: 10px 0 0; }
.privacy dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.privacy dt { font-weight: 700; color: var(--ink); }
.privacy dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.form .btn { min-height: 56px; }
/* Shown only without JS, when Turnstile can't run and the form can't be sent */
.form-note { margin: 0; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--verde-soft); border-radius: 10px; overflow-wrap: anywhere; }
/* Honeypot: off screen for people, still in the form for bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Thank-you page */
.thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 88px; padding-bottom: 72px; }
.thanks > * { max-width: 900px; }
.thanks-mark { width: 60px; height: 64px; }
.thanks h1 { margin: 0; font-size: clamp(40px, 5vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }

/* ---------- Footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; color: var(--muted); }
.footer-by { display: flex; gap: 10px; align-items: center; }
.footer-by strong { color: var(--ink); }
.footer-mark { flex: none; display: block; width: 18px; height: 19px; }
.site-footer .link { font-weight: 400; }

/* ---------- Motion ---------- */
.anim-fade { animation: fade .8s var(--ease) both; }
/* Lift without fading: headlines stay painted from the first frame, since
   Chrome never counts an element that starts at opacity 0 as its LCP. */
.anim-lift { animation: lift .8s var(--ease) both; }
@keyframes lift { from { transform: translateY(8px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

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

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .intro, .steps-block, .closing { grid-template-columns: minmax(0, 1fr); }
  .intro { padding-top: 40px; }
  .window { max-width: 640px; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .site-header { padding-top: 16px; padding-bottom: 16px; }
  .nav { gap: 12px; }
  .nav-link { display: none; }
  .intro { gap: 40px; padding-bottom: 64px; }
  .intro-text { gap: 22px; }
  .window { padding: 64px 16px 28px 0; }
  .window::before { left: 16px; }
  .chat-head, .chat-log { padding-left: 16px; padding-right: 16px; }
  .chat-try { padding: 0 16px 18px; }
  .chat-log { min-height: 0; }
  .msg-q, .msg-a { max-width: 100%; }
  .trust, .features, .form { grid-template-columns: minmax(0, 1fr); }
  .block { padding-top: 72px; padding-bottom: 16px; }
  .block-head { margin-bottom: 28px; }
  .video { aspect-ratio: 4 / 3; border-radius: 20px; }
  .video-play { width: 72px; height: 72px; }
  .video-play svg { width: 26px; height: 29px; margin-left: 4px; }
  .feature, .steps li { padding: 22px; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .step-n { width: 44px; height: 44px; font-size: 19px; }
  .closing { margin-top: 72px; border-radius: 24px; }
  .form { padding: 22px 18px; }
  .privacy dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .thanks { padding-top: 48px; padding-bottom: 48px; }
  .site-footer { padding-top: 28px; padding-bottom: 28px; }
}

@media (max-width: 480px) {
  .closing { margin-left: calc(-1 * var(--gutter) + 8px); margin-right: calc(-1 * var(--gutter) + 8px); padding: 28px 16px; }
}