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

:root {
  --polaroid-margin: 0.5cm;
}

body {
    overflow-x: hidden !important;
}

@font-face {
    font-family: "Against";
    src: url("../fonts/against.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

/* Hero Section */
.hero {
    width: 100vw;
    height: 100vh;
    background-image: url("../img/desktop2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Contenedor del contenido */
.overlay-content {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
}

/* Logo */
.logo {
    width: 3rem;
    margin-bottom: 2px;
}

/* Nombres */
.names {
    font-size: 3rem;
    letter-spacing: 0.35rem;
    font-family: serif;
    margin-bottom: 25px;
    font-weight: 400;
    width: 90vw;
}

/* Fecha */
.date {
    font-size: 1rem;
    letter-spacing: 0.2rem;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    letter-spacing: 6.1px;
}

.main {
    width: 100%;
    background-image: url("../img/algodon-verde.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -5rem; 
    border-radius: 24px 24px 0 0;
    padding: 5rem 8% 7.5rem 8%;
}

.main h2{
    font-size: 2.7rem;
    font-family: "Against";
    margin-bottom: 25px;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: white;
}

.main p{
    font-size: 1.2rem;
    letter-spacing: 0.3rem;
    font-family: "Cormorant Garamond", sans-serif;
    margin-bottom: 10px;
    font-weight: 400;
    text-align: center;
    color: white;
}

.main .padres .nombresPadres{
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-family: "Cormorant Garamond", sans-serif;
    margin-bottom: 10px;
    font-weight: 400;
    text-align: center;
}

.main .svg img{
    width: 13rem;
    margin-top: 1rem;
    margin-bottom: 1.8rem;
}

.main .tag-padres{
    margin-top: 2rem;
    font-size: .8rem;
    font-family: "Cormorant Garamond", sans-serif;
    letter-spacing: 0.2rem;
    text-align: center;
    color: white;
}

/* Tarjetas Section */
.tarjetas h2{
    font-size: 2.7rem;
    font-family: "Against";
    margin-bottom: 4.0625rem;
    margin-top: 4.0625rem;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: #515944;
}

.tarjetas {
    width: 100vw;
    background-image: url("../img/rugosoHueso-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -3.75rem; 
    border-radius: 24px 24px 0 0;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 5.625rem;
}

.tarjeta-boda {
    width: min(48.8rem, 90vw);
    height: 95vw;

    background-image: url("../img/fondotarjeta2-1.png"); /* textura papel */
    background-size: cover;
    background-position: center;

    border-radius: 0px 140px 0px 140px; 
    /* ↑ esquina superior derecha exagerada */

    box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.18),
    0 0.5rem 1.2rem rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);

    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.tarjetas strong em{
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
}

.tarjetas .tituloCeremonia{

    margin-top: 3.125rem;
    margin-bottom: 1.25rem;

}

.tarjetas .nombreIglesia{
    font-size: 2.2rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
}

.tarjetas .direccionIglesia{
    font-size: 1.5rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
}

.icon-link {
    text-decoration: none;
    color: #515944; /* hereda el color */
    font-size: 1rem;
}

.icon-text {
    font-family: "Cormorant Garamond", sans-serif;
}

/* TarjetaSalon */
.tarjetaSalon h2{
    font-size: 2.7rem;
    font-family: "Against";
    margin-bottom: 4.0625rem;
    margin-top: 4.0625rem;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: white;
}

.tarjetaSalon {
    width: 100vw;
    background-image: url("../img/algodon-verde.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -3.75rem; 
    border-radius: 24px 24px 0 0;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 5.625rem;
}

.tarjeta-salon {
    width: min(44rem, 93vw);
    aspect-ratio: 2 / 3; 
    max-height: 89dvh;

    background-image: url("../img/fondoSalon4.png");
    background-size: contain;   /* 👈 clave */
    background-position: top center;
    background-repeat: no-repeat;

    border-radius: 0px 140px 0px 140px;
    box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.18),
    0 0.5rem 1.2rem rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);

    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.tarjetaSalon strong em{
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
}

.tarjetaSalon .tituloCeremonia{

    margin-top: 2rem;
    margin-bottom: 0.625rem;

}

.tarjetaSalon .nombreIglesia{
    font-size: 2.2rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
}

.tarjetaSalon .direccionIglesia{
    font-size: 1.5rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
}

/* Seccion Vestimenta */
.vestimenta {
    width: 100vw;
    background-image: url("../img/rugosoHueso-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -5rem; 
    border-radius: 24px 24px 0 0;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 5.625rem;
}

.vestimenta .tituloVestimenta{
    font-size: 2.7rem;
    font-family: "Against";
    margin-bottom: 4.0625rem;
    margin-top: 4.0625rem;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: #515944;
}

.tarjetaVestimenta {
    width: min(48.8rem, 90vw);
    height: 37.5vw;

    background-image: url("../img/fondotarjeta.png"); /* textura papel */
    background-size: cover;
    background-position: center;

    border-radius: 30px;

    box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.18),
    0 0.5rem 1.2rem rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);

    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.textoVestimenta{
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    font-family: "Cormorant Garamond", sans-serif;
    text-align: center;
    color: #515944;
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
}

.tarjetaVestimenta .tituloGenero{
    font-size: 1.5rem;
    letter-spacing: 1px;
    font-family: "Cormorant Garamond", sans-serif;
    margin-bottom: 0.625rem;
    font-weight: 400;
    text-align: center;
    color: #515944;
}

.tarjetaVestimenta .notaVestimenta{
    font-size: 1.2rem;
    font-family: "Cormorant Garamond", sans-serif;
    margin-bottom: 0.625rem;
    font-weight: 400;
    text-align: center;
    color: #515944;
}

/* Seccion Regalos */
.sugerencia{
    width: 100vw;
    background-image: url("../img/algodon-verde.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -5rem; 
    border-radius: 24px 24px 0 0;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 6.25rem;
}

.sugerencia .tituloRegalo{
    font-size: 2.7rem;
    font-family: "Against";
    margin-bottom: 4.0625rem;
    margin-top: 4.0625rem;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: white;
}

.tarjetaRegalo {
    width: min(48.8rem, 90vw);
    height: 26.5vw;

    background-image: url("../img/fondoRegalo.png"); /* textura papel */
    background-position: center;

    border-radius: 30px;

    box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.18),
    0 0.5rem 1.2rem rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.05);

    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.sugerencia .textoRegalo{
    font-size: 1.5rem;
    font-family: "Cormorant Garamond", sans-serif;
    margin-bottom: 0.625rem;
    font-weight: 400;
    text-align: center;
    color: #515944;
    padding: 0 1rem;
    
}

.sugerencia .btn-outline-dark {
    border-color: #515944;
    color: #515944;
}

.sugerencia .btn-outline-dark:hover {
    background-color: #515944;
    border-color: white;
    color: white;
}

.sugerencia .colTextoRegalo{
    width: 75%;
}

.sugerencia .colTiendas{
    width: 75%;
}

.tarjetaRegalo .btn{
    width: 50%;
}

/* Sección Galeria */
.galeria {
    width: 100vw;
    background-image: url("../img/rugosoHueso-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -5rem; 
    border-radius: 24px 24px 0 0;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 7.5rem;
}

.tituloGaleria{
    font-size: 2.7rem;
    font-family: "Against";
    margin-bottom: 4.0625rem;
    margin-top: 4.0625rem;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: #515944;
}

.polaroid-card {
  width: min(90vw, 450px);
  aspect-ratio: 78 / 100;
  max-height: 90dvh;
  background-color: #fff;
  border: none;
  padding: 12px 12px 20px;
  box-shadow: 
    0 12px 25px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden; /* Evita que cualquier contenido se salga de los bordes */
}

.polaroid-card img {
  width: 100%;       /* Obliga a la imagen a no ser más ancha que la card */
  height: auto;      /* Mantiene la proporción original */
  aspect-ratio: 1 / 1; /* Mantiene el formato cuadrado típico de Polaroid */
  object-fit: cover; /* Recorta la imagen para llenar el cuadrado sin deformarse */
  object-position: center; /* Centra el recorte */
  border-radius: 2px;
  
  /* Optimización de renderizado para imágenes grandes */
  image-rendering: -webkit-optimize-contrast; 
}

.polaroid-card .card-body {
  padding-top: 14px;
}

.polaroid-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.polaroid-card .card-text {
  font-size: 0.85rem;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Sección Pase */
.pase{
    width: 100vw;
    background-image: url("../img/algodon-verde.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    margin-top: -5rem; 
    border-radius: 24px 24px 0 0;
    padding-left: 0px; 
    padding-right: 0px;
    padding-bottom: 5.625rem;
}

.tituloPase{
    font-size: 2rem;
    font-family: "Against";
    margin-bottom: 3rem;
    margin-top: 3rem;
    font-weight: 400;
    top: 35px;
    left: 50%;
    text-align: center;
    color: white;
}

.ticket {
    display: grid;
    grid-template-columns: 1fr;
    background-image: url("../img/fondotarjeta.png");
    backdrop-filter: blur(12px);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.08);
}

@media (min-width: 768px) {
    .ticket {
        grid-template-columns: 2fr 1fr;
    }
}

/* IZQUIERDA */
        .ticket-info {
            padding: 2.5rem;
        }

        .ticket-info h2 {
            font-family: "Commorant Garamond", serif;
            font-weight: 400;
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .ticket-info p {
            color: #555;
            margin-bottom: .5rem;
            font-family: "Commorant Garamond", serif;
            font-weight: 400;
        }

        /* DERECHA */
        .ticket-pass {
            background-image: url("../img/fondoRegalo.png");
            text-align: center;
            padding: 2.5rem 1.5rem;
            position: relative;
        }

        /* perforado moderno */
        .ticket-pass::before,
        .ticket-pass::after {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            background: #fff;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
        }

        .ticket-pass::before {
            left: -11px;
        }

        .ticket-pass::after {
            right: -11px;
        }

        .pass-number {
            font-size: 3.5rem;
            font-weight: 500;
            font-family: "Commorant Garamond", serif;
            font-weight: 400;
            border: 1px solid #333;
            border-radius: 14px;
            display: inline-block;
            padding: .5rem 1.5rem;
            margin: 1rem 0;
        }

        .divider {
            border-top: 1px dashed #bbb;
            margin: 1.5rem 0;
        }

        /* FORM */
        .card {
            border-radius: 20px;
        }

        .tituloFormulario{
            font-family: "Commorant Garamond", serif;
            font-weight: 400;
            font-size: 2rem;
        }

        .contenedorForm{
            background-image: url("../img/fondotarjeta.png");
        }

        .form-control.glass,
        .form-select.glass,
        textarea.glass {
            background-color: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 14px;
            color: #515944;
        }

        .form-control.glass::placeholder,
        textarea.glass::placeholder {
            color: rgba(0, 0, 0, 0.45);
        }

        /* quitar sombras de Bootstrap */
        .form-control.glass:focus,
        .form-select.glass:focus,
        textarea.glass:focus {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: rgba(0, 0, 0, 0.35);
            box-shadow: none;
        }
            

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

    .main, .tarjetas, .tarjetaSalon, .vestimenta, .sugerencia, .galeria, .pase {
        background-attachment: scroll !important; /* Esto hará que el scroll sea suave como seda */
    }

    .hero {
        background-image: url("../img/FondoMovilRenderizado.webp");
    }

    .overlay-content {
        top: 50px; /* Más cerca arriba */
    }

    .logo {
        width: 3rem;
        margin-bottom: 2px;
    }

    .pase{
        background-image: url("../img/algodonFormulario.webp");
    }

    .names {
        font-size: 38px;
        letter-spacing: 3px;
        font-weight: 400;
        margin-bottom: 15px; /* Nombres más juntos */
    }

    .date {
        font-size: 0.8rem;
        letter-spacing: 3.2px;
    }

    .main .svg img{
        width: 9.8rem;
        margin-top: 0.75rem;
        margin-bottom: 1.35rem;
    }

    .main h2{
        font-size: 2.025rem;
        font-family: "Against";
        margin-bottom: 25px;
        font-weight: 400;
        top: 30px;
        left: 50%;
        text-align: center;
    }

    .main p{
        font-size: 0.8rem;
        letter-spacing: 0.20rem;
        font-family: "Roboto", sans-serif;
        margin-bottom: 5px;
        font-weight: 400;
        text-align: center;
    }

    .main .padres .nombresPadres{
        font-size: 0.9rem;
        letter-spacing: 1px;
        font-family: "Cormorant Garamond", sans-serif;
        margin-bottom: 10px;
        font-weight: 400;
        text-align: center;
    }

    .main .tag-padres{
        letter-spacing: 0.15 rem;
        font-size: 0.7rem;
    }
    
    .main .padres{
        width: 100% !important; /* en móviles ocupa todo */
    }

    /* Tarjetas Section */
    .tarjetas h2{
        font-size: 2.025rem;
        font-family: "Against";
        margin-bottom: 25px;
        font-weight: 400;
        top: 35px;
        left: 50%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .main {
        padding: 2.5rem 3.75rem 3.75rem 1.875rem;
        background-image: url("../img/AlgodonVerdeMovil.webp");
    }

    .main::before,
    .main::after {
        width: 3.75rem;
        opacity: 0.6;
    }

     .tarjetas {
        height: auto; /* clave en móvil */
        background-attachment: scroll; /* mejora rendimiento */
        border-radius: 1.25rem 1.25rem 0 0;
        background-image: url("../img/RugosoHuesoMovil.webp");
    }

    .vestimenta, .galeria {
        background-image: url("../img/RugosoHuesoMovil.webp");
    }

    .tarjetas h2 {
        font-size: 2rem;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .tarjeta-boda {
        width: 90vw;        /* se adapta al ancho */
        height: 285vw;     /* mantiene sensación full screen */
        border-radius: 0 5rem 0 5rem;
        margin-bottom: 1rem;
    }

    .tarjetas strong em {
        font-size: 1.8rem;
        letter-spacing: 0.2rem;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .tarjetas .nombreIglesia {
        font-size: 1.8rem;
    }

    .tarjetas .direccionIglesia {
        font-size: 1.2rem;
        padding: 0 1.5rem; /* respiración lateral */
    }

    .icon-link {
        font-size: 0.9rem;
    }

    .tarjetaSalon{
        background-image: url("../img/AlgodonVerdeMovil.webp");
    }

    .tarjetaSalon .tituloCeremonia{
        margin-top: 3rem;
    }

    .tarjeta-salon {
        
        background-image: url("../img/mobilefin-1.png");
        


    }

    .tarjeta-salon strong em {
        font-size: 1.8rem;
        letter-spacing: 0.2rem;
    }

    .tarjeta-salon .nombreIglesia{
        font-size: 1.8rem;
    }

    .tarjeta-salon .direccionIglesia{
        font-size: 1.2rem;
    }

    .tarjetaSalon h2{
        font-size: 2rem;
        margin-top: 3rem;
        margin-bottom: 3rem;
        
    }

    .vestimenta .tituloVestimenta {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .tarjetaVestimenta{
    width: 90vw;
    height: 45rem;
  }

  .vestimenta {
    height: auto; /* clave en móvil */

    }

.notaVestimenta{
        font-size: 1rem;
        padding: 0 1.5rem; /* respiración lateral */
}

.sugerencia {
        height: auto; /* clave en móvil */
        background-image: url("../img/AlgodonVerdeMovil.webp");
}

.tarjetaRegalo{
    width: 90vw;
    height: 26.5rem;

}

.sugerencia .tituloRegalo{
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.sugerencia .textoRegalo{
    font-size: 1.2rem;

}

.sugerencia .colTextoRegalo{
    width: 100%;
}

.sugerencia .colTiendas{
    width: 100%;
}

.tarjetaRegalo .btn{
    width: 80%;
}

.galeria .tituloGaleria{
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

}

footer {
    width: 100vw;
    background-image: url("../img/rugosoHueso-1.png");
    display: flex;
    justify-content: center;
    align-items: center;
    color: #515944;
    font-family: "Cormorant Garamond", sans-serif;
    font-weight: 400;
}