body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)), /* Gradiente para aclarar la izquierda */
    url('https://sacredheartofjesus.london/staging/5203/wp-content/uploads/2025/05/hands.jpeg'); /* Imagen de fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-size: cover; /* Ajusta el ancho al 100% y la altura automáticamente */
    background-position: center; /* Centra la imagen */
    display: flex; /* Flexbox para centrar contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.table-container {
    text-align: center; /* Centra el contenido del contenedor */
}
.table-responsive {
    max-height: 100vh; /* Limita la altura máxima del contenedor al 80% de la ventana */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
    overflow-x: hidden; /* Evita el desplazamiento horizontal si no es necesario */
    -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos táctiles */
}

.table-container {
    text-align: center; /* Centra el contenido del contenedor */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
    overflow-x: auto; /* Permite desplazamiento horizontal en pantallas pequeñas */
    -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos táctiles */
}

table {
    border-collapse: collapse; /* Colapsa los bordes de la tabla */
    width: 100%; /* Ajusta el ancho de la tabla */
    /*max-width: 600px; /* Limita el ancho máximo de la tabla */
    background-color: transparent; /* Fondo transparente */
    box-shadow: none; /* Sin sombra */
    margin: 0 auto; /* Centra la tabla horizontalmente */
}

td {
    border: none; /* Sin bordes */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centra el texto dentro de las celdas */
    font-size: 16px; /* Tamaño de fuente */
    font-family: Arial, sans-serif; /* Fuente legible */
    color: #000; /* Color del texto */
    word-wrap: break-word; /* Ajusta el texto largo dentro de las celdas */
}

.responsive-row {
    display: flex; /* Usa Flexbox para alinear las columnas en una fila */
    justify-content: space-between; /* Espacio entre las columnas */
    gap: 20px; /* Espaciado entre columnas */
    flex-wrap: wrap; /* Permite que las columnas se envuelvan en vista móvil */
    width: 100%; /* Asegura que ocupe todo el ancho */
}

.column {
    flex: 1; /* Las columnas ocupan el mismo espacio */
    min-width: 200px; /* Ancho mínimo para cada columna */
    text-align: center; /* Centra el contenido dentro de cada columna */
}

.three-rows {
    display: inline-flex;
    flex-direction: column; /* Alinea las filas en una columna */
    min-height: 400px; /* Altura mínima */
    max-height: 845px; /* Altura máxima */
    height: auto; /* Permite que el alto se ajuste automáticamente */
}

.two-rows {
    display: inline-flex;
    flex-direction: column; /* Alinea las filas en una columna */
    min-height: 400px; /* Altura mínima */
    max-height: 845px; /* Altura máxima */
    height: auto; /* Permite que el alto se ajuste automáticamente */
}

.row {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    text-align: center; /* Centra el texto */
    padding-top: 5px;
}

.top-rowa, .bottom-rowa {
    height: 50px; /* Altura de la primera y última fila */
}

.top-row, .bottom-row {
    height: 50px; /* Altura de la fila */
    background-color: #EB1259; /* Color de fondo del botón */
    color: white; /* Color del texto */
    font-size: 14px; /* Tamaño del texto */
    display: flex; /* Flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0px 4px 6px #8E0B36; /* Sombra debajo del botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación suave */
}

.top-row:hover {
    transform: translateY(-2px); /* Eleva el botón al pasar el cursor */
    box-shadow: 0px 6px 8px #8E0B36; /* Aumenta la sombra al pasar el cursor */
    background-color: #8E0B36 !important; /* Cambia el color de fondo al pasar el cursor */
}

.top-row:active {
    transform: translateY(1px); /* Simula un clic */
    box-shadow: 0px 2px 4px #8E0B36; /* Reduce la sombra al hacer clic */
}

.bottom-row:hover {
    transform: translateY(-2px); /* Eleva el botón al pasar el cursor */
    box-shadow: 0px 6px 8px #8E0B36; /* Aumenta la sombra al pasar el cursor */
    background-color: #8E0B36 !important; /* Cambia el color de fondo al pasar el cursor */
}

.bottom-row:active {
    transform: translateY(1px); /* Simula un clic */
    box-shadow: 0px 2px 4px #8E0B36; /* Reduce la sombra al hacer clic */
}

.bottom-row {
    height: 50px; /* Altura de la primera y última fila */
}

.middle-row {
    display: flex; /* Asegura que el contenido interno se comporte como flexbox */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
    min-width: 336px; /* Asegura que el contenedor tenga al menos 336px de ancho */
    height: 445px; /* Altura fija para la fila del medio */
    padding-bottom: 2px;
    overflow: hidden; /* Evita desbordamientos */
}

.middle-row img {
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    min-width: 336px; /* Asegura que la imagen tenga al menos 336px de ancho */
    /*object-fit: contain; /* Ajusta la imagen para que se vea completa */
    display: block; /* Elimina el espacio extra debajo de la imagen */
}
.middle-row-limited {
    display: flex; /* Asegura que el contenido interno se comporte como flexbox */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
    min-width: 336px; /* Asegura que el contenedor tenga al menos 336px de ancho */
    max-width: 480px; /* Limita el ancho máximo del contenedor */
    height: auto; /* Ajusta automáticamente el alto al contenido */
    padding-bottom: 2px;
    overflow: hidden; /* Evita desbordamientos */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

.middle-row-limited img {
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    min-width: 336px; /* Asegura que la imagen tenga al menos 336px de ancho */
    display: block; /* Elimina el espacio extra debajo de la imagen */
}
.new-column {
    flex: 1; /* Las columnas ocupan el mismo espacio */
    text-align: center; /* Centra el contenido dentro de cada columna */
    padding: 10px; /* Espaciado interno */
    color: white; /* Color del texto */
    font-size: 14px; /* Tamaño del texto */
    background-color: #EB1259; /* Color de fondo */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0px 4px 6px #8E0B36; /* Sombra debajo */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación suave */
    margin: 1px; /* Espaciado entre columnas */
}

.new-column:hover {
    transform: translateY(-2px); /* Eleva la columna al pasar el cursor */
    box-shadow: 0px 6px 8px #8E0B36; /* Aumenta la sombra al pasar el cursor */
    background-color: #8E0B36 !important; /* Cambia el color de fondo al pasar el cursor */
}

.new-column:active {
    transform: translateY(1px); /* Simula un clic */
    box-shadow: 0px 2px 4px #8E0B36; /* Reduce la sombra al hacer clic */
}

.link-style{
    display: flex; /* Flexbox para centrar el contenido */
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    color: inherit;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.link-style-new-column{
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    color: inherit;
}

/* Vista móvil */
@media (max-width: 768px) {
    .responsive-row {
        flex-direction: column; /* Cambia las columnas a una sola columna */
        align-items: center; /* Centra las columnas en vista móvil */
    }

    .column {
        width: 100%; /* Cada columna ocupa todo el ancho */
    }
}

/* Estilo de letras */

.theme-text-color-0-0 {
    color: rgb(255, 255, 255);
}

.text-type-a{
    background: none;
    text-align: center; 
    color: rgb(36, 36, 36); 
    text-shadow: rgba(0, 0, 0, 0.55) 1px 1px 5px; 
    line-height: 1.28; 
    letter-spacing: 0px; 
    font-size: 28px; 
    font-family: 'Open Sans', sans-serif;
}

.especial-content {
    width: 616px !important;
    height: 616px !important;
}

.text-a {
    font-size: 42px ;
}
.text-b {
    color:#0922f6;
    font-size: 36px ;
}
.text-c {
    color:#0bf605;
    font-size: 30px ;
}
.text-d {
    color:#f40707;
    font-size: 26px ;
}

/* Media query para pantallas móviles de hasta 430px de ancho */
@media (max-width: 430px) {
    body {
        font-size: 18px !important; /* Reduce el tamaño de fuente general */
    }
    .text-a {
        font-size: 18px ;
    }
    .text-b {
        font-size: 18px ;
    }
    .text-c {
        font-size: 18px ;
    }
    .text-d {
        font-size: 18px ;
    }
    .especial-content {
        width: 380px !important;
        height: 380px !important;
    }

    .table-container {
        padding: 0px; /* Añade un poco de espacio alrededor del contenido */
    }

    .three-rows {
        max-width: 380px; /* Asegura que el contenedor ocupe todo el ancho disponible */
        margin: 0 auto; /* Centra el contenedor */
    }

    .two-rows {
        max-width: 380px; /* Asegura que el contenedor ocupe todo el ancho disponible */
        margin: 0 auto; /* Centra el contenedor */
        min-height: 300px !important;
    }

    .row {
        padding: 5px; /* Reduce el espaciado interno */
    }

    .top-row, .bottom-row {
        font-size: 12px; /* Reduce el tamaño del texto */
        /*height: auto; /* Permite que el alto se ajuste automáticamente */
        padding: 5px; /* Reduce el relleno */
    }

    .middle-row, .middle-row-limited {
        height: auto; /* Ajusta automáticamente el alto al contenido */
        max-width: 100%; /* Asegura que el contenedor no exceda el ancho de la pantalla */
    }

    .middle-row img, .middle-row-limited img {
        max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
        height: auto; /* Ajusta automáticamente la altura */
    }

    .new-column {
        font-size: 12px; /* Reduce el tamaño del texto */
        padding: 5px; /* Reduce el espaciado interno */
        margin: 2px; /* Reduce el margen entre columnas */
    }

    .responsive-row {
        flex-direction: column; /* Cambia las columnas a una sola columna */
        gap: 10px; /* Reduce el espacio entre filas */
        padding: 0px;
    }
}
/* ===== NOVENA SECTION PERFECT MATCH ===== */

.novena-section{
    text-align: center;
}

.novena-container{
    width: 432px;   /* Exact width of Jesus.png */
    margin: 0 auto;
}

.novena-container .top-row{
    width: 432px;
}

.novena-container .link-style{
    width: 100%;
}

.novena-image img{
    width: 432px;
    height: auto;
    display: block;
    margin: 0 auto;
}