/* Comunidad (host propio, spec membresías §6). Tokens del design system de la
   comunidad, no los de la Academy: amarillo como único color, tinta casi negra,
   Bricolage Grotesque en títulos y Outfit en texto. Grilla de 4 px. El único
   JS es el del alta (unirme.js); todo lo demás funciona sin él. */
:root {
  --fondo: #fffdf7;
  --superficie: #ffffff;
  --linea: #ece4cf;
  --linea-amarilla: #e3cf92;
  --tinta: #17150f;
  --tinta-hover: #3a362b;
  --tinta-suave: #5e5949;
  --amarillo: #ffc21a;
  --amarillo-hover: #f5b400;
  --amarillo-tinte: #fff1c2;
  --amarillo-texto: #8a5a00;
  --en-amarillo: #17150f;
  --foco: #17150f;
  --error: #b42318;
  --error-tinte: #fdecea;
  --exito: #1f6b3a;
  --exito-tinte: #e8f5ec;
  --display: "Bricolage Grotesque", Outfit, ui-sans-serif, system-ui, sans-serif;
  --texto: Outfit, ui-sans-serif, system-ui, sans-serif;
  --radio: 14px;
  --radio-chico: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cm {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tinta); text-underline-offset: 3px; }
a:hover { color: var(--tinta-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 800; }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
[hidden] { display: none !important; }

/* Barra superior */
.cm-top { border-bottom: 1px solid var(--linea); background: var(--fondo); }
.cm-top__in {
  max-width: 960px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cm-marca {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
}
.cm-marca img { border-radius: 8px; }
.cm-nav { display: flex; align-items: center; gap: 16px; font-weight: 500; white-space: nowrap; }
/* En el celular, la marca larga y «Mi membresía · Salir» caben en una fila. */
@media (max-width: 440px) {
  .cm-marca { font-size: 16px; gap: 8px; }
  .cm-marca img { width: 28px; height: 28px; }
  .cm-nav { gap: 12px; font-size: 15px; }
}
.cm-nav form { margin: 0; }
.cm-link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Contenido */
.cm-main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 40px 16px 64px; }
.cm-main.cm-ancho { max-width: 960px; }
.cm-pie {
  border-top: 1px solid var(--linea); padding: 20px 16px; text-align: center;
  font-size: 14px; color: var(--tinta-suave); display: flex; gap: 8px;
  justify-content: center; flex-wrap: wrap;
}
.cm-pie a { color: var(--tinta-suave); }

.cm-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amarillo-texto); margin-bottom: 12px;
}
.cm-bajada { font-size: 20px; color: var(--tinta-suave); margin-top: 16px; }
.cm-suave { color: var(--tinta-suave); }
.cm-chico { font-size: 14px; }
.cm-pila > * + * { margin-top: 16px; }
.cm-pila-grande > * + * { margin-top: 32px; }

/* Botones */
.cm-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radio-chico);
  border: 1px solid transparent; background: var(--amarillo); color: var(--en-amarillo);
  font: 600 16px/1.2 var(--texto); text-decoration: none; cursor: pointer;
}
.cm-boton:hover { background: var(--amarillo-hover); color: var(--en-amarillo); }
.cm-boton--ancho { width: 100%; }
.cm-boton--borde { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.cm-boton--borde:hover { background: var(--amarillo-tinte); color: var(--tinta); }
.cm-boton--chico { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.cm-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cm-acciones form { margin: 0; }

/* Tarjetas y avisos */
.cm-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px;
}
.cm-card > * + * { margin-top: 12px; }
.cm-mensajes { margin-bottom: 24px; display: grid; gap: 8px; }
.cm-aviso {
  padding: 12px 16px; border-radius: var(--radio-chico);
  background: var(--amarillo-tinte); border: 1px solid var(--linea-amarilla);
}
.cm-aviso--error { background: var(--error-tinte); border-color: #f4c7c3; color: var(--error); }
.cm-aviso--exito { background: var(--exito-tinte); border-color: #b9dfc5; color: var(--exito); }

/* Precios */
.cm-precios { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cm-precio__monto { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.cm-precio__monto small { font-family: var(--texto); font-size: 16px; font-weight: 500; color: var(--tinta-suave); letter-spacing: 0; }
.cm-oferta {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--amarillo); color: var(--en-amarillo); font-size: 14px; font-weight: 600;
}

/* Formularios */
.cm-form { display: grid; gap: 24px; }
.cm-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; }
.cm-grupo > legend { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; padding: 0; }
.cm-campo { display: grid; gap: 4px; }
.cm-campo > label { font-weight: 500; font-size: 15px; }
.cm-campo input[type="text"], .cm-campo input[type="email"], .cm-campo input[type="password"],
.cm-campo input[type="tel"], .cm-campo select {
  width: 100%; min-height: 48px; padding: 10px 14px; font: 400 16px/1.4 var(--texto);
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
}
.cm-campo input:focus, .cm-campo select:focus { border-color: var(--amarillo-hover); outline: 3px solid var(--amarillo-tinte); outline-offset: 0; }
.cm-campo input:disabled, .cm-campo input[readonly] { background: var(--fondo); color: var(--tinta-suave); }
.cm-ayuda { font-size: 14px; color: var(--tinta-suave); }
.cm-error, .errorlist { color: var(--error); font-size: 14px; margin: 0; padding: 0; list-style: none; }
.cm-fila { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.cm-telefono { display: grid; gap: 8px; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
@media (min-width: 560px) { .cm-fila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Elegir entre opciones (plan, documento) */
.cm-opciones { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cm-opcion {
  position: relative; display: grid; gap: 2px; padding: 16px 16px 16px 48px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
.cm-opcion input { position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; margin: 0; accent-color: var(--tinta); }
.cm-opcion:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cm-opcion__titulo { font-weight: 600; }
.cm-opcion__precio { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }

/* Lo que depende de lo elegido. Sin :has() se ve todo, que es lo seguro. */
.cm-alta:has(input[name="periodicidad"][value="mensual"]:checked) [data-plan="anual"],
.cm-alta:has(input[name="periodicidad"][value="anual"]:checked) [data-plan="mensual"] { display: none; }
form:has(input[name="documento"][value="boleta"]:checked) .cm-empresa { display: none; }

/* Alta (/unirme/), simplificada el 01-11-2026: tan liviana como la de Skool.
   Mobile-first: casi todos llegan desde un anuncio en el celular. */
.cm-alta-pagina { max-width: 480px; margin: 0 auto; display: grid; gap: 24px; }
.cm-alta__titulo { font-size: clamp(30px, 8vw, 40px); }
.cm-alta__bajada { font-size: 17px; color: var(--tinta-suave); margin-top: 12px; }
.cm-alta.cm-card { padding: 20px; display: grid; gap: 28px; }
.cm-alta.cm-card > * + * { margin-top: 0; }
.cm-alta .cm-grupo > legend { font-size: 18px; margin-bottom: 12px; }
@media (min-width: 520px) { .cm-alta.cm-card { padding: 28px; } }

/* Con sesión: a nombre de quién queda la membresía («Comprando como…»). */
.cm-quien { display: flex; align-items: center; gap: 12px; }
.cm-quien__avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: var(--en-amarillo); font: 800 18px/1 var(--display);
}
.cm-quien__nombre { font-weight: 600; }

/* Los planes. En el celular, uno bajo el otro (radio, plan y precio en una
   fila); desde 520 px, lado a lado como en Skool. La insignia va sobre el
   borde. */
.cm-planes { display: grid; gap: 16px; }
.cm-plan {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
.cm-plan:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cm-plan input { grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--tinta); }
.cm-plan__titulo { grid-column: 2; grid-row: 1; font-weight: 600; }
.cm-plan__detalle { grid-column: 2; grid-row: 2; font-size: 13px; line-height: 1.35; color: var(--tinta-suave); }
.cm-plan__nota { grid-column: 2 / -1; grid-row: 3; font-size: 13px; line-height: 1.35; font-weight: 600; }
.cm-plan__precio {
  grid-column: 3; grid-row: 1 / span 2; text-align: right; white-space: nowrap;
  font: 800 22px/1.1 var(--display); letter-spacing: -0.02em;
}
.cm-plan__precio small { font: 500 14px/1 var(--texto); letter-spacing: 0; color: var(--tinta-suave); }
.cm-plan__insignia {
  position: absolute; top: -11px; right: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--amarillo); color: var(--en-amarillo); font-size: 12px; font-weight: 700; line-height: 18px;
}
@media (min-width: 520px) {
  .cm-planes { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
  .cm-plan { grid-template-columns: 20px minmax(0, 1fr); align-items: start; align-content: start; padding: 20px 16px 16px; }
  .cm-plan input { grid-row: 1; }
  .cm-plan__precio { grid-column: 1 / -1; grid-row: 2; text-align: left; margin-top: 12px; }
  .cm-plan__detalle { grid-column: 1 / -1; grid-row: 3; }
  .cm-plan__nota { grid-column: 1 / -1; grid-row: 4; }
  .cm-plan__insignia { max-width: calc(100% - 24px); }
}

/* «¿Necesitas factura?»: una casilla con cara de enlace que despliega los
   datos de la empresa. Donde no hay :has(), se ve la casilla y todo abierto. */
.cm-factura { display: grid; gap: 16px; }
.cm-factura__abrir {
  position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--tinta-suave); cursor: pointer;
}
.cm-factura__abrir input { width: 18px; height: 18px; margin: 0; accent-color: var(--tinta); }
@supports selector(:has(*)) {
  .cm-factura__abrir input { position: absolute; opacity: 0; pointer-events: none; }
  .cm-factura__abrir span { text-decoration: underline; text-underline-offset: 3px; }
  .cm-factura__abrir span::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  }
  .cm-factura__abrir:has(input:checked) span::after { transform: rotate(-135deg); margin-bottom: -1px; }
  .cm-factura__abrir:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
  .cm-factura:has(input[name="documento"]:not(:checked)) .cm-empresa { display: none; }
}

/* El botón, el sello de pago seguro y la autorización (clickwrap): letra
   chica pero legible, sin recuadros. */
.cm-pago { display: grid; gap: 12px; }
.cm-boton--grande { min-height: 52px; font-size: 17px; font-weight: 700; }
.cm-seguro { font-size: 14px; color: var(--tinta-suave); text-align: center; text-wrap: balance; }
.cm-seguro svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.cm-legal { font-size: 13px; line-height: 1.5; color: var(--tinta-suave); text-align: center; }
.cm-legal a { color: var(--tinta-suave); }
.cm-legal strong { font-weight: 600; color: var(--tinta); }

/* Mi membresía */
.cm-datos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.cm-datos div { display: grid; gap: 2px; }
.cm-datos dt { font-size: 13px; color: var(--tinta-suave); }
.cm-datos dd { margin: 0; font-weight: 600; }
.cm-estado {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--amarillo-tinte); color: var(--tinta);
}
.cm-estado--activa, .cm-estado--pagado { background: var(--exito-tinte); color: var(--exito); }
.cm-estado--morosa, .cm-estado--rechazado, .cm-estado--terminada { background: var(--error-tinte); color: var(--error); }
.cm-tabla-envoltura { overflow-x: auto; }
.cm-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.cm-tabla th { text-align: left; font-weight: 600; font-size: 13px; color: var(--tinta-suave); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linea); }
.cm-tabla td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.cm-tabla tr:last-child td { border-bottom: 0; }
.cm-detalles summary { cursor: pointer; font-weight: 600; }
.cm-detalles[open] summary { margin-bottom: 16px; }

/* Páginas cortas (ingreso, estados, errores) */
.cm-centro { max-width: 440px; margin: 0 auto; }
.cm-centro .cm-card { padding: 32px 24px; }

/* Términos */
.cm-terminos h2 { margin-top: 32px; font-size: 20px; }
.cm-terminos ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }