/* ==========================================================================
   1. VARIABLES & GLOBAL STYLES
   ========================================================================== */
:root {
    /* --- Paleta de Colores --- */
    --bg: #f4f8fb;
    --card: #fff;
    --ink: #2b2e4a;     /* Texto principal oscuro */
    --muted: #475569;   /* Texto secundario gris */
    --error: #ef4444;   /* Rojo para errores */
    --brand: #3e426a;   /* Azul oscuro primario */
    --brand-600: #2b2e4a;/* Azul más oscuro (para hovers) */
    --accent: #DBC078;  /* Dorado claro (para logo, badges?) */
    --ok: #e6d3a0;      /* Dorado más apagado */
    --verde-whatsapp: #25D366; /* Verde específico de WhatsApp */
    --verde-whatsapp-hover: #1DAE54;

    /* --- Decisiones de Diseño --- */
    --radius-sm: 8px;    /* Radio pequeño (ej. tags, badges) */
    --radius-md: 12px;   /* Radio medio (botones, inputs, mapa) */
    --radius-lg: 18px;   /* Radio grande (tarjetas, modales) */
    --radius-full: 999px;/* Radio circular (píldoras) */

    --shadow-sm: 0 4px 8px rgba(2, 8, 23, .05); /* Sombra chica */
    --shadow-md: 0 10px 20px rgba(2, 8, 23, .08);/* Sombra media */
    --shadow-lg: 0 15px 25px rgba(2, 8, 23, .1); /* Sombra grande */
}

/* --- Resets & Body --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-y: scroll; }
body {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0;
}

/* --- Contenedor Principal --- */
.container { max-width: 1200px; margin-inline: auto; padding: 0 20px;}
#main-content { margin-top: 20px; }

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
p { font-size: 15px; margin-top: 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; }
.section-title { font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 16px; }
.pre-wrap-text { white-space: pre-wrap; font-size: 14px;}
.text-muted { color: var(--muted); }
.text-error { color: var(--error); }
.link-inherit { color: inherit; cursor: pointer; text-decoration: underline; }
.link-brand { color: var(--brand); text-decoration: underline; }

/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */
.nav {
    position: sticky; top: 0; z-index: 9999;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease;
}
.nav-inner {
    background-color: var(--brand-600);
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1200px; margin-inline: auto; 
    padding: 14px 20px; /* Padding interior de la barra */
    transition: background-color 0.3s ease;
}
.brand { display: flex; align-items: center; text-decoration: none; gap: 12px; }
.brand img { width: 50px; height: 50px; }
.brand-text {
    font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 27px;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--card);
    transition: color 0.3s ease;
}
.links { 
    display: flex; 
    align-items: center; 
    margin-left: auto; /* Empuja los links hacia la derecha */
    gap: 18px; 
}
/* Estilo general para links y botones (Escritorio) */
.nav a,
.nav button {
    text-decoration: none;
    color: var(--card); 
    font-weight: 500;
}

/* Hover: Aplicar el mismo efecto grisáceo a ambos elementos */
.nav a:hover,
.nav button:hover { /* Combinamos ambos selectores para uniformidad */
    /* USAMOS EL MISMO VALOR RGBA para el efecto grisáceo */
    color: rgba(255, 255, 255, 0.8); 
    
    /* MANTENEMOS ESTO para anular el fondo blanco de .btn--ghost:hover */
    background-color: transparent; 
}

/* Estilos Base para el contenido dentro del enlace complejo */
.nav-link-title { display: block; line-height: 1.2; }
.nav-link-subtitle { display: none; } /* CRÍTICO: Ocultamos globalmente */

/* --- Botón Hamburguesa --- */
.menu-toggle {
    background: none; border: none; cursor: pointer; padding: 0;
    z-index: 10001; display: none; color: var(--card);
    transition: color 0.3s ease;
}
.menu-toggle svg { stroke: currentColor; }
.menu-toggle .icon-close { display: none; }
.menu-toggle.is-active .icon-hamburger { display: none; }
.menu-toggle.is-active .icon-close { display: block; }

/* --- Panel Menú Móvil (ESTADO BASE: ESCRITORIO) --- */
.nav-menu {
    /* Estado de escritorio: es un elemento normal de flujo, invisible en el código. */
    position: static; 
    transform: none; 
    width: auto; 
    height: auto;
    background-color: transparent; /* Transparente en escritorio */
    box-shadow: none; 
    padding-top: 0;
    z-index: 9998; /* Mantenemos el z-index alto por si acaso */
}
.nav-menu.is-open { /* En escritorio, este estado no debería hacer nada */
    transform: none;
}
.nav-menu .links { 
    flex-direction: row; 
    align-items: center; 
    gap: 18px; 
    padding: 0;
}
.nav-menu .links a {
    color: var(--card); 
    padding: 0; /* Quitamos el padding vertical grande */
    font-size: 1rem; 
}
.nav-menu .links a:hover {
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
}

/* --- Overlay Menú Móvil --- */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px);
    z-index: 9997; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}
.menu-overlay.is-visible { opacity: 1; visibility: visible; backdrop-filter: blur(4px); }

/* ==========================================================================
   4. BOTONES - NUEVO SISTEMA (CON GRADIENTES)
   ========================================================================== */
/* --- 1. Clase Base (.btn) --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    cursor: pointer; padding: 10px 20px; border: 1px solid transparent;
    border-radius: var(--radius-md); transition: all 0.2s ease;
}
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- 2. Modificadores de Color --- */
.btn--primary { background-color: var(--brand); color: var(--card); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background-color: var(--brand-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--secondary { background-image: linear-gradient(135deg, #315a89, #5c8cc4); color: var(--card); border: none; box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background-image: linear-gradient(135deg, #2a4d75, #4a76a5); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--danger { background-image: linear-gradient(135deg, #962b2b, #d83838); color: var(--card); border: none; box-shadow: var(--shadow-sm); }
.btn--danger:hover { background-image: linear-gradient(135deg, #7d2424, #b42e2e); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--info { background-image: linear-gradient(135deg, #012c58, #00aad3); color: var(--card); border: none; box-shadow: var(--shadow-sm); }
.btn--info:hover { background-image: linear-gradient(135deg, #012142, #008cb0); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--whatsapp { background-image: linear-gradient(135deg, #15793a, var(--verde-whatsapp)); color: var(--card); font-weight: bold; border: none; box-shadow: var(--shadow-sm); }
.btn--whatsapp:hover { background-image: linear-gradient(135deg, #12632f, var(--verde-whatsapp-hover)); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--accent { background-color: var(--ok); color: var(--brand-600); font-weight: 700; box-shadow: var(--shadow-sm); }
.btn--accent:hover { background-color: #e0c88a; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--ghost { background-color: transparent; color: var(--muted); font-weight: 500; }
.btn--ghost2 { background-color: var(--bg); color: var(--brand-600); font-weight: 500; }
.btn--ghost:hover { background-color: var(--bg); color: var(--ink); }

/* --- 3. Modificadores de Forma y Tamaño --- */
.btn--pill { border-radius: var(--radius-full); }
.btn--sm { font-size: 0.875rem; padding: 8px 16px; }
.btn--lg { font-size: 1.125rem; padding: 12px 24px; }

/* --- 4. Clases Antiguas (Conservadas por compatibilidad) --- */
.btn-link { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* ==========================================================================
   5. FORMULARIOS
   ========================================================================== */
.field { display: grid; gap: 6px; }
.label { font-size: 12px; color: var(--muted); }
.input, select, textarea {
    appearance: none; border: 1px solid rgba(15, 23, 42, .1); padding: 12px;
    border-radius: var(--radius-md); outline: 0; background: var(--card);
    font: inherit; color: var(--ink); width: 100%;
}
textarea { resize: vertical; min-height: 80px; }
.input::placeholder, textarea::placeholder { font-size: 12px; color: #a0aec0; }
select.input:invalid { font-size: 14px; color: #a0aec0; }
select.input option { color: var(--ink); }

.form-fieldset { border: 1px solid rgba(15,23,42,.1); border-radius: var(--radius-md); padding: 12px; font-size: 14px; }
.fieldset-legend { padding: 0 8px; font-size: 12px; font-weight: 600; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.form-intro-text { font-size: 14px; color: var(--muted); margin-top: 0; }

/* --- Validación --- */
.form-anuncio { display: grid; gap: 16px; }
.form-anuncio .field.has-error .input,
.form-anuncio .field.has-error select,
.form-anuncio .field.has-error textarea { border-color: var(--error); }
.form-anuncio .error-text { display: none; color: var(--error); font-size: 12px; margin-top: 4px; }
.form-anuncio .field.has-error .error-text { display: block; }
.form-anuncio .required-asterisk { color: var(--error); margin-left: 2px; }

/* --- AMENIDADES Y CATEGORÍAS (CUADRÍCULA DE CHECKBOXES) --- */
.amenity-items-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 Columnas Fijas para Desktop */
    gap: 18px; /* Espaciado generoso */
}

.amenity-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 14px; 
    cursor: pointer; 
}
.amenity-item input[type="checkbox"] { 
    width: 16px; height: 16px; accent-color: var(--brand); 
    /* Sobrescribimos el estilo input genérico para el checkbox */
    padding: 0; 
}

/* --- Previsualización Imágenes --- */
.image-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.image-preview-wrapper { position: relative; width: 100%; padding-top: 100%; border: 1px solid #ddd; border-radius: var(--radius-sm); overflow: hidden; }
.image-preview-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   6. SEARCH & FILTERS
   ========================================================================== */
/* --- Barra Principal --- */
.search-actions-bar {
    display: flex; align-items: center; gap: 16px;
    background: var(--card); padding: 14px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    margin-top: 10px; position: relative; z-index: 10;
}
.search-actions-bar .search {
    flex-grow: 1; padding: 0; box-shadow: none; background: none;
    display: grid; grid-template-columns: 1fr auto;
    gap: 8px; border-radius: 0; align-items: stretch;
}
/* Botón Buscar Cuadrado */
.search-actions-bar .search .btn--primary,
.search-inline .btn--primary { border-radius: var(--radius-md); }

.action-buttons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.action-buttons.horizontal { display: flex; gap: 8px; align-items: center; }

/* --- Buscador Inline (Página de Inicio) --- */
.search-inline {
    display: flex; align-items: stretch; gap: 8px;
    background: var(--card); padding: 14px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    margin-top: 10px; position: relative; z-index: 10;
}
.search-inline .field { flex-grow: 1; }

/* --- Buscador Compacto --- */
.search-form-compact { display: flex; align-items: flex-end; gap: var(--radius-md); }
.search-form-compact .field { flex-grow: 1; }

/* --- Filtros (Chips) --- */
.filters {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; margin: 28px 0 5px;
    -webkit-overflow-scrolling: touch; padding-bottom: 15px; clip-path: inset(0 0 15px 0);
}
.filters::-webkit-scrollbar { display: none; }
.chip {
    background: var(--card); border: 1px solid rgba(15, 23, 42, .08); padding: 8px 14px;
    border-radius: var(--radius-full); font-size: 14px; color: var(--muted);
    cursor: pointer; white-space: nowrap; transition: all 0.2s ease;
}
.chip:hover { background-color: var(--bg); }
.chip.active { color: var(--brand-600); border-color: var(--brand); background: rgba(62, 66, 106, .1); }

/* ==========================================================================
   7. GRID & CARDS
   ========================================================================== */
.grid { 
    display: grid; 
    gap: 18px; 
    grid-template-columns: 1fr 1fr; /* Base 2 columnas */
    align-items: start; 
}
.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }

.card {
    background: var(--card); 
    border-radius: var(--radius-lg); 
    overflow: hidden;
    box-shadow: var(--shadow-md); 
    display: flex; 
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease; 
    position: relative; 
    height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Imágenes ajustadas */
.card img { 
    width: 100%; 
    height: 180px; 
    object-fit: cover; 
    display: block; 
}

.card-body { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    padding: 12px; /* Padding un poco más compacto */
    gap: 4px; /* Menor espacio vertical entre elementos */
}

/* Ajuste en Móvil para padding */
@media (max-width: 768px) {
    .card-body { padding: 10px; }
    .card img { height: 140px; } /* Imagen más baja en móvil */
}

.card-body > *:last-child { margin-top: auto; } 

/* --- HEADER DE LA TARJETA (Título + Precio) --- */
.card-header { 
    display: flex; 
    align-items: flex-start; /* Alineamos arriba para que el título largo no centre el precio */
    justify-content: space-between; 
    gap: 8px; /* Espacio mínimo entre título y precio */
}

.card-title { 
    margin: 0; 
    font-size: 0.8125rem; /* 13px */
    line-height: 1.3; 
    font-weight: 600;
    flex: 1; /* El título ocupa todo el espacio disponible */
    overflow: hidden; /* Seguridad para textos muy largos */
}

/* --- PRECIO EN 2 LÍNEAS Y A LA DERECHA --- */
.price { 
    font-weight: 700; 
    font-size: 0.75rem; /* 12px */
    color: var(--brand); 
    
    /* El Truco de las 2 columnas: */
    white-space: normal; /* Permitimos saltos de línea */
    width: min-content;  /* El ancho se ajusta a la palabra más larga ("$2,500") forzando el salto */
    text-align: right;   /* Texto alineado a la derecha */
    line-height: 1.1;    /* Altura de línea compacta */
    
    margin-left: auto;   /* Empuja el bloque a la derecha */
    flex-shrink: 0;      /* Evita que el precio se aplaste */
}

.meta { 
    color: var(--muted); 
    font-size: 0.6875rem; /* 11px */
    margin-top: 2px;
}

/* --- Badges (Sin cambios) --- */
.premium-badge {
    position: absolute; top: 25px; left: -45px; transform: rotate(-45deg);
    background: linear-gradient(135deg, #fceabb, #f8b500); color: #422f00;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .3); padding: 6px 0; width: 160px;
    text-align: center; font-size: 12px; font-weight: 700; z-index: 5; box-shadow: var(--shadow-sm);
}
.card .popular-badge {
    position: absolute; top: 12px; left: 12px;
    background-color: rgba(255, 255, 255, 0.9); color: var(--ink); padding: 6px 12px;
    border-radius: var(--radius-full); font-size: 12px; font-weight: 600; z-index: 5;
    box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.card .verified-badge { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; z-index: 5; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.verified-badge-title { width: 24px; height: 24px; vertical-align: middle; margin-left: 8px; }
.map-infowindow .verified-badge-map { width: 16px; height: 16px; vertical-align: middle; margin-left: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* ==========================================================================
   8. PAGE SPECIFIC: DETALLE & RESULTADOS
   ========================================================================== */
.main-content-detail { margin-top: 32px; }
.detail-card{ background-color:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.detail-body{ padding: 24px; }
.detail-header{ border-bottom:1px solid rgba(15,23,42,.08); padding-bottom:16px; margin-bottom:16px; }
.detail-header h1{ font-size:clamp(24px, 3.5vw, 42px); margin:0; }
.detail-header .price { 
    font-size: 1rem; 
    font-weight: 700; 
    color: var(--brand);
    
    /* --- RESTAURAR COMPORTAMIENTO NORMAL --- */
    width: auto;         /* Quita el ancho mínimo de las tarjetas */
    text-align: left;    /* Alinea a la izquierda */
    margin-left: 0;      /* Quita el empuje a la derecha */
    white-space: normal; /* Permite flujo normal de texto */
    display: block;      /* Ocupa su propia línea */
    margin-top: 8px;     /* Un poco de separación del título */
}

/* --- Grid Info Rápida --- */
.detail-grid{ display:grid; grid-template-columns: auto 1fr; gap: 8px 15px; align-items: baseline; margin-bottom: 24px; font-size: 0.9rem; }
.detail-grid strong{ text-align: right; font-weight: 500; color: var(--muted); }
.detail-grid span, .detail-grid a { text-align: left; font-weight: 600; color: var(--ink); }
.detail-grid a { color: var(--brand); text-decoration: none; }
.detail-grid a:hover { text-decoration: underline; }

/* --- Descripciones --- */
#descripcion-terraza, #descripcion-proveedor, #info-adicional-texto { white-space: pre-wrap; color: var(--muted); font-size: 15px; }

/* --- Tags/Amenidades --- */
.detail-tags{ display:flex; flex-wrap:wrap; gap:8px; padding-left:0; list-style:none; margin-bottom: 16px; }
.detail-tags li{ background-color:var(--bg); padding:6px 12px; border-radius:var(--radius-full); font-size:12px; display: inline-flex; align-items: center; gap: 6px; }
.amenity-category-title { font-size: .75rem; font-weight: 600; margin: 20px 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.amenity-icon { width: 18px; height: 18px; opacity: 0.7; }

/* --- Encabezado Resultados --- */
.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.results-header .section-title { margin-bottom: 0; }

/* ==========================================================================
   9. COMPONENTS
   ========================================================================== */

/* --- Iconos Sociales (Genérico) --- */
.social-icons-section { text-align: center; }
.social-heading { font-size: 1rem; font-weight: 500; color: var(--muted); margin-top: 0; margin-bottom: 16px; }
.social-icons-wrapper { display: flex; justify-content: center; gap: 20px; }
.social-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; transition: transform 0.2s ease-in-out; }
.social-icons-wrapper a:hover .social-icon { transform: scale(1.15); opacity: 0.85; }

/* --- Bloque Call-to-Action (CTA) --- */
.cta-compacto {
    margin: 30px 0; padding: 24px; border: none; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #e0f2fe, #fef3c7); color: var(--ink);
    box-shadow: var(--shadow-sm); display: block; text-align: center;
}
.cta-compacto h3 { margin: 0 0 4px 0; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.cta-compacto p { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; }

/* --- Carrusel --- */
.carousel-container { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; position: relative; background-color: #f0f0f0; }
.carousel-slides { display: flex; height: 100%; transition: transform .5s ease-in-out; }
.carousel-slides img, .carousel-slides video { width: 100%; height: 100%; object-fit: cover; display: block; flex-shrink: 0; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); background-color:rgba(0,0,0,.5); color:#fff; border:none; width: 40px; height: 40px; border-radius: 50%; cursor:pointer; z-index:10; font-size:24px; line-height: 40px; text-align: center; }
.carousel-btn.prev{left:10px} .carousel-btn.next{right:10px}
.slide-item { position: relative; width: 100%; height: 100%; flex-shrink: 0; display: grid; place-items: center; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: grid; place-items: center; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; }
.video-overlay::after { content: ''; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f172a'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 32px; box-shadow: var(--shadow-md); }
video:playing + .video-overlay { opacity: 0; }

/* --- Tags/Chips (General) --- */
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag { background-color: var(--bg); border-radius: var(--radius-full); padding: 8px 16px; font-size: 0.9rem; font-weight: 500; color: var(--ink); display: inline-block; line-height: 1; }

/* --- Modales --- */
dialog { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 720px; width: min(94vw, 720px); padding: 0; opacity: 0; transform: scale(.95); transition: opacity .2s ease-out, transform .2s ease-out; }
dialog[open] { opacity: 1; transform: scale(1); }
dialog::backdrop { background: rgba(2, 6, 23, 0); backdrop-filter: blur(0px); transition: background .2s ease-out, backdrop-filter .2s ease-out; }
dialog[open]::backdrop { background: rgba(2, 6, 23, .55); backdrop-filter: blur(4px); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.modal-header strong { font-size: 1.1rem; }
.modal-body { padding: 16px; max-height: 70vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid rgba(15, 23, 42, .08); }
.modal-description { margin-top: 0; color: var(--muted); margin-bottom: 24px; }

/* Modal Filtros */
.filtros-container { display: grid; gap: 24px; }
.filtro-categoria-titulo { font-size: 18px; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 23, 42, .08); margin-top: 12px; }
.filtro-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.filtro-item { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(15, 23, 42, .1); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; }
.filtro-item:hover { background-color: var(--bg); border-color: rgba(15, 23, 42, .2); }
.filtro-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); margin-right: 5px; }
.otros-filtros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Modal Galería */
#image-modal { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
#image-modal::backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); }
.image-modal-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
#modal-image { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.modal-close-btn { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; z-index: 10; display: grid; place-items: center; }
.modal-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 30px; cursor: pointer; z-index: 10; display: grid; place-items: center; opacity: 0.7; transition: opacity 0.2s ease; }
.modal-nav-btn:hover{ opacity: 1; }
.modal-nav-btn.prev { left: 20px; } .modal-nav-btn.next { right: 20px; }

/* --- Mapa --- */
#mapa-seccion { display: block !important; width: 100% !important; grid-column: 1 / -1 !important; margin-top: 24px; }
.map-container { border-radius: var(--radius-md); overflow: hidden; margin-top: 10px; margin-bottom: 10px;}
#mapa-seccion .center-container { text-align: center; margin-top: 16px; }
.map-infowindow { max-width: 250px; padding: 8px; font-family: "Inter", sans-serif; text-align: center; }
.infowindow-image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; }
.infowindow-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px 0; color: var(--ink); }
.map-infowindow p { font-size: 13px; color: var(--muted); margin: 0 0 12px 0; }
/* --- Corrección específica para el precio dentro del Mapa --- */
.map-infowindow .price {
    width: auto;           /* Anulamos el 'min-content' de las tarjetas */
    margin-left: 0;        /* Quitamos el empuje a la derecha */
    text-align: center;    /* Centramos el texto */
    white-space: normal;   /* Flujo de texto normal */
    display: block;        /* Aseguramos que ocupe el ancho disponible */
    font-size: 0.9rem;     /* Ajuste de tamaño */
}
.gm-style .adp-directions, .gm-bundled-control, .gmnoprint,
.google-maps-canvas .gm-control-active > img,
.gmnoprint a, .gmnoprint span, .gm-style .gmnoprint,
.gmnoprint div[role="button"] { display: none !important; }

/* --- Grid de Videos --- */
.videos-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.videos-grid iframe, .videos-grid video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   10. PÁGINA DE PLANES Y PRECIOS
   ========================================================================== */
.pricing-header { text-align: center; margin: 40px auto; max-width: 600px; }
.pricing-header h1 { font-size: 2.5rem; margin-bottom: 10px; }
.pricing-header p { font-size: 1.1rem; color: var(--muted); }

/* Toggles */
.pricing-toggle, .pricing-period-toggle { display: flex; justify-content: center; background-color: var(--bg); border-radius: var(--radius-full); padding: 4px; width: fit-content; margin: 0 auto 20px; border: 1px solid rgba(15, 23, 42, .08); }
.tab-btn, .period-btn { border: none; background: transparent; padding: 8px 24px; border-radius: var(--radius-full); cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--muted); transition: all 0.2s ease-in-out; line-height: 1.5; }
.tab-btn.active, .period-btn.active { background-color: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

.pricing-period-selector { text-align: center; margin-bottom: 40px; }
.savings-badge { color: var(--brand); font-weight: 600; margin-bottom: 15px; min-height: 1.2em; opacity: 0; transition: opacity 0.3s ease-in-out; }

/* Planes Grid */
.pricing-container { display: none; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; }
.pricing-container.active { display: grid; }

/* Plan Card */
.plan-card { border: 1px solid rgba(15, 23, 42, .1); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; background-color: var(--card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.plan-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.plan-card.highlight { border-color: var(--brand); border-width: 2px; padding: 29px; }
.plan-header { text-align: left; margin-bottom: 25px; }
.plan-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; }
.plan-price { font-size: 2rem; font-weight: bold; margin-bottom: 5px; }
.plan-price .billing-period { font-size: .8rem; font-weight: normal; color: var(--muted); }
.plan-description { font-size: 0.9rem; color: var(--muted); min-height: 40px; }
.plan-features { list-style: none; padding: 0; margin: 25px 0; flex-grow: 1; }
.plan-features li { display: flex; align-items: center; margin-bottom: 15px; font-size: 0.95rem; }
.plan-features svg { width: 20px; height: 20px; margin-right: 10px; color: var(--brand); }
.btn-choose-plan { width: 100%; margin-top: auto; text-align: center; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
footer { margin-top: 40px; padding-bottom: 20px; border-top: 1px solid rgba(15, 23, 42, .08); padding-top: 20px; }
.footer-container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer-container small { font-size: 0.85rem; }
.icon-attribution { text-align: center; margin-top: 24px; padding: 0 20px; }
.icon-attribution p { font-size: 12px; color: var(--muted); margin: 0; }
.icon-attribution a { color: var(--muted); text-decoration: underline; }
.icon-attribution a:hover { color: var(--brand); }

/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */
.section-divider { border-top: 1px solid rgba(15,23,42,.08); margin-top: 24px; padding-top: 24px; }
.loading-state { text-align: center; padding: 40px; color: var(--muted); }
.mt-10 { margin-top: 10px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.grid-2-col { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
.grid-full-center { grid-column: 1 / -1; text-align: center; }
.justify-end { justify-self: end; }

/* ==========================================================================
   13. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
    /* Grid se mantiene en 2 columnas o pasa a 3 dependiendo de tu preferencia, 
       pero el search bar se centra */
    .search-actions-bar { max-width: 720px; margin-inline: auto; }
    .cta-compacto { display: flex; justify-content: space-between; align-items: center; text-align: left; }
    .cta-compacto p { margin-bottom: 0; }
    .nav button {
        /* Esto elimina el padding y borde base del .btn en el nav de escritorio (Corrección anterior) */
        padding: 0;
        border: none;
    }
}

/* --- Desktop Pequeño (992px+) --- */
@media (min-width: 992px) {
    .grid { grid-template-columns: repeat(3, 1fr); } /* 3 Columnas */
}

/* --- Desktop Grande (1200px+) --- */
@media (min-width: 1200px) {
    .grid { grid-template-columns: repeat(4, 1fr); } /* 4 Columnas */
}

/* --- Móvil / Tablet Pequeña (Max 992px) --- */
@media (max-width: 992px) {
    /* Scroll Horizontal para precios */
    .pricing-container {
        display: none; grid-template-columns: 1fr; 
        overflow-x: auto; padding-bottom: 20px;
        padding-left: 20px; padding-right: 20px; margin-left: -20px; margin-right: -20px;
        -ms-overflow-style: none; scrollbar-width: none;
    }
    .pricing-container::-webkit-scrollbar { display: none; }
    .pricing-container.active { display: flex; }
    .plan-card { flex: 0 0 300px; width: 300px; }
}

/* --- Móvil (Max 768px) --- */
@media (max-width: 768px) {
    /* --- GRID (Mantiene la corrección de 2 columnas que hicimos antes) --- */
    .grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    }
    .card img { height: 140px; }
    .card-body { padding: 10px; }
    .card-title { font-size: 0.85rem; }
    .price { font-size: 0.75rem; }

    
    /* --- NAVEGACIÓN (Header) --- */
    .brand-text { font-weight: 500; font-size: 20px; color: var(--card); }
    .menu-toggle { display: block; color: var(--card); }

    /* .links { display: none !important; } <--- ESTÁ COMENTADO, CORRECTO */
    
    .nav { background: transparent; backdrop-filter: none; border-bottom: none; }
    .nav-inner { background-color: var(--brand-600); border-bottom: 1px solid rgba(15, 23, 42, .06); }
    

    /* --- PANEL LATERAL (EL MENÚ DESPLEGABLE) --- */
    .nav-menu {
        position: fixed; 
        top: 0; 
        right: 0;
        width: 80%; max-width: 300px; height: 100%;
        background-color: var(--card); /* Fondo blanco */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        transform: translateX(100%); 
        padding-top: 80px; 
    }
    .nav-menu.is-open { transform: translateX(0); }
    
    .nav-menu .links {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 0; 
        padding: 0 30px;
    }
    .menu-toggle { display: block; }

    /* --- ESTILO DE LOS ENLACES DEL MENÚ MÓVIL --- */
    
    /* 🚩 CORRECCIÓN CRÍTICA: Aplica el estilo base a todos los <a> para sobrescribir el padding: 0 de escritorio */
    .nav-menu .links a {
        color: var(--ink); /* color de texto oscuro */
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 15px 0; /* APLICA EL ESPACIADO VERTICAL DESEADO */
        font-size: 1.1rem;
        font-weight: 500;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        display: flex; /* Para que 'justify-content' y 'width: 100%' funcionen bien */
        align-items: center; /* Alineación vertical */
        text-decoration: none;
    }

    /* Se aplica el padding y líneas a los botones */
    .nav-menu .links button { 
        color: var(--ink); 
        width: 100%;              /* Ocupar todo el ancho */
        justify-content: flex-start; /* ALINEACIÓN A LA IZQUIERDA */
        text-align: left;         /* ALINEACIÓN DE TEXTO */
        padding: 15px 0;          /* Espaciado vertical generoso como en producción */
        font-size: 1.1rem; 
        font-weight: 500;
        border-bottom: 1px solid rgba(0,0,0,0.03); /* Opcional: línea sutil separadora */
    }

    /* Hover para ambos */
    .nav-menu .links a:hover,
    .nav-menu .links button:hover {
        color: var(--brand); 
        background-color: transparent; 
    }
    
    /* --- Estilos específicos para el enlace complejo (Proveedores) --- */
    .nav-menu .links .nav-link-complex { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        line-height: 1.2;
        /* Aseguramos que el padding vertical sea consistente */
        padding: 15px 0; /* 🚩 CONSISTENCIA: Usamos el mismo padding vertical que los otros links */
    }
    
    /* Subtítulo Menú */
    .nav-link-subtitle { 
        display: block !important; 
        font-size: 0.85rem; 
        font-weight: 400; 
        color: var(--muted); 
        text-transform: none; 
        margin-top: 6px; /* Separación del título */
        white-space: normal; 
    }
    .nav-link-complex .nav-link-title { 
        font-weight: 600; 
        font-size: 1.1rem; 
        color: var(--ink); 
    }

    .amenity-items-grid {
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
    }
    .amenity-item {
        font-size: 12px; /* Reducción de fuente para que quepa en 2 columnas */
    }

    /* --- BÚSQUEDA Y ACCIONES --- */
    .search-actions-bar { flex-direction: column; align-items: stretch; }
    .search-actions-bar .search { grid-template-columns: 1fr; }
    .action-buttons, .action-buttons.horizontal { flex-direction: row; justify-content: space-between; }
    .action-buttons > *, .action-buttons.horizontal > * { flex-grow: 1; text-align: center; }

/* Panel Lateral (Para forzar el stacking SÓLO en móvil) */
    .nav-menu .links .nav-link-complex { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        width: 100%; 
        /* padding: 12px 0; <--- REGLA OBSOLETA/REPETIDA, ELIMINADA */
        text-align: left; 
    }
    
    /* Hacemos visible el subtítulo SÓLO en móvil */
    .nav-link-subtitle { 
        display: block !important; 
        font-size: 0.85rem; 
        font-weight: 400; 
        color: var(--muted); 
        text-transform: none; 
        margin-top: 4px; 
        white-space: normal; 
    }
}