/* SelvaCoa — "Guatapé": whitewashed walls, painted zócalos, cobalt, sun and terracotta.
   One stylesheet, no framework. Tokens, base, layout, components. */
/* Lexend, variable weight 400-700, served from this site (no third-party font requests).
   SIL Open Font License 1.1: /fonts/OFL.txt */
@font-face{font-family:"Lexend";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/lexend-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lexend";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/lexend-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{
  --cal:#ffffff;          /* lime-washed wall: true white, not cream */
  --cal-2:#e8effa;        /* wall painted pale blue: alternate sections */
  --cobalto:#1f4fa0;      /* doors and window frames: primary actions, header */
  --cobalto-osc:#14346b;  /* cobalt in shade: dark sections */
  --sol:#f2c230;          /* sun yellow: zócalo bands, highlights */
  --teja:#c2532b;         /* roof tile: labels, numbers */
  --verde:#164a2e;        /* the logo green: a painted colour of its own */
  --verde-osc:#0e2f1d;    /* logo green in shade: footer */
  --verde-claro:#dceee2;  /* wall painted pale green */
  --tinta:#1c1d24;        /* ink: body text */
  --gris:#4f5666;         /* secondary text */
  --linea:#d3dbea;        /* hairlines */
  --slab:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(1rem,4vw,2.5rem);
  --max:72rem;
  --radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:1.02rem/1.65 var(--sans);color:var(--tinta);background:var(--cal)}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--cobalto);text-underline-offset:.18em}
a:hover{color:var(--teja)}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px}
h1,h2,h3{font-family:var(--slab);font-weight:600;line-height:1.08;color:var(--verde);margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,8.5vw,6.2rem)}
h2{font-size:clamp(2rem,5vw,3.4rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.55rem)}
p{margin:0 0 1em;max-width:65ch}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,10vw,7.5rem)}
.label{display:inline-block;font:800 .8rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teja);margin-bottom:1rem}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:#333a48}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:#fff;padding:.5rem 1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* painted bands: section grounds */
.band-dark{background:var(--cobalto-osc);color:#eef1f8}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .label{color:var(--sol)}
.band-dark p,.band-dark .lead{color:#d5ddef}
.band-dark figcaption{color:#b8c4e0}
.band-shade{background:var(--cal-2)}
.band-green{background:var(--verde);color:#eef6f0}
.band-green h2,.band-green h3{color:#fff}
.band-green .label{color:var(--sol)}
.band-green p,.band-green .lead{color:#d6eadc}
.band-green figcaption{color:#bcd8c4}
.band-green .btn-primary{background:var(--sol);color:var(--tinta);box-shadow:0 4px 0 #b88e10}
.band-teja{background:var(--teja);color:#fff}
.band-teja h2{color:#fff}
.band-teja .label{color:var(--sol)}
.band-teja p,.band-teja .lead{color:#fde9df}

/* buttons: cobalt on light walls, sun on dark ones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:.85em 1.6em;border-radius:999px;
  font:800 1rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.btn-primary{background:var(--cobalto);color:#fff;box-shadow:0 4px 0 var(--cobalto-osc)}
.btn-primary:hover{background:#2a5fb8;color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 var(--cobalto-osc)}
.band-dark .btn-primary,.band-teja .btn-primary,.hero .btn-primary,.mobile-cta .btn-primary,.site-header:not(.on-light) .btn-primary{background:var(--sol);color:var(--tinta);box-shadow:0 4px 0 #b88e10}
.band-dark .btn-primary:hover,.band-teja .btn-primary:hover,.hero .btn-primary:hover,.site-header:not(.on-light) .btn-primary:hover{background:#ffd34d;color:var(--tinta)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{color:inherit;background:rgba(255,255,255,.1)}
.link-arrow{font-weight:700;text-decoration:none;border-bottom:2px solid var(--sol)}

/* zócalo: the painted relief band along Guatapé's walls */
.zocalo{height:64px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64'%3E%3Crect width='192' height='64' fill='%231f4fa0'/%3E%3Crect y='0' width='192' height='7' fill='%23f2c230'/%3E%3Crect y='57' width='192' height='7' fill='%23f2c230'/%3E%3Crect x='8' y='14' width='80' height='36' rx='3' fill='%23c2532b'/%3E%3Crect x='104' y='14' width='80' height='36' rx='3' fill='%23ffffff'/%3E%3Cpath d='M48 20c-7 4-10 8-10 12s3 8 10 12c7-4 10-8 10-12s-3-8-10-12zM48 20v24' fill='none' stroke='%23f2c230' stroke-width='2.5'/%3E%3Cpath d='M118 44l13-18 8 10 7-7 12 15z' fill='%23164a2e'/%3E%3Ccircle cx='164' cy='24' r='5' fill='%23f2c230'/%3E%3C/svg%3E") repeat-x center/auto 64px}
.zocalo.thin{height:20px;background:repeating-linear-gradient(90deg,var(--cobalto) 0 48px,var(--sol) 48px 64px,var(--verde) 64px 112px,var(--sol) 112px 128px,var(--teja) 128px 176px,var(--sol) 176px 192px)}

/* header */
.site-header{position:absolute;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:124px;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--verde);font:800 2.125rem/1 var(--sans);letter-spacing:-.01em;background:#fff;padding:.55rem .9rem;border-radius:14px;box-shadow:0 0 0 3px var(--verde)}
.brand:hover{color:var(--verde)}
.brand img{width:auto;height:92px}
.site-header.on-light{position:relative;background:var(--cal);border-bottom:6px solid var(--verde)}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
.nav a{color:#fff;text-decoration:none;font-weight:700;font-size:.95rem}
.on-light .nav a{color:var(--tinta)}
.nav a:hover{color:var(--sol)}
.on-light .nav a:hover{color:var(--teja)}
.nav .btn{min-height:44px;padding:.7em 1.2em}
.on-light .nav .btn{color:#fff}
@media (max-width:1000px){.nav a:not(.btn):not(.nav-contact){display:none}}
@media (max-width:760px){.nav{gap:.9rem}.brand img{height:72px}}
@media (max-width:400px){.brand{padding:.4rem .6rem}.brand img{height:62px}.nav .btn{padding:.6em .9em;font-size:.9rem}}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;background:var(--cobalto-osc);overflow:hidden}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.hero-video.playing{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(14,30,64,.72) 0%,rgba(14,30,64,.3) 55%,rgba(14,30,64,0) 85%),
  linear-gradient(180deg,rgba(14,30,64,.5) 0%,rgba(14,30,64,0) 25%,rgba(14,30,64,.25) 55%,rgba(14,30,64,.9) 100%)}
.hero-content{position:relative;z-index:1;padding-block:8rem clamp(3rem,8vh,6rem)}
.hero h1{color:#fff;max-width:11ch;margin-bottom:.35em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero h1 em{font-style:normal;color:var(--sol)}
.hero .label{color:var(--sol)}
.hero p{font-size:clamp(1.1rem,2vw,1.35rem);max-width:36ch;color:#eef1f8}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 1.5rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.hero-facts li{font:800 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);background:#fff;padding:.55rem .8rem;border-radius:999px}
@supports (animation-timeline:view()){
  .hero picture img{animation:drift linear both;animation-timeline:scroll();animation-range:0 100vh}
  @keyframes drift{to{transform:scale(1.08) translateY(4%)}}
}

/* proof strip: numbers painted on a yellow band */
.proof{background:var(--sol);color:var(--tinta)}
.proof ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:2rem;margin:0;padding:2.75rem 0;list-style:none}
.proof strong{display:block;font:600 clamp(2.4rem,5vw,3.4rem)/1 var(--slab);color:var(--cobalto-osc);margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.proof span{font:800 .8rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#4a3a08}

/* layout */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}.split.flip>:first-child{order:2}}
.frame{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--cal-2)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame.wide{aspect-ratio:3/2}
/* colonial arch: portrait photos framed like a painted doorway */
.frame.tall{aspect-ratio:4/5;border-radius:999px 999px var(--radius) var(--radius);border:8px solid var(--cobalto);box-shadow:0 0 0 6px var(--sol)}
figcaption{font:700 .8rem/1.4 var(--sans);letter-spacing:.04em;color:var(--gris);margin-top:.9rem}
.databar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0;padding:0;list-style:none}
.databar li{font:800 .78rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:.6rem .85rem;border-radius:999px;background:var(--cal-2);color:var(--cobalto-osc);border:2px solid var(--cobalto)}
.notes{font-family:var(--slab);font-weight:500;font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--teja);line-height:1.25;margin:1rem 0 1.5rem}
.price-line{font:800 1.1rem/1.5 var(--sans);margin-bottom:1.5rem;color:var(--cobalto-osc)}
.price-line small{display:block;font:400 .92rem/1.5 var(--sans);color:var(--gris)}

/* scroll story: five painted doorways */
.story-intro{padding-top:clamp(4rem,10vw,7rem)}
.step{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem);border-top:2px dashed rgba(242,194,48,.35)}
@media (min-width:860px){.step{grid-template-columns:1.1fr .9fr}.step:nth-of-type(even)>.frame{order:2}}
.step .frame{aspect-ratio:4/3;background:#0d2550;border:8px solid var(--sol)}
.step:nth-of-type(3n+2) .frame{border-color:var(--teja)}
.step:nth-of-type(3n) .frame{border-color:#ffffff}
.step-word{display:block;font:600 clamp(3.2rem,10vw,7rem)/.9 var(--slab);color:var(--sol);margin-bottom:.15em}
.step-sense{font:800 .82rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1.25rem;display:block}
.step p{font-size:1.08rem}
.reveal{opacity:1}
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  @keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}

/* bento: tiles painted like doors along a street */
.bento{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
@media (min-width:900px){.bento{grid-template-columns:repeat(3,1fr)}.bento .big{grid-column:span 2;grid-row:span 2}}
.tile{background:#fff;box-shadow:0 0 0 2px var(--linea) inset;border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:.5rem;border-top:10px solid var(--teja)}
.tile:nth-child(3){border-top-color:var(--sol)}
.tile:nth-child(4){border-top-color:var(--verde)}
.tile:nth-child(5){border-top-color:var(--cobalto)}
.tile p{margin:0;color:var(--gris)}
.tile.big{background:var(--cobalto);color:#fff;justify-content:flex-end;min-height:22rem;border-top:0;border-bottom:14px solid var(--sol)}
.tile.big h3{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.tile.big p{color:#dbe4f5;font-size:1.08rem}
.tile .label{margin-bottom:.25rem}
.tile.big .label{color:var(--sol)}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:.98rem}
.spec th,.spec td{text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--linea);vertical-align:top}
.spec th{font:700 .9rem/1.4 var(--sans);color:var(--gris);width:52%}
.spec td{font:800 1rem/1.4 var(--sans);color:var(--cobalto-osc);font-variant-numeric:tabular-nums}
.band-dark .spec th{color:#b8c4e0;border-color:rgba(255,255,255,.15)}
.band-dark .spec td{color:#fff;border-color:rgba(255,255,255,.15)}
.table-scroll{overflow-x:auto}
.source{font-size:.86rem;color:var(--gris);margin-top:1rem}
.band-dark .source{color:#b8c4e0}

/* flavor fingerprint */
.flavor{display:grid;gap:.7rem;margin:1.5rem 0;padding:0;list-style:none}
.flavor li{display:grid;grid-template-columns:8.5rem 1fr 2rem;align-items:center;gap:.75rem;font-size:.95rem;font-weight:600}
.flavor .bar{height:12px;background:var(--cal-2);border-radius:6px;overflow:hidden}
.flavor .bar i{display:block;height:100%;background:var(--teja);border-radius:6px;width:calc(var(--v)*20%)}
.flavor li:nth-child(even) .bar i{background:var(--cobalto)}
.flavor b{font:800 .9rem var(--sans);color:var(--cobalto-osc)}
.flavor small{grid-column:2/4;margin-top:-.4rem;color:var(--gris);font-size:.84rem;font-weight:400}

/* offers */
.offers{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:2.5rem}
.offer{border:2px solid var(--linea);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.offer:hover,.offer:focus-within{border-color:var(--cobalto);box-shadow:8px 8px 0 var(--sol);transform:translate(-2px,-2px)}
.offer.featured{border:3px solid var(--cobalto);box-shadow:8px 8px 0 var(--sol)}
.offers:hover .offer.featured:not(:hover){box-shadow:none;border-color:var(--linea);border-width:2px}
.offer h3{margin-bottom:.2em}
.offer .amount{font:600 2.6rem/1 var(--slab);color:var(--cobalto);margin:.6rem 0 .3rem}
.offer .unit{font:800 .78rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.offer ul{margin:1.25rem 0 1.5rem;padding-left:1.1rem;color:#333a48;font-size:.96rem}
.offer .btn{margin-top:auto}
.offer .btn-ghost{color:var(--cobalto)}
.steps3{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));counter-reset:s;margin:2rem 0 0;padding:0;list-style:none}
.steps3 li{counter-increment:s;padding-top:.25rem}
.steps3 li::before{content:counter(s);display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--teja);color:#fff;font:600 1.4rem var(--slab);margin-bottom:.75rem}
.steps3 li:nth-child(2)::before{background:var(--cobalto)}
.steps3 li:nth-child(3)::before{background:var(--verde)}
.steps3 strong{display:block;font:600 1.2rem/1.3 var(--slab);color:var(--verde);margin-bottom:.3rem}

/* people + next origins */
.people{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.people .frame{aspect-ratio:4/5;border-radius:999px 999px var(--radius) var(--radius);border:8px solid var(--sol)}
.people figure:nth-child(2) .frame{border-color:var(--teja)}
.people figure:nth-child(3) .frame{border-color:#ffffff}
.next{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:2rem}
.next a{display:block;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;color:#fff;text-decoration:none;background:#0d2550;border-bottom:10px solid var(--sol)}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .3s,transform .6s}
.next a:hover img{opacity:.92;transform:scale(1.04)}
.next span{position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem}
.next strong{display:block;font:600 1.7rem/1.1 var(--slab)}
.next em{display:inline-block;font:800 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;font-style:normal;background:var(--teja);padding:.35rem .6rem;border-radius:999px;margin-bottom:.5rem}

/* faq */
.faq details{border-top:2px solid var(--linea);padding:1.1rem 0}
.faq details:last-child{border-bottom:2px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;font:600 1.15rem/1.35 var(--slab);color:var(--verde);display:block;position:relative;padding-right:2.25rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;color:var(--teja);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8rem 0 0}

/* closing cta */
.closing{text-align:center}
.closing p{margin-inline:auto}

/* footer */
.site-footer{background:var(--verde-osc);color:#c9dccf;border-top:10px solid var(--sol);padding-block:3.5rem calc(3.5rem + env(safe-area-inset-bottom,0px));font-size:.94rem}
.site-footer .wrap{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));align-items:start}
.site-footer a{color:#fff}
.site-footer strong{color:#fff}
.site-footer img{height:114px;width:auto}
.stamp{display:inline-block;font:600 1rem/1.2 var(--slab);color:var(--sol);border:3px solid var(--sol);padding:.5rem .9rem;border-radius:4px;transform:rotate(-3deg)}

/* sticky mobile cta */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--verde-osc);border-top:4px solid var(--sol);display:none}
.mobile-cta .btn{width:100%}
@media (max-width:760px){.mobile-cta{display:block}body{padding-bottom:4.75rem}}

/* forms */
.form{display:grid;gap:1.1rem;max-width:40rem}
.field{display:grid;gap:.35rem}
.field label,.field legend{font-weight:800;font-size:.96rem;color:var(--cobalto-osc)}
.field small{color:var(--gris);font-size:.86rem;font-weight:400}
input,select,textarea{font:inherit;padding:.8rem .9rem;border:2px solid #c3cde0;border-radius:var(--radius);background:#fff;color:var(--tinta);width:100%;min-height:50px}
textarea{min-height:7rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(31,79,160,.25);border-color:var(--cobalto)}
fieldset{border:0;padding:0;margin:0}
.choices{display:grid;gap:.6rem}
.choice{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:2px solid #d3dbea;border-radius:var(--radius);background:#fff;cursor:pointer}
.choice input{width:1.2rem;min-height:auto;margin-top:.2rem;accent-color:var(--cobalto)}
.choice:has(input:checked){border-color:var(--cobalto);box-shadow:5px 5px 0 var(--sol)}
.choice strong{display:block;color:var(--cobalto-osc)}
.choice span{font-size:.92rem;color:var(--gris)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem}
.check input{width:1.2rem;min-height:auto;margin-top:.25rem;accent-color:var(--cobalto)}
.hp{position:absolute;left:-9999px}
[hidden]{display:none!important}
.form-nav{display:flex;gap:.75rem;flex-wrap:wrap}
.form-nav .btn-ghost{color:var(--cobalto)}
.progress{font:800 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--teja)}
.form-error{color:#9b1c1c;font-weight:700}
.rules{background:var(--cal-2);border-radius:var(--radius);padding:1.5rem;font-size:.94rem;border-left:8px solid var(--sol)}
.rules ul{margin:.5rem 0 0;padding-left:1.1rem}
.page-head{padding-block:3.5rem 2rem}
.grid-2{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.grid-2{grid-template-columns:1.3fr .7fr}}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.gallery .frame{aspect-ratio:1;border:6px solid #fff;box-shadow:0 0 0 2px var(--linea)}
.timeline{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem}
.timeline li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;border-top:2px solid var(--linea);padding-top:1rem}
.timeline b{font:800 .85rem/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--teja)}

/* journal articles */
.article-head{padding-block:3.5rem 2rem;max-width:48rem;margin-inline:auto}
.article-head h1{font-size:clamp(2.2rem,5.5vw,3.8rem)}
.article-meta{font:700 .82rem/1.4 var(--sans);letter-spacing:.04em;color:var(--gris)}
.article-hero{max-width:64rem;margin:0 auto 3rem;padding-inline:var(--gutter)}
.article-hero .frame{aspect-ratio:16/9;border-bottom:12px solid var(--sol)}
.prose{max-width:44rem;margin-inline:auto;padding-inline:var(--gutter);font-size:1.08rem;line-height:1.75}
.prose h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-top:2.6em}
.prose h3{margin-top:2em}
.prose p,.prose li{max-width:none}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--teja)}
.prose blockquote{margin:2rem 0;padding:1rem 1.5rem;border-left:6px solid var(--sol);font:600 1.25rem/1.45 var(--slab);color:var(--verde)}
.prose figure{margin:2.5rem 0}
.prose .table-scroll{margin:1.5rem 0}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.prose th,.prose td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--linea);vertical-align:top}
.prose thead th{font:800 .8rem/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--cobalto)}
.prose tbody tr:nth-child(even){background:#f4f7fc}
.keypoints{background:var(--verde-claro);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:2rem 0;border-left:8px solid var(--teja)}
.keypoints strong{font:800 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teja)}
.keypoints ul{margin:.6rem 0 0}
.callout{background:var(--cobalto);color:#fff;border-radius:var(--radius);padding:1.75rem;margin:3rem 0;border-bottom:12px solid var(--sol)}
.callout h2,.callout h3{color:#fff;margin-top:0}
.callout p{color:#dbe4f5}
.callout .btn-primary{background:var(--sol);color:var(--tinta);box-shadow:0 4px 0 #b88e10}
.sources{font-size:.9rem;color:var(--gris);border-top:2px solid var(--linea);margin-top:3rem;padding-top:1.5rem}
.sources ol{padding-left:1.25rem}
.related{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.card{display:block;text-decoration:none;color:inherit;background:var(--cal-2);border-radius:var(--radius);overflow:hidden;transition:transform .2s;border-bottom:8px solid var(--teja)}
.related .card:nth-child(4n+2){border-bottom-color:var(--sol)}
.related .card:nth-child(4n+3){border-bottom-color:var(--cobalto)}
.related .card:nth-child(4n){border-bottom-color:var(--verde)}
.card:hover{transform:translateY(-3px);color:inherit}
.card .frame{aspect-ratio:3/2;border-radius:0}
.card div.body{padding:1.25rem}
.card h3{font-size:1.2rem;margin-bottom:.4rem}
.card p{font-size:.94rem;color:var(--gris);margin:0}
.breadcrumb{font:700 .82rem var(--sans);letter-spacing:.03em;color:var(--gris);margin-bottom:1.5rem}
.breadcrumb a{color:inherit}
.hero .breadcrumb{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero .breadcrumb a{color:#fff}

.lead.full{max-width:none;text-align:justify;hyphens:auto}
.social{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#fff;color:var(--verde);transition:transform .2s,background .2s}
.site-footer .social,.rules .social{color:var(--verde)}
.social:hover,.site-footer .social:hover,.rules .social:hover{transform:translateY(-2px);background:var(--sol);color:var(--verde)}
.social svg{width:26px;height:26px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem}
.field-note{margin:0;color:var(--gris);font-size:.95rem}
.field .field-msg{color:var(--teja);font-weight:700}
.field-msg:empty{display:none}
input.is-invalid,select.is-invalid{border-color:var(--teja)}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;pointer-events:none}
.freight{margin-top:1.5rem;padding:1.25rem 1.5rem;border:2px dashed var(--linea);border-radius:var(--radius);background:var(--cal-2);display:grid;gap:1rem}
.freight h3{margin:0 0 .25rem}.freight p{margin:0}
.freight-form{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:1rem}
.freight-out{font-size:1.1rem;color:var(--tinta)}.freight-out:empty{display:none}
.freight-out strong{font:600 1.6rem var(--slab);color:var(--cobalto)}
.freight-note{color:var(--gris);font-size:.9rem}

/* The "o" of SelvaCoa drawn like the logo: a filled o with the cacao pod cut out.
   The real letter stays in the page (pushed out of view) for search, copy and screen readers.
   Box = Lexend's "o" advance (.632em); the glyph spans .03em–.60em wide, -.01em–.54em high. */
.pod-o{display:inline-block;width:.632em;height:.55em;vertical-align:-.01em;overflow:hidden;text-indent:100%;white-space:nowrap;line-height:0;
  background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M50 0a50 50 0 1 0 0.01 0zM50 9l2.2 5.5C63 25 69.5 39 69.5 52 69.5 68 61 80 50 89 39 80 30.5 68 30.5 52 30.5 39 37 25 47.8 14.5z'/%3E%3Cpath d='M44 21C37.5 38 37 64 46 81M56 21C62.5 38 63 64 54 81' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") .03em 0/.57em .55em no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M50 0a50 50 0 1 0 0.01 0zM50 9l2.2 5.5C63 25 69.5 39 69.5 52 69.5 68 61 80 50 89 39 80 30.5 68 30.5 52 30.5 39 37 25 47.8 14.5z'/%3E%3Cpath d='M44 21C37.5 38 37 64 46 81M56 21C62.5 38 63 64 54 81' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") .03em 0/.57em .55em no-repeat}
.offers-more{margin-top:2rem;padding:1.25rem 1.5rem;border:2px dashed var(--linea);border-radius:var(--radius);background:var(--cal-2);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.offers-more p{margin:0;max-width:52ch}
.offers-more-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
/* Where you are: the current page stays in the menu, marked instead of hidden. */
.nav a[aria-current="page"]:not(.btn){color:var(--sol);box-shadow:inset 0 -3px 0 var(--sol);padding-bottom:.2em}
.on-light .nav a[aria-current="page"]:not(.btn){color:var(--verde);box-shadow:inset 0 -3px 0 var(--sol)}
.nav .btn[aria-current="page"]{box-shadow:0 0 0 3px var(--sol)}
/* Phone and tablet menu. The button only appears when main.js runs (it adds .has-menu);
   without it the header keeps Contact and Product Request, as before. */
.site-header .wrap{position:relative}
.nav-toggle{display:none;align-items:center;gap:.55rem;min-height:44px;padding:.55em 1.05em;border:2px solid currentColor;border-radius:999px;background:transparent;color:#fff;font:700 .95rem/1 var(--sans);cursor:pointer}
.on-light .nav-toggle{color:var(--tinta)}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}.nav-toggle-bars::after{top:6px}
.nav-open .nav-toggle-bars{background:transparent}
.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1000px){
  .has-menu .nav-toggle{display:inline-flex;margin-left:auto}
  .has-menu .nav .nav-contact{display:none}
  .has-menu.nav-open .nav{position:absolute;left:0;right:0;top:calc(100% - .75rem);flex-direction:column;align-items:stretch;gap:0;padding:.5rem;background:#fff;border-radius:var(--radius);border-top:6px solid var(--sol);box-shadow:0 18px 40px rgba(14,47,29,.22)}
  .has-menu.nav-open .nav a:not(.btn){display:block;color:var(--tinta);padding:.9rem 1rem;border-bottom:1px solid var(--linea);font-size:1.05rem}
  .has-menu.nav-open .nav a:not(.btn):hover{color:var(--teja)}
  .has-menu.nav-open .nav a[aria-current="page"]:not(.btn){color:var(--verde);box-shadow:inset 4px 0 0 var(--sol)}
  .has-menu.nav-open .nav .btn{margin-top:.75rem;justify-content:center}
}
@media (max-width:400px){.nav-toggle-label{display:none}.nav-toggle{padding:.55em .8em}}
/* In memory: a photo and the family's own words. */
.tribute{display:grid;gap:1.5rem 2.5rem;align-items:center;margin-top:3rem;padding:clamp(1.25rem,4vw,2.5rem);background:var(--verde-claro);border-radius:var(--radius);border-left:8px solid var(--verde)}
@media (min-width:760px){.tribute{grid-template-columns:minmax(0,17rem) 1fr}}
.tribute-photo{margin:0}
.tribute-photo .frame{aspect-ratio:3/4;border-radius:999px 999px var(--radius) var(--radius);border:6px solid #fff;box-shadow:0 0 0 3px var(--verde)}
.tribute-quote{margin:0}
.tribute-quote p[lang="es"]{font:600 clamp(1.15rem,2.2vw,1.45rem)/1.45 var(--slab);color:var(--verde);margin:0 0 1rem}
.tribute-quote .tribute-en{color:var(--gris);font-style:italic;margin:0 0 1rem}
.tribute-quote footer{font:800 .8rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teja)}