/* La invitación pública.
   ---------------------------------------------------------------------------
   Vive aparte de estilo.css porque estilo.css lo cargan también el panel y la
   app del invitado, y ya pesa lo suyo. Esto solo lo baja quien abre /e/<slug>.

   Lo que hay aquí son COMPOSICIONES. Los colores y las letras entran por
   variables desde app/tema.py; una plantilla nunca escribe un color de marca.
   Y lo prohibido sigue prohibido: nada de orbes, cristal, degradados sobre el
   texto, inclinaciones 3D ni sombras difusas de colores. Las plantillas se
   distinguen por dónde cae el texto, a qué escala y con qué filete.

   Se lee sin JavaScript de arriba abajo. Lo único que JavaScript añade son los
   segundos de la cuenta atrás y el botón de la música, y los dos nacen
   escondidos para que sin JavaScript no quede un mando muerto en la pantalla.
   ------------------------------------------------------------------------ */

/* --- Portada ------------------------------------------------------------ */

.portada {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 58px 0 40px;
  border-bottom: 1px solid var(--filete);
}
.portada .interior { position: relative; z-index: 2; width: 100%; }
.portada .mono { font-family: var(--serif); font-size: 2.6rem; letter-spacing: .08em;
                 color: var(--acento); line-height: 1.1; }
.portada .logo { max-height: 84px; margin: 0 auto 6px; display: block; }
.portada h1 { margin: 14px 0 6px; }
.cuando { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 6px; }

/* Alturas. En `completa` se usa svh cuando existe: con vh, la barra del
   navegador del móvil se come justo la línea del nombre. */
.portada.alto-corta { min-height: 0; }
.portada.alto-media { min-height: clamp(300px, 52vh, 520px); }
.portada.alto-alta { min-height: clamp(380px, 74vh, 760px); }
.portada.alto-completa { min-height: 100vh; }
@supports (min-height: 100svh) {
  .portada.alto-completa { min-height: 100svh; }
}

/* Dónde cae el texto DENTRO de la portada. Ninguna plantilla toca
   `justify-content`: la plantilla decide la alineación HORIZONTAL y el
   organizador la VERTICAL. Repartidas así no pueden pelear por la misma
   propiedad, que es como se consigue que un control obedezca siempre. */
.portada.pos-arriba { justify-content: flex-start; }
.portada.pos-centro { justify-content: center; }
.portada.pos-abajo { justify-content: flex-end; }

/* Portada con foto o con vídeo. El velo no es decoración: es lo que garantiza
   que el nombre se lea sobre cualquier imagen, clara u oscura. Es color plano,
   no un degradado. */
.portada.con-medio {
  margin: 0 -20px; padding-left: 24px; padding-right: 24px;
  border-bottom: 0; overflow: hidden; color: #fff;
}
.portada.con-medio .cuando,
.portada.con-medio .rotulo,
.portada.con-medio .lugar { color: #fff; }
.portada.con-medio .mono { color: #fff; }
.portada.con-medio .logo { filter: brightness(0) invert(1); }
.portada .medio {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block; border: 0;
}
.portada .velo { position: absolute; inset: 0; background: var(--sombra-foto); z-index: 1; }

/* El recorte seguro: una foto vertical dentro de una portada apaisada corta
   cabezas si se ancla al centro. */
.portada.foco-arriba .medio { object-position: center top; }
.portada.foco-centro .medio { object-position: center center; }
.portada.foco-abajo .medio { object-position: center bottom; }

.portada .lugar { color: var(--tinta-suave); margin: 0; font-size: .92rem; }

/* --- Secciones ---------------------------------------------------------- */

.bloque { padding: 34px 0; border-bottom: 1px solid var(--filete); }
.bloque > .rotulo { margin: 0 0 14px; }

/* La columna de la hora: 96 px de suelo y lo que pida el contenido por encima.
   Estuvo en 82 px fijos y «04:00 PM» —que mide 89— se partía en dos líneas en
   cualquier teléfono. Con `minmax` todas las filas caen en el mismo sitio
   mientras las horas midan lo normal, y una hora rara ensancha SU fila en vez
   de romperse. */
.hito {
  display: grid; grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--filete);
}
.hito:last-child { border-bottom: 0; }
.hito b { font-family: var(--serif); font-size: 1.05rem; }
.hito .donde { color: var(--tinta-suave); font-size: .88rem; }

.cierre { text-align: center; padding: 40px 0 78px; }

.enlaces-mapa { display: flex; gap: 8px; flex-wrap: wrap; }

/* Código de vestimenta. El color NUNCA va solo: debajo de cada círculo va su
   código, que es lo que el invitado enseña en la tienda de telas y lo único que
   puede leer alguien que no distingue el rojo del verde. */
.paleta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.tono { width: 66px; text-align: center; }
.tono i {
  display: block; width: 46px; height: 46px; margin: 0 auto 7px;
  border-radius: 50%; border: 1px solid var(--filete);
}
.tono span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue);
}

/* Regalo */
.cuenta-regalo { border-top: 1px solid var(--filete); padding: 14px 0 4px; }
.cuenta-regalo:first-of-type { border-top: 0; }
.dato { font-family: var(--mono); font-size: .95rem; word-break: break-all; margin: 0 0 6px; }
/* `.btn` declara `display:inline-flex`, que gana a la regla `[hidden]` del
   navegador. Sin esta línea, el botón de copiar sale aunque el servidor lo
   mande escondido. */
.copiar[hidden] { display: none; }

/* Hoteles */
.hotel { border-bottom: 1px solid var(--filete); padding: 13px 0; }
.hotel:last-child { border-bottom: 0; }
.hotel b { font-family: var(--serif); font-size: 1.05rem; }

/* --- Música ------------------------------------------------------------- */
/* Nace escondido y solo lo enseña JavaScript, que es quien puede encenderla.
   Nunca suena sola: los navegadores lo bloquean desde 2018 y, aunque no lo
   bloquearan, abrirle a alguien una canción a todo volumen en el autobús es
   una grosería. */
.musica {
  position: fixed; right: 14px; bottom: 14px; z-index: 30; display: none;
  background: var(--tarjeta); box-shadow: var(--alto-2);
  /* Con el nombre de la canción dentro, el botón llegaba a cruzar la pantalla
     de lado a lado y tapaba el rótulo de la sección que tuviera debajo. Se
     corta con puntos suspensivos: el nombre completo sigue en el `title`. */
  max-width: min(74vw, 300px);
}
.musica.disponible { display: inline-flex; }
.musica > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.musica .barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.musica .barras i { width: 2px; height: 4px; background: currentColor; display: block; }
.musica[aria-pressed="true"] .barras i:nth-child(1) { height: 11px; }
.musica[aria-pressed="true"] .barras i:nth-child(2) { height: 6px; }
.musica[aria-pressed="true"] .barras i:nth-child(3) { height: 9px; }

/* ========================================================================= */
/* PLANTILLAS                                                                */
/* ========================================================================= */

/* --- Clásica ------------------------------------------------------------ */
/* Centrada y con un filete doble bajo el nombre. El filete doble es el adorno
   más viejo de la papelería y sigue siendo el que mejor envejece. */
.pl-clasica .portada .interior::after {
  content: ""; display: block; width: 76px; height: 3px; margin: 20px auto 0;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}

/* --- Editorial ---------------------------------------------------------- */
/* A la izquierda, titular de portada de revista y las secciones numeradas en el
   margen. El número lo lleva la cuenta del CSS: si mañana se apaga una sección,
   la numeración se recoloca sola. */
body.pl-editorial { counter-reset: seccion; }
.pl-editorial .portada,
.pl-editorial .cierre { text-align: left; }
.pl-editorial .portada .logo { margin-left: 0; }
.pl-editorial .portada h1 { font-size: clamp(2.4rem, 12vw, 4.4rem); line-height: 1.01; }
/* El número va COLOCADO en el margen, no metido en una rejilla de dos
   columnas. Con la rejilla, la colocación automática repartía los hijos de la
   sección entre las dos columnas —el segundo hito caía debajo del número— y el
   programa salía con las horas montadas unas encima de otras. Se vio en una
   captura de 390 px y no en el navegador de escritorio, porque con sitio de
   sobra el desastre era menos evidente. */
.pl-editorial .bloque {
  position: relative; border-bottom: 0; border-top: 1px solid var(--tinta);
  padding: 24px 0 34px 40px;
}
.pl-editorial .bloque::before {
  content: counter(seccion, decimal-leading-zero); counter-increment: seccion;
  position: absolute; left: 0; top: 26px;
  font-family: var(--mono); font-size: .72rem; color: var(--tenue);
}
.pl-editorial .cierre { border-top: 1px solid var(--tinta); padding-top: 34px; }
.pl-editorial .cierre > .rotulo { display: block; }
.pl-editorial .reloj { border-radius: 0; }

/* --- Mínima ------------------------------------------------------------- */
/* Columna más estrecha, letra pequeña y muy espaciada, y ni un filete que no
   haga falta. Lo que hace el trabajo es el aire. */
.pl-minima .estrecho { max-width: 520px; }
.pl-minima .portada { padding: 92px 0 58px; }
.pl-minima .portada h1 {
  font-size: clamp(1.55rem, 6vw, 2.15rem); letter-spacing: .2em; font-weight: 400;
}
.pl-minima .portada .mono { font-size: 1.3rem; letter-spacing: .3em; }
/* Solo la fecha de la portada. Cuando esta regla valía para cualquier `.cuando`
   se llevaba por delante el código de vestimenta y el nombre del salón, y una
   frase entera en versalitas —«ETIQUETA DE GALA. ELLAS DE LARGO…»— no se lee,
   se descifra. */
.pl-minima .portada .cuando {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .2em;
  text-transform: uppercase; margin-top: 12px;
}
.pl-minima .bloque { border-bottom: 0; padding: 46px 0 0; text-align: center; }
.pl-minima .rotulo { letter-spacing: .3em; }
.pl-minima .hito {
  grid-template-columns: 1fr; text-align: center; gap: 2px; border-bottom: 0; padding: 9px 0;
}
.pl-minima .reloj { border: 0; background: transparent; }
.pl-minima .reloj div { background: transparent; }
.pl-minima .enlaces-mapa { justify-content: center; }
.pl-minima .cierre { padding-top: 62px; }

/* --- Botánica ----------------------------------------------------------- */
/* Marco de un píxel alrededor de la portada y rótulos con una rayita a cada
   lado. Es la que más se parece a una invitación impresa. */
.pl-botanica .portada .interior { border: 1px solid var(--filete); padding: 42px 20px; }
.pl-botanica .portada.con-medio .interior { border-color: rgba(255, 255, 255, .65); }
.pl-botanica .bloque { text-align: center; }
.pl-botanica .bloque > .rotulo {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.pl-botanica .bloque > .rotulo::before,
.pl-botanica .bloque > .rotulo::after {
  content: ""; flex: 0 1 56px; height: 0; border-top: 1px solid var(--filete);
}
.pl-botanica .hito { grid-template-columns: 1fr; text-align: center; gap: 1px; }
.pl-botanica .paleta,
.pl-botanica .enlaces-mapa { justify-content: center; }

/* --- Nocturna ----------------------------------------------------------- */
/* Letra grande a la izquierda y una barra corta de acento abriendo cada
   sección. Está pensada para portada alta con foto o vídeo. */
.pl-nocturna .portada,
.pl-nocturna .cierre { text-align: left; }
.pl-nocturna .portada .logo { margin-left: 0; }
.pl-nocturna .portada h1 { font-size: clamp(2.3rem, 11vw, 3.9rem); line-height: 1.03; }
.pl-nocturna .bloque::before {
  content: ""; display: block; width: 38px; border-top: 3px solid var(--acento);
  margin-bottom: 18px;
}
.pl-nocturna .bloque > .rotulo,
.pl-nocturna .cierre > .rotulo { color: var(--acento); }
/* La hora NO se estrecha aqui. Estuvo en 64 px fijos y, como Nocturna usa la
   letra mas grande de las seis, «04:00 PM» —que mide 89— caia partido en dos
   lineas: «04:00» arriba y «PM» debajo. Se hereda el suelo de 96 px del
   `.hito` general, que es el que ya estaba medido. */
.pl-nocturna .hito {
  grid-template-columns: minmax(96px, max-content) 1fr; border-bottom: 0;
  border-left: 1px solid var(--filete); padding-left: 15px;
}

/* --- Fiesta ------------------------------------------------------------- */
/* Titular apretado en bloques, rótulo sobre pastilla de color plano y botones
   grandes. El único sitio del producto donde el acento se usa macizo detrás de
   un texto: por eso existe --sobre-acento, que ya viene con el contraste
   resuelto en app/color.py. */
.pl-fiesta .portada h1 {
  font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: .99; letter-spacing: .01em;
}
.pl-fiesta .bloque { border-bottom: 0; padding: 28px 0; }
.pl-fiesta .bloque > .rotulo,
.pl-fiesta .cierre > .rotulo {
  display: inline-block; background: var(--acento); color: var(--sobre-acento);
  padding: 5px 13px; border-radius: 999px;
}
.pl-fiesta .hito {
  border: 1px solid var(--filete); border-radius: 12px; padding: 12px 15px;
  margin-bottom: 8px;
}
.pl-fiesta .cierre .btn { padding: 15px 28px; font-size: 1rem; }
.pl-fiesta .hotel { border: 1px solid var(--filete); border-radius: 12px;
                    padding: 12px 15px; margin-bottom: 8px; }

/* --- Retoques de teléfono ---------------------------------------------- */
@media (max-width: 460px) {
  /* La columna de la hora NO se estrecha aquí. Estuvo en 66 px y «04:00 PM» se
     partía en dos líneas en cualquier teléfono; los 82 px de arriba le caben
     justos y siguen dejando 250 px para la actividad. */
  .hito { gap: 12px; }
  .pl-editorial .bloque { padding-left: 30px; }
  .tono { width: 58px; }
  .tono i { width: 40px; height: 40px; }
}