/* ==========================================================================
   SCANTERRA — propuesta de diseño
   El estándar de la categoría, ejecutado en serio.
   Vara de terminación: estudios de arquitectura y paisaje; marcas de tierra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* papel */
  --paper:#f3efe6;
  --paper-deep:#e8e1d3;
  --bone:#fbf9f4;
  --soil:#241f18;
  --soil-2:#312a20;

  /* tinta */
  --ink:#1e1b16;
  --ink-2:#6b6357;
  --rule:#d4cab6;
  --rule-soft:#e3dbcb;
  --bone-dim:#c4b8a4;
  --rule-dark:#4a4133;

  /* acción — racionado: solo acción y cifra viva */
  --clay:#a34f2c;
  --clay-deep:#8a3f22;
  --clay-light:#d98a5f;
  --moss:#55603c;

  /* medida */
  --maxw:1240px;
  --maxw-wide:1480px;
  --gutter:clamp(20px,4vw,40px);
  --band:clamp(68px,8.5vw,128px);
  --header-h:76px;

  /* tipografía */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* movimiento */
  --ease:cubic-bezier(.16,1,.3,1);

  /* Ritmo de la portada, en un solo sitio. main.js lee --hero-ciclo de aquí
     para que el cambio de fotograma y el relleno de la barra de etapas no
     puedan volver a desincronizarse: el CSS animaba el relleno en 7 s y el JS
     cambiaba de imagen a los 4 s, así que la barra iba por su cuenta. */
  --hero-ciclo:3200ms;
  --hero-fundido:900ms;
}

/* --------------------------------------------------------------------------
   2. Reset y superficies del navegador
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--rule) transparent;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.98rem + .2vw,1.06rem);
  line-height:1.68;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Las partes que no dibujamos también llevan el diseño. */
::selection{background:rgba(163,79,44,.18);color:var(--ink)}
:root{caret-color:var(--clay);accent-color:var(--clay)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--paper);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-2)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:1px;
}
.band-dark :where(a,button,input,select,textarea,[tabindex]):focus-visible,
.hero :where(a,button,[tabindex]):focus-visible{outline-color:var(--clay-light)}

img,svg,video{display:block;max-width:100%}
img{height:auto}
picture{display:contents}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
  font-size:.85rem;font-weight:600;transition:top .18s var(--ease);
}
.skip-link:focus-visible{top:12px}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  margin:0;
  font-variation-settings:"opsz" 48;
  text-wrap:balance;
}
h1{
  font-size:clamp(2.9rem,1.6rem + 5.4vw,6rem);
  letter-spacing:-.028em;
  font-variation-settings:"opsz" 72;
}
h2{
  font-size:clamp(2.05rem,1.35rem + 2.9vw,3.5rem);
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 60;
}
h3{
  font-size:clamp(1.35rem,1.15rem + .85vw,1.75rem);
  font-weight:500;
  letter-spacing:-.014em;
  line-height:1.18;
  font-variation-settings:"opsz" 28;
}
h4{
  font-size:1.2rem;font-weight:500;letter-spacing:-.01em;
  font-variation-settings:"opsz" 20;
}
em,i{font-style:italic}

.lead{
  font-size:clamp(1.1rem,1.02rem + .45vw,1.3rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:62ch;
}
.prose{max-width:68ch}

/* Etiqueta menuda: la única forma de versalita del sistema. */
.label{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  line-height:1.3;
}

/* Cifra: Newsreader, tabular, grande. */
.figure-n{
  font-family:var(--serif);
  font-weight:400;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.03em;
  line-height:1;
}

/* --------------------------------------------------------------------------
   4. Primitivas de retícula
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--maxw-wide)}

.band{padding-block:var(--band);position:relative}
.band-paper{background:var(--paper)}
.band-deep{background:var(--paper-deep)}
.band-dark{background:var(--soil);color:var(--paper)}
.band-dark .label{color:var(--bone-dim)}
.band-dark .lead{color:var(--bone-dim)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}

/* Registro de sección: la entrada de esta sección en el documento.
   Filete a todo el ancho, número a la izquierda, rótulo a la derecha. */
.reg{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  border-top:1px solid var(--rule);
  padding-top:.8rem;
  margin-bottom:clamp(2.6rem,5vw,4.4rem);
}
.band-dark .reg{border-top-color:var(--rule-dark)}
.reg-n{
  font-family:var(--serif);
  font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
  letter-spacing:.02em;
}
.band-dark .reg-n{color:var(--bone-dim)}
.reg-t{
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-align:right;
}
.band-dark .reg-t{color:var(--bone-dim)}

/* Encabezado de sección: asimétrico, no centrado. */
.s-head{margin-bottom:clamp(2.8rem,5.5vw,5rem)}
.s-head h2{grid-column:1/9}
.s-head .lead{grid-column:1/8;margin-top:1.4rem}
@media (max-width:900px){
  .s-head h2,.s-head .lead{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   5. Botones y enlaces de acción
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  padding:.95rem 1.7rem;
  border:1px solid transparent;border-radius:2px;
  cursor:pointer;text-align:center;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--clay);color:#fff;border-color:var(--clay)}
.btn-primary:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{
  background:rgba(20,17,12,.58);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--paper);border-color:rgba(243,239,230,.52);
}
.btn-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-solid-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-solid-light:hover{background:var(--clay-light);border-color:var(--clay-light);color:var(--soil)}
.btn-block{width:100%}
.btn:active{transform:translateY(1px)}

/* Enlace de acción en línea: filete que crece. */
.link{
  display:inline-block;
  color:var(--clay);
  font-weight:500;
  border-bottom:1px solid rgba(163,79,44,.35);
  padding-bottom:1px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.link:hover{color:var(--clay-deep);border-bottom-color:var(--clay-deep)}
.band-dark .link{color:var(--clay-light);border-bottom-color:rgba(217,138,95,.4)}
.band-dark .link:hover{color:#f0b391;border-bottom-color:#f0b391}

a.text-link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:var(--rule);
  transition:text-decoration-color .2s var(--ease);
}
a.text-link:hover{text-decoration-color:var(--clay)}
.band-dark a.text-link{text-decoration-color:var(--rule-dark)}
.band-dark a.text-link:hover{text-decoration-color:var(--clay-light)}

/* --------------------------------------------------------------------------
   6. Cabecera
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(243,239,230,.88);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.progress{
  position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:76px;
}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:38px;width:auto}
.main-nav{display:flex;align-items:center;gap:1.45rem}
.main-nav>a{
  font-size:.875rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
  padding:.4rem 0;position:relative;
  transition:color .2s var(--ease);
}
.main-nav>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s var(--ease);
}
.main-nav>a:hover{color:var(--ink)}
.main-nav>a:hover::after{transform:scaleX(1)}
.main-nav>a[aria-current]{color:var(--ink)}
.main-nav>a[aria-current]::after{transform:scaleX(1);background:var(--clay)}
.nav-cta{
  background:var(--ink);color:var(--paper)!important;
  padding:.62rem 1.15rem!important;border-radius:2px;
  font-weight:600!important;
  transition:background .22s var(--ease);
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--clay)}

.lang{display:flex;align-items:center;gap:.1rem;padding-left:.35rem;border-left:1px solid var(--rule);margin-left:.2rem}
.lang a{
  font-size:.75rem;font-weight:600;letter-spacing:.07em;color:var(--ink-2);
  padding:.35rem .45rem;transition:color .2s var(--ease);
}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{color:var(--clay)}

.nav-toggle{
  display:none;width:44px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;width:22px;height:1.5px;background:var(--ink);
  position:relative;transition:background .2s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--ink);
  transition:transform .28s var(--ease),top .2s var(--ease);
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1080px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;inset:76px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:.5rem var(--gutter) 1.75rem;
    max-height:calc(100dvh - 76px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .24s var(--ease),transform .24s var(--ease);
  }
  .main-nav.open{transform:none;opacity:1;pointer-events:auto}
  .main-nav>a{
    font-size:1.15rem;font-family:var(--serif);font-weight:400;color:var(--ink);
    padding:.95rem 0;border-bottom:1px solid var(--rule-soft);
  }
  .main-nav>a::after{display:none}
  .nav-cta{margin-top:1.25rem;padding:1rem!important;text-align:center;font-family:var(--sans)!important;font-size:.9rem!important}
  .lang{border-left:0;padding-left:0;margin:1.25rem 0 0;gap:.5rem}
  .lang a{border:1px solid var(--rule);padding:.5rem .8rem}
}

/* --------------------------------------------------------------------------
   7. Portada — el único momento de autor
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:stretch;
  overflow:hidden;
  background:var(--soil);
  color:var(--paper);
  padding-block:clamp(76px,8vh,96px) clamp(24px,3.5vh,40px);
}
.hero-media{position:absolute;inset:0}
.hero-frame{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  /* El fotograma que SALE lleva esta curva —arranca lento y sostiene la
     opacidad alta—; el que ENTRA lleva la de abajo, que sube rápido. Con la
     misma curva en los dos, a mitad del fundido ambos rondan .5 y por el hueco
     asoma el fondo de la sección: el cambio se ve como un parpadeo oscuro en
     vez de como un relevo. Cruzados así, la cobertura no baja del 95 %. */
  transition:opacity var(--hero-fundido) cubic-bezier(.7,0,.84,0);
}
.hero-frame.is-active{opacity:1;transition-timing-function:var(--ease)}
/* Dos capas, y la razón importa: de los cuatro fotogramas, tres son planos de
   fondo claro —amarillos, verdes, blanco de papel—. Un velo uniforme suave
   deja el texto blanco sobre amarillo. Así que el oscurecimiento general se
   queda en atmósfera, y la legibilidad la resuelve un paño anclado a la
   columna de texto, que se desvanece antes del borde para no tapar la foto.
   Sobre blanco de plano (L≈.93) el paño compuesto deja L≈.08: 7,8:1. */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,
      rgba(20,17,12,.88) 0,
      rgba(20,17,12,.86) calc(50% - 260px),
      rgba(20,17,12,.78) calc(50% + 300px),
      rgba(20,17,12,.60) calc(50% + 640px),
      rgba(20,17,12,.12) calc(50% + 900px),
      rgba(20,17,12,0) 100%),
    linear-gradient(to top,rgba(20,17,12,.55) 0%,rgba(20,17,12,.14) 52%,rgba(20,17,12,.28) 100%);
}
@media (max-width:900px){
  /* En móvil el texto ocupa el ancho completo: el paño pasa a ser vertical. */
  .hero-veil{
    background:
      linear-gradient(to bottom,
        rgba(20,17,12,.62) 0%,
        rgba(20,17,12,.86) 20%,
        rgba(20,17,12,.90) 100%),
      linear-gradient(to top,rgba(20,17,12,.35) 0%,rgba(20,17,12,.10) 60%,rgba(20,17,12,.2) 100%);
  }
}
.hero-inner{position:relative;width:100%;display:flex;flex-direction:column}
.hero-kind{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);margin:auto 0 clamp(1.4rem,3vw,2.2rem);
}
.hero h1{
  font-size:clamp(2.6rem,1.4rem + 4.6vw,4.6rem);
  max-width:22ch;color:#fff;line-height:1.06;
  text-shadow:0 2px 34px rgba(20,17,12,.4);
}
.hero h1 em{color:var(--clay-light);font-style:italic}
.hero-lead{
  margin:clamp(1.4rem,2.4vw,1.9rem) 0 0;
  max-width:54ch;
  font-size:clamp(1rem,.96rem + .28vw,1.1rem);
  line-height:1.62;
  color:rgba(243,239,230,.86);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}

/* Registro 01–04: las cuatro vistas son las cuatro etapas.

   No es un carrusel con puntitos: es la secuencia de un proceso y se lee como
   tal. Las etapas ya recorridas conservan su filete a media voz, la que corre
   engorda a 2 px y se rellena al ritmo exacto del fotograma, y las pendientes
   esperan en gris. Al volver a 01 el registro se vacía de un barrido, y ese
   vaciado es el aviso de que el ciclo reinicia.

   El estado vive en aria-current y en .is-done sobre el <button>, no en una
   clase del <li>: así lo que anuncia el lector de pantalla y lo que dibuja el
   CSS son el mismo dato. Cuando eran dos, el CSS se quedó sin el suyo. */
.hero-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:auto;
  padding-top:clamp(2rem,4vw,3.2rem);
  max-width:820px;
}
.hero-steps li{margin:0}
.hero-steps button{
  display:block;width:100%;text-align:left;
  background:none;border:0;padding:.9rem 1rem .9rem 0;cursor:pointer;
  color:rgba(243,239,230,.6);
  position:relative;
  transition:color .3s var(--ease);
}
/* el riel */
.hero-steps button::before{
  content:"";position:absolute;left:0;right:1px;top:0;height:1px;
  background:rgba(243,239,230,.28);
}
/* el relleno. El right:1px es el mismo del riel: con width:100% el relleno de
   una etapa se comía el píxel de separación con la siguiente. */
.hero-steps button::after{
  content:"";position:absolute;left:0;right:1px;top:0;height:1px;
  background:var(--clay-light);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
/* Etapa recorrida: el filete queda puesto, a media voz. La opacidad no baja
   de .7 porque a .5 la terracota se iguala en claridad al riel gris y sobre un
   plano aéreo la diferencia se pierde: quedaba un filete tibio, no un hecho.
   La jerarquía con la etapa en curso la sostiene el grosor, no el color. */
.hero-steps .is-done::after{transform:scaleX(1);opacity:.72}
.hero-steps button:hover{color:rgba(243,239,230,.9)}
/* etapa en curso: el filete engorda sobre el riel y se rellena */
.hero-steps [aria-current]{color:#fff}
.hero-steps [aria-current]::after{
  top:-1px;height:2px;opacity:1;
  transition:none;
  animation:step-fill var(--hero-ciclo) linear forwards;
}
@keyframes step-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hs-num{
  display:block;font-family:var(--serif);font-size:.9rem;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-bottom:.2rem;
}
.hs-label{display:block;font-size:.82rem;font-weight:500;letter-spacing:.01em}

@media (max-width:700px){
  .hero-steps{grid-template-columns:repeat(2,1fr);max-width:none}
  .hero-steps button{padding-right:.6rem}

  /* En móvil el titular ocupa cinco líneas y la bajada once: con el orden del
     documento la acción quedaba a 1600 px del borde superior, fuera de la
     primera pantalla. Se sube la acción por encima del párrafo; el orden de
     lectura del DOM no cambia. */
  .hero-kind{order:1;font-size:.68rem;letter-spacing:.12em}
  .hero h1{order:2}
  .hero-actions{order:3;margin-top:clamp(1.5rem,5vw,2rem);flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-lead{order:4;margin-top:clamp(1.6rem,5vw,2.1rem);font-size:1rem;line-height:1.58}
  .hero-steps{order:5}
}

/* --------------------------------------------------------------------------
   8. Espina: las tres etapas encadenadas
   -------------------------------------------------------------------------- */
.mision{
  margin:clamp(3rem,6vw,5rem) 0 0;
  grid-column:1/-1;
  text-align:center;
  border-top:1px solid var(--rule);
  padding-top:clamp(2.2rem,4vw,3.2rem);
}
.mision span{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.45rem,1.1rem + 1.5vw,2.35rem);
  line-height:1.24;letter-spacing:-.018em;
  text-wrap:balance;
}
.mision-a{color:var(--ink)}
.mision-b{color:var(--clay);font-style:italic}

.spine{display:grid;gap:clamp(4rem,8vw,7rem)}
.spine-step{
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;
  align-items:start;
}
.spine-media{grid-column:1/7}
.spine-body{grid-column:8/13}
.spine-step:nth-child(even) .spine-media{grid-column:7/13;order:2}
.spine-step:nth-child(even) .spine-body{grid-column:1/6;order:1}
.spine-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.spine-media.is-plano img{object-fit:contain;background:var(--bone);padding:clamp(10px,2vw,22px)}

.spine-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.spine-num{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.3rem + .8vw,2rem);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink-2);letter-spacing:-.02em;
}
.spine-out{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.spine-body h3{margin-bottom:.85rem}
.spine-body>p{color:var(--ink-2);max-width:46ch}

.tags-label{
  margin:1.9rem 0 .7rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
  padding-top:.7rem;border-top:1px solid var(--rule);
}
.tags li{
  font-size:.94rem;color:var(--ink);
  padding:.42rem 0 .42rem 1.15rem;position:relative;
}
.tags li::before{
  content:"";position:absolute;left:0;top:calc(.42rem + .82em);
  width:6px;height:1px;background:var(--moss);
}
.spine-body .link{margin-top:1.4rem}

@media (max-width:900px){
  .spine-media,.spine-body,
  .spine-step:nth-child(even) .spine-media,
  .spine-step:nth-child(even) .spine-body{grid-column:1/-1;order:initial}
  .spine-body{margin-top:1.8rem}
  .spine-step:nth-child(even) .spine-media{order:0}
  .spine-step:nth-child(even) .spine-body{order:1}
}

/* La cuarta línea de servicio. Mismo peso que un pilar —imagen y cuerpo, la
   misma retícula de 12— pero sin número y separada por un filete: es paralela
   a las tres etapas, no la cuarta. */
/* Ya no necesita filete ni aire propio para separarse: tiene banda. */
.linea{
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start;
}
/* Cuatro columnas y no cinco, y la razon esta en media.json: los fotogramas
   del vuelo ambiental existen solo a 828 px porque los originales no estan
   disponibles. A 1/6 la caja pedia 994 px para verse nitida a 2x; a 1/5 pide
   ~784 y el archivo alcanza. El slot se dimensiona por el material que hay,
   no al reves. */
.linea-media{grid-column:1/5}
.linea-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.linea-body{grid-column:6/13}
.linea-body h3{margin-bottom:.9rem}
.linea-body p{color:var(--ink-2);max-width:52ch;margin-bottom:1.5rem}

/* Las dos referencias. Sin caja y sin botón: son punteros a lo que se
   pregunta después de leer los servicios, no una oferta más. El peso lo
   llevan la regla de arriba y el epígrafe. */
.refs{
  margin-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--rule);padding-top:1.4rem;
}
.refs-t{
  margin:0 0 .3rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.refs li{border-bottom:1px solid var(--rule-soft)}
.refs li:last-child{border-bottom:0}
.refs a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1rem 0;color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  transition:color .22s var(--ease);
}
/* La flecha va dibujada y no como glifo, igual que el tirador del comparador:
   el mismo trazo que el resto de los iconos del sitio. Antes era un content
   con la secuencia unicode y el escape salio mal escrito al generar el
   archivo, asi que pintaba un caracter de control y un "92" suelto. */
.refs a svg{
  flex:none;width:18px;height:18px;fill:none;stroke:var(--ink-2);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease),stroke .22s var(--ease);
}
.refs a:hover{color:var(--clay)}
.refs a:hover svg{transform:translateX(4px);stroke:var(--clay)}

@media (max-width:900px){
  .linea-media,.linea-body{grid-column:1/-1}
  .linea-body{margin-top:1.8rem}
}

/* Nota destacada dentro de una banda. */
.note{
  margin-top:clamp(4rem,8vw,7rem);
  border-top:1px solid var(--rule);
  padding-top:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start;
}
.note-body{grid-column:1/8}
.note-body h3{margin-bottom:.9rem}
.note-body p{color:var(--ink-2);max-width:58ch}
.note-action{grid-column:9/13;justify-self:start;padding-top:.4rem}
@media (max-width:900px){
  .note-body,.note-action{grid-column:1/-1}
  .note-action{margin-top:1.4rem}
}

/* --------------------------------------------------------------------------
   9. Nube de puntos — banda oscura
   -------------------------------------------------------------------------- */
.nube-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.nube-body{grid-column:1/6}
.nube-media{grid-column:6/13;position:relative;display:block;overflow:hidden;border-radius:2px}
.nube-body h2{color:var(--paper)}
.nube-body .lead{margin-bottom:2rem}

.facts{
  display:flex;gap:clamp(1.6rem,3vw,2.6rem);
  margin:0 0 2.2rem;padding-top:1.4rem;border-top:1px solid var(--rule-dark);
}
.facts li{display:flex;flex-direction:column;gap:.25rem}
.facts b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  color:var(--clay-light);
}
.facts span{font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}

.nube-media img,.nube-media video{width:100%;aspect-ratio:16/9;object-fit:cover}
.nube-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);
}
.nube-media video.visible{opacity:1}
.nube-badge{
  position:absolute;left:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(36,31,24,.82);
  backdrop-filter:blur(8px);
  color:var(--paper);
  font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.55rem .9rem;border-radius:2px;
  border:1px solid rgba(243,239,230,.2);
  transition:background .24s var(--ease),color .24s var(--ease);
}
.nube-media:hover .nube-badge{background:var(--clay-light);color:var(--soil);border-color:var(--clay-light)}
.nube-badge svg{width:14px;height:14px}

@media (max-width:960px){
  .nube-body,.nube-media{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   10. Quiénes somos + nómina del equipo
   -------------------------------------------------------------------------- */
.somos-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.somos-media{grid-column:1/6}
.somos-body{grid-column:7/13}
.somos-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.somos-body h2{margin-bottom:1.4rem}
.somos-body>p{color:var(--ink-2);max-width:56ch}

/* Como el resto de las rejillas de 12 columnas de esta hoja. Sin esto la
   seccion seguia en dos columnas en un telefono: 161 px para el texto, y
   .stat se salia de la pantalla arrastrando la pagina entera de lado.
   900px y no otro: es el corte de .roster-item, la otra rejilla de esta
   misma seccion. */
@media (max-width:900px){
  .somos-media,.somos-body{grid-column:1/-1}
}

.stat{
  /* minmax(0,1fr) y no 1fr: un 1fr no baja del ancho de la palabra mas
     larga que contiene, y en un hueco estrecho desborda en silencio. */
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start;
  margin:2.2rem 0;padding:1.6rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.stat b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,2rem + 2.2vw,4rem);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:-.035em;
  color:var(--clay);
}
.stat span{font-size:.95rem;color:var(--ink-2);line-height:1.55}

.values{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.values li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500}
.values svg{width:13px;height:13px;color:var(--moss);flex:none}

.roster{margin-top:clamp(4.5rem,9vw,8rem);border-top:1px solid var(--rule)}
.roster-item{
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;
  padding:clamp(1.8rem,3.5vw,2.8rem) 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.roster-mono{
  grid-column:1/2;
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.08em;
  color:var(--ink-2);
}
.roster-who{grid-column:2/7}
.roster-who h3{margin-bottom:.4rem}
.roster-role{margin:0;font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
.roster-cred{grid-column:8/13;color:var(--ink-2);font-size:.97rem}
@media (max-width:900px){
  .roster-mono{display:none}
  .roster-who{grid-column:1/-1}
  .roster-cred{grid-column:1/-1;margin-top:.9rem}
}

/* --------------------------------------------------------------------------
   11. Enfoque — la fórmula
   -------------------------------------------------------------------------- */
.formula{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:clamp(16px,2.5vw,32px);
  align-items:start;
}
.formula-item{display:flex;flex-direction:column;gap:.9rem}
.formula-ico{color:var(--moss)}
.formula-ico svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.formula-item h4{margin:0}
.formula-item p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.formula-plus{
  font-family:var(--serif);font-size:1.6rem;color:var(--ink-2);
  align-self:center;line-height:1;padding-top:1.6rem;
}
@media (max-width:1000px){
  .formula{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,44px)}
  .formula-plus{display:none}
}
@media (max-width:520px){
  .formula{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   12. Dos escalas
   -------------------------------------------------------------------------- */
.scales{display:grid;gap:clamp(3.5rem,7vw,6.5rem)}
.scale{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.scale-media{grid-column:1/8}
.scale-body{grid-column:8/13}
.scale:nth-child(even) .scale-media{grid-column:6/13;order:2}
.scale:nth-child(even) .scale-body{grid-column:1/5;order:1}
.scale-media img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:2px;background:var(--bone)}
.scale-tag{
  margin:0 0 .8rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.scale-body h3{margin-bottom:1.3rem}
.checklist li{
  font-size:.96rem;line-height:1.5;
  padding:.65rem 0 .65rem 1.5rem;position:relative;
  border-top:1px solid var(--rule-soft);
}
.checklist li:first-child{border-top:0;padding-top:0}
.checklist li:first-child::before{top:.55em}
.checklist li::before{
  content:"";position:absolute;left:0;top:1.2em;
  width:8px;height:8px;border:1px solid var(--moss);
}
@media (max-width:960px){
  .scale-media,.scale-body,
  .scale:nth-child(even) .scale-media,
  .scale:nth-child(even) .scale-body{grid-column:1/-1;order:initial}
  .scale:nth-child(even) .scale-media{order:0}
  .scale:nth-child(even) .scale-body{order:1}
}

/* --------------------------------------------------------------------------
   13. Metodología
   -------------------------------------------------------------------------- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-dark)}
.band-dark .phases{border-top-color:var(--rule-dark)}
.phase{
  padding:2.2rem clamp(1.4rem,2.5vw,2.4rem) 2.4rem 0;
  border-right:1px solid var(--rule-dark);
}
.phase:last-child{border-right:0}
.phase:not(:first-child){padding-left:clamp(1.4rem,2.5vw,2.4rem)}
.phase-id{
  display:block;
  font-family:var(--serif);font-size:.95rem;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  color:var(--clay-light);margin-bottom:1rem;
}
.phase h3{color:var(--paper);margin-bottom:.9rem}
.phase p{color:var(--bone-dim);font-size:.95rem}
.phase-out{
  margin-top:1.4rem!important;padding-top:.9rem;
  border-top:1px solid var(--rule-dark);
  font-size:.78rem!important;font-weight:600;letter-spacing:.08em;
  color:var(--paper)!important;
  font-variant-numeric:tabular-nums;
}
@media (max-width:900px){
  .phases{grid-template-columns:1fr}
  .phase{border-right:0;border-bottom:1px solid var(--rule-dark);padding:2rem 0}
  .phase:not(:first-child){padding-left:0}
  .phase:last-child{border-bottom:0}
}

.deliverables{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:baseline;
}
.deliverables>span{
  grid-column:1/3;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);
}
.deliverables ul{grid-column:3/13;display:flex;flex-wrap:wrap;gap:.5rem .55rem}
.deliverables li{
  font-size:.86rem;font-weight:500;
  border:1px solid var(--rule-dark);border-radius:2px;
  padding:.5rem .85rem;color:var(--paper);
}
@media (max-width:760px){
  .deliverables>span{grid-column:1/-1;margin-bottom:.4rem}
  .deliverables ul{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   14. Firescaping
   -------------------------------------------------------------------------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.trio-item{padding:2.2rem clamp(1.4rem,2.5vw,2.4rem) 0 0;border-right:1px solid var(--rule)}
.trio-item:last-child{border-right:0}
.trio-item:not(:first-child){padding-left:clamp(1.4rem,2.5vw,2.4rem)}
.trio-ico{color:var(--clay);display:block;margin-bottom:1.2rem}
.trio-ico svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.trio-item h3{margin-bottom:.75rem}
.trio-item p{color:var(--ink-2);font-size:.95rem}
@media (max-width:900px){
  .trio{grid-template-columns:1fr}
  .trio-item{border-right:0;border-bottom:1px solid var(--rule);padding:2rem 0}
  .trio-item:not(:first-child){padding-left:0}
  .trio-item:last-child{border-bottom:0}
}

/* --------------------------------------------------------------------------
   15. Proyecto: comparador, galería, inversión
   -------------------------------------------------------------------------- */
.ba{margin:0;position:relative}
.ba-frame{
  position:relative;overflow:hidden;border-radius:2px;
  aspect-ratio:16/10;background:var(--soil);
  touch-action:pan-y;cursor:ew-resize;
}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-tag{
  position:absolute;top:16px;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(36,31,24,.78);backdrop-filter:blur(6px);
  color:var(--paper);padding:.42rem .75rem;border-radius:2px;
  pointer-events:none;
}
.ba-tag-l{left:16px}
.ba-tag-r{right:16px}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;
  background:rgba(243,239,230,.85);pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:var(--pos,50%);
  transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:var(--paper);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  cursor:ew-resize;padding:0;
  box-shadow:0 8px 26px -12px rgba(20,17,12,.55);
  transition:background .2s var(--ease),transform .12s var(--ease);
}
.ba-handle:hover{background:#fff}
.ba-handle:active{transform:translate(-50%,-50%) scale(.96)}
.ba-handle svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba figcaption,
.gallery figcaption{
  margin-top:.85rem;font-size:.85rem;color:var(--ink-2);line-height:1.5;
}
.ba figcaption{margin-top:1.1rem}

.gallery{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(3,minmax(150px,20vw));
  gap:clamp(14px,1.8vw,26px);
}
.gallery figure{margin:0;display:flex;flex-direction:column;min-width:0}
.gallery img{width:100%;flex:1;min-height:0;object-fit:cover;border-radius:2px;background:var(--bone)}
.g-1{grid-column:1/5;grid-row:1/3}
.g-2{grid-column:5/7;grid-row:1/2}
.g-3{grid-column:5/7;grid-row:2/3}
.g-4{grid-column:1/3;grid-row:3/4}
.g-5{grid-column:3/5;grid-row:3/4}
.g-6{grid-column:5/7;grid-row:3/4}
.gallery figcaption{margin-top:.6rem;font-size:.78rem}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
  .gallery figure{grid-column:auto!important;grid-row:auto!important}
  .gallery img{aspect-ratio:4/3;flex:none}
  .g-1{grid-column:1/-1!important}
  .g-1 img{aspect-ratio:16/10}
}

/* Inversión referencial: lo mejor compuesto de la página. */
.invest{
  margin-top:clamp(4.5rem,9vw,8rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,64px);
  border-top:1px solid var(--rule);padding-top:clamp(2.4rem,5vw,3.6rem);
}
.invest-head{grid-column:1/5}
.invest-head h3{margin-bottom:1rem}
.invest-head p{color:var(--ink-2);font-size:.95rem}
.invest-body{grid-column:6/13}
.invest-list li{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);
}
.invest-list li>span{font-size:.97rem;color:var(--ink-2);line-height:1.45}
.invest-list li>b{
  font-family:var(--serif);font-weight:400;font-size:1.45rem;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;
  white-space:nowrap;
}
.invest-total{
  border-bottom:0!important;border-top:2px solid var(--ink)!important;
  margin-top:.6rem;padding-top:1.4rem!important;
}
.invest-total>span{color:var(--ink)!important;font-weight:600;font-size:1rem!important}
.invest-total>b{font-size:clamp(1.9rem,1.5rem + 1.3vw,2.7rem)!important;color:var(--clay)}
.invest-total small{font-size:.9rem;color:var(--ink-2);letter-spacing:0;font-family:var(--sans);font-weight:500}
.invest-fx,
.invest-note{margin:1.4rem 0 0;font-size:.85rem;color:var(--ink-2);max-width:62ch}
.invest-fx+.invest-note{margin-top:.7rem}
.invest-cta{margin-top:2rem}
@media (max-width:900px){
  .invest-head,.invest-body{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   16. Testimonios
   -------------------------------------------------------------------------- */
.testi{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,64px)}
.testi figure{
  margin:0;padding:clamp(1.8rem,3.5vw,2.6rem) 0;
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;
}
.testi blockquote{
  margin:0 0 1.5rem;
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.05rem + .5vw,1.42rem);
  line-height:1.4;letter-spacing:-.014em;
  color:var(--ink);
  flex:1;
}
.testi blockquote::before{content:"«";color:var(--rule);margin-right:.12em}
.testi blockquote::after{content:"»";color:var(--rule);margin-left:.12em}
.testi figcaption{display:flex;flex-direction:column;gap:.2rem}
.testi-name{font-size:.92rem;font-weight:600}
.testi-ctx{font-size:.82rem;color:var(--ink-2)}
.testi-origen{
  margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--ink-2);
}
@media (max-width:820px){
  .testi{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   17. Contacto
   -------------------------------------------------------------------------- */
.contacto-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.contacto-intro{grid-column:1/6}
.contacto-form{grid-column:7/13}
.contacto-intro h2{color:var(--paper);margin-bottom:1.3rem}
.contacto-intro>p{color:var(--bone-dim);max-width:46ch;margin-bottom:2rem}

.contact-list{margin-top:2.6rem;border-top:1px solid var(--rule-dark)}
.contact-list li{
  display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--rule-dark);
  font-size:.95rem;
}
.cl-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
@media (max-width:480px){
  .contact-list li{grid-template-columns:1fr;gap:.2rem}
}

.contacto-form{
  background:var(--bone);color:var(--ink);
  padding:clamp(1.8rem,3.5vw,2.6rem);
  border-radius:2px;
}
.form-title{
  font-family:var(--serif);font-size:1.45rem;letter-spacing:-.014em;
  margin:0 0 1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);
}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.05rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.98rem;color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  padding:.6rem 0;border-radius:0;
  transition:border-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6357' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;background-size:12px;
  padding-right:1.6rem;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--ink-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--clay);border-bottom-width:2px;padding-bottom:calc(.6rem - 1px);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid{border-bottom-color:#9c2f22}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contacto-form .btn{margin-top:.9rem}
.form-status{margin:.9rem 0 0;font-size:.88rem;min-height:1.3em}
.form-status[data-state="ok"]{color:var(--moss)}
.form-status[data-state="error"]{color:#9c2f22}
@media (max-width:960px){
  .contacto-intro,.contacto-form{grid-column:1/-1}
}
@media (max-width:520px){
  .field-row{grid-template-columns:1fr;gap:0}
}

/* --------------------------------------------------------------------------
   18. Pie
   -------------------------------------------------------------------------- */
.site-footer{background:var(--soil-2);color:var(--paper);padding-block:clamp(3rem,6vw,4.5rem)}
.footer-inner{
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start;
}
.footer-brand{grid-column:1/5}
.footer-logo{height:32px;width:auto;margin-bottom:.9rem}
.footer-brand p{margin:0;font-size:.82rem;letter-spacing:.06em;color:var(--bone-dim)}
.footer-nav{grid-column:6/13;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:flex-end}
.footer-nav a{font-size:.88rem;color:var(--bone-dim);transition:color .2s var(--ease)}
.footer-nav a:hover{color:var(--paper)}
.footer-copy{
  grid-column:1/13;margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding-top:1.4rem;
  border-top:1px solid var(--rule-dark);
  font-size:.8rem;color:var(--bone-dim);
}
.footer-copy a{color:var(--paper)}
@media (max-width:820px){
  .footer-brand,.footer-nav{grid-column:1/-1}
  .footer-nav{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   19. Modal de agenda y WhatsApp
   -------------------------------------------------------------------------- */
.booking-modal{
  position:fixed;inset:0;z-index:120;
  display:none;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);
}
.booking-modal.open{display:flex}
/* main.js bloquea el scroll con esta clase en el <body>. */
body.no-scroll{overflow:hidden}
.booking-backdrop{position:absolute;inset:0;background:rgba(20,17,12,.72);backdrop-filter:blur(4px)}
.booking-dialog{
  position:relative;width:min(760px,100%);max-height:90dvh;
  background:var(--paper);border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(20,17,12,.6);
  display:flex;flex-direction:column;overflow:hidden;
}
.booking-close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  transition:background .2s var(--ease);
}
.booking-close:hover{background:var(--paper-deep)}
.booking-close svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.5}
/* El iframe crece como hijo flexible. Con height:100% se quedaba en los
   150 px por defecto: el porcentaje pedia una altura declarada en el
   padre, y aqui la altura la da flex:1. */
.booking-frame{flex:1;min-height:min(620px,72dvh);display:flex}
.booking-frame iframe{flex:1;width:100%;min-height:inherit;border:0;display:block}
.booking-fallback{
  margin:0;padding:.95rem 1.2rem;border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--ink-2);background:var(--bone);
}

.wa{
  position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -12px rgba(20,17,12,.55);
  transition:transform .24s var(--ease);
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px;fill:currentColor}

/* --------------------------------------------------------------------------
   20. Página interior de lectura
   -------------------------------------------------------------------------- */
.page-lead{
  padding-block:clamp(4.5rem,9vw,8rem) clamp(2.5rem,5vw,4rem);
}
.page-lead h1{
  font-size:clamp(2.3rem,1.5rem + 3.4vw,4.2rem);
  max-width:20ch;letter-spacing:-.026em;
}
.page-body{padding-bottom:var(--band)}
/* La medida la llevan los elementos de texto, no el contenedor: así la prosa
   se lee a 60ch (≈ 68 caracteres reales) contra el mismo borde izquierdo que
   el registro y el titular, y las imágenes salen de esa columna para ocupar el
   ancho completo. Con la medida puesta en el contenedor, las láminas quedaban
   encajonadas al ancho del texto. */
.reading{max-width:none;margin-inline:0;--medida:37rem}
/* La medida va en rem, no en ch: `ch` se resuelve contra la fuente de cada
   elemento, así que el mismo 60ch daba 666 px en el cuerpo y 1328 px en un
   titular — es decir, ninguna medida en los titulares. 37rem son ~68
   caracteres reales de Inter, medidos, y el titular comparte columna. */
.reading>p,
.reading>h2,
.reading>h3,
.reading>ul,
.reading>.datos,
.reading>.page-actions,
.reading figcaption{max-width:var(--medida)}
.reading>p{color:var(--ink-2);font-size:clamp(1.02rem,1rem + .2vw,1.1rem)}
.reading>p strong{color:var(--ink)}
.reading h2{
  font-size:clamp(1.65rem,1.3rem + 1.4vw,2.35rem);
  margin:clamp(2.8rem,5vw,4rem) 0 1.2rem;
  padding-top:clamp(2.8rem,5vw,4rem);
  border-top:1px solid var(--rule);
}
.reading h2:first-child{margin-top:0;padding-top:0;border-top:0}
.reading figure{margin:clamp(2.4rem,4.5vw,3.6rem) 0}
.reading figure img{width:100%;border-radius:2px}
.reading figcaption{margin-top:.8rem;font-size:.85rem;color:var(--ink-2)}
/* Las imágenes salen de la medida de lectura y ocupan el ancho del contenedor,
   ancladas al mismo borde izquierdo. */
.figure-wide{max-width:none;width:100%;margin-inline:0}

/* Plazo y precio: son cifras vivas, y el sistema dice que las cifras se tratan.
   El texto va íntegro; solo se separa el número del resto de la frase. */
.datos{margin:1.9rem 0 0;border-top:1px solid var(--rule)}
.datos>div{
  display:grid;grid-template-columns:minmax(9rem,auto) 1fr;
  gap:.35rem 2rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--rule);
}
.datos b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);
  line-height:1;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--clay);white-space:nowrap;
}
.datos p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.55}
@media (max-width:640px){
  .datos>div{grid-template-columns:1fr;gap:.5rem}
}

.etapas{margin:1.8rem 0;border-top:1px solid var(--rule)}
.etapas li{
  display:grid;grid-template-columns:minmax(11rem,1fr) 2fr;gap:.4rem 2rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.etapas li>span{font-size:.92rem;color:var(--ink-2)}
.etapas .link{border-bottom-width:1px}
@media (max-width:640px){
  .etapas li{grid-template-columns:1fr}
}
.page-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* El esquema de la ficha, a escala de página. Son tres marcas y no un
   rediseño: la entrada en tinta plena, el límite del servicio sobre superficie
   propia y el remate en la serif. Es lo que hace que llegar por Google y
   llegar por la home sean la misma pieza y no dos maneras de escribir. */
.reading>p.reading-lead{
  font-size:clamp(1.18rem,1.06rem + .5vw,1.42rem);
  line-height:1.52;color:var(--ink);
  max-width:33rem;
}
.page-limite{
  max-width:var(--medida);
  margin:clamp(2.8rem,5vw,4rem) 0 0;
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--paper-deep);border-radius:2px;
}
/* Dentro del recuadro el título no lleva el filete ni el aire de los demás
   h2: el propio recuadro ya es la separación. */
.page-limite h2{
  margin:0 0 1rem;padding-top:0;border-top:0;
  font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem);
}
.page-limite p{
  margin:0 0 .9rem;color:var(--ink-2);
  font-size:1rem;line-height:1.66;max-width:none;
}
.page-limite p:last-child{margin-bottom:0}
.page-limite strong{color:var(--ink)}
.reading>p.reading-cierre{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  line-height:1.45;color:var(--ink);
  margin-top:1.7rem;
}

/* --------------------------------------------------------------------------
   21. Panel de servicio
   -------------------------------------------------------------------------- */

/* El disparador. El color NO cambia en reposo: la única terracota de la
   tarjeta sigue siendo el «ver más», que es el destino de verdad. En reposo la
   lista tiene que seguir leyendose como lo que es —la especificación de la
   etapa— y no como nueve enlaces disputándole el primer plano al llamado.

   Los tres estados van en propiedades del propio botón y no en el ::before del
   <li>. Comprobado en el navegador: al añadir la clase al <li>, el ::before no
   se recalcula —sigue en 6 px y verde 900 ms después— aunque el selector
   coincida y la regla esté en la hoja. Lo que sí responde es lo que se aplica
   al elemento que cambia. El subrayado se dibuja con text-decoration por lo
   mismo. */
.tag-abre{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:.26em;
  transition:color .22s var(--ease),text-decoration-color .22s var(--ease);
}
.tag-abre:hover,.tag-abre:focus-visible{
  color:var(--clay);text-decoration-color:rgba(163,79,44,.45);
}

/* El ítem abierto se queda marcado mientras el panel está arriba: es lo que
   hace que al cerrar el ojo vuelva a la línea exacta donde estaba. */
/* En un titular el subrayado no puede nacer transparente: un nombre no se
   lee como pulsable si nada lo insinua. */
.roster-abre{text-decoration-color:var(--rule);text-underline-offset:.16em}
.roster-abre:hover,.roster-abre:focus-visible{text-decoration-color:rgba(163,79,44,.55)}

.tag-abre[aria-expanded="true"]{
  color:var(--clay-deep);text-decoration-color:var(--clay-deep);
}

/* La capa. Ocupa la ventana pero NO la tapa: el velo es liviano a propósito
   y la hoja deja ver la página a su izquierda. Ese resto visible es lo único
   que le dice a quien lee que no se fue a otra parte, que abrió algo. Si
   cubriera todo sería una página con pasos de más. */
.panel{position:fixed;inset:0;z-index:120}
.panel[hidden]{display:none}
.panel-velo{
  position:absolute;inset:0;
  background:rgba(20,17,12,.34);
  opacity:0;
  transition:opacity .24s var(--ease);
}
.panel.is-open .panel-velo{opacity:1;transition-duration:.38s}

/* Entra deslizando, no apareciendo: un fundido lee como modal —interrupción—
   y un deslizamiento lee como capa —aparte—. Y sale más rápido de lo que
   entra: al cerrar la persona ya decidió, no hay nada que mirar. */
.panel-hoja{
  position:absolute;top:0;right:0;bottom:0;
  /* El ancho lo fija la medida de lectura, no el gusto. A 34vw la línea caía
     en 45 caracteres y se picaba; a 40vw con el cuerpo subido a 1.02rem ronda
     los 70, que es donde debe estar. El tope de 700 px deja siempre visible
     mas de la mitad de la pagina detras, que es la condicion de que esto se
     lea como capa y no como pantalla nueva. */
  width:clamp(420px,46vw,820px);max-width:100%;
  background:var(--paper);
  display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(20,17,12,.45);
  transform:translateX(100%);
  transition:transform .24s var(--ease);
}
.panel.is-open .panel-hoja{transform:none;transition-duration:.38s}

/* El scroll vive dentro de la hoja y no se escapa a la página de atrás. Es
   literal lo que se pidió: la home no gana ni un píxel de alto por esto. */
.panel-scroll{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(2rem,3.6vw,3rem) clamp(1.5rem,2.8vw,2.4rem) 1.6rem;
}

.panel-x{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  width:40px;height:40px;display:grid;place-items:center;
  /* El desenfoque no es adorno: la foto de la ficha pasa por debajo al
     desplazar y sin él el aspa se pierde sobre las zonas claras. */
  background:rgba(243,239,230,.82);backdrop-filter:blur(6px);
  border:1px solid var(--rule-soft);border-radius:999px;
  color:var(--ink-2);cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.panel-x:hover{color:var(--ink);border-color:var(--rule)}
.panel-x svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;
}

.panel-ficha[hidden]{display:none}

.panel-etapa{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .75rem;
}
.panel-titulo{
  font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 .85rem;
}
/* La entrada va en tinta plena y el cuerpo en tinta secundaria: dos niveles
   claros, sin necesidad de un tercer tamaño. */
.panel-lead{
  margin:0;font-size:1.12rem;line-height:1.6;color:var(--ink);
}

.panel-fig{margin:clamp(1.5rem,2.8vw,2.1rem) 0 0}
.panel-fig img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;
}
.panel-fig figcaption{
  margin-top:.55rem;
  color:var(--ink-2);font-size:.84rem;line-height:1.5;
}
/* Un plano se muestra entero: aspect-ratio:auto para que la figura tome
   la proporcion de la lamina y no le recorte el titulo ni el pie. */
/* ---- 04 · lista de proyectos -------------------------------------------
   Una tarjeta por proyecto, agrupadas por tipo de encargo. La tarjeta es un
   boton entero y no un enlace con una imagen dentro: lo que se pulsa es el
   proyecto, no su nombre. */
.pro-grupo{margin-top:clamp(2.4rem,4.5vw,3.6rem)}
.pro-grupo-t{
  margin:0 0 1.1rem;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.pro-grupo-i{
  max-width:62ch;margin:0 0 1.6rem;
  color:var(--ink-2);font-size:clamp(.98rem,.95rem + .2vw,1.06rem);
}
.pro-lista{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.2rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.pro-card{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
  display:block;
}
.pro-foto{display:block;overflow:hidden;border-radius:2px;background:var(--bone)}
.pro-foto img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s var(--ease);
}
.pro-card:hover .pro-foto img,
.pro-card:focus-visible .pro-foto img{transform:scale(1.03)}
.pro-nombre{
  display:block;margin-top:.75rem;
  font-family:var(--serif);font-size:1.18rem;line-height:1.2;
  transition:color .22s var(--ease);
}
.pro-card:hover .pro-nombre,
.pro-card:focus-visible .pro-nombre{color:var(--clay)}
.pro-dato{
  display:block;margin-top:.2rem;
  font-size:.8rem;letter-spacing:.06em;color:var(--ink-2);
}

/* Una fotografia que se muestra entera no lleva marco: el hueso alrededor
   de un plano se lee como passepartout y alrededor de una foto, como error. */
.panel-fig.is-entera img{aspect-ratio:auto;object-fit:contain}

.panel-fig.is-plano img{
  aspect-ratio:auto;object-fit:contain;
  background:var(--bone);padding:clamp(10px,2vw,18px);
}
.panel-fig-2{margin-top:1.2rem}
.panel-fig-2 img{
  aspect-ratio:auto;object-fit:contain;background:var(--bone);padding:10px;
}

.panel-bloque{margin-top:clamp(1.7rem,3.2vw,2.4rem)}
.panel-bloque h3{font-size:1.1rem;line-height:1.3;margin:0 0 .65rem}
.panel-bloque p{
  margin:0 0 .85rem;color:var(--ink-2);
  font-size:1.02rem;line-height:1.68;
}
.panel-bloque p:last-child{margin-bottom:0}
.panel-bloque strong{color:var(--ink);font-weight:600}

/* Lo que se entrega va en filete y no en tarjeta: es un inventario, y la
   línea entre ítems basta para separarlos. */
.panel-entrega ul{margin:.5rem 0 0;border-top:1px solid var(--rule-soft)}
.panel-entrega li{
  position:relative;padding:.62rem 0 .62rem 1.15rem;
  border-bottom:1px solid var(--rule-soft);
  color:var(--ink-2);font-size:1rem;line-height:1.6;
}
.panel-entrega li::before{
  content:"";position:absolute;left:0;top:calc(.62rem + .8em);
  width:6px;height:1px;background:var(--moss);
}
.panel-entrega strong{color:var(--ink);font-weight:600}

/* El límite del método, sobre superficie propia. Es la parte que nadie espera
   encontrar y la que hace creíble todo lo de arriba, así que no se esconde al
   final como letra chica: se le da un plano distinto. */
.panel-limite{
  margin-top:clamp(1.9rem,3.6vw,2.6rem);
  padding:clamp(1.15rem,2.2vw,1.5rem);
  background:var(--paper-deep);border-radius:2px;
}
.panel-limite h3{font-size:1.02rem;margin:0 0 .6rem;color:var(--ink)}
.panel-limite p{
  margin:0 0 .75rem;color:var(--ink-2);font-size:.98rem;line-height:1.66;
}
.panel-limite p:last-child{margin-bottom:0}

.panel-pie{
  margin-top:clamp(1.7rem,3.2vw,2.3rem);
  padding-top:1.25rem;border-top:1px solid var(--rule);
}
.panel-cierre{
  font-family:var(--serif);font-size:1.14rem;line-height:1.5;
  color:var(--ink);margin:0 0 1rem;
}

/* Los hermanos de etapa, fijos al pie de la hoja y fuera del scroll. Es lo que
   una página por servicio no puede dar sin tres cargas: leerse los tres
   seguidos sin salir de la capa. */
.panel-nav{
  flex:0 0 auto;
  padding:.95rem clamp(1.5rem,2.8vw,2.4rem) 1.05rem;
  background:var(--bone);border-top:1px solid var(--rule);
}
.panel-nav-t{
  margin:0 0 .55rem;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.panel-nav ul{display:flex;flex-wrap:wrap;gap:.4rem .45rem}
.panel-nav button{
  appearance:none;font:inherit;cursor:pointer;
  font-size:.83rem;line-height:1.2;padding:.42rem .72rem;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--rule);border-radius:999px;
  transition:color .2s var(--ease),border-color .2s var(--ease),
             background-color .2s var(--ease);
}
.panel-nav button:hover{color:var(--ink);border-color:var(--ink-2)}
.panel-nav button[aria-current="true"]{
  color:var(--paper);background:var(--soil);border-color:var(--soil);cursor:default;
}

/* La página de levantamiento dentro de la capa reusa .datos y trae su lista de
   etapas. Dos ajustes de caja, porque .datos se diseñó para una columna de
   lectura de 760 px y aquí vive en 400: sus dos columnas se apilan siempre —la
   media query original mira el ancho de la ventana, no el del contáiner— y la
   cifra baja un punto para que $2.550.000 no parta en dos líneas. */
.panel-scroll .datos{margin:.6rem 0 0}
.panel-scroll .datos>div{grid-template-columns:1fr;gap:.4rem;padding:1.05rem 0}
.panel-scroll .datos b{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem)}

.panel-etapas{margin:.9rem 0 1.1rem;border-top:1px solid var(--rule-soft)}
.panel-etapas li{
  padding:.7rem 0;border-bottom:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:.15rem;
}
.panel-etapas span{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.panel-pie h3{font-size:1.1rem;margin:0 0 .65rem}
.panel-pie>p{color:var(--ink-2);font-size:1.02rem;line-height:1.68;margin:0 0 .85rem}
.panel-accion{margin:1.1rem 0 0}
.panel-accion .btn{width:100%;text-align:center}

/* Jardín en Fuga pide más ancho que una ficha de texto: son planos y el
   comparador se arrastra con el dedo. La hoja crece a 46vw solo para esta
   ficha —sigue dejando ver la página detrás, que es la condición— y la
   galería pasa a dos columnas en cuanto hay sitio. */
/* Antes la ficha del proyecto abría más ancha que las demás y el salto se
   notaba. Ahora la hoja es una sola para todas: lo suficientemente ancha para
   los planos de Jardín en Fuga y lo bastante contenida para que la línea de
   texto no se pase de los 75 caracteres en un monitor grande. */
/* El comparador es la primera imagen de la ficha y necesita separarse de la
   entrada: pegado al texto se lee como una captura sin marco. */
.panel-scroll .ba{margin:clamp(2.2rem,4.5vw,3.4rem) 0 0}
.panel-scroll .gallery{
  display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.6rem;
}
/* ---- La galeria del caso: apertura, proceso y resultado ----------------
   El unico padding lateral de la hoja es --hueco: la imagen final lo anula
   con margen negativo para ocupar el ancho completo, y su pie lo recupera
   para seguir alineado con el texto. */
.panel-scroll{--hueco:clamp(1.5rem,2.8vw,2.4rem)}

.caso-apertura{margin:clamp(1.8rem,3.5vw,2.6rem) 0 0}
.caso-apertura img{
  width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;display:block;
}
.caso-apertura figcaption,
.caso-final figcaption{
  margin-top:.6rem;color:var(--ink-2);font-size:.86rem;line-height:1.5;
}

/* Las cuatro etapas. Mas chicas y enteras: un plano recortado no se entiende,
   asi que van con contain sobre papel. Si el archivo llega en 3:2 exacto,
   llena la caja sin banda. */
.caso-proceso{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,2.6vw,2rem);
  margin:clamp(2rem,4vw,3rem) 0 0;
  counter-reset:none;
}
.caso-proceso>li{margin:0}
.caso-proceso figure{margin:.55rem 0 0}
.caso-proceso img{
  width:100%;aspect-ratio:3/2;object-fit:contain;
  background:var(--bone);border-radius:2px;display:block;
  flex:none;height:auto;padding:8px;
}
/* El pie deja de ser letra chica al pie y pasa a encabezar el paso: es lo que
   convierte cuatro planos sueltos en cuatro momentos del mismo predio. */
.caso-paso{
  display:flex;align-items:baseline;gap:.55rem;
  margin:0;font-size:1rem;line-height:1.35;color:var(--ink);
}
.caso-n{
  font-family:var(--serif);font-size:1.05rem;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--clay);letter-spacing:.01em;flex:none;
}

/* El resultado. Se lleva el ancho entero de la hoja y se ve completo: no se
   le impone formato, manda el del archivo. */
.caso-final{
  margin:clamp(2.4rem,5vw,3.6rem) calc(-1 * var(--hueco)) 0;
}
.caso-final img{
  width:100%;height:auto;display:block;
  background:var(--bone);
}
.caso-final figcaption{padding-inline:var(--hueco)}

/* El presupuesto dentro de la capa. En la home vive en una reticula de 12
   columnas: cabecera a la izquierda y tabla a la derecha. Aqui no hay ancho
   para dos columnas, asi que se apila —y la cifra del total baja un punto
   para que $2.550.000 no parta. */
.panel-scroll .invest{
  display:block;margin-top:clamp(2rem,4vw,2.8rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
}
.panel-scroll .invest-head h3{font-size:1.04rem;margin-bottom:.6rem}
.panel-scroll .invest-head p{font-size:.94rem;line-height:1.6}
.panel-scroll .invest-body{margin-top:1.5rem}
.panel-scroll .invest-list li{gap:1rem;padding:.85rem 0}
.panel-scroll .invest-list li>span{font-size:.92rem}
.panel-scroll .invest-list li>b{font-size:1.25rem}
.panel-scroll .invest-total>b{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)!important}
.panel-scroll .invest-cta{margin-top:1.5rem}
.panel-scroll .invest-cta .btn{width:100%;text-align:center}

/* La tapa del proyecto en la home: es el gancho, no la prueba. La prueba
   —planos, comparador y presupuesto— esta dentro de la capa. */
.proyecto-tapa{margin:clamp(2rem,4vw,3rem) 0 0}
.proyecto-tapa img{
  width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:2px;display:block;
}

/* El remate comercial. Todo el texto del sitio esta escrito para llegar a una
   reunion: ninguna ficha puede terminar en un punto final. Va sobre superficie
   propia y al final del scroll, despues del cierre editorial —no compitiendo
   con el—. */
.panel-cta{
  margin-top:clamp(2rem,4vw,2.8rem);
  padding:clamp(1.3rem,2.6vw,1.8rem);
  background:var(--soil);border-radius:2px;
}
.panel-cta p{
  margin:0 0 1rem;color:rgba(243,239,230,.86);
  font-family:var(--serif);font-size:1.05rem;line-height:1.45;
}
.panel-cta .btn{width:100%;text-align:center}

/* Listas de las fichas que vienen de una seccion de la home. */
.panel-lista{margin:.9rem 0 0;border-top:1px solid var(--rule-soft)}
.panel-lista li{
  position:relative;padding:.6rem 0 .6rem 1.15rem;
  border-bottom:1px solid var(--rule-soft);
  color:var(--ink-2);font-size:1rem;line-height:1.55;
}
.panel-lista li::before{
  content:"";position:absolute;left:0;top:calc(.6rem + .8em);
  width:6px;height:1px;background:var(--moss);
}

/* Las tres fases: mismo tratamiento numerado que las etapas del caso, para
   que un proceso se vea siempre igual en todo el sitio. */
.panel-fases{margin:clamp(1.6rem,3vw,2.2rem) 0 0}
.panel-fases>li{
  padding:1.1rem 0;border-top:1px solid var(--rule-soft);
}
.panel-fases>li:first-child{border-top:0;padding-top:0}
.panel-fases p{margin:.45rem 0 0;color:var(--ink-2);font-size:1.02rem;line-height:1.62}
.panel-fases .caso-paso{margin:0}
.panel-salida{
  color:var(--clay-deep)!important;font-size:.86rem!important;
  font-weight:500;margin-top:.55rem!important;
}

/* Bloqueo del fondo. El ancho de la barra lo mide main.js y lo devuelve como
   relleno: sin eso la página salta unos píxeles al abrir. */
body.panel-abierto{overflow:hidden;padding-right:var(--barra,0px)}

@media (max-width:700px){
  /* En móvil es hoja inferior, no cajón lateral. Mismo criterio: se deja
     asomar la página por arriba para que no se lea como otra pantalla. */
  .panel-hoja{
    top:auto;left:0;right:0;bottom:0;
    width:auto;height:88svh;
    border-radius:14px 14px 0 0;
    transform:translateY(100%);
    box-shadow:0 -20px 50px -18px rgba(20,17,12,.5);
  }
  .panel.is-open .panel-hoja{transform:none}
  .panel-hoja::before{
    content:"";position:absolute;top:8px;left:50%;translate:-50% 0;
    width:38px;height:4px;border-radius:999px;background:var(--rule);
  }
  .panel-scroll{padding-top:2rem}
  .panel-x{top:1.2rem}
}

/* --------------------------------------------------------------------------
   22. Movimiento
   Una sola gramática fuera de la portada: la máscara sube sobre las imágenes.
   -------------------------------------------------------------------------- */
/* El marco recorta; la imagen sube dentro de él. No se recorta el elemento
   observado: Chromium le da intersección cero a un elemento con clip-path y el
   IntersectionObserver no dispara nunca. */
.rise{overflow:hidden}
.rise.will-rise>img,
.rise.will-rise>picture>img{
  transform:translateY(7%) scale(1.07);
  opacity:0;
  transition:transform 1.05s var(--ease),opacity .7s var(--ease);
  will-change:transform,opacity;
}
.rise.is-in>img,
.rise.is-in>picture>img{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rise>img,.rise>picture>img,.rise.will-rise>img,.rise.will-rise>picture>img{transform:none!important;opacity:1!important}
  .hero-frame{opacity:1}
  .hero-frame:not(.is-active){opacity:0}
}

/* --------------------------------------------------------------------------
   23. Impresión
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.wa,.booking,.hero-actions,.hero-steps{display:none!important}
  .band,.hero{padding-block:1.5rem;min-height:0}
  .band-dark,.hero{background:#fff;color:#000}
}

/* --------------------------------------------------------------------------
   Las rejas de 12 columnas en pantalla estrecha

   Once huecos de 32 px suman 352. Un telefono de 360 deja 320 de contenido:
   no caben. Y cuando el gap no cabe, las doce columnas colapsan a 0 y el
   ancho de la reja pasa a ser el del gap — 352 px dentro de un hueco de 320.
   La pagina entera se corre de lado.

   El sintoma que se ve no es ese. Con la pagina corrida, el panel —que es
   `fixed`— se alinea al borde del viewport de diseno y no al de lo que se ve,
   asi que su boton de cerrar queda fuera de la pantalla.

   Por debajo de 900 px todas estas rejas ya ponen a sus hijos en `1/-1` (y el
   unico que conserva una columna parcial, `.roster-mono`, esta en
   `display:none`), o sea que el hueco entre columnas no separa nada. Se
   quita; el de filas se conserva.

   Si se agrega otra reja de 12 columnas, va en esta lista.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .grid,
  .spine-step,
  .linea,
  .note,
  .nube-grid,
  .somos-grid,
  .roster-item,
  .scale,
  .deliverables,
  .invest,
  .contacto-grid,
  .footer-inner{column-gap:0}
}