/* Studio 11 — sistema de la maqueta aprobada (ago 2026)
   Escala tipográfica de 5 pasos: 42 / 25 / 16 / 12,5 / 10.
   Los tokens --t* y el multiplicador --k se declaran SIEMPRE en el mismo
   elemento; separarlos invalida el calc y todo el texto cae a 16px. */

@font-face{font-family:'Switzer';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/switzer-200.woff2) format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/switzer-300.woff2) format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/switzer-400.woff2) format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/switzer-500.woff2) format('woff2');}

:root{
  --k:1;
  --t1:calc(42px * var(--k));
  --t2:calc(25px * var(--k));
  --t3:calc(16px * var(--k));
  --t4:calc(12.5px * var(--k));
  --t5:calc(10px * var(--k));

  --s:1;                              /* multiplicador de espacio vertical */
  --pad:clamp(24px, 7.222vw, 104px);  /* 104 / 1440 */
  --gutter:clamp(20px, 3.055vw, 44px);

  --paper:oklch(99.2% 0.003 85);
  --ink:oklch(19% 0.006 85);
  --ink-mid:oklch(43% 0.006 85);
  --ink-soft:oklch(55% 0.005 85);
  --night:oklch(17% 0.006 85);
  --snow:oklch(98.5% 0.003 85);
  --snow-soft:oklch(86% 0.004 85);
  --snow-label:oklch(62% 0.005 85);
  --rule:oklch(32% 0.005 85);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* el color del pie es el fondo de la página: lo que asome abajo ya es negro */
html,body{margin:0;background:var(--night);}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:var(--t3);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
p{margin:0;}
h1,h2,h3{margin:0;font-size:inherit;font-weight:inherit;}
img,svg{display:block;max-width:100%;height:auto;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--ink-soft);}

.wrap{max-width:1232px;margin:0 auto;}
.pad{padding-left:var(--pad);padding-right:var(--pad);}
.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;}
.sr-only:focus{position:fixed;top:16px;left:16px;width:auto;height:auto;margin:0;clip:auto;
  padding:12px 16px;background:var(--night);color:var(--snow);z-index:9;
  font-size:var(--t5);font-weight:500;letter-spacing:0.26em;}

:focus-visible{outline:1px solid currentColor;outline-offset:4px;}

/* ---------- tipografía ---------- */
.rubro{font-size:var(--t1);font-weight:200;letter-spacing:0.13em;}
.nombre{font-size:var(--t2);font-weight:300;letter-spacing:0.04em;}
.lugar{font-size:var(--t4);font-weight:500;letter-spacing:0.2em;color:var(--ink-soft);}
.label{font-size:var(--t5);font-weight:500;letter-spacing:0.26em;}

/* ---------- portada ---------- */
/* La portada toma la proporcion exacta de la foto (2000x1250). Con una altura
   fija se recortaba y se agrandaba en cuanto la pantalla no media 1440:
   +5% a 1512, +33% a 1920. Asi se ve el cuadro completo en cualquier ancho. */
.portada{position:relative;aspect-ratio:2000/1250;overflow:hidden;background:var(--night);
  /* La viga negra ocupa del 5,76% al 27,20% del alto de la foto (medido sobre
     el archivo; la viga esta nivelada, no es diagonal). El logo y el menu se
     cuelgan de su borde superior mas un pelo de aire, para que la regla de
     arriba del logo no toque el canto claro del techo. */
  --tapa:6.8%;}
.portada__img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* Entrada: la foto aparece cuando ya esta decodificada y el texto entra un
   poco despues. Solo opacidad; nada crece, nada se desenfoca. */
.js .portada__img{opacity:0;transition:opacity .9s ease;}
.js .portada.lista .portada__img{opacity:1;}
.js .portada__logo,.js .nav,.js .portada__lema{opacity:0;transition:opacity .8s ease .3s;}
.js .portada.lista .portada__logo,.js .portada.lista .nav,.js .portada.lista .portada__lema{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .js .portada__img,.js .portada__logo,.js .nav,.js .portada__lema{opacity:1;transition:none;}
}

.portada__velo{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 52%,rgba(0,0,0,.80) 100%);}
/* El logo, el menu y el lema van colgados de la foto, no de un tamaño fijo:
   la portada crece con la pantalla y si ellos no crecen, la marca se encoge
   contra la viga. A 1440 dan exactamente los valores de la maqueta. */
.portada__logo{position:absolute;top:var(--tapa);left:var(--pad);
  width:clamp(64px, 5.5556vw, 128px);aspect-ratio:4/5;height:auto;color:var(--snow);}
.portada__logo svg{width:100%;height:100%;}
.nav{position:absolute;top:calc(var(--tapa) + 6px);right:var(--pad);display:flex;gap:clamp(20px, 3.0556vw, 70px);}
.nav a{font-size:clamp(10px, 0.6944vw, 16px);}
.nav a{color:var(--snow);}
.nav a:hover{color:var(--snow-soft);}
/* El lema se queda a 78 px del borde de lo que se ve, no del final de la foto:
   si la portada es mas alta que la pantalla, sube lo necesario para no quedar
   cortado por el filo. Con pantalla alta da exactamente los 78 px aprobados. */
.portada__lema{position:absolute;bottom:max(78px, calc(100% - 100svh + 78px));left:var(--pad);right:var(--pad);
  font-size:var(--t3);font-weight:400;letter-spacing:0.34em;color:var(--snow);text-wrap:balance;}

/* En pantallas anchas la portada mide casi mil pixeles de alto y el lema a 16 px
   se pierde. Sube un paso de la misma escala (t2) y cierra el interletrado. */
@media (min-width:1200px){
  .portada__lema{font-size:clamp(20px, 1.7361vw, 40px);letter-spacing:0.22em;}
}

/* ---------- manifiesto ---------- */
.manifiesto{padding-top:calc(210px * var(--s));}
.manifiesto__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);}
.manifiesto__grid .rubro{grid-column:span 3;}
.manifiesto__texto{grid-column:span 8;font-size:var(--t2);font-weight:300;letter-spacing:0.005em;
  line-height:1.62;max-width:54ch;text-wrap:pretty;}

/* ---------- obra ---------- */
.obra{padding-top:calc(230px * var(--s));}
.obra__rubro{padding-bottom:calc(84px * var(--s));}
.pieza{padding-bottom:calc(168px * var(--s));}
.pieza:last-child{padding-bottom:0;}
.pieza img{width:100%;height:auto;}
.ficha{display:flex;flex-direction:column;gap:7px;padding-top:24px;}

.par{display:grid;gap:20px;align-items:start;}
.par picture{display:block;}
.par img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;}
.par--cb{grid-template-columns:624fr 586fr;}
.par--rc{grid-template-columns:639fr 571fr;}
/* el <img> es el ultimo hijo de su <picture>, no el primero: la proporcion
   se fija sobre la celda del grid, no sobre el img directamente */
.par--cb > :first-child img{--ar:624/774;}
.par--cb > :last-child  img{--ar:586/774;}
.par--rc > :first-child img{--ar:639/907;}
.par--rc > :last-child  img{--ar:571/907;}

.pieza--santiago img{aspect-ratio:1232/679;object-fit:cover;}
.pieza--panorama img{aspect-ratio:1232/480;object-fit:contain;}
.pieza--aa img{width:min(600px,60%);aspect-ratio:600/800;object-fit:cover;}
.pieza--antofagasta img{aspect-ratio:1232/702;object-fit:cover;}

/* ---------- casa pv ---------- */
.pv{padding-top:calc(168px * var(--s));}
.pv img{width:100%;aspect-ratio:1232/616;object-fit:cover;}
.pv .ficha{padding-top:26px;}

/* ---------- enfoque ---------- */
.enfoque{padding-top:calc(210px * var(--s));padding-bottom:calc(230px * var(--s));}
.enfoque__rubro{padding-bottom:calc(84px * var(--s));}
.enfoque__grid{display:grid;grid-template-columns:1.35fr 1fr 1.08fr;gap:clamp(32px,4.44vw,64px);align-items:start;}
.etapa{display:flex;flex-direction:column;gap:14px;}
.etapa p:last-child{font-size:var(--t3);font-weight:300;letter-spacing:0.005em;color:var(--ink-mid);
  line-height:1.92;text-wrap:pretty;}

/* ---------- contacto ---------- */
/* El pie mide al menos una pantalla. Sin esto su borde superior queda por
   debajo del tope de scroll y el enlace CONTACTO no puede llevarlo arriba:
   el navegador se queda a medias y parece que rebota. El aire que sobra se
   va entre el formulario y la regla, no en hueco muerto al final. */
.contacto{background:var(--night);color:var(--snow);
  padding-top:calc(170px * var(--s));padding-bottom:64px;
  min-block-size:100svh;display:flex;flex-direction:column;}
.contacto > .wrap{flex:1;display:flex;flex-direction:column;width:100%;}
.contacto__grid{margin-bottom:auto;}
.contacto .rubro{color:var(--snow);}
.contacto__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);}
.contacto__datos{grid-column:span 5;display:flex;flex-direction:column;gap:30px;}
.datos{display:flex;flex-direction:column;gap:12px;padding-top:10px;}
.datos p,.datos a{font-size:var(--t3);font-weight:300;letter-spacing:0.08em;color:var(--snow-soft);}
.datos a:hover{color:var(--snow);}
.datos .domicilio{line-height:1.6;}

.forma{grid-column:6 / span 7;display:flex;flex-direction:column;gap:28px;}
.campo{display:flex;flex-direction:column;gap:10px;}
.campo label{font-size:var(--t5);font-weight:500;letter-spacing:0.26em;color:var(--snow-label);}
.campo input,.campo textarea{
  font:inherit;font-size:var(--t3);color:var(--snow);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:0 0 6px;width:100%;}
.campo textarea{height:62px;resize:none;overflow:hidden;line-height:1.6;}
.campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--snow);}
/* campo trampa para robots: nunca lo ve ni lo tabula una persona */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.forma__pie{padding-top:8px;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;}
.enviar{font-size:var(--t5);font-weight:500;letter-spacing:0.26em;color:var(--snow);
  background:transparent;border:0;border-bottom:1px solid var(--snow);
  padding:0 0 8px;white-space:nowrap;cursor:pointer;font-family:inherit;}
.enviar:hover{color:var(--snow-soft);border-bottom-color:var(--snow-soft);}
.aviso{font-size:var(--t5);font-weight:500;letter-spacing:0.26em;color:var(--snow-label);}

.linea{height:1px;background:var(--rule);margin:104px 0 32px;border:0;}
.pie{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
.pie__logo{width:64px;height:80px;color:var(--snow);}
.pie__logo svg{width:100%;height:100%;}
.pie__redes{display:flex;gap:28px;}
.pie__redes a{font-size:var(--t5);font-weight:500;letter-spacing:0.26em;color:var(--snow-label);}
.pie__redes a:hover{color:var(--snow);}

/* En cualquier aparato tactil, no solo en celular: la tableta tambien se toca
   con el dedo y ahi los campos seguian midiendo 26 px. */
@media (pointer: coarse){
  .campo input{min-height:44px;padding-bottom:8px;}
  .campo textarea{height:88px;}
  /* 16 px es el minimo que exige Safari de iPhone: por debajo de eso hace un
     acercamiento automatico al tocar el campo Y NO REGRESA. No es un capricho
     de tamaño, es la unica forma de que no te secuestre el zoom. */
  .campo input,.campo textarea{font-size:16px;}
  .enviar,.nav a,.pie__redes a,.datos a{touch-action:manipulation;}
}

/* Area de toque. En celular los enlaces miden 13 o 14 px de alto y son
   dificiles de atinar. Se agranda la zona sensible con relleno y se compensa
   con margen negativo: no se mueve un solo pixel de lo que se ve. */
.nav a,.pie__redes a,.datos a{padding:15px 6px;margin:-15px -6px;}
.enviar{padding:12px 6px 20px;margin:-12px -6px -12px;}

/* ---------- escalones ----------
   La escala se mueve completa: se cambian --k y los cinco pasos juntos,
   nunca uno solo (aplanarla rompe la jerarquía). */
@media (max-width:1100px){
  :root{
    --k:0.94;
    --t1:calc(42px * var(--k));--t2:calc(25px * var(--k));--t3:calc(16px * var(--k));
    --t4:calc(12.5px * var(--k));--t5:calc(10px * var(--k));
    --s:0.72;
  }
  .manifiesto__grid .rubro{grid-column:span 12;}
  .manifiesto__texto{grid-column:span 12;}
  .contacto__datos{grid-column:span 12;}
  .forma{grid-column:span 12;}
  .linea{margin:72px 0 32px;}
}

/* tres bloques en dos columnas dejan uno solo abajo: por debajo de 900 se apilan */
@media (max-width:900px){
  .enfoque__grid{grid-template-columns:1fr;row-gap:44px;}
}

@media (max-width:700px){
  :root{
    --k:0.9;
    --t1:calc(42px * var(--k));--t2:calc(25px * var(--k));--t3:calc(16px * var(--k));
    --t4:calc(12.5px * var(--k));--t5:calc(10px * var(--k));
    --s:0.5;
  }
  /* En celular la portada usa SU PROPIO recorte del original, vertical, con la
     escalera completa. No es una ventana del recorte apaisado. La viga negra
     queda del 4,28% al 15,82% del alto, de ahi el --tapa nuevo. */
  /* La viga del recorte vertical mide 77 px de alto en un telefono de 390, y el
     logo de 64x80 no cabia: su regla de abajo se salia al muro de laja. A 56x70
     entra completo con aire arriba y abajo. */
  .portada{height:auto;max-height:none;aspect-ratio:1543/2661;--tapa:4.9%;}
  .portada__img{object-position:center;}
  .portada__logo{width:56px;aspect-ratio:4/5;height:auto;}
  .nav{gap:clamp(14px,4.6vw,24px);}
  /* El lema crece lo mas que puede SIN partirse en dos renglones. A 14,4 con el
     interletrado de siempre se iba a dos lineas y una firma de tres palabras
     partida se lee como accidente. 13 px con 0,2em cabe hasta en pantallas de
     360 y conserva el aire entre letras. */
  .portada__lema{bottom:max(48px, calc(100% - 100svh + 48px));font-size:clamp(10.5px, 3.3vw, 14px);letter-spacing:0.2em;white-space:nowrap;}
  .manifiesto__texto{font-size:var(--t3);line-height:1.75;}
  .par{gap:14px;grid-template-columns:1fr;}
  .pieza--aa img{width:100%;}
  .ficha{padding-top:18px;}
  /* Sin raya divisoria: el formulario ya termina en cuatro rayas seguidas y
     una quinta no separa, se lee como un campo mas. Se conserva el espacio. */
  /* Mas aire entre obras. En escritorio son 168 px con fotos de ~800 de alto;
     en celular eran 84 con fotos del mismo alto o mas (la pareja de Casa RC
     corre 1018), asi que el corte entre una obra y la siguiente no se leia. */
  .pieza{padding-bottom:130px;}
  .pv{padding-top:130px;}
  .linea{background:transparent;margin:56px 0 28px;}

  .pie{align-items:center;}
}