/* ============================================================
   style.css — Estilos personalizados de Vicky Pulgarín Catering
   Complementa y sobreescribe Bootstrap 5.3.2.
   Tipografías cargadas en header.php vía Google Fonts CDN:
     · Playfair Display → títulos elegantes (.font-playfair)
     · Lato             → cuerpo de texto limpio (.font-lato)
   ============================================================ */


/* ─── VARIABLES GLOBALES ──────────────────────────────────────
   Definidas en :root para usarlas en todo el CSS con var(--nombre).
   Cambiar aquí afecta automáticamente a todos los elementos que
   las usen, sin necesidad de buscarlas por todo el archivo.
   ─────────────────────────────────────────────────────────── */
:root {
    --color-primary:   #2c3e2f;  /* Verde oscuro — botones principales, títulos */
    --color-secondary: #c2aa84;  /* Dorado/arena — separadores, bordes decorativos */
    --color-dark:      #1a1a1a;  /* Negro suave  — fondo oscuro, texto cuerpo */
    --color-light:     #f9f9f9;  /* Blanco roto  — fondo general de la página */
}


/* ─── BASE ────────────────────────────────────────────────────
   Lato como fuente por defecto en todo el body.
   --color-light como fondo evita el blanco puro, más suave para
   fondos de secciones y texto.
   ─────────────────────────────────────────────────────────── */
body {
    font-family: 'Lato', sans-serif;
    color: var(--color-dark);
    background-color: var(--color-light);
}


/* ─── UTILIDADES TIPOGRÁFICAS ─────────────────────────────────
   Clases auxiliares reutilizables en cualquier elemento HTML.
   ─────────────────────────────────────────────────────────── */
.font-playfair  { font-family: 'Playfair Display', serif; }
.font-lato      { font-family: 'Lato', sans-serif; }
.font-sm        { font-size: 0.85rem; }           /* Texto pequeño: copyright, etiquetas */
.tracking-widest { letter-spacing: 0.15em; }      /* Espaciado amplio: botones, títulos uppercase */


/* ─── UTILIDADES DE LAYOUT ────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
.section-padding    { padding: 100px 0; }                          /* Espaciado vertical estándar entre secciones */
.bg-dark-section    { background-color: var(--color-dark); color: #fff; } /* Bloque de fondo oscuro con texto blanco */
.bg-light-alternate { background-color: #f4f4f4; }                 /* Gris claro para alternar el fondo de secciones */


/* ─── TÍTULOS Y SEPARADORES ───────────────────────────────────
   ─────────────────────────────────────────────────────────── */
/* Título de sección principal: Playfair Display en verde oscuro */
.section-title {
    font-size: 2.5rem;
    color: var(--color-primary);
}

/* Línea decorativa dorada de 60px que se coloca debajo de los títulos */
.title-separator {
    width: 60px;
    height: 2px;
    background-color: var(--color-secondary);
    margin: 20px 0;
}

/* El texto del hero siempre es blanco, independientemente del fondo */
.hero-section h1 {
    color: #fff;
}


/* ─── NAVBAR — ESTADO INICIAL (ARRIBA DE LA PÁGINA) ──────────
   Fondo oscuro semi-transparente con efecto blur (backdrop-filter).
   Al hacer scroll, main.js añade la clase .scrolled (ver más abajo).
   La transición de 0.4s suaviza el cambio entre ambos estados.
   ─────────────────────────────────────────────────────────── */
.navbar {
    transition: all 0.4s ease-in-out;
    padding: 30px 0; /* Aumentado para dar aire al nuevo logo de 65px */
    background-color: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px); /* Desenfoque del contenido detrás de la navbar */
}

/* Nombre del negocio (logo): blanco y en mayúsculas con espaciado */
.navbar-brand {
    font-weight: 600;
    letter-spacing: 2px;
    color: #ffffff !important; /* !important necesario para sobreescribir Bootstrap */
    transition: color 0.4s ease;
}

/* Enlaces de navegación: texto blanco en el estado oscuro inicial */
.nav-link {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff !important; /* !important necesario para sobreescribir Bootstrap */
    transition: color 0.4s ease;
}

/* Botón "Contacto": diferenciado con borde dorado en estado oscuro */
.navbar .btn-contacto {
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary) !important;
    border-radius: 0;             /* Sin redondeo: estética más sobria */
    transition: all 0.4s ease;
}

/* Botón hamburguesa (móvil) en estado oscuro: borde blanco translúcido */
.navbar-toggler       { border-color: rgba(255, 255, 255, 0.2) !important; }
/* filter: invert(1) convierte el icono SVG negro en blanco sobre fondo oscuro */
.navbar-toggler-icon  { filter: invert(1); }


/* ─── NAVBAR — ESTADO CON SCROLL (.scrolled) ─────────────────
   main.js añade esta clase cuando el scroll supera 50px.
   La navbar pasa de oscura a blanca con sombra y padding reducido.
   ─────────────────────────────────────────────────────────── */
.navbar.scrolled {
    background-color: #ffffff;
    padding: 12px 0;                              /* Padding reducido: navbar más compacta */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);  /* Sombra sutil que separa del contenido */
}

/* Texto oscuro en la navbar blanca */
.navbar.scrolled .navbar-brand,
.navbar.scrolled .nav-link {
    color: var(--color-dark) !important;
}

/* Botón "Contacto" con borde verde al hacer scroll */
.navbar.scrolled .btn-contacto {
    color: var(--color-primary) !important;
    border-color: var(--color-primary);
}

/* Hover del botón "Contacto" con scroll: se rellena de verde */
.navbar.scrolled .btn-contacto:hover {
    background-color: var(--color-primary);
    color: #ffffff !important;
}

/* Botón hamburguesa (móvil) en estado blanco: borde oscuro translúcido */
.navbar.scrolled .navbar-toggler       { border-color: rgba(0, 0, 0, 0.1) !important; }
/* filter: invert(0) restaura el icono SVG a negro sobre fondo blanco */
.navbar.scrolled .navbar-toggler-icon  { filter: invert(0); }


/* ─── HERO PORTADA (.hero-section) ───────────────────────────
   Hero fullscreen de la página de inicio (index.php).
   El fondo (imagen Unsplash + gradiente oscuro) está hardcodeado
   aquí en CSS, no como atributo inline en el HTML.
   padding-top: 100px compensa la navbar fija para que el contenido
   no quede tapado por ella.
   ─────────────────────────────────────────────────────────── */
.hero-section {
    height: 100vh;
    background: linear-gradient(rgba(26, 26, 26, 0.3), rgba(26, 26, 26, 0.3)), url('../img/portada_color.webp') center/cover no-repeat;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 100px !important;
}


/* ─── HERO PÁGINAS INTERNAS (.hero-internal) ─────────────────
   Hero de menor altura (60vh) para nosotros, gastronomía,
   espacios y contacto. El fondo (imagen + gradiente) se pasa
   como atributo style inline en cada página, lo que permite
   una imagen diferente por página sin tocar este CSS.
   padding-top: 80px compensa la navbar fija.
   ─────────────────────────────────────────────────────────── */
.hero-internal {
    height: 60vh;
    min-height: 400px;       /* Evita que sea demasiado pequeño en pantallas muy bajas */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    position: relative;
    background-size: cover !important;    /* !important asegura que el inline style funcione */
    background-position: center !important;
}


/* ─── LEGACY: PAGE-WRAPPER ────────────────────────────────────
   Clase antigua, sustituida por .hero-internal en todas las páginas
   actuales. Se conserva para no romper código que pudiera referenciarla.
   ─────────────────────────────────────────────────────────── */
.page-wrapper {
    padding-top: 130px !important;
    min-height: 80vh;
}


/* ─── SECCIONES TEASER (portada) ─────────────────────────────
   Bloques alternados de la portada (imagen + texto).
   .bg-light-alternate se aplica a las secciones de fondo gris.
   ─────────────────────────────────────────────────────────── */
.teaser-section { padding: 100px 0; }


/* ─── BOTONES ─────────────────────────────────────────────────
   .btn-primary-custom  — botón sólido verde oscuro (acción principal)
   .btn-outline-primary — botón con borde verde oscuro (acción secundaria)
   border-radius: 0 se aplica inline en el HTML para mantener
   la estética sobria; no está en estas reglas por diseño.
   ─────────────────────────────────────────────────────────── */
.btn-outline-primary {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: white;
}
.btn-primary-custom {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: white;
}
.btn-primary-custom:hover {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: white;
}


/* ─── TARJETAS DE SERVICIO (.service-card) ────────────────────
   Tarjetas usadas en espacios.php para listar los servicios.
   El borde superior dorado es el detalle visual diferenciador.
   height: 100% permite que todas las tarjetas de una fila
   tengan la misma altura (requiere d-flex en el col).
   ─────────────────────────────────────────────────────────── */
.service-card {
    padding: 30px;
    background: #fff;
    height: 100%;
    border-top: 3px solid var(--color-secondary);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
}
/* Título de cada tarjeta en Playfair Display verde */
.service-card h4 {
    color: var(--color-primary);
    font-family: 'Playfair Display', serif;
}


/* ─── BADGES DE FINCAS (.finca-badge) ────────────────────────
   Pills usados en espacios.php para el listado de fincas.
   Borde dorado con fondo transparente para un look discreto.
   ─────────────────────────────────────────────────────────── */
.finca-badge {
    border: 1px solid var(--color-secondary);
    color: var(--color-dark);
    padding: 8px 15px;
    border-radius: 30px;      /* Forma de píldora */
    font-size: 0.9rem;
    display: inline-block;
    margin: 5px;
    background: transparent;
}


/* ─── IMÁGENES GIGANTES Y PARALLAX ───────────────────────────
   .parallax-break: franja fotográfica de borde a borde (full-bleed)
   con efecto parallax. La imagen queda fija mientras la página
   se desplaza (background-attachment: fixed).
   Se combina con container-fluid px-0 en el HTML para eliminar
   los márgenes laterales de Bootstrap y ocupar el 100% del ancho.

   .parallax-overlay: capa semitransparente sobre .parallax-break
   para oscurecer levemente la imagen y aportar elegancia.

   .img-full-width: imagen estática full-bleed (sin parallax),
   usada en mosaicos de fotos. object-fit: cover evita deformación.
   ─────────────────────────────────────────────────────────── */
.parallax-break {
    background-attachment: fixed;      /* La imagen queda fija al hacer scroll (efecto parallax) */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh;                      /* 70% de la altura de la ventana */
    width: 100%;
    position: relative;                /* Necesario para que .parallax-overlay se posicione dentro */
}

.parallax-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2);   /* Oscurecimiento sutil para elegancia */
}

.img-full-width {
    width: 100%;
    height: 600px;
    object-fit: cover;                 /* Recorta sin deformar la imagen al tamaño fijo */
}


/* ─── TEASER GASTRONOMÍA — PARALLAX CON FOTO LOCAL ──────────
   background-attachment: fixed crea el efecto parallax en desktop
   y navegadores de escritorio modernos.
   En dispositivos táctiles (iOS/Android), fixed no está soportado:
   @media (hover: none) lo degrada a scroll estático para evitar
   el bug de fondo congelado en Safari/iOS.
   ─────────────────────────────────────────────────────────── */
.gastro-parallax {
    background-image: linear-gradient(rgba(26, 26, 26, 0.75), rgba(26, 26, 26, 0.75)),
                      url('../img/nuestra-gastronomia.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

@media (hover: none) {
    .gastro-parallax {
        background-attachment: scroll;
    }
}


/* ─── BLOG Y TARJETAS DE PUBLICACIÓN ─────────────────────────
   .blog-card: tarjeta con hover de elevación y zoom en imagen.
   .blog-image-wrapper: recuadro de altura fija para uniformidad.
   .blog-category-badge: etiqueta de categoría sobre la imagen.
   .filter-btn: botones de filtro por categoría en el listing.
   ─────────────────────────────────────────────────────────── */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
    height: 100%;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.blog-image-wrapper {
    height: 240px;
    overflow: hidden;
    position: relative;
}
.blog-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-card:hover .blog-image-wrapper img {
    transform: scale(1.05);
}
.blog-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--color-primary);
    color: white;
    font-size: 0.75rem;
    padding: 5px 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10; /* Mantiene la cajita siempre por encima de la imagen */
}
.filter-btn {
    border: 1px solid #ddd;
    color: var(--color-dark);
    padding: 8px 20px;
    background: transparent;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}
.filter-btn.active, .filter-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* --- LOGO DINÁMICO EN EL NAVBAR --- */
.navbar .logo-dark {
    display: none;
}
.navbar .logo-white {
    display: block;
    transition: opacity 0.3s ease;
}

.navbar.scrolled .logo-dark {
    display: block;
}
.navbar.scrolled .logo-white {
    display: none;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- EFECTO FADE-UP ANIMADO AL HACER SCROLL --- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }