/* ╔═══════════════════════════════════════════════════════════╗
║  ESTILOS RESPONSIVE - Refugio de Guanaqueros (Final)     ║
║  ────────────────────────────────────────────────────────  ║
║  GUÍA DE EDICIÓN:                                         ║
║  • Breakpoints: 768px (tabletas) y móviles               ║
║  • Tabla de precios móvil: Media query @media            ║
║  • Botón WhatsApp: Ajustes para móvil                    ║
║                                                            ║
║  ⚠️ CORRECCIÓN 2: Tabla de precios 100% rediseñada.       ║
╚═══════════════════════════════════════════════════════════╝
*/

/* ========== TABLA DE PRECIOS - VISTA MÓVIL (¡CORREGIDO!) ========== */
@media (max-width: 768px) {
    /* Ocultar encabezados de tabla en móvil */
    .price-table thead {
        display: none;
    }
    
    /* Convertir filas en bloques */
    .price-table tbody,
    .price-table tr,
    .price-table td {
        display: block;
        width: 100%;
    }
    
    /* Estilo de tarjetas para cada fila */
    .price-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }
    
    /* Celdas apiladas (¡NUEVO ESTILO!) */
    .price-table td {
        display: flex; /* Usar flexbox para alinear label y valor */
        justify-content: space-between; /* Pone el label a la izq y valor a la der */
        align-items: center;
        padding: 0.85rem 1.25rem; /* Padding vertical y horizontal */
        text-align: right; /* Alinear el valor a la derecha */
        border: none;
        border-bottom: 1px solid #e2e8f0;
        width: 100%; /* Asegurar que ocupe todo el ancho */
    }

    /* Quitar borde de la última celda de cada fila */
    .price-table tr td:last-child {
        border-bottom: none;
    }
    
    /* Etiquetas (data-label) */
    .price-table td:before {
        content: attr(data-label);
        text-align: left;
        font-weight: 600;
        color: #2C3E50; /* textdark, para que resalte */
        white-space: normal; /* Permitir que el texto se ajuste */
        padding-right: 1rem; /* Espacio entre label y valor */
        
        /* Eliminar posicionamiento absoluto */
        position: static;
        width: auto;
        padding-left: 0;
    }

    /* Celda de equipamiento (¡NUEVO ESTILO MÁS SIMPLE!) */
    .price-table .equip-cell {
        /* Queremos que esta celda sea diferente, el label arriba y el texto abajo */
        display: block; /* Volver a block */
        text-align: left;
        background-color: #F8F9FA; /* neutral */
        padding: 1.25rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .price-table .equip-cell:before {
        /* Mostrar el label "Equipamiento" como un título */
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: #0077B6; /* primary, para que resalte */
        margin-bottom: 0.5rem;
        font-size: 1rem;
        
        /* Eliminar posicionamiento absoluto */
        position: static;
        width: auto;
        padding-left: 0;
    }
    
    /* Celda de personas (la primera) la haremos más grande, como título de la "tarjeta" */
    .price-table tr td:first-child {
        background-color: #0077B6; /* primary */
        color: white;
        font-size: 1.125rem; /* más grande */
        font-weight: 700;
        padding: 1rem 1.25rem;
        justify-content: flex-end; /* Alinear el texto a la derecha */
    }
    
    .price-table tr td:first-child:before {
        /* Ocultamos el data-label "Personas" y mostramos solo el valor */
        content: "";
        padding-right: 0;
        display: none;
    }
    
    /* Ocultar celdas vacías en móvil (SÚPER IMPORTANTE) */
    .price-table td:empty {
        display: none;
    }
}


/* ========== BOTÓN WHATSAPP - AJUSTES MÓVIL ========== */
/* ╔════════════════════════════════════════════════╗
║  CORRECCIÓN CRÍTICA: Botón en móviles          ║
║  ──────────────────────────────────────────────  ║
║  Ajustes para pantallas pequeñas sin afectar   ║
║  el layout o causar scroll horizontal          ║
╚════════════════════════════════════════════════╝
*/
@media (max-width: 640px) {
    /* Botón más pequeño en móviles */
    .whatsapp-float {
        width: 3.5rem;
        height: 3.5rem;
        bottom: 1rem;
        right: 1rem;
    }
    
    .whatsapp-float i {
        font-size: 2rem;
    }
}

/* Prevenir overflow horizontal causado por elementos fixed */
html, body {
    overflow-x: hidden;
    position: relative;
}

/* ========== AJUSTES GENERALES MÓVIL ========== */
@media (max-width: 640px) {
    /* Hero section más pequeño en móviles */
    #home {
        min-height: 70vh;
    }
    
    /* Títulos más pequeños */
    h1 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    /* Padding reducido en secciones */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Galería más compacta */
    .gallery-item {
        height: 12rem !important;
    }
    
    /* Carruseles más pequeños */
    .carousel-container {
        height: 250px !important;
    }
    
    .carousel-btn {
        font-size: 1.5rem;
    }
    
    .carousel-btn.prev {
        left: 0.5rem;
    }
    
    .carousel-btn.next {
        right: 0.5rem;
    }
}

/* ========== TABLETAS (768px - 1024px) ========== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ajustes intermedios para tabletas */
    .container {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Grid de cabañas en 2 columnas */
    #cabañas .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== DESKTOP GRANDE (> 1280px) ========== */
@media (min-width: 1280px) {
    /* Contenedor más ancho en pantallas grandes */
    .container {
        max-width: 1280px;
    }
}

/* ========== PREVENCIÓN DE PROBLEMAS COMUNES ========== */

/* Prevenir que las imágenes causen overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Prevenir que los iframes causen overflow */
iframe {
    max-width: 100%;
}

/* Asegurar que elementos fixed no afecten el scroll */
.fixed {
    position: fixed;
    margin: 0 !important;
}

/* ========== MEJORAS DE RENDIMIENTO MÓVIL ========== */

/* Suavizar animaciones en móviles */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Reducir animaciones complejas */
    .fade-in {
        transition: opacity 0.3s ease-out;
        transform: none !important;
    }
    
    /* Botones más táctiles */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
}
    
    /* Botones más táctiles */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }

}