/* =============================================================================
   PLATAFORMA DE EVENTOS — composición de /plataforma-de-eventos.
   Depende de sistema.css y pagina.css.

   Lenguaje visual: LA PIEZA. Un evento es un objeto con perillas; cada
   movimiento amplía una y demuestra su consecuencia. M1 las presenta, M2
   cambia una y enseña el efecto en el formulario público, M3 amplía la
   política de QR hasta el motor de accesos.

   Regla de no colisión: aquí nada viaja. Sin conector continuo, sin flechas y
   sin pieza que recorra una línea — eso es EL CAMINO de
   /automatizacion-de-procesos. Lo que cambia es qué se abre y qué se enciende.

   Patrón de animación en toda la página: el estado en reposo de cada figura es
   su estado FINAL, y la animación lo construye con `backwards`. Si nunca llega
   a correr —sin JS, sin observer, con la sección fuera de pantalla— la figura
   sigue diciendo algo cierto en vez de quedarse muda.
   ========================================================================== */

/* Esta landing es la más densa del sitio: ocho movimientos, cada uno con su
   demostración. El ritmo vertical se aprieta respecto al resto del sitio para
   que quepan sin quitar ninguna prueba. Sólo afecta a esta página: la hoja no
   se carga en ninguna otra. */
.section { --s-section: clamp(3.5rem, 2rem + 4.8vw, 6.75rem); }

/* --- Cabeceras de sección ------------------------------------------------- */
.evt-cab { display: grid; gap: var(--s-5); }
.evt-cab .h2 { margin-top: var(--s-4); max-width: 20ch; }
.evt-cab .lead { max-width: 38ch; }
@media (min-width: 62rem) {
    .evt-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(3rem, 5vw, 5rem); align-items: end; }
}

.remate {
    margin-top: var(--s-6);
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 40ch;
}

/* --- Animaciones compartidas ---------------------------------------------- */
@keyframes evEntra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes evSale  { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evTarde { 0%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes evLee   { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* --- Selector compartido (M2 y M3): radios, no tabs -----------------------
   Sin JavaScript funciona igual y el teclado lo recorre como grupo. */
.motor__radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.motor__opt {
    padding: var(--s-3) var(--s-4);
    border: var(--hairline) solid var(--c-rule);
    border-radius: var(--r-1);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.motor__opt:hover { color: var(--c-ink); border-color: var(--c-ink-3); }
.motor__radio:checked + .motor__opt { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); }
.motor__radio:focus-visible + .motor__opt { outline: 2px solid var(--c-signal); outline-offset: 2px; }
.section--deep .motor__opt { color: var(--c-deep-ink-2); border-color: var(--c-deep-rule); }
.section--deep .motor__opt:hover { color: var(--c-deep-ink); border-color: var(--c-deep-ink-2); }
.section--deep .motor__radio:checked + .motor__opt { color: var(--c-deep); background: var(--c-deep-ink); border-color: var(--c-deep-ink); }

/* =============================================================================
   M1. HERO — lo que se configura por evento
   ========================================================================== */
.evt-hero { padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3rem, 1.8rem + 4.4vw, 6rem); }
.evt-hero__grid { display: grid; gap: var(--s-8); }
.evt-hero .display { margin-top: var(--s-6); max-width: 15ch; font-size: clamp(2.375rem, 1.1rem + 4.6vw, 4.375rem); }
.evt-hero .lead { margin-top: var(--s-6); max-width: 52ch; }
@media (min-width: 62rem) {
    .evt-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem); gap: clamp(3rem, 5vw, 5rem); align-items: center; }
}

/* Ocho piezas en reposo y sin orden asignado: la irregularidad no es
   decorativa, es el argumento —todavía no hay un evento que las coloque. */
.inv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.inv__p {
    display: grid;
    gap: var(--s-2);
    align-content: start;
    transform: translate(var(--dx, 0), var(--dy, 0));
    opacity: 0;
    transition: opacity var(--d-base) var(--e-out) calc(var(--i, 0) * 65ms);
}
.is-visible .inv__p { opacity: 1; }
.inv__p:nth-child(2n+1) { --dx: -3px; }
.inv__p:nth-child(3n)   { --dy: 7px; }
.inv__p:nth-child(4n)   { --dy: -6px; }

/* Cuadradas, no apaisadas: un rectángulo ancho con rótulo debajo se lee como
   un campo de formulario. Una pieza es una pieza. */
.inv__c { width: 2.5rem; height: 2.5rem; border: var(--hairline) solid var(--c-rule); }
.inv__p:nth-child(3n+2) .inv__c { background: var(--c-rule-soft); }
.inv__p:nth-child(4n+1) .inv__c { border-color: var(--c-ink-3); }
.inv__p:nth-child(6n+2) .inv__c { background: var(--c-ink-3); border-color: var(--c-ink-3); }
.inv__p--senal .inv__c { border-color: var(--c-signal); background: var(--c-signal); }

.inv__t {
    font-family: var(--f-mono);
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}
.inv__pie { margin-top: var(--s-6); color: var(--c-ink-3); }
.no-js .inv__p { opacity: 1; }

/* =============================================================================
   M2. CADA DECISIÓN CAMBIA EL EVENTO
   Asimetría: tres decisiones estrechas contra el evento entero. No hay panel
   espejo — dos superficies del mismo peso se comparan en vez de leerse como
   causa y efecto.

   Casillas independientes (no radios): se combinan, así que el visitante arma
   un evento en vez de elegir entre tres ejemplos. Ocho combinaciones, todas
   legibles, todas sin JavaScript.
   ========================================================================== */
.cfg { position: relative; border: 0; padding: 0; margin: var(--s-6) 0 0; min-width: 0; display: grid; gap: var(--s-7); }
.cfg__check { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
@media (min-width: 62rem) {
    .cfg { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-7) clamp(2.5rem, 5vw, 5rem); align-items: start; }
    .propaga { grid-column: 1 / -1; }
}

/* --- Las tres decisiones -------------------------------------------------- */
.cfg__cab { color: var(--c-ink-3); }
.cfg__decisiones { display: grid; gap: var(--s-5); align-content: start; }
.cfg__decisiones .pendiente { margin-top: var(--s-4); }

.dec { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-2) var(--s-4); cursor: pointer; align-items: start; }
.dec__caja { position: relative; width: 18px; height: 18px; border: var(--hairline) solid var(--c-ink-3); transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); }
.dec__caja::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 5px; height: 9px;
    border: solid var(--c-paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}
.dec__t { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink-3); transition: color var(--d-fast) var(--e-out); }
.dec__q { grid-column: 2; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink-3); }
.dec:hover .dec__caja { border-color: var(--c-ink); }

#dec-campo:checked      ~ .cfg__decisiones .dec[for="dec-campo"] .dec__caja,
#dec-categorias:checked ~ .cfg__decisiones .dec[for="dec-categorias"] .dec__caja,
#dec-paypal:checked     ~ .cfg__decisiones .dec[for="dec-paypal"] .dec__caja { background: var(--c-ink); border-color: var(--c-ink); }
#dec-campo:checked      ~ .cfg__decisiones .dec[for="dec-campo"] .dec__caja::after,
#dec-categorias:checked ~ .cfg__decisiones .dec[for="dec-categorias"] .dec__caja::after,
#dec-paypal:checked     ~ .cfg__decisiones .dec[for="dec-paypal"] .dec__caja::after { opacity: 1; }
#dec-campo:checked      ~ .cfg__decisiones .dec[for="dec-campo"] .dec__t,
#dec-categorias:checked ~ .cfg__decisiones .dec[for="dec-categorias"] .dec__t,
#dec-paypal:checked     ~ .cfg__decisiones .dec[for="dec-paypal"] .dec__t { color: var(--c-ink); }

#dec-campo:focus-visible      ~ .cfg__decisiones .dec[for="dec-campo"] .dec__caja,
#dec-categorias:focus-visible ~ .cfg__decisiones .dec[for="dec-categorias"] .dec__caja,
#dec-paypal:focus-visible     ~ .cfg__decisiones .dec[for="dec-paypal"] .dec__caja { outline: 2px solid var(--c-signal); outline-offset: 3px; }

/* --- La superficie del evento -------------------------------------------- */
.evento { background: #FFFFFF; border: var(--hairline) solid var(--c-rule); padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.evento__cab { color: var(--c-ink-3); margin-bottom: var(--s-3); }
.evento__grupo { margin-top: var(--s-4); color: var(--c-ink-3); }

.evento__campo { display: grid; gap: var(--s-2); padding: var(--s-1) 0 var(--s-3); font-size: var(--t-small); color: var(--c-ink); }
.evento__campo::after { content: ''; height: var(--hairline); background: var(--c-rule); }
.evento__campo--lista { position: relative; }
/* Cursor de lista desplegable, dibujado: nada de glifos que dependan de la fuente. */
.evento__campo--lista::before {
    content: '';
    position: absolute;
    right: 2px; top: 0.75em;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--c-ink-3);
}

.evento__unica { padding: var(--s-3) 0; font-size: var(--t-small); color: var(--c-ink-2); }
.evento__cats { display: none; gap: var(--s-1); }
.evento__cat { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; font-size: var(--t-small); border-bottom: var(--hairline) solid var(--c-rule-soft); }
.evento__cat i { width: 11px; height: 11px; border: var(--hairline) solid var(--c-ink-3); border-radius: 50%; }
.evento__cat b { font-weight: 400; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink-3); }

.evento__opcion { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-2) 0; font-size: var(--t-small); color: var(--c-ink); }
.evento__opcion i { width: 11px; height: 11px; border: var(--hairline) solid var(--c-ink-3); border-radius: 50%; }

.evento__btn { margin-top: var(--s-4); padding: var(--s-3) var(--s-5); justify-self: start; border: var(--hairline) solid var(--c-ink); background: var(--c-ink); color: var(--c-paper); font-size: var(--t-small); font-weight: 600; }

/* Apagado: el bloque no desaparece, se queda en gris con filete discontinuo,
   así la superficie no salta al encender y apagar. */
.evento__campo[data-dec], .evento__opcion[data-dec] { color: var(--c-ink-3); opacity: 0.5; }
.evento__campo[data-dec]::after { background: repeating-linear-gradient(to right, var(--c-rule) 0 4px, transparent 4px 8px); }
.evento__opcion[data-dec] i { border-style: dashed; }

#dec-campo:checked  ~ .evento .evento__campo[data-dec="campo"],
#dec-paypal:checked ~ .evento .evento__opcion[data-dec="paypal"] { color: var(--c-ink); opacity: 1; animation: evEntra 0.35s var(--e-out) both; }
#dec-campo:checked  ~ .evento .evento__campo[data-dec="campo"]::after { background: var(--c-signal); height: 2px; }
#dec-paypal:checked ~ .evento .evento__opcion[data-dec="paypal"] i { border-style: solid; border-color: var(--c-signal); background: var(--c-signal); }

/* Las categorías sí sustituyen a la línea única: el registro cambia de verdad,
   y que la superficie crezca es parte de la demostración. */
#dec-categorias:checked ~ .evento .evento__unica { display: none; }
#dec-categorias:checked ~ .evento .evento__cats { display: grid; animation: evEntra 0.35s var(--e-out) both; }

/* --- La propagación del campo -------------------------------------------- */
.propaga { padding-top: var(--s-5); border-top: var(--hairline) solid var(--c-rule); }
.propaga__cab { color: var(--c-ink-3); }
.propaga__destinos { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-6); }
.propaga__campo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--c-ink-3); margin-right: var(--s-3); transition: color var(--d-fast) var(--e-out); }
.propaga__d { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink-3); }
.propaga__d i { width: 9px; height: 9px; border: var(--hairline) solid var(--c-ink-3); }

#dec-campo:checked ~ .propaga .propaga__campo { color: var(--c-ink); }
#dec-campo:checked ~ .propaga .propaga__d { color: var(--c-ink-2); }
/* Las cuatro se encienden con el MISMO retardo: son el mismo dato en cuatro
   sitios, no un recorrido. */
#dec-campo:checked ~ .propaga .propaga__d i { background: var(--c-signal); border-color: var(--c-signal); animation: evEntra 0.4s var(--e-out) 0.55s backwards; }

/* =============================================================================
   M3. EL MOTOR DE ACCESOS
   Tres modalidades reales. La independencia de los accesos es el punto: una
   compra de tres unidades son TRES códigos distintos, y validar uno cambia
   solamente ese. Nunca un código con un contador dentro.
   ========================================================================== */
.acceso { position: relative; border: 0; padding: 0; margin: var(--s-6) 0 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Salto explícito: los selectores ocupan la primera línea y la demostración la
   segunda. No puede envolverse en un contenedor porque los radios tienen que
   seguir siendo hermanos de lo que gobiernan. */
.acceso__salto { flex: 1 0 100%; height: 0; }

.acceso__caso { display: none; flex: 1 0 100%; margin-top: var(--s-6); gap: var(--s-8); }
#ac-acreditacion:checked ~ .acceso__caso[data-modo="acreditacion"],
#ac-venta:checked        ~ .acceso__caso[data-modo="venta"],
#ac-sinqr:checked        ~ .acceso__caso[data-modo="sinqr"] { display: grid; }
@media (min-width: 62rem) {
    .acceso__caso { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); align-items: start; }
    .acceso__caso[data-modo="venta"] { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); }
}

.acceso__cab { color: var(--c-deep-ink-2); margin-bottom: var(--s-4); }
.acceso__recibe, .acceso__valida { display: grid; align-content: start; }
.acceso__que { margin-top: var(--s-5); display: grid; gap: var(--s-1); }
.acceso__que b { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--c-deep-ink); }
.acceso__que span { color: var(--c-deep-ink-2); }
.acceso__texto { margin-top: var(--s-5); color: var(--c-deep-ink-2); max-width: 48ch; }

/* La marca de código. No es escaneable y no simula una pantalla del producto. */
.codigo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 1;
    padding: var(--s-3);
    border: var(--hairline) solid var(--c-deep-rule);
    overflow: hidden;
}
/* Ancho fijo: si el código midiera el 100 % de su columna, la unidad con el
   rótulo más largo saldría más grande que las otras dos y parecería otra cosa.
   Las tres tienen que ser idénticas salvo por el dibujo y por su estado. */
.codigo--chico { width: 6.25rem; max-width: none; padding: var(--s-2); gap: 1px; }
.codigo--vacio { display: block; border-style: dashed; max-width: 11rem; }
.codigo__mod--on { background: var(--c-deep-ink); }

.acceso__lector { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c-signal); opacity: 0; }
.acceso.is-visible #ac-acreditacion:checked ~ .acceso__caso .acceso__lector { animation: evLee 1.15s var(--e-out) 0.7s 3; }
.acceso.is-visible #ac-venta:checked        ~ .acceso__caso .acceso__lector { animation: evLee 1.15s var(--e-out) 0.7s 1; }

.acceso__lecturas { display: grid; gap: var(--s-3); border-top: var(--hairline) solid var(--c-deep-rule); padding-top: var(--s-4); max-width: 24rem; }
.acceso__lecturas li { display: flex; gap: var(--s-5); align-items: baseline; }
.acceso__lecturas b { color: var(--c-signal); font-weight: 400; }
.acceso__lecturas span { color: var(--c-deep-ink-2); }
.acceso.is-visible .acceso__caso .acceso__lecturas li { animation: evEntra 0.35s var(--e-out) calc(1s + var(--i, 0) * 0.5s) backwards; }

.acceso__estado { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); color: var(--c-deep-ink); }
.acceso__marca { width: 9px; height: 9px; flex: none; background: var(--c-signal); }
.acceso__marca--off { background: var(--c-deep-rule); }

/* --- Tres unidades, tres códigos distintos, un solo consumo --------------- */
.unidades { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: start; }
.unidad { position: relative; width: 6.25rem; display: grid; gap: var(--s-2); align-content: start; }
.unidad__n { color: var(--c-deep-ink-2); }
.unidad__estado { display: flex; align-items: center; gap: var(--s-2); color: var(--c-deep-ink); font-size: 10px; }
/* Sólo la unidad validada se apaga. Las otras dos no cambian: ésa es toda la
   demostración. En reposo ya está apagada; la animación la enciende hacia
   atrás para que el estado final sea siempre legible. */
.unidad--usada .codigo { opacity: 0.42; }
.unidad--usada .unidad__estado--antes { position: absolute; opacity: 0; }
.acceso.is-visible #ac-venta:checked ~ .acceso__caso .unidad--usada .codigo            { animation: evSale  1.25s linear 0s; }
.acceso.is-visible #ac-venta:checked ~ .acceso__caso .unidad__estado--antes            { animation: evSale  1.25s linear 0s; }
.acceso.is-visible #ac-venta:checked ~ .acceso__caso .unidad__estado--despues          { animation: evTarde 1.25s linear 0s; }

/* --- Franja secundaria: modo acceso por día ------------------------------- */
.dia { flex: 1 0 100%; margin-top: var(--s-7); padding-top: var(--s-6); border-top: var(--hairline) solid var(--c-deep-rule); }
.dia__cab { color: var(--c-deep-ink-2); }
.dia__estados { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
@media (min-width: 48rem) {
    .dia__estados { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}
.dia__e {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border: var(--hairline) solid var(--c-deep-rule);
    color: var(--c-deep-ink-2);
    animation: evEntra 0.35s var(--e-out) calc(0.4s + var(--i, 0) * 0.25s) backwards;
}
.acceso:not(.is-visible) .dia__e { animation: none; }
.dia__e b { font-weight: 600; color: var(--c-deep-ink); }
.dia__marca { width: 9px; height: 9px; background: var(--c-signal); }
.dia__e--repetido { border-color: var(--c-signal); }
.dia__e--repetido .dia__marca { background: transparent; border: var(--hairline) solid var(--c-signal); }
.dia__texto { margin-top: var(--s-5); color: var(--c-deep-ink-2); max-width: 60ch; }


/* =============================================================================
   M4. EL RECIBO COMO OBJETO
   Un objeto central y estados que reaccionan. Dos controles independientes: el
   origen cambia sólo el bloque «pagado con»; el estado cambia el reembolso, el
   neto y el ACCESO. La fila de Acceso pesa deliberadamente más que la del CFDI:
   es la demostración de la sección.
   ========================================================================== */
.cobro { position: relative; border: 0; padding: 0; margin: var(--s-6) 0 0; min-width: 0; display: grid; gap: var(--s-4); }
/* Al retirarse la columna de evidencia, el recibo no se estira a todo el ancho:
   un objeto de 46rem se lee como documento; a 70rem se leería como tabla. */
@media (min-width: 62rem) {
    .cobro { max-width: 46rem; }
}

/* --- El recibo ------------------------------------------------------------ */
.recibo { background: #FFFFFF; border: var(--hairline) solid var(--c-rule); padding: var(--s-5); display: grid; gap: var(--s-3); }
.recibo__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-bottom: var(--s-3); border-bottom: var(--hairline) solid var(--c-rule); }
.recibo__folio { color: var(--c-ink); }
.recibo__k { color: var(--c-ink-3); }
.recibo__origen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: auto; }
.recibo__origen .wa__opt { border-color: var(--c-rule); color: var(--c-ink-2); }
.recibo__origen .wa__opt:hover { color: var(--c-ink); border-color: var(--c-ink-3); }

/* Sello de cancelado: el recibo sigue siendo legible, lo que cambia es que
   está marcado. La consecuencia la carga la fila de Acceso. */
.recibo__sello { display: none; padding: 2px var(--s-3); background: var(--c-ink); color: var(--c-paper); letter-spacing: 0.08em; }

.recibo__lineas { display: grid; }
.recibo__l { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding: var(--s-1) 0; font-size: var(--t-small); color: var(--c-ink); }
.recibo__l b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
.recibo__l--total { border-top: var(--hairline) solid var(--c-rule); margin-top: var(--s-2); padding-top: var(--s-3); font-weight: 600; }
.recibo__l--total b { color: var(--c-ink); font-weight: 600; }

/* --- Pagado con: cuatro bloques IGUALES ----------------------------------
   Anchos idénticos a propósito. Si fueran proporcionales parecerían el reparto
   de un importe, y aquí lo que se dice es «cuatro métodos en un recibo». */
.recibo__pago { display: grid; gap: var(--s-3); }
.metodos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.metodos--uno { display: none; grid-template-columns: minmax(0, 15rem); }
.metodo { display: grid; gap: var(--s-1); font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink-2); }
.metodo i { height: 18px; background: var(--c-ink); }
.recibo__nota { display: none; color: var(--c-ink-3); }

#or-caja:checked  ~ .recibo .recibo__nota[data-or="caja"],
#or-linea:checked ~ .recibo .recibo__nota[data-or="linea"],
#or-link:checked  ~ .recibo .recibo__nota[data-or="link"] { display: block; }
#or-linea:checked ~ .recibo .metodos:not(.metodos--uno),
#or-link:checked  ~ .recibo .metodos:not(.metodos--uno) { display: none; }
#or-linea:checked ~ .recibo .metodos--uno,
#or-link:checked  ~ .recibo .metodos--uno { display: grid; }
#or-caja:checked  ~ .recibo .recibo__origen .wa__opt[for="or-caja"],
#or-linea:checked ~ .recibo .recibo__origen .wa__opt[for="or-linea"],
#or-link:checked  ~ .recibo .recibo__origen .wa__opt[for="or-link"] { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); }

/* --- Cierre: reembolso y neto -------------------------------------------- */
.recibo__cierre { display: grid; gap: var(--s-1); border-top: var(--hairline) solid var(--c-rule); padding-top: var(--s-3); }
.recibo__l--reembolso { display: none; color: var(--c-signal-ink); }
.recibo__l--reembolso b { color: var(--c-signal-ink); }
.recibo__l--neto { font-weight: 600; }
.recibo__neto { color: var(--c-ink); font-weight: 600; }
.recibo__neto--cancelado { display: none; color: var(--c-ink-3); }

/* --- Las dos salidas: el CFDI informa, el acceso pesa --------------------- */
.recibo__cfdi { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink-3); }
.recibo__cfdi i { width: 8px; height: 8px; flex: none; background: var(--c-ink-3); }

.acceso-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); padding-top: var(--s-3); border-top: var(--hairline) solid var(--c-rule); }
.acceso-fila__k { color: var(--c-ink-3); }
.acceso-fila__v { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--c-ink); }
.acceso-fila__v i { width: 13px; height: 13px; flex: none; background: var(--c-signal); }
.acceso-fila__v--revocado { display: none; color: var(--c-ink-3); }
.acceso-fila__v--revocado i { background: transparent; border: var(--hairline) solid var(--c-ink-3); }

/* --- Estados del recibo --------------------------------------------------- */
#es-reembolso:checked ~ .recibo .recibo__l--reembolso { display: flex; animation: evEntra 0.3s var(--e-out) both; }
#es-reembolso:checked ~ .recibo .recibo__neto { color: var(--c-signal-ink); }

#es-cancelado:checked ~ .recibo .recibo__sello { display: block; }
/* Legibles, no apagadas: lo que marca el estado es el sello y, sobre todo, el
   acceso revocado. */
#es-cancelado:checked ~ .recibo .recibo__lineas,
#es-cancelado:checked ~ .recibo .recibo__pago { color: var(--c-ink-2); }
#es-cancelado:checked ~ .recibo .recibo__neto { display: none; }
#es-cancelado:checked ~ .recibo .recibo__neto--cancelado { display: inline; }
#es-cancelado:checked ~ .recibo .acceso-fila__v--vigente { display: none; }
#es-cancelado:checked ~ .recibo .acceso-fila__v--revocado { display: flex; }

.cobro__acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#es-cobrado:checked   ~ .cobro__acciones .motor__opt[for="es-cobrado"],
#es-reembolso:checked ~ .cobro__acciones .motor__opt[for="es-reembolso"],
#es-cancelado:checked ~ .cobro__acciones .motor__opt[for="es-cancelado"] { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); }
#es-cobrado:focus-visible   ~ .cobro__acciones .motor__opt[for="es-cobrado"],
#es-reembolso:focus-visible ~ .cobro__acciones .motor__opt[for="es-reembolso"],
#es-cancelado:focus-visible ~ .cobro__acciones .motor__opt[for="es-cancelado"],
#or-caja:focus-visible      ~ .recibo .recibo__origen .wa__opt[for="or-caja"],
#or-linea:focus-visible     ~ .recibo .recibo__origen .wa__opt[for="or-linea"],
#or-link:focus-visible      ~ .recibo .recibo__origen .wa__opt[for="or-link"] { outline: 2px solid var(--c-signal); outline-offset: 2px; }

.cobro__consec { display: none; color: var(--c-ink-2); max-width: 52ch; }
#es-cobrado:checked   ~ .cobro__consec[data-es="cobrado"],
#es-reembolso:checked ~ .cobro__consec[data-es="reembolso"],
#es-cancelado:checked ~ .cobro__consec[data-es="cancelado"] { display: block; }

.cobro__evidencia { display: grid; gap: var(--s-4); align-content: start; }

/* =============================================================================
   M6. UN PARTICIPANTE. TODO EL CONTEXTO.
   Dos controles independientes, porque los mecanismos son distintos:
     · la ficha (institución)  gobierna SÓLO la segmentación
     · el grupo de la campaña  gobierna SÓLO la campaña
   Directorio y Conversación no dependen de ninguno: son la persona, no una
   consulta sobre la persona. Que no se muevan mientras las otras dos cambian
   es la mitad del argumento, así que aquí NO hay ninguna sincronía animada.
   ========================================================================== */
.wa { position: relative; border: 0; padding: 0; margin: var(--s-6) 0 0; min-width: 0; display: grid; gap: var(--s-6); }
.wa__canal { color: var(--c-deep-ink-2); padding-bottom: var(--s-4); border-bottom: var(--hairline) solid var(--c-deep-rule); }

/* --- La ficha: un participante, dos datos ------------------------------- */
.wa__ficha { justify-self: center; width: 100%; max-width: 26rem; border: var(--hairline) solid var(--c-deep-rule); padding: var(--s-5); display: grid; gap: var(--s-2); }
.wa__cab { color: var(--c-deep-ink-2); }
.wa__nombre { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--c-deep-ink); }
.wa__k { margin-top: var(--s-3); color: var(--c-deep-ink-2); }
/* Institución es un campo personalizado real del evento, pero no es criterio
   de segmentación: se muestra como dato, no como control. */
.wa__dato { font-size: var(--t-small); color: var(--c-deep-ink); }

.wa__opts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.wa__opt {
    padding: var(--s-2) var(--s-3);
    border: var(--hairline) solid var(--c-deep-rule);
    border-radius: var(--r-1);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-deep-ink-2);
    cursor: pointer;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.wa__opt:hover { color: var(--c-deep-ink); border-color: var(--c-deep-ink-2); }
#ca-socio:checked   ~ .wa__ficha .wa__opt[for="ca-socio"],
#ca-nosocio:checked   ~ .wa__ficha .wa__opt[for="ca-nosocio"],
#gr-conf:checked ~ .wa__superficies .wa__opt[for="gr-conf"],
#gr-tall:checked ~ .wa__superficies .wa__opt[for="gr-tall"] { color: var(--c-deep); background: var(--c-deep-ink); border-color: var(--c-deep-ink); }
#ca-socio:focus-visible   ~ .wa__ficha .wa__opt[for="ca-socio"],
#ca-nosocio:focus-visible   ~ .wa__ficha .wa__opt[for="ca-nosocio"],
#gr-conf:focus-visible ~ .wa__superficies .wa__opt[for="gr-conf"],
#gr-tall:focus-visible ~ .wa__superficies .wa__opt[for="gr-tall"] { outline: 2px solid var(--c-signal); outline-offset: 2px; }

/* --- Las cuatro superficies ---------------------------------------------- */
.wa__superficies { display: grid; gap: var(--s-6); }
@media (min-width: 48rem)  { .wa__superficies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wa__sup { display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--s-3); border-top: var(--hairline) solid var(--c-deep-rule); padding-top: var(--s-4); }
.wa__t { color: var(--c-deep-ink); }
.wa__nota { color: var(--c-deep-ink-2); line-height: 1.5; }
.wa__opts--sup { margin-top: 0; }

/* Subgrid: los cuatro rótulos, las cuatro notas, los cuatro huecos de captura
   y los cuatro estados quedan a la misma altura aunque midan distinto. Sin
   esto las superficies se leen desalineadas y parecen cuatro cosas sueltas. */
@media (min-width: 68rem) {
    .wa__superficies { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: var(--s-5); }
    .wa__sup { grid-row: span 4; grid-template-rows: subgrid; }
}

.wa__estado { display: flex; align-items: baseline; gap: var(--s-3); color: var(--c-deep-ink); line-height: 1.5; }
.wa__estado i { width: 9px; height: 9px; flex: none; background: var(--c-signal); position: relative; top: 1px; }
.wa__estado--fuera { display: none; color: var(--c-deep-ink-2); }
.wa__estado--fuera i { background: transparent; border: var(--hairline) solid var(--c-deep-ink-2); }

/* Cada superficie responde a su propio control, y sólo a ése. */
#ca-nosocio:checked   ~ .wa__superficies [data-sup="segmento"] .wa__estado--dentro,
#gr-tall:checked ~ .wa__superficies [data-sup="campana"] .wa__estado--dentro { display: none; }
#ca-nosocio:checked   ~ .wa__superficies [data-sup="segmento"] .wa__estado--fuera,
#gr-tall:checked ~ .wa__superficies [data-sup="campana"] .wa__estado--fuera { display: flex; }

.wa .remate { margin-top: var(--s-5); max-width: 46ch; }

/* =============================================================================
   ICONOGRAFÍA FUNCIONAL
   Familia única con el sprite del sitio: 24×24, trazo 1.5, monocroma, heredando
   `currentColor`. Ningún icono es decorativo: cada uno distingue una función que
   el texto por sí solo no separa. El ámbar no entra aquí salvo como estado.
   ========================================================================== */
/* Icono dentro de una etiqueta de opción: pequeño y alineado a la palabra. */
.wa__opt .ico { width: 13px; height: 13px; margin-right: var(--s-2); vertical-align: -2px; }
/* Icono de línea del recibo: marca la función —factura, devolución— sin rótulo. */
.recibo__cfdi .ico { width: 15px; height: 15px; margin-right: var(--s-3); vertical-align: -3px; color: var(--c-ink-3); }
.recibo__l--reembolso .ico { width: 15px; height: 15px; margin-right: var(--s-3); vertical-align: -3px; color: var(--c-signal-ink); }

/* --- M3 · el ciclo de vida de un código consumible ------------------------
   Tres estados, no un párrafo más. El ámbar cae sólo en el rechazo: es el
   punto de atención del movimiento y no se reparte entre los tres. */
.ciclo { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--hairline) solid var(--c-deep-rule); }
.ciclo__e { display: flex; align-items: center; gap: var(--s-3); color: var(--c-deep-ink-2); }
.ciclo__e .ico { width: 16px; height: 16px; flex: none; }
.ciclo__e--bloq { color: var(--c-signal); }
.ciclo__e--bloq .mono { color: var(--c-signal-ink); }
.section--deep .ciclo__e--bloq .mono { color: var(--c-signal); }

/* --- M6 · identidad de cada superficie -----------------------------------
   Sustituye al hueco de captura. Es la marca de la función, no una miniatura
   de pantalla: por eso va suelta sobre el fondo, sin caja ni recuadro. */
.wa__marca { display: flex; align-items: center; min-height: 2.25rem; }
.wa__marca .ico { width: 26px; height: 26px; color: var(--c-deep-ink-2); }

/* =============================================================================
   EVIDENCIA — retirada de la página (se conserva por si vuelve otra landing)
   Nunca compiten en tamaño con la figura principal de su sección.
   ========================================================================== */
.evidencia { margin-top: var(--s-6); display: grid; gap: var(--s-5); max-width: 46rem; }
@media (min-width: 48rem) {
    .evidencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pendiente {
    margin-top: var(--s-7);
    max-width: 34rem;
    padding: var(--s-6);
    border: var(--hairline) dashed var(--c-rule);
    display: grid;
    gap: var(--s-3);
}
.pendiente--mini { margin-top: 0; max-width: none; padding: var(--s-4); gap: var(--s-1); }
.pendiente--mini .pendiente__que { font-size: var(--t-small); font-weight: 500; letter-spacing: 0; }
.pendiente__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pendiente__clave { padding: 2px var(--s-2); background: var(--c-signal); color: var(--c-deep); letter-spacing: 0.08em; }
.pendiente__etq { color: var(--c-ink-3); }
.pendiente__que { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pendiente__nota { color: var(--c-ink-3); }
.section--deep .pendiente { border-color: var(--c-deep-rule); }
.section--deep .pendiente__etq, .section--deep .pendiente__nota { color: var(--c-deep-ink-2); }

/* =============================================================================
   M5. ACREDITACIÓN EN SITIO
   Dos demostraciones asimétricas sobre el mismo registro.

   A · ASISTIDA — dos dispositivos y una transmisión real: el teléfono lee y
   envía el código; la computadora lo recibe, busca y muestra al participante.
   Es el único sitio de la página donde algo viaja entre dos objetos, porque
   aquí sí viaja: el teléfono no acredita ni imprime, sólo transmite.

   B · AUTOSERVICIO — la pantalla del módulo con sus tres desenlaces reales.
   Los textos son literales de `automatizado.php`.
   ========================================================================== */
.asistida, .autoserv { position: relative; border: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-3); }
.asistida { margin: var(--s-5) 0 0; }
.autoserv { margin: var(--s-4) 0 0; padding-top: var(--s-5); border-top: var(--hairline) solid var(--c-rule); }

.asistida__cab, .autoserv__cab { display: grid; gap: var(--s-1); }
.asistida__k, .autoserv__k { color: var(--c-signal-ink); }
.asistida__t, .autoserv__t { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--c-ink); max-width: 44ch; }

.asistida__acciones, .autoserv__acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- A · los dos dispositivos -------------------------------------------- */
.dispositivos { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 56rem) {
    .dispositivos { grid-template-columns: 9.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

.movil { display: grid; gap: var(--s-3); justify-items: start; }
.movil__cab { color: var(--c-ink-3); }
/* El visor: la página móvil real no enseña nada más que la cámara. */
.movil__visor {
    position: relative;
    width: 100%;
    max-width: 9rem;
    aspect-ratio: 9 / 16;
    background: var(--c-deep);
    border: var(--hairline) solid var(--c-deep-rule);
    overflow: hidden;
}
.movil__mira { position: absolute; inset: 22% 14%; border: 2px solid var(--c-signal); }
.movil__haz { position: absolute; left: 14%; right: 14%; top: 22%; height: 2px; background: var(--c-signal); opacity: 0; }
.movil__estado { display: flex; align-items: center; gap: var(--s-2); color: var(--c-ink-3); }
.movil__estado--ok { display: none; color: var(--c-ink); }

.equipo { display: grid; gap: var(--s-2); background: #FFFFFF; border: var(--hairline) solid var(--c-rule); padding: var(--s-4) var(--s-5); }
.equipo__cab { color: var(--c-ink-3); }
.equipo__busqueda { display: grid; gap: var(--s-2); }
.equipo__k { color: var(--c-ink-3); }
.equipo__campo { display: block; min-height: 2.25rem; padding: var(--s-2) 0; border-bottom: var(--hairline) solid var(--c-rule); font-family: var(--f-mono); font-size: var(--t-small); color: var(--c-ink); }
.equipo__campo--lleno { display: none; border-bottom-color: var(--c-signal); }
.equipo__vacio { padding: var(--s-4) 0; color: var(--c-ink-3); border-top: var(--hairline) dashed var(--c-rule); }
.equipo__ficha { display: none; gap: var(--s-1); padding-top: var(--s-4); border-top: var(--hairline) solid var(--c-rule); }
.equipo__nombre { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--c-ink); }
.equipo__qr, .equipo__badge { color: var(--c-ink-3); }
.equipo__badge { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); color: var(--c-ink-2); }

/* Después del escaneo: el teléfono confirma el envío y la computadora ya
   tiene el código en su campo de búsqueda y al participante en pantalla. */
#lc-despues:checked ~ .dispositivos .movil__estado--listo { display: none; }
#lc-despues:checked ~ .dispositivos .movil__estado--ok { display: flex; }
#lc-despues:checked ~ .dispositivos .movil__haz { animation: evLee 1.1s var(--e-out) 0.2s 2; }
#lc-despues:checked ~ .dispositivos .equipo__campo:not(.equipo__campo--lleno) { display: none; }
#lc-despues:checked ~ .dispositivos .equipo__campo--lleno { display: block; animation: evEntra 0.3s var(--e-out) 0.55s backwards; }
#lc-despues:checked ~ .dispositivos .equipo__vacio { display: none; }
#lc-despues:checked ~ .dispositivos .equipo__ficha { display: grid; animation: evEntra 0.35s var(--e-out) 0.8s backwards; }

#lc-antes:checked  ~ .asistida__acciones .motor__opt[for="lc-antes"],
#lc-despues:checked ~ .asistida__acciones .motor__opt[for="lc-despues"],
#ks-ok:checked     ~ .autoserv__acciones .motor__opt[for="ks-ok"],
#ks-pago:checked   ~ .autoserv__acciones .motor__opt[for="ks-pago"],
#ks-gafete:checked ~ .autoserv__acciones .motor__opt[for="ks-gafete"] { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); }
#lc-antes:focus-visible  ~ .asistida__acciones .motor__opt[for="lc-antes"],
#lc-despues:focus-visible ~ .asistida__acciones .motor__opt[for="lc-despues"],
#ks-ok:focus-visible     ~ .autoserv__acciones .motor__opt[for="ks-ok"],
#ks-pago:focus-visible   ~ .autoserv__acciones .motor__opt[for="ks-pago"],
#ks-gafete:focus-visible ~ .autoserv__acciones .motor__opt[for="ks-gafete"] { outline: 2px solid var(--c-signal); outline-offset: 2px; }

.asistida__pie { color: var(--c-ink-2); max-width: 60ch; }
.autoserv__pie { color: var(--c-ink-3); line-height: 1.55; }


/* --- B · la pantalla del módulo ------------------------------------------ */
.kiosco { background: var(--c-deep); border: var(--hairline) solid var(--c-deep-rule); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); min-height: 8rem; align-content: start; }
.kiosco__marca { color: var(--c-deep-ink-2); }
.kiosco__estado { display: none; gap: var(--s-3); }
#ks-ok:checked     ~ .kiosco [data-ks="ok"],
#ks-pago:checked   ~ .kiosco [data-ks="pago"],
#ks-gafete:checked ~ .kiosco [data-ks="gafete"] { display: grid; }

.kiosco__badge { display: flex; align-items: center; gap: var(--s-3); color: var(--c-signal); }
.kiosco__nombre { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--c-deep-ink); }
.kiosco__botones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-1); }
.kiosco__btn { padding: var(--s-2) var(--s-4); border: var(--hairline) solid var(--c-deep-rule); color: var(--c-deep-ink-2); font-size: var(--t-small); font-weight: 600; }
.kiosco__btn--primario { background: var(--c-signal); border-color: var(--c-signal); color: var(--c-deep); }
.kiosco__titulo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--c-deep-ink); }
.kiosco__msg { color: var(--c-deep-ink-2); max-width: 46ch; }

/* La columna de evidencia desapareció con las capturas: el autoservicio vuelve
   a una sola columna y la pantalla del módulo se queda con todo el ancho. */