/* El Árbol Hueco — dirección de arte, octubre 2026.
   Fotografías de materiales reales; sin ruido procedural, filtros de grano
   ni falsos acabados de papel/madera. Identidad vectorial intacta. */

:root{
  --canvas:#eee9de;
  --paper:#f7f3e9;
  --forest:#173b2f;
  --midnight:#242720;
  --rule:rgba(40,43,36,.19);
  --content:1180px;
  --shadow:none;
}
html{scroll-padding-top:84px}
body{
  background:var(--canvas);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
body::before{display:none!important;content:none!important}
h1,h2,h3{letter-spacing:-.038em;line-height:1.06}
h2{font-size:clamp(43px,5.2vw,82px)}
h3{letter-spacing:-.025em}
p{hanging-punctuation:first}
.wrap{width:min(var(--content),calc(100% - 64px))}
.lead,.body-copy{font-size:clamp(17px,1.5vw,20px);line-height:1.72}
.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:750}
.section{padding:clamp(86px,10vw,156px) 0}
.section.paper{background:var(--paper)!important;background-image:none!important}
.section.linen{background:var(--canvas)!important;background-image:none!important}
.section.stone{background:#dfded5!important;background-image:none!important}
.section.oak{background:#cfb48a!important;background-image:none!important}
.section.charcoal,.footer{background:var(--midnight)!important;background-image:none!important}
.section.sierra{background:var(--sierra)!important;background-image:none!important}
.page-hero{
  padding:clamp(100px,13vw,178px) 0 clamp(88px,9vw,125px);
  background:#eee9de url('/media/linen-photo.jpg') center/cover no-repeat!important;
  border-bottom:1px solid var(--rule);
}
.page-hero .wrap{max-width:1100px}
.page-hero h1{font-size:clamp(58px,8vw,122px);max-width:10.6em}
.page-hero .lead{max-width:650px;margin-top:38px}
.breadcrumb{letter-spacing:.22em}
.site-header{
  background:rgba(247,243,233,.97)!important;
  background-image:none!important;
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(12px);
}
.nav a{transition:color .2s ease,opacity .2s ease}
.nav .nav-cta,.btn{border-radius:3px}
.btn{padding:15px 22px;min-height:53px;box-shadow:none!important;text-shadow:none!important}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{border-color:var(--forest);color:var(--forest)}
.mobile-nav{background:var(--paper)}
.footer{padding:62px 0 34px}
.footer-grid{gap:46px}
.footer-bottom{margin-top:52px}

/* Portada: composición editorial en lugar de logotipo flotante
   sobre anillos simulados. El tejido es una fotografía verdadera. */
.hero{
  min-height:0;
  padding:0!important;
  display:block;
  background:var(--paper)!important;
  isolation:isolate;
}
.hero::before,.hero::after{display:none!important;content:none!important}
.hero-rings{display:none}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.11fr) minmax(0,.89fr);
  width:100%;
  max-width:none;
  text-align:left;
  margin:0;
}
.hero-copy{
  background:#f0ebdf url('/media/linen-photo.jpg') center/cover no-repeat;
  padding:clamp(74px,8.8vw,155px) clamp(30px,5.8vw,100px) clamp(70px,7.5vw,125px);
  min-height:min(820px,95svh);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.hero-copy .eyebrow{order:0;margin:0 0 36px;color:var(--sierra-dark)}
.hero-symbol{width:clamp(80px,8vw,112px);margin:0 0 14px;color:var(--logo-green)}
.hero-logo{width:100%;max-width:640px;margin:0 0 clamp(34px,4vw,62px)}
.hero h1{
  width:100%;
  max-width:700px;
  margin:0 0 28px;
  font-size:clamp(58px,6vw,94px);
  line-height:.99;
  color:var(--charcoal);
}
.hero .lead{
  margin:0;
  max-width:53ch;
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.7;
  text-wrap:pretty;
}
.hero .actions{
  margin-top:42px;
  justify-content:flex-start;
  gap:11px;
}
.hero-photo{
  margin:0;
  min-height:690px;
  height:100%;
  position:relative;
  overflow:hidden;
  background:#69533d;
}
.hero-photo img{
  display:block;
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:52% 50%;
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(28,25,20,.06),transparent 48%);
  pointer-events:none;
}
.hero-photo figcaption{
  position:absolute;
  bottom:32px;
  right:31px;
  color:#fffcf6;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em;
  text-shadow:0 1px 8px #0009;
}

/* La entrada deja de ser un scroll artificial de dos pantallas.
   Contrapunto tipográfico limpio, amplio y legible. */
.threshold{height:auto!important;background:var(--midnight)!important}
.threshold-sticky{
  height:auto!important;
  min-height:570px;
  position:relative!important;
  padding:100px max(36px,calc((100vw - var(--content))/2));
  display:grid;
  grid-template-columns:.62fr 1.38fr;
  align-items:center;
  gap:clamp(42px,6vw,110px);
  background:var(--midnight)!important;
  overflow:hidden;
}
.threshold-rings{opacity:.05;pointer-events:none}
.threshold-core{
  width:min(320px,100%)!important;
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,252,246,.24);
  background:transparent!important;
  transform:none!important;
  box-shadow:none!important;
  justify-self:center;
}
.threshold-core .brand-symbol-svg{
  opacity:1!important;
  color:#e6d8bf!important;
  width:67%;
}
.threshold-copy{
  position:relative!important;
  top:auto;left:auto;bottom:auto;
  transform:none!important;
  opacity:1!important;
  width:100%;
  color:var(--paper)!important;
  text-align:left;
  padding:0;
}
.threshold-copy h2{
  font-size:clamp(48px,5.4vw,86px);
  max-width:820px;
  line-height:1.04;
  margin:0;
}
.threshold-copy p{
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.78;
  max-width:640px;
  margin:36px 0 0;
  color:rgba(255,252,246,.82);
}

/* El estudio: fotografía de una interpretación, no otra caja con el logo. */
.studio-zone{overflow:hidden;padding:clamp(96px,11vw,154px) 0}
.studio-zone.section.charcoal{background:#1d3b30!important}
.studio-rings{display:none!important}
.studio-zone .split{
  grid-template-columns:1.05fr .95fr;
  gap:clamp(48px,6.5vw,120px);
  align-items:center;
}
.studio-zone h2{max-width:12ch;font-size:clamp(48px,5vw,78px)}
.studio-zone .body-copy{max-width:590px;color:rgba(255,252,246,.83);margin-top:30px}
.studio-photo{
  display:block;
  margin:0;
  width:100%;
  height:clamp(540px,62vw,760px);
  overflow:hidden;
  position:relative;
  background:#1c201c;
}
.studio-photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:51% 42%;
  filter:saturate(.75) contrast(1.08);
}
.studio-photo figcaption{
  position:absolute;bottom:20px;right:20px;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:white;text-shadow:0 1px 8px #000b;
}
.pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:48px;
  border-top:1px solid rgba(255,252,246,.29);
}
.pillar{
  display:grid;
  grid-template-columns:27px 110px 1fr;
  gap:14px;
  align-items:baseline;
  padding:19px 0;
  border:0;
  border-bottom:1px solid rgba(255,252,246,.22);
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
}
.pillar .num{font-size:11px;color:#ccb18c}
.pillar h3{margin:0;font-size:23px}
.pillar p{margin:0;font-size:14px;line-height:1.5;color:#e4e7df}

/* El proceso aparece como una secuencia de anotaciones, no tarjetas. */
.section.paper .split.top{align-items:start}
.process-grid{
  margin-top:68px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.process-card{
  background:none!important;
  background-image:none!important;
  border:0;
  border-right:1px solid var(--rule);
  border-radius:0;
  box-shadow:none!important;
  padding:35px 27px 40px;
}
.process-card:last-child{border:0}
.process-card .step{
  display:block;width:auto;height:auto;
  background:none;color:var(--sierra-dark);
  font-size:12px;letter-spacing:.17em;border:0;
}
.process-card h3{margin:56px 0 15px;font-size:clamp(25px,2.4vw,36px)}
.process-card p{font-size:16px;line-height:1.6}
.wave-divider{height:100px;background:var(--canvas)!important}
.wave-bars{opacity:.5}

/* Servicios: una tabla editorial, sin tarjetas ni flechas decorativas. */
.section.linen .service-list{border-top:1px solid var(--rule);margin-top:52px}
.service-row{
  grid-template-columns:68px minmax(0,1fr);
  gap:18px;
  padding:27px 0;
  border-bottom:1px solid var(--rule);
  background:none!important;
  transition:padding-left .22s ease;
}
.service-row:hover{padding-left:8px}
.service-row .num{font-size:11px}
.service-row h3{font-size:clamp(31px,3.5vw,51px);line-height:1.1}
.service-row p{font-size:17px;line-height:1.6;max-width:62ch;margin-top:10px}
.service-row .arrow{display:none}

/* Equipo: ficha técnica abierta, no un escaparate de casillas idénticas. */
.section.oak .split{grid-template-columns:.75fr 1.25fr;gap:clamp(55px,7vw,125px);align-items:start}
.section.oak .lead{max-width:31ch;margin-top:35px;color:#3c3e33}
.equipment-grid{
  margin:0;
  gap:0 35px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* La retícula interior también es .wrap: no debe pegarse al borde. */
#view-equipo .wrap.equipment-grid{margin-inline:auto}
.gear{
  background:none!important;background-image:none!important;
  border:0;border-top:1px solid rgba(40,35,24,.4);
  border-radius:0;
  box-shadow:none!important;
  min-height:0;
  padding:22px 0 28px;
}
.gear::before{display:none!important}
.gear small{font-size:10px;letter-spacing:.18em;color:#404731}
.gear h3{font-size:clamp(22px,2.1vw,32px);margin:19px 0 12px;overflow-wrap:break-word}
.gear p{font-size:15px;line-height:1.52;color:#404038}
.internal-grid{gap:0 38px}
.internal-card{
  background:none!important;background-image:none!important;
  border:0;border-top:1px solid var(--rule);
  border-radius:0;
  box-shadow:none!important;
  padding:26px 0 32px;
}

/* Identidad personal: tipografía y espacio con un único plano de color. */
.bio{grid-template-columns:.73fr 1.27fr;gap:clamp(50px,7vw,115px);align-items:start}
.bio-side{
  top:116px;
  background:var(--forest)!important;
  border-radius:0;
  padding:60px 36px;
  box-shadow:none!important;
}
.bio-side .brand-symbol-svg{width:clamp(105px,13vw,160px)}
.bio-side h2{font-size:clamp(37px,3.5vw,54px)}
.bio-main h2{max-width:13ch}
.bio-main p{font-size:19px;line-height:1.74}
.facts{margin-top:45px}
.fact{grid-template-columns:105px 1fr;gap:22px;padding:22px 0}

/* Ubicación: tipografía monumental en vez de 'mapa' falso con anillos CSS. */
.location-grid{grid-template-columns:.97fr 1.03fr;gap:clamp(54px,7vw,110px)}
.location-card{
  min-height:530px;
  background:var(--forest)!important;
  background-image:none!important;
  border-radius:0;
  box-shadow:none!important;
}
.location-card::before{display:none!important}
.location-card::after{
  content:"SIERRA NORTE";
  position:absolute;
  bottom:22px;left:28px;
  font-size:10px;letter-spacing:.3em;
  color:rgba(255,252,246,.52);
}
.location-card .pin{padding:40px}
.location-card .pin b{font-size:clamp(52px,6.1vw,96px);line-height:1.02;letter-spacing:-.04em}
.location-card .pin span{font-size:14px;letter-spacing:.09em;text-transform:uppercase}
.faq{margin-top:50px}

/* Formulario y páginas internas */
.contact-grid{gap:clamp(45px,7vw,100px)}
.form{
  background:var(--paper)!important;background-image:none!important;
  border-radius:0;box-shadow:none!important;
  padding:clamp(26px,3.3vw,48px);
}
.form input,.form textarea,.form select{
  background:white;border-radius:0;border-color:var(--rule);
}
.form-warning{border-radius:0}
.page-hero .breadcrumb{margin-bottom:35px}
.footer a{transition:color .2s ease}
.footer a:hover{color:white}

/* Los puntos de ruptura redefinen la composición, no escalan las tarjetas. */
@media(max-width:1120px){
  .hero-inner{grid-template-columns:1.07fr .93fr}
  .hero-copy{padding:74px 36px}
  .hero h1{font-size:clamp(50px,6vw,73px)}
  .hero-photo{min-height:640px}
  .studio-zone .split{gap:50px}
  .pillars .pillar{grid-template-columns:24px 100px 1fr}
}
@media(max-width:980px){
  .wrap{width:calc(100% - 48px)}
  .hero-inner{grid-template-columns:1fr}
  .hero-copy{min-height:auto;padding:88px 7vw 80px}
  .hero h1{font-size:clamp(65px,10vw,98px)}
  .hero-photo{min-height:0;height:420px}
  .threshold-sticky{grid-template-columns:.5fr 1fr;gap:35px;padding:95px 32px}
  .threshold-copy h2{font-size:clamp(45px,6vw,74px)}
  .studio-zone .split{grid-template-columns:1fr;gap:50px}
  .studio-photo{height:550px;max-width:760px}
  .section.oak .split{grid-template-columns:1fr}
  .section.oak .lead{max-width:600px}
  .bio{grid-template-columns:1fr;gap:44px}
  .bio-side{position:static;max-width:510px}
  .location-grid{grid-template-columns:1fr}
  .location-card{min-height:380px}
  .location-card .pin b{font-size:75px}
}
@media(max-width:650px){
  .wrap{width:calc(100% - 40px)}
  .section{padding:86px 0}
  .site-header .header-inner{height:68px}
  .hero-copy{padding:65px 25px 65px}
  .hero-copy .eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:27px}
  .hero-symbol{width:88px;margin-bottom:16px}
  .hero-logo{width:100%;margin-bottom:45px}
  .hero h1{font-size:clamp(52px,11.5vw,70px);letter-spacing:-.046em;margin-bottom:26px}
  .hero .lead{max-width:none;font-size:17px;line-height:1.66}
  .hero .actions{margin-top:36px;flex-direction:column;align-items:stretch;width:100%}
  .hero .actions .btn{width:100%;min-width:0}
  .hero-photo{height:335px;min-height:0}
  .hero-photo figcaption{font-size:9px;right:20px;bottom:17px}
  .threshold-sticky{grid-template-columns:1fr;gap:26px;padding:85px 25px 96px}
  .threshold-core{width:160px!important;justify-self:start}
  .threshold-copy h2{font-size:clamp(47px,11vw,67px)}
  .threshold-copy p{font-size:17px;line-height:1.68;margin-top:28px}
  .studio-zone{padding:90px 0}
  .studio-zone h2{font-size:clamp(45px,10vw,62px)}
  .studio-zone .body-copy{font-size:17px}
  .studio-photo{height:475px}
  .pillars{margin-top:32px}
  .pillar,.pillars .pillar{grid-template-columns:22px 1fr;gap:6px 13px}
  .pillar h3{font-size:24px}
  .pillar p{grid-column:2;font-size:15px}
  .process-grid{grid-template-columns:1fr;margin-top:46px}
  .process-card,.process-card:nth-child(2){
    border:0;border-bottom:1px solid var(--rule);
    padding:27px 5px;
  }
  .process-card:last-child{border:0}
  .process-card h3{margin:18px 0 9px;font-size:30px}
  .wave-divider{height:85px}
  .service-row{grid-template-columns:37px 1fr;gap:12px;padding:25px 0}
  .service-row h3{font-size:clamp(29px,8vw,40px)}
  .service-row p{font-size:16px}
  .equipment-grid{grid-template-columns:1fr}
  .gear{min-height:0;padding:21px 0 26px}
  .gear h3{margin:12px 0 6px;font-size:27px}
  .bio-side{padding:42px 24px}
  .bio-main p{font-size:17px}
  .fact{grid-template-columns:1fr;gap:5px}
  .location-card{min-height:310px}
  .location-card .pin b{font-size:clamp(52px,14vw,70px)}
  .location-card .pin span{font-size:11px}
  .contact-grid{gap:45px}
  .page-hero{padding:82px 0 87px}
  .page-hero h1{font-size:clamp(52px,12vw,70px)}
  .page-hero .lead{margin-top:28px}
  .footer{padding-top:60px}
  .footer-bottom{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo img,.studio-photo img{animation:none!important;transition:none!important}
  .threshold-sticky,.threshold-core,.threshold-copy{transform:none!important;transition:none!important}
}