/* ===================================================================
   OLEA — Editorial bold
   Display: Sora · Cuerpo: Manrope · Paleta: oliva · hueso · gris
   =================================================================== */

:root {
  /* Olivos */
  --olive-900: #2b3018;
  --olive-800: #3a4220;
  --olive-700: #4c5829;
  --olive-600: #5f6e32;
  --olive-500: #74843f;
  --olive-400: #8d9b56;
  --olive-300: #aeb982;
  --olive-200: #d2d9bb;
  --olive-100: #e7ebd6;

  /* Neutros cálidos (hueso) */
  --bone: #f7f6f0;
  --bone-2: #efeee5;
  --white: #ffffff;
  --ink: #1b1d17;
  --gray-700: #45483e;
  --gray-500: #74776c;
  --gray-300: #c3c4b9;
  --line: #d8d8cc;

  --bg: var(--bone);
  --text: var(--ink);
  --muted: var(--gray-500);

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --pill: 999px;

  --shadow-sm: 0 2px 10px rgba(43, 48, 24, 0.06);
  --shadow: 0 20px 50px rgba(43, 48, 24, 0.12);
  --shadow-lg: 0 40px 90px rgba(43, 48, 24, 0.20);

  --display: "Sora", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--olive-300); color: var(--olive-900); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }

/* ---------- Tipografía display ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--olive-900);
}
h1 { font-size: clamp(3.2rem, 11vw, 9rem); font-weight: 800; }
h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--gray-700); line-height: 1.5; font-weight: 500; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-700);
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--olive-500); }
.text-center { text-align: center; }

/* índice editorial 01 / 02 */
.idx { font-family: var(--display); font-size: .9rem; font-weight: 700; color: var(--olive-400); letter-spacing: .1em; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 1rem; padding: 16px 30px;
  border-radius: var(--pill); border: 1.5px solid transparent; cursor: pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--olive-800); color: var(--bone); }
.btn-primary:hover { background: var(--olive-900); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--olive-800); border-color: var(--olive-300); }
.btn-ghost:hover { background: var(--olive-800); color: var(--bone); border-color: var(--olive-800); transform: translateY(-3px); }
.btn-white { background: var(--bone); color: var(--olive-900); }
.btn-white:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-lg { padding: 19px 38px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,246,240,0.78);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 18px; height: 92px; }
.brand { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.04em; color: var(--olive-900); flex-shrink: 0; min-width: 0; }
.brand .logo-mark {
  width: 48px; height: 48px; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, #1f2c14 0%, #0a100a 100%);
  display: grid; place-items: center;
  color: #b8ff5c;
  flex-shrink: 0;
  border: 1px solid rgba(140,220,90,.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 18px rgba(127,217,87,.5),
    inset 0 -3px 6px rgba(0,0,0,.45),
    inset 0 3px 5px rgba(180,240,130,.22);
}
.brand .logo-mark svg {
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 6px rgba(184,255,92,.8));
}
.brand b { display: contents; color: var(--olive-500); font-weight: 800; }
.nav-toggle { flex-shrink: 0; }

/* Menú hamburguesa SIEMPRE: los enlaces viven en un panel desplegable */
.nav-links {
  position: fixed; inset: 92px 0 auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--bone); padding: 14px clamp(20px,4vw,56px) 30px; border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow); transform: translateY(-140%); transition: transform .5s var(--ease);
  z-index: 99; max-height: calc(100vh - 84px); overflow-y: auto;
}
body.nav-open .nav-links { transform: translateY(0); }
.nav-links a {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  letter-spacing: -0.025em; color: var(--olive-900); padding: 15px 4px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color .25s, padding-left .3s var(--ease);
}
.nav-links a:last-child { border-bottom: none; }
.nav-links a::after { content: "→"; font-family: var(--body); font-size: 1.1rem; color: var(--olive-400); opacity: 0; transform: translateX(-10px); transition: opacity .25s, transform .25s var(--ease); }
.nav-links a:hover { color: var(--olive-600); padding-left: 14px; }
.nav-links a:hover::after { opacity: 1; transform: none; }
.nav-links a.active { color: var(--olive-600); }

/* Capa de oscurecimiento detrás del panel (sin HTML extra) */
body.nav-open::after { content: ""; position: fixed; inset: 92px 0 0 0; background: rgba(27,29,23,.45); z-index: 98; animation: navfade .4s var(--ease); }
@keyframes navfade { from { opacity: 0; } to { opacity: 1; } }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.nav-toggle { display: block; width: 48px; height: 48px; border: 1.5px solid var(--line); background: transparent; border-radius: 12px; cursor: pointer; position: relative; transition: border-color .25s, background .25s; }
.nav-toggle:hover { border-color: var(--olive-400); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:50%; top:50%; width:20px; height:2px; background: var(--olive-900); border-radius:2px; transform: translate(-50%,-50%); transition:.3s var(--ease); }
.nav-toggle span::before { transform: translate(-50%,-7px); }
.nav-toggle span::after { transform: translate(-50%,7px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translate(-50%,0) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translate(-50%,0) rotate(-45deg); }
body.nav-open { overflow: hidden; }

@media (max-width: 760px) {
  .brand { font-size: 1.55rem; }
  .brand .logo-mark { width: 44px; height: 44px; border-radius: 13px; }
  .brand .logo-mark svg { width: 26px; height: 26px; }
  .nav { gap: 12px; }
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary { padding: 11px 16px; font-size: .9rem; }
}
@media (max-width: 560px) {
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary { padding: 9px 13px; font-size: .82rem; }
  .brand { font-size: 1.4rem; gap: 11px; }
  .brand .logo-mark { width: 40px; height: 40px; border-radius: 12px; }
  .brand .logo-mark svg { width: 23px; height: 23px; }
  .nav { gap: 8px; height: 86px; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav-actions { gap: 6px; }
}
@media (max-width: 420px) {
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary { padding: 8px 11px; font-size: .76rem; }
  .brand { font-size: 1.2rem; gap: 9px; }
  .brand .logo-mark { width: 36px; height: 36px; border-radius: 11px; }
  .brand .logo-mark svg { width: 20px; height: 20px; }
  .nav-toggle { width: 40px; height: 40px; }
}

/* ---------- HERO editorial con foto de fondo ---------- */
.hero {
  position: relative; color: var(--bone);
  margin-top: -92px; /* la foto sube bajo el header translúcido */
  padding: clamp(150px, 20vw, 260px) 0 clamp(56px, 8vw, 104px);
  background-color: var(--olive-900);
  background-image:
    linear-gradient(95deg, rgba(20,22,12,.86) 0%, rgba(43,48,24,.62) 50%, rgba(43,48,24,.30) 100%),
    url("https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?q=80&w=2000&auto=format&fit=crop");
  background-size: cover; background-position: center;
}
.hero-grid { display: block; }
.hero-copy { position: relative; }

/* ===== Logo Pushfeel del hero (sustituye al H1, centrado, GRANDE) ===== */
.hero-pushfeel {
  margin: clamp(26px, 3vw, 40px) auto clamp(30px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.6vw, 36px);
  text-align: center;
  width: 100%;
}
.hpf-btn {
  width: clamp(220px, 28vw, 320px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 68%, #1a2412 0%, #0a100a 75%, #050805 100%);
  display: grid;
  place-items: center;
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    0 10px 22px rgba(0,0,0,.5),
    inset 0 -4px 10px rgba(0,0,0,.55),
    inset 0 4px 8px rgba(140,220,90,.06);
}
.hpf-cap {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: linear-gradient(170deg, #5a8a32 0%, #406d24 50%, #2e4e1a 100%);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 2px #8eee54,
    0 0 24px #7fd957,
    0 0 50px rgba(127,217,87,.80),
    0 0 95px rgba(127,217,87,.45),
    0 0 150px rgba(127,217,87,.24),
    0 12px 24px rgba(0,0,0,.6),
    inset 0 -12px 20px rgba(0,0,0,.38),
    inset 0 9px 14px rgba(180,240,130,.25);
}
.hpf-heart {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: #b8ff5c;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(184,255,92,.7));
}
.hpf-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.6rem, 8vw, 6rem);
  letter-spacing: -0.04em;
  color: #f7f6f0;
  line-height: 1;
}
.hpf-wordmark b {
  display: contents;
  color: #8eee54;
  font-weight: 800;
  text-shadow: 0 0 32px rgba(142,238,84,.6);
}

/* ===== Botón ★ Premium del hero (dorado, sustituye a "Ver cómo funciona") ===== */
.hero-premium-btn {
  background: linear-gradient(135deg, #a8852a 0%, #e0bd4e 50%, #f2d27e 100%);
  color: #2b3018;
  border: 1.5px solid #caa53e;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow:
    0 12px 32px rgba(202,165,62,.45),
    inset 0 -3px 8px rgba(0,0,0,.18),
    inset 0 3px 6px rgba(255,255,255,.55);
  text-shadow: 0 1px 1px rgba(255,255,255,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.hero-premium-btn:hover {
  background: linear-gradient(135deg, #8e6e1c 0%, #caa53e 50%, #e0bd4e 100%);
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px rgba(202,165,62,.6),
    inset 0 -3px 8px rgba(0,0,0,.18),
    inset 0 3px 6px rgba(255,255,255,.55);
}
.hero-copy .eyebrow { color: var(--olive-200); margin-bottom: clamp(18px, 2.5vw, 28px); }
.hero-copy .eyebrow::before { background: var(--olive-300); }
.hero h1 { color: var(--bone); font-size: clamp(2.3rem, 6vw, 5rem); }
.hero h1 .out { color: transparent; -webkit-text-stroke: 2px var(--bone); }
.hero h1 span { color: var(--olive-300); font-style: italic; font-weight: 800; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-top: clamp(26px, 4vw, 44px); padding-top: 30px; border-top: 1px solid rgba(247,246,240,.28); }
.hero-copy .lead { max-width: 540px; color: var(--olive-100); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* botones legibles sobre la foto */
.hero .btn-primary { background: var(--bone); color: var(--olive-900); }
.hero .btn-primary:hover { background: var(--olive-100); }
.hero .btn-ghost { color: var(--bone); border-color: rgba(247,246,240,.55); }
.hero .btn-ghost:hover { background: var(--bone); color: var(--olive-900); border-color: var(--bone); }

.hero-stats { display: flex; gap: clamp(24px, 4vw, 56px); justify-content: flex-end; flex-wrap: wrap; }
.hero-stats .stat strong { font-family: var(--display); display: block; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; color: var(--bone); letter-spacing: -0.04em; line-height: 1; }
.hero-stats .stat span { font-size: .8rem; color: var(--olive-200); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

@media (max-width: 880px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-stats { justify-content: flex-start; }
}

/* Banda buscador (full width sobre oliva) */
.search-band { background: var(--olive-900); }
.search-card { background: transparent; color: var(--bone); padding: clamp(40px,6vw,72px) 0; }
.search-band .container { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(30px,5vw,70px); align-items: center; }
.search-card h3 { color: var(--bone); font-size: clamp(1.8rem,3vw,2.6rem); }
.search-card > p, .search-intro p { color: var(--olive-200); margin-top: 14px; max-width: 360px; }
#search-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-300); margin-bottom: 9px; }
.field select, .field input {
  width: 100%; padding: 15px 4px; border: none; border-bottom: 1.5px solid var(--olive-600);
  font: inherit; font-size: 1.05rem; color: var(--bone); background: transparent; transition: border-color .2s;
}
.field select option { color: var(--ink); }
.field select:focus, .field input:focus { outline: none; border-bottom-color: var(--olive-300); }
.field ::placeholder { color: var(--olive-400); }
.field-row { display: contents; }
#search-form .btn { grid-column: 1 / -1; width: 100%; margin-top: 8px; background: var(--bone); color: var(--olive-900); }
#search-form .btn:hover { background: var(--olive-200); }
@media (max-width: 760px) { .search-band .container { grid-template-columns: minmax(0, 1fr); } #search-form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; background: var(--bone); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: scroll 28s linear infinite; }
.marquee-track span { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem,2.4vw,2rem); color: var(--olive-700); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 56px; }
.marquee-track span::after { content: "✳"; color: var(--olive-300); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section.alt { background: var(--bone-2); }
.section.olive { background: var(--olive-900); color: var(--bone); }
.section.olive h2, .section.olive h3 { color: var(--bone); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head .lead { margin-top: 20px; }

/* ---------- Features (editorial list) ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.feature {
  padding: clamp(28px,4vw,44px) clamp(20px,3vw,40px); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start;
  transition: background .35s var(--ease);
}
.feature:nth-child(odd) { border-right: 1px solid var(--line); }
.feature:hover { background: var(--white); }
.feature .icon { width: 56px; height: 56px; border-radius: 14px; border: 1.5px solid var(--olive-300); color: var(--olive-700); display: grid; place-items: center; transition: background .3s, color .3s; }
.feature:hover .icon { background: var(--olive-800); color: var(--bone); border-color: var(--olive-800); }
.feature .icon svg { width: 26px; height: 26px; }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .98rem; max-width: 42ch; }
@media (max-width: 760px) { .features { grid-template-columns: minmax(0, 1fr); } .feature:nth-child(odd) { border-right: none; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; border-top: 1px solid var(--olive-700); }
.section.olive .steps { border-top-color: var(--olive-600); }
.step { position: relative; padding: clamp(30px,4vw,48px) clamp(20px,2.5vw,36px) clamp(30px,4vw,48px) 0; }
.step + .step { padding-left: clamp(20px,2.5vw,36px); border-left: 1px solid var(--olive-600); }
.step::before { counter-increment: step; content: counter(step,decimal-leading-zero); font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem,4vw,3.6rem); color: var(--olive-400); display: block; margin-bottom: 18px; letter-spacing: -0.04em; }
.step h3 { color: var(--bone); margin-bottom: 10px; }
.section.olive .step p { color: var(--olive-200); font-size: .98rem; }
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr); } .step + .step { border-left: none; border-top: 1px solid var(--olive-600); padding-left: 0; } }

/* ---------- Perfiles ---------- */
.profiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.profile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4.1; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease); }
.profile:hover { transform: translateY(-8px); }
.profile .avatar { width:100%; height:100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.profile .ph { width: 100%; height: 100%; }
.profile::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(27,29,23,.9) 0%, rgba(27,29,23,.15) 45%, transparent 70%); }
.profile .overlay { position: absolute; inset: auto 0 0 0; padding: 22px 20px; color: var(--bone); z-index: 2; }
.profile .overlay strong { font-family: var(--display); font-size: 1.25rem; font-weight: 700; display: block; letter-spacing: -0.02em; }
.profile .overlay span { font-size: .85rem; opacity: .85; }
.profile .badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(247,246,240,.92); color: var(--olive-800); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 6px; }
.profile .badge.online::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: #5fa05a; }
@media (max-width: 920px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- Baraja de perfiles (swipe) ---------- */
.deck-wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.deck { position: relative; width: min(330px, 82vw); aspect-ratio: 3 / 4.1; touch-action: none; user-select: none; -webkit-user-select: none; }
.deck .card { position: absolute; inset: 0; width: 100%; cursor: grab; will-change: transform; box-shadow: var(--shadow); }
.deck .card:hover { transform: none; }
.deck .card.dragging { transition: none !important; cursor: grabbing; }
.deck .card .overlay strong { font-size: 1.4rem; }
/* sellos sobre la tarjeta */
.deck .card .stamp { position: absolute; top: 26px; z-index: 4; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border: 3px solid; border-radius: 12px; opacity: 0; transition: opacity .12s; pointer-events: none; }
.deck .card .stamp.like { left: 22px; color: #67ad5f; border-color: #67ad5f; transform: rotate(-15deg); }
.deck .card .stamp.nope { right: 22px; color: #cf5f44; border-color: #cf5f44; transform: rotate(15deg); }
.deck .card .stamp.super { left: 50%; top: auto; bottom: 130px; transform: translateX(-50%) rotate(-7deg); color: #e0bd4e; border-color: #e0bd4e; }

/* pantalla final del juego */
.deck-done { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; background: var(--bone-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.deck-done h3 { font-size: 1.7rem; }
.deck-done p { color: var(--muted); font-weight: 600; }
.deck-done p b { color: var(--olive-700); }

/* botones del juego */
.deck-actions { display: flex; align-items: center; gap: 18px; }
.act { border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; border: none; transition: transform .2s var(--ease); }
.act:hover { transform: translateY(-3px) scale(1.12); }
.act:active { transform: scale(.94); }
.act.nope { width: 80px; height: 80px; color: #cf5f44; border-color: #e6b6a8; }
.act.super { width: 72px; height: 72px; color: #caa53e; border-color: #e7d49a; }
.act.like { width: 80px; height: 80px; }
/* dos corazones girando en horizontal (se cruzan de lado a lado) */
.revol { position: relative; width: 70px; height: 48px; }
.revol .rh { position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; font-size: 34px; line-height: 1; }
.revol .a { animation: revH 3s ease-in-out infinite; }
.revol .b { animation: revH 3s ease-in-out infinite; animation-delay: -1.5s; }
@keyframes revH {
  0%   { transform: translateX(-18px) scale(1.18); z-index: 2; }
  49%  { z-index: 2; }
  50%  { transform: translateX(18px) scale(.8); z-index: 1; }
  99%  { z-index: 1; }
  100% { transform: translateX(-18px) scale(1.18); z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { .revol .a, .revol .b { animation: none; } .revol .b { transform: translateX(14px); } }
.act svg { width: 46px; height: 46px; }
.act.super svg { width: 40px; height: 40px; }
.deck-count { font-family: var(--display); font-weight: 700; color: var(--olive-700); font-size: .95rem; }
.deck-count b { color: var(--olive-900); }

/* fondo con foto detrás de la baraja */
.deck-section { position: relative; background: var(--olive-900); color: var(--bone); overflow: hidden; }
.deck-section::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(20,22,12,.80), rgba(20,22,12,.90)),
    url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=2000&auto=format&fit=crop");
  background-size: cover; background-position: center; }
.deck-section > .container { position: relative; z-index: 1; }
.deck-section h2 { color: var(--bone); }
.deck-section .eyebrow { color: var(--olive-200); }
.deck-section .eyebrow::before { background: var(--olive-300); }
.deck-section .deck-count { color: var(--olive-200); }
.deck-section .deck-count b { color: var(--bone); }

/* ---------- Testimonios editorial ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.testi { padding: clamp(30px,3.5vw,46px) clamp(20px,2.5vw,38px); border-bottom: 1px solid var(--line); }
.testi:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.testi .quote { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem,1.7vw,1.45rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--olive-900); margin-bottom: 26px; }
.testi .who { display: flex; align-items: center; gap: 13px; }
.testi .who .pic { width: 44px; height: 44px; border-radius: 50%; background: var(--olive-700); display:grid; place-items:center; color: var(--bone); font-family: var(--display); font-weight:700; }
.testi .who strong { display: block; font-weight: 700; }
.testi .who span { font-size: .84rem; color: var(--muted); }
.stars { color: #c9a227; letter-spacing: 3px; margin-bottom: 16px; font-size: .85rem; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: minmax(0, 1fr); } .testi:not(:nth-child(3n)) { border-right: none; } }

/* ---------- Page hero interior ---------- */
.page-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero .container { max-width: 960px; }
.page-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); margin: 22px 0 18px; }
.page-hero .lead { max-width: 600px; }
.breadcrumb { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.breadcrumb a:hover { color: var(--olive-700); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--olive-900); border-radius: var(--radius-xl); padding: clamp(48px, 7vw, 96px) clamp(28px,5vw,72px); text-align: center; color: var(--bone); position: relative; overflow: hidden; }
.cta-band .eyebrow { color: var(--olive-300); }
.cta-band .eyebrow::before { background: var(--olive-400); }
.cta-band h2 { color: var(--bone); margin: 18px 0 16px; }
.cta-band p { color: var(--olive-200); max-width: 540px; margin: 0 auto 32px; font-size: 1.1rem; }

/* ---------- Prose ---------- */
.prose { max-width: 720px; }
.section-head + .prose, .prose.center { margin-inline: auto; }
.prose h2 { margin: 44px 0 18px; }
.prose h3 { margin: 30px 0 12px; }
.prose p { margin-bottom: 18px; color: var(--gray-700); font-size: 1.05rem; }
.prose ul.bullets { margin: 0 0 24px; display: grid; gap: 13px; }
.prose ul.bullets li { position: relative; padding-left: 34px; color: var(--gray-700); font-size: 1.05rem; }
.prose ul.bullets li::before { content:""; position:absolute; left:0; top:5px; width:20px; height:20px; border-radius:6px; background: var(--olive-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f7f6f0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }

/* ---------- Tips ---------- */
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tip { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tip:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tip .tip-top { height: 130px; background: var(--olive-800); display:grid; place-items:center; color: var(--bone); }
.tip .tip-top svg { width: 40px; height: 40px; }
.tip .tip-body { padding: 26px; }
.tip h3 { font-size: 1.25rem; margin-bottom: 10px; }
.tip p { color: var(--muted); font-size: .96rem; }
@media (max-width: 900px) { .tips { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Video ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.vthumb { position: relative; aspect-ratio: 16/9; background: var(--olive-900); display:grid; place-items:center; }
.vthumb .play { width: 66px; height: 66px; border-radius: 50%; background: rgba(247,246,240,.95); display:grid; place-items:center; transition: transform .3s var(--ease); }
.vcard:hover .vthumb .play { transform: scale(1.12); }
.vthumb .play svg { width: 26px; height: 26px; color: var(--olive-800); margin-left: 3px; }
.vthumb .dur { position:absolute; bottom:12px; right:12px; background: rgba(27,29,23,.82); color: var(--bone); font-size:.76rem; padding:4px 10px; border-radius: var(--pill); font-weight: 600; }
.vbody { padding: 22px 24px 26px; }
.vbody .tag { font-size:.74rem; font-weight:800; color: var(--olive-600); text-transform: uppercase; letter-spacing:.14em; }
.vbody h3 { font-size: 1.25rem; margin: 10px 0; }
.vbody p { color: var(--muted); font-size:.94rem; }
@media (max-width: 900px) { .video-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ciudades ---------- */
.cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.city { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: clamp(22px,3vw,34px) clamp(8px,2vw,28px); border-bottom: 1px solid var(--line); transition: padding-left .35s var(--ease), background .3s; }
.city:nth-child(odd) { border-right: 1px solid var(--line); }
.city:hover { background: var(--white); padding-left: clamp(20px,3vw,44px); }
.city h3 { font-size: clamp(1.6rem,3vw,2.4rem); }
.city span { color: var(--muted); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.city .arrow { color: var(--olive-600); }
@media (max-width: 700px) { .cities { grid-template-columns: minmax(0, 1fr); } .city:nth-child(odd) { border-right: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--olive-900); color: var(--olive-200); padding: clamp(56px,7vw,96px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-footer .brand { color: var(--bone); margin-bottom: 18px; }
.site-footer .brand b { color: var(--olive-400); }
.site-footer p { font-size: .96rem; max-width: 300px; }
.footer-col h4 { font-family: var(--display); color: var(--bone); font-size: 1.05rem; margin-bottom: 18px; }
.footer-col a { display: block; padding: 7px 0; font-size: .94rem; transition: color .2s, padding-left .25s; }
.footer-col a:hover { color: var(--bone); padding-left: 6px; }
.footer-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--olive-700); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--olive-700); display: grid; place-items: center; transition: background .25s, transform .25s, border-color .25s; }
.socials a:hover { background: var(--olive-700); transform: translateY(-3px); border-color: var(--olive-700); }
.socials svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Placeholders avatar ---------- */
.ph-1 { background: linear-gradient(150deg,#5f6e32,#aeb982); }
.ph-2 { background: linear-gradient(150deg,#4c5829,#8d9b56); }
.ph-3 { background: linear-gradient(150deg,#74843f,#d2d9bb); }
.ph-4 { background: linear-gradient(150deg,#2b3018,#74843f); }
.ph-5 { background: linear-gradient(150deg,#8d9b56,#4c5829); }
.ph-6 { background: linear-gradient(150deg,#aeb982,#3a4220); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } .marquee-track { animation: none; } }

/* anti-scroll-horizontal */
.field select, .field input { min-width: 0; max-width: 100%; }
.search-band .container > *, #search-form > *, .feature > *, .testi > *, .step, .city > * { min-width: 0; }

/* ====================== Página de registro ====================== */
.reg { padding: clamp(36px,5vw,64px) 0 clamp(56px,8vw,96px); }
.reg .container { max-width: 760px; }
.reg-step { margin-bottom: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.reg-step:last-of-type { border-bottom: none; }
.reg-step > .idx { display:block; margin-bottom: 6px; }
.reg-step h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 6px; }
.reg-step .sub { color: var(--muted); margin-bottom: 24px; }
.reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 20px; }
.reg-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reg-field.full { grid-column: 1 / -1; }
.reg-field label { font-weight: 700; font-size: .82rem; letter-spacing: .02em; color: var(--gray-700); }
.reg-field input, .reg-field select, .reg-field textarea {
  width: 100%; min-width: 0; max-width: 100%; padding: 14px 16px; border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.reg-field input:focus, .reg-field select:focus, .reg-field textarea:focus {
  outline: none; border-color: var(--olive-500); box-shadow: 0 0 0 4px var(--olive-100);
}
.reg-field textarea { resize: vertical; min-height: 92px; }
.reg-hint { font-size: .8rem; color: var(--muted); font-weight: 500; }

.chips, .seg { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--gray-300); border-radius: var(--pill); font-size: .9rem; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip span:hover { border-color: var(--olive-500); }
.chip input:checked + span { background: var(--olive-800); border-color: var(--olive-800); color: var(--bone); }

.reg-range output { font-family: var(--display); font-weight: 800; color: var(--olive-700); }
.reg-range input[type=range] { width: 100%; accent-color: var(--olive-700); height: 6px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .t-label strong { display: block; }
.toggle-row .t-label span { font-size: .85rem; color: var(--muted); }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--gray-300); border-radius: 999px; cursor: pointer; transition: background .25s; }
.switch .slider::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s; }
.switch input:checked + .slider { background: var(--olive-700); }
.switch input:checked + .slider::before { transform: translateX(22px); }

.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.photo-cell { aspect-ratio: 3/4; border: 2px dashed var(--gray-300); border-radius: var(--radius); display: grid; place-items: center; color: var(--olive-500); background: var(--bone); cursor: pointer; transition: border-color .2s, background .2s; }
.photo-cell:hover { border-color: var(--olive-500); background: #fff; }
.photo-cell svg { width: 26px; height: 26px; }

.reg-submit { margin-top: 30px; }
.reg-submit .btn { width: 100%; }
@media (max-width: 600px) { .reg-grid { grid-template-columns: minmax(0,1fr); } .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ====================== Explorar (mosaico de categorías) ====================== */
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.xgroup { margin-top: clamp(34px,5vw,54px); }
.xgroup-head { margin-bottom: 18px; }
.xgroup-head h3 { font-size: clamp(1.2rem,2.4vw,1.6rem); }
.xgroup-head p { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.xtile {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden;
  display: flex; align-items: flex-end; padding: 18px; color: #fff; text-decoration: none;
  isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.xtile::before { content: ""; position: absolute; inset: 0; background: var(--gx, var(--olive-700)); z-index: -1; }
.xtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); z-index: -1; }
.xtile:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.xtile.big { aspect-ratio: 16/9; grid-column: 1 / -1; }
.xtile .emoji { position: absolute; top: 14px; left: 16px; font-size: 1.5rem; line-height: 1; }
.xtile .count { position: absolute; top: 13px; right: 13px; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: .76rem; font-weight: 700; padding: 4px 10px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 5px; }
.xtile h3 { position: relative; color: #fff; font-size: clamp(1.05rem,2vw,1.35rem); line-height: 1.05; text-shadow: 0 1px 8px rgba(0,0,0,.35); margin: 0; }
.xtile.big h3 { font-size: clamp(1.5rem,3.5vw,2.4rem); }
@media (max-width: 760px) { .explore-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }

/* --- Explorar: foto temática + duotono --- */
.xtile { background: var(--gx); }
.xtile::before { content: none; }
.xtile .xphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: .95; z-index: 0; pointer-events: none; -webkit-user-drag: none; }
.xtile::after { z-index: 1; }
.xtile .emoji, .xtile .count, .xtile h3 { z-index: 2; }

/* ---- Botón morado "Retar a un juego" + vibración + toast ---- */
.act.game { width: auto; height: auto; background: transparent; color: #fff; box-shadow: none; border: none; }
.act.game:hover { background: transparent; transform: translateY(-3px); box-shadow: none; }
.act.game svg { width: 30px; height: 30px; }
@keyframes cardShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-9px) rotate(-3deg); }
  30% { transform: translateX(9px) rotate(3deg); }
  45% { transform: translateX(-7px) rotate(-2deg); }
  60% { transform: translateX(7px) rotate(2deg); }
  78% { transform: translateX(-4px) rotate(-1deg); }
}
.deck .card.shake { animation: cardShake .55s ease; }
.deck-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); background: #2b1b4d; color: #fff; border: 1px solid #7c3aed; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: .92rem; box-shadow: 0 12px 30px rgba(124,58,237,.45); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 120; max-width: 90vw; text-align: center; }
.deck-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* botón Jugar con texto */
.deck-actions { flex-wrap: wrap; }
/* Botón Juego = solo la ruleta (sin pill), al lado de los otros 3 */
.deck-actions { justify-content: center; flex-wrap: wrap; }
.act.game {
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  place-items: center;
}
.act.game:hover {
  background: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}
.act.game svg.ruleta-icon {
  width: 78px;
  height: 78px;
  overflow: visible;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.7))
    drop-shadow(0 5px 10px rgba(0,0,0,.5))
    drop-shadow(0 0 22px rgba(245,116,160,.25));
  animation: ruletaSpin 10s linear infinite;
  transform-origin: 50% 50%;
}
.act.game:hover svg.ruleta-icon { animation-duration: 2.2s; }
@keyframes ruletaSpin { to { transform: rotate(360deg); } }

/* Caption en negrita debajo de los 4 botones */
.deck-game-caption {
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-align: center;
  color: var(--bone);
  max-width: 360px;
  margin: 18px auto 0;
  padding: 0 16px;
}

@media (max-width: 480px){
  .act.game, .act.game svg.ruleta-icon { width: 72px; height: 72px; }
  .deck-game-caption { font-size: .85rem; max-width: 280px; margin-top: 14px; }
}

/* ====================== Salas grupales ====================== */
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.group{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:12px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.group:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.group .gic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;color:#fff}
.group h3{font-size:1.2rem}
.group .gmeta{color:var(--muted);font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.group .gmeta .near{color:var(--olive-600)}
.group .gjoin{margin-top:auto;align-self:flex-start;border:1.5px solid var(--olive-300);background:transparent;color:var(--olive-800);border-radius:999px;padding:9px 18px;font-family:var(--display);font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.group .gjoin:hover{background:var(--olive-800);color:var(--bone);border-color:var(--olive-800)}
.group .gjoin.joined{background:var(--olive-800);color:var(--bone);border-color:var(--olive-800)}
@media(max-width:820px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.groups{grid-template-columns:1fr}}

/* Salas grupales: tarjetas estilo espejo/glass oscuro */
.group{position:relative;overflow:hidden;background:linear-gradient(150deg,#323a20 0%,#23291a 55%,#191c12 100%);border:1px solid rgba(247,246,240,.10);box-shadow:0 18px 40px rgba(20,24,12,.35), inset 0 1px 0 rgba(255,255,255,.07);color:var(--bone)}
.group::before{content:"";position:absolute;top:-45%;left:-30%;width:85%;height:190%;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);transform:rotate(8deg);pointer-events:none}
.group h3{color:var(--bone)}
.group .gmeta{color:#b9bfa6}
.group .gmeta .near{color:#aeb982}
.group:hover{transform:translateY(-6px);box-shadow:0 28px 64px rgba(20,24,12,.5);border-color:rgba(174,185,130,.45)}
.group .gic{box-shadow:0 6px 16px rgba(0,0,0,.32)}
.group .gjoin{border-color:rgba(174,185,130,.5);color:#e7ebd6;background:transparent}
.group .gjoin:hover{background:#aeb982;color:#2b3018;border-color:#aeb982}
.group .gjoin.joined{background:#aeb982;color:#2b3018;border-color:#aeb982}

/* Lead Salas grupales: display, más grande, morado elegante */
.lead-grupos{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.25; letter-spacing:-0.01em; color:var(--olive-700); }

/* Features: tarjetas glass/espejo con destello */
.features{ border-top:none !important; gap:18px; }
.feature{ position:relative; overflow:hidden; border:1px solid rgba(120,124,100,.22) !important; border-radius:22px;
  background:linear-gradient(150deg, rgba(255,255,255,.58), rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 18px 40px rgba(43,48,24,.10), inset 0 1px 0 rgba(255,255,255,.65); }
.feature::after{ content:""; position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); transition:left .65s var(--ease); pointer-events:none; }
.feature:hover{ transform:translateY(-6px); background:linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.30));
  box-shadow:0 28px 64px rgba(43,48,24,.18); border-color:rgba(116,132,63,.5) !important; }
.feature:hover::after{ left:130%; }
.feature .icon{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* Features: glass oscuro espejo + borde de luz animado */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.feature{ background:linear-gradient(150deg,#2b3018 0%,#20251a 60%,#171b11 100%) !important; border:1px solid rgba(174,185,130,.22) !important; color:var(--bone); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 18px 44px rgba(20,24,12,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.feature h3{ color:var(--bone); }
.feature p{ color:#b9bfa6 !important; }
.feature .icon{ border-color:rgba(174,185,130,.45); color:#aeb982; }
.feature:hover{ transform:translateY(-6px); background:linear-gradient(150deg,#323a20 0%,#23291a 60%,#191c12 100%) !important; box-shadow:0 30px 70px rgba(20,24,12,.5); border-color:rgba(174,185,130,.55) !important; }
.feature:hover .icon{ background:#aeb982; color:#2b3018; border-color:#aeb982; }
.feature::before{ content:""; position:absolute; inset:0; border-radius:22px; padding:1.5px;
  background:conic-gradient(from var(--ang), transparent 0deg, #aeb982 55deg, #e0bd4e 110deg, transparent 165deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity .35s; pointer-events:none; z-index:1; }
.feature:hover::before{ opacity:1; animation:spinB 3.5s linear infinite; }
@keyframes spinB{ to{ --ang:360deg; } }

/* Tarjetas: chips de intereses + botón retroceder */
.profile .overlay .ichips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.profile .overlay .ichips span{font-size:.72rem;font-weight:700;color:#fff;background:rgba(247,246,240,.18);border:1px solid rgba(247,246,240,.32);padding:4px 10px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.act.undo{color:#e0bd4e}

/* ===== Perfiles top ===== */
.toppicks .tp-intro{max-width:720px;margin-bottom:42px}
.toppicks .tp-intro h2{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:clamp(2rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.02em;color:var(--olive-900);margin:14px 0 16px}
.toppicks .tp-intro p{font-size:1.05rem;color:var(--olive-700);max-width:560px}
.tp-cat{margin-top:38px}
.tp-cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.tp-cat-head h3{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:1.3rem;color:var(--olive-900);margin:0}
.tp-cat-head span{display:block;font-size:.9rem;color:var(--olive-600);margin-top:3px}
.tp-all{display:inline-flex;align-items:center;gap:7px;flex:none;font-weight:700;font-size:.92rem;color:var(--olive-700);text-decoration:none;white-space:nowrap}
.tp-all svg{width:17px;height:17px;transition:transform .25s ease}
.tp-all:hover svg{transform:translateX(4px)}
.tp-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:18px;overflow-x:auto;padding:4px 4px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.tp-row::-webkit-scrollbar{height:8px}
.tp-row::-webkit-scrollbar-thumb{background:var(--olive-200);border-radius:99px}
@media(min-width:1080px){.tp-row{grid-auto-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}
.tp-card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 26px rgba(43,48,24,.07);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;min-width:0}
.tp-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(43,48,24,.18)}
.tp-photo{position:relative;aspect-ratio:5/6;overflow:hidden}
.tp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.tp-card:hover .tp-photo img{transform:scale(1.06)}
.tp-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,29,23,.82) 0%,rgba(27,29,23,.25) 40%,transparent 70%)}
.tp-online{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;color:#fff;background:rgba(103,173,95,.92);padding:4px 10px;border-radius:99px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tp-online::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.tp-match{position:absolute;top:11px;right:11px;z-index:2;font-size:.7rem;font-weight:800;color:var(--olive-900);background:rgba(247,246,240,.94);padding:4px 9px;border-radius:99px}
.tp-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 12px}
.tp-meta h4{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:1.05rem;color:#fff;margin:0 0 2px;line-height:1.1}
.tp-meta p{font-size:.82rem;color:rgba(247,246,240,.88);margin:0}
.tp-tags{display:flex;flex-wrap:wrap;gap:6px;padding:12px 13px 14px}
.tp-tags span{font-size:.72rem;font-weight:700;color:var(--olive-700);background:var(--olive-100);border:1px solid var(--olive-200);padding:4px 9px;border-radius:99px}
.tp-cta{display:flex;justify-content:center;margin-top:46px}

/* ===== Modal de perfil ===== */
.deck .card{cursor:pointer}
.pm{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.pm.open{display:flex}
.pm-backdrop{position:absolute;inset:0;background:rgba(27,29,23,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:pmFade .25s ease}
.pm-card{position:relative;z-index:1;width:100%;max-width:430px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:26px;box-shadow:0 30px 80px rgba(27,29,23,.5);animation:pmUp .32s cubic-bezier(.2,.8,.25,1);scrollbar-width:thin}
.pm-card::-webkit-scrollbar{width:8px}
.pm-card::-webkit-scrollbar-thumb{background:var(--olive-200);border-radius:99px}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
@keyframes pmUp{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.pm-close{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border:none;border-radius:50%;background:rgba(27,29,23,.5);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s}
.pm-close:hover{background:rgba(27,29,23,.78)}
.pm-close svg{width:20px;height:20px}
.pm-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:26px 26px 0 0}
.pm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pm-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,29,23,.9) 0%,rgba(27,29,23,.2) 42%,transparent 68%)}
.pm-online{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(103,173,95,.95);padding:6px 13px;border-radius:99px}
.pm-online::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.pm-head{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px 18px}
.pm-head h2{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:1.9rem;line-height:1.05;color:#fff;margin:0 0 4px}
.pm-head p{font-size:.96rem;color:rgba(247,246,240,.9);margin:0}
.pm-body{padding:22px 24px 6px}
.pm-sect{margin-bottom:20px}
.pm-sect h4{font-family:'Sora',system-ui,sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--olive-600);margin:0 0 9px}
.pm-sect p{font-size:1rem;line-height:1.5;color:var(--ink);margin:0}
.pm-tags{display:flex;flex-wrap:wrap;gap:8px}
.pm-tags span{font-size:.84rem;font-weight:700;color:var(--olive-800);background:var(--olive-100);border:1px solid var(--olive-200);padding:7px 14px;border-radius:99px}
.pm-actions{display:flex;justify-content:center;gap:26px;padding:8px 24px 26px}

/* ===== Botón LIKE · réplica fiel del logo Pushfeel ===== */
/* Pedestal forest verde oscuro · cap matte verde · halo neón puro · corazón grueso */
.act.like{
  background:#1a2410;
  border:1px solid #0a0d05;
  border-radius:50%;
  padding:0;
  display:grid;place-items:center;
  position:relative;
  box-shadow:
    0 16px 32px rgba(0,0,0,.7),
    inset 0 -2px 5px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(140,220,90,.05);
}
.act.like .pf-cap{
  width:60px;height:60px;border-radius:50%;
  background:
    linear-gradient(170deg, #5a8a32 0%, #406d24 50%, #2e4e1a 100%);
  display:grid;place-items:center;
  box-shadow:
    /* anillo neón fino y nítido pegado al cap */
    0 0 0 1.5px #8eee54,
    /* banda de underglow neón pura */
    0 0 14px #7fd957,
    0 0 28px rgba(127,217,87,.85),
    0 0 50px rgba(127,217,87,.55),
    0 0 80px rgba(127,217,87,.30),
    /* sombra propia del cap sobre el pedestal */
    0 6px 12px rgba(0,0,0,.55),
    /* contorno superior con highlight + sombra inferior dentro */
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(180,240,130,.18);
  transition:box-shadow .3s, transform .2s;
}
/* Texto "Push" como en el logo Pushfeel · sin corazón */
.act.like .push-label{
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  color:#f7f6f0;
  letter-spacing:-.04em;
  line-height:1;
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 0 8px rgba(142,238,84,.45);
  transition:transform .25s;
  display:block;
}
@keyframes cupidPulse{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.97)}}
.act.like:hover .push-label{animation:cupidPulse .55s ease}
.act.like:hover .pf-cap{
  box-shadow:
    0 0 0 1.5px #a0ff5e,
    0 0 18px #8eee54,
    0 0 36px rgba(142,238,84,1),
    0 0 66px rgba(142,238,84,.7),
    0 0 100px rgba(142,238,84,.4),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(200,255,150,.28);
}
.act.like:active .pf-cap{transform:translateY(1px) scale(.95)}
.act.like:hover{transform:translateY(-3px)}

/* ===== Botones UNDO / NOPE / SUPER · familia Pushfeel · pedestal + cap + halo neón ===== */
.act.nope,
.act.super,
.act.undo{
  background:#1a1a12;
  border:1px solid #0a0a05;
  border-radius:50%;
  padding:0;
  display:grid;place-items:center;
  position:relative;
  width:80px;height:80px;
  box-shadow:
    0 16px 32px rgba(0,0,0,.7),
    inset 0 -2px 5px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,255,255,.04);
}
.act.nope .pf-cap,
.act.super .pf-cap,
.act.undo .pf-cap{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  transition:box-shadow .3s, transform .2s;
}
.act.nope .pf-cap svg,
.act.super .pf-cap svg,
.act.undo .pf-cap svg{
  width:30px;height:30px;
}

/* UNDO · amber/naranja */
.act.undo .pf-cap{
  background:linear-gradient(170deg, #f0a030 0%, #b87018 50%, #6e4010 100%);
  box-shadow:
    0 0 0 1.5px #ffb060,
    0 0 14px #ffa040,
    0 0 28px rgba(255,160,64,.85),
    0 0 50px rgba(255,160,64,.55),
    0 0 80px rgba(255,160,64,.30),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(255,200,140,.20);
}
.act.undo .pf-cap svg{
  color:#fff0c0;
  filter:drop-shadow(0 0 5px rgba(255,176,96,.7));
}

/* NOPE · coral rojo */
.act.nope .pf-cap{
  background:linear-gradient(170deg, #e85540 0%, #b8382a 50%, #6e1f14 100%);
  box-shadow:
    0 0 0 1.5px #ff7060,
    0 0 14px #e85540,
    0 0 28px rgba(232,85,64,.85),
    0 0 50px rgba(232,85,64,.55),
    0 0 80px rgba(232,85,64,.30),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(255,180,160,.20);
}
.act.nope .pf-cap svg{
  color:#ffd0c0;
  filter:drop-shadow(0 0 5px rgba(255,112,96,.7));
}

/* SUPER · azul cyan (clásico super-like, distinto del resto) */
.act.super .pf-cap{
  background:linear-gradient(170deg, #5aa8ee 0%, #3878c0 50%, #1c3870 100%);
  box-shadow:
    0 0 0 1.5px #80c8ff,
    0 0 14px #5aa8ee,
    0 0 28px rgba(90,168,238,.85),
    0 0 50px rgba(90,168,238,.55),
    0 0 80px rgba(90,168,238,.30),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(180,220,255,.20);
}
.act.super .pf-cap svg{
  color:#e0f0ff;
  filter:drop-shadow(0 0 5px rgba(128,200,255,.75));
}

/* Estados hover y active uniformes (anulan los .act:hover y .act:active globales) */
.act.nope:hover, .act.super:hover, .act.undo:hover{transform:translateY(-3px)}
.act.nope:active, .act.super:active, .act.undo:active{transform:none}
.act.nope:active .pf-cap, .act.super:active .pf-cap, .act.undo:active .pf-cap{transform:translateY(1px) scale(.95)}

/* Hover ilumina el halo */
.act.undo:hover .pf-cap{
  box-shadow:
    0 0 0 1.5px #ffc880,
    0 0 18px #ffb050,
    0 0 36px rgba(255,176,80,1),
    0 0 66px rgba(255,176,80,.7),
    0 0 100px rgba(255,176,80,.4),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(255,220,160,.30);
}
.act.nope:hover .pf-cap{
  box-shadow:
    0 0 0 1.5px #ff9080,
    0 0 18px #ff6850,
    0 0 36px rgba(255,104,80,1),
    0 0 66px rgba(255,104,80,.7),
    0 0 100px rgba(255,104,80,.4),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(255,200,180,.30);
}
.act.super:hover .pf-cap{
  box-shadow:
    0 0 0 1.5px #a0d8ff,
    0 0 18px #6ab8f0,
    0 0 36px rgba(106,184,240,1),
    0 0 66px rgba(106,184,240,.7),
    0 0 100px rgba(106,184,240,.4),
    0 6px 12px rgba(0,0,0,.55),
    inset 0 -8px 14px rgba(0,0,0,.40),
    inset 0 5px 10px rgba(200,230,255,.30);
}