/* ============================================================
   Fiscalidad desde 1 — Hoja de estilos del prototipo
   Los tokens replican DESIGN-SYSTEM.md. Toca aquí y se propaga.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Superficies */
  --bg-canvas:      #1B1E23;
  --bg-elevated:    #0D0F12;
  --bg-card:        #262B33;
  --bg-nested:      #171A1F;

  /* Texto */
  --text-primary:   #FFFFFF;
  --text-secondary: #F2F4F7;
  --text-muted:     #9AA1AD;
  --text-disabled:  #40454E;

  /* Acento */
  --blue:           #1F62FF;
  --blue-hover:     #0E4EE0;
  --blue-press:     #0A3CB0;
  --blue-deep:      #0B2A6B;
  --blue-halo:      rgba(31, 98, 255, 0.14);
  /* Azules aclarados para texto: el --blue puro no llega a AA a tamaño de cuerpo */
  --blue-lit:       #7BA5FF;
  --blue-mid:       #3B78FF;
  --grad-blue:      linear-gradient(100deg, var(--blue-lit) 0%, var(--blue-mid) 100%);
  --gold:           #E7C77C;
  --aqua:           #6FE7C4;
  --danger:         #FF6B6B;

  /* Bordes */
  --border-hairline: #262B33;
  --border-strong:   rgba(242, 244, 247, 0.20);
  --border-input:    #40454E;

  /* Radios */
  --r-input: 6px;
  --r-btn:   8px;
  --r-card:  12px;
  --r-pill:  999px;

  /* Espaciado */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --page-max: 1280px;
  --read-max: 680px;
  --gutter: 24px;

  /* Tipografía */
  --font-display: "Archivo", "Inter Tight", system-ui, sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;

  /* Elevación */
  --elev-card:     inset 0 0 0 1px var(--border-hairline);
  --elev-featured: inset 0 0 0 1px rgba(31, 98, 255, 0.55);
  --elev-input:    inset 0 0 0 1px var(--border-input);
  --elev-focus:    inset 0 0 0 2px var(--blue);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 160ms;
  --t-base: 240ms;

  /* Layout */
  --nav-h: 72px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 3. Utilidades ---------- */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.num { font-variant-numeric: tabular-nums; }

.kicker {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.display {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: clamp(44px, 6.2vw, 80px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 46ch;
}

/*
  Excepción documentada a la regla "el azul nunca es color de texto":
  a tamaño display (≥44px) el contraste 3.35:1 cumple AA para texto grande.
  No usar .accent-blue por debajo de 24px.
*/
.accent-blue { color: var(--blue); }

/* ---------- 4. Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) ease-out,
              box-shadow var(--t-fast) ease-out;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
}
.btn--primary:hover  { background: var(--blue-hover); }
.btn--primary:active { background: var(--blue-press); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--text-primary);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- 5. Navegación ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--t-base) ease-out,
              box-shadow var(--t-base) ease-out;
}

.nav.is-stuck {
  background: rgba(13, 15, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 0 var(--border-hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
}

/* Sustituir assets/img/logo.svg por el definitivo — el alto manda, el ancho es automático */
.logo__img {
  height: 41px;
  width: auto;
}

@media (max-width: 599px) {
  .logo__img { height: 22px; }
}

/* ---------- 6. Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--s-7));
  padding-bottom: var(--s-8);
  overflow: hidden;
}

/* Halo de escenario — única excepción a "sin efectos" */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  background: radial-gradient(58% 50% at 50% 0%,
              rgba(11, 42, 107, 0.55), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
  width: 100%;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-9);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 620px;
}

/* ---------- 6.1 Prueba social ---------- */

.social-proof {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.social-proof__faces {
  height: 40px;
  width: auto;
}

.social-proof__text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}

.social-proof__stars {
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-right: 2px;
}

.social-proof__text strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ---------- 6.2 Firma ---------- */

.signature {
  height: 64px;
  width: auto;
  opacity: 0.85;
  margin-top: calc(var(--s-1) * -1);
}

@media (max-width: 599px) {
  .signature { height: 52px; }
}

/* ---------- 6.3 Cards de conceptos flotando al fondo ---------- */

.concepts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}

.concept {
  position: absolute;
  width: 232px;
  padding: 14px 18px;
  background: rgba(38, 43, 51, 0.42);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(242, 244, 247, 0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0.55;
  rotate: var(--rot, 0deg);
  animation: float-y var(--dur, 9s) var(--ease) infinite alternate;
  animation-delay: var(--delay, 0s);
}

.concept__tag,
.concept__title { display: block; }

.concept__tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 4px;
}

.concept__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
}

/* Zonas libres: esquinas y franjas superior/inferior, nunca sobre el texto */
.concept--1 { top: 12%;  left: 1%;    --rot: -3deg;  --dur: 9s;  --delay: 0s; }
.concept--2 { top: 7%;   right: 2%;   --rot: 2.5deg; --dur: 11s; --delay: -3s; }
.concept--3 { bottom: 7%; left: 3%;   --rot: 2deg;   --dur: 10s; --delay: -1.5s; }
.concept--4 { bottom: 11%; right: 1%; --rot: -2deg;  --dur: 8.5s;--delay: -4s; }
/* Segunda tanda: solo en pantallas anchas, pegadas a los bordes exteriores */
.concept--5 { top: 34%;  left: -1%;   --rot: 3deg;   --dur: 12s; --delay: -2s; display: none; }
.concept--6 { bottom: 32%; right: -1%;--rot: -3deg;  --dur: 9.5s;--delay: -5s; display: none; }
.concept--7 { top: 58%;  left: 2%;    --rot: -1.5deg;--dur: 10.5s;--delay: -6s; display: none; }
.concept--8 { top: 20%;  right: 14%;  --rot: 2deg;   --dur: 11.5s;--delay: -2.5s; display: none; }

@media (min-width: 1200px) {
  .concepts { display: block; }
}

@media (min-width: 1600px) {
  .concept--5,
  .concept--6,
  .concept--7 { display: block; }
}

@media (min-width: 1800px) {
  .concept--8 { display: block; }
}

@keyframes float-y {
  from { translate: 0 -9px; }
  to   { translate: 0 9px; }
}

/* ---------- 7. Tarjeta de estado de membresía ---------- */

/*
  Excepción documentada a "sin sombras": el resplandor rojizo no simula
  elevación, es luz de estado — el mismo rojo que el punto de "Plazas cerradas".
  Al abrir plazas, .status-card--open lo cambia a aguamarina.
*/
.status-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  box-shadow:
    var(--elev-card),
    0 0 0 1px rgba(255, 107, 107, 0.12),
    0 0 40px rgba(255, 107, 107, 0.14),
    0 0 110px rgba(255, 107, 107, 0.07);
  animation: float-y 7s var(--ease) infinite alternate;
}

/* El halo respira, ligeramente desfasado del flotado */
.status-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 70px rgba(255, 107, 107, 0.18);
  animation: glow-pulse 4.5s ease-in-out infinite;
}

/* No mover la caja mientras el usuario escribe en el formulario */
.status-card:focus-within { animation-play-state: paused; }

/* Variante para cuando se abran plazas */
.status-card--open {
  box-shadow:
    var(--elev-card),
    0 0 0 1px rgba(111, 231, 196, 0.14),
    0 0 40px rgba(111, 231, 196, 0.14),
    0 0 110px rgba(111, 231, 196, 0.07);
}
.status-card--open::after { box-shadow: 0 0 70px rgba(111, 231, 196, 0.18); }

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (min-width: 960px) {
  .status-card { padding: var(--s-6) var(--s-6) 28px; }
}

.status-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.status-card__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pill de estado — variante cerrada (por defecto) y abierta */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.16),
              0 0 10px rgba(255, 107, 107, 0.65);
  animation: dot-pulse 4.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12),
                         0 0 8px rgba(255, 107, 107, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.20),
                         0 0 14px rgba(255, 107, 107, 0.85); }
}

.status-pill--open {
  background: var(--aqua);
  color: var(--bg-elevated);
  box-shadow: none;
}
.status-pill--open .status-pill__dot {
  background: var(--bg-elevated);
  box-shadow: none;
}

.status-card__title {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.status-card__body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.status-card__divider {
  height: 1px;
  background: var(--border-strong);
  opacity: 0.5;
}

/* ---------- 7.1 Globo de texto ---------- */

.speech {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.speech__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(242, 244, 247, 0.16);
}

/*
  Globo sutil: no es una superficie blanca, es un velo de luz sobre la placa.
  Degradado muy corto + filete de 1px; el pico repite el mismo tratamiento.
*/
.speech__bubble {
  position: relative;
  flex: 1 1 auto;
  padding: 16px 18px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: linear-gradient(155deg,
              rgba(255, 255, 255, 0.085) 0%,
              rgba(255, 255, 255, 0.030) 55%,
              rgba(255, 255, 255, 0.015) 100%);
  box-shadow: inset 0 0 0 1px rgba(242, 244, 247, 0.13);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.speech__bubble::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.075);
  border-left: 1px solid rgba(242, 244, 247, 0.13);
  border-bottom: 1px solid rgba(242, 244, 247, 0.13);
  border-bottom-left-radius: 3px;
  transform: rotate(45deg);
}

/* ---------- 8. CTA y formularios ---------- */

.cta,
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-nested);
  border: 0;
  border-radius: var(--r-input);
  box-shadow: var(--elev-input);
  color: var(--text-primary);
  font-size: 16px;
  transition: box-shadow var(--t-fast) ease-out;
}

.input::placeholder { color: var(--text-muted); }
.input:focus { outline: none; box-shadow: var(--elev-focus); }

.note,
.form__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- 9. Acceso rápido ---------- */

.quick {
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 0 0 var(--border-hairline),
              inset 0 -1px 0 0 var(--border-hairline);
  padding-top: 18px;
  padding-bottom: 30px;
}

/* El bloque ocupa el mismo ancho útil que el hero (.shell) y va centrado */
.quick__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.quick__label {
  flex: 0 0 auto;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Scroller horizontal: en móvil sangra hasta el borde y se desvanece a los lados */
.quick__scroller {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.quick__scroller::-webkit-scrollbar { display: none; }

.quick__list {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Los botones se reparten el ancho del .shell: el primero arranca donde
   arranca la columna izquierda del hero y el último acaba donde acaba la derecha */
.quick__list li {
  flex: 1 1 auto;
  scroll-snap-align: start;
}

.chip-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) ease-out,
              box-shadow var(--t-fast) ease-out,
              color var(--t-fast) ease-out;
}

.chip-link:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--text-primary);
  color: var(--text-primary);
}

/* En móvil vuelven a su ancho natural y se arrastran en horizontal */
@media (max-width: 767px) {
  .quick__list { width: max-content; }
  .quick__list li { flex: 0 0 auto; }
  .chip-link { width: auto; }

  .quick__scroller {
    /* sangra hasta el borde de pantalla para que se pueda arrastrar cómodo */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px,
                                #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px,
                                #000 calc(100% - 28px), transparent 100%);
  }
}

/* ---------- 10. Secciones ---------- */

.section {
  padding-block: var(--s-9);
  /* que el ancla no quede tapada por la nav fija */
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
}

.section-title {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section-lede {
  max-width: var(--read-max);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Chips descriptivos — oro, para diferenciarlos de los enlaces de acción */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------- 11. Carrusel de clases ---------- */

.rail-block {
  margin-top: var(--s-9);
}

/* Rótulo del carrusel: mismo tratamiento que los micro-labels, pero en blanco
   y con aire por arriba y por abajo para que sostenga el bloque */
.rail__label {
  max-width: 640px;
  margin: 0 auto var(--s-7);
  padding-inline: var(--gutter);
  text-align: center;
  text-wrap: balance;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

@media (max-width: 599px) {
  .rail__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    margin-bottom: var(--s-6);
  }
}

.rail {
  position: relative;
  overflow: hidden;
  /* fundido a opacidad cero en los laterales */
  mask-image: linear-gradient(90deg, transparent 0, #000 12%,
                              #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%,
                              #000 88%, transparent 100%);
}

.rail__track {
  display: flex;
  gap: var(--s-5);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}

.rail__item {
  flex: 0 0 auto;
  margin: 0;
}

.rail__item img {
  width: 360px;
  height: 270px;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--bg-nested);
}

@media (max-width: 767px) {
  .rail__item img { width: 260px; height: 195px; }
  .rail__track { gap: var(--s-4); }
}

/* Sin movimiento forzado: el carrusel se arrastra a mano */
@media (prefers-reduced-motion: reduce) {
  .rail {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__track { transform: none !important; }
}

/* ---------- 12. Revelado al hacer scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 13. Sección oscura ---------- */

.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 0 0 var(--border-hairline),
              inset 0 -1px 0 0 var(--border-hairline);
}

/* Aire extra abajo: las fotos decorativas sobresalen de la card */
@media (min-width: 768px) {
  #como-funciona { padding-bottom: calc(var(--s-9) + var(--s-6)); }
}

/* Luz azul entrando por el lateral, como en el hero pero horizontal */
.section__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 68% at 0% 28%, rgba(11, 42, 107, 0.85), transparent 62%),
    radial-gradient(42% 55% at 100% 88%, rgba(31, 98, 255, 0.10), transparent 68%);
}

.section--dark > .shell { position: relative; z-index: 1; }

/* ---------- 14. Pilares (conceptos clave) ---------- */

.pillars {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

@media (min-width: 900px) {
  .pillars {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

.pillar {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(31, 98, 255, 0.45);
  animation: border-pulse 3.6s ease-in-out infinite;
}

/* El contenido va por encima del numeral de fondo */
.pillar__title,
.pillar__text { position: relative; z-index: 1; }

/* La segunda va desfasada para que no latan al unísono */
.pillar:nth-child(2) { animation-delay: -1.8s; }

@keyframes border-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(31, 98, 255, 0.40),
                0 0 0 rgba(31, 98, 255, 0);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(31, 98, 255, 1),
                0 0 26px rgba(31, 98, 255, 0.20);
  }
}

/* Numeral calado a modo de marca de agua, ocupando el fondo de la card */
.pillar__num {
  position: absolute;
  right: 12px;
  bottom: -34px;
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: clamp(200px, 26vw, 300px);
  line-height: 0.72;
  letter-spacing: -0.04em;
  color: rgba(231, 199, 124, 0.05);
  -webkit-text-stroke: 2px rgba(231, 199, 124, 0.16);
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .pillar__num { color: transparent; }
}

.pillar__title {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.pillar__text {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- 15. Derechos de miembro ---------- */

/* Contenedor: la card va encima, las fotos asoman por detrás */
.perks-wrap {
  position: relative;
  max-width: 880px;
  margin: var(--s-8) auto 0;
}

/* Banda que se estira casi hasta el borde de pantalla (tope 1560px),
   para que las fotos laterales lleguen al margen y se metan bajo la card */
.perks-deco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100vw - 48px, 1560px);
  z-index: 0;
  pointer-events: none;
}

/*
  Cada foto se muestra ENTERA, sin recorte: se fija el ancho con --w y el alto
  sale solo de la proporción del archivo. Para reajustar una, cambia su --w
  (por ejemplo desde Inspeccionar Elemento en el selector .perks-deco__img--r).
*/
.perks-deco__img {
  position: absolute;
  width: var(--w, 260px);
  height: auto;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  opacity: 0.55;
  display: none;
}

.perks-deco__img--l  { --w: clamp(300px, 24vw, 400px); top: 10%; left: 0; rotate: -6deg; }
.perks-deco__img--r  { --w: 220px; top: 20%;      right: 7%;   rotate: 5deg; }
.perks-deco__img--bl { --w: 240px; bottom: -124px; left: 20%;  rotate: 3deg; }
.perks-deco__img--br { --w: 240px; bottom: -186px; right: 18%; rotate: -4deg; }

/* Laterales solo cuando hay hueco real fuera de la card */
@media (min-width: 1280px) {
  .perks-deco__img--l,
  .perks-deco__img--r { display: block; }
}

/* Las de abajo aguantan en pantallas medianas */
@media (min-width: 768px) {
  .perks-deco__img--bl,
  .perks-deco__img--br { display: block; }
}

.perks {
  position: relative;
  z-index: 1;
  padding: var(--s-6);
  background: var(--bg-nested);
  border-radius: var(--r-card);
  box-shadow: var(--elev-card);
}

/* Oro con barrido de brillo — se usa en el titular y en los romanos */
.gold-shine {
  color: var(--gold);
  background-image: linear-gradient(100deg,
    #C9A557 0%, #E7C77C 28%, #FFF6DC 48%, #E7C77C 68%, #C9A557 100%);
  background-size: 220% 100%;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gold-shine {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: gold-sweep 6s linear infinite;
  }
}

@keyframes gold-sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

.perks__title {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

.perks__list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.perk {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-4);
}

.perk + .perk { border-top: 1px solid var(--border-hairline); }
.perk:first-child { padding-top: 0; }
.perk:last-child  { padding-bottom: 0; }

.perk__num {
  flex: 0 0 auto;
  width: 64px;
  margin-top: -2px;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.perk p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

/* Concepto destacado: algo mayor, en negrita y con degradado azul.
   Se usa el azul aclarado, no el --blue puro, para no perder contraste. */
.perk__hl {
  font-size: 1.09em;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--blue-lit);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .perk__hl {
    background-image: var(--grad-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* que el degradado no se parta al saltar de línea */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

@media (max-width: 599px) {
  .perks { padding: var(--s-5); }
  .perks__title { font-size: 20px; }
  .pillar { padding: var(--s-5); }
  .pillar__num { font-size: 180px; bottom: -22px; }
}

/* ---------- 16. Para quién es ---------- */

.subhead {
  margin-top: var(--s-9);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.icps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
}

/* Mismo pill de oro que .chip, pero a mayor tamaño y con icono */
.icp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

/* El SVG se usa como máscara: el color lo pone el CSS, no el archivo */
.icp__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------- 17. Reseñas ---------- */

.reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

@media (min-width: 700px) {
  .reviews { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .reviews { grid-template-columns: repeat(3, 1fr); }
}

/*
  Excepción deliberada a "nada de fondos claros": las reseñas van en papel
  para que salten del escenario oscuro. Es el único bloque claro de la página.
*/
.review {
  margin: 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(158deg, #FFFFFF 0%, #ECEEF3 100%);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: #1B1E23;
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- 18. Sobre Kike ---------- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: 1fr 0.85fr;
    gap: var(--s-9);
  }
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.about__title {
  text-align: left;
  font-size: clamp(34px, 4vw, 52px);
}

.about__text {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.about__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* Redes: solo icono, dentro de un círculo */
.social-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-secondary);
  transition: background-color var(--t-fast) ease-out,
              box-shadow var(--t-fast) ease-out,
              color var(--t-fast) ease-out;
}

.social-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
}

.social-btn__icon {
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.press {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-hairline);
}

.press__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.press__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
}

.press__logos img {
  height: 28px;
  width: auto;
  opacity: 0.55;
  transition: opacity var(--t-fast) ease-out;
}

.press__logos img:hover { opacity: 1; }

.about__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--bg-nested);
}

/* ---------- 19. Preguntas frecuentes ---------- */

.faq {
  max-width: 880px;
  margin: var(--s-8) auto 0;
}

.faq__item { border-top: 1px solid var(--border-hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--border-hairline); }

.faq__h { margin: 0; font-weight: inherit; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--t-fast) ease-out;
}

.faq__q:hover { color: var(--gold); }

/* Icono +/− construido con dos trazos */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease),
              background-color var(--t-fast) ease-out;
}

.faq__icon::after { transform: rotate(90deg); }

.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after { background: var(--gold); }

/* Despliegue animado sin altura fija */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a-inner { overflow: hidden; }

.faq__a-inner p {
  max-width: var(--read-max);
  padding-bottom: var(--s-5);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .faq__a { transition: none; }
}

/* ---------- 20. Footer ---------- */

.footer {
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 0 0 var(--border-hairline);
  padding-top: var(--s-8);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

@media (min-width: 760px) {
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-8); }
}

.footer__logo {
  height: 30px;
  width: auto;
  margin-bottom: var(--s-4);
}

.footer__text {
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer__navtitle {
  margin-bottom: var(--s-4);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer__links a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) ease-out;
}

.footer__links a:hover { color: var(--text-primary); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-block: var(--s-5);
  border-top: 1px solid var(--border-hairline);
  font-size: 12px;
  color: var(--text-muted);
}

.footer__credit {
  margin-left: auto;
  color: var(--text-disabled);
}

.footer__credit a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) ease-out;
}

.footer__credit a:hover { color: var(--gold); }

/* ---------- 21. Responsive ---------- */

@media (max-width: 959px) {
  .hero {
    /* Sigue ocupando el alto de pantalla, pero crece si el contenido no cabe */
    padding-top: calc(var(--nav-h) + var(--s-6));
    padding-bottom: var(--s-7);
  }
  .hero__inner { gap: var(--s-7); }
  .status-card__title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .concept,
  .status-card,
  .status-card::after,
  .status-pill__dot,
  .gold-shine,
  .pillar { animation: none !important; translate: none !important; }

  /* sin latido, pero el borde azul se queda puesto */
  .pillar { box-shadow: inset 0 0 0 1px rgba(31, 98, 255, 0.75); }
  .gold-shine { background-position: 50% 0; }
}