/*
Theme Name: SoloCamper Child
Theme URI: https://generatepress.com
Template: generatepress
Author: SoloCamper
Author URI: https://generatepress.com/about
Description: Tema hijo de SoloCamper basado en GeneratePress
Version: 3.6.1.1785170121
Updated: 2026-08-01

*/

/* ============================================================
   2. VARIABLES CSS — Paleta de colores y tipografía
   ─────────────────────────────────────────────────────────
   Centralizamos TODOS los colores y fuentes aquí.
   Si quieres cambiar un color en toda la web, solo lo cambias
   aquí y afecta a todos los elementos que lo usan.

   PALETA:
   - Asfalto/negro verdoso: fondos oscuros, header, footer
   - Bosque: verde oscuro principal
   - Musgo: verde medio para acentos
   - Bruma: verde claro para textos sobre fondo oscuro
   - Arena/Crema: fondo principal de la web
   - Naranja: color firma, CTAs, elementos de acción
   - Texto: color de texto principal
   ============================================================ */

:root {
    /* Colores principales */
    --sc-asfalto:    #1C1E1A;   /* Casi negro verdoso — carretera de noche */
    --sc-bosque:     #2D4A3E;   /* Verde oscuro — pinar */
    --sc-musgo:      #4A7C59;   /* Verde medio */
    --sc-bruma:      #A8C5A0;   /* Verde claro — niebla de mañana */
    --sc-arena:      #F2EDE4;   /* Crema cálido — fondo secundario */
    --sc-crema:      #FAF8F3;   /* Crema más claro — fondo principal */
    --sc-naranja:    #D4622A;   /* Naranja señal de carretera — acción */
    --sc-naranja-h:  #B8511F;   /* Naranja hover — más oscuro */
    --sc-texto:      #1C1E1A;   /* Color de texto principal */
    --sc-muted:      rgba(28,30,26,0.55); /* Texto secundario/atenuado */

    /* Tipografía */
    --sc-font-titulo:  'Playfair Display', Georgia, serif;
    --sc-font-cuerpo:  'Inter', -apple-system, sans-serif;
    --sc-font-mono:    'Space Mono', monospace;

    /* Espaciados */
    --sc-radio:      0px;       /* Border radius general — cero para estética más sobria */
    --sc-radio-btn:  9999px;    /* Border radius botones — píldora */
    --sc-sombra:     0 4px 20px rgba(0,0,0,0.08);

    /* Transiciones */
    --sc-trans:      0.2s ease;
}


/* ============================================================
   3. BASE — Reset y estilos globales
   ─────────────────────────────────────────────────────────
   Estilos que afectan a toda la web.
   Aquí definimos el fondo, tipografía base, enlaces globales
   y pequeños ajustes al reset de GeneratePress.
   ============================================================ */

body {
    background-color: var(--sc-crema);
    color: var(--sc-texto);
    font-family: var(--sc-font-cuerpo);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Títulos globales con Playfair Display */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sc-font-titulo);
    font-weight: 700;
    line-height: 1.2;
    color: var(--sc-texto);
}

/* Enlaces globales */
a {
    color: var(--sc-naranja);
    text-decoration: none;
    transition: color var(--sc-trans);
}
a:hover {
    color: var(--sc-naranja-h);
}

/* Eliminar outline por defecto, mantener accesibilidad */
*:focus-visible {
    outline: 2px solid var(--sc-naranja);
    outline-offset: 3px;
}


/* ============================================================
   4. CABECERA (HEADER)
   ─────────────────────────────────────────────────────────
   Estilos del header — barra de navegación superior.
   GeneratePress genera el header con las clases .site-header
   y .main-navigation.

   DECISIONES DE DISEÑO:
   - Fondo oscuro (asfalto) para contraste con el contenido
   - Logo a la izquierda, menú a la derecha
   - Texto del menú en verde bruma, hover en naranja
   - Header fijo (sticky) para que siempre sea accesible
   ============================================================ */

.site-header {
    background-color: var(--sc-asfalto);
    border-bottom: 1px solid rgba(168,197,160,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logo — ajuste de tamaño */
.site-logo img,
.custom-logo {
    max-height: 60px;
    width: auto;
}

/* Título del sitio (si no hay logo imagen) */
.site-title a {
    color: var(--sc-bruma) !important;
    font-family: var(--sc-font-mono);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

/* Menú de navegación */
.main-navigation a {
    color: rgba(168,197,160,0.85);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    transition: color var(--sc-trans);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--sc-naranja);
}


/* ============================================================
   5. HERO (PORTADA)
   ─────────────────────────────────────────────────────────
   Estilos del bloque portada principal (wp-block-cover).
   Este bloque es la primera sección que ve el usuario.

   NOTA IMPORTANTE:
   El bloque de titular usado en Gutenberg para esta portada
   es un H2 (no un H1). Todas las reglas de tamaño de titular
   se aplican por tanto a "h2", y el subtítulo queda separado
   en su propia regla ("h3" y "p") para que no compitan por
   el mismo selector.

   DECISIONES DE DISEÑO:
   - Imagen de fondo con overlay oscuro para legibilidad
   - Texto alineado a la izquierda (más natural para lectura)
   - Titular grande con Playfair Display — impacto visual
   - Altura mínima del 85% del viewport
   ============================================================ */

.wp-block-cover {
    min-height: 85vh !important;
    padding: 5rem 4rem !important;
}

/* Overlay oscuro sobre la imagen de fondo del hero */
.wp-block-cover__background {
    opacity: 0.65 !important;
}

/* Contenedor interior del hero */
.wp-block-cover .wp-block-cover__inner-container {
    text-align: left;
    max-width: 700px;
}

/* Titular del hero — bloque real: H2 */
.wp-block-cover h2 {
    font-family: var(--sc-font-titulo);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--sc-arena);
    margin-bottom: 1.5rem;
    text-align: left;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

/* Subtítulo del hero (H3 o párrafo) — separado del titular */
.wp-block-cover h3,
.wp-block-cover p {
    font-family: var(--sc-font-cuerpo);
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(242,237,228,0.75);
    text-align: left;
    margin-bottom: 2.5rem;
    max-width: 50ch;
}


/* ============================================================
   6. BOTONES — Sistema coherente
   ─────────────────────────────────────────────────────────
   Definimos DOS tipos de botón que funcionan juntos:

   PRIMARIO (is-style-fill):
   - Fondo naranja sólido
   - Texto crema
   - Para la acción principal (Buscar áreas)

   SECUNDARIO (is-style-outline):
   - Fondo transparente
   - Borde crema fino (1.5px)
   - Texto crema, peso normal (no bold)
   - Para acciones secundarias (Ver rutas)

   REGLA: el naranja SOLO aparece en el botón primario.
   El secundario usa crema para no competir visualmente.

   AMBOS comparten:
   - Mismo border-radius (píldora)
   - Mismo padding (misma altura)
   - Mismo tamaño de fuente
   - Transición suave en hover
   ============================================================ */

/* Base compartida — misma forma y tamaño */
.wp-block-button__link {
    border-radius: var(--sc-radio-btn) !important;
    padding: 0.8rem 2rem !important;
    font-family: var(--sc-font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    transition: background-color var(--sc-trans),
                color var(--sc-trans),
                border-color var(--sc-trans) !important;
    border: 1.5px solid transparent !important;
    cursor: pointer;
}

/* Botón primario — acción principal */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--sc-naranja) !important;
    color: var(--sc-crema) !important;
    border-color: var(--sc-naranja) !important;
    font-weight: 600 !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: var(--sc-naranja-h) !important;
    border-color: var(--sc-naranja-h) !important;
    color: var(--sc-crema) !important;
}

/* Botón secundario — acción secundaria */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--sc-arena) !important;
    border-color: rgba(242,237,228,0.6) !important;
    font-weight: 400 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(242,237,228,0.1) !important;
    border-color: var(--sc-arena) !important;
    color: var(--sc-crema) !important;
}

/* Grupo de botones — espacio entre ellos */
.wp-block-buttons {
    gap: 1rem !important;
    flex-wrap: wrap;
}


/* ============================================================
   7. SECCIONES DE CONTENIDO
   ─────────────────────────────────────────────────────────
   Estilos base para las secciones de la web:
   - Áreas de autocaravanas
   - Rutas
   - Guías
   - Historia

   Cada sección alterna fondo crema y fondo arena para
   crear separación visual sin necesidad de líneas.
   ============================================================ */

/* Sección genérica */
.sc-seccion {
    padding: 5rem 4rem;
}

/* Sección con fondo alternativo */
.sc-seccion--alt {
    background-color: var(--sc-arena);
}

/* Sección con fondo oscuro */
.sc-seccion--dark {
    background-color: var(--sc-asfalto);
    color: var(--sc-arena);
}
.sc-seccion--dark h1,
.sc-seccion--dark h2,
.sc-seccion--dark h3 {
    color: var(--sc-arena);
}

/* Eyebrow — pequeño texto encima del título de sección */
/* Uso: <span class="sc-eyebrow">Directorio · Áreas</span> */
.sc-eyebrow {
    font-family: var(--sc-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sc-naranja);
    display: block;
    margin-bottom: 0.8rem;
}

/* Título de sección */
.sc-titulo-seccion {
    font-family: var(--sc-font-titulo);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.sc-titulo-seccion em {
    font-style: italic;
    color: var(--sc-musgo);
}


/* ============================================================
   8. CARDS — Fichas de áreas y rutas
   ─────────────────────────────────────────────────────────
   Las cards son el elemento central del directorio.
   Cada card representa un área de autocaravanas o una ruta.

   ANATOMÍA DE UNA CARD:
   - Imagen o fondo de color
   - Badge (etiqueta: "Verificada", "Nueva", etc.)
   - Nombre del área
   - Metadatos (zona, servicios, valoración)
   - Hover: elevación suave

   Se usan con CSS Grid en el contenedor padre.
   ============================================================ */

/* Contenedor grid de cards */
.sc-grid-areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Card individual */
.sc-card {
    background: white;
    border: 1px solid rgba(28,30,26,0.08);
    overflow: hidden;
    transition: transform var(--sc-trans), box-shadow var(--sc-trans);
}
.sc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* Imagen de la card */
.sc-card__imagen {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Contenido de la card */
.sc-card__contenido {
    padding: 1.2rem;
}

/* Badge de la card */
.sc-card__badge {
    font-family: var(--sc-font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    background-color: var(--sc-naranja);
    color: white;
    display: inline-block;
    margin-bottom: 0.6rem;
}

/* Nombre del área en la card */
.sc-card__nombre {
    font-family: var(--sc-font-titulo);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sc-texto);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

/* Metadatos de la card */
.sc-card__meta {
    font-family: var(--sc-font-mono);
    font-size: 0.65rem;
    color: var(--sc-muted);
    letter-spacing: 0.06em;
}

/* Valoración */
.sc-card__rating {
    color: var(--sc-naranja);
    font-size: 0.8rem;
    font-weight: 600;
}


/* ============================================================
   9. FOOTER
   ─────────────────────────────────────────────────────────
   Pie de página oscuro con links y copyright.

   ESTRUCTURA:
   - Fondo asfalto (igual que el header — coherencia)
   - Texto en bruma/crema para contraste
   - Links en crema, hover en naranja
   - Barra inferior con copyright
   ============================================================ */

.site-footer {
    background-color: var(--sc-asfalto);
    color: rgba(242,237,228,0.6);
    border-top: 1px solid rgba(168,197,160,0.08);
}

.site-footer a {
    color: rgba(242,237,228,0.6);
    transition: color var(--sc-trans);
}
.site-footer a:hover {
    color: var(--sc-bruma);
}

/* Copyright del footer */
.site-info {
    font-family: var(--sc-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(242,237,228,0.3);
    padding: 1.5rem 0;
}

/* Eliminar "Creado con GeneratePress" si quieres */
/* .site-info a[href*="generatepress"] { display: none; } */


/* ============================================================
   10. RESPONSIVE — Móvil y tablet
   ─────────────────────────────────────────────────────────
   Media queries para adaptar el diseño a pantallas pequeñas.

   BREAKPOINTS:
   - 768px: tablet y móvil grande
   - 480px: móvil estándar

   REGLA: mobile-first implica que el CSS base es para móvil
   y los media queries añaden estilos para pantallas mayores.
   Aquí GeneratePress ya es mobile-first así que solo
   sobreescribimos lo necesario.

   NOTA: igual que en la Sección 5, el titular del hero es
   un H2 real — por eso las reglas de abajo usan "h2" y no
   "h1", y el subtítulo va separado en "h3, p".
   ============================================================ */

@media (max-width: 768px) {

    /* Hero en móvil */
    .wp-block-cover {
        padding: 3rem 1.2rem !important;
        min-height: 80vh !important;
    }

    .wp-block-cover .wp-block-cover__inner-container {
        text-align: left !important;
        max-width: 100% !important;
    }

    .wp-block-cover h2 {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
        text-align: left !important;
        hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
    }

    .wp-block-cover h3,
    .wp-block-cover p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
        max-width: 100% !important;
    }

    .wp-block-buttons {
        justify-content: flex-start !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Secciones en móvil */
    .sc-seccion {
        padding: 3rem 1.2rem;
    }

    /* Grid de cards en móvil — una columna */
    .sc-grid-areas {
        grid-template-columns: 1fr;
    }

    /* Header en móvil */
    .site-logo img {
        max-height: 45px;
    }
}

@media (max-width: 480px) {

    .wp-block-cover h2 {
        font-size: 1.9rem !important;
    }

    .wp-block-button__link {
        padding: 0.7rem 1.4rem !important;
        font-size: 0.72rem !important;
    }
}


/* ============================================================
   11. UTILIDADES — Clases de apoyo reutilizables
   ─────────────────────────────────────────────────────────
   Clases pequeñas que puedes añadir a cualquier bloque
   de Gutenberg en el campo "Clase CSS adicional".

   EJEMPLO DE USO EN GUTENBERG:
   Selecciona un bloque → columna derecha → "Avanzado"
   → "Clase CSS adicional" → escribe la clase sin el punto.
   ============================================================ */

/* Fondo oscuro para cualquier bloque */
.fondo-oscuro {
    background-color: var(--sc-asfalto) !important;
    color: var(--sc-arena) !important;
}

/* Fondo verde bosque */
.fondo-bosque {
    background-color: var(--sc-bosque) !important;
    color: var(--sc-arena) !important;
}

/* Fondo arena alternativo */
.fondo-arena {
    background-color: var(--sc-arena) !important;
}

/* Texto naranja acento */
.texto-naranja {
    color: var(--sc-naranja) !important;
}

/* Texto bruma (para usar sobre fondos oscuros) */
.texto-bruma {
    color: var(--sc-bruma) !important;
}

/* Separador decorativo */
.sc-separador {
    width: 3rem;
    height: 2px;
    background-color: var(--sc-naranja);
    margin: 1rem 0 1.5rem;
    display: block;
}

/* Ancho completo sin márgenes laterales */
.sin-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ============================================================
   12. CUSTOM POST TYPE ÁREAS
   ─────────────────────────────────────────────────────────
   Estilos específicos para las fichas individuales de
   áreas de autocaravanas (CPT: area_camper).

   SECCIONES DE UNA FICHA:
   - Cabecera de ficha (nombre, zona, valoración)
   - Mapa Leaflet
   - Servicios disponibles (iconos + etiquetas)
   - Galería de fotos
   - Información práctica (precio, horario, cómo llegar)
   - Áreas cercanas

   NOTA: Los estilos del mapa Leaflet se cargan por separado
   desde el plugin de áreas (solocamper-areas.php).
   ============================================================ */

/* Cabecera de ficha de área */
.sc-ficha-header {
    padding: 3rem 0 2rem;
    border-bottom: 1px solid rgba(28,30,26,0.08);
    margin-bottom: 2rem;
}

.sc-ficha-header__zona {
    font-family: var(--sc-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sc-naranja);
    margin-bottom: 0.5rem;
    display: block;
}

.sc-ficha-header__nombre {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.sc-ficha-header__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sc-font-mono);
    font-size: 0.8rem;
}

/* Mapa de la ficha */
.sc-mapa-area {
    height: 350px;
    width: 100%;
    border: 1px solid rgba(28,30,26,0.08);
    margin-bottom: 2rem;
    /* Leaflet se encarga del interior */
}

/* Grid de servicios */
.sc-servicios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

/* Etiqueta de servicio individual */
.sc-servicio-tag {
    font-family: var(--sc-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(28,30,26,0.15);
    color: var(--sc-texto);
    background: white;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Servicio disponible — verde */
.sc-servicio-tag--disponible {
    border-color: var(--sc-musgo);
    color: var(--sc-bosque);
    background-color: rgba(74,124,89,0.06);
}

/* Información práctica */
.sc-info-practica {
    background-color: var(--sc-arena);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.sc-info-practica__item {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(28,30,26,0.06);
    font-size: 0.88rem;
}

.sc-info-practica__label {
    font-weight: 600;
    color: var(--sc-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/*
 * ============================================================
 *  FIN DEL ARCHIVO style.css de SoloCamper Child Theme
 *
 *  CÓMO EDITAR ESTE ARCHIVO:
 *  1. Accede por FTP a: /wp-content/themes/generatepress-child/
 *  2. Edita style.css con cualquier editor de código
 *  3. Guarda y recarga la web
 *
 *  O desde WordPress:
 *  Apariencia → Editor de archivos del tema
 *  → Selecciona "SoloCamper Child" → style.css
 *
 *  NUNCA edites el style.css del tema PADRE (generatepress).
 *  Ese archivo se sobreescribe con cada actualización.
 * ============================================================
 */

/* ==========================================================================
   SoloCamper — Logo flotando sobre el header (v2)
   Sustituye por completo el bloque anterior "logo-flotante.css"
   Añadir en: /wp-content/themes/generatepress-child/style.css
   ========================================================================== */

/* 1. El header y sus contenedores deben permitir que algo se salga de su caja */
#masthead,
.site-header,
.inside-header.grid-container {
	overflow: visible !important;
	position: relative;
	z-index: 10;
}

/* 2. Fijamos la altura real del header, independiente del logo.
      Ajusta este valor a la altura que quieras que tenga la barra oscura. */
.inside-header.grid-container {
	min-height: 90px;
}

/* 3. La CAJA del logo ocupa poco espacio (así el header no crece) */
.site-logo {
	position: relative;
	width: 160px;    /* Ancho reservado en el header para el logo */
	height: 70px;    /* Igual o menor que la altura del header */
	overflow: visible !important; /* Permite que la imagen se salga de esta caja */
	z-index: 20;
}

.site-logo a {
	display: block;
	position: relative;
	height: 100%;
}

/* 4. La IMAGEN del logo: mucho más grande que su caja, y posicionada
      de forma absoluta para que no afecte el tamaño del header */
.header-image.is-logo-image {
	position: absolute !important;
	top: 0;
	left: 0;
	height: 190px !important;  /* Tamaño real del logo, el que sobresale */
	width: auto !important;
	max-height: none !important; /* Por si el tema fuerza otro límite */
	z-index: 20;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

/* 5. Móvil: reducimos el vuelo para no tapar el menú hamburguesa */
@media (max-width: 768px) {
	.site-logo {
		width: 100px;
		height: 55px;
	}
	.header-image.is-logo-image {
		height: 110px !important;
	}
	.inside-header.grid-container {
		min-height: 70px;
	}
}
/* ==========================================================================
   SoloCamper — Corrección del H2 del hero (texto "deshilachado")
   Pegar en: Apariencia > Personalizar > CSS Adicional
   ========================================================================== */

/* 1. Ensanchar de verdad el contenedor de texto dentro del hero */
.wp-block-cover .wp-block-group__inner-container.is-layout-constrained {
	max-width: 1500px !important;
	width: 90% !important;
}

/* 1b. CLAVE: Gutenberg aplica su propio max-width a CADA hijo directo
       del contenedor "is-layout-constrained" (no solo al contenedor).
       Sin esto, el punto 1 de arriba no tiene efecto real. */
.wp-block-cover .wp-block-group__inner-container.is-layout-constrained > * {
	max-width: 100% !important;
}

/* 2. Tamaño de letra responsive: tope máximo más contenido (75px, no 100px)
      para que en pantallas grandes sigan agrupándose 2-3 palabras por línea.
      clamp(mínimo, preferido, máximo) */
.wp-block-cover h2.wp-block-heading {
	font-size: clamp(2.5rem, 5vw, 4.7rem) !important; /* 4.7rem ≈ 75px en pantallas grandes */
	line-height: 1.1 !important;
	max-width: 100% !important;
}

/* 3. En móvil, un poco más de margen lateral para que no toque los bordes */
@media (max-width: 600px) {
	.wp-block-cover .wp-block-group__inner-container.is-layout-constrained {
		width: 88% !important;
	}
}
/* ==========================================================================
   SoloCamper — Header más estrecho (barra de navegación compacta)
   Pegar en: Apariencia > Personalizar > CSS Adicional (o style.css)
   ========================================================================== */

/* 1. Reducir la altura real de la barra de navegación */
.inside-header.grid-container {
	min-height: 60px !important;   /* Antes 90px */
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* 2. Reducir un poco la caja del logo (footprint dentro del header),
      pero SIN tocar el tamaño real de la imagen — sigue sobresaliendo igual */
.site-logo {
	height: 50px !important;  /* Antes 70px */
}

/* 3. Menú de navegación: texto un poco más pequeño y menos padding vertical,
      para que acompañe visualmente a una barra más fina */
.main-navigation .menu-item > a {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	font-size: 14px !important; /* Ajusta si lo quieres aún más pequeño */
}

/* 4. Móvil: versión aún más compacta */
@media (max-width: 768px) {
	.inside-header.grid-container {
		min-height: 50px !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
	.site-logo {
		height: 40px !important;
	}
}
/* ==========================================================================
   SoloCamper — Listado de Áreas de Autocaravanas (archive-area_autocaravana.php)
   Paleta: asfalto #1C1E1A · naranja #D4622A · bosque #2D4A3E · crema #FAF8F3
   Añadir en: style.css del child theme
   ========================================================================== */

.solocamper-areas-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 24px 100px;
}

/* ---------- HERO DEL LISTADO ---------- */
.areas-hero {
	text-align: left;
	margin-bottom: 48px;
	border-bottom: 2px solid #1C1E1A;
	padding-bottom: 32px;
}

.areas-hero__eyebrow {
	font-family: 'Inter', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 13px;
	font-weight: 600;
	color: #D4622A;
	margin: 0 0 8px;
}

.areas-hero__title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	color: #1C1E1A;
	margin: 0 0 12px;
	line-height: 1.1;
}

.areas-hero__subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	color: #2D4A3E;
	max-width: 640px;
	margin: 0;
}

/* ---------- BARRA DE FILTROS ---------- */
.areas-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px;
	background: #FAF8F3;
	border: 1px solid rgba(28, 30, 26, 0.15);
	border-radius: 4px;
	padding: 24px;
	margin-bottom: 48px;
}

.areas-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 180px;
}

.areas-filtros__campo label {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2D4A3E;
	font-weight: 600;
}

.areas-filtros__campo select {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	padding: 10px 12px;
	border: none;
	border-bottom: 2px solid #1C1E1A;
	background: transparent;
	color: #1C1E1A;
	border-radius: 0;
	cursor: pointer;
}

.areas-filtros__submit {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	background: #D4622A;
	color: #FAF8F3;
	border: none;
	border-radius: 999px;
	padding: 14px 28px;
	cursor: pointer;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.areas-filtros__submit:hover {
	background: #b24f21;
}

.areas-filtros__reset {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #2D4A3E;
	text-decoration: underline;
	align-self: center;
}

/* ---------- GRID DE TARJETAS ---------- */
.areas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}

.area-card {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(28, 30, 26, 0.12);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.area-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(28, 30, 26, 0.15);
}

/* Sello tipo ticket en la esquina — el elemento "firma" del listado */
.area-card__sello {
	position: absolute;
	top: 16px;
	left: -34px;
	background: #D4622A;
	color: #FAF8F3;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 40px;
	transform: rotate(-45deg);
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.area-card__imagen {
	display: block;
	aspect-ratio: 4 / 3;
	background: #1C1E1A;
	overflow: hidden;
}

.area-card__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.area-card__sin-imagen {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-family: 'Playfair Display', serif;
	color: rgba(250, 248, 243, 0.4);
	font-size: 20px;
}

.area-card__cuerpo {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.area-card__titulo {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	margin: 0 0 8px;
	line-height: 1.25;
}

.area-card__titulo a {
	color: #1C1E1A;
	text-decoration: none;
}

.area-card__titulo a:hover {
	color: #D4622A;
}

.area-card__ubicacion {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #2D4A3E;
	margin: 0 0 12px;
}

.area-card__servicios {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.area-card__servicios li {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #2D4A3E;
	border: 1px solid #2D4A3E;
	border-radius: 999px;
	padding: 3px 10px;
}

/* Línea de "ticket recortado" antes del precio */
.area-card__ticket-line {
	border-top: 2px dashed rgba(28, 30, 26, 0.2);
	margin: 4px 0 16px;
	position: relative;
}

.area-card__pie {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.area-card__valoracion {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: #D4622A;
	font-size: 14px;
}

.area-card__precio {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: #1C1E1A;
	font-size: 15px;
	background: #FAF8F3;
	border: 1px solid #1C1E1A;
	border-radius: 4px;
	padding: 4px 10px;
}

/* ---------- PAGINACIÓN Y ESTADO VACÍO ---------- */
.areas-paginacion {
	margin-top: 56px;
	display: flex;
	justify-content: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
}

.areas-paginacion .page-numbers {
	padding: 8px 14px;
	border: 1px solid #1C1E1A;
	border-radius: 4px;
	color: #1C1E1A;
	text-decoration: none;
}

.areas-paginacion .page-numbers.current {
	background: #1C1E1A;
	color: #FAF8F3;
}

.areas-vacio {
	text-align: center;
	padding: 60px 20px;
	font-family: 'Inter', sans-serif;
	color: #2D4A3E;
}

.areas-vacio a {
	color: #D4622A;
	font-weight: 600;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
	.solocamper-areas-page {
		padding: 32px 16px 60px;
	}
	.areas-filtros {
		flex-direction: column;
		align-items: stretch;
	}
	.areas-filtros__campo {
		min-width: 0;
	}
}
/* ============================================================
   Tarjetas de área de autocaravanas — SoloCamper
   Añadir al final de style.css del child theme, o encolar aparte.
   Variables ya deberían existir en tu style.css si sigues el
   documento de paleta; si no, defínelas aquí.
   ============================================================ */

:root {
	--sc-asfalto: #1C1E1A;
	--sc-naranja: #D4622A;
	--sc-bosque:  #2D4A3E;
	--sc-crema:   #FAF8F3;
	--sc-borde:   #E8E4D9;
	--sc-texto-sec: #5F5E5A;
}

.sc-areas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.sc-card {
	background: #fff;
	border: 1px solid var(--sc-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(28, 30, 26, 0.08);
}

.sc-card-img {
	display: block;
	position: relative;
	height: 160px;
	background: linear-gradient(135deg, var(--sc-bosque), var(--sc-asfalto));
}

.sc-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--sc-crema);
	font-size: 28px;
}

.sc-card-tipo {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(28, 30, 26, 0.75);
	color: var(--sc-crema);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 20px;
}

.sc-card-body {
	padding: 16px 18px 18px;
}

.sc-card-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--sc-asfalto);
	margin: 0 0 6px;
	line-height: 1.25;
}

.sc-card-title a {
	color: inherit;
	text-decoration: none;
}

.sc-card-title a:hover {
	color: var(--sc-naranja);
}

.sc-card-location {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--sc-texto-sec);
	margin: 0 0 12px;
}

.sc-card-location i {
	font-size: 14px;
}

.sc-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.sc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	background: #F1EEE4;
	color: var(--sc-bosque);
	padding: 4px 9px;
	border-radius: 20px;
}

.sc-badge-mas {
	background: transparent;
	color: var(--sc-texto-sec);
	padding: 4px 4px;
}

.sc-badge i {
	font-size: 12px;
}

.sc-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--sc-borde);
	padding-top: 12px;
}

.sc-card-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sc-asfalto);
}

.sc-card-rating i {
	color: var(--sc-naranja);
	font-size: 14px;
}

.sc-card-cta {
	background: var(--sc-naranja);
	color: var(--sc-crema);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.sc-card-cta:hover {
	background: #B8531F;
	color: var(--sc-crema);
}

@media (max-width: 480px) {
	.sc-areas-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Tarjetas de área de autocaravanas — SoloCamper
   Añadir al final de style.css del child theme, o encolar aparte.
   Variables ya deberían existir en tu style.css si sigues el
   documento de paleta; si no, defínelas aquí.
   ============================================================ */

:root {
	--sc-asfalto: #1C1E1A;
	--sc-naranja: #D4622A;
	--sc-bosque:  #2D4A3E;
	--sc-crema:   #FAF8F3;
	--sc-borde:   #E8E4D9;
	--sc-texto-sec: #5F5E5A;
}

.sc-areas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.sc-card {
	background: #fff;
	border: 1px solid var(--sc-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(28, 30, 26, 0.08);
}

.sc-card-img {
	display: block;
	position: relative;
	height: 160px;
	background: linear-gradient(135deg, var(--sc-bosque), var(--sc-asfalto));
}

.sc-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--sc-crema);
	font-size: 28px;
}

.sc-card-tipo {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(28, 30, 26, 0.75);
	color: var(--sc-crema);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 20px;
}

.sc-card-body {
	padding: 16px 18px 18px;
}

.sc-card-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--sc-asfalto);
	margin: 0 0 6px;
	line-height: 1.25;
}

.sc-card-title a {
	color: inherit;
	text-decoration: none;
}

.sc-card-title a:hover {
	color: var(--sc-naranja);
}

.sc-card-location {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--sc-texto-sec);
	margin: 0 0 12px;
}

.sc-card-location i {
	font-size: 14px;
}

.sc-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.sc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	background: #F1EEE4;
	color: var(--sc-bosque);
	padding: 4px 9px;
	border-radius: 20px;
}

.sc-badge-mas {
	background: transparent;
	color: var(--sc-texto-sec);
	padding: 4px 4px;
}

.sc-badge i {
	font-size: 12px;
}

.sc-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--sc-borde);
	padding-top: 12px;
}

.sc-card-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sc-asfalto);
}

.sc-card-rating i {
	color: var(--sc-naranja);
	font-size: 14px;
}

.sc-card-cta {
	background: var(--sc-naranja);
	color: var(--sc-crema);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.sc-card-cta:hover {
	background: #B8531F;
	color: var(--sc-crema);
}

@media (max-width: 480px) {
	.sc-areas-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Ficha individual de área (single-area_autocaravana.php)
   ============================================================ */

.sc-single-area {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 20px 60px;
}

.sc-single-hero {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--sc-bosque), var(--sc-asfalto));
	min-height: 280px;
}

.sc-single-hero img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

.sc-single-tipo {
	position: absolute;
	top: 16px;
	left: 16px;
}

.sc-single-header {
	margin-bottom: 16px;
}

.sc-single-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--sc-asfalto);
	margin: 0 0 8px;
	line-height: 1.2;
}

.sc-single-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 14px;
}

.sc-single-stat {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: var(--sc-texto-sec);
}

.sc-single-stat i {
	color: var(--sc-naranja);
	font-size: 15px;
}

.sc-single-badges {
	margin: 20px 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sc-borde);
}

.sc-single-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--sc-asfalto);
	margin-bottom: 8px;
}

.sc-single-block {
	margin: 28px 0;
	padding-top: 24px;
	border-top: 1px solid var(--sc-borde);
}

.sc-single-block h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--sc-asfalto);
	margin: 0 0 12px;
}

.sc-single-map iframe {
	border-radius: 12px;
}

.sc-single-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.sc-single-gallery img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
}

.sc-single-contacto p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}

.sc-single-contacto i {
	color: var(--sc-naranja);
}
/* ============================================================
   Tarjetas de área de autocaravanas — SoloCamper
   Añadir al final de style.css del child theme, o encolar aparte.
   Variables ya deberían existir en tu style.css si sigues el
   documento de paleta; si no, defínelas aquí.
   ============================================================ */

:root {
	--sc-asfalto: #1C1E1A;
	--sc-naranja: #D4622A;
	--sc-bosque:  #2D4A3E;
	--sc-crema:   #FAF8F3;
	--sc-borde:   #E8E4D9;
	--sc-texto-sec: #5F5E5A;
}

.sc-areas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.sc-card {
	background: #fff;
	border: 1px solid var(--sc-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(28, 30, 26, 0.08);
}

.sc-card-img {
	display: block;
	position: relative;
	height: 160px;
	background: linear-gradient(135deg, var(--sc-bosque), var(--sc-asfalto));
}

.sc-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--sc-crema);
	font-size: 28px;
}

.sc-card-tipo {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(28, 30, 26, 0.75);
	color: var(--sc-crema);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 20px;
}

.sc-card-body {
	padding: 16px 18px 18px;
}

.sc-card-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--sc-asfalto);
	margin: 0 0 6px;
	line-height: 1.25;
}

.sc-card-title a {
	color: inherit;
	text-decoration: none;
}

.sc-card-title a:hover {
	color: var(--sc-naranja);
}

.sc-card-location {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--sc-texto-sec);
	margin: 0 0 12px;
}

.sc-card-location i {
	font-size: 14px;
}

.sc-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.sc-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	background: #EDF1EC;
	color: var(--sc-bosque);
	padding: 6px 12px;
	border-radius: 20px;
}

.sc-badge-mas {
	background: transparent;
	color: var(--sc-texto-sec);
	padding: 4px 4px;
}

.sc-badge i {
	font-size: 13px;
}

.sc-maps-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
}

.sc-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--sc-borde);
	padding-top: 12px;
}

.sc-card-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sc-asfalto);
}

.sc-card-rating i {
	color: var(--sc-naranja);
	font-size: 14px;
}

.sc-card-cta {
	background: var(--sc-naranja);
	color: var(--sc-crema);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.sc-card-cta:hover {
	background: #B8531F;
	color: var(--sc-crema);
}

@media (max-width: 480px) {
	.sc-areas-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Ficha individual de área (single-area_autocaravana.php)
   ============================================================ */

.sc-single-area {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 20px 60px;
}

.sc-single-hero {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--sc-bosque), var(--sc-asfalto));
	min-height: 280px;
}

.sc-single-hero img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

.sc-single-tipo {
	position: absolute;
	top: 16px;
	left: 16px;
}

.sc-single-header {
	margin-bottom: 16px;
}

.sc-single-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--sc-asfalto);
	margin: 0 0 8px;
	line-height: 1.2;
}

.sc-single-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 14px;
}

.sc-single-stat {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: var(--sc-texto-sec);
}

.sc-single-stat i {
	color: var(--sc-naranja);
	font-size: 15px;
}

.sc-single-badges {
	margin: 20px 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sc-borde);
}

.sc-single-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--sc-asfalto);
	margin-bottom: 8px;
}

.sc-single-block {
	margin: 28px 0;
	padding-top: 24px;
	border-top: 1px solid var(--sc-borde);
}

.sc-single-block h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--sc-asfalto);
	margin: 0 0 12px;
}

.sc-single-map iframe {
	border-radius: 12px;
}

.sc-single-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.sc-single-gallery img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
}

.sc-single-contacto p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}

.sc-single-contacto i {
	color: var(--sc-naranja);
}

/* ============================================================
   Mapa de áreas (archivo/listado)
   ============================================================ */

.sc-mapa-areas {
	width: 100%;
	height: 380px;
	border-radius: 12px;
	margin: 24px 0 32px;
	border: 1px solid var(--sc-borde);
}

.sc-mapa-areas .leaflet-popup-content-wrapper {
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
}

.sc-mapa-areas .leaflet-popup-content a {
	color: var(--sc-naranja);
	font-weight: 500;
}
/* ============================================================
   Espacio de seguridad bajo el header, para que el logo flotante
   (position: absolute, más alto que el header) no tape el título
   ni el contenido de la página.
   ============================================================ */

/* Ajusta este valor: súbelo si el logo sigue tapando algo,
   bájalo si queda demasiado espacio en blanco. */
#content,
.site-content,
.inside-article,
.page-content {
	padding-top: 60px;
}

@media (max-width: 768px) {
	#content,
	.site-content,
	.inside-article,
	.page-content {
		padding-top: 30px;
	}
}
/* ============================================
   SOLOCAMPER — ESTILOS PÁGINA HISTORIA
   Añadir al final de style.css
   ============================================ */

/* ============================================
   SOLOCAMPER — PÁGINA HISTORIA
   Paleta: asfalto #1C1E1A · naranja #D4622A
           bosque #2D4A3E · crema #FAF8F3 · sepia #F0EBE1
   Fuentes: Playfair Display (épocas) + Inter (cuerpo)
   ============================================ */

.sc-historia-page { overflow-x: hidden; background: #FAF8F3; }
.sc-historia-page .content-area,
.sc-historia-page #primary,
.sc-historia-page .site-main { padding: 0; margin: 0; max-width: 100%; width: 100%; }

/* ---- HERO ---- */
.sh-hero {
  background: #1C1E1A;
  color: #FAF8F3;
  padding: 100px 24px 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,98,42,.18) 0%, transparent 70%);
  pointer-events: none;
}
.sh-hero-eyebrow {
  font-family: Inter, sans-serif;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #D4622A;
  margin-bottom: 20px;
  display: block;
  position: relative;
}
.sh-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  color: #FAF8F3;
  margin: 0 auto 20px;
  max-width: 800px;
  position: relative;
}
.sh-hero h1 em { font-style: italic; color: #D4622A; }
.sh-hero-lead {
  font-family: Inter, sans-serif;
  font-size: 1.05rem;
  color: #cfd0c8;
  max-width: 560px;
  margin: 0 auto 40px;
  position: relative;
}
.sh-hero-road { width: min(700px, 90%); height: auto; margin: 0 auto; display: block; position: relative; }

/* ---- INTRO ---- */
.sh-intro { padding: 70px 24px; background: #FAF8F3; }
.sh-intro-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.sh-intro h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: #1C1E1A;
  margin-bottom: 18px;
}
.sh-intro p {
  font-family: Inter, sans-serif;
  color: #4a4a44;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---- TIMELINE ---- */
.sh-timeline { position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 24px 60px; }
.sh-timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #2D4A3E 0, #2D4A3E 8px, transparent 8px, transparent 16px);
  transform: translateX(-50%);
}

.sh-epoca {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
  min-height: 260px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.sh-epoca.sh-visible { opacity: 1; transform: translateY(0); }

.sh-epoca-img { grid-column: 1; padding: 24px 40px 24px 0; text-align: right; }
.sh-epoca.invertida .sh-epoca-img { grid-column: 3; text-align: left; padding: 24px 0 24px 40px; }
.sh-epoca-img img,
.sh-epoca-img .sh-fallback {
  width: 100%;
  max-width: 340px;
  border-radius: 6px;
  filter: sepia(.25) contrast(1.02);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
}
.sh-fallback {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #F0EBE1, #dcd4c3);
  display: flex; align-items: center; justify-content: center;
  font-family: "Playfair Display", serif;
  color: #8a7f68;
  font-size: .9rem;
}

.sh-epoca-year { grid-column: 2; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.sh-epoca-dot {
  width: 56px; height: 56px; border-radius: 50%;
  background: #2D4A3E; color: #FAF8F3;
  display: flex; align-items: center; justify-content: center;
  font-family: Inter, sans-serif; font-weight: 700; font-size: 1.4rem;
  box-shadow: 0 0 0 6px #FAF8F3, 0 8px 20px -6px rgba(45,74,62,.5);
}
.sh-epoca-num {
  font-family: "Playfair Display", serif;
  font-weight: 700; font-size: 1.1rem;
  color: #D4622A; margin-top: 10px;
}

.sh-epoca-text { grid-column: 3; padding: 24px 0 24px 40px; }
.sh-epoca.invertida .sh-epoca-text { grid-column: 1; padding: 24px 40px 24px 0; text-align: right; }
.sh-epoca-text h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem; color: #1C1E1A; margin-bottom: 10px;
}
.sh-epoca-text p {
  font-family: Inter, sans-serif;
  color: #4a4a44; line-height: 1.65; font-size: .98rem; margin-bottom: 14px;
}
.sh-epoca-link {
  font-family: Inter, sans-serif; font-weight: 600; font-size: .9rem;
  color: #D4622A; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.sh-epoca-link:hover { text-decoration: underline; }

/* Secciones alternas crema/sepia */
.sh-epoca:nth-of-type(odd) { background: transparent; }
.sh-epoca:nth-of-type(even) { background: #F0EBE1; border-radius: 12px; }

/* ---- CIFRAS ---- */
.sh-cifras { background: #2D4A3E; padding: 60px 24px; }
.sh-cifras-inner {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center;
}
.sh-cifra-num {
  font-family: "Playfair Display", serif; font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #D4622A; font-weight: 700;
}
.sh-cifra-label {
  font-family: Inter, sans-serif; font-size: .85rem; color: #cfe0d6; margin-top: 6px;
}

/* ---- CTA FINAL ---- */
.sh-cta-final {
  background: #1C1E1A; color: #FAF8F3; text-align: center;
  padding: 80px 24px;
}
.sh-cta-final h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 16px;
}
.sh-cta-final p {
  font-family: Inter, sans-serif; color: #a8c4ba; font-size: 1.05rem;
  margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto;
}
.sh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #D4622A; color: #fff;
  font-family: Inter, sans-serif; font-weight: 600; font-size: 1rem;
  padding: 16px 32px; border-radius: 999px; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.sh-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(212,98,42,.7); color: #fff; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .sh-timeline::before { left: 28px; }
  .sh-epoca { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; min-height: auto; }
  .sh-epoca.invertida .sh-epoca-img,
  .sh-epoca.invertida .sh-epoca-year,
  .sh-epoca.invertida .sh-epoca-text { order: unset; }
  .sh-epoca-img,
  .sh-epoca.invertida .sh-epoca-img { grid-column: 1 / -1; text-align: left; padding: 32px 24px 16px; }
  .sh-epoca-img img, .sh-epoca-img .sh-fallback { max-width: 100%; }
  .sh-epoca-year { padding: 0; justify-content: flex-start; padding-top: 8px; }
  .sh-epoca-num { display: none; }
  .sh-epoca-dot { width: 40px; height: 40px; font-size: 1rem; }
  .sh-epoca-text,
  .sh-epoca.invertida .sh-epoca-text { grid-column: 1 / -1; padding: 16px 24px 40px; text-align: left; }
  .sh-cifras-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-epoca { opacity: 1; transform: none; transition: none; }
}