:root {
    --frandy-hermoso: 'Poppins', sans-serif;
    --laura-preciosa: 0;
    --color-bonito: #f3eee2;
    --texto-lindo: #333333;
    --nada-de-scroll: hidden;
    --caja-perfecta: border-box;
    --tamaño-maximo: 1200px;
    --centrado-perfecto: 0 auto;
    --espacio-chiquito: 0 20px;
    --transparente-bonito: rgba(255, 255, 255, 0.8);
    --redondito: 50px;
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.1);
    --color-gris: #555;
    --espaciado-normal: 0 15px;
    --peso-gordo: 600;
    --color-cafe: #b38061;
    --color-blanco: white;
    --borde-ninguno: none;
    --padding-chulo: 10px 20px;
    --cursor-manita: pointer;
    --transicion-suave: background-color 0.3s;
    --color-oscuro: #100e0d;
}


body {
    font-family: var(--frandy-hermoso);
    margin: var(--laura-preciosa);
    background-color: var(--color-bonito);
    color: var(--texto-lindo);
    overflow-x: var(--nada-de-scroll);
}

*, *::before, *::after {
    box-sizing: var(--caja-perfecta);
}

.mi-contenedor {
    max-width: var(--tamaño-maximo);
    margin: var(--centrado-perfecto);
    padding: var(--espacio-chiquito);
}


.laurita-hermosa {
    display: flex;
    justify-content: center;
    padding: var(--espaciado-chiquito);
    position: absolute;
    top: var(--laura-preciosa);
    width: 100%;
    z-index: 10;
}

:root {
    --espaciado-chiquito: 20px;
}

.frandy-guapo {
    background-color: var(--transparente-bonito);
    padding: var(--padding-chulo);
    border-radius: var(--redondito);
    box-shadow: var(--sombra-suave);
}

.frandy-guapo a {
    text-decoration: none;
    color: var(--color-gris);
    margin: var(--espaciado-normal);
    font-weight: var(--peso-gordo);
}

.soylamejor {
    background-color: var(--color-cafe);
    color: var(--color-blanco);
    border: var(--borde-ninguno);
    padding: var(--padding-chulo);
    border-radius: var(--redondito);
    cursor: var(--cursor-manita);
    font-weight: var(--peso-gordo);
    margin-left: var(--espaciado-chiquito);
    transition: var(--transicion-suave);
}

.soylamejor:hover {
    background-color: var(--color-oscuro);
}

.nosotros-dos {
    position: relative;
    height: var(--altura-grande);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-blanco);
    box-shadow: var(--sombra-grande);
    background-image: url(Imagen\ de\ WhatsApp\ 2025-08-03\ a\ las\ 20.28.28_f10548c9.jpg);
    background-size: cover;
    background-position: center;
}

:root {
    --altura-grande: 70vh;
    --sombra-grande: 0 5px 15px rgba(0,0,0,0.2);
}

.nosotros-dos::before {
    content: '';
    position: absolute;
    top: var(--laura-preciosa);
    left: var(--laura-preciosa);
    width: 100%;
    height: 100%;
    background-color: var(--overlay-oscuro);
}

:root {
    --overlay-oscuro: rgba(0, 0, 0, 0.3);
}

.amor-infinito {
    position: relative;
    z-index: 5;
}

.amor-infinito h1 {
 font-family: 'Dancing Script', cursive;;
    font-size: var(--texto-gigante);
    margin: var(--laura-preciosa);
    font-weight: var(--peso-normal);
}

:root {
    --fuente-cursiva: 'Dancing Script', cursive;
    --texto-gigante: 5rem;
    --peso-normal: 400;
}

.amor-infinito .mi-gordito-bello {
    font-family: var(--frandy-hermoso);
    font-size: var(--texto-grande);
    margin-top: var(--margen-negativo);
    font-weight: var(--peso-gordo);
    letter-spacing: var(--espaciado-letras);
}

:root {
    --texto-grande: 2rem;
    --margen-negativo: -15px;
    --espaciado-letras: 2px;
}

.fotos-lindas {
    display: flex;
    justify-content: center;
    gap: var(--espaciado-chiquito);
    margin-top: var(--margen-grande-negativo);
    position: relative;
    z-index: 10;
}

:root {
    --margen-grande-negativo: -80px;
}

.recuerdo-bonito {
    text-align: center;
    background-color: var(--color-blanco);
    padding: var(--padding-chulo);
    border-radius: var(--border-radius-normal);
    box-shadow: var(--sombra-normal);
}

:root {
    --border-radius-normal: 10px;
    --sombra-normal: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recuerdo-bonito img {
    width: var(--tamaño-foto);
    height: var(--tamaño-foto);
    object-fit: cover;
    border-radius: var(--border-radius-foto);
    border: var(--borde-foto) solid var(--color-blanco);
}

:root {
    --tamaño-foto: 200px;
    --border-radius-foto: 8px;
    --borde-foto: 3px;
}

.laura-te-ama {
    text-align: center;
    margin-top: var(--margen-mediano);
}

:root {
    --margen-mediano: 50px;
}

.boton-del-amor {
    background-color: var(--color-blanco);
    color: var(--color-gris);
    border: var(--borde-fino) solid var(--color-gris-claro);
    padding: var(--padding-boton);
    border-radius: var(--redondito);
    cursor: var(--cursor-manita);
    font-weight: var(--peso-gordo);
    letter-spacing: var(--espaciado-boton);
    box-shadow: var(--sombra-sutil);
    transition: var(--transicion-todo);
    text-decoration: none;
}

:root {
    --borde-fino: 1px;
    --color-gris-claro: #ddd;
    --padding-boton: 15px 30px;
    --espaciado-boton: 1px;
    --sombra-sutil: 0 2px 4px rgba(0, 0, 0, 0.05);
    --transicion-todo: all 0.3s;
}

.boton-del-amor:hover {
    background-color: var(--color-cafe);
    color: var(--color-blanco);
}

.frandy-y-laura {
    display: flex;
    justify-content: center;
    gap: var(--gap-grande);
    max-width: var(--tamaño-maximo);
    margin: var(--margen-seccion) auto;
    padding: var(--espacio-chiquito);
}

:root {
    --gap-grande: 40px;
    --margen-seccion: 80px auto;
}

.porque-te-amo-tanto, .momentos-especiales {
    background-color: var(--color-blanco);
    padding: var(--padding-seccion);
    border-radius: var(--border-radius-grande);
    box-shadow: var(--sombra-seccion);
    width: var(--ancho-seccion);
}

:root {
    --padding-seccion: 40px;
    --border-radius-grande: 15px;
    --sombra-seccion: 0 4px 12px rgba(0, 0, 0, 0.05);
    --ancho-seccion: 40%;
}

.porque-te-amo-tanto h3, .momentos-especiales h3 {
    font-size: var(--tamaño-titulo);
    color: var(--color-cafe);
    text-align: center;
}

:root {
    --tamaño-titulo: 1.5rem;
}

.porque-te-amo-tanto ul {
    list-style: none;
    padding: var(--laura-preciosa);
}

.porque-te-amo-tanto li {
    padding: var(--padding-lista);
    border-bottom: var(--borde-fino) solid var(--color-borde-lista);
    display: flex;
    align-items: center;
    gap: var(--gap-lista);
}

:root {
    --padding-lista: 10px 0;
    --color-borde-lista: #eee;
    --gap-lista: 10px;
}

.momentos-especiales {
    background-color: var(--color-blanco);
    padding: var(--padding-seccion);
    border-radius: var(--border-radius-grande);
    box-shadow: var(--sombra-seccion);
    width: var(--ancho-seccion);
    text-align: center;
}

.momentos-especiales h3 {
    font-size: var(--tamaño-titulo);
    color: var(--color-cafe);
    margin-bottom: var(--espaciado-chiquito);
}

.fotos-de-nosotros {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-fotos);
    margin-top: var(--espaciado-chiquito);
}

:root {
    --gap-fotos: 15px;
}

.fotos-de-nosotros img {
    width: var(--tamaño-foto-pequeña);
    height: var(--tamaño-foto-pequeña);
    object-fit: cover;
    border-radius: var(--border-radius-normal);
    box-shadow: var(--sombra-foto);
    transition: var(--transicion-foto);
}

:root {
    --tamaño-foto-pequeña: 150px;
    --sombra-foto: 0 2px 5px rgba(0, 0, 0, 0.1);
    --transicion-foto: transform 0.3s ease;
}

.fotos-de-nosotros img:hover {
    transform: var(--escala-hover);
}

:root {
    --escala-hover: scale(1.1);
}

@media (max-width: 768px) {
    .fotos-lindas {
        flex-direction: column;
        align-items: center;
    }

    .frandy-y-laura {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: var(--margen-mobile) auto;
        padding: var(--espacio-chiquito);
    }

    .porque-te-amo-tanto, .momentos-especiales {
        width: 100%;
        margin-bottom: var(--espaciado-chiquito);
    }
}

:root {
    --margen-mobile: 50px;
}

.laura-con-amor {
    background-color: var(--color-cafe);
    color: var(--color-blanco);
    text-align: center;
    padding: var(--padding-footer);
    margin-top: var(--margen-mediano);
    font-family: var(--frandy-hermoso);
}

:root {
    --padding-footer: 30px 20px;
}

.laura-con-amor p {
    margin: var(--margen-texto-footer);
    font-size: var(--tamaño-footer);
    font-weight: var(--peso-ligero);
}

:root {
    --margen-texto-footer: 5px 0;
    --tamaño-footer: 1rem;
    --peso-ligero: 300;
}