/* ============================================================
   DOMINÓ NOTICIAS — Capa de marca sobre la plantilla Vinero
   ------------------------------------------------------------
   Este archivo NO reemplaza style.css: se carga después y solo
   redefine color y las piezas nuevas (publicidad, video, tabs).
   Así la estructura, animaciones y efectos originales quedan
   intactos y la plantilla puede actualizarse sin perder la marca.
   ============================================================ */

:root {
    --domino-primario:   #6b0de0;  /* morado de marca */
    --domino-primario-o: #5709b8;  /* morado oscuro, para hover */
    --domino-primario-c: #8f3ff0;  /* morado claro, sobre fondos oscuros */

    --domino-blanco:     #ffffff;
    --domino-gris-claro: #f7f7f9;  /* fondos suaves */
    --domino-gris:       #efefef;  /* bordes y rellenos */
    --domino-gris-medio: #8a8a94;  /* texto secundario */
    --domino-grafito:    #2b2b33;  /* titulares y footer */
    --domino-texto:      #1a1a1a;  /* texto principal */
}

/* ------------------------------------------------------------
   1. BASE — el blanco predomina
   ------------------------------------------------------------ */
body,
.vlt-site-holder,
.vlt-content-holder,
.vlt-main-holder {
    background-color: var(--domino-blanco);
}

/* Ningún bloque a ancho completo debe provocar scroll lateral */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Las imágenes nunca desbordan su contenedor */
img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   1b. TIPOGRAFÍA — Helvetica Neue y sus variantes
   ------------------------------------------------------------
   Declarada en assets/css/fuente-helvetica.css (se carga antes que
   esta hoja). style.css de la plantilla declara Source Sans Pro y
   Amiri; aquí se reemplazan sin modificar ese archivo.

   Los controles de formulario NO heredan la fuente del body en
   ningún navegador: se les fuerza la familia. Los iconos
   (FontAwesome, iconsmind) conservan la suya.

   Pesos disponibles: 300 Light, 400 Roman, 500 Medium, 700 Bold,
   con sus cursivas. No uses 600, 800 ni 900: no existen en la
   familia y el navegador los simularía.
   ------------------------------------------------------------ */
body,
h1, h2, h3, h4, h5, h6,
blockquote,
cite,
button,
input,
optgroup,
select,
textarea,
.vlt-btn,
.vlt-form-control,
.form-control,
.cbp-filter-item,
.domino-etiqueta,
.domino-ad-label {
    font-family: var(--domino-fuente);
}

/* La plantilla usaba Amiri en cursiva para las citas: con
   Helvetica Neue se dejan rectas y se distinguen por el panel morado. */
blockquote {
    font-style: normal;
}

/* Los dos únicos pesos 600 de la plantilla pasan a Bold */
.vlt-post-tags > a,
.vlt-post-recent-popular .vlt-post-title {
    font-weight: 700;
}

/* ------------------------------------------------------------
   2. ACENTOS — el negro de la plantilla pasa a morado
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   HOVER MORADO — todo lo que se puede pulsar vira a morado
   ------------------------------------------------------------
   Se agrupa aquí para que el comportamiento sea uno solo en
   todo el sitio. La transición acompaña el cambio de color
   sin alterar las animaciones propias de la plantilla.
   ------------------------------------------------------------ */
a,
.vlt-post-meta a,
.vlt-post-cats a,
.vlt-post-author a,
.vlt-widget ul li a,
.vlt-footer-menu ul li a,
.vlt-post-share > a,
.vlt-navigation-socials ul li a {
    transition: color 250ms linear;
}

a:hover,
a:focus,
.vlt-post-title a:hover,
.vlt-portfolio-grid-title:hover,
.vlt-portfolio-grid-title a:hover,
.vlt-widget ul li a:hover,
.vlt-post-meta a:hover,
.vlt-post-cats a:hover,
.vlt-post-author a:hover,
.vlt-post-share > a:hover,
.domino-destacada-titulo a:hover,
.vlt-pagination-load-more-btn a:hover,
.vlt-navigation-socials ul li a:hover {
    color: var(--domino-primario);
}

/* En el listado de notas, la tarjeta entera reacciona al pasar el mouse.
   La grilla de portada NO se toca: allí el título ya se revela solo
   sobre la imagen, con el escalonado propio de la plantilla. */
.vlt-post-standard:hover .vlt-post-title a {
    color: var(--domino-primario);
}

/* Los títulos conservan el negro de la plantilla; solo se anima
   la transición para que el viraje a morado del hover sea suave. */
.vlt-post-title a,
.vlt-portfolio-grid-title {
    transition: color 250ms linear;
}

/* Botón primario */
.vlt-btn-primary {
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
}

.vlt-btn-primary:hover {
    background-color: var(--domino-primario-o);
    color: var(--domino-blanco);
}

.vlt-btn-secondary {
    background-color: var(--domino-gris);
    color: var(--domino-grafito);
}

.vlt-btn-secondary:hover {
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
}

/* Subrayado animado de la plantilla (conserva la transición original) */
.vlt-link:after,
.vlt-link.reverse:after {
    background-color: var(--domino-primario);
}

.vlt-link:hover {
    color: var(--domino-primario);
}

/* ------------------------------------------------------------
   Filtros de sección
   ------------------------------------------------------------
   Se respeta ÍNTEGRAMENTE el estilo original de la plantilla
   (tamaño, espaciado, peso, padding y el fondo gris del activo).
   Lo único que cambia es el color del texto al pasar el mouse
   y al quedar seleccionado: de negro a morado.
   ------------------------------------------------------------ */
.vlt-portfolio-grid-filters .cbp-filter-item {
    transition: color 250ms linear;
}

.vlt-portfolio-grid-filters .cbp-filter-item:hover,
.vlt-portfolio-grid-filters .cbp-filter-item.cbp-filter-item-active {
    color: var(--domino-primario);
}

/* Paginación */
.vlt-pagination-buttons ul li.active a,
.vlt-pagination-buttons ul li a:hover {
    background-color: var(--domino-primario);
    border-color: var(--domino-primario);
    color: var(--domino-blanco);
}

/* Menú fullscreen: se conserva el velo negro translúcido original.
   Solo cambia el color del enlace activo/hover, de blanco a morado
   claro (el morado puro no contrasta bien sobre fondo oscuro). */
.vlt-navigation-fullscreen > ul > li:hover > a,
.vlt-navigation-fullscreen > ul > li.current-menu-item > a,
.vlt-navigation-fullscreen .sub-menu li:hover > a {
    color: var(--domino-primario-c);
}

/* Botón volver arriba */
.vlt-back-to-top {
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
}

.vlt-back-to-top:hover {
    background-color: var(--domino-primario-o);
    color: var(--domino-blanco);
}

/* Los títulos de widget quedan tal como los define la plantilla. */

/* ------------------------------------------------------------
   3. HERO — título en morado, como en la maqueta
   ------------------------------------------------------------ */
.vlt-hero-title-inner .vlt-hero-title {
    color: var(--domino-primario);
}

/* El subtítulo conserva el color de la plantilla. */

/* ------------------------------------------------------------
   Video del hero
   ------------------------------------------------------------
   El video se muestra completo, sin recortes: ya trae el logo
   compuesto y cualquier recorte le cortaría parte de la marca.
   El margen superior deja libre la barra fija del encabezado. */
.domino-hero-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--domino-blanco);
    padding-top: 90px;
}

.domino-hero-media {
    display: block;
    width: 100%;
    height: auto;
}

/* En pantallas pequeñas se usa el fotograma fijo en lugar del
   video: los navegadores móviles suelen bloquear la reproducción
   automática, y así no se gastan datos del visitante. */
@media (max-width: 767px) {
    /* El header mide 80px en móvil (90px en escritorio): el relleno
       debe igualarlo o el video queda por debajo de la barra fija. */
    .domino-hero-video {
        padding-top: 80px;
        background-image: url('../img/hero-domino.jpg');
        background-size: cover;
        background-position: center;
        min-height: 240px;
    }

    .domino-hero-media {
        display: none;
    }
}

/* Si el visitante pidió menos animación, se queda la imagen */
@media (prefers-reduced-motion: reduce) {
    .domino-hero-video {
        background-image: url('../img/hero-domino.jpg');
        background-size: cover;
        background-position: center;
        min-height: 300px;
    }

    .domino-hero-media {
        display: none;
    }
}

/* ------------------------------------------------------------
   4. LOGO
   ------------------------------------------------------------ */
.vlt-site-logo img {
    height: 38px;
    width: auto;
    max-width: none; /* con «100%» el banner del encabezado lo aplastaba */
    display: block;
}

/* El logo y los controles nunca ceden ancho: el que se ajusta es el banner del centro */
.vlt-header-left,
.vlt-header-right {
    flex: 0 0 auto;
}

/* En el footer el logo respira un poco más */
.vlt-footer-holder .vlt-site-logo img {
    height: 42px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .vlt-site-logo img {
        height: 30px;
    }

    .vlt-footer-holder .vlt-site-logo img {
        height: 34px;
    }
}

.domino-logo-texto {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--domino-primario);
    line-height: 1;
}

.domino-logo-texto span {
    color: var(--domino-grafito);
}

/* ------------------------------------------------------------
   5. PUBLICIDAD — bloques de banner administrables
   ------------------------------------------------------------ */
.domino-ad {
    margin: 0 auto;
    text-align: center;
}

.domino-ad-seccion {
    padding: 50px 0;
    background-color: var(--domino-blanco);
}

.domino-ad-label {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--domino-gris-medio);
    margin-bottom: 10px;
}

.domino-ad-link {
    display: block;
    overflow: hidden;
    position: relative;
}

.domino-ad img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: opacity 300ms linear, transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.domino-ad-link:hover img {
    opacity: 0.88;
    transform: scale(1.02);
}

/* Banner de borde a borde: la imagen se estira a todo el ancho
   de la pantalla y se recorta en altura si hace falta, para que
   no se deforme en monitores muy anchos. */
.domino-ad-full {
    padding: 0;
}

.domino-ad-full .domino-ad img {
    width: 100%;
    max-width: none;
    max-height: 260px;
    object-fit: cover;
}

.domino-ad-full .domino-ad-label {
    padding-top: 26px;
    margin-bottom: 14px;
}

/* ------------------------------------------------------------
   5b. CARRUSEL DE PUBLICIDAD (ancho completo)
   ------------------------------------------------------------
   Banda de borde a borde que rota entre los anunciantes. El
   título va sobre la imagen, alineado a la izquierda, con un
   degradado que garantiza que se lea sobre cualquier fondo.
   ------------------------------------------------------------ */
.domino-slider {
    position: relative;
    width: 100%;
    background-color: var(--domino-grafito);
    overflow: hidden;
}

.domino-slider-swiper {
    width: 100%;
}

.domino-slider .swiper-slide {
    position: relative;
}

.domino-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
}

/* Velo que oscurece el lado izquierdo para que el título resalte */
.domino-slider .swiper-slide:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.45) 40%,
                rgba(0, 0, 0, 0) 75%);
    z-index: 1;
}

.domino-slider-texto {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 620px;
    padding: 0 40px 0 60px;
}

.domino-slider-etiqueta {
    display: inline-block;
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    margin-bottom: 14px;
}

.domino-slider-titulo {
    margin: 0;
    color: var(--domino-blanco);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Flechas y puntos */
.domino-slider-prev,
.domino-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--domino-blanco);
    font-size: 22px;
    cursor: pointer;
    transition: background-color 250ms linear;
}

.domino-slider-prev:hover,
.domino-slider-next:hover {
    background-color: var(--domino-primario);
}

.domino-slider-prev { right: 74px; }
.domino-slider-next { right: 20px; }

.domino-slider-paginacion {
    position: absolute;
    left: 60px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.domino-slider-paginacion .swiper-pagination-bullet {
    width: 26px;
    height: 3px;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.45);
    opacity: 1;
    cursor: pointer;
    transition: background-color 250ms linear;
}

.domino-slider-paginacion .swiper-pagination-bullet-active {
    background-color: var(--domino-primario);
}

@media (max-width: 991px) {
    .domino-slider .swiper-slide img { height: 280px; }
    .domino-slider-texto { padding-left: 30px; padding-right: 30px; }
    .domino-slider-titulo { font-size: 22px; }
    .domino-slider-paginacion { left: 30px; }
}

@media (max-width: 767px) {
    .domino-slider .swiper-slide img { height: 230px; }

    /* En pantalla estrecha el degradado horizontal deja el texto
       sobre la parte clara de la imagen. Se cambia a vertical:
       oscurece la mitad inferior, que es donde va el título. */
    .domino-slider .swiper-slide:before {
        background: linear-gradient(180deg,
                    rgba(0, 0, 0, 0.15) 0%,
                    rgba(0, 0, 0, 0.55) 55%,
                    rgba(0, 0, 0, 0.8) 100%);
    }

    .domino-slider-texto {
        top: auto;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: none;
        padding: 0 20px 34px;
    }

    .domino-slider-titulo {
        font-size: 17px;
        line-height: 1.3;
        /* Dos líneas como máximo: un título largo taparía la imagen */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .domino-slider-etiqueta {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .domino-slider-prev,
    .domino-slider-next { display: none; }

    /* Los puntos pasan al centro, bajo el texto */
    .domino-slider-paginacion {
        left: 0;
        right: 0;
        bottom: 14px;
        justify-content: center;
    }

    .domino-ad-full .domino-ad img { max-height: 160px; }
}

/* Banner del sidebar */
.vlt-widget .domino-ad {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   6. VIDEO DESTACADO
   ------------------------------------------------------------ */
/* Solo el reproductor, sin título ni descripción: la sección no
   necesita relleno y el video queda de borde a borde. */
.domino-video-seccion {
    padding: 0;
    background-color: var(--domino-grafito);
}

.domino-video-seccion .domino-seccion-titulo,
.domino-video-seccion .domino-seccion-bajada {
    color: var(--domino-blanco);
}

/* El video se extiende de borde a borde de la pantalla.
   Se limita la altura para que en monitores anchos no ocupe
   más de lo razonable; el recorte se reparte a los lados. */
.domino-video-full {
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
}

.domino-video-marco {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;   /* 16:9 */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.domino-video-marco iframe,
.domino-video-marco video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.domino-video-desc {
    color: rgba(255, 255, 255, 0.75);
    margin-top: 20px;
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   7. TÍTULOS DE SECCIÓN
   ------------------------------------------------------------ */
.domino-seccion-encabezado {
    text-align: center;
    margin-bottom: 45px;
}

.domino-seccion-titulo {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--domino-grafito);
    margin: 0;
}

.domino-seccion-titulo:after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--domino-primario);
    margin: 14px auto 0;
}

.domino-seccion-bajada {
    margin-top: 12px;
    margin-bottom: 0;
    color: var(--domino-gris-medio);
}

/* ------------------------------------------------------------
   8. TARJETAS DE NOTICIA (sobre la grilla original)
   ------------------------------------------------------------ */
/* La categoría que aparece sobre la imagen en el hover: solo color.
   El tamaño, la posición y el escalonado son los de la plantilla. */
.vlt-portfolio-grid-cat {
    color: var(--domino-primario);
    margin-top: 8px;
}

/* ------------------------------------------------------------
   Título sobre la imagen (hover de la grilla)
   ------------------------------------------------------------
   La plantilla pensó este bloque para títulos de una palabra
   ("Logo", "Renner"), así que lo deja a todo el ancho y sin
   márgenes. Con titulares de noticia el texto llega al borde de
   la tarjeta y el interlineado del body (1.9) lo separa demasiado.
   Aquí se le da aire a los lados, se ciñe el interlineado y se
   limita a tres líneas, para que quede centrado y compacto.
   ------------------------------------------------------------ */
.vlt-portfolio-style2 .vlt-portfolio-grid-content {
    padding: 0 28px;
}

.vlt-portfolio-style2 .vlt-portfolio-grid-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767px) {
    .vlt-portfolio-style2 .vlt-portfolio-grid-content {
        padding: 0 20px;
    }

    .vlt-portfolio-style2 .vlt-portfolio-grid-title {
        font-size: 15px;
    }
}

.domino-nota-fecha {
    font-size: 12px;
    color: var(--domino-gris-medio);
    margin-top: 4px;
}

/* Etiqueta de categoría sobre la imagen */
.domino-etiqueta {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
}

.vlt-portfolio-grid-image {
    position: relative;
}

/* ------------------------------------------------------------
   9. NOTICIA DESTACADA DE PORTADA
   ------------------------------------------------------------ */
.domino-destacada {
    margin-bottom: 60px;
}

.domino-destacada-img {
    position: relative;
    overflow: hidden;
}

.domino-destacada-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.domino-destacada-img:hover img {
    transform: scale(1.04);
}

.domino-destacada-cuerpo {
    padding: 30px 0 0;
}

.domino-destacada-titulo {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    margin: 12px 0;
}

.domino-destacada-titulo a {
    color: var(--domino-grafito);
}

.domino-destacada-titulo a:hover {
    color: var(--domino-primario);
}

@media (min-width: 768px) {
    .domino-destacada-cuerpo {
        padding: 0 0 0 40px;
    }
}

/* ------------------------------------------------------------
   10. CINTILLO DE ÚLTIMA HORA (ancho completo)
   ------------------------------------------------------------
   Franja morada de borde a borde con los titulares desplazándose
   en bucle. La lista se imprime dos veces en el HTML y la pista
   se mueve el 50% de su ancho: al terminar la primera copia, la
   segunda ya ocupa su lugar y el giro se ve continuo.
   ------------------------------------------------------------ */
.domino-cintillo {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--domino-primario);
    overflow: hidden;
}

.domino-cintillo-etiqueta {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background-color: var(--domino-blanco);
    color: var(--domino-primario);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 22px;
    white-space: nowrap;
}

.domino-cintillo-pista {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    animation: domino-desplazar 60s linear infinite;
}

.domino-cintillo-grupo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.domino-cintillo-pista a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--domino-blanco);
    font-size: 14px;
    padding: 16px 0;
    margin-right: 45px;
    white-space: nowrap;
}

.domino-cintillo-pista a:hover {
    color: rgba(255, 255, 255, 0.72);
}

.domino-cintillo-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2px 8px;
}

/* Al pasar el mouse se detiene, para poder leer y hacer clic */
.domino-cintillo:hover .domino-cintillo-pista {
    animation-play-state: paused;
}

@keyframes domino-desplazar {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Si el visitante pidió menos animación, el cintillo se queda
   quieto y los titulares se recorren con scroll horizontal. */
@media (prefers-reduced-motion: reduce) {
    .domino-cintillo-pista {
        animation: none;
        overflow-x: auto;
    }

    .domino-cintillo-grupo[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 767px) {
    .domino-cintillo-etiqueta {
        font-size: 10px;
        padding: 13px 12px;
        letter-spacing: 1px;
    }

    .domino-cintillo-pista a {
        font-size: 13px;
        margin-right: 26px;
        padding: 13px 0;
    }

    /* Menos ancho visible: se acorta el ciclo para que los
       titulares no tarden demasiado en pasar. */
    .domino-cintillo-pista {
        animation-duration: 35s;
    }

    .domino-cintillo-cat {
        display: none;
    }
}

/* ------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------
   Se conserva el footer gris claro (#efefef) de la plantilla.
   Lo único que cambia es el hover del menú: de negro a morado.
   La especificidad iguala la de style.css, que define el enlace
   con la cadena completa .vlt-footer-holder .vlt-footer-inner…
   ------------------------------------------------------------ */
.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul li a {
    transition: color 250ms linear;
}

.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul li a:hover {
    color: var(--domino-primario);
}

/* Enlaces del copyright */
.vlt-footer-copyright a:hover {
    color: var(--domino-primario);
}

/* ------------------------------------------------------------
   Acceso discreto al panel
   ------------------------------------------------------------
   El símbolo © del copyright enlaza al panel. Para el visitante
   es texto normal: hereda el color, no se subraya y no cambia
   el cursor. Solo al dejar el mouse encima vira a morado, para
   que quien lo conoce confirme que lo tiene apuntado.

   Nota: esto es comodidad, no seguridad. El enlace está en el
   HTML y cualquiera puede verlo en el código fuente; lo que
   protege el panel es el login.
   ------------------------------------------------------------ */
.domino-acceso {
    color: inherit;
    text-decoration: none;
    cursor: default;
    transition: color 250ms linear;
}

.domino-acceso:hover,
.domino-acceso:focus {
    color: var(--domino-primario);
    cursor: pointer;
}

/* ------------------------------------------------------------
   12. FORMULARIOS
   ------------------------------------------------------------ */
.vlt-form-control:focus,
.form-control:focus {
    border-color: var(--domino-primario);
    outline: none;
}

.domino-alerta {
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14px;
    background-color: rgba(107, 13, 224, 0.06);
    color: var(--domino-grafito);
}

.domino-alerta-error {
    background-color: rgba(211, 47, 47, 0.06);
    color: #a01c1c;
}

/* ------------------------------------------------------------
   13. VACÍOS
   ------------------------------------------------------------ */
.domino-vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--domino-gris-medio);
}

.domino-vacio i {
    font-size: 40px;
    color: var(--domino-gris);
    display: block;
    margin-bottom: 16px;
}

/* ------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .domino-destacada-titulo {
        font-size: 18px;
    }

    .domino-seccion-titulo {
        font-size: 18px;
    }

    .domino-video-seccion,
    .domino-ad-seccion {
        padding: 50px 0;
    }
}

/* ============================================================
   ESTRUCTURA DE LA PÁGINA WEB (documento de octubre 2026)
   ------------------------------------------------------------
   Encabezado con buscador, redes y publicidad; ventana emergente;
   portada como en las fotos de referencia; bloque «Dominó»;
   política editorial y etiquetas editoriales de las notas.
   ============================================================ */

/* ------------------------------------------------------------
   15. ENCABEZADO — logo · publicidad · redes · buscador · menú
   ------------------------------------------------------------ */
.vlt-header-inner {
    position: relative;
}

/* Banner del encabezado: ocupa el centro, nunca empuja al logo
   ni al menú. Solo en escritorio: en móvil no hay espacio. */
.domino-header-ad {
    flex: 0 1 728px;
    min-width: 0;
    margin: 0 30px;
    text-align: center;
    line-height: 1;
}

.domino-header-ad .domino-ad-label {
    font-size: 9px;
    margin-bottom: 4px;
}

.domino-header-ad img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 60px;
    margin: 0 auto;
    transition: opacity 250ms linear;
}

.domino-header-ad a:hover img {
    opacity: 0.85;
}

@media (max-width: 991px) {
    .domino-header-ad {
        display: none;
    }
}

/* Redes sociales del encabezado */
.domino-header-redes {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 18px 0 0;
    padding: 0;
}

.domino-header-redes li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
    color: var(--domino-grafito);
    transition: color 250ms linear;
}

.domino-header-redes li a:hover {
    color: var(--domino-primario);
}

@media (max-width: 1199px) {
    .domino-header-redes {
        display: none;
    }
}

/* El icono de TikTok es SVG: se iguala al tamaño de FontAwesome */
.domino-icono-svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
}

/* Botón del buscador */
.domino-buscar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--domino-grafito);
    font-size: 16px;
    cursor: pointer;
    transition: color 250ms linear;
    /* Deja sitio a la palabra MENÚ que acompaña al botón del menú */
    margin-right: 78px;
}

.domino-buscar-toggle:hover,
.domino-buscando .domino-buscar-toggle {
    color: var(--domino-primario);
}

/* La palabra MENÚ de la plantilla queda siempre visible, para que
   el menú de navegación se reconozca junto al buscador. */
.vlt-header-right .vlt-menu-toggle::before {
    opacity: 1;
    transform: none;
}

@media (max-width: 575px) {
    .domino-buscar-toggle {
        margin-right: 18px;
    }

    .vlt-header-right .vlt-menu-toggle::before {
        display: none;
    }
}

/* Panel del buscador: se despliega bajo la barra del encabezado */
.domino-buscador {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--domino-blanco);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 200ms linear, transform 200ms linear, visibility 0s linear 200ms;
}

.domino-buscando {
    background-color: var(--domino-blanco);
}

.domino-buscando .domino-buscador {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms linear, transform 200ms linear;
}

.domino-buscador-form {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--domino-gris);
}

.domino-buscador-form > .fa {
    color: var(--domino-gris-medio);
}

.domino-buscador-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font-size: 18px;
    color: var(--domino-texto);
}

.domino-buscador-form .vlt-btn {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   16. VENTANA EMERGENTE DE PUBLICIDAD
   ------------------------------------------------------------ */
.domino-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 300ms linear;
}

.domino-popup[hidden] {
    display: none;
}

.domino-popup.is-visible {
    opacity: 1;
}

.domino-popup-velo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(20, 20, 26, 0.6);
}

.domino-popup-caja {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 18px 18px 22px;
    background-color: var(--domino-blanco);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(16px);
    transition: transform 300ms ease;
}

.domino-popup.is-visible .domino-popup-caja {
    transform: none;
}

.domino-popup-cerrar {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 250ms linear;
}

.domino-popup-cerrar:hover {
    background-color: var(--domino-primario-o);
}

.domino-popup .domino-ad img {
    width: 100%;
}

@media (max-width: 575px) {
    .domino-popup-cerrar {
        top: 6px;
        right: 6px;
    }
}

/* ------------------------------------------------------------
   17. PORTADA — como en las fotos de referencia
   ------------------------------------------------------------ */

/* Tarjeta translúcida sobre la imagen del hero, con el título
   y el subtítulo en morado. */
.vlt-hero-title-inner {
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    max-width: 90%;
}

.vlt-hero-title-inner .vlt-hero-subtitle {
    color: var(--domino-primario);
}

@media (max-width: 575px) {
    .vlt-hero-title-inner {
        padding: 36px 26px;
    }
}

/* Mosaico de noticias en blanco y negro, como en la referencia */
.vlt-portfolio-grid .vlt-portfolio-grid-image img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* Etiquetas sobre la imagen del mosaico */
.domino-etiqueta-desarrollo {
    background-color: #d32f2f;
}

.domino-etiqueta-patrocinado {
    background-color: var(--domino-grafito);
}

/* ------------------------------------------------------------
   18. BLOQUE «DOMINÓ» DE LA PORTADA
   ------------------------------------------------------------ */
.domino-institucional {
    padding: 100px 0;
    background-color: var(--domino-gris-claro);
}

.domino-pilar {
    text-align: center;
    padding: 10px 20px 30px;
}

.domino-pilar-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--domino-primario);
    margin-bottom: 8px;
}

.domino-pilar-titulo {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--domino-grafito);
    margin: 0 0 10px;
}

.domino-pilar p {
    color: var(--domino-gris-medio);
    margin: 0;
}

.domino-lema {
    max-width: 720px;
    margin: 30px auto 40px;
    padding: 0;
    border: 0;
    text-align: center;
}

.domino-lema p {
    font-size: 24px;
    line-height: 1.5;
    color: var(--domino-grafito);
}

.domino-institucional-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 767px) {
    .domino-institucional {
        padding: 70px 0;
    }

    .domino-lema p {
        font-size: 18px;
    }
}

/* ------------------------------------------------------------
   19. PÁGINAS INSTITUCIONALES
   ------------------------------------------------------------ */
.domino-texto-institucional p:first-child {
    font-size: 20px;
    line-height: 1.7;
    color: var(--domino-grafito);
}

.domino-texto-enlace {
    margin-top: 40px;
}

/* Política editorial */
.domino-politica h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--domino-grafito);
    margin: 50px 0 18px;
    padding-top: 22px;
    border-top: 1px solid var(--domino-gris);
    /* La barra fija del encabezado no tapa la sección al saltar desde el índice */
    scroll-margin-top: 110px;
}

.domino-politica h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.domino-politica ul li {
    margin-bottom: 6px;
}

.domino-politica-indice {
    position: sticky;
    top: 120px;
}

.domino-politica-indice ol {
    margin: 0;
    padding-left: 20px;
}

.domino-politica-indice li {
    margin-bottom: 6px;
    font-size: 14px;
}

.domino-politica-indice a {
    color: var(--domino-grafito);
}

.domino-politica-indice a:hover {
    color: var(--domino-primario);
}

.domino-politica-pie {
    margin-top: 50px;
    padding: 30px;
    background-color: var(--domino-gris-claro);
    text-align: center;
}

/* Footer: enlaces institucionales y redes */
.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul.domino-footer-institucional {
    margin-top: 10px;
}

.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul.domino-footer-institucional li a {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--domino-gris-medio);
}

.domino-footer-redes {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    gap: 6px;
}

.domino-footer-redes li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 15px;
    color: var(--domino-grafito);
    transition: color 250ms linear;
}

.domino-footer-redes li a:hover {
    color: var(--domino-primario);
}

/* ------------------------------------------------------------
   20. ETIQUETAS Y AVISOS EDITORIALES DE LA NOTA
   ------------------------------------------------------------
   La política editorial pide diferenciar información, análisis,
   opinión y contenido pagado, avisar cuando una nota está en
   desarrollo y dar visibilidad a las rectificaciones.
   ------------------------------------------------------------ */
.domino-etiquetas-nota {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.vlt-hero-title-inner .domino-etiquetas-nota {
    justify-content: center;
}

.domino-etiqueta-linea {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 10px;
    color: var(--domino-blanco);
    background-color: var(--domino-primario);
}

.domino-etiqueta-linea.domino-etiqueta-desarrollo {
    background-color: #d32f2f;
}

.domino-etiqueta-linea.domino-etiqueta-patrocinado {
    background-color: var(--domino-grafito);
}

.domino-aviso-nota {
    padding: 16px 20px;
    margin-bottom: 26px;
    background-color: rgba(107, 13, 224, 0.06);
    font-size: 15px;
}

.domino-aviso-nota strong {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--domino-primario);
    margin-bottom: 4px;
}

.domino-aviso-nota p {
    margin: 0;
}

.domino-aviso-desarrollo {
    background-color: rgba(211, 47, 47, 0.06);
}

.domino-aviso-desarrollo strong {
    color: #b71c1c;
}

.domino-aviso-patrocinado {
    background-color: var(--domino-gris-claro);
}

.domino-aviso-patrocinado strong {
    color: var(--domino-grafito);
}

.domino-descargo {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--domino-gris);
    font-size: 14px;
    font-style: italic;
    color: var(--domino-gris-medio);
}

/* ============================================================
   21. ESQUINAS REDONDEADAS — ninguna caja con esquinas rectas
   ------------------------------------------------------------
   Toma la forma del isotipo de Dominó: un rectángulo de esquinas
   suaves. Cuatro radios, de menor a mayor, según el tamaño de la
   pieza; para cambiar la redondez de todo el sitio basta con
   tocar estos valores.

   Las bandas que antes iban de borde a borde (video de portada,
   cintillo, publicidad, carrusel, video destacado y heros) pasan
   a ser paneles flotantes con un margen lateral: así también
   pueden llevar esquinas redondeadas.
   ============================================================ */
:root {
    --domino-radio-xs: 6px;    /* etiquetas y chips pequeños */
    --domino-radio-s:  10px;   /* botones, campos, pestañas */
    --domino-radio:    16px;   /* tarjetas, imágenes, banners, video */
    --domino-radio-l:  24px;   /* heros, paneles grandes, ventanas */

    --domino-margen:   32px;   /* margen lateral de los paneles flotantes */
    --domino-header-h: 90px;   /* alto de la barra fija del encabezado */
    --domino-sombra:   0 10px 30px rgba(43, 43, 51, 0.08);
}

@media (max-width: 991px) {
    :root { --domino-margen: 20px; }
}

@media (max-width: 767px) {
    :root {
        --domino-margen:   12px;
        --domino-header-h: 80px;
        --domino-radio:    14px;
        --domino-radio-l:  18px;
    }
}

/* ---------- Controles ---------- */
.vlt-btn,
button,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select,
.vlt-form-control,
.form-control {
    border-radius: var(--domino-radio-s);
}

/* El campo del buscador del encabezado va sin caja propia: la caja
   es el formulario completo. */
.domino-buscador-form input {
    border-radius: 0;
}

.vlt-portfolio-grid-filters .cbp-filter-item {
    border-radius: var(--domino-radio-s);
}

.vlt-pagination-buttons ul li a {
    border-radius: var(--domino-radio-s);
}

.vlt-back-to-top {
    border-radius: var(--domino-radio-s);
}

.vlt-post-share > a,
.vinero_widget_socials > a,
.tooltipster-sidetip.tooltipster-noir .tooltipster-box {
    border-radius: var(--domino-radio-xs);
}

.domino-buscar-toggle,
.domino-header-redes li a,
.domino-footer-redes li a {
    border-radius: var(--domino-radio-s);
    transition: color 250ms linear, background-color 250ms linear;
}

.domino-buscar-toggle:hover,
.domino-header-redes li a:hover,
.domino-footer-redes li a:hover {
    background-color: rgba(107, 13, 224, 0.08);
}

/* ---------- Etiquetas ---------- */
.domino-etiqueta,
.domino-etiqueta-linea,
.domino-slider-etiqueta,
.domino-cintillo-cat {
    border-radius: var(--domino-radio-xs);
}

/* ---------- Imágenes y tarjetas ---------- */
.vlt-portfolio-grid-image,
.vlt-post-thumbnail,
.domino-destacada-img {
    border-radius: var(--domino-radio);
    overflow: hidden;
    /* Safari no recorta bien a los hijos que se animan con transform */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.vlt-post-thumbnail img,
.vlt-post-content img,
.vlt-post-single img,
.domino-ad img,
.domino-header-ad img,
.vlt-widget img {
    border-radius: var(--domino-radio);
}

.domino-header-ad img {
    border-radius: var(--domino-radio-s);
}

.domino-video-marco {
    border-radius: var(--domino-radio);
}

/* ---------- Avisos, citas y cajas de texto ---------- */
.domino-alerta,
.domino-aviso-nota,
.domino-politica-pie {
    border-radius: var(--domino-radio);
}

/* La cita deja la raya lateral y pasa a ser un panel suave */
.vlt-post-content blockquote,
.vlt-post-single blockquote,
.domino-politica blockquote {
    border-left: 0;
    border-radius: var(--domino-radio);
    background-color: rgba(107, 13, 224, 0.05);
    padding: 26px 28px 26px 64px;
}

.vlt-post-content blockquote::before,
.vlt-post-single blockquote::before,
.domino-politica blockquote::before {
    top: 18px;
    left: 22px;
    color: var(--domino-primario);
}

/* La firma de opinión/análisis: panel en lugar de una raya */
.domino-descargo {
    border-top: 0;
    border-radius: var(--domino-radio);
    background-color: var(--domino-gris-claro);
    padding: 16px 20px;
}

/* Secciones de la política: una barrita redondeada en lugar de la
   línea divisoria recta */
.domino-politica h2 {
    border-top: 0;
    padding-top: 0;
    position: relative;
}

.domino-politica h2::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--domino-primario);
    margin-bottom: 16px;
}

.domino-seccion-titulo:after {
    border-radius: 3px;
}

/* ---------- Paneles flotantes (antes de borde a borde) ---------- */
.domino-hero-video {
    padding: var(--domino-header-h) var(--domino-margen) 0;
}

.domino-hero-media,
.domino-hero-poster {
    border-radius: var(--domino-radio-l);
}

/* Fotograma de respaldo del video (móvil y «reducir movimiento").
   Antes era un fondo del contenedor; como imagen puede redondearse. */
.domino-hero-poster {
    display: none;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .domino-hero-video {
        padding-top: var(--domino-header-h);
        background-image: none;
        min-height: 0;
    }

    .domino-hero-poster {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .domino-hero-video {
        background-image: none;
        min-height: 0;
    }

    .domino-hero-poster {
        display: block;
    }
}

.domino-cintillo,
.domino-slider,
.domino-video-full,
.domino-institucional {
    width: auto;
    margin: var(--domino-margen) var(--domino-margen) 0;
    border-radius: var(--domino-radio-l);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.domino-cintillo {
    border-radius: var(--domino-radio);
}

/* La etiqueta «Última hora» queda como una píldora blanca dentro
   de la franja, separada del borde. */
.domino-cintillo-etiqueta {
    margin: 6px;
    padding: 10px 16px;
    border-radius: var(--domino-radio-s);
}

.domino-video-seccion {
    background-color: transparent;
}

.domino-ad-full {
    padding: var(--domino-margen) var(--domino-margen) 0;
}

.domino-ad-full .domino-ad img {
    border-radius: var(--domino-radio-l);
}

.domino-ad-full .domino-ad-label {
    padding-top: 0;
}

.domino-slider-prev,
.domino-slider-next {
    border-radius: var(--domino-radio-s);
}

.domino-slider-paginacion .swiper-pagination-bullet {
    border-radius: 3px;
}

.domino-institucional {
    margin-bottom: var(--domino-margen);
}

/* Hero de las páginas internas: panel con esquinas redondeadas bajo
   la barra del encabezado. Se recorta con clip-path porque la imagen
   del parallax usa posición fija y overflow no la recortaría. */
.vlt-hero-title-holder {
    width: auto;   /* la plantilla fija 100%: con margen lateral se saldría */
    margin: var(--domino-header-h) var(--domino-margen) 0;
    padding-top: 100px;
    padding-bottom: 100px;
    min-height: min(70vh, 720px);
    border-radius: var(--domino-radio-l);
    -webkit-clip-path: inset(0 round var(--domino-radio-l));
    clip-path: inset(0 round var(--domino-radio-l));
}

.vlt-hero-title-inner {
    border-radius: var(--domino-radio-l);
}

/* El contenido se despega del footer con esquinas redondeadas: al
   hacer scroll hasta el final, el footer fijo aparece por detrás.
   overflow: clip recorta sin romper el «sticky» del índice. */
.vlt-footer-fixed .vlt-content-holder {
    /* Sin tocar position/z-index: la plantilla ya lo deja (60) sobre el footer (50) */
    border-radius: 0 0 var(--domino-radio-l) var(--domino-radio-l);
    overflow: clip;
    box-shadow: 0 18px 40px rgba(43, 43, 51, 0.08);
}

/* ---------- Encabezado ---------- */
/* El buscador se despliega como una tarjeta flotante */
.domino-buscador {
    top: calc(100% + 8px);
    left: var(--domino-margen);
    right: var(--domino-margen);
    border-radius: var(--domino-radio);
    box-shadow: 0 16px 40px rgba(43, 43, 51, 0.14);
}

.domino-buscador-form {
    border-top: 0;
    padding: 14px 6px 14px 10px;
}

.domino-buscando {
    background-color: transparent;
}

.vlt-header-holder.is-white.domino-buscando,
.vlt-header-holder.domino-buscando {
    background-color: var(--domino-blanco);
}

/* ---------- Ventana emergente ---------- */
.domino-popup-caja {
    border-radius: var(--domino-radio-l);
}

.domino-popup-cerrar {
    border-radius: var(--domino-radio-s);
}

/* ---------- Bloque «Dominó» ---------- */
.domino-pilar {
    height: 100%;
    padding: 34px 26px;
    background-color: var(--domino-blanco);
    border-radius: var(--domino-radio);
    box-shadow: var(--domino-sombra);
}

.domino-institucional .row {
    row-gap: 20px;
}

/* ============================================================
   22. RESPONSIVE — móvil, tableta y escritorio
   ------------------------------------------------------------
   Criterios: tipografía fluida, objetivos táctiles de 44px,
   nada que dependa del hover en pantallas táctiles, y patrones
   propios de móvil (pestañas deslizables, hoja inferior).
   ============================================================ */

/* ---------- Foco visible para teclado ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.cbp-filter-item:focus-visible,
.vlt-menu-toggle:focus-visible {
    outline: 2px solid var(--domino-primario);
    outline-offset: 3px;
    border-radius: var(--domino-radio-xs);
}

/* ---------- Tipografía fluida ---------- */
.vlt-hero-title-inner .vlt-hero-title {
    font-size: clamp(20px, 2.2vw + 10px, 26px);
    line-height: 1.3;
}

.domino-seccion-titulo {
    font-size: clamp(18px, 1vw + 14px, 22px);
}

/* El lema no usa la comilla flotante de la plantilla (se montaba
   sobre el texto centrado): lleva comillas tipográficas en morado. */
.domino-lema::before {
    content: none;
}

.domino-lema p::before { content: '\201C'; color: var(--domino-primario); }
.domino-lema p::after  { content: '\201D'; color: var(--domino-primario); }

.domino-lema p {
    font-size: clamp(18px, 1.2vw + 13px, 24px);
}

/* ---------- Mosaico: títulos visibles en pantallas táctiles ----------
   La plantilla solo revela el título al pasar el mouse; en un
   teléfono eso no existe y quedarían fotos sin titular. Donde no
   hay hover, el título se muestra siempre al pie de la imagen,
   sobre un degradado que garantiza la lectura. */
@media (hover: none), (max-width: 991px) {
    .vlt-portfolio-style2 .vlt-portfolio-grid-link::before {
        opacity: 1;
        background: linear-gradient(180deg,
                    rgba(20, 20, 26, 0) 40%,
                    rgba(20, 20, 26, 0.55) 70%,
                    rgba(20, 20, 26, 0.85) 100%);
    }

    .vlt-portfolio-style2 .vlt-portfolio-grid-content {
        top: auto;
        bottom: 0;
        transform: none;
        text-align: left;
        padding: 0 18px 16px;
    }

    .vlt-portfolio-style2 .vlt-portfolio-grid-content h5,
    .vlt-portfolio-style2 .vlt-portfolio-grid-content p {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .vlt-portfolio-style2 .vlt-portfolio-grid-title,
    .vlt-portfolio-style2 .vlt-portfolio-grid-title a {
        color: var(--domino-blanco);
    }

    .vlt-portfolio-style2 .vlt-portfolio-grid-content p {
        color: #cdb3ff;
    }
}

/* ---------- Pestañas de sección: fila deslizable en móvil ---------- */
@media (max-width: 767px) {
    .vlt-portfolio-grid-filters {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin: 0 calc(var(--domino-margen) * -1) 30px;
        padding: 2px var(--domino-margen) 6px;
        /* Se desvanecen los bordes para indicar que hay más pestañas */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
    }

    .vlt-portfolio-grid-filters::-webkit-scrollbar {
        display: none;
    }

    .vlt-portfolio-grid-filters .cbp-filter-item {
        flex: 0 0 auto;
        margin: 0;
        padding: 12px 14px;
        white-space: nowrap;
        scroll-snap-align: start;
        background-color: var(--domino-gris-claro);
    }

    .vlt-portfolio-grid-filters .cbp-filter-item.cbp-filter-item-active {
        background-color: var(--domino-primario);
        color: var(--domino-blanco);
    }
}

/* ---------- Encabezado ---------- */
@media (max-width: 767px) {
    .domino-buscar-toggle {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* El botón del menú es pequeño (18×14): se amplía su zona táctil */
    .vlt-menu-toggle::after {
        content: '';
        position: absolute;
        top: -15px;
        right: -13px;
        bottom: -15px;
        left: -13px;
    }

    .domino-buscador-form {
        gap: 10px;
    }

    .domino-buscador-form input {
        font-size: 16px; /* 16px evita el zoom automático de iOS */
    }

    .domino-buscador-form .vlt-btn {
        padding: 8px 16px;
    }
}

/* ---------- Heros ---------- */
@media (max-width: 767px) {
    .vlt-hero-title-holder {
        padding: 56px 0;
        min-height: 300px;
    }

    .vlt-hero-title-inner {
        max-width: calc(100% - 32px);
        min-width: 0;
        padding: 30px 22px;
    }

    .vlt-hero-title-inner .vlt-post-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
        font-size: 13px;
    }

    .vlt-hero-title-inner .vlt-post-meta span + span {
        margin-left: 0;
    }
}

/* ---------- Cintillo ---------- */
@media (max-width: 767px) {
    .domino-cintillo-etiqueta {
        margin: 5px;
        padding: 9px 10px;
    }
}

/* ---------- Carrusel de publicidad ---------- */
@media (max-width: 767px) {
    .domino-slider .swiper-slide img {
        height: 220px;
    }
}

/* ---------- Botones: objetivo táctil y bloques apilados ---------- */
@media (max-width: 767px) {
    .vlt-btn {
        min-height: 44px;
        justify-content: center;
    }

    .domino-institucional-enlaces {
        flex-direction: column;
        align-items: stretch;
        max-width: 360px;
        margin: 0 auto;
    }

    .vlt-pagination-load-more-btn .vlt-btn,
    .domino-politica-pie .vlt-btn,
    .domino-texto-enlace .vlt-btn {
        width: 100%;
    }
}

/* ---------- Bloque «Dominó» ---------- */
@media (max-width: 767px) {
    .domino-institucional {
        padding: 56px 0;
    }

    .domino-pilar {
        padding: 26px 22px;
    }
}

/* ---------- Ventana emergente: hoja inferior en móvil ---------- */
@media (max-width: 575px) {
    .domino-popup {
        align-items: flex-end;
        padding: 0;
    }

    .domino-popup-caja {
        max-width: none;
        border-radius: var(--domino-radio-l) var(--domino-radio-l) 0 0;
        padding: 26px 16px calc(18px + env(safe-area-inset-bottom));
        transform: translateY(100%);
    }

    .domino-popup.is-visible .domino-popup-caja {
        transform: none;
    }

    /* Asa de la hoja, como en las apps */
    .domino-popup-caja::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 4px;
        background-color: var(--domino-gris);
    }

    .domino-popup-cerrar {
        top: 14px;
        right: 12px;
        width: 40px;
        height: 40px;
        background-color: rgba(20, 20, 26, 0.55);
    }

    .domino-popup .domino-ad img {
        max-height: 62vh;
        object-fit: cover;
    }
}

/* ---------- Política editorial: índice plegable en móvil ---------- */
.domino-politica-indice-movil {
    display: none;
}

@media (max-width: 767px) {
    .domino-politica-indice-movil {
        display: block;
        margin-bottom: 30px;
        background-color: var(--domino-gris-claro);
        border-radius: var(--domino-radio);
    }

    .domino-politica-indice-movil summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 0 18px;
        font-weight: 700;
        color: var(--domino-grafito);
        cursor: pointer;
        list-style: none;
    }

    .domino-politica-indice-movil summary::-webkit-details-marker {
        display: none;
    }

    .domino-politica-indice-movil summary::after {
        content: '\f107';
        font-family: 'FontAwesome';
        color: var(--domino-primario);
        transition: transform 200ms linear;
    }

    .domino-politica-indice-movil[open] summary::after {
        transform: rotate(180deg);
    }

    .domino-politica-indice-movil ol {
        margin: 0;
        padding: 0 18px 16px 38px;
    }

    .domino-politica-indice-movil li {
        padding: 6px 0;
    }

    .domino-politica-indice-movil a {
        color: var(--domino-grafito);
    }
}

/* ---------- Nota: textos y compartir ---------- */
@media (max-width: 767px) {
    .vlt-post-single {
        font-size: 16px;
    }

    .vlt-post-content blockquote,
    .vlt-post-single blockquote,
    .domino-politica blockquote {
        padding: 22px 20px 22px 52px;
    }

    .vlt-post-content blockquote::before,
    .vlt-post-single blockquote::before,
    .domino-politica blockquote::before {
        left: 16px;
    }

    .vlt-post-share {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .vlt-post-share > a {
        min-height: 44px;
        margin: 0;
    }
}

/* ---------- Footer ---------- */
@media (max-width: 767px) {
    .vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 4px;
    }

    .vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul li {
        margin: 0;
    }

    .vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul li a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 8px;
    }

    .domino-footer-redes li a {
        width: 44px;
        height: 44px;
    }
}

/* ---------- Botón volver arriba ---------- */
@media (max-width: 767px) {
    .vlt-back-to-top {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }
}

/* Las columnas de Bootstrap no son flex aquí: se separan a mano */
@media (max-width: 767px) {
    .domino-institucional .col-md-4 + .col-md-4 {
        margin-top: 14px;
    }
}

/* ============================================================
   24. PESTAÑAS DE SECCIÓN EN UNA SOLA LÍNEA
   ------------------------------------------------------------
   Nunca saltan de línea: centradas cuando caben y deslizables
   cuando no. Los márgenes automáticos del primer y último
   elemento centran la fila sin impedir el desplazamiento (con
   justify-content: center la primera pestaña quedaría cortada).
   ============================================================ */
.vlt-portfolio-grid-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.vlt-portfolio-grid-filters::-webkit-scrollbar {
    display: none;
}

.vlt-portfolio-grid-filters .cbp-filter-item {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    padding: 10px 14px;
    letter-spacing: 1.5px;
}

.vlt-portfolio-grid-filters .cbp-filter-item:first-child {
    margin-left: auto;
}

.vlt-portfolio-grid-filters .cbp-filter-item:last-child {
    margin-right: auto;
}

@media (max-width: 767px) {
    .vlt-portfolio-grid-filters {
        gap: 8px;
    }

    .vlt-portfolio-grid-filters .cbp-filter-item {
        padding: 12px 14px;
    }

    /* En móvil la fila arranca pegada al margen, como en las apps */
    .vlt-portfolio-grid-filters .cbp-filter-item:first-child {
        margin-left: 0;
    }
}

/* ============================================================
   25. AVISOS SIN RAYA LATERAL
   ------------------------------------------------------------
   En lugar del recuadro con filo de color a la izquierda, cada
   aviso lleva una ficha con icono: un cuadrado de esquinas
   suaves, la misma forma del isotipo de Dominó. El fondo es un
   tinte muy leve del color del aviso, sin bordes.
   ============================================================ */
blockquote {
    border-left: 0;
}

.domino-aviso-nota,
.domino-alerta {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 26px;
    border: 0;
    border-left: 0;
    border-radius: var(--domino-radio);
    background-color: rgba(107, 13, 224, 0.06);
    color: var(--domino-grafito);
}

.domino-aviso-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-size: 18px;
}

.domino-aviso-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
}

.domino-aviso-nota strong,
.domino-alerta strong {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--domino-grafito);
}

.domino-aviso-nota p,
.domino-alerta p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Variantes: solo cambia el tinte y la ficha */
.domino-aviso-desarrollo {
    background-color: rgba(211, 47, 47, 0.06);
}

.domino-aviso-desarrollo .domino-aviso-icono {
    background-color: #d32f2f;
}

.domino-aviso-desarrollo strong {
    color: #b71c1c;
}

.domino-aviso-patrocinado {
    background-color: var(--domino-gris-claro);
}

.domino-aviso-patrocinado .domino-aviso-icono {
    background-color: var(--domino-grafito);
}

.domino-aviso-patrocinado strong {
    color: var(--domino-grafito);
}

.domino-alerta-error {
    background-color: rgba(211, 47, 47, 0.06);
    color: #a01c1c;
}

.domino-alerta-error .domino-aviso-icono {
    background-color: #d32f2f;
}

@media (max-width: 575px) {
    .domino-aviso-nota,
    .domino-alerta {
        gap: 12px;
        padding: 16px;
    }

    .domino-aviso-icono {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* Pestañas en tableta y laptop chica: algo más compactas para que
   entren las seis; si aun así no caben, el borde derecho se
   desvanece para indicar que la fila se desliza. */
@media (min-width: 768px) and (max-width: 1199px) {
    .vlt-portfolio-grid-filters .cbp-filter-item {
        font-size: 11px;
        letter-spacing: 1px;
        padding: 9px 10px;
    }

    .vlt-portfolio-grid-filters {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
    }
}

/* «También te puede interesar»: la plantilla corta el titular en
   una sola línea con puntos suspensivos, y en móvil quedaba
   ilegible. Se muestran hasta tres líneas completas. */
.vlt-post-recent-popular .vlt-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.4;
}

/* ============================================================
   26. LEY ORGÁNICA DE COMUNICACIÓN — BUZÓN, TRANSPARENCIA Y
       ACCESIBILIDAD
   ============================================================ */

/* ---------- Saltar al contenido (Art. 37 LOC, accesibilidad) ---------- */
.domino-saltar {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    padding: 12px 18px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform 200ms ease;
}

.domino-saltar:focus {
    transform: none;
    color: var(--domino-blanco);
}

/* Campo trampa contra robots: fuera de la vista, no solo invisible */
.domino-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Tarjetas laterales y fichas ---------- */
.domino-buzon-card {
    padding: 26px;
    margin-bottom: 24px;
    border-radius: var(--domino-radio);
    background-color: var(--domino-gris-claro);
}

.domino-buzon-card-titulo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--domino-grafito);
    margin: 0 0 16px;
}

.domino-buzon-card p:last-child {
    margin-bottom: 0;
}

.domino-buzon-lateral .vlt-btn {
    width: 100%;
    justify-content: center;
}

/* ---------- Formulario del buzón ---------- */
.domino-buzon-intro p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--domino-grafito);
    margin-bottom: 30px;
}

.domino-buzon-paso {
    margin: 0 0 34px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.domino-buzon-paso legend {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 700;
    color: var(--domino-grafito);
}

.domino-buzon-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-size: 15px;
}

/* Tipos de trámite como tarjetas seleccionables */
.domino-buzon-tipos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.domino-buzon-tipo {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.domino-buzon-tipo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.domino-buzon-tipo-caja {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px 18px;
    border: 2px solid var(--domino-gris);
    border-radius: var(--domino-radio);
    background-color: var(--domino-blanco);
    transition: border-color 200ms linear, background-color 200ms linear, box-shadow 200ms linear;
}

.domino-buzon-tipo:hover .domino-buzon-tipo-caja {
    border-color: rgba(107, 13, 224, 0.4);
}

.domino-buzon-tipo input:checked + .domino-buzon-tipo-caja {
    border-color: var(--domino-primario);
    background-color: rgba(107, 13, 224, 0.04);
    box-shadow: 0 6px 18px rgba(107, 13, 224, 0.12);
}

.domino-buzon-tipo input:focus-visible + .domino-buzon-tipo-caja {
    outline: 2px solid var(--domino-primario);
    outline-offset: 3px;
}

.domino-buzon-tipo-nombre {
    font-weight: 700;
    color: var(--domino-grafito);
}

.domino-buzon-tipo-ayuda {
    font-size: 14px;
    line-height: 1.5;
    color: var(--domino-gris-medio);
}

.domino-buzon-tipo-plazo {
    margin-top: auto;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--domino-primario);
}

/* Campos en dos columnas en escritorio */
.domino-buzon-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.domino-buzon-campos .domino-buzon-ancho {
    grid-column: 1 / -1;
}

.domino-buzon-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--domino-grafito);
}

.domino-buzon-form .form-control {
    width: 100%;
    font-size: 16px; /* 16px evita el zoom automático de iOS */
}

.domino-opcional {
    font-weight: 400;
    color: var(--domino-gris-medio);
}

.domino-buzon-ayuda {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--domino-gris-medio);
}

[data-solo-legal][hidden],
[data-texto-propuesto][hidden] {
    display: none !important;
}

/* Casillas de confirmación */
.domino-buzon-confirmar {
    display: grid;
    gap: 12px;
    margin-bottom: 26px;
    padding: 20px;
    border-radius: var(--domino-radio);
    background-color: var(--domino-gris-claro);
}

.domino-buzon-form .domino-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}

.domino-check input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--domino-primario);
}

.domino-buzon-enviar {
    min-width: 220px;
    justify-content: center;
}

/* ---------- Acuse de recibo y consulta ---------- */
.domino-buzon-acuse {
    padding: 34px;
    border-radius: var(--domino-radio-l);
    background-color: rgba(30, 142, 90, 0.07);
    text-align: center;
}

.domino-buzon-acuse .domino-aviso-icono {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    font-size: 24px;
    background-color: #1e8e5a;
}

.domino-buzon-acuse h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.domino-buzon-codigo {
    display: inline-block;
    margin: 6px 0 18px;
    padding: 8px 16px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-blanco);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--domino-grafito);
    font-variant-numeric: tabular-nums;
}

.domino-buzon-datos {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    text-align: left;
}

.domino-buzon-datos div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(43, 43, 51, 0.12);
}

.domino-buzon-datos dt {
    font-weight: 400;
    color: var(--domino-gris-medio);
}

.domino-buzon-datos dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    color: var(--domino-grafito);
}

.domino-buzon-acuse p {
    max-width: 520px;
    margin: 0 auto 20px;
}

.domino-buzon-estado {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: var(--domino-radio);
    background-color: var(--domino-blanco);
}

.domino-buzon-estado .domino-buzon-codigo {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: 18px;
}

.domino-buzon-estado-etiqueta {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 10px;
    border-radius: var(--domino-radio-xs);
    font-size: 12px;
    font-weight: 700;
    background-color: rgba(107, 13, 224, 0.1);
    color: var(--domino-primario);
}

.domino-buzon-estado-en_revision .domino-buzon-estado-etiqueta { background-color: rgba(230, 140, 0, 0.15); color: #9a5c00; }
.domino-buzon-estado-respondido .domino-buzon-estado-etiqueta  { background-color: rgba(30, 142, 90, 0.12); color: #1e8e5a; }
.domino-buzon-estado-cerrado .domino-buzon-estado-etiqueta     { background-color: var(--domino-gris); color: var(--domino-gris-medio); }

.domino-buzon-respuesta {
    padding: 14px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-gris-claro);
}

.domino-buzon-respuesta p {
    margin: 4px 0 0;
}

.domino-buzon-error {
    padding: 12px 14px;
    border-radius: var(--domino-radio-s);
    background-color: rgba(211, 47, 47, 0.07);
    color: #a01c1c;
    font-size: 14px;
}

.domino-buzon-pasos {
    margin: 0;
    padding-left: 20px;
}

.domino-buzon-pasos li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* ---------- Transparencia ---------- */
.domino-ficha {
    display: grid;
    gap: 0;
    margin: 0;
}

.domino-ficha div {
    padding: 12px 0;
    border-bottom: 1px dashed rgba(43, 43, 51, 0.12);
}

.domino-ficha div:last-child {
    border-bottom: 0;
}

.domino-ficha dt {
    font-size: 12px;
    font-weight: 400;
    color: var(--domino-gris-medio);
}

.domino-ficha dd {
    margin: 2px 0 0;
    font-weight: 700;
    color: var(--domino-grafito);
    overflow-wrap: anywhere;
}

.domino-ficha-nota {
    margin-top: 14px;
    font-size: 13px;
    color: var(--domino-gris-medio);
}

.domino-transparencia-titulo {
    font-size: 24px;
    margin: 0 0 10px;
}

.domino-transparencia-bajada {
    color: var(--domino-gris-medio);
    margin-bottom: 22px;
}

.domino-documentos {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.domino-documentos a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--domino-gris);
    border-radius: var(--domino-radio);
    color: var(--domino-grafito);
    transition: border-color 200ms linear, box-shadow 200ms linear;
}

.domino-documentos a:hover {
    border-color: rgba(107, 13, 224, 0.35);
    box-shadow: var(--domino-sombra);
    color: var(--domino-grafito);
}

.domino-documento-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.domino-documento-cuerpo strong {
    display: block;
}

.domino-documento-cuerpo span {
    font-size: 14px;
    color: var(--domino-gris-medio);
}

.domino-documento-flecha {
    color: var(--domino-primario);
    font-size: 22px;
}

.domino-clases-loc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.domino-clases-loc li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.domino-clases-loc span,
.domino-nota-clase-codigo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--domino-radio-xs);
    background-color: var(--domino-primario);
    color: var(--domino-blanco);
    font-weight: 700;
    font-size: 13px;
}

/* ---------- Pie de la nota: clasificación y rectificación ---------- */
.domino-nota-pie {
    display: grid;
    gap: 10px;
    margin: 34px 0 10px;
    padding: 18px 20px;
    border-radius: var(--domino-radio);
    background-color: var(--domino-gris-claro);
    font-size: 14px;
}

.domino-nota-pie p {
    margin: 0;
}

.domino-nota-clase {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--domino-grafito);
}

.domino-nota-clase a {
    color: var(--domino-gris-medio);
}

.domino-nota-rectificar a {
    font-weight: 700;
}

/* ---------- Footer: enlaces legales y registro ---------- */
.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul.domino-footer-legal {
    margin-top: 12px;
}

.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul.domino-footer-legal li a {
    font-size: 13px;
    text-transform: none;
    color: var(--domino-grafito);
}

.vlt-footer-holder .vlt-footer-inner .vlt-footer-menu ul.domino-footer-legal li:first-child a {
    padding: 6px 12px;
    border-radius: var(--domino-radio-s);
    background-color: rgba(107, 13, 224, 0.08);
    color: var(--domino-primario);
    font-weight: 700;
}

.domino-footer-rpm {
    font-size: 13px;
    color: var(--domino-gris-medio);
    margin-bottom: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .domino-buzon-tipos,
    .domino-buzon-campos,
    .domino-clases-loc {
        grid-template-columns: 1fr;
    }

    .domino-buzon-acuse {
        padding: 26px 18px;
    }

    .domino-buzon-enviar {
        width: 100%;
    }

    .domino-buzon-lateral {
        margin-top: 40px;
    }
}

/* ============================================================
   27. CAMPOS DE FORMULARIO ACCESIBLES
   ------------------------------------------------------------
   El borde gris claro de la plantilla (#efefef) no alcanza el
   contraste 3:1 que WCAG 2.1 pide para el contorno de un campo
   (criterio 1.4.11), y la LOC (Art. 37) exige normas técnicas de
   accesibilidad en los portales de los medios. Se oscurece el
   borde, se agranda el área táctil y el foco se ve con claridad.
   Incluye los campos de fecha y de archivo, que la plantilla no
   estilizaba.
   ============================================================ */
/* input.form-control: la plantilla estiliza input[type="text"], que
   pesa más que una clase sola. */
input.form-control,
input.vlt-form-control,
textarea.form-control,
textarea.vlt-form-control,
select.form-control {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #8f8f99;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-blanco);
    color: var(--domino-texto);
    transition: border-color 200ms linear, box-shadow 200ms linear;
}

textarea.form-control,
textarea.vlt-form-control {
    min-height: 0;
    line-height: 1.6;
}

input.form-control:hover,
input.vlt-form-control:hover,
textarea.form-control:hover,
select.form-control:hover {
    border-color: #5f5f69;
}

input.form-control:focus,
input.vlt-form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--domino-primario);
    box-shadow: 0 0 0 4px rgba(107, 13, 224, 0.15);
    outline: none;
}

.form-control::placeholder,
.vlt-form-control::placeholder {
    color: #767680; /* 4.5:1 sobre blanco */
}

/* Campo de archivo: el botón nativo toma la forma de la marca */
input[type="file"].form-control {
    padding: 6px;
    cursor: pointer;
}

input[type="file"].form-control::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background-color: rgba(107, 13, 224, 0.1);
    color: var(--domino-primario);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 200ms linear;
}

input[type="file"].form-control::file-selector-button:hover {
    background-color: rgba(107, 13, 224, 0.18);
}

/* El selector de fecha usa el morado de la marca */
input[type="date"].form-control {
    width: 100%;
    font-family: inherit;
    accent-color: var(--domino-primario);
}

/* Errores de validación del navegador, solo después de interactuar */
input.form-control:user-invalid,
textarea.form-control:user-invalid {
    border-color: #d32f2f;
}

/* Casillas propias con esquinas redondeadas (la nativa es recta) */
.domino-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 2px solid #8f8f99;
    border-radius: 6px;
    background-color: var(--domino-blanco);
    cursor: pointer;
    transition: background-color 150ms linear, border-color 150ms linear;
}

.domino-check input[type="checkbox"]:hover {
    border-color: var(--domino-primario);
}

.domino-check input[type="checkbox"]:checked {
    border-color: var(--domino-primario);
    background-color: var(--domino-primario);
}

.domino-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--domino-blanco);
    border-width: 0 2px 2px 0;
    border-radius: 1px;
    transform: rotate(45deg);
}

.domino-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--domino-primario);
    outline-offset: 3px;
}

/* Pie del video destacado: título y fuente. El reproductor oculta la
   interfaz de YouTube (también el nombre del canal), así que la
   autoría de los videos de terceros se acredita aquí. */
.domino-video-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 0 var(--domino-margen);
    padding: 18px 4px 0;
}

.domino-video-pie-titulo {
    flex: 1 1 420px;
    margin: 0;
    font-size: clamp(17px, 1vw + 12px, 20px);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--domino-grafito);
}

.domino-video-pie-fuente {
    flex: 1 1 100%;
    order: 3;
    margin: 0;
    font-size: 13px;
    color: var(--domino-gris-medio);
}

.domino-video-pie-mas {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

/* ============================================================
   28. BANNERS LATERALES (160 × 600)
   ------------------------------------------------------------
   Cuando hay un banner lateral activo, el sitio reserva una
   columna propia en ese extremo: el encabezado, el contenido y
   el pie se corren hacia adentro y el banner queda solo en su
   columna, fijo mientras se hace scroll. Nunca tapa nada.

   Ancho de la columna: 184 px (banner de 160) desde 1600 px de
   pantalla; 144 px (banner de 120) entre 1200 y 1599 px. Por
   debajo de 1200 px no hay lugar: no se muestran.
   ============================================================ */
.domino-lateral { display: none; }

@media (min-width: 1200px) {
    :root { --domino-lateral: 144px; }
}

@media (min-width: 1600px) {
    :root { --domino-lateral: 184px; }
}

@media (min-width: 1200px) {
    /* Columna reservada a cada lado que tenga banner */
    body.con-lateral-izq .vlt-site-holder { padding-left: var(--domino-lateral); }
    body.con-lateral-der .vlt-site-holder { padding-right: var(--domino-lateral); }

    /* El encabezado y el pie son fijos: se corren igual que el contenido */
    body.con-lateral-izq .vlt-header-holder,
    body.con-lateral-izq .vlt-footer-holder[data-footer-fixed="1"] { left: var(--domino-lateral); }

    body.con-lateral-der .vlt-header-holder,
    body.con-lateral-der .vlt-footer-holder[data-footer-fixed="1"] { right: var(--domino-lateral); }

    body.con-lateral-izq .vlt-footer-holder[data-footer-fixed="1"],
    body.con-lateral-der .vlt-footer-holder[data-footer-fixed="1"] { width: auto; }

    body.con-lateral-der:not(.con-lateral-izq) .vlt-footer-holder[data-footer-fixed="1"] { left: 0; }
    body.con-lateral-izq:not(.con-lateral-der) .vlt-footer-holder[data-footer-fixed="1"] { right: 0; }

    /* El botón de volver arriba no se mete en la columna del banner */
    body.con-lateral-der .vlt-back-to-top { right: calc(var(--domino-lateral) + 20px); }

    /* El banner, solo en su columna */
    .domino-lateral {
        position: fixed;
        top: calc(var(--domino-header-h) + 20px);
        z-index: 30;
        display: block;
        width: calc(var(--domino-lateral) - 24px);
    }

    .domino-lateral-izq { left: 12px; }
    .domino-lateral-der { right: 12px; }

    .domino-lateral .domino-ad { text-align: center; }

    .domino-lateral .domino-ad-label {
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .domino-lateral .domino-ad img {
        width: 100%;
        height: auto;
        max-height: calc(100vh - var(--domino-header-h) - 70px);
        object-fit: contain;
        border-radius: var(--domino-radio);
    }
}

/* ============================================================
   29. TRANSMISIÓN EN VIVO
   ============================================================ */
/* Botón del encabezado */
.domino-envivo-boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    margin-right: 10px;
    padding: 0 12px;
    border-radius: var(--domino-radio-s);
    background-color: #e53935;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 200ms linear;
}

.domino-envivo-boton:hover,
.domino-envivo-boton:focus { background-color: #c62828; color: #fff; }

.domino-envivo-boton .domino-envivo-punto { background-color: #fff; }

/* Bloque de portada */
.domino-envivo-portada {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin: var(--domino-margen) var(--domino-margen) 0;
    padding: 22px;
    border-radius: var(--domino-radio-l);
    background-color: var(--domino-grafito);
    color: #fff;
}

.domino-envivo-portada-texto h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: clamp(20px, 1.5vw + 12px, 30px);
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.domino-envivo-portada-texto p { color: rgba(255, 255, 255, 0.75); }

.domino-envivo-portada-texto .domino-envivo-etiqueta { background-color: #e53935; color: #fff; }
.domino-envivo-portada-texto .domino-envivo-etiqueta .domino-envivo-punto { background-color: #fff; }

/* Página En vivo */
.domino-envivo-pagina {
    padding: calc(var(--domino-header-h) + 30px) 0 80px;
}

.domino-envivo-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.domino-envivo-titulo {
    margin: 0;
    font-size: clamp(22px, 1.6vw + 14px, 34px);
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.domino-envivo-reproductor .domino-player-marco,
.domino-envivo-reproductor .domino-envivo-externo { border-radius: var(--domino-radio-l); }

.domino-envivo-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 30px;
    margin-top: 20px;
}

.domino-envivo-descripcion { flex: 1 1 420px; margin: 0; font-size: 16px; }

.domino-envivo-redes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.domino-envivo-redes > span { width: 100%; font-size: 13px; color: var(--domino-gris-medio); }

.domino-envivo-redes a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-gris-claro);
    color: var(--domino-grafito);
    font-size: 13px;
    font-weight: 700;
}

.domino-envivo-redes a:hover { background-color: rgba(107, 13, 224, 0.1); color: var(--domino-primario); }

.domino-envivo-redes-centro { justify-content: center; margin-top: 22px; }

.domino-envivo-apagado {
    max-width: 640px;
    margin: 20px auto 60px;
    padding: 46px 30px;
    border-radius: var(--domino-radio-l);
    background-color: var(--domino-gris-claro);
    text-align: center;
}

.domino-envivo-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: var(--domino-radio);
    background-color: var(--domino-primario);
    color: #fff;
    font-size: 26px;
}

.domino-envivo-proxima { margin: 14px 0 0; color: var(--domino-gris-medio); }
.domino-envivo-proxima span { font-size: 18px; font-weight: 700; color: var(--domino-grafito); }

.domino-envivo-videos-titulo { margin-bottom: 30px; text-align: center; }

@media (max-width: 991px) {
    .domino-envivo-portada { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
}

@media (max-width: 575px) {
    .domino-envivo-boton { height: 30px; padding: 0 9px; margin-right: 4px; font-size: 11px; }
    .domino-envivo-pagina { padding-top: calc(var(--domino-header-h) + 16px); }
}

/* ---------- Búsqueda sin resultados ---------- */
.domino-vacio-busqueda p { color: var(--domino-grafito); line-height: 1.7; }

.domino-sugerencias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.domino-sugerencias a {
    padding: 8px 14px;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-gris-claro);
    color: var(--domino-grafito);
    font-size: 14px;
    font-weight: 700;
}

.domino-sugerencias a:hover { background-color: rgba(107, 13, 224, 0.1); color: var(--domino-primario); }

.domino-recientes-titulo { margin: 40px 0 18px; text-align: left; }
.domino-recientes-titulo:after { margin-left: 0; }

.domino-recientes { list-style: none; margin: 0; padding: 0; }
.domino-recientes li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--domino-gris); }
.domino-recientes a { font-weight: 700; color: var(--domino-grafito); }
.domino-recientes span { flex: 0 0 auto; font-size: 13px; color: var(--domino-gris-medio); }

/* ============================================================
   30. NOTIFICACIONES FLOTANTES, PROGRESO DE LECTURA, COMPARTIR
   ============================================================ */
.domino-toasts {
    position: fixed;
    top: calc(var(--domino-header-h) + 12px);
    right: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}

.domino-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: var(--domino-radio);
    background: rgba(30, 30, 38, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 18px 44px rgba(20, 20, 26, 0.3);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 220ms ease, transform 220ms ease;
}

.domino-toast.visible { opacity: 1; transform: none; }
.domino-toast.saliendo { opacity: 0; transform: translateY(-10px); }

.domino-toast-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #1e8e5a;
    font-size: 13px;
}

.domino-toast-error .domino-toast-icono { background: #d32f2f; }

.domino-toast-texto { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.domino-toast-texto strong { display: block; color: #fff; margin-bottom: 2px; }
.domino-toast-texto p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 13.5px; }

.domino-toast-cerrar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.domino-toast-cerrar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (max-width: 575px) {
    .domino-toasts { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; }
}

/* Progreso de lectura: línea morada bajo el encabezado */
.domino-progreso-lectura {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1150;
    height: 3px;
    background: linear-gradient(90deg, var(--domino-primario), var(--domino-primario-c));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 80ms linear;
}

/* Botón de compartir nativo */
.domino-compartir {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 8px 8px 0;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--domino-radio-s);
    background-color: var(--domino-primario);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.domino-compartir[hidden] { display: none; }

/* La alerta original queda oculta cuando se muestra como notificación flotante */
.domino-alerta[hidden] { display: none !important; }