/* =================================================================
   Muebles a Medida en Zaragoza — style.css
   Mobile-first · 0 dependencias · paleta madera artesanal
   Bloques: 1 Variables · 2 Reset · 3 Tipografía · 4 Botones
   5 Header/Nav · 6 Hero/Hero-form · 7 Trust-bar · 8 Secciones
   9 Grids/Cards · 10 Proceso · 11 Trabajos · 12 Testimonios
   13 Zonas · 14 FAQ · 15 Formularios · 16 Mapa · 17 Footer
   18 Flotantes/CTA móvil · 19 Utilidades · 20 Gracias
   ================================================================= */

/* ── 1. VARIABLES ───────────────────────────────────────────── */
:root {
  --color-primary:   #6B4F3A;   /* nogal / madera natural */
  --color-secondary: #C8703C;   /* terracota — CTA presupuesto */
  --color-accent:    #4A5D4E;   /* verde salvia — detalles */
  --color-text:      #2B2521;
  --color-muted:     #6F655C;
  --color-bg:        #FFFFFF;
  --color-bg-alt:    #F6F1EA;   /* crema cálido — zebra */
  --color-border:    #E7DED2;
  --color-dark:      #3A2D22;   /* footer / overlays */

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-main: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 1200px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 2px 12px rgba(43,37,33,.08);
  --shadow-lg: 0 12px 32px rgba(43,37,33,.14);
  --transition: .2s ease;
}

/* ── 2. RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}
img, video, picture, svg { max-width: 100%; height: auto; }
img, video { display: block; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  background: var(--color-primary); color: #fff;
  padding: .6rem 1.1rem; border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 3. TIPOGRAFÍA ──────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.18; color: var(--color-primary); letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a:not(.btn):hover { color: var(--color-secondary); }
strong { font-weight: 600; }
.section-label {
  display: block; font-family: var(--font-main);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-secondary); margin-bottom: .5rem;
}

/* ── 4. BOTONES ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; min-height: 48px;
  font-weight: 600; font-size: 1rem; text-align: center;
  border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  cursor: pointer; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--color-secondary); color: #fff; box-shadow: 0 4px 14px rgba(200,112,60,.35); }
.btn--primary:hover { background: #b5612f; color: #fff; }
.btn--secondary { background: var(--color-primary); color: #fff; }
.btn--secondary:hover { background: #57402e; color: #fff; }
.btn--outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn--sm { padding: .55rem 1rem; min-height: 40px; font-size: .9rem; }
.btn--full { width: 100%; }

/* ── 5. HEADER + NAV ────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); box-shadow: 0 1px 0 var(--color-border); transition: box-shadow var(--transition); }
.site-header.scrolled { box-shadow: var(--shadow); }

.header__topbar { background: var(--color-primary); color: #fff; font-size: .8rem; padding: .4rem 0; }
.header__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.header__topbar-left, .header__topbar-right { display: flex; align-items: center; gap: 1.1rem; }
.topbar__link, .topbar__info { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.88); }
.topbar__link:hover { color: #fff; }
.topbar__social { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); width: 28px; height: 28px; transition: color var(--transition); }
.topbar__social:hover { color: #fff; }

.header__main { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; position: relative; }
.header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-svg { display: block; height: 48px; width: auto; }

.nav-main { margin-left: auto; }
.nav-main > ul { display: flex; align-items: center; gap: .35rem; list-style: none; }
.nav-main a, .nav-main > ul > li > button {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem; border-radius: var(--radius);
  font-weight: 500; font-size: .96rem; color: var(--color-text);
  min-height: 44px; transition: background var(--transition), color var(--transition);
}
.nav-main a:hover, .nav-main > ul > li > button:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.nav-main a[aria-current="page"] { color: var(--color-secondary); font-weight: 600; }

/* Dropdown servicios */
.has-dropdown { position: relative; }
.has-dropdown > a::after, .has-dropdown > button::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-left: .2rem; margin-top: -3px; transition: transform var(--transition);
}
.submenu {
  list-style: none; position: absolute; top: calc(100% - 2px); left: 0; min-width: 290px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .4rem; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.has-dropdown:hover .submenu, .has-dropdown:focus-within .submenu, .has-dropdown.submenu-open .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.has-dropdown:hover > a::after, .has-dropdown:hover > button::after { transform: rotate(-135deg); margin-top: 3px; }
.submenu a { display: block; padding: .6rem .8rem; font-size: .92rem; border-radius: 6px; }
.submenu a:hover { background: var(--color-bg-alt); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-toggle:hover {
  background: var(--sand);
  color: var(--caoba);
  border-color: var(--gold);
}

/* Backdrop para mobile */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1004;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
body.menu-open .nav-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Mobile nav drawer */
@media (max-width: 991px) {
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }
  body.menu-open .mobile-cta-bar {
    display: none !important;
  }
  .site-header {
    z-index: 1005;
  }
  .nav-main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: var(--cream);
    box-shadow: -8px 0 36px rgba(26, 23, 20, 0.22);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1006;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: auto;
  }
  .nav-main.is-open {
    transform: translateX(0);
  }

  /* Cabecera del drawer */
  .nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--sand);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    gap: .75rem;
  }
  .nav-drawer__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    min-width: 0;
  }
  .nav-drawer__brand .logo__mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 3px;
  }
  .nav-drawer__brand .logo__name {
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--ink);
    font-weight: 600;
  }
  .nav-drawer__brand .logo__city {
    font-size: .56rem;
    margin-top: .2rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-t);
  }
  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
  }
  .nav-close:hover,
  .nav-close:focus-visible {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }

  /* Cuerpo del menú con scroll */
  .nav-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .85rem 1rem;
  }
  .nav-main > ul,
  .nav-drawer__body > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-main a,
  .nav-main > ul > li > button,
  .nav-drawer__body a,
  .nav-drawer__body > ul > li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: .75rem .95rem;
    border-radius: var(--radius);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    transition: background .2s, color .2s;
    cursor: pointer;
    box-sizing: border-box;
  }
  .nav-main a:hover,
  .nav-main > ul > li > button:hover,
  .nav-drawer__body a:hover,
  .nav-drawer__body > ul > li > button:hover {
    background: var(--sand);
    color: var(--caoba);
  }
  .nav-main a[aria-current="page"],
  .nav-drawer__body a[aria-current="page"] {
    background: rgba(122, 46, 29, 0.08);
    color: var(--caoba);
    font-weight: 600;
    border-left: 3px solid var(--caoba);
    padding-left: calc(.95rem - 3px);
  }

  /* Desplegables en mobile */
  .has-dropdown {
    position: relative;
  }
  .has-dropdown > a::after,
  .has-dropdown > button::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: auto;
    margin-top: -3px;
    transition: transform .25s ease;
    flex-shrink: 0;
  }
  .has-dropdown.submenu-open > a::after,
  .has-dropdown.submenu-open > button::after {
    transform: rotate(-135deg);
    margin-top: 3px;
    border-color: var(--caoba);
  }
  .has-dropdown.submenu-open > a,
  .has-dropdown.submenu-open > button {
    background: var(--sand);
    color: var(--caoba);
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    margin: .25rem 0 .4rem .9rem;
    background: rgba(242, 237, 228, 0.5);
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .3s cubic-bezier(0.16, 1, 0.3, 1), padding .25s ease;
  }
  .has-dropdown.submenu-open .submenu {
    max-height: 520px;
    padding: .35rem 0;
  }
  .submenu li {
    list-style: none;
  }
  .submenu a {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    font-size: .92rem;
    color: var(--color-muted);
    border-radius: 2px;
    min-height: 42px;
    border-left: none !important;
  }
  .submenu a:hover,
  .submenu a[aria-current="page"] {
    background: var(--sand);
    color: var(--caoba);
  }
  .submenu a[aria-current="page"] {
    font-weight: 600;
  }

  /* Pie del drawer: CTA, email, horario, ubicación */
  .nav-drawer__footer {
    flex-shrink: 0;
    padding: 1.15rem 1.25rem;
    background: var(--sand);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: .85rem;
  }
  .drawer-cta {
    width: 100%;
    margin-bottom: .2rem;
  }
  .drawer-cta .btn {
    width: 100%;
    justify-content: center;
    padding: .85rem 1.2rem;
    min-height: 46px;
    font-size: .78rem;
    letter-spacing: .12em;
    box-shadow: 0 3px 12px rgba(122, 46, 29, 0.22);
  }
  .drawer-info {
    display: flex;
    flex-direction: column;
    gap: .65rem;
  }
  .drawer-info__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--color-muted);
    text-decoration: none;
    font-size: .84rem;
    line-height: 1.35;
  }
  .drawer-info__item svg {
    color: var(--gold-t);
    flex-shrink: 0;
    margin-top: .15rem;
  }
  .drawer-info__label {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-t);
    margin-bottom: .1rem;
  }
  .drawer-info__val {
    display: block;
    color: var(--ink);
    font-weight: 500;
    word-break: break-all;
  }
  a.drawer-info__item:hover .drawer-info__val {
    color: var(--caoba);
  }
  .drawer-info__sub {
    display: block;
    font-size: .75rem;
    color: var(--color-muted);
    margin-top: .15rem;
  }
}

/* En Desktop ocultar elementos específicos de mobile */
@media (min-width: 992px) {
  .nav-drawer__head,
  .nav-drawer__footer,
  .nav-backdrop,
  .nav-close {
    display: none !important;
  }
  .nav-drawer__body {
    display: contents;
  }
  .nav-toggle {
    display: none !important;
  }
}

/* ── 6. HERO ────────────────────────────────────────────────── */
.hero { position: relative; background: linear-gradient(135deg, #3A2D22 0%, #6B4F3A 100%); color: #fff; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(200,112,60,.25), transparent 55%); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 2rem; padding: 2.5rem 0 3rem; align-items: center; }
.hero__content h1 { color: #fff; }
.hero__content .section-label { color: #E7C9A8; }
.hero__subtitle { font-size: 1.1rem; color: rgba(255,255,255,.88); margin: 1rem 0 1.5rem; max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .9rem; color: rgba(255,255,255,.85); }
.hero__trust-item { display: inline-flex; align-items: center; gap: .45rem; }
.hero__trust-item svg { color: #E7C9A8; flex-shrink: 0; }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Hero form (negocio sin teléfono) */
.hero__form { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: 1.5rem; backdrop-filter: blur(4px); }
.hero__form-title { color: #fff; font-size: 1.2rem; font-weight: 600; margin-bottom: .35rem; }
.hero__form-sub { color: rgba(255,255,255,.75); font-size: .88rem; margin-bottom: 1.1rem; }
.form-hero { display: grid; gap: .8rem; }
.form-hero .form-group { margin: 0; }
.form-hero label { color: rgba(255,255,255,.85); }
.form-hero input, .form-hero textarea, .form-hero select {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); color: #fff;
}
.form-hero input::placeholder, .form-hero textarea::placeholder { color: rgba(255,255,255,.5); }
.form-hero input:focus, .form-hero textarea:focus, .form-hero select:focus { border-color: var(--color-secondary); background: rgba(255,255,255,.16); }
.form-hero select option { color: var(--color-text); }
.form-hero input[type="checkbox"] { width: auto; background: none; }
.form-hero .checkbox-label { color: rgba(255,255,255,.78); }
.form-hero .checkbox-label a { color: #E7C9A8; text-decoration: underline; }

@media (min-width: 992px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding: 4rem 0 4.5rem; }
}

/* ── 7. TRUST BAR ───────────────────────────────────────────── */
.trust-bar { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.trust-bar__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; padding: 1.1rem 0; text-align: center; }
.trust-bar__item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 500; color: var(--color-text); }
.trust-bar__item svg { color: var(--color-accent); flex-shrink: 0; }

/* ── 8. SECCIONES ───────────────────────────────────────────── */
.section { padding: 3rem 0; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-dark); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section-content { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.section-content p { color: var(--color-muted); }
.section--dark .section-content p { color: rgba(255,255,255,.8); }
@media (min-width: 768px) { .section { padding: 4rem 0; } }

/* ── 9. GRIDS / CARDS ───────────────────────────────────────── */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-3-center { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-3-center > *:last-child:nth-child(3n - 1) { grid-column: 2 / span 1; }
.grid-3-center > *:last-child:nth-child(3n - 2) { grid-column: 2 / span 1; }
@media (max-width: 900px) {
  .grid-3, .grid-3-center { grid-template-columns: repeat(2, 1fr); }
  .grid-3-center > *:last-child:nth-child(3n - 1),
  .grid-3-center > *:last-child:nth-child(3n - 2) { grid-column: auto; }
}
@media (max-width: 540px) { .grid-3, .grid-3-center, .grid-cards { grid-template-columns: 1fr; } }

.service-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.service-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.service-card__body h3 { font-size: 1.15rem; }
.service-card__body p { font-size: .92rem; color: var(--color-muted); flex: 1; }
.service-card__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--color-secondary); font-family: var(--font-main); margin-top: .25rem; }
.service-card__link:hover { gap: .6rem; color: var(--color-secondary); }

/* Feature / diferenciadores */
.feature-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.feature-card__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-accent); margin-bottom: .9rem; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.feature-card p { font-size: .9rem; color: var(--color-muted); }

/* ── 10. PROCESO EN PASOS ───────────────────────────────────── */
.proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; counter-reset: paso; }
.proceso__step { position: relative; text-align: center; padding: 1.5rem 1rem; }
.proceso__num { counter-increment: paso; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-secondary); color: #fff; font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; margin-bottom: .9rem; }
.proceso__num::before { content: counter(paso); }
.proceso__step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.proceso__step p { font-size: .9rem; color: var(--color-muted); }

/* ── 11. TRABAJOS / GALERÍA ─────────────────────────────────── */
.grid-trabajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.trabajo-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; margin: 0; }
.trabajo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.trabajo-card__desc { padding: .75rem 1rem; font-size: .9rem; color: var(--color-text); line-height: 1.4; }
@media (max-width: 900px) { .grid-trabajos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid-trabajos { grid-template-columns: 1fr; } }

/* ── 12. TESTIMONIOS ────────────────────────────────────────── */
.section--testimonios .section-content { text-align: center; }
.google-badge { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--color-border); border-radius: 2rem; padding: .4rem 1rem; font-size: .82rem; color: var(--color-text); margin-top: .75rem; box-shadow: 0 1px 4px rgba(43,37,33,.06); }
.google-badge__stars { display: flex; align-items: center; gap: .2rem; border-left: 1px solid var(--color-border); padding-left: .5rem; }
.google-badge__stars strong { font-size: .85rem; }
.grid-testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: left; }
.testimonio-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--shadow); }
.testimonio-card__stars { display: flex; gap: .15rem; }
.testimonio-card__text p { font-size: .95rem; line-height: 1.65; color: #51463c; font-style: italic; }
.testimonio-card__author { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; }
.testimonio-card__author strong { font-size: .9rem; }
.testimonio-card__author span { font-size: .8rem; color: var(--color-muted); }
@media (max-width: 900px) { .grid-testimonios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .grid-testimonios { grid-template-columns: 1fr; } }

/* ── 13. ZONAS ──────────────────────────────────────────────── */
.zonas-grid { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.zona-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1.1rem; min-height: 44px; background: #fff; border: 1px solid var(--color-border); border-radius: 2rem; font-size: .92rem; font-weight: 500; transition: background var(--transition), border-color var(--transition), color var(--transition); }
.zona-pill:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.zona-pill svg { color: var(--color-accent); }
.zona-pill:hover svg { color: #fff; }

/* ── 14. FAQ ────────────────────────────────────────────────── */
.faq { max-width: 800px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item dt { margin: 0; }
.faq-item dt button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem .25rem; text-align: left; font-family: var(--font-head); font-size: 1.08rem;
  font-weight: 600; color: var(--color-primary); min-height: 44px;
}
.faq-item dt button::after { content: ""; width: 11px; height: 11px; border-right: 2px solid var(--color-secondary); border-bottom: 2px solid var(--color-secondary); transform: rotate(45deg); transition: transform var(--transition); flex-shrink: 0; margin-right: .3rem; }
.faq-item dt button[aria-expanded="true"]::after { transform: rotate(-135deg); }
.faq-item dd { padding: 0 .25rem 1.2rem; color: var(--color-muted); }
.faq-item dd[hidden] { display: none; }

/* ── 15. FORMULARIOS ────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .35rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: .8rem .9rem; font-size: 16px; /* iOS no-zoom */
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(200,112,60,.15); }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group--checkbox .checkbox-label { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; font-weight: 400; color: var(--color-muted); cursor: pointer; }
.form-group--checkbox input { width: auto; margin-top: .25rem; flex-shrink: 0; }
.form-group--checkbox a { color: var(--color-secondary); text-decoration: underline; }
.field-error { display: block; color: #c0392b; font-size: .8rem; margin-top: .3rem; }
.form-send-error { color: #c0392b; font-size: .9rem; margin-bottom: 1rem; }
[aria-invalid="true"] { border-color: #c0392b !important; }

.contact-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); }

/* ── 16. MAPA ───────────────────────────────────────────────── */
#map-placeholder { width: 100%; aspect-ratio: 16/9; min-height: 280px; background: var(--color-bg-alt); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-muted); cursor: pointer; }
#map-placeholder iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* ── 17. FOOTER ─────────────────────────────────────────────── */
.footer { background: var(--color-dark); color: rgba(255,255,255,.78); padding: 3rem 0 1.5rem; font-size: .92rem; }
.footer a { color: rgba(255,255,255,.78); }
.footer a:hover { color: #fff; }
.footer p { color: inherit; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.footer__col h3 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer__logo { display: inline-flex; margin-bottom: 1rem; }
.footer__logo .logo-svg { height: 44px; }
.footer__desc { font-size: .88rem; color: rgba(255,255,255,.62); line-height: 1.6; margin-bottom: 1.1rem; max-width: 32ch; }
.footer__nap { display: flex; flex-direction: column; gap: .5rem; font-style: normal; }
.footer__nap span, .footer__nap a { display: inline-flex; align-items: flex-start; gap: .5rem; }
.footer__nap svg { color: #C8703C; flex-shrink: 0; margin-top: 3px; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; font-size: .82rem; color: rgba(255,255,255,.55); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ── 18. FLOTANTES + CTA MÓVIL ──────────────────────────────── */
.whatsapp-float { position: fixed; bottom: 80px; right: 1.25rem; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 900; color: #fff; }
.mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
.cta-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem; font-size: 1rem; font-weight: 600; min-height: 56px; }
.cta-btn--mail { background: var(--color-primary); color: #fff; }
.cta-btn--presupuesto { background: var(--color-secondary); color: #fff; }
@media (min-width: 768px) { .mobile-cta-bar { display: none; } .whatsapp-float { bottom: 1.5rem; } }

/* ── 19. UTILIDADES ─────────────────────────────────────────── */
.section-lazy { content-visibility: auto; contain-intrinsic-size: 1px 600px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.breadcrumb { padding: .9rem 0; font-size: .85rem; color: var(--color-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.breadcrumb li::after { content: "/"; margin-left: .4rem; color: var(--color-border); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a:hover { color: var(--color-secondary); }
.cta-band { background: var(--color-secondary); color: #fff; text-align: center; padding: 3rem 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; }
.img-placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-muted); font-size: .85rem; border: 2px dashed var(--color-border); text-align: center; padding: 1rem; }
.img-placeholder--banner { width: 100%; height: 320px; border-radius: var(--radius); }
.img-placeholder--card { width: 100%; aspect-ratio: 4/3; }

/* ── 19b. BLOG CARDS (home + hub) ───────────────────────────── */
.blog-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card__img-wrap { overflow: hidden; display: block; }
.blog-card__img-wrap img { width: 100%; aspect-ratio: 5/3; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.04); }
.blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.blog-card__cat { font-size: .73rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-accent); }
.blog-card__body h3 { font-size: 1rem; line-height: 1.3; }
.blog-card__body h3 a { color: var(--color-primary); }
.blog-card__body h3 a:hover { color: var(--color-secondary); }
.blog-card__body > p { font-size: .88rem; color: var(--color-muted); flex: 1; }

/* ── 19c. PÁGINAS DE SERVICIO ───────────────────────────────── */
.prose { max-width: 820px; margin-inline: auto; }
.prose > h2 { margin: 2rem 0 .75rem; }
.prose > h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; }
.prose > p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.25rem 1.4rem; display: grid; gap: .4rem; }
.prose ul li { list-style: disc; }
.benefit-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; max-width: 960px; margin-inline: auto; list-style: none; }
.benefit-list li { display: flex; gap: 1rem; align-items: flex-start; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.2rem 1.35rem; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.benefit-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(74,93,78,.45); }
.benefit-list li svg { flex-shrink: 0; width: 20px; height: 20px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: rgba(74,93,78,.10); color: var(--color-accent); margin-top: 0; }
.benefit-list li strong { display: block; color: var(--color-primary); font-family: var(--font-head); font-size: 1.05rem; margin-bottom: .25rem; }
.benefit-list li span { font-size: .92rem; color: var(--color-muted); line-height: 1.55; }
@media (max-width: 640px) { .benefit-list { grid-template-columns: 1fr; } }

/* Compromisos / garantías por escrito — tarjetas con acento terracota */
.guarantee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 980px; margin-inline: auto; list-style: none; }
.guarantee-grid li { display: flex; gap: 1rem; align-items: flex-start; background: var(--color-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-secondary); border-radius: var(--radius); padding: 1.35rem 1.5rem; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition); }
.guarantee-grid li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.guarantee-grid li svg { flex-shrink: 0; width: 22px; height: 22px; padding: 9px; box-sizing: content-box; border-radius: 50%; background: rgba(200,112,60,.12); color: var(--color-secondary); }
.guarantee-grid strong { display: block; color: var(--color-primary); font-family: var(--font-head); font-size: 1.08rem; margin-bottom: .3rem; }
.guarantee-grid p { color: var(--color-muted); font-size: .93rem; margin: 0; line-height: 1.55; }
@media (max-width: 640px) { .guarantee-grid { grid-template-columns: 1fr; } }
.precio-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem 1.5rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; }
.precio-card h3 { font-size: 1.05rem; }
.precio-card__price { font-family: var(--font-head); font-size: 1.6rem; font-weight: 600; color: var(--color-secondary); }
.precio-card__price small { display: block; font-size: .72rem; font-weight: 400; color: var(--color-muted); font-family: var(--font-main); letter-spacing: .02em; }
.precio-card p { font-size: .88rem; color: var(--color-muted); }
.precio-nota { max-width: 720px; margin: 1.5rem auto 0; text-align: center; font-size: .85rem; color: var(--color-muted); }

/* ── 19d. BLOG POSTS ────────────────────────────────────────── */
.hero--post { padding: 2.5rem 0 2.75rem; }
.hero--post .hero__inner { display: block; max-width: 840px; }
.hero--post h1 { margin-bottom: .75rem; }
.hero--post .hero__subtitle { color: rgba(255,255,255,.92); max-width: 65ch; margin-bottom: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1.2rem; font-size: .82rem; color: rgba(255,255,255,.82); list-style: none; }
.post-meta li { display: flex; align-items: center; gap: .35rem; }
.post-figure { max-width: 980px; margin: -1.75rem auto 0; padding: 0 1rem; }
.post-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; }
.post-body { max-width: 820px; margin-inline: auto; }
.post-body h2 { margin: 2.25rem 0 .75rem; }
.post-body h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; }
.post-body p { margin-bottom: 1rem; }
.post-body ul, .post-body ol { margin: 0 0 1.25rem 1.4rem; display: grid; gap: .4rem; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body img { border-radius: var(--radius); margin: 1.25rem 0; }
.post-body strong { color: var(--color-primary); }
.toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0 0 2rem; }
.toc strong { display: block; margin-bottom: .5rem; font-family: var(--font-head); color: var(--color-primary); }
.toc ol { margin: 0 0 0 1.2rem; display: grid; gap: .3rem; }
.toc ol li { list-style: decimal; }
.toc a { color: var(--color-primary); }
.toc a:hover { color: var(--color-secondary); }
.post-table { width: 100%; border-collapse: collapse; margin: 1rem 0 .5rem; font-size: .92rem; }
.post-table th, .post-table td { border: 1px solid var(--color-border); padding: .6rem .8rem; text-align: left; }
.post-table thead th { background: var(--color-primary); color: #fff; }
.post-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.cta-inline { background: var(--color-bg-alt); border-left: 4px solid var(--color-secondary); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2rem 0; }
.cta-inline p { margin-bottom: .85rem; }
.cta-inline p:last-child { margin-bottom: 0; }
.author-box { display: flex; gap: 1.1rem; align-items: flex-start; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; margin: 2.5rem auto 0; max-width: 820px; }
.author-box img { border-radius: 50%; flex-shrink: 0; width: 72px; height: 72px; object-fit: cover; }
.author-box__name { font-family: var(--font-head); font-weight: 600; color: var(--color-primary); }
.author-box__role { font-size: .85rem; color: var(--color-secondary); font-weight: 600; margin-bottom: .4rem; }
.author-box__bio { font-size: .9rem; color: var(--color-muted); }
.author-box__bio a { color: var(--color-secondary); font-weight: 600; }
.post-cta-form { max-width: 720px; margin-inline: auto; }
@media (max-width: 560px) { .author-box { flex-direction: column; } }

/* ── 20. PÁGINA GRACIAS ─────────────────────────────────────── */
.gracias-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; background: var(--color-bg-alt); }
.gracias-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.5rem 2rem; max-width: 560px; text-align: center; }
.gracias-icon { display: inline-flex; color: var(--color-accent); margin-bottom: 1rem; }
.gracias-card h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; }
.gracias-card p { color: var(--color-muted); }
.gracias-next { margin-top: .75rem; }
.gracias-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.75rem 0 1.25rem; }
.gracias-mail { font-size: .9rem; }
.gracias-mail a { color: var(--color-secondary); font-weight: 600; }

/* ── Hero simple (páginas sin formulario: nosotros, blog, trabajos) ── */
.hero--simple .hero__inner { display: block; max-width: 820px; padding: 3rem 0 3.25rem; }
.hero--simple .hero__subtitle { max-width: 64ch; }
.hero--simple .hero__trust { margin-top: 1.5rem; }

/* ── Sección descriptiva de servicios (prose editorial mejorada) ── */
.prose--feature { max-width: 940px; }
.prose--feature > h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2;
  padding-bottom: .9rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.prose--feature > p:first-of-type { font-size: 1.15rem; line-height: 1.7; color: var(--color-text); }
.prose--feature > p { color: var(--color-muted); }
.prose--feature > p strong { color: var(--color-text); }
/* Subsecciones h3+p como tarjetas en rejilla */
.prose--feature .prose-grid { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.prose--feature .prose-grid > article {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow); position: relative;
}
.prose--feature .prose-grid > article::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem;
  width: 3px; border-radius: 3px; background: var(--color-secondary);
}
.prose--feature .prose-grid h3 {
  margin: 0 0 .6rem; padding-left: .9rem; font-size: 1.18rem; color: var(--color-primary);
}
.prose--feature .prose-grid p { margin: 0; padding-left: .9rem; color: var(--color-muted); }
.prose--feature .prose-grid p strong { color: var(--color-text); }
@media (min-width: 760px) { .prose--feature .prose-grid { grid-template-columns: 1fr 1fr; } }

/* ── Mapa embebido Google Maps ── */
.map-embed { width: 100%; aspect-ratio: 16/9; min-height: 300px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; }

/* ── Formulario de contacto en el cuerpo (2 columnas) ── */
.contacto-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 880px) { .contacto-layout { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; } }
.contacto-aside { display: grid; gap: 1.25rem; align-content: start; }
.contacto-aside .map-embed { min-height: 260px; }

/* ── 21. BLOG: layout con sidebar, categorías, etiquetas, autor ── */
.blog-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 920px) { .blog-layout { grid-template-columns: minmax(0,1fr) 320px; } }
.blog-main { min-width: 0; }
.blog-sidebar { display: grid; gap: 1.5rem; }
@media (min-width: 920px) { .blog-sidebar { position: sticky; top: 96px; } }
.sidebar-block { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.sidebar-block--alt { background: var(--color-bg-alt); }
.sidebar-block > h2 { font-size: 1.05rem; font-family: var(--font-head); color: var(--color-primary); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--color-border); }
.cat-list { display: grid; }
.cat-list li { list-style: none; }
.cat-list a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem .1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-weight: 500; transition: color var(--transition); }
.cat-list li:last-child a { border-bottom: 0; padding-bottom: 0; }
.cat-list a:hover, .cat-list a:focus-visible { color: var(--color-secondary); }
.cat-list .count { flex-shrink: 0; font-size: .78rem; font-weight: 700; color: var(--color-accent); background: var(--color-bg-alt); border-radius: 999px; padding: .1rem .55rem; }
.sidebar-block--alt .cat-list .count { background: #fff; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-chip { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--color-primary); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: .35rem .8rem; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.tag-chip:hover, .tag-chip:focus-visible, .tag-chip[aria-current="true"] { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.side-posts { display: grid; gap: 1rem; }
.side-post { display: grid; grid-template-columns: 76px 1fr; gap: .8rem; align-items: center; }
.side-post img { width: 76px; height: 60px; object-fit: cover; border-radius: 8px; }
.side-post h3 { font-size: .9rem; line-height: 1.3; }
.side-post h3 a { color: var(--color-primary); }
.side-post h3 a:hover { color: var(--color-secondary); }
.author-card { text-align: center; }
.author-card img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto .8rem; }
.author-card__name { font-family: var(--font-head); font-weight: 600; color: var(--color-primary); }
.author-card__role { font-size: .82rem; color: var(--color-secondary); font-weight: 600; margin-bottom: .6rem; }
.author-card__bio { font-size: .85rem; color: var(--color-muted); margin-bottom: 1rem; }
.author-card .btn { width: 100%; }
/* Destacados + etiquetas en tarjeta */
.blog-card--feature .blog-card__body h3 { font-size: 1.15rem; }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.blog-card__tags a { font-size: .72rem; font-weight: 600; color: var(--color-accent); background: var(--color-bg-alt); border-radius: 999px; padding: .2rem .6rem; }
.blog-card__tags a:hover { color: var(--color-secondary); }
/* Filtro por etiqueta (JS progresivo) */
.blog-card[hidden] { display: none; }
.filter-note { font-size: .92rem; color: var(--color-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1.25rem; }
.filter-note a { color: var(--color-secondary); font-weight: 600; }
/* Taxonomía en cada post */
.post-taxonomy { max-width: 820px; margin: 2rem auto 0; display: flex; flex-wrap: wrap; gap: .55rem .9rem; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.post-taxonomy__label { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }

/* §mmz seo-fix 2026-10-08 */
picture:not([class]){display:contents}
.hero--img{min-height:min(82svh,680px);display:flex;align-items:center}
.hero--img .hero__bg{position:absolute;inset:0;z-index:0}
.hero--img .hero__bg img{width:100%;height:100%;object-fit:cover}
.hero--img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,20,14,.8),rgba(28,20,14,.66) 55%,rgba(28,20,14,.84))}
.hero--img .hero__inner{display:block;z-index:2}
.hero--img .hero__content{max-width:760px}
.hero--img .hero__subtitle{color:#fff}
@media (min-width:992px){.hero--img::before{background:linear-gradient(90deg,rgba(28,20,14,.88) 0%,rgba(28,20,14,.7) 50%,rgba(28,20,14,.35) 100%)}}
@media (max-width:767px){.hero--img{min-height:70svh}}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.25rem}
.cta-band .cta-buttons{justify-content:center}
.split{display:grid;gap:2rem;align-items:center}
.split__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.split__text p{max-width:60ch}
.split__list{list-style:none;margin-top:1rem;display:grid;gap:.5rem}
.split__list li{position:relative;padding-left:1.2rem}
.split__list li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--color-secondary)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}.split--reverse .split__media{order:2}}
[data-gallery] img{cursor:zoom-in}
[data-gallery] img:focus-visible{outline:3px solid var(--color-secondary);outline-offset:3px}
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh;overflow:visible;margin:auto}
.lightbox::backdrop{background:rgba(20,15,10,.86)}
.lightbox__fig{margin:0}
.lightbox__fig img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;margin:auto;border-radius:12px}
.lightbox__fig figcaption{color:#fff;text-align:center;margin-top:.6rem;font-size:.95rem}
.lightbox__close{position:absolute;top:-3rem;right:0;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#2B2521;font-size:1.6rem;line-height:1;cursor:pointer}
.map-facade{width:100%;aspect-ratio:16/9;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg-alt)}
.map-facade__btn{min-height:44px;padding:.7rem 1.4rem;border:2px solid var(--color-primary);border-radius:999px;background:#fff;color:var(--color-primary);font:inherit;font-weight:600;cursor:pointer}
.map-facade__btn:focus-visible{outline:3px solid var(--color-secondary);outline-offset:2px}
.map-facade__note{font-size:.85rem;color:#6b5f55}
.map-facade iframe{width:100%;height:100%;border:0;border-radius:var(--radius)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:.75rem 0 0;padding:.9rem 1rem;border-radius:8px;background:var(--color-bg-alt);border-left:3px solid transparent;font-size:.95rem;line-height:1.5}
.form-status:empty{display:none}
.form-status.is-success{background:#e8f5ec;color:#145f38;border-left-color:#2e8b57;font-weight:600}
.form-status.is-error{background:#fbeae7;color:#8c231a;border-left-color:#c0392b}
button[type=submit]:disabled{opacity:.65;cursor:progress}
.float-cta[hidden]{display:none}
@media (max-width:991px){.header__cta{display:none}.nav-toggle{flex-shrink:0}.header__logo{min-width:0}}
@media (max-width:767px){.header__topbar .topbar__info{display:none}.header__topbar-inner{justify-content:center}}

/* §mmz diseño v3 (2026-10-08) — minimalismo cálido: crema, tinta, caoba y latón. Fuente: .claude/_mmz_design.css */
:root{
  --ink:#1A1714; --ink-2:#26211C; --caoba:#7A2E1D; --caoba-d:#5F2216;
  --gold:#B8925A; --gold-l:#D4B47C; --gold-t:#7E5F2E;
  --cream:#FAF8F3; --sand:#F2EDE4; --line:#E5DDCF;
  --color-primary:#2E2620; --color-secondary:#7A2E1D; --color-accent:#B8925A;
  --color-text:#2B2521; --color-muted:#655B52; --color-bg:#FAF8F3; --color-bg-alt:#F2EDE4;
  --color-border:#E5DDCF; --color-dark:#1A1714;
  --radius:4px; --radius-lg:6px;
  --shadow:0 1px 2px rgba(26,23,20,.04),0 10px 28px rgba(26,23,20,.06);
  --shadow-lg:0 22px 50px rgba(26,23,20,.14);
  --section-y:clamp(4rem,8vw,6.5rem);
  --grain:repeating-linear-gradient(97deg,rgba(255,255,255,.022) 0 1px,transparent 1px 6px,rgba(255,255,255,.012) 6px 7px,transparent 7px 13px);
}
body{background:var(--cream);color:var(--color-text);font-size:1.0625rem;line-height:1.7}
::selection{background:var(--gold-l);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a:not(.btn):hover{color:var(--caoba)}

/* ── Tipografía: serif para H1/editorial, mayúsculas espaciadas para títulos de sección ── */
h1,h2,h3,h4{color:var(--ink)}
h1{font-weight:500;letter-spacing:-.015em}
.section-content h2,.split__text h2,.cta-band h2,.sidebar-block>h2{
  font-family:var(--font-main);font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1.35}
.section-content h2::after{content:"";display:block;width:64px;height:2px;margin:1.15rem auto 0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 17px)}
.section-label{font-size:.7rem;font-weight:600;letter-spacing:.3em;color:var(--gold-t);margin-bottom:.9rem}
.split__text .section-label,.hero__content .section-label{display:flex;align-items:center;gap:.9rem}
.split__text .section-label::before,.hero__content .section-label::before{content:"";width:32px;height:1px;background:currentColor;flex-shrink:0}
.section{padding:var(--section-y) 0}
.section--alt{background:var(--sand)}
.section-content{max-width:680px;margin:0 auto 3.25rem}
.section-content p{color:var(--color-muted)}
.prose>h2,.post-body h2{font-weight:500}

/* ── Botones ── */
.btn{border-radius:2px;font-size:.74rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;padding:1rem 1.8rem;min-height:50px;box-shadow:none;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--caoba);color:#fff;box-shadow:none}
.btn--primary:hover{background:var(--caoba-d);color:#fff}
.btn--secondary{background:var(--gold-l);color:var(--ink)}
.btn--secondary:hover{background:#E3C894;color:var(--ink)}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--gold)}
.btn--outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn--sm{padding:.7rem 1.2rem;min-height:44px;font-size:.7rem}

/* ── Cabecera ── */
.site-header{background:rgba(250,248,243,.97);box-shadow:0 1px 0 var(--line)}
.site-header.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(26,23,20,.06)}
.header__topbar{background:var(--ink);font-size:.74rem;letter-spacing:.03em}
.header__topbar svg{color:var(--gold-l)}
.topbar__link,.topbar__info{color:rgba(250,248,243,.78)}
.header__main{padding:.8rem 0}
.header__logo{gap:.8rem;color:var(--ink)}
.logo__mark{width:46px;height:46px;border-radius:3px;flex-shrink:0}
.logo__text{display:flex;flex-direction:column;line-height:1}
.logo__name{font-family:var(--font-head);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.logo__city{font-size:.6rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-t);margin-top:.35rem}
.header__logo:hover .logo__name{color:var(--caoba)}
.submenu{border-radius:2px;border-color:var(--line);box-shadow:var(--shadow-lg)}
.submenu a{font-size:.9rem;border-radius:2px}
.submenu a:hover{background:var(--sand);color:var(--caoba)}
.nav-main a[aria-current="page"]{color:var(--caoba)}
@media (min-width:992px){
  .nav-main>ul>li>a{position:relative;font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;padding:.6rem .8rem;background:none!important}
  .nav-main>ul>li>a::before{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .nav-main>ul>li>a:hover::before,.nav-main>ul>li>a[aria-current="page"]::before{transform:scaleX(1)}
  .nav-main>ul>li>a:hover{color:var(--caoba)}
}

/* ── Hero ── */
.hero{background:var(--ink)}
.hero:not(.hero--img){background-color:var(--ink);background-image:linear-gradient(120deg,rgba(122,46,29,.45),transparent 60%),var(--grain)}
.hero::after{background:radial-gradient(circle at 85% 15%,rgba(212,180,124,.14),transparent 55%)}
.hero--img::before{background:linear-gradient(180deg,rgba(26,23,20,.82),rgba(26,23,20,.62) 50%,rgba(26,23,20,.86))}
@media (min-width:992px){.hero--img::before{background:linear-gradient(90deg,rgba(26,23,20,.9) 0%,rgba(26,23,20,.7) 48%,rgba(26,23,20,.25) 100%)}}
.hero__content h1{color:#fff;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.12}
.hero__content .section-label{color:var(--gold-l)}
.hero__subtitle{color:rgba(250,248,243,.9);font-size:1.08rem;line-height:1.7;max-width:54ch}
.hero__ctas{gap:1rem;margin:2rem 0 1.75rem}
.hero__trust{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,243,.8)}
.hero__trust-item svg{color:var(--gold-l)}
.hero--simple .hero__inner{padding:clamp(3rem,7vw,5rem) 0}
.hero--post{padding:clamp(2.5rem,6vw,4rem) 0}

/* ── Banda de confianza oscura (tras el hero) ── */
.trust-bar{background:var(--ink);background-image:var(--grain);border:0;color:#EDE6DA}
.trust-bar__inner{padding:1.4rem 0;gap:1rem 2.75rem}
.trust-bar__item{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#EDE6DA}
.trust-bar__item svg{color:var(--gold-l)}
@media (max-width:767px){.trust-bar__inner{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;text-align:left}.trust-bar__item{align-items:flex-start;line-height:1.5}}

/* ── Tarjetas ── */
.service-card,.blog-card,.feature-card,.precio-card,.sidebar-block,.trabajo-card{border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:none}
.service-card,.blog-card,.feature-card,.trabajo-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.service-card:hover,.blog-card:hover,.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.service-card img,.trabajo-card img,.blog-card__img-wrap img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.service-card:hover img,.trabajo-card:hover img{transform:scale(1.05)}
.service-card__body{padding:1.6rem 1.5rem 1.7rem;gap:.65rem}
.service-card__body h3,.feature-card h3,.proceso__step h3{font-family:var(--font-main);font-size:.9rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;line-height:1.45}
.service-card__body h3 a{color:var(--ink)}
.service-card__body h3 a:hover{color:var(--caoba)}
.service-card__body p{font-size:.93rem}
.service-card__link{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--caoba);gap:.5rem}
.service-card__link:hover{gap:.85rem;color:var(--caoba-d)}
.feature-card{padding:2.1rem 1.6rem}
.feature-card__icon{width:58px;height:58px;background:transparent;border:1px solid var(--line);color:var(--gold);margin-bottom:1.1rem;transition:border-color .35s,background .35s,color .35s}
.feature-card:hover .feature-card__icon{border-color:var(--gold);background:var(--ink);color:var(--gold-l)}
.blog-card__cat{color:var(--gold-t);letter-spacing:.2em;font-size:.68rem}
.blog-card__body h3 a{color:var(--ink)}
@media (min-width:1100px){#otros .grid-3-center{grid-template-columns:repeat(4,1fr)}#otros .grid-3-center>*:last-child{grid-column:auto}}

/* ── Proceso: tarjetas con número 01-04 en latón ── */
.proceso{gap:1.25rem}
.proceso__step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-align:left;padding:1.9rem 1.6rem;transition:border-color .35s,transform .35s}
.proceso__step:hover{border-color:var(--gold);transform:translateY(-3px)}
.proceso__num{width:auto;height:auto;background:none;border-radius:0;color:var(--gold);font-family:var(--font-head);font-size:2.1rem;font-weight:500;margin-bottom:.9rem;justify-content:flex-start}
.proceso__num::before{content:counter(paso,decimal-leading-zero)}

/* ── Texto-imagen con marco de latón desplazado y sello de marca ── */
.split{gap:clamp(2.5rem,6vw,5.5rem)}
.split__media{position:relative;isolation:isolate}
.split__media::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--gold);z-index:-1;pointer-events:none}
.split--reverse .split__media::before{inset:22px 22px -22px -22px}
.split__media img{border-radius:0;box-shadow:var(--shadow-lg)}
.split__media::after{content:"";position:absolute;right:18px;bottom:18px;width:68px;height:68px;border-radius:50%;
  background:var(--ink) url(/img/brand/logo-mark-gold.webp) center/70% no-repeat;border:1px solid rgba(212,180,124,.55);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.split__text h2{margin-bottom:1.1rem}
.split__list li{padding-left:1.7rem}
.split__list li::before{width:16px;height:1px;border-radius:0;top:.85em;background:var(--gold)}
@media (max-width:899px){.split__media::before{inset:12px -10px -12px 10px}.split--reverse .split__media::before{inset:12px 10px -12px -10px}.split__media::after{width:54px;height:54px;right:12px;bottom:12px}}

/* ── Galería, zonas, FAQ ── */
.grid-trabajos{gap:1.25rem}
.trabajo-card{overflow:hidden}
.trabajo-card__desc{font-size:.85rem;color:var(--color-muted);padding:.9rem 1.1rem}
.zona-pill{border-radius:2px;border-color:var(--line);font-size:.86rem;letter-spacing:.02em}
.zona-pill::before{content:"";width:14px;height:14px;flex-shrink:0;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.zona-pill svg{color:var(--gold)}
.zona-pill:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.zona-pill:hover svg{color:var(--gold-l)}
.zona-pill:hover::before{background:var(--gold-l)}
.zonas-grid>li{display:inline-flex;align-items:center;min-height:40px;padding:.45rem 1rem;border:1px dashed var(--line);border-radius:2px;font-size:.86rem;color:var(--color-muted);background:#fff}
.faq-item{border-color:var(--line)}
.faq-item dt button{font-family:var(--font-main);font-size:1rem;font-weight:600;color:var(--ink);padding:1.25rem .25rem}
.faq-item dt button:hover{color:var(--caoba)}
.faq-item dt button::after{border-color:var(--gold);border-width:0 1.5px 1.5px 0}

/* ── Editorial / listas / precios ── */
.prose--feature .prose-grid>article{border-radius:var(--radius);box-shadow:none;border-color:var(--line)}
.prose--feature .prose-grid>article::before{background:var(--gold)}
.cta-inline{background:var(--sand);border-left-color:var(--gold);border-radius:var(--radius)}
.benefit-list li,.guarantee-grid li{border-radius:var(--radius);box-shadow:none;border-color:var(--line)}
.guarantee-grid li{border-left-color:var(--gold)}
.benefit-list li svg,.guarantee-grid li svg{background:var(--sand);color:var(--gold-t)}
.precio-card__price{color:var(--caoba)}
.post-table thead th{background:var(--ink)}
.post-figure img,.post-body img{border-radius:var(--radius)}
.post-figure img{aspect-ratio:16/9;object-fit:cover;max-height:560px}
.post-body img{aspect-ratio:16/9;object-fit:cover}
.toc{border-radius:var(--radius);border-left:2px solid var(--gold)}
.tag-chip,.cat-list .count,.blog-card__tags a{border-radius:2px}
.tag-chip:hover,.tag-chip[aria-current="true"]{background:var(--ink);border-color:var(--ink)}

/* ── Banda CTA oscura con la marca en filigrana ── */
.cta-band{position:relative;overflow:hidden;background:var(--ink);background-image:var(--grain);padding:clamp(3.75rem,8vw,6rem) 0;border-top:1px solid rgba(212,180,124,.25)}
.cta-band::before{content:"";position:absolute;right:max(-60px,calc(50% - 760px));top:50%;width:min(380px,60vw);aspect-ratio:1;transform:translateY(-50%);
  background:url(/img/brand/logo-mark-gold.webp) center/contain no-repeat;opacity:.07;pointer-events:none}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:1rem}
.cta-band h2::after{content:"";display:block;width:64px;height:2px;margin:1.1rem auto 0;background:repeating-linear-gradient(90deg,var(--gold-l) 0 12px,transparent 12px 17px)}
.cta-band p{color:rgba(250,248,243,.82)}
.cta-band .btn--outline{color:#fff;border-color:var(--gold-l)}

/* ── Formularios ── */
.form-group input,.form-group select,.form-group textarea{border-radius:2px;border-color:var(--line);background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,146,90,.18)}
.form-group label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)}
.form-group--checkbox .checkbox-label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400}
.form-group--checkbox a{color:var(--caoba)}
.contact-form{border-radius:var(--radius);box-shadow:var(--shadow);border-top:3px solid var(--gold)}

/* ── Mapa (facade) ── */
.map-facade{aspect-ratio:21/9;min-height:220px;max-height:320px;border-radius:var(--radius);border-color:var(--line);
  background-color:var(--sand);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px}
.map-facade::before{content:"";width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2E1D' stroke-width='1.6'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.map-facade__btn{border-radius:2px;border:1px solid var(--ink);color:var(--ink);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;background:#fff}
.map-facade__btn:hover{background:var(--ink);color:#fff}

/* ── Footer ── */
.footer{background:var(--ink);background-image:var(--grain);color:rgba(250,248,243,.72);padding:clamp(3.5rem,7vw,5rem) 0 1.75rem;border-top:3px solid var(--caoba)}
.footer__logo{gap:.85rem;align-items:center;color:#fff}
.footer__logo .logo__mark{width:56px;height:56px;border-radius:0}
.footer__logo .logo__name{color:#fff}
.footer__logo .logo__city{color:var(--gold-l)}
.footer__col h3{font-family:var(--font-main);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);margin-bottom:1.25rem}
.footer a{color:rgba(250,248,243,.72);transition:color .2s}
.footer a:hover{color:var(--gold-l)}
.footer__nap svg{color:var(--gold-l)}
.footer__bottom{border-top-color:rgba(212,180,124,.18)}

/* ── Barra móvil y breadcrumb ── */
.cta-btn{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.cta-btn--presupuesto{background:var(--caoba)}
.cta-btn--mail{background:var(--ink)}
.breadcrumb{font-size:.8rem;border-bottom:1px solid var(--line)}
.breadcrumb a:hover{color:var(--caoba)}

/* ── Banners de imagen sueltos (zonas, servicios): panorámicos, no de página entera ── */
.section[aria-label]>.container>picture>img,.section[aria-label]>.container>img,.banner-img{width:100%;height:auto;aspect-ratio:21/9!important;max-height:520px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
@media (max-width:767px){.section[aria-label]>.container>picture>img,.section[aria-label]>.container>img,.banner-img{aspect-ratio:4/3!important}}

/* ── Aparición suave al hacer scroll (solo lo que está bajo el pliegue; lo marca main.js) ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.service-card:hover img,.trabajo-card:hover img{transform:none}}

/* ── Móvil ── */
@media (max-width:767px){
  body{font-size:1rem}
  .section-content{margin-bottom:2.25rem}
  .hero__ctas .btn{flex:1 1 220px}
  .logo__name{font-size:1.08rem}
  .logo__mark{width:42px;height:42px}
  .cta-band::before{right:-90px;opacity:.05}
  .footer{padding-bottom:5.5rem}
}

/* §mmz seo-fix 2026-10-16 */
.tipos-grid{display:grid;gap:2rem 2.5rem;margin-top:2.5rem}
@media (min-width:700px){.tipos-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tipos-grid{grid-template-columns:repeat(3,1fr)}}
.tipo{border-top:1px solid var(--line);padding-top:1.25rem}
.tipo h3{font-family:var(--font-main);font-size:.9rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;line-height:1.45;margin-bottom:.6rem}
.tipo p{font-size:.95rem;color:var(--color-muted)}
.split+.split{margin-top:clamp(3.5rem,8vw,6rem)}
.prose--after-split{margin-top:clamp(3rem,7vw,5rem)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:1.25rem .25rem;cursor:pointer;list-style:none;font-family:var(--font-main);font-size:1rem;font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";width:11px;height:11px;flex-shrink:0;margin-right:.3rem;border:solid var(--gold);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--transition)}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item summary:hover{color:var(--caoba)}
.faq-item__a{padding:0 .25rem 1.2rem;color:var(--color-muted)}
.ia-note{margin-top:1.25rem;font-size:.85rem;color:var(--color-muted);text-align:center}
.ia-note a{color:inherit;text-decoration:underline}

/* §mmz v4 2026-10-18 */
/* Menú desktop: el <ul> está dentro de .nav-drawer__body (display:contents) */
@media (min-width:992px){
  .nav-main{margin-left:auto;margin-right:1.25rem}
  .nav-drawer__body>ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
  .nav-drawer__body>ul>li>a{position:relative;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.6rem .8rem;font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);background:none!important;white-space:nowrap}
  .nav-drawer__body>ul>li>a::before{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .nav-drawer__body>ul>li>a:hover::before,.nav-drawer__body>ul>li>a[aria-current="page"]::before,.has-dropdown:hover>a::before{transform:scaleX(1)}
  .nav-drawer__body>ul>li>a:hover,.nav-drawer__body>ul>li>a[aria-current="page"]{color:var(--caoba)}
  .has-dropdown>a::after{width:6px;height:6px;border-width:0 1.5px 1.5px 0;margin-left:.15rem}
  .submenu{top:100%;left:.3rem;min-width:270px;width:max-content;padding:.5rem;background:#fff;z-index:20}
  .submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .submenu a{display:block;padding:.6rem .85rem;font-size:.88rem;letter-spacing:0;text-transform:none;color:var(--color-text);min-height:0}
  .header__cta{flex-shrink:0}
}
@media (min-width:992px) and (max-width:1180px){
  .nav-drawer__body>ul>li>a{padding:.6rem .55rem;letter-spacing:.11em}
  .nav-drawer__body>ul>li>a::before{left:.55rem;right:.55rem}
  .nav-main{margin-right:.75rem}
}

/* Drawer móvil: la regla genérica `.nav-main a` pisaba el botón primario */
@media (max-width:991px){
  .nav-main .drawer-cta .btn--primary{justify-content:center;background:var(--caoba);color:#fff;font-weight:600}
  .nav-main .drawer-cta .btn--primary:hover{background:var(--caoba-d);color:#fff}
}

/* Ritmo vertical: dos secciones seguidas con el mismo fondo no duplican el padding */
.section:not(.section--alt)+.section:not(.section--alt),.section--alt+.section--alt{padding-top:0}

/* Clusters: 3 por fila y la última fila centrada (5 → 3+2) */
.grid-3-center{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.grid-3-center>*{flex:0 1 calc((100% - 3rem)/3);min-width:0;grid-column:auto!important}
#otros .grid-3-center{display:flex}
#otros .grid-3-center>*{grid-column:auto}
@media (max-width:900px){.grid-3-center>*{flex-basis:calc((100% - 1.5rem)/2)}}
@media (max-width:540px){.grid-3-center>*{flex-basis:100%}}

/* Bloques editoriales tras los splits: 3 tarjetas → 3 columnas a lo ancho, centradas */
.prose--feature .prose-grid>article{display:flex;flex-direction:column;gap:.55rem;padding:1.6rem 1.6rem 1.7rem}
.prose--feature .prose-grid h3{margin:0}
.prose--feature .prose-grid p{line-height:1.7}
@media (min-width:1000px){
  .prose--after-split:has(>.prose-grid>article:nth-child(3):last-child){max-width:none}
  .prose-grid:has(>article:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}

/* Negritas de lectura */
main p strong{font-weight:600;color:var(--ink)}
.hero p strong,.cta-band p strong{color:inherit}

/* Galerías de trabajos */
.trabajo-card{display:flex;flex-direction:column}
.trabajo-card picture{position:relative;display:block;overflow:hidden}
.trabajo-card picture::after{content:"";position:absolute;right:.8rem;top:.8rem;width:38px;height:38px;border-radius:50%;background:rgba(26,23,20,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4B47C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;pointer-events:none}
.trabajo-card:hover picture::after,.trabajo-card:focus-within picture::after{opacity:1;transform:none}
.trabajo-card img{cursor:zoom-in}
.trabajo-card__desc{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.15rem 1.15rem;flex:1}
.trabajo-card__title{font-size:.92rem;font-weight:600;line-height:1.45;color:var(--ink)}
.trabajo-card__loc{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-t)}
.trabajo-card__loc::before{content:"";width:16px;height:1px;background:currentColor}
.galeria-hint{margin-top:1.5rem;text-align:center;font-size:.85rem;color:var(--color-muted)}
/* /trabajos/: mosaico 4 columnas, fotos cuadradas, la 1.ª destacada 2×2, pie sobre la foto */
.grid-trabajos--bento{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:1rem}
.grid-trabajos--bento .trabajo-card{position:relative;border:0}
.grid-trabajos--bento .trabajo-card picture{height:100%}
.grid-trabajos--bento .trabajo-card img{aspect-ratio:1/1;height:100%;object-fit:cover}
.grid-trabajos--bento .trabajo-card--lg{grid-column:span 2;grid-row:span 2}
.grid-trabajos--bento .trabajo-card--lg img{aspect-ratio:auto}
.grid-trabajos--bento .trabajo-card__desc{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.1rem 1rem;background:linear-gradient(180deg,transparent,rgba(26,23,20,.88) 62%);pointer-events:none}
.grid-trabajos--bento .trabajo-card__title{color:#fff;font-size:.86rem}
.grid-trabajos--bento .trabajo-card--lg .trabajo-card__title{font-size:1.05rem}
.grid-trabajos--bento .trabajo-card__loc{color:var(--gold-l)}
@media (max-width:900px){.grid-trabajos--bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){
  .grid-trabajos--bento{grid-template-columns:1fr}
  .grid-trabajos--bento .trabajo-card--lg{grid-column:auto;grid-row:auto}
  .grid-trabajos--bento .trabajo-card img,.grid-trabajos--bento .trabajo-card--lg img{aspect-ratio:4/3}
}
/* Lightbox: navegación */
.lightbox__nav{position:fixed;top:50%;width:48px;height:48px;margin-top:-24px;border:0;border-radius:50%;background:rgba(250,248,243,.92);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
.lightbox__nav:hover{background:#fff;color:var(--caoba)}
.lightbox__nav--prev{left:max(1rem,calc(50vw - 600px))}
.lightbox__nav--next{right:max(1rem,calc(50vw - 600px))}
.lightbox__count{display:block;margin-top:.35rem;font-size:.72rem;letter-spacing:.18em;color:var(--gold-l)}
/* §mmz v4 fin */

/* §mmz v5 2026-10-18 */
/* Cabeceras: H1 siempre blanco + imagen destacada como fondo */
.hero h1{color:#fff}
.hero--post .section-label{color:var(--gold-l)}
.hero--cover{background:var(--ink)}
.hero--cover .hero__bg{position:absolute;inset:0;z-index:0}
.hero--cover .hero__bg picture,.hero--cover .hero__bg img{display:block;width:100%;height:100%}
.hero--cover .hero__bg img{object-fit:cover}
.hero--cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(26,23,20,.74),rgba(26,23,20,.6) 55%,rgba(26,23,20,.44)),linear-gradient(180deg,transparent 55%,rgba(26,23,20,.34))}
@media (max-width:759px){.hero--cover::before{background:rgba(26,23,20,.68)}}
.hero--cover::after{z-index:1}
.hero--cover .hero__inner{position:relative;z-index:2}
.hero--cover.hero--post{padding:clamp(2rem,5vw,4rem) 0}
.hero--cover.hero--post .hero__inner{padding:clamp(1.5rem,4vw,3rem) 0}
.hero--cover h1{text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero--cover .post-meta{color:rgba(250,248,243,.88)}

/* Galerías: descripción breve */
.trabajo-card__txt{margin:0;font-size:.86rem;line-height:1.6;color:var(--color-muted)}
.grid-trabajos--bento .trabajo-card__txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.76rem;line-height:1.5;color:rgba(250,248,243,.86)}
.grid-trabajos--bento .trabajo-card--lg .trabajo-card__txt{-webkit-line-clamp:3;font-size:.9rem}

/* Misión, visión y valores */
.mvv__head{max-width:680px;margin:0 auto 2.5rem;text-align:center}
.mvv__grid{display:grid;gap:1.25rem;max-width:1000px;margin:0 auto}
@media (min-width:760px){.mvv__grid{grid-template-columns:1fr 1fr}.mvv__card--values{grid-column:1/-1}}
.mvv__card{padding:2rem 2rem 2.2rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.mvv__card--dark{background:var(--ink);border-color:var(--ink)}
.mvv__card h3{margin:0 0 .6rem;font-size:1.3rem}
.mvv__card--dark h3{color:#fff}
.mvv__card p{margin:0;color:var(--color-muted)}
.mvv__card--dark p{color:rgba(250,248,243,.86)}
.mvv__icon,.seo-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:1.1rem;border-radius:50%;background:rgba(184,146,90,.16);color:var(--gold-t)}
.mvv__card--dark .mvv__icon{background:rgba(212,180,124,.18);color:var(--gold-l)}
.mvv__list{display:grid;gap:1.25rem;list-style:none;margin:1.25rem 0 0;padding:0}
@media (min-width:760px){.mvv__list{grid-template-columns:repeat(3,1fr);gap:2rem}}
.mvv__list li{padding-left:1rem;border-left:2px solid var(--gold);color:var(--color-muted)}
.mvv__list li>strong:first-child{display:block;margin-bottom:.2rem;color:var(--ink);font-size:1.02rem}

/* Home: bloque SEO */
.seo-block__head{max-width:820px;margin:0 auto 2.75rem;text-align:center}
.seo-block__lead{max-width:62ch;margin:1rem auto 0;font-size:1.2rem;line-height:1.65;color:var(--ink)}
.seo-cols{display:grid;gap:1.75rem 3.5rem;max-width:1000px;margin:0 auto 2.5rem}
@media (min-width:760px){.seo-cols{grid-template-columns:1fr 1fr}}
.seo-col h3{margin:0 0 .75rem;font-size:1.2rem}
.seo-col p{margin:0 0 .9rem;color:var(--color-muted)}
.seo-col p:last-child{margin-bottom:0}
.seo-steps{display:grid;gap:1rem;list-style:none;margin:0 auto 1.25rem;padding:0;max-width:1100px}
@media (min-width:620px){.seo-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.seo-steps{grid-template-columns:repeat(4,1fr)}}
.seo-step{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem 1.35rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.seo-step .seo-icon{width:44px;height:44px;margin-bottom:.35rem}
.seo-step strong{font-size:1.02rem;line-height:1.35;color:var(--ink)}
.seo-step span{font-size:.92rem;line-height:1.6;color:var(--color-muted)}
.seo-note{max-width:1100px;margin:0 auto 3rem;padding:1rem 1.35rem;border-left:3px solid var(--gold);background:rgba(184,146,90,.1);color:var(--ink)}
.seo-cards{display:grid;gap:1.25rem;max-width:1000px;margin:0 auto 3rem}
@media (min-width:760px){.seo-cards{grid-template-columns:1fr 1fr}}
.seo-card{display:flex;flex-direction:column;gap:.5rem;padding:1.75rem 1.75rem 1.85rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold)}
.seo-card h3{margin:0;font-size:1.2rem}
.seo-card p{margin:0;color:var(--color-muted)}
/* §mmz v5 fin */