/* El popup de salida · documento 99 de Fran, 20 sep 2026.
 *
 * Las medidas son las del documento, no una interpretación: «520 px de ancho,
 * esquinas de 10 px, imagen a sangre, foto de Piti de 68 px sobresaliendo
 * arriba. Fondo oscuro translúcido detrás». Y el botón con sus valores
 * exactos: fondo #B8995A, texto #0A0905, Outfit 700, 15 px, mayúsculas,
 * esquinas de 8 px.
 *
 * Fichero aparte y no dentro de `estilos.css` por lo mismo que
 * `aviso-novedades.css`: es una pieza que puede retirarse entera —«si no
 * convierte, se quita y ya está»— y quitarla tiene que ser borrar dos líneas
 * del HTML, no ir a buscar reglas repartidas por una hoja de mil líneas.
 *
 * El hermano de `/preventa` vive en `MPinsach_page` (`compra.css`, bloque «EL
 * POPUP DE SALIDA»). Si aquí cambia una medida del documento, allí también.
 */

.pop-velo {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 9, 5, .72);
  backdrop-filter: blur(2px);
}

/* `hidden` no gana solo: `.pop-velo` trae `display:flex`, y un atributo no le
   puede a una clase. Sin esto el popup sale siempre — y sale de entrada, que es
   justo lo que el documento prohíbe. */
.pop-velo[hidden] { display: none; }

.pop {
  position: relative;
  width: 520px;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fffdf8;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  text-align: center;
}

/* «Imagen a sangre»: pegada a los tres bordes de arriba. La proporción sale de
   la imagen entregada (880 × 481), que es la portada de la clase. El título ya
   va DENTRO de la imagen, por eso el texto de abajo no lo repite. */
.pop-img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Los 68 px del documento, «sobresaliendo arriba»: mitad sobre la imagen y
   mitad sobre el cuerpo. */
.pop-cara {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  border: 3px solid #fffdf8;
  object-fit: cover;
  object-position: 50% 50%;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .45);
}

.pop-cuerpo { padding: 44px 34px 28px; }

.pop-k {
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8a7038;
  margin-bottom: 12px;
}

.pop-p1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #0a0905;
  margin: 0 0 10px;
}
/* `data-fecha-directo="dia"` entrega «domingo 18 de octubre» en minúscula, para
   que quepa dentro de frases como «nos vemos el ...». Aquí abre la frase, así
   que la mayúscula la pone el CSS.

   `::first-letter` y no `capitalize`, que pondría mayúscula también en
   «Octubre». Y sobre el PÁRRAFO, no sobre el `<b>`: `::first-letter` sólo
   aplica a elementos de bloque, y un `<b>` es inline — puesto ahí no pinta nada
   y no avisa. Funciona igual porque la fecha es lo primero del párrafo. */
.pop-p1::first-letter { text-transform: uppercase; }

.pop-p2 {
  font-size: 1rem;
  line-height: 1.6;
  color: #6b6455;
  margin: 0 0 22px;
}

/* Los valores exactos del documento 99. */
.pop-cta {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 15px 22px;
  background: #b8995a;
  color: #0a0905;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.pop-cta:hover { background: #d4b27a; transform: translateY(-1px); }

.pop-pie {
  margin-top: 12px;
  font-size: .82rem;
  color: #6b6455;
}

.pop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 9, 5, .5);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.pop-x:hover { background: rgba(10, 9, 5, .78); }

@media (prefers-reduced-motion: reduce) {
  .pop-cta:hover { transform: none; }
}