/* ==========================================================================
   MARVATOYS - SECCIONES DE LA LANDING
   Se carga DESPUES de landing.css. Aqui vive lo nuevo: cinta 3D de marcas,
   rejilla de categorias con imagen, muro de expos y franja de nosotros.
   Cada seccion trae su propia tinta en --sec para que los rotulos no se
   repitan de color.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ROTULOS POR SECCION
   -------------------------------------------------------------------------- */
.sec{--sec:var(--sangre);position:relative}
.sec__cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e4);margin-bottom:var(--e5);flex-wrap:wrap;position:relative}
.sec__cab::after{content:'';position:absolute;left:0;right:0;bottom:-18px;height:2px;
  background:linear-gradient(90deg,var(--sec),transparent 62%)}
.sec__t{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,5.2vw,66px);line-height:1.02;letter-spacing:-.01em;
  color:var(--hueso);margin:0}
.sec__t em{font-style:normal;color:var(--sec)}
.sec__k{font-family:var(--f-dato);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sec);display:block;margin-bottom:12px}
.sec__d{font-family:var(--f-dato);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ceniza);text-align:right;line-height:2;
  padding-bottom:8px}
@media(max-width:620px){.sec__d{text-align:left}}

/* --------------------------------------------------------------------------
   MARCAS: dos franjas que corren
   El 3D anterior encimaba las filas porque la perspectiva las acercaba
   entre si. Ahora cada franja tiene altura propia y recorte, asi que es
   imposible que se pisen. El caracter lo pone el movimiento y el sesgo.
   -------------------------------------------------------------------------- */
.cinta3d{--sec:var(--cian);position:relative;padding:var(--e6) 0;overflow:hidden}

.cinta3d__escena{display:flex;flex-direction:column;gap:20px;
  transform:skewY(-1.6deg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

/* Cada franja recorta lo suyo: ninguna puede invadir a la vecina */
.cinta3d__carril{position:relative;height:106px;overflow:hidden}
.cinta3d__fila{position:absolute;left:0;top:0;height:100%;
  display:flex;align-items:center;width:max-content;gap:18px;
  will-change:transform}

.mrk{position:relative;flex:0 0 auto;width:auto;height:82px;display:flex;
  align-items:center;gap:14px;padding:0 20px 0 14px;
  border-radius:18px;background:#15141C;border:1px solid var(--linea);
  text-decoration:none;overflow:hidden;
  transition:transform .4s var(--curva),border-color .35s,background-color .35s}

/* Filo de color a la izquierda, en vez del blob que se salia */
.mrk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--ac);transition:width .35s var(--curva)}

.mrk__f{width:52px;height:52px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  background:var(--ac);display:grid;place-items:center;margin-left:8px}
.mrk__f img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.1);opacity:.8;
  transition:filter .4s,opacity .4s,transform .5s var(--curva)}
.mrk__f b{font-family:var(--f-display);font-size:20px;color:var(--void);line-height:1}

.mrk__d{min-width:0;white-space:nowrap}
.mrk__n{display:block;font-family:var(--f-cuerpo);font-weight:700;font-size:15px;
  line-height:1.2;color:var(--hueso)}
.mrk__e{display:block;font-style:normal;font-family:var(--f-dato);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);margin-top:5px}

.mrk__c{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.06);
  font-family:var(--f-dato);font-size:11px;font-weight:700;color:var(--ac);
  margin-left:6px}

.mrk:hover,.mrk.activa{transform:translate3d(0,-5px,0);border-color:var(--ac);
  background:#1B1924}
.mrk:hover::before,.mrk.activa::before{width:7px}
.mrk:hover .mrk__f img,.mrk.activa .mrk__f img{filter:none;opacity:1;transform:scale(1.1)}

@media(max-width:760px){
  .cinta3d__escena{gap:14px;transform:skewY(-1deg)}
  .cinta3d__carril{height:92px}
  .mrk{height:72px;padding:0 16px 0 12px;gap:11px}
  .mrk__f{width:44px;height:44px}
  .mrk__n{font-size:14px}
}

/* --------------------------------------------------------------------------
   CATEGORIAS CON IMAGEN
   Cada seccion es una placa alta con foto al fondo. Al apuntarla, la foto
   se satura y sube, el nombre se desplaza y aparece el conteo.
   -------------------------------------------------------------------------- */
.secciones{--sec:var(--amarillo)}
.rej-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1080px){.rej-cat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.rej-cat{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:480px){.rej-cat{grid-template-columns:1fr 1fr;gap:10px}}

.cat-p{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:20px;background:#12111A;border:1px solid var(--linea);
  text-decoration:none;isolation:isolate;
  transition:transform .5s var(--curva),border-color .4s,box-shadow .5s}
.cat-p__f{position:absolute;inset:0;z-index:0}
.cat-p__f img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.85) contrast(1.12) brightness(.8);
  transform:scale(1.04);
  transition:filter .6s,transform .8s var(--curva)}
/* Sin foto todavia: queda la tinta de la seccion con su inicial */
.cat-p__f--vacia{background:linear-gradient(160deg,var(--ac),#0E0D13 78%)}
.cat-p__k{position:absolute;left:50%;top:44%;z-index:1;transform:translate(-50%,-50%);
  font-family:var(--f-display);font-size:clamp(52px,7vw,92px);line-height:1;
  color:rgba(245,241,232,.14);pointer-events:none}
.cat-p__velo{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(8,7,10,.1) 30%,rgba(8,7,10,.88) 88%);
  transition:background .5s}
.cat-p__txt{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 18px;
  transition:transform .5s var(--curva)}
.cat-p__n{display:block;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(16px,1.7vw,21px);line-height:1.1;color:var(--hueso)}
.cat-p__c{display:block;font-family:var(--f-dato);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ac);margin-top:8px}
.cat-p__ir{position:absolute;right:16px;top:16px;z-index:4;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--ac);color:var(--void);
  font-family:var(--f-dato);font-size:15px;font-weight:700;
  opacity:0;transform:scale(.5) rotate(-30deg);
  transition:opacity .35s,transform .45s var(--curva)}

.cat-p:hover,.cat-p.activa{transform:translate3d(0,-8px,0);border-color:var(--ac);
  box-shadow:0 26px 44px -24px var(--ac)}
.cat-p:hover .cat-p__f img,.cat-p.activa .cat-p__f img{
  filter:none;transform:scale(1.12)}
.cat-p:hover .cat-p__txt,.cat-p.activa .cat-p__txt{transform:translateY(-6px)}
.cat-p:hover .cat-p__ir,.cat-p.activa .cat-p__ir{opacity:1;transform:none}
.cat-p:hover .cat-p__velo,.cat-p.activa .cat-p__velo{
  background:linear-gradient(180deg,rgba(8,7,10,0) 24%,rgba(8,7,10,.9) 92%)}

/* --------------------------------------------------------------------------
   ARREGLO PARA EL ANCLAJE
   El CSS original lleva overflow-x:hidden en html y body. Eso crea un
   contenedor de scroll y anula position:sticky en toda la pagina.
   overflow-x:clip recorta igual pero NO genera ese contenedor, asi que
   el anclaje vuelve a funcionar.
   -------------------------------------------------------------------------- */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip !important; }
}

/* --------------------------------------------------------------------------
   EXPOS: seccion anclada con recorrido horizontal
   La pagina se detiene y las muestras desfilan de lado mientras bajas.
   Cada panel ocupa la pantalla completa: foto con parallax, cifra gigante
   detras, marquesina con el nombre de la expo y titulo por palabras.
   -------------------------------------------------------------------------- */
.xpo{position:relative;
  /* Un tramo de scroll por muestra, mas uno de entrada */
  height:calc((var(--n) + .4) * 100vh);
  background:var(--void)}

.xpo__pin{position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;display:flex;flex-direction:column}

/* ---- Fondo que cambia con la muestra activa ---- */
.xpo__fondo{position:absolute;inset:0;z-index:0}
.xpo__f{position:absolute;inset:-6%;opacity:0;
  background-size:cover;background-position:center;
  filter:blur(38px) saturate(1.25) brightness(.5);
  transform:scale(1.08);
  transition:opacity 1.1s ease}
.xpo__f.viva{opacity:1}
.xpo__grano{position:absolute;inset:0;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.xpo__velo{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,transparent 20%,rgba(8,7,10,.72) 72%,var(--void) 98%)}

/* ---- Rotulo fijo arriba ---- */
.xpo__cab{position:relative;z-index:3;
  padding:clamp(24px,4vh,52px) clamp(20px,5vw,64px) 0;
  pointer-events:none}
.xpo__k{display:block;font-family:var(--f-dato);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--magenta);margin-bottom:10px}
.xpo__t{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,5vw,64px);line-height:1;letter-spacing:-.01em;
  color:var(--hueso);margin:0}
.xpo__t em{font-style:normal;color:var(--magenta)}

/* ---- El tren de paneles ---- */
.xpo__tren{position:relative;z-index:2;flex:1;display:flex;
  will-change:transform}

.xpo__p{position:relative;flex:0 0 100vw;width:100vw;height:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,4vw,72px);
  padding:0 clamp(20px,5vw,64px) clamp(90px,12vh,130px)}
@media(max-width:900px){
  .xpo__p{grid-template-columns:1fr;gap:18px;
    align-content:center;padding-bottom:clamp(120px,18vh,170px)}
}

/* Cifra gigante detras de todo */
.xpo__cifra{position:absolute;right:2vw;top:50%;z-index:0;
  transform:translateY(-52%);
  font-family:var(--f-display);font-size:clamp(180px,34vw,460px);line-height:.78;
  color:transparent;-webkit-text-stroke:2px rgba(245,241,232,.07);
  pointer-events:none;user-select:none}

/* Marco de la foto */
.xpo__marco{position:relative;z-index:1;
  height:min(58vh,520px);border-radius:26px;overflow:hidden;
  border:1px solid rgba(245,241,232,.12);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.98);
  transition:border-color .6s,box-shadow .6s}
.xpo__p.viva .xpo__marco{border-color:color-mix(in srgb,var(--ac) 45%,transparent);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.98),
             0 0 60px -30px var(--ac)}
@media(max-width:900px){.xpo__marco{height:min(34vh,300px)}}

/* --------------- Collage de piezas ---------------
   El marco se llena con las propias piezas de la muestra. El acomodo
   cambia segun cuantas haya, para que con dos o con seis se vea armado
   y no como una rejilla a medias. */
.xpo__col{position:absolute;inset:-2% -3%;display:grid;gap:7px;padding:7px;
  will-change:transform}

/* Una pieza: ocupa todo */
.xpo__col[data-n="1"]{grid-template-columns:1fr}

/* Dos: mitades verticales */
.xpo__col[data-n="2"]{grid-template-columns:1fr 1fr}

/* Tres: una grande a la izquierda y dos apiladas */
.xpo__col[data-n="3"]{grid-template-columns:1.35fr 1fr;
  grid-template-rows:1fr 1fr}
.xpo__col[data-n="3"] .xpo__cel:first-child{grid-row:span 2}

/* Cuatro: rejilla pareja */
.xpo__col[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

/* Cinco o mas: una protagonista y el resto en columna */
.xpo__col[data-n="5"],
.xpo__col[data-n="6"]{grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows:1fr 1fr}
.xpo__col[data-n="5"] .xpo__cel:first-child,
.xpo__col[data-n="6"] .xpo__cel:first-child{grid-row:span 2}

/* La pieza principal hace un zoom lentisimo, para que el collage
   nunca quede del todo quieto */
.xpo__p.viva .xpo__col[data-n="3"] .xpo__cel:first-child img,
.xpo__p.viva .xpo__col[data-n="5"] .xpo__cel:first-child img,
.xpo__p.viva .xpo__col[data-n="6"] .xpo__cel:first-child img{
  animation:xpo-respira 14s ease-in-out infinite}
@keyframes xpo-respira{
  50%{transform:scale(1.11)}
}

.xpo__cel{position:relative;display:block;overflow:hidden;border-radius:14px;
  background:#0E0D13;text-decoration:none;
  border:1px solid rgba(245,241,232,.08);
  opacity:0;
  transform:rotate(var(--r,0deg)) scale(.86) translate3d(0,26px,0);
  transition:transform .8s var(--curva),opacity .6s,
             box-shadow .5s,border-color .4s}

/* Entran una tras otra cuando el panel toma el frente */
.xpo__p.viva .xpo__cel{opacity:1;
  transform:translate3d(var(--px,0),var(--py,0),0) rotate(var(--r,0deg)) scale(1)}
.xpo__p.viva .xpo__cel{transition-delay:calc(var(--i,0) * 90ms + 140ms)}
.xpo__cel img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.75) contrast(1.08) brightness(.82);
  transform:scale(1.06);
  will-change:transform;
  transition:filter .6s,transform .8s var(--curva)}
.xpo__cel{transition-property:transform,opacity,box-shadow,filter;
  transition-duration:.75s,.55s,.5s,.4s}

.xpo__cel-v{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,10,.05) 45%,rgba(8,7,10,.9));
  opacity:0;transition:opacity .4s}

/* Reflejo diagonal que cruza al apuntar */
.xpo__cel::after{content:'';position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .8s var(--curva)}
.xpo__cel:hover::after{transform:translateX(120%)}

.xpo__cel-d{position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;transform:translateY(12px);
  transition:opacity .35s,transform .45s var(--curva)}
.xpo__cel-d b{font-family:var(--f-cuerpo);font-weight:700;font-size:12.5px;
  line-height:1.3;color:var(--hueso);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.xpo__cel-d em{font-style:normal;font-family:var(--f-dato);font-size:12px;
  font-weight:700;color:var(--ac)}
.xpo__cel-d em del{opacity:.5;font-weight:400;font-size:10px}
.xpo__cel-d em ins{text-decoration:none}

.xpo__cel:hover{transform:translate3d(var(--px,0),var(--py,0),0) rotate(0deg) scale(1.05);z-index:5;
  border-color:var(--ac);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.95),
             0 0 0 1px var(--ac),
             0 0 40px -12px var(--ac);
  transition-delay:0s}
.xpo__cel:hover img{filter:none;transform:scale(1.07)}
.xpo__cel:hover .xpo__cel-v{opacity:1}
.xpo__cel:hover .xpo__cel-d{opacity:1;transform:none}

/* Respaldo: si la muestra no tiene piezas, se usa su foto */
.xpo__img{position:absolute;inset:-8% 0;display:block;will-change:transform}
.xpo__img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.08) contrast(1.05)}
.xpo__marco::after{content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(8,7,10,.06) 62%,rgba(8,7,10,.5));
  pointer-events:none}

/* Marquesina con el nombre corriendo sobre la foto */
.xpo__marca{position:absolute;left:0;right:0;bottom:14px;z-index:1;
  display:flex;width:max-content;white-space:nowrap;pointer-events:none;
  animation:xpo-corre 26s linear infinite}
.xpo__marca em{font-style:normal;font-family:var(--f-display);
  text-transform:uppercase;font-size:clamp(22px,2.8vw,38px);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px rgba(245,241,232,.26);
  padding-right:20px}
@keyframes xpo-corre{to{transform:translateX(-50%)}}

/* Texto */
.xpo__d{position:relative;z-index:2}
.xpo__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:16px}
.xpo__num{font-family:var(--f-dato);font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ac)}
.xpo__cuenta{display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--f-dato);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ceniza);
  border-left:1px solid rgba(245,241,232,.2);padding-left:14px}
.xpo__cuenta b{font-family:var(--f-display);font-size:19px;line-height:1;
  color:var(--hueso)}
.xpo__n{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,5.2vw,74px);line-height:.98;letter-spacing:-.015em;
  color:var(--hueso);margin:0}
.xpo__n span{display:inline-block;overflow:hidden;vertical-align:bottom}
.xpo__n i{display:inline-block;font-style:normal;
  transform:translateY(105%);
  transition:transform .8s var(--curva)}
.xpo__p.viva .xpo__n i{transform:none}
.xpo__p.viva .xpo__n span:nth-child(2) i{transition-delay:.07s}
.xpo__p.viva .xpo__n span:nth-child(3) i{transition-delay:.14s}
.xpo__p.viva .xpo__n span:nth-child(4) i{transition-delay:.21s}
.xpo__p.viva .xpo__n span:nth-child(5) i{transition-delay:.28s}

.xpo__x{color:#C6C0D2;font-size:clamp(14px,1.15vw,16.5px);line-height:1.8;
  margin:18px 0 0;max-width:44ch;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s .2s,transform .7s .2s var(--curva)}
.xpo__p.viva .xpo__x{opacity:1;transform:none}

/* Boton grande */
.xpo__ir{display:inline-flex;align-items:center;gap:0;margin-top:22px;
  text-decoration:none;border-radius:999px;overflow:hidden;
  background:var(--ac);color:var(--void);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s .3s,transform .7s .3s var(--curva),
             box-shadow .35s var(--curva)}
.xpo__p.viva .xpo__ir{opacity:1;transform:none}
.xpo__ir-t{padding:17px 26px;font-family:var(--f-dato);font-size:12px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.xpo__ir-f{display:grid;place-items:center;width:54px;align-self:stretch;
  background:rgba(8,7,10,.2);font-size:17px;
  transition:transform .35s var(--curva)}
.xpo__ir:hover{box-shadow:0 18px 40px -16px var(--ac)}
.xpo__ir:hover .xpo__ir-f{transform:translateX(4px)}

/* ---- Pie: indice y progreso ---- */
.xpo__pie{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:0 clamp(20px,5vw,64px) clamp(20px,3.4vh,36px);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap}
@media(max-width:640px){.xpo__pie{justify-content:center;text-align:center}}

.xpo__idx{display:flex;align-items:center;gap:10px}
.xpo__punto{width:34px;height:34px;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center}
.xpo__punto span{display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(245,241,232,.28);
  transition:width .45s var(--curva),background-color .3s,box-shadow .3s}
.xpo__punto:hover span{background:var(--ac)}
.xpo__punto.activo span{width:30px;border-radius:999px;background:var(--ac);
  box-shadow:0 0 16px -2px var(--ac)}

.xpo__barra{flex:1;min-width:80px;height:2px;background:rgba(245,241,232,.14);
  border-radius:99px;overflow:hidden}
.xpo__barra span{display:block;height:100%;width:0;background:var(--magenta);
  border-radius:99px}

.xpo__ayuda{margin:0;font-family:var(--f-dato);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ceniza);
  display:flex;align-items:center;gap:9px;
  animation:xpo-respira 3s ease-in-out infinite}
.xpo__ayuda span{color:var(--magenta);font-size:14px}
@keyframes xpo-respira{50%{opacity:.4}}
.xpo.avanzada .xpo__ayuda{opacity:0;transition:opacity .5s}

/* ==========================================================================
   EXPOS EN PANTALLA CHICA
   Sin anclaje: tarjetas en carril horizontal, con asomo de la siguiente
   para que se lea como algo que se desliza. Cada muestra ensena una pieza.
   ========================================================================== */
.xpo.sin-pin{height:auto}
.xpo.sin-pin .xpo__pin{position:relative;height:auto;overflow:visible;
  padding-bottom:22px}
.xpo.sin-pin .xpo__fondo{display:none}
.xpo.sin-pin .xpo__cab{padding:0 clamp(16px,5vw,28px) clamp(16px,4vw,24px)}

/* Carril */
.xpo.sin-pin .xpo__tren{transform:none !important;
  display:flex;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 clamp(16px,5vw,28px) 6px;
  scroll-padding-left:clamp(16px,5vw,28px)}
.xpo.sin-pin .xpo__tren::-webkit-scrollbar{display:none}

/* Cada muestra es una tarjeta cerrada */
.xpo.sin-pin .xpo__p{
  flex:0 0 min(82vw,380px);width:min(82vw,380px);height:auto;
  scroll-snap-align:start;
  display:block;padding:0;
  border-radius:22px;overflow:hidden;
  border:1px solid var(--linea);
  background:#12111A}

.xpo.sin-pin .xpo__cifra{display:none}
.xpo.sin-pin .xpo__n i,
.xpo.sin-pin .xpo__x,
.xpo.sin-pin .xpo__ir{opacity:1;transform:none;transition:none}
.xpo.sin-pin .xpo__cel{opacity:1;transform:none;transition:none}

/* La foto: una sola pieza de la muestra */
.xpo.sin-pin .xpo__marco{position:relative;height:auto;aspect-ratio:1/1;
  border-radius:0;border:0;box-shadow:none;margin:0}
.xpo.sin-pin .xpo__col{position:absolute;inset:0;
  display:block;gap:0;padding:0}
/* Solo la primera pieza: en 300 px no caben cuatro */
.xpo.sin-pin .xpo__col .xpo__cel{display:none}
.xpo.sin-pin .xpo__col .xpo__cel:first-child{
  display:block;position:absolute;inset:0;border-radius:0;
  grid-row:auto !important}
.xpo.sin-pin .xpo__cel img{filter:none;transform:scale(1.02)}
.xpo.sin-pin .xpo__cel::after{display:none}
.xpo.sin-pin .xpo__cel-v{opacity:1;
  background:linear-gradient(180deg,rgba(8,7,10,.05) 40%,rgba(8,7,10,.92))}
.xpo.sin-pin .xpo__cel-d{left:16px;right:16px;bottom:14px;
  opacity:1;transform:none}
.xpo.sin-pin .xpo__cel-d b{font-size:12px;-webkit-line-clamp:1}
.xpo.sin-pin .xpo__cel-d em{font-size:12px}

.xpo.sin-pin .xpo__marca{bottom:auto;top:12px;z-index:4}
.xpo.sin-pin .xpo__marca em{font-size:clamp(18px,4.6vw,26px);
  -webkit-text-stroke-width:1px}

/* Texto bajo la foto */
.xpo.sin-pin .xpo__d{position:relative;z-index:2;padding:18px 18px 22px}
.xpo.sin-pin .xpo__num{margin-bottom:12px;gap:10px}
.xpo.sin-pin .xpo__num i{font-size:9.5px;letter-spacing:.2em}
.xpo.sin-pin .xpo__num b{font-size:9px;padding:5px 11px}
.xpo.sin-pin .xpo__n{font-size:clamp(22px,5.6vw,30px);line-height:1.02}
.xpo.sin-pin .xpo__x{font-size:13.5px;margin-top:10px;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.xpo.sin-pin .xpo__ir{margin-top:16px;width:100%}
.xpo.sin-pin .xpo__ir-t{flex:1;padding:14px 18px;font-size:11px}
.xpo.sin-pin .xpo__ir-f{width:48px;font-size:15px}

/* Pie: en el flujo, con el aviso de deslizar */
.xpo.sin-pin .xpo__pie{position:relative;
  padding:18px clamp(16px,5vw,28px) 0;
  flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.xpo.sin-pin .xpo__barra{flex:1;min-width:60px}
.xpo.sin-pin .xpo__ayuda{flex:1 1 100%;font-size:9px}
.xpo.sin-pin .xpo__ayuda span{transform:rotate(-90deg)}

@media(max-width:420px){
  .xpo.sin-pin .xpo__p{flex-basis:86vw;width:86vw}
  .xpo.sin-pin .xpo__d{padding:16px 15px 18px}
}

/* --------------------------------------------------------------------------
   QUIENES SOMOS: una puerta, no un bloque informativo
   Todo el bloque es un enlace: se anuncia como tal con la etiqueta, el
   boton "Entrar" y una cinta de fondo que corre al apuntarlo.
   -------------------------------------------------------------------------- */
.somos{--sec:var(--violeta);padding:var(--e6) 0}

.puerta{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(20px,4vw,44px);padding:clamp(26px,4vw,46px);
  border-radius:28px;overflow:hidden;text-decoration:none;
  border:1px solid var(--linea);background:#12111A;
  transition:transform .5s var(--curva),border-color .4s,box-shadow .5s}
.puerta:hover{transform:translate3d(0,-6px,0);border-color:var(--sec);
  box-shadow:0 30px 60px -32px var(--sec)}
@media(max-width:860px){
  .puerta{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* Cinta de fondo que arranca al apuntar */
.puerta__fondo{position:absolute;left:0;right:0;top:50%;z-index:0;
  transform:translateY(-50%);
  display:flex;width:max-content;white-space:nowrap;pointer-events:none;
  opacity:.05;transition:opacity .5s}
.puerta__fondo em{font-style:normal;font-family:var(--f-display);
  text-transform:uppercase;font-size:clamp(46px,7vw,92px);line-height:1;
  color:var(--hueso);padding-right:26px}
.puerta:hover .puerta__fondo{opacity:.12;
  animation:puerta-corre 18s linear infinite}
@keyframes puerta-corre{to{transform:translate(-50%,-50%)}}

.puerta__fig{position:relative;z-index:2;width:clamp(84px,10vw,124px);
  aspect-ratio:1;display:grid;place-items:center}
.puerta__halo{position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,30,30,.45),transparent 68%);
  animation:puerta-late 6s ease-in-out infinite}
@keyframes puerta-late{50%{transform:scale(1.14);opacity:.7}}
.puerta__fig img{position:relative;z-index:2;width:100%;height:auto;
  filter:drop-shadow(0 14px 26px rgba(255,30,30,.42));
  transition:transform .55s var(--curva)}
.puerta:hover .puerta__fig img{transform:translate3d(0,-8px,0) rotate(-8deg) scale(1.06)}

.puerta__txt{position:relative;z-index:2}
.puerta__k{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-dato);font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sec);
  border:1px solid var(--sec);border-radius:999px;padding:7px 14px;
  margin-bottom:16px}
.puerta__k::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--sec);box-shadow:0 0 10px var(--sec)}
.puerta__t{display:block;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,44px);line-height:1.04;color:var(--hueso)}
.puerta__t em{font-style:normal;color:var(--sec)}
.puerta__d{display:block;color:var(--ceniza);font-size:15px;line-height:1.8;
  margin-top:12px;max-width:46ch}

/* El boton deja claro que se hace clic */
.puerta__cta{position:relative;z-index:2;display:flex;align-items:center;gap:14px;
  flex:0 0 auto;
  font-family:var(--f-dato);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--void);
  background:var(--sec);border:2px solid var(--void);border-radius:999px;
  padding:15px 24px;box-shadow:6px 6px 0 var(--hueso);
  transform:rotate(-1.4deg);
  transition:transform .35s var(--curva),box-shadow .35s var(--curva),
             background-color .3s}
.puerta:hover .puerta__cta{background:var(--amarillo);
  box-shadow:2px 2px 0 var(--hueso);
  transform:rotate(0deg) translate3d(4px,4px,0)}
.puerta__cta-f{display:inline-block;transition:transform .35s var(--curva)}
.puerta:hover .puerta__cta-f{transform:translate3d(6px,0,0)}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.sec-sep{height:1px;background:linear-gradient(90deg,transparent,var(--linea),transparent);
  margin:0 auto;max-width:var(--ancho)}

@media(prefers-reduced-motion:reduce){
  .cinta3d__fila{transform:none !important}
  .puerta__halo,.puerta__fig img,.puerta__fondo,
  .xpo__marca,.xpo__ayuda{animation:none}
  .xpo__n i,.xpo__x,.xpo__ir{transition:none;transform:none;opacity:1}
  .xpo__cel{opacity:1;transform:rotate(var(--r,0deg));transition:none}
  .xpo__col .xpo__cel:first-child img{animation:none}
}


/* ==========================================================================
   AJUSTES SOBRE EL CSS ORIGINAL
   .intro nacio con un margen superior negativo pensado para el rotulo viejo.
   Dentro de .sec ese margen encima el parrafo con el titulo.
   ========================================================================== */
.sec .intro{margin-top:0 !important;margin-bottom:var(--e5)}
.sec .intro b{color:var(--void);background:var(--sec);padding:2px 9px;
  font-weight:700;border-radius:4px}
.sec .rotulo::after{display:none}
.sec__cab{margin-bottom:calc(var(--e5) + 8px)}

/* Con poco alto en escritorio, el collage se simplifica */
@media(min-width:761px) and (max-height:760px){
  .xpo__col[data-n="5"] .xpo__cel:nth-child(n+4),
  .xpo__col[data-n="6"] .xpo__cel:nth-child(n+4){display:none}
  .xpo__col[data-n="5"],
  .xpo__col[data-n="6"]{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}
}