/* ================================================================
   THEME.CSS — Capa de diseño v2 (2026-10-04)
   Se carga la ÚLTIMA en todas las páginas: redefine tokens, tipografía,
   ritmo vertical y componentes sin tocar la estructura HTML existente.
   Paleta: pizarra (slate cálido) + cobre. Tipos: Manrope (títulos) + Inter.
   ================================================================ */

/* ---------- Fallbacks métricos: evitan saltos (CLS) al cargar las fuentes ---------- */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22.4%; line-gap-override: 0% }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 103.5%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0% }

:root {
    /* Marca */
    --ink: #0c1722;
    --slate-900: #122130;
    --slate-800: #1a2c3e;
    --slate-700: #263d53;
    --slate-600: #3a5269;
    --slate-400: #8496a8;
    --stone-50: #f6f7f5;
    --stone-100: #eef0ec;
    --stone-200: #e1e4de;
    --stone-300: #cdd2ca;
    --copper: #a84f1c;
    --copper-700: #8a3f14;
    --copper-300: #e5a675;
    --copper-50: #fbf2eb;
    --gold: #f2a516;

    /* Tokens heredados del sitio → redirigidos a la nueva paleta */
    --color-primary: var(--slate-800);
    --color-secondary: var(--copper);
    --color-accent: #3a6f8f;
    --color-text: #17222e;
    --color-text-light: #536170;
    --color-bg: #ffffff;
    --color-bg-light: var(--stone-50);
    --color-bg-dark: var(--ink);
    --color-border: var(--stone-200);

    --font-base: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --container: 1200px;
    --gutter: clamp(16px, 4vw, 28px);
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(12, 23, 34, .05);
    --shadow: 0 1px 2px rgba(12, 23, 34, .04), 0 6px 18px rgba(12, 23, 34, .06);
    --shadow-lg: 0 2px 6px rgba(12, 23, 34, .05), 0 18px 44px rgba(12, 23, 34, .12);
    --section-y: clamp(64px, 8vw, 104px);
    --transition: all .22s ease
}

/* ================================================================
   BASE
   ================================================================ */
html { overflow-x: hidden; scroll-padding-top: 96px; -webkit-text-size-adjust: 100% }
body {
    overflow-x: hidden;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

h1, h2, h3, h4,
.section-title, .hf-title, .hc-title, .stat-number, .price-num, .btn, .header-phone {
    font-family: var(--font-head)
}

h1, h2 { letter-spacing: -.025em; text-wrap: balance }
h3, h4 { letter-spacing: -.012em }
p { text-wrap: pretty }
strong, b { font-weight: 650 }
::selection { background: var(--copper); color: #fff }

.container { padding-left: var(--gutter); padding-right: var(--gutter) }

:focus-visible { outline: 3px solid var(--copper-300); outline-offset: 2px }

/* ================================================================
   BOTONES — un único lenguaje en todo el sitio
   ================================================================ */
.btn {
    min-height: 48px;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: -.005em;
    justify-content: center;
    line-height: 1.2
}

.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-accent,
.btn.btn-white,
.btn.btn-outline,
.btn.btn-ghost,
.btn.btn-strip {
    background: var(--copper);
    border-color: var(--copper);
    color: #fff;
    box-shadow: 0 1px 2px rgba(12, 23, 34, .12), inset 0 1px 0 rgba(255, 255, 255, .12)
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-accent:hover,
.btn.btn-white:hover,
.btn.btn-outline:hover,
.btn.btn-ghost:hover,
.btn.btn-strip:hover {
    background: var(--copper-700);
    border-color: var(--copper-700);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(168, 79, 28, .28)
}

.btn-sm { min-height: 44px; padding: 10px 20px; font-size: .92rem }

/* Botón secundario sobre fondos oscuros (2.º botón de los CTA) */
.cta-section .cta-buttons .btn:nth-child(2),
.cta-final .cta-btns .btn:nth-child(2),
.banner-cta .btn + .btn,
.page-hero .cta-row .btn + .btn {
    background: transparent;
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    box-shadow: none
}

.cta-section .cta-buttons .btn:nth-child(2):hover,
.cta-final .cta-btns .btn:nth-child(2):hover,
.banner-cta .btn + .btn:hover,
.page-hero .cta-row .btn + .btn:hover {
    background: rgba(255, 255, 255, .08);
    border-color: #fff;
    box-shadow: none
}

/* ================================================================
   TOPBAR + HEADER
   ================================================================ */
.topbar { background: var(--ink); border-bottom: 0; font-size: .8rem }
.topbar-inner { height: 40px }
.topbar-email, .topbar-hours { color: rgba(255, 255, 255, .72) }
.topbar-email svg, .topbar-hours svg { fill: var(--copper-300) }
.topbar-email:hover { color: #fff }
.topbar-sep { color: rgba(255, 255, 255, .18) }

.header {
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--stone-200)
}

.header.scrolled { box-shadow: 0 6px 24px rgba(12, 23, 34, .08) }

.logo { flex-shrink: 0 }
.logo svg { width: 44px !important; height: 44px !important; fill: var(--copper) }
.logo img { width: auto !important; height: 48px !important; object-fit: contain; display: block }
@media (max-width: 767px) { .logo img { height: 42px !important } }

.nav-main a,
.nav-dropdown-toggle {
    font-size: .92rem;
    font-weight: 600;
    color: var(--slate-800);
    border-radius: 8px;
    padding: 9px 13px
}

.nav-main a:hover,
.nav-main a.active,
.nav-main a[aria-current="page"],
.nav-dropdown-toggle:hover,
.has-dropdown:hover .nav-dropdown-toggle,
.has-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown-toggle[aria-expanded="true"] {
    background: var(--stone-100);
    color: var(--copper)
}

.dropdown {
    border: 1px solid var(--stone-200);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 8px
}

.dropdown a {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-text)
}

.dropdown a:hover { background: var(--copper-50); color: var(--copper) }

.header-phone {
    background: var(--copper);
    border-radius: 10px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: .92rem;
    box-shadow: 0 1px 2px rgba(12, 23, 34, .12)
}

.header-phone:hover { background: var(--copper-700) }

.nav-toggle { width: 44px; height: 44px; border-radius: 10px }
.nav-toggle:hover { background: var(--stone-100) }
.nav-toggle span { background: var(--slate-800) }

@media (min-width: 1100px) {
    .header .container { height: 76px }
}

/* ================================================================
   MIGAS DE PAN — sin numeración ni separador corrupto
   ================================================================ */
.breadcrumbs {
    background: var(--stone-50);
    border-bottom: 1px solid var(--stone-200);
    padding: 12px 0;
    font-size: .84rem
}

.breadcrumbs ol { list-style: none; padding: 0; margin: 0; gap: 4px }
.breadcrumbs li { display: inline-flex; align-items: center }
.breadcrumbs li + li::before { content: none }
.breadcrumbs li:not(:last-child)::after { content: "\203A"; margin: 0 4px 0 8px; color: var(--stone-300) }
.breadcrumbs a { color: var(--color-text-light); font-weight: 500 }
.breadcrumbs a:hover { color: var(--copper) }
.breadcrumbs li:last-child { color: var(--slate-800); font-weight: 600 }

/* ================================================================
   HERO HOME
   ================================================================ */
.hero {
    background-color: var(--slate-900);
    padding: clamp(56px, 8vw, 108px) 0
}

.hero::before {
    background:
        radial-gradient(1100px 520px at 88% 0%, rgba(168, 79, 28, .20), transparent 60%),
        linear-gradient(100deg, rgba(12, 23, 34, .95) 0%, rgba(12, 23, 34, .86) 46%, rgba(12, 23, 34, .58) 100%)
}

.hero .container.hero-grid { max-width: var(--container); gap: clamp(32px, 5vw, 64px) }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--copper-300)
}

.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px }

.hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.06;
    font-weight: 800;
    margin-bottom: 20px
}

.hero p {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .80);
    opacity: 1;
    max-width: 56ch;
    margin-bottom: 30px
}

.hero p strong { color: #fff; font-weight: 600 }

.trust-badges { gap: 10px; opacity: 1 }

.trust-badges .badge {
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92)
}

.trust-badges svg { fill: var(--copper-300); width: 16px; height: 16px }

.hero-form-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 30px 28px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    border-top: 4px solid var(--copper)
}

.hero-form { gap: 12px }
.hero .hero-form-card p { margin: 0; max-width: none; opacity: 1 }
.hero .hf-title { font-size: 1.32rem; line-height: 1.2; font-weight: 800; color: var(--slate-900); letter-spacing: -.02em }
.hero .hf-sub { margin: -6px 0 6px; font-size: .9rem; color: var(--color-text-light) }

/* Campos: 16 px mínimo (evita el auto-zoom de iOS) */
.hero-form input,
.hero-form textarea,
.hc-form input[type=text], .hc-form input[type=tel], .hc-form input[type=email], .hc-form textarea,
.form-group input, .form-group textarea, .form-group select {
    font-size: 1rem;
    background: #fff;
    border: 1px solid var(--stone-300);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--color-text)
}

.hero-form input, .hc-form input[type=text], .hc-form input[type=tel], .hc-form input[type=email] { min-height: 48px }

.hero-form input::placeholder, .hero-form textarea::placeholder,
.form-group input::placeholder, .form-group textarea::placeholder { color: #7b8794 }

.hero-form input:focus, .hero-form textarea:focus,
.hc-form input:focus, .hc-form textarea:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: var(--copper);
    box-shadow: 0 0 0 3px rgba(168, 79, 28, .16);
    background: #fff
}

.hf-check, .hc-check { font-size: .8rem; color: var(--color-text-light) }
.hf-check a, .hc-check a { color: var(--copper) }
.hf-check input, .hc-check input { width: 18px !important; height: 18px; min-height: 0; accent-color: var(--copper) }
.hf-submit { min-height: 52px; font-size: 1.02rem }

/* ================================================================
   HERO INTERIOR (servicios, zonas, blog, nosotros, contacto)
   ================================================================ */
.page-hero,
.page-header {
    background-color: var(--slate-900);
    padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 84px)
}

.page-hero::before { background: radial-gradient(circle, rgba(168, 79, 28, .22) 0%, transparent 70%) }

.page-hero::after,
.page-header::before {
    background: linear-gradient(100deg, rgba(12, 23, 34, .94) 0%, rgba(12, 23, 34, .84) 55%, rgba(12, 23, 34, .66) 100%)
}

.page-hero .label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .76rem;
    letter-spacing: .14em;
    color: var(--copper-300);
    margin-bottom: 14px
}

.page-hero .label::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px }
.page-hero .inner .label, .blog-hero .label { color: var(--copper-300) }

.page-hero h1,
.page-header h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: 16px
}

.page-hero p,
.page-header p { color: rgba(255, 255, 255, .80); opacity: 1; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.7 }
.page-hero p strong, .page-header p strong { color: #fff }

.page-hero .trust { gap: 10px; opacity: 1; margin-top: 26px }

.page-hero .trust span {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .9)
}

/* ================================================================
   SECCIONES — ritmo vertical y cabeceras consistentes
   ================================================================ */
.section,
.seo-content-section,
.reviews-section,
.testimonial-section,
.eeat-section,
.zonas-section,
.map-section { padding-top: var(--section-y); padding-bottom: var(--section-y) }

.section-alt { background: var(--stone-50) }

/* Eyebrow + título + subtítulo centrados cuando abren la sección */
.section-label {
    display: block;
    width: fit-content;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 12px
}

.container > .section-label,
.section > .container > .section-label { margin-left: auto; margin-right: auto; text-align: center }

.section-title {
    font-size: clamp(1.75rem, 3.3vw, 2.55rem);
    line-height: 1.12;
    font-weight: 800;
    color: var(--slate-900);
    margin: 0 auto 16px;
    max-width: 24ch
}

.container > .section-title { text-align: center }
.container > .section-title:not(:has(+ .section-subtitle, + .section-sub)) { margin-bottom: clamp(32px, 4vw, 44px) }

.section-subtitle,
.section-sub {
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 64ch;
    margin: 0 auto clamp(36px, 4vw, 52px)
}

.container > .section-subtitle,
.container > .section-sub { text-align: center }

.section-subtitle strong, .section-sub strong { color: var(--color-text) }

/* Bloques de texto con ancho máximo inline: centrados bajo la cabecera */
.section > .container > div[style*="max-width"] { margin-left: auto; margin-right: auto }
.section details { box-shadow: var(--shadow-sm) }
.section details[open] { border-color: var(--stone-300) !important }
.section details summary::-webkit-details-marker { display: none }

/* En bloques a dos columnas el texto va alineado a la izquierda */
.split .section-label { margin-left: 0 }
.split .section-title,
.split .section-sub,
.split .section-subtitle { text-align: left; margin-left: 0; max-width: none }

.split { gap: clamp(32px, 5vw, 64px) }
.split p { color: var(--color-text-light); line-height: 1.75 }
.split .split-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg) }

.split .mini-list div {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: 10px;
    box-shadow: var(--shadow-sm)
}

.split .mini-list span { background: var(--copper); color: #fff }
.split .mini-list div:hover { border-color: var(--copper-300) }

/* ================================================================
   GRIDS — clusters centrados (los huérfanos quedan en el centro)
   ================================================================ */
.grid { gap: 24px }

.grid.grid-3,
.svc-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px !important
}

.grid.grid-3 > *,
.svc-grid > * { flex: 0 1 calc((100% - 48px) / 3); min-width: 0 }

.grid.grid-4 { gap: 20px !important }

@media (max-width: 960px) {
    .grid.grid-3 > *, .svc-grid > * { flex-basis: calc((100% - 24px) / 2) }
}

@media (max-width: 640px) {
    .grid.grid-3 > *, .svc-grid > * { flex-basis: 100% }
}

/* ================================================================
   TARJETAS
   ================================================================ */
.service-card,
.svc-card,
.tipo-card,
.review-card,
.ti-card,
.trabajo-card,
.why-item,
.step,
.price-card,
.value-card,
.info-card,
.post-card,
.sidebar-card {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: 14px;
    box-shadow: var(--shadow-sm)
}

.service-card:hover,
.svc-card:hover,
.trabajo-card:hover,
.post-card:hover {
    transform: translateY(-4px);
    border-color: var(--stone-300);
    box-shadow: var(--shadow-lg)
}

/* Cluster de servicios con foto */
.service-card--media { padding: 0 0 24px }
.service-card--media .svc-media { aspect-ratio: 16 / 10; margin-bottom: 20px; background: var(--stone-100) }
.service-card--media h3,
.service-card--media p { padding-left: 24px; padding-right: 24px }
.service-card h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; color: var(--slate-900); margin-bottom: 8px }
.service-card p { font-size: .94rem; line-height: 1.65; color: var(--color-text-light); margin-bottom: 0 }
.service-card p strong { color: var(--color-text) }
.service-card--media:hover h3 a { color: var(--copper) }

/* Flecha discreta sobre la foto en las tarjetas que enlazan */
.service-card--media .svc-media { position: relative }
.service-card--media:has(h3 a) .svc-media::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a84f1c' d='M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3z'/%3E%3C/svg%3E") center / 18px no-repeat;
    box-shadow: 0 4px 14px rgba(12, 23, 34, .22);
    transition: transform .2s ease
}

.service-card--media:hover .svc-media::after { transform: translateX(3px) }

/* Tarjetas de servicio en páginas interiores (foto o icono) */
.svc-card {
    --svc-color: var(--copper) !important;
    --svc-bg: #fff !important;
    color: var(--color-text)
}

.svc-card img { height: 190px }
.svc-card-body { padding: 22px 22px 24px; gap: 8px }
.svc-card h3 { font-size: 1.05rem; line-height: 1.32; color: var(--slate-900) }
.svc-card p { font-size: .92rem; line-height: 1.65; color: var(--color-text-light) }
.svc-card:not(:has(img)) { padding: 26px 24px }

.svc-icon,
.why-icon,
.value-icon,
.credential-icon,
.story-fact-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--copper-50) !important;
    color: var(--copper) !important;
    border: 1px solid rgba(168, 79, 28, .14)
}

.svc-icon svg, .why-icon svg, .value-icon svg, .credential-icon svg { fill: currentColor }

/* Tipos de pizarra */
article.tipo-card { background: #fff; border-top: 1px solid var(--stone-200); overflow: hidden }
.tipo-card-body { padding: 24px }
.tipo-card h3 { font-size: 1.12rem; color: var(--slate-900) }
.tipo-card p { font-size: .93rem; line-height: 1.7; color: var(--color-text-light) }
.tipo-card p strong { color: var(--color-text) }
.tipo-card .tipo-note { padding-top: 12px; border-top: 1px dashed var(--stone-200) }
.tipo-card .tipo-note a { color: var(--copper) }

/* ================================================================
   BENEFICIOS DEL MATERIAL (home)
   ================================================================ */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.benefit {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: 14px;
    padding: 28px 24px 26px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition)
}

.benefit:hover { border-color: var(--stone-300); box-shadow: var(--shadow) }

.benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-800);
    color: var(--copper-300);
    margin-bottom: 18px
}

.benefit-icon svg { width: 24px; height: 24px; fill: currentColor }
.benefit h3 { font-size: 1.04rem; color: var(--slate-900); margin-bottom: 8px }
.benefit p { font-size: .92rem; line-height: 1.65; color: var(--color-text-light) }

@media (max-width: 1024px) { .benefit-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr } }

/* ================================================================
   PROCESO
   ================================================================ */
.process-steps { gap: 28px }
.process-step { padding: 0 6px }

.process-step::before {
    width: 54px;
    height: 54px;
    background: #fff;
    color: var(--copper);
    border: 2px solid var(--copper);
    font-family: var(--font-head);
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px var(--stone-50);
    position: relative;
    z-index: 1
}

.process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(50% + 34px);
    width: calc(100% - 40px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--stone-300) 0 6px, transparent 6px 12px)
}

.process-step h3 { font-size: 1.04rem; color: var(--slate-900) }
.process-step p { font-size: .9rem; line-height: 1.6 }

@media (max-width: 767px) { .process-step::after { display: none } }

.steps { row-gap: 44px; margin-top: 40px }
.step { padding-top: 32px }
.step::before { background: var(--copper); box-shadow: 0 0 0 5px #fff }
.split .section-title { margin-bottom: 18px }
.step h3 { color: var(--slate-900) }

/* ================================================================
   POR QUÉ ELEGIRNOS / FEATURES
   ================================================================ */
.features-list { gap: 20px }

.feature-item {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-sm)
}

.feature-item:hover { transform: none; border-color: var(--stone-300); box-shadow: var(--shadow) }
.feature-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; background: var(--slate-800) }
.feature-icon svg { fill: var(--copper-300) }
.feature-item h3 { font-size: 1.04rem; color: var(--slate-900); margin-bottom: 6px }
.feature-item p { font-size: .92rem; line-height: 1.65 }

.why-item { padding: 24px }
.why-item h3 { color: var(--slate-900) }

/* ================================================================
   CIFRAS
   ================================================================ */
.section-gradient {
    background:
        radial-gradient(900px 400px at 15% 0%, rgba(168, 79, 28, .18), transparent 60%),
        linear-gradient(135deg, var(--ink) 0%, var(--slate-900) 55%, var(--slate-800) 100%)
}

.section-gradient .section-label { color: var(--copper-300) }
.section-gradient .stat-number { color: #fff }
.section-gradient .stat-label { color: rgba(255, 255, 255, .7) }

.stats-grid { gap: 0; margin-top: 36px }

.stat-item { padding: 8px 24px }
.stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .12) }
.stat-number { font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em }
.stat-label { font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 10px }

@media (max-width: 560px) {
    .stat-item + .stat-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px }
    .stats-grid { flex-direction: column; gap: 20px }
}

/* ================================================================
   BLOQUE SEO DE LA HOME
   ================================================================ */
.seo-content-section { background: #fff }
.seo-content-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: var(--slate-900) }
.seo-lead { max-width: 760px }
.seo-lead p:first-of-type { font-size: 1.12rem; color: var(--color-text) }

.seo-topic {
    background: var(--stone-50);
    border: 1px solid var(--stone-200);
    border-left: 3px solid var(--copper);
    border-radius: 14px;
    padding: 28px 28px 16px
}

.seo-topic:hover { transform: none; box-shadow: var(--shadow) }
.seo-topic-icon { border-radius: 12px; border-color: var(--stone-200) }
.seo-topic-icon svg { fill: var(--copper) }
.seo-content-section .seo-topic h3 { color: var(--slate-900); font-size: 1.1rem }

/* ================================================================
   PRECIOS
   ================================================================ */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch
}

.price-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    box-shadow: var(--shadow-sm)
}

.price-plan h3 { font-size: 1.05rem; color: var(--slate-900); margin-bottom: 6px }
.price-plan-desc { font-size: .88rem; color: var(--color-text-light); margin-bottom: 18px }

.price-plan-num {
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--slate-900);
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--stone-200)
}

.price-plan-num small { font-size: .9rem; font-weight: 600; color: var(--color-text-light); letter-spacing: 0 }

.price-plan ul { display: flex; flex-direction: column; gap: 10px; font-size: .92rem; color: var(--color-text) }
.price-plan li { position: relative; padding-left: 28px; line-height: 1.5 }

.price-plan li::before,
.price-card li::before,
.guide li::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--copper-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a84f1c' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21 7.5l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat
}

.price-plan--featured {
    border: 2px solid var(--copper);
    box-shadow: var(--shadow-lg)
}

.price-plan--featured .price-plan-num { color: var(--copper) }

.price-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--copper);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px
}

.price-note { margin-top: 24px; font-size: .85rem; color: var(--color-text-light); text-align: center }
.price-note a { color: var(--copper); font-weight: 600 }

.price-card { border-top: 1px solid var(--stone-200) !important; padding: 30px 26px }
.price-card .price-num, .price-num { color: var(--slate-900); letter-spacing: -.03em }
.price-card li { color: var(--color-text); padding-left: 28px }

@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto } }

/* ================================================================
   TRABAJOS
   ================================================================ */
.trabajos-preview { gap: 24px; margin-top: 0 }
.trabajo-card { border-radius: 14px }
.trabajo-card::before { display: none }
.trabajo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) }
.trabajo-card-img::after { background: linear-gradient(to top, rgba(12, 23, 34, .55) 0%, transparent 45%); opacity: 1 }
.trabajo-card:hover .trabajo-card-img img { transform: scale(1.04) }

.trabajo-card-badge {
    background: rgba(255, 255, 255, .95);
    color: var(--slate-800);
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: .7rem;
    letter-spacing: .08em;
    padding: 5px 12px
}

.trabajo-card-body { padding: 22px 22px 24px; gap: 8px }
.trabajo-card-loc { background: var(--copper-50); color: var(--copper) }
.trabajo-card h3 { font-size: 1.06rem; font-weight: 700; color: var(--slate-900) }
.trabajo-card:hover h3 { color: var(--slate-900) }

.section-cta { margin: 36px 0 0 }

/* ================================================================
   OPINIONES
   ================================================================ */
.review-card { padding: 26px }
.review-avatar, .ti-avatar, .review-ti-avatar { background: var(--slate-800) !important; color: #fff }
.review-name, .ti-card-name { color: var(--slate-900) }
.review-text, .ti-card-text { font-style: normal; color: var(--color-text); line-height: 1.7 }
.review-google { opacity: .9 }

.stars-svg { display: inline-flex; gap: 2px; vertical-align: middle; line-height: 1 }
.stars-svg svg { width: 16px; height: 16px; fill: var(--gold) }
.review-stars, .ti-card-stars { color: var(--gold); font-size: 0; line-height: 1; margin-bottom: 12px }

.stars-row { font-size: 0; line-height: 1; margin-bottom: 14px }
.stars-row .stars-svg svg { width: 20px; height: 20px }

.testimonial-card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(28px, 4vw, 44px)
}

.testimonial-card .testimonial-text { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; font-style: normal; color: var(--slate-900) }
.testimonial-card .testimonial-author { font-family: var(--font-head); font-weight: 700; color: var(--slate-900) }

.ti-wrapper { background: #fff; border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px) }
.ti-header { gap: 12px; margin-bottom: 22px; padding-bottom: 18px }

.reviews-note {
    max-width: 760px;
    margin: 22px auto 0;
    text-align: center;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--color-text-light)
}

/* ================================================================
   ZONAS
   ================================================================ */
.zona-card {
    background: #fff;
    border: 1px solid var(--stone-200) !important;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    align-items: center
}

.zona-card:hover { border-color: var(--copper) !important; box-shadow: var(--shadow) }
.zona-card-name { color: var(--slate-900); font-size: .98rem }

.zona-card-grid.grid-4 { display: flex; flex-wrap: wrap; justify-content: center }
.zona-card-grid.grid-4 > * { flex: 0 1 calc((100% - 60px) / 4); max-width: none }
@media (max-width: 1024px) { .zona-card-grid.grid-4 > * { flex-basis: calc((100% - 20px) / 2) } }
@media (max-width: 560px) { .zona-card-grid.grid-4 > * { flex-basis: 100% } }

.zona-pin {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--copper-50);
    color: var(--copper)
}

.zona-pin svg { width: 18px; height: 18px; fill: currentColor }

.zona-chip { border-color: var(--stone-200); border-radius: 999px }
.zona-chip-link { color: var(--copper); border-color: rgba(168, 79, 28, .35) }
.zona-chip-link:hover { background: var(--copper); border-color: var(--copper) }
.zone-tag { border-color: var(--stone-200) }
.zone-tag:hover { background: var(--copper); border-color: var(--copper) }

/* ================================================================
   FAQ
   ================================================================ */
.faq-item {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease
}

.faq-item.open { border-color: var(--stone-300); box-shadow: var(--shadow) }

.faq-question {
    padding: 20px 22px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--slate-900);
    background: transparent
}

.faq-question:hover { background: transparent; color: var(--copper) }

.faq-question svg {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 50%;
    background: var(--stone-100);
    fill: var(--slate-700)
}

.faq-item.open .faq-question svg { background: var(--copper); fill: #fff }
.faq-answer-inner { padding: 0 22px 22px; font-size: .96rem; line-height: 1.75; color: var(--color-text-light) }

/* ================================================================
   MAPA
   ================================================================ */
.map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--stone-200);
    box-shadow: var(--shadow)
}

.map-frame iframe { display: block; width: 100%; height: 440px; border: 0 }

/* ================================================================
   BANDAS CTA
   ================================================================ */
.cta-inline,
.banner-cta,
.cta-final,
.cta-section {
    position: relative;
    background:
        radial-gradient(800px 380px at 85% 0%, rgba(168, 79, 28, .26), transparent 60%),
        linear-gradient(135deg, var(--ink) 0%, var(--slate-900) 55%, var(--slate-800) 100%) !important;
    color: #fff;
    padding: clamp(56px, 7vw, 88px) 0
}

section.cta-inline h2, section.cta-inline h3,
.banner-cta h2, .cta-final h2, .cta-section h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto
}

.cta-inline p, .banner-cta p, .cta-final p, .cta-section p { color: rgba(255, 255, 255, .78); opacity: 1 }
.cta-inline p strong, .cta-section p strong, .cta-final p strong { color: #fff }
section.cta-inline p { max-width: 60ch; margin-left: auto; margin-right: auto }
section.cta-inline .cta-inline-note { color: rgba(255, 255, 255, .7); text-align: center; margin: 16px auto 0 }
.cta-inline .cta-inline-note a { color: #fff }
.cta-inline .wa-legal, .cta-section .wa-legal { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .62) }

/* CTA en tarjeta (dentro de una sección) */
.cta-card {
    margin-top: clamp(40px, 5vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: clamp(26px, 3.5vw, 36px) clamp(24px, 4vw, 44px);
    border-radius: var(--radius-lg);
    color: #fff;
    background:
        radial-gradient(600px 260px at 100% 0%, rgba(168, 79, 28, .30), transparent 60%),
        linear-gradient(135deg, var(--slate-900), var(--slate-800))
}

.cta-card h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); color: #fff; margin-bottom: 4px }
.cta-card p { color: rgba(255, 255, 255, .75); font-size: .98rem; margin: 0 }

/* Caja CTA dentro de posts del blog */
.content-body .cta-inline { border-radius: var(--radius-lg); padding: 40px 28px; margin: 40px 0 }
.content-body .cta-inline h3 { color: #fff; font-size: 1.45rem; margin-top: 0 }

/* ================================================================
   CONTENIDO LARGO (blog, legales, textos)
   ================================================================ */
.content-body { max-width: 780px }
article.section { padding-top: clamp(40px, 5vw, 64px) }
article.section > .content-body { padding-top: 0 }
.content-body > p:first-of-type { font-size: 1.12rem; color: var(--color-text) }
.content-body p, .content-body li { font-size: 1.04rem; line-height: 1.8; color: #2a3542 }
.content-body h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; color: var(--slate-900); margin: 52px 0 16px }
.content-body h3 { font-size: 1.22rem; color: var(--slate-900); margin: 32px 0 12px }
.content-body strong { color: var(--slate-900) }
.content-body a:not(.btn) { color: var(--copper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.content-body ul { list-style: none !important; padding-left: 0 }
.content-body ul li { position: relative; padding-left: 26px; list-style: none }
.content-body ul li::before { content: ""; position: absolute; left: 6px; top: .78em; width: 7px; height: 7px; border-radius: 2px; background: var(--copper); transform: rotate(45deg) }
.content-body ol li::marker { color: var(--copper); font-weight: 700 }
.content-body blockquote { border-left-color: var(--copper); background: var(--stone-50) }
.post-figure img { border-radius: var(--radius-lg) }
.post-toc { border-left-color: var(--copper); background: var(--stone-50); border-radius: 14px }

.price-table { border: 1px solid var(--stone-200); border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0 }
.price-table th { background: var(--slate-800); font-family: var(--font-head) }
.price-table tr:nth-child(even) { background: var(--stone-50) }
.price-table tr:hover { background: var(--copper-50) }

/* Blog: listado */
.post-card { overflow: hidden }
.post-tag, .cat-tag { border-radius: 999px }
.cat-tag.active { background: var(--copper); border-color: var(--copper); color: #fff }
.read-more { color: var(--copper) !important; font-weight: 700 }

.pagination .page-link { border-radius: 10px }
.pagination .page-link.is-current { background: var(--copper); border-color: var(--copper) }

.blog-hero .stat-number, .page-hero .stat-number { color: #fff }
.blog-hero .stat-label, .page-hero .stat-label { color: rgba(255, 255, 255, .7); opacity: 1; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem }
.page-hero h1 span { color: var(--copper-300) }
.section:has(> .container > .blog-grid) { padding-top: 0 }
.blog-grid { padding-top: clamp(36px, 4vw, 52px) }
.categories-bar { background: #fff }

.sidebar-card.cta-sidebar {
    background: radial-gradient(360px 200px at 100% 0%, rgba(168, 79, 28, .35), transparent 60%), linear-gradient(135deg, var(--slate-900), var(--slate-800));
    border: 0;
    color: #fff
}

.sidebar-card.cta-sidebar h3 { color: #fff }
.sidebar-card.cta-sidebar p { color: rgba(255, 255, 255, .78) }

/* Contacto: formulario primero */
.contact-grid { grid-template-columns: 1.45fr 1fr; margin: 0; align-items: start }
.contact-form-wrapper { border-top: 4px solid var(--copper); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px) }
.contact-form-title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--slate-900); margin-bottom: 6px }
.contact-form-sub { color: var(--color-text-light); margin-bottom: 24px }
.info-card { background: #fff; padding: 22px 24px }
.contact-figure { margin: 0 }
.contact-figure img { aspect-ratio: 4 / 3 }
.contact-figure figcaption { text-align: left }

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

/* Relacionados */
.related-card { background: #fff; border-radius: 12px }
.related-card:hover { border-color: var(--copper) }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .72);
    padding: clamp(56px, 7vw, 80px) 0 0
}

.footer-grid { gap: clamp(28px, 4vw, 56px) }

.footer h3 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px
}

.footer h3::after { width: 24px; height: 2px; background: var(--copper); margin-top: 10px }
.footer a { color: rgba(255, 255, 255, .72) }
.footer a:hover { color: var(--copper-300) }
.footer p { color: inherit }
.footer address { line-height: 1.85 }
.footer-hours { color: rgba(255, 255, 255, .5) }

.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em }
.footer-brand img, .footer-brand svg { width: 40px; height: 40px; flex-shrink: 0 }
.footer-about { font-size: .9rem; line-height: 1.7; color: rgba(255, 255, 255, .6); margin-bottom: 18px; max-width: 38ch }

.footer-legal { border-top-color: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .45) }
.footer-legal a { color: rgba(255, 255, 255, .55) }

/* ================================================================
   FLOTANTES (único CTA fijo: la barra inferior móvil se retiró)
   ================================================================ */
.fab-btn { width: 56px; height: 56px }
.fab-call { background: var(--slate-800); box-shadow: 0 6px 18px rgba(12, 23, 34, .3) }
.fab-btn::before { background: var(--slate-900); border-radius: 8px }

@media (max-width: 767px) {
    body .fab-container { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); gap: 10px }
    body .fab-btn { width: 52px; height: 52px }
    body .fab-btn::before { display: none }
}

/* ================================================================
   MENÚ MÓVIL v3 (2026-10-04): acordeón + bloque de contacto
   ================================================================ */
.nav-caret { display: inline-block; margin-left: 2px; font-size: .8em; line-height: 1; transition: transform .2s }
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg) }
.nav-info { display: none }

@media (max-width: 1099px) {
    .nav-toggle { display: flex }
    .nav-main {
        display: none; position: fixed; top: var(--nav-top, 68px); left: 0; right: 0; bottom: 0; z-index: 800;
        overflow-y: auto; overscroll-behavior: contain;
        padding: 4px 20px calc(28px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--stone-200)
    }
    .nav-main.open { display: flex; flex-direction: column; gap: 22px }
    .nav-main > ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0 }
    .nav-main > ul > li { border-bottom: 1px solid var(--stone-200) }
    .nav-main > ul > li:has(> a[href="/contacto"]) { display: none }

    .nav-main > ul > li > a,
    .nav-main .nav-dropdown-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px;
        padding: 12px 2px; border: 0; border-radius: 0; background: none;
        font-family: var(--font-head); font-size: 1.06rem; font-weight: 700; color: var(--slate-900); text-align: left
    }
    .nav-main > ul > li > a:hover,
    .nav-main > ul > li > a[aria-current="page"],
    .nav-main > ul > li > a.active,
    .nav-main .nav-dropdown-toggle:hover,
    .nav-main .has-dropdown:hover .nav-dropdown-toggle,
    .nav-main .has-dropdown:focus-within .nav-dropdown-toggle,
    .nav-main .nav-dropdown-toggle[aria-expanded="true"] { background: none; color: var(--copper) }

    .nav-main .nav-caret {
        display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 50%;
        background: var(--stone-100); color: var(--slate-800); font-size: 1rem
    }
    .nav-toggle span { transition: transform .25s, opacity .2s }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
    .nav-main .nav-dropdown-toggle[aria-expanded="true"] .nav-caret { background: var(--copper-50); color: var(--copper) }

    .nav-main .dropdown,
    .nav-main .has-dropdown:hover .dropdown,
    .nav-main .has-dropdown:focus-within .dropdown {
        display: none; position: static; min-width: 0; margin: 0 0 12px 4px; padding: 2px 0 2px 12px;
        border: 0; border-left: 2px solid var(--copper-300); border-radius: 0; box-shadow: none; background: none
    }
    .nav-main .has-dropdown.open > .dropdown { display: block }
    .nav-main .dropdown a {
        display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px;
        font-size: .98rem; font-weight: 500; color: var(--color-text)
    }
    .nav-main .dropdown a[aria-current="page"],
    .nav-main .dropdown a.active { background: var(--copper-50); color: var(--copper); font-weight: 700 }

    .nav-info { display: grid; gap: 14px; padding: 20px 18px; border: 1px solid var(--stone-200); border-radius: 16px; background: var(--stone-50) }
    .nav-info__title { margin: 0; font-family: var(--font-head); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--copper) }
    .nav-main a.nav-info__cta,
    .nav-main a.nav-info__cta:hover { display: flex; justify-content: center; width: 100%; padding: 13px 20px; border: 0; color: #fff }
    .nav-info__list { list-style: none; margin: 0; padding: 0; display: grid }
    .nav-main .nav-info__list a,
    .nav-info__list span {
        display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border: 0; border-radius: 0;
        background: none; font-size: .95rem; font-weight: 500; color: var(--slate-800); overflow-wrap: anywhere
    }
    .nav-main .nav-info__list a:hover { background: none; color: var(--copper) }
    .nav-info__list svg { width: 20px; height: 20px; flex-shrink: 0; fill: var(--copper) }

    body.nav-open .fab-container { display: none }
}

/* ================================================================
   AJUSTES MÓVIL
   ================================================================ */
@media (max-width: 1099px) {
    .header .container { gap: 10px }
    .header-phone { margin-left: auto }
}

@media (max-width: 767px) {
    .section-title { max-width: none }
    .hero { padding: 44px 0 56px }
    .hero-form-card { padding: 24px 20px 22px }
    .trust-badges .badge { font-size: .8rem; padding: 7px 12px }
    .cta-card { flex-direction: column; align-items: flex-start }
    .cta-card .btn { width: 100% }
    .map-frame iframe { height: 340px }
    .footer-grid { gap: 32px }
}

/* ================================================================
   MARCA (logo 2026-10-04): footer, Quiénes somos, sello en fotos
   ================================================================ */
.footer-logo { display: block; box-sizing: content-box; width: auto; height: 56px; padding: 10px 14px; margin-bottom: 18px; background: #fff; border-radius: 12px }
.footer-home { display: inline-block; margin-bottom: 18px; border-radius: 12px; transition: transform .2s, box-shadow .2s }
.footer-home .footer-logo { margin-bottom: 0 }
.footer-home:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.25) }
.footer-home:focus-visible { outline: 2px solid var(--copper, #a84f1c); outline-offset: 3px }

.hero-brand { display: flex !important; align-items: center; justify-content: center }
.hero-brand__card { margin: 0; width: min(100%, 320px); padding: 28px 26px 22px; background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(12, 23, 34, .35); text-align: center }
.hero-brand__card img { width: 100%; height: auto; display: block }
.hero-brand__card figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stone-200); display: grid; gap: 2px }
.hero-brand__card strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--slate-900) }
.hero-brand__card span { font-size: .82rem; color: var(--color-text-light) }
@media (max-width: 900px) {
    .hero-brand { margin-top: 28px; justify-content: flex-start }
    .hero-brand__card { width: 220px; padding: 18px 18px 14px }
}

.brand-photo { position: relative }
.brand-photo::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 76px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94) url("/img/logo-tejados-pizarra-madrid-96.webp") center / 58px auto no-repeat;
    box-shadow: 0 6px 18px rgba(12, 23, 34, .25);
    pointer-events: none
}

/* ================================================================
   ZONAS: cluster de servicios con foto + perks
   ================================================================ */
.svc-card.svc-card--photo { padding: 0 !important; gap: 0; overflow: hidden }
.svc-card--photo > img { width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin: 0; border-radius: 0 }
.svc-card--photo .svc-card-body { display: flex; flex-direction: column; flex: 1 }
.svc-card--photo h3 { margin: 0 }
.svc-card--photo p { flex: 0 0 auto; margin: 0 }
.service-card__perks { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--stone-200); display: grid; gap: 6px }
.service-card__perks li { position: relative; padding-left: 24px; font-size: .88rem; font-weight: 600; color: var(--slate-900); line-height: 1.4 }
.service-card__perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--copper-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a84f1c' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat
}

/* ZONAS: «Contexto local» sintetizado y centrado */
.zona-ctx .container { text-align: center }
.zona-ctx .section-title { margin-left: auto; margin-right: auto }
.zona-ctx__lead { max-width: 760px; margin: 0 auto; font-size: 1.02rem; line-height: 1.75; color: var(--color-text) }
.zona-ctx__h3 { margin: 40px 0 18px; font-size: 1.15rem; color: var(--slate-900) }
.zona-ctx__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: left }
.zona-ctx__grid li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: #fff; border: 1px solid var(--stone-200); border-radius: 14px; box-shadow: var(--shadow-sm) }
.zona-ctx__num { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--copper-50); color: var(--copper); font-weight: 800; font-size: .85rem }
.zona-ctx__grid h4 { margin: 0 0 4px; font-size: .98rem; line-height: 1.35; color: var(--slate-900) }
.zona-ctx__grid p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--color-text-light) }
.zona-ctx__note { max-width: 760px; margin: 36px auto 0; padding: 24px 28px; background: #fff; border: 1px solid var(--stone-200); border-top: 3px solid var(--copper); border-radius: 14px }
.zona-ctx__note h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--slate-900) }
.zona-ctx__note p { margin: 0; font-size: .96rem; line-height: 1.7; color: var(--color-text) }
.zona-ctx__note a { color: var(--copper); font-weight: 600 }
@media (max-width: 700px) { .zona-ctx__grid { grid-template-columns: 1fr } }

/* BLOG: filtro por tema */
button.cat-tag { font: inherit; font-size: .85rem; font-weight: 600; background: #fff; min-height: 40px; cursor: pointer }
.post-card[hidden] { display: none !important }
@media (min-width: 1025px) { .blog-sidebar { position: sticky; top: 110px; align-self: start } }

/* FAB «Menú» (encima de WhatsApp): acceso directo al menú de navegación */
.fab-menu { border: 0; padding: 0; cursor: pointer; background: #fff; box-shadow: 0 6px 18px rgba(12, 23, 34, .22); outline: 1px solid var(--stone-200) }
.fab-menu svg { fill: var(--slate-800) }
.fab-menu:hover { box-shadow: 0 8px 22px rgba(12, 23, 34, .3) }
.fab-menu:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px }