/* COAMUN v11 · D1: los detalles del 10 fuera de Comités. Va al final (después de r10/v10b.css); cada bloque dice su D1.n.
   Mundo: papel, tinta, rojo de acento, lacre y sello (DESIGN.md). Solo transform y opacity se animan; sombras estáticas. */

:root {
  --golpe: cubic-bezier(.2, .9, .3, 1.25);   /* DESIGN.md · motion.golpe: el sello y el placard al llegar */
}

/* --- D1.1 · el botón de Registro es lacre de verdad ---
   La cera del charco (lacre-charco.webp, la misma del verbo) estirada en la píldora: brillo arriba a la izquierda, panza
   oscura abajo, un canto de 2 px y una sombra quieta en el papel. Abierto («Regístrate»): cera recién vertida, brillante y
   en relieve. Cerrado («Abre el 18 de enero», aria-disabled): cera fría, mate y hundida, sin brillo ni canto; la letra
   crema sigue ≥ 4.5:1 y el cursor dice que no. */
.carta-accion .boton-lacre {
  --cera:
    radial-gradient(120% 150% at 22% 8%, rgba(255, 236, 238, .2), rgba(255, 236, 238, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(70, 0, 14, .30)),
    url("../lacre-charco.webp") 50% 58% / 132% 420% no-repeat,
    #b20f2a;
  position: relative;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--cera);
  color: #fff7f4;
  font-size: 16px;
  letter-spacing: .01em;
  text-shadow: 0 -1px 0 rgba(80, 0, 14, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 205, 210, .55),
    inset 0 -3px 4px rgba(70, 0, 12, .42),
    inset 0 0 0 1px rgba(110, 6, 22, .5),
    0 2px 0 #7a0a1b,
    0 10px 16px -8px rgba(90, 10, 20, .55);
}
.carta-accion .boton-lacre:hover { background: var(--cera); }

.carta-accion .boton-lacre[aria-disabled="true"] {
  --cera:
    linear-gradient(rgba(96, 84, 88, .6), rgba(96, 84, 88, .6)),
    url("../lacre-rebaba.webp") 50% 50% / 128% 380% no-repeat,
    #6e2731;
  color: #f7ece6;
  text-shadow: none;
  cursor: not-allowed;
  box-shadow:
    inset 0 2px 5px rgba(36, 0, 8, .55),
    inset 0 -1px 0 rgba(255, 225, 225, .16),
    0 1px 0 rgba(255, 255, 255, .55);
}
/* El lugar del sello que todavía no se estampa: un contorno punteado adentro de la cera fría. */
.carta-accion .boton-lacre[aria-disabled="true"]:not(:focus-visible) {
  outline: 1px dashed rgba(247, 236, 230, .5);
  outline-offset: -6px;
}

/* --- D1.2 · el pie firma: sello en relieve seco y firma de la Secretaría General ---
   El sello oficial gofrado en el papel (sello-gofrado.webp, de entrega/coamun-10/v11/d1/gofrado.py: solo luz y sombra,
   sirve sobre cualquier gris de la luz final) y, a su lado, una rúbrica en tinta sobre el filete y el cargo. Sin nombre
   propio: firma la Secretaría General. Celular: el sello arriba y la firma abajo; compu: uno junto al otro. */
.pie-colofon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.estampa--pie {
  --giro: 0deg;
  position: relative;
  left: auto;
  top: auto;
  width: 96px;
  margin: 0;
}
.estampa--pie .estampa-sombra,
.estampa--pie .estampa-onda { display: none; }
.pie-firma {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.pie-rubrica {
  display: block;
  width: 168px;
  height: auto;
  margin-bottom: -6px;
  color: #1d1e24;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-3deg);
}
.pie-rubrica-raya { stroke-width: 1.2; }
.pie-cargo {
  min-width: 210px;
  padding-top: 7px;
  border-top: 1px solid rgba(29, 30, 36, .45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2f3136;
  text-align: center;
}
.pie-cargo .sin-corte { white-space: nowrap; }

@media (min-width: 768px) {
  .pie-colofon {
    flex-direction: row;
    gap: 22px;
    margin-bottom: 18px;
  }
  .estampa--pie { width: 104px; }
  .pie-firma { align-items: flex-start; }
  .pie-rubrica { width: 190px; margin-left: -6px; }
}

/* --- D1.3 · portada en celular: fecha y sede en un marbete estampado ---
   En compu el marbete no existe (display: contents): la fila de siempre. En celular, fecha y sede quedan dentro de un
   sello de goma en tinta lacre (doble filete, un poco girado, como estampado a mano); «Entrada gratis» y la cuenta de
   días van debajo, en una sola fila. Contraste: #a40d26 sobre el papel ≥ 6:1. */
.hero-marbete { display: contents; }

@media (max-width: 480px) {
  .hero-datos {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .hero-datos-punto { display: inline; }
  .hero-marbete {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    padding: 9px 20px 8px;
    border: 2px solid #a40d26;
    border-radius: 4px;
    outline: 1px solid rgba(164, 13, 38, .75);
    outline-offset: -6px;
    color: #a40d26;
    background: var(--papel-fibra), rgba(255, 255, 255, .55);
    transform: rotate(-2deg);
    line-height: 1.2;
  }
  .hero-marbete > span:first-child {
    font-family: var(--titulo);
    font-size: 26px;
    letter-spacing: .02em;
    color: #8e0b21;
  }
  .hero-marbete .hero-datos-punto { display: none; }
  .hero-marbete > span:last-child {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  /* El «·» que sigue al marbete se vuelve el salto de renglón: «Entrada gratis · días» va en la fila de abajo. */
  .hero-marbete + .hero-datos-punto {
    display: block;
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    font-size: 0;
  }
}

/* --- D1.4 · Dudas: cada sobre lleva su matasellos ---
   matasello.svg (la fecha del modelo, 11 mar 2027, y «COAMUN IV · COAPA · CDMX» en el aro, con sus ondas) en tinta,
   dentro del frente del bolsillo, a la derecha; cada sobre con otro giro y otra altura, como pasados a mano por la
   máquina. Es imagen (aria-hidden): no es texto que se lea. La pregunta le deja su lugar. */
.dudas-matasello {
  position: absolute;
  right: 8px;
  bottom: 9px;
  width: 84px;
  aspect-ratio: 132 / 72;
  background: url("../matasello.svg") center / contain no-repeat;
  opacity: .9;
  transform: rotate(var(--mata-giro, -6deg)) translateY(var(--mata-y, 0));
  pointer-events: none;
}
.dudas-lista--sobres .dudas-item:nth-child(6n + 2) .dudas-matasello { --mata-giro: 5deg; --mata-y: -3px; }
.dudas-lista--sobres .dudas-item:nth-child(6n + 3) .dudas-matasello { --mata-giro: -2deg; --mata-y: 2px; }
.dudas-lista--sobres .dudas-item:nth-child(6n + 4) .dudas-matasello { --mata-giro: 8deg; --mata-y: -1px; }
.dudas-lista--sobres .dudas-item:nth-child(6n + 5) .dudas-matasello { --mata-giro: -10deg; --mata-y: 1px; }
.dudas-lista--sobres .dudas-item:nth-child(6n) .dudas-matasello { --mata-giro: 3deg; --mata-y: -2px; }
.dudas-lista--sobres .dudas-sobre-texto { right: 98px; }

@media (min-width: 768px) {
  .dudas-matasello { width: 96px; right: 12px; bottom: 7px; }
  .dudas-lista--sobres .dudas-sobre-texto { right: 116px; }
}

/* --- D1.8 · el sello que presiona ---
   app.js (iniciarPresiona) pone .presiona al tocar un botón o enlace-botón fuera de Comités y .suelta al soltarlo:
   baja a .96 en 90 ms y vuelve a 1 con la curva golpe (rebota apenas, como el sello que se levanta). Es una animación
   de transform: no pisa las transiciones de color de cada botón. Movimiento reducido: no se pone. */
@keyframes presiona { to { transform: scale(.96); } }
@keyframes suelta { from { transform: scale(.96); } to { transform: none; } }
.presiona { animation: presiona 90ms cubic-bezier(.3, 0, .5, 1) forwards; }
.suelta { animation: suelta 380ms var(--golpe); }
@media (prefers-reduced-motion: reduce) {
  .presiona,
  .suelta { animation: none; }
}

/* --- D1.6 · Calendario en compu: la línea y sus fechas llenan el ancho ---
   La órbita pasa a la izquierda (app.js, medir: frente .44 → .2 del ancho) y las fechas crecen un punto para llegar
   cerca de la columna del taco. Medido a 1440: blanco a cada lado de la línea ≤ 15 % del contenedor. */
@media (min-width: 1181px) {
  .calendario--orbita .calendario-titulo { font-size: 24px; line-height: 1.25; }
  .calendario--orbita .calendario-fecha { font-size: 13px; }
}

/* --- D1b · la carta de delegación vuelve a salir de su sobre, y el sobre se retira ---
   (D1.4 había quitado el sobre para que no quedara vacío; Juan tenía la salida de la carta de 10.) Con la carta fuera y
   su lacre caído (app.js pone .sobre--retirado ~1.2 s después de abrir), el dorso, el frente, la solapa y el lacre del
   sobre bajan 24 px y se apagan en 400 ms; al terminar quedan ocultos (visibility) y el frente `inert`. Solo `translate`
   y `opacity` (la solapa conserva su `transform` volteado: `translate` se aplica antes y la baja 24 px en la página). La
   caja no cambia de alto (CLS 0). Al cerrarse con el scroll, el sobre vuelve en 220 ms, antes de que la carta entre.
   Con movimiento reducido no hay salida ni retiro: la carta ya está fuera y el sobre ausente. */
.sobre-carta-dorso,
.sobre-carta-frente,
.sobre-carta .dudas-sobre-lacre {
  transition: translate 220ms var(--ease-sobre), opacity 220ms ease-out, visibility 0s;
}
.sobre-carta .dudas-sobre-solapa {
  transition: transform 300ms var(--ease-giro) 120ms, translate 220ms var(--ease-sobre), opacity 220ms ease-out, visibility 0s;
}
.sobre-carta.sobre--abierto .dudas-sobre-solapa {
  transition: transform 420ms var(--ease-giro) 90ms, translate 220ms var(--ease-sobre), opacity 220ms ease-out, visibility 0s;
}
.sobre--retirado .sobre-carta-dorso,
.sobre--retirado .sobre-carta-frente,
.sobre-carta.sobre--retirado .dudas-sobre-solapa,
.sobre--retirado .dudas-sobre-lacre {
  translate: 0 24px;
  opacity: 0;
  visibility: hidden;
  transition: translate 400ms cubic-bezier(.32, 0, .67, 0), opacity 400ms ease-in, visibility 0s linear 400ms;
}
@media (prefers-reduced-motion: reduce) {
  .sobre-carta-dorso,
  .sobre-carta-frente,
  .sobre-carta .dudas-sobre-solapa,
  .sobre-carta.sobre--abierto .dudas-sobre-solapa,
  .sobre-carta.sobre--retirado .dudas-sobre-solapa,
  .sobre-carta .dudas-sobre-lacre { transition: none !important; }
}