/* ================================================================
   LAS PINTURAS DE LA BEGO — Estilos principales
   ================================================================
   Índice de secciones:
   1.  Variables y Reset
   2.  Base
   3.  Utilidades
   4.  Botones
   5.  Animaciones de entrada
   6.  Navbar
   7.  Hero principal (index)
   8.  Hero pequeño (páginas internas)
   9.  Secciones home
   10. Tarjetas preview
   11. Banda CTA
   12. Acerca de mí
   13. Galería masonry
   14. Lightbox
   15. Blog — tarjetas (trucos / exposiciones)
   16. Contacto
   17. Footer
   18. Página 404
   19. Responsive
   ================================================================ */


/* ── 1. VARIABLES Y RESET ────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

:root {
    /* Colores */
    --crema:        #FAF7F2;
    --crema-oscuro: #EFE8DC;
    --crema-borde:  #E0D5C8;
    --siena:        #8B4513;
    --siena-claro:  #A0522D;
    --ocre:         #C4956A;
    --dorado:       #D4A853;
    --texto:        #2C1810;
    --texto-suave:  #6B5B4E;
    --blanco:       #FFFFFF;
    --negro:        #1A0F0A;

    /* Sombras */
    --sombra-suave: 0 2px 14px rgba(44,24,16,0.08);
    --sombra:       0 4px 28px rgba(44,24,16,0.14);
    --sombra-hover: 0 10px 44px rgba(44,24,16,0.22);

    /* Bordes */
    --radio:        6px;
    --radio-grande: 14px;

    /* Transición global */
    --transicion:   0.35s ease;

    /* Tipografía */
    --fuente-titulo: 'Playfair Display', Georgia, serif;
    --fuente-deco:   'Dancing Script', cursive;
    --fuente-cuerpo: 'Lato', sans-serif;
    --fuente-logo:   'Satisfy', cursive;

    /* Layout */
    --max-ancho:  1200px;
    --padding-sec: 88px 20px;
}


/* ── 2. BASE ─────────────────────────────────────────────────── */

html {
    font-size:       17.5px;
    scroll-behavior: smooth;
}

body {
    background:  var(--crema);
    color:       var(--texto);
    font-family: var(--fuente-cuerpo);
    line-height: 1.7;
    overflow-x:  hidden;
}

img { display: block; height: auto; max-width: 100%; }

a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transicion);
}

ul { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    line-height: 1.25;
}


/* ── 3. UTILIDADES ───────────────────────────────────────────── */

.contenedor {
    margin:    0 auto;
    max-width: var(--max-ancho);
    padding:   0 20px;
}

/* Etiqueta decorativa sobre títulos */
.etiqueta {
    color:       var(--ocre);
    display:     block;
    font-family: var(--fuente-deco);
    font-size:   1.2rem;
    margin-bottom: 6px;
}

/* Título de sección */
.titulo-sec {
    color:       var(--texto);
    font-size:   clamp(1.9rem, 3vw, 2.7rem);
    margin-bottom: 14px;
}

/* Línea decorativa bajo el título */
.linea-dec {
    background:    linear-gradient(to right, var(--siena), var(--ocre));
    border-radius: 2px;
    height:        3px;
    margin:        0 auto 44px;
    width:         56px;
}
.linea-dec.izq { margin: 0 0 28px; }

/* Cabecera de sección centrada */
.cabecera-sec { text-align: center; margin-bottom: 52px; }

/* Clase de accesibilidad — visualmente oculto pero leíble por lectores */
.visually-hidden {
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
}


/* ── 4. BOTONES ──────────────────────────────────────────────── */

.btn-principal {
    background:    var(--siena);
    border:        2px solid var(--siena);
    border-radius: var(--radio);
    color:         var(--blanco);
    cursor:        pointer;
    display:       inline-block;
    font-family:   var(--fuente-titulo);
    font-size:     0.95rem;
    letter-spacing: 1px;
    padding:       14px 38px;
    transition:    all var(--transicion);
}
.btn-principal:hover { background: transparent; color: var(--siena); }

.btn-secundario {
    background:    transparent;
    border:        2px solid rgba(255,255,255,0.8);
    border-radius: var(--radio);
    color:         var(--blanco);
    cursor:        pointer;
    display:       inline-block;
    font-family:   var(--fuente-titulo);
    font-size:     0.95rem;
    letter-spacing: 1px;
    padding:       12px 34px;
    transition:    all var(--transicion);
}
.btn-secundario:hover { background: var(--blanco); color: var(--siena); }

.btn-outline {
    background:    transparent;
    border:        2px solid var(--siena);
    border-radius: var(--radio);
    color:         var(--siena);
    cursor:        pointer;
    display:       inline-block;
    font-family:   var(--fuente-titulo);
    font-size:     0.95rem;
    letter-spacing: 1px;
    padding:       12px 34px;
    transition:    all var(--transicion);
}
.btn-outline:hover { background: var(--siena); color: var(--blanco); }


/* ── 5. ANIMACIONES DE ENTRADA ───────────────────────────────── */

/* Controladas por IntersectionObserver en main.js */
.animar {
    opacity:    0;
    transform:  translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.animar.visible { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }


/* ── 6. NAVBAR ───────────────────────────────────────────────── */

.navbar {
    left:       0;
    padding:    0 20px;
    position:   fixed;
    right:      0;
    top:        0;
    transition: background var(--transicion), box-shadow var(--transicion);
    z-index:    1000;
}
/* Estado tras hacer scroll */
.navbar.scrolled {
    backdrop-filter: blur(14px);
    background:      rgba(250,247,242,0.96);
    box-shadow:      var(--sombra-suave);
}

.navbar-inner {
    align-items:     center;
    display:         flex;
    height:          68px;
    justify-content: space-between;
    margin:          0 auto;
    max-width:       var(--max-ancho);
}

.nav-logo {
    color:          var(--blanco);
    font-family:    var(--fuente-logo);
    font-size:      24px;
    font-weight:    400;
    letter-spacing: 0;
    margin-left:    -4px;
    transition:     color var(--transicion), background var(--transicion);
    border-radius:  4px;
    padding:        4px 9px;
}
/* Logo oscuro al hacer scroll o en páginas internas */
.navbar.scrolled .nav-logo,
.navbar.pagina-interna .nav-logo { color: var(--texto); }
.nav-logo:hover { background: rgba(255,255,255,0.22); color: var(--siena) !important; }
.navbar.scrolled .nav-logo:hover,
.navbar.pagina-interna .nav-logo:hover { background: transparent; color: var(--siena) !important; }

.nav-menu {
    align-items: center;
    display:     flex;
    gap:         32px;
}

.nav-link {
    border-radius: 3px;
    color:         var(--blanco);
    font-size:     13px;
    font-weight:   700;
    letter-spacing: 1.8px;
    padding:       4px 9px;
    text-transform: uppercase;
    transition:    color var(--transicion), background var(--transicion);
}
.navbar.scrolled .nav-link,
.navbar.pagina-interna .nav-link { color: var(--texto); }

.nav-link:hover,
.nav-link.activo { background: rgba(255,255,255,0.22); color: var(--siena) !important; }
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.activo,
.navbar.pagina-interna .nav-link:hover,
.navbar.pagina-interna .nav-link.activo { background: transparent; color: var(--siena) !important; }

/* Botón hamburguesa (móvil) */
.nav-hamburger {
    background:      none;
    border:          none;
    cursor:          pointer;
    display:         none;
    flex-direction:  column;
    gap:             5px;
    padding:         4px;
    z-index:         1001;
}
.nav-hamburger span {
    background:    var(--blanco);
    border-radius: 2px;
    display:       block;
    height:        2px;
    transition:    all var(--transicion);
    width:         26px;
}
.navbar.scrolled .nav-hamburger span,
.navbar.pagina-interna .nav-hamburger span { background: var(--texto); }

/* Animación X al abrir */
.nav-hamburger.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.abierto span:nth-child(2) { opacity: 0; }
.nav-hamburger.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── 7. HERO PRINCIPAL (INDEX) ───────────────────────────────── */

.hero-index {
    align-items:     center;
    display:         flex;
    height:          100vh;
    justify-content: center;
    min-height:      620px;
    overflow:        hidden;
    position:        relative;
}

/* Imagen de fondo con parallax via JS */
.hero-bg {
    background-image:    url('../img/amarrojas-recorte-las-pinturas-de-la-bego-fondo_mtnc.jpg');
    background-position: center;
    background-size:     cover;
    inset:               0;
    position:            absolute;
    will-change:         transform;
}
/* Capa de oscurecimiento sobre la imagen */
.hero-bg::after {
    background: linear-gradient(
        160deg,
        rgba(44,24,16,0.5)  0%,
        rgba(44,24,16,0.25) 50%,
        rgba(44,24,16,0.65) 100%
    );
    content:  '';
    inset:    0;
    position: absolute;
}

.hero-contenido {
    max-width:  1100px;
    padding:    0 12px;
    position:   relative;
    text-align: center;
    z-index:    1;
}

.hero-nombre {
    color:          #dedad7;
    font-family:    var(--fuente-logo);
    font-size:      clamp(2rem, 5.5vw, 4.6rem);
    font-weight:    400;
    letter-spacing: -0.5px;
    margin-bottom:  20px;
    text-shadow:    0 2px 6px rgba(0,0,0,0.45), 0 4px 32px rgba(0,0,0,0.3);
}

.hero-subtitulo {
    color:         #f0ece8;
    font-family:   var(--fuente-deco);
    font-size:     clamp(1.1rem, 2.5vw, 1.6rem);
    line-height:   1.55;
    margin:        0 auto 40px;
    max-width:     640px;
    text-shadow:   0 2px 6px rgba(0,0,0,0.45), 0 4px 32px rgba(0,0,0,0.3);
}

.hero-cta {
    display:         flex;
    flex-wrap:       wrap;
    gap:             16px;
    justify-content: center;
}
/* Color diferenciado al hacer hover sobre el botón principal del hero */
.hero-cta .btn-principal:hover {
    background:   #c76538;
    border-color: #c76538;
    color:        var(--blanco);
}

/* Indicador de scroll animado */
.hero-scroll {
    align-items:    center;
    animation:      scrollBounce 2.2s infinite;
    bottom:         32px;
    color:          rgba(255,255,255,0.65);
    display:        flex;
    flex-direction: column;
    font-size:      0.7rem;
    gap:            8px;
    left:           50%;
    letter-spacing: 2.5px;
    position:       absolute;
    text-transform: uppercase;
    transform:      translateX(-50%);
    z-index:        1;
}
.hero-scroll svg { stroke: rgba(255,255,255,0.65); }

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}


/* ── 8. HERO PEQUEÑO (PÁGINAS INTERNAS) ─────────────────────── */

.hero-pequeno {
    background:    linear-gradient(135deg, var(--crema-oscuro) 0%, var(--crema) 100%);
    border-bottom: 1px solid var(--crema-borde);
    overflow:      hidden;
    padding:       128px 20px 64px;
    position:      relative;
    text-align:    center;
}
/* Círculo decorativo de fondo */
.hero-pequeno::before {
    background:    var(--ocre);
    border-radius: 50%;
    content:       '';
    height:        400px;
    opacity:       0.06;
    position:      absolute;
    right:         -100px;
    top:           -200px;
    width:         400px;
}
.hero-pequeno h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 12px; }
.hero-pequeno p  { color: var(--texto-suave); font-size: 1.05rem; margin: 0 auto; max-width: 520px; }


/* ── 9. SECCIONES HOME ───────────────────────────────────────── */

.seccion-home { padding: var(--padding-sec); }
.seccion-home.bg-alt { background: var(--crema-oscuro); }


/* ── 10. TARJETAS PREVIEW ────────────────────────────────────── */

.grid-preview {
    display:               grid;
    gap:                   26px;
    grid-template-columns: repeat(3, 1fr);
}

.card-preview {
    background:    var(--blanco);
    border-radius: var(--radio-grande);
    box-shadow:    var(--sombra-suave);
    overflow:      hidden;
    transition:    transform var(--transicion), box-shadow var(--transicion);
}
.card-preview:hover { box-shadow: var(--sombra-hover); transform: translateY(-7px); }

.card-preview-img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.card-preview-img {
    height:     100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    width:      100%;
}
.card-preview:hover .card-preview-img { transform: scale(1.06); }

.card-preview-cuerpo { padding: 22px 26px 28px; }

.card-preview-cat {
    color:          var(--ocre);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 2px;
    margin-bottom:  8px;
    text-transform: uppercase;
}

.card-preview-titulo {
    font-size:     1.18rem;
    line-height:   1.35;
    margin-bottom: 10px;
}

.card-preview-texto {
    -webkit-box-orient:  vertical;
    -webkit-line-clamp:  3;
    color:               var(--texto-suave);
    display:             -webkit-box;
    font-size:           0.9rem;
    line-height:         1.65;
    margin-bottom:       18px;
    overflow:            hidden;
}

.card-preview-enlace {
    align-items: center;
    color:       var(--siena);
    display:     inline-flex;
    font-size:   0.85rem;
    font-weight: 700;
    gap:         6px;
    transition:  gap var(--transicion);
}
.card-preview-enlace:hover { gap: 12px; }


/* ── 11. BANDA CTA ───────────────────────────────────────────── */

.banda-cta {
    background:  linear-gradient(135deg, var(--siena) 0%, #6B3010 100%);
    padding:     72px 20px;
    text-align:  center;
}
.banda-cta h2 { color: var(--blanco); font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 16px; }
.banda-cta p  { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin: 0 auto 36px; max-width: 520px; }

/* El botón del CTA arranca transparente con borde blanco */
.banda-cta .btn-principal {
    background:   transparent;
    border-color: #fff;
    color:        #fff;
}
.banda-cta .btn-principal:hover {
    background:   #fff;
    border-color: #fff;
    color:        var(--siena);
}


/* ── 12. ACERCA DE MÍ ────────────────────────────────────────── */

.seccion-bio { padding: var(--padding-sec); }

.bio-wrap { margin: 0 auto; max-width: 740px; }

/* Clearfix para el float de la foto */
.bio-clearfix::after { clear: both; content: ''; display: table; }

.bio-foto-wrap {
    border-radius: 14px;
    box-shadow:    var(--sombra);
    float:         right;
    margin:        6px 0 28px 44px;
    overflow:      hidden;
    width:         min(260px, 38%);
}
.bio-foto-wrap img { display: block; height: auto; width: 100%; }

.bio-texto {
    color:       var(--texto-suave);
    font-size:   1.07rem;
    line-height: 1.95;
}
.bio-texto p              { margin-bottom: 1.5em; }
.bio-texto p:first-of-type { color: var(--texto); font-size: 1.12rem; }

/* Capital inicial decorativa en el primer párrafo */
.bio-texto p:first-of-type::first-letter {
    color:       var(--siena);
    float:       left;
    font-family: var(--fuente-deco);
    font-size:   3.8rem;
    line-height: 0.82;
    margin:      4px 10px 0 0;
}
/* Último párrafo en cursiva decorativa */
.bio-texto p:last-of-type {
    color:         var(--siena);
    font-family:   var(--fuente-deco);
    font-size:     1.5rem;
    margin-bottom: 0;
    margin-top:    8px;
}

.bio-cta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        14px;
    margin-top: 44px;
}

/* Bloque de la artista en el index */
.seccion-artista {
    background:  var(--crema-oscuro);
    padding:     72px 20px;
    text-align:  center;
}
.artista-inner {
    margin:    0 auto;
    max-width: 600px;
}
.artista-nombre {
    color:         var(--siena);
    font-family:   var(--fuente-deco);
    font-size:     clamp(2rem, 4vw, 2.8rem);
    font-weight:   400;
    margin:        6px 0 20px;
}
.artista-bio {
    color:         var(--texto-suave);
    font-size:     1.05rem;
    line-height:   1.78;
    margin-bottom: 32px;
}


/* ── 13. GALERÍA MASONRY ─────────────────────────────────────── */

.seccion-portfolio { padding: var(--padding-sec); }
.seccion-portfolio > .contenedor { max-width: 100%; padding: 0 32px; }

/* Botones de filtro */
.filtros {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
    margin-bottom:   44px;
}
.filtro-btn {
    background:    transparent;
    border:        1.5px solid var(--crema-borde);
    border-radius: 50px;
    color:         var(--texto-suave);
    cursor:        pointer;
    font-family:   var(--fuente-cuerpo);
    font-size:     0.87rem;
    padding:       8px 24px;
    transition:    all var(--transicion);
}
.filtro-btn.activo,
.filtro-btn:hover { background: var(--siena); border-color: var(--siena); color: var(--blanco); }

/* Columnas CSS para efecto masonry */
.galeria-masonry {
    align-items: flex-start;
    display:     flex;
    gap:         20px;
}

.galeria-col {
    display:        flex;
    flex:           1;
    flex-direction: column;
    gap:            16px;
    min-width:      0;
}

.galeria-item {
    background:    var(--crema-oscuro);
    border-radius: var(--radio);
    cursor:        pointer;
    overflow:      hidden;
    position:      relative;
}
.galeria-item img {
    display:    block;
    height:     auto;
    transition: transform 0.55s ease;
    width:      100%;
}
.galeria-item:hover img { transform: scale(1.05); }

/* Capa de información al hacer hover */
.galeria-overlay {
    background:     linear-gradient(to top, rgba(44,24,16,0.8) 0%, transparent 60%);
    display:        flex;
    flex-direction: column;
    inset:          0;
    justify-content: flex-end;
    opacity:        0;
    padding:        20px;
    position:       absolute;
    transition:     opacity var(--transicion);
}
.galeria-item:hover .galeria-overlay { opacity: 1; }

.galeria-overlay-titulo {
    color:       var(--blanco);
    font-family: var(--fuente-titulo);
    font-size:   1.05rem;
    margin-bottom: 4px;
}
.galeria-overlay-cat {
    color:          var(--ocre);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Icono de lupa */
.galeria-zoom {
    align-items:     center;
    background:      rgba(255,255,255,0.15);
    border-radius:   50%;
    color:           var(--blanco);
    display:         flex;
    height:          36px;
    justify-content: center;
    opacity:         0;
    position:        absolute;
    right:           14px;
    top:             14px;
    transition:      opacity var(--transicion);
    width:           36px;
}
.galeria-item:hover .galeria-zoom { opacity: 1; }


/* ── 14. LIGHTBOX ────────────────────────────────────────────── */

.lightbox {
    background:     rgba(10,5,2,0.94);
    display:        flex;
    flex-direction: column;
    inset:          0;
    opacity:        0;
    pointer-events: none;
    position:       fixed;
    transition:     opacity 0.3s ease;
    z-index:        2000;
}
.lightbox.activo { opacity: 1; pointer-events: all; }

/* Área de imagen — scrollable en modo zoom */
.lightbox-area {
    align-items:     center;
    display:         flex;
    flex:            1;
    justify-content: center;
    min-height:      0;
    overflow:        hidden;
    padding:         60px 80px 12px;
}
.lightbox.zoom-activo .lightbox-area {
    align-items:     flex-start;
    justify-content: flex-start;
    overflow-x:      hidden;
    overflow-y:      auto;
    padding:         0;
}
.lightbox.zoom-activo #lb-img {
    border-radius: 0;
    height:        auto;
    margin:        0;
    width:         100%;
}

/* Imagen principal */
#lb-img {
    box-shadow:  0 24px 80px rgba(0,0,0,0.5);
    cursor:      zoom-in;
    display:     block;
    flex-shrink: 0;
    max-height:  100%;
    max-width:   100%;
    object-fit:  contain;
    border-radius: var(--radio);
    transition:  opacity 0.2s ease;
}
.lightbox.zoom-activo #lb-img {
    cursor:     zoom-out;
    max-height: none;
    max-width:  none;
}

/* Pie de foto */
.lightbox-pie {
    align-items:     center;
    background:      rgba(10,5,2,0.7);
    display:         flex;
    flex-direction:  column;
    flex-shrink:     0;
    gap:             3px;
    justify-content: center;
    min-height:      88px;
    padding:         14px 80px 18px;
    text-align:      center;
}
.lightbox-pie strong { color: var(--blanco); font-family: var(--fuente-titulo); font-size: 1.05rem; }
#lb-meta    { color: rgba(255,255,255,0.55); font-size: 0.76rem; letter-spacing: 0.8px; }
#lb-leyenda { color: rgba(255,255,255,0.45); font-size: 0.78rem; font-style: italic; max-width: 560px; }

/* Botones de control (fixed para no interferir con el scroll) */
.lightbox-cerrar,
.lightbox-prev,
.lightbox-next,
.lightbox-zoom-btn {
    align-items:  center;
    background:   rgba(255,255,255,0.08);
    border:       1.5px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    color:        var(--blanco);
    cursor:       pointer;
    display:      flex;
    justify-content: center;
    line-height:  1;
    position:     fixed;
    transition:   background var(--transicion), border-color var(--transicion);
    z-index:      2001;
}
.lightbox-cerrar:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-zoom-btn:hover  { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.lightbox-zoom-btn.activo { background: rgba(196,149,106,0.25); border-color: var(--ocre); }

.lightbox-cerrar   { font-size: 1.4rem; height: 44px; right: 20px; top: 20px; width: 44px; }
.lightbox-prev     { font-size: 1.5rem; height: 48px; left: 16px;  top: 50%; transform: translateY(-50%); width: 48px; }
.lightbox-next     { font-size: 1.5rem; height: 48px; right: 16px; top: 50%; transform: translateY(-50%); width: 48px; }
.lightbox-zoom-btn { bottom: 100px; height: 44px; right: 20px; width: 44px; }


/* ── 15. BLOG — TARJETAS (TRUCOS / EXPOSICIONES) ────────────── */

.seccion-blog { padding: var(--padding-sec); }

.grid-blog {
    display:               grid;
    gap:                   36px;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.card-blog {
    background:     var(--blanco);
    border-radius:  var(--radio-grande);
    box-shadow:     var(--sombra-suave);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    transition:     transform var(--transicion), box-shadow var(--transicion);
}
.card-blog:hover { box-shadow: var(--sombra-hover); transform: translateY(-7px); }

.card-blog-img-wrap { aspect-ratio: 16/9; flex-shrink: 0; overflow: hidden; }
.card-blog-img {
    height:     100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    width:      100%;
}
.card-blog:hover .card-blog-img { transform: scale(1.06); }

.card-blog-cuerpo {
    display:        flex;
    flex:           1;
    flex-direction: column;
    padding:        28px;
}

.card-blog-meta {
    align-items:   center;
    display:       flex;
    gap:           12px;
    margin-bottom: 14px;
}

.card-blog-badge {
    background:     var(--siena);
    border-radius:  50px;
    color:          var(--blanco);
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 2px;
    padding:        4px 12px;
    text-transform: uppercase;
}

.card-blog-fecha { color: var(--texto-suave); font-size: 0.82rem; }

.card-blog-titulo { font-size: 1.32rem; line-height: 1.35; margin-bottom: 12px; }
.card-blog-titulo a:hover { color: var(--siena); }

.card-blog-extracto {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color:              var(--texto-suave);
    display:            -webkit-box;
    flex:               1;
    font-size:          0.92rem;
    line-height:        1.7;
    margin-bottom:      20px;
    overflow:           hidden;
}

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

.card-blog-autor {
    align-items: center;
    color:       var(--texto-suave);
    display:     flex;
    font-size:   0.85rem;
    gap:         8px;
}
.card-blog-autor strong { color: var(--texto); font-weight: 700; }

.card-blog-leer-mas {
    align-items: center;
    color:       var(--siena);
    display:     inline-flex;
    font-size:   0.85rem;
    font-weight: 700;
    gap:         6px;
    transition:  gap var(--transicion);
}
.card-blog-leer-mas:hover { gap: 12px; }


/* ── 16. CONTACTO ────────────────────────────────────────────── */

.seccion-contacto { padding: var(--padding-sec); }

.contacto-grid {
    align-items:           start;
    display:               grid;
    gap:                   72px;
    grid-template-columns: 1fr 1.7fr;
}

.contacto-dato {
    align-items:   flex-start;
    display:       flex;
    gap:           16px;
    margin-bottom: 24px;
}

.contacto-icono {
    align-items:     center;
    background:      var(--crema-oscuro);
    border-radius:   50%;
    color:           var(--siena);
    display:         flex;
    flex-shrink:     0;
    height:          46px;
    justify-content: center;
    width:           46px;
}
.contacto-icono svg { height: 20px; width: 20px; }

.contacto-dato-txt strong { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; }
.contacto-dato-txt span   { color: var(--texto-suave); font-size: 0.9rem; }

.contacto-redes-titulo {
    color:          var(--texto-suave);
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    margin-bottom:  8px;
    margin-top:     32px;
    text-transform: uppercase;
}
.contacto-redes { display: flex; gap: 12px; margin-top: 0; }

.contacto-red {
    align-items:     center;
    border:          1.5px solid var(--crema-borde);
    border-radius:   50%;
    color:           var(--texto-suave);
    display:         flex;
    height:          40px;
    justify-content: center;
    transition:      all var(--transicion);
    width:           40px;
}
.contacto-red svg { fill: currentColor; height: 16px; width: 16px; }
.contacto-red:hover {
    background:    var(--siena);
    border-color:  var(--siena);
    color:         var(--blanco);
    transform:     translateY(-3px);
}

/* Formulario */
.formulario {
    background:    var(--blanco);
    border-radius: var(--radio-grande);
    box-shadow:    var(--sombra);
    padding:       52px;
}

.form-fila {
    display:               grid;
    gap:                   20px;
    grid-template-columns: 1fr 1fr;
}

.form-grupo { margin-bottom: 22px; }

.form-grupo label {
    color:          var(--texto);
    display:        block;
    font-size:      0.85rem;
    font-weight:    700;
    letter-spacing: 0.5px;
    margin-bottom:  8px;
}

.form-grupo input,
.form-grupo textarea,
.form-grupo select {
    appearance:   none;
    background:   var(--crema);
    border:       1.5px solid var(--crema-borde);
    border-radius: var(--radio);
    color:        var(--texto);
    font-family:  var(--fuente-cuerpo);
    font-size:    0.95rem;
    outline:      none;
    padding:      13px 16px;
    transition:   border-color var(--transicion), background var(--transicion);
    width:        100%;
}
.form-grupo input:focus,
.form-grupo textarea:focus,
.form-grupo select:focus { background: var(--blanco); border-color: var(--ocre); }

.form-grupo textarea { min-height: 136px; resize: vertical; }

.form-grupo.error input,
.form-grupo.error textarea { border-color: #c0392b; }

.form-error {
    color:    #c0392b;
    display:  none;
    font-size: 0.78rem;
    margin-top: 6px;
}
.form-grupo.error .form-error { display: block; }

.form-aviso {
    border-radius: var(--radio);
    display:       none;
    font-size:     0.92rem;
    margin-bottom: 20px;
    padding:       14px 18px;
}
.form-aviso.ok  { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; display: block; }
.form-aviso.err { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; display: block; }


/* ── 17. FOOTER ──────────────────────────────────────────────── */

.footer {
    background: var(--negro);
    color:      rgba(255,255,255,0.7);
    padding:    72px 20px 32px;
}

.footer-grid {
    display:               grid;
    gap:                   56px;
    grid-template-columns: 1.6fr 1fr 1fr;
    margin:                0 auto 56px;
    max-width:             var(--max-ancho);
}

.footer-logo {
    color:         var(--blanco);
    display:       block;
    font-family:   var(--fuente-logo);
    font-size:     1.4rem;
    margin-bottom: 16px;
}
.footer-desc { font-size: 0.9rem; line-height: 1.85; margin-bottom: 20px; }
.footer-redes-titulo {
    color:          rgba(255,255,255,0.45);
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    margin-bottom:  10px;
    text-transform: uppercase;
}

/* Iconos de redes en el footer */
.footer-redes { display: flex; gap: 10px; }
.footer-red {
    align-items:     center;
    border:          1px solid rgba(255,255,255,0.18);
    border-radius:   50%;
    color:           rgba(255,255,255,0.65);
    display:         flex;
    height:          38px;
    justify-content: center;
    transition:      all var(--transicion);
    width:           38px;
}
.footer-red svg { fill: currentColor; height: 16px; width: 16px; }
.footer-red:hover {
    background:   var(--siena);
    border-color: var(--siena);
    color:        var(--blanco);
    transform:    translateY(-3px);
}

.footer-col h4 {
    color:         var(--blanco);
    font-family:   var(--fuente-titulo);
    font-size:     1rem;
    margin-bottom: 22px;
}

.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
    color:      rgba(255,255,255,0.6);
    font-size:  0.88rem;
    transition: color var(--transicion), padding-left var(--transicion);
}
.footer-nav a:hover { color: var(--ocre); padding-left: 6px; }

/* Newsletter en el footer */
.footer-newsletter input[type=email] {
    background:  rgba(255,255,255,0.07);
    border:      1px solid rgba(255,255,255,0.18);
    border-radius: var(--radio);
    color:       var(--blanco);
    font-family: var(--fuente-cuerpo);
    font-size:   .88rem;
    margin-bottom: 10px;
    outline:     none;
    padding:     9px 14px;
    transition:  border-color var(--transicion), background var(--transicion);
    width:       100%;
}
.footer-newsletter input[type=email]::placeholder { color: rgba(255,255,255,0.38); }
.footer-newsletter input[type=email]:focus {
    background:   rgba(255,255,255,0.12);
    border-color: var(--ocre);
}
.footer-newsletter button {
    background:    var(--siena);
    border:        none;
    border-radius: var(--radio);
    color:         var(--blanco);
    cursor:        pointer;
    font-family:   var(--fuente-titulo);
    font-size:     .88rem;
    padding:       9px 14px;
    transition:    background var(--transicion);
    width:         100%;
}
.footer-newsletter button:hover { background: var(--siena-claro); }

.newsletter-aviso {
    font-size:   .8rem;
    line-height: 1.4;
    margin-top:  10px;
    min-height:  18px;
}
.newsletter-aviso.ok  { color: #a8e6b8; }
.newsletter-aviso.err { color: #f5a5a5; }

/* Barra inferior del footer */
.footer-bottom {
    align-items:   center;
    border-top:    1px solid rgba(255,255,255,0.08);
    color:         rgba(255,255,255,0.35);
    display:       flex;
    flex-wrap:     wrap;
    font-size:     0.8rem;
    gap:           12px;
    justify-content: space-between;
    margin:        0 auto;
    max-width:     var(--max-ancho);
    padding-top:   28px;
}


/* ── 18. PÁGINA 404 ──────────────────────────────────────────── */

.pagina-404 {
    align-items:     center;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    min-height:      100vh;
    padding:         40px 20px;
    text-align:      center;
}
.pagina-404 .num { color: var(--crema-borde); font-family: var(--fuente-titulo); font-size: clamp(6rem, 16vw, 12rem); line-height: 1; margin-bottom: 0; }
.pagina-404 h1   { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 16px; }
.pagina-404 p    { color: var(--texto-suave); margin-bottom: 36px; max-width: 400px; }


/* ── 19. RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 1024px) {
    .contacto-grid   { gap: 44px; grid-template-columns: 1fr; }
    .footer-grid     { gap: 36px; grid-template-columns: 1fr 1fr; }
    .form-fila       { gap: 0; grid-template-columns: 1fr; }
    .galeria-masonry { gap: 12px; }
    .grid-preview    { grid-template-columns: repeat(2, 1fr); }
    .seccion-portfolio > .contenedor { padding: 0 20px; }
}

@media (max-width: 768px) {
    :root { --padding-sec: 64px 20px; }

    /* Menú mobile — panel lateral */
    .nav-menu {
        align-items:    flex-start;
        background:     var(--crema);
        box-shadow:     -6px 0 32px rgba(0,0,0,0.12);
        flex-direction: column;
        gap:            22px;
        height:         100vh;
        justify-content: flex-start;
        padding:        88px 32px 32px;
        position:       fixed;
        right:          -100%;
        top:            0;
        transition:     right var(--transicion);
        width:          min(300px, 82vw);
        z-index:        999;
    }
    .nav-menu.abierto { right: 0; }
    .nav-link { color: var(--texto) !important; font-size: 1.05rem; }
    .nav-hamburger { display: flex; }

    .formulario      { padding: 28px 20px; }
    .footer-grid     { gap: 36px; grid-template-columns: 1fr; }
    .galeria-masonry { gap: 8px; }
    .galeria-col     { gap: 8px; }
    .grid-blog       { grid-template-columns: 1fr; }
    .grid-preview    { grid-template-columns: 1fr; }
    .hero-cta        { align-items: center; flex-direction: column; }
    .lightbox-prev,
    .lightbox-next   { display: none; }
    .seccion-portfolio > .contenedor { padding: 0 10px; }
}

@media (max-width: 580px) {
    .bio-cta      { justify-content: center; }
    .bio-foto-wrap { float: none; margin: 0 auto 36px; max-width: 320px; width: 100%; }
}

@media (max-width: 480px) {
    .galeria-masonry { gap: 6px; }
    .galeria-col     { gap: 6px; }
    .seccion-portfolio > .contenedor { padding: 0 6px; }
}

/* ── Páginas legales ────────────────────────────────────────── */
.legal-contenido {
    max-width: 740px;
    margin: 0 auto;
    padding: 48px 0 64px;
}
.legal-contenido h2 {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    color: var(--siena);
    margin: 36px 0 10px;
}
.legal-contenido h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--texto);
}
.legal-contenido p,
.legal-contenido li { line-height: 1.75; color: var(--texto); margin-bottom: 10px; }
.legal-contenido ul  { padding-left: 20px; }
.legal-contenido a   { color: var(--siena); text-decoration: underline; }
.legal-fecha { font-size: .82rem; color: var(--gris); margin-top: 48px; }
.legal-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin: 14px 0 24px;
}
.legal-tabla th,
.legal-tabla td { padding: 8px 12px; border: 1px solid #e0d8d0; text-align: left; }
.legal-tabla th  { background: #f4f1ec; font-weight: 700; }
.legal-tabla code { font-size: .8rem; background: #f4f1ec; padding: 1px 5px; border-radius: 3px; }

/* ── Footer legal links ─────────────────────────────────────── */
.footer-bottom { justify-content: space-between; }
.footer-bottom > span:first-child { flex: 1; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; justify-content: center; }
.footer-legal a { color: rgba(255,255,255,.55); font-size: .78rem; text-decoration: none; transition: color .15s; }
.footer-legal a:hover { color: #fff; }
.footer-hecho { flex: 1; text-align: right; }

/* ── Cookie banner ──────────────────────────────────────────── */
#cookie-banner {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    background: #2c1810;
    color:      #f0ece8;
    padding:    16px 28px;
    display:    flex;
    align-items: center;
    gap:        28px;
    z-index:    9999;
    font-size:  .85rem;
    line-height: 1.55;
    box-shadow: 0 -2px 16px rgba(0,0,0,.3);
}
.cookie-texto      { flex: 1; }
.cookie-texto a    { color: #d4a96a; text-decoration: underline; }
.cookie-acciones   { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
    padding:     8px 20px;
    border:      none;
    border-radius: 5px;
    cursor:      pointer;
    font-size:   .82rem;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    transition:  .15s;
}
.cookie-btn-ok  { background: var(--siena); color: #fff; }
.cookie-btn-ok:hover { background: var(--siena-claro); }
.cookie-btn-sec { background: transparent; border: 2px solid rgba(255,255,255,.4); color: #f0ece8; }
.cookie-btn-sec:hover { border-color: #f0ece8; }
@media (max-width: 600px) {
    #cookie-banner   { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 20px; }
    .cookie-acciones { width: 100%; justify-content: flex-end; }
}