:root{
  --bg:#11161A;
  --surface:#1A2126;
  --surface-2:#212A30;
  --surface-3:#293338;
  --ink:#EAEDE8;
  --muted:#93A19E;
  --muted-2:#6D7A78;
  --line:#2B3639;
  --line-soft:#212A2D;
  --cold:#5D8FB6;
  --cold-soft:#33495A;
  --comfort:#7FA06B;
  --comfort-soft:#33422F;
  --hot:#C1693B;
  --hot-soft:#4A3327;
  --accent:#D8B25C;
  --radius:4px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost', system-ui, sans-serif;
  line-height:1.55;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:500; margin:0; letter-spacing:0.01em; }
.mono{ font-family:'Jost', system-ui, sans-serif; }
button, select, input{ font-family:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
img,svg{ max-width:100%; }

.wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

/* ---------- nav ---------- */

header.site-nav{
  position:sticky; top:0; z-index:20;
  background:rgba(17,22,26,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1040px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ width:28px; height:28px; flex:none; }
.brand .brand-text{ line-height:1.15; }
.brand .brand-tag{ font-size:0.7rem; color:var(--muted); }

.brand-name{ font-family:'Jost', system-ui, sans-serif; font-weight:700; }
.brand .brand-name{ font-size:1.08rem; }
.brand-tag{ font-family:'Cormorant Garamond', Georgia, serif; font-style:normal; color:var(--muted); }

nav.tabs{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
nav.tabs a{
  background:none; border:1px solid transparent; color:var(--muted); white-space:nowrap;
  padding:7px 12px; border-radius:20px; font-size:0.85rem; cursor:pointer;
}
nav.tabs a.is-active{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
nav.tabs a:hover:not(.is-active){ color:var(--ink); }

nav.tabs .ig-link{ display:inline-flex; align-items:center; gap:8px; margin-left:6px; padding:7px; }
.ig-link svg{ width:19px; height:19px; flex:none; }
.ig-link .ig-text{ display:none; }

.menu-btn{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:40px; height:36px; padding:0; align-items:center; justify-content:center; color:var(--ink); cursor:pointer;
}
.menu-btn svg{ width:20px; height:20px; }

@media (max-width:860px){
  .nav-inner{ padding:8px 16px; position:relative; }
  .menu-btn{ display:inline-flex; }
  nav.tabs{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(17,22,26,0.98); border-bottom:1px solid var(--line-soft); padding:8px 16px 14px;
  }
  nav.tabs.is-open{ display:flex; }
  nav.tabs a{ padding:11px 12px; border-radius:var(--radius); font-size:0.95rem; }
  nav.tabs .ig-link{ margin-left:0; padding:11px 12px; }
  .ig-link .ig-text{ display:inline; }
}

/* ---------- tab sections ---------- */

/* ---------- page flow ---------- */

.page-section{ scroll-margin-top:56px; padding:76px 0; background:var(--bg); color:var(--ink); }

/* secciones alternadas: la paleta se invierte (fondo claro, tinta oscura) */
.page-section.inv{
  --bg:#E4E8E4; --surface:#EFF2EF; --surface-2:#D8DED9; --surface-3:#C9D1CB;
  --ink:#141A1E; --muted:#4C5957; --muted-2:#6B7775; --line:#C2CBC5; --line-soft:#D2D9D4;
  --accent:#8C6A1C; --cold:#2E6389; --comfort:#4D7838; --comfort-soft:#C4D5B8; --hot:#A24C20;
}
/* sección en el amarillo de acento */
.page-section.band{
  --ink:#1A1508; --muted:#4A3D17; --muted-2:#5C4C1E; --line:rgba(26,21,8,0.28);
  background:var(--accent); color:var(--ink);
}

/* ---------- inicio: hero ---------- */

.hero{
  padding:48px 0 24px;
  text-align:center;
}
.hero .eyebrow{
  font-family:'Cormorant Garamond', Georgia, serif; font-size:1rem; color:var(--muted);
}
.hero h1{
  font-family:'Jost', system-ui, sans-serif; font-weight:700; font-size:2.8rem; margin-top:8px;
}
.hero .tagline{
  margin-top:10px; color:var(--accent); font-size:1rem; letter-spacing:0.04em;
}
.hero p.lead{
  max-width:520px; margin:20px auto 0; color:var(--muted); font-size:1rem;
}
.hero .cta-row{
  margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-block; padding:11px 20px; border-radius:var(--radius); font-size:0.9rem; cursor:pointer; border:1px solid var(--line);
  color:var(--ink); background:none; font-family:inherit;
}
.btn-primary{ background:var(--accent); color:#1A1508; border-color:var(--accent); font-weight:600; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ color:var(--ink); }
.btn-ghost:hover{ border-color:var(--muted-2); }

/* ---------- services ---------- */

.section-head{ text-align:center; }
.section-head h2{ font-size:1.5rem; }
.section-head p{ color:var(--muted); font-size:0.92rem; margin-top:8px; max-width:480px; margin-left:auto; margin-right:auto; }

.services-list{
  list-style:none; margin:24px auto 0; padding:0; max-width:880px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
}
.service{
  padding:7px 14px; border:1px solid var(--line); border-radius:20px;
  font-family:'Cormorant Garamond', Georgia, serif; font-size:1rem; line-height:1.3;
}
.page-section#servicios{ padding:52px 0; }
@media (max-width:640px){ .service{ font-size:0.92rem; padding:6px 12px; } .page-section#servicios{ padding:40px 0; } }

/* ---------- footer / contact ---------- */

footer.site-footer{
  border-top:1px solid var(--line-soft);
  padding:36px 0 40px;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:24px;
}
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h3{ font-size:1rem; margin-bottom:10px; }
.footer-grid .brand-name{ font-size:1.2rem; }
.footer-grid p{ color:var(--muted); font-size:0.88rem; margin-top:6px; }
.footer-grid a.contact-line{ display:block; color:var(--muted); font-size:0.88rem; margin-top:6px; }
.footer-grid a.contact-line:hover{ color:var(--ink); }
.footer-note{ margin-top:26px; color:var(--muted-2); font-size:0.76rem; }

/* ---------- quienes somos ---------- */

.about{
  display:grid; grid-template-columns:180px 1fr; gap:34px; align-items:start;
}
@media (max-width:640px){ .about{ grid-template-columns:1fr; } }
.avatar{
  width:150px; height:150px; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
  font-family:'Cormorant Garamond', Georgia, serif; font-size:2.6rem; color:var(--accent);
}
.about h2{ font-size:1.7rem; }
.about .role{ color:var(--accent); font-size:0.95rem; margin-top:6px; }
.about p.bio{ color:var(--muted); margin-top:16px; max-width:560px; }
.about .formacion{ margin-top:24px; }
.about .formacion h3{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.about .formacion ul{ margin:10px 0 0; padding:0; list-style:none; }
.about .formacion li{ padding:10px 0; border-top:1px solid var(--line-soft); font-size:0.92rem; }
.about .formacion li .yr{ color:var(--muted-2); font-size:0.78rem; display:block; margin-bottom:2px; }

/* ---------- proyectos ---------- */

.project-card{
  margin-top:40px; padding-top:40px; border-top:1px solid var(--line-soft);
}
.project-card:first-of-type{ border-top:none; padding-top:0; }

.project-gallery{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
  height:420px;
}
@media (max-width:640px){
  .project-gallery{ grid-template-columns:1fr 1fr; grid-template-rows:140px 90px; height:auto; gap:6px; }
}
.project-gallery a{ display:block; overflow:hidden; border-radius:var(--radius); background:var(--surface); }
.project-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.project-gallery a:hover img{ transform:scale(1.03); }
.pg-large{ grid-row:1 / span 2; grid-column:1; }
.pg-small:nth-of-type(2){ grid-row:1; grid-column:2; }
.pg-small:nth-of-type(3){ grid-row:2; grid-column:2; }
@media (max-width:640px){
  .pg-large{ grid-row:1 / span 2; grid-column:1; }
  .pg-small:nth-of-type(2){ grid-row:1; grid-column:2; }
  .pg-small:nth-of-type(3){ grid-row:2; grid-column:2; }
}

.project-gallery-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; height:260px;
}
.project-gallery-pair a{ display:block; overflow:hidden; border-radius:var(--radius); background:var(--surface); }
.project-gallery-pair img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.project-gallery-pair a:hover img{ transform:scale(1.03); }
@media (max-width:640px){
  .project-gallery-pair{ height:140px; gap:6px; }
}

.project-body{ margin-top:22px; max-width:720px; }
.project-body h3{ font-size:1.3rem; }
.project-tag{ color:var(--accent); font-size:0.85rem; margin-top:6px; }
.project-body p{ color:var(--muted); font-size:0.95rem; margin-top:12px; }

.project-strategies{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.project-strategies span{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:6px 13px; font-size:0.8rem; color:var(--ink);
}

.studies-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:26px;
}
@media (max-width:640px){ .studies-row{ gap:8px; } .studies-row figcaption{ font-size:0.68rem; } }
.studies-row figure{ margin:0; }
.studies-row a{ display:block; }
.studies-row img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line); display:block;
}
.studies-row figcaption{ font-size:0.78rem; color:var(--muted); margin-top:6px; }

/* ---------- taller experimental ---------- */

.taller-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px; margin-top:26px;
}
@media (max-width:640px){
  .taller-grid{ grid-template-columns:repeat(3, 1fr); gap:6px; }
}
.taller-grid figure{ margin:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); }
.taller-grid a{ display:block; }
.taller-grid img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  filter:grayscale(100%); transition:transform .3s ease;
}
.taller-grid img:hover{ transform:scale(1.03); }

/* ---------- laboratorio bioclimatico ---------- */

.lab-intro{ padding:0 0 8px; }
.lab-intro h2{ font-size:1.7rem; line-height:1.25; max-width:620px; }
.lab-intro p{ color:var(--muted); max-width:560px; font-size:0.95rem; margin-top:10px; }

.lab-layout{ margin-top:26px; }

.city-field label{
  display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); margin-bottom:6px;
}
.city-select{
  width:100%; max-width:340px; appearance:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 34px 10px 14px; font-size:1rem; color:var(--ink); cursor:pointer;
  background-repeat:no-repeat;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size:6px 6px, 6px 6px;
  background-position:right 18px center, right 12px center;
}
.city-zone{ margin-top:8px; font-size:0.82rem; color:var(--accent); }
.city-tag{ font-size:0.8rem; color:var(--muted); margin-top:2px; }

/* season tabs */

.season-tabs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:28px 0 0; max-width:560px; }
.season-tab{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); color:var(--muted);
  padding:12px 4px 10px; font-size:0.86rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.season-tab svg{ width:24px; height:24px; }
.season-tab.is-active{ color:#1A1508; background:var(--accent); border-color:var(--accent); font-weight:600; }
.season-tab:hover:not(.is-active){ color:var(--ink); border-color:var(--muted-2); }
@media (max-width:420px){ .season-tabs{ gap:6px; } .season-tab{ font-size:0.76rem; padding:10px 2px 8px; } }

/* temps */

.temps-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-top:22px; border-radius:var(--radius); overflow:hidden;
}
.temp-cell{ background:var(--surface); padding:18px 16px 16px; }
.temp-cell .moment{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted-2); }
.temp-cell .value{ font-family:'Jost', system-ui, sans-serif; font-size:2.1rem; font-weight:500; margin-top:6px; }
.temp-cell .value sup{ font-size:1rem; color:var(--muted); }

/* strategies */

.strategies-head{ margin-top:40px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.strategies-head h3{ font-size:1.1rem; }
.strategies-head .count{ font-size:0.82rem; color:var(--muted); }
.strategy-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; margin-top:22px; }
.strategy{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
  display:flex; align-items:flex-start; gap:12px; cursor:pointer; text-align:left; color:var(--ink);
}
.strategy:hover{ border-color:var(--muted-2); }
.strategy.is-on{ border-color:var(--accent); background:var(--surface-2); }
.strategy .switch{
  width:34px; height:19px; border-radius:10px; background:var(--surface-3); border:1px solid var(--line); position:relative; flex:none; margin-top:2px;
}
.strategy .switch::after{
  content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--muted);
  transition:transform .15s ease, background .15s ease;
}
.strategy.is-on .switch{ border-color:var(--accent); }
.strategy.is-on .switch::after{ transform:translateX(15px); background:var(--accent); }
.strategy .body .name{ display:block; font-size:0.93rem; color:var(--ink); font-weight:600; }
.strategy .body .desc{ display:block; font-size:0.78rem; color:var(--muted); margin-top:3px; line-height:1.4; }

/* results / gauges */

.results{ margin-top:30px; }
.results h3{ font-size:1.1rem; }
.gauges{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:22px; }
@media (max-width:640px){ .gauges{ grid-template-columns:1fr; } .temps-row{ grid-template-columns:1fr; } }
.gauge .g-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.gauge .g-moment{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-2); }
.gauge .g-value{ font-family:'Jost', system-ui, sans-serif; font-size:1.15rem; }
.gauge .g-value.zone-cold{ color:var(--cold); }
.gauge .g-value.zone-comfort{ color:var(--comfort); }
.gauge .g-value.zone-hot{ color:var(--hot); }
.g-track{ position:relative; height:8px; background:var(--surface-3); border-radius:5px; margin:0 4px; }
.g-comfort-band{ position:absolute; top:0; bottom:0; background:var(--comfort-soft); border-radius:5px; }
.g-baseline, .g-marker{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); }
.g-baseline{ background:var(--surface); border:2px solid var(--muted-2); opacity:0.85; }
.g-marker{ border:2px solid var(--bg); }
.g-marker.zone-cold{ background:var(--cold); }
.g-marker.zone-comfort{ background:var(--comfort); }
.g-marker.zone-hot{ background:var(--hot); }
.g-scale{ display:flex; justify-content:space-between; font-size:0.68rem; color:var(--muted-2); margin-top:5px; font-family:'Jost', system-ui, sans-serif; }
.g-foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.g-status{ font-size:0.82rem; color:var(--muted); }
.g-cost{ font-family:'Jost', system-ui, sans-serif; font-size:0.95rem; letter-spacing:0.08em; color:var(--ink); }

.feedback{
  margin-top:26px; background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--radius); padding:14px 16px; font-size:0.9rem;
}
.feedback .fb-title{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-2); margin-bottom:6px; }

.legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:0.76rem; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend .lc-base{ background:var(--surface); border:2px solid var(--muted-2); }
.legend .lc-cur{ background:var(--accent); }
.legend .lc-band{ background:var(--comfort-soft); border-radius:2px; width:14px; height:9px; }

.lab-note{ margin-top:28px; color:var(--muted-2); font-size:0.78rem; max-width:640px; }

/* dos secciones oscuras seguidas (laboratorio → proyectos): línea divisoria */
.page-section:not(.inv):not(.band) + .page-section:not(.inv):not(.band){ border-top:1px solid var(--line); }

/* servicios: oscuro intermedio, etiquetas en dorado */
.page-section#servicios{ background:var(--surface); border-block:1px solid var(--line-soft); }
#servicios .service{ border-color:rgba(216,178,92,0.55); color:var(--accent); }

/* quiénes somos: versión compacta */
.page-section#quienes{ padding:48px 0; }
#quienes .about{ grid-template-columns:84px 1fr; gap:24px; max-width:760px; margin:0 auto; }
#quienes .avatar{ width:84px; height:84px; font-size:1.6rem; }
#quienes .about h2{ font-size:1.35rem; }
#quienes .about .role{ font-size:0.88rem; margin-top:4px; }
#quienes .about p.bio{ font-size:0.92rem; margin-top:10px; }
#quienes .about .formacion{ margin-top:14px; }
#quienes .about .formacion li{ padding:7px 0; font-size:0.86rem; display:grid; grid-template-columns:72px 1fr; gap:8px; }
#quienes .about .formacion li .yr{ margin:0; }
@media (max-width:640px){
  .page-section#quienes{ padding:36px 0; }
  #quienes .about{ grid-template-columns:56px 1fr; gap:14px; }
  #quienes .avatar{ width:56px; height:56px; font-size:1.1rem; }
  #quienes .about .formacion li{ grid-template-columns:1fr; gap:0; }
}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#servicios .services-list{ margin-top:0; }
.page-section#servicios{ padding:36px 0; }
@media (max-width:640px){ .page-section#servicios{ padding:28px 0; } }

/* ---------- laboratorio en pantalla vertical (celular) ---------- */
/* el resultado queda fijo arriba mientras se activan las estrategias */
@media (max-width:640px){
  .lab-intro h2{ font-size:1.45rem; }
  .lab-intro p{ font-size:0.9rem; }
  .city-select{ max-width:none; }
  .season-tabs{ margin-top:20px; }

  .results{
    position:sticky; top:53px; z-index:5;
    margin:18px -16px 0; padding:10px 16px 8px;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 8px 12px -10px rgba(0,0,0,0.6);
  }
  .results h3{ font-size:0.95rem; }
  .gauges{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:8px; }
  .gauge .g-head{ flex-direction:column; align-items:flex-start; gap:0; margin-bottom:6px; }
  .gauge .g-moment{ font-size:0.66rem; }
  .gauge .g-value{ font-size:1.05rem; }
  .g-track{ height:6px; margin:0 3px; }
  .g-baseline, .g-marker{ width:10px; height:10px; }
  .g-scale{ display:none; }
  .g-foot{ margin-top:6px; gap:4px; }
  .g-status{ font-size:0.72rem; }
  .g-cost{ font-size:0.85rem; }
  .legend{ gap:4px 12px; margin-top:8px; font-size:0.66rem; }

  .feedback{ margin-top:14px; padding:11px 13px; font-size:0.85rem; }
  .strategy-grid{ gap:8px; margin-top:14px; }
  .strategy{ padding:10px 12px; gap:10px; }
  .strategy .body .name{ font-size:0.9rem; }
  .strategy .body .desc{ font-size:0.76rem; }
}
/* celular acostado (pantalla baja): sin resultado fijo, para no tapar todo */
@media (max-width:900px) and (max-height:520px){
  .results{ position:static; box-shadow:none; }
}

/* ---------- inicio: fondo blanco con la maqueta isométrica ---------- */
.page-section.home{
  --bg:#FAFBFA; --ink:#141A1E; --muted:#56625F; --muted-2:#8A9592; --line:#D6DCD8;
  position:relative; overflow:hidden; padding:64px 0 22px; background:var(--bg); color:var(--ink);
}
.home canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.home-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.home-eyebrow{ font-family:'Cormorant Garamond', Georgia, serif; font-size:1rem; color:var(--muted); }
.home h1{ font-family:'Jost', system-ui, sans-serif; font-weight:700; font-size:clamp(2.4rem, 5.5vw, 2.9rem); margin-top:8px; }
.home-tagline{ margin-top:10px; color:#8C6A1C; font-size:1rem; letter-spacing:0.04em; }
.home-lead{ max-width:520px; margin:20px auto 0; color:var(--muted); font-size:1rem; }
.home-cta{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.home .btn-ghost{ background:rgba(250,251,250,0.8); }
.home-model{ width:100%; height:190px; }

.home-sun{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 8px;
  font-family:'Jost', system-ui, sans-serif; font-size:0.7rem; color:var(--muted-2);
}
.home-sun select{
  appearance:none; font:inherit; color:var(--muted); background-color:transparent; border:none; border-bottom:1px solid var(--line);
  padding:3px 14px 3px 2px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted-2) 50%), linear-gradient(135deg, var(--muted-2) 50%, transparent 50%);
  background-size:4px 4px, 4px 4px; background-position:right 6px center, right 2px center; background-repeat:no-repeat;
}
.home-seasons{ display:flex; gap:2px; }
.home-seasons button{
  width:26px; height:26px; padding:0; border:1px solid transparent; border-radius:50%; background:none; color:var(--muted-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.home-seasons svg{ width:14px; height:14px; }
.home-seasons button[aria-pressed="true"]{ color:#1A1508; background:var(--accent); }
.home-seasons button:hover[aria-pressed="false"]{ color:var(--ink); }
.home-sun input[type=range]{ width:110px; accent-color:#B59343; height:20px; margin:0; cursor:pointer; }
.home-clock{ min-width:38px; text-align:left; font-variant-numeric:tabular-nums; }
.home-sun select:focus-visible, .home-seasons button:focus-visible, .home-sun input:focus-visible{ outline:2px solid #8C6A1C; outline-offset:2px; }

@media (max-width:640px){
  .page-section.home{ padding:40px 0 18px; }
  .home-lead{ font-size:0.95rem; }
  .home-model{ height:170px; }
}
[hidden]{ display:none !important; }
/* el selector siempre legible aunque una sombra pase por debajo */
.home-sun{ background:rgba(250,251,250,0.86); border-radius:16px; padding:2px 10px; }

/* header ajustado: el fondo apenas más alto que el logo y las letras */
.nav-inner{ padding-block:4px; }
nav.tabs a{ padding-block:5px; }
nav.tabs .ig-link{ padding:5px; }
.menu-btn{ height:30px; width:36px; }
@media (max-width:860px){ .nav-inner{ padding-block:4px; } nav.tabs a{ padding-block:11px; } nav.tabs .ig-link{ padding:11px 12px; } }
.page-section{ scroll-margin-top:44px; }
@media (max-width:640px){ .results{ top:41px; } }


/* ---------- tipografía: Cormorant Garamond en títulos, Jost en el resto ---------- */
body{ font-weight:400; letter-spacing:0.005em; }
h1,h2,h3{ font-weight:500; letter-spacing:0; }
.section-head h2, .lab-intro h2{ font-size:2.1rem; line-height:1.15; }
.project-body h3{ font-size:1.6rem; }
.about h2, #quienes .about h2{ font-size:1.7rem; }
.footer-grid h3, .results h3{ font-size:1.3rem; }
.strategy .body .name{ font-weight:500; }
.service{ font-size:1.12rem; }
.g-value, .g-cost, .home-clock, .g-scale{ font-variant-numeric:tabular-nums; }
.btn{ font-weight:500; letter-spacing:0.06em; text-transform:uppercase; font-size:0.74rem; padding:13px 20px; }
nav.tabs a{ font-size:0.8rem; letter-spacing:0.04em; }

/* ---------- inicio con foto ---------- */
.page-section.hero-photo{
  position:relative; padding:0; color:#F2F1EC; overflow:hidden;
  min-height:min(100svh, 800px); display:flex; margin-top:-42px;
  background:#151a1d url("../assets/proyectos/trevelin-2.jpg") center 40% / cover no-repeat;
}
.hero-photo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,15,17,0.86) 0%, rgba(12,15,17,0.62) 38%, rgba(12,15,17,0.12) 72%),
    linear-gradient(0deg, rgba(12,15,17,0.78) 0%, rgba(12,15,17,0) 30%);
}
.hero-photo-inner{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-top:114px; padding-bottom:22px; gap:56px; }
.hero-photo-copy{ max-width:470px; }
.hero-kicker{ display:flex; align-items:center; gap:14px; color:#D8B25C; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; }
.hero-kicker::before{ content:""; width:36px; height:1px; background:#D8B25C; flex:none; }
.hero-photo h1{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-size:clamp(2.6rem, 5.2vw, 3.9rem); line-height:1.04; margin-top:20px; text-wrap:balance; }
.hero-photo h1 em{ font-style:italic; color:#E9D7A8; }
.hero-photo-lead{ margin-top:22px; max-width:380px; color:#D5D8D3; font-size:0.95rem; line-height:1.6; font-weight:300; }
.hero-photo-cta{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-photo .btn-ghost{ color:#F2F1EC; border-color:rgba(242,241,236,0.55); background:rgba(12,15,17,0.25); }
.hero-photo .btn-ghost:hover{ border-color:#F2F1EC; }
.hero-photo-strip{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; border-top:1px solid rgba(242,241,236,0.22); padding-top:16px; }
.hero-pillars{ list-style:none; margin:0; padding:0; display:flex; gap:44px; }
.hero-pillars li{ display:flex; flex-direction:column; }
.pillar-main{ font-family:'Cormorant Garamond', Georgia, serif; font-size:1.55rem; letter-spacing:0.06em; text-transform:uppercase; line-height:1.1; }
.pillar-sub{ font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:#B8BDB8; margin-top:3px; }
.hero-caption{ text-align:right; display:flex; flex-direction:column; font-size:0.72rem; color:#C9CDC8; }
.hero-caption em{ font-family:'Cormorant Garamond', Georgia, serif; font-size:1.05rem; color:#F2F1EC; }

@media (max-width:760px){
  .page-section.hero-photo{ min-height:100svh; background-position:68% center; }
  .hero-photo::before{
    background:linear-gradient(0deg, rgba(12,15,17,0.92) 0%, rgba(12,15,17,0.7) 48%, rgba(12,15,17,0.2) 78%);
  }
  .hero-photo-inner{ gap:32px; padding-top:90px; }
  .hero-photo h1{ font-size:2.5rem; }
  .hero-photo-strip{ flex-direction:column; align-items:stretch; gap:14px; }
  .hero-pillars{ gap:0; justify-content:space-between; }
  .pillar-main{ font-size:1.1rem; }
  .pillar-sub{ font-size:0.56rem; letter-spacing:0.1em; }
  .hero-caption{ text-align:left; flex-direction:row; gap:8px; align-items:baseline; }
}

/* header transparente mientras está sobre la foto */
header.site-nav{ transition:background-color .25s ease, border-color .25s ease; }
header.site-nav.over-photo{ background:linear-gradient(180deg, rgba(12,15,17,0.55), rgba(12,15,17,0)); border-bottom-color:transparent; backdrop-filter:none; }
@media (max-width:860px){ header.site-nav.over-photo nav.tabs.is-open{ background:rgba(17,22,26,0.98); } }

/* sección del sol, más fina */
.page-section.home#sol{ padding:44px 0 20px; }
.sol-title{ margin:0; font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-size:1.25rem; color:var(--muted); }
#sol .home-model{ height:180px; }

/* inicio y header a todo el ancho del navegador, con margen lateral */
.hero-photo-inner.wrap{ max-width:none; padding-left:max(24px, 3.6vw); padding-right:max(24px, 3.6vw); }
.hero-photo-copy{ max-width:min(620px, 46vw); }
.hero-photo h1{ font-size:clamp(2.6rem, 5vw, 5rem); }
.hero-photo-lead{ max-width:440px; font-size:1rem; }
.nav-inner{ max-width:none; padding-left:max(16px, 3.6vw); padding-right:max(16px, 3.6vw); }
@media (max-width:760px){ .hero-photo-copy{ max-width:none; } .hero-photo h1{ font-size:2.5rem; } }

/* el resto del sitio, más ancho en pantallas grandes */
.wrap{ max-width:1280px; padding-left:max(24px, 3.6vw); padding-right:max(24px, 3.6vw); }
.page-section.hero-photo{ min-height:100svh; }
@media (max-width:640px){ .wrap{ padding-left:16px; padding-right:16px; } }

/* franja de pilares en celular: tres columnas iguales con aire entre ellas */
@media (max-width:760px){
  .hero-pillars{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
  .pillar-main{ font-size:1.02rem; letter-spacing:0.05em; }
  .pillar-sub{ font-size:0.56rem; letter-spacing:0.1em; line-height:1.35; margin-top:4px; }
}
@media (max-width:360px){ .pillar-main{ font-size:0.92rem; letter-spacing:0.03em; } .hero-pillars{ gap:10px; } }
@media (max-width:760px){ .pillar-main{ font-size:0.95rem; } .pillar-sub{ font-size:0.52rem; letter-spacing:0.08em; } }
@media (max-width:360px){ .pillar-main{ font-size:0.85rem; } .pillar-sub{ font-size:0.5rem; } }