/* ============================================================
   Pineapple — Portafolio oficial
   Estética de la marca: fondo oscuro cálido, ámbar #f5a623,
   tarjetas redondeadas. Mismo espíritu que Pineapple Games.

   Temas: dark (marca) y light (blanco moderno). El tema se aplica
   antes de pintar con un script inline en el <head>; todo el color
   vive en variables CSS. html[data-theme="light"] = tema claro.
   ============================================================ */

:root {
  --bg: #131007;
  --bg-soft: #1c1810;
  --bg-deep: #0d0b05;
  --card: #211c11;
  --card-hover: #2a2415;
  --border: #3a3220;
  --text: #f5f0e4;
  --text-dim: #b8ad95;
  --brand: #f5a623;
  --brand-soft: #f8d348;
  --brand-strong: #f8d348;
  --on-brand: #1a1408;
  --header-bg: rgba(19, 16, 7, .9);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .25);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .4);
  --glow: rgba(245, 166, 35, .35);
  --color-scheme: dark;
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1120px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* tonos de acción y sombras «al levantar», dependientes del tema */
  --brand-hover: #ffb838;
  --brand-active: #e8940a;
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, .5);
  --shadow-pop: 0 18px 46px rgba(0, 0, 0, .58);
}

html[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f7f5ef;
  --bg-deep: #efeadd;
  --card: #ffffff;
  --card-hover: #fdf7e7;
  --border: #e7e2d4;
  --text: #211a0e;
  --text-dim: #6f6653;
  --brand: #f5a623;
  --brand-soft: #ffd166;
  --brand-strong: #a56d00;
  --on-brand: #241a02;
  --header-bg: rgba(255, 255, 255, .88);
  --shadow-sm: 0 1px 2px rgba(33, 26, 14, .05), 0 4px 14px rgba(33, 26, 14, .06);
  --shadow-md: 0 12px 30px rgba(33, 26, 14, .12);
  --shadow-lg: 0 20px 50px rgba(33, 26, 14, .14);
  --glow: rgba(245, 166, 35, .26);
  --color-scheme: light;
  --brand-hover: #e8940a;
  --brand-active: #cf8305;
  --shadow-lift: 0 14px 34px rgba(33, 26, 14, .16);
  --shadow-pop: 0 18px 46px rgba(33, 26, 14, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  color-scheme: var(--color-scheme);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}

@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageIn .4s ease both; }

::selection { background: rgba(245, 166, 35, .35); color: var(--text); }

a { color: var(--brand-strong); }

img { max-width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.2rem;
  width: 100%;
}

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  padding: .6rem 1rem;
  border-radius: 0 0 10px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.back-link {
  display: inline-block;
  margin: 1.3rem 0 -.5rem;
  color: var(--text-dim);
  text-decoration: none;
  font-size: .88rem;
}
.back-link:hover { color: var(--brand-strong); }

/* ============================================================
   Barra de progreso de scroll
   ============================================================ */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .08s linear;
}

/* ============================================================
   Cabecera
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s ease, background-color .25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-pop); }

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
}
.brand img {
  width: 34px; height: 34px;
  object-fit: contain;
  transition: transform .25s var(--ease), filter .25s ease;
}
.brand:hover img { transform: scale(1.06); }
.brand small { display: block; font-weight: 400; font-size: .72rem; color: var(--text-dim); }

/* El logo es blanco: en tema claro se invierte para que se vea.
   Se reescribe el filtro completo para no perder el resplandor. */
html[data-theme="light"] .brand img,
html[data-theme="light"] .hero-logo {
  filter: invert(1) drop-shadow(0 6px 22px var(--glow));
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: .45rem .55rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brand); }

/* Botón de tema */
.theme-toggle {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--brand-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background-color .25s ease;
}
.theme-toggle:hover { border-color: var(--brand); background: var(--card-hover); }
.theme-toggle .ico-moon { display: none; }
.theme-toggle .ico-sun { display: block; }
html[data-theme="light"] .theme-toggle .ico-moon { display: block; }
html[data-theme="light"] .theme-toggle .ico-sun { display: none; }

/* Navegación */
.main-nav { margin-left: 0; }
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
  color: var(--text-dim);
  font-size: .92rem;
  font-weight: 500;
  padding: .4rem .8rem;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.main-nav a:hover { background: var(--card-hover); color: var(--text); }
.main-nav a[aria-current="page"] {
  color: var(--brand-strong);
  font-weight: 600;
  background: rgba(245, 166, 35, .12);
}

/* Desplegable Información */
.dropdown { position: relative; }
.dropdown .caret { transition: transform .18s ease; }
.dropdown[data-open="true"] .caret { transform: rotate(180deg); }
.drop-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text-dim);
  font-size: .92rem;
  font-weight: 500;
  padding: .4rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.drop-btn:hover { background: var(--card-hover); color: var(--text); }
.dropdown[data-open="true"] .drop-btn {
  background: rgba(245, 166, 35, .12);
  color: var(--brand-strong);
  font-weight: 600;
}

.dropdown-menu[hidden] { display: none !important; }
.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .4rem;
  box-shadow: var(--shadow-md);
  z-index: 60;
  animation: menuIn .18s ease both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: .92rem;
}
.dropdown-menu a:hover { background: var(--card-hover); color: var(--text); }
.dropdown-menu a[aria-current="page"] {
  color: var(--brand-strong);
  font-weight: 600;
  background: rgba(245, 166, 35, .1);
}

/* ============================================================
   Botones
   Una sola forma para todos: pastilla corta, ámbar sólido,
   sin adornos. Las etiquetas largas se acortan en el HTML
   (los botones nunca deben competir con el texto de la tarjeta).
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .68rem 1.15rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s var(--ease), box-shadow .15s ease,
              border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn.primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 2px 10px rgba(245, 166, 35, .22);
}
.btn.primary:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 166, 35, .32);
}
.btn.primary:active { background: var(--brand-active); }
.btn.ghost {
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}
.btn.ghost:hover { border-color: var(--text-dim); background: var(--card-hover); transform: translateY(-1px); }
.btn.ghost:active { background: var(--bg-soft); }
.btn.small { padding: .45rem .85rem; font-size: .82rem; }

/* ============================================================
   Hero (portada)
   ============================================================ */
.hero {
  position: relative;
  text-align: left;
  padding: 5.2rem 0 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(245, 166, 35, .16), transparent 62%);
  pointer-events: none;
}

.hero .wrap { position: relative; padding-bottom: 4.2rem; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero [data-animate] {
  opacity: 0;
  animation: riseIn .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hero [data-animate="1"] { animation-delay: .05s; }
.hero [data-animate="2"] { animation-delay: .18s; }
.hero [data-animate="3"] { animation-delay: .32s; }
.hero [data-animate="4"] { animation-delay: .46s; }
.hero [data-animate="5"] { animation-delay: .60s; }
.hero [data-animate="6"] { animation-delay: .74s; }

.hero-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px var(--glow));
  animation: logoIn .9s cubic-bezier(.2, .7, .3, 1) both,
             float 6s ease-in-out 1.2s infinite;
}
@keyframes logoIn {
  0%   { opacity: 0; transform: scale(.5) rotate(-14deg); }
  70%  { transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.eyebrow {
  margin-top: 1.5rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brand-strong);
}

.hero h1 {
  font-size: clamp(2.2rem, 6.4vw, 3.6rem);
  line-height: 1.1;
  margin: .5rem 0 .9rem;
  letter-spacing: -.025em;
}

.lead {
  max-width: 56ch;
  margin: 0;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1.75;
}
.lead strong { color: var(--text); }

.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  gap: .8rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Insignias locales estilo for-the-badge (sin servicios externos) */
.badges-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  /* el hero va alineado a la izquierda: las insignias también */
  justify-content: flex-start;
}
.x-badge {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.x-badge:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); }
.x-badge:active { transform: translateY(0); filter: brightness(.96); }
.x-badge .k {
  background: #34301f;
  color: #f5f0e4;
  padding: .45rem .7rem;
  display: inline-flex;
  align-items: center;
}
html[data-theme="light"] .x-badge .k { background: #33290f; color: #fff; }
.x-badge .v {
  padding: .45rem .7rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
}
.x-badge .v-brand  { background: #f5a623; color: #1a1408; }
.x-badge .v-blue   { background: #4285F4; }
.x-badge .v-black  { background: #000; }
.x-badge .v-red    { background: #e62117; }

.chips {
  list-style: none;
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-start;
}
.chips li {
  font-size: .85rem;
  color: var(--text-dim);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .32rem .85rem;
  transition: border-color .2s, color .2s;
}
/* Son etiquetas, no enlaces: solo cambia el color, nunca se mueven. */

/* ============================================================
   Olas (estilo capsule-render waving del README)
   Dos capas de seno real. La pista (.wave-track) mide 200% y
   contiene el patrón dos veces; se anima con translateX(-50%),
   un PORCENTAJE que escala con el ancho real de la pantalla, así
   el bucle es perfecto en cualquier tamaño (el fallo de antes era
   animar en píxeles fijos). El degradado es periódico para que
   también el color cicre sin salto.
   ============================================================ */
.wave {
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.wave-footer { height: 96px; }
.wave-soft { height: 72px; }

.wave-layer { position: absolute; inset: 0; }
.wave-back { opacity: .35; }

.wave-track {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 200%;
  display: flex;
  animation: waveSlide 13s linear infinite;
  will-change: transform;
}
.wave-track svg {
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  display: block;
}
.wave-track-rev { animation: waveSlideRev 21s linear infinite; }

@keyframes waveSlide { to { transform: translateX(-50%); } }
@keyframes waveSlideRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 680px) {
  .wave-footer { height: 64px; }
  .wave-soft { height: 44px; }
}

/* ============================================================
   Hero de páginas interiores
   ============================================================ */
.page-hero {
  position: relative;
  text-align: left;
  padding: 3.8rem 0 2.2rem;
  overflow: hidden;
}
.page-hero .wrap {
  position: relative;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid var(--border);
}
.page-hero .kicker {
  color: var(--brand-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: .45rem 0 .6rem;
  letter-spacing: -.02em;
}
.page-hero p.sub {
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   Cinta de palabras (ticker)
   ============================================================ */
.ticker {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
  transition: background-color .25s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  padding: .68rem 0;
  animation: ticker 30s linear infinite;
}
.ticker span { white-space: nowrap; color: var(--text-dim); font-size: .9rem; }
.ticker span b { color: var(--brand); font-weight: 600; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================
   Secciones
   ============================================================ */
.section { padding: 5rem 0; }
.section.alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background-color .25s ease;
}

.kicker-label {
  color: var(--brand-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  display: block;
  margin-bottom: .2rem;
}

.section-title {
  font-size: 1.65rem;
  margin-bottom: .45rem;
  letter-spacing: -.015em;
}
.section-title::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  margin-bottom: .75rem;
}
.section-sub {
  color: var(--text-dim);
  max-width: 62ch;
  margin-bottom: 2.2rem;
}

/* ============================================================
   Tarjetas
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
}
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.55rem 1.6rem;
  color: var(--text);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background-color .25s ease, box-shadow .22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.card .icon {
  font-size: 1.7rem;
  transition: transform .25s var(--ease);
}
.card:hover .icon { transform: scale(1.08); }
.card h3 { font-size: 1.08rem; }
.card p { font-size: .88rem; color: var(--text-dim); flex: 1; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .35rem;
}

/* Los logos son blancos: el tile SIEMPRE es oscuro, también en claro */
.logo-tile {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #0d0b05;
  border: 1px solid #3a3220;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card:hover .logo-tile {
  border-color: rgba(245, 166, 35, .5);
  box-shadow: 0 0 18px var(--glow);
}
.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}
.logo-tile.emoji-tile { font-size: 2rem; }
.logo-tile.big { width: 150px; height: 150px; border-radius: 20px; }
.logo-tile.big.emoji-tile { font-size: 4rem; }

.card-links {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

/* Insignias de estado */
.badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge.ok      { background: rgba(76, 175, 109, .14); color: #2e7d49; border: 1px solid rgba(76, 175, 109, .45); }
.badge.pending { background: rgba(232, 147, 12, .12); color: #9c5f04; border: 1px solid rgba(232, 147, 12, .45); }
.badge.beta    { background: rgba(248, 211, 72, .14); color: #8a6400; border: 1px solid rgba(248, 211, 72, .5); }
.badge.closed  { background: rgba(224, 92, 74, .12);  color: #a03a2a; border: 1px solid rgba(224, 92, 74, .45); }
html[data-theme="dark"] .badge.ok      { color: #7fd6a0; }
html[data-theme="dark"] .badge.pending { color: #f2b45a; }
html[data-theme="dark"] .badge.beta    { color: var(--brand-soft); }
html[data-theme="dark"] .badge.closed  { color: #f0947f; }

/* Filas destacadas (página de proyectos) */
.feature {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.9rem;
  margin-bottom: 1.2rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .25s ease;
}
.feature:hover {
  border-color: rgba(245, 166, 35, .45);
  box-shadow: var(--shadow-md);
}
.feature .feature-media { display: grid; place-items: center; }
.feature h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.feature p { color: var(--text-dim); font-size: .95rem; }
.feature p + p { margin-top: .5rem; }
.feature .card-links { margin-top: .9rem; }
.feature .meta {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: .5rem 0 .2rem;
}
.feature.flip .feature-media { order: 2; }

/* ============================================================
   Equipo
   ============================================================ */
.member {
  text-align: center;
  align-items: center;
}
.member .avatar,
.member .avatar-fallback {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-bottom: .3rem;
}
.member .avatar {
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .15);
}
.member .avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .15);
}
.member .role {
  font-size: .76rem;
  font-weight: 700;
  color: var(--brand-strong);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.member p { font-size: .86rem; }
.member.card { flex: 1; }

/* Hueco libre del equipo */
.member.slot {
  border-style: dashed;
  opacity: .75;
  justify-content: center;
}
.member.slot .avatar-fallback {
  background: none;
  border: 2px dashed var(--border);
  color: var(--text-dim);
  box-shadow: none;
}

/* ============================================================
   Puente a Pineapple Games (banda CTA de /juegos)
   ============================================================ */
.games-goto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.games-goto:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.games-goto h2 { margin: 0 0 .35rem; font-size: 1.3rem; letter-spacing: -.01em; }
.games-goto p { margin: 0; color: var(--text-dim); font-size: .95rem; max-width: 52ch; }
.games-goto .btn { flex: 0 0 auto; white-space: nowrap; }


/* ============================================================
   Blog — portada editorial, tarjetas y página de entrada
   (pipeline: blog/posts/*.md)
   ============================================================ */

/* ----- Portada del índice: hero limpio ----- */
.blog-hero {
  position: relative;
  padding: 3.4rem 0 1.9rem;
  overflow: hidden;
}
.blog-hero .kicker {
  color: var(--brand-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
}
.blog-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  letter-spacing: -.02em;
  margin: .45rem 0 .6rem;
}
.blog-hero p.sub {
  color: var(--text-dim);
  max-width: 58ch;
  margin: 0;
  font-size: 1.02rem;
}
.hero-count { color: var(--brand); font-weight: 700; white-space: nowrap; }

/* ----- Cabecera de la lista ----- */
.md-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1.3rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}
.md-toolbar h2 {
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-dim);
}
.md-hint { font-size: .82rem; color: var(--text-dim); }
.md-count { font-size: .82rem; color: var(--text-dim); }

/* ----- Revista: tarjetas con portada de color ----- */
.md-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.4rem;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  animation: cardIn .55s cubic-bezier(.2, .7, .3, 1) both;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .25s ease;
}
.post-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.post-cover {
  position: relative;
  height: 122px;
  padding: .9rem 1.1rem;
  overflow: hidden;
}
.post-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%);
}
.cov-no {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.cov-pine {
  position: absolute;
  right: -.55rem;
  bottom: -1.4rem;
  z-index: 1;
  font-size: 5rem;
  line-height: 1;
  opacity: .28;
  transform: rotate(-10deg);
  transition: transform .3s ease;
  filter: saturate(.9);
}
.post-card:hover .cov-pine { transform: rotate(-4deg) scale(1.06); }

.cov-amber { background: linear-gradient(135deg, #f5a623, #f8d348); }
.cov-sunset { background: linear-gradient(135deg, #ff7a59, #f5a623); }
.cov-violet { background: linear-gradient(135deg, #8e6ff1, #5a3fd4); }
.cov-teal { background: linear-gradient(135deg, #19b39a, #0e8a72); }
.cov-blue { background: linear-gradient(135deg, #4285F4, #2a56c6); }
.cov-rose { background: linear-gradient(135deg, #ef5f8a, #c2255c); }

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
  padding: 1.3rem 1.5rem 1.4rem;
}
.post-card-head {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}
.post-card-head .pill {
  font-size: .72rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .1rem .6rem;
}
.post-card-head .pill-brand {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 700;
}
.post-card h3 {
  font-size: 1.18rem;
  line-height: 1.28;
  letter-spacing: -.01em;
}
.post-card p {
  font-size: .9rem;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding-top: .35rem;
  font-size: .84rem;
  color: var(--text-dim);
}
.post-card-more {
  font-size: .86rem;
  font-weight: 600;
  color: var(--brand-strong);
}
.post-card:hover .post-card-more { text-decoration: underline; }

/* La última entrada, a todo lo ancho: portada grande a la izquierda */
.post-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 42%) 1fr; }
.post-card.featured .post-cover { height: auto; min-height: 250px; }
.post-card.featured .cov-pine { font-size: 8.5rem; right: -1rem; bottom: -2.8rem; }
.post-card.featured .post-card-body { justify-content: center; gap: .7rem; padding: 2rem 2.2rem; }
.post-card.featured h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.2; }
.post-card.featured p { font-size: .97rem; -webkit-line-clamp: 4; }

/* ----- Entrada: héroe limpio + artículo ----- */
.post-hero {
  position: relative;
  padding: 3rem 0 0;
  overflow: hidden;
}
.post-hero .wrap {
  padding-bottom: 1.7rem;
  border-bottom: 1px solid var(--border);
}
.post-hero .kicker {
  color: var(--brand-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
}
.post-hero h1 {
  font-size: clamp(2rem, 5.2vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: .45rem 0 0;
  max-width: 26ch;
}

.post-section { padding-top: 1.9rem; }
.post-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.md-post.single {
  max-width: 760px;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.md-post.is-highlight { border-color: var(--brand); }
.md-post .post-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--border);
}
.md-post .post-meta .pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .12rem .65rem;
}
.md-post .post-meta .author { font-weight: 600; color: var(--brand-strong); }
.md-post .share-row { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.md-loading { color: var(--text-dim); padding: 1rem; }

.md-end {
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
  padding: 1.2rem 0 .4rem;
}

/* Anterior / Siguiente */
.post-pager {
  max-width: 760px;
  margin: 2rem 0 0;
  animation: fadeUp .5s ease both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.pager-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .95rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.pager-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.pager-card.next { text-align: right; }
.pager-card .dir { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.pager-card .t { font-size: .92rem; font-weight: 600; line-height: 1.3; }

.notice {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  color: var(--text-dim);
}
.notice h3 { color: var(--text); margin-bottom: .3rem; }
.notice code {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .08rem .35rem;
  font-size: .9em;
}

/* Contenido Markdown renderizado */
.md-post h1, .md-post h2, .md-post h3, .md-post h4 {
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 1.2rem 0 .5rem;
}
.md-post h1:first-child { margin-top: 0; }
.md-post h1 { font-size: 1.55rem; }
.md-post h2 { font-size: 1.25rem; }
.md-post h3 { font-size: 1.08rem; }
.md-post h4 { font-size: .95rem; }
.md-post p { margin: .6rem 0; font-size: .98rem; }
.md-post.single p { font-size: 1rem; }
.md-post ul, .md-post ol {
  margin: .6rem 0 .6rem 1.3rem;
  font-size: .95rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.md-post ul { list-style: disc; }
.md-post ol { list-style: decimal; }
.md-post blockquote {
  border-left: 3px solid var(--brand);
  background: var(--bg-soft);
  padding: .6rem 1rem;
  border-radius: 0 10px 10px 0;
  margin: .7rem 0;
  color: var(--text-dim);
}
.md-post pre {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem 1rem;
  overflow: auto;
  margin: .7rem 0;
}
.md-post code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
}
.md-post p code, .md-post li code {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .08rem .35rem;
}
.md-post img { border-radius: 10px; margin: .5rem 0; max-width: 100%; }
.md-post hr { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0; }
.md-post a { color: var(--brand-strong); }

/* Tipografía editorial de la entrada (sobre las reglas base) */
.md-post.single p { font-size: 1.04rem; line-height: 1.78; margin: .85rem 0; }
.md-post.single > p:first-of-type { font-size: 1.12rem; }
.md-post.single h2 { font-size: 1.5rem; margin-top: 2.3rem; }
.md-post.single h2::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  margin-bottom: .7rem;
}
.md-post.single h3 { font-size: 1.2rem; margin-top: 1.9rem; }
.md-post.single ul, .md-post.single ol { padding-left: 1.35rem; }
.md-post.single li { margin: .35rem 0; line-height: 1.7; }
.md-post.single blockquote {
  margin: 1.3rem 0;
  padding: .95rem 1.25rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--bg-soft);
  font-style: italic;
  color: var(--text-dim);
}
.md-post.single a {
  text-decoration: underline;
  text-decoration-color: rgba(245, 166, 35, .45);
  text-underline-offset: 3px;
}
.md-post.single a:hover { text-decoration-color: currentColor; }
.md-post.single strong { color: var(--text); }
.md-post.single hr { margin: 1.9rem 0; }
.md-post.single > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: .85;
  padding: .04em .12em 0 0;
  font-weight: 800;
  color: var(--brand);
}
.md-post.single::after {
  content: "🍍";
  display: block;
  text-align: center;
  margin-top: 2.2rem;
  font-size: 1.25rem;
  opacity: .45;
}

/* ============================================================
   Estadísticas / GitHub
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.1rem;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: transform .18s ease, border-color .18s ease, background-color .25s ease;
}
.stat:hover { transform: translateY(-3px); border-color: var(--brand); }
.stat-num {
  font-size: 2.3rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-weight: 700; font-size: 1.02rem; }
.stat-desc { font-size: .82rem; color: var(--text-dim); }

.grid-2 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Tarjetas estilo GitHub, hechas en local (siempre se renderizan) */
.gh-local {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  max-width: 840px;
  margin: 0 auto;
}
.gh-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease;
}
.gh-card:hover { transform: translateY(-3px); border-color: var(--brand); }
.gh-card-head {
  font-weight: 700;
  color: var(--brand-strong);
  margin-bottom: .8rem;
  font-size: .95rem;
}
.gh-rows { list-style: none; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.gh-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: .45rem;
}
.gh-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.gh-rows b { color: var(--brand-strong); white-space: nowrap; }
.gh-lang-name {
  display: flex;
  justify-content: space-between;
  font-size: .88rem;
  margin-bottom: .35rem;
}
.gh-lang-name span:last-child { color: var(--text-dim); }
.gh-bar {
  height: 10px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.gh-bar span {
  display: block;
  height: 100%;
  background: #e34c26;
  border-radius: 999px;
}
.gh-lang-note {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--text-dim);
}

.banner-cta {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(245, 166, 35, .14), rgba(248, 211, 72, .06));
  border: 1px solid rgba(245, 166, 35, .4);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
}
.banner-cta strong { display: block; font-size: 1.05rem; }
.banner-cta span { color: var(--text-dim); font-size: .9rem; }

/* Pasos (cómo trabajamos) */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
  counter-reset: step;
  margin-top: 1.6rem;
}
.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem 1.2rem;
  transition: transform .18s ease, border-color .18s ease, background-color .25s ease;
}
.step:hover { transform: translateY(-3px); border-color: var(--brand); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -14px;
  left: 1.2rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #e8930c);
  color: var(--on-brand);
  font-weight: 800;
  font-size: .85rem;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px var(--glow);
}
.step h3 { font-size: 1rem; margin-bottom: .3rem; }
.step p { font-size: .86rem; color: var(--text-dim); }

/* FAQ */
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: .7rem;
  transition: border-color .2s ease, background-color .25s ease;
}
.faq details:hover, .faq details[open] { border-color: rgba(245, 166, 35, .45); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--brand-strong);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .6rem; color: var(--text-dim); font-size: .92rem; }
.faq details[open] p { animation: fadeUp .3s ease both; }

/* ============================================================
   Contacto
   ============================================================ */
.contact { text-align: left; align-items: flex-start; }
.contact-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(245, 166, 35, .14);
  border: 1px solid rgba(245, 166, 35, .4);
  color: var(--brand-strong);
  transition: background .15s ease, transform .15s ease;
}
.contact:hover .contact-icon {
  background: rgba(245, 166, 35, .26);
  transform: scale(1.06);
}
.contact-name { font-weight: 700; margin-top: .3rem; }
.contact-handle {
  font-size: .8rem;
  color: var(--text-dim);
  word-break: break-all;
}

.contact-form {
  max-width: 680px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.contact-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin: .8rem 0 .3rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: .65rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .18);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .form-actions { margin-top: 1.1rem; display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.contact-form .form-hint { font-size: .8rem; color: var(--text-dim); }

/* ============================================================
   Pie de página
   ============================================================ */
.site-footer {
  margin-top: auto;
  background: var(--bg-deep);
  transition: background-color .25s ease;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.footer-brand .brand { font-size: 1rem; }
.footer-brand .brand img { width: 38px; height: 38px; }
.footer-note {
  margin-top: .8rem;
  color: var(--text-dim);
  font-size: .88rem;
}

.footer-col h3 {
  font-size: .95rem;
  margin-bottom: .6rem;
  color: var(--brand-strong);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.footer-col a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--brand-strong); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: .4rem;
  padding-bottom: 1.2rem;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--text-dim);
}

.to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--brand-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, border-color .15s ease, visibility .25s, background-color .25s ease;
  z-index: 90;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--brand); background: var(--card-hover); }

/* ============================================================
   Animaciones de aparición
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .06s; }
.js .reveal.d2 { transition-delay: .12s; }
.js .reveal.d3 { transition-delay: .18s; }
.js .reveal.d4 { transition-delay: .24s; }
.js .reveal.d5 { transition-delay: .30s; }
.js .reveal.d6 { transition-delay: .36s; }

.error-hero { text-align: center; padding: 5rem 0 6rem; }
.error-hero .big { font-size: clamp(4rem, 14vw, 7rem); font-weight: 800; line-height: 1; }
.error-hero .big span {
  background: linear-gradient(92deg, var(--brand), var(--brand-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  .hero-logo { animation: none; }
  .hero [data-animate] { opacity: 1; animation: none; }
  .ticker-track { animation: none; }
  .wave-track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feature { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  .feature .feature-media { order: 0 !important; }
  .feature .meta, .feature .card-links { justify-content: center; }
}

@media (max-width: 680px) {
  .nav-toggle { display: inline-flex; }

  .main-nav {
    display: none;
    width: 100%;
    margin-left: 0;
  }
  .main-nav.open { display: block; animation: fadeUp .25s ease; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: .4rem 0 .6rem; }
  .main-nav a, .drop-btn { width: 100%; justify-content: flex-start; padding: .6rem .75rem; border-radius: 10px; }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    animation: none;
    margin: .15rem 0 .35rem;
  }

  .theme-toggle { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; margin-left: 0; }

  .hero { padding-top: 3rem; }
  .section { padding: 3.2rem 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-bottom { flex-direction: column; }
  .banner-cta { flex-direction: column; align-items: flex-start; }
  .contact-form .row { grid-template-columns: 1fr; }
  .x-badge { font-size: .64rem; }
  .post-pager { grid-template-columns: 1fr; }
  .pager-card.next { text-align: left; }
  .games-goto { flex-direction: column; align-items: flex-start; padding: 1.4rem 1.3rem; }
  .post-card.featured { grid-template-columns: 1fr; }
  .post-card.featured .post-cover { height: 160px; min-height: 0; }
  .post-card.featured .cov-pine { font-size: 6rem; }
}
@media (max-width: 680px) {
  .post-card.featured .post-card-body { padding: 1.5rem 1.4rem; }
}

/* ============================================================
   Blog v2: portadas con banner, hero de la entrada, skeletons
   y mejoras de render del artículo
   ============================================================ */

/* --- portada de la tarjeta cuando la entrada tiene banner --- */
.post-cover .cov-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .55s var(--ease);
}
.post-card:hover .post-cover .cov-img { transform: scale(1.06); }
.post-cover.has-img .cov-pine { display: none; }
.post-cover.has-img .cov-no {
  padding: .14rem .55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* flecha «Leer la entrada» se desliza al pasar por la tarjeta */
.post-card-more { display: inline-block; transition: transform .2s var(--ease); }
.post-card:hover .post-card-more { transform: translateX(4px); }

/* --- hero de la entrada: fecha, lectura, autor y banner --- */
.post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}
.post-hero-meta .pill {
  font-size: .74rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .12rem .65rem;
  background: var(--bg-soft);
}
.post-hero-meta .pill.author {
  color: var(--brand-strong);
  font-weight: 600;
  border-color: var(--border);
}
.post-banner {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  margin-top: 1.6rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s var(--ease);
}
.post-banner.show { opacity: 1; transform: none; }

/* --- imágenes del artículo: figure con pie de foto --- */
.md-post img { max-width: 100%; height: auto; border-radius: 12px; }
.md-post figure { margin: 1.2rem 0; }
.md-post figure img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.md-post figcaption {
  margin-top: .55rem;
  text-align: center;
  font-size: .84rem;
  color: var(--text-dim);
}

/* anclas a los títulos del artículo */
.md-post h2[id], .md-post h3[id], .md-post h4[id] { scroll-margin-top: 96px; }

/* --- skeletons de carga (mientras llegan las entradas) --- */
.skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}
.skel-card,
.skel-line {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--bg-soft) 32%, var(--card-hover) 50%, var(--bg-soft) 68%);
  background-size: 220% 100%;
  animation: skelShine 1.35s ease-in-out infinite;
}
.skel-card { height: 300px; }
.skel-card.skel-featured { grid-column: 1 / -1; height: 250px; }
.skel-post { display: flex; flex-direction: column; gap: .85rem; }
.skel-line { height: .95rem; border-radius: 8px; }
.skel-line.w100 { width: 100%; }
.skel-line.w90 { width: 90%; }
.skel-line.w60 { width: 60%; height: 1.45rem; }
.skel-line.w45 { width: 45%; }
@keyframes skelShine { to { background-position: -220% 0; } }

/* --- ajustes generales de efectos --- */
/* halo de marca sutil al pasar por las tarjetas */
.card:hover { box-shadow: var(--shadow-md), 0 0 26px rgba(245, 166, 35, .10); }

@media (prefers-reduced-motion: reduce) {
  .skel-card, .skel-line { animation: none; }
  .post-banner { transition: none; opacity: 1; transform: none; }
  .post-cover .cov-img { transition: none; }
}

/* El atributo hidden manda sobre cualquier display (evita que reglas
   como .post-banner { display:block } lo anulen). Mismo patrón que
   .dropdown-menu[hidden] de la cabecera. */
[hidden] { display: none !important; }

/* ============================================================
   MINIMAL · capa de estilo — Pineapple limpio
   ------------------------------------------------------------
   Superficies tranquilas: bordes de 1px, sombras suaves solo
   al pasar el ratón, radios generosos y el ámbar de Pineapple
   como único acento. Tipografía: Space Grotesk para todo y
   Archivo Black reservado a la palabra del hero. Se apila al
   final del archivo: en empates de especificidad gana esta capa.
   ============================================================ */

:root {
  --f-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Archivo Black", "Arial Black", Impact, var(--f-body);
}
html[data-theme="light"] {
  /* tema claro: blanco cálido y limpio */
  --bg: #fafaf7;
  --bg-soft: #f4f3ee;
  --bg-deep: #edece5;
  --card: #ffffff;
  --card-hover: #fbfaf5;
  --border: rgba(28, 24, 18, .13);
  --text: #1f1b12;
  --text-dim: #6f695c;
  --header-bg: rgba(250, 250, 247, .9);
}

body { font-family: var(--f-body); }
::selection { background: var(--brand); color: #1a1408; }

/* ---------- kickers: etiqueta pequeña y espaciada ---------- */
.kicker, .eyebrow, .kicker-label {
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand-strong);
  line-height: 1.4;
}

/* ---------- títulos: limpios, sin adornos ---------- */
.section-title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.section-title::before,
.section-title::after { display: none; }
.page-hero h1, .blog-hero h1, .post-hero h1, .error-hero h1 {
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.015em;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.1;
}

/* ============================================================
   Botones: la base ya es minimal; aquí solo tipografía y pulido
   ============================================================ */
.btn {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .88rem;
}
.btn.primary:hover { box-shadow: 0 6px 18px rgba(245, 166, 35, .32); }
.btn.ghost:hover {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--text-dim);
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.small { font-size: .8rem; }

/* ============================================================
   Navegación: estados suaves, activo en ámbar
   ============================================================ */
.site-header { border-bottom: 1px solid var(--border); }
.main-nav a, .drop-btn { border-radius: 8px; font-weight: 500; font-size: .88rem; }
.main-nav a:hover { background: var(--bg-soft); color: var(--text); box-shadow: none; }
.main-nav a[aria-current="page"],
.dropdown[data-open="true"] .drop-btn {
  background: rgba(245, 166, 35, .16);
  color: var(--brand-strong);
  font-weight: 600;
}
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: .4rem;
}
.dropdown-menu a { border-radius: 8px; font-weight: 500; font-size: .88rem; }
.dropdown-menu a:hover { background: var(--bg-soft); box-shadow: none; }
.dropdown-menu a[aria-current="page"] { background: rgba(245, 166, 35, .16); color: var(--brand-strong); }
.nav-toggle { border: 1px solid var(--border); border-radius: 8px; background: var(--card); }

/* ============================================================
   Tarjetas: borde fino, sombra suave solo al pasar
   ============================================================ */
.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, .45);
  box-shadow: var(--shadow-lift);
}
.card .icon { color: var(--brand-strong); font-size: 0; }
.card .icon svg { width: 28px; height: 28px; }
/* los botones de cada tarjeta se alinean abajo, aunque los textos cambien */
.card-links { margin-top: auto; }

/* tiles: estilo icono de app, colores planos */
.logo-tile { border: 0; border-radius: 14px; }
.logo-tile.emoji-tile {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.3rem;
  color: #131007;
  display: grid;
  place-items: center;
  line-height: 1;
}
.logo-tile.big.emoji-tile { font-size: 2.1rem; }
.emoji-tile.t-amber  { background: #f5a623; }
.emoji-tile.t-red    { background: #ff8a63; }
.emoji-tile.t-teal   { background: #2cc4b0; }
.emoji-tile.t-blue   { background: #6b96f5; }
.emoji-tile.t-violet { background: #ab90f7; }
.emoji-tile.t-rose   { background: #ff7fa2; }

/* insignias → pastillas limpias */
.badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .64rem;
  letter-spacing: .07em;
  background: var(--bg-soft);
  color: var(--text-dim);
  box-shadow: none;
}
.badge.beta { background: rgba(245, 166, 35, .18); color: var(--brand-strong); border-color: transparent; }
.badge.ok   { background: rgba(31, 178, 166, .16); color: #0e8a72; border-color: transparent; }
html[data-theme="dark"] .badge.ok { color: #35c9b6; }

/* ============================================================
   Píldoras y chips: finos y redondos
   ============================================================ */
.pill, .post-card-head .pill, .post-hero-meta .pill, .md-post .post-meta .pill {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .74rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .08rem .6rem;
  color: var(--text-dim);
  line-height: 1.5;
  background: transparent;
}
.post-hero-meta .pill.author { color: var(--brand-strong); border-color: rgba(245, 166, 35, .4); }
.post-card-head .pill-brand, .md-post .post-meta .pill-brand {
  background: var(--brand);
  color: #1a1408;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
}
.chips li {
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .1rem .65rem;
}
.chips li:hover { border-color: var(--brand); color: var(--text); }

/* ============================================================
   Portada: la marca en grande, nada más
   ============================================================ */
.hero-h1 { margin-top: 1.4rem; }
.h1-hand {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-dim);
  line-height: 1.25;
}
.h1-display {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  margin-top: .12rem;
  padding: 0;
  background: none;
}
.hl {
  background: none;
  color: inherit;
  box-shadow: inset 0 -.32em 0 rgba(245, 166, 35, .28);
  padding: 0;
}

/* insignias del hero: pastilla de dos segmentos */
.x-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: none;
  background: var(--card);
  overflow: hidden;
}
.x-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border);
}
.x-badge:active { transform: translateY(0); }
.x-badge .k {
  background: transparent;
  color: var(--text-dim);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .72rem;
}
.x-badge .v {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .72rem;
  color: #fffaf0;
}
.x-badge .v-brand { background: var(--brand); color: #1a1408; }

/* ============================================================
   Cifras: número grande y limpio
   ============================================================ */
.stat {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: .8rem .4rem;
}
.stat:hover { transform: none; border-color: transparent; }
.stat-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.7rem);
  display: inline-block;
  padding: 0;
  border: 0;
  line-height: 1.15;
}
.stat-label { font-weight: 600; font-size: .95rem; }

/* banner del blog: tarjeta suave */
.banner-cta {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  box-shadow: none;
}
.banner-cta strong { font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; }
.banner-cta span { font-size: .9rem; color: var(--text-dim); }

/* ============================================================
   Ticker: cinta fina
   ============================================================ */
.ticker { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ticker span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}

/* ============================================================
   Blog: tarjetas limpias, portadas degradadas sin brillo
   ============================================================ */
.post-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, .45);
  box-shadow: var(--shadow-lift);
}
.post-cover::after { display: none; }
.cov-no {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .05em;
  background: rgba(19, 16, 7, .55);
  color: #fffaf0;
  padding: .1rem .5rem;
  border-radius: 999px;
  text-shadow: none;
}
.post-cover .cov-pine { opacity: .3; }
.post-card.featured .cov-pine { opacity: .3; }
.post-banner { border-radius: 14px; box-shadow: none; }

/* anterior / siguiente */
.pager-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pager-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 166, 35, .45);
  box-shadow: var(--shadow-lift);
}
.pager-card .dir {
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-strong);
}

/* artículo */
.md-post blockquote { border-radius: 0 10px 10px 0; }
.notice { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); }

/* ============================================================
   Formularios, footer y detalles
   ============================================================ */
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font-family: var(--f-body);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .18);
}
.contact-form label { font-weight: 600; text-transform: none; font-size: .84rem; letter-spacing: 0; }

.site-footer { border-top: 1px solid var(--border); }
.footer-col h3 {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
}
.to-top {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.to-top:hover { transform: translateY(-2px); }

/* ============================================================
   Utilidades de espaciado
   Sustituyen a los style="..." sueltos del HTML: mismo efecto,
   pero se pueden mantener, revisar y reutilizar.
   ============================================================ */
.section--tight    { padding-top: 1.8rem; }
.banner-cta--flush { margin-top: 0; }
.hero-actions--flush { margin-top: 0; }
.lead--tight       { margin-top: .6rem; }
.footer-bottom--plain { border-top: 0; }
.w-full            { width: 100%; }   /* barra de lenguajes del perfil */

/* Titulares equilibrados: evita líneas huérfanas de una palabra. */
h1, h2, h3, .section-title, .stat-num { text-wrap: balance; }
p, .lead, .section-sub, .card p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .x-badge, .pager-card, .post-card, .to-top { transition: none; }
}