/* COAMUN v11 · G2: encimados y marbete. Va al final (después de r11/d2.css); cada bloque dice su G2.n.
   Mismo mundo: papel, tinta, lacre y el estampado de goma del marbete de la portada (D1.3). Nada se anima nuevo. */

/* --- G2.2 · «Faltan N días» con presencia (celular e iPad, ≤ 1180 px) ---
   Juan: «se ve demasiado sencillo y encimado». La cuenta se vuelve un sello de goma en tinta lacre, el mismo estampado
   del marbete de la portada (doble filete, un poco girado, fibra de papel): «FALTAN» en versalitas, la cifra grande en
   la letra de la portada y «DÍAS PARA COAMUN IV» abajo. Va en la columna que deja el taco, sin pasar de su ancho; la
   lista de fechas empieza debajo del más bajo de los dos (app.js, medir). En compu (≥ 1181) queda como Juan la aprobó. */
@media (max-width: 1180px) {
  .calendario--orbita .cal-hud:not([hidden]) {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    box-sizing: border-box;
    margin: 4px 0 10px 2px;
    padding: 8px 14px 7px;
    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);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-2deg);
  }
  .calendario--orbita .cal-hud-cifra {
    margin: 0;
    color: #8e0b21;
    margin-top: 3px;
    font-size: 44px;
    letter-spacing: .02em;
    vertical-align: 0;
  }
  /* «días para COAMUN IV» va junto, en un renglón debajo de la cifra (la palabra se une al texto que la sigue). */
  .calendario--orbita .cal-hud [data-cal-dias-palabra] { display: contents; }
}
@media (max-width: 1180px) {
  .calendario--orbita .cal-hud:not([hidden]) { width: max-content; max-width: calc(100% - var(--taco, 200px) - 22px); }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .calendario--orbita .cal-hud:not([hidden]) { padding: 10px 22px 9px; font-size: 13px; }
  .calendario--orbita .cal-hud-cifra { font-size: 64px; }
}

/* --- G2.1 · Calendario en celular: cada fecha y su punto se leen sobre el globo ---
   Juan: «puntos que no se ven, todo encimado». El punto de cada fecha crece a 11 px con un aro de papel (se despega de
   los meridianos y costas del globo que pasan detrás); el de las ya recorridas baja de #9a9ca3 (2.5:1) a #6e7178
   (≥ 3:1, como pide un elemento gráfico). La letra lleva un halo de papel quieto (text-shadow sin blur grande, se pinta
   una vez con su capa): las líneas del globo ya no cruzan las letras. Solo ≤ 767 px. */
@media (max-width: 767px) {
  .calendario--orbita .calendario-item::before {
    left: -6px;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    box-shadow: 0 0 0 3px #f2f2f3;
  }
  .calendario--orbita .calendario-item--recorrido::before { background: #6e7178; }
  .calendario--orbita .calendario-item--taco::before { box-shadow: 0 0 0 3px #f2f2f3, 0 0 0 4px var(--rojo); }
  .calendario--orbita .calendario-fecha,
  .calendario--orbita .calendario-titulo {
    text-shadow: 0 0 2px #f2f2f3, 0 0 2px #f2f2f3, 0 0 4px #f2f2f3;
  }
}

/* --- G2.7 · el marbete «11 y 12 mar 2027 · Prepa 5, Coapa» en todos los tamaños ---
   A Juan le encantó en celular (D1.3). En iPad, MacBook y compu sustituye la fila de fecha y sede: el mismo sello de
   goma (doble filete en lacre, −2°, fibra de papel), con su escala propia; «Entrada gratis · N días» va debajo en su
   renglón. Mismas reglas que D1.3 (r11/d1.css), ahora fuera del @media de celular. */
@media (min-width: 481px) {
  .hero-datos {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    margin-bottom: 30px;
  }
  .hero-marbete {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 26px 9px;
    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: 30px;
    letter-spacing: .02em;
    color: #8e0b21;
  }
  .hero-marbete .hero-datos-punto { display: none; }
  .hero-marbete > span:last-child {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .hero-marbete + .hero-datos-punto {
    display: block;
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    font-size: 0;
  }
}
@media (min-width: 1181px) and (min-height: 900px) {
  .hero-marbete { padding: 11px 30px 10px; }
  .hero-marbete > span:first-child { font-size: 34px; }
  .hero-marbete > span:last-child { font-size: 13px; }
}
/* La línea de la sede baja 4 px más en celular también (la caja de la letra de la fecha la tocaba: 4 px, sin tinta). */
@media (max-width: 480px) { .hero-marbete > span:last-child { margin-top: 7px; } }

/* --- G2.6 · MacBook (1280×800, 1440×900, y ventanas aún más bajas): la portada escala por el alto ---
   Con la ventana baja, sello, título y marbete empujaban los botones fuera de la pantalla. Sello y título se acotan por
   el alto (svh) y los márgenes se cierran; a 1440×1000 y más alto todo queda igual que lo aprobado. */
@media (min-width: 900px) and (max-height: 940px) {
  .hero { padding-top: 40px; padding-bottom: 48px; }
  .hero-sello-caja { width: min(300px, 60vw, 27svh); margin-bottom: 18px; }
  .hero-titulo { font-size: clamp(56px, min(12vw, 13.5svh), 128px); }
  .hero-linea { margin-bottom: 20px; }
  .hero-datos { margin-bottom: 24px; row-gap: 9px; }
  .hero-marbete { padding: 8px 22px 7px; }
  .hero-marbete > span:first-child { font-size: 26px; }
}

/* --- G2.3 · la carpeta de Comités se abre en celular como en compu (app.js, abrirPanel) ---
   La tapa (la carpeta cerrada) vuelve a existir en celular: llena la pantalla, sale de la tarjeta y gira sobre su lomo.
   Mientras viaja (.carpeta-comite--viaja), la escena no pinta su cartulina ni la barra: se ve la página detrás. */
.carpeta-comite--celular .cp-tapa {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 6;
  padding: 32px 24px;
  border-radius: 0;
  will-change: transform;
}
.carpeta-comite--celular .cp-tapa b { font-size: 84px; }
.carpeta-comite--celular.carpeta-comite--quieta .cp-tapa { display: none; }
.carpeta-comite--viaja .cp-escena { background: transparent; overflow: hidden; }
.carpeta-comite--viaja .cp-barra { visibility: hidden; }

/* --- G2.4b · la carpeta abierta en celular: jerarquía y aire (jueces: «muro de texto») ---
   Cada bloque se separa más; su título va en lacre con un filete fino debajo (como los rubros de un expediente) y el
   párrafo respira (15 px, interlínea 1.7). La hoja no lleva velo: cartulina y papel a plena luz. */
.carpeta-comite--celular .cp-papel { padding: 28px 22px 26px; }
.carpeta-comite--celular .cp-cabeza { margin-bottom: 26px; padding-bottom: 20px; }
.carpeta-comite--celular .cp-bloque { margin-bottom: 30px; }
.carpeta-comite--celular .cp-bloque > .cp-hud {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(164, 13, 38, .25);
  color: #8e0b21;
}
.carpeta-comite--celular .cp-bloque > p { font-size: 15px; line-height: 1.7; }

/* --- G2.1b · intro a 375 px: «CS · ONU Mujeres · SOCHUM» (Nueva York) rozaba «UNODC» (Viena) por 2 px ---
   En pantallas ≤ 380 px las siglas de cada sede van sin tracking (−11 px de ancho); el resto, igual. */
@media (max-width: 380px) {
  .mun-sede span { letter-spacing: 0; }
}