/*
 Theme Name:   Mallorcapura Theme
 Theme URI:    https://mallorcapura.es/
 Description:  Tema a medida para Mallorcapura basado en GeneratePress. Sin page builders, 100% optimizado para SEO y velocidad.
 Author:       Balear Digital
 Author URI:   https://baleardigital.com
 Template:     generatepress
 Version:      1.0.50
 Text Domain:  mallorcapura
*/

/* HOME — Sección "Nuestra filosofía" (antes con estilos inline en template-home.php;
   movidos aquí 23-jul-2026: el grid inline pisaba el responsive — regla del proyecto). */
.home-filo-section { background-color: var(--color-bg-base); padding: 90px 0; }
.home-filo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.home-filo-img { height: 100%; }
@media (max-width: 900px) {
    .home-filo-section { padding: 60px 0; }
    .home-filo-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Scroll SUAVE global para los enlaces de ancla (botones que saltan a una sección más abajo:
   #contacto, #rutas, #personalizado, #faq…). Antes el salto era instantáneo y despistaba.
   :target compensa la cabecera fija (~100px) para que la sección no quede tapada por el menú.
   Se respeta la preferencia de accesibilidad "reducir movimiento". */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------------------- *
 * SISTEMA DE DISEÑO - PREMIUM AESTHETICS (MALLORCAPURA)
 * ------------------------------------------------------------------------- */
/* Ms Madi ahora AUTO-HOSPEDADA en assets/fonts/fonts.css (DSGVO, 17-jul-2026) */

:root {    /* Paleta de Colores - Nueva Paleta Orgánica (Wabi-Sabi) */
    --color-primary: #6B8EAA;       /* Nuevo Azul Mediterráneo */
    --color-primary-light: #A3B9C7; /* Azul Mediterráneo claro */
    --color-secondary: #D97650;     /* Nuevo Naranja / Terracota */
    --color-secondary-hover: #C0603D;
    --color-accent: #E5DCD3;        /* Piedra */
    
    /* Neutros y Fondos */
    --color-bg-base: #FFFFFF;       /* Blanco base (con textura) */
    --color-bg-alt: #F4EFEA;        /* Arena */
    --color-bg-dark: #2C363F;       /* Gris antracita */
    
    /* Textos */
    --color-text-main: #4A5559;     /* Gris pizarra */
    --color-text-muted: #6C7A80;
    --color-text-light: #FFFFFF;

    /* Tipografías Modernas */
    --font-heading: 'Playfair Display', serif; /* Elegancia para títulos */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Limpieza y legibilidad */
    
    /* Sombras y Efectos Premium */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Bordes y Estructura */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
}

/* ------------------------------------------------------------------------- *
 * RESET Y ESTILOS GLOBALES
 * ------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden;
}
/* 21-ago: `overflow-x: hidden` en html/body convierte la página en un contenedor de
   scroll y ANULA position:sticky — por eso el menú fijo no se quedaba arriba. `clip`
   corta igual el desbordamiento lateral pero NO crea ese contenedor, así que el menú
   funciona. Los navegadores que no lo soporten se quedan con hidden (sin menú fijo,
   pero sin scroll lateral). */
@supports (overflow-x: clip) {
    html, body {
        overflow-x: clip;
    }
}

body {
    background-color: var(--color-bg-base);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    color: var(--color-text-main);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.has-playfair-font {
    font-family: var(--font-heading);
    color: var(--color-primary); /* Azul de los títulos */
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Botones Premium */
.button, 
.wp-block-button__link {
    background-color: var(--color-secondary);
    color: #ffffff;
    border-radius: 0;
    padding: 12px 28px;
    font-weight: 400;
    transition: var(--transition-smooth);
    border: none;
    box-shadow: var(--shadow-sm);
}

.button:hover, 
.wp-block-button__link:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.button.secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.button.secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* ------------------------------------------------------------------------- *
 * BLOQUES Y COMPONENTES
 * ------------------------------------------------------------------------- */

/* === 0. RESET HOME GENERATEPRESS === */
.home .site-content,
body.page-template-page-contacto-php .site-content,
body.page-template-page-reformas-php .site-content,
body.page-template-page-decoracion-php .site-content,
body.page-template-page-proyectos-php .site-content,
body.page-template-page-asesoria-acompanamiento-php .site-content,
body.page-template-page-asesoria-inicial-php .site-content,
body.page-template-page-asesoria-materiales-php .site-content,
body.page-template-page-rutas-guiadas-php .site-content,
body.page-template-page-personal-shopper-php .site-content,
body.page-template-page-juntas-compras-php .site-content,
body.page-template-page-sobre-nosotros-php .site-content,
body.page-template-page-sobre-claudio-php .site-content,
body.post-type-archive-proyecto .site-content,
body.single-proyecto .site-content,
body.blog .site-content,
body.single-post .site-content,
body.archive.category .site-content,
body.archive.tag .site-content,
body.archive.date .site-content,
body.archive.author .site-content,
body.search .site-content,
body.error404 .site-content {
    padding: 0 !important;
}
.home .site-main, .home .entry-content,
.mp-services-page,
.mp-contact-page,
.mp-projects-archive,
body.page-template-page-contacto-php .site-main,
body.page-template-page-reformas-php .site-main,
body.page-template-page-decoracion-php .site-main,
body.page-template-page-proyectos-php .site-main,
body.page-template-page-asesoria-acompanamiento-php .site-main,
body.page-template-page-asesoria-inicial-php .site-main,
body.page-template-page-asesoria-materiales-php .site-main,
body.page-template-page-rutas-guiadas-php .site-main,
body.page-template-page-personal-shopper-php .site-main,
body.page-template-page-juntas-compras-php .site-main,
body.page-template-page-sobre-nosotros-php .site-main,
body.page-template-page-sobre-claudio-php .site-main,
body.post-type-archive-proyecto .site-main,
body.single-proyecto .site-main,
body.blog .site-main,
body.single-post .site-main,
body.archive.category .site-main,
body.archive.tag .site-main,
body.archive.date .site-main,
body.archive.author .site-main,
body.search .site-main,
body.error404 .site-main,
.mp-blog-index,
.mp-single-post {
    margin: 0 !important;
}
.home .site-main > *,
.mp-services-page > *,
.mp-contact-page > *,
body.page-template-page-contacto-php .site-main > *,
body.page-template-page-reformas-php .site-main > *,
body.page-template-page-decoracion-php .site-main > *,
body.page-template-page-proyectos-php .site-main > *,
body.page-template-page-asesoria-acompanamiento-php .site-main > *,
body.page-template-page-asesoria-inicial-php .site-main > *,
body.page-template-page-asesoria-materiales-php .site-main > *,
body.page-template-page-rutas-guiadas-php .site-main > *,
body.page-template-page-personal-shopper-php .site-main > *,
body.page-template-page-juntas-compras-php .site-main > *,
body.page-template-page-sobre-nosotros-php .site-main > *,
body.page-template-page-sobre-claudio-php .site-main > *,
body.post-type-archive-proyecto .site-main > *,
body.single-proyecto .site-main > *,
body.blog .site-main > *,
body.single-post .site-main > *,
body.archive.category .site-main > *,
body.archive.tag .site-main > *,
body.archive.date .site-main > *,
body.archive.author .site-main > * {
    margin-bottom: 0 !important;
}

/* === 1. TOP BAR & HEADER === */
.mp-top-bar {
    background-color: var(--color-primary); /* Verde Oliva */
    color: #fff;
    padding: 8px 0;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.mp-top-bar-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
}
.mp-top-bar-social a {
    color: #fff;
    margin-left: 15px;
    text-decoration: none;
    opacity: 0.8;
    transition: var(--transition-smooth);
}
.mp-top-bar-social a:hover {
    opacity: 1;
}
.mp-top-bar-social svg {
    vertical-align: middle;
}
/* Estilizar el header nativo de GeneratePress */
.site-header {
    padding: 20px 40px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background-color: #fff;
    /* Menú principal FIJO al hacer scroll, como la web antigua (petición Pura, PDF 18-ago).
       sticky (no fixed): sin hueco que compensar y la top-bar social se desplaza con la página. */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}
/* Con la barra de admin de WP visible, el header se pega justo debajo de ella.
   (El caso ≤782px se resuelve al final del archivo: ahí la admin bar NO es fija.) */
.admin-bar .site-header { top: 32px; }
/* Los saltos a anclas (#faq, #servicios-detalle…) no deben quedar tapados por el
   header fijo. El header mide ~110px en escritorio y ~64px en móvil. */
html { scroll-padding-top: 110px; }
@media (max-width: 1024px) {
    html { scroll-padding-top: 80px; }
}
.main-navigation a {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--color-primary);
}

/* === 1. HERO SECTION === */
.home-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
    background-color: var(--color-bg-base);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}
.hero-image-col {
    position: relative;
    overflow: hidden;
    display: flex;
    height: 100%;
}
.hero-gallery {
    width: 100%;
    height: 100%;
    position: relative;
}
.hero-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.hero-gallery img.active {
    opacity: 1;
}
.hero-content-col {
    display: flex;
    align-items: center;
    padding: 10%;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.hero-content-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
}
.hero-subtitle {
    color: var(--color-secondary);
    font-size: 0.95rem;
    font-family: 'Playpen Sans', cursive;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    font-style: normal;
    display: block;
    margin-bottom: 15px;
}
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 50px;
}
.hero-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--color-secondary);
    opacity: 0.8;
    margin-top: 30px;
}
.hero-text {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 80%;
}

/* Botón del hero en color azul (primary) según diseño */
.home-hero .button {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.home-hero .button:hover {
    background-color: var(--color-primary-hover, var(--color-secondary));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* === 1.5. CÓMO PUEDO AYUDARTE (HOME SERVICES) === */
.home-services-3col {
    padding: 100px 20px 60px;
    background-color: var(--color-bg-base);
}
.services-3col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}
.service-col {
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 8px;
}
.service-col:hover {
    transform: translateY(-8px);
    background-color: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}
.service-icon {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}
.service-img-hover {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.service-col:hover .service-img-hover {
    transform: scale(1.1);
}
.service-col h3 {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 25px;
    text-transform: uppercase;
    font-weight: 600;
}
.service-col p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 35px;
}
.service-link {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
}
.service-col:hover .service-link {
    color: var(--color-secondary);
    padding-left: 5px;
}

@media (max-width: 992px) {
    .service-col { padding: 40px 20px; }
}
@media (max-width: 768px) {
    .services-3col-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* === 2. DESTACADOS (FEATURES) === */
.home-features,
.home .site-main > .home-features {
    background-color: var(--color-bg-alt);
    margin: 80px 0 !important;
    padding: 120px 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}
.feature-item {
    flex: 1 1 250px;
    max-width: 280px; /* Evita que crezcan demasiado si solo hay 2 */
    text-align: center;
    position: relative;
    cursor: pointer;
}
.feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -40px;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: rgba(0,0,0,0.1);
}
.feature-icon {
    height: 130px;
    width: auto;
    margin-bottom: 5px;
    mix-blend-mode: multiply; /* MAGIA: Elimina el fondo blanco de los iconos automáticamente */
}
.feature-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
    color: var(--color-primary);
}
.feature-desc {
    font-size: 0.9rem;
    color: var(--color-bg-dark);
}

/* === 3. BLOG SECTION === */
/* === 3. CONFIANZA / PUNTOS FUERTES === */
.home-trust {
    background-color: #ffffff; /* Fondo blanco */
    padding: 80px 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.trust-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Contadores */
.trust-counters {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 60px 40px;
    margin-top: 80px;
    flex-wrap: wrap;
    gap: 40px;
    background-color: var(--color-secondary); /* Naranja/Coral */
    /* Textura mediterránea sutil de olas SVG */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="18" viewBox="0 0 100 18"%3E%3Cpath fill="%23ffffff" fill-opacity="0.1" d="M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C96 6.16 92.4 7 89.24 8.4c-2.72 1.2-5.1 3.05-8.8 6.64-5.32 5.14-8.1 7.23-11.83 8.78-4.25 1.76-9.15 2.18-14.93 2.18H0V20h53.68c5.78 0 10.68-.42 14.93-2.18zM0 0h53.68c5.78 0 10.68.42 14.93 2.18 3.73 1.55 6.5 3.64 11.83 8.78 3.7 3.59 6.08 5.44 8.8 6.64 3.16 1.39 6.76 2.24 10.76 2.24V13.84c-6.25 0-11.44-1.16-16.13-3.42-3.53-1.68-5.87-3.34-10.75-7.24C68.68 1.45 65.29-.88 61.82-.88z"/%3E%3C/svg%3E');
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md);
    color: white;
}

.counter-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter-number {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.15);
}

.counter-label {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.95);
}

/* Puntos Fuertes */
.strengths-header {
    text-align: center;
    margin-bottom: 50px;
}

.strengths-header h2 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.strengths-header p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* --- Slider Puntos Fuertes Premium --- */
.strengths-slider {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    background-color: transparent;
}

.strength-slide {
    display: none;
    align-items: center;
    padding: 60px 60px 140px 60px; /* Increased bottom padding to fit slider controls */
    opacity: 0;
    transition: opacity 0.6s ease;
}

.strength-slide.active {
    display: flex;
    opacity: 1;
    animation: slideFadeIn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.strength-slide-content {
    flex: 1;
    padding-right: 60px;
}

.strength-slide-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.strength-slide-image img,
.strength-slide-image svg {
    height: 420px; /* Tamaño mucho más grande para que se aprecie bien */
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    animation: floatImage 8s ease-in-out infinite;
}

@keyframes floatImage {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.strength-title {
    font-family: var(--font-heading); /* Elegancia Playfair */
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 25px;
    color: var(--color-primary);
    line-height: 1.15;
}

.strength-slide-content p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.slider-controls {
    position: absolute;
    bottom: 80px;
    left: 60px;
    display: flex;
    align-items: center;
}

.slider-dots {
    display: flex;
    gap: 15px;
    margin: 0 25px;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(122, 138, 107, 0.2); /* color primary suave */
    cursor: pointer;
    transition: all 0.4s ease;
}

.slider-dot.active {
    background-color: var(--color-primary);
    transform: scale(1.5);
}

.slider-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-primary-light);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    color: var(--color-secondary);
    transform: scale(1.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .trust-counters {
        flex-direction: column;
        gap: 40px;
    }
    .strength-slide {
        flex-direction: column-reverse;
        text-align: center;
        padding: 40px 20px 100px 20px;
    }
    .strength-slide-content {
        padding-right: 0;
        margin-top: 20px;
    }
    .strength-title {
        font-size: 2.2rem;
    }
    .strength-slide-image img,
    .strength-slide-image svg {
        height: 220px;
    }
    .slider-controls {
        left: 0;
        transform: none;
        bottom: 0;
        width: 100%;
        text-align: center;
        display: block;
        padding-bottom: 20px;
    }
    .slider-controls .prev-btn,
    .slider-controls .next-btn,
    .slider-controls .slider-dots {
        display: inline-flex;
        vertical-align: middle;
    }
    .slider-controls .slider-cta-btn {
        display: block !important;
        margin: 20px auto 0 !important;
        width: fit-content;
        max-width: 90%;
        white-space: normal !important;
        line-height: 1.4;
    }
    .strengths-header h2 {
        font-size: 2rem;
    }
}

/* === 4. BLOG SECTION === */
.home-blog {
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 20px;
}
.blog-header h2 {
    color: var(--color-primary);
    font-size: 2.8rem;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
    line-height: 1.1;
}
.blog-subtitle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    font-style: normal;
    font-family: var(--font-primary);
    margin: 0;
}
.blog-link {
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 40px;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.blog-card-img {
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}
.blog-card-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
}
.blog-card:hover .blog-card-img img {
    transform: scale(1.05);
}
.blog-cat {
    color: var(--color-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.blog-card h3 {
    margin-bottom: 0;
}
.blog-card h3 a {
    color: var(--color-primary); /* Azul primario */
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1.4;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.blog-read-more {
    display: inline-block;
    margin-top: 15px;
    color: var(--color-primary-light);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
/* Pagination */
.mp-pagination {
    margin-top: 60px;
    text-align: center;
}
.mp-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 5px;
}
.mp-pagination li a, .mp-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Playpen Sans', cursive;
    transition: var(--transition-smooth);
    border-radius: 50%;
    padding: 0;
}
.mp-pagination li a:hover, .mp-pagination li span.current {
    background-color: var(--color-secondary);
    color: #fff;
}
.mp-pagination li a.next, .mp-pagination li a.prev {
    width: auto;
    border-radius: 20px;
    padding: 0 20px;
}

/* === 4. ABOUT SECTION === */
.home-about {
    background-color: var(--color-bg-alt);
    position: relative;
    overflow: hidden;
    padding: 0; /* Ancho completo real */
}

/* Background image para secciones estilo papel orgánico */
.section-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15; /* Sutil transparencia para integrar textura */
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.about-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
    margin: 0;
}

.about-img-left {
    height: 100%;
}
.about-img-left-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 500px;
}

.about-content-center {
    padding: 60px 40px;
    text-align: left;
}

.about-greeting {
    color: var(--color-primary);
    font-size: 3.5rem;
    font-family: 'Ms Madi', cursive;
    font-weight: 400;
    margin-bottom: 0;
}

.about-greeting::after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--color-secondary);
    margin: 25px 0 30px;
}

.about-text {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 40px;
}

.about-content-center .button {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
.about-content-center .button:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.about-polaroid-right {
    padding: 40px;
    display: flex;
    justify-content: flex-start;
}

.polaroid-wrapper {
    background: #fff;
    padding: 12px 12px 40px 12px;
    box-shadow: var(--shadow-md);
    transform: rotate(4deg);
    max-width: 340px;
    position: relative;
}
.polaroid-wrapper::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 25px;
    background-color: rgba(230, 220, 200, 0.7);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.polaroid-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .about-grid-new {
        grid-template-columns: 1fr;
    }
    .about-img-left-pic {
        min-height: 300px;
    }
    .about-polaroid-right {
        justify-content: center;
        padding-bottom: 60px;
    }
}

.polaroid-wrapper::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 100px;
    height: 35px;
    background: rgba(230, 220, 200, 0.85);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}

/* === 5. MOODBOARD DE PROYECTOS === */
.home-moodboard {
    background-color: var(--color-bg);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.moodboard-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}
.moodboard-header h2 {
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.moodboard-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    font-family: var(--font-body);
}
.moodboard-canvas-area {
    position: relative;
    height: 600px;
    max-width: 1200px;
    margin: 0 auto;
}
.moodboard-item {
    background: #fff;
    padding: 10px 10px 30px 10px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    position: absolute;
    width: 300px;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    user-select: none;
}
/* Washi Tape effect */
.moodboard-item::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 80px;
    height: 30px;
    background: rgba(225, 215, 200, 0.7);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 5;
    pointer-events: none;
}
.moodboard-item-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
}
.moodboard-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevents image ghosting on drag */
}
.moodboard-item-info {
    text-align: center;
}
.moodboard-item-info h3 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-text-main);
    margin-bottom: 5px;
    font-weight: 500;
}
.moodboard-link {
    font-size: 0.8rem;
    color: var(--color-secondary);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
}

.moodboard-pagination {
    text-align: center;
    margin-top: 40px;
    position: relative;
    z-index: 20;
}
.moodboard-pagination.mp-pagination li a, 
.moodboard-pagination.mp-pagination li span {
    background-color: var(--color-bg-alt);
    color: var(--color-text-main);
    border: none;
}
.moodboard-pagination.mp-pagination li a:hover, 
.moodboard-pagination.mp-pagination li span.current {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}
.moodboard-exit-left {
    transform: translateX(-150vw) rotate(-20deg) !important;
    opacity: 0 !important;
    pointer-events: none;
}
.moodboard-enter-right {
    transform: translateX(150vw) rotate(20deg) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Mobile Fallback */
@media (max-width: 768px) {
    .moodboard-canvas-area {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .moodboard-item {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: rotate(0deg) !important;
        width: 90%;
    }
}

/* === 6. NEWSLETTER === */
/* === 6. SECCIONES DIVIDIDAS (SPLIT SECTION) === */
.split-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: var(--color-bg-alt);
}

.split-image-col {
    width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.split-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.split-content-col {
    width: 50%;
    display: flex;
    align-items: center;
}

/* Alineacin dinmica para mantener la coherencia con el .mp-container de 1200px */
.split-content-col:first-child {
    padding: 80px 5% 80px max(20px, calc(50vw - 600px));
    justify-content: flex-start;
}

.split-content-col:last-child {
    padding: 80px max(20px, calc(50vw - 600px)) 80px 5%;
    justify-content: flex-start;
}

.split-content-inner {
    width: 100%;
}

/* Breadcrumb (visible) — pareja del JSON-LD BreadcrumbList (mallorcapura_breadcrumb) */
.mp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--color-text-muted); margin-bottom: 22px; }
.mp-breadcrumb a { color: var(--color-text-muted); text-decoration: none; transition: color 0.2s ease; }
.mp-breadcrumb a:hover { color: var(--color-secondary); }
.mp-breadcrumb .mp-bc-sep { opacity: 0.55; }
.mp-breadcrumb .mp-bc-current { color: var(--color-primary); }

@media (max-width: 992px) {
    .split-image-col,
    .split-content-col {
        width: 100%;
    }
    .split-image-col {
        min-height: 400px;
    }
    .split-content-col {
        padding: 60px 20px !important;
        justify-content: center !important;
    }
    .split-content-col:first-child .split-content-inner,
    .split-content-col:last-child .split-content-inner,
    .split-content-inner {
        padding: 0 !important;
    }
}

/* === 7. ANIMACIONES Y MICRO-INTERACCIONES === */

/* Clase base para elementos que se animarán al hacer scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Clase que añade JS cuando el elemento entra en pantalla */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Micro-interacciones de hover */
.button {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2); /* Sombra color coral suave */
}

.feature-item {
    transition: transform 0.3s ease;
}
.feature-item:hover {
    transform: translateY(-5px);
}
.feature-item:hover .feature-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Quitamos la sombra blanca en hover del blog, solo dejamos el zoom de la imagen */

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hero-title { font-size: 2.5rem; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-item:nth-child(2)::after { display: none; }
    .about-grid { grid-template-columns: 1fr 1fr; }
    .about-img-left { display: none; }
}
@media (max-width: 768px) {
    .mp-top-bar { display: none; }
    .site-header { padding: 10px 20px; }
    .home-hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-image-col { height: 400px; }
    .hero-content-col { padding: 40px 20px; }
    .hero-text { max-width: 100%; }
    .features-grid { grid-template-columns: 1fr; gap: 40px; }
    .feature-item::after { display: none; }
    .blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .blog-header h2 { font-size: 2rem; }
    .blog-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .about-polaroid { margin-top: 40px; padding: 0 20px; }
    .news-content { flex-direction: column; text-align: center; gap: 30px; }
}

/* ------------------------------------------------------------------------- *
 * 8. CABECERA PERSONALIZADA Y NAVEGACIÓN
 * ------------------------------------------------------------------------- */

/* Fix for sticky header with WP admin bar */
.admin-bar .mp-main-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .mp-main-header {
        top: 46px;
    }
}
@media screen and (max-width: 600px) {
    .admin-bar .mp-main-header {
        top: 0; /* WP admin bar is no longer fixed under 600px */
    }
}
.mp-main-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10000;
    box-shadow: 0 1px 0px rgba(0,0,0,0.05), var(--shadow-sm);
    transition: var(--transition-smooth);
    padding: 0 !important;
    margin: 0 !important;
}

.mp-header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 5px 40px;
    min-height: 55px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.mp-main-header .site-branding {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.site-branding .site-title-link {
    text-decoration: none;
    line-height: 1;
}

.site-branding .site-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    margin: 0;
    line-height: 1;
}

.mp-main-header .custom-logo-link img {
    height: 48px;
    max-height: 48px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Navegación y lista de menú */
.mp-navigation-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent !important; /* Override GeneratePress default white background */
}

.mp-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.5vw, 8px);
}

.mp-menu-list li {
    position: relative;
    flex-shrink: 0;
}
/* Bandera del selector de idioma (WPML): tamaño fijo, que no se encoja al comprimirse el menú */
.mp-menu-list img {
    height: 16px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    vertical-align: middle;
}

.mp-menu-list li a {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: clamp(0.68rem, calc(0.95vw + 0.05rem), 0.85rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: clamp(0.02em, 0.4vw, 0.06em);
    padding: 8px clamp(3px, 0.45vw, 6px);
    position: relative;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.mp-menu-list li a:hover,
.mp-menu-list li.current-menu-item > a {
    color: var(--color-secondary);
}

/* Efecto Underline en hover */
.mp-menu-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-secondary);
    transition: var(--transition-smooth);
}

.mp-menu-list > li > a:hover::after,
.mp-menu-list > li.current-menu-item > a::after {
    width: 100%;
}

/* SUBMENÚS (DROPDOWNS) - DESKTOP */
/* El item padre debe ser el ancla del desplegable (si no, cuelga del contenedor
   de la cabecera, mal situado y fuera del alcance del cursor). */
.mp-menu-list .menu-item-has-children {
    position: relative;
}
.mp-menu-list .sub-menu {
    position: absolute;
    top: 100%;
    left: -14px;
    transform: translateY(15px);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,0.03);
    list-style: none;
    padding: 15px 20px;
    margin: 0;
    min-width: 220px;
    width: max-content;
    max-width: 350px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    border-radius: var(--radius-sm);
    z-index: 1001;
}

.mp-menu-list .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mp-menu-list .sub-menu li a {
    padding: 8px 0;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(0,0,0,0.02);
    display: block;
    white-space: normal;
    line-height: 1.4;
    word-break: break-word;
}

.mp-menu-list .sub-menu li:last-child a {
    border-bottom: none;
}

.mp-menu-list .sub-menu li a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}

/* Botón flotante WhatsApp */
.mp-whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-secondary);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.mp-whatsapp-float:hover {
    transform: scale(1.1);
    background-color: var(--color-primary);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* BOTÓN DE MENÚ HAMBURGUESA (CSS LIMPIO) */
.menu-toggle {
    display: none;
    background-color: transparent;
    border: 0;
    padding: 5px;
    cursor: pointer;
    z-index: 1100;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(calc(-50% + 3px)); /* Bajado 3px visualmente */
    left: auto;
    margin: 0 !important;
}

.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--color-primary);
    position: absolute;
    transition-property: transform, opacity;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    border-radius: 2px;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

/* Animación Hamburguesa Activa */
.menu-toggle.is-active .hamburger-inner {
    transform: rotate(45deg);
}

.menu-toggle.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.menu-toggle.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
}


/* ------------------------------------------------------------------------- *
 * 9. FOOTER PERSONALIZADO DE 4 COLUMNAS
 * ------------------------------------------------------------------------- */
.mp-main-footer {
    background-color: var(--color-bg-base); /* Blanco roto */
    color: var(--color-text-muted); /* Darker gray for readability on light BG */
    margin-top: 80px;
    padding: 80px 40px 40px 40px;
    font-size: 0.9rem;
    border-top: 1px solid rgba(122, 138, 107, 0.1); /* Subtle primary color border */
}

.mp-footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.mp-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-col-brand .footer-logo {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary); /* Primary teal */
    margin: 0;
}

.footer-col-brand .footer-bio {
    line-height: 1.7;
    margin: 0;
    color: var(--color-text-main);
}

.footer-branding-decor {
    margin-top: 10px;
}

.decor-tag {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-secondary); /* Terracotta */
}

/* Enlaces del Footer */
.footer-col .footer-title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary); /* Primary teal */
    margin: 0 0 10px 0;
    position: relative;
    padding-bottom: 8px;
}

.footer-col .footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 1px;
    background-color: var(--color-secondary);
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-menu li a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-menu li a:hover {
    color: var(--color-secondary); /* Terracotta hover */
    padding-left: 5px;
}

/* Columna de Contacto */
.footer-contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-details li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    opacity: 0.8;
    font-weight: 600;
}

.contact-value {
    color: var(--color-text-main);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a.contact-value:hover {
    color: var(--color-secondary); /* Terracotta hover */
}

/* Columna de Redes Sociales */
.footer-social-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
}
/* ==========================================================================
   SISTEMA DE BOTONES UNIFICADO (16 jul 2026)
   Misma geometría/tipografía para .button, .btn-primary, .btn-outline y
   .btn-contact-blue; CADA VARIANTE CONSERVA SUS COLORES (petición Andreu).
   Scopeado a .mp-btns-v2 (body): Reformas y Decoración quedan fuera hasta
   salir de EN ESPERA (exclusión en mallorcapura_btns_v2_body_class).
   ========================================================================== */
.mp-btns-v2 .button,
.mp-btns-v2 .wp-block-button__link,
.mp-btns-v2 .btn-primary,
.mp-btns-v2 .btn-outline {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.3s ease;
}
.mp-btns-v2 .button:hover,
.mp-btns-v2 .wp-block-button__link:hover,
.mp-btns-v2 .btn-primary:hover,
.mp-btns-v2 .btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* Variante outline (Deco Tours): sus colores de siempre, ya sin estilos inline */
.mp-btns-v2 .btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
@media (max-width: 600px) {
    .mp-btns-v2 .button,
    .mp-btns-v2 .wp-block-button__link,
    .mp-btns-v2 .btn-primary,
    .mp-btns-v2 .btn-outline { padding: 13px 30px; }
}

/* Redes bajo el logo (columna de marca), ANTES de la bio (feedback Andreu 15 jul) */
.footer-col-brand .footer-social-icons {
    margin-top: 20px;
}
.footer-col-brand .footer-social-icons.footer-social-top {
    margin: 0 0 8px; /* compacto: el logo ya aporta su propio margen inferior */
}
/* Columna de marca más compacta (feedback Andreu 15 jul): menos aire entre items */
.footer-col-brand .footer-logo-wrap img {
    margin-bottom: 6px;
}
.footer-col-brand .footer-branding-decor {
    margin-top: 6px;
}

.footer-social-icons a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-social-icons a:hover {
    color: var(--color-secondary); /* Terracotta hover */
}

.footer-social-icons svg {
    color: var(--color-primary); /* Primary teal for icons */
    transition: var(--transition-smooth);
}

.footer-social-icons a:hover svg {
    color: var(--color-secondary); /* Terracotta hover for icons */
}

.footer-lang-container {
    margin-top: 25px;
    border-top: 1px solid rgba(122, 138, 107, 0.1);
    padding-top: 15px;
}

.footer-lang-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    opacity: 0.8;
    display: block;
    margin-bottom: 8px;
}

.footer-lang-selector {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.footer-lang-item {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
    padding: 2px 4px;
}

.footer-lang-item.active,
.footer-lang-item:hover {
    color: var(--color-secondary); /* Terracotta active/hover */
}

/* Fila Inferior Legal */
.mp-footer-bottom {
    border-top: 1px solid rgba(122, 138, 107, 0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.footer-copyright .brand-name {
    color: var(--color-primary);
    font-weight: 600;
}

/* Fila legal: 5 enlaces desde el 20-ago (privacidad, cookies, preferencias, aviso
   legal e Impressum en DE). Flex con separadores por CSS: al envolver en móvil no
   queda ninguna barra suelta y los enlaces se centran solos. */
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 0;
}
.footer-legal-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
    margin: 0 5px;
}
.footer-legal-links a + a::before {
    content: "|";
    color: var(--color-text-muted);
    opacity: .45;
    margin-right: 10px;
}
@media (max-width: 600px) {
    /* En pantallas estrechas los enlaces caen a 2-3 líneas: sin barras entre ellos
       se lee mejor, con más aire para el dedo. */
    .footer-legal-links { gap: 10px 14px; }
    .footer-legal-links a { margin: 0; }
    .footer-legal-links a + a::before { content: none; }
}

.footer-legal-links a:hover {
    color: var(--color-secondary);
}


/* ------------------------------------------------------------------------- *
 * 10. MEDIA QUERIES PARA CABECERA Y FOOTER
 * ------------------------------------------------------------------------- */
/* Menú móvil/hamburguesa: se activa por ancho (<=1024) O en cualquier dispositivo
   TÁCTIL (hover:none + pointer:coarse), incluido el iPad en horizontal (>1024px).
   En táctil ancho, el menú de escritorio se apoyaba en :hover para abrir el submenú
   y era inalcanzable; con el menú lateral se usa el acordeón por toque, que sí funciona. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .mp-top-bar { display: none; }

    .mp-header-container {
        padding: 10px 16px;
        min-height: 64px;
    }

    .mp-main-header .custom-logo-link img {
        height: 55px;
        max-height: 55px;
    }

    .site-branding .site-title {
        font-size: 1.4rem;
    }
    
    /* 21-ago: con el header pegado, el panel del menú (fixed) tomaba como referencia el
       header desplazado y se abría fuera de sitio. En móvil el header pasa a `fixed`, que
       sí deja al panel anclado al viewport. La altura la compensa el JS del header. */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* Por encima del panel del menú (999): así el botón de cerrar sigue accesible
           cuando el panel está abierto, ahora que el panel cuelga del <body>. */
        z-index: 1001;
    }
    .admin-bar .site-header { top: 46px; }

    /* Bloqueo de scroll con el menú abierto: `overflow:hidden` en body ya no basta
       (el scroll lo lleva el viewport), así que se fija el body guardando la posición
       — la misma técnica que el visor de fotos de los proyectos. */
    body.no-scroll {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }

    .mp-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s;
    }

    .mp-menu-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    .menu-toggle {
        display: block;
        z-index: 1001;
    }
    
    /* Adaptar navegación desktop a menú móvil lateral (off-canvas) */
    .mp-navigation-bar {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        height: 100dvh; /* Usa dynamic viewport height en móvil */
        background-color: #ffffff !important;
        box-shadow: -15px 0 30px rgba(0,0,0,0.1);
        border-top: none;
        flex-direction: column;
        align-items: stretch;
        padding: 80px 30px 40px 30px;
        gap: 10px;
        opacity: 1;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
        z-index: 999;
        overflow-y: auto;
    }
    
    .mp-navigation-bar.is-open {
        visibility: visible;
        transform: translateX(0);
    }
    
    .mp-menu-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    
    .mp-menu-list li {
        width: 100%;
    }
    
    .mp-menu-list li a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        font-size: 1rem;
        display: block;
        width: 100%;
    }
    
    .mp-menu-list > li > a::after {
        display: none; /* Quitamos underline en móvil */
    }
    
    /* Submenús en Móvil (Acordeón táctil) */
    .mp-menu-list .sub-menu {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--color-primary-light);
        padding: 5px 0 5px 15px;
        margin-top: 5px;
        display: none; /* Oculto por defecto */
        opacity: 1;
        visibility: visible;
        min-width: 100%;
    }
    
    .mp-menu-list .menu-item-has-children.submenu-open .sub-menu {
        display: block; /* Despliega el acordeón con JS */
    }
    

    /* Indicador de desplegable (flecha) en items padre con submenú */
    .mp-menu-list .menu-item-has-children > a {
        padding: 14px 30px 14px 0;
    }
    .mp-menu-list .menu-item-has-children > a::after {
        content: '\203A';
        display: inline-block;
        position: absolute;
        right: 6px;
        top: 50%;
        width: auto;
        height: auto;
        background: none;
        transform: translateY(-50%) rotate(90deg);
        transform-origin: center;
        transition: transform 0.3s ease;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--color-secondary);
    }
    .mp-menu-list .menu-item-has-children.submenu-open > a::after {
        transform: translateY(-50%) rotate(270deg);
    }

    /* Footer en Tablet */
    .mp-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .mp-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .mp-main-footer {
        margin-top: 40px;
        padding: 60px 20px 30px 20px;
    }
    
    .mp-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* === 7. TESTIMONIOS === */
.home-testimonials {
    background-color: var(--color-bg-base);
    padding: 60px 40px;
}
.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
}
.testimonials-header {
    text-align: center;
    margin-bottom: 60px;
}
.testimonials-header h2 {
    font-size: 2.5rem;
    color: var(--color-primary);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}
.testimonial-card {
    background-color: #fff;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.test-stars {
    color: var(--color-accent); /* orange */
    font-size: 1.2rem;
    margin-bottom: 20px;
}
.test-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text-main);
    margin-bottom: 30px;
    font-style: italic;
}
.test-author strong {
    display: block;
    color: var(--color-primary);
    font-size: 1.15rem;
    font-weight: 600;
}
.test-author span {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-top: 5px;
}

/* === 8. CTA FINAL === */
.home-cta-new {
    background-color: var(--color-bg-base);
}
.cta-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 40px;
    text-align: center;
    z-index: 2;
}
.cta-eyebrow {
    color: var(--color-secondary) !important;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 700;
}
.cta-col-center h2 {
    color: var(--color-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
    line-height: 1.1;
}
.cta-divider {
    width: 60px;
    height: 1px;
    background-color: var(--color-secondary);
    margin-bottom: 30px;
}
.cta-text {
    color: var(--color-text-main);
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.btn-primary {
    background-color: var(--color-secondary); /* coral */
    color: #fff;
    font-size: 0.9rem;
    padding: 15px 40px;
    border-radius: 0;
    display: inline-block;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: var(--color-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #fff;
}

@media (max-width: 768px) {
    .testimonials-header h2 { font-size: 2.2rem; }
    .home-testimonials { padding: 40px 20px; }
}

.footer-logo-wrap img {
    max-width: 320px; /* Logo más grande en PC */
    height: auto;
    margin-bottom: 20px;
    display: block;
}

@media (max-width: 768px) {
    .footer-logo-wrap img {
        max-width: 220px;
    }
}

/* ==========================================================================
   11. PROYECTOS (PORTFOLIO)
   ========================================================================== */

/* CONTENEDOR GENERAL PARA PLANTILLAS CUSTOM */
.text-center { text-align: center; }
.mp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.bg-dots {
}
@media (max-width: 768px) {
    .mp-container {
        padding: 0 20px;
    }
}

/* ARCHIVO (GRID) */
body.post-type-archive-proyecto #primary, 
body.single-proyecto #primary,
body.page-template-page-proyectos-php #primary {
    width: 100% !important;
    float: none !important;
}
body.post-type-archive-proyecto #right-sidebar, 
body.single-proyecto #right-sidebar,
body.post-type-archive-proyecto #left-sidebar,
body.single-proyecto #left-sidebar {
    display: none !important;
}

.mp-projects-archive {
    background-color: var(--color-bg);
    padding-bottom: 80px;
}

.mp-projects-archive .page-header {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.mp-projects-archive .projects-grid {
    column-count: 1;
    column-gap: 30px;
}
@media (min-width: 768px) {
    .mp-projects-archive .projects-grid {
        column-count: 2;
    }
}
@media (min-width: 1024px) {
    .mp-projects-archive .projects-grid {
        column-count: 3;
    }
}
.project-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-bg-base);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    break-inside: avoid;
    margin-bottom: 30px;
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.project-image-wrap {
    position: relative;
    overflow: hidden;
}
.project-thumb, .project-thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.project-thumb-placeholder {
    background-color: var(--color-bg-alt);
}
.project-card:hover .project-thumb {
    transform: scale(1.05);
}
.project-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(122, 138, 107, 0.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
}
.project-card:hover .project-overlay {
    opacity: 1;
}
.view-project-btn {
    background-color: #fff;
    color: var(--color-primary);
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.project-card:hover .view-project-btn {
    transform: translateY(0);
}
.project-info {
    padding: 24px;
    text-align: center;
}
.project-title {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.project-location {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* SINGLE PROYECTO */
.project-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.project-hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* iOS: nunca 'fixed' en móvil (jank + zoom) */
}
@media (min-width: 1025px) and (hover: hover) {
    .project-hero-bg { background-attachment: fixed; }
}
.project-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
}
.project-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 20px;
}
.project-hero-content .project-title {
    color: #fff;
    font-size: 3.5rem;
    margin-bottom: 15px;
}
.project-location-hero {
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

.project-intro-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin: 80px 0;
}
.project-meta {
    background-color: var(--color-bg-base);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,0.05);
}
.meta-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 10px;
    display: inline-block;
}
.meta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}
.meta-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    color: var(--color-text-main);
}
.project-tags .tag {
    display: inline-block;
    background-color: var(--color-bg-alt);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin: 0 5px 5px 0;
    color: var(--color-primary);
}

/* ===== ANTES / DESPUÉS — lente difuminada que sigue al cursor ===== */
@property --ba-lens { syntax: '<length>'; inherits: false; initial-value: 0px; }

.project-before-after { margin: 100px 0; }
.ba-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.ba-head .section-subtitle { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; margin-top: 10px; }
.ba-list { display: flex; flex-direction: column; gap: 64px; }
.ba-item { max-width: 940px; margin: 0 auto; width: 100%; }
.ba-title { font-size: 1.6rem; color: var(--color-primary); margin: 0 0 18px; text-align: center; }

.ba-container {
    position: relative; width: 100%;
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: crosshair; outline: none;
}
.ba-container .ba-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ba-after-layer { position: relative; z-index: 1; }
.ba-after-layer .ba-img { height: auto; }                 /* el "después" define la altura */
.ba-before-layer {
    position: absolute; inset: 0; z-index: 2;
    --ba-lens: 0px; --x: 50%; --y: 50%;
    -webkit-mask-image: radial-gradient(circle var(--ba-lens) at var(--x) var(--y), #000 0%, #000 52%, transparent 100%);
            mask-image: radial-gradient(circle var(--ba-lens) at var(--x) var(--y), #000 0%, #000 52%, transparent 100%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: --ba-lens .35s ease;
    will-change: --ba-lens;
}
.ba-before-layer .ba-img { filter: saturate(.92) brightness(.97); }

/* Etiquetas Antes / Después */
.ba-badge {
    position: absolute; bottom: 16px; z-index: 3;
    padding: 6px 14px; border-radius: 30px;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    pointer-events: none; transition: opacity .3s ease;
}
.ba-badge-after  { left: 16px;  background: rgba(255,255,255,.92); color: var(--color-primary); }
.ba-badge-before { right: 16px; background: rgba(0,0,0,.55); color: #fff; opacity: 0; }
.ba-container.ba-active .ba-badge-before,
.ba-container.ba-show-before .ba-badge-before { opacity: 1; }
.ba-container.ba-active .ba-badge-after,
.ba-container.ba-show-before .ba-badge-after { opacity: 0; }

/* Pista de uso */
.ba-hint {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
    padding: 7px 16px; border-radius: 30px;
    background: rgba(0,0,0,.42); color: #fff; font-size: .78rem; letter-spacing: .02em;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    pointer-events: none; transition: opacity .3s ease;
}
.ba-container.ba-active .ba-hint { opacity: 0; }
.ba-hint-touch { display: none; }

/* Táctil: sin lente; el toque alterna el "antes" completo (arregla el hover-only de la auditoría) */
.ba-container.ba-touch { cursor: pointer; }
.ba-container.ba-touch .ba-before-layer {
    -webkit-mask-image: none; mask-image: none;
    opacity: 0; transition: opacity .5s ease;
}
.ba-container.ba-touch.ba-show-before .ba-before-layer { opacity: 1; }
.ba-container.ba-touch .ba-hint-fine { display: none; }
.ba-container.ba-touch .ba-hint-touch { display: inline; }
.ba-container.ba-touch.ba-show-before .ba-hint { opacity: 0; }

/* GALERÍA MASONRY (Single Project) */
.project-gallery {
    margin: 100px 0;
}
.masonry-gallery {
    column-count: 2;
    column-gap: 20px;
}
.masonry-item {
    display: block; width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
}
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.masonry-item:hover img {
    transform: scale(1.03);
}

@media (min-width: 992px) {
    .masonry-gallery {
        column-count: 3;
    }
}
@media (max-width: 768px) {
    .project-intro-split {
        grid-template-columns: 1fr;
    }
    .project-hero-content .project-title {
        font-size: 2.5rem;
    }
}

/* Breadcrumb del single de proyecto */
.mp-single-project .mp-single-bc { margin: 34px 0 6px; }

/* Ficha: alineación etiqueta/valor */
.meta-list li strong { color: var(--color-text-muted); font-weight: 600; }
.meta-list li span { color: var(--color-text-main); text-align: right; }
.project-intro-split.no-meta { display: block; }
.project-intro-split.no-meta .project-description { max-width: 820px; }

/* Navegación entre proyectos */
.project-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin: 40px 0 10px; padding-top: 34px; border-top: 1px solid rgba(0,0,0,.08);
}
.project-nav-link { display: flex; flex-direction: column; text-decoration: none; max-width: 40%; }
.project-nav-link.next { text-align: right; align-items: flex-end; }
.project-nav-link .pn-dir { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-secondary); }
.project-nav-link .pn-title { color: var(--color-primary); font-weight: 600; margin-top: 3px; }
.project-nav-all {
    flex-shrink: 0; text-decoration: none; color: var(--color-text-muted);
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    border: 1px solid rgba(0,0,0,.12); padding: 10px 18px; border-radius: 30px; transition: all .2s ease;
}
.project-nav-all:hover { color: var(--color-primary); border-color: var(--color-secondary); }
@media (max-width: 600px) {
    /* En móvil SIGUE en fila: Anterior a la izquierda, Siguiente a la derecha
       (petición original de Andreu; el apilado en columna era de cuando existía
       la píldora central "Todos los proyectos", eliminada el 16-jul). */
    .project-nav { gap: 14px; }
    .project-nav-link { max-width: 48%; }
}

/* Lightbox de galería */
.mp-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15,15,15,.92); display: none;
    align-items: center; justify-content: center; padding: 30px;
    opacity: 0; transition: opacity .25s ease;
}
.mp-lightbox.open { display: flex; opacity: 1; }
.mp-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.5); }
.mp-lightbox-close {
    position: absolute; top: 18px; right: 24px; z-index: 2;
    background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .85;
}
.mp-lightbox-close:hover { opacity: 1; }

/* ==========================================================================
   10. PÁGINA DE CONTACTO (page-contacto.php) - PREMIUM
   ========================================================================== */

body.page-template-page-contacto-php #primary,
body.page-template-page-reformas-php #primary,
body.page-template-page-decoracion-php #primary,
body.page-template-page-asesoria-acompanamiento-php #primary,
body.page-template-page-asesoria-inicial-php #primary,
body.page-template-page-asesoria-materiales-php #primary,
body.page-template-page-rutas-guiadas-php #primary {
    width: 100% !important;
    float: none !important;
}

/* Hero Contacto */
.contact-hero {
    background-color: var(--color-bg-alt);
    padding: 120px 20px 80px;
    position: relative;
    overflow: visible;
    text-align: center;
}

.contact-eyebrow,
.service-eyebrow,
.section-eyebrow,
.cta-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.95rem;
    font-family: 'Playpen Sans', cursive;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 20px;
    color: var(--color-secondary);
}

.cta-eyebrow { color: rgba(255,255,255,0.7); }

.contact-hero-title {
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.15;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-hero-sub {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid principal contacto */
.contact-main {
    padding: 80px 20px 100px;
    background-color: #fff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 801px) {
    .contact-info-col {
        position: sticky;
        top: 150px;
    }
}

@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .contact-hero-title { font-size: 2.5rem; }
}

.contact-seo-text {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
}

.contact-details { margin-bottom: 40px; }

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(201, 124, 93, 0.1);
    color: var(--color-secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

.contact-link {
    font-size: 1.15rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover { color: var(--color-secondary); }

.contact-social {
    border-top: 1px solid rgba(122, 138, 107, 0.1);
    padding-top: 30px;
}

.social-title {
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.social-icons-wrap {
    display: flex;
    gap: 12px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background-color: var(--color-secondary);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(201, 124, 93, 0.3);
}

/* Formulario CF7 */
.contact-form-card {
    background-color: #fff;
    padding: 50px 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    position: relative;
}

.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.form-card-header { text-align: center; margin-bottom: 30px; }

.form-card-title {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.form-card-sub {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

.cf7-wrapper input[type="text"],
.cf7-wrapper input[type="email"],
.cf7-wrapper input[type="tel"],
.cf7-wrapper select,
.cf7-wrapper textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(122, 138, 107, 0.15);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fafafa;
}

.cf7-wrapper input:focus,
.cf7-wrapper select:focus,
.cf7-wrapper textarea:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 124, 93, 0.1);
    background-color: #fff;
}

.cf7-wrapper input[type="submit"] {
    width: 100%;
    background-color: var(--color-secondary);
    color: #fff;
    font-size: 1.1rem;
    padding: 18px 30px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 10px;
}

.cf7-wrapper input[type="submit"]:hover {
    background-color: var(--color-secondary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 124, 93, 0.3);
}

.cf7-wrapper select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    cursor: pointer;
}

/* Layout avanzado CF7 */
.mp-cf7-modern .form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.mp-cf7-modern .form-col {
    flex: 1;
    min-width: 150px;
}
.mp-cf7-modern .form-col.full {
    flex: 100%;
}
.mp-cf7-modern label {
    display: block;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.mp-cf7-modern .wpcf7-form-control-wrap {
    display: block;
}
.mp-cf7-modern .wpcf7-not-valid-tip {
    font-size: 0.85rem;
    color: #e74c3c;
    margin-top: 5px;
}
.mp-cf7-modern .wpcf7-response-output {
    border-radius: var(--radius-sm);
    margin-top: 20px;
    padding: 15px;
    font-size: 0.95rem;
}

.wpcf7-spinner { display: none !important; }

/* Cita Contacto */
.contact-quote {
    background-color: var(--color-bg-alt);
    padding: 80px 20px;
}

.contact-quote blockquote,
.service-quote blockquote {
    font-size: 2rem;
    color: var(--color-primary);
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    position: relative;
}

.contact-quote blockquote::before,
.service-quote blockquote::before {
    content: '\201C';
    font-size: 6rem;
    color: var(--color-secondary);
    opacity: 0.3;
    position: absolute;
    top: -40px;
    left: -20px;
    font-family: var(--font-heading);
    line-height: 1;
}

/* ==========================================================================
   11. PÁGINAS DE SERVICIOS (Reformas y Decoración) - PREMIUM
   ========================================================================== */

/* Hero Común */
.service-hero {
    height: 70vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
    position: relative;
}

.service-hero-title {
    font-size: 3.8rem;
    color: #fff;
    margin-bottom: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.15;
}

.service-hero-sub {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

/* Cita Inspiracional */
.service-quote {
    background-color: #fff;
    padding: 80px 20px;
}

/* Enfoque (Reformas) */
.service-focus {
    padding: 100px 20px;
    background-color: var(--color-bg-alt);
}

.focus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.focus-title {
    font-size: 2.8rem;
    color: var(--color-primary);
    margin-bottom: 25px;
    line-height: 1.15;
}

.focus-desc {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
}

.focus-link {
    display: inline-block;
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.focus-link:hover {
    color: var(--color-secondary-hover);
    transform: translateX(5px);
}

.focus-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    height: auto;
    display: block;
}

.placeholder-img {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-bg-alt), rgba(122, 138, 107, 0.08));
}

/* Proceso (Reformas) */
.service-process {
    background-color: #fff;
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: visible;
}

.process-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 60px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.process-step {
    background: #fff;
    padding: 50px 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

.process-step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.process-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.process-step:hover::after { opacity: 1; }

.step-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    opacity: 0.6;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    line-height: 1;
}

.step-title {
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.step-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1.6;
}

/* Estilo (Decoración) */
.deco-style {
    padding: 100px 20px;
    background-color: var(--color-bg-alt);
    position: relative;
    overflow: visible;
}

.style-title {
    font-size: 2.8rem;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.2;
}

.style-text {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 750px;
    margin: 0 auto;
}

/* Servicios ZigZag (Decoración) */
.deco-services {
    padding: 80px 20px 40px;
    background-color: #fff;
}

.zigzag-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.zigzag-row:last-child { margin-bottom: 0; }

.zigzag-row.reverse {
    direction: rtl;
}

.zigzag-row.reverse > * {
    direction: ltr;
}

.zz-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.zz-title {
    font-size: 2.2rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.zz-desc {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 25px;
}

/* CTA Común */
.service-cta {
    background-color: var(--color-primary);
    padding: 120px 20px;
    position: relative;
    overflow: hidden;
}

.service-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.cta-title {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.cta-sub {
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.text-center { text-align: center; }

/* Responsive Servicios */
@media (max-width: 900px) {
    .focus-grid, .zigzag-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    
    .zigzag-row.reverse { direction: ltr; }
    
    .process-grid { grid-template-columns: 1fr; }
    
    .service-hero-title { font-size: 2.5rem; }
    .service-hero { height: 55vh; min-height: 350px; background-attachment: scroll; }
    
    .cta-title { font-size: 2.2rem; }
    .style-title, .focus-title { font-size: 2.2rem; }
    .contact-quote blockquote, .service-quote blockquote { font-size: 1.5rem; }

    .services-connector-line { display: none; }
}

/* ==========================================================================
   12. LÍNEA CONECTORA SVG ANIMADA (Decoración / Reformas)
   ========================================================================== */
.services-connector-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.connector-path {
    transition: stroke-dashoffset 0.05s ease-out;
}

/* Asegurar que el contenido zigzag se sitúa por encima de la línea */
.deco-services .mp-container,
.service-process .mp-container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   13. TIMELINE VERTICAL (Decoración - Servicios)
   ========================================================================== */
.deco-timeline {
    padding: 80px 20px 100px;
    background-color: #fff;
}

.timeline-header {
    margin-bottom: 60px;
}

.timeline-track {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Línea SVG central */
.timeline-line-svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* Items del timeline */
.timeline-item {
    position: relative;
    width: 46%;
    margin-bottom: 80px;
    z-index: 1;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item.left {
    margin-right: auto;
    margin-left: 0;
}

.timeline-item.right {
    margin-left: auto;
    margin-right: 0;
}

/* Punto/marcador central */
.timeline-dot {
    position: absolute;
    top: 40px;
    width: 18px;
    height: 18px;
    background-color: var(--color-secondary);
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(201, 124, 93, 0.2), var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 8px rgba(201, 124, 93, 0.15), var(--shadow-md);
}

.timeline-item.left .timeline-dot {
    right: -9%;
}

.timeline-item.right .timeline-dot {
    left: -9%;
}

/* Card del servicio */
.timeline-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.timeline-card-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.timeline-card-body {
    padding: 35px 30px;
}

.timeline-card-title {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.2;
}

.timeline-card-desc {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Responsive: Timeline en móvil → columna simple */
@media (max-width: 900px) {
    .timeline-item {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 50px;
    }

    .timeline-line-svg {
        left: 20px;
        transform: none;
    }

    .timeline-dot {
        left: -30px !important;
        right: auto !important;
    }

    .timeline-track {
        padding-left: 40px;
    }
}

/* ==========================================================================
   14. CONTENIDO SEO Y ACORDEONES (Reformas)
   ========================================================================== */

/* Acordeón (FAQ y Detalles de Servicio) */
.faq-accordion, .details-accordion {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item, .detail-item {
    background: #fff;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid rgba(122, 138, 107, 0.05);
    transition: box-shadow 0.3s ease;
}

.faq-item:hover, .detail-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question, .detail-header {
    padding: 20px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease;
    display: inline-block;
}

.faq-item.active .faq-icon, .detail-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer, .detail-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: #fafafa;
}

.faq-answer p, .detail-content p {
    padding: 20px 30px;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* Lista de Servicios (Ticks) */
.reformas-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.reformas-services-list li {
    background: #fff;
    padding: 20px 25px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.reformas-services-list li:hover {
    transform: translateY(-3px);
}

.reformas-services-list li::before {
    content: '✓';
    color: var(--color-secondary);
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.2rem;
}

/* Puntos Fuertes (Cards) */
.strengths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.strength-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-5px);
}

.timeline-item.left .timeline-dot {
    right: -9%;
}

.timeline-item.right .timeline-dot {
    left: -9%;
}

/* Card del servicio */
.timeline-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.timeline-card-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.timeline-card-body {
    padding: 35px 30px;
}

.timeline-card-title {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.2;
}

.timeline-card-desc {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Responsive: Timeline en móvil → columna simple */
@media (max-width: 900px) {
    .timeline-item {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 50px;
    }

    .timeline-line-svg {
        left: 20px;
        transform: none;
    }

    .timeline-dot {
        left: -30px !important;
        right: auto !important;
    }

    .timeline-track {
        padding-left: 40px;
    }
}

/* ==========================================================================
   14. CONTENIDO SEO Y ACORDEONES (Reformas)
   ========================================================================== */

/* Acordeón (FAQ y Detalles de Servicio) */
.faq-accordion, .details-accordion {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item, .detail-item {
    background: #fff;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid rgba(122, 138, 107, 0.05);
    transition: box-shadow 0.3s ease;
}

.faq-item:hover, .detail-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question, .detail-header {
    padding: 20px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    transition: background-color 0.3s ease;
    margin: 0;
}

.faq-question h3, .detail-header {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--color-primary);
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--color-secondary);
    transition: transform 0.3s ease;
    display: inline-block;
}

.faq-item.active .faq-icon, .detail-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer, .detail-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: #fafafa;
}

.faq-answer p, .detail-content p {
    padding: 20px 30px;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* Lista de Servicios (Ticks) */
.reformas-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.reformas-services-list li {
    background: #fff;
    padding: 20px 25px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.reformas-services-list li:hover {
    transform: translateY(-3px);
}

.reformas-services-list li::before {
    content: '✓';
    color: var(--color-secondary);
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.2rem;
}

/* Puntos Fuertes (Cards) */
.strengths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.strength-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-5px);
}

.strength-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.strength-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* === DECO TOURS / RUTAS GUIADAS === */

/* Route Cards Grid */
.rutas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.ruta-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.ruta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.ruta-card-img {
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.ruta-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

.ruta-card-body {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ruta-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.ruta-card-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.ruta-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 20px;
    margin-top: auto;
}

.ruta-card-price {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-primary);
}

.ruta-card-btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ruta-card-btn:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

/* Step by Step */
.rutas-pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    counter-reset: none;
}

.rutas-pasos .paso-item {
    text-align: center;
    position: relative;
}

.rutas-pasos .paso-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 35px;
    right: -20px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-secondary), transparent);
}

.paso-numero {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.7;
}

.paso-titulo {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 12px;
}

.paso-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Responsive Rutas */
@media (max-width: 768px) {
    .rutas-grid {
        grid-template-columns: 1fr;
    }
    .rutas-pasos {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .rutas-pasos .paso-item:not(:last-child)::after {
        display: none;
    }
    .ruta-card-img {
        height: 180px;
    }
}

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

/* ==========================================================================
   Interactive Map Styles
   ========================================================================== */
.mapa-interactivo-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f7f5f2; /* fallback */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.mapa-interactivo-wrapper img.map-bg {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mapa-pin {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 10px rgba(122, 138, 107, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.mapa-pin:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 6px 15px rgba(122, 138, 107, 0.4);
}

.mapa-pin.active {
    background-color: var(--color-secondary);
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 10;
}

.mapa-pin::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    animation: ripple 2s infinite ease-out;
    pointer-events: none;
}
.mapa-pin.active::after {
    border-color: var(--color-secondary);
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.mapa-info-panel {
    background: #fff;
    padding: 30px;
    border-top: 2px solid var(--color-primary);
}

.mapa-info-panel .ruta-badge {
    margin-bottom: 15px;
    display: inline-block;
}

.mapa-info-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.mapa-info-desc {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
    .mapa-interactivo-container {
        display: flex;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .mapa-interactivo-wrapper {
        flex: 1.5;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        min-height: 500px;
    }
    
    .mapa-interactivo-wrapper img.map-bg {
        height: 100%;
    }
    
    .mapa-info-panel {
        flex: 1;
        padding: 50px 40px;
        border-top: none;
        border-left: 2px solid rgba(122, 138, 107, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 0.4s ease;
    }
}

/* ==========================================================================
   Calculadora Personal Shopper
   ========================================================================== */
.calc-card {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    user-select: none;
}
.calc-card input[type="radio"] {
    display: none;
}
.calc-card-content {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}
.calc-card:hover .calc-card-content {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.calc-card input[type="radio"]:checked + .calc-card-content {
    border-color: var(--color-secondary);
    background: rgba(242, 166, 136, 0.05);
    box-shadow: 0 8px 25px rgba(242, 166, 136, 0.15);
}
.calc-card-radio {
    width: 24px;
    height: 24px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 20px;
    position: relative;
    transition: all 0.3s ease;
}
.calc-card input[type="radio"]:checked + .calc-card-content .calc-card-radio {
    border-color: var(--color-secondary);
}
.calc-card input[type="radio"]:checked + .calc-card-content .calc-card-radio::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    background: var(--color-secondary);
    border-radius: 50%;
}
.calc-card-title {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 500;
    flex: 1;
}
.calc-card-price {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    font-weight: 600;
}
.calc-card input[type="radio"]:checked + .calc-card-content .calc-card-price {
    color: var(--color-secondary);
}

@media (max-width: 992px) {
    .calc-layout {
        flex-direction: column;
    }
    .calc-summary {
        flex: 1 1 100% !important;
        width: 100%;
        position: static !important;
    }
    .contacto-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Fix global layout for custom templates missing .content-area */
.site-main { width: 100%; flex: 1; }



/* === ACCORDION TYPOGRAPHY OVERRIDE === */
.faq-question h3, .detail-header {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

/* ==========================================================================
   ÁREAS DE DISEÑO (HOME GRID)
   ========================================================================== */
.home-areas {
    background-color: var(--color-bg-base);
}

/* Nuevas áreas de diseño 5 columnas */
.areas-grid-5 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .areas-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .areas-grid-5 {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
}

.area-card-new {
    text-align: center;
    position: relative;
    border-radius: 0;
}

.area-image-new {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 0;
}

.area-image-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}



.area-content-new h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-main);
    margin-bottom: 10px;
    font-weight: 500;
}

.ver-mas-link {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-secondary);
    text-decoration: none;
    transition: opacity 0.3s ease;
}




/* --- CONTACT PAGE SPLIT REDESIGN --- */
.contact-split-hero,
.contact-split-form,
.contact-split-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}
.split-left, .split-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.split-content-inner {
    padding: 50px 8%;
    max-width: 600px;
    margin: 0 auto;
}
.contact-split-hero .split-left {
    background-color: #f7f6f2; /* Light beige from mockup */
}
.contact-split-form .split-left {
    background-color: var(--color-bg-base);
}
.contact-split-cta .split-right {
    background-color: #f7f6f2;
}

.split-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 !important;
}

/* Reducir altura de la imagen del formulario para crear márgenes superior e inferior */
.contact-split-form .split-img {
    top: 60px;
    height: calc(100% - 120px) !important;
}

/* Compactar el bloque del formulario (feedback Pura: 2º bloque demasiado alto vs el Hero).
   Específico a .contact-split-form para NO afectar al CTA, que comparte .split-content-inner. */
.contact-split-form .split-content-inner {
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 580px;
    margin: 0;
    padding-left: 20px;
    padding-right: 8%;
}
/* Alinear el formulario con el contenedor de 1200px del Hero (mismo borde + padding),
   para que la 1ª y la 2ª sección arranquen a la misma altura en pantallas grandes. */
.contact-split-form .split-left {
    padding-left: max(0px, calc(50vw - 600px));
}
.mp-contact-page-new .mp-cf7-modern .form-row {
    margin-bottom: 14px;
}

.placeholder-img {
    width: 100%;
    height: 100%;
    background: #eae8e1;
    display: flex;
    align-items: center;
    border-radius: 0 !important;
    justify-content: center;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: absolute;
}

.split-content-inner h1, 
.split-content-inner h2 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.1;
}
.split-content-inner p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: 25px;
}
.separator-line {
    width: 30px;
    height: 1px;
    background-color: var(--color-secondary);
    margin-bottom: 30px;
}

/* Radio Buttons Form */
.mp-contact-page-new .form-row label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.mp-contact-page-new input[type="text"],
.mp-contact-page-new input[type="email"],
.mp-contact-page-new input[type="tel"],
.mp-contact-page-new input[type="number"],
.mp-contact-page-new textarea {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 12px 15px;
}

.radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.custom-radio {
    position: relative;
    padding-left: 24px;
    cursor: pointer;
    font-size: 0.85rem !important;
    color: var(--color-text-main) !important;
    user-select: none;
    display: inline-flex;
    align-items: center;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
}
.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.radio-mark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 14px;
    width: 14px;
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 50%;
}
.custom-radio input:checked ~ .radio-mark {
    border-color: var(--color-primary);
}
.custom-radio input:checked ~ .radio-mark:after {
    content: "";
    position: absolute;
    display: block;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Info Bar */
.contact-info-bar {
    background-color: #eceef0; /* Light grayish blue from mockup */
    padding: 40px 20px;
}
.info-bar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.info-col p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    color: var(--color-text-main);
}
.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--color-text-main);
}
.contact-item svg {
    color: var(--color-primary);
}
/* La barra de info son enlaces (mailto / Instagram / mapa): sin subrayado, hover terracota */
a.contact-item { text-decoration: none; color: var(--color-text-main); transition: color 0.2s ease; }
a.contact-item:hover { color: var(--color-secondary); }
a.contact-item:hover svg { color: var(--color-secondary); }
.text-col-right {
    text-align: left;
}

@media (max-width: 992px) {
    .contact-split-hero,
    .contact-split-form,
    .contact-split-cta {
        grid-template-columns: 1fr;
    }
    .split-right, .split-left.img-side {
        min-height: 400px;
    }
    .contact-split-form .split-right {
        grid-row: 1;
    }
    .contact-split-form .split-img {
        top: 0;
        left: 0;
        height: 100% !important;
        width: 100% !important;
    }
    /* En tablet/móvil el formulario y el CTA pasan a 1 columna: darles margen lateral
       (la regla global .split-content-inner{padding:0!important} los dejaba pegados al borde). */
    .contact-split-form .split-left {
        padding-left: 0;
    }
    .contact-split-form .split-content-inner,
    .contact-split-cta .split-content-inner {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 30px 20px !important;
    }
    .contact-split-hero .split-right {
        grid-row: 1;
    }
    .info-bar-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    .contacts-list {
        align-items: center;
    }
    .text-col-right {
        text-align: center;
    }
}


/* ==========================================================================
   PÁGINA DE DECORACIÓN (v2 – Mockup Exacto)
   ========================================================================== */

/* --- Línea naranja decorativa bajo títulos (deco-specific) --- */
.deco-section-title {
    color: var(--color-primary);
    font-size: 2.2rem;
    margin-bottom: 30px;
    line-height: 1.3;
}
.deco-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--color-secondary);
    margin-top: 15px;
}
.deco-section-title.text-center::after {
    margin-left: auto;
    margin-right: auto;
}

/* --- 1. HERO (Fondo entero, texto superpuesto a la izquierda) --- */
.deco-hero {
    display: flex;
    min-height: 80vh;
    background-color: var(--color-bg-alt);
    background-size: cover;
    background-position: center;
    align-items: center;
    position: relative;
    /* no padding */
}
.deco-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado blanco fuerte a la izquierda que se desvanece hacia el centro */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0) 65%);
    z-index: 1;
}
.deco-hero-text-overlay {
    width: 50%;
    padding: 80px 5% 80px max(20px, calc(50vw - 600px)); /* Alineado con el container general */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}
.deco-hero-sub {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 30px;
}

/* --- 2. INTRODUCCIÓN (caja centrada) --- */
.deco-intro {
    padding: 60px 20px;
}
.deco-intro-inner {
    background-color: #eef1f4;
    padding: 45px 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.deco-intro .deco-section-title {
    font-size: 2rem;
}
.deco-intro-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text);
    max-width: 850px;
    margin: 0 auto;
}

/* --- 4. TE ACOMPAÑO (2 cajas con borde) --- */
.deco-acompano {
    padding: 80px 20px;
    background-color: var(--color-bg-base);
}
.deco-acompano-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 50px;
}
.deco-acompano-box {
    border: 1px solid rgba(0,0,0,0.04);
    padding: 40px 35px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}
.deco-box-title {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    text-align: center;
}
.deco-box-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
    margin: 10px auto 0;
}
.deco-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.deco-check-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text);
}
.deco-list-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deco-list-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.deco-bullet-svg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.deco-bullet-svg svg {
    width: 100%;
    height: 100%;
}
.deco-dash {
    color: var(--color-secondary);
    font-weight: 300;
    font-size: 1.2rem;
}
.deco-list-text {
    flex: 1;
    padding-top: 6px;
}

/* --- 5. CÓMO TRABAJAMOS (6 pasos, 1 fila) --- */
.deco-proceso {
    padding: 80px 20px;
    background-color: #fff;
}
.deco-proceso-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 60px;
}
.deco-proceso-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
    margin: 15px auto 0;
}
.deco-proceso-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 25px;
    max-width: 1200px;
    margin: 0 auto;
}
.deco-paso {
    text-align: left;
}
.deco-paso-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 300;
    color: var(--color-secondary);
    line-height: 1;
    margin-bottom: 15px;
}
.deco-paso-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a2a3a;
    margin-bottom: 10px;
    line-height: 1.4;
}
.deco-paso-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}
.deco-proceso-sub {
    text-align: center;
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 500;
    /* 27-jul (Pura): en azul, el mismo de .deco-proceso-title. Antes terracota. */
    color: var(--color-primary);
    margin-top: 45px;
}

/* --- 6. FILOSOFÍA Y RESULTADO (3 col) --- */
.deco-filosofia {
    padding: 80px 20px;
    background-color: var(--color-bg-alt);
}
.deco-filo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.deco-filo-img-col {
    height: auto;
    position: relative;
    z-index: 1;
}
.deco-filo-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

/* Versión 3 columnas (Mi filosofía | foto | El resultado).
   Foto a alto completo de la fila, difuminada a ambos lados para integrarse con los textos. */
.deco-filo-grid-3col {
    display: grid;
    grid-template-columns: 1fr minmax(340px, 460px) 1fr;
    gap: 50px;
    align-items: stretch;
}
.deco-filo-grid-3col .filo-left,
.deco-filo-grid-3col .filo-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 55px 0;
}
.deco-filo-grid-3col .filo-center {
    position: relative;
    display: flex;
    min-height: 380px;
}
.deco-filo-grid-3col .filo-photo-3col,
.deco-filo-grid-3col .filo-photo-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.deco-filo-grid-3col .filo-photo-placeholder {
    background: #e0d9d0;
}
.deco-filo-grid-3col .filo-left strong,
.deco-filo-grid-3col .filo-right strong {
    color: var(--color-primary);
    font-weight: 600;
}
.filo-title {
    position: relative;
    padding-bottom: 16px;
}
.filo-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: var(--color-secondary);
}

/* --- 8. PROYECTOS --- */
.deco-proyectos {
    padding: 80px 20px;
    background-color: #fff;
}
.deco-proyectos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.deco-proy-card {
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease;
}
.deco-proy-card:hover {
    transform: translateY(-5px);
}
.deco-proy-img {
    height: 280px;
    overflow: hidden;
    margin-bottom: 15px;
}
.deco-proy-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.deco-proy-card:hover .deco-proy-img img {
    transform: scale(1.05);
}
.deco-proy-name {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text);
    font-style: italic;
}

/* --- 9. FAQ CTA --- */
.deco-faq {
    padding: 60px 20px 80px;
}
.deco-faq-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    align-items: center;
}
.deco-faq-icon {
    text-align: center;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .deco-hero { min-height: 60vh; }
    .deco-hero::before {
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 60%, rgba(255,255,255,0) 100%);
    }
    .deco-hero-text-overlay { width: 70%; padding: 60px 6%; }
    .deco-acompano-grid { grid-template-columns: 1fr; }
    .deco-proceso-row { grid-template-columns: repeat(2, 1fr); }
    .deco-filo-grid { grid-template-columns: 1fr; text-align: center; }
    .deco-filo-grid .deco-section-title::after { margin-left: auto; margin-right: auto; }
    .deco-filo-img-col { height: 400px; order: -1; }
    .deco-proyectos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .deco-hero::before {
        background: rgba(255, 255, 255, 0.85); /* Solid overlay on mobile to keep text readable */
    }
    .deco-hero-text-overlay { width: 100%; padding: 60px 25px; }
    .deco-hero .hero-title { font-size: 2.2rem; }
    .deco-proceso-row { grid-template-columns: 1fr; }
    .deco-proyectos-grid { grid-template-columns: 1fr; }
    .deco-faq-grid { grid-template-columns: 1fr; text-align: center; }
    .deco-intro-inner { padding: 40px 25px; }
}
@media (max-width: 480px) {
    .deco-proceso-row { grid-template-columns: 1fr; }
}

/* Fuerza esquinas cuadradas en toda la página de decoración */
.mp-decoracion-page img,
.mp-decoracion-page .placeholder-img,
.mp-decoracion-page .button { border-radius: 0 !important; }
.mallorcapura-testimonial img { border-radius: 50% !important; }

/* --- Proyecto Cards Hover (global) --- */
.project-simple-card { text-decoration: none; }
.project-simple-card:hover .project-simple-overlay { opacity: 1 !important; }
.project-simple-card:hover img { transform: scale(1.05) !important; }

/* === TESTIMONIALS SLIDER === */
.home-testimonials-slider {
    padding: 45px 20px 60px;
    background-color: var(--color-bg-alt);
}
.ts-header {
    margin-bottom: 30px;
}
.ts-slider-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.ts-slides-wrapper {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: grid;
}
.ts-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}
.ts-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.ts-content-half {
    padding: 14px 40px 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.ts-stars {
    margin-bottom: 20px;
}
.ts-quote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-primary);
    line-height: 1.6;
    margin-bottom: 20px;
}
.ts-author {
    font-family: var(--font-body);
    color: var(--color-primary);
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 40px;
}
.ts-author-line {
    width: 60px;
    height: 1px;
    background-color: var(--color-secondary);
}
.ts-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 0;
    width: 100%;
    position: absolute;
    bottom: 22px;
    left: 0;
}
.ts-prev, .ts-next {
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
    transition: color 0.3s;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.ts-prev:hover, .ts-next:hover {
    color: var(--color-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(1.1) !important;
}
.ts-dots {
    display: flex;
    gap: 10px;
}
.ts-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.ts-dot.active {
    background-color: var(--color-secondary);
}
.ts-image-half {
    height: 100%;
    min-height: 350px;
}
.ts-image-half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.ts-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-color: rgba(0,0,0,0.05);
}
@media (max-width: 992px) {
    .ts-slide {
        grid-template-columns: 1fr;
    }
    .ts-image-half {
        order: -1;
        min-height: 300px;
    }
    .ts-content-half {
        padding: 20px 0 80px 0;
        text-align: center;
        align-items: center;
    }
    .ts-author {
        align-items: center;
    }
    .ts-quote {
        font-size: 1.2rem;
    }
}

/* === PROGRESS BAR PAGINATION === */
.mp-progress-pagination {
    margin-top: 80px;
    margin-bottom: 40px;
    width: 100%;
}
.mp-progress-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}
.mp-progress-btn {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
}
.mp-progress-btn:hover {
    color: var(--color-secondary);
}
.mp-progress-btn.disabled {
    color: rgba(0,0,0,0.2);
    pointer-events: none;
}
.mp-progress-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.mp-progress-bar-track {
    width: 100%;
    height: 2px;
    background-color: rgba(0,0,0,0.1);
    position: relative;
    border-radius: 2px;
    cursor: pointer;
    touch-action: none; /* Prevent scroll while dragging on touch */
}
.mp-progress-bar-track::after {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    right: 0;
    z-index: 1;
}
.mp-progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 2px;
    width: var(--target-width);
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mp-progress-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: var(--color-primary);
    border-radius: 50%;
    left: var(--target-width);
    transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}
.mp-progress-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-primary);
    font-weight: 600;
    position: absolute;
    top: 25px;
}

@media (max-width: 768px) {
    .mp-progress-controls {
        gap: 15px;
    }
    .mp-progress-btn {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   FIX ADMIN BAR (1 jul 2026): elimina el hueco de 32/46px entre la barra de
   WordPress y el header, que SOLO aparece logueado como admin. El header es
   position:sticky y el html{margin-top} que WP añade para el admin bar le mete
   un offset extra en reposo (bug conocido sticky + admin bar en Chrome). Al
   estar logueado forzamos el header a static → se pega bajo la barra. Scoped a
   .admin-bar: el sitio público (sin admin bar) NO se toca.
   ========================================================================== */
/* 20-ago (revisión responsive): la versión anterior forzaba position:relative con
   admin bar y eso quitaba el MENÚ FIJO a todo el que estuviera logueado — Pura y
   Claudio incluidos, justo quienes revisan la web. Ahora se mantiene sticky para
   todos y el offset se calcula bien en cada caso, que era el origen del hueco:
     · escritorio (>782px): la admin bar es FIJA y ocupa 32px → el header se pega a 32px
     · móvil (≤782px): la admin bar se va con el scroll → el header se pega a 0
   Se conserva el z-index alto para que menú, submenús y off-canvas queden encima. */
.admin-bar #masthead.mp-main-header { position: -webkit-sticky !important; position: sticky !important; top: 32px !important; z-index: 10000 !important; }
@media (max-width: 782px) {
    .admin-bar #masthead.mp-main-header { top: 0 !important; }
}

/* ==========================================================================
   INLINE STYLES CENTRALIZADOS + RESPONSIVE COMPLETO (HOME)
   ========================================================================== */

/* --- Sección Acompañamiento (ex-inline <style>) --- */
.home-acompanamiento {
    padding: 0;
    background-color: #f7f6f2;
}
.acomp-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
.acompanamiento-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 0;
    align-items: stretch;
}
.acomp-img-col {
    height: 100%;
    min-height: 450px;
    position: relative;
}
.acomp-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.acomp-placeholder {
    background-color: var(--color-bg-alt);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.acomp-text-col {
    text-align: center;
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.acomp-text-col h2 {
    font-size: 2.2rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}
.acomp-separator {
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
    margin: 0 auto 30px auto;
}
.acomp-text-col p {
    color: var(--color-text-main);
    margin-bottom: 25px;
    font-size: 1.1rem;
    line-height: 1.8;
}
.acomp-eyebrow {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 15px;
}
.acomp-cta-wrap {
    margin-top: 30px;
}
.acomp-cta-wrap .button {
    font-size: 0.9rem;
    padding: 15px 30px;
    letter-spacing: 0.1em;
}

/* --- Feature Items (link reset) --- */
a.feature-item {
    text-decoration: none;
    color: inherit;
}
.feature-item:nth-child(2) {
    transition-delay: 0.15s;
}
.feature-item:nth-child(3) {
    transition-delay: 0.3s;
}

/* --- Sección Áreas de Diseño --- */
.home-areas {
    padding: 100px 0;
}
.areas-header {
    text-align: center;
    margin-bottom: 60px;
}
.areas-header h2 {
    font-size: 3rem;
    margin-top: 5px;
    margin-bottom: 0;
    color: var(--color-primary);
}

/* --- Sección Proyectos Simplificado --- */
.home-projects-simple {
    padding: 100px 0;
    background-color: var(--color-bg-alt);
    position: relative;
    overflow: hidden;
}
.home-projects-simple .mp-container {
    position: relative;
    z-index: 1;
}
.projects-simple-header {
    text-align: center;
    margin-bottom: 60px;
}
.projects-simple-header h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--color-primary);
}
.projects-simple-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}
.projects-simple-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.project-simple-card {
    display: block;
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    text-decoration: none;
}
.project-simple-card-inner {
    width: 100%;
    height: 100%;
}
.project-simple-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.project-simple-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-alt);
}
.project-simple-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.project-simple-overlay h3 {
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    padding: 20px;
    margin: 0;
}
.projects-simple-cta {
    text-align: center;
    margin-top: 50px;
}

/* --- CTA Final --- */
.home-cta-new {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-col-center {
    position: relative;
}
.cta-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.cta-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(247,246,242,0) 0%,
        rgba(247,246,242,0.8) 35%,
        rgba(247,246,242,0.95) 50%,
        rgba(247,246,242,0.8) 65%,
        rgba(247,246,242,0) 100%
    );
    z-index: 1;
}

/* ==========================================================================
   MEDIA QUERIES RESPONSIVE HOME (Centralizado)
   ========================================================================== */
@media (max-width: 992px) {
    .acompanamiento-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .acomp-text-col {
        padding: 60px 30px;
    }
    .acomp-img-col {
        min-height: 350px;
    }
    .projects-simple-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .home-areas {
        padding: 80px 0;
    }
    .areas-header h2 {
        font-size: 2.5rem;
    }
    .home-features {
        margin: 60px 0 !important;
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    /* Hero */
    .hero-title {
        margin-bottom: 30px;
    }
    .hero-title::after {
        margin-top: 20px;
    }
    /* Features */
    .features-grid {
        padding: 0 20px;
    }
    .home-features {
        margin: 40px 0 !important;
        padding: 60px 0;
    }
    /* Acompañamiento */
    .acomp-text-col {
        padding: 40px 20px;
    }
    .acomp-img-col {
        min-height: 250px;
    }
    .acomp-text-col h2 {
        font-size: 1.8rem;
    }
    .acomp-text-col p {
        font-size: 1rem;
    }
    /* Áreas */
    .home-areas {
        padding: 60px 0;
    }
    .areas-header {
        margin-bottom: 40px;
    }
    .areas-header h2 {
        font-size: 2rem;
    }
    /* Proyectos */
    .home-projects-simple {
        padding: 60px 0;
    }
    .projects-simple-header {
        margin-bottom: 40px;
    }
    .projects-simple-header h2 {
        font-size: 2rem;
    }
    .projects-simple-grid-container {
        gap: 20px;
    }
    .project-simple-overlay h3 {
        font-size: 1.2rem;
    }
    .projects-simple-cta {
        margin-top: 30px;
    }
    /* Blog */
    .home-blog {
        padding: 40px 20px;
    }
    .blog-card-img img {
        height: 200px;
    }
    .mp-progress-pagination {
        margin-top: 40px;
    }
    /* Testimonials */
    .ts-slides-wrapper {
        min-height: auto;
    }
    /* CTA */
    .home-cta-new {
        min-height: 400px;
    }
    .cta-col-center {
        padding: 50px 20px;
    }
    .cta-col-center h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .projects-simple-grid-container {
        grid-template-columns: 1fr;
    }
    .home-areas {
        padding: 40px 0;
    }
    .areas-header h2 {
        font-size: 1.6rem;
    }
    .home-projects-simple {
        padding: 40px 0;
    }
    .projects-simple-header h2 {
        font-size: 1.6rem;
    }
    .home-cta-new {
        min-height: 350px;
    }
    .cta-col-center {
        padding: 40px 15px;
    }
}

/* ------------------------------------------------------------------------- *
 * 11. ACCESIBILIDAD Y FIXES
 * ------------------------------------------------------------------------- */
.screen-reader-text,
.skip-link {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

@media (max-width: 992px) {
    .deco-filo-grid-3col { grid-template-columns: 1fr !important; gap: 40px !important; text-align: center !important; }
    .deco-filosofia { padding: 50px 20px !important; }
    .deco-filo-grid-3col .filo-left, .deco-filo-grid-3col .filo-right { text-align: center !important; padding: 15px 0; }
    .deco-filo-grid-3col .filo-center { width: 100% !important; max-width: 400px; margin: 0 auto; order: -1; min-height: 0; }
    .deco-filo-grid-3col .filo-photo-3col,
    .deco-filo-grid-3col .filo-photo-placeholder {
        height: auto;
        aspect-ratio: 3 / 2;
        -webkit-mask-image: none;
        mask-image: none;
        border-radius: 4px;
    }
    .filo-title::after { left: 50%; transform: translateX(-50%); }
}

/* ==========================================================================
   FIX APILADO DEL MENÚ (2 jul 2026) — MÁXIMA PRIORIDAD (última regla del archivo)
   El header y su menú (submenú de escritorio + off-canvas móvil) deben quedar
   SIEMPRE por encima del contenido. Causa del bug: 'position:static' (usado para
   el admin bar) sumado al 'backdrop-filter' dejaba el contexto de apilado del
   header en auto(0), por debajo de las secciones con z-index del contenido.
   Solución: el header SIEMPRE posicionado con z-index alto — sticky para el
   visitante; relative (en flujo, sin hueco) cuando hay admin bar.
   ========================================================================== */
html body #masthead.mp-main-header { z-index: 10000 !important; }
html body:not(.admin-bar) #masthead.mp-main-header { position: sticky !important; top: 0 !important; }
html body.admin-bar #masthead.mp-main-header { position: relative !important; top: auto !important; }

/* ==========================================================================
   FIX MENÚ MÓVIL (2 jul 2026)
   1) La lista del menú debe ir en COLUMNA dentro del panel off-canvas. GeneratePress
      estiliza #primary-menu (ID) y pisaba nuestra clase .mp-menu-list → la lista se
      quedaba en FILA y se salía del panel por la derecha (el panel se veía "vacío").
      Fix: selector con id+clase + !important para ganar a GP.
   2) Al abrir el menú, bloquear de verdad el scroll del fondo (iOS incluido).
   (23-jul-2026: media query igualada a la del bloque del menú móvil de la línea
   ~1839 — un iPad HORIZONTAL >1024px táctil abría el acordeón SIN este bloque y
   la flecha del submenú se iba arriba del panel, el chevron suelto de la captura
   de Pura.)
   ========================================================================== */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .mp-navigation-bar ul#primary-menu.mp-menu-list {
        display: flex !important;        /* GeneratePress pone display:none al menú por debajo de ~768px; forzamos que se vea dentro de nuestro panel off-canvas */
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
    }
    /* El enlace del item con submenú debe ser el ancla de su flecha ::after
       (GP posiciona el <li> por ID y la flecha se iba arriba del panel). */
    .mp-navigation-bar ul#primary-menu .menu-item-has-children > a {
        position: relative !important;
        display: block !important;
        /* Reservar hueco fijo a la derecha para la flecha; los títulos largos
           envuelven a 2 líneas en vez de meterse debajo de la flecha. */
        padding-right: 34px !important;
        white-space: normal !important;
    }
    /* Flecha del submenú: chevron limpio con bordes (el carácter › rotado se
       renderizaba fuera de sitio). Anclado a la derecha del enlace padre. */
    .mp-navigation-bar ul#primary-menu .menu-item-has-children > a::after {
        content: "" !important;
        position: absolute !important;
        right: 12px !important;
        left: auto !important;
        top: 50% !important;
        width: 9px !important;
        height: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-right: 2px solid var(--color-secondary) !important;
        border-bottom: 2px solid var(--color-secondary) !important;
        background: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: translateY(-70%) rotate(45deg) !important;
        transform-origin: center !important;
        transition: transform 0.3s ease !important;
    }
    .mp-navigation-bar ul#primary-menu .menu-item-has-children.submenu-open > a::after {
        transform: translateY(-30%) rotate(225deg) !important;
    }
    body.no-scroll { overflow: hidden !important; overscroll-behavior: contain; }
    html:has(body.no-scroll) { overflow: hidden !important; }
}

/* ==========================================================================
   HOME · AJUSTES MÓVIL (3 jul 2026)
   ========================================================================== */
@media (max-width: 768px) {
    /* Proyectos: en táctil no hay :hover → el nombre debe verse SIEMPRE,
       abajo, sobre un degradado que lo hace legible sin tapar la foto. */
    .project-simple-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top,
            rgba(0,0,0,0.62) 0%,
            rgba(0,0,0,0.18) 45%,
            rgba(0,0,0,0) 72%) !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
    }
    .project-simple-overlay h3 {
        text-align: left !important;
        font-size: 1.05rem !important;
        padding: 14px 16px !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    }

    /* Animación de entrada del título al hacer scroll (la sección tiene
       animate-on-scroll → recibe .is-visible). SEGURO: el título por defecto
       ya es visible (opacity:1 arriba); la animación SOLO corre cuando llega
       .is-visible, así que si el observer no dispara, el título NO desaparece. */
    .home-projects-simple.is-visible .project-simple-overlay h3 {
        animation: projTitleIn 0.6s ease both;
    }
    .projects-simple-grid-container .project-simple-card:nth-child(2) .project-simple-overlay h3 { animation-delay: 0.09s; }
    .projects-simple-grid-container .project-simple-card:nth-child(3) .project-simple-overlay h3 { animation-delay: 0.18s; }
    .projects-simple-grid-container .project-simple-card:nth-child(4) .project-simple-overlay h3 { animation-delay: 0.27s; }
    .projects-simple-grid-container .project-simple-card:nth-child(5) .project-simple-overlay h3 { animation-delay: 0.36s; }
    .projects-simple-grid-container .project-simple-card:nth-child(6) .project-simple-overlay h3 { animation-delay: 0.45s; }

    /* CTA final: en móvil el gradiente horizontal dejaba ver la foto tras el
       texto. Velo crema más uniforme para que el texto se lea mejor. */
    .home-cta-new .cta-gradient-overlay {
        background: linear-gradient(to bottom,
            rgba(247,246,242,0.45) 0%,
            rgba(247,246,242,0.68) 42%,
            rgba(247,246,242,0.68) 58%,
            rgba(247,246,242,0.45) 100%) !important;
    }
}
@keyframes projTitleIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .home-projects-simple.is-visible .project-simple-overlay h3 { animation: none; }
}

/* ===== Legal pages (default template): centered readable column ===== */
.mp-legal-page .inside-article {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 45px 22px 75px;
}
.mp-legal-page .entry-header { margin-bottom: 10px; }
.mp-legal-page .entry-content h2 { margin-top: 1.9em; }
.mp-legal-page .entry-content h3 { margin-top: 1.5em; margin-bottom: .4em; }
.mp-legal-page .entry-content ul { padding-left: 1.3em; }
.mp-legal-page .entry-content a { color: var(--color-secondary); }

/* ===== Enlace a las páginas de persona (Sobre Pura / Sobre Claudio) =====
   Decisión 28-jul: Reformas enlaza a /sobre-claudio/ y Decoración a /sobre-mi/.
   Se usa en page-reformas.php (bloque coordinador) y page-decoracion.php (Mi filosofía). */
.mp-persona-link {
    margin: 18px 0 0;
}
.mp-persona-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, gap 0.25s ease;
}
.mp-persona-link a:hover,
.mp-persona-link a:focus-visible {
    border-bottom-color: var(--color-secondary);
    gap: 12px;
}
.mp-persona-link .mp-persona-arrow { font-size: 1.05rem; line-height: 1; }
@media (max-width: 900px) {
    .mp-persona-link { margin-top: 14px; }
}

/* ------------------------------------------------------------------------- *
 * AIRE LATERAL EN MÓVIL (petición Pura, 21-ago)
 * Mismo criterio que los «puntos fuertes» de Reformas: los bloques no van de
 * borde a borde, sino al 90% y centrados. Afecta a las tarjetas de proyecto
 * (home, Decoración, Reformas y el archivo) y a las rejillas de Instagram.
 * Los márgenes llevan !important porque el <style> de cada plantilla se carga
 * después de esta hoja y define el margin en atajo.
 * ------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .projects-simple-grid-container .project-simple-card {
        width: 90%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 700px) {
    .deco-insta-realtime .insta-feed-grid,
    .proy-insta-realtime .insta-feed-grid,
    .insta-feed-grid {
        width: 90%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}