/* ═══════════════════════════════════════════════════════════
   ALDAZ FERRÁN — sistema visual
   Monocromo absoluto. Sin acento. La obra pone el color.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── rampa de grises: único eje cromático de la página ── */
  --k-000:#050505;
  --k-04 :#0b0b0b;
  --k-08 :#131313;
  --k-12 :#1c1c1c;
  --k-16 :#252525;
  --k-22 :#313131;
  --k-30 :#424242;
  --k-42 :#5b5b5b;
  --k-56 :#787878;
  --k-70 :#9d9d9d;
  --k-82 :#c2c2c2;
  --k-90 :#dcdcdc;
  --k-95 :#ebebeb;
  --k-98 :#f4f4f4;
  --k-100:#fcfcfc;

  /* ── escala de espaciado, base 4 ── */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px;  --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;
  --s11:168px; --s12:224px;

  --pad-x:clamp(20px,4.4vw,68px);
  --gutter:clamp(0px,3vw,44px);          /* margen del código de lámina */

  /* ── tipografía ── */
  --display:'Italiana',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;

  --t-micro:clamp(9px,.62vw,10.5px);
  --t-small:clamp(11px,.78vw,13px);
  --t-body:clamp(14px,1.02vw,16.5px);
  --t-lead:clamp(17px,1.35vw,21px);
  --t-h3:clamp(22px,2.1vw,30px);
  --t-h2:clamp(30px,4.3vw,62px);
  --t-h1:clamp(38px,6.1vw,92px);

  --track-wide:.42em;
  --track-mid:.28em;
  --track-tight:.03em;

  /* ── movimiento ── */
  --dur-1:140ms;
  --dur-2:280ms;
  --dur-3:560ms;
  --dur-4:900ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);

  --rule:1px solid var(--k-22);
  --rule-light:1px solid var(--k-90);
}

/* ── grano de emulsión: pertenece a la fotografía, no es un velo global ── */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

::selection{background:var(--k-98);color:var(--k-000)}
.slab ::selection,.slab--method ::selection{background:var(--k-000);color:var(--k-98)}

:root{
  scrollbar-color:var(--k-30) var(--k-000);
  scrollbar-width:thin;
}
.slab{scrollbar-color:var(--k-82) var(--k-98)}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--k-000);
  color:var(--k-98);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ol,ul,figure,blockquote,table{margin:0;padding:0}
ol,ul{list-style:none}
img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

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

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:var(--pad-x);top:-100px;z-index:80;
  padding:var(--s3) var(--s5);
  background:var(--k-98);color:var(--k-000);
  font-size:var(--t-micro);letter-spacing:var(--track-mid);
  text-transform:uppercase;
  transition:top var(--dur-2) var(--ease-out);
}
.skip:focus{top:var(--s4)}

/* ═══ TIPOGRAFÍA COMPARTIDA ═══ */

.eyebrow{
  font-size:var(--t-micro);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  font-weight:400;
  color:var(--k-56);
}
.eyebrow--light{color:var(--k-70)}

h1{
  font-family:var(--sans);
  font-size:var(--t-h1);
  font-weight:100;
  line-height:.98;
  letter-spacing:.09em;
  text-transform:uppercase;
}

h2{
  font-family:var(--sans);
  font-size:var(--t-h2);
  font-weight:200;
  line-height:1.06;
  letter-spacing:.02em;
}

h3{
  font-family:var(--sans);
  font-size:var(--t-h3);
  font-weight:200;
  line-height:1.1;
  letter-spacing:.03em;
}

/* ═══ PLACA / PLACEHOLDER ═══ */

.plate{
  position:relative;
  background:var(--k-12);
  overflow:hidden;
  isolation:isolate;
  /* cover ya declarado: meter la foto real es una sola linea
     (background-image sobre .plate--hero o .plate--vano) */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* el mundo es monocromo absoluto: cualquier foto entra en gris,
     venga en color o no. Asi no depende de como se exporto. */
  filter:grayscale(1);
}
.plate > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.plate::after{
  content:"";
  position:absolute;inset:0;
  background-image:var(--grain);
  background-size:180px 180px;
  opacity:.16;
  mix-blend-mode:screen;
  pointer-events:none;
}

/* la marca vertical de lámina pendiente */
.ph{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--sans);
  font-weight:200;
  font-size:var(--t-small);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--k-70);
  white-space:nowrap;
  z-index:2;
  user-select:none;
}
.ph--xl{
  font-size:clamp(12px,1.05vw,16px);
  letter-spacing:.72em;
  color:var(--k-70);
}

/* ═══ CABECERA ═══ */

.top{
  position:absolute;
  top:0;left:0;right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--s6) var(--pad-x);
}
.top::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:190px;
  background:linear-gradient(180deg,rgba(5,5,5,.90) 0%,rgba(5,5,5,.52) 38%,rgba(5,5,5,0) 100%);
  z-index:-1;
  pointer-events:none;
}

.mark{
  font-family:var(--display);
  font-size:clamp(19px,1.62vw,26px);
  letter-spacing:.34em;
  text-transform:uppercase;
  line-height:1;
  color:var(--k-98);
  transition:opacity var(--dur-2) var(--ease);
}
.mark:hover{opacity:.62}
.mark:active{opacity:.4}

.slash{
  appearance:none;border:0;background:none;padding:var(--s2);margin:calc(var(--s2) * -1);
  color:var(--k-98);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  letter-spacing:.16em;
  cursor:pointer;
  transition:opacity var(--dur-2) var(--ease),letter-spacing var(--dur-2) var(--ease-out);
}
.slash:hover{opacity:.62;letter-spacing:.3em}
.slash:active{opacity:.4}

/* ═══ MENÚ ═══ */

.menu[hidden]{display:none}

.menu{
  position:fixed;inset:0;z-index:60;
  background:var(--k-000);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--s9) var(--pad-x) var(--s7);
  animation:menu-in var(--dur-3) var(--ease-out) both;
}
@keyframes menu-in{from{opacity:0}to{opacity:1}}

.menu-close{
  position:absolute;
  top:var(--s6);right:var(--pad-x);
  appearance:none;border:0;background:none;
  color:var(--k-98);
  font-size:30px;font-weight:100;line-height:1;
  padding:var(--s2);margin:calc(var(--s2) * -1);
  cursor:pointer;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out);
}
.menu-close:hover{opacity:.62;transform:rotate(90deg)}
.menu-close:active{opacity:.4}

.menu-list{display:flex;flex-direction:column;gap:var(--s3)}
.menu-list a{
  display:flex;
  align-items:baseline;
  gap:var(--s5);
  font-size:clamp(32px,6.4vw,86px);
  font-weight:100;
  line-height:1.04;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--k-70);
  transition:color var(--dur-2) var(--ease),transform var(--dur-3) var(--ease-out);
}
.menu-list i{
  font-style:normal;
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  color:var(--k-70);
  transition:color var(--dur-2) var(--ease);
}
.menu-list a:hover{color:var(--k-100);transform:translateX(var(--s4))}
.menu-list a:hover i{color:var(--k-70)}
.menu-list a:active{color:var(--k-82)}

.menu-foot{
  display:flex;
  justify-content:space-between;
  gap:var(--s5);
  margin-top:var(--s9);
  padding-top:var(--s5);
  border-top:var(--rule);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-70);
}

/* ═══ HERO ═══ */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:
    ".     say"
    "quote ."
    "strip strip";
  gap:var(--s7) var(--s7);
  padding:calc(var(--s10) + var(--s4)) var(--pad-x) var(--s6);
  padding-left:calc(var(--pad-x) + var(--gutter));
  overflow:hidden;
}

.plate--hero{
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--k-16) url("img/hero.webp") center / cover no-repeat;
}
/* velo de legibilidad sobre la fotografía: vertical para la marca y el pie,
   y una caída hacia la derecha porque ahí viven el titular y la acción. */
.plate--hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,.08) 24%,rgba(5,5,5,.20) 56%,rgba(5,5,5,.84) 100%),
    linear-gradient(90deg,rgba(5,5,5,0) 38%,rgba(5,5,5,.58) 100%);
  z-index:1;
}
.plate--hero .ph{z-index:2}

.hero > :not(.plate){position:relative;z-index:5}

.hero > .sheet{
  position:absolute;
  left:var(--pad-x);
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-size:var(--t-micro);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--k-56);
  z-index:5;
}
@media (max-width:900px){.sheet{display:none}}

.quote{grid-area:quote;align-self:end;max-width:34ch}
.quote blockquote{
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  line-height:2.1;
  color:var(--k-82);
}
.quote figcaption{
  margin-top:var(--s3);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-70);
}

.hero-say{
  grid-area:say;
  align-self:center;
  justify-self:end;
  text-align:right;
  width:min(50vw,760px);
}
.hero-sub{
  margin-top:var(--s5);
  margin-left:auto;
  font-size:var(--t-small);
  letter-spacing:.04em;
  line-height:1.9;
  color:var(--k-70);
  max-width:34ch;
}

.strip{
  grid-area:strip;
  display:flex;
  justify-content:space-between;
  gap:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--k-16);
  font-size:var(--t-micro);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--k-70);
}

/* ═══ PÍLDORA ═══ */

.pill{
  display:inline-block;
  margin-top:var(--s6);
  padding:var(--s4) var(--s7);
  border:1px solid var(--k-56);
  border-radius:999px;
  font-size:var(--t-micro);
  font-weight:400;
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-98);
  background:transparent;
  cursor:pointer;
  transition:
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.pill:hover{border-color:var(--k-98);background:var(--k-98);color:var(--k-000)}
.pill:active{transform:scale(.975);background:var(--k-82);border-color:var(--k-82)}

.pill--solid{
  border-color:var(--k-98);
  background:var(--k-98);
  color:var(--k-000);
  font-family:inherit;
}
.pill--solid:hover{background:transparent;color:var(--k-98)}

.pill--wa{margin-top:var(--s7)}

/* ═══ LÁMINA CLARA ═══ */

.slab{
  background:var(--k-98);
  color:var(--k-000);
  padding:var(--s11) var(--pad-x) var(--s10);
}

.slab-head{
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  padding-bottom:var(--s9);
}
.slab-head h2{color:var(--k-000)}
.slab .eyebrow{color:var(--k-42)}

/* ── carrusel de vanos ── */

.rail-wrap{
  margin:0 calc(var(--pad-x) * -1);
  padding:0 var(--pad-x);
  overflow:hidden;
}

.rail{
  display:flex;
  gap:var(--s5);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:var(--s2);
}
.rail::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}}

.vano{
  flex:0 0 clamp(210px,21vw,286px);
  scroll-snap-align:center;
}

.plate--vano{
  aspect-ratio:5/8;
  border-radius:999px;
  background:var(--k-16);
  display:grid;
  place-items:center;
  transition:background-color var(--dur-3) var(--ease);
}
.v--torre-corporativa{background-image:url("img/torre-corporativa.webp")}
.v--centro-logistico{background-image:url("img/centro-logistico.webp")}
.v--sede-administrativa{background-image:url("img/sede-administrativa.webp")}
.v--desarrollo-residencial{background-image:url("img/desarrollo-residencial.webp")}
.v--planta-industrial{background-image:url("img/planta-industrial.webp")}

/* el título va centrado sobre la foto, y varias tomas tienen cielo claro
   justo ahí: el piso de contraste se concentra donde vive el texto */
.plate--vano::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 132% 40% at 50% 47%,rgba(5,5,5,.74) 0%,rgba(5,5,5,.36) 58%,rgba(5,5,5,.06) 100%),
    linear-gradient(180deg,rgba(5,5,5,.30) 0%,rgba(5,5,5,.04) 38%,rgba(5,5,5,.10) 72%,rgba(5,5,5,.42) 100%);
  z-index:1;
}

.plate--vano .ph{
  top:auto;
  bottom:var(--s6);
  left:50%;
  transform:translateX(-50%);
  color:var(--k-70);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
}

.vano-title{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  padding:var(--s4);
  text-align:center;
  font-size:clamp(14px,1.35vw,22px);
  font-weight:200;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.24;
  color:var(--k-100);
  pointer-events:none;
}

.plate--vano:has(.ph) .vano-title{padding-bottom:var(--s10)}

.vano-meta{
  display:flex;
  justify-content:space-between;
  gap:var(--s4);
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:var(--rule-light);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-42);
}

.rail-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:var(--rule-light);
}

.arrow{
  appearance:none;border:0;background:none;
  padding:var(--s3);margin:calc(var(--s3) * -1);
  color:var(--k-30);
  line-height:0;
  cursor:pointer;
  transition:color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease);
}
.ico{
  display:block;
  width:40px;height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.arrow:hover{color:var(--k-000)}
.arrow#rail-prev:hover{transform:translateX(-4px)}
.arrow#rail-next:hover{transform:translateX(4px)}
.arrow:active{color:var(--k-42)}
.arrow[disabled]{color:var(--k-56);opacity:.4;cursor:not-allowed;transform:none}

.rail-note{
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-42);
  text-align:center;
}

/* ═══ TABLERO / ÍNDICE ═══ */

.board-sec{
  background:var(--k-000);
  padding:var(--s11) var(--pad-x) var(--s10);
}
.board-head{
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  padding-bottom:var(--s9);
}
.board-head h2{color:var(--k-98)}

.board-wrap{overflow-x:auto;scrollbar-width:thin}

.board{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  table-layout:fixed;
}
.board th{
  text-align:left;
  padding:0 var(--s4) var(--s4) 0;
  border-bottom:var(--rule);
  font-size:var(--t-micro);
  font-weight:400;
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--k-70);
}
.board td{
  padding:var(--s5) var(--s4) var(--s5) 0;
  border-bottom:1px solid var(--k-12);
  font-size:var(--t-small);
  font-weight:300;
  letter-spacing:var(--track-tight);
  color:var(--k-82);
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-2) var(--ease);
}
.board td:first-child{color:var(--k-70);font-size:var(--t-micro);letter-spacing:var(--track-mid)}
.board td:nth-child(2){color:var(--k-98)}
.board tbody tr{transition:background-color var(--dur-2) var(--ease)}
.board tbody tr:hover td{color:var(--k-100)}
.board tbody tr:hover td:first-child{color:var(--k-82)}

.board .prov{
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-56);
}

.board-note{
  margin-top:var(--s5);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-70);
}

/* ═══ MÉTODO ═══ */

.slab--method{background:var(--k-95)}

.etapas{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s7);
}
.etapas li{
  padding-top:var(--s5);
  border-top:1px solid var(--k-000);
}
.etapa-n{
  font-size:var(--t-micro);
  letter-spacing:var(--track-wide);
  color:var(--k-42);
  margin-bottom:var(--s7);
}
.etapas h3{color:var(--k-000);margin-bottom:var(--s4)}
.etapas p:not(.etapa-n){
  font-size:var(--t-body);
  line-height:1.72;
  color:var(--k-30);
  max-width:46ch;
}

/* ═══ PRESUPUESTO ═══ */

.ask{
  background:var(--k-000);
  padding:var(--s11) var(--pad-x) var(--s10);
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:var(--s9) var(--s10);
  align-items:start;
}
.ask-say h2{color:var(--k-98);margin-top:var(--s5)}
.ask-sub{
  margin-top:var(--s5);
  font-size:var(--t-small);
  line-height:1.82;
  color:var(--k-70);
  max-width:36ch;
}
.ask-note{
  margin-top:var(--s5);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-70);
}

.form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s7) var(--s5);
}
.field{display:flex;flex-direction:column;gap:var(--s3)}
.field--wide{grid-column:1 / -1}

.field label{
  font-size:var(--t-micro);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--k-56);
}

.field input,
.field select,
.field textarea{
  appearance:none;
  width:100%;
  padding:var(--s3) 0;
  border:0;
  border-bottom:1px solid var(--k-22);
  border-radius:0;
  background:transparent;
  color:var(--k-98);
  caret-color:var(--k-98);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:300;
  letter-spacing:var(--track-tight);
  transition:border-color var(--dur-2) var(--ease);
}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%239d9d9d' stroke-width='1'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-position:right center;
  background-size:14px 9px;
  background-repeat:no-repeat;
  padding-right:var(--s6);
}
.field select option{background:var(--k-08);color:var(--k-98)}

.field input:hover,
.field select:hover,
.field textarea:hover{border-color:var(--k-42)}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--k-98);outline:none}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline:1px solid var(--k-98);outline-offset:4px}

.field input::placeholder,
.field textarea::placeholder{color:var(--k-70)}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:var(--k-70)}

.form-foot{
  flex-direction:row;
  align-items:center;
  gap:var(--s5);
  flex-wrap:wrap;
  padding-top:var(--s4);
}
.form-foot .pill{margin-top:0}

.form-msg{
  font-size:var(--t-small);
  letter-spacing:.04em;
  color:var(--k-98);
  opacity:0;
  transform:translateY(4px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
.form-msg[data-on]{opacity:1;transform:none}

/* ═══ PIE ═══ */

.foot{
  background:var(--k-000);
  border-top:var(--rule);
  padding:var(--s8) var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s6);
  flex-wrap:wrap;
}
.mark--foot{font-family:var(--display);font-size:19px;letter-spacing:.34em;text-transform:uppercase;color:var(--k-70)}

.foot-links{display:flex;gap:var(--s6);flex-wrap:wrap}
.foot-links a{
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-70);
  transition:color var(--dur-2) var(--ease);
}
.foot-links a:hover{color:var(--k-98)}
.foot-links a:active{color:var(--k-70)}

.foot-meta{
  display:flex;
  align-items:center;
  gap:var(--s5);
  font-size:var(--t-micro);
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--k-70);
}

/* ═══ ENTRADAS ═══ */

[data-rise]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out);
}
[data-rise][data-in]{opacity:1;transform:none}

/* ═══ RESPONSIVE ═══ */

@media (max-width:1080px){
  .ask{grid-template-columns:minmax(0,1fr);gap:var(--s9)}
  .ask-sub{max-width:46ch}
}

@media (max-width:860px){
  :root{--s11:120px;--s10:88px;--s9:64px}

  .hero{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "say"
      "quote"
      "strip";
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:var(--s7);
    padding-top:calc(var(--s9) + var(--s6));
    padding-left:var(--pad-x);
  }
  /* en columna única el texto baja a la izquierda: la caída hacia la derecha
     del velo de escritorio no lo cubre, así que acá el velo sube desde el pie */
  .plate--hero::before{
    background:linear-gradient(180deg,
      rgba(5,5,5,.34) 0%,
      rgba(5,5,5,.12) 14%,
      rgba(5,5,5,.72) 34%,
      rgba(5,5,5,.80) 62%,
      rgba(5,5,5,.90) 100%);
  }

  .hero-say{justify-self:start;text-align:left;width:auto;max-width:none;align-self:end}
  /* sobre fotografía el gris tranquilo del subtítulo no llega al mínimo:
     en columna única sube de tono, y la jerarquía la sigue dando el tamaño */
  .hero-sub{margin-left:0;color:var(--k-98)}
  .quote figcaption{color:var(--k-90)}
  .quote{max-width:none}
  .strip{flex-direction:column;gap:var(--s3)}

  /* en columna unica el marcador se corre al borde derecho: centrado
     atravesaba el subtitulo y la pildora */
  .plate--hero .ph{
    left:auto;
    right:var(--s4);
    transform:translateY(-50%);
    letter-spacing:var(--track-wide);
  }

  .etapas{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .etapas p:not(.etapa-n){max-width:52ch}

  .form{grid-template-columns:minmax(0,1fr);gap:var(--s6)}

  .foot{flex-direction:column;align-items:flex-start;gap:var(--s5)}
}

/* el indice apilado: una tabla de 4 columnas no entra en 390px, y el scroll
   horizontal era lo mas flojo de la pagina en movil */
@media (max-width:620px){
  .board-wrap{overflow-x:visible}
  .board{min-width:0;display:block;table-layout:auto}
  .board thead{display:none}
  .board tbody,.board tr{display:block}
  .board tr{
    display:block;
    padding:var(--s5) 0;
    border-bottom:1px solid var(--k-12);
  }
  .board td{display:block;border:0;padding:0}
  .board td:first-child{margin-bottom:var(--s3)}
  .board td:nth-child(2){
    font-size:var(--t-lead);
    font-weight:200;
    letter-spacing:.02em;
    margin-bottom:var(--s3);
  }
  .board td:nth-child(3),
  .board td:nth-child(4),
  .board td:nth-child(5){
    display:inline;
    font-size:var(--t-micro);
    letter-spacing:var(--track-mid);
    text-transform:uppercase;
    color:var(--k-70);
  }
  .board td:nth-child(3)::after,
  .board td:nth-child(4)::after{content:" · "}
  .board td:nth-child(5){color:var(--k-56)}
}

/* el teléfono recibe su propio recorte vertical: 162 KB en vez de 241 KB,
   y el encuadre no pierde los costados como haría el recorte de cover */
@media (max-width:620px){
  .plate--hero{background-image:url("img/hero-mobile.webp")}
}

@media (max-width:520px){
  .top{padding:var(--s5) var(--pad-x)}
  .vano{flex:0 0 74vw}
  .foot-links{gap:var(--s4) var(--s5)}
}

/* pantallas bajas / móvil apaisado: el hero crece, nunca recorta */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:var(--s9);padding-bottom:var(--s7)}
}

/* ═══ MOVIMIENTO REDUCIDO ═══ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-rise]{opacity:1;transform:none}
}