/* =========================================================
   [esto] muta — hoja base
   Todo lo compartido del sistema: color, tipografía, marca,
   y los componentes del revelado. Nada específico de una pieza.
   ========================================================= */

:root{
  /* color */
  --negro:#171612;
  --crema:#EFEBE3;
  --papel:#FDFCF9;
  --gris:#8C8880;
  --bermellon:#E2431E;
  --acero:#3A5A7A;
  --hair:rgba(23,22,18,.16);

  /* medidas */
  --pad:clamp(20px,5vw,80px);

  /* tipografía */
  --g:"Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,"Inter Tight",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--crema);color:var(--negro);
  font-family:var(--g);-webkit-font-smoothing:antialiased;
}
::selection{background:var(--negro);color:var(--crema)}
a{color:inherit;text-decoration:none}

/* ---------- marca ---------- */
.m{font-weight:700;letter-spacing:-.05em}
.br{font-weight:400;letter-spacing:-.02em}

/* ---------- tipografía de página ---------- */
h1{font-size:clamp(28px,5vw,54px);line-height:.94;letter-spacing:-.04em;font-weight:700}
h2{font-size:clamp(26px,4vw,46px);line-height:1;letter-spacing:-.035em;font-weight:700}
.lead{font-size:13.5px;line-height:1.55;color:var(--gris);max-width:64ch}
.cap{font-size:10.5px;color:var(--gris);line-height:1.45}

/* ---------- barra de controles ---------- */
.bar{
  position:sticky;top:0;z-index:40;
  background:rgba(239,235,227,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;gap:15px;align-items:center;padding:9px var(--pad);
  overflow-x:auto;scrollbar-width:none;
}
.bar::-webkit-scrollbar{display:none}
.grp{display:flex;gap:3px;align-items:center}
.lbl{font-size:9.5px;color:var(--gris);white-space:nowrap;margin-right:3px}
button{
  font:inherit;font-size:10.5px;color:var(--negro);background:none;
  border:1px solid transparent;padding:5px 9px;cursor:pointer;white-space:nowrap;
}
button:hover{border-color:var(--hair)}
button[aria-pressed="true"]{background:var(--negro);color:var(--crema)}
.solid{border:1px solid var(--negro)}
.solid:hover{background:var(--negro);color:var(--crema)}

/* =========================================================
   revelado — el componente central del sistema
   Marcado esperado:
   <div class="rev">
     <div class="info atras"></div>          (opcional, la ficha que sale al costado)
     <div class="col">
       <div class="foto" data-img="..." data-cap data-tit data-met></div>
     </div>
   </div>
   ========================================================= */

.rev{position:relative;display:grid;grid-template-columns:minmax(112px,.28fr) 1fr;
  gap:8px;align-items:start}
.rev .col{min-width:0;display:flex;flex-direction:column;gap:9px}
@media(max-width:820px){
  .rev{grid-template-columns:1fr}
  .info.atras{display:none}
}

.foto{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:#0d0c0a;isolation:isolate;z-index:1}
.foto .warp{position:absolute;inset:0;will-change:filter}
.foto .warp img,.foto .warp video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0d0c0a}
.foto .grano{position:absolute;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:overlay;background-repeat:repeat;opacity:0}
.foto .velo{position:absolute;left:0;right:0;top:0;height:56%;z-index:2;
  pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0))}

/* la ficha: adentro del cuadro y su copia de afuera */
.info{pointer-events:none}
.info.atras{z-index:0;justify-self:end;width:min(100%,210px);
  color:var(--crema);mix-blend-mode:difference;will-change:transform}
.ficha{position:absolute;left:6%;top:8%;z-index:4;pointer-events:none;height:0}
.ficha .v{position:absolute;top:0;left:0;right:0}
.ficha .dif{color:var(--crema);mix-blend-mode:difference}
.ficha .sol{color:var(--tono,#EFEBE3);opacity:0}

.cp{font-size:clamp(14px,1.5vw,17px);letter-spacing:-.03em;line-height:1.05;font-weight:var(--pcp,500)}
.tt{font-size:clamp(17px,2vw,22px);letter-spacing:-.03em;line-height:1.06;font-weight:var(--ptt,400);margin-top:8px}
.mt{font-size:10.5px;line-height:1.5;margin-top:9px;font-weight:var(--pmt,300)}

/* medidor de progreso, útil mientras exploramos; se saca en producción */
.medidor{height:2px;background:var(--hair);position:relative}
.medidor i{position:absolute;left:0;top:0;bottom:0;background:var(--negro);width:0}
.pie{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--gris)}

/* grillas */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,56px)}
@media(min-width:1560px){.grid-2{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}

svg.defs{position:absolute;width:0;height:0;overflow:hidden}