/* Eventos Reales — portada, listado y página de boda.
 *
 * OJO con la especificidad: el kit global de Elementor define
 * `.elementor-kit-8 h1/h2/h3` y se carga DESPUÉS que esta hoja, así que
 * `.mi-clase h2` empata con él y pierde. Por eso los selectores de títulos
 * llevan la clase duplicada: sube la especificidad sin usar !important.
 *
 * Y la versión va en el NOMBRE del archivo (-v2, -v3…), no en un `?ver=`:
 * Hummingbird quita los query strings y el navegador se queda con la copia
 * vieja hasta 24 h. Al cambiar esto, renombra y sube ASSETS_VERSION.
 */

.em-eventos-reales {
    margin: 0 auto;
    max-width: 1200px;
}

.em-eventos-reales__titulo.em-eventos-reales__titulo {
    margin: 0 0 18px;
    text-align: center;
}

.em-eventos-reales__viewport {
    position: relative;
}

.em-flecha {
    position: absolute;
    top: 38%;                 /* a la altura de la foto, no del texto */
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: #8B5E3C;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #E7DED6;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: opacity .2s, background .2s;
}

.em-flecha:hover { background: #fff; }
.em-flecha--prev { left: -8px; }
.em-flecha--next { right: -8px; }

/* Sin nada más hacia ese lado: se atenúa en vez de desaparecer, para que la
   fila no salte. */
.em-flecha--inerte {
    opacity: .35;
    pointer-events: none;
}

/* En celular se arrastra con el dedo: scroll nativo + imán, sin librería.
   Mismo patrón que el carrusel de Empresas Destacadas. */
.em-eventos-reales__carrusel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

/* La barra de desplazamiento estorba en el diseño; el gesto se mantiene. */
.em-eventos-reales__carrusel::-webkit-scrollbar { height: 0; }
.em-eventos-reales__carrusel { scrollbar-width: none; }

.em-eventos-reales__card {
    position: relative;
    flex: 0 0 auto;
    width: 78%;                /* asoma la siguiente: invita a deslizar */
    max-width: 340px;
    scroll-snap-align: start;
    overflow: hidden;
    background: transparent;
}

/* La máscara cubre TODA la tarjeta, imagen incluida: tocar la foto y que no
   pase nada fue una queja real de los usuarios. */
.em-eventos-reales__mask {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.em-eventos-reales__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;   /* mismo encuadre que «Inspírate con nuestras ideas» */
    object-fit: cover;
}

.em-eventos-reales__nombre.em-eventos-reales__nombre {
    margin: 10px 0 2px;
    font-size: 17px;
    line-height: 1.3;
}

.em-eventos-reales__meta {
    margin: 0 0 6px;
    font-size: 13px;
    color: #758063;
}

.em-eventos-reales__ver-todos {
    display: block;
    width: fit-content;
    margin: 16px auto 0;
    font-size: 14px;
    color: #8B5E3C;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.em-eventos-reales__ver-todos:hover { opacity: .75; }

/* Escritorio: rejilla de 3, sin desplazamiento. */
@media (min-width: 768px) {
    .em-eventos-reales__carrusel {
        gap: 22px;
        justify-content: flex-start;
        scroll-padding-left: 0;
    }

    /* Tres por vista; si hay más, asoma la siguiente e invita a deslizar. */
    .em-eventos-reales__card {
        width: calc((100% - 44px) / 3);
        max-width: none;
    }

}

/* ═══════════════════════════════════════════════════════════════
   Página de un evento real
   ═══════════════════════════════════════════════════════════════ */

.em-evento-real__hero {
    position: relative;
    margin-bottom: 34px;
}

.em-evento-real__hero-img {
    display: block;
    width: 100%;
    max-height: 68vh;
    object-fit: cover;
}

/* El degradado hace legible el texto sobre cualquier foto, clara u oscura. */
.em-evento-real__hero-texto {
    position: absolute;
    inset: auto 0 0 0;
    padding: 60px 24px 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
    color: #fff;
    text-align: center;
}

.em-evento-real__hero-texto .em-evento-real__titulo.em-evento-real__titulo {
    margin: 0 0 4px;
    color: #fff;
    font-size: clamp(28px, 5vw, 46px);
    line-height: 1.15;
}

.em-evento-real__hero-texto .em-evento-real__meta {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
}

.em-evento-real__cuerpo {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.em-evento-real__texto {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
    line-height: 1.7;
}

/* Proveedores: van ARRIBA de la galería a propósito — enviarle tráfico al
   proveedor es el objetivo de la sección, y al final de 53 fotos no lo ve nadie. */
/* Bloque destacado: enviarle tráfico al proveedor es el objetivo de toda la
   sección, así que no puede ser una línea discreta entre la foto y las demás. */
.em-evento-real__proveedores {
    margin: 0 auto 40px;
    max-width: 1100px;
    padding: 26px 20px;
    text-align: center;
    background: #FAF7F4;
    border: 1px solid #EFE7DF;
    border-radius: 14px;
}

.em-evento-real__proveedores.em-evento-real__proveedores h2 {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8B5E3C;
    margin: 0 0 18px;
    font-weight: 600;
}

.em-evento-real__proveedores-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.em-evento-real__proveedor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 210px;
    padding: 22px 16px 18px;
    border: 1px solid #E7DED6;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s, transform .25s;
}

.em-evento-real__proveedor:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.em-evento-real__proveedor-nombre {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
}

.em-evento-real__proveedor-cta {
    font-size: 13px;
    color: #8B5E3C;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.em-evento-real__proveedor-img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F2EBE4;
}

/* Columna de lectura, no muro de fotos: el mismo ancho que usa bodas.net en
   sus crónicas (~1020 px). A todo el ancho las fotos se leían como catálogo. */
.em-evento-real__galeria-seccion {
    max-width: 1020px;
    margin: 8px auto 0;
}

/* Dos por fila, y cada bloque de cinco abre con una a todo el ancho. */
.em-evento-real__galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.em-evento-real__foto {
    margin: 0;
    overflow: hidden;
    cursor: zoom-in;
}

/* La foto de apertura ocupa la columna entera. */
.em-evento-real__foto--ancha {
    grid-column: 1 / -1;
}

.em-evento-real__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity .3s ease;
}

/* Las anchas van más panorámicas, como en la referencia. */
.em-evento-real__foto--ancha .em-evento-real__img {
    aspect-ratio: 16 / 9;
}

.em-evento-real__foto:hover .em-evento-real__img {
    opacity: .92;
}

.em-evento-real__volver {
    margin: 34px 0 0;
    text-align: center;
}

.em-evento-real__volver a {
    color: #8B5E3C;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* En celular, una sola por fila: son fotos, no miniaturas. */
@media (max-width: 640px) {
    .em-evento-real__galeria { grid-template-columns: 1fr; gap: 12px; }
    .em-evento-real__foto--ancha .em-evento-real__img { aspect-ratio: 4 / 3; }
}

/* ── Visor de fotos ────────────────────────────────────────────── */

.em-visor {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .93);
}

.em-visor[hidden] { display: none; }

.em-visor__img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
}

.em-visor__btn {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.em-visor__btn:hover { background: rgba(255, 255, 255, .26); }
.em-visor__btn--prev  { left: 14px; }
.em-visor__btn--next  { right: 14px; }
.em-visor__btn--close { top: 14px; right: 14px; font-size: 24px; }

.em-visor__contador {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   Listado de bodas reales (patrón de las crónicas de bodas.net)
   ═══════════════════════════════════════════════════════════════ */

.em-br {
    max-width: 1210px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.em-br__header {
    text-align: center;
    margin-bottom: 34px;
}

.em-br__header.em-br__header h1 { margin: 0 0 6px; }
.em-br__header p  { margin: 0; color: #758063; }


.em-br__grilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 26px;
}

.em-br-card__foto {
    display: block;
    overflow: hidden;
}

.em-br-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 3px;
    transition: opacity .3s;
}

.em-br-card__foto:hover .em-br-card__img { opacity: .9; }

.em-br-card__cuerpo { padding-top: 12px; }

/* Sello con las iniciales y la fecha, como el de la referencia. */
.em-br-card__sello {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.em-br-card__linea {
    flex: 1;
    max-width: 54px;
    height: 1px;
    background: #D9CFC5;
}

.em-br-card__iniciales {
    font-size: 20px;
    letter-spacing: .04em;
    color: #8B5E3C;
}

.em-br-card__fecha {
    font-size: 12px;
    color: #9A8F84;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.em-br-card__titulo.em-br-card__titulo {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.3;
    text-align: center;
}

.em-br-card__titulo a {
    color: inherit;
    text-decoration: none;
}

.em-br-card__titulo a:hover { text-decoration: underline; }

/* El proveedor tiene peso propio: es a quien la sección le manda tráfico. */
.em-br-card__proveedores {
    margin: 0 0 8px;
    text-align: center;
    font-size: 14px;
    color: #9A8F84;
}

.em-br-card__proveedores a {
    color: #8B5E3C;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 94, 60, .35);
}

.em-br-card__proveedores a:hover { border-bottom-color: #8B5E3C; }

.em-br-card__meta {
    margin: 6px 0 10px;
    font-size: 13px;
    color: #9A8F84;
    text-align: center;
}

.em-br-card__cta {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 8px 22px;
    border: 1px solid #C9B7A4;
    border-radius: 999px;
    font-size: 14px;
    color: #8B5E3C;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.em-br-card__cta:hover {
    background: #8B5E3C;
    color: #fff;
}

.em-br__vacio {
    text-align: center;
    color: #758063;
    padding: 40px 0;
}

@media (max-width: 900px) {
    .em-br__grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .em-br__grilla { grid-template-columns: 1fr; }
}


/* ── Proveedores sugeridos al cierre de la boda ──────────────── */

.em-evento-real__sugeridos {
    margin: 46px auto 0;
    max-width: 1020px;
    text-align: center;
}

.em-evento-real__sugeridos.em-evento-real__sugeridos h2 {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8B5E3C;
    margin: 0 0 18px;
    font-weight: 600;
}

.em-evento-real__sugeridos-viewport {
    position: relative;
}

/* Se muestran TODOS los que pagan; el carrusel evita cortar la lista. */
.em-evento-real__sugeridos-lista {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.em-evento-real__sugeridos-lista::-webkit-scrollbar { height: 0; }
.em-evento-real__sugeridos-lista { scrollbar-width: none; }

.em-evento-real__sugerido {
    display: block;
    flex: 0 0 auto;
    width: calc((100% - 48px) / 4);   /* cuatro por vista */
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

/* El marco ancla el badge, que va posicionado en absoluto. */
.em-evento-real__sugerido-marco {
    position: relative;
    display: block;
}

/* Al ras y dentro: el offset negativo del badge original se recorta acá. */
.em-evento-real__sugerido .em-tier-badge {
    top: 8px;
    left: 8px;
}

.em-evento-real__sugerido-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
    transition: opacity .3s;
}

.em-evento-real__sugerido:hover /* El marco ancla el badge, que va posicionado en absoluto. */
.em-evento-real__sugerido-marco {
    position: relative;
    display: block;
}

/* Al ras y dentro: el offset negativo del badge original se recorta acá. */
.em-evento-real__sugerido .em-tier-badge {
    top: 8px;
    left: 8px;
}

.em-evento-real__sugerido-img { opacity: .9; }

/* El color se fija acá: si no, el tema pinta de azul los enlaces visitados y
   un nombre quedaba de otro color que el resto. */
.em-evento-real__sugerido-nombre {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: #3A3A38;
}

.em-evento-real__sugerido:hover .em-evento-real__sugerido-nombre {
    color: #8B5E3C;
}

@media (max-width: 700px) {
    /* Dos por vista y la tercera asomando: invita a deslizar. */
    .em-evento-real__sugerido { width: 42%; }
}