@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');
:root{--paper:#f6eee2;--ink:#231718;--wine:#381821;--accent:#8b3548;--rule:#d1bcaf}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font:1rem/1.65 "Instrument Sans",system-ui,sans-serif}
a{color:inherit;text-underline-offset:.24em}
a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip{position:absolute;left:1rem;top:-8rem;z-index:5;background:var(--paper);color:var(--ink);padding:.6rem}
.skip:focus{top:1rem}
.wrap{width:min(1200px,calc(100% - 5rem));margin-inline:auto}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.15rem}
header{background:#241218;color:var(--paper)}
.brand{font-size:1.18rem;font-weight:700;text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:clamp(.75rem,3vw,2rem);font-size:.92rem}
nav a{text-decoration:none}
nav a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-family:Newsreader,Georgia,serif;line-height:1;font-weight:500}
h1{font-size:clamp(3.6rem,9vw,9rem);letter-spacing:-.065em}
h2{font-size:clamp(3rem,7vw,6.7rem);letter-spacing:-.055em}
h3{font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.025em}
.hero,.scenic,.contact{position:relative;isolation:isolate;overflow:hidden;color:var(--paper);background:var(--wine)}
.hero-art,.scenic-art,.contact-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-art{background:linear-gradient(270deg,#2a141b 7%,#2a141bfa 26%,#2a141b9c 43%,#2a141b00 61%),linear-gradient(0deg,#2a141b 0%,transparent 35%),url("images/gabriel-microfono.png") clamp(-9rem, -9vw, -4.75rem) 30% / auto 114% no-repeat}
.hero .wrap{min-height:clamp(34rem,75vh,53rem);display:grid;align-content:center;justify-items:end;text-align:right;padding-block:5rem}
.place,.meta{font-size:.78rem;letter-spacing:.13em;font-weight:700;text-transform:uppercase}
.place{color:#e8b8aa}
.intro{max-width:30ch;font-size:clamp(1.05rem,2vw,1.35rem)}
.button{display:inline-flex;width:max-content;gap:1rem;border:1px solid #e8b8aa;padding:.65rem 1rem;text-decoration:none}
.button:hover{background:var(--paper);color:var(--wine)}
.split{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(2rem,7vw,7rem);padding-block:clamp(4rem,9vw,8rem)}
.split p:first-child{margin-top:0}
.trajectory{position:relative;isolation:isolate;overflow:hidden}
.trajectory::before{content:"";position:absolute;z-index:-1;inset:0 48% 0 0;opacity:.24;background:linear-gradient(180deg,var(--paper) 4%,transparent 45%,var(--paper)),linear-gradient(270deg,var(--paper),transparent 75%),url("images/mural-escalinata.png") center bottom / cover}
.trajectory .timeline{padding:0;list-style:none;margin:1.8rem 0 0}
.timeline li{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;border-top:1px solid var(--rule);padding-block:1.25rem}
.timeline time,.timeline a{color:#70283b;font-size:.88rem;font-weight:600}
.timeline p{margin:.5rem 0}
.scenic-art{background:linear-gradient(90deg,#321821 8%,#321821ed 33%,#32182120 100%),linear-gradient(0deg,#321821,transparent 65%),url("images/gabriel-centro.png") right 12% top 23% / auto 135% no-repeat}
.scenic .split{min-height:36rem;align-content:end;grid-template-columns:minmax(0,36rem);gap:2rem}
.scenic article{max-width:36rem;border-top:1px solid #cda299;padding-top:1.1rem;background:#321821b3;padding-inline:1rem;padding-bottom:1rem}
.scenic article .meta{color:#efbfb1}
.contact{background:#23151a}
.contact-art{background:linear-gradient(90deg,#23151a 21%,#23151af0 47%,#23151a40 100%),linear-gradient(0deg,#23151a 2%,transparent 75%),url("images/gabriel-escritorio.png") right 8% center / auto 140% no-repeat}
.contact .split{min-height:23rem;align-items:center}
.contact .muted{color:#ead1c7}
footer{font-size:.9rem}
@media(max-width:760px){
.wrap{width:calc(100% - 2.5rem)}
header .bar{align-items:flex-start;flex-direction:column}
.hero .wrap{min-height:39rem;align-content:end;justify-items:start;text-align:left;padding-block:3rem}
.hero-art{background:linear-gradient(0deg,#2a141b 8%,#2a141beb 29%,transparent 67%),url("images/gabriel-microfono.png") 42% top / auto 76% no-repeat}
.hero h1 br{display:none}
.split,.scenic .split{grid-template-columns:1fr}
.scenic-art{background-position:center,center,right 12% top}
.scenic .split{min-height:38rem;padding-top:16rem}
.contact-art{opacity:.42}
}
@media(max-width:420px){.timeline li{grid-template-columns:1fr;gap:.35rem}}


.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.15;background:linear-gradient(90deg,transparent 12%,#23151a 48%),url("images/mural-cupula.png") left 38% / min(48vw,38rem) auto no-repeat}
@media(max-width:760px){.contact::before{background-size:auto,74vw auto}}


.contact-email{display:inline-block;max-width:100%;overflow-wrap:anywhere;color:#f9dfd5;font-weight:700;font-size:clamp(1.04rem,2vw,1.28rem)}

.inbox{border-top:1px solid var(--rule)}
.inbox h2{font-size:clamp(2.85rem,6vw,5.3rem)}
.inbox form{display:grid;gap:1rem}
.inbox label{display:grid;gap:.35rem;font-weight:600}
.inbox input,.inbox textarea{width:100%;min-width:0;border:1px solid var(--rule);background:#fffaf5;color:var(--ink);padding:.65rem .8rem;font:inherit}
.inbox textarea{resize:vertical}
.inbox .button{background:var(--wine);color:var(--paper);border-color:var(--wine);font:inherit;cursor:pointer;max-width:100%}
.inbox .button:disabled{opacity:.65}
.inbox-note,#buzon-estado{margin:0}
.inbox-note{font-size:.9rem}

.proposal{background:#ead9cc}
.proposal-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:clamp(2.25rem,5vw,4rem)}
.proposal h2{font-size:clamp(2.2rem,4.4vw,4rem)}
.proposal p{max-width:58ch;margin:.8rem 0 0}
.proposal .button{flex-shrink:0;background:var(--wine);border-color:var(--wine);color:var(--paper)}
.proposal .button:hover{background:var(--accent);border-color:var(--accent)}
@media(max-width:760px){.proposal-inner{align-items:flex-start;flex-direction:column}}

.trajectory .source-note{color:#674c44;font-size:.86rem;margin-top:.65rem}
