@charset "utf-8";
/* CSS Document */
 
    <style>
    body {
      background-color: black;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    table {
      width: 100%;
      text-align: center;
      background-color: black;
    }
    td {
      padding: 12px;
    }
    a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      font-size: 16px;
    }
    a:hover {
      color: cyan;
    }
  </style>

    <style>        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f0f2f5; /* Color de fondo general de la página */
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        /* Contenedor principal de la sección de Tradición */
        .tradition-section {
            display: flex; /* Habilitar Flexbox */
            gap: 40px; /* Espacio entre las dos columnas */
            max-width: 1200px; /* Ancho máximo para la sección */
            width: 100%; /* Asegura que ocupe el ancho disponible */
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra ligera para el contenedor general */
            border-radius: 8px; /* Bordes redondeados */
            overflow: hidden; /* Asegura que los bordes redondeados se apliquen bien */
            background-color: #ffffff; /* Fondo blanco para toda la sección */
        }

        /* Estilos para el panel izquierdo (contenido de texto) */
        .tradition-left-panel {
            flex: 1; /* Crece para ocupar el espacio restante */
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Centra verticalmente el contenido */
        }

        .tradition-left-panel h2 {
            font-size: 2.5em;
            text-align: center;
            margin-top: 0;
            margin-bottom: 30px; /* Espacio debajo del título */
            color: #333; /* Color oscuro para el título */
        }

        .tradition-left-panel p {
            font-size: 1.1em;
            line-height: 1.6;
            color: #555;
            margin-bottom: 20px; /* Espacio entre párrafos */
            text-align: justify;
        }

        /* Estilos para el panel derecho (collage de imágenes) */
        .tradition-right-panel {
            flex: 0 0 500px; /* Ancho fijo para el panel de imágenes, ajusta si es necesario */
            background-color: #f0f0f0; /* Un gris muy claro para el fondo del panel de imágenes */
            padding: 20px;
            display: grid; /* Usamos CSS Grid para el collage de imágenes */
            grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
            grid-template-rows: 1fr 1fr; /* Dos filas de igual tamaño */
            gap: 15px; /* Espacio entre las imágenes en la cuadrícula */
            align-items: center; /* Centra las imágenes verticalmente */
            justify-content: center; /* Centra las imágenes horizontalmente */
        }

        .tradition-image-item {
            width: 100%;
            height: 100%;
            overflow: hidden; /* Oculta partes de la imagen si se desborda del contenedor */
            border-radius: 5px; /* Bordes ligeramente redondeados para las imágenes */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para las imágenes */
        }

        .tradition-image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
            display: block; /* Elimina espacio extra */
        }

        /* El elemento de la esquina superior derecha (la imagen larga) */
        .tradition-image-item.tall-image {
            grid-column: 2; /* Ocupa la segunda columna */
            grid-row: 1 / span 2; /* Ocupa la primera fila y se extiende a la segunda (dos filas) */
        }

        /* Media Queries para responsividad */
        @media (max-width: 768px) {
            .tradition-section {
                flex-direction: column; /* Apila los paneles verticalmente en pantallas pequeñas */
                gap: 20px;
                padding: 15px;
            }

            .tradition-left-panel, .tradition-right-panel {

                flex: none; /* Deshabilita el comportamiento flex para que tomen el ancho completo */
                width: auto;
                max-width: 100%;
                padding: 25px;
            }

            .tradition-left-panel h2 {
                font-size: 2em;
            }

            .tradition-left-panel p {
                font-size: 0.95em;
            }

            .tradition-right-panel {
                grid-template-columns: 1fr; /* Una sola columna para las imágenes en móviles */
                grid-template-rows: auto; /* Las filas se ajustan automáticamente */
                gap: 10px;
                padding: 15px;
            }

            .tradition-image-item.tall-image {
                grid-column: 1; /* Vuelve a la primera columna */
                grid-row: auto; /* Ya no ocupa dos filas, solo una */
            }
        }
		   footer {
      background-color: #023e8a;
      color: white;
      text-align: center;
      padding: 1rem 0;
      margin-top: 2rem;
    }
    </style>