/* =============================================
   1. VARIABLES GLOBALES Y RESET
   ============================================= */
:root {
    /* Identidad Juniper Ridge Painting: oro de marca sobre tema oscuro de lujo */
    --gold: #C5A059;
    --dark-gold: #a9854a;
    --dark: #1a1a1a;
    --cream: #f9f7f2;
    --white: #ffffff;
    --text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

    /* Paleta del tema oscuro (capa 21 al final del archivo) */
    --bg: #050505;
    --bg-alt: #0b0b0b;
    --card: #0f0f0f;
    --line: rgba(255, 255, 255, 0.08);
    --text-strong: #f5f2ea;
    --text-soft: #b3ac9e;
    --text-mute: #8f897c;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--cream);
    color: var(--dark);
    line-height: 1.6;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* =============================================
   2. CLASES REUTILIZABLES (Contenedores y Botones)
   ============================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.bg-cream {
    background-color: var(--cream) !important;
}

/* Botones Globales */
.btn-outline, .btn-hero-dark, .btn-quote, .btn-hero {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    transition: 0.3s;
    text-align: center;
}

.btn-outline, .btn-hero-dark {
    box-sizing: border-box;
    height: 50px; 
    padding: 0 30px; 
}

.btn-outline {
    border: 2px solid var(--dark);
    color: var(--dark);
    background-color: transparent;
}

.btn-outline:hover {
    background-color: var(--dark);
    color: var(--white);
}

.btn-hero-dark {
    background-color: var(--dark);
    color: var(--white);
    border: 2px solid var(--dark);
}

.btn-hero-dark:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--white);
    transform: translateY(-2px);
}

/* =============================================
   3. HEADER / MENÚ
   ============================================= */
.main-header {
    background-color: var(--white);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-header .logo img {
    height: 50px;
    width: auto; /* conserva la proporción (el atributo width del <img> no debe mandar) */
    display: block;
}

.main-header .nav-menu ul {
    display: flex;
    gap: 25px;
    align-items: center;
}

.main-header .nav-menu a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.main-header .nav-menu a:hover:not(.btn-quote) {
    color: var(--gold);
}

.btn-quote {
    background-color: var(--gold);
    color: var(--white);
    padding: 10px 20px;
}

.btn-quote:hover {
    background-color: var(--dark-gold);
}

/* =============================================
   4. HERO SLIDER
   ============================================= */
.hero-slider {
    position: relative;
    width: 100%;
    height: 80vh; 
    overflow: hidden;
    background-color: var(--dark);
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
}

.slide.active .slide-bg {
    animation: kenBurnsZoom 20s linear infinite alternate;
}

@keyframes kenBurnsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 3;
}

.slide-content {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; 
    height: 100%;
    color: var(--white);
    z-index: 4;
    text-shadow: var(--text-shadow);
    padding: 0 50px;
}

.slide-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    opacity: 0;
    line-height: 1.1;
}

.slide.active .slide-content h1 {
    animation: slideInUp 0.8s ease-out 0.5s forwards;
}

.gold-text {
    color: var(--gold);
}

.slide-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 40px;
    opacity: 0;
}

.slide.active .slide-content p {
    animation: slideInUp 0.8s ease-out 0.8s forwards;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-hero {
    border: 2px solid var(--gold);
    color: var(--white);
    padding: 15px 40px;
}

/* Sólo dentro del slider animado el botón inicia oculto */
.slide-content .btn-hero { opacity: 0; }
.slide.active .slide-content .btn-hero {
    animation: fadeIn 0.8s ease-out 1.1s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.btn-hero:hover {
    background-color: var(--gold);
    color: var(--dark);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(181, 148, 73, 0.4);
}

.slider-nav {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 5;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}

.dot.active, .dot:hover {
    background-color: var(--gold);
    transform: scale(1.2);
}

/* =============================================
   5. THE POWER OF TWO (Blindado contra imágenes gigantes)
   ============================================= */
.power-of-two {
    background-color: var(--white);
    padding: 100px 0;
}

.dual-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%; 
}

/* FLEX-SHRINK: 0 IMPIDE QUE SE APLASTEN */
.dual-text {
    width: 45%; 
    flex-shrink: 0; 
}

.dual-text h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.dual-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}

.dual-image {
    width: 50%; 
    flex-shrink: 0; 
    position: relative;
    aspect-ratio: 16 / 10; 
    overflow: hidden; 
    border-radius: 8px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
}

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

/* =============================================
   6. SERVICIOS Y TARJETAS (Who We Serve & What We Do)
   ============================================= */
.who-we-serve, .what-we-do, .testimonials {
    padding: 100px 0;
    background-color: var(--white); 
}

/* Forzamos al header de sección a centrarse correctamente */
.section-header.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 60px;
    width: 100%; 
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 15px;
}

.section-header p {
    font-size: 1.2rem;
    color: #666;
    max-width: 700px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: stretch;
    width: 100%;
}

.service-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff; /* Blanco forzado */
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06); 
    transition: all 0.4s ease;
    border-bottom: 4px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom: 4px solid var(--gold);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--dark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.service-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; 
}

.service-link-text {
    color: var(--gold);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.service-card:hover .service-link-text {
    color: var(--dark-gold);
}

/* =============================================
   7. TESTIMONIALES (Google Reviews)
   ============================================= */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px; 
    margin-bottom: 50px;
}

.review-card {
    background-color: #ffffff; 
    padding: 45px 35px; 
    border-radius: 12px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.06); 
    position: relative; 
    display: flex;
    flex-direction: column;
}

.stars {
    color: #fbbc04; 
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.review-text {
    font-style: italic;
    color: #444; 
    line-height: 1.8; 
    font-size: 0.95rem; 
    margin-bottom: 30px;
    flex-grow: 1; 
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px;
}

.reviewer-avatar {
    width: 45px;
    height: 45px;
    background-color: var(--gold);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.reviewer-info h4 {
    font-size: 1rem;
    color: var(--dark);
    margin-bottom: 2px;
}

.review-date {
    font-size: 0.8rem;
    color: #888;
}

.google-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 25px;
    opacity: 0.8;
}

.review-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; 
}

/* =============================================
   8. FOOTER (Arreglo del tamaño del Logo)
   ============================================= */
/* =============================================
   8. FOOTER (DISEÑO PREMIUM Y BALANCEADO)
   ============================================= */
/* =============================================
   8. FOOTER (COMPACTO Y HORIZONTAL)
   ============================================= */
.main-footer {
    background-color: var(--cream);
    padding: 50px 0 20px; /* Redujimos el padding superior a 50px para ahorrar espacio */
    color: var(--dark);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.main-footer .container {
    display: flex;
    flex-direction: column;
}

.footer-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alinea todo al medio verticalmente */
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

/* Columna 1: Brand */
.footer-brand {
    flex: 1;
    min-width: 200px;
}

.footer-logo {
    width: 100%;
    max-width: 180px; /* Logo más pequeño para que no robe tanto espacio */
    height: auto;
    display: block;
    margin-bottom: 5px;
}

.footer-tagline {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Columna 2: Menú Horizontal */
.footer-horizontal-menu {
    flex: 2;
    display: flex;
    justify-content: center;
    min-width: 300px;
}

.footer-horizontal-menu ul {
    display: flex;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-horizontal-menu a {
    color: var(--dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.footer-horizontal-menu a:hover,
.footer-contact-compact a:hover {
    color: var(--gold);
}

/* Columna 3: Contacto Compacto */
.footer-contact-compact {
    flex: 1;
    min-width: 200px;
    text-align: right; /* Alineado a la derecha para equilibrar */
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

.footer-contact-compact a {
    color: var(--dark);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Footer Bottom (Copyright y Créditos) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 20px;
    font-size: 0.8rem;
    color: #777;
    flex-wrap: wrap;
    gap: 15px;
}

/* Estilo para tu enlace de Reno Tech Systems */
.designer-credits a {
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.designer-credits a:hover {
    color: var(--gold);
}

/* --- Responsive para Móviles --- */
@media (max-width: 992px) {
    .footer-row-top {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .footer-brand, .footer-horizontal-menu, .footer-contact-compact {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .footer-logo {
        margin: 0 auto 10px;
    }

    .footer-horizontal-menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}
/* =============================================
   9. MEDIA QUERIES (Móviles y Tablets)
   ============================================= */
@media (max-width: 992px) {
    .dual-layout { flex-direction: column; text-align: center; }
    .dual-text, .dual-image { width: 100%; padding-right: 0; }
    .dual-image { max-width: 800px; }
    
    /* En tablets, centramos el footer */
    .footer-grid { flex-direction: column; align-items: center; text-align: center; }
    .footer-contact { text-align: center; }
}

@media (max-width: 768px) {
    /* HEADER BONUS FIX: Permite que el menú se deslice lateralmente en móvil sin aplastarse */
    .main-header .container { padding: 0 15px; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .main-header .logo img { height: 45px; width: auto; margin-bottom: 5px; }
    .main-header .nav-menu { width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 10px; text-align: center;}
    .main-header .nav-menu::-webkit-scrollbar { display: none; } /* Oculta la barra de scroll */
    .main-header .nav-menu ul { justify-content: flex-start; gap: 15px; }
    .main-header .nav-menu a:not(.btn-quote) { font-size: 0.8rem; }
    .btn-quote { padding: 8px 15px; font-size: 0.8rem; }

    .hero-slider { height: 70vh; }
    .slide-content { padding: 0 20px; align-items: center; text-align: center; }
    .slide-content h1 { font-size: 2.2rem; }
    .slide-content p { font-size: 1rem; }

    .power-of-two, .who-we-serve, .what-we-do, .testimonials { padding: 60px 0; }
    .dual-text h2, .section-header h2 { font-size: 2.2rem; }

    .services-grid, .reviews-grid { grid-template-columns: 1fr !important; gap: 30px; }
    
    .review-actions { flex-direction: column; width: 100%; align-items: center; }
    .review-actions a { width: 100%; max-width: 300px; }

    /* FOOTER FIX MÓVIL: Todo centrado matemáticamente */
    .footer-grid { flex-direction: column; text-align: center; gap: 30px; }
    .footer-info, .footer-contact { width: 100%; text-align: center; }
    .footer-logo { margin: 0 auto 15px auto !important; } /* Esto es lo que centra la imagen perfectamente */
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .main-footer .container { display: block !important; } 
}

/* =============================================
   10. PÁGINA: ABOUT US & EQUIPO
   ============================================= */

/* Cabecera más pequeña para páginas internas */
.page-hero {
    position: relative;
    width: 100%;
    height: 40vh; /* La mitad de tamaño que la del home */
    background-color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Hero interno con <img> real (mejor LCP que background-image: el navegador
   puede priorizarla y elegir la variante responsive del <picture>). */
.page-hero__media,
.page-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.page-hero__media img { object-fit: cover; object-position: center; }
.page-hero .overlay { z-index: 2; }

/* Variante sin fotografía: degradado oscuro elegante (cero peso de descarga). */
.page-hero--gradient {
    background: linear-gradient(135deg, #141414 0%, #232323 55%, #3a3322 100%);
}

.hero-inner {
    position: relative;
    z-index: 4;
    flex-direction: column;
    text-align: center;
    color: var(--white);
}

.hero-inner h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    text-shadow: var(--text-shadow);
}

.hero-inner p {
    font-size: 1.2rem;
    text-shadow: var(--text-shadow);
}

/* --- Sección dual "Our Story" -------------------------------------------------
   Rejilla propia para NO heredar las reglas flex globales de .dual-* (que
   encogían la imagen y recortaban el bloque dorado). */
.about-story {
    background-color: var(--cream);
    padding: 100px 0;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* texto | imagen, mitad y mitad en escritorio */
    gap: 60px;
    align-items: center;
}

.story-text h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.story-text p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 18px;
}

.story-media { position: relative; }

.story-media img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 26px 26px 0 var(--gold); /* bloque dorado imponente detrás de la imagen */
}

/* --- Sección del Equipo -------------------------------------------------------- */
.team-section {
    padding: 100px 0;
    background-color: var(--white);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* La tarjeta responde como UNA sola pieza: fondo, sombra, elevación y textos
   transicionan con la misma curva suave para evitar cambios bruscos. */
.team-card {
    position: relative;
    background-color: var(--white);
    padding: 40px 30px;
    text-align: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* HOVER: fondo oscuro premium, elevación y sombra dorada envolvente */
.team-card:hover {
    background-color: var(--dark);
    transform: translateY(-12px);
    box-shadow: 0 22px 48px rgba(197, 160, 89, 0.45),
                0 0 0 1px rgba(197, 160, 89, 0.25);
}

/* --- Avatar con volteo 3D que revela la frase --- */
.photo-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    perspective: 1000px;
}

.photo-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.team-card:hover .photo-flipper { transform: rotateY(180deg); }

.photo-placeholder,
.quote-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.photo-placeholder {
    background: var(--white);
    color: var(--gold);
    border: 3px solid var(--gold);
    font-size: 1.8rem;
}

.quote-overlay {
    background: var(--gold);
    color: var(--white);
    transform: rotateY(180deg);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.3;
    font-weight: 500;
    padding: 12px;
}

/* --- Texto del equipo: transición suave de color para el hover --- */
.team-info h3 {
    font-size: 1.4rem;
    color: var(--dark);
    margin: 10px 0 5px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-title {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #888;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-email {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Contraste perfecto y legible sobre el fondo oscuro */
.team-card:hover .team-info h3 { color: var(--white); }
.team-card:hover .team-title  { color: var(--gold); }
.team-card:hover .team-email  { color: var(--gold); border-bottom-color: var(--gold); }

/* --- Responsive: una sola columna limpia, sin desbordes --- */
@media (max-width: 992px) {
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
    .story-text { text-align: center; }
    .story-media img { height: 360px; box-shadow: 18px 18px 0 var(--gold); }
}

@media (max-width: 768px) {
    .page-hero { height: 30vh; }
    .hero-inner h1 { font-size: 2.5rem; }
    .story-media img { height: 300px; box-shadow: 12px 12px 0 var(--gold); }
}

@media (max-width: 600px) {
    .team-grid { grid-template-columns: 1fr; }
}

/* =============================================
   11. PÁGINA: SERVICES (Detalles)
   ============================================= */

/* Espaciado para cada bloque de servicio */
.service-detail {
    padding: 100px 0;
}

/* La magia del Zig-Zag: Invierte el orden de la fila */
.reverse-layout {
    flex-direction: row-reverse;
}

/* Ajustes para la lista de servicios con checks */
.service-list {
    margin-top: 20px;
}

.service-list li {
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 10px;
    font-weight: 600;
}

/* Reparación para móviles: Cuando la pantalla es pequeña, 
   queremos que la imagen SIEMPRE quede arriba del texto, 
   sin importar si es reverse-layout o no. */
@media (max-width: 992px) {
    .reverse-layout {
        flex-direction: column; /* Anulamos el row-reverse en tablet/móvil */
    }
    
    /* Usamos 'order' para forzar que la imagen suba arriba del texto en móviles */
    .service-detail .dual-image {
        order: -1; 
        margin-bottom: 30px;
    }
}

/* =============================================
   12. PÁGINA: PROJECTS (Galería Premium)
   ============================================= */
.portfolio-section {
    padding: 100px 0;
}

/* Filtros */
.project-filters-container {
    justify-content: center;
    margin-bottom: 50px;
}

.project-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    background-color: var(--white);
    padding: 15px 25px;
    border-radius: 50px; /* Estilo de pastilla/píldora corporativa */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.filter-btn {
    color: #666;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
    padding: 8px 15px;
    border-radius: 20px;
}

.filter-btn:hover, .filter-btn.active {
    color: var(--gold);
    background-color: rgba(181, 148, 73, 0.1); /* Fondo dorado muy sutil */
}

/* La Cuadrícula (Native Grid) */
.portfolio-grid {
    display: grid;
    /* Columnas automáticas, mínimo 350px de ancho */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* Tarjeta del Proyecto (Premium UI) */
.project-card {
    background-color: transparent;
    overflow: hidden;
    position: relative; /* Crucial para el overlay */
    transition: all 0.4s ease-in-out;
}

/* Efecto hover general de la tarjeta */
.project-card:hover {
    transform: translateY(-5px);
}

.project-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* Cuadrado perfecto corporativo. Puedes usar 16/10 si prefieres rectangular */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease; /* Efecto zoom lento premium */
}

/* Overlay sutil que aparece en hover */
.project-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(26, 26, 26, 0.4); /* Fondo oscuro translúcido */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* El icono 'Plus' en el overlay */
.icon-plus {
    color: var(--white);
    font-size: 3rem;
    font-weight: 300;
}

/* Disparador de efectos en Hover de la tarjeta */
.project-card:hover .project-image img {
    transform: scale(1.1); /* Zoom sutil */
}

.project-card:hover .project-overlay {
    opacity: 1; /* Aparece el overlay */
}

/* Información del proyecto debajo de la imagen */
.project-info {
    padding: 20px 10px;
}

.project-info h3 {
    font-size: 1.3rem;
    color: var(--dark);
    font-family: 'Montserrat', sans-serif; /* sans-serif corporativo para la galería */
    font-weight: 700;
    margin-bottom: 5px;
}

.project-category {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsividad */
@media (max-width: 768px) {
    .portfolio-section { padding: 60px 0; }
    .project-filters { padding: 10px; border-radius: 10px; }
    .filter-btn { font-size: 0.8rem; padding: 6px 10px; }
    .portfolio-grid { grid-template-columns: 1fr; } /* Una sola columna en móvil */
}
/* =============================================
   13. PÁGINA: CONTACT US
   ============================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad info, mitad formulario */
    gap: 60px;
    align-items: start;
}

/* --- Información de Contacto --- */
.contact-info-box h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.contact-info-box p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.info-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.info-item {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
}

.info-item strong {
    color: var(--dark);
    font-size: 1.1rem;
}

.info-item a {
    color: var(--gold);
    font-weight: 600;
}

.info-item a:hover {
    color: var(--dark-gold);
    text-decoration: underline;
}

/* El mapa de Google */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* --- Formulario de Contacto --- */
.contact-form-box {
    background-color: var(--cream);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.contact-form-box h3 {
    font-size: 2rem;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    background-color: var(--white);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 5px rgba(181, 148, 73, 0.3);
}

/* Responsividad para la página de Contacto */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* En tablets y móviles, se apilan */
    }
    .contact-form-box {
        padding: 30px 20px;
    }
}

/* =============================================
   14. FORMULARIOS MODERNOS (Contact + Modal)
   ============================================= */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form .form-group { margin-bottom: 0; }
.contact-form .full,
.contact-form .form-group.full { grid-column: 1 / -1; }

.form-badge {
    display: inline-block;
    background: rgba(181, 148, 73, 0.12);
    color: var(--dark-gold);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 14px;
}

.form-intro {
    color: #666;
    font-size: 0.98rem;
    margin-bottom: 25px;
}

/* Inputs refinados (aplican tanto a la página de contacto como al modal) */
.contact-form input,
.contact-form select,
.contact-form textarea,
.jr-modal__form input,
.jr-modal__form select,
.jr-modal__form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e2ded5;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    background-color: var(--white);
    color: var(--dark);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.contact-form label,
.jr-modal__form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.jr-modal__form input:focus,
.jr-modal__form select:focus,
.jr-modal__form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(181, 148, 73, 0.15);
    background-color: #fffdf8;
}

.contact-form textarea { resize: vertical; min-height: 120px; }

/* Botón de envío premium con degradado dorado */
.jr-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 16px 28px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
    box-shadow: 0 8px 20px rgba(181, 148, 73, 0.30);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.jr-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(181, 148, 73, 0.40);
    filter: brightness(1.05);
}

.jr-form-submit:active { transform: translateY(0); }

.form-fineprint,
.jr-modal__fineprint {
    margin-top: 14px;
    font-size: 0.78rem;
    color: #999;
    text-align: center;
}

@media (max-width: 600px) {
    .contact-form { grid-template-columns: 1fr; }
}

/* =============================================
   15. MODAL "GET A FREE QUOTE" (scroll 50% / exit-intent)
   ============================================= */
.jr-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

.jr-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.jr-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 14, 12, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.jr-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    transform: translateY(24px) scale(0.97);
    transition: transform .4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.jr-modal.is-open .jr-modal__dialog { transform: none; }

.jr-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--dark);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, color .25s ease;
}

.jr-modal__close:hover {
    background: var(--gold);
    color: #fff;
    transform: rotate(90deg);
}

.jr-modal__grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
}

/* Panel izquierdo (branding oscuro) */
.jr-modal__aside {
    background: linear-gradient(160deg, #232323 0%, #111 100%);
    color: var(--white);
    padding: 44px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jr-modal__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.jr-modal__aside h2 {
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--white);
}

.jr-modal__lead {
    color: #c9c6c0;
    font-size: 0.95rem;
    margin-bottom: 22px;
}

.jr-modal__perks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jr-modal__perks li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9rem;
    color: #e8e6e2;
}

.jr-modal__perks li::before {
    content: "\2714";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

/* Panel derecho (formulario) */
.jr-modal__form-wrap { padding: 40px 34px; }
.jr-modal__form .form-group { margin-bottom: 16px; }
.jr-modal__submit { margin-top: 6px; }

/* Bloqueo del scroll del body cuando el modal está abierto */
body.jr-modal-lock { overflow: hidden; }

@media (max-width: 680px) {
    .jr-modal__grid { grid-template-columns: 1fr; }
    .jr-modal__aside { padding: 30px 24px; }
    .jr-modal__aside h2 { font-size: 1.6rem; }
    .jr-modal__perks { display: none; } /* en móvil priorizamos el formulario */
    .jr-modal__form-wrap { padding: 28px 24px 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .jr-modal,
    .jr-modal__dialog { transition: none; }
    .jr-modal__dialog { transform: none; }
}

/* =============================================
   16. SÚPER CARRUSEL DE RESEÑAS (Mobile-First + Enfoque 3D)
   ============================================= */
.reviews-carousel-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews-carousel {
    flex: 1 1 auto;
    min-width: 0;            /* permite que el flex item se encoja y recorte */
    overflow: hidden;
    width: 100%;
}

.reviews-track {
    position: relative;      /* clave: las tarjetas miden offsetLeft contra el track */
    display: flex;
    gap: 16px;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Tarjeta (BASE = móvil: una a la vez) --- */
.t-card {
    flex: 0 0 100%;
    box-sizing: border-box;
    height: 430px;
}

.t-card-inner {
    position: relative;
    height: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    padding: 38px 30px 28px;
    display: flex;
    flex-direction: column;
}

.t-google {
    position: absolute;
    top: 26px;
    right: 28px;
    width: 22px;
    height: 22px;
    opacity: 0.85;
}

.t-stars {
    color: #fbbc04;
    font-size: 1.4rem;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.t-text {
    font-style: italic;
    color: #444;
    line-height: 1.75;
    font-size: 0.98rem;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;        /* el texto truncado nunca estira la tarjeta */
}

.t-text.is-expanded {
    overflow-y: auto;        /* al expandir, el texto largo hace scroll DENTRO de la tarjeta */
    padding-right: 6px;
}

.t-readmore {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 10px 0 4px;
    cursor: pointer;
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.t-readmore:hover { color: var(--dark-gold); text-decoration: underline; }

.t-reviewer {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 18px;
    margin-top: auto;
}

.t-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
    box-shadow: 0 4px 12px rgba(181, 148, 73, 0.35);
}

.t-meta h4 { font-size: 1rem; color: var(--dark); margin: 0 0 2px; }
.t-role { font-size: 0.76rem; color: #8a8a8a; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Flechas de navegación --- */
.rc-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--dark);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, transform .3s ease, opacity .3s ease;
}

.rc-arrow:hover { background: var(--gold); transform: scale(1.08); }
.rc-arrow:disabled { opacity: 0.3; cursor: default; transform: none; }

/* En móvil las flechas se superponen para no robar ancho a la tarjeta */
@media (max-width: 768px) {
    .reviews-carousel-wrap { padding: 0 6px; }
    .rc-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(26, 26, 26, 0.55);
    }
    .rc-arrow:hover { transform: translateY(-50%) scale(1.05); }
    .rc-prev { left: 2px; }
    .rc-next { right: 2px; }
}

/* --- Puntos de navegación --- */
.reviews-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.reviews-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
}

.reviews-dots button.active { background: var(--gold); transform: scale(1.35); }

/* =============================================
   ESCRITORIO (≥769px): 3 tarjetas con enfoque 3D
   ============================================= */
@media (min-width: 769px) {
    .reviews-carousel {
        padding: 44px 0;     /* aire para que la tarjeta central ampliada no se recorte */
        perspective: 1800px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
    }

    .reviews-track {
        gap: 28px;
        align-items: center;
        transform-style: preserve-3d;
    }

    .t-card {
        flex: 0 0 33%;
        height: 380px;
        opacity: 0.4;
        transform: scale(0.82);
        filter: saturate(0.85);
        transition: transform .6s cubic-bezier(0.22, 0.61, 0.36, 1),
                    opacity .6s ease, filter .6s ease;
    }

    .t-card.is-left  { opacity: 0.7; transform: scale(0.88) rotateY(9deg); }
    .t-card.is-right { opacity: 0.7; transform: scale(0.88) rotateY(-9deg); }

    .t-card.is-center {
        opacity: 1;
        transform: scale(1.05);     /* zoom sutil de la tarjeta central */
        filter: saturate(1);
        z-index: 2;
    }

    /* Sombreado dorado más profundo en la tarjeta enfocada */
    .t-card.is-center .t-card-inner {
        box-shadow: 0 26px 55px rgba(181, 148, 73, 0.38);
        border: 1px solid rgba(181, 148, 73, 0.25);
    }

    .rc-arrow { width: 52px; height: 52px; font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-track,
    .t-card { transition: none; }
}

/* =============================================
   17. MÓDULO "THE TRANSFORMATION" (Antes / Después · JuxtaposeJS)
   ============================================= */
.transformation-section {
    padding: 100px 0;
    background-color: var(--white);
}

/* Contenedor responsivo y centrado (Mobile-First) con los bordes suaves y la
   sombra dorada característicos del sitio. */
.transformation-frame {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 48px rgba(181, 148, 73, 0.28),
                0 0 0 1px rgba(181, 148, 73, 0.15);
}

/* JuxtaposeJS es responsivo por defecto; sólo suavizamos sus bordes. */
.transformation-frame .juxtapose,
.transformation-frame .jx-slider { border-radius: 16px; }

.transformation-frame img { display: block; max-width: 100%; }

/* =============================================
   18. SEGURIDAD (Honeypot) + MICRO-INTERACCIÓN (Fade-In al scroll)
   ============================================= */

/* Campo trampa anti-spam: oculto fuera de pantalla (los bots lo rellenan,
   los humanos nunca lo ven ni lo tabulan). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Aparición suave del contenido al entrar en el viewport.
   (Se llama jrFadeInUp para no colisionar con el @keyframes fadeIn del hero.) */
@keyframes jrFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.js-reveal { opacity: 0; }
.js-reveal.is-visible { animation: jrFadeInUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal,
    .js-reveal.is-visible { opacity: 1; animation: none; }
}

/* =============================================
   19. MENÚ DESPLEGABLE "LOCATIONS" (CSS puro)
   ============================================= */
.main-header .nav-menu li.has-dropdown { position: relative; }

.main-header .nav-menu .nav-parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--dark);
    transition: color 0.3s ease;
}

.main-header .nav-menu .has-dropdown:hover .nav-parent,
.main-header .nav-menu .has-dropdown:focus-within .nav-parent { color: var(--gold); }

.main-header .nav-menu .nav-parent .caret {
    font-size: 0.65rem;
    transition: transform 0.3s ease;
}
.main-header .nav-menu .has-dropdown:hover .nav-parent .caret,
.main-header .nav-menu .has-dropdown:focus-within .nav-parent .caret { transform: rotate(180deg); }

.main-header .nav-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    min-width: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--dark);
    border-top: 3px solid var(--gold);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1001;
}

.main-header .nav-menu .has-dropdown:hover .dropdown,
.main-header .nav-menu .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.main-header .nav-menu .dropdown li { display: block; }

.main-header .nav-menu .dropdown a {
    display: block;
    padding: 11px 22px;
    color: #e8e6e2;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.main-header .nav-menu .dropdown a:hover {
    background: rgba(197, 160, 89, 0.12);
    color: var(--gold);
    padding-left: 28px;
}

/* En móvil (menú horizontal con scroll) el dropdown se vuelve inline para no
   quedar recortado por overflow: los 3 enlaces se integran en la fila. */
@media (max-width: 768px) {
    .main-header .nav-menu li.has-dropdown { position: static; }
    .main-header .nav-menu .nav-parent { display: none; }
    .main-header .nav-menu .dropdown {
        position: static;
        display: flex;
        gap: 15px;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .main-header .nav-menu .dropdown a {
        padding: 0;
        color: var(--dark);
        font-size: 0.8rem;
    }
    .main-header .nav-menu .dropdown a:hover { background: none; color: var(--gold); padding-left: 0; }
}

/* =============================================
   20. PÁGINA: THANK YOU (confirmación de envío)
   ============================================= */
.thankyou-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--cream);
    padding: 100px 20px;
}

.thankyou-inner { max-width: 640px; }

.thankyou-check {
    width: 90px;
    height: 90px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
    color: var(--white);
    font-size: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(181, 148, 73, 0.4);
    animation: jrFadeInUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.thankyou-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
}

.thankyou-inner h1 { font-size: 3rem; margin-bottom: 16px; }
.thankyou-inner p { font-size: 1.15rem; color: #555; line-height: 1.8; margin-bottom: 34px; }

.thankyou-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .thankyou-inner h1 { font-size: 2.2rem; }
    .thankyou-actions { flex-direction: column; align-items: center; }
    .thankyou-actions a { width: 100%; max-width: 280px; }
}
/* =============================================
   20. JUNIPER RIDGE PAINTING — COMPONENTES NUEVOS
   ============================================= */

/* --- Hero estático (home): un <img> real como elemento LCP --- */
.hero-static {
    position: relative;
    width: 100%;
    height: 86vh;
    min-height: 540px;
    overflow: hidden;
    background-color: var(--dark);
    display: flex;
    align-items: center;
}

.hero-static__media,
.hero-static__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-static__media img { object-fit: cover; object-position: center; }

.hero-static .overlay { z-index: 2; }

.hero-static__content {
    position: relative;
    z-index: 4;
    flex-direction: column;
    align-items: flex-start;
    color: var(--white);
    text-shadow: var(--text-shadow);
    padding: 0 50px;
    animation: slideInUp 0.8s ease-out both;
}

.hero-static__content h1 {
    font-size: 3.6rem;
    line-height: 1.1;
    margin: 14px 0 22px;
}

.hero-static__content p {
    font-size: 1.2rem;
    max-width: 640px;
    margin-bottom: 36px;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(181, 148, 73, 0.55);
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-hero--ghost {
    border-color: rgba(255, 255, 255, 0.55);
}
.btn-hero--ghost:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--dark);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.25);
}

/* --- Trust bar bajo el hero --- */
.trust-bar {
    background-color: var(--dark);
    color: #e8e2d5;
    border-top: 1px solid rgba(181, 148, 73, 0.35);
    padding: 16px 0;
}
.trust-bar__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 28px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.trust-bar__items span { white-space: nowrap; }

/* --- Intro de secciones (sustituye los estilos inline del sitio original) --- */
.sectors-intro { padding: 90px 0 70px; background-color: var(--white); text-align: center; }
.sectors-intro__inner { flex-direction: column; }
.sectors-intro h2 { font-size: 2.5rem; margin-bottom: 20px; }
.sectors-intro__lead {
    max-width: 860px;
    margin: 0 auto;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.9;
}

.landing-detail { padding: 80px 0; }
.service-detail { padding: 90px 0; }
.tahoe-teaser, .climate-section, .transformations, .faq-section { padding: 100px 0; }
.transformations { background-color: var(--white); }

/* --- CTA final reutilizable --- */
.landing-cta {
    background-color: var(--dark);
    color: var(--white);
    padding: 85px 0;
    text-align: center;
}
.landing-cta__inner { flex-direction: column; }
.landing-cta h2 { color: var(--white); margin-bottom: 18px; font-size: 2.3rem; }
.landing-cta p { max-width: 620px; margin: 0 auto 30px; color: #ccc; }

/* --- Before / After comparison slider --- */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    align-items: start;
}

.ba-slider { margin: 0; }

.ba-frame {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    aspect-ratio: 11 / 6;
    user-select: none;
    touch-action: pan-y;
}

.ba-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* La capa "before" se recorta con clip-path controlado por la variable --ba-pos */
.ba-before-wrap {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    width: 3px;
    background: var(--gold);
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}
.ba-handle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.ba-handle span::before {
    content: '⟷';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Range invisible encima: accesible con teclado y táctil de forma nativa */
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
    margin: 0;
}

.ba-tag {
    position: absolute;
    bottom: 14px;
    z-index: 3;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(0, 0, 0, 0.55);
    padding: 6px 14px;
    border-radius: 999px;
    pointer-events: none;
}
.ba-tag--before { left: 14px; }
.ba-tag--after  { right: 14px; }

.ba-slider figcaption {
    margin-top: 16px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #777;
}

/* --- Banner AI Paint Visualizer (HTML/CSS puro, cero scripts) --- */
.visualizer-cta {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(181, 148, 73, 0.22), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(181, 148, 73, 0.15), transparent 50%),
        linear-gradient(135deg, #141414 0%, #1f1c14 100%);
    color: var(--white);
    padding: 95px 0;
    text-align: center;
    overflow: hidden;
}
.visualizer-cta__inner { flex-direction: column; }
.visualizer-cta__badge {
    display: inline-block;
    align-self: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--gold);
    padding: 7px 18px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.visualizer-cta h2 { color: var(--white); font-size: 2.4rem; margin-bottom: 18px; }
.visualizer-cta p { max-width: 660px; margin: 0 auto 30px; color: #d8d3c6; line-height: 1.8; }
.visualizer-cta .hero-actions { justify-content: center; }
.visualizer-cta__fineprint { font-size: 0.85rem; color: #9b9483; margin-top: 18px; }

/* --- FAQ con <details> nativo --- */
.faq-section { background-color: var(--white); }
.faq-list {
    flex-direction: column;
    max-width: 860px;
    gap: 14px;
    display: flex;
}
.faq-item {
    border: 1px solid #e7e2d6;
    border-radius: 6px;
    background: var(--cream);
    transition: box-shadow 0.3s ease;
}
.faq-item[open] { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 54px 20px 24px;
    font-weight: 600;
    font-size: 1.02rem;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
    padding: 0 24px 22px;
    color: #555;
    line-height: 1.8;
}

/* --- Footer: línea de división de marca y áreas servidas --- */
.footer-division { font-size: 0.85rem; color: #777; margin-top: 6px; }
.footer-division a { color: var(--dark-gold); font-weight: 600; }
.footer-areas { font-size: 0.8rem; color: #888; margin-top: 8px; }

/* --- Sección de contacto (antes con estilos inline) --- */
.contact-section { padding: 100px 0; background-color: var(--white); }

/* --- Responsive de los componentes nuevos --- */
@media (max-width: 768px) {
    .hero-static { height: 78vh; min-height: 480px; }
    .hero-static__content { padding: 0 24px; }
    .hero-static__content h1 { font-size: 2.4rem; }
    .hero-static__content p { font-size: 1.05rem; }
    .hero-actions { width: 100%; }
    .hero-actions .btn-hero { width: 100%; text-align: center; }
    .trust-bar__items { justify-content: center; font-size: 0.75rem; }
    .sectors-intro h2 { font-size: 1.9rem; }
    .visualizer-cta h2 { font-size: 1.9rem; }
    .landing-cta h2 { font-size: 1.8rem; }
    .ba-grid { gap: 30px; }
}

/* =============================================
   21. TEMA OSCURO DE LUJO (identidad juniperrp.com)
   Capa de overrides al final del archivo: reescribe las superficies claras
   de la plantilla base con la paleta negro/oro del sitio original de
   Juniper Ridge Painting ("Masterful Finishes").
   ============================================= */

body {
    background-color: var(--bg);
    color: var(--text-soft);
}

/* --- Header fijo con desenfoque (estética premium del sitio original) --- */
.main-header {
    background-color: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
.main-header .nav-menu a,
.main-header .nav-menu .nav-parent { color: #ddd; }
.main-header .nav-menu a:hover:not(.btn-quote) { color: var(--gold); }
.main-header .nav-menu .dropdown {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.main-header .nav-menu .dropdown a { color: #ccc; }
.btn-quote { color: #050505; }

/* --- Superficies de sección --- */
.bg-cream { background-color: var(--bg-alt) !important; }
.power-of-two, .who-we-serve, .what-we-do, .testimonials,
.sectors-intro, .faq-section, .transformations, .tahoe-teaser,
.climate-section, .contact-section, .landing-detail, .service-detail {
    background-color: var(--bg);
}
.landing-cta { background-color: #000; border-top: 1px solid var(--line); }

/* --- Tipografía sobre fondo oscuro --- */
h1, h2, h3 { color: var(--text-strong); }
.section-header h2, .dual-text h2, .sectors-intro h2 { color: var(--text-strong); }
.section-header p { color: var(--text-mute); }
.dual-text p, .sectors-intro__lead, .service-list li { color: var(--text-soft); }
.gold-text { color: var(--gold); }

/* Brillo dorado sutil en el H1 del hero (gold-glow del sitio original) */
.hero-static__content h1, .hero-inner h1 {
    text-shadow: 0 0 22px rgba(197, 160, 89, 0.45), 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Efecto "dron": zoom lento y constante en la foto del hero (CSS puro,
   sustituye al carrusel GSAP del sitio original sin costo de JS) */
.hero-static__media img { animation: kenBurnsZoom 28s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
    .hero-static__media img { animation: none; }
}

/* --- Tarjetas de servicio --- */
.service-card {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: none;
}
.service-card h3 { color: var(--text-strong); }
.service-card p { color: var(--text-soft); }
.service-card:hover {
    border-color: rgba(197, 160, 89, 0.45);
    border-bottom: 4px solid var(--gold);
    box-shadow: 0 0 30px rgba(197, 160, 89, 0.12);
}

/* --- Botones --- */
.btn-outline { border-color: #d8d2c4; color: #d8d2c4; }
.btn-outline:hover { background-color: var(--gold); border-color: var(--gold); color: #050505; }
.btn-hero:hover { color: #050505; }
.btn-hero-dark { background-color: var(--gold); border-color: var(--gold); color: #050505; }
.btn-hero-dark:hover { background-color: var(--dark-gold); border-color: var(--dark-gold); }

/* --- Carrusel de reseñas --- */
.t-card-inner {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.t-text { color: var(--text-soft); }
.t-meta h4 { color: var(--text-strong); }
.t-role { color: var(--text-mute); }
.t-avatar { color: #050505; }
.rc-arrow { background: var(--card); border: 1px solid var(--line); color: var(--gold); }
.rc-arrow:hover { background: var(--gold); color: #050505; }
.reviews-dots button { background: #3a382f; }
.reviews-dots button.active { background: var(--gold); }
.t-readmore { color: var(--gold); }

/* --- FAQ --- */
.faq-item { background: var(--card); border-color: var(--line); }
.faq-item[open] { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.faq-item summary { color: var(--text-strong); }
.faq-item p { color: var(--text-soft); }

/* --- Formularios (contacto + modal) --- */
.contact-info-box h2 { color: var(--text-strong); }
.contact-info-box p, .info-item { color: var(--text-soft); }
.info-item strong { color: var(--text-strong); }
.info-item a { color: var(--text-soft); }
.info-item a:hover { color: var(--gold); }
.contact-form-box {
    background-color: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.contact-form-box h3 { color: var(--text-strong); }
.form-intro { color: var(--text-mute); }
.form-group label { color: var(--text-mute); }
.form-group input,
.form-group select,
.form-group textarea {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-strong);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #5d5a52; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.35);
}
.jr-form-submit { color: #050505; }
.form-fineprint, .jr-modal__fineprint { color: var(--text-mute); }

.jr-modal__dialog { background: var(--card); border: 1px solid var(--line); }
.jr-modal__close { background: rgba(255, 255, 255, 0.08); color: #ddd; }
.jr-modal__close:hover { color: #050505; }

/* Mapa de Google en modo oscuro elegante (filtro del sitio original) */
.map-container iframe {
    filter: grayscale(100%) invert(92%) contrast(83%) hue-rotate(180deg) opacity(0.85);
    border-radius: 10px;
    transition: filter 0.4s ease;
}
.map-container iframe:hover {
    filter: grayscale(100%) invert(92%) contrast(83%) hue-rotate(180deg) opacity(1);
}

/* --- Footer --- */
.main-footer {
    background-color: #000;
    color: var(--text-soft);
    border-top: 1px solid var(--line);
}
.footer-horizontal-menu a { color: #bbb; }
.footer-horizontal-menu a:hover, .footer-contact-compact a:hover { color: var(--gold); }
.footer-contact-compact { color: var(--text-soft); }
.footer-contact-compact a { color: var(--text-soft); }
.footer-tagline { color: var(--text-mute); }
.footer-bottom { border-top: 1px solid var(--line); color: var(--text-mute); }
.designer-credits a { color: #ccc; }
.footer-social { display: flex; gap: 18px; margin-top: 10px; }
.footer-social a {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
}
.footer-social a:hover { color: var(--gold); }

/* --- Thank you --- */
.thankyou-section { background-color: var(--bg); }
.thankyou-inner h1 { color: var(--text-strong); }
.thankyou-inner p { color: var(--text-soft); }

/* --- Before/After sobre oscuro --- */
.ba-frame { box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6); border: 1px solid var(--line); }
.ba-slider figcaption { color: var(--text-mute); }

/* --- Equipo (about) --- */
.team-section { padding: 100px 0; background-color: var(--bg-alt); }
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px;
    align-items: stretch;
}
.team-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 36px 26px;
    text-align: center;
    transition: border-color 0.4s ease, transform 0.4s ease;
}
.team-card:hover { border-color: rgba(197, 160, 89, 0.45); transform: translateY(-4px); }
.team-card img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 2px solid rgba(197, 160, 89, 0.35);
    display: block;
    filter: grayscale(100%);
    transition: filter 0.5s ease, border-color 0.5s ease;
}
.team-card:hover img { filter: grayscale(0); border-color: var(--gold); }
.team-card h3 { font-size: 1.25rem; margin-bottom: 4px; }
.team-card .team-role {
    display: block;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.team-card p { color: var(--text-soft); font-size: 0.92rem; line-height: 1.7; }

/* =============================================
   22. FASE 0 — COMPONENTES DEL SITIO AMPLIADO
   (proceso, galería, blog, reviews wall, footer en columnas)
   ============================================= */

/* Enlaces dorados dentro de texto */
.inline-link { color: var(--gold); font-weight: 600; }
.inline-link:hover { color: var(--dark-gold); text-decoration: underline; }

/* --- Footer en columnas --- */
.footer-columns {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}
.footer-col h4 {
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { color: #aaa; font-size: 0.88rem; }
.footer-col a:hover { color: var(--gold); }

/* --- Proceso paso a paso --- */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 34px;
    max-width: 880px;
}
.process-step {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 34px 32px;
    transition: border-color 0.4s ease;
}
.process-step:hover { border-color: rgba(197, 160, 89, 0.45); }
.process-num {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--gold);
    color: #050505;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-body h3 { font-size: 1.35rem; margin-bottom: 10px; }
.process-body p { color: var(--text-soft); line-height: 1.8; }

/* --- Galería de proyectos --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
}
.gallery-card {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.4s ease, transform 0.4s ease;
}
.gallery-card:hover { border-color: rgba(197, 160, 89, 0.45); transform: translateY(-4px); }
.gallery-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.gallery-card figcaption {
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gallery-card figcaption strong { color: var(--text-strong); font-size: 1rem; }
.gallery-card figcaption span { color: var(--text-mute); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; }

/* --- Blog --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 28px;
}
.blog-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s ease, transform 0.4s ease;
}
.blog-card:hover { border-color: rgba(197, 160, 89, 0.45); transform: translateY(-4px); }
.blog-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.blog-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.blog-card__date {
    color: var(--gold);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.blog-card h2 { font-size: 1.3rem; line-height: 1.3; }
.blog-card p { color: var(--text-soft); font-size: 0.95rem; line-height: 1.7; }

/* Cuerpo de artículo */
.post-body { padding: 70px 0 90px; }
.post-body__inner { flex-direction: column; align-items: flex-start; max-width: 800px; }
.post-meta { color: var(--text-mute); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 26px; }
.post-body h2 { font-size: 1.7rem; margin: 36px 0 14px; }
.post-body p { color: var(--text-soft); line-height: 1.9; margin-bottom: 16px; }
.post-body ul { list-style: none; margin: 0 0 18px; }
.post-body ul li { color: var(--text-soft); line-height: 1.9; padding-left: 22px; position: relative; margin-bottom: 8px; }
.post-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.post-body em { color: var(--text-strong); }
.post-body strong { color: var(--text-strong); }

/* --- Muro de reseñas (página /reviews) --- */
.reviews-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
    margin-bottom: 50px;
}
.review-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
}
.review-tile .t-stars { margin-bottom: 14px; }
.review-tile__text { color: var(--text-soft); font-style: italic; line-height: 1.8; margin-bottom: 22px; flex: 1; }
.review-tile .t-reviewer { display: flex; align-items: center; gap: 12px; }

/* --- Strip de ciudades (home) --- */
.city-strip { padding: 90px 0; background-color: var(--bg-alt); }
.city-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.city-chip {
    display: block;
    text-align: center;
    padding: 22px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-strong);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: border-color 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.city-chip:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.city-neighborhoods { margin-top: 22px; color: var(--text-mute); font-size: 0.92rem; }

/* --- Responsive de la fase 0 --- */
@media (max-width: 768px) {
    .footer-columns { gap: 30px; }
    .process-step { flex-direction: column; gap: 16px; padding: 26px 22px; }
    .post-body h2 { font-size: 1.35rem; }
}

/* =============================================
   23. FIXES DE FORMULARIO Y NAVEGACIÓN (tema oscuro)
   ============================================= */

/* El autofill de Chrome/Safari pinta el campo de blanco con texto oscuro,
   dejando el texto invisible sobre nuestro tema. Se fuerza el fondo oscuro
   con un box-shadow interior (única técnica que el navegador respeta). */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group select:-webkit-autofill,
.form-group textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
    -webkit-text-fill-color: var(--text-strong);
    caret-color: var(--text-strong);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background-color 9999s ease-in-out 0s; /* bloquea el flash blanco */
}

/* Cursor de escritura visible en todos los campos */
.form-group input,
.form-group select,
.form-group textarea {
    caret-color: var(--gold);
}

/* Las opciones del <select> se despliegan con fondo del sistema (blanco):
   forzamos colores legibles dentro de la lista */
.form-group select option {
    background-color: #0f0f0f;
    color: #f5f2ea;
}

/* Los ítems del menú no deben partirse en dos líneas ("WHY US") */
.main-header .nav-menu > ul > li > a,
.main-header .nav-menu .nav-parent {
    white-space: nowrap;
}

/* =============================================
   24. FORMULARIO EN LÍNEA (páginas de destino de Ads)
   ============================================= */
.inline-quote {
    padding: 80px 0;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(197, 160, 89, 0.14), transparent 55%),
        var(--bg-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 90px; /* el header fijo no tapa el formulario al anclar */
}

.inline-quote__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 50px;
    align-items: start;
}

.inline-quote__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--gold);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.inline-quote__pitch h2 { font-size: 2.1rem; line-height: 1.2; margin-bottom: 14px; }
.inline-quote__pitch p { color: var(--text-soft); line-height: 1.8; margin-bottom: 20px; }

.inline-quote__perks { margin: 0 0 22px; }
.inline-quote__perks li {
    color: var(--text-soft);
    padding-left: 28px;
    position: relative;
    margin-bottom: 10px;
    line-height: 1.6;
}
.inline-quote__perks li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

.inline-quote__call { font-size: 1.05rem; color: var(--text-strong); }
.inline-quote__call a { color: var(--gold); font-weight: 700; white-space: nowrap; }

.inline-quote__form-wrap {
    background: var(--card);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-radius: 16px;
    padding: 34px 32px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

/* Rejilla de dos columnas dentro del formulario (teléfono + email) */
.inline-quote__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
.inline-quote__form .form-group.full,
.inline-quote__form .jr-form-submit,
.inline-quote__form .form-fineprint { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .inline-quote__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .inline-quote { padding: 56px 0; }
    .inline-quote__pitch h2 { font-size: 1.6rem; }
    .inline-quote__form-wrap { padding: 24px 20px; }
    .inline-quote__form { grid-template-columns: 1fr; }
}

/* =============================================
   25. LEGIBILIDAD DE FORMULARIOS — BLINDAJE FINAL
   ---------------------------------------------
   El formulario es el punto de venta principal: si el cliente no ve lo que
   escribe, abandona. Este bloque va al FINAL del archivo a propósito, para
   ganar en la cascada a cualquier regla anterior y al autocompletado del
   navegador (que impone fondo blanco con !important interno y solo se puede
   vencer con un box-shadow interior).
   ============================================= */

/* --- Estado normal: fondo oscuro, texto blanco y con cuerpo --- */
.form-group input,
.form-group select,
.form-group textarea,
.contact-form input,
.contact-form select,
.contact-form textarea,
.inline-quote__form input,
.inline-quote__form select,
.inline-quote__form textarea,
.jr-modal__form input,
.jr-modal__form select,
.jr-modal__form textarea {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;   /* Safari/iOS */
    font-weight: 500;
    font-size: 16px;            /* 16px evita el zoom automático en iOS */
    caret-color: #ffffff;       /* cursor blanco: visible sobre fondo oscuro */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* --- Placeholder: gris legible, claramente distinto del texto real --- */
.form-group input::placeholder,
.form-group textarea::placeholder,
.inline-quote__form input::placeholder,
.inline-quote__form textarea::placeholder,
.jr-modal__form input::placeholder,
.jr-modal__form textarea::placeholder {
    color: #6f6b63 !important;
    -webkit-text-fill-color: #6f6b63 !important;
    font-weight: 400;
    opacity: 1;
}

/* --- Foco: se ve DÓNDE estás escribiendo (borde dorado + halo) --- */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.inline-quote__form input:focus,
.inline-quote__form select:focus,
.inline-quote__form textarea:focus,
.jr-modal__form input:focus,
.jr-modal__form select:focus,
.jr-modal__form textarea:focus {
    background-color: #121212 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.22) !important;
    outline: none;
}

/* --- AUTOCOMPLETADO: la causa real del campo blanco ---------------------
   Chrome/Safari pintan el fondo con un estilo interno que NO se puede
   sobrescribir con background-color. El único método fiable es un
   box-shadow interior gigante que tape ese fondo, más -webkit-text-fill-color
   para el texto. Se cubren la sintaxis con prefijo y la estándar (:autofill). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
input:autofill,
select:autofill,
textarea:autofill {
    -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
    box-shadow: 0 0 0 1000px #0d0d0d inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    /* Congela la animación de fondo con la que el navegador vuelve al blanco */
    transition: background-color 100000s ease-in-out 0s !important;
}

/* Autocompletado + foco: mantiene el borde dorado del estado activo */
input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
input:autofill:focus {
    border-color: var(--gold) !important;
    -webkit-box-shadow: 0 0 0 1000px #121212 inset, 0 0 0 3px rgba(197, 160, 89, 0.22) !important;
    box-shadow: 0 0 0 1000px #121212 inset, 0 0 0 3px rgba(197, 160, 89, 0.22) !important;
}

/* --- Texto seleccionado: contraste alto (antes quedaba dorado sobre claro) --- */
.form-group input::selection,
.form-group textarea::selection,
.inline-quote__form input::selection,
.inline-quote__form textarea::selection {
    background: var(--gold);
    color: #050505;
}

/* --- Lista desplegable del <select>: el sistema la pinta claro por defecto --- */
.form-group select option,
.inline-quote__form select option,
.jr-modal__form select option {
    background-color: #121212;
    color: #ffffff;
    font-weight: 500;
}

/* --- Etiquetas: legibles y con jerarquía --- */
.form-group label,
.inline-quote__form label {
    color: #cfc9bd !important;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.3px;
}

/* --- Campo inválido tras intentar enviar: rojo sutil, nunca fondo claro --- */
.form-group input:not(:placeholder-shown):invalid,
.inline-quote__form input:not(:placeholder-shown):invalid {
    border-color: rgba(220, 90, 90, 0.75) !important;
}

/* =============================================
   26. SECCIONES SIN FOTOGRAFÍA (registro de imágenes vacío)
   =============================================
   Cuando una foto no está registrada en includes/config.php, la plantilla no
   imprime el <div class="dual-image">. Sin esto, .dual-text se quedaría en su
   45% original y la sección se vería como una columna estrecha con la mitad
   derecha vacía. Al detectar que quedó como único hijo, el texto se ensancha y
   se centra: la sección se lee como una decisión de diseño, no como un error.  */
.dual-layout > .dual-text:only-child {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.dual-layout > .dual-text:only-child .service-list {
    display: inline-block;
    text-align: left;
}

/* Tarjeta de blog sin imagen: el cuerpo asume el borde superior redondeado
   que antes aportaba la foto, para que no quede una esquina cuadrada suelta. */
.blog-card > .blog-card__body:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}