/* 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.

   Desde el 03-11-2026 estas plantillas se ven como la cáscara de React del
   foro (comunidad/frontend/src/layouts/cascara.css), para que nadie sienta que
   cambió de página al entrar a lo de pagos: fondo gris cálido, tarjetas y
   barra blanquecinas, botones píldora y la página al 75 % del ancho. Es un
   cambio solo visual, con el visto bueno de Claudiano. */
:root {
  --fondo: #f2f0ea;
  --superficie: #fffefb;
  --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;
  --radio-pildora: 999px;
}

/* Lo que no es un token del design system: el gris de los botones secundarios
   y los redondos, y el ancho de la página (el mismo cálculo de la cáscara). */
body.cm {
  --gris-boton: #efece4;
  --gris-boton-hover: #e5e1d6;
  --sombra-menu: 0 12px 32px rgba(23, 21, 15, 0.14);
  --ancho-pagina: max(75%, min(100% - 32px, 1000px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Como en la cáscara de React (comunidad/frontend/src/estilos.css): sin hueco para la barra de
   desplazamiento, que aparece solo si hace falta (Benjamín, 06-11); las filas centradas se
   corren la mitad de su ancho para no moverse de lado. La barra es la sobria: fina,
   redondeada y sin flechas. */
.cm-top__fila, .cm-main { position: relative; left: calc((100vw - 100%) / 2); }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-button { display: none; }
html::-webkit-scrollbar-thumb {
  border: 4px solid transparent; border-radius: 999px;
  background: rgba(23, 21, 15, 0.28) padding-box;
}
html::-webkit-scrollbar-thumb:hover { background-color: rgba(23, 21, 15, 0.45); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: rgba(23, 21, 15, 0.3) transparent; }
}
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;
}
/* Los enlaces, el foco y los títulos de estas plantillas. No alcanzan a la cabecera de React que
   montan «Mi membresía» y la confirmación de cancelar (`.cabecera-react`, src/cabecera.jsx): ahí
   mandan los estilos de Astryx, como en las pantallas de React. `:where()` no suma especificidad. */
a:where(:not(.cabecera-react *)) { color: var(--tinta); text-underline-offset: 3px; }
a:hover:where(:not(.cabecera-react *)) { color: var(--tinta-hover); }
:focus-visible:where(:not(.cabecera-react *)) { outline: 3px solid var(--foco); outline-offset: 3px; }
:is(h1, h2, h3):where(:not(.cabecera-react *)) { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
h1:where(:not(.cabecera-react *)) { font-size: clamp(30px, 5vw, 40px); font-weight: 800; }
h2:where(:not(.cabecera-react *)) { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
h3:where(:not(.cabecera-react *)) { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
.cm-solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Cabecera, como la de la cáscara: arriba la marca, el buscador al medio y los
   botones redondos a la derecha; abajo, las pestañas centradas. La de quien
   todavía no entra (alta, ingreso, términos) es solo la primera fila, con la
   marca y «Ingresar» o la foto. */
.cm-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.cm-top__fila {
  width: var(--ancho-pagina); margin: 0 auto; padding: 10px 0 6px;
  display: grid; align-items: center; column-gap: 24px;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 480px) minmax(max-content, 1fr);
}
.cm-top__fila--simple { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; }
.cm-marca {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  text-decoration: none; color: var(--tinta);
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
}
.cm-marca span { white-space: nowrap; }
.cm-marca img { display: block; width: 32px; height: 32px; }
.cm-top__acciones { justify-self: end; display: flex; align-items: center; gap: 8px; }

/* El buscador: la misma píldora del de React. */
.cm-buscador {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid var(--linea); border-radius: var(--radio-pildora);
  background: var(--superficie); color: var(--tinta-suave);
}
.cm-buscador:focus-within { border-color: var(--tinta); }
.cm-buscador svg { flex: none; }
.cm-buscador input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: 400 15px/1.4 var(--texto); color: var(--tinta);
}

/* Los botones redondos (la lupa del celular, Mensajes, la campana) y la foto. */
.cm-redondo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--gris-boton); color: var(--tinta); cursor: pointer; list-style: none;
}
.cm-redondo:hover { background: var(--gris-boton-hover); color: var(--tinta); }
.cm-redondo--lupa { display: none; }
.cm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 4px; border-radius: 50%;
  background: var(--linea); color: var(--tinta); cursor: pointer; list-style: none;
  font: 700 14px/1 var(--texto); letter-spacing: 0.02em; user-select: none;
}
.cm-avatar:hover { background: var(--linea-amarilla); }
summary.cm-avatar::-webkit-details-marker { display: none; }

/* Los menús sin JS: un <details> que abre un panel bajo su botón. Con el
   atributo name, abrir uno cierra los otros. */
.cm-menu { position: relative; }
.cm-menu__panel {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-menu);
}
.cm-menu__panel { width: 220px; padding: 6px; display: grid; gap: 2px; }
.cm-menu__panel form { margin: 0; }
.cm-menu__item {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radio-chico);
  background: none; text-align: left; text-decoration: none; cursor: pointer;
  font: 400 15px/1.3 var(--texto); color: var(--tinta);
}
.cm-menu__item:hover { background: var(--gris-boton); color: var(--tinta); }
.cm-menu__item[aria-current="page"] { background: var(--amarillo-tinte); font-weight: 600; }
.cm-menu__linea { height: 1px; margin: 4px 6px; border: 0; background: var(--linea); }

/* Las pestañas: los mismos tamaños de las de React (17,5 px y 40 px de alto),
   centradas y, si no caben, con desplazamiento lateral. La de la parte que
   aún no existe lleva la llave amarilla en su píldora. */
.cm-pestanas { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cm-pestanas::-webkit-scrollbar { display: none; }
.cm-pestanas__in {
  display: flex; justify-content: center; gap: 4px;
  width: max-content; min-width: 100%; padding: 0 16px;
  /* Como en `cascara.css`: el ancho de la barra va en el relleno izquierdo, no en `left`. */
  padding-left: calc(16px + 100vw - 100%);
}
.cm-pestana {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  font: 500 17.5px/1 var(--texto); color: var(--tinta-suave); text-decoration: none; white-space: nowrap;
}
.cm-pestana:hover { color: var(--tinta); }
.cm-pestana[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.cm-pestana[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--tinta);
}
.cm-llave {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 20px; border-radius: var(--radio-pildora);
  background: var(--amarillo-tinte); color: var(--amarillo-texto);
}
.cm-llave svg { display: block; }

/* En el celular la caja del buscador no cabe: la lupa lleva a la pantalla del
   buscador, como en React. */
@media (max-width: 720px) {
  .cm-top__fila { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .cm-buscador { display: none; }
  .cm-redondo--lupa { display: inline-flex; }
  .cm-top__acciones { gap: 4px; }
}
@media (max-width: 440px) {
  .cm-marca { font-size: 16px; gap: 8px; }
  .cm-marca span { white-space: normal; line-height: 1.1; }
  .cm-marca img { width: 28px; height: 28px; }
  .cm-redondo, .cm-avatar { width: 36px; height: 36px; }
}

/* Contenido: la misma columna de la cáscara (75 % del ancho). */
.cm-main { flex: 1; width: var(--ancho-pagina); margin: 0 auto; padding: 32px 0 64px; }
.cm-pie {
  border-top: 1px solid var(--linea); padding: 24px 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.06em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: 8px;
}
.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 { max-width: 760px; margin-inline: auto; }
.cm-pila-grande > * + * { margin-top: 28px; }

/* Botones: píldoras. El principal, amarillo; el secundario, gris claro sin
   borde; el de peligro (cancelar), con la letra roja. */
.cm-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: var(--radio-pildora);
  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, .cm-boton--suave { background: var(--gris-boton); color: var(--tinta); }
.cm-boton--borde:hover, .cm-boton--suave:hover { background: var(--gris-boton-hover); color: var(--tinta); }
.cm-boton--peligro { background: var(--superficie); border-color: var(--linea); color: var(--error); }
.cm-boton--peligro:hover { background: var(--error-tinte); border-color: #f4c7c3; color: var(--error); }
.cm-boton--chico { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.cm-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cm-acciones 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;
}

/* Tarjetas y avisos: blanquecinas sobre el fondo gris, como las del foro. */
.cm-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px;
}
.cm-card > * + * { margin-top: 14px; }
.cm-card > h2 + * { margin-top: 16px; }
.cm-mensajes { margin-bottom: 24px; display: grid; gap: 8px; }
.cm-aviso {
  padding: 12px 16px; border-radius: 12px;
  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: var(--radio-pildora);
  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: 12px;
}
.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: var(--radio-pildora);
  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); }

/* ==========================================================================
   Página de venta de /unirme/ (propuesta B, Claudiano, 04-11-2026)
   Con contenido configurado en el panel (portada, descripción, tarjetas),
   /unirme/ es una página como la de Skool. En el celular, una columna en el
   orden del HTML: la portada, el nombre y el primer párrafo; el alta; «¿Qué
   encuentras dentro?» y «Elegir mi plan». Desde 960 px, dos columnas, con el
   alta fija a la derecha al bajar. Sin contenido no se usa: /unirme/ sigue con
   .cm-alta-pagina. Bloque propio: solo agrega reglas (.cm--venta y .cm-venta*)
   y no edita las de arriba.
   ========================================================================== */
html:has(.cm-venta) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.cm-venta) { scroll-behavior: auto; }
}
.cm--venta .cm-main { padding-top: 20px; padding-bottom: 40px; }

.cm-venta { display: grid; gap: 20px; max-width: 640px; margin: 0 auto; }

/* La portada, el nombre, la fila de datos y la descripción */
.cm-venta__portada {
  display: block; width: 100%; aspect-ratio: 1.89; object-fit: cover;
  border-radius: 16px; background: var(--amarillo-tinte); margin-top: 16px;
}
.cm-venta__titulo { font-size: 32px; line-height: 1.06; }
.cm-venta__datos {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 14px; color: var(--tinta-suave);
}
.cm-venta__datos li { display: inline-flex; align-items: center; gap: 6px; }
.cm-venta__datos svg { flex: none; width: 16px; height: 16px; }
.cm-venta__avatar {
  flex: none; width: 22px; height: 22px; border-radius: var(--radio-pildora);
  display: inline-grid; place-items: center;
  background: var(--amarillo-tinte); color: var(--amarillo-texto);
  font-size: 11px; font-weight: 700;
}
.cm-venta__texto { font-size: 16px; line-height: 1.55; }
.cm-venta__datos + .cm-venta__texto { margin-top: 14px; }

/* El alta: la tarjeta de siempre, con el formulario intacto */
.cm-venta__alta { scroll-margin-top: 16px; }
.cm-venta__alta > .cm-aviso { margin-bottom: 16px; }
.cm-venta .cm-alta.cm-card { border-radius: 20px; padding: 20px 16px; gap: 20px; }
.cm-venta .cm-alta .cm-grupo:first-of-type > legend { font-size: 22px; font-weight: 800; }
/* «Tus datos» no va a la vista, como en la maqueta: los campos se explican
   solos. Sigue en el HTML para los lectores de pantalla. */
.cm-venta .cm-alta .cm-grupo + .cm-grupo > legend {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cm-venta .cm-seguro { font-size: 13px; }
.cm-venta .cm-boton--grande {
  min-height: 54px; font-size: 18px; font-weight: 600;
  box-shadow: 0 14px 30px -12px rgba(184, 128, 0, 0.55);
}
.cm-venta__cerrada.cm-card { border-radius: 20px; padding: 24px 20px; }

/* ¿Qué encuentras dentro? Un solo ícono para todas las tarjetas: los ítems
   son texto libre. */
.cm-venta__dentro { display: flex; flex-direction: column; gap: 12px; }
.cm-venta__subtitulo { font-size: 22px; font-weight: 800; }
.cm-venta__resto { display: grid; gap: 12px; }
.cm-venta__incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-venta__incluye li {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 15px; line-height: 1.45;
}
.cm-venta__incluye svg { flex: none; width: 20px; height: 20px; color: var(--amarillo-texto); }
.cm-venta__cierre { margin-top: 2px; font-size: 15px; line-height: 1.55; }
/* Sube al alta (#elige-tu-plan), sin JS. Oscuro: la acción amarilla es
   «Unirme». */
.cm-venta__elegir {
  margin-top: 6px; width: 100%; min-height: 54px; border-radius: 12px;
  background: var(--tinta); color: var(--fondo); font-size: 17px;
}
.cm-venta__elegir:hover { background: var(--tinta-hover); color: var(--fondo); }

@media (min-width: 560px) {
  .cm-venta__incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-venta .cm-alta.cm-card { padding: 24px; }
}

/* Escritorio: la descripción a la izquierda y el alta a la derecha, fija al
   bajar. «¿Qué encuentras dentro?» sigue en la columna izquierda. */
@media (min-width: 960px) {
  /* La cabecera del #210 usa .cm-top__fila (antes .cm-top__in): las dos, para
     que la marca quede alineada con la página de venta. */
  .cm--venta .cm-top__in,
  .cm--venta .cm-top__fila { max-width: 1168px; padding-left: 24px; padding-right: 24px; }
  .cm--venta .cm-main { max-width: 1168px; padding: 40px 24px 72px; }
  .cm-venta {
    max-width: none; column-gap: 40px; row-gap: 0;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "intro alta" "dentro alta";
    grid-template-rows: auto 1fr;
  }
  .cm-venta__intro { grid-area: intro; }
  .cm-venta__alta { grid-area: alta; align-self: start; position: sticky; top: 24px; }
  .cm-venta__dentro { grid-area: dentro; margin-top: 24px; gap: 14px; }

  .cm-venta__portada { border-radius: 20px; margin-top: 20px; }
  .cm-venta__titulo { font-size: 44px; }
  .cm-venta__datos { margin-top: 18px; gap: 10px 22px; font-size: 16px; }
  .cm-venta__datos li { gap: 8px; }
  .cm-venta__datos svg { width: 18px; height: 18px; }
  .cm-venta__avatar { width: 26px; height: 26px; font-size: 12px; }
  .cm-venta__texto { font-size: 18px; line-height: 1.6; }
  .cm-venta__datos + .cm-venta__texto { margin-top: 24px; }
  /* El resto de los párrafos va pegado al primero y antes del subtítulo
     (en el HTML, el del celular, va después). */
  .cm-venta__resto { order: -1; gap: 14px; margin: -10px 0 10px; }
  .cm-venta__incluye { gap: 12px; }
  .cm-venta__incluye li { padding: 16px 18px; border-radius: 16px; font-size: 16px; }
  .cm-venta__incluye svg { width: 22px; height: 22px; }
  .cm-venta__cierre { margin-top: 4px; font-size: 17px; }
  .cm-venta__elegir { display: none; }

  .cm-venta .cm-alta.cm-card,
  .cm-venta__cerrada.cm-card {
    border-radius: 28px; padding: 28px 24px;
    box-shadow: 0 25px 50px -12px rgba(23, 21, 15, 0.12);
  }
  .cm-venta .cm-alta .cm-grupo:first-of-type > legend { font-size: 24px; }
  .cm-venta .cm-boton--grande { min-height: 56px; font-size: 19px; }
  /* En la columna de 360 px, los planes uno bajo el otro, como en el celular
     (desde 520 px, en la página sin contenido, van lado a lado). */
  .cm-venta .cm-planes { grid-auto-flow: row; gap: 16px; }
  .cm-venta .cm-plan {
    grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; padding: 16px;
  }
  .cm-venta .cm-plan input { grid-row: 1 / span 2; }
  .cm-venta .cm-plan__precio { grid-column: 3; grid-row: 1 / span 2; text-align: right; margin-top: 0; }
  .cm-venta .cm-plan__detalle { grid-column: 2; grid-row: 2; }
  .cm-venta .cm-plan__nota { grid-column: 2 / -1; grid-row: 3; }
}
/* ======================= fin de la página de venta ======================= */

/* Mi membresía, con la maqueta de Benjamín (04-11-2026, card 17thtp0r62r):
   una columna de tarjetas separadas por 20 px y, en medio, la tarjeta, el
   cambio de plan y el WhatsApp en una grilla de dos por fila (en el celular,
   una; si queda una sola, va a lo ancho). Dentro de cada tarjeta, todo en
   columna con el espacio de la maqueta y sin márgenes. Cambio solo visual. */
@media (max-width: 720px) {
  .cm--membresia .cm-main { padding: 20px 0 40px; }
}
.cm-membresia { display: flex; flex-direction: column; gap: 20px; }
.cm-membresia > *, .cm-membresia__grilla > * { min-width: 0; }
.cm-membresia__cabeza { display: flex; flex-direction: column; gap: 4px; }
.cm-membresia__cabeza .cm-eyebrow { margin-bottom: 0; }
.cm-membresia h1 { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.cm-membresia__grilla {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.cm-membresia .cm-card:not(.cm-gestionar) { display: flex; flex-direction: column; gap: 14px; }
.cm-membresia .cm-card:not(.cm-gestionar) > * + * { margin-top: 0; }
.cm-membresia .cm-card:not(.cm-gestionar) > form { margin: 0; }
.cm-membresia .cm-card.cm-membresia__plan { gap: 16px; }
.cm-membresia .cm-membresia__grilla > .cm-card { gap: 12px; }
.cm-membresia .cm-card--destacada { border-color: var(--linea-amarilla); }
.cm-membresia .cm-aviso { font-size: 15px; line-height: 1.5; }
.cm-membresia__bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cm-membresia__bloque form { margin: 0; }
.cm-membresia__texto { font-size: 16px; line-height: 1.55; }
.cm-membresia__parrafo { font-size: 15px; line-height: 1.55; }
.cm-membresia__linea { height: 1px; margin: 0; border: 0; background: var(--linea); }

/* «Tu plan»: los datos en columnas que se acomodan al ancho. */
.cm-datos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; }
.cm-datos div { display: grid; gap: 4px; align-content: start; justify-items: start; }
.cm-datos dt { font-size: 13px; line-height: 1.3; color: var(--tinta-suave); }
.cm-datos dd { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; }
.cm-estado {
  display: inline-block; padding: 3px 12px; border-radius: var(--radio-pildora); font-size: 14px; font-weight: 600;
  line-height: 1.4; 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); }

/* «Tarjeta»: la marca y los últimos cuatro, con el dibujo de una tarjeta. */
.cm-membresia__tarjeta { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.cm-membresia__chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 30px; border-radius: 6px; background: var(--gris-boton); color: var(--tinta);
}
.cm-membresia__chip svg { display: block; }

/* Los formularios de la página (WhatsApp y boleta o factura): etiquetas de
   14 px, campos de 44 px y los datos de la empresa en una grilla que se
   acomoda al ancho. La letra de los campos queda en 16 px: con menos, el
   iPhone hace zoom al escribir. */
.cm-membresia .cm-form { gap: 14px; }
.cm-membresia .cm-whatsapp { gap: 12px; }
.cm-membresia .cm-campo { gap: 6px; }
.cm-membresia .cm-whatsapp .cm-campo { gap: 12px; }
.cm-membresia .cm-campo > label { font-size: 14px; font-weight: 600; }
.cm-membresia .cm-campo input[type="text"], .cm-membresia .cm-campo input[type="email"],
.cm-membresia .cm-campo input[type="tel"], .cm-membresia .cm-campo select {
  min-height: 44px; padding: 8px 12px; border-radius: var(--radio-chico);
}
.cm-membresia .cm-opcion { gap: 2px; padding: 14px 16px 14px 44px; border-radius: 12px; }
.cm-membresia .cm-opcion input { left: 16px; top: 17px; width: 18px; height: 18px; }
.cm-membresia .cm-opcion__titulo { line-height: 1.35; }
.cm-membresia .cm-opcion .cm-chico { line-height: 1.35; }
.cm-campos { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* «Tus cobros» */
.cm-tabla-envoltura { overflow-x: auto; }
.cm-tabla { width: 100%; min-width: 560px; 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-membresia .cm-tabla th { padding: 8px 10px; }
.cm-membresia .cm-tabla td { padding: 12px 10px; vertical-align: middle; }
.cm-membresia .cm-tabla tr:last-child td { border-bottom: 1px solid var(--linea); }
.cm-membresia .cm-tabla .cm-estado { padding: 2px 10px; font-size: 13px; }
.cm-detalles summary { cursor: pointer; font-weight: 600; }
.cm-detalles[open] summary { margin-bottom: 16px; }

/* «Gestionar mi membresía» (Mi membresía): un <details> que guarda el cancelar
   fuera de la vista. Sin JS. El resumen se ve como un enlace discreto, con una
   flecha dibujada con bordes que gira al abrir; el alto de 44 px es el área
   táctil mínima en el celular. Adentro, el texto y el botón para cancelar,
   neutro como «Cambiar tarjeta» (sin rojo, Claudiano, 04-11-2026). */
.cm-gestionar > summary {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  list-style: none; cursor: pointer; font-weight: 600; color: var(--tinta-suave);
}
.cm-gestionar > summary::-webkit-details-marker { display: none; }
.cm-gestionar > summary::before {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.cm-gestionar > summary:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.cm-gestionar[open] > summary::before { transform: rotate(45deg); }
.cm-gestionar__panel { padding-top: 16px; border-top: 1px solid var(--linea); }
.cm-gestionar__panel > * + * { margin-top: 12px; }
.cm-gestionar__panel p { font-size: 15px; line-height: 1.55; }
.cm-gestionar__panel form { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .cm-gestionar > summary::before { transition: none; }
}

/* ==========================================================================
   «¿Seguro que quieres cancelar?» (Claudiano, 04-11-2026)
   El cuadro de diálogo de Mi membresía (un <dialog> nativo que abre
   static/comunidad/mi_membresia.js, el segundo JS de estas plantillas
   después de unirme.js) y la página de confirmación sin JS, con el mismo
   contenido: título, descripción y dos botones. Lo llamativo es seguir
   (Claudiano, 04-11-2026): «No, seguir en la comunidad» es el amarillo
   (.cm-boton) y «Sí, cancelar mi membresía», el gris neutro
   (.cm-boton--borde), sin rojo. Bloque propio: solo agrega reglas
   (.cm-dialogo* y .cm-confirmar*).
   ========================================================================== */
.cm-dialogo {
  width: min(100% - 32px, 560px); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--linea); border-radius: 20px;
  background: var(--superficie); color: var(--tinta);
  box-shadow: 0 25px 50px -12px rgba(23, 21, 15, 0.28);
}
.cm-dialogo::backdrop { background: rgba(23, 21, 15, 0.5); }
/* Con el cuadro abierto, la página de atrás no se desplaza. */
html:has(.cm-dialogo[open]) { overflow: hidden; }
.cm-dialogo__caja, .cm-confirmar { display: flex; flex-direction: column; gap: 16px; }
.cm-dialogo__caja { padding: 24px; }
.cm-confirmar.cm-card { padding: 28px 24px; border-radius: 20px; }
.cm-confirmar.cm-card > * + * { margin-top: 0; }
.cm-confirmar .cm-eyebrow { margin-bottom: -12px; }
.cm-confirmar__titulo { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.cm-confirmar__texto { display: grid; gap: 10px; font-size: 16px; line-height: 1.55; }
.cm-confirmar__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.cm-confirmar__acciones form { margin: 0; }
@media (max-width: 520px) {
  .cm-dialogo__caja { padding: 20px; }
  .cm-confirmar__titulo { font-size: 24px; }
  .cm-confirmar__acciones { flex-direction: column; align-items: stretch; }
  .cm-confirmar__acciones .cm-boton { width: 100%; }
}
.cm-confirmar-pagina { max-width: 560px; margin: 0 auto; }
/* ================== fin de «¿Seguro que quieres cancelar?» ================== */

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

/* Términos: texto largo, en una columna que se lee cómoda. */
.cm-terminos { max-width: 760px; margin: 0 auto; }
.cm-terminos h2 { margin-top: 32px; font-size: 20px; }
.cm-terminos ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ==========================================================================
   El botón «Unirme» cargando (Claudiano, 04-11-2026)
   Al enviar el alta, unirme.js deshabilita el botón, le pone aria-busy y lo
   cambia a «Te estamos llevando a Flow…»: el servidor crea el alta en Flow y
   redirige, y eso tarda unos segundos. El spinner es el ::before del botón;
   con prefers-reduced-motion queda quieto (el texto ya dice lo que pasa).
   Bloque propio: solo agrega reglas y no edita las de arriba.
   ========================================================================== */
.cm-boton[aria-busy="true"] {
  background: var(--amarillo); color: var(--en-amarillo); cursor: progress;
  /* Menos margen a los lados: en la columna angosta del escritorio, el texto
     con el spinner no cabía en una línea. */
  padding-inline: 12px;
}
.cm-boton[aria-busy="true"]::before {
  content: ""; flex: none; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: cm-girar 0.8s linear infinite;
}
@keyframes cm-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cm-boton[aria-busy="true"]::before { animation: none; }
}
/* Con el envío en camino, el plan y los datos ya no se tocan (lo que se vea
   cambiar no cambiaría lo enviado). */
.cm-alta--cargando .cm-grupo, .cm-alta--cargando .cm-factura { pointer-events: none; }
/* La región que avisa a un lector de pantalla: no se ve ni ocupa lugar. */
.cm-unirme__estado {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Páginas de venta con video (/unirme/<número>/, 04-11-2026, comunidad.ventas)
   La página de venta de /unirme/ con un video en el lugar de la portada
   (plantilla comunidad/ventas/video.html). El video va con la proporción de
   Loom, 16:9. Sin video, un recuadro neutro del mismo tamaño. Bloque propio:
   solo agrega reglas .cm-venta-video* y .cm-venta-previa, y no edita las de
   arriba.
   ========================================================================== */
.cm-venta-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; background: var(--tinta); margin-top: 16px;
}
.cm-venta-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.cm-venta-video--vacio {
  display: grid; place-items: center; padding: 24px; text-align: center;
  background: var(--superficie); border: 1px dashed var(--linea-amarilla);
  color: var(--tinta-suave); font-size: 14px;
}
.cm-venta-previa { margin-bottom: 16px; }
@media (min-width: 960px) {
  .cm-venta-video { border-radius: 20px; margin-top: 20px; }
}

/* ==========================================================================
   Mi membresía igual al resto de la web (card 17thtp0r62r, 06-11-2026)
   Las pantallas de membresía (Mi membresía y la confirmación de la
   cancelación) se veían distintas de las de React. Este bloque lleva a ellas
   las medidas reales de la cáscara y de Astryx, medidas con getComputedStyle
   en el foro, el perfil, la clasificación y el inicio: cabecera (marca de
   17 px, botones redondos de 36 px, pestañas de peso 400 con la activa
   subrayada en amarillo), tarjetas de 20 px de relleno, títulos de Bricolage
   en 24 y 18 px con peso 600, botones de 32 px con radio de 10 px, y la
   columna con 24 px arriba y 48 px abajo. Bloque propio: todo va bajo
   .cm--membresia (las dos plantillas de membresía), así que /unirme/, el
   ingreso y lo demás no cambian. Cambio solo visual: ni textos ni HTML.
   ========================================================================== */
body.cm.cm--membresia {
  --gris-boton: rgba(0, 0, 0, 0.06);
  --gris-boton-hover: rgba(0, 0, 0, 0.1);
}

/* Cabecera: la marca en 17 px; la fila, con el mismo aire de la cáscara. */
.cm--membresia .cm-marca { font-size: 17px; line-height: 24px; }
.cm--membresia .cm-redondo { width: 36px; height: 36px; }
.cm--membresia .cm-avatar { width: 40px; height: 40px; font-size: 14px; }
@media (max-width: 440px) {
  /* React solo deja que el nombre pase a dos líneas bajo 420 px: la marca no se achica. */
  .cm--membresia .cm-marca { font-size: 17px; gap: 12px; }
  .cm--membresia .cm-marca img { width: 32px; height: 32px; }
  .cm--membresia .cm-redondo { width: 36px; height: 36px; }
  .cm--membresia .cm-avatar { width: 40px; height: 40px; }
  .cm--membresia .cm-marca span { white-space: nowrap; line-height: inherit; }
}
@media (max-width: 420px) {
  /* Y ahí, con el interlineado de la cáscara (24 px): la cabecera estática mide lo mismo que la
     de React que la reemplaza (src/cabecera.jsx), y la página no salta al montarse. */
  .cm--membresia .cm-marca span { white-space: normal; }
}

/* Pestañas: letra normal, un fondo suave de 32 px al pasar el mouse y la
   activa en negrita con su raya amarilla (la de Astryx: 2 px, sobre la línea). */
.cm--membresia .cm-pestana { font-weight: 400; padding: 0 12px; }
.cm--membresia .cm-pestana::before {
  content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: 10px; background: transparent;
}
.cm--membresia .cm-pestana:hover::before { background: rgba(0, 0, 0, 0.05); }
.cm--membresia .cm-pestana > * { position: relative; }
.cm--membresia .cm-pestana[aria-current="page"] { font-weight: 600; }
.cm--membresia .cm-pestana[aria-current="page"]::after {
  left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 9999px; background: var(--amarillo);
}

/* Contenido y pie: la misma columna y el mismo pie de la cáscara. */
.cm--membresia .cm-main { padding: 24px 0 48px; }
.cm--membresia .cm-pie a { text-decoration: none; }

/* Títulos: Bricolage 24 px/600 en la página y 18 px/600 en las tarjetas. */
.cm--membresia :is(h1, h2, h3):where(:not(.cabecera-react *)) { letter-spacing: normal; font-weight: 600; }
.cm-membresia h1, .cm--membresia .cm-confirmar__titulo { font-size: 24px; line-height: 1.33; }
.cm--membresia .cm-card h2 { font-size: 18px; line-height: 1.4; }
.cm--membresia .cm-eyebrow { font-size: 13px; }

/* Tarjetas: 20 px de relleno, 14 px de radio, 20 px entre una y otra. */
.cm--membresia .cm-card { padding: 20px; }
.cm--membresia .cm-confirmar.cm-card { padding: 20px; border-radius: var(--radio); }
.cm--membresia .cm-card:not(.cm-gestionar),
.cm-membresia .cm-card.cm-membresia__plan { gap: 12px; }
.cm--membresia .cm-datos dd { font-size: 16px; }

/* Botones: los de Astryx. 32 px de alto, 14 px/500, radio de 10 px y sin
   borde; el principal en amarillo y el secundario en el gris translúcido.
   El «sm» (--chico) de 28 px. */
.cm--membresia .cm-boton {
  min-height: 32px; padding: 6px 12px; border: 0; border-radius: var(--radio-chico);
  font: 500 14px/20px var(--texto);
}
.cm--membresia .cm-boton--chico { min-height: 28px; padding: 4px 12px; }
/* El «Guardar» del WhatsApp es el secundario, como en el inicio. */
.cm--membresia .cm-whatsapp .cm-boton { background: var(--gris-boton); color: var(--tinta); }
.cm--membresia .cm-whatsapp .cm-boton:hover { background: var(--gris-boton-hover); }

/* Campos: los de React (radio de 12 px, relleno de 10 x 12 y fondo blanco). */
.cm-membresia .cm-campo input[type="text"], .cm-membresia .cm-campo input[type="email"],
.cm-membresia .cm-campo input[type="tel"], .cm-membresia .cm-campo select {
  padding: 10px 12px; border-radius: 12px; background: #fff;
}
.cm-membresia .cm-campo > label { font-size: 14px; }

/* La tarjeta del cuadro de «¿Seguro que quieres cancelar?»: la de las ventanas
   del foro (14 px de radio, sombra de 40 px y 20 px de relleno). */
.cm--membresia .cm-dialogo { border-radius: var(--radio); box-shadow: 0 10px 40px rgba(23, 21, 15, 0.25); }
.cm--membresia .cm-dialogo__caja { padding: 20px; }
.cm--membresia .cm-dialogo .cm-confirmar__titulo { font-size: 20px; line-height: 1.4; }
.cm--membresia .cm-dialogo::backdrop { background: rgba(23, 21, 15, 0.4); }
.cm--membresia .cm-confirmar__acciones { gap: 8px; }
@media (max-width: 520px) {
  .cm--membresia .cm-dialogo__caja { padding: 20px; }
  .cm--membresia .cm-confirmar__titulo { font-size: 24px; }
  .cm--membresia .cm-dialogo .cm-confirmar__titulo { font-size: 20px; }
}
@media (max-width: 720px) {
  .cm--membresia .cm-main { padding: 24px 0 48px; }
}
/* ================ fin de «Mi membresía igual al resto» ================ */