/* Global reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
}

/* Custom Font */
@font-face {
    font-family: 'SerifBeta';
    src: url('font/Serif12Beta-Regular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

/* Headers */
h1.h0,
h2.h0 {
    font-family: "Serif12 Beta";
    font-size: 80px;
    font-style: italic;
    font-weight: 700;
    line-height: 70px; /* 87.5% */
    background: linear-gradient(90deg, #FFDB1F 0%, #FFF9D9 50%, #CEAD00 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h1.h0.secondary {
    font-family: "Serif12 Beta";
    font-size: 55px;
    font-style: italic;
    font-weight: 700;
    line-height: 50px;
    background: #FFF;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    /* Style for H2 */
    font-family: "Serif12 Beta";
    font-size: 32px;
    font-style: italic;
    font-weight: 700;
    line-height: 120%;
}

h3 {
    /* Style for H3 */
    font-family: "Apple Garamond";
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
}

/* Text Styling */
.white-text {
    color: #FFF;
}
.gold {
    font-style: italic;
    background: linear-gradient(90deg, #FFDB1F 0%, #FFF9D9 50%, #CEAD00 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


p, a, li, label {
    /* Paragraph, anchor, list item, label styles */
    color: #1B1B1B;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 28px; /* 155.556% */
}
ol {
    width: 100%;
}
ol li {
    font-weight: 600;
    margin-bottom: 15px;
}

::placeholder {
    /* Placeholder styling */
    color: rgba(124, 37, 41, 0.25) !important;
    font-family: Raleway;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px; /* 155.556% */
}

/* Buttons */
.btn-primary, .btn-secondary {
    /* Shared styles for primary and secondary buttons */
    border-radius: 12px;
    padding: 15px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
    border: none;
}

.btn-primary {
    background: #643335;
    color: #FFF;
}

.btn-secondary {
    background: #FFF;
    color: #1B1B1B;
}

.btn-primary:hover,
.btn-secondary:hover {
    background: rgba(124, 37, 41, 0.75);
}

/* Form Inputs */
input,
textarea {
    /* Input fields and textarea styling */
    border-radius: 6px;
    border: 1px solid #1B1B1B !important;
    padding: 10px;
    font-family: Raleway;
    font-size: 18px;
    line-height: 28px; /* 155.556% */
}

/* Navbar */
.navbar {
    padding: 20px 5%;
    background-image: url('assets/Fondo\ Oscuro_Templo\ del\ recuerdo.jpg');
    background-size: cover;
}

nav .nav-item {
    padding-left: 25px;
}

nav .nav-link, nav .nav-link.active {
    /* Navbar link styling */
    color: #FFF !important;
    font-family: Raleway;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
    transition: border-bottom 0.5s linear;
}

nav .nav-item:hover .nav-link,
nav .nav-link.active {
    border-bottom: 3px solid #FFDB1F;
}

/* Hero and Card Sections */
.section-background {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.section-background:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(27, 27, 27, 0.6);
    z-index: 1;
}

.section-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index:0;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
  

.section-content {
    position: relative;
    z-index: 1;
}

#cards {
    background-image: url('assets/Fondo\ Claro_Templo\ del\ recuerdo.jpg');
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
}

#info {
    background-image: url('assets/Fondo\ Oscuro_Templo\ del\ recuerdo.jpg');
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
}

#info,
#info p,
#info li {
    color: #FFF;
}

#info:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #FFDB1F 0%, #FFF9D9 50%, #CEAD00 100%);
    bottom: 0;
    left: 0;
}

/* Flip Card Effect */
.flip-card {
    perspective: 1000px;
    border-radius: 12px;
    border: none;
    box-shadow: 0px 167px 47px 0px rgba(18, 18, 18, 0.00), 0px 107px 43px 0px rgba(18, 18, 18, 0.01), 0px 60px 36px 0px rgba(18, 18, 18, 0.05), 0px 27px 27px 0px rgba(18, 18, 18, 0.09), 0px 7px 15px 0px rgba(18, 18, 18, 0.10);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    /* Shared flip-card styles */
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 5px solid #FFDB1F;
    border-radius: 12px;
}

.flip-card-front {
    background-color: #FFF;
}

.flip-card-back {
    background-color: #FFFBF1;
    color: white;
    transform: rotateY(180deg);
    flex-direction: column;
    text-align: left;
}

/* Container Styling */
.full-width-container {
    width: 100%;
    margin: 0 auto;
}

.full-width-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.image-50 {
    height: 300px;
}

.image-25 {
    height: 150px;
}

.modal.show .modal-dialog {
    max-width: 800px;
}

/* Footer */
footer {
    display: flex;
    padding: 60px 72px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: url('assets/Fondo\ Oscuro_Templo\ del\ recuerdo.jpg') lightgray 50% / cover no-repeat;
}

footer p,
footer a {
    color: #FFF;
}

footer p {
    font-weight: 500;
}

footer a {
    font-weight: 700;
    text-decoration: none;
}

footer hr {
    height: 1px;
    border: none;
    background-color: #FFF;
    opacity: 1;
}

footer .social-icon {
    width: 32px;
    height: 32px;
    display: inline-block;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
footer .social-icon:not(:last-child) {
    margin-right: 1em;
}
footer .social-icon.fb {
    background-image: url('assets/fb.svg');
}
footer .social-icon.instagram {
    background-image: url('assets/ig.svg');
}
footer .social-icon.whatsapp {
    background-image: url('assets/wa.svg');
}

/* List Styling */
.container ul {
    list-style: none;
}

.container ul li {
    padding-bottom: 15px;
}
.disponibilidad ul li {
    padding-bottom: 0;
}

.container ul li:before {
    content: '';
    position: absolute;
    margin-top: 7px;
    margin-left: -25px;
    width: 12px;
    height: 12px;
    background: linear-gradient(90deg, #FFDB1F 0%, #CEAD00 33%, #FFDB1F 66%, #CEAD00 100%);
    transform: rotate(45deg);
}
.disponibilidad ul li:before {
    display: none;
}


.columbarios img{
    background-color: #FFF;
    border-radius: 12px;
    /* crad shadow mini */
    box-shadow: 0px 42px 12px 0px rgba(55, 55, 55, 0.00), 0px 27px 11px 0px rgba(55, 55, 55, 0.01), 0px 15px 9px 0px rgba(55, 55, 55, 0.05), 0px 7px 7px 0px rgba(55, 55, 55, 0.09), 0px 2px 4px 0px rgba(55, 55, 55, 0.10);

    height: 280px;
    object-fit: contain;
}

.dot {
    display: inline-block;
    margin: 30px 0 20px;
    width: 12px;
    height: 12px;
    background: linear-gradient(90deg, #FFDB1F 0%, #CEAD00 33%, #FFDB1F 66%, #CEAD00 100%);
    transform: rotate(45deg);
}

.urnas .col-sm-3,
.urnas .col-sm-5 {
    margin-bottom: 4em;
}

iframe.map {
    border-radius: 30px;

    /* card shadow */
    box-shadow: 0px 167px 47px 0px rgba(18, 18, 18, 0.00), 0px 107px 43px 0px rgba(18, 18, 18, 0.01), 0px 60px 36px 0px rgba(18, 18, 18, 0.05), 0px 27px 27px 0px rgba(18, 18, 18, 0.09), 0px 7px 15px 0px rgba(18, 18, 18, 0.10);
}



/* Contenedor para el iframe con aspect ratio */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Aspect ratio de 16:9 */
    height: 0;
    overflow: hidden;
    display: none; /* Ocultar por defecto */
    margin-top: 3em;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Mostrar el iframe cuando esté activo */
.iframe-container.active {
    display: block; /* Mostrar iframe cuando tenga la clase 'active' */
}

/* Estilos personalizados para los botones de los módulos */
#galleryTabsContent button {
    background-color: #A07400; /* Fondo del botón */
    color: #fff; /* Color de texto */
    border: none; /* Sin bordes */
    font-weight: 100;
    padding: 10px 20px; /* Tamaño del botón */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Animación al pasar el cursor */
}

#galleryTabsContent button:hover {
    background-color: #1B1B1B; /* Fondo del botón al pasar el cursor */
    color: #fff; /* Mantener el color del texto */
}

#galleryTabsContent button:focus {
    outline: none; /* Eliminar el borde de enfoque */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra de enfoque */
}

/* Estilo para el botón seleccionado */
#galleryTabsContent button.active {
    background-color: #1B1B1B; /* Color verde para indicar selección */
    color: #fff; /* Color de texto blanco */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra cuando está activo */
}

#disponibilidad {
    background-image: url('assets/Fondo\ Claro_Templo\ del\ recuerdo.jpg');
    background-size: contain;
    background-repeat: repeat;
}

.disponibilidad button,
.disponibilidad button:hover {
    color: #1B1B1B;
}
.disponibilidad .nav-link.active,
.disponibilidad .nav-link:hover,
.disponibilidad .nav-item:hover {
    background-color: #dedede;
    box-shadow: 0px -7px 10px 0px rgba(0,0,0,0.05);
    border: none;
}

.disponibilidad li {
    margin-right: .5em;
}



/* Leyenda */
.legend {
    position: absolute;
    right: 3%;
    bottom: 10%;
    z-index: 10;
    width: 200px;
    background: rgba(255, 255, 255, 0.5); /* Fondo blanco semitransparente */
    border-radius: 10px; /* Bordes redondeados */
    backdrop-filter: blur(50px); /* Desenfoque de fondo */
    -webkit-backdrop-filter: blur(50px); /* Desenfoque de fondo en Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra ligera para resaltar */
    color: #fff;
    padding: 1em;
}
.legend hr {
    margin: 5px;
    height: 1px;
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
}
.circle-available,
.circle-disable,
.circle-reserved,
.circle-light {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #1B1B1B;
    border-radius: 100%;
    background-color: #D09655;
}
.circle-disable {
    background-color: #CCC;
}
.circle-reserved {
    background-color: #e9e9e9;
}
.circle-light {
    background-image: url(./assets/iluminado.png);
    background-size: contain;
}
.legend p {
    display: inline;
    font-size: 12px;
}


@media screen and (max-width: 480px) {
    .disponibilidad li,
    .disponibilidad li button {
        width: 100%;
    }

    .iframe-container {
        height: 800px;
    }   

    .card {
        margin-bottom: 2em;
    }

    footer .col-sm-2:first-child {
        text-align: center;
    }
    footer .col-sm-2 img {
        width: 70%;
        margin-bottom: 2em;
    }

    h1.h0, h2.h0 {
        font-size: 42px;
    }

    #galleryTabsContent button {
        width: 45%;
    }

    .legend {
        right: 23%;
    }
}