* { box-sizing: border-box; }

body {
    margin: 0;
    background: #203F50;
    color: #F2EBD9;
    font-family: Arial, sans-serif;
    line-height: 1.5;

    margin: 0;
    padding: 18px;
    background-image: url("img/imagen 1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.barra-superior {
    background: #50371F;
    padding: 28px 16px;
    text-align: center;
}

.barra-superior h1,
.barra-superior h2,
.barra-superior p { margin: 0; }

.barra-superior h2 {
    color: #69C5E8;
    font-size: 19px;
    margin-bottom: 8px;
}

.barra-superior h1 {
    color: #F2EBD9;
    font-size: 30px;
    margin-bottom: 6px;
}

.barra-superior p { font-size: 15px; }

.titulo-principal {
    text-align: center;
    font-size: 23px;
    margin: 30px 16px 24px;
}

.galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 18px 35px;
}

.contenedor-imagen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    background: #172B3D;
    border-radius: 12px;
    text-align: center;
}

.contenedor-imagen h3 {
    margin: 0;
    color: #69C5E8;
    font-size: 19px;
    line-height: 1.35;
}

.contenedor-imagen img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.contenedor-imagen p {
    margin: 0;
    color: #F2EBD9;
    font-size: 14px;
    text-align: left;
    overflow-wrap: anywhere;
}

.mi-boton {
    margin-top: auto;
    padding: 11px 20px;
    max-width: 100%;
    background: #69C5E8;
    color: #172B3D;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.mi-boton:hover { background: #8AD7F3; }

.mi-boton {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    background: #69C5E8;
    color: #172B3D;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.titulo-final {
    text-align: center;
    font-size: 22px;
    margin: 0 16px 35px;
}

@media (max-width: 600px) {
    .barra-superior { padding: 22px 12px; }
    .barra-superior h2 { font-size: 15px; }
    .barra-superior h1 { font-size: 25px; }
    .titulo-principal { font-size: 19px; margin: 24px 12px 18px; }
    .galeria { gap: 12px; padding: 0 10px 28px; }
    .contenedor-imagen { padding: 10px; gap: 9px; }
    .contenedor-imagen h3 { font-size: 15px; }
    .contenedor-imagen p { font-size: 12px; }
    .mi-boton { padding: 10px 8px; font-size: 12px; }
}

.tarjeta {
    width: 100%;
    height: 400px;
    perspective: 1000px;
    cursor: pointer;
}

.tarjeta-interior {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 9s ease;
    transform-style: preserve-3d;
}

.tarjeta.girada .tarjeta-interior {
    transform: rotateY(180deg);
}

.tarjeta-frente,
.tarjeta-atras {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 12px;
    background: #172B3D;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow-y: auto;
}

.tarjeta-frente img {
    width: 100%;
    border-radius: 8px;
}

.tarjeta-atras {
    transform: rotateY(180deg);
}

.tarjeta {
    width: 300px;
    height: 400px;

    background-image:
        url("img/imegen 3.png"),
        url("img/imagen 2.png"),
        url("img/fondo.jpg");

    background-position:
        top left,
        bottom right,
        center;

    background-size:
        100px,
        120px,
        cover;

    background-repeat: no-repeat;

    border-radius: 15px;
}

.craneos {
    position: fixed;
    top: 58%;
    height: 65vh;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.craneos.izquierda {
    left: 5px;
    transform: translateY(-50%) scaleX(-1);
}

.craneos.derecha {
    right: 5px;
    transform: translateY(-50%);
}

.craneos-header {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    top: 40px;
    margin: 0 auto;
    object-fit: contain;
    pointer-events: none;
}

@media (max-width: 768px) {
    .craneos-header {
        height: 100px;
        width: 100%;
        margin-bottom: 0;
    }

    .craneos {
        max-width: 35px;
        height: 55vh;
    }
}
body{padding:0;overflow-x:hidden}
.craneos-header{display:block;position:relative;width:100%;height:auto;max-height:340px;object-fit:contain;top:0;margin:0 auto;z-index:2}
.craneos{position:fixed;top:50%;height:80vh;width:clamp(35px,7vw,95px);max-width:none;object-fit:fill;z-index:3;pointer-events:none}
.craneos.izquierda{left:0;transform:translateY(-50%) scaleX(-1)}
.craneos.derecha{right:0;transform:translateY(-50%)}
.barra-superior,section,.titulo-final{position:relative;z-index:1}
.galeria{padding-left:clamp(40px,7vw,90px);padding-right:clamp(40px,7vw,90px)}
.contenedor-imagen{padding:0;background:transparent;display:block}
.tarjeta{width:100%;height:610px;perspective:1200px;background:none;cursor:default}
.tarjeta-frente,.tarjeta-atras{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:#172B3D;border-radius:12px;overflow-y:auto;overflow-x:hidden}
.tarjeta-frente img:first-of-type{width:100%;height:220px;object-fit:contain;flex-shrink:0}
.tarjeta-frente img:not(:first-of-type){width:100%;height:auto;max-height:70px;object-fit:contain}
.tarjeta-frente h3,.tarjeta-atras h3{margin:0;color:#69C5E8}
.tarjeta-atras h4{margin:6px 0;font-size:14px}
.tarjeta-atras p{text-align:left;margin:0 0 10px;width:100%}
.tarjeta-frente .mi-boton{margin-top:0}
.boton-girar{margin-top:auto;padding:10px 14px;border:1px solid #69C5E8;border-radius:8px;background:transparent;color:#69C5E8;font-weight:bold;cursor:pointer;width:100%;flex-shrink:0}
.boton-girar:hover{background:#26465b}
@media(max-width:768px){.craneos-header{height:auto;width:100%;max-height:none}.craneos{height:65vh;width:32px}.galeria{padding-left:39px;padding-right:39px;gap:14px}.tarjeta{height:530px}.tarjeta-frente,.tarjeta-atras{padding:10px}.tarjeta-frente img:first-of-type{height:155px}}
@media(max-width:600px){.galeria{grid-template-columns:1fr;max-width:460px}.tarjeta{height:560px}.tarjeta-frente img:first-of-type{height:230px}.craneos{width:29px;height:60vh}}

.craneos-header { display:block; width:100%; max-height:none; height:auto; margin:0; top:0; object-fit:contain; vertical-align:bottom; }
.barra-superior { margin:0; }
.tarjeta { width:100%; height:780px; }
.tarjeta-frente,.tarjeta-atras { scrollbar-width:thin; }
.tarjeta-frente > p { flex-shrink:0; width:100%; }
.tarjeta-frente > h4 { margin:0; font-size:14px; text-align:left; width:100%; }
.tarjeta-frente > a.mi-boton { margin-top:12px; flex-shrink:0; }
.votacion-calaveras { width:100%; min-height:105px; display:flex; align-items:center; justify-content:center; background-image:url("img/craneos_originales_recortados.png"); background-size:100% auto; background-position:center; background-repeat:no-repeat; flex-shrink:0; }
.votacion-calaveras .mi-boton { margin:0; position:relative; z-index:1; width:auto; max-width:58%; white-space:normal; }
.concepto-adicional { width:100%; text-align:left; font-size:14px; line-height:1.6; white-space:pre-wrap; }
.tarjeta-atras { justify-content:flex-start; }
@media(max-width:768px){ .craneos-header{width:100%;height:auto;max-height:none;} .tarjeta{height:760px;} .votacion-calaveras{min-height:85px;} }
@media(max-width:600px){ .tarjeta{height:760px;} .tarjeta-frente img:first-of-type{height:200px;} .votacion-calaveras{min-height:95px;} }

.tarjeta-frente > img.imagen-ampliable { height:300px; width:100%; object-fit:contain; cursor:zoom-in; flex-shrink:0; }
.tarjeta-frente > img.imagen-ampliable:focus-visible { outline:3px solid #69C5E8; outline-offset:3px; }
.tarjeta-frente > a.boton-visita { display:block; align-self:center; margin:0 auto 8px; flex-shrink:0; }
.visor-ofrenda[hidden] { display:none !important; }
.visor-ofrenda { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:55px 18px 24px; }
.visor-ofrenda > img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; }
.cerrar-visor { position:absolute; top:10px; right:16px; background:transparent; border:0; color:white; font-size:42px; cursor:pointer; line-height:1; padding:4px 12px; }
body.visor-abierto { overflow:hidden; }
@media(max-width:768px) { .tarjeta-frente > img.imagen-ampliable { height:250px; } }
@media(max-width:600px) { .tarjeta-frente > img.imagen-ampliable { height:280px; } }




@media (max-width: 600px) {
    
    .craneos {
        position: fixed;
        top: 50%;
        width: auto;
        height: auto;
        max-height: 65vh;
        max-width: 30px;
        object-fit: contain;
        pointer-events: none;
        z-index: 3;
    }
    .craneos.izquierda {
        left: 0;
        transform: translateY(-50%) scaleX(-1);
    }
    .craneos.derecha {
        right: 0;
        transform: translateY(-50%);
    }
    .galeria {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 33px 28px;
        gap: 22px;
    }
    
    .tarjeta,
    .tarjeta-interior {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .tarjeta-interior {
        display: grid;
        transform: none !important;
        transition: none;
    }
    .tarjeta-frente,
    .tarjeta-atras {
        grid-area: 1 / 1;
        position: relative;
        height: auto;
        min-height: 0;
        overflow: visible;
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        padding: 15px;
        transition: opacity 3s ease, visibility 3s ease;
    }
    .tarjeta-frente { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
    .tarjeta-atras { display: flex; opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; }
    .tarjeta.girada .tarjeta-frente { opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; }
    .tarjeta.girada .tarjeta-atras { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
    .tarjeta-frente > p,
    .tarjeta-atras > p,
    .concepto-adicional {
        overflow-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }
    .tarjeta-frente > img.imagen-ampliable {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }
    .tarjeta-frente > a.boton-visita {
        margin: 4px auto 12px;
    }
    .boton-girar { margin-top: 18px; }
    .votacion-calaveras { min-height: 95px; }
}
@keyframes aparecer-tarjeta {
    from { opacity: .6; transform: rotateY(12deg); }
    to { opacity: 1; transform: rotateY(0); }
}

.descripcion-ofrenda { width:100%; text-align:left; }
.descripcion-ofrenda p, .concepto-adicional p { margin:0 0 12px; }



.tarjeta-atras .concepto-adicional {
    white-space: normal;
    line-height: 1.55;
}
.tarjeta-atras .concepto-adicional p {
    margin: 0 0 12px;
}

.modal-voto[hidden]{display:none!important}.modal-voto{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.8);display:grid;place-items:center;padding:20px}.modal-voto-contenido{position:relative;background:#122b3c;color:#fff;border:2px solid #69c5e8;border-radius:18px;padding:30px;max-width:430px;width:100%;box-shadow:0 18px 70px #0009}.modal-voto-contenido h2{color:#69c5e8}.modal-voto-contenido label{display:block;margin:16px 0 7px}.modal-voto-contenido input{width:100%;padding:13px;border-radius:8px;border:1px solid #88a7ba;font-size:16px}.modal-voto-contenido button[type=submit]{width:100%;margin-top:16px;padding:13px;background:#69c5e8;color:#092536;border:0;border-radius:8px;font-weight:800;cursor:pointer}.cerrar-voto{position:absolute;right:12px;top:9px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}#mensaje-voto{min-height:24px}.mi-boton:disabled{opacity:.5;cursor:not-allowed}