/* Peligro de Extincion · Curaduria de memes / Galeria flotante 2.5D
   Memes originales sin marcos. ScrollTrigger en escritorio; carrusel tactil en movil.
   Los estilos se limitan a #curaduria-memes y al bloqueo del lightbox. */
.meme-museum{
  --meme-acid:#fff11f;--meme-pink:#fb250e;--meme-ink:#151217;
  position:relative;isolation:isolate;overflow:visible;
  padding:clamp(84px,9vw,130px) 0 clamp(86px,8vw,126px);
  background:#0b0b0e;color:#fffced;border-block:7px solid #151217;
}
/* Colores de la exposición más presentes, manteniendo los memes legibles. */
.meme-museum::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-2;
  background:
    linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px),
    radial-gradient(ellipse 55% 43% at 82% 24%,rgba(42,53,242,.44),transparent 86%),
    radial-gradient(ellipse 43% 43% at 7% 66%,rgba(241,45,108,.32),transparent 88%),
    radial-gradient(ellipse 35% 31% at 66% 91%,rgba(255,205,49,.18),transparent 92%),
    linear-gradient(165deg,#0b0b13 8%,#111025 53%,#0e0b16 100%);
  background-size:76px 76px,76px 76px,auto,auto,auto,auto;
}
/* En lugar del glifo ✳ (que iOS interpreta como emoji), el logo oficial
   real de PDE aparece detrás del arte. Mascara SVG: sin fuentes ni emojis. */
.meme-museum::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:20%;right:-7%;
  width:clamp(380px,65vw,1100px);
  height:clamp(200px,34vw,580px);
  background:linear-gradient(118deg,#fff11f 2%,#ff5c99 43%,#4259ff 89%);
  -webkit-mask-image:url("logo-oficial.svg");
  mask-image:url("logo-oficial.svg");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  opacity:.39;
  transform:translate3d(0,0,0) rotate(-9deg);
  animation:meme-logo-float 9s ease-in-out infinite alternate;
}
@keyframes meme-logo-float{
  from{transform:translate3d(0,0,0) rotate(-9deg)}
  to{transform:translate3d(-20px,17px,0) rotate(-6deg)}
}
/* Safari anterior: si no hay mascara WebKit, se sigue viendo el mismo logo. */
@supports not ((-webkit-mask-image:url("logo-oficial.svg")) or (mask-image:url("logo-oficial.svg"))){
  .meme-museum::after{
    background:url("logo-oficial.svg") center/contain no-repeat;
    filter:brightness(0) invert(1);
    opacity:.16;
  }
}
@media(max-width:900px){
  .meme-museum::after{
    top:32%;right:-28%;
    width:115vw;height:62vw;
    opacity:.29;
    animation-duration:11s;
  }
}
@media(prefers-reduced-motion:reduce){
  .meme-museum::after{animation:none}
}
.meme-museum-wrap{width:min(100%,1560px);margin:auto}
.meme-museum-top{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.38fr);
  align-items:end;gap:clamp(22px,6vw,110px);
  padding:0 clamp(22px,5.2vw,88px);margin-bottom:clamp(40px,5vw,76px);
}
.meme-museum-eyebrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--meme-ink);
  background:var(--meme-acid);padding:10px 18px;border:3px solid #151217;border-radius:999px;
  box-shadow:4px 5px 0 #1019da;
  font:900 11px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;
}
.meme-museum-title{
  font:clamp(74px,11.2vw,174px)/.86 'Anton',Impact,sans-serif;
  letter-spacing:-.045em;margin:24px 0 0;text-transform:uppercase;color:#f5f2e9;
  text-shadow:none;
}
.meme-museum-title span{
  display:block;color:var(--meme-acid);text-shadow:none;
  font-family:'Permanent Marker',cursive;font-size:clamp(52px,7.4vw,115px);
  line-height:1.05;letter-spacing:-.055em;text-transform:none;
  transform:rotate(-3deg);transform-origin:left center;margin-top:-5px;
}
.meme-museum-intro{
  max-width:345px;border:0;border-left:4px solid #1019da;
  padding:6px 0 6px 21px;color:#c1bac9;
  font:650 clamp(14px,1.35vw,18px)/1.6 'DM Sans',sans-serif;
}
.meme-museum-intro strong{display:block;margin-bottom:13px;color:var(--meme-acid);
  font:900 11px/1.25 'DM Sans',sans-serif;letter-spacing:.12em}
.meme-gallery-wall{
  position:relative;isolation:isolate;
  display:flex;align-items:center;gap:clamp(24px,3.8vw,68px);
  width:100%;height:clamp(540px,75svh,800px);
  padding:106px clamp(25px,6vw,100px) 52px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline:8%;overscroll-behavior-inline:contain;
  scrollbar-width:thin;scrollbar-color:#fff11f transparent;
  -webkit-overflow-scrolling:touch;perspective:1400px;touch-action:pan-x pan-y;
  background:
    radial-gradient(ellipse 40% 55% at 50% 50%,rgba(37,36,50,.52),transparent 86%),
    radial-gradient(ellipse 20% 38% at 86% 20%,rgba(251,37,14,.075),transparent 93%);
}
.meme-gallery-wall::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(transparent 49.93%,rgba(255,241,31,.07) 50%,transparent 50.07%),
             linear-gradient(90deg,transparent 49.93%,rgba(255,241,31,.07) 50%,transparent 50.07%);
}
.meme-gallery-wall::after{content:none}
.meme-museum-status{
  position:absolute;top:19px;left:clamp(20px,5vw,86px);right:clamp(20px,5vw,86px);
  z-index:250;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font:900 11px/1.3 'DM Sans',sans-serif;letter-spacing:.07em;text-transform:uppercase;
}
.meme-museum-count{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.meme-museum-count::before{content:"";width:10px;height:10px;flex-shrink:0;
  border-radius:50%;background:var(--meme-pink);box-shadow:0 0 0 4px var(--meme-acid)}
.meme-museum-mobile-hint{display:none}
.meme-gallery-position{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.meme-gallery-position>span:first-child{color:var(--meme-acid);font:900 15px 'DM Sans',sans-serif}
.meme-gallery-progress-track{display:block;width:90px;height:4px;overflow:hidden;
  background:#484550;border-radius:20px}
#memeGalleryProgress{display:block;width:12.5%;height:100%;background:var(--meme-acid);
  border-radius:20px;transition:width .17s ease}
.meme-museum-controls{display:flex;gap:9px}
.meme-museum-controls button{
  display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
  border:3px solid #151217;border-radius:50%;box-shadow:3px 4px 0 #1019da;
  background:var(--meme-acid);color:#151217;font-size:23px;font-weight:900;
  cursor:pointer;transition:transform .2s,opacity .2s,background .2s;
}
.meme-museum-controls button:hover:not(:disabled){transform:scale(1.09);background:#fff}
.meme-museum-controls button:disabled{opacity:.24;cursor:default}
.meme-gallery-card,.meme-gallery-card:nth-child(n){
  position:relative;z-index:1;flex:0 0 clamp(210px,21vw,325px);
  width:clamp(210px,21vw,325px);min-width:0;margin:0;
  scroll-snap-align:center;transform-style:preserve-3d;will-change:transform;
  transform:rotate(-3deg);
}
.meme-gallery-card:nth-of-type(even){transform:rotate(3deg)}
.meme-gallery-card:nth-of-type(3n){transform:rotate(-5deg)}
.meme-gallery-art{
  display:flex;flex-direction:column;align-items:center;gap:15px;
  position:relative;width:100%;padding:0;appearance:none;outline:0;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  color:#f8f6ef;cursor:zoom-in;text-align:left;
}
.meme-gallery-media{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:auto;min-width:0;padding:0;overflow:visible;
  background:transparent;aspect-ratio:auto;
}
.meme-gallery-media img{
  display:block;width:auto;max-width:92%;height:auto;max-height:min(42svh,400px);
  object-fit:contain;filter:drop-shadow(0 20px 18px rgba(0,0,0,.62));
  border-radius:6px;transition:filter .25s,transform .35s;
}
.meme-gallery-art:hover img{filter:drop-shadow(0 32px 29px rgba(0,0,0,.78)) brightness(1.06)}
.meme-gallery-number{display:none}
.meme-gallery-caption{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  width:100%;padding:0;gap:7px 12px;text-align:center;
}
.meme-gallery-caption b{font:900 clamp(13px,1.35vw,16px)/1.2 'DM Sans',sans-serif;
  letter-spacing:.005em;text-transform:uppercase}
.meme-gallery-caption span{font:750 9px/1.3 'DM Sans',sans-serif;color:#a9a3b4;text-transform:uppercase}
.meme-gallery-curatorial{
  display:flex;align-items:center;justify-content:space-between;
  gap:35px;margin:35px clamp(23px,5.2vw,88px) 0;padding-top:27px;
  border-top:1px solid rgba(255,255,255,.24);
}
.meme-gallery-curatorial p{max-width:720px;margin:0;color:#c0b9c9;
  font:650 clamp(13px,1.3vw,17px)/1.6 'DM Sans',sans-serif}
.meme-gallery-curatorial strong{color:#f6f3e8}
.meme-gallery-curatorial em{color:var(--meme-acid);white-space:nowrap;
  font:clamp(16px,2vw,24px) 'Permanent Marker',cursive;transform:rotate(-4deg)}
/* ScrollTrigger: ancla la escena, sin cajas ni marcos alrededor de las imagenes. */
.meme-museum.is-spiral .meme-gallery-wall{
  display:block;overflow:hidden;scroll-snap-type:none;touch-action:auto;
  padding:0;perspective:1400px;cursor:default;
}
.meme-museum.is-spiral .meme-gallery-card,
.meme-museum.is-spiral .meme-gallery-card:nth-child(n){
  position:absolute;left:50%;top:52%;margin:0;
  width:clamp(205px,22vw,330px);
  transform:none;scroll-snap-align:none;transition:none;
}
.meme-museum.is-spiral .meme-gallery-art{gap:13px}
.meme-museum.is-spiral .meme-gallery-media img{max-width:92%;max-height:min(42svh,400px)}
/* Visor de pieza: intacto funcionalmente, sin marco doble. */
.meme-museum-lightbox{
  position:fixed;z-index:2000;inset:0;
  display:none;align-items:center;justify-content:center;
  padding:clamp(60px,5vw,95px) clamp(18px,3vw,40px) 25px;
  background:rgba(5,5,12,.96);overflow:auto;
}
.meme-museum-lightbox[aria-hidden="false"]{display:flex}
.meme-museum-lightbox-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,290px);
  gap:clamp(20px,5vw,70px);align-items:center;position:relative;
  width:min(100%,1150px);color:white;
}
.meme-museum-lightbox-frame{display:flex;align-items:center;justify-content:center;min-width:0;max-height:77dvh}
.meme-museum-lightbox-frame .meme-gallery-media{
  display:flex;width:100%;max-height:77dvh;aspect-ratio:auto;padding:0;background:transparent;
}
.meme-museum-lightbox-frame .meme-gallery-media img{
  width:auto;max-width:100%;height:auto;max-height:73dvh;
  object-fit:contain;border-radius:7px;filter:drop-shadow(0 22px 26px #000);
}
.meme-museum-lightbox-info small{font:900 12px 'DM Sans',sans-serif;
  letter-spacing:.12em;color:var(--meme-acid)}
.meme-museum-lightbox-info h3{font:clamp(35px,5vw,66px)/1 'Anton',Impact,sans-serif;
  text-transform:uppercase;margin:14px 0}
.meme-museum-lightbox-info p{font:700 15px/1.55 'DM Sans',sans-serif;color:#cfcbd7}
.meme-museum-lightbox-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.meme-museum-lightbox-actions button,.meme-museum-lightbox-close{
  border:1px solid var(--meme-acid);background:var(--meme-acid);color:#16121b;
  font:900 13px 'DM Sans',sans-serif;border-radius:30px;padding:12px 16px;cursor:pointer;
}
.meme-museum-lightbox-close{position:fixed;top:20px;right:20px;z-index:2001}
body.meme-museum-lock{overflow:hidden}
.meme-gallery-art:focus-visible,.meme-museum button:focus-visible{outline:3px solid #20c4ff;outline-offset:6px}
@media(max-width:1000px){
  .meme-museum-top{grid-template-columns:1fr;gap:25px}
  .meme-museum-intro{max-width:640px}
}
@media(max-width:900px){
  .meme-gallery-wall{height:clamp(490px,74svh,720px);padding:100px 7vw 35px;gap:25px}
  .meme-gallery-card,.meme-gallery-card:nth-child(n){flex:0 0 min(68vw,310px);width:min(68vw,310px)}
  .meme-gallery-media img{max-height:min(39svh,370px)}
}
@media(max-width:780px){
  .meme-museum{padding:80px 0 92px}
  .meme-museum-top{padding-inline:22px;margin-bottom:18px}
  .meme-museum-title{font-size:clamp(64px,14vw,108px)}
  .meme-museum-title span{font-size:clamp(43px,10vw,78px);margin-top:4px}
  .meme-museum-eyebrow{font-size:10px;max-width:100%}
  .meme-museum-intro{font-size:15px;padding-left:15px}
  .meme-gallery-wall{height:clamp(475px,71svh,650px);padding:101px 22px 36px;
    scroll-padding-inline:22px;gap:20px;align-items:center}
  .meme-museum-status{top:14px;left:20px;right:20px;gap:9px;display:grid;
    grid-template-columns:1fr auto;align-items:center}
  .meme-museum-count{font-size:10px;grid-column:1}
  .meme-museum-mobile-hint{display:none}
  .meme-gallery-position{grid-column:2;grid-row:1;color:var(--meme-acid)}
  .meme-museum-controls{grid-column:2;grid-row:2;justify-content:flex-end}
  .meme-gallery-progress-track{width:65px}
  .meme-gallery-card,.meme-gallery-card:nth-child(n){flex:0 0 min(72vw,310px);
    width:min(72vw,310px);transform:rotate(-1.7deg)}
  .meme-gallery-card:nth-of-type(even){transform:rotate(2deg)}
  .meme-gallery-media img{max-width:94%;max-height:min(37svh,340px)}
  .meme-gallery-caption{gap:4px}
  .meme-gallery-caption b{font-size:13px}
  .meme-gallery-curatorial{margin:16px 22px 0;display:block}
  .meme-gallery-curatorial em{display:block;margin-top:17px}
  .meme-museum-lightbox{align-items:flex-start;padding:76px 20px 25px}
  .meme-museum-lightbox-inner{grid-template-columns:1fr;gap:23px;text-align:center}
  .meme-museum-lightbox-frame{max-height:53dvh}
  .meme-museum-lightbox-frame .meme-gallery-media img{max-height:51dvh}
  .meme-museum-lightbox-actions{justify-content:center}
}
@media(max-width:430px){
  .meme-museum-title{font-size:clamp(55px,13.7vw,77px)}
  .meme-museum-title span{font-size:clamp(41px,10.8vw,54px)}
  .meme-gallery-position>span:first-child{font-size:12px}
  .meme-gallery-progress-track{width:52px}
  .meme-gallery-card,.meme-gallery-card:nth-child(n){flex-basis:76vw;width:76vw}
  .meme-museum-status{left:15px;right:15px}
  .meme-museum-controls button{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .meme-gallery-card,.meme-gallery-art,.meme-gallery-media img,#memeGalleryProgress{transition:none!important}
  .meme-museum.is-spiral .meme-gallery-wall{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .meme-museum.is-spiral .meme-gallery-card{position:relative;left:auto;top:auto}
}


/* Espiral movil: scroll vertical, profundidad y piezas contenidas */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .meme-museum.is-spiral-mobile .meme-gallery-wall{
    display:block;
    width:100%;
    height:clamp(450px,72svh,685px);
    padding:0;
    overflow:hidden;
    perspective:1200px;
    scroll-snap-type:none;
    touch-action:pan-y;
    cursor:default;
  }
  .meme-museum.is-spiral-mobile .meme-gallery-card,
  .meme-museum.is-spiral-mobile .meme-gallery-card:nth-child(n){
    position:absolute;
    left:50%;
    top:65%;
    width:min(72vw,320px);
    max-width:320px;
    margin:0;
    scroll-snap-align:none;
    transform:none;
    transition:none;
  }
  .meme-museum.is-spiral-mobile .meme-gallery-media img{
    display:block;
    width:auto;
    max-width:94%;
    height:auto;
    max-height:min(34svh,285px);
    object-fit:contain;
  }
  .meme-museum.is-spiral-mobile .meme-gallery-caption{
    margin:2px auto 0;
    gap:4px;
    padding:0 4px;
  }
  .meme-museum.is-spiral-mobile .meme-gallery-caption b{
    font-size:12px;
    line-height:1.3;
  }
  .meme-museum.is-spiral-mobile .meme-gallery-caption span{
    font-size:9px;
  }
  .meme-museum.is-spiral-mobile .meme-gallery-art{
    cursor:zoom-in;
    gap:11px;
  }
  .meme-museum.is-spiral-mobile .meme-museum-status{
    top:15px;
    z-index:250;
  }
}
@media(max-width:430px) and (prefers-reduced-motion:no-preference){
  .meme-museum.is-spiral-mobile .meme-gallery-card,
  .meme-museum.is-spiral-mobile .meme-gallery-card:nth-child(n){
    width:min(75vw,300px);
  }
  .meme-museum.is-spiral-mobile .meme-gallery-media img{
    max-height:min(33svh,270px);
  }
}


/* Curaduría como exposición visual en escritorio.
   El texto editorial y la barra de estado dejan de separar las obras.
   Solo afecta >= 901px: todas las reglas de móvil quedan intactas. */
@media (min-width:901px) {
  #curaduria-memes.meme-museum {
    padding-top:clamp(42px,4.8vw,76px);
    padding-bottom:clamp(50px,5.5vw,90px);
  }
  #curaduria-memes .meme-museum-top {
    display:block;
    margin-bottom:clamp(2px,1.1vw,16px);
  }
  #curaduria-memes .meme-museum-title {
    font-size:clamp(75px,8.8vw,142px);
    line-height:.85;
    margin-top:17px;
  }
  #curaduria-memes .meme-museum-title span {
    font-size:clamp(49px,6.1vw,96px);
    margin-top:0;
  }
  #curaduria-memes .meme-museum-intro,
  #curaduria-memes .meme-gallery-curatorial {
    display:none;
  }
  /* Sin franja: conservar solo las flechas flotantes para navegar. */
  #curaduria-memes .meme-museum-count,
  #curaduria-memes .meme-gallery-position {
    display:none;
  }
  #curaduria-memes .meme-museum-status {
    top:clamp(10px,1.8vw,26px);
    left:auto;
    right:clamp(22px,5.2vw,85px);
    width:auto;
    justify-content:flex-end;
    gap:0;
  }
  #curaduria-memes .meme-museum-controls {
    gap:12px;
  }
  #curaduria-memes .meme-museum-controls button {
    width:clamp(46px,3.8vw,58px);
    height:clamp(46px,3.8vw,58px);
    font-size:clamp(23px,2vw,30px);
  }
  #curaduria-memes .meme-gallery-wall {
    height:clamp(660px,87svh,930px);
    padding-top:70px;
    padding-bottom:42px;
    gap:clamp(24px,3.2vw,58px);
  }
  #curaduria-memes .meme-gallery-card,
  #curaduria-memes .meme-gallery-card:nth-child(n) {
    flex-basis:clamp(335px,34vw,540px);
    width:clamp(335px,34vw,540px);
  }
  #curaduria-memes .meme-gallery-media img {
    max-width:97%;
    max-height:min(65svh,650px);
    object-fit:contain;
  }
  /* La misma espiral GSAP: protagonistas más grandes, sin recortar formatos. */
  #curaduria-memes.is-spiral .meme-gallery-card,
  #curaduria-memes.is-spiral .meme-gallery-card:nth-child(n) {
    width:clamp(335px,34vw,540px);
  }
  #curaduria-memes.is-spiral .meme-gallery-media img {
    max-width:97%;
    max-height:min(65svh,650px);
    object-fit:contain;
  }
}

/* Celular: exposición sin rótulos ni contador. Las flechas siguen funcionales. */
@media (max-width:900px){
  #curaduria-memes .meme-museum-count,
  #curaduria-memes .meme-gallery-position{
    display:none;
  }
  #curaduria-memes .meme-museum-status,
  #curaduria-memes.is-spiral-mobile .meme-museum-status{
    top:15px;
    left:auto;
    right:clamp(15px,4vw,24px);
    width:auto;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:0;
  }
  #curaduria-memes .meme-museum-controls{
    grid-column:auto;
    grid-row:auto;
    justify-content:flex-end;
  }
}


/* Corte entre la ruta de Casa Olinka y la sala de memes.
   Desktop: impedir que el pin/órbita de la galería se dibuje fuera de SU
   sección y cubra visualmente el mapa sticky anterior.
   Móvil conserva su diseño, altura y gestos actuales. */
@media (min-width:901px) {
  #curaduria-memes.meme-museum.is-spiral {
    overflow:clip;
    overflow-clip-margin:0;
  }
}
@supports not (overflow:clip) {
  @media (min-width:901px) {
    #curaduria-memes.meme-museum.is-spiral { overflow:hidden; }
  }
}