/* 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. */
: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; }

/* 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; }
.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 { 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; }

/* Autorización de cargo */
.cm-autorizacion { background: var(--amarillo-tinte); border: 1px solid var(--linea-amarilla); border-radius: var(--radio); padding: 20px; display: grid; gap: 16px; }
.cm-resumen { font-size: 15px; }
.cm-resumen strong { font-weight: 700; }
.cm-casilla { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 15px; }
.cm-casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); }
.cm-aviso-validacion { font-size: 14px; color: var(--tinta-suave); text-align: center; }

/* 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; }