@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,500;1,300&display=swap');

* {
    font-family: 'Ubuntu', sans-serif;
}

.logo-svg {
    width: 40px;
    height: 40px;
}

.icon-btn {
    cursor: pointer;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.btn-payment-zone{
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/*
 * Custom translucent site header
 */

.site-header {
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.site-header a {
    color: #8e8e8e;
    transition: color .15s ease-in-out;
}

.site-header a:hover {
    color: #fff;
    text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    transform: rotate(30deg);
}

.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}

.product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.flex-equal>* {
    flex: 1;
}

@media (min-width: 768px) {
    .flex-md-equal>* {
        flex: 1;
    }
}

/***********************************************************************/
#caratula {
    position: relative;
    background: #315f9b;
    background: linear-gradient(rgba(5, 7, 12, 0.75), rgba(5, 7, 12, 0.75)), url('../assets/img/palacio_de_Herrera.jpg') no-repeat center;
    background-size: cover;
}

.depend-access {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 10px;
}

.tos-access {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 10px;
}

.attach-access {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 10px;
}

.tos-card {
    width: 30%;
    border-radius: 52px;
    animation: lift-up 3s ease forwards;
    /* otros estilos */
}

@keyframes lift-up {
    from {
        transform: rotateX(90deg);
    }

    to {
        transform: rotateX(0deg);
    }
}

.button-zone {
    display: flex;
    justify-content: center;
    width: 80%;
    height: 300px;
    border-radius: 21px 21px 0 0;
    overflow: hidden;
}

.button-zone img {
    width: 100%;
    cursor: pointer;
    transition: all 300ms;
    position: relative;
}

.button-zone img:hover {
    transform: scale(1.5);
}

@media (max-width: 768px) {
    .tos-card {
        width: 100%;
    }
}

.frm-content {
    display: grid;
    gap: 12px;
    grid-template-rows: repeat(2, auto);
}

.frm-row-inp {
    display: grid;
    gap: 8px;
    padding: 6px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.frm-row-inp-attach {
    display: grid;
    gap: 0.5rem;
    padding: 6px;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 21rem));
    overflow: hidden;
}

.input-group input[type="file"] {
    appearance: none;
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}

.file-label {
    cursor: pointer;
}

.csszone-table {
    display: grid;
    gap: 0.5rem;
    padding: 6px;
    grid-template-columns: minmax(3rem, 1fr);
    overflow: hidden;
}

/**************************Boton de dependencias*********************************/
:root {
    --face-front: #2c3b6b;
    --face-front-font: #ffffff;
    --face-front-font2: #0fa7ff;
    --face-front-focus: #2c3b6b;
    --index:
}

.card-rd {
    position: relative;
    max-width: 300px;
    animation: lift-up 600ms ease forwards;
}

.card-rd .face {
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.card-rd .face.face1 {
    position: relative;
    background: var(--face-front);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
    border-radius: 12px;
}

.card-rd:hover .face.face1 {
    background: var(--face-front-focus);
    transform: translateY(0);
}

.content-rd {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;

}

.content-rd p {
    max-width: 100%;
    word-wrap: break-word;
    overflow: hidden
}

.content-rd-tos {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-rd .face.face1 .content-rd {
    opacity: 1;
    transition: 0.5s;
}

.card-rd:hover .face.face1 .content-rd {
    opacity: 0.1;
}

.card-rd .face.face1 .content-rd img {
    max-width: 10px;
}

.card-rd .face.face1 .content-rd i {
    font-size: 5rem;
    color: var(--face-front-font2);
}

.card-rd .face.face1 .content-rd-tos i {
    font-size: 3rem;
    color: var(--face-front-font2);
}

.card-rd .face.face1 .content-rd h3 {
    color: var(--face-front-font);
    text-align: center;
    font-size: 1.5em;
}

.card-rd .face.face1 .content-rd-tos p {
    color: var(--face-front-font);
    text-align: center;
    font-size: 16px;
}

.card-rd .face.face2 {
    position: relative;
    background: var(--face-front-font);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(58, 58, 58, 0.4);
    transform: translateY(-100px);
    border-radius: 12px;
}

.card-rd:hover .face.face2 {
    transform: translateY(0);
}

.card-rd .face.face2 .content-rd p {
    font-size: small;
    margin: 5px;
    padding: 0;
}

.card-rd .face.face2 .content-rd button {
    margin: 3px;
}

.card-rd .face.face2 .content-rd a {
    border-radius: 6px;
    margin: 15px 0 0;
    display: inline-block;
    text-decoration: none;
    font-weight: 900;
    color: var(--face-front);
    padding: 5px;
    border: 1px solid var(--face-front);
}

.card-rd .face.face2 .content a:hover {
    background: var(--face-front);
    color: var(--face-front-font2);
}


/**********************************************************************/
.card-rd-sm {
    position: relative;
    max-width: 150px;
    animation: lift-up 600ms ease forwards;
}

.card-rd-sm:hover {
    z-index: 3;
}

.card-rd-sm .face {
    width: 230px;
    height: 140px;
    transition: 0.5s;
}

.card-rd-sm .face.face1 {
    position: relative;
    background: var(--face-front);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(46px);
    border-radius: 12px;
}

.card-rd-sm:hover .face.face1 {
    background: var(--face-front-focus);
    transform: translateY(0);
}

.card-rd-sm .face.face1 .content-rd {
    opacity: 1;
    transition: 0.5s;
}

.card-rd-sm:hover .face.face1 .content-rd {
    opacity: 0.1;
}

.card-rd-sm .face.face1 .content-rd img {
    max-width: 10px;
}

.card-rd-sm .face.face1 .content-rd i {
    font-size: 5rem;
    color: var(--face-front-font2);
}

.card-rd-sm .face.face1 .content-rd-tos i {
    font-size: 3rem;
    color: var(--face-front-font2);
}

.card-rd-sm .face.face1 .content-rd h3 {
    color: var(--face-front-font);
    text-align: center;
    font-size: 1.5em;
}

.card-rd-sm .face.face1 .content-rd-tos p {
    color: var(--face-front-font);
    text-align: center;
    font-size: 16px;
}

.card-rd-sm .face.face2 {
    position: relative;
    background: var(--face-front-font);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(58, 58, 58, 0.4);
    transform: translateY(-95px);
    border-radius: 12px;
}

.card-rd-sm:hover .face.face2 {
    transform: translateY(0);
}

.card-rd-sm .face.face2 .content-rd p {
    font-size: small;
    margin: 5px;
    padding: 0;
}

.card-rd-sm .face.face2 .content-rd button {
    margin: 3px;
}

.card-rd-sm .face.face2 .content-rd a {
    border-radius: 6px;
    margin: 15px 0 0;
    display: inline-block;
    text-decoration: none;
    font-weight: 900;
    color: var(--face-front);
    padding: 5px;
    border: 1px solid var(--face-front);
}

.card-rd-sm .face.face2 .content a:hover {
    background: var(--face-front);
    color: var(--face-front-font2);
}

/**********************************************************************/

/**************************Boton de dependencias*********************************/
/**************************SVG Format*********************************/
#text-contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.objet-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    /* Asegura que el contenedor ocupe toda la altura disponible */
}

.img-hidde {
    display: none;
}

.objet-img img {
    margin: auto;
    max-width: 30%;
    max-height: 30%;
}

.logo-municipio {
    position: relative;
    width: 350px;
    min-height: 184px;
}

.logo-municipio img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    animation: aparecer 8s normal forwards;
}

.logo-municipio svg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 3s ease-out;
    animation: desaparecer 6s normal forwards;
}

.logo-municipio-consult {
    position: relative;
    width: 150px;
    min-height: 63px;
}

.logo-municipio-consult img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    animation: aparecer 8s normal forwards;
}

.logo-municipio-consult svg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 3s ease-out;
    animation: desaparecer 6s normal forwards;
}

/* .object-svg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 3s ease-out;
} */

#agStroke .st0 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-miterlimit: 10;
}

.desaparecer {
    animation: desaparecer 8s normal forwards;
}


#virtual-office h3 {
    margin: 1rem
}

.causante-data {
    margin: 1rem;
}

.round-corner {
    border-radius: 5rem;
}

@keyframes aparecer {
    to {
        opacity: 1;
    }
}

@keyframes desaparecer {
    to {
        opacity: 0;
    }
}

@keyframes text-animado {
    to {
        stroke-dashoffset: 0;
    }
}

/**************************SVG Format*********************************/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 5rem;
}

.nav-rd {
    position: fixed;
    z-index: 10;
    background: linear-gradient(#05070df2, #71717299);
    min-height: 5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.clss-logo {
    display: flex;
}

.nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.nav-rd li {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.nav-rd li:hover {
    background: #0fa7ff;
    color: #333;
    padding: 6px;
    border-radius: 12px;
}

.nav-rd a {
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    color: whitesmoke;
    font-size: 12px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 4px;
    background: whitesmoke;
    margin: 4px;
    border-radius: 1px;
    transition: all 0.6s ease;
}

.cruz .line1 {
    transform: rotate(-45deg);
    position: relative;
    top: 8px;
}

.cruz .line2 {
    opacity: 0;
}

.cruz .line3 {
    transform: rotate(45deg);
    position: relative;
    top: -8px;
}

@media screen and (max-width: 780px) {
    .nav-rd {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .clss-logo {
        position: relative;
    }

    .nav-rd .burger {
        position: absolute;
        left: 1px;
        margin-left: 90%;
        margin-right: 20%;
    }

    /* .clss-logo .logo-svg {
        position: absolute;
        top: -27px;
        left: -27px;
        width: 60px;
        height: 60px;
    } */

    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background: #05070d94;
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 13vh;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .burger {
        display: block;
        border: 1px solid whitesmoke;
        padding: 3px;
        border-radius: 3px;
    }

    .nav-rd li {
        min-width: 80%;
        max-height: 30px;
        border-radius: 6px;
    }

    .card-rd-sm {
        max-width: 225px;
        max-width: 225px;
    }
}

.nav-active {
    transform: translateX(0%);
    padding-top: 5rem;
    border-radius: 12px;
}

.burger:hover {
    opacity: 1;
}

.toast-header img {
    height: 14px;
    width: auto;
}

/********************************Stripe***********************************************/
.hidden {
    display: none;
}

#payment-message {
    color: rgb(105, 115, 134);
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
}

#payment-element {
    margin-bottom: 24px;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
    border-radius: 50%;
}

.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.spinner:before,
.spinner:after {
    position: absolute;
    content: "";
}

.spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #5469d4;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}

.spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #5469d4;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 600px) {
    form {
        width: 80vw;
        min-width: initial;
    }
}

/********************************Stripe***********************************************/

.catovatech-small {
    width: 14px;
    height: auto;
}

.img-qr{
    display: none;
}

.zone-print{
    margin-left: 1rem;
    padding: auto;
}

@media print {
    body {
        font-size: 11pt;
        padding: 0;
    }

    #alerta {
        font-size: 16pt;
    }

    /* Layout de grid solo para impresión */
    .row {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* 6 columnas en total */
        grid-gap: 15px;
        /* Espaciado en impresión */
    }

    .col-md-4 {
        grid-column: span 2;
        /* Cada col-md-4 ocupa 2 columnas (3 por fila) */
    }

    .col-md-6 {
        grid-column: span 3;
        /* Cada col-md-6 ocupa 3 columnas (2 por fila) */
    }
    .col-md-12 {
        grid-column: span 6;
        /* Cada col-md-6 ocupa 3 columnas (2 por fila) */
    }

    input,
    textarea,
    .form-control-plaintext {
        white-space: normal;
        word-wrap: break-word;
        height: auto;
        overflow: visible;
    }

    /* Ocultar elementos no deseados en la impresión */
    .no-print {
        display: none;
    }

    .img-qr {
        display: block;
        /* Mostrar en impresión */
        position: absolute;
        /* Posicionamiento absoluto */
        top: 10px;
        /* Distancia desde la parte superior */
        right: 5px;
        /* Distancia desde la derecha */
        z-index: 1000;
        /* Asegurarse de que esté por encima de otros elementos */
        /* Opcional: Estilos adicionales para el borde o fondo */
        background-color: white;
        /* Fondo blanco para mejor visibilidad */
        padding: 5px;
    }

        footer{
            display: none;
        }

    /* .img-hidde {
        display: block;
    } */

    /* footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 10pt;
    } */

    /* Ajuste de márgenes en la impresión */
    @page {
        margin: 10mm;
    }
}

/***********************/
.enter-web{
    /* display: flex; */
    overflow: hidden;
    height: 30rem;
}
.caratula-logo {
    display: flex;
    overflow: hidden;
    height: 30rem;
    /* background: whitesmoke; */
    background: linear-gradient(rgba(5, 7, 12, 0.75), rgba(5, 7, 12, 0.75)), url('../assets/img/palacio_de_Herrera.jpg') no-repeat center;
    background-size: cover;
    /* background: #570357; */
}

.banderete-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.banderete-imagen{
    position: absolute;
    /* transform: translateY(0%); */
    transform: translateY(-110%);
    animation: slideDown 5s ease-out forwards;
}

.banderete-imagen img{
    width: 250px;
    height:300px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

@keyframes slideDown {
    to {
        transform: translateY(0%);
        /* Se mueve a la posición original */
    }
}

.banderete-stroke{
    position: absolute;
    transform: translateY(20%);
}

.objectEscudo-svg{
    height: 120px;
    width: auto;
}

.banderete-fill{
    position: absolute;
    transform: translateY(160%);
    /* opacity: 0; */
    /* transition: opacity 0 3s ease-in-out; */
    animation: fadeInText 5s normal ;
}

@keyframes fadeInText {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.objectEscudo-svg-fill{
    height: 90px;
    width: auto;
}

@keyframes animate-stroke {
    to {
        stroke-dashoffset: 0;
    }
}

.content-waves{
    position: relative;
    width: 100%;
    height: 200px;
    /* background: #0fa7ff; */
}

.content-waves .wave{
    position: absolute;
    top: -100px;
    width: 100%;
    height: 100px;
    background: url(../assets/img/newImagen/wave.png);
    background-size: 1000px 100px;
}

.content-waves .wave#wave1{
    z-index: 1;
    opacity: 1;
    bottom: 0px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
    animation: animateWave 4s linear infinite;
}
.content-waves .wave#wave3{
    z-index: 1;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWave 3s linear infinite;
}
.content-waves .wave#wave2{
    z-index: 1;
    opacity: 0.5;
    bottom: 0px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
    animation: animateWave2 3s linear infinite;
}
.content-waves .wave#wave4{
    z-index: 1;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave2 3s linear infinite;
}

@keyframes animateWave {
    0%{
        background-position: 1000px;
    }
    100%{
        background-position: 0;
    }
}

@keyframes animateWave2 {
    0%{
        background-position: 0;
    }
    100%{
        background-position: 1000px;
    }
}

/***********************/