/* ==========================================================================
   1. VARIABLES CSS - SISTEMA DE DISEÑO
   ========================================================================== */
:root {
    --color-mar-profundo: #1E507E;
    --color-cielo: #3388D8;
    --color-brisa: #8EC0EF;
    --color-arena: #FFFAEA;
    --color-sol: #FBD846;
    --color-atardecer: #FF6600;

    --bg-app: var(--color-arena);
    --bg-tarjeta: #FFFFFF;
    --texto-oscuro: var(--color-mar-profundo);
    --texto-claro: #FFFFFF;
    --accion-primaria: var(--color-cielo);
    --accion-destacada: var(--color-atardecer);
    --acento-rating: var(--color-sol);
    --borde-suave: var(--color-brisa);
}

/* ==========================================================================
   2. ESTILOS BASE
   ========================================================================== */
body {
    background-color: var(--bg-app);
    color: var(--texto-oscuro);
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px; 
}

h1, h2, h3, h4 { color: var(--color-mar-profundo); margin-top: 0; }

/* ==========================================================================
   3. BARRA DE NAVEGACIÓN INFERIOR (APP BOTTOM NAV)
   ========================================================================== */
.app-bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background-color: var(--bg-tarjeta);
    display: flex; justify-content: space-around; align-items: center;
    padding: 12px 0; box-shadow: 0 -4px 20px rgba(30, 80, 126, 0.08); z-index: 1000;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.app-bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--borde-suave); font-size: 11px; font-weight: 500; transition: all 0.3s ease; }
.app-bottom-nav .nav-item .icon { font-size: 22px; margin-bottom: 4px; transition: transform 0.2s ease; }
.app-bottom-nav .nav-item.active, .app-bottom-nav .nav-item:hover { color: var(--accion-primaria); }
.app-bottom-nav .nav-item:active .icon { transform: scale(0.9); }
@media (min-width: 768px) { .app-bottom-nav { display: none; } body { padding-bottom: 0; } }

/* ==========================================================================
   4. ESTRUCTURA Y TARJETAS (CARDS UI)
   ========================================================================== */
.contenedor-app { padding: 20px; max-width: 1200px; margin: 0 auto; }
.seccion-titulo { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.tarjeta-lugar { background-color: var(--bg-tarjeta); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(30, 80, 126, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tarjeta-lugar:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(30, 80, 126, 0.12); }
.tarjeta-imagen { position: relative; height: 180px; }
.tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 12px; left: 12px; background-color: var(--color-cielo); color: var(--texto-claro); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; z-index: 10; }
.badge.gastronomia { background-color: var(--color-atardecer); }
.tarjeta-info { padding: 16px; }
.tarjeta-info h3 { font-size: 18px; margin: 0 0 6px 0; }
.ubicacion { color: var(--borde-suave); font-size: 13px; margin: 0 0 16px 0; }
.tarjeta-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(142, 192, 239, 0.2); padding-top: 12px; }
.rating { font-weight: 600; color: var(--texto-oscuro); font-size: 14px; }
.btn-accion { background-color: var(--color-cielo); color: var(--texto-claro); text-decoration: none; padding: 6px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: background-color 0.2s; }
.btn-accion:hover { background-color: var(--color-mar-profundo); }

/* ==========================================================================
   5. CABECERA SUPERIOR (HEADER) Y NAVEGACIÓN
   ========================================================================== */
.site-header { background-color: var(--color-mar-profundo); padding: 16px 20px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.header-contenedor { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.site-branding .logo-enlace { text-decoration: none; }
.site-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--color-arena); letter-spacing: 0.5px; }
.custom-logo-link img { max-height: 48px; width: auto; display: block; transition: opacity 0.2s ease; }
.custom-logo-link:hover img { opacity: 0.85; }
.main-navigation { display: flex; align-items: center; }
.menu-dinamico { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.menu-dinamico li a { text-decoration: none; color: var(--color-arena); font-weight: 500; font-size: 15px; transition: color 0.2s ease; }
.menu-dinamico li a:hover { color: var(--color-sol); }
@media (max-width: 767px) { .main-navigation { display: none; } .header-contenedor { justify-content: center; } }

/* ==========================================================================
   6. PÁGINA DE INICIO (FRONT-PAGE) - EMBUDO TURÍSTICO
   ========================================================================== */
.hero-section { position: relative; height: 80vh; min-height: 500px; background-image: url('https://images.unsplash.com/photo-1498623116890-37e912163d5d?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-mar-profundo); opacity: 0.65; z-index: 1; }
.hero-contenido { position: relative; z-index: 2; max-width: 800px; color: var(--texto-claro); }
.hero-contenido h2 { color: var(--texto-claro); font-size: 36px; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
.hero-contenido p { font-size: 18px; margin-bottom: 30px; line-height: 1.6; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.btn-cta, .btn-suscribir { display: inline-block; background-color: var(--accion-destacada); color: var(--texto-claro); text-decoration: none; padding: 14px 32px; border-radius: 30px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: transform 0.2s, background-color 0.2s; border: none; cursor: pointer; }
.btn-cta:hover, .btn-suscribir:hover { background-color: #e65c00; transform: translateY(-2px); }
.bloque-accesos, .bloque-pilares, .bloque-dinamico, .bloque-compromiso, .bloque-suscripcion { margin-bottom: 70px; padding-top: 20px; }
.texto-centrado { text-align: center; }
.seccion-bajada { color: var(--color-mar-profundo); font-size: 16px; margin-bottom: 30px; }
.bloque-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: -60px; position: relative; z-index: 3; }
.acceso-tarjeta { background-color: var(--bg-tarjeta); padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(30, 80, 126, 0.1); text-align: center; border-bottom: 4px solid var(--accion-primaria); }
.acceso-icono { font-size: 40px; display: block; margin-bottom: 15px; }
.enlace-acceso { display: inline-block; margin-top: 15px; color: var(--accion-primaria); font-weight: 600; text-decoration: none; }
.bloque-pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pilar { background-color: var(--bg-tarjeta); padding: 40px 30px; border-radius: 16px; text-align: center; border: 1px solid var(--borde-suave); }
.pilar h3 { color: var(--color-mar-profundo); }
.grid-compromisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; }
.compromiso-item { text-align: center; padding: 20px; }
.compromiso-icono { font-size: 36px; display: block; background-color: var(--borde-suave); width: 80px; height: 80px; line-height: 80px; border-radius: 50%; margin: 0 auto 20px; }
.compromiso-item h4 { color: var(--color-mar-profundo); margin-bottom: 10px; }
.compromiso-item p { font-size: 14px; line-height: 1.6; }
.suscripcion-caja { background-color: var(--color-mar-profundo); color: var(--texto-claro); padding: 50px 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.suscripcion-caja h2 { color: var(--texto-claro); }
.suscripcion-caja p { max-width: 600px; margin: 0 auto 30px; color: var(--color-arena); }
.formulario-lead { display: flex; flex-direction: column; gap: 15px; max-width: 500px; margin: 0 auto; }
.input-suscripcion { padding: 15px 20px; border-radius: 30px; border: none; font-size: 16px; outline: none; }
@media (min-width: 768px) { .formulario-lead { flex-direction: row; } .input-suscripcion { flex: 1; } .hero-contenido h2 { font-size: 54px; } }

/* ==========================================================================
   7. VISTA INDIVIDUAL DE COMERCIOS (SINGLE CPT)
   ========================================================================== */
.comercio-hero { position: relative; height: 50vh; min-height: 350px; display: flex; align-items: flex-end; padding: 30px 20px; }
.img-fondo-comercio { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.comercio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(30, 80, 126, 0.9) 0%, rgba(30, 80, 126, 0) 100%); z-index: 2; }
.comercio-titulo-caja { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; width: 100%; }
.comercio-titulo-principal { color: var(--texto-claro); font-size: 32px; font-weight: 800; margin: 10px 0 0 0; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.badge.local-verificado { background-color: var(--color-sol); color: var(--color-mar-profundo); }
.cuerpo-comercio { display: grid; grid-template-columns: 1fr; gap: 30px; padding-top: 30px; }
@media (min-width: 992px) { .cuerpo-comercio { grid-template-columns: 2fr 1fr; align-items: start; } }
.meta-datos { display: flex; gap: 15px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--borde-suave); }
.meta-item { font-size: 14px; font-weight: 600; color: var(--color-mar-profundo); background-color: rgba(142, 192, 239, 0.2); padding: 6px 12px; border-radius: 20px; }
.descripcion-contenido { font-size: 16px; line-height: 1.8; color: #444; }
.descripcion-contenido p { margin-bottom: 20px; }
.caja-contacto { background-color: var(--bg-tarjeta); padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(30, 80, 126, 0.08); position: sticky; top: 100px; text-align: center; }
.caja-contacto h3 { margin-bottom: 10px; }
.caja-contacto p { font-size: 14px; color: var(--borde-suave); margin-bottom: 25px; }
.btn-accion-primaria, .btn-accion-secundaria { display: block; width: 100%; padding: 14px; border-radius: 10px; font-weight: 700; text-decoration: none; margin-bottom: 12px; transition: all 0.2s ease; box-sizing: border-box; }
.btn-accion-primaria { background-color: var(--accion-destacada); color: var(--texto-claro); }
.btn-accion-primaria:hover { background-color: #e65c00; transform: translateY(-2px); }
.btn-accion-secundaria { background-color: var(--color-arena); color: var(--color-mar-profundo); border: 2px solid var(--color-mar-profundo); }
.btn-accion-secundaria:hover { background-color: var(--color-mar-profundo); color: var(--texto-claro); }

/* ==========================================================================
   8. DIRECTORIO Y ARCHIVO (ARCHIVE CPT)
   ========================================================================== */
.directorio-cabecera { background-color: var(--color-mar-profundo); color: var(--texto-claro); padding: 40px 20px; text-align: center; margin-bottom: 30px; }
.titulo-directorio { color: var(--texto-claro); font-size: 32px; margin-bottom: 10px; }
.bajada-directorio { color: var(--color-arena); font-size: 16px; max-width: 600px; margin: 0 auto; }
.filtros-categorias { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; justify-content: center; }
.btn-filtro { background-color: var(--bg-tarjeta); color: var(--color-mar-profundo); padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid var(--borde-suave); transition: all 0.2s ease; }
.btn-filtro:hover, .btn-filtro.activo { background-color: var(--accion-primaria); color: var(--texto-claro); border-color: var(--accion-primaria); }
.paginacion-directorio { margin-top: 40px; text-align: center; width: 100%; grid-column: 1 / -1; }
.paginacion-directorio .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 4px; background-color: var(--bg-tarjeta); color: var(--color-mar-profundo); border-radius: 8px; text-decoration: none; font-weight: 600; }
.paginacion-directorio .page-numbers.current { background-color: var(--accion-destacada); color: var(--texto-claro); }

/* ==========================================================================
   9. NUEVO DISEÑO DE TARJETAS DE COMERCIOS (ESTILO MOCKUP)
   ========================================================================== */
.tarjeta-lugar-pro { background-color: var(--bg-tarjeta); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(30, 80, 126, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; position: relative; border: 1px solid rgba(142, 192, 239, 0.2); }
.tarjeta-lugar-pro:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(30, 80, 126, 0.15); }
.tarjeta-hero-img { height: 160px; width: 100%; overflow: hidden; }
.tarjeta-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-cuerpo { padding: 15px 20px 20px 20px; display: flex; flex-direction: column; position: relative; }
.tarjeta-avatar { width: 65px; height: 65px; border-radius: 50%; overflow: hidden; border: 3px solid #FFFFFF; box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin-top: -45px; background-color: #FFFFFF; position: relative; z-index: 2; margin-bottom: 10px; }
.tarjeta-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; background: #fff; }
.tarjeta-titulo { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; }
.tarjeta-titulo a { text-decoration: none; color: var(--color-mar-profundo); transition: color 0.2s; }
.tarjeta-titulo a:hover { color: var(--color-cielo); }
.tarjeta-cat-contenedor { margin-bottom: 10px; }
.badge-pro { display: inline-block; background-color: rgba(51, 136, 216, 0.12); color: var(--color-cielo); padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.tarjeta-extracto { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 20px; min-height: 42px; }
.tarjeta-botones-accion { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.btn-card-mapa { display: block; width: 100%; background-color: #F0F2F5; color: #333333; text-align: center; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 0.2s; box-sizing: border-box; }
.btn-card-mapa:hover { background-color: #E4E6EB; }
.btn-card-whatsapp { display: block; width: 100%; background-color: #25D366; color: #FFFFFF; text-align: center; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 0.2s, transform 0.1s; box-sizing: border-box; }
.btn-card-whatsapp:hover { background-color: #20ba5a; }

/* ==========================================================================
   10. CARRUSELES HORIZONTALES (ESTILO NETFLIX / SCROLL SNAP)
   ========================================================================== */
.bloque-carrusel { margin-bottom: 50px; }
.cabecera-carrusel { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; padding-right: 10px; }
.titulo-carrusel { font-size: 22px; margin: 0; color: var(--color-mar-profundo); }
.enlace-ver-mas { font-size: 14px; color: var(--accion-primaria); text-decoration: none; font-weight: 600; }
.carrusel-fila { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carrusel-fila::-webkit-scrollbar { display: none; }
.carrusel-item { flex: 0 0 85%; max-width: 320px; scroll-snap-align: center; }
@media (min-width: 768px) { .carrusel-item { flex: 0 0 320px; scroll-snap-align: start; } }

/* ==========================================================================
   11. ATRIBUTOS Y FACILIDADES (PERFIL DEL COMERCIO)
   ========================================================================== */
.grid-atributos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 30px; }
.pildora-atributo { background-color: #F0F6FC; color: var(--color-mar-profundo); padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; display: flex; align-items: center; border: 1px solid rgba(142, 192, 239, 0.3); transition: transform 0.2s ease; }
.pildora-atributo:hover { transform: translateY(-2px); background-color: rgba(142, 192, 239, 0.2); }

/* ==========================================================================
   12. NUEVO FOOTER PROFESIONAL (FAT FOOTER)
   ========================================================================== */
.site-footer-pro { background-color: var(--color-mar-profundo); color: var(--color-arena); padding: 60px 0 20px 0; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 60px; } }
.footer-titulo { color: #FFFFFF; font-size: 20px; margin-bottom: 20px; font-weight: 700; }
.footer-texto { color: var(--color-brisa); font-size: 15px; line-height: 1.6; }
.footer-lista { list-style: none; padding: 0; margin: 0; }
.footer-lista li { margin-bottom: 12px; }
.footer-lista li a { color: var(--color-brisa); text-decoration: none; transition: color 0.2s; font-size: 15px; display: inline-block; }
.footer-lista li a:hover { color: var(--color-sol); transform: translateX(5px); }
.footer-bottom-bar { border-top: 1px solid rgba(142, 192, 239, 0.2); padding-top: 25px; text-align: center; font-size: 14px; color: var(--color-brisa); }