/* ==========================================================================
   Valia. Portada
   Un solo tema, oscuro y cálido. La decisión anterior era gris acromático
   "para no favorecer a ninguna de las dos marcas": correcto sobre el papel
   y frío en pantalla. Ahora el tierra cálido hace de sala, y el color lo
   ponen las dos propuestas cuando aparecen. Todo se pinta explícito, así
   que la página se sostiene sobre cualquier fondo del navegador.
   ========================================================================== */

:root{ color-scheme:dark }
:root{
  --ground:#14100E;
  --ground-2:#1D1815;
  --ground-3:#241E19;
  --bone:#EFE7DA;        /* 15.5:1 sobre --ground */
  --bone-soft:#C3B8A8;   /*  9.7:1 */
  --bone-mute:#8E8477;   /*  5.2:1 */
  --line:#2C2520;
  --line-soft:#211B17;

  --font-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;

  --t-6:clamp(3.6rem,1rem + 13vw,11rem);
}

body{background:var(--ground);color:var(--bone);font-family:var(--font-body)}
a{color:inherit}
code{font-family:var(--font-mono);font-size:.88em}
.eyebrow{color:var(--bone-mute)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--bone);color:var(--ground)}

/* Grano: la textura es lo que separa una página cálida de un rectángulo
   plano de color. Va fija, no intercepta el puntero y pesa ~1 KB. */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,footer{position:relative;z-index:2}

/* --- Portada ------------------------------------------------------------ */
.hero{position:relative;padding-block:clamp(3.5rem,11vw,8rem) clamp(2.5rem,6vw,4rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:-24%;width:min(1100px,150%);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(239,231,218,.085) 0%,
    rgba(239,231,218,.035) 32%,
    transparent 66%);
}
.hero__eyebrow{margin-bottom:var(--s-6)}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-6);line-height:.86;letter-spacing:-.035em;
  margin:0;
}
.hero__title em{font-style:italic;color:var(--bone-soft)}
.hero__lede{
  font-size:clamp(1.08rem,.98rem + .55vw,1.5rem);
  line-height:1.45;color:var(--bone-soft);
  max-width:34ch;margin-top:var(--s-6);text-wrap:pretty;
}
.hero__lede b{color:var(--bone);font-weight:500}

/* Los números son la prueba del trabajo hecho, y es lo que convence. */
.counters{
  display:grid;gap:var(--s-5) var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:var(--s-5);border-top:1px solid var(--line);
}
@media (min-width:760px){
  .counter + .counter{
    padding-left:var(--s-6);
    border-left:1px solid var(--line);
    margin-left:calc(var(--s-6) * -1 + var(--s-6));
  }
  .counters{gap:var(--s-5) 0}
  .counter{padding-inline:0 var(--s-6)}
  .counter + .counter{padding-left:var(--s-6)}
}
.counter__n{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.6rem,5vw,3.9rem);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.counter__l{
  font-family:var(--font-mono);font-size:var(--t--1);
  letter-spacing:.08em;color:var(--bone-mute);
  margin-top:var(--s-2);line-height:1.4;
}

/* Entrada en escena: solo aquí, y solo una vez. */
@media (prefers-reduced-motion:no-preference){
  .hero__eyebrow,.hero__title,.hero__lede,.counter{
    animation:rise 620ms var(--ease-out) both;
  }
  .hero__title{animation-delay:60ms}
  .hero__lede{animation-delay:140ms}
  .counter{animation-delay:calc(200ms + var(--i,0) * 55ms)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* --- Secciones ---------------------------------------------------------- */
.section{padding-block:clamp(2.75rem,7vw,5rem)}
.sec-head{margin-bottom:var(--s-6);max-width:var(--measure)}
.sec-head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-3);letter-spacing:-.02em;line-height:1.05;
  margin-top:var(--s-3);
}
.sec-head p{color:var(--bone-soft);margin-top:var(--s-4)}

/* --- Las dos puertas ---------------------------------------------------- */
.doors{display:grid;gap:var(--s-5);grid-template-columns:1fr;margin-top:var(--s-5)}
@media (min-width:880px){ .doors{grid-template-columns:1fr 1fr;gap:var(--s-6)} }

.door{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--door-fg);
  background:var(--door-bg);
  border:1px solid var(--door-line);
  border-radius:5px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.3),0 24px 60px -34px rgba(0,0,0,.8);
  transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out);
}
.door__media{overflow:hidden;background:var(--door-bg2);aspect-ratio:4/3}
.door__media img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform 620ms var(--ease-out);
}
.door__body{padding:clamp(1.25rem,3vw,1.9rem);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.door__kicker{
  font-family:var(--font-mono);font-size:var(--t--1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--door-mute);
}
.door__title{
  font-family:var(--door-font,var(--font-display));
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;
  font-weight:var(--door-weight,400);letter-spacing:var(--door-tracking,-.02em);
}
.door__desc{color:var(--door-soft);font-size:var(--t-0);flex:1}
.door__swatches{display:flex;gap:.3rem;margin-top:var(--s-2)}
.door__swatches span{
  width:1.5rem;height:1.5rem;border-radius:3px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.28);
}
.door__go{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:var(--t--1);letter-spacing:.06em;
  padding-top:var(--s-4);border-top:1px solid var(--door-line);
}
.door__go svg{width:.85em;height:.85em;flex:none;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .door:hover{
    transform:translateY(-5px);
    box-shadow:0 3px 8px rgba(0,0,0,.32),0 36px 74px -34px rgba(0,0,0,.9);
  }
  .door:hover .door__media img{transform:scale(1.035)}
  .door:hover .door__go svg{transform:translateX(5px)}
}
.door:active{transform:translateY(-2px) scale(.994)}

/* --- Descartados de marca ----------------------------------------------- */
.rejects{
  display:grid;gap:var(--s-7) var(--s-5);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.reject{display:flex;flex-direction:column;gap:var(--s-3)}
.reject__media{
  display:block;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);border-radius:4px;background:var(--ground-2);
}
.reject__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 520ms var(--ease-out),opacity 320ms ease;
  opacity:.86;
}
@media (hover:hover) and (pointer:fine){
  .reject__media:hover img{transform:scale(1.035);opacity:1}
}
.reject__head{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.reject__name{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-1);letter-spacing:-.015em;
}
.reject__kind{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-mute);
  padding:.15rem .45rem;border:1px solid var(--line);border-radius:2px;white-space:nowrap;
}
.reject__why{color:var(--bone-soft);font-size:var(--t--1)}

/* --- Tabla de patrones -------------------------------------------------- */
table.patterns{border-collapse:collapse;width:100%;min-width:520px}
table.patterns th,table.patterns td{
  text-align:left;padding:.9rem 1.25rem .9rem 0;
  border-bottom:1px solid var(--line);vertical-align:baseline;
}
table.patterns th{
  font-family:var(--font-mono);font-size:var(--t--1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);
}
table.patterns td:first-child{font-weight:600;white-space:nowrap;padding-right:2rem}
table.patterns td:last-child{color:var(--bone-soft);font-size:var(--t--1)}

/* --- Avisos ------------------------------------------------------------- */
.note{
  margin-top:var(--s-6);padding:clamp(1.25rem,3vw,1.75rem);
  background:var(--ground-2);border:1px solid var(--line);
  border-left:2px solid var(--bone-soft);border-radius:0 4px 4px 0;
}
.note p{color:var(--bone-soft);margin-top:var(--s-3);max-width:66ch}
.note strong{color:var(--bone)}

/* --- Familias y nombres ------------------------------------------------- */
.legend{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center;
  margin-top:var(--s-5);padding-block:var(--s-3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);
}
.fam{margin-top:var(--s-7)}
.fam__bar{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--bone-soft);
}
.fam__bar h3{font-size:var(--t-0);font-weight:600;margin:0}
.fam__bar span{font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);margin-left:auto}

.name{
  display:grid;
  grid-template-columns:minmax(170px,.75fr) minmax(250px,1.3fr) 268px;
  gap:var(--s-5) var(--s-6);align-items:start;
  padding-block:var(--s-6);border-bottom:1px solid var(--line);
}
@media (max-width:900px){ .name{grid-template-columns:1fr;gap:var(--s-4)} }
.name__mark{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.5rem,5vw,3.6rem);line-height:.95;
  letter-spacing:-.03em;overflow-wrap:anywhere;
}
.name__meta{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.name__origin{font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute)}
.name__why{color:var(--bone-soft);font-size:var(--t-0)}
.name__flag{
  font-size:var(--t--1);color:var(--bone-soft);
  border-left:2px solid var(--bone-mute);padding-left:var(--s-3);
}
.name__flag b{color:var(--bone)}

/* --- Matriz de dominios ------------------------------------------------- */
table.dmx{
  border-collapse:collapse;width:100%;
  font-family:var(--font-mono);font-size:var(--t--1);
  font-variant-numeric:tabular-nums;
}
table.dmx th,table.dmx td{padding:.4rem .3rem;font-weight:400}
table.dmx thead th{
  font-size:.66rem;letter-spacing:.06em;color:var(--bone-mute);
  text-align:center;border-bottom:1px solid var(--line);padding-bottom:.45rem;
}
table.dmx thead th:first-child{text-align:left}
table.dmx tbody th{text-align:left;white-space:nowrap;padding-right:.9rem}
table.dmx tbody tr + tr th,table.dmx tbody tr + tr td{border-top:1px solid var(--line-soft)}
table.dmx td{text-align:center;width:2.6rem}
table.dmx td.yes{background:var(--ground-3);font-weight:500}
table.dmx td.no{color:var(--bone-mute)}
table.dmx tr.risk th{color:var(--bone-mute);text-decoration:line-through;text-decoration-thickness:1px}
.dmx-note{margin-top:var(--s-3);font-family:var(--font-mono);font-size:.7rem;color:var(--bone-mute);line-height:1.5}

/* --- Descartados de nombre ---------------------------------------------- */
.out{
  display:grid;grid-template-columns:minmax(140px,auto) 1fr;
  gap:var(--s-2) var(--s-6);padding-block:var(--s-4);
  border-bottom:1px solid var(--line);align-items:baseline;
}
@media (max-width:640px){ .out{grid-template-columns:1fr} }
.out__name{
  font-family:var(--font-display);font-size:var(--t-1);color:var(--bone-mute);
  text-decoration:line-through;text-decoration-thickness:1px;
}
.out__why{color:var(--bone-soft);font-size:var(--t--1);max-width:62ch}

/* --- Recomendación ------------------------------------------------------ */
.rec{
  background:var(--ground-2);border:1px solid var(--line);
  border-radius:5px;padding:clamp(1.5rem,4vw,3rem);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9);
}
.rec h2{font-family:var(--font-display);font-weight:400;font-size:var(--t-3);letter-spacing:-.02em;margin-top:var(--s-3)}
.rec__pick{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(3.2rem,8vw,5.4rem);line-height:.88;letter-spacing:-.04em;
  margin-top:var(--s-5);
}
.rec__cond{
  font-family:var(--font-mono);font-size:var(--t--1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--bone-mute);margin-top:var(--s-3);
}
.rec p{color:var(--bone-soft);max-width:62ch;margin-top:var(--s-4)}
.rec p strong{color:var(--bone);font-weight:600}
.rec__alt{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}

/* --- Comprobaciones y pasos --------------------------------------------- */
.checks{display:grid;gap:var(--s-6) var(--s-7);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.checks h4{
  font-family:var(--font-mono);font-size:var(--t--1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.5rem;
}
.checks h4 .st{
  font-size:.62rem;letter-spacing:.06em;padding:.12rem .4rem;border-radius:2px;
  background:var(--ground-3);color:var(--bone);
}
.checks p{color:var(--bone-soft);font-size:var(--t--1);margin-top:var(--s-3)}
.checks strong{color:var(--bone)}

.steps{counter-reset:s;margin-top:var(--s-6)}
.steps li{
  counter-increment:s;position:relative;padding:.85rem 0 .85rem 2.7rem;
  border-bottom:1px solid var(--line);color:var(--bone-soft);font-size:var(--t-0);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1rem;
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);
}
.steps li strong{color:var(--bone);font-weight:600}

/* --- Cierre ------------------------------------------------------------- */
.sign{
  border-top:1px solid var(--line);
  padding-block:clamp(3rem,8vw,6rem);
}
.sign__q{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-4);line-height:1.06;letter-spacing:-.025em;
  max-width:22ch;
}
.sign__q em{font-style:italic;color:var(--bone-soft)}
.sign__body{max-width:52ch;margin-top:var(--s-5);color:var(--bone-soft)}
.sign__body + .sign__body{margin-top:var(--s-4)}
.sign__cta{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:var(--s-6);padding:.85rem 1.4rem;
  background:var(--bone);color:var(--ground);
  border-radius:3px;text-decoration:none;font-weight:600;font-size:var(--t-0);
  transition:transform 160ms var(--ease-out),background 200ms ease;
}
.sign__cta svg{width:.85em;height:.85em;flex:none;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .sign__cta:hover{background:#fff}
  .sign__cta:hover svg{transform:translateX(4px)}
}
.sign__cta:active{transform:scale(.975)}

.foot{
  border-top:1px solid var(--line);padding-block:var(--s-6) var(--s-8);
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);line-height:1.7;
}

/* El encargo, en la portada: una línea callada, no cuatro etiquetas. Es la
   prueba de que se escuchó exactamente lo que ella pidió. */
.brief{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin-top:var(--s-6);
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);
}
.brief span{display:inline-flex;gap:.45rem}
.brief b{color:var(--bone-soft);font-weight:400}

/* ==========================================================================
   Añadidos de conversión y navegación
   ========================================================================== */

:root{ --sticky-h:3.25rem }

/* --- Barra pegajosa con progreso -----------------------------------------
   Resuelve dos cosas a la vez: casi 10.000 px sin referencia de dónde estás,
   y un único punto de salida enterrado al final del documento.            */
.topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__in{display:flex;align-items:center;gap:var(--s-5);min-height:var(--sticky-h)}
.topbar__home{
  font-family:var(--font-display);font-size:1.28rem;letter-spacing:-.01em;
  text-decoration:none;flex:none;
}
.topbar__nav{display:flex;gap:var(--s-5);margin-left:auto}
.topbar__nav a{
  font-family:var(--font-mono);font-size:var(--t--1);letter-spacing:.04em;
  color:var(--bone-mute);text-decoration:none;
  transition:color 180ms ease;padding-block:.55rem;
}
@media (hover:hover) and (pointer:fine){ .topbar__nav a:hover{color:var(--bone)} }
@media (max-width:720px){ .topbar__nav{display:none} .topbar__cta{margin-left:auto} }

.topbar__progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--bone-soft);transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  .topbar__progress{animation:prog linear both;animation-timeline:scroll(root block)}
  @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){ .topbar__progress{display:none} }

/* --- Botones -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.35rem;border-radius:3px;
  font-weight:600;font-size:var(--t-0);text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:transform 160ms var(--ease-out),background 200ms ease,border-color 200ms ease;
}
.btn svg{width:.85em;height:.85em;flex:none;transition:transform 220ms var(--ease-out)}
/* El glifo de Instagram es un icono, no una flecha: ni se desplaza al pasar
   por encima ni comparte tamaño con la punta de flecha. */
.btn .ico-ig{width:1.05em;height:1.05em}
.btn--solid{background:var(--bone);color:var(--ground)}
.btn--ghost{border-color:var(--line);color:var(--bone-soft)}
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:#fff}
  .btn--ghost:hover{border-color:var(--bone-mute);color:var(--bone)}
  .btn:hover svg:not(.ico-ig){transform:translateX(4px)}
  .btn:hover .ico-ig{transform:scale(1.07)}
}
.btn:active{transform:scale(.975)}
.btn--sm{padding:.5rem .9rem;font-size:var(--t--1);font-weight:500}

/* --- Portada con obra a la vista ------------------------------------------ */
.hero__in{display:block}
@media (min-width:980px){
  .hero__in{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.8fr);
    gap:var(--s-8);align-items:center;
  }
  .hero__art{margin-top:0;justify-self:end}
}
.hero__art{margin-top:var(--s-7);max-width:440px}
.hero__art img{width:100%;height:auto;opacity:.94}
.hero__art figcaption{
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);
}

/* --- Recomendación de marca ----------------------------------------------- */
.pick{
  margin-top:clamp(2.5rem,6vw,4rem);
  padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--ground-2);border:1px solid var(--line);border-radius:5px;
}
.pick h3{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-2);letter-spacing:-.02em;margin-top:var(--s-3);
}
.pick p{color:var(--bone-soft);max-width:60ch;margin-top:var(--s-4)}
.pick p strong{color:var(--bone);font-weight:600}
.pick ol{counter-reset:r;margin-top:var(--s-4);max-width:60ch}
.pick li{
  counter-increment:r;position:relative;padding:.5rem 0 .5rem 2rem;
  color:var(--bone-soft);font-size:var(--t-0);
}
.pick li::before{
  content:counter(r);position:absolute;left:0;top:.62rem;
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-mute);
}

/* --- Franja de acción intermedia ------------------------------------------ */
.cta-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ground-2)}
.cta-strip__in{padding-block:clamp(2rem,5vw,3.25rem)}
.cta-strip__t{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--t-2);letter-spacing:-.02em;line-height:1.1;max-width:24ch;
}
.cta-strip__d{color:var(--bone-soft);margin-top:var(--s-3);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

/* --- Visor de imagen ------------------------------------------------------
   Las fichas descartadas enlazaban a un .webp suelto: se salía del sitio a un
   archivo sin contexto. El enlace se conserva para el clic central y para
   quien no tenga JS.                                                        */
.lb{
  position:fixed;inset:0;z-index:60;
  display:grid;
  /* minmax(0,1fr): con 1fr a secas la fila crece con la imagen y el
     max-height:100% del <img> se mide contra esa fila ya crecida, así que
     la imagen se salía de la ventana. */
  grid-template-rows:minmax(0,1fr) auto;gap:var(--s-4);
  place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(10,8,7,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overscroll-behavior:contain;
}
.lb[hidden]{display:none}
.lb__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:4px;box-shadow:0 40px 90px -40px #000;
}
.lb__cap{
  font-family:var(--font-mono);font-size:var(--t--1);color:var(--bone-soft);
  text-align:center;padding-bottom:env(safe-area-inset-bottom);
}
.lb__close{
  position:absolute;top:max(var(--s-4),env(safe-area-inset-top));right:var(--s-4);
  width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ground-2);border:1px solid var(--line);color:var(--bone);
  cursor:pointer;transition:background 180ms ease;
}
@media (hover:hover) and (pointer:fine){ .lb__close:hover{background:var(--ground-3)} }
.lb__close svg{width:1rem;height:1rem}
@media (prefers-reduced-motion:no-preference){
  .lb{animation:lbIn 200ms var(--ease-out)}
  .lb__img{animation:lbImg 260ms var(--ease-out)}
  @keyframes lbIn{from{opacity:0}to{opacity:1}}
  @keyframes lbImg{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}

/* --- Quién hace esto ------------------------------------------------------ */
.studio{
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:var(--t--1);color:var(--bone-soft);
  max-width:56ch;line-height:1.65;
}
.studio a{color:var(--bone);text-underline-offset:.2em}

/* Instagram no admite mensaje prerrellenado: el enlace solo abre el perfil.
   El correo sí, así que se avisa en vez de dejar que lo descubra. */
.cta-note{
  font-family:var(--font-mono);font-size:var(--t--1);
  color:var(--bone-mute);margin-top:var(--s-4);
}