/* Estilos generales */
body {
    font-family: 'Garamond', serif;
    font-size: 14px;
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;

    /* Fondo turístico (Sin cambios) */
    background-image: url('../img/beach_caribb.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Contenedor principal */
.page-container {
    width: 80%; /* ancho reducido en desktop */
    margin: 0 auto; /* centra horizontalmente */
    max-width: 1400px;
}


/* Textos principales */
/* ... (Se mantienen los estilos .text y .text_uno sin cambios) ... */
.text {
    color: rgb(254, 20, 20);
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text_uno {
    color: rgb(191, 14, 240);
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Encabezado y navegación */
/* ... (Se mantienen los estilos del header y nav sin cambios) ... */
.header-container {
    padding: 20px;
    background-color: #fff8dc;
}

.contenido-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.titulo-pagina-inline p {
    margin: 0;
    font-size: 1rem;
    color: #DAA520;
}

.titulo-pagina-inline h1 {
    margin: 0;
    font-size: 2rem;
    color: #FFD700;
    font-weight: bold;
    text-shadow: 1px 1px 2px #B8860B;
}

.logo-container img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: #fff8dc;
    border-radius: 8px;
    padding: 5px;
}

.nav-menu {
    background-color: #f8f9fa;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.nav-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-menu li a {
    text-decoration: none;
    color: #004d73;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.nav-menu li a:hover {
    color: #007bff;
}

/* Hero section */
.hero {
    text-align: center;
    padding: 3rem 1rem;
    
    /* ⭐️ CAMBIO CRÍTICO: Degradado claro y elegante (Crema/Dorado Suave) */
    background: linear-gradient(to bottom, 
        #f4f496 0%,         /* Beige/Crema muy claro (casi blanco) */
        #EAE0C8 50%,        /* Un gris topo claro o arena suave */
        #fada78 100%        /* Dorado  suave */
    );
    
    /* ⚠️ CAMBIO CRÍTICO: El texto debe ser más oscuro sobre fondo claro */
    color: #333333; /* Texto gris oscuro o casi negro */
    
    /* Si quieres que el texto sea completamente negro, usa: */
    /* color: black; */
}

/* Opcional: Para darle un toque de profundidad al texto */
.hero h1, .hero h3 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Botón de WhatsApp */
/* Estilos aplicados */

.whatsapp-button {
    /* 🔑 CAMBIOS CLAVE: Posicionamiento fijo */
    position: fixed; 
    bottom: 20px; /* Distancia desde la parte inferior de la ventana */
    right: 20px; /* Distancia desde el lado derecho de la ventana */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Suavizar el efecto */

    /* Estilos visuales (se mantienen) */
    background-color: #25D366;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: inline-flex; 
    align-items: center;
}

/*  Efecto Hover para el botón de WhatsApp */
.whatsapp-button:hover {
     transform: scale(1.15); /* Aumentar el tamaño en un 15% (1.15) */    
    /* Opcional: Aumentar la sombra para un efecto 3D más pronunciado */
    box-shadow: 0 6px 10px rgba(0,0,0,0.4);  /* Aumentar la sombra para un efecto 3D más pronunciado */    
    /* Opcional: Para mantener el color vibrante */
    filter: brightness(1.1); /*ara mantener el color vibrante */
}

/* Ícono y Enlace (se mantienen) */
.whatsapp-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.whatsapp-link {
    color: white;
    text-decoration: none;
}


.img {
    width: 100%; /* Ajustada para funcionar dentro de la nueva columna */
    height: auto;
    display: block;
    margin: 0 auto;
}
.img-dt {
    width: 40%; /* Ajustada para funcionar dentro de la nueva columna */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Layout de filas y columnas */
.row {
    /* ⭐️ CAMBIO CRÍTICO: Usamos flex para centrar los 40/40 (80% total) */
    display: flex;
    justify-content: center; /* Centra las dos columnas dentro del page-container */
    flex-wrap: wrap;
    margin: 2rem 0;
}

.col {
    /* ⭐️ CAMBIO CRÍTICO: Ancho fijo del 40% (40% + 40% = 80%) */
    width: 40%;
    /* flex: none; /* Asegura que no crezca ni se encoja (opcional, ya que width lo define) */
    padding: 1rem;
}

.col.image {
    /* Mantenemos el ancho de 40% definido en .col para la columna */
    /* Añadimos una altura fija para crear un marco uniforme */
    height: 350px; /* Ajusta esta altura al valor que desees (e.g., 250px, 350px) */
    padding: 1rem;
}

/* 2. Estilo aplicado a la imagen (img) dentro del contenedor */
.col.image img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor (40%) */
    height: 100%; /* La imagen ocupa el 100% de la altura del contenedor (e.g., 300px) */
    
    /* 🔑 CLAVE: Define cómo la imagen debe llenar el espacio */
    object-fit: cover; 
    
    /* Propiedades de estilo que ya tenías: */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.col.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 18px;
    line-height: 1.6;
}

/* Footer */
.footer {
    text-align: center;
    padding: 1rem;
    width:100%;
    color: #0b0900;
    font-size: 14px;
    /* ⭐️ CAMBIO CRÍTICO: Degradado claro y elegante (Crema/Dorado Suave) */
    background: linear-gradient(to bottom, 
        #f4f496 0%,         /* Beige/Crema muy claro (casi blanco) */
        #EAE0C8 50%,        /* Un gris topo claro o arena suave */
        #fada78 100%        /* Dorado  suave */
    );
    
}

/* Responsive */
@media (max-width: 768px) {
    /* Mantiene las columnas apiladas al 100% en pantallas pequeñas */
    .row {
        flex-direction: column;
    }
    .col {
        /* Asegura que la columna ocupe el 100% del page-container (que es 100% del viewport) */
        width: 100%; 
    }
    .text {
        font-size: 24px;
    }
    .text_uno {
        font-size: 18px;
    }
    .page-container {
        width: 100%; 
        padding: 0 1rem; 
    }
}