body[data-page="lab-cifras"]{ background:#F1F1F1; color:#111; }

.cif{ padding:clamp(64px,9vh,120px) var(--pad-nav); }
.cif + .cif{ border-top:1px solid rgba(0,0,0,.08); }
.cif:first-of-type{ padding-top:clamp(150px,20vh,230px); }
.cif > *{ max-width:var(--container); margin-inline:auto; }

/* Bloque comun a los cuatro modulos */
.bloque{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; }
.bloque__cifra{ display:flex; align-items:center; gap:.1em; margin:0;
  font-size:clamp(2.3rem,4.6vw,4rem); font-weight:800; line-height:1;
  letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.bloque__rotulo{ margin:14px 0 0; font-size:.82rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; opacity:.72; }
.bloque__enlace{ margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  color:inherit; text-decoration:none; font-size:.74rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; opacity:1;
  transition:opacity .2s var(--ease-out); }
.bloque__enlace:hover,.bloque__enlace:focus-visible{ opacity:1; }
.flechita{ width:12px; height:12px; flex:none; transition:transform .24s var(--ease-out); }
.bloque__enlace:hover .flechita{ transform:translate(2px,-2px); }

.laurel{ width:.44em; height:.92em; flex:none; display:block; background:currentColor; opacity:.5;
  -webkit-mask:url('/assets/icons/laurel.svg') center / contain no-repeat;
  mask:url('/assets/icons/laurel.svg') center / contain no-repeat;
  transition:transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.laurel--r{ transform:scaleX(-1); }

/* 1 · Tira compacta */
.tira,.columnas{ --linea:rgba(0,0,0,.11); display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  max-width:1020px; margin-inline:auto; background:var(--linea);
  border:1px solid var(--linea); border-radius:20px; overflow:hidden; }
.tira__celda,.columna{ position:relative; overflow:hidden; background:#F1F1F1; color:#111;
  transition:background-color .32s var(--ease-out), color .32s var(--ease-out); }
[data-tono="amarillo"]{ --tbg:#FFCB1F; --tfg:#111;
  --tgrad:linear-gradient(142deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.14) 100%); }
[data-tono="rojo"]{ --tbg:#C1121F; --tfg:#ffffff;
  --tgrad:linear-gradient(142deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.22) 100%); }
[data-tono="negro"]{ --tbg:#000000; --tfg:#ffffff;
  --tgrad:linear-gradient(142deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.03) 46%, rgba(255,255,255,0) 100%); }
.tira__celda:hover,.tira__celda:focus-within,
.columna:hover,.columna:focus-within{ background-color:var(--tbg); background-image:var(--tgrad); color:var(--tfg); }

.tira__celda{ display:flex; min-height:clamp(160px,17vw,215px); padding:clamp(18px,2vw,26px); }
.tira .flotador{ position:absolute; z-index:0; right:-4%; bottom:-14%; width:40%; pointer-events:none; }
.tira__celda:nth-child(2) .flotador{ right:3%; bottom:4%; width:34%; }
.tira__objeto{ display:block; width:100%; height:auto; opacity:0; transform:translateY(16px) scale(.94);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.3));
  transition:opacity .34s var(--ease-out), transform .42s var(--ease-out); }
.tira__celda:hover .tira__objeto,
.tira__celda:focus-within .tira__objeto{ opacity:1; transform:none; }
.tira .bloque{ max-width:64%; flex:1; }
.tira .bloque__cifra{ font-size:clamp(1.6rem,2.8vw,2.3rem); }

/* 2 · Columnas verticales */
.columna{ display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:clamp(380px,44vw,530px); padding:clamp(22px,2.4vw,32px); }
.columna .bloque{ align-items:center; transform:translateY(clamp(26px,5vw,62px));
  transition:transform .42s var(--ease-out); }
.columna:hover .bloque,.columna:focus-within .bloque{ transform:none; }
.columna__hueco{ flex:1; display:flex; align-items:center; justify-content:center; width:100%;
  padding:clamp(16px,2vw,28px) 0; }
.columna .flotador{ display:flex; justify-content:center; width:100%; }
.columna__objeto{ width:auto; max-width:72%; max-height:clamp(140px,17vw,215px); height:auto;
  opacity:0; transform:translateY(20px) scale(.92);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.28));
  transition:opacity .34s var(--ease-out), transform .44s var(--ease-out); }
.columna:hover .columna__objeto,
.columna:focus-within .columna__objeto{ opacity:1; transform:none; }
.columna .bloque__enlace{ margin-top:0; }
.tira__celda:hover .laurel,.columna:hover .laurel{ opacity:.85; }

/* 3 · Vitrina */
.vitrina{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.vitrina__ficha{ position:relative; overflow:hidden; border-radius:20px; aspect-ratio:16/9; isolation:isolate;
  padding:clamp(22px,2.4vw,34px); display:flex; color:#fff;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.vitrina__ficha[data-tono="amarillo"]{ background-color:#FFCB1F; color:#111;
  background-image:linear-gradient(142deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.14) 100%); }
.vitrina__ficha[data-tono="rojo"]{ background-color:#C1121F;
  background-image:linear-gradient(142deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.22) 100%); }
.vitrina__ficha[data-tono="negro"]{ background-color:#000000;
  background-image:linear-gradient(142deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.03) 46%, rgba(255,255,255,0) 100%); }
.vitrina__ficha:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -22px rgba(0,0,0,.55); }
.vitrina__ficha:hover .laurel{ opacity:.85; }
.vitrina__ficha:hover .laurel--l{ transform:translateX(-2px); }
.vitrina__ficha:hover .laurel--r{ transform:scaleX(-1) translateX(-2px); }
.vitrina__luz{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(40% 55% at var(--lx,50%) var(--ly,50%), rgba(255,255,255,.26), rgba(255,255,255,0) 72%);
  transition:opacity .3s var(--ease-out); }
.vitrina__ficha:hover .vitrina__luz{ opacity:1; }
.vitrina .flotador{ position:absolute; z-index:0; right:-3%; bottom:-11%; width:44%; pointer-events:none; }
.vitrina__ficha:nth-child(2) .flotador{ right:3%; bottom:2%; width:38%; }
.vitrina__objeto{ display:block; width:100%; height:auto; object-fit:contain;
  transform:translate3d(var(--fx,0px),var(--fy,0px),0);
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.3));
  transition:transform .45s var(--ease-out); }
.vitrina__ficha:hover .vitrina__objeto{ transition:transform .2s linear; }
.vitrina .bloque{ max-width:56%; flex:1; }

/* 4 · Manchas */
.blobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.blob{ position:relative; overflow:hidden; border-radius:20px; background:#000000; color:#fff;
  aspect-ratio:16/9; padding:clamp(22px,2.4vw,34px); display:flex; }
.blob__mancha{ position:absolute; z-index:0; left:var(--bx,34%); top:var(--by,74%);
  width:96%; aspect-ratio:1; border-radius:50%; filter:blur(64px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 36% 34%, var(--a), var(--b) 58%, rgba(0,0,0,0) 76%);
  transition:filter .35s var(--ease-out); }
.blob:hover .blob__mancha{ filter:blur(74px); }
.blobs .flotador{ position:absolute; z-index:1; right:-3%; bottom:-11%; width:40%; pointer-events:none; }
.blob:nth-child(2) .flotador{ right:3%; bottom:2%; width:34%; }
.blob__objeto{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)); }
.blob .bloque{ max-width:56%; flex:1; }
.blob:hover .laurel{ opacity:.85; }

/* 5 · Carteles */
.carteles{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); max-width:1020px; margin-inline:auto; }
.cartel{ position:relative; border-radius:18px; padding:clamp(20px,2.2vw,30px);
  display:flex; flex-direction:column; min-height:clamp(430px,48vw,600px);
  transition:transform .3s var(--ease-out); }
.cartel:hover{ transform:translateY(-6px); }
.cartel[data-tono="amarillo"]{ background:#FFCB1F; color:#111; }
.cartel[data-tono="rojo"]{ background:#C1121F; color:#ffffff; }
.cartel[data-tono="naranja"]{ background:#FF6A00; color:#111; }
.bloque--cabeza{ margin-top:0; align-items:center; text-align:center; }
.cartel__dibujo{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(12px,2vw,24px) 0; }
.cartel__dibujo .flotador{ display:block; width:100%; max-width:210px; }
.cartel__objeto{ display:block; width:100%; height:auto; opacity:0; transform:translateY(18px) scale(.9);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.24));
  transition:opacity .55s var(--ease-out), transform .7s var(--ease-out); }
.cartel.is-dentro .cartel__objeto{ opacity:1; transform:none; }
.cartel .bloque__enlace{ margin-top:0; align-self:center; }
.cartel:hover .laurel{ opacity:.85; }



/* 3 y 4 · Vidrio */
.cif:has(.vidriera){ overflow:hidden; }
.vidriera{ position:relative; isolation:isolate; background:transparent;
  max-width:1020px; margin-inline:auto; padding:clamp(26px,3.4vw,54px); }
.vidriera__halo{ position:absolute; z-index:0; border-radius:50%; filter:blur(86px); pointer-events:none; }
.vidriera__halo--a{ width:50%; aspect-ratio:1; left:2%; top:-8%; background:#b6b6bd; opacity:.48; }
.vidriera__halo--b{ width:54%; aspect-ratio:1; right:1%; bottom:-10%; background:#16161a; opacity:.22; }
.vidriera__halo--c{ width:42%; aspect-ratio:1; left:32%; top:18%; background:#7c7c86; opacity:.3; }
.vidriera__rejilla{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px); }

.vidrio{ position:relative; overflow:hidden; color:#111; border:0; border-radius:16px;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 22px 44px -34px rgba(0,0,0,.5);
  transition:background-color .4s var(--ease-out), color .4s var(--ease-out),
             transform .3s var(--ease-out); }
.vidrio[data-tono="amarillo"]{ --vtinte:rgba(255,203,31,.82); --vink:#111; }
.vidrio[data-tono="rojo"]{ --vtinte:rgba(193,18,31,.8); --vink:#ffffff; }
.vidrio[data-tono="negro"]{ --vtinte:rgba(12,12,12,.74); --vink:#ffffff; }
.vidrio:hover,.vidrio:focus-within{ background:var(--vtinte); color:var(--vink); transform:translateY(-4px); }
.vidrio:hover .laurel{ opacity:.9; }
.vidrio .flotador{ opacity:0; transition:opacity .34s var(--ease-out); }
.vidrio:hover .flotador,.vidrio:focus-within .flotador{ opacity:1; }
.vidrio__objeto{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.45)); }

.vidrio--tira{ display:flex; min-height:clamp(160px,17vw,215px); padding:clamp(18px,2vw,26px); }
.vidrio--tira .flotador{ position:absolute; z-index:0; right:-4%; bottom:-14%; width:40%; pointer-events:none; }
.vidrio--tira:nth-child(2) .flotador{ right:3%; bottom:4%; width:34%; }
.vidrio--tira .bloque{ max-width:72%; flex:1; }
.vidrio--tira .bloque__cifra{ font-size:clamp(1.6rem,2.8vw,2.3rem); }

.vidrio--alto{ display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:clamp(380px,44vw,530px); padding:clamp(22px,2.4vw,32px); }
.vidrio--alto .bloque{ align-items:center; transform:translateY(clamp(26px,5vw,62px));
  transition:transform .42s var(--ease-out); }
.vidrio--alto:hover .bloque,.vidrio--alto:focus-within .bloque{ transform:none; }
.vidrio__hueco{ flex:1; display:flex; align-items:center; justify-content:center; width:100%;
  padding:clamp(16px,2vw,28px) 0; }
.vidrio--alto .flotador{ display:flex; justify-content:center; max-width:72%; }
.vidrio--alto .bloque__enlace{ margin-top:0; }

/* El objeto flota mientras se señala su modulo */
.flotador{ will-change:transform; }
@keyframes flota{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  28%{ transform:translate3d(0,-8px,0) rotate(1.1deg); }
  58%{ transform:translate3d(0,-13px,0) rotate(-.8deg); }
  100%{ transform:translate3d(0,0,0) rotate(0deg); }
}
.tira__celda:hover .flotador,
.tira__celda:focus-within .flotador,
.columna:hover .flotador,
.columna:focus-within .flotador,
.vitrina__ficha:hover .flotador,
.blob:hover .flotador,
.cartel:hover .flotador,
.vidrio:hover .flotador,
.vidrio:focus-within .flotador{ animation:flota 4.2s ease-in-out infinite; }

@media (max-width:880px){
  .tira,.columnas,.vitrina,.blobs,.carteles,.vidriera__rejilla{ grid-template-columns:1fr; }
  .vidrio--alto{ min-height:300px; }
  .columna{ min-height:300px; }
  .vitrina__ficha,.blob{ aspect-ratio:2/1; }
  .cartel{ min-height:auto; }
  .cartel__dibujo{ padding:clamp(18px,6vw,40px) 0; }
}

@media (prefers-reduced-motion: reduce){
  body[data-page="lab-cifras"] *{ transition-duration:.01ms !important; }
  .cartel__objeto{ opacity:1; transform:none; }
  .flotador{ animation:none !important; }
  .tira__objeto,.columna__objeto{ transform:none; }
  .columna .bloque,.vidrio--alto .bloque{ transform:none; }
}