/*
	Theme Name: Lamadridweb
	Date: Marzo 2026
	Description: Sitio web 100% No Oficial de los madrileños
	Version: 2.0
	Author: Heraldo Tejeda
	Author URL: http://lamadridweb.com.ar
 */

/* Reseteo básico */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }
    
/* Body */
    body {
        background-color: #333;
        color: #000;
        font-size: 12px;
        line-height: 1.4;
    }    

/* --- ESTILOS DEL TEXTO --- */
    .encabezado {
        font-size: 1.2rem;
        color: #666;
        margin-bottom: 5px;
        font-weight: 300;
    }

    .titulo {
        font-size: 2rem;
        color: #1a568f; /* Azul similar a la referencia */
        margin-top: 0;
        margin-bottom: 20px;
        font-weight: normal;
    }

    p.parrafo-noticia {
        font-size: 1.1rem;
        line-height: 1.8;
        text-align: justify;
        margin: 0;
        position: relative; /* Para el float */
    }

    .fecha {
        color: #777;
        font-weight: bold;
        display: block;
        margin-top: 15px;
    }

    a { 
        text-decoration: underline;
    }

    /* Codigo para listas y sublistas en un párrafo - FUNCIONA */
    ul {
            list-style-type: none; /* Quita los puntos de la lista */
            padding-left: 0;
            margin: 0;
            font-family: sans-serif; /* Cambia a tu tipografía preferida */
            line-height: 1.6;
        }
        /* Aplica sangría solo a los vocales que van debajo */
        .sublista-vocales {
            padding-left: 50px; /* Ajusta este valor para alinear con "Wellington Soria" */
        }

    /* Codigo para poner punto a un párrafo - FUNCIONA */
    .punto-negro {
        font-size: 1.2rem;
        font-weight: bold;
        position: relative;
        top: 3px;
        line-height: 0;
        margin-left: -1px;    
    }

    .punto-cuadrado-negro {
        font-size: 0.9rem;
        font-weight: bold;
        position: relative;
        
        line-height: 0;
        margin-left: -1px;    
    }

    /* Codigo para poner punto a un párrafo */
    .vineta-grande {
        font-size: 24px;
        margin-right: 5px;
        color: #007bff;
  
  /* Eliminamos line-height: 0 para que no afecte al párrafo */
  /* Usamos posición relativa para desplazar el punto sin mover el texto */
        position: relative;
        top: 4px; /* Ajusta este valor (ej. 3px, 4px, 5px) hasta que quede visualmente centrado */
        display: inline-block; /* Necesario para que el top funcione */
    }

    .texto-con-punto::before {
        content: "• ";
        color: black; /* Puedes cambiar el color del punto */
        font-weight: bold; /* Puedes hacerlo negrita */
    }

    .texto-cuadrado::before {
        content: "■ ";
        color: black; /* Puedes cambiar el color del punto */
        font-weight: bold; /* Puedes hacerlo negrita */
    }

    .parrafo-punto::before {
        content: "• ";
        font-weight: bold;
        margin-right: 8px; /* Controla la separación entre el punto y el texto */
        color: #333; /* Puedes cambiar el color del punto aquí */
    }

    .parrafo-cuadrado::before {
        content: "■ ";
        font-weight: bold;
        margin-right: 8px; /* Controla la separación entre el punto y el texto */
        color: #333; /* Puedes cambiar el color del punto aquí */
    }

    .parrafo-cuadrado::before {
        content: "■ ";
        font-weight: bold;
        margin-right: 8px; /* Controla la separación entre el punto y el texto */
        color: #333; /* Puedes cambiar el color del punto aquí */
    }

    .parrafo-flecha {
        position: relative;
        padding-left: 30px;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .parrafo-flecha::before {
        content: "";               /* Vacío porque dibujaremos con bordes */
        position: absolute;
        left: 5px;
        top: 6px;                  /* Ajusta para centrar la flecha con la primera línea */
        
        /* Truco de bordes de CSS para crear un triángulo/flecha hacia la derecha */
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid #2ecc71; /* COLOR DE LA FLECHA (Verde) */
    }

    /* • Codigo unico para punto antes del parrafo  --- */
    li::marker {
        font-size: 1.5rem; /* Agranda solo el punto */
        color: blue;       /* Opcional: cambia el color */
    }
 
/* --- ESTILOS DE LA IMAGEN Y CONTENEDOR (RESPONSIVE) --- */
    /* Contenedor que flota y tiene el tamaño fijo inicial */
    .contenedor-imagen-flotante {
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
        /* TAMAÑO INICIAL FIJO (según tu pedido) */
        width: 450px;
        height: 340px;
        cursor: pointer; /* Indica que se puede interactuar */
        position: relative; /* Para el botón de descarga */
        overflow: hidden;
        border-radius: 4px;
        /* Transición suave para el cambio de tamaño */
        transition: all 0.4s ease-in-out;
        z-index: 1;
    }

    /* La imagen dentro del contenedor */
    .contenedor-imagen-flotante img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Recorta para llenar sin deformar */
        display: block;
        transition: transform 0.4s ease-in-out;
    }

    /* Contenedor general que ya tienes en tu web para el centro */
    .bloque-contenido-central {
        width: 100%;
        box-sizing: border-box;
        margin-top: 5px;
    }

    /* Capitulo GALERIA FOTOGRAFICA propiamente dicha */
    .galeria-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden; /* Oculta lo que se sale del área */
    }

    .galeria-adaptable {
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* Si tienes 9 fotos, usa el número total */
        gap: 15px;
        width: 100%;
        transition: transform 0.5s ease; /* Suaviza el desplazamiento */
    }

    .prev { left: 0; }
    .next { right: 0; }

    /* Enlaces de Capitulo GALERIA FOTOGRAFICA */
    .nav-extra-footer {
        text-align: center; /* Centra todo el bloque */
        margin-top: 10px;
        padding: 3px;
        border-top: 1px solid #cccccc;
        font-size: 12px;
        font-weight: bold;
        /* Esto asegura que el contenido fluya en una sola línea */
        display: block; 
        white-space: nowrap; 
    }

    .nav-extra-footer a {
        color: #750909;
        text-decoration: none;
        padding: 0 10px; /* Espacio horizontal entre enlaces */
        display: inline-block; /* Permite que se comporten como elementos en línea */
    }

    .nav-extra-footer a:hover {
        text-decoration: underline;
        color: #750909;
    }

    .pie-foto-galery {
        display: block !important;
        background-color: rgba(0, 0, 0, 0.1); 
        color: #000 !important; /* CAMBIO: Puse negro, porque blanco sobre fondo claro no se ve */
        font-size: 11px;
        padding: 3px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.2;
    }

/* Capitulo GALERIA FOTOGRAFICA solo 2 fotos */
    .imagenes-contenedor {
        display: flex;
        justify-content: space-between; /* Espacia las imágenes de extremo a extremo */
        gap: 15px; /* Espacio de separación entre las dos imágenes */
        width: 100%; /* Ocupa todo el ancho disponible */
        margin-top: 20px;
    }

    /* Cada bloque individual de imagen */
    .imagen-item {
        flex: 1; /* Hace que ambas columnas crezcan de forma equitativa */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Asegura que la imagen se adapte al contenedor y ocupe todo el ancho de su columna */
    .imagen-item img {
        width: 100%;
        height: auto; /* Mantiene la proporción original de la foto */
        object-fit: cover;
        border: 1px solid #ccc; /* Opcional: mantiene el borde que ya tienes */
    }

    /* Estilo para el texto debajo de la imagen (Acceso principal / Calle Avellaneda) */
    .pie-imagen {
        width: 100%;
        background-color: #e0e0e0;
        text-align: center;
        padding: 4px 0;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
    }

/* --- MINI GALERIA DE DESASTRES CLIMATICOS--- */
    .galeria-adaptable {
        display: grid;
        /* Divide el espacio disponible en 3 columnas exactamente iguales (1fr) */
        grid-template-columns: repeat(3, 1fr); 
        /* Separación física real y controlada entre las imágenes */
        gap: 15px; 
        width: 100%;
        margin-top: -5px;
        box-sizing: border-box;
    }

    /* Cada tarjeta individual */
    .item-evento {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* La imagen hereda el tamaño exacto asignado por la rejilla */
    .item-evento img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3; /* Fuerza la proporción horizontal idéntica en las 3 */
        object-fit: cover;
        
        /* Estilos estéticos de tu diseño */
        border-radius: 6px;
        border: 1px solid #989595;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
    }

    /* Texto de abajo adaptado */
    .item-evento h3 {
        font-size: 0.7rem;
        font-weight: bold;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        color: #000000;
        line-height: 1.2;
    }

    /* --- ESTILO PARA EL ESTADO GRANDE (MODO ZOOM) --- */
    /* Esta clase se añade con JavaScript */
    .contenedor-imagen-flotante.grande {
    /* Se expande para ocupar casi toda la pantalla */
        position: fixed;
        top: 5vh;
        left: 5vw;
        width: 90vw;
        height: 90vh;           
        z-index: 9999; /* Se pone por encima de todo */
        margin: 0; /* Eliminamos los márgenes de float */
        box-shadow: 0 0 50px rgba(0,0,0,0.8); /* Sombra dramática */
        cursor: zoom-out; /* Cursor para indicar que un clic lo cierra */
    }
        
    /* Fondo oscuro detrás de la imagen grande (opcional, activado por JS) */
    .overlay-oscuro {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        z-index: 9998;
        display: none; /* Oculto por defecto */
        opacity: 0;
        transition: opacity 0.4s;
    }
        
    .overlay-oscuro.activo {
        display: block;
        opacity: 1;
    }


    /* --- BOTÓN DE DESCARGA --- */
    .boton-descarga {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-color: rgba(255, 255, 255, 0.9);
        color: #333;
        padding: 12px 24px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
            
        /* Oculto por defecto */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        z-index: 10000; /* Por encima de la imagen grande */
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    /* Mostrar botón solo cuando la imagen está grande */
    .contenedor-imagen-flotante.grande .boton-descarga {
        opacity: 1;
        visibility: visible;
    }

    .boton-descarga:hover {
        background-color: #fff;
        transform: scale(1.05);
    }
        
    /* Icono de descarga simple */
    .boton-descarga::before {
        content: '⬇️'; 
    }

    /* CAMBIO 1: max-width en lugar de width fijo para que se adapte */
    .container {
        max-width: 950px;
        width: 100%;
        margin: 0 auto;
        background-color: #fff;
        border-left: 3px solid #9D9797;
        border-right: 3px solid #9D9797;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .top-bar {
        height: 29px;
        background-color: #000;
        color: #fff;
        text-align: right;
        padding: 7px 10px;
        font-weight: bold;
        font-size: 11px;
        margin-bottom: 2px;
        border-top: 3px solid #9D9797;
    }        

    /* Flex-wrap para que los elementos del header se acomoden si no caben */
    /* Contenedor principal */ 
    .main-header {
        display: flex;
        width: 100%;
        height: 150px; /* Ajusta esta altura según tu logo */ 
        background-color: #ffffff; /* El color del marco y separador */
        border: 3px solid #ffffff; /* Marco exterior */
        gap: 3px; /* Separador central */
        box-sizing: border-box;
        margin-top: -2px;
        margin-left: 0px;
        border: 3px solid #ffffff; /* El marco exterior */
        gap: 3px; /* El espacio de separación central */
        box-sizing: border-box; /* Para que el borde no sume tamaño extra al ancho total */
        margin-bottom: 1px; /* Opcional: un fondo oscuro por detrás del marco para que resalte */
    }

    /* Aplicamos el mismo estilo a ambos contenedores */
    .header-logo, 
    .header-imagen-derecha {
        flex: 1; /* 50% de ancho cada uno */
        height: 100%;
        overflow: hidden;
    }

    /* Estilo para que AMBAS imágenes ocupen todo el espacio */
    .header-logo img, 
    .header-imagen-derecha img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover; /* Llena el contenedor sin deformarse */
        object-position: center; /* Centra la imagen si se recorta */
    }
        
    /* Estilos para el nav */
    .nav-bar {
        background-color: #990000;
        color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 5px 10px;
        font-size: 11px;
        border-bottom: 4px solid #000;
        gap: 5px;
    }

    .nav-bar a {
        color: #fff;
        text-decoration: none;
        margin: 0 5px;
    }

    .nav-bar a:hover {
        text-decoration: underline;
    }

    .nav-container { 
        background: linear-gradient(to bottom, #800000 70%, #ffffff 100%); 
        background: #800000;
        display: flex; 
        align-items: flex-end; /* Alinea los bloques a la base */
        padding: 0 0 0 15px; 
        height: 50px; 
        border-bottom: 4px solid #000;
        width: 100%;
        box-sizing: border-box;
        /* Unificamos la tipografía aquí para todo el menú */
        font-family: Arial, sans-serif; 
    }

    .nav-tab-home { 
        width: 203px; /* Igual al ancho que buscas */
        height: 35px;
        background: #750909;
        display: flex;  /* Centrado vertical de la fuente */
        align-items: center;  /* Centrado vertical de la fuente */
        padding: 0 13px; /* Quitamos padding vertical para usar flex */
        border: 3px solid #fff; 
        border-bottom: none; 
        border-radius: 10px 10px 0 0; 
        box-shadow: 4px 0 10px rgba(0,0,0,0.5);
        margin-left: -15px;
    }

    .nav-tab-home a { 
        color: #fff; 
        text-decoration: none; 
        font-size: 13px;
        font-weight: bold;
    }

    /* Efecto Hover para la pestaña Home */
    .nav-tab-home:hover {
        background-color: #222 !important; /* Cambia a gris oscuro como los otros capítulos */
        transition: all 0.2s;
    }

    /* Insertar las flechitas en el Home al pasar el mouse */
    .nav-tab-home:hover a::before {
        content: "» "; 
        color: #ffffff;
        margin-right: 5px;
    }

    .nav-links-red { 
        padding-bottom: 10px; 
        color: #fff; 
        font-size: 12px; 
        margin-left: 10px; 
    }

    .nav-links-red a { 
        color: #fff; 
        text-decoration: none; 
        font-weight: bold; 
    }

    .nav-tab-autoria {
        margin-left: auto; 
        width: 199px; /* Sincronizado con el sidebar-right */
        height: 35px; /* Misma altura que Home */
        background: #750909;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center; /* Centra el texto "H. Tejeda" */
        padding: 0 10px; 
        border: 3px solid #fff; 
        border-bottom: none; 
        border-right: none; /* Para que se pegue al borde derecho */
        border-radius: 10px 0 0 0; 
        font-size: 13px; /* Tamaño de fuente unificado */
        box-shadow: -4px 0 10px rgba(0,0,0,0.5);
        /* Misma alineación y fuente que Home */
        display: flex;
        align-items: center;
        justify-content: center; /* Centra el texto horizontalmente */
        font-size: 13px;
    }

    .nav-tab-autoria-mobile {
        display: none;
    }

    /* Layout de 3 columnas para escritorio */
    .main-layout {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
        min-height: 800px;
    }

    /* Estilos base para Sidebar Left (PC) */
    /* --- Lógica para PC --- */
    .sidebar-left {
        background-color: #000;
        display: flex;
        flex-direction: column; /* Fuerza a que todo vaya uno debajo de otro */
        padding: 0;
    }

    .left-menu {
        width: 100%; /* Asegura que el menú ocupe todo el ancho de la columna */
        list-style: none;
        padding: 0;
        margin: 0;
        /* Creamos la línea blanca continua */
        border-left: 3px solid #ffffff; 
        background-color: #000; /* Fondo negro para los ítems */
        position: relative;
        z-index: 9999;
    }

    /* Estilos de los links en el menú lateral */
    .left-menu a {
        color: #ffffff;         /* Color blanco para los links */
        text-decoration: none;
        display: block;
        padding: 8px 15px;      /* 15px de espacio a la izquierda */
        font-weight: bold;
        font-size: 13px;
        transition: all 0.2s;   /* Suaviza el efecto */
    }
    
    .left-menu li {
        border-bottom: 1px solid #333;
        border-top: 1px solid #750909;
    }

    /* El efecto Hover con la flecha */
    .left-menu a:hover {
        background-color: #222; /* Un gris muy oscuro al pasar el mouse */
        color: #fff;            /* Asegura que siga blanco */
    }

    /* Insertar la flecha » solo al hacer hover */
    .left-menu a:hover::before {
        content: "» ";          /* El símbolo que pediste */
        color: #ffffff;         /* Un azul similar al de tu referencia */
        margin-right: 5px;
    }

    /* Las cajas de anuncios en la izquierda */
    .ad-box-container {
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .ad-box {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding: 20px 10px;
        font-weight: bold;
        border: 1px solid #444;
        display: block; /* Para que no intente alinearse como texto */
    }

    .ad-box img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* Nueva regla para las cajas que contienen imágenes */
    .ad-box-img {
        padding: 0 !important; /* Quitamos el padding para que la imagen toque los bordes */
        overflow: hidden; /* Evita que la imagen se salga si es muy grande */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 84px; /* Ajusta este valor según la altura de tus otras cajas de texto */
    }

    .sidebar-left .ad-box {
        background-color: #111;
        border: 1px solid #444;
        margin-bottom: 10px;
        text-align: center;
        padding: 15px 5px;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    /* Estilo del botón (oculto en PC) */
    .menu-btn {
        display: none; /* Oculto en PC */
        background-color: #750909;
        color: #fff;
        padding: 10px;
        width: 100%;
        border: 1px solid #fff;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
    }

    .content-center {
        padding: 20px;
        background-color: #fff;
    }

    .content-center h1 {
        font-size: 24px;
        color: #000;
        border-bottom: 2px solid #ccc;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    
    .content-center h2 {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 15px;
        font-style: italic;
    }

    .content-center p {
        margin-bottom: 15px;
        text-align: justify;
    }

    .content-center hr {
        margin-top: -12px;
        margin-bottom: 10px;
    }    

    /* Titulo y volanta del capítulo */
    .contenedor-titulo {
        width: 100%;
        height: 55px;
        font-family: Arial, sans-serif;
        border-bottom: 1px solid #9A9A9A;    
        margin-bottom: 10px;
        padding-bottom: 0px;
    }

    .titulo-principal {
        font-size: 32px;
        font-weight: bold;
        color: #000;
        margin: 0;
        padding: 0;
        text-decoration: none !important; /* ELIMINA EL SUBRAYADO */
        border-bottom: none !important;  /* ELIMINA CUALQUIER BORDE */
        line-height: 1.1;
    }

    .volanta {
        font-size: 16px;
        font-style: italic;
        font-weight: bold;
        color: #6e6c6c;
        margin-top: -10px;
        padding: 0;
        text-decoration: none; /* Asegura que la volanta tampoco tenga línea */
    }    

    .volanta-small {
        font-size: 14px;
        font-style: italic;
        font-weight: bold;
        color: #6e6c6c;
        margin-top: -10px;
        padding: 0;
        text-decoration: none; /* Asegura que la volanta tampoco tenga línea */
    }

    /* PARRAFO E IMAGEN LATERAL (PC y Móvil) */

    .contenedor-noticia {
        max-width: 100%;
        margin-top: 0;
        padding: 0px;
        background: #ffffff;
        color: #111;
        font-family: Arial, sans-serif;
        line-height: 1.6;  
    }

    .contenedor-noticia p {
        margin-bottom: 8px;
    }

    .contenedor-noticia p a {
        color: #750909;
        font-weight: bold;
        
    }

    .contenedor-noticia p {
        margin-bottom: 8px;
    }

    .imagen-lateral {
        width: 170px;
        height: auto; /* CAMBIO: Dejamos que crezca según el contenido */
        position: relative;
        top: 3px;
        margin: 0 12px 8px 0;
        /* overflow: hidden;  <-- BORRADO: Para que no corte el pie de foto */
    }

    /* Ajustamos la imagen */
    .imagen-lateral img {
        width: 100%;
        height: 125px; /* Mantenemos el alto solo en la foto */
        object-fit: cover;
        border: 2px solid #000;
        border-radius: 3px;
        display: block;
    }

    /* Posición */
    .izquierda {
        float: left;
        margin: 0 12px 8px 0;
    }

    .derecha {
        float: right;
        margin: 0 0 8px 12px;
    }

    /* PIE DE FOTO  */
    .pie-foto {
        display: block !important;
        background-color: rgba(0, 0, 0, 0.1); 
        color: #000 !important; /* CAMBIO: Puse blanco, porque negro sobre fondo oscuro no se ve */
        font-size: 11px;
        padding: 3px;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.2;
    }

    /* Limpiar float */
    .contenedor-noticia::after {
        content: "";
        display: block;
        clear: both;
    }

    /* REGLA GENERAL (PC y Móvil) */
    .firma {
        text-align: right !important; /* Siempre a la derecha */
        display: block;
        width: 100%;
        margin-top: -5px;
        padding-right: 20px; /* Espacio para que no toque el borde */
        font-weight: normal;   /* Para que NO resalte tanto el nombre de Nimio */
    }

    .image-caption {
        font-size: 10px;
        color: #fff;
        background-color: rgba(0,0,0,0.6);
        margin-top: -20px;
        position: relative;
        padding: 2px;
        z-index: 1;
    }

    .google-retro-container { /* Barra de búsqueda de Google (versión retro) */
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: Arial, sans-serif;
        padding: 20px;
    }

    .logo-google {
        height: 20px; /* Ajustado para que combine con el alto de la barra */
        width: auto;
    }

    .search-form {
        display: flex;
        gap: 8px;
    }

    .search-input {
        width: 250px;
        height: 25px;
        border: 1px solid #7b7b7b;
        padding: 2px 5px;
        font-size: 14px;
        outline: none;
    }

    .search-button {
        height: 25px;
        padding: 0 15px;
        background: linear-gradient(to bottom, #f8f8f8, #dcdcdc);
        border: 1px solid #7b7b7b;
        border-radius: 2px;
        font-size: 13px;
        color: #000;
        cursor: pointer;
    }

    .search-button:hover {
        border-color: #000;
        background: #e8e8e8;
    }

  /* Estilos para la sección STAFF */
        .contenedor-columnas {
        display: flex;
        gap: 10px; /* Espacio entre columnas */
        padding: 10px;
    }

    /* Estilos de cada columna */
    .columna {
        flex: 1; /* Ambas columnas ocupan el mismo ancho (50%) */
        background-color: #f0f0f0;
        margin-top: -5px;
        padding-top: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 8px;
        list-style: none;  /* Elimina viñetas predeterminadas */
    }

    .columna p {
        text-align: left;
    }

    /* Aplicamos el símbolo fechita doble antes de cada etiqueta <b> */
    .columna b::before {
        content: "» "; /* El símbolo guillemet seguido de un espacio */
        color: #000000; /* Ajusta el color según el diseño de tu web */
        font-weight: bold;
        margin-right: 2px; /* Espacio entre la flecha y el título */
    }

    /* Opcional: Si quieres que cada bloque tenga un poco de aire 
    entre el nombre anterior y el nuevo título */
    .columna b {
        display: inline-block;
        margin-top: 15px; 
    }

    /* Evitamos que el primer título de cada columna tenga margen superior */
    .columna b:first-child {
        margin-top: 0;
    }

    /* Aplicamos el símbolo circulo negro antes de cada etiqueta <b> */
    .contenedor-agradece p::before {
        content: "\2022\00a0"; /* El símbolo guillemet seguido de un espacio */
        color: #000000; /* Ajusta el color según el diseño de tu web */
        font-weight: bold;
        margin-right: 2px; /* Espacio entre la flecha y el título */
    }

    /* Opcional: Si quieres que cada bloque tenga un poco de aire 
    entre el nombre anterior y el nuevo título */
    .contenedor-agradece p {
        display: inline-block;
        margin-top: 0px; 
    }

    /* Evitamos que el primer título de cada columna tenga margen superior */
    .contenedor-agradece p:first-child {
        margin-top: 0;
    }

    /* Estilos base para Sidebar right (PC) */
    /* Un dia como hoy - Ajuste del contenedor de la marquesina */
    
    .dia_como_hoy {
        width: 100% !important;
        max-width: 180px !important; /* Usamos 'max-width' para que en la PC no se desparrame */ 
        height: 20px !important;
        background-color: #000000 !important;
        border: 3px solid #a21010; /* CRUCIAL: Esto es lo que le dice al texto que el "borde" es el cuadro negro */
        position: relative !important; 
        overflow: hidden !important; 
        display: flex !important;
        align-items: center !important;
        margin: 5px auto !important; 
        padding: 0 !important;
        border: 1px solid #444;
    }

    .marquee-moderno {
        display: inline-block !important;
        white-space: nowrap !important; /* El texto se posiciona RESPECTO al cuadro negro */
        position: absolute !important; 
        left: 0 !important;
        width: auto !important;
        animation: desplazamiento 12s linear infinite !important;
    }

    @keyframes desplazamiento {
        0% { 
            /* Ahora el 100% es el ancho del CUADRO NEGRO, no de la pantalla */
            transform: translateX(250px); 
        }   
        100% { 
            transform: translateX(-100%); 
        }
    }

    .marquee-moderno span {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: #ffffff;
    }

    /* Pausar al pasar el mouse */
    .marquee-moderno:hover {
        animation-play-state: paused;
    } 
    
    .texto-final {
        font-weight: bold; 
        margin-top: 15px;
        text-align: center;
    }

    .sidebar-right {
        background-color: #750909;
        border-left: 2px solid #000;
        padding: 10px;
    }

    .poll-box {
        background-color: #750909;
        color: #fff;
        padding: 10px;
        border: 2px solid #ffffff;
        margin-bottom: 5px;
    }

    .poll-box h3 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .poll-box label {
        display: block;
        margin-bottom: 5px;
        font-size: 12px;
    }

    .poll-box button {
        margin-top: 10px;
        padding: 2px 10px;
        font-size: 11px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .poll-warning {
        font-size: 10px;
        text-align: center;
        margin-top: 5px;
    }

    #poll-results {
        font-size: 11px;
        line-height: 1.6;
    }

    #poll-results p {
        margin-bottom: 10px;
        text-align: left;
    }

    .right-ad {
        border: 1px solid #ccc;
        text-align: center;
        padding: 5px 10px;
        margin-bottom: 5px;
        background-color: #f9f9f9;
        font-weight: bold;
    }

    .right-ad img {
        width: 100%;
        height: auto;
        margin-top: 5px;
    } 
    
    .texto-dpto {
        border: 1px solid white; 
        padding: 2px; 
        font-size: 12px;
    }

    .texto-publicite {
        padding: 2px; 
        font-size: 18px;
    }

    /* Contenedor de la Galería Fotografica */
    .galeria-interactiva h2 {
        font-family: Arialblack;
        font-size: 30px;
        font-weight: bold;
        text-shadow: 1px 1px 1px #cc1a1a;
        margin-bottom: -15px;
    }

    .grid-galeria {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        padding: 20px 0;
    }

    .foto-item {
        position: relative;
        height: 150px;
        overflow: hidden;
        cursor: pointer;
        border: 3px solid #eee;
        transition: transform 0.3s ease;
    }

    .foto-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Recorta la imagen para que todas midan igual */
    }

    .foto-item:hover {
        transform: scale(1.05);
        border-color: #cc1a1a;
    }

    /* Efecto de texto al pasar el mouse */
    .overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(204, 26, 26, 0.7);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .foto-item:hover .overlay {
        opacity: 1;
    }

    /* ESTILOS DEL LIGHTBOX (EL ZOOM) */
    .lightbox {
        display: none;
        position: fixed;
        z-index: 9999; /* Un número muy alto para que nada lo tape */
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;
        background: rgba(0, 0, 0, 0.95); /* Un poco más oscuro */
        align-items: center;
        justify-content: center;
        flex-direction: column; /* Esto pone la foto arriba y el texto/botón abajo */
    }

    /* Reducimos un poco el tamaño máximo de la imagen para dejar espacio al botón */
    #img-ampliada {
        max-width: 90%;
        max-height: 80vh; /* 80% de la altura de la pantalla máximo */
        border: 3px solid white;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    #caption-lightbox {
        color: white;
        margin-top: 5px;
        font-size: 14px;
        font-weight: normal;
    }

    .cerrar {
        position: absolute;
        top: 20px; 
        right: 30px;
        color: rgb(255, 255, 255);
        font-size: 40px;
        cursor: pointer;
    }

    /* Efecto opcional: que cambie de color al pasar el mouse */
    .cerrar:hover {
        color: #cc1a1a; /* Rojo Lamadrid al pasar el mouse */
        transform: scale(1.2); /* Se agranda un poquito al tocarla */
    }

    /* Efecto zepia */
    .foto-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: sepia(0.6) grayscale(0.3); /* Efecto foto antigua */
        transition: filter 0.5s ease;
    }

    .foto-item:hover img {
        filter: sepia(0) grayscale(0); /* Color real al pasar el mouse */
    }

    /* =========================================
        ESTILOS PARA EL LIBRO DE VISITAS 
    ========================================= */

    /* Contenedor principal del libro */
    .guestbook-container {
        width: 100%;
        max-width: 950px; /* Igual que tu container principal */
        margin: 0 auto;
        border: 3px solid #fff; /* Marco blanco exterior */
        box-sizing: border-box;
        background-color: #750909; /* Fondo rojo Lamadrid */
        overflow: hidden; /* Mantiene todo dentro */
    }

    /* Cabecera estilo pestaña */
    .nav-tab-guestbook {
        display: flex;
        align-items: center;
        padding: 0 15px;
        height: 50px;
        background-color: #800000; /* Fondo del nav */
        border-bottom: 3px solid #fff; /* Borde estilo 'Secciones' */
        border-radius: 10px 10px 0 0; /* Pestaña */
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        box-shadow: 0 1px 0 0 #000; /* Sombra negra para relieve */
    }

    .guestbook-header-icon {
    /* Estilo si usas un icono */
        margin-right: 10px;
    }

    .guestbook-header-text {
        font-size: 16px;
        font-weight: bold;
    }

    /* Enlaces rojos sutiles en la cabecera (opcional) */
    .nav-links-red-minimal {
        margin-left: auto;
        font-size: 11px;
        color: #fff;
        padding-bottom: 5px;
    }

    /* Sección de entradas existentes */
    .guestbook-entries {
        padding: 20px 15px;
        border-bottom: 3px solid #fff;
        background-color: #750909; /* Fondo rojo Lamadrid */
    }

    .guestbook-entry {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #941515; /* Divisor sutil */
    }

    .guestbook-entry:last-child {
        border-bottom: none; /* Elimina el divisor en la última entrada */
    }

    .entry-meta {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        font-size: 11px;
        color: #fff;
        font-weight: bold;
    }

    .entry-prefix {
        margin-right: 5px;
    }

    .entry-date {
        font-weight: normal;
        font-style: italic;
        margin-left: 5px;
    }

    .entry-comment {
        font-size: 13px;
        color: #fff;
        line-height: 1.4;
        margin-left: 15px; /* Alineación del texto */
        text-align: justify;
    }

    /* Sección de firmas */
    .guestbook-signature-area {
        padding: 15px;
        background-color: #750909; /* Fondo rojo Lamadrid */
        border-bottom: 3px solid #fff;
        color: #fff;
    }

    .guestbook-signature-area h3 {
        font-size: 16px;
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
        margin-bottom: 15px;
    }

    .signature-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .signature-item {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 11px;
        border: 1px solid #fff;
    }

    .sig-name {
        font-weight: bold;
        margin-right: 5px;
    }

    .sig-date {
        font-style: italic;
    }

    /* Formulario de envío */
    .guestbook-form-container {
        padding: 20px 15px;
        background-color: #750909; /* Fondo rojo Lamadrid */
        color: #fff;
    }

    .guestbook-form-container h3 {
        font-size: 16px;
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
        margin-bottom: 15px;
    }

    .guestbook-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        font-size: 12px;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        padding: 8px 10px;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
    }

    .form-group textarea {
        resize: vertical; /* Permite cambiar el tamaño verticalmente */
    }

    /* Placeholder styling */
    .form-group input::placeholder,
    .form-group textarea::placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-style: italic;
    }

    .form-group-btn {
        display: flex;
        justify-content: center;
    }

    .guestbook-submit-btn {
        background-color: #800000; /* Fondo estilo 'nav' */
        color: #fff;
        border: 3px solid #fff;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 0 0 #000; /* Sombra negra para relieve */
    }

    .guestbook-submit-btn:hover {
        background-color: #cc1a1a; /* Rojo Lamadrid al pasar el mouse */
    }

    .footer {
        background-color: #fff;
        text-align: center;
        padding-top: 20px;
        border-top: 2px solid #000;
    }

    .footer-irright {
        margin-top: -15px;
    }  
    
    .footer-irright a {
        text-decoration:underline;
        color:#750909;
    }  

    .footer-logo {
        background-color: #750909;
        color: #fff;
        display: inline-block;
        padding: 5px 20px;
        font-size: 24px;
        font-style: italic;
        font-weight: bold;
        margin-top: -20px;
        margin-bottom: 10px;
        border: 2px solid #000;
    }

    .footer-links {
        margin: 15px 0;
        font-size: 11px;
        font-family: Arial, Helvetica, sans-serif;
        color: #750909;
        text-transform: uppercase;
        line-height: 1.8;
        font-weight: bold;
    }

    .footer-links a {
        color: #750909;
        text-decoration: none;
        margin: 0 5px;
        display: inline-block;
        font-weight: bold;
    }

    .footer-links a:hover {
        text-decoration: underline;
    }

    .copyright-bar {
        background-color: #000;
        color: #fff;
        text-align: center;
        padding: 10px;
        font-size: 12px;
        margin-top: 2px;
        border-bottom: 3px solid #9D9797;
    }

    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    .parpadeo {
        animation: parpadeo-anim 1.5s linear infinite;
        color: #750909;
        text-align: center;
        font-size: 12px;
        font-weight: normal;
    }

    .parpadeo-lento { 
        margin-top: -12px;
        animation: parpadeo-anim 2s linear infinite; 
        font-weight: normal; 
        color: #ffffff;
        font-size: 20px;
        text-align: center;
    } 
    
    .image-wrapper img {
        border: 1px solid #000;
        max-width: 100%;
        height: auto;
    }

    @keyframes parpadeo-anim {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }

    .poll-box button {
        margin-top: 10px;
        padding: 2px 10px;
        font-size: 14px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .poll-warning {
        font-size: 14px;
        text-align: center;
        margin-top: 5px;
    }

    /* --- ARREGLO DEFINITIVO FOTO DEL DÍA (Lamadridweb) --- */

    #contenedor-foto-dia {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
        background: #000 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important; /* Corta cualquier cosa que intente salir */
        border: none !important;     /* Quita bordes que puedan estar desplazando la foto */
        position: relative !important;
    }

    #img-foto-dia {
        width: 100% !important;      /* Obliga a que el ancho sea el del contenedor */
        height: auto !important;     /* Ajusta el alto proporcionalmente */
        display: block !important;
        margin: 0 !important;        /* Centrado total */
        padding: 0 !important;
        object-fit: contain !important; /* Clave: para que se vea TODA la foto */
        border: none !important;
    }

    /* ==================================
        ESTILOS PARA CONTACTENOS 
    ================================= */

.contacto-container {
    max-width: 700px; /* Un ancho más cómodo para una sola columna */
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.contacto-header {
    text-align: center;
    margin-bottom: 30px;
}

.contacto-header h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.contacto-header p {
    color: #666;
    font-size: 1rem;
}

/* Contenedor general en una sola columna */
.contacto-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre la info de contacto y el formulario */
    background: #ffffff;
    margin-top: -35px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Bloque de información arriba */
.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Línea separadora sutil opcional */    
    margin-top: -15px;
    margin-bottom: -10px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.info-item i {
    font-size: 1.3rem;
    color: #3498db;
    margin-top: 4px;
}

.info-item h3 {
    font-size: 1.05rem;
    margin: 0 0 3px 0;
    color: #2c3e50;
}

.info-item p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
}

/* Formulario más compacto debajo de la info */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio más cercano entre campos */
    position: relative;
    z-index: 10;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #444;
}

/* Campos con sus bordes directos */
.form-group input,
.form-group textarea {
    padding: 12px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    background-color: #ffffff;
    color: #333333;
    width: 100%;
    pointer-events: auto !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
}

.btn-enviar {
    background-color: #750909;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 5px;
}

.btn-enviar:hover {
    background-color: #750909;
}    

/* ==================================
        ESTILOS PARA SABIAS QUE 
    ================================= */
.sabias-que-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif;
}

.capitulos-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.tab-btn {
    background-color: #f0f0f0;
    border: none;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: #444;
    transition: all 0.3s ease;
}

.tab-btn:hover, .tab-btn.active {
    background-color: #750909; /* Tono tierra/madera acorde a la temática histórica */
    color: white;
}

.curiosidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: -20px;
}

.curiosidad-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 1px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.curiosidad-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.badge {
    font-size: 0.8rem;
    background: #750909;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.curiosidad-card h3 {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #2c2c2c;
}

.curiosidad-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ==================================
        ESTILOS PARA ICONOS 
    ================================= */
.contenedor-noticias {
        max-width: 100%;
        margin-top: 0;
        padding: 0px;
        background: #ffffff;
        color: #111;
        font-family: Arial, sans-serif;
        line-height: 1.6;  
    }

    .contenedor-noticias p {
        margin-bottom: 8px;
    }

    .contenedor-noticias p a {
        color: #750909;
        font-weight: bold;
        
    }

    /* Contenedor y estilos exclusivo para imágenes de ancho completo */
    .contenedor-noticias hr {
            width: 70%; /* Cambia el ancho según prefieras */
            margin-left: auto;   /* Margen automático a la izquierda */
            margin-right: auto;  /* Margen automático a la derecha */
            margin-top: 10px;
        }
    .imagen-ancho-completo {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0px !important;
        margin-bottom: 8px !important;
        text-align: center;
        display: block;
    }

    .imagen-ancho-completo img {
        width: 100% !important;
        height: auto !important;
        max-height: 500px;
        object-fit: cover;
        display: block;
    }
 
    /* =========================================
            MEDIA QUERIES PARA RESPONSIVE DESIGN 
       ========================================= */

    @media screen and (max-width: 900px) {
        .imagen-lateral {
            float: none !important;
            width: 100% !important;
            margin: 0 auto 10px auto !important; /* Centra la foto */
            display: block !important;
        }
        
        .imagen-lateral img {
            width: 100% !important;
            height: auto !important; /* Que no se aplaste en el celu */
        }

        .contenedor-noticia p {
            margin-top: 0 !important; /* Cierra el hueco azul */
        }
    }

    @media (max-width: 768px) {
        body {
            background-color: #333;
            color: #000;
            font-size: 18px;
            line-height: 1.4;
        }

        .top-bar {
            height: 29px;
            background-color: #000;
            color: #fff;
            text-align: right;
            padding: 7px 10px;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 2px;
            border-top: 3px solid #9D9797;
        } 
        
        .nav-container {
                height: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                padding: 10px 0 0 0 !important;
                background: #800000 !important;
        }

        .nav-links-red {
            order: 1;
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            padding: 5px 0 10px 0 !important;
            margin: 0 !important;
            font-size: 16px !important;
            border-bottom: 1px solid #ffffff !important; 
            box-shadow: 0 1px 0 0 #000000 !important; 
        }

        .nav-tab-autoria {
            order: 2;
            display: block !important;
            width: 100% !important;
            font-size: 16px !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 10px 0 !important;
            text-align: center !important;
            color: #ffffff !important;
            border-bottom: 1px solid #ffffff !important; 
            box-shadow: 0 1px 0 0 #000000 !important; 
        }

        .nav-tab-home {
            order: 3;
            display: flex !important;
            margin: 20px auto 0 auto !important;
            width: 160px !important;
            height: 35px !important;
            justify-content: center;
            align-items: center;
            background: #750909;
            border: 2px solid #fff;
            border-bottom: none;
            border-radius: 10px 10px 0 0;
        }

        .nav-tab-home a { 
            color: #fff; 
            text-decoration: none; 
            font-size: 16px;
            font-weight: bold;
        }

        .imagen-lateral {
            float: none;
            width: 100%;
            height: auto;
            margin-bottom: 15px;
        }

        .imagen-lateral img {
            height: auto;
        }

        .contenedor-noticia p {
            margin-top: -14px;
            margin-bottom: 3px;    
        }

        .texto-final {
        font-weight: bold; 
        margin-top: 15px;
        text-align: center;
        }

        .sidebar-right {
            padding: 0 !important;
        }

        /* Agregamos el borde arriba de la marquesina "Un día como hoy" */
        /* Agregamos el borde arriba de la marquesina "Un día como hoy" */
        .top-ayer {
            border-top: 1px solid #e0e0e0; /* Un gris sutil y tenue */
            padding-top: 5px;            /* Un poco de espacio para que no sature */
            margin-top: -5px;             /* Separación con el texto de arriba */
        }
    
        .dia_como_hoy {
            width: 100vw !important;
            margin-left: -10px; /* Ajuste manual según el padding de tu main-layout */
        }

        #contenedor-foto-dia {
            width: 100vw !important; /* Ancho completo de pantalla */
            margin-left: 50% !important;
            transform: translateX(-50%) !important; /* Truco para centrar al romper el contenedor */
            left: 0 !important;
        }
    
        #img-foto-dia {
            width: 100% !important;
        }
    
        /* Evita que aparezca una barra de desplazamiento horizontal */
        body {
            overflow-x: hidden;
        }
        
        /* Codigo para sección Contáctenos */
            .volanta-small {
            font-size: 13px;
            font-style: italic;
            font-weight: bold;
            color: #6e6c6c;
            margin-top: -10px;
            padding: 0;
            text-decoration: none; /* Asegura que la volanta tampoco tenga línea */
        }

        .contacto-content {
        grid-template-columns: 1fr;
        padding: 20px;
        }

        .footer-links {
            margin: 15px 0;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
            color: #750909;
            text-transform: uppercase;
            line-height: 1.8;
            font-weight: bold;
        }

        .marquee-moderno span {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 19px;
            font-weight: normal;
            color: #ffffff;
        }

        .poll-box h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .poll-box label {
            display: block;
            margin-bottom: 5px;
            font-size: 17px;
        }

        .poll-box button {
            margin-top: 10px;
            padding: 2px 10px;
            font-size: 16px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .poll-warning {
            font-size: 15px;
            text-align: center;
            margin-top: 5px;
        }

        #poll-results {
            font-size: 16px;
            line-height: 1.6;
        }

        #poll-results p {
            margin-bottom: 15px;
            text-align: left;
        }

        .parpadeo-lento { 
            margin-top: -12px;
            animation: parpadeo-anim 2s linear infinite; 
            font-weight: normal; 
            color: #ffffff;
            font-size: 45px;
            text-align: center;
        }
        
        .texto-publicite {
            padding: 2px; 
            font-size: 30px;
        }

        .texto-dpto {
            border: 1px solid white; 
            padding: 2px; 
            font-size: 20px;
        }  
        
        /* Codigo para listas y sublistas en un párrafo - FUNCIONA */
        ul {
                list-style-type: none; /* Quita los puntos de la lista */
                padding-left: 0;
                margin: 0;
                font-family: sans-serif; /* Cambia a tu tipografía preferida */
                line-height: 1.6;
            }
            /* Aplica sangría solo a los vocales que van debajo */
            .sublista-vocales {
                padding-left: 78px; /* Ajusta este valor para alinear con "Wellington Soria" */
            }

    @media (max-width: 650px) {
        .dia_como_hoy {
            height: 30px;
            padding-top: 2px;
        }
        .marquee-moderno span {
            font-size: 12px;
        }
        .main-layout {
            display: block !important;
        }
        .left-menu {
            display: none; 
            width: 100%;
        }
        .menu-abierto {
            display: block !important;
        }
        .menu-btn {
            display: block !important;
            width: 100%;
            font-size: 15px;
        }

        .ad-box-container {
            display: block; 
            padding: 10px;
        }
        
        /* Si alguien lo ve desde un celular, se transforma en 1 sola columna ordenada
        .galeria-adaptable {
            grid-template-columns: 1fr;
            gap: 30px;
        } */
    }

    @media (max-width: 600px) {
        .main-header {
            flex-direction: column;
            height: auto; /* Para que las dos imágenes queden una sobre otra */
            text-align: center;
        }
                
        .header-video {
            justify-content: center;
            width: 100%;
        }

        /* 2. Ajustamos los enlaces centrales para que no se amontonen */
        .nav-links-red {
            display: none; /* Opcional: ocultarlos si ya están dentro de "Secciones del sitio" */
        }

        /* 3. Hacemos que el Home ocupe un espacio más natural */
        .nav-tab-home {
            width: auto;
            margin-left: 0;
            border-radius: 10px 10px 0 0;
        }

        .nav-container {
            padding: 0 10px;
            justify-content: flex-start;
        }

        .dia_como_hoy {
            max-width: 100% !important; /* En el celu usa casi todo el ancho disponible */
        }
            
        @keyframes desplazamiento {
            0% { transform: translateX(200px); } /* Un inicio más corto para el celu */
            100% { transform: translateX(-100%); }
        }
    }

}