/* ═══════════════════════════════════════════════════════════
   YouPlanFit · presentación de los bloques de publicidad
   ═══════════════════════════════════════════════════════════
   Hoja aparte y no un trozo de styles.css o de portada.css porque los
   anuncios aparecen en los dos mundos —la portada usa portada.css y la
   aplicación usa styles.css— y tener la misma caja definida dos veces es
   la forma segura de que dentro de un año no se parezcan.

   Solo usa variables que EXISTEN en las dos hojas: --humo, --linea, --mono
   y --r-sm. Si se añade aquí una que solo define una de las dos, el bloque
   se verá distinto según la página.

   La regla de diseño: el hueco NO existe hasta que anuncios.js decide que
   va a haber anuncio. Así el usuario PRO, el que no ha dado consentimiento
   y el que usa un bloqueador no ven un rectángulo vacío con la palabra
   «Publicidad» encima — ven la página tal cual estaba.
   ═══════════════════════════════════════════════════════════ */

/* Estado de reposo. Es lo que sale del servidor: sin altura, sin margen,
   sin nada. Ningún visitante ve el hueco por defecto. */
.anuncio{ display:none }

/* Estado activo. Lo pone anuncios.js DESPUÉS de comprobar consentimiento y
   plan, y ANTES de insertar el <ins> de Google: la altura queda reservada
   antes de que llegue el anuncio, así que cuando llega no empuja nada.
   Por eso las unidades son de tamaño fijo (300×250 y 336×280) y no
   responsivas: una unidad responsiva decide su alto en el cliente y no hay
   forma honesta de reservarlo de antemano sin recortar el anuncio.

   Sin max-width ni padding propios: el bloque siempre vive dentro de un
   .wrap —el de su sección en /app, o uno propio en las páginas donde el
   <aside> cuelga del <body>—. Poner aquí un segundo canal de 24 px lo
   dejaría más estrecho que todo lo que tiene encima y debajo. */
.anuncio--on{
  display:block;
  /* Aire de sección, no de párrafo: el bloque tiene que leerse como algo
     que no es contenido de la página. */
  margin-block:clamp(38px,6vw,64px);
  text-align:center;
}

/* La etiqueta. No es decoración: identificar la publicidad como tal es lo
   que la separa del contenido —requisito de las políticas de AdSense y de
   la normativa de publicidad en varios países— y además evita que alguien
   se crea que el anuncio es una recomendación de Mariela. */
.anuncio__marca{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
  opacity:.7;
  margin-bottom:8px;
  line-height:1;
}

/* El marco. Fondo tenue y línea fina: pertenece a la página sin competir
   con las tarjetas de contenido, que llevan sombra y fondo blanco.

   min-height y no height: si un día Google devolviera una unidad algo más
   alta, crece en vez de recortarla —recortar un anuncio es una infracción
   de política, no un detalle estético. */
.anuncio__caja{
  display:flex;
  align-items:center;
  justify-content:center;
  /* Contra el box-sizing:border-box global de las dos hojas. Aquí las
     medidas SON el anuncio: con border-box, el borde de 1 px se comía dos
     píxeles de cada lado y una unidad de 336×280 ya no cabía en un marco
     declarado de 336×280 — el JS la degradaba al cuadrado de 250 creyendo
     que la caja era estrecha, y la altura reservada se quedaba corta. */
  box-sizing:content-box;
  /* El marco se ciñe a la unidad en vez de ocupar el ancho de la sección.
     A ancho completo quedaba un rectángulo de 1.100 px con un anuncio de
     336 flotando en el centro: parecía un hueco de contenido que no cargó,
     no un anuncio. */
  max-width:300px;               /* 300×250 · móvil */
  margin-inline:auto;
  min-height:250px;
  /* Un velo de tinta, no un color con nombre. Con --papel-2 el marco
     desaparecía dentro de las secciones que YA usan ese tono de fondo
     (.section--bone en /app, .s--papel2 en la portada) y quedaba un
     rectángulo con borde y sin cuerpo. Translúcido siempre se separa un
     punto de lo que tenga detrás, sea el tono que sea. */
  background:rgba(29,42,44,.045);
  border:1px solid var(--linea);
  border-radius:var(--r-sm);
  /* Sin overflow:hidden a propósito. Recortar un anuncio es una infracción
     de las políticas de AdSense, no un detalle de estilo: si alguna vez
     llega una unidad más alta de lo previsto, es preferible que el marco se
     desborde —feo pero visible— a que Google la vea recortada. */
}
/* El corte de 760 es EL MISMO que usa montar() en anuncios.js para elegir
   336×280 en vez de 300×250. Cambiar uno sin el otro devuelve el salto de
   maquetación que toda esta hoja existe para evitar. */
@media (min-width:760px){
  .anuncio__caja{ max-width:336px; min-height:280px }
}

.anuncio__caja ins{ display:inline-block; margin:0 auto }

/* Google marca la unidad como «unfilled» cuando no tenía ningún anuncio
   que servir. Dejar el marco vacío en ese caso sería enseñar un agujero
   con una etiqueta encima. */
.anuncio--on:has(ins[data-ad-status="unfilled"]){ display:none }

/* Un plan impreso no lleva publicidad. #rutina se imprime entera en el PDF
   que se lleva la persona, así que sin esto el anuncio saldría en la hoja. */
@media print{ .anuncio{ display:none !important } }