/* ============================================================
   AX MEMBERS · hoja de estilos única
   Marca: navy #1c2d4a · dorado #d5b589 · blanco roto
   Estética: club médico premium — serif elegante, aire, oro fino
   Mobile-first · sin CDNs · fuentes del sistema
   ============================================================ */

:root {
  /* color */
  --navy: #1c2d4a;
  --navy-2: #26395e;
  --navy-deep: #131f38;
  --navy-ink: #0d1626;
  --ink: #262d3f;
  --muted: #6a7288;
  --paper: #f6f3ec;
  --paper-2: #efeadf;
  --card: #fffdf8;
  --gold: #d5b589;
  --gold-2: #e9d3ae;
  --gold-deep: #b3905e;
  --line: rgba(28, 45, 74, .13);
  --gold-line: rgba(213, 181, 137, .5);
  --amber: #b97f24;
  --amber-bg: #f7ead3;
  --danger: #a13c3c;
  --danger-bg: #f6e3e0;

  /* tipografía */
  --serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --sans: "Avenir Next", "Gill Sans", "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;

  /* forma */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 14px 34px -20px rgba(19, 31, 56, .38);
  --shadow-soft: 0 8px 22px -16px rgba(19, 31, 56, .28);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 500px at 85% -8%, rgba(213, 181, 137, .10), transparent 60%),
    var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--navy); letter-spacing: .01em; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.2; }
h3 { font-size: 1.08rem; }
p  { margin: .35rem 0 1rem; }

/* eyebrow: etiqueta versalita dorada */
.eyebrow {
  display: block;
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .65rem;
}

/* hairline dorado */
.hairline {
  border: 0;
  height: 1px;
  margin: 1.4rem 0;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
}

/* ---------- header ---------- */
.ax-header {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 1px solid var(--gold-line);
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
}
.ax-wordmark {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  white-space: nowrap;
}
.ax-wordmark .ax-sigla {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .04em;
}
.ax-wordmark .ax-resto {
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #f3efe6;
  padding-left: .55rem;
  border-left: 1px solid var(--gold-line);
}
.ax-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ax-nav::-webkit-scrollbar { display: none; }
.ax-nav a {
  color: #e8e4d9;
  text-decoration: none;
  font: 500 .82rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.ax-nav a:hover { color: var(--gold-2); background: rgba(213, 181, 137, .08); }
.ax-nav a.nav-salir {
  color: var(--gold);
  border: 1px solid var(--gold-line);
  margin-left: .35rem;
}
.ax-nav a.nav-salir:hover { background: rgba(213, 181, 137, .14); }

/* ---------- main / footer ---------- */
.ax-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1rem, 4vw, 2.5rem) 3.5rem;
}
.ax-main.ancho-completo { max-width: none; padding: 0; }
.ax-footer {
  border-top: 1px solid var(--line);
  padding: 1.3rem clamp(1rem, 4vw, 2.5rem);
  font: 500 .72rem/1.5 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* páginas oscuras a pantalla completa (login, verificar) */
body.pagina-navy {
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(213, 181, 137, .14), transparent 62%),
    radial-gradient(700px 500px at 100% 110%, rgba(38, 57, 94, .8), transparent 60%),
    var(--navy-deep);
}
body.pagina-navy .ax-header { background: transparent; border-bottom-color: rgba(213, 181, 137, .28); }
body.pagina-navy .ax-footer { border-top-color: rgba(213, 181, 137, .22); color: rgba(232, 228, 217, .55); }
body.pagina-navy .ax-main { display: flex; align-items: center; justify-content: center; }

/* ---------- botones ---------- */
.btn {
  display: inline-block;
  font: 600 .8rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-oro {
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  color: var(--navy-ink);
  box-shadow: 0 10px 22px -12px rgba(179, 144, 94, .7);
}
.btn-oro:hover { box-shadow: 0 14px 28px -12px rgba(179, 144, 94, .85); }
.btn-linea {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-linea:hover { background: var(--navy); color: var(--gold-2); }
.btn-linea-oro {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-line);
}
.btn-linea-oro:hover { background: rgba(213, 181, 137, .12); }
.btn-bloque { display: block; width: 100%; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.15rem, 3vw, 1.7rem);
}
.tarjeta-navy {
  background: linear-gradient(150deg, var(--navy-2) 0%, var(--navy-deep) 70%);
  border: 1px solid var(--gold-line);
  color: #efece3;
  box-shadow: var(--shadow);
}
.tarjeta-navy h1, .tarjeta-navy h2, .tarjeta-navy h3 { color: #f6f2e8; }

/* cabecera de página */
.pagina-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  margin-bottom: 1.6rem;
}
.pagina-cabecera h1 { margin-bottom: 0; }

/* ---------- formularios ---------- */
.campo { margin-bottom: 1.05rem; }
.campo label {
  display: block;
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .72rem .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(213, 181, 137, .25);
}
.campos-2 { display: grid; grid-template-columns: 1fr; gap: 0 1.1rem; }
@media (min-width: 640px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

/* mensajes */
.aviso {
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .9rem;
  margin-bottom: 1.1rem;
  border: 1px solid;
}
.aviso-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(161, 60, 60, .3); }
.aviso-ok { background: #ecf3e8; color: #3d6b34; border-color: rgba(61, 107, 52, .3); }
.aviso-info {
  background: linear-gradient(90deg, rgba(213, 181, 137, .16), rgba(213, 181, 137, .06));
  color: var(--navy);
  border-color: var(--gold-line);
  font-weight: 500;
}

/* ---------- login ---------- */
.acceso-caja {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, rgba(38, 57, 94, .75), rgba(19, 31, 56, .92));
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  padding: clamp(1.6rem, 6vw, 2.6rem);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65);
  color: #efece3;
  text-align: center;
}
.acceso-caja::before { /* filo dorado superior */
  content: "";
  display: block;
  height: 2px;
  margin: -1.6rem -1.6rem 1.6rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.acceso-sello {
  width: 66px; height: 66px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  background: radial-gradient(circle at 30% 25%, rgba(213, 181, 137, .22), transparent 60%);
}
.acceso-caja h1 { color: #f6f2e8; font-size: 1.45rem; }
.acceso-caja .eyebrow { color: var(--gold); }
.acceso-caja .campo { text-align: left; }
.acceso-caja .campo label { color: rgba(232, 228, 217, .75); }
.acceso-caja .campo input {
  background: rgba(13, 22, 38, .6);
  border-color: rgba(213, 181, 137, .3);
  color: #f6f2e8;
}
.acceso-caja .campo input:focus { border-color: var(--gold); }
.acceso-nota { font-size: .78rem; color: rgba(232, 228, 217, .55); margin-top: 1.1rem; }

/* ---------- panel KPI ---------- */
.kpi-rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
  margin-bottom: 1.8rem;
}
@media (min-width: 820px) { .kpi-rejilla { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.kpi::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-deep));
}
.kpi-cifra {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.kpi-nombre {
  font: 600 .66rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
}

/* accesos del panel */
.accesos-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 640px) { .accesos-rejilla { grid-template-columns: repeat(3, 1fr); } }
.acceso-item {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-soft);
  transition: border-color .18s, transform .18s;
}
.acceso-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.acceso-item strong { font-family: var(--serif); font-size: 1.1rem; color: var(--navy); display: block; margin-bottom: .2rem; }
.acceso-item span { font-size: .85rem; color: var(--muted); }
.acceso-item em {
  display: block;
  font-style: normal;
  color: var(--gold-deep);
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .8rem;
}

/* insignia de subadmin */
.chip-pais {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  background: linear-gradient(90deg, rgba(213, 181, 137, .3), rgba(213, 181, 137, .12));
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: .5rem .95rem;
}

/* ---------- pills de estado ---------- */
.pill {
  display: inline-block;
  font: 600 .66rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-activa {
  color: #6d5426;
  background: linear-gradient(135deg, rgba(233, 211, 174, .8), rgba(213, 181, 137, .55));
  border-color: var(--gold-line);
}
.pill-por_vencer { color: var(--amber); background: var(--amber-bg); border-color: rgba(185, 127, 36, .35); }
.pill-vencida, .pill-sin { color: var(--muted); background: var(--paper-2); border-color: var(--line); }

/* ---------- filtros ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
  margin-bottom: 1.4rem;
}
.filtros .campo { margin-bottom: 0; flex: 1 1 150px; }
.filtros .btn { padding: .7rem 1.3rem; flex: 0 0 auto; }
@media (max-width: 480px) { .filtros .btn { flex: 1 1 100%; } }

/* ---------- tabla responsive ---------- */
.tabla-marco { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
  text-align: left;
  font: 600 .66rem/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: var(--navy);
  padding: .85rem 1rem;
}
.tabla td { padding: .85rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover { background: rgba(213, 181, 137, .08); }
.tabla a { color: var(--navy); font-weight: 600; text-decoration: none; }
.tabla a:hover { color: var(--gold-deep); }
.tabla .celda-sec { color: var(--muted); font-size: .85rem; }

@media (max-width: 760px) {
  .tabla-marco { border: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    margin-bottom: .8rem;
    padding: .35rem 1rem;
  }
  .tabla td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 0;
    border-bottom: 1px dashed var(--line);
    padding: .6rem 0;
  }
  .tabla td:last-child { border-bottom: 0; }
  .tabla td::before {
    content: attr(data-etiqueta);
    font: 600 .64rem/1 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
  }
  .tabla td[data-etiqueta=""]::before { content: none; }
}

/* ---------- insignias de categoría (metálicas) ---------- */
.insignia {
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, .35);
}
.insignia::after { /* brillo diagonal */
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  pointer-events: none;
}
.insignia-etiqueta {
  font: 600 .62rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: .4rem;
}
.insignia-nombre {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .05em;
}
.insignia-pie { font-size: .78rem; opacity: .8; margin-top: .55rem; }

.cat-silver { background: linear-gradient(135deg, #eceef2 0%, #b7bdc8 42%, #f3f5f8 58%, #a3aab8 100%); color: #363d4c; }
.cat-gold { background: linear-gradient(135deg, #eed9b2 0%, #c8a267 42%, #f6e6c5 58%, #b18c53 100%); color: #453317; }
.cat-platinum { background: linear-gradient(135deg, #f6f4ef 0%, #d7d3c8 42%, #fcfbf8 58%, #c8c4b8 100%); color: #524e42; }
.cat-black { background: linear-gradient(135deg, #33363d 0%, #101216 42%, #3d4048 58%, #0b0c10 100%); color: var(--gold-2); border-color: rgba(213, 181, 137, .4); }
.cat-black .insignia-etiqueta { color: var(--gold); opacity: 1; }

/* mini insignia (directorio, tablas) */
.mini-cat {
  display: inline-block;
  font: 700 .62rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .38rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .4), 0 2px 6px -3px rgba(19, 31, 56, .4);
}
.mini-cat.cat-black { box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .6); }

/* ---------- perfil del doctor (mi.html) ---------- */
.perfil-hero {
  background:
    radial-gradient(620px 300px at 88% 0%, rgba(213, 181, 137, .16), transparent 60%),
    linear-gradient(150deg, var(--navy-2) 0%, var(--navy-deep) 75%);
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  color: #efece3;
  padding: clamp(1.6rem, 5vw, 2.6rem);
  box-shadow: var(--shadow);
  margin-bottom: 1.6rem;
  position: relative;
  overflow: hidden;
}
.perfil-hero::before { /* monograma de fondo */
  content: "AX";
  position: absolute;
  right: -.1em; bottom: -.35em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(7rem, 22vw, 12rem);
  line-height: 1;
  color: rgba(213, 181, 137, .07);
  pointer-events: none;
}
.perfil-hero h1 { color: #f8f4ea; margin-bottom: .3rem; }
.perfil-hero .perfil-sub { color: var(--gold-2); font-family: var(--serif); font-style: italic; font-size: 1.05rem; }
.perfil-hero .perfil-pais {
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239, 236, 227, .7);
  margin-top: .6rem;
}

.perfil-rejilla { display: grid; grid-template-columns: 1fr; gap: 1.3rem; align-items: start; }
@media (min-width: 900px) { .perfil-rejilla { grid-template-columns: 1fr 1fr; } }

/* carnet digital — proporción 85.6 × 54 mm */
.carnet {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 85.6 / 54;
  border-radius: 16px;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(213, 181, 137, .18), transparent 55%),
    linear-gradient(135deg, #253a61 0%, var(--navy-deep) 60%, var(--navy-ink) 100%);
  border: 1px solid var(--gold-line);
  box-shadow: 0 24px 48px -22px rgba(13, 22, 38, .65);
  color: #efece3;
  padding: clamp(.9rem, 3.4vw, 1.35rem) clamp(1rem, 3.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.carnet::after { /* veta dorada del carnet */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 181, 137, .5), transparent);
}
.carnet-fila-sup { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.carnet-marca { font-family: var(--serif); font-weight: 700; font-size: clamp(.95rem, 3vw, 1.15rem); color: var(--gold); letter-spacing: .06em; white-space: nowrap; }
.carnet-marca small { font: 600 .5em/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: rgba(239, 236, 227, .8); margin-left: .5em; }
.carnet-cat {
  font: 700 .58rem/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: .34rem .7rem;
  white-space: nowrap;
}
.carnet-fila-inf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.carnet-nombre { font-family: var(--serif); font-size: clamp(.98rem, 3.4vw, 1.28rem); font-weight: 600; color: #f8f4ea; line-height: 1.2; }
.carnet-codigo { font: 600 .64rem/1 var(--sans); letter-spacing: .3em; color: var(--gold); margin-top: .35rem; }
.carnet-vigencia { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(239, 236, 227, .65); margin-top: .45rem; }
.carnet-qr {
  flex-shrink: 0;
  width: clamp(56px, 17vw, 78px);
  height: clamp(56px, 17vw, 78px);
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
}
.carnet-qr img { width: 100%; height: 100%; object-fit: contain; }

/* estado de membresía en el perfil */
.estado-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; }
.estado-caja .btn { flex-shrink: 0; }

/* ---------- directorio público ---------- */
.dir-hero {
  text-align: center;
  padding: clamp(2rem, 6vw, 3.4rem) 1rem clamp(1.4rem, 4vw, 2.2rem);
}
.dir-hero h1 { margin-bottom: .4rem; }
.dir-hero p { color: var(--muted); max-width: 42rem; margin: 0 auto; }
.dir-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 560px) { .dir-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .dir-rejilla { grid-template-columns: repeat(3, 1fr); } }
.dir-tarjeta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.3rem 1.3rem;
  text-align: center;
  position: relative;
  transition: transform .18s, border-color .18s;
}
.dir-tarjeta:hover { transform: translateY(-3px); border-color: var(--gold); }
.dir-tarjeta::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .18s;
}
.dir-tarjeta:hover::before { opacity: 1; }
.dir-inicial {
  width: 62px; height: 62px;
  margin: 0 auto .85rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(circle at 32% 28%, rgba(213, 181, 137, .3), rgba(28, 45, 74, .06) 65%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy);
}
.dir-tarjeta h3 { margin-bottom: .15rem; }
.dir-esp { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: .92rem; }
.dir-pais { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: .55rem 0 .8rem; }

/* ---------- verificación QR ---------- */
.verif-caja {
  width: 100%;
  max-width: 440px;
  text-align: center;
  background: linear-gradient(160deg, rgba(38, 57, 94, .72), rgba(19, 31, 56, .94));
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  padding: clamp(2rem, 7vw, 3rem) clamp(1.4rem, 5vw, 2.4rem);
  color: #efece3;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65);
}
.verif-sello {
  width: 96px; height: 96px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  line-height: 1;
}
.verif-sello.ok {
  color: var(--navy-ink);
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 0 6px rgba(213, 181, 137, .18), 0 0 0 12px rgba(213, 181, 137, .07), 0 18px 36px -16px rgba(179, 144, 94, .8);
}
.verif-sello.no {
  color: rgba(239, 236, 227, .8);
  background: rgba(239, 236, 227, .08);
  border: 1px solid rgba(239, 236, 227, .25);
}
.verif-caja h1 { color: #f8f4ea; font-size: clamp(1.3rem, 5vw, 1.6rem); letter-spacing: .04em; }
.verif-caja .eyebrow { color: var(--gold); }
.verif-datos { margin: 1.4rem 0 0; padding: 0; list-style: none; text-align: left; }
.verif-datos li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(213, 181, 137, .18);
  font-size: .92rem;
}
.verif-datos li:last-child { border-bottom: 0; }
.verif-datos span { font: 600 .64rem/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 236, 227, .6); }
.verif-datos strong { color: #f8f4ea; font-weight: 600; text-align: right; }

/* ---------- fórmulas ---------- */
.formulas-rejilla { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .formulas-rejilla { grid-template-columns: repeat(2, 1fr); } }
.formula-tarjeta {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.4rem 1.25rem;
  transition: transform .18s, border-color .18s;
  position: relative;
  overflow: hidden;
}
.formula-tarjeta::after {
  content: "→";
  position: absolute;
  right: 1.2rem; bottom: 1rem;
  color: var(--gold-deep);
  font-size: 1.1rem;
  transition: transform .18s;
}
.formula-tarjeta:hover { transform: translateY(-2px); border-color: var(--gold); }
.formula-tarjeta:hover::after { transform: translateX(4px); }
.formula-tarjeta h3 { margin-bottom: .3rem; }
.formula-tarjeta p { color: var(--muted); font-size: .9rem; margin: 0 2rem .2rem 0; }

.resultado-caja {
  margin-top: 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--gold-line);
  background: linear-gradient(150deg, var(--navy-2), var(--navy-deep));
  color: #f8f4ea;
  padding: 1.5rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.resultado-caja .eyebrow { color: var(--gold); margin-bottom: .5rem; }
.resultado-valor { font-family: var(--serif); font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 700; color: var(--gold-2); line-height: 1.15; }

/* ---------- campañas ---------- */
.campanas-rejilla { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 960px) { .campanas-rejilla { grid-template-columns: 5fr 6fr; align-items: start; } }

/* ---------- utilitarias ---------- */
.centro { text-align: center; }
.margen-sup { margin-top: 1.6rem; }
.sin-resultados {
  text-align: center;
  color: var(--muted);
  padding: 2.6rem 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
.acciones-fila { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* código secreto 2FA */
.codigo-secreto {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: .95rem;
  letter-spacing: .18em;
  background: var(--paper-2);
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  text-align: center;
  color: var(--navy);
  word-break: break-all;
}
.qr-2fa {
  width: 190px; height: 190px;
  margin: 0 auto 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  box-shadow: var(--shadow-soft);
}
.qr-2fa img { width: 100%; height: 100%; object-fit: contain; }

/* entrada suave de página */
@media (prefers-reduced-motion: no-preference) {
  .ax-main > * { animation: ax-entrada .5s ease both; }
  .ax-main > *:nth-child(2) { animation-delay: .07s; }
  .ax-main > *:nth-child(3) { animation-delay: .14s; }
  .ax-main > *:nth-child(4) { animation-delay: .21s; }
  @keyframes ax-entrada {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* impresión del carnet */
@media print {
  .ax-header, .ax-footer, .btn, .ax-nav { display: none !important; }
  body { background: #fff; }
}

/* ---------- landing pública ---------- */
.landing-hero {
  text-align: center;
  padding: clamp(2.4rem, 7vw, 4.2rem) 1rem clamp(1.6rem, 4vw, 2.4rem);
}
.landing-hero h1 { max-width: 34rem; margin-inline: auto; }
.landing-bajada {
  color: var(--muted);
  max-width: 40rem;
  margin: .6rem auto 1.4rem;
  font-size: 1.02rem;
}
.landing-ctas {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.landing-cifras {
  display: flex;
  gap: clamp(1.6rem, 6vw, 3.4rem);
  justify-content: center;
  margin-top: clamp(1.6rem, 5vw, 2.6rem);
}
.landing-cifra-num {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  color: var(--navy);
  line-height: 1.1;
}
.landing-cifra-txt {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: .2rem;
}
.landing-beneficios, .landing-pasos {
  padding: clamp(1.4rem, 4vw, 2.4rem) 0;
}
.landing-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
}
@media (min-width: 560px) { .landing-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .landing-beneficios .landing-rejilla { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .landing-pasos .landing-rejilla { grid-template-columns: repeat(3, 1fr); }
}
.landing-pasos { scroll-margin-top: 4.5rem; }
.landing-pasos .landing-ctas { margin-top: 1.8rem; }
.paso { position: relative; padding-top: 2.4rem; }
.paso-num {
  position: absolute;
  top: -0.9rem;
  left: 1.2rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-2), var(--gold-deep));
  color: var(--navy-ink);
  font: 700 1rem/1 var(--serif);
  box-shadow: var(--shadow-soft);
}

/* ---------- video embed responsive (curso) ---------- */
.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy-ink);
  margin: 1rem 0;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   MARCA REAL AX (manual del cliente, 05/08) + diseño premium v2
   Paleta oficial: dorado #d5b589 (exacto al nuestro) · Elegant
   Black · Pearl · Silver #96a1ad · Sea Blue #bac7d4
   ============================================================ */

/* ---------- Playfair Display local (cero CDN) ---------- */
@font-face { font-family: "Playfair Display"; src: url("/static/fonts/playfair-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/static/fonts/playfair-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/static/fonts/playfair-500i.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --plata: #96a1ad;        /* Silver oficial */
  --perla: #f7f5f0;        /* Pearl */
  --azul-mar: #bac7d4;     /* Sea Blue oficial */
  --negro-eleg: #101216;   /* Elegant black */
  --gold-text: #8a6a3e;    /* dorado LEGIBLE sobre papel (AA); el claro queda para navy */
}

/* accesibilidad: dorado con contraste AA sobre fondo papel */
.eyebrow, .landing-cifra-txt, .dir-esp { color: var(--gold-text); }
.ax-main :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }

/* ---------- header: isotipo real ---------- */
.ax-iso { height: 30px; width: auto; display: inline-block; }

/* ---------- carnet: credencial de verdad ---------- */
.carnet {
  position: relative;
  background:
    repeating-radial-gradient(circle at 115% -15%, rgba(213,181,137,.05) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at -20% 125%, rgba(255,255,255,.03) 0 1px, transparent 1px 12px),
    radial-gradient(400px 200px at 100% 0%, rgba(213,181,137,.18), transparent 55%),
    linear-gradient(135deg, #253a61 0%, var(--navy-deep) 60%, var(--navy-ink) 100%);
  transition: transform .35s ease, box-shadow .35s ease;
}
.carnet::before {
  content: ""; position: absolute; inset: 7px; border-radius: 10px;
  border: 1px solid rgba(213,181,137,.26); pointer-events: none;
}
.carnet:hover, .carnet:focus-within {
  transform: perspective(900px) rotate3d(1, -1, 0, 3deg) translateY(-3px);
  box-shadow: 0 34px 64px -24px rgba(13,22,38,.8);
}
.carnet-marca-agua {
  position: absolute; right: 4px; bottom: 2px; width: 38%; max-width: 150px;
  opacity: .07; pointer-events: none; user-select: none;
}
.carnet-qr img, .carnet-qr { border-radius: 10px; }
.carnet-qr { box-shadow: 0 0 0 1px rgba(213,181,137,.45), 0 6px 16px -8px rgba(0,0,0,.6); }
/* el estatus SE VE en el carnet */
.carnet.carnet-gold     { border-color: rgba(213,181,137,.8); }
.carnet.carnet-platinum { border-color: rgba(186,199,212,.6); }
.carnet.carnet-platinum .carnet-marca { color: var(--perla); }
.carnet.carnet-black {
  background:
    repeating-radial-gradient(circle at 115% -15%, rgba(213,181,137,.06) 0 1px, transparent 1px 9px),
    radial-gradient(380px 190px at 100% 0%, rgba(213,181,137,.12), transparent 55%),
    linear-gradient(135deg, #23262d 0%, var(--negro-eleg) 55%, #0b0c10 100%);
  border-color: rgba(213,181,137,.55);
}

/* ---------- insignias: progresión de estatus (paleta oficial) ---------- */
.insignia { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.18); }
.insignia::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(105deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px);
}
.cat-silver   { background: linear-gradient(135deg, #e6eaee 0%, var(--plata) 45%, #eef1f5 60%, #87919d 100%); }
.cat-platinum { background: linear-gradient(135deg, var(--perla) 0%, var(--azul-mar) 48%, #fdfcf9 60%, #a8b6c4 100%); }
.cat-platinum::before { background: repeating-linear-gradient(105deg, rgba(255,255,255,.16) 0 1px, transparent 1px 2px); }
.cat-black {
  background:
    radial-gradient(360px 160px at 85% 10%, rgba(213,181,137,.14), transparent 60%),
    linear-gradient(135deg, #33363d 0%, var(--negro-eleg) 42%, #3d4048 58%, #0b0c10 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(213,181,137,.35), 0 0 0 1px rgba(213,181,137,.25);
}
.insignia-nivel { position: absolute; top: 1.1rem; right: 1.3rem; letter-spacing: .3em; font-size: .68rem; opacity: .75; }
.cat-silver .insignia-nivel::after   { content: "◆"; }
.cat-gold .insignia-nivel::after     { content: "◆◆"; }
.cat-platinum .insignia-nivel::after { content: "◆◆◆"; }
.cat-black .insignia-nivel::after    { content: "◆◆◆◆"; color: var(--gold); }

/* escalera de niveles (slide 11 de la propuesta) */
.cat-escalera { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 1rem 0 0; }
.cat-escalera li { flex: 1; text-align: center; font: 600 .62rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; padding: .55rem .3rem; border-radius: 999px;
  border: 1px dashed var(--line); color: var(--muted); }
.cat-escalera li.lograda { border-style: solid; border-color: var(--gold-line); color: var(--gold-text); }
.cat-escalera li.lograda::before { content: "✓ "; }
.cat-escalera li.actual { border: 1px solid transparent; color: var(--navy-ink);
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep)); font-weight: 700; }

/* ---------- verificación /v/{token}: teatral ---------- */
.verif-foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem;
  border: 2px solid var(--gold); box-shadow: 0 0 0 5px rgba(213,181,137,.15), 0 14px 28px -14px rgba(0,0,0,.7); }
.verif-sello { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .verif-sello.ok { animation: sello-pop .55s cubic-bezier(.2,.9,.3,1.35) both; }
  .verif-sello.ok::after { content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid rgba(213,181,137,.55); animation: sello-halo 2.6s ease-out infinite .4s; }
  @keyframes sello-pop  { from { transform: scale(.55); opacity: 0; } }
  @keyframes sello-halo { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
}

/* ---------- landing: hero navy con el carnet de muestra ---------- */
.landing-hero-navy {
  background:
    radial-gradient(700px 320px at 80% -10%, rgba(213,181,137,.16), transparent 60%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy-deep) 55%, var(--navy-ink) 100%);
  border-radius: var(--radius); color: var(--perla);
  padding: clamp(2.4rem, 7vw, 4rem) clamp(1rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
}
.landing-hero-navy h1 { color: var(--perla); }
.landing-hero-navy .landing-bajada { color: rgba(239,236,227,.78); }
.landing-hero-navy .eyebrow { color: var(--gold); }
.landing-hero-navy .landing-cifra-num { color: var(--gold-2); }
.landing-hero-navy .landing-cifra-txt { color: rgba(239,236,227,.72); }
.landing-logo { width: min(300px, 62vw); margin: 0 auto 1.4rem; opacity: .96; }
.carnet-demo { max-width: 380px; margin: 2.2rem auto 0; transform: rotate(-2.5deg); }
.carnet-demo:hover { transform: rotate(0) translateY(-3px); }
.carnet-qr-demo { width: 64px; height: 64px; background:
  repeating-linear-gradient(0deg, #131f38 0 3px, #fff 3px 6px),
  repeating-linear-gradient(90deg, #131f38 0 3px, #fff 3px 6px);
  background-blend-mode: screen; }

/* ---------- directorio: vitrina ---------- */
.dir-cifra { text-align: center; font: 600 .72rem/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-text); margin: .4rem 0 0; }
.dir-tarjeta { position: relative; overflow: hidden; }
.dir-tarjeta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.dir-tarjeta.tier-silver::before   { background: linear-gradient(90deg, transparent, var(--plata), transparent); }
.dir-tarjeta.tier-gold::before     { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.dir-tarjeta.tier-platinum::before { background: linear-gradient(90deg, transparent, var(--azul-mar), transparent); }
.dir-tarjeta.tier-black::before    { background: linear-gradient(90deg, transparent, var(--negro-eleg), transparent); }
.dir-verificada { display: block; margin-top: .5rem; font-size: .72rem; color: var(--gold-text); }

/* KPIs con numerales alineados */
.kpi-cifra, .tabla { font-variant-numeric: lining-nums tabular-nums; }
.btn-oro:hover { transform: translateY(-1px); }

/* ---------- impresión del carnet (Guardar/imprimir) ---------- */
@media print {
  .ax-header, .ax-footer, .btn, .ax-nav, .acciones-fila { display: none !important; }
  body { background: #fff; }
  body.pagina-carnet .ax-main > *:not(.perfil-rejilla) { display: none !important; }
  body.pagina-carnet .perfil-rejilla > section:not(:first-child) { display: none !important; }
  body.pagina-carnet .eyebrow { display: none !important; }
  body.pagina-carnet .carnet {
    width: 85.6mm; height: 54mm; max-width: none; margin: 20mm auto;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    box-shadow: none; page-break-inside: avoid; transform: none !important;
  }
}

/* ============================================================
   CURSO · sala de cine — body.pagina-cine
   ============================================================ */
body.pagina-cine {
  background:
    radial-gradient(1100px 500px at 80% -14%, rgba(213,181,137,.10), transparent 62%),
    radial-gradient(900px 640px at -12% 110%, rgba(28,45,74,.55), transparent 62%),
    var(--negro-eleg);
  color: var(--perla);
}
body.pagina-cine .ax-header { background: rgba(16,18,22,.88); border-bottom-color: rgba(213,181,137,.22); }
body.pagina-cine .ax-footer { border-top-color: rgba(213,181,137,.16); color: rgba(247,245,240,.45); }
body.pagina-cine h1, body.pagina-cine h2, body.pagina-cine h3 { color: var(--perla); }
body.pagina-cine .eyebrow { color: var(--gold); }
body.pagina-cine a { color: var(--gold-2); }
body.pagina-cine .ax-main :focus-visible { outline-color: var(--gold-2); }
body.pagina-cine .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

.sr-solo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cine-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem; margin-bottom: 1.4rem; }
.cine-progreso { display: flex; align-items: center; gap: .85rem; }
.cine-progreso-nota { margin: 0; font: 600 .68rem/1.5 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: rgba(247,245,240,.68); }
.cine-progreso-nota strong { display: block; color: var(--gold-2); font-size: .8rem; }

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.anillo { --p: 0; position: relative; width: 74px; height: 74px; flex-shrink: 0;
  display: grid; place-items: center; }
.anillo::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--gold-deep), var(--gold) calc(var(--p) * 1%),
              rgba(247,245,240,.13) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6.5px));
          mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6.5px)); }
.anillo-cifra { font: 700 1.12rem/1 var(--serif); color: var(--gold-2);
  font-variant-numeric: tabular-nums; }
.anillo-cifra small { font-size: .62em; opacity: .65; }
@media (prefers-reduced-motion: no-preference) {
  .anillo::before { animation: anillo-carga 1.1s ease-out both; }
  @keyframes anillo-carga { from { --p: 0; } }
}

.cine-hero { position: relative; display: flex; align-items: flex-end;
  min-height: clamp(360px, 68vw, 460px);
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(213,181,137,.26);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.85); }
@media (min-width: 760px) { .cine-hero { min-height: 440px; } }
.cine-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 76% 38%; }
.cine-hero-velo { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,18,22,.12) 0%, rgba(16,18,22,.5) 52%, rgba(16,18,22,.94) 100%),
    linear-gradient(100deg, rgba(16,18,22,.78) 0%, rgba(16,18,22,.25) 45%, transparent 68%); }
.cine-hero-contenido { position: relative; max-width: 34rem;
  padding: clamp(1.3rem, 4.5vw, 2.6rem); }
.cine-hero-contenido .eyebrow { margin-bottom: .5rem; }
.cine-hero-titulo { font-size: clamp(1.55rem, 5.5vw, 2.5rem); line-height: 1.12;
  margin-bottom: .35rem; text-wrap: balance; }
.cine-hero-desc { color: rgba(247,245,240,.8); font-size: .95rem; margin: 0 0 .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cine-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0;
  font: 600 .68rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,245,240,.65); }
.cine-hero-meta strong { color: var(--gold-2); }
.cine-hero-btn { margin-top: 1.05rem; }

.rail-titulo { display: flex; align-items: baseline; gap: .9rem; margin: 1.9rem 0 .9rem;
  font-size: 1.12rem; letter-spacing: .02em; }
.rail-titulo::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(213,181,137,.35), transparent); }
.rail { display: flex; gap: clamp(.8rem, 2.4vw, 1.15rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
  padding: .5rem clamp(1rem, 4vw, 2.5rem) 1.3rem;
  scroll-padding-inline: clamp(1rem, 4vw, 2.5rem);
  scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; border-radius: var(--radius-sm); }

.ep { position: relative; flex: 0 0 clamp(232px, 66vw, 300px);
  scroll-snap-align: start; text-decoration: none; color: inherit; }
.ep-poster { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; background: var(--navy-ink);
  border: 1px solid rgba(213,181,137,.18);
  box-shadow: 0 16px 34px -20px rgba(0,0,0,.85);
  transition: border-color .2s, box-shadow .2s, transform .25s ease; }
.ep-poster img { width: 100%; height: 100%; object-fit: cover; }
.ep-num { position: absolute; left: .55rem; bottom: -.14em; z-index: 2;
  font: 700 clamp(3rem, 11vw, 4rem)/0.9 var(--serif); letter-spacing: -.03em;
  color: var(--gold); text-shadow: 0 3px 16px rgba(0,0,0,.7);
  font-variant-numeric: tabular-nums; pointer-events: none; }
.ep-estado { position: absolute; top: .55rem; right: .55rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; }
.ep-estado.hecho { background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  color: var(--negro-eleg); box-shadow: 0 4px 12px -4px rgba(0,0,0,.65); }
.ep-estado.play { background: rgba(16,18,22,.6); color: var(--gold-2);
  border: 1px solid rgba(213,181,137,.5); padding-left: 2px; }
a.ep:hover .ep-poster, a.ep:focus-visible .ep-poster { border-color: var(--gold);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(213,181,137,.55),
              0 10px 34px -8px rgba(213,181,137,.32); }
a.ep:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  a.ep:hover .ep-poster, a.ep:focus-visible .ep-poster { transform: translateY(-5px); }
}
.ep-actual .ep-poster { border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(213,181,137,.55), 0 16px 34px -18px rgba(0,0,0,.85); }
.ep-cuerpo { display: block; padding: .65rem .2rem 0 .25rem; }
.ep-titulo { display: block; font: 600 .96rem/1.3 var(--serif); color: var(--perla); }
.ep-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: .15rem; font-size: .78rem; color: rgba(247,245,240,.62); }
.ep-bloqueado .ep-poster img { filter: grayscale(.75) brightness(.55); }
.ep-bloqueado .ep-num { color: rgba(150,161,173,.5); text-shadow: none; }
.ep-bloqueado .ep-titulo { color: rgba(247,245,240,.55); }
.ep-candado { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.ep-candado span { font: 600 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--azul-mar); background: rgba(16,18,22,.72);
  border: 1px solid rgba(150,161,173,.4); border-radius: 999px; padding: .5rem .85rem; }

.cine-vacio { position: relative; display: grid; place-items: center; text-align: center;
  min-height: clamp(320px, 55vw, 420px); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(213,181,137,.26); box-shadow: 0 34px 70px -30px rgba(0,0,0,.85); }
.cine-vacio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-vacio-velo { position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 55%, rgba(16,18,22,.55), rgba(16,18,22,.88)); }
.cine-vacio-cont { position: relative; max-width: 32rem; padding: 1.5rem; }
.cine-vacio-cont h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
.cine-vacio-cont p { font-family: var(--serif); font-style: italic; color: rgba(247,245,240,.75); }

.sala { max-width: 940px; margin-inline: auto; }
.sala-volver { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  font: 600 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(247,245,240,.65); text-decoration: none; }
.sala-volver:hover, .sala-volver:focus-visible { color: var(--gold-2); }
.sala-pantalla { border-radius: 14px; overflow: hidden; margin: .7rem 0 1.5rem;
  border: 1px solid rgba(213,181,137,.24);
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.95), 0 0 90px -36px rgba(213,181,137,.22); }
.video-wrap.sala-pantalla { margin: .7rem 0 1.5rem; }
.sala-poster { position: relative; aspect-ratio: 16 / 9; background: var(--navy-ink); }
.sala-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sala-poster-velo { position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: .3rem; text-align: center; padding: 1.2rem;
  background: radial-gradient(62% 62% at 50% 54%, rgba(16,18,22,.6), rgba(16,18,22,.25) 78%, transparent); }
.sala-poster-velo p { margin: 0; max-width: 26rem; font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: rgba(247,245,240,.88); }
.sala-ficha .eyebrow { margin-bottom: .4rem; }
.sala-desc { max-width: 62ch; font-size: .98rem; color: rgba(247,245,240,.78); }
.sala-texto { margin-top: 1rem; padding: 1rem 1.2rem; border-left: 2px solid var(--gold-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(247,245,240,.04); color: rgba(247,245,240,.85); }
.sala-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 520px) {
  .sala-acciones form, .sala-acciones .btn { width: 100%; }
}
.hairline-cine { border: 0; height: 1px; margin: 2.1rem 0 0;
  background: linear-gradient(90deg, transparent, rgba(213,181,137,.32) 18%,
              rgba(213,181,137,.32) 82%, transparent); }

/* ============================================================
   /mi v2 · "streaming profile" — saludo + contadores + rail
   ============================================================ */
.saludo-meta {
  font: 600 .68rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 1.1rem;
}
.saludo-meta span { color: rgba(213,181,137,.5); margin: 0 .3em; }
.saludo-cine .saludo-titulo {
  font-size: clamp(2rem, 6.5vw, 3.1rem); line-height: 1.08; margin-bottom: .45rem;
}

.stats-fila {
  list-style: none; margin: 1.7rem 0 0; padding: 1.35rem 0 0;
  display: flex;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold-line) 15%, var(--gold-line) 85%, transparent) 1;
  position: relative; z-index: 1;
}
.stat { flex: 1; min-width: 0; padding: 0 clamp(.6rem, 2.5vw, 1.6rem); }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid rgba(213,181,137,.22); }
.stat-num {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1; color: var(--gold-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-num small { font-size: .48em; font-weight: 600; color: rgba(213,181,137,.65); letter-spacing: .04em; }
.stat-tl {
  display: block; margin-top: .55rem;
  font: 600 .62rem/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(239,236,227,.66);
}

.rail-claro {
  display: flex; gap: .9rem; margin-top: 1.6rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: .2rem;
  padding: .8rem .2rem 1rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail-claro::-webkit-scrollbar { display: none; }
.rail-card {
  flex: 0 0 min(76%, 300px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .15rem;
  text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 1.15rem 1.25rem 1.1rem;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.rail-card .eyebrow { margin-bottom: .35rem; }
.rail-card strong { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--navy); }
.rail-card em { font-style: normal; font-size: .8rem; color: var(--muted); margin-top: auto; padding-top: .6rem; }
.rail-card:hover, .rail-card:focus-visible {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(179,144,94,.55);
}
.rail-progreso {
  display: block; height: 5px; margin-top: .7rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line); overflow: hidden;
}
.rail-progreso i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); border-radius: 999px; }
@media (min-width: 900px) {
  .rail-claro { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .rail-card { flex: initial; }
}

@media (prefers-reduced-motion: no-preference) {
  .saludo-cine .saludo-titulo { animation: saludo-alza .75s cubic-bezier(.2,.75,.2,1) both .12s; }
  @keyframes saludo-alza {
    from { opacity: 0; transform: translateY(16px); }
  }
}
@media (max-width: 380px) {
  .stat-tl { letter-spacing: .12em; font-size: .58rem; }
}

/* ============================================================
   PALETA OFICIAL COMPLETA (manual revisado 100% el 09/08)
   Primarios: Elegant Black #000 · "Pearl"(=dorado) #d5b589 ·
   Silver #96a1ad · Sea Breezy #bac7d4
   Secundarios: "Elegant black"(=NAVY) #1c2d4a ✓ CANON · Golden #d39c00
   Degradados: e4eaee→96a1ad · efecd9→d5b589 · f4d662
   Canon de piezas: fondo NEGRO + titular dorado + lockup blanco/silver;
   isotipo SIEMPRE silver/blanco (dorado solo como watermark tenue);
   CTA = pill borde dorado + texto claro (relleno solo el CTA hero).
   ============================================================ */
:root {
  --golden: #d39c00;
  --grad-silver: linear-gradient(135deg, #e4eaee, #96a1ad);
  --grad-gold: linear-gradient(135deg, #efecd9, #d5b589);
  --gold-bright: #f4d662;
}
/* patrón tipográfico del manual: primera línea light / segunda bold */
.titulo-duo { font-weight: 500; }
.titulo-duo strong { font-weight: 700; display: block; }

/* ============================================================
   FASE 1 · MOTOR PREMIUM (plan 2026-08-09-ax-impacto-premium)
   Investigado: Awwwards/NN-g/CSS-Tricks/MDN — restricción + precisión.
   ============================================================ */

/* 1 · tokens de easing/duración de lujo (entrada rápida, aterrizaje suave; CERO bounce) */
:root {
  --ease-lux:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-micro: 150ms; --dur-std: 300ms; --dur-hero: 500ms;
}
.btn, .ep-poster, .rail-card, .dir-tarjeta, .acceso-item, .carnet, .formula-tarjeta {
  transition-timing-function: var(--ease-lux);
}

/* 2 · tipografía editorial automática (sin viudas) */
h1, h2, h3, .landing-bajada { text-wrap: balance; }
p { text-wrap: pretty; }

/* 3 · view transitions entre páginas (MPA que se siente app; Firefox degrada limpio) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}
.ax-wordmark { view-transition-name: ax-logo; }

/* 4 · grano fílmico (data-URI: se rasteriza una vez y tilea — barato en móvil). NUNCA animado. */
.grano { position: relative; }
.grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 5 · dorado METÁLICO (gradiente multi-stop) + sheen de UNA pasada en hover (jamás loop) */
.oro-metal {
  background: linear-gradient(105deg,
    #8a6d3f 0%, var(--gold) 25%, #f4e3c1 50%, var(--gold) 75%, #8a6d3f 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-oro { background-size: 200% auto; }
@media (prefers-reduced-motion: no-preference) {
  .btn-oro:hover { animation: sheen-oro .9s var(--ease-lux) 1; }
  @keyframes sheen-oro { to { background-position: 200% center; } }
}

/* 6 · entradas escalonadas (coreografía IBM: 40-60ms entre hermanos, total <500ms) */
@media (prefers-reduced-motion: no-preference) {
  .rail > .ep, .rail-claro > .rail-card, .accesos-rejilla > .acceso-item {
    animation: sube-suave .55s var(--ease-lux) both;
  }
  .rail > *:nth-child(1), .rail-claro > *:nth-child(1), .accesos-rejilla > *:nth-child(1) { animation-delay: .05s; }
  .rail > *:nth-child(2), .rail-claro > *:nth-child(2), .accesos-rejilla > *:nth-child(2) { animation-delay: .10s; }
  .rail > *:nth-child(3), .rail-claro > *:nth-child(3), .accesos-rejilla > *:nth-child(3) { animation-delay: .15s; }
  .rail > *:nth-child(4), .rail-claro > *:nth-child(4), .accesos-rejilla > *:nth-child(4) { animation-delay: .20s; }
  .rail > *:nth-child(5), .accesos-rejilla > *:nth-child(5) { animation-delay: .25s; }
  .rail > *:nth-child(n+6) { animation-delay: .28s; }
  @keyframes sube-suave { from { opacity: 0; transform: translateY(18px); } }
  .ax-main > * { animation-timing-function: var(--ease-lux); }  /* la entrada global existente, con la curva nueva */
}

/* 7 · reveals al scroll (CSS nativo; Firefox = contenido estático, fallback perfecto) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-beneficios .tarjeta, .landing-pasos .paso, .dir-rejilla > * {
      animation: sube-rev linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes sube-rev { from { opacity: 0; transform: translateY(22px); } }
  }
}

/* 8 · carnet: tilt 3D + glare que sigue el cursor (JS ~20 líneas en tilt.js; solo desktop+motion) */
.carnet-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: radial-gradient(420px at var(--gx, 50%) var(--gy, 40%),
              rgba(244, 227, 193, .16), transparent 65%);
  opacity: 0; transition: opacity .3s var(--ease-lux);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .carnet.tilt {
    transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform .25s var(--ease-lux), box-shadow .35s var(--ease-lux);
  }
  .carnet.tilt:hover { box-shadow: 0 34px 64px -24px rgba(13,22,38,.8); }
  .carnet.tilt:hover .carnet-glare { opacity: 1; }
}

/* ── QA visual 09/08 (agente-ojos): 5 fixes de terminación ── */
/* 1 · contraste: texto SIEMPRE oscuro sobre oro (patrón landing), también en modo cine y pills */
body.pagina-cine .btn-oro { color: var(--navy-ink); }
.mini-cat.cat-gold, .mini-cat.cat-silver, .mini-cat.cat-platinum { color: var(--navy-ink); }
/* 2 · nav móvil: que "Salir" nunca quede fuera de pantalla */
@media (max-width: 520px) {
  .ax-header { flex-wrap: wrap; row-gap: .25rem; }
  .ax-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .2rem; column-gap: .7rem; }
}
/* 3 · filo de categoría del directorio: sólido y visible (antes: fade imperceptible) */
.dir-tarjeta::before { height: 4px; }
.dir-tarjeta.tier-silver::before   { background: var(--plata); }
.dir-tarjeta.tier-gold::before     { background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }
.dir-tarjeta.tier-platinum::before { background: var(--azul-mar); }
.dir-tarjeta.tier-black::before    { background: linear-gradient(90deg, #0b0c10, #3d4048); }
/* 4 · carnet demo en móvil: el QR debajo del texto, no encima */
@media (max-width: 480px) {
  .carnet-demo .carnet-fila-inf { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .carnet-demo .carnet-qr-demo { align-self: flex-end; }
}
/* 5 · beneficios: columnas con aire (4 a 1280px en vez de 5 apretadas) */
@media (min-width: 960px) {
  .landing-beneficios .landing-rejilla { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
}
/* labels de contadores móvil: menos ragged */
@media (max-width: 420px) { .stat-tl { letter-spacing: .1em; } }

/* ── landing v3: conversión (identidad + prueba social + cine + banda final) ── */
.landing-prueba { max-width: 380px; margin: 1.1rem auto 0; text-align: center; }
.landing-nombre label { color: var(--gold-2); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; }
.landing-nombre input {
  text-align: center; font-family: var(--serif); font-size: 1.05rem;
  background: rgba(247,245,240,.07); border: 1px solid rgba(213,181,137,.4);
  color: var(--perla); border-radius: var(--radius-sm); padding: .6rem .9rem; width: 100%;
}
.landing-nombre input::placeholder { color: rgba(247,245,240,.4); }
.landing-nombre input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.landing-escanea { margin: .55rem 0 0; font-size: .8rem; color: rgba(239,236,227,.7); }
.carnet-demo .carnet-qr img { width: 64px; height: 64px; display: block; background: #fff;
  border-radius: 8px; }

.landing-social { padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.landing-social .landing-rejilla { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .landing-social .landing-rejilla { grid-template-columns: repeat(3, 1fr); } }

.landing-cine {
  position: relative; display: grid; gap: 1.2rem; align-items: center;
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(213,181,137,.12), transparent 60%),
    linear-gradient(150deg, #23262d 0%, var(--negro-eleg) 60%, #0b0c10 100%);
  border-radius: var(--radius); border: 1px solid rgba(213,181,137,.28);
  box-shadow: var(--shadow); padding: clamp(1.4rem, 4vw, 2.4rem);
  margin: clamp(1.2rem, 3vw, 2rem) 0; color: var(--perla); overflow: hidden;
}
.landing-cine h2 { color: var(--perla); }
.landing-cine p { color: rgba(247,245,240,.78); max-width: 44ch; }
.landing-cine-poster { border-radius: 12px; border: 1px solid rgba(213,181,137,.3);
  box-shadow: 0 24px 48px -22px rgba(0,0,0,.9); width: 100%; }
@media (min-width: 860px) { .landing-cine { grid-template-columns: 1fr 1fr; } }

.banda-final {
  position: relative; text-align: center; color: var(--perla);
  background:
    radial-gradient(600px 280px at 50% 0%, rgba(213,181,137,.14), transparent 65%),
    linear-gradient(180deg, #16181d 0%, var(--negro-eleg) 100%);
  border-radius: var(--radius); border: 1px solid rgba(213,181,137,.3);
  box-shadow: var(--shadow); padding: clamp(2rem, 6vw, 3.4rem) 1.2rem;
  margin: 0 0 1.6rem; overflow: hidden;
}
.banda-final .landing-logo { margin: 0 auto 1rem; opacity: .95; }
.banda-final h2 { color: var(--perla); font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
.btn-borde-oro {                      /* CTA canónico del manual (p26): pill borde dorado + texto claro */
  border: 1px solid var(--gold); color: var(--gold-2); background: transparent;
  border-radius: 999px;
}
.btn-borde-oro:hover, .btn-borde-oro:focus-visible {
  background: rgba(213,181,137,.12); color: var(--gold-2);
}

/* ── QA landing v3: 3 fixes ── */
/* 1 · avisos sobre páginas navy (ej. banner demo en /v/): caja crema SÓLIDA, no translúcida */
body.pagina-navy .aviso { background: var(--paper); color: var(--ink); border-color: var(--gold-line); }
body.pagina-navy .aviso a { color: var(--gold-deep); }
/* 2 · beneficios: 5 cards sin huérfana desalineada (flex centrado) */
@media (min-width: 960px) {
  .landing-beneficios .landing-rejilla { display: flex; flex-wrap: wrap; justify-content: center; }
  .landing-beneficios .tarjeta { flex: 1 1 225px; max-width: 300px; }
}
/* 3 · Platinum ≠ Silver a primera vista: brillo acerado en el filo */
.dir-tarjeta.tier-platinum::before {
  background: linear-gradient(90deg, #8fa3b5, #eef3f8 45%, #bac7d4 55%, #8fa3b5);
}

/* ============================================================
   RE-SKIN CANON (pedido JP 09/08): fondos premium → ELEGANT BLACK
   del manual (el navy #1c2d4a queda como TEXTO/acentos sobre claro,
   que es su uso canónico — p12 + piezas reales pp.17-26).
   ============================================================ */
:root {
  --eleg-1: #23262d;   /* grafito alto del gradiente elegant black */
  --eleg-2: #16181d;
}
/* header global */
.ax-header { background: linear-gradient(180deg, var(--eleg-1) 0%, var(--negro-eleg) 100%); }
/* páginas ceremoniales (login, verificación) */
body.pagina-navy {
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(213, 181, 137, .14), transparent 62%),
    radial-gradient(700px 500px at 100% 110%, rgba(35, 38, 45, .9), transparent 60%),
    var(--negro-eleg);
}
/* hero del doctor (/mi) */
.perfil-hero {
  background:
    radial-gradient(620px 300px at 88% 0%, rgba(213, 181, 137, .16), transparent 60%),
    linear-gradient(150deg, var(--eleg-1) 0%, var(--negro-eleg) 75%);
}
/* hero de la landing */
.landing-hero-navy {
  background:
    radial-gradient(700px 320px at 80% -10%, rgba(213, 181, 137, .16), transparent 60%),
    linear-gradient(160deg, var(--eleg-1) 0%, var(--eleg-2) 55%, var(--negro-eleg) 100%);
}
/* carnet: base elegant black (guilloché queda); los tiers se distinguen por borde/acentos */
.carnet {
  background:
    repeating-radial-gradient(circle at 115% -15%, rgba(213,181,137,.05) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at -20% 125%, rgba(255,255,255,.03) 0 1px, transparent 1px 12px),
    radial-gradient(400px 200px at 100% 0%, rgba(213,181,137,.16), transparent 55%),
    linear-gradient(135deg, var(--eleg-1) 0%, var(--eleg-2) 60%, var(--negro-eleg) 100%);
}
.carnet.carnet-black {
  background:
    repeating-radial-gradient(circle at 115% -15%, rgba(213,181,137,.06) 0 1px, transparent 1px 9px),
    radial-gradient(380px 190px at 100% 0%, rgba(213,181,137,.14), transparent 55%),
    linear-gradient(135deg, #26282e 0%, #0e0f13 55%, #08090c 100%);
}
/* placeholders de video y resultado de fórmulas */
.video-wrap, .sala-poster { background: var(--negro-eleg); }
.resultado-caja { background: linear-gradient(150deg, var(--eleg-1), var(--negro-eleg)); }

/* ── QA re-skin: últimos 2 fondos navy + strip del poster ── */
/* cajas ceremoniales (login + verificación) al grafito canon */
.acceso-caja, .verif-caja {
  background: linear-gradient(160deg, rgba(35,38,45,.85), rgba(16,18,22,.95)) !important;
}
/* link "¿Olvidaste tu contraseña?" legible sobre caja oscura */
body.pagina-navy .acceso-caja a { color: var(--gold-2); }

/* ── NIVELES REALES (briefing 04/08): Silver → Purple → Gold → Expert ──
   Insignias: gris → MORADA → oro → MEDALLA Expert (la cima). Slugs viejos quedan por compat. */
.cat-purple {
  background: linear-gradient(135deg, #8a6fae 0%, #5d4379 45%, #a58cc7 60%, #4a3462 100%);
  color: #f7f5f0;
}
.cat-purple::before { background: repeating-linear-gradient(105deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px); }
.cat-purple .insignia-etiqueta, .cat-purple .insignia-pie { color: rgba(247,245,240,.75); }
.cat-expert {
  background:
    radial-gradient(360px 160px at 85% 10%, rgba(213,181,137,.22), transparent 60%),
    linear-gradient(135deg, #33363d 0%, var(--negro-eleg) 42%, #3d4048 58%, #0b0c10 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(213,181,137,.4), 0 0 0 1px rgba(213,181,137,.3);
  color: var(--gold-2);
}
.cat-purple .insignia-nivel::after { content: "◆◆"; }
.cat-gold .insignia-nivel::after   { content: "◆◆◆"; }
.cat-expert .insignia-nivel::after { content: "◆◆◆◆"; color: var(--gold); }
/* mini-cat pills */
.mini-cat.cat-purple { color: #f7f5f0; }
.mini-cat.cat-expert { color: var(--gold-2); }
/* carnet por nivel */
.carnet.carnet-purple { border-color: rgba(165,140,199,.65); }
.carnet.carnet-expert {
  background:
    repeating-radial-gradient(circle at 115% -15%, rgba(213,181,137,.07) 0 1px, transparent 1px 9px),
    radial-gradient(380px 190px at 100% 0%, rgba(213,181,137,.16), transparent 55%),
    linear-gradient(135deg, #26282e 0%, #0e0f13 55%, #08090c 100%);
  border-color: rgba(213,181,137,.6);
}
/* filo del directorio */
.dir-tarjeta.tier-purple::before { background: linear-gradient(90deg, #5d4379, #a58cc7 50%, #5d4379); }
.dir-tarjeta.tier-expert::before { background: linear-gradient(90deg, #0b0c10, var(--gold) 50%, #0b0c10); }

/* ── FORO CLÍNICO + RECOMENDACIONES (mesa 04/08 — goodwill) ── */
.foro-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0 1rem; }
.foro-tabs a {
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .84rem; color: var(--muted); text-decoration: none; transition: all .2s;
}
.foro-tabs a:hover { border-color: var(--gold); color: var(--navy); }
.foro-tabs a.activa { background: var(--navy); border-color: var(--navy); color: #f7f5f0; }
.foro-lista { display: grid; gap: .7rem; margin-top: 1rem; }
.foro-hilo-card {
  display: block; padding: 1rem 1.2rem; background: var(--panel, #fff);
  border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.foro-hilo-card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.foro-hilo-card.fijado { border-color: rgba(213,181,137,.55); }
.foro-hilo-card h3 { margin: .35rem 0 .3rem; font-size: 1.02rem; color: var(--navy); }
.foro-hilo-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.foro-pill {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.fp-casos      { border-color: rgba(28,45,74,.4);   color: var(--navy); }
.fp-postop     { border-color: rgba(150,161,173,.6); }
.fp-resultados { border-color: rgba(213,181,137,.6); color: #8a6d43; }
.foro-tec { font-size: .74rem; color: var(--muted); }
.foro-hilo-pie { font-size: .78rem; color: var(--muted); }
.foro-hilo-head h1 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: .4rem 0; }
.foro-post {
  background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.2rem; margin-top: .8rem;
}
.foro-post-op { border-left: 3px solid var(--gold); }
.foro-post-head { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--muted); }
.foro-post-head strong { color: var(--navy); }
.foro-post-cuerpo { margin-top: .5rem; white-space: pre-line; line-height: 1.62; }
.foro-video { margin-top: .8rem; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; }
.foro-video iframe { width: 100%; height: 100%; border: 0; }
.foro-adjuntos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.foro-adjuntos img {
  width: 132px; height: 132px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); transition: transform .2s;
}
.foro-adjuntos a:hover img { transform: scale(1.03); }
.foro-post-pie { display: flex; gap: .8rem; margin-top: .7rem; }
.foro-accion {
  background: none; border: none; padding: 0; font-size: .76rem; color: var(--muted);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.foro-accion:hover { color: var(--navy); }
.foro-form .campo { margin-top: .8rem; }
.foro-nota { font-size: .76rem; color: var(--muted); margin: .35rem 0 0; }
.foro-compuerta {
  margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed rgba(213,181,137,.7);
  border-radius: 12px; display: grid; gap: .6rem; background: rgba(213,181,137,.06);
}
.check-linea { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; cursor: pointer; }
.check-linea input { margin-top: .2rem; flex: none; }
.foro-reglas ol { padding-left: 1.2rem; display: grid; gap: .5rem; font-size: .9rem; }
.reco-card {
  margin: .8rem 0 0; padding: 1rem 1.2rem; background: var(--panel, #fff);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px;
}
.reco-card p { margin: 0; font-style: italic; line-height: 1.6; }
.reco-card footer { margin-top: .55rem; font-size: .8rem; color: var(--muted); font-style: normal; }
.reco-card.reco-pendiente { border-left-color: var(--navy); }
.consent-texto ol { padding-left: 1.2rem; display: grid; gap: .55rem; font-size: .9rem; line-height: 1.6; }
/* carnet: código de BARRAS (Mafe, 04/08) — caja blanca: el lector necesita contraste */
.carnet-barra {
  background: #fff; border-radius: 10px; padding: .5rem .6rem .3rem; text-align: center; flex: none;
}
.carnet-barra img { display: block; width: 128px; height: 44px; object-fit: fill; }
.carnet-barra span {
  font-size: .62rem; letter-spacing: .22em; color: #101216; font-variant-numeric: tabular-nums;
}

/* ── PULIDO QA visual 10/08: detalles sin terminar (no cambia el tema) ── */

/* 1) Autofill del login: mantener el input oscuro (solo en la pantalla navy) */
.pagina-navy input:-webkit-autofill,
.pagina-navy input:-webkit-autofill:hover,
.pagina-navy input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f0e8;
  -webkit-box-shadow: 0 0 0 1000px #23262d inset;
  caret-color: #f4f0e8;
  transition: background-color 9999s ease-out;
}

/* 2) Input de archivos: botón custom (el nativo delataba "sin terminar") */
input[type="file"] { font: 500 .84rem/1.4 var(--sans); color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: 600 .82rem var(--sans); padding: .5rem 1rem; margin-right: .85rem;
  border: 1px solid var(--gold); border-radius: 9px;
  background: rgba(213, 181, 137, .12); color: var(--navy); cursor: pointer;
  transition: background .2s, border-color .2s;
}
input[type="file"]::file-selector-button:hover { background: rgba(213, 181, 137, .26); }

/* 3) mini-cat (chips del directorio/colegas): pills sólidos sobre crema — el base era
      para fondo oscuro (borde/sombra blancos → invisibles sobre crema → "gris plano"). */
.mini-cat { border: 1px solid rgba(28, 45, 74, .18); box-shadow: none; background: rgba(28, 45, 74, .05); color: var(--navy-ink); }
.mini-cat.cat-silver, .mini-cat.cat-platinum {
  background: linear-gradient(135deg, rgba(150, 161, 173, .24), rgba(150, 161, 173, .10));
  border-color: rgba(150, 161, 173, .55); color: var(--navy-ink);
}
.mini-cat.cat-gold {
  background: linear-gradient(135deg, rgba(213, 181, 137, .32), rgba(213, 181, 137, .14));
  border-color: rgba(213, 181, 137, .65); color: var(--navy-ink);
}
.mini-cat.cat-purple {
  background: linear-gradient(135deg, #5d4379, #8a6fae); border-color: #5d4379; color: #f7f5f0;
}
.mini-cat.cat-expert {
  background: linear-gradient(135deg, #26282e, #0e0f13); border-color: rgba(213, 181, 137, .6); color: var(--gold-2);
}

/* 4) Barra de moderación en el foro: crema/oro con punto de aviso (no el panel rosa) */
.foro-mod-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem; margin: 1rem 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(213, 181, 137, .12), rgba(213, 181, 137, .05));
  border: 1px solid rgba(213, 181, 137, .45); font-size: .9rem; color: var(--navy);
}
.foro-mod-bar .punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: #c0483f; margin-right: .5rem; vertical-align: middle; }
.foro-mod-bar .punto.ok { background: #4a8f5f; }

/* 5) Botón de acción DESTRUCTIVA (borrar): jerarquía de peligro */
.btn-peligro { border: 1px solid rgba(176, 72, 63, .55) !important; color: #a5372f !important; background: transparent; }
.btn-peligro:hover { background: rgba(176, 72, 63, .10) !important; }