/* ═══════════════════════════════════════════════════════════════════════════
   moore · Arquitectura & Diseño
   El sitio habla el idioma del Manual de Marca: la lámina de dos columnas
   (rail de datos + campo de trabajo), el filete capilar, la cota y el código
   de sección. Tipografía única: Poppins. Sin colores fuera del sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --black:#000000;
  --sheet:#FFFFFF;
  --paper:#F2F2F2;
  --ink:#111110;
  --mid:#6E6E6B;
  --line-soft:#DCDCDA;
  --line-dark:#2E2E2C;

  --font:'Poppins','Century Gothic','Tw Cen MT',Futura,'Segoe UI',sans-serif;

  --rail:20rem;              /* ancho del rail de datos de la lámina */
  --gutter:clamp(1.25rem,4vw,4.5rem);
  --hair:1px;

  --paso:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--sheet);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
strong{font-weight:600}
::selection{background:var(--ink);color:var(--paper)}

/* ── foco visible, sobrio ────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.en-negro :focus-visible{outline-color:var(--paper)}

/* ── saltar al contenido ─────────────────────────────────────────────────── */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--black);color:var(--paper);padding:.9rem 1.4rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
}
.saltar:focus{left:0}

/* ═══ marca reconstruida ═══════════════════════════════════════════════════
   El logotipo es Poppins; se arma con tipo en vez de un PNG para que escale
   sin pérdida y herede el color del fondo.                                   */
.marca{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none;margin:0;font-weight:inherit}
.marca .mn{font-weight:700;letter-spacing:-.015em;font-size:var(--m,2rem)}
.marca .mt{
  font-weight:500;
  font-size:calc(var(--m,2rem) * .152);
  letter-spacing:.34em;text-indent:.34em;
  margin-top:calc(var(--m,2rem) * .26);
  white-space:nowrap;
}
.marca.sola .mt{display:none}

/* texto solo para lectores de pantalla y buscadores */
.oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ═══ cabecera ════════════════════════════════════════════════════════════ */
.cabecera{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;gap:var(--gutter);
  padding:1.15rem var(--gutter);
  color:var(--paper);
  transition:background .45s var(--paso), color .45s var(--paso),
             padding .45s var(--paso), border-color .45s var(--paso);
  border-bottom:var(--hair) solid transparent;
}
/* velo superior: el menú en blanco tiene que leerse aunque el render
   arranque con cielo claro. Se desvanece cuando la barra se posa. */
.cabecera::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));
  transition:opacity .45s var(--paso);
}
.cabecera.posada::before{opacity:0}
.cabecera > *{position:relative}
.cabecera.posada{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  color:var(--ink);
  border-bottom-color:var(--line-soft);
  padding-top:.75rem;padding-bottom:.75rem;
}
.cabecera .marca{--m:1.55rem;flex:none;align-items:flex-start}
.cabecera nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}
.cabecera nav a{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  font-weight:400;position:relative;padding-block:.3rem;
}
.cabecera nav a:not(.wa)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hair);
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--paso);
}
.cabecera nav a:not(.wa):hover::after,
.cabecera nav a:not(.wa):focus-visible::after{transform:scaleX(1)}
@media (max-width:820px){
  .cabecera nav a:not(.wa){display:none}
  /* sobre la portada el logotipo ya está en grande justo debajo:
     en pantalla angosta aparece recién cuando la barra se posa */
  .cabecera:not(.posada) .marca{opacity:0;pointer-events:none}
  .cabecera .marca{transition:opacity .35s var(--paso)}
}

/* botón WhatsApp */
.wa{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.15rem;border:var(--hair) solid currentColor;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  transition:background .35s var(--paso), border-color .35s var(--paso);
}
.wa svg{width:.95em;height:.95em;flex:none;fill:currentColor}
.wa span{transition:color .35s var(--paso)}
.cabecera .wa:hover,.cabecera .wa:focus-visible{background:currentColor}
.cabecera .wa:hover span,.cabecera .wa:focus-visible span{color:var(--black)}
.cabecera .wa:hover svg,.cabecera .wa:focus-visible svg{fill:var(--black)}
.cabecera.posada .wa:hover span,.cabecera.posada .wa:focus-visible span{color:var(--paper)}
.cabecera.posada .wa:hover svg,.cabecera.posada .wa:focus-visible svg{fill:var(--paper)}

/* ═══ lámina: la unidad de composición del manual ═════════════════════════ */
.lamina{
  display:grid;
  grid-template-columns:minmax(0,var(--rail)) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(4.5rem,9vw,8.5rem) var(--gutter);
  align-items:start;
}
@media (max-width:900px){
  /* en una columna el encabezado de sección ya separa: sobra aire arriba */
  .lamina{grid-template-columns:1fr;gap:2rem;padding-top:clamp(2.25rem,6vw,3.5rem)}
}
.rail{position:sticky;top:6.5rem}
@media (max-width:900px){.rail{position:static}}

.codigo{
  font-weight:600;line-height:1;letter-spacing:.01em;
  font-size:clamp(2.4rem,5.4vw,3.9rem);
  font-variant-numeric:tabular-nums;
}
.rotulo{
  font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  margin:.85rem 0 0;
}
.nota{color:var(--mid);margin:1.35rem 0 0;max-width:34ch}
.nota strong{color:var(--ink)}

/* filete que se dibuja al aparecer */
.filete{
  height:var(--hair);background:var(--ink);margin-top:1.5rem;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--paso);
}
.visible .filete,.filete.visible{transform:scaleX(1)}

/* ═══ encabezado de sección ═══════════════════════════════════════════════ */
.seccion-titulo{
  display:flex;align-items:baseline;gap:clamp(.9rem,2.5vw,2.2rem);
  padding:clamp(4rem,8vw,7rem) var(--gutter) 0;
  scroll-margin-top:5rem;
}
.seccion-titulo .num{
  font-size:.72rem;letter-spacing:.26em;color:var(--mid);
  font-variant-numeric:tabular-nums;flex:none;
}
.seccion-titulo h2{
  margin:0;font-weight:300;letter-spacing:.01em;flex:none;
  font-size:clamp(1.45rem,3.4vw,2.3rem);line-height:1.2;
}
.seccion-titulo .linea{
  flex:1;height:var(--hair);background:var(--line-soft);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--paso) .15s;
}
.seccion-titulo.visible .linea{transform:scaleX(1)}
.seccion-titulo .cuenta{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);flex:none;
}
@media (max-width:620px){
  .seccion-titulo .cuenta{display:none}
}

/* ═══ portada ═════════════════════════════════════════════════════════════ */
.portada{
  min-height:100svh;display:grid;
  grid-template-columns:minmax(0,26rem) minmax(0,1fr);
}
@media (max-width:900px){.portada{grid-template-columns:1fr;min-height:auto}}

.portada .panel{
  background:var(--black);color:var(--paper);
  padding:clamp(6rem,11vh,9rem) var(--gutter) clamp(2.5rem,5vh,3.5rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:3rem;
}
.portada .marca{--m:clamp(3.4rem,6.2vw,4.6rem);align-items:flex-start}
.portada .lema{
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.65;font-weight:300;
  color:#C9C9C6;max-width:26ch;margin:2.5rem 0 0;
}
.portada .lema b{color:#fff;font-weight:500}
.portada .pie{display:flex;flex-direction:column;gap:1.1rem}
.portada .sitio{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:#8A8A87}

.portada .campo{position:relative;overflow:hidden;min-height:52vh;background:var(--paper)}
.portada .campo img{width:100%;height:100%;object-fit:cover;
  animation:asentar 1.6s var(--paso) both}
@keyframes asentar{from{transform:scale(1.07)}to{transform:scale(1)}}
.portada .credito{
  position:absolute;left:0;bottom:0;right:0;
  padding:1.1rem var(--gutter);
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  color:rgba(255,255,255,.9);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
}

/* indicador de scroll — una cota vertical */
.cota-scroll{display:flex;align-items:center;gap:.9rem;color:#8A8A87;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.cota-scroll::before{
  content:"";width:var(--hair);height:3.2rem;background:currentColor;
  animation:respirar 2.6s ease-in-out infinite;transform-origin:top;
}
@keyframes respirar{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ═══ descanso · la pieza tipográfica de B.10 a página completa ═══════════ */
.descanso{
  padding:clamp(6rem,16vh,11rem) var(--gutter);
  text-align:center;
}
.descanso.negro{background:var(--black);color:var(--paper)}
.descanso.gris{background:var(--paper);color:var(--ink)}
.descanso p{
  margin:0 auto;max-width:24ch;
  font-weight:500;text-transform:uppercase;
  font-size:clamp(1.35rem,4.2vw,3rem);
  line-height:1.9;letter-spacing:.2em;
}
.descanso p span{display:block;margin-right:-.2em}
.descanso .glosa{
  margin:clamp(2.5rem,5vh,3.5rem) auto 0;max-width:52ch;
  font-size:.95rem;line-height:1.85;letter-spacing:0;text-transform:none;
  font-weight:300;color:#9A9A97;
}
.descanso.gris .glosa{color:var(--mid)}

/* ═══ obra ════════════════════════════════════════════════════════════════ */
.ficha{margin:0 0 1.9rem;border-top:var(--hair) solid var(--line-soft)}
.ficha > div{
  display:grid;grid-template-columns:7rem 1fr;gap:1rem;
  padding:.62rem 0;border-bottom:var(--hair) solid var(--line-soft);
  font-size:.82rem;
}
.ficha dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);padding-top:.18rem}
.ficha dd{margin:0}

.portada-obra{
  position:relative;overflow:hidden;background:var(--paper);
  cursor:zoom-in;border:0;padding:0;width:100%;display:block;
}
.portada-obra img{width:100%;height:auto;transition:transform 1.1s var(--paso)}
.portada-obra:hover img,.portada-obra:focus-visible img{transform:scale(1.035)}

.tira{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(6rem,12vw,10rem),1fr));
  gap:.55rem;margin-top:.55rem;
}
.tira button{
  padding:0;border:0;background:var(--paper);cursor:zoom-in;overflow:hidden;display:block;
  aspect-ratio:4/3;
}
.tira img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--paso)}
.tira button:hover img,.tira button:focus-visible img{transform:scale(1.06)}

/* ═══ interiorismo · mosaico asimétrico ═══════════════════════════════════ */
.mosaico{
  display:grid;gap:.55rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(9rem,15vw,13rem);
}
.mosaico button{
  padding:0;border:0;background:var(--paper);cursor:zoom-in;overflow:hidden;
  position:relative;display:block;
}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--paso)}
.mosaico button:hover img,.mosaico button:focus-visible img{transform:scale(1.05)}
.mosaico .pie-img{
  position:absolute;left:0;right:0;bottom:0;padding:.85rem .95rem;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
  color:#fff;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;text-align:left;
  opacity:0;transform:translateY(.4rem);transition:opacity .4s,transform .4s var(--paso);
}
.mosaico button:hover .pie-img,.mosaico button:focus-visible .pie-img{opacity:1;transform:none}
.m-ancho{grid-column:span 2}
.m-alto{grid-row:span 2}
@media (max-width:760px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .m-alto{grid-row:span 1}
  .mosaico .pie-img{opacity:1;transform:none}
}

/* ═══ proceso ═════════════════════════════════════════════════════════════ */
.pasos{list-style:none;margin:0;padding:0;border-top:var(--hair) solid var(--line-soft)}
.pasos li{
  display:grid;grid-template-columns:4rem 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,3vw,2.3rem) 0;border-bottom:var(--hair) solid var(--line-soft);
  align-items:baseline;
}
.pasos .n{
  font-size:1.5rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--line-soft);transition:color .5s var(--paso);
}
.pasos li:hover .n{color:var(--ink)}
.pasos h3{margin:0 0 .5rem;font-size:.92rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pasos p{margin:0;color:var(--mid);max-width:56ch}

/* ═══ estudio ═════════════════════════════════════════════════════════════ */
.texto-largo p{margin:0 0 1.4rem;max-width:62ch}
.texto-largo p:last-child{margin-bottom:0}
.texto-largo .destacado{
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.6;font-weight:300;
  color:var(--ink);max-width:34ch;margin-bottom:2.2rem;
}

/* ═══ cierre ══════════════════════════════════════════════════════════════ */
.cierre{
  background:var(--black);color:var(--paper);
  padding:clamp(5rem,12vh,9rem) var(--gutter);
  text-align:center;
}
.cierre h2{
  margin:0 auto;max-width:18ch;font-weight:300;
  font-size:clamp(1.6rem,4.2vw,2.8rem);line-height:1.4;
}
.cierre h2 b{font-weight:600}
.cierre .wa{
  margin-top:clamp(2.2rem,5vh,3.2rem);
  padding:1rem 2.1rem;font-size:.74rem;
  background:var(--paper);border-color:var(--paper);
}
.cierre .wa span,.cierre .wa svg{color:var(--black);fill:var(--black)}
.cierre .wa:hover,.cierre .wa:focus-visible{background:transparent}
.cierre .wa:hover span,.cierre .wa:focus-visible span{color:var(--paper)}
.cierre .wa:hover svg,.cierre .wa:focus-visible svg{fill:var(--paper)}
.cierre .datos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:2rem;
  border-top:var(--hair) solid var(--line-dark);
  font-size:.78rem;color:#C9C9C6;
}
.cierre .datos a{text-decoration:none;border-bottom:var(--hair) solid transparent;transition:border-color .3s}
.cierre .datos a:hover{border-bottom-color:currentColor}
.cierre .datos b{color:#fff;font-weight:500}

.pie-legal{
  background:var(--black);color:#6E6E6B;
  padding:0 var(--gutter) 2.5rem;text-align:center;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
}

/* ═══ visor ═══════════════════════════════════════════════════════════════ */
.visor{
  position:fixed;inset:0;z-index:90;border:0;padding:0;margin:0;
  width:100%;height:100%;max-width:none;max-height:none;
  background:rgba(0,0,0,.96);color:var(--paper);
}
.visor::backdrop{background:rgba(0,0,0,.9)}
.visor[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.visor img{
  width:100%;height:100%;object-fit:contain;
  padding:0 clamp(.5rem,4vw,4rem);
}
.visor .barra{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.1rem var(--gutter);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
}
.visor .barra .titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor .barra .indice{font-variant-numeric:tabular-nums;color:#8A8A87}
.visor button{
  background:none;border:var(--hair) solid #3A3A38;color:inherit;
  font:inherit;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.55rem .9rem;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.visor button:hover{background:var(--paper);color:var(--black);border-color:var(--paper)}
.visor .mando{display:flex;justify-content:center;gap:.6rem;padding:1.1rem var(--gutter) 1.6rem}

/* ═══ aparición al hacer scroll ═══════════════════════════════════════════ */
.revela{opacity:0;transform:translateY(1.6rem);
  transition:opacity .9s var(--paso),transform .9s var(--paso)}
.revela.visible{opacity:1;transform:none}
.revela[data-retardo="1"]{transition-delay:.09s}
.revela[data-retardo="2"]{transition-delay:.18s}
.revela[data-retardo="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revela{opacity:1;transform:none}
  .filete{transform:scaleX(1)}
}

@media print{
  .cabecera,.visor,.cota-scroll{display:none}
  body{background:#fff}
}