/* Publicidad (módulo Ads, docs/ADS.md). Solo se carga en las páginas que llevan anuncio.
   Hasta 75rem es una tarjeta debajo del panel; desde ahí, como los fondos de WeTransfer:
   el anuncio ocupa la pantalla detrás del panel y el logo, el titular y el botón van en el
   espacio libre a su derecha, que se calcula con la rejilla de la página (--ad-panel).
   Lo común va primero; cada formato, al final, en su bloque. */

.ad {
  --ad-panel: 20rem; /* el ancho de la etiqueta de envío (.send en pages.css) */
  --ad-edge: max(0px, (100vw - var(--container)) / 2);
  --ad-veil: rgb(11 17 40 / 0.78);
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  width: min(100% - 2 * var(--gutter), 36rem);
  min-height: 26rem;
  margin: 0 auto var(--s-6);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--ad-color, #0B1128);
  color: #FFFFFF;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.06);
}

.ad--light {
  --ad-veil: rgb(255 255 255 / 0.82);
  color: #141B34;
}

/* Las piezas se leen sobre cualquier foto: degradado desde abajo. */
.ad::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, var(--ad-veil) 0, rgb(0 0 0 / 0) 72%);
}

.ad--download {
  --ad-panel: 36rem;
}

/* Rotación (partials/ad-rotation.php): los anuncios, uno encima de otro; se ve el actual
   y el siguiente entra con un fundido (ads/rotation.js). En el turno del globo, el anuncio
   se funde y debajo queda la portada de siempre. */
.ad-rotation {
  display: grid;
}

.ad-rotation > .ad {
  grid-area: 1 / 1;
}

.ad.is-waiting {
  opacity: 0;
  pointer-events: none;
}

.ad.is-entering {
  animation: ad-in 700ms var(--ease-out) both;
}

@keyframes ad-in {
  from {
    opacity: 0;
  }
}

.ad.is-leaving {
  pointer-events: none;
  animation: ad-out 700ms var(--ease-out) both;
}

@keyframes ad-out {
  to {
    opacity: 0;
  }
}

/* Todo el fondo lleva a la web del anunciante; lo interactivo va por encima. */
.ad__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ad__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ad__stage picture {
  display: contents;
}

.ad__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El espacio libre: logo, titular, texto y botón. */
.ad__space {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  align-content: end;
  gap: var(--s-3);
  padding: 3.5rem var(--s-5) var(--s-5);
  pointer-events: none;
}

.ad__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.ad__cell > *,
.ad__actions,
.ad__screen {
  pointer-events: auto;
}

/* Imágenes sueltas: el clic pasa al fondo (que lleva al anunciante). */
.ad__logo,
.ad__copy,
.ad__extra,
.ad__message {
  pointer-events: none;
}

.ad__extra {
  max-width: 60%;
  max-height: 9rem;
  object-fit: contain;
}

/* Vídeo de entrada: encima del fondo mientras dura; después, el fondo y sus piezas. */
.ad__intro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.ad.is-intro .ad__intro {
  opacity: 1;
}

.ad__message,
.ad__extra {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.ad.is-intro .ad__message,
.ad.is-intro .ad__extra {
  opacity: 0;
  transform: translateY(12px);
}

.ad__logo {
  max-width: 12rem;
  max-height: 2.75rem;
  object-fit: contain;
}

.ad__copy {
  max-width: 100%;
  max-height: 7rem;
  object-fit: contain;
}

.ad__headline {
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ad__body {
  max-width: 34rem;
  opacity: 0.86;
  text-wrap: pretty;
}

.ad__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* Botón «Descubre más»: el color de la campaña, y crece un poco al pasar por encima. */
.ad__cta {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--ad-ink, #FFFFFF);
  color: var(--ad-color, #141B34);
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.7);
  transition: transform var(--duration) var(--ease-out);
}

.ad__cta:hover {
  color: var(--ad-color, #141B34);
  transform: scale(1.04);
}

.ad__cta--image {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ad__cta--image img {
  max-width: 18rem;
  max-height: 4rem;
  object-fit: contain;
}

/* Un pequeño latido de vez en cuando para llamar la atención (como el «popOut» de IONOS). */
@keyframes ad-pop {
  0%, 84%, 100% {
    transform: scale(1);
  }

  90% {
    transform: scale(1.07);
  }
}

.ad__cell .ad__cta {
  animation: ad-pop 5s var(--ease-out) 2s infinite;
}

.ad__cell .ad__cta:hover {
  animation: none;
}

.ad__cta:focus-visible,
.ad__play:focus-visible,
.ad__control:focus-visible,
.ad__pause:focus-visible,
.ad__compare-handle:focus-visible,
.ad__why summary:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #141B34;
}

/* «Publicidad · Anunciante · ?»: siempre visible (LSSI art. 20). */
.ad__label {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: calc(100% - 2 * var(--s-3));
  padding: 4px 5px 4px 10px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(11 17 40 / 0.66);
  color: #FFFFFF;
  font-size: var(--t-xs);
  line-height: 1.2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ad__badge {
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad__advertiser {
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad__ai {
  padding-left: var(--s-2);
  border-left: 1px solid currentColor;
  opacity: 0.8;
  white-space: nowrap;
}

/* Pausa de la rotación, junto al «?». Sin JS no hay rotación, así que no se enseña. */
.ad__pause {
  display: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.ad.is-ready .ad__pause {
  display: inline-grid;
}

.ad__pause > span {
  display: inline-grid;
}

.ad__pause[aria-pressed='false'] .ad__pause-on,
.ad__pause[aria-pressed='true'] .ad__pause-off {
  display: none;
}

.ad__why {
  position: relative;
}

.ad__why summary {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.ad__why summary::-webkit-details-marker {
  display: none;
}

.ad__why-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  display: grid;
  gap: var(--s-2);
  width: min(20rem, 80vw);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-m);
  background: #FFFFFF;
  color: #141B34;
  font-size: var(--t-sm);
  line-height: 1.45;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6);
}

.ad__why-panel a {
  color: #2443B6;
}

/* La etiqueta que sigue al ratón por el fondo (como el «Descubre más» de Holded). */
.ad__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--ad-ink, #FFFFFF);
  color: var(--ad-color, #141B34);
  font-size: var(--t-sm);
  font-weight: 750;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--ad-x, -200px), var(--ad-y, -200px)) translate(16px, 16px);
  transition: opacity 120ms linear;
}

.ad.is-pointing .ad__cursor {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .ad__cursor {
    display: none;
  }
}

/* Controles de vídeo: subtítulos, pausa, sonido (y cerrar en el reproductor). Sin JS no
   sirven, así que no se enseñan. */
.ad__controls {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  z-index: 3;
  display: none;
  gap: var(--s-2);
}

.ad.is-ready .ad__controls {
  display: flex;
}

.ad__control {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: rgb(11 17 40 / 0.72);
  color: #FFFFFF;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ad__control--text {
  padding-inline: var(--s-3);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad__control--text[aria-pressed='false'] {
  opacity: 0.6;
  text-decoration: line-through;
}

[data-playing='true'] .ad__icon-play,
[data-playing='false'] .ad__icon-pause,
[data-ad-sound][aria-pressed='false'] .ad__icon-sound,
[data-ad-sound][aria-pressed='true'] .ad__icon-sound-off {
  display: none;
}

.ad__control > span {
  display: inline-grid;
}

/* Sin ads.mobile, en pantallas estrechas no hay anuncio (como en WeTransfer). */
@media (max-width: 74.99rem) {
  .ad--desktop-only {
    display: none;
  }
}

/* ── Escritorio: el anuncio ocupa la pantalla detrás del panel ─────────────── */

@media (min-width: 75rem) {
  .ad {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: auto;
    margin: 0;
    border-radius: 0;
    background: #0B1128;
    color: #FFFFFF;
    box-shadow: none;
  }

  .ad--light {
    background: #F4F5F8;
    color: #141B34;
  }

  /* Velo arriba y abajo: la cabecera y el pie de Transy se leen sobre cualquier fondo. */
  .ad::before {
    background:
      linear-gradient(180deg, var(--ad-veil) 0, rgb(0 0 0 / 0) 7rem),
      linear-gradient(0deg, var(--ad-veil) 0, rgb(0 0 0 / 0) 9rem);
  }

  .ad--dark {
    --ad-veil: rgb(11 17 40 / 0.55);
  }

  .ad--light {
    --ad-veil: rgb(255 255 255 / 0.6);
  }

  .ad {
    /* La unidad del ancho de las piezas, la de las plantillas de WeTransfer: 1 px en una
       pantalla de 2560 px de ancho, y en proporción en las más pequeñas. */
    --ad-scale: clamp(0.3px, calc(0.3px + 0.7 * (100vw - 768px) / 1792), 1px);
    min-height: 0;
  }

  /* Pantallas muy apaisadas: manda la altura (como en WeTransfer). */
  @media (min-aspect-ratio: 213 / 100) {
    .ad {
      --ad-scale: clamp(0.3px, calc(0.3px + 0.7 * (100vh - 360px) / 840), 1px);
    }
  }

  /* El espacio libre a la derecha del panel (la zona «space» de WeTransfer): tres filas,
     y en cada una, las zonas alineadas a la izquierda, al centro o a la derecha. Como
     allí, llega hasta el borde de la pantalla, no solo hasta el del contenido. */
  .ad__space {
    position: absolute;
    top: 6rem;
    right: max(var(--gutter), 2.5rem);
    container-type: inline-size;
    bottom: 4.5rem;
    left: calc(var(--ad-edge) + var(--gutter) + var(--ad-panel) + var(--s-7));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    padding: 0;
  }

  .ad__cell {
    grid-column: 1;
    gap: var(--s-4);
    max-width: min(100%, 46rem);
  }

  .ad__cell--top-left,
  .ad__cell--top,
  .ad__cell--top-right {
    grid-row: 1;
    align-self: start;
  }

  .ad__cell--left,
  .ad__cell--center,
  .ad__cell--right {
    grid-row: 2;
    align-self: center;
  }

  .ad__cell--bottom-left,
  .ad__cell--bottom,
  .ad__cell--bottom-right {
    grid-row: 3;
    align-self: end;
  }

  .ad__cell--top-left,
  .ad__cell--left,
  .ad__cell--bottom-left {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }

  .ad__cell--top,
  .ad__cell--center,
  .ad__cell--bottom,
  .ad__cell--box-top,
  .ad__cell--box-bottom {
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  .ad__cell--top-right,
  .ad__cell--right,
  .ad__cell--bottom-right {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }

  /* Encima y debajo del panel: ads/ad.js mide el panel y lo pasa en variables. Hasta
     entonces (o sin JS), arriba y abajo del espacio libre. */
  .ad__cell--box-top {
    grid-row: 1;
    align-self: start;
  }

  .ad__cell--box-bottom {
    grid-row: 3;
    align-self: end;
  }

  .ad.has-box .ad__cell--box-top,
  .ad.has-box .ad__cell--box-bottom {
    position: fixed;
    left: var(--ad-box-left);
    width: var(--ad-box-width);
    max-width: none;
  }

  .ad.has-box .ad__cell--box-top {
    bottom: calc(100vh - var(--ad-box-top) + var(--s-4));
  }

  .ad.has-box .ad__cell--box-bottom {
    top: calc(var(--ad-box-bottom) + var(--s-4));
  }

  /* Cada pieza en imagen, con su ancho (--ad-size, que pone ads/ad.js desde
     data-ad-size; sin JS, el de por defecto de AdPiece::defaultSize). */
  .ad__logo,
  .ad__copy,
  .ad__extra {
    width: calc(var(--ad-size) * var(--ad-scale));
    max-width: 100%;
    max-height: none;
    height: auto;
  }

  .ad__logo {
    --ad-size: 320;
  }

  .ad__copy {
    --ad-size: 1184;
  }

  .ad__extra {
    --ad-size: 912;
  }

  .ad__cta--image {
    --ad-size: 320;
    width: calc(var(--ad-size) * var(--ad-scale));
    max-width: 100%;
  }

  /* El desplazamiento de una pieza desde su sitio (el «offset» de WeTransfer), en la
     misma unidad que el ancho. Con translate, que no choca con el transform de los
     botones al pasar por encima ni con su latido. */
  [data-ad-offset] {
    translate: calc(var(--ad-dx, 0) * var(--ad-scale)) calc(var(--ad-dy, 0) * var(--ad-scale));
  }

  .ad__cta--image img {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
  }

  /* El titular escrito, como mucho algo más de la mitad del espacio: así no se come la
     otra zona de su fila. */
  .ad__headline {
    max-width: min(22ch, 58cqi);
    font-size: clamp(2.2rem, 1rem + 2.6vw, 4rem);
    font-stretch: var(--stretch-wide);
    font-weight: 850;
    letter-spacing: -0.035em;
  }

  .ad--dark .ad__headline,
  .ad--dark .ad__body {
    text-shadow: 0 2px 30px rgb(11 17 40 / 0.65);
  }

  .ad__body {
    font-size: var(--t-lg);
  }

  .ad__cta {
    min-height: 3.25rem;
    padding: 0 1.75rem;
    font-size: var(--t-lg);
  }

  .ad__label {
    top: 1.15rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .ad__why-panel {
    left: 50%;
    transform: translateX(-50%);
  }

  /* El anuncio ocupa el sitio del globo (y así el globo ni se carga: app.js). */
  .stage--ad .stage__globe {
    display: none;
  }

  /* La barra de Transy deja pasar el ratón al anuncio (o a la promoción propia), salvo
     sus enlaces y menús. */
  .stage--ad .site-header,
  .stage--house .site-header {
    pointer-events: none;
  }

  .stage--ad .site-header :is(a, button, summary, details, input, select),
  .stage--house .site-header :is(a, button, summary, details, input, select) {
    pointer-events: auto;
  }

  .ad--light .ad__label {
    border-color: rgb(20 27 52 / 0.12);
    background: rgb(255 255 255 / 0.8);
    color: #141B34;
  }

  /* El contenido deja pasar el ratón al anuncio (o a la promoción), salvo sus tarjetas y avisos. */
  .stage--ad .l-main,
  .stage--ad .l-main > .send,
  .stage--ad .l-main > .stage-layout,
  .stage--house .l-main,
  .stage--house .l-main > .send,
  .stage--house .l-main > .stage-layout {
    pointer-events: none;
  }

  .stage--ad .l-main > :not(.send, .stage-layout),
  .stage--ad .l-main > .send > *,
  .stage--ad .l-main > .stage-layout > *,
  .stage--house .l-main > :not(.send, .stage-layout),
  .stage--house .l-main > .send > *,
  .stage--house .l-main > .stage-layout > * {
    pointer-events: auto;
  }

  /* El titular de la portada deja su sitio al anuncio (o a la promoción). */
  .stage--ad .send__intro,
  .stage--house .send__intro {
    visibility: hidden;
  }

  /* La promoción propia (partials/ad-house.php): sobre el globo, sin fondo ni velo, donde
     va el titular de la portada y con su mismo aire. */
  .ad--house {
    background: transparent;
  }

  .ad--house::before {
    display: none;
  }

  /* Es de Transy: se alinea con el contenido de la página, como el titular de la portada. */
  .ad--house .ad__space {
    right: calc(var(--ad-edge) + var(--gutter));
  }

  .house-promo {
    max-width: min(100%, 34rem);
    gap: var(--s-4);
  }

  .house-promo__plan .c-pro {
    padding: 0.2rem 0.75rem;
    font-size: var(--t-sm);
  }

  .house-promo__headline {
    font-size: clamp(2rem, 1.25rem + 2.3vw, 3.4rem);
    font-stretch: var(--stretch-wide);
    font-weight: 850;
    line-height: var(--lh-tight);
    letter-spacing: -0.035em;
    text-shadow: 0 2px 30px rgb(11 17 40 / 0.65);
  }

  .house-promo__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
  }

  .house-promo__facts li {
    padding: var(--s-1) var(--s-3);
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 999px;
    background: rgb(11 17 40 / 0.35);
    color: rgb(255 255 255 / 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .house-promo__facts strong {
    color: #FFFFFF;
    font-weight: 750;
  }

  .house-promo__cta {
    margin-top: var(--s-2);
    box-shadow: 0 16px 40px -16px rgb(36 67 182 / 0.9);
  }

  .stage--ad .delivery__report {
    justify-self: start;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-m);
    background: rgb(11 17 40 / 0.62);
  }

  /* Fondo claro: cabecera, pie y enlaces de Transy en oscuro (salvo con el vídeo puesto). */
  .stage--ad-light:not(.ad-playing) {
    --stage-ink: #141B34;
    --stage-ink-soft: rgb(20 27 52 / 0.74);
  }

  .stage--ad-light:not(.ad-playing) .wordmark,
  .stage--ad-light:not(.ad-playing) .wordmark:hover,
  .stage--ad-light:not(.ad-playing) .site-nav__pill,
  .stage--ad-light:not(.ad-playing) .site-nav__pill:hover {
    color: #141B34;
  }

  .stage--ad-light:not(.ad-playing) .site-nav__pill {
    border-color: rgb(20 27 52 / 0.35);
  }

  .stage--ad-light:not(.ad-playing) .site-nav__pill:hover {
    background: rgb(20 27 52 / 0.06);
  }

  /* Lo que va encima o debajo del panel cabe en el hueco que deja (si no cabe, no se ve). */
  .ad.has-box .ad__cell--box-top img {
    max-height: clamp(0px, calc(var(--ad-box-top) - 5.5rem), 4.5rem);
  }

  .ad.has-box .ad__cell--box-bottom img {
    max-height: clamp(0px, calc(100vh - var(--ad-box-bottom) - 6rem), 5.5rem);
  }

  .stage--ad-light .delivery__report {
    background: rgb(255 255 255 / 0.78);
  }
}

/* ── Formato «Vídeo»: el vídeo en una tarjeta grande en el espacio libre ───── */

.ad__space--media {
  gap: var(--s-4);
}

/* Vídeo: la tarjeta es del color de la campaña y no lleva velo. */
.ad--video {
  color: var(--ad-ink, #FFFFFF);
  min-height: 0;
}

.ad--video::before {
  display: none;
}

.ad--video .ad__space {
  padding-top: 3.25rem;
}

.ad--video .ad__controls {
  top: var(--s-3);
  bottom: auto;
}

.ad__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: #000000;
}

/* El fotograma va debajo del vídeo: se ve hasta que el vídeo pinta su primer cuadro. */
.ad__poster,
.ad__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad__video::cue,
.ad__player-video::cue {
  color: #FFFFFF;
  background: rgb(9 25 43 / 0.62);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

@keyframes ad-fade-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

.ad__screen-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (min-width: 75rem) {
  .ad--video {
    background: var(--ad-color, #0B1128);
    color: var(--ad-ink, #FFFFFF);
  }

  /* Vídeo: composición fija en columna (logo, vídeo, botón), centrada en el espacio libre. */
  .ad--video .ad__space {
    grid-template-rows: auto minmax(0, auto) auto;
    align-content: center;
    justify-items: center;
    padding-top: 0;
  }

  .ad--video .ad__screen {
    max-width: 68rem;
    max-height: calc(100vh - 15rem);
    border-radius: var(--radius-l);
    box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.8);
  }

  .ad__video::cue,
  .ad__player-video::cue {
    font-size: 1.6rem;
  }

  .ad--video .ad__screen {
    animation: ad-fade-in 900ms var(--ease-out) both;
  }
}

/* ── Formato «Antes y después»: el tirador descubre una imagen u otra ──────── */

.ad__compare-before {
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}

.ad__compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  z-index: 3;
  width: 3px;
  background: #FFFFFF;
  box-shadow: 0 0 12px rgb(0 0 0 / 0.35);
  transform: translateX(-50%);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

/* Más fácil de agarrar que 3 px. */
.ad__compare-line::before {
  content: '';
  position: absolute;
  inset: 0 -12px;
}

/* El tirador va con el color de la campaña (como el amarillo del de DHL). */
.ad__compare-handle {
  position: absolute;
  top: 78%;
  left: var(--split, 50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--ad-color, #FFFFFF);
  color: var(--ad-ink, #141B34);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
  transform: translate(-50%, -50%);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

/* Con logo, el tirador es una píldora a su medida (casi todos los logos son apaisados). */
.ad__compare-handle--logo {
  width: auto;
  min-width: 3.75rem;
  max-width: 12rem;
  padding: 0 1rem;
  border-radius: 999px;
}

.ad__compare-handle img {
  max-width: 100%;
  max-height: 2rem;
  object-fit: contain;
}

.ad__compare.is-dragging .ad__compare-handle {
  cursor: grabbing;
}

@media (min-width: 75rem) {
  .ad__compare-handle {
    width: 4.75rem;
    height: 4.75rem;
  }

  .ad__compare-handle--logo {
    width: auto;
    min-width: 4.75rem;
    max-width: 15rem;
    padding: 0 1.25rem;
  }

  .ad__compare-handle img {
    max-height: 2.5rem;
  }

  /* El texto ya va en las imágenes: aquí solo el botón, abajo. */
  .ad--compare .ad__space {
    align-content: end;
  }
}

/* ── Formato «Imagen con vídeo»: botón de reproducir y vídeo a pantalla completa ── */

.ad__play {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ad-color, #FFFFFF);
  color: var(--ad-ink, #141B34);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.75);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out);
}

.ad__play:hover {
  transform: scale(1.08);
}

.ad__play .icon {
  fill: currentColor;
  transform: translateX(2px);
}

.ad__play--image {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ad__play--image img {
  max-width: 7rem;
  max-height: 7rem;
  object-fit: contain;
}

/* En escritorio, con su ancho (--ad-size: el diámetro, o el ancho de su imagen). */
@media (min-width: 75rem) {
  .ad__play {
    --ad-size: 140;
    width: calc(var(--ad-size) * var(--ad-scale));
    height: calc(var(--ad-size) * var(--ad-scale));
  }

  .ad__play--image {
    height: auto;
  }

  .ad__play--image img {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
  }
}

.ad__player {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: #000000;
}

.ad__player[hidden] {
  display: none;
}

.ad__player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ad__player .ad__controls {
  bottom: var(--s-5);
  left: var(--s-5);
}

.ad__player-cta {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: #FFFFFF;
  color: #141B34;
  font-weight: 750;
  text-decoration: none;
}

/* Mientras se ve el vídeo, el anuncio pasa por encima de todo y la página no se mueve. */
.ad.is-playing {
  z-index: 40;
}

body.ad-playing {
  overflow: hidden;
}

/* El borde del panel que asoma mientras se ve el vídeo (solo en escritorio). */
.ad__peek {
  display: none;
}

/* Escritorio, como en WeTransfer: el vídeo ocupa el fondo (debajo de la etiqueta
   «Publicidad»), la cabecera se queda y el panel se aparta a la izquierda dejando asomar
   su borde; pulsarlo cierra el vídeo y lo devuelve (ads/formats/play.js). */
@media (min-width: 75rem) {
  .ad.is-playing {
    z-index: 0;
  }

  .ad__player {
    z-index: 3;
  }

  .ad.is-playing .ad__cursor {
    display: none;
  }

  .stage--ad .l-main {
    transition: transform 600ms var(--ease-out);
  }

  body.ad-playing .l-main {
    transform: translateX(calc(-1 * var(--ad-main-shift, 0px)));
  }

  body.ad-playing .site-footer {
    visibility: hidden;
    opacity: 0;
  }

  .ad__peek {
    position: fixed;
    top: var(--ad-peek-top, 30vh);
    left: 0;
    display: grid;
    place-items: center end;
    width: calc(24px + 2.25rem);
    height: var(--ad-peek-height, 40vh);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .ad__peek-tab {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 3.5rem;
    border-radius: 0 999px 999px 0;
    background: #FFFFFF;
    color: #141B34;
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
    transition: width var(--duration) var(--ease-out);
  }

  .ad__peek:hover .ad__peek-tab {
    width: 2.5rem;
  }

  .ad__peek:focus-visible .ad__peek-tab {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage--ad .l-main,
  .ad__peek-tab,
  .ad__cta,
  .ad__play,
  .ad__cursor,
  .ad__message,
  .ad__extra,
  .ad__intro {
    transition: none;
  }

  .ad__cell .ad__cta,
  .ad--video .ad__screen,
  .ad.is-entering,
  .ad.is-leaving {
    animation: none;
  }

  .ad__cta:hover,
  .ad__play:hover {
    transform: none;
  }
}