K&A BRIDE

[janettemelendrez1003-netizen]

<title>Nuestra Boda - Katia y Ángel</title>

<style>
    /* Estilos Generales - Paleta Minimalista y Elegante */
    body {
        font-family: 'Montserrat', sans-serif;
        background-color: #faf8f5; /* Fondo crema suave */
        color: #333333;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .invitacion-container {
        background-color: #ffffff;
        width: 100%;
        max-width: 450px; /* Tamaño ideal para pantallas de celular */
        padding: 40px 25px;
        box-sizing: border-box;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        border-radius: 8px;
        margin: 20px;
    }

    /* Tipografías y Textos */
    h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 3rem;
        font-weight: 400;
        margin: 0 0 10px 0;
        letter-spacing: 2px;
        color: #2c3e2e; /* Verde oliva oscuro */
    }

    .subtitulo {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: 1.4rem;
        color: #708266; /* Verde oliva suave */
        margin-bottom: 40px;
    }

    h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.8rem;
        font-weight: 600;
        color: #2c3e2e;
        margin-top: 30px;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #555555;
        margin: 5px 0;
    }

    .destacado {
        font-weight: 400;
        letter-spacing: 1px;
        color: #2c3e2e;
    }

    /* Separadores elegantes */
    .linea-separadora {
        width: 40px;
        height: 1px;
        background-color: #708266;
        margin: 30px auto;
        opacity: 0.5;
    }

    /* Botones Interactivos */
    .btn {
        display: inline-block;
        background-color: #708266; /* Botón verde oliva */
        color: #ffffff;
        text-decoration: none;
        padding: 12px 30px;
        border-radius: 4px;
        font-size: 0.85rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 15px;
        transition: background-color 0.3s ease;
    }

    .btn:hover {
        background-color: #5b6d53;
    }

    /* Notas importantes (Dress code, niños) */
    .nota-especial {
        font-size: 0.85rem;
        font-style: italic;
        color: #777777;
        margin-top: 8px;
    }
</style>

<div class="invitacion-container">
    
    <!-- Portada -->
    <h1>Katia & Ángel</h1>
    <div class="subtitulo">Nuestra Boda</div>
    
    <p>Hay momentos en la vida que son inolvidables,<br>y compartirlos con las personas que más queremos los hace eternos.</p>
    
    <div class="linea-separadora"></div>

    <!-- Fecha y Hora -->
    <h2>Cuándo</h2>
    <p class="destacado">Domingo, 11 de Octubre de 2026</p>
    <p>17:00 hrs.</p>

    <div class="linea-separadora"></div>

    <!-- Ubicación -->
    <h2>Dónde</h2>
    <p class="destacado">Jardín Secreto Calet</p>
    <!-- REEMPLAZA EL ENLACE DE ABAJO POR EL DE TU GOOGLE MAPS 

https://maps.app.goo.gl/quvvKLAbV2FpBZ8M7?g_st=ac

    <div class="linea-separadora"></div>

    <!-- Detalles del Evento -->
    <h2>Detalles</h2>
    
    <p class="destacado">Código de Vestimenta</p>
    <p>Garden Cocktail</p>
    
    <br>
    
    <p class="nota-especial">* Evento exclusivo para adultos</p>

    <div class="linea-separadora"></div>

    <!-- Confirmación de Asistencia -->
    <h2>Confirmación</h2>
    <p>Agradecemos confirmar tu asistencia antes del evento.</p>
    <!-- REEMPLAZA EL ENLACE DE ABAJO CON TU NÚMERO DE WHATSAPP -->
    <a href="https://wa.me/3315313531?text=¡Hola!+Confirmo+mi+asistencia+a+la+boda" target="_blank" class="btn">Confirmar por WhatsApp</a>

</div>