@charset "UTF-8";
/*
    Capa de vídeo — rediseño SVENSON 2026
    Author: Vicente Martín | elgrupo

    Nodo 3188-6152 (marco de 1920): caja blanca de 1112x638 centrada sobre un
    velo oscuro, con 13px de aire alrededor del vídeo (1086x612) y el aspa
    fuera de la caja, arriba a la derecha.
*/
/*
    Created on : Jan 30, 2024, 10:43:30 AM
    Author     : Vicente Martín <vicente@elgrupo.es>
*/
.sv-capa-video {
  /* Base de texto propia: el componente no hereda la del body, que depende
     de qué hoja se imprima la última (Bootstrap o style.css). Es la que tenía
     cuando se maquetó. */
  font-size: 14px;
  line-height: 1.42857143;
  /* El velo deja la página casi en negro: medido sobre el propio Figma, el
     blanco de la cabecera sale a #424242. */
  --sv-cv-velo: rgba(33, 33, 33, 0.85);
  --sv-cv-aire: 13px;
  --sv-cv-ancho: 1086px;
  /* Hueco que se reserva para el aspa y su separación de la caja. */
  --sv-cv-aspa: 38px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: calc(var(--sv-cv-aspa) + 20px) 40px 20px;
}

/* El atributo hidden no puede con el display:flex de arriba. */
.sv-capa-video[hidden] {
  display: none;
}

.sv-capa-video__fondo {
  position: absolute;
  inset: 0;
  background: var(--sv-cv-velo);
}

.sv-capa-video__caja {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: var(--sv-cv-aire);
  background: #fff;
}

/* ---------------------------------------------------------------------------
   Marco del vídeo

   Es el que decide la medida de la caja. El ancho es el menor de tres: el del
   diseño, el que cabe de lado y el que permite el alto de la ventana con la
   proporción que toque. Así el vídeo vertical del móvil no se sale por abajo,
   que es lo que pasa si solo se limita el ancho.
   --------------------------------------------------------------------------- */
.sv-capa-video__marco {
  --sv-cv-ratio: 16 / 9;
  position: relative;
  width: min(var(--sv-cv-ancho), 100vw - 80px - var(--sv-cv-aire) * 2, (100vh - var(--sv-cv-aspa) - 40px - var(--sv-cv-aire) * 2) * (var(--sv-cv-ratio)));
  aspect-ratio: var(--sv-cv-ratio);
  background: #000;
}

.sv-capa-video__player,
.sv-capa-video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Aspa

   Va fuera de la caja, pegada a su borde derecho, y a 16px por encima. El
   style.css del tema le pone fondo gris a todo button:focus, así que hay que
   repetir aquí que no tiene fondo o el aspa se ve como un cuadro claro sobre
   el velo.
   --------------------------------------------------------------------------- */
.sv-capa-video__cerrar {
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.sv-capa-video__cerrar:hover,
.sv-capa-video__cerrar:focus {
  background: none;
  outline: none;
}

/* El aspa recibe el foco al abrir la capa, así que el cerco solo se dibuja
   cuando se está navegando con el teclado. */
.sv-capa-video__cerrar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Aviso de cookies

   El gestor de consentimiento del sitio bloquea el script de YouTube hasta que
   el visitante acepta, y entonces la API nunca llega a cargarse. Sin esto, la
   capa se quedaba en un rectángulo negro sin explicación.
   --------------------------------------------------------------------------- */
.sv-capa-video__aviso {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  background: var(--sv-cv-offwhite, #f2f2f2);
  font-family: Inter, sans-serif;
  text-align: center;
}

.sv-capa-video__aviso-texto {
  max-width: 30em;
  margin: 0 0 24px;
  color: #212121;
  font-size: 18px;
  line-height: 27px;
}

.sv-capa-video__aviso-botones {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px 24px;
  margin: 0;
}

.sv-capa-video__aviso-boton {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 39px;
  padding: 10px 24px;
  border: 0;
  border-radius: 34px;
  background: #b01b35;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
  cursor: pointer;
  /* style.css le pone fondo gris a todo button:focus. */
}
.sv-capa-video__aviso-boton:hover, .sv-capa-video__aviso-boton:focus {
  background: #212121;
  color: #fff;
}

.sv-capa-video__aviso-enlace {
  color: #b01b35;
  font-size: 16px;
  line-height: 17px;
  text-decoration: underline;
}

.sv-capa-video__aspa {
  display: block;
  width: 22px;
  height: 22px;
}

/* ---------------------------------------------------------------------------
   Móvil
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 1023.98px) {
  .sv-capa-video {
    --sv-cv-aire: 8px;
    --sv-cv-aspa: 34px;
    padding: calc(var(--sv-cv-aspa) + 16px) 16px 16px;
  }
  .sv-capa-video__marco {
    width: min(var(--sv-cv-ancho), 100vw - 32px - var(--sv-cv-aire) * 2, (100vh - var(--sv-cv-aspa) - 32px - var(--sv-cv-aire) * 2) * (var(--sv-cv-ratio)));
  }
}/*# sourceMappingURL=capa-video.css.map */