*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

html,
body{
    background:#f7f3ed;
}

/*======================
HERO
=======================*/

.hero {
    position: relative;
    height: 100dvh;

    background: #ead9c5;

    display: none;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}

/* cuando tengas la foto */
.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("img/fondo.jpg") center center/cover;

    opacity:.35;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.45));

}

.contenido{
    position:relative;
    z-index:5;
    text-align:center;
    color:#fff;

    margin-top:70px;
}

.contenido h1{

    font-family:'Cormorant Garamond',serif;

    font-size:105px;

    font-weight:500;

    letter-spacing:1px;

    margin-bottom:20px;

}

.nombres{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    margin:25px 0 70px;

}

.nombres span{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:400;

    line-height:1.1;

}

.ampersand{

    font-size:26px!important;

}

#btnInvitacion{

    width:330px;

    height:90px;

    border:2px solid rgba(210,170,95,.9);

    background:rgba(90,70,45,.22);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:28px;

    font-family:'Cormorant Garamond',serif;

    cursor:pointer;

    transition:all .35s ease;

    box-shadow:0 8px 30px rgba(0,0,0,.25);

}

#btnInvitacion:hover{

    transform:translateY(-4px) scale(1.03);

    background:rgba(90,70,45,.35);

    box-shadow:0 20px 40px rgba(0,0,0,.30);

}

/*======================
FLORES
=======================*/

.flor{

    position:absolute;

    width:150px;

    z-index:10;

    pointer-events:none;

    user-select:none;

}

.tl{
    top:-5px;
    left:-5px;
}

.tr{
    top:-5px;
    right:-5px;
    transform:scaleX(-1);
}

.bl{
    bottom:0;
    left:0;
    transform:scaleY(-1);
}

.br{
    bottom:0;
    right:0;
    transform:scale(-1);
}
/*======================
BIENVENIDOS
=======================*/

.bienvenidos{

    min-height:100vh;

    background:#f7f3ed;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.marco{

    position:relative;

    width:100%;

    max-width:900px;

    background:#fbf8f3;

    border:1px solid #d8c19d;

    padding:90px 80px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.marco h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    font-weight:500;

    color:#b58b54;

}

.adorno{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:25px 0 45px;

}

.adorno span{

    width:55px;

    height:1px;

    background:#d2b17a;

}

.rombo{

    width:auto!important;

    height:auto!important;

    background:none!important;

    color:#d2b17a;

    font-size:11px;

}

.marco p{

    width:100%;

    max-width:620px;

    margin:0 auto 24px;

    font-size:20px;

    line-height:1.9;

    color:#777;

}

.flor-bienvenida{

    position:absolute;

    width:230px;

    right:0;

    bottom:0;

    transform:scale(-1);

    opacity:.18;

    pointer-events:none;

}

    /*======================
BOTÓN CONTINUAR
=======================*/

.btn-scroll{

    display:inline-block;

    margin-top:40px;

    padding:16px 40px;

    border:1px solid #c7a46d;

    color:#b58b54;

    text-decoration:none;

    border-radius:40px;

    transition:.3s;

    font-size:18px;

}

.btn-scroll:hover{

    background:#c7a46d;

    color:#fff;

}

/* ======================
   CONTADOR
======================= */

.contador {
    min-height: 100vh;

    background: #f9f5ef;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 80px 20px;

    position: relative;

    overflow: hidden;
}


/* ======================
   TÍTULO
======================= */

.contador h2 {
    font-family: 'Cormorant Garamond', serif;

    font-size: 48px;

    color: #a88650;

    font-weight: 500;

    letter-spacing: 4px;

    text-align: center;

    margin: 0;
}


/* ======================
   LÍNEA
======================= */

.linea {
    width: 80px;

    height: 2px;

    background: #cba96c;

    margin: 25px 0 70px;
}


/* ======================
   GRID
======================= */

.contador-grid {
    display: grid;

    grid-template-columns: repeat(2, 220px);

    gap: 90px 70px;

    justify-content: center;

    align-items: center;
}


/* ======================
   CÍRCULOS
======================= */

.card-tiempo {
    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: #f5eee1;

    border: 2px solid #cda65c;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    box-sizing: border-box;
}


/* Textura suave dentro de los círculos */

.card-tiempo::before {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(170, 145, 105, 0.04) 0px,
            rgba(170, 145, 105, 0.04) 1px,
            transparent 1px,
            transparent 3px
        );

    pointer-events: none;
}


/* ======================
   NÚMEROS
======================= */

.card-tiempo span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 82px;
    line-height: 1;
    color: #55565b;
    font-weight: 500;
    z-index: 1;

    /* Hace que todos los números ocupen el mismo ancho */
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum", "tnum";

    /* Evita diferencias de alineación entre dígitos */
    display: block;
    width: 110px;
    text-align: center;
}

/* ======================
   TEXTO
======================= */

.card-tiempo small {
    margin-top: 18px;

    font-family: 'Cormorant Garamond', serif;

    color: #55565b;

    font-size: 20px;

    letter-spacing: 4px;

    z-index: 1;
}


/* ======================
   RESPONSIVE
======================= */

@media (max-width: 600px) {

    .contador {
        padding: 70px 15px;
    }

    .contador h2 {
        font-size: 32px;

        letter-spacing: 2px;
    }

    .linea {
        margin-bottom: 45px;
    }

    .contador-grid {
        grid-template-columns: repeat(2, 145px);

        gap: 45px 25px;
    }

    .card-tiempo {
        width: 145px;
        height: 145px;
    }

    .card-tiempo span {
        font-size: 55px;
    }

    .card-tiempo small {
        font-size: 13px;

        letter-spacing: 2px;

        margin-top: 10px;
    }
}

/*======================
CEREMONIA
=======================*/

.ceremonia{

    min-height:100vh;

    background:#f7f3ed;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.info-evento{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin:50px 0;

}

.item-evento{

    width:220px;

    background:#fff;

    border:1px solid #dcc7a4;

    padding:30px 20px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.icono {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.item-evento h3{

    font-family:'Cormorant Garamond',serif;

    color:#b58b54;

    font-size:30px;

    margin-bottom:10px;

}

.item-evento p{

    color:#777;

    line-height:1.6;

    margin:0;

}

.btn-evento{

    display:inline-block;

    margin-top:10px;

    padding:16px 40px;

    border:1px solid #c7a46d;

    border-radius:40px;

    color:#b58b54;

    text-decoration:none;

    transition:.3s;

}

.btn-evento:hover{

    background:#c7a46d;

    color:#fff;

}

/* ==========================
   FLORES DETALLES DEL EVENTO
========================== */

.petalos .marco {
    position: relative;
    overflow: hidden;
}

.petalos {
    position: absolute;
    width: 120px;
    height: auto;

    pointer-events: none;
    user-select: none;

    opacity: 0.70;
    z-index: 0;
}


.petalos-arriba-izquierda{
    top:0;
    left:0;
}

.petalos-abajo-derecha{
    bottom:0;
    right:0;
    transform:rotate(180deg);
}

/* Contenido por encima */
.marco h2,
.marco .adorno,
.marco .info-evento,
.marco .btn-evento,
.marco .nota-evento {
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {

    .petalos {
        width: 80px;
    }

}
/*======================
VESTIMENTA
=======================*/

.vestimenta{

    min-height:100vh;

    background:#fbf8f3;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.icono-vestimenta {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono-vestimenta img {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

/* Flor decorativa - Código de Vestimenta */

.vestimenta .marco{
    position:relative;
}

.vestimenta .florcita-vestimenta{
    position:absolute;
    width:80px;
    height:auto;
    opacity: 0.70;
    z-index:1;
    pointer-events:none;
}


/* Arriba izquierda */
.vestimenta .flor-arriba-izquierda{
    top:15px;
    left:15px;
}

/* Arriba derecha */
.vestimenta .flor-arriba-derecha{
    top:15px;
    right:15px;
}

/* Abajo izquierda */
.vestimenta .flor-abajo-izquierda{
    bottom:15px;
    left:15px;
}

/* Abajo derecha */
.vestimenta .flor-abajo-derecha{
    bottom:15px;
    right:15px;
}

/*======================
REGALOS
=======================*/

.regalos{

    min-height:100vh;

    background:#f7f3ed;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.icono-regalo {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono-regalo img {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.datos-regalo{

    margin-top:45px;

}

.copiar{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:15px;

}

.copiar span{

    background:white;

    border:1px solid #dcc7a4;

    padding:15px 25px;

    border-radius:8px;

    font-weight:500;

    color:#666;

}

.copiar button{

    padding:15px 28px;

    border:none;

    background:#c7a46d;

    color:white;

    border-radius:40px;

    cursor:pointer;

    transition:.3s;

}

.copiar button:hover{

    background:#b58b54;

}

/* Decoración pasto - Regalos */
/* Decoración pasto - Regalos */

.regalos .marco{
    position:relative;
}

.pasto-regalos{
    position:absolute;
    width:80px;
    height:auto;
    opacity: 0.70;
    z-index:1;
    pointer-events:none;
}

.pasto-arriba-izquierda{
    top:0;
    left:0;
}

.pasto-abajo-derecha{
    bottom:0;
    right:0;
    transform:rotate(180deg);
}

/*======================
GALERÍA
=======================*/

.galeria{

    min-height:100vh;

    background:#fbf8f3;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.grid-galeria{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:50px;

}

.grid-galeria img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    transition:.35s;

}

.grid-galeria img:hover{

    transform:scale(1.03);

}

@media(max-width:768px){

    .grid-galeria{

        grid-template-columns:1fr;

    }

}

/*======================
CONFIRMAR
=======================*/

.confirmar{

    min-height:100vh;

    background:#fbf8f3;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.botones-confirmar{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}

.btn-confirmar{

    display:inline-block;

    padding:18px 38px;

    background:#c7a46d;

    color:white;

    text-decoration:none;

    border-radius:40px;

    transition:.3s;

    font-size:18px;

}

.btn-confirmar:hover{

    background:#b58b54;

    transform:translateY(-3px);

}

/*======================
FINAL
=======================*/

.final {
    min-height: 100vh;
    background: #f7f3ed;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px;

    text-align: center;

    margin-top: 0;
}

.final-contenido {
    max-width: 800px;
    transform: translateY(-40px);
}

@media (max-width: 768px) {

    .final {
        margin-top: 0;
        padding-top: 20px;
    }

    .final-contenido {
        transform: translateY(0);
        width: 100%;
    }

}

.final h2{

    font-family:'Cormorant Garamond',serif;

    font-size:64px;

    color:#b58b54;

    font-weight:500;

    margin-bottom:25px;

}

.final p{

    max-width:650px;

    margin:20px auto;

    color:#777;

    font-size:20px;

    line-height:1.9;

}

.final h3{

    margin-top:60px;

    font-family:'Cormorant Garamond',serif;

    font-size:54px;

    color:#b58b54;

    font-weight:500;

}

.fecha-final{

    display:block;

    margin-top:18px;

    color:#999;

    letter-spacing:4px;

    font-size:18px;

}

.nota-evento{

    margin-top:30px;

    color:#777;

    font-size:17px;

    line-height:1.7;

    text-align:center;

}

/*======================
RESPONSIVE
=======================*/

@media (max-width: 768px) {

    body{
        overflow-x:hidden;
    }

    /* HERO */

    .contenido{
        margin-top:40px;
        padding:0 20px;
    }

    .contenido h1{
        font-size:58px;
    }

    .nombres span{
        font-size:28px;
    }

    #btnInvitacion{
        width:260px;
        height:70px;
        font-size:22px;
    }

    .flor{
        width:90px;
    }

    /* MARCOS */

    .marco{
        padding:60px 25px;
    }

    /* TITULOS */

    /* TITULOS */

.marco h2{

    font-size:36px;

    line-height:1.2;

    word-break:break-word;

}

.contador h2,
.final h2{

    font-size:42px;

}

    .final h3{
        font-size:40px;
    }

    /* PÁRRAFOS */

    .marco p,
    .final p{
        font-size:17px;
    }

    /* CONTADOR */

    .contador-grid{
        gap:15px;
    }

    .card-tiempo{
        width:140px;
        height:140px;
    }

    .card-tiempo span{
        font-size:46px;
    }

    /* EVENTO */

    .item-evento{
        width:100%;
    }

    /* GALERÍA */

    .grid-galeria{
        grid-template-columns:1fr;
    }

    .grid-galeria img{
        height:300px;
    }

    /* FLORES */

    .flor-bienvenida{
    width:140px;
}

}   /* <-- ESTA LLAVE FALTA */

/*======================
CONFIRMAR ASISTENCIA
=======================*/

.confirmacion {
    min-height: 55vh;

    background: #f7f3ed;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;
}

.texto-confirmacion{

    margin-bottom:15px;

}

.busqueda{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:35px;

    flex-wrap:wrap;

}

.input-confirmar{

    width:330px;

    padding:15px 20px;

    border:1px solid #d7c3a4;

    border-radius:40px;

    font-size:17px;

    outline:none;

    font-family:'Poppins',sans-serif;

}

.input-confirmar:focus{

    border-color:#b48b55;

}

#resultado{

    margin-top:40px;

}

.familia{

    background:white;

    border:1px solid #e8dcc6;

    border-radius:18px;

    padding:30px;

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.familia h3{

    color:#b48b55;

    font-size:36px;

    margin-bottom:20px;

}



/*======================
PANEL ADMIN
======================*/

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    margin:40px 0;
}

.stat-card{
    background:white;
    border:1px solid #e6d5b8;
    border-radius:15px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.stat-card h3{
    color:#b58b54;
    font-size:16px;
    margin-bottom:10px;
}

.stat-card span{
    font-size:34px;
    font-weight:bold;
    color:#444;
}

#tabla{
    width:100%;
    border-collapse:collapse;
    margin-top:30px;
}

#tabla th{
    background:#b58b54;
    color:white;
    padding:15px;
}

#tabla td{
    padding:14px;
    border-bottom:1px solid #eee;
    text-align:center;
}

#tabla tr:hover{
    background:#faf7f2;
}

.filtros{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin:25px 0;

}

.filtros button{

    padding:12px 25px;

    border:none;

    border-radius:30px;

    background:#b58b54;

    color:white;

    cursor:pointer;

    transition:.3s;

    font-size:16px;

}

.filtros button:hover{

    background:#9d7441;

    transform:translateY(-2px);

}

/*======================
MENU PREMIUM
=======================*/

.menu-select{

    width:220px;

    padding:14px 18px;

    border:1px solid #d8c19d;

    border-radius:40px;

    background:#fff;

    color:#6b5b47;

    font-size:16px;

    font-family:'Poppins',sans-serif;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23b58b54' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;

    padding-right:50px;

    transition:.25s;

    box-shadow:0 4px 12px rgba(181,139,84,.08);

}

.menu-select:hover{

    border-color:#b58b54;

    box-shadow:0 8px 22px rgba(181,139,84,.18);

}

.menu-select:focus{

    outline:none;

    border-color:#b58b54;

    box-shadow:0 0 0 4px rgba(181,139,84,.15);

}

/* =================================
   INVITADOS - CENTRADO
================================= */

.persona {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto 35px;
    padding: 12px 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* CHECKBOX */

.persona input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 14px;

    width: 22px;
    height: 22px;

    margin: 0;

    accent-color: #b58b54;
    cursor: pointer;
}

/* NOMBRE */

.persona label {
    display: block;
    width: 100%;

    text-align: center;

    font-size: 18px;
    cursor: pointer;
}

/* MENÚ QUE APARECE AL SELECCIONAR */

.persona .menu-select {
    display: block;

    width: 220px;
    max-width: 100%;

    margin: 0 auto;
}

/* TEXTO "TIPO DE MENÚ" SI ESTÁ DENTRO DE .persona */

.persona .tipo-menu {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}


/* =================================
   CELULAR
================================= */

@media (max-width: 768px) {

    .persona {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 35px;
        padding: 12px 0;
    }

    .persona input[type="checkbox"] {
        left: 0;
        top: 14px;
    }

    .persona label {
        width: 100%;
        text-align: center;
        font-size: 17px;
    }

    .persona .menu-select {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

    .persona .tipo-menu {
        text-align: center;
    }
}
/* MENÚ OCULTO HASTA SELECCIONAR AL INVITADO */

.menu-persona {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.menu-persona.oculto {
    display: none !important;
}
/* ================================
   MENÚ DE CADA INVITADO
================================ */

.menu-contenedor {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 5px;
}

.menu-contenedor > label {
    margin-bottom: 5px;
    font-size: 18px;
}

.menu-contenedor .menu-select {
    margin: 0 auto;
}

/* CELULAR */

@media (max-width: 768px) {

    .menu-contenedor {
        margin-top: 5px;
    }

    .menu-contenedor > label {
        margin-bottom: 5px;
        font-size: 18px;
    }

    .menu-contenedor .menu-select {
        margin: 0 auto;
    }

}

/* ================================
   MENÚ DE CADA INVITADO
================================ */

.menu-persona {
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
}

.menu-persona > label {
    margin-bottom: 8px;
    font-size: 18px;
}

.menu-persona .menu-select {
    margin: 0;
}

/* ================================
   EFECTO SORPRESA - HERO
================================ */

.titulo-sorpresa {
    opacity: 0;
    transform: translateY(25px);
    animation: aparecerTitulo 1.2s ease forwards;
    animation-delay: 1s;
}

.nombres-sorpresa {
    opacity: 0;
    transform: translateY(20px);
    animation: aparecerNombres 1s ease forwards;
    animation-delay: 2.2s;
}

.boton-sorpresa {
    opacity: 0;
    transform: translateY(15px);
    animation: aparecerBoton 1s ease forwards;
    animation-delay: 3.2s;
}

@keyframes aparecerTitulo {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes aparecerNombres {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes aparecerBoton {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}
/* =================================
   CONTADOR - CELULAR
================================= */

@media (max-width: 600px) {

    .contador {
        min-height: 100vh;
        padding: 50px 15px;
        justify-content: center;
    }

    .contador h2 {
        font-size: 30px;
        letter-spacing: 1px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .linea {
        width: 75px;
        height: 2px;
        margin: 25px 0 50px;
    }

    .contador-grid {
        display: grid;
        grid-template-columns: repeat(2, 145px);
        gap: 45px 25px;
    }

    .card-tiempo {
        width: 145px !important;
        height: 145px !important;

        min-width: 145px;
        min-height: 145px;

        border-radius: 50% !important;

        background: #f5eee1;

        border: 2px solid #cda65c;

        box-shadow: none;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: relative;

        overflow: hidden;
    }

    .card-tiempo span {
        font-family: 'Cormorant Garamond', serif;

        font-size: 58px;

        line-height: 1;

        color: #55565b;

        font-weight: 500;

        z-index: 2;
    }

    .card-tiempo small {
        font-family: 'Cormorant Garamond', serif;

        font-size: 14px;

        letter-spacing: 2px;

        color: #55565b;

        margin-top: 10px;

        z-index: 2;
    }
}
/* =================================
   FLORES DEL CONTADOR
================================= */

.contador {
    position: relative;
    overflow: hidden;
}

.contador .flor {
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 0.70;
}

/* Flor 1 - arriba izquierda */
.contador .flor-arriba-izquierda {
    width: 180px;
    top: 0;
    left: 0;
}

/* Flor 2 - arriba derecha */
.contador .flor-arriba-derecha{
    width:180px;
    top:0;
    right:0;
    transform:none;
}

/* Flor 3 - abajo izquierda */
.contador .flor-abajo-izquierda {
    width: 180px;
    bottom: 20px;
    left: 0;
}

/* Flor 4 - abajo derecha */
.contador .flor-abajo-derecha {
    width: 120px;
    bottom: 20px;
    right: 0;
}
.contador h2,
.contador .linea,
.contador-grid {
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {

    .flor {
        width: 180px;
    }

}
/* =================================
   FLORES - DETALLES DEL EVENTO
================================= */

.marco {
    position: relative;
    overflow: hidden;
}

.petalos {
    position: absolute;
    width: 120px;
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.70;
    z-index: 1;
}

/* ARRIBA IZQUIERDA */
.flor-arriba-izquierda {
    top: 0;
    left: 0;
}

/* ARRIBA DERECHA -> LA BAJAMOS */
.flor-arriba-derecha {
    bottom: 0;
    right: 0;
    transform: scaleX(-1);
}

/* ELIMINAMOS LAS DOS DE ABAJO */


/* El contenido de la carta queda por encima */
.marco h2,
.marco .adorno,
.marco .info-evento,
.marco .btn-evento,
.marco .nota-evento {
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {

    .petalos {
        width: 80px;
    }

}
/* ======================
   INTRO
======================= */



/* MISMO FILTRO QUE "NOS CASAMOS" */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("img/fondo-intro.jpg") center center / cover no-repeat;

    opacity: .35;

    z-index: 0;
}

/* MISMO OVERLAY QUE "NOS CASAMOS" */
#intro::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.45)
    );

    z-index: 1;
}

.intro-card {
    position: relative;
    z-index: 2;
}

/* ======================
   CONTENIDO DEL INTRO
======================= */

.intro-card {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: white;

    padding: 70px 20px 45px;

    background: transparent;

    transform: translateY(-70px);
}

/* ======================
   TENÉS UNA INVITACIÓN
======================= */

.intro-card h2 {
    font-family: 'Cormorant Garamond', serif;

    font-size: 48px;
    font-weight: 500;

    letter-spacing: 2px;

    color: white;

    margin: 0;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}

/* ======================
   GISELLA & MACIEL
======================= */

.intro-card p {
    font-family: 'Cormorant Garamond', serif;

    font-size: 55px;
    font-weight: 500;

    letter-spacing: 2px;

    color: white;

    margin: 12px 0 0;

    text-shadow:
        0 2px 10px rgba(0,0,0,.5);
}

/* ======================
   BOTÓN
======================= */

.intro-card button {
    margin-top: 35px;

    padding: 15px 45px;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 40px;

    cursor: pointer;

    background: rgba(181,139,84,.90);

    color: white;

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;
    letter-spacing: 1px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.25);

    transition: .3s;
}

.intro-card button:hover {
    transform: translateY(-3px);

    background: rgba(181,139,84,1);
}

/* ======================
   CELULAR
======================= */
@media (max-width: 600px) {

    

    .intro-card {
        padding: 55px 15px 35px;
        transform: translateY(-70px);
    }

    .intro-card h2 {
        font-size: 35px;
        letter-spacing: 1px;
    }

    .intro-card p {
        font-size: 42px;
        margin-top: 8px;
    }

    .intro-card button {
        padding: 13px 38px;
        font-size: 20px;
    }
}
/* =================================
   FLORES - DETALLES DEL EVENTO
================================= */

.ceremonia .marco {
    position: relative;
    overflow: hidden;
}

.ceremonia .petalos-detalle {
    position: absolute;
    width: 120px;
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.70;
    z-index: 1;
}

/* ARRIBA IZQUIERDA */
.ceremonia .petalos-detalle-tl {
    top: 0;
    left: 0;
}

/* ABAJO DERECHA */
.ceremonia .petalos-detalle-br {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

/* CONTENIDO POR ENCIMA */
.ceremonia .marco h2,
.ceremonia .marco .adorno,
.ceremonia .marco .info-evento,
.ceremonia .marco .btn-evento,
.ceremonia .marco .nota-evento {
    position: relative;
    z-index: 2;
}

/* CELULAR */
@media (max-width: 600px) {

    .ceremonia .petalos-detalle {
        width: 80px;
    }

}



/* ================================
   DOBLE BORDE - CONFIRMAR ASISTENCIA
================================ */

/* ================================
   DOBLE BORDE - CONFIRMAR ASISTENCIA
================================ */

.confirmacion .marco {
    border: 1px solid #d8c19d;
    outline: none;
    outline-offset: 0;
}

.btn-resetear {
    padding: 10px 20px;
    border: 1px solid #b58b54;
    border-radius: 25px;
    background: transparent;
    color: #b58b54;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

.btn-resetear:hover {
    background: #b58b54;
    color: white;
}

/* CORRECCIÓN MENSAJE FINAL */
.final-contenido {
    position: relative;
    z-index: 10;
}

/* ================================
   POSICIÓN FINAL - PÁGINA PRINCIPAL
================================ */

.final-principal .final-contenido {
    position: relative;
    z-index: 10;
    transform: translateY(-180px);
}

/* CELULAR */
@media (max-width: 768px) {

    .final-principal .final-contenido {
        transform: translateY(-180px);
    }

}
/* ======================
   INTRO - PORTADA
======================= */

#intro {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: #ead9c5;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 999999;

    overflow: hidden;

    overscroll-behavior:none;
}

/* FOTO DE FONDO */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("img/fondo-intro.jpg") center center / cover no-repeat;

    opacity: .35;

    z-index: 0;
}

/* OSCURECIMIENTO */
#intro::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.45)
    );

    z-index: 1;
}

/* CONTENIDO */
.intro-card {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100dvh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: white;

    padding: 55px 15px 35px;

    background: transparent;

    box-sizing: border-box;

    transform: translateY(-70px);
}

/* TÍTULO */
.intro-card h2 {
    font-family: 'Cormorant Garamond', serif;

    font-size: 35px;
    font-weight: 500;

    letter-spacing: 1px;

    color: white;

    margin: 0;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}

/* NOMBRES */
.intro-card p {
    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;
    font-weight: 500;

    letter-spacing: 2px;

    color: white;

    margin: 8px 0 0;

    text-shadow:
        0 2px 10px rgba(0,0,0,.5);
}

/* BOTÓN */
.intro-card button {
    margin-top: 35px;

    padding: 13px 38px;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 40px;

    cursor: pointer;

    background: rgba(181,139,84,.90);

    color: white;

    font-family: 'Cormorant Garamond', serif;

    font-size: 20px;
    letter-spacing: 1px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.25);

    transition: .3s;
}

.intro-card button:hover {
    transform: translateY(-3px);

    background: rgba(181,139,84,1);
}