/* Museo de Ideas · portada de experiencias (Placetopay).
   Fondo blanco, la marca arriba, una tarjeta grande por experiencia con su vista previa real. */
:root {
  --ink: oklch(0.24 0.02 270);
  --ink-2: oklch(0.45 0.015 270);
  --ink-3: oklch(0.52 0.014 270);
  --line: oklch(0.92 0.006 270);
  --focus: oklch(0.62 0.19 45);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: 'Red Hat Display', system-ui, sans-serif;
  --text: 'Red Hat Text', system-ui, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: oklch(0.86 0.1 60); color: var(--ink); }

.top, .foot { width: min(1180px, 100%); margin: 0 auto; }
.top { padding: 28px clamp(16px, 5vw, 56px) 0; }
.brand { display: block; height: 36px; width: auto; user-select: none; -webkit-user-drag: none; }

.wrap { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(16px, 5vw, 56px) 40px; }
.intro { max-width: 760px; }
h1 {
  margin: 0;
  font: 800 clamp(44px, 7vw, 84px)/1 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lead { margin: 22px 0 0; max-width: 60ch; color: var(--ink-2); font: 500 clamp(17px, 1.6vw, 20px)/1.5 var(--text); text-wrap: pretty; }

/* Experiencias: crece con nuevas tarjetas sin cambiar el diseño. */
.exps {
  list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(18px, 2.4vw, 28px);
}
.exp {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 24px;
  background: #fff;
  color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px oklch(0.3 0.03 270 / 0.08), 0 18px 40px -22px oklch(0.3 0.05 270 / 0.32);
  overflow: hidden;
  transition: translate 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.exp:hover { translate: 0 -4px; box-shadow: 0 2px 4px oklch(0.3 0.03 270 / 0.08), 0 30px 60px -26px oklch(0.3 0.06 270 / 0.4); }
.exp:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.prev { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.exp-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px; flex: 1; }
.exp h2 { margin: 0; font: 800 clamp(26px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -0.025em; }
.exp p { margin: 0; color: var(--ink-2); font: 500 16px/1.55 var(--text); max-width: 52ch; }
.go {
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  color: var(--ink); font: 700 16px/1 var(--display);
}
.go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.35s var(--ease); }
.exp:hover .go svg { translate: 4px 0; }

/* Vista previa de A flote: pompas de jabón alrededor del campo de vidrio */
.prev-flote { background: radial-gradient(120% 90% at 50% 50%, #fff 55%, oklch(0.975 0.01 230) 100%); container-type: inline-size; }
.pb {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--d); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.985 0.02 var(--h) / 0.9) 0 34%, oklch(0.93 0.075 var(--h) / 0.76) 62%, oklch(0.82 0.145 var(--h) / 0.78) 100%);
  box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / 0.9), inset 0 -10px 20px -12px oklch(0.55 0.15 var(--h) / 0.5), 0 16px 26px -18px oklch(0.42 0.12 var(--h) / 0.5);
  animation: drift var(--t) ease-in-out infinite alternate;
  animation-delay: var(--o);
}
.pb::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, oklch(0.7 0.21 345 / 0.7), oklch(0.87 0.15 85 / 0.55), oklch(0.78 0.17 var(--h) / 0.75), oklch(0.78 0.14 215 / 0.7), oklch(0.64 0.2 295 / 0.6), oklch(0.7 0.21 345 / 0.7));
  -webkit-mask: radial-gradient(closest-side, transparent 54%, #000 84%, #000 96%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 54%, #000 84%, #000 96%, transparent 100%);
  animation: spin 14s linear infinite;
}
.pb::after {
  content: ''; position: absolute; left: 17%; top: 13%; width: 30%; height: 20%;
  border-radius: 46% 54% 40% 60% / 62% 64% 36% 38%; rotate: -34deg;
  background: linear-gradient(165deg, oklch(1 0 0 / 0.95), oklch(1 0 0 / 0.35) 60%, oklch(1 0 0 / 0));
}
@keyframes drift { to { translate: -50% calc(-50% - 9%); } }
@keyframes spin { to { rotate: 360deg; } }
.pill {
  position: absolute; left: 50%; top: 52%;
  translate: -50% -50%;
  width: 62%; padding: 3.2cqi 0;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -12px oklch(0.3 0.05 270 / 0.35), 0 0 0 1.5px oklch(0.78 0.1 230 / 0.6);
  color: var(--ink-3);
  font: 500 2.9cqi/1 var(--text);
  text-align: center; white-space: nowrap;
}

/* Vista previa del explorador: la fachada en pixel art */
.prev-explorador img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 40%;
  image-rendering: pixelated;
  transition: scale 1.2s var(--ease);
  user-select: none;
}
.exp:hover .prev-explorador img { scale: 1.04; }

.note { margin: 28px 0 0; color: var(--ink-3); font: 500 14px/1.4 var(--text); }
.foot { padding: 24px clamp(16px, 5vw, 56px) 32px; color: var(--ink-3); font: 500 13px/1.4 var(--text); }

@media (prefers-reduced-motion: reduce) {
  .pb, .pb::before { animation: none; }
  .exp, .go svg, .prev-explorador img { transition: none; }
}