/* ==========================================================
MAIN.CSS — El Núcleo del Frontend (Arquitectura v2)
==========================================================
Este archivo es la FUSIÓN de:
1. base.css (Variables, Resets, Tipografía)
2. layout.css (Header, Footer, Grids de Detalle)
3. components.css (Cards, Botones, Lightbox, Sidebar)
Estos estilos son GLOBALES y se aplican a todo el sitio.
========================================================== */
/* ==========================================================
INICIO: Contenido de 01-base.css
========================================================== */
:root {
/* Paleta */
--color-bg-main: #0f172a;
--color-bg-section: #1e253a;
--color-accent: #d6a354;
--color-text-main: #f8fafc;
--color-text-dim: #cbd5e1;
--color-success: #4ade80;
--color-error: #ef4444;
/* Geometría */
--radius-card: 0.75rem; /* Reducido para un look más "pro" */
--radius-pill: 999px;
--shadow-card: 0 10px 20px rgba(0, 0, 0, 0.4);
/* Z-Index Corrección: Header > Leaflet (1000) */
--z-header: 1100; /* Antes 100 */
--z-lightbox: 9999;
}
/* --- Resets y Box-Sizing --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%; /* 16px base */
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--color-bg-main);
color: var(--color-text-dim);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* --- Tipografía Base --- */
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
color: var(--color-text-main);
font-weight: 600;
line-height: 1.2;
}
/* --- Tipografía Fluida (Responsiva) --- */
h1 { font-size: clamp(1.8rem, 1.6rem + 1vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem); }
h3 { font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.2rem); }
p, li, a, span {
font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
text-decoration: underline;
color: var(--color-accent); /* Asegurar color en hover */
}
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
/* --- Contenedor Principal --- */
.container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.muted {
color: var(--color-text-dim);
font-style: italic;
font-size: 0.9rem;
}
/* --- Utilidad: Ocultar scroll si modal abierto (Para lightbox) --- */
body.modal-open {
overflow: hidden;
}
/* ==========================================================
FIN: Contenido de 01-base.css
========================================================== */
/* ==========================================================
INICIO: Contenido de 02-layout.css
========================================================== */
/* -------------------- HEADER -------------------- */
.main-header {
background: var(--color-bg-section);
border-bottom: 1px solid var(--color-border-dim);
position: sticky;
top: 0;
z-index: var(--z-header);
display: flex;
align-items: center;
/* Altura controlada por --header-height inline */
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.header-logo {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--color-accent);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
line-height: 1.2;
}
.header-logo img {
width: auto;
object-fit: contain;
border-radius: 0%;
background: rgba(255, 255, 255, 0);
/* Altura controlada por --logo-height inline */
}
.header-logo span.wrap-title {
max-width: 180px;
line-height: 1.3;
display: block;
}
.main-nav {
display: flex;
gap: 1.5rem;
}
.main-nav a {
color: var(--color-text-dim);
font-weight: 500;
padding: 0.5rem 0;
}
.main-nav a:hover {
color: var(--color-accent);
text-decoration: none;
}
.header-right {
display: flex;
align-items: center;
gap: 1rem;
}
.header-search {
display: flex;
border: 1px solid var(--color-border-dim); /* Ajustado a variable */
border-radius: var(--radius-pill);
overflow: hidden;
}
.header-search input {
background: transparent;
border: none;
color: var(--color-text-main);
outline: none;
font-size: 0.9rem;
box-sizing: border-box; /* Añadido */
/* width y padding-top/bottom controlados por inline styles */
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.header-search button {
background: transparent;
border: none;
color: var(--color-accent);
padding: 0 0.8rem;
cursor: pointer;
}
/* --- BOTÓN DE ADMINISTRACIÓN (btn-admin-link) --- */
.btn-admin-link {
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.25s ease;
background: var(--color-accent);
color: var(--color-bg-main);
border: 1px solid var(--color-accent);
border-radius: var(--radius-pill);
white-space: nowrap;
/* padding-top/bottom controlado por inline styles */
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-left: 0.8rem;
padding-right: 0.8rem;
}
.btn-admin-link:hover {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
text-decoration: none;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--color-accent);
font-size: 1.5rem;
cursor: pointer;
}
/* --- Responsividad Header --- */
@media (max-width: 900px) {
/* 1. Ocultamos la navegación de escritorio y el buscador */
.main-nav { display: none; }
.header-search { display: none; }
/* 2. Mostramos el botón de hamburguesa */
.mobile-menu-toggle { display: block; }
/* * 3. (CORRECCIÓN AÑADIDA)
* Estilos para el menú cuando está en modo móvil (oculto)
*/
.main-nav {
/* Posicionamiento del menú desplegable */
position: absolute;
top: 100%; /* Se coloca justo debajo del header */
left: 0;
right: 0;
/* Estilos visuales del contenedor */
background: var(--color-bg-section);
border-top: 1px solid var(--color-border-dim);
box-shadow: 0 8px 15px rgba(0,0,0,0.3);
/* Apila los enlaces en vertical */
flex-direction: column;
padding: 0.5rem 0;
gap: 0; /* Reseteamos el gap de escritorio */
}
/* * 4. (LA REGLA CLAVE QUE FALTABA)
* Esta regla anula el 'display: none' cuando main.js
* añade la clase '.is-active'
*/
.main-nav.is-active {
display: flex;
}
/* * 5. (CORRECCIÓN AÑADIDA)
* Estilos para los enlaces dentro del menú móvil
*/
.main-nav a {
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--color-border-dim);
}
.main-nav a:last-child {
border-bottom: none;
}
}
@media (max-width: 480px) {
.header-logo span { display: none; }
}
/* -------------------- FOOTER -------------------- */
.main-footer {
background: var(--color-bg-section);
color: var(--color-text-dim);
padding-top: 3rem;
margin-top: 3rem;
border-top: 1px solid var(--color-border-dim);
font-size: 0.9rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2rem;
}
.footer-col h4 {
color: var(--color-accent);
margin-bottom: 1rem;
font-size: 1rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0;
}
.footer-col a {
color: var(--color-text-dim);
font-size: 0.9rem;
}
.footer-col a:hover {
color: var(--color-accent);
}
.footer-brand p {
font-size: 0.9rem;
line-height: 1.6;
margin-top: 1rem;
}
.footer-contact p {
margin-bottom: 0.5rem;
line-height: 1.5;
}
/* --- Financiación y Logos --- */
.footer-financing {
background: var(--color-bg-main);
padding: 1.5rem 0;
margin-top: 2.5rem;
border-top: 1px solid var(--color-border-dim);
}
.footer-financing h4 {
color: var(--color-text-dim);
font-size: 0.8rem;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
}
.footer-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
.footer-logos img {
max-height: 50px;
width: auto;
object-fit: contain;
opacity: 0.8;
transition: opacity 0.25s ease;
border-radius: 0;
}
.footer-logos img:hover {
opacity: 1;
}
/* --- Copyright --- */
.footer-bottom {
border-top: 1px solid var(--color-border-dim);
padding: 1.5rem 0;
text-align: center;
font-size: 0.8rem;
color: var(--color-text-dim);
}
/* --- Responsividad Footer --- */
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-logos {
gap: 1.5rem;
}
.footer-logos img {
max-height: 40px;
}
}
/* -------------------- LAYOUTS DE CUADRÍCULA (DETALLE) -------------------- */
/*
* Estos son layouts comunes usados en varias páginas de detalle
* (producto.php, receta.php, productor.php, etc.)
*/
.descripcion-dos-columnas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.descripcion-dos-columnas .columna-texto p {
color: var(--color-text-main);
line-height: 1.6;
font-size: 1rem;
margin-bottom: 1rem;
}
.descripcion-dos-columnas .columna-imagen img {
width: 100%;
height: 350px;
border-radius: var(--radius-card);
object-fit: cover;
max-height: 350px;
box-shadow: var(--shadow-card);
}
.detalle-grid-mapa {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.columna-mapa {
width: 100%;
min-height: 350px;
}
#gmap-container {
width: 100%;
height: 100%;
min-height: 350px;
border-radius: var(--radius-card);
background: var(--color-bg-section);
}
/* --- Responsividad de Layouts --- */
@media (max-width: 900px) {
.descripcion-dos-columnas,
.detalle-grid-mapa {
grid-template-columns: 1fr;
}
.descripcion-dos-columnas .columna-imagen {
order: -1;
}
}
/* ==========================================================
FIN: Contenido de 02-layout.css
========================================================== */
/* ==========================================================
INICIO: Contenido de 03-components.css
========================================================== */
/* -------------------- BOTONES PRINCIPALES (CTAs en Hero de Index) -------------------- */
.btn {
/* Estilo base para todos los botones principales */
padding: 0.8rem 1.5rem;
border-radius: var(--radius-pill);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.25s ease;
}
/* --- BOTÓN PRIMARIO (Amarillo Sólido a Transparente con Borde Amarillo) --- */
.btn-primary {
/* Estado Normal: Fondo Dorado, Texto Oscuro, Borde Dorado */
background: var(--color-accent);
color: var(--color-bg-main);
border: 1px solid var(--color-accent);
}
.btn-primary:hover {
/* Inversión: Fondo Transparente, Texto Dorado, Borde Dorado */
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(214, 163, 84, 0.2);
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
text-decoration: none; /* Evita el subrayado genérico de */
}
/* --- BOTÓN OUTLINE (Transparente con Borde DIM a Fondo DIM Sólido) --- */
.btn-outline {
/* Estado Normal: Fondo Transparente, Texto Tono Oscuro/Dim, Borde Tono Oscuro/Dim */
background: transparent;
color: var(--color-text-dim);
border: 1px solid var(--color-text-dim);
}
.btn-outline:hover {
/* Inversión: Fondo Sólido DIM/Blanco, Texto Azul Oscuro */
background: var(--color-text-dim);
color: var(--color-bg-main); /* Texto cambia a color del fondo principal (azul oscuro) */
border-color: var(--color-text-dim);
text-decoration: none; /* Evita el subrayado genérico de */
}
/* -------------------- GRIDS Y CARDS DE LISTADO (Común a Producto, Productor, Restaurante) -------------------- */
.card-grid {
/* Layout de rejilla para listados (Utiliza 'auto-fit' para ser responsiva) */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
/* --- Tarjeta Genérica --- */
.item-card {
background-color: var(--color-bg-section);
border-radius: var(--radius-card);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.item-card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 60px rgb(0 0 0 / 0.7);
border-color: var(--color-accent);
}
.item-card-image {
height: 180px;
background-size: cover;
background-position: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.item-card-tag {
/* Etiqueta de la tarjeta (e.g., "Producto Destacado") */
position: absolute;
top: 1rem;
left: 1rem;
padding: .3rem .7rem;
border-radius: var(--radius-pill);
font-size: .8rem;
font-weight: 600;
color: var(--color-bg-main);
background-color: var(--color-accent);
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.item-card-content {
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem 1.25rem 1.25rem;
flex-grow: 1;
}
.item-card-content strong a {
color: var(--color-accent);
font-size: 1.1rem;
font-weight: 600;
}
.item-card-content strong a:hover {
text-decoration: underline;
}
.item-desc {
font-size: .9rem;
color: var(--color-text-dim);
line-height: 1.4;
flex-grow: 1; /* Empuja el botón hacia abajo */
}
/* --- Botón de Tarjeta de Listado (Transparente con Borde Dorado) --- */
.btn-ver-item {
display: inline-flex;
align-items: center;
gap: .5rem;
align-self: flex-start; /* Se alinea a la izquierda de la tarjeta */
background-color: transparent;
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: var(--radius-pill);
padding: .4rem .9rem;
font-size: .85rem;
font-weight: 500;
text-decoration: none;
transition: all .25s ease;
margin-top: .8rem;
}
.btn-ver-item:hover {
background-color: var(--color-accent);
color: var(--color-bg-main);
text-decoration: none;
}
/* -------------------- BLOQUES DE DETALLE (CARD-BLOCK) -------------------- */
.card-block {
/* Estilo genérico para las secciones de contenido dentro de una página de detalle */
background: var(--color-bg-section);
border-radius: var(--radius-card);
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-card);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-block h2 {
color: var(--color-accent);
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: 1.5rem;
font-size: 1.4rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.75rem;
}
/* -------------------- LISTAS DE INFORMACIÓN (DETALLE) -------------------- */
/* --- Lista de Contacto (Teléfono, Email, Web, etc.) --- */
.contacto-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contacto-list li {
color: var(--color-text-dim);
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
}
.contacto-list i {
color: var(--color-accent);
width: 1.2rem;
text-align: center;
font-size: 1.1rem;
}
.contacto-list a {
color: var(--color-text-dim);
}
.contacto-list a:hover {
color: var(--color-accent);
}
/* --- Lista de Información Estructurada (Producto, Experiencia) --- */
.info-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.info-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.95rem;
}
.info-list i {
color: var(--color-accent);
width: 1.2rem;
text-align: center;
font-size: 1.1rem;
margin-top: 0.2rem;
}
.info-list strong {
color: var(--color-text-main);
display: block;
font-size: 1rem;
margin-bottom: 0.2rem;
}
.info-list p {
margin: 0;
line-height: 1.5;
color: var(--color-text-dim);
}
/* --- Bloque Lugar Vinculado (e.g., en página de Experiencia) --- */
.lugar-vinculado-info {
margin-top: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid var(--color-accent);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.lugar-vinculado-info h3 {
color: var(--color-accent);
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
/* -------------------- GALERÍA Y LIGHTBOX -------------------- */
.galeria-grid {
/* Cuadrícula para las miniaturas de la galería */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .75rem;
}
.galeria-item {
/* Estilo visual de cada miniatura */
height: 120px;
background-size: cover;
background-position: center;
border-radius: var(--radius-card);
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform .25s;
box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
.galeria-item:hover {
transform: scale(1.05);
border-color: var(--color-accent);
}
/* --- Lightbox Overlay --- */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .9);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-lightbox);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
padding: 1rem;
}
.lightbox-overlay.active {
opacity: 1;
pointer-events: auto;
}
.lightbox-inner {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
}
.lightbox-inner img {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius-card);
box-shadow: 0 30px 60px rgba(0,0,0,0.8);
background: transparent;
}
.lightbox-close {
/* Botón de cerrar (X) */
position: absolute;
top: -1rem;
right: -1rem;
background: var(--color-accent);
border: 0;
color: var(--color-bg-main);
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
font-size: 1.2rem;
cursor: pointer;
z-index: 10;
transition: transform .2s;
}
.lightbox-close:hover { transform: scale(1.1); }
.lightbox-nav button {
/* Botones de navegación (Flechas) */
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(15, 23, 42, .8);
border: 1px solid var(--color-accent);
color: var(--color-accent);
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
z-index: 5;
transition: all .2s ease;
}
.lightbox-nav button:hover {
background: var(--color-accent);
color: var(--color-bg-main);
}
.lightbox-prev { left: -3.5rem; }
.lightbox-next { right: -3.5rem; }
/* --- Responsividad Lightbox --- */
@media (max-width: 768px) {
.lightbox-nav button {
width: 2.2rem;
height: 2.2rem;
}
.lightbox-prev { left: .5rem; }
.lightbox-next { right: .5rem; }
.lightbox-close {
top: 0.5rem;
right: 0.5rem;
}
}
/* -------------------- VIDEO / PANO (DETALLE) -------------------- */
.video-container,
.pano-container {
/* Contenedores para mantener la relación de aspecto 16:9 */
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
background: #000;
}
.video-container iframe,
.video-container video,
.pano-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/*
* ==========================================================
* ESTILOS DE CONTENIDO WYSIWYG
* (Para public/legales.php y cualquier otro contenido
* renderizado desde el admin, como pagina.php)
* ==========================================================
*/
.wysiwyg-content {
/* Estilos base para el contenedor */
color: var(--color-text-dim);
line-height: 1.7;
}
/* Espaciado para títulos */
.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4 {
margin-top: 2.5rem; /* Espacio de "aire" superior */
margin-bottom: 1rem;
color: var(--color-accent); /* Hacemos que destaquen */
line-height: 1.3;
}
/* Ajustes de espaciado para párrafos y listas */
.wysiwyg-content p {
margin-bottom: 1.25rem;
}
.wysiwyg-content p:last-child {
margin-bottom: 0;
}
.wysiwyg-content ul,
.wysiwyg-content ol {
margin-bottom: 1.25rem;
padding-left: 1.5rem; /* Indentación estándar */
}
.wysiwyg-content li {
margin-bottom: 0.5rem;
}
/* Otros elementos comunes */
.wysiwyg-content strong {
color: var(--color-text-main);
font-weight: 600;
}
.wysiwyg-content a {
color: var(--color-accent);
}
.wysiwyg-content a:hover {
text-decoration: underline;
}
/* ==========================================================
CARDS DEL SIDEBAR — GRID Y ESPACIADO
(Redundante con columna_dcha.css, pero lo mantenemos aquí
como la fuente "maestra" de la verdad.)
========================================================== */
.sidebar-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem; /* separación exacta entre tarjetas */
margin-bottom: 2rem; /* separación con el botón “Ver todos” */
}
.columna-sidebar .item-card {
margin-bottom: 0; /* el gap ya gestiona la separación */
}
/* ==========================================================
FIN: Contenido de 03-components.css
========================================================== */
/* =======================================================
FIX: BUSCADOR DEL HEADER (Altura y Color de Borde DB)
======================================================= */
/* 1. Aplicamos el borde, la altura y la forma al CONTENEDOR (