/*
 * club.css — estilos de las páginas del Club CryptoMercadosyPymes
 * (club-inicio, club-membresia, club-masterclass, club-privacidad,
 * club-cookies, club-aviso-legal). Usa solo los tokens del tema Siale Indigo
 * (variables de style.css). Se encola aparte; no se toca style.css.
 *
 * Las páginas se pintan dentro de <main> (720 px) y, salvo las legales,
 * dentro de .carta; por eso varias reglas llevan «.carta» delante: ganan a
 * las del tema con la misma especificidad + orden.
 */

/* ---------- Utilidades comunes ---------- */
.club-centrado { text-align: center; }
.club-suave, .carta p.club-suave { color: var(--texto-2); }
.club-destacado, .carta p.club-destacado { color: var(--texto); font-weight: 500; }
.club-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.club-nota-pequena, .carta p.club-nota-pequena { font-size: 15px; color: var(--texto-2); }
.club-degradado {
  background: linear-gradient(135deg, var(--acento), var(--acento-hover));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--acento);
}
.club-kicker {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--eyebrow); margin: 0 0 12px;
}
.club-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(124, 108, 255, 0.35); background: rgba(124, 108, 255, 0.08);
  color: var(--acento); font-size: 14px; font-weight: 500; margin-bottom: 28px;
}
.club-sep { border: 0; border-top: 1px solid var(--borde); margin: 40px 0 32px; }

/* ---------- Portada del boletín (club-inicio) ---------- */
.club-alta-titulo, .carta p.club-alta-titulo {
  text-align: center; font-weight: 500; color: var(--texto); margin: 40px 0 16px;
}
.club-alta-titulo + .tarjeta, .club-alta-titulo + form { margin-top: 0; }

/* ---------- Hero (membresía y masterclass) ---------- */
.club-hero {
  position: relative; text-align: center; padding: 48px 0 56px; margin: 0 0 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 108, 255, 0.16), transparent 60%);
}
.club-hero-corto { padding-bottom: 40px; }
.club-hero .club-hero-titulo, .carta .club-hero h1 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(34px, 5.6vw, 54px); margin: 0 0 22px;
}
.club-hero .club-hero-titulo span { display: inline; }
.club-hero-sub, .carta p.club-hero-sub {
  font-size: 20px; line-height: 1.5; color: var(--texto-2); max-width: 600px; margin: 0 auto 32px;
}
.club-hero-cta, .carta p.club-hero-cta { margin: 0; }
.club-scroll, .carta p.club-scroll {
  margin: 44px 0 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-3);
}
.club-scroll::after {
  content: ""; display: block; width: 1px; height: 44px; margin: 8px auto 0;
  background: linear-gradient(180deg, var(--acento), transparent);
}
.club-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 460px; margin: 8px auto 0; }
.club-cifras strong {
  display: block; font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--acento); line-height: 1.1;
}
.club-cifras span { display: block; font-size: 13px; color: var(--texto-2); margin-top: 4px; }

/* ---------- Secciones ---------- */
.club-seccion { padding: 48px 0; }
.club-seccion.alterna {
  position: relative; padding: 48px 24px; margin: 8px -24px;
  background: rgba(39, 37, 81, 0.35); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.club-seccion h2, .carta .club-seccion h2 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 28px;
}
.club-seccion h3, .carta .club-seccion h3 {
  font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0 0 14px;
}
.club-seccion p, .carta .club-seccion p { color: var(--texto-2); line-height: 1.65; margin: 0 0 1.15em; }
.club-seccion p:last-child { margin-bottom: 0; }
.club-cierre, .carta p.club-cierre { color: var(--texto); font-weight: 500; margin-top: 8px; }

/* Lista con marcas de verificación */
.club-lista-check, .carta .club-lista-check { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.club-lista-check li { position: relative; padding-left: 34px; color: var(--texto); line-height: 1.5; }
.club-lista-check li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(124, 108, 255, 0.2);
}
.club-lista-check li::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 9px;
  border: solid var(--acento); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Pasos numerados */
.club-pasos, .carta .club-pasos { list-style: none; counter-reset: paso; margin: 0 0 32px; padding: 0; display: grid; gap: 22px; }
.club-pasos li { position: relative; padding: 6px 0 0 56px; color: var(--texto); line-height: 1.5; counter-increment: paso; }
.club-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 108, 255, 0.15); border: 1px solid rgba(124, 108, 255, 0.4);
  font-family: var(--serif); font-weight: 700; color: var(--acento);
}

/* Cajas y rejillas */
.club-caja {
  padding: 24px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde);
}
.club-caja.si { border-color: rgba(124, 108, 255, 0.45); background: rgba(124, 108, 255, 0.06); }
.club-caja.si p, .carta .club-caja.si p { color: var(--texto); }
.club-dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 640px) { .club-dos-columnas { grid-template-columns: 1fr; } }

/* ---------- Precio (encabezado antes de [siale_precios]) ---------- */
.club-precio { padding-bottom: 16px; }
.club-precio h2, .carta .club-precio h2 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 18px; }
.club-precio .club-centrado p { max-width: 600px; margin-left: auto; margin-right: auto; }
.club-beneficios, .carta .club-beneficios { max-width: 560px; margin: 36px auto 0; }

/* ---------- Preguntas frecuentes ---------- */
.club-faq h2, .carta .club-faq h2 { margin-bottom: 36px; }
.club-faq .club-caja { margin: 0 0 18px; }
.club-faq .club-caja h3, .carta .club-faq .club-caja h3 { font-size: 19px; margin-bottom: 8px; }
.club-faq .club-caja p:last-child { margin-bottom: 0; }
.club-faq details { padding: 0; margin: 0 0 12px; }
.club-faq summary {
  cursor: pointer; list-style: none; padding: 20px 48px 20px 24px; position: relative;
  font-weight: 600; color: var(--texto); line-height: 1.4;
}
.club-faq summary::-webkit-details-marker { display: none; }
.club-faq summary::after {
  content: ""; position: absolute; right: 24px; top: 24px; width: 8px; height: 8px;
  border: solid var(--texto-2); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.2s;
}
.club-faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.club-faq details[open] summary { color: var(--acento); }
.club-faq details p, .carta .club-faq details p { padding: 0 24px 22px; margin: 0; }

/* ---------- Nómina Fundacional ---------- */
.club-nomina h2, .carta .club-nomina h2 { margin-bottom: 16px; }
.club-nomina > p.club-centrado { max-width: 620px; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
.club-cargos { margin-bottom: 40px; }
.club-cargos .club-caja p, .carta .club-cargos .club-caja p { margin: 0; }
.club-departamento, .carta p.club-departamento {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px;
}
.club-cargo, .carta p.club-cargo { font-family: var(--serif); font-weight: 600; color: var(--texto); line-height: 1.3; margin-bottom: 4px; }
.club-coletilla, .carta p.club-coletilla { font-size: 14px; font-style: italic; color: var(--texto-2); }
.club-antes-credencial, .carta p.club-antes-credencial { font-size: 15px; margin-bottom: 20px; }
.club-credencial {
  position: relative; max-width: 440px; margin: 0 auto; padding: 32px; overflow: hidden;
  border: 2px solid rgba(124, 108, 255, 0.6); border-radius: 16px; background: var(--superficie); text-align: left;
}
.club-credencial p, .carta .club-credencial p { margin: 0; }
.club-credencial-casa, .carta p.club-credencial-casa,
.club-credencial-nomina, .carta p.club-credencial-nomina {
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 4px;
}
.club-credencial-nomina, .carta p.club-credencial-nomina { color: var(--acento); margin-bottom: 24px; }
.club-credencial-titulo, .carta p.club-credencial-titulo {
  font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--texto); margin-bottom: 8px;
}
.club-credencial .club-coletilla { margin-bottom: 24px; }
.club-credencial-alias, .carta p.club-credencial-alias { font-size: 18px; font-weight: 500; color: var(--texto); margin-bottom: 4px; overflow-wrap: anywhere; }
.club-credencial-meta, .carta p.club-credencial-meta { font-size: 13px; color: var(--texto-2); margin-bottom: 4px; }
.club-sello {
  position: absolute; top: 20px; right: 20px; transform: rotate(12deg); padding: 4px 8px; border-radius: 4px;
  border: 2px solid var(--acento); color: var(--acento); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.15em;
}
.club-nota-pequena.club-centrado { margin-top: 24px; }

/* ---------- Pie de contenido ---------- */
.club-nota-legal, .carta p.club-nota-legal {
  margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--borde);
  text-align: center; font-size: 14px; color: var(--texto-2); line-height: 1.6;
}
.club-descargo, .carta p.club-descargo { text-align: left; font-size: 13px; color: var(--texto-3); }

/* ---------- Masterclass ---------- */
.club-mc p, .carta .club-mc p { color: var(--texto); font-weight: 600; }
.club-mc h2, .carta .club-mc h2 { margin-bottom: 24px; }
.club-mc.alterna { padding-top: 40px; padding-bottom: 40px; }
.club-modulos, .carta .club-modulos { list-style: none; counter-reset: modulo; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.club-modulos li {
  position: relative; display: block; padding: 16px 16px 16px 72px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--borde); counter-increment: modulo;
}
.club-modulos li::before {
  content: counter(modulo); position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--acento), var(--acento-hover)); color: var(--sobre-acento); font-weight: 700; font-size: 14px;
}
.club-modulo-etiqueta { display: block; font-size: 13px; font-weight: 600; color: var(--acento); }
.club-modulos li p, .carta .club-modulos li p { margin: 2px 0 0; }
.club-mc-precio { padding-bottom: 8px; }
.club-mc-precio h2, .carta .club-mc-precio h2 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; }
.club-precio-grande, .carta p.club-precio-grande {
  font-family: var(--serif); font-weight: 700; font-size: clamp(56px, 10vw, 84px); line-height: 1; color: var(--acento); margin: 0 0 8px;
}
.club-mc-precio p, .carta .club-mc-precio p { margin-bottom: 8px; }
.club-mc-compra { padding-top: 8px; }
.club-mc-compra p, .carta .club-mc-compra p { margin-bottom: 8px; }
.club-bonus h3, .carta .club-bonus h3 { font-size: 20px; }
.club-bonus p, .carta .club-bonus p { font-size: 15px; margin-bottom: 8px; }
.club-mc-final { padding-bottom: 8px; }
.club-mc-final h2, .carta .club-mc-final h2 { margin-bottom: 16px; }

/* ---------- Página de cookies ---------- */
.club-cookies-accion { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 36px; }
.club-cookies-accion h3 { margin: 0 0 4px; font-size: 18px; }
.club-cookies-accion p { margin: 0; font-size: 15px; }
.club-cookies-accion .boton { flex: none; }
.legal .club-caja h3:first-child { margin-top: 0; }
.legal .club-caja ul { margin: 0; }
.legal .club-caja ul li { margin: 4px 0; }
.legal .club-caja p:last-child { margin-bottom: 0; }
.club-cookie-tipos { display: grid; gap: 14px; margin: 12px 0 8px; }
.club-cookie-tipos h4 { margin: 0 0 8px; font-size: 17px; color: var(--texto); }
.club-cookie-tipos p { margin: 0; font-size: 15px; }
.club-tabla { overflow-x: auto; margin: 12px 0 8px; }
.club-tabla code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--texto); }
.club-navegadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; }
.club-navegadores a {
  display: block; padding: 12px 16px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto);
}
.club-navegadores a:hover { background: var(--superficie-2); text-decoration: none; }
.club-navegadores a::after { content: "↗"; float: right; color: var(--texto-3); }
@media (max-width: 640px) { .club-navegadores { grid-template-columns: 1fr; } }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .club-seccion { padding: 36px 0; }
  .club-seccion.alterna { padding: 36px 20px; margin: 8px -20px; }
  .club-hero { padding: 32px 0 40px; }
  .club-cifras { gap: 12px; }
  .club-credencial { padding: 24px; }
  .club-caja { padding: 20px; }
}