/* ============================================================
   Albañil en Santander — style.css  ·  REDISEÑO "Oficio Clásico"
   Paleta: tinta carbón cálida (#2A2622) + latón envejecido (#B7892F)
           + ladrillo (#9C4A2E) sobre marfil/piedra
   Tipografía: Fraunces (serif clásica) + Source Sans 3
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --color-primary:       #2A2622;  /* tinta carbón cálida */
  --color-primary-dark:  #1E1B17;
  --color-secondary:     #B7892F;  /* latón envejecido */
  --color-secondary-dark:#9A7126;
  --color-accent:        #9C4A2E;  /* ladrillo */
  --color-accent-soft:   #EFE2D8;
  --color-text:          #2E2823;
  --color-muted:         #6B6155;
  --color-bg:            #FAF7F1;  /* marfil cálido (papel) */
  --color-bg-alt:        #F2EBDD;  /* piedra cálida */
  --color-border:        #E2D9C8;
  --color-white:         #FFFFFF;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-main: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1180px;
  --radius:    4px;
  --radius-lg: 6px;
  --shadow:    0 2px 14px rgba(42,38,34,.08);
  --shadow-lg: 0 16px 40px rgba(42,38,34,.16);
  --transition: .25s ease;
  --header-h: 62px;
}

/* ---------- 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.7;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}
img, video, svg, picture { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; font-weight: 600; color: var(--color-primary); letter-spacing: -.005em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
p  { color: var(--color-text); }

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

::selection { background: var(--color-secondary); color: var(--color-primary-dark); }

/* ---------- Layout utils ---------- */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--alt { background: var(--color-bg-alt); }
.section--navy { background: var(--color-primary); color: #fff; position: relative; }
.section--navy::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--color-secondary), transparent); }
.section--navy h2, .section--navy h3 { color: #fff; }
.text-center { text-align: center; }
.mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.25rem; }

.section-content { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.section-content p { color: var(--color-muted); font-size: 1.08rem; margin-bottom: 1.05rem; }
.section-content p:last-child { margin-bottom: 0; }
.section-content h2 { position: relative; padding-bottom: 1.1rem; }
.section-content h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 2px; background: var(--color-secondary);
}
.section-label {
  display: inline-flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .9rem;
  font-family: var(--font-main);
}
.section-label::before { content: ""; width: 26px; height: 1px; background: var(--color-accent); }
.section-content .section-label { justify-content: center; }
.section--navy .section-content p { color: rgba(255,255,255,.78); }
.section--navy .section-label { color: var(--color-secondary); }
.section--navy .section-label::before { background: var(--color-secondary); }
.section--navy .section-content h2::after { background: var(--color-secondary); }

/* ---------- Skip link ---------- */
.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 4px 4px;
}
.skip-link:focus { top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.7rem; border-radius: var(--radius); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; min-height: 50px; text-align: center;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
  font-family: var(--font-main);
}
.btn--primary { background: var(--color-secondary); color: var(--color-primary-dark); box-shadow: 0 4px 16px rgba(183,137,47,.3); }
.btn--primary:hover { background: var(--color-secondary-dark); color: #fff; transform: translateY(-2px); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: #843D26; transform: translateY(-2px); }
.btn--outline { background: transparent; border: 1.5px solid currentColor; color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--full { width: 100%; }
.btn--sm { padding: .6rem 1.1rem; min-height: 42px; font-size: .78rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: .95rem; }

/* ============================================================
   HEADER
   ============================================================ */
.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: .3rem 0; border-bottom: 2px solid var(--color-secondary); }
.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.25rem; }
.topbar__link, .topbar__info { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.82); }
.topbar__link:hover { color: #fff; }
.topbar__social { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: rgba(255,255,255,.78); transition: color var(--transition); }
.topbar__social:hover { color: var(--color-secondary); }
.topbar__cta { display: inline-flex; align-items: center; gap: .4rem; background: var(--color-secondary); color: var(--color-primary-dark); padding: .3rem .95rem; border-radius: 2px; font-weight: 700; font-size: .8rem; }
.topbar__cta:hover { background: var(--color-secondary-dark); color: #fff; }

.header__main { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.header__logo { display: inline-flex; align-items: center; }
.logo-svg { height: 38px; width: auto; }

.nav-main ul { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav-main a, .nav-main > ul > li > .nav-link {
  display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .9rem; border-radius: 3px;
  font-weight: 600; font-size: .95rem; color: var(--color-primary); transition: color var(--transition), background var(--transition);
  position: relative;
}
.nav-main > ul > li > a::after, .nav-main > ul > li > .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.nav-main > ul > li > a:hover::after, .nav-main > ul > li > .nav-link:hover::after,
.nav-main > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-main a:hover, .nav-main .nav-link:hover { color: var(--color-accent); }
.nav-main a[aria-current="page"] { color: var(--color-accent); }

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > .nav-link { cursor: pointer; }
.has-dropdown > .nav-link svg { transition: transform var(--transition); }
.submenu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 256px; background: #fff;
  border: 1px solid var(--color-border); border-top: 3px solid var(--color-secondary); border-radius: 0 0 6px 6px; box-shadow: var(--shadow-lg);
  padding: .55rem; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition); z-index: 50;
}
.has-dropdown:hover .submenu, .has-dropdown:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.has-dropdown:hover > .nav-link svg { transform: rotate(180deg); }
.submenu a { font-weight: 500; font-size: .92rem; padding: .6rem .85rem; border-radius: 3px; }
.submenu a:hover { background: var(--color-bg-alt); }
.submenu__label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); padding: .5rem .85rem .25rem; }

.header__cta { flex-shrink: 0; }
.header__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.header__cta-urgent { white-space: nowrap; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--color-primary); border-radius: 4px; }

@media (max-width: 980px) {
  .header__cta { display: none; }
  .header__actions { gap: .4rem; }
  .header__cta-urgent { padding: .5rem .75rem; font-size: .72rem; }
  .nav-toggle { display: inline-flex; }
  .nav-main {
    position: fixed; inset: 0 0 0 auto; width: min(86%, 360px); background: var(--color-bg);
    transform: translateX(100%); transition: transform .28s ease; box-shadow: -8px 0 30px rgba(0,0,0,.18);
    padding: calc(var(--header-h) + 1rem) 1.25rem 2rem; overflow-y: auto; z-index: 1001;
  }
  .nav-main.is-open { transform: translateX(0); }
  .nav-main ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-main a, .nav-main .nav-link { width: 100%; justify-content: space-between; padding: .85rem 1rem; }
  .nav-main > ul > li > a::after, .nav-main > ul > li > .nav-link::after { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-top: none;
    background: var(--color-bg-alt); border-radius: 4px; max-height: 0; overflow: hidden; padding: 0 .5rem;
    transition: max-height .3s ease, padding .3s ease;
  }
  .submenu-open .submenu { max-height: 600px; padding: .4rem .5rem; }
  body.menu-open { overflow: hidden; }
}

/* ============================================================
   HERO — patrón de aparejo de ladrillo (SVG) + tinta cálida
   ============================================================ */
.hero {
  position: relative; color: #fff; padding: clamp(1.8rem, 4vw, 3.2rem) 0; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(30,27,23,.92) 0%, rgba(42,38,34,.86) 55%, rgba(60,40,30,.9) 100%),
    url("/img/hero-albanil-santander.webp") center/cover no-repeat,
    var(--color-primary-dark);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Cg fill='none' stroke='%23B7892F' stroke-width='1' stroke-opacity='0.22'%3E%3Cpath d='M0 0h90M0 30h90M0 60h90M30 0v30M60 0v30M15 30v30M45 30v30M75 30v30'/%3E%3C/g%3E%3C/svg%3E");
}
.hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1;
  background: linear-gradient(180deg, var(--color-secondary), var(--color-accent));
}
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero__text h1 { color: #fff; margin-bottom: 1.1rem; }
.hero__text h1 em { color: var(--color-secondary); font-style: italic; }
.hero__lead { color: rgba(255,255,255,.86); font-size: 1.12rem; margin-bottom: 1.5rem; max-width: 48ch; }
.hero__bullets { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.hero__bullets li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(255,255,255,.93); font-weight: 500; }
.hero__bullets svg { flex-shrink: 0; color: var(--color-secondary); margin-top: 3px; }
.hero__trust { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 2px; padding: .45rem 1rem; font-size: .85rem; }
.hero__trust strong { color: var(--color-secondary); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

.hero__form-box { background: #fff; border-radius: var(--radius-lg); padding: 1.7rem; box-shadow: var(--shadow-lg); color: var(--color-text); border-top: 4px solid var(--color-secondary); }
.form-box__title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--color-primary); margin-bottom: .3rem; }
.form-box__subtitle { font-size: .9rem; color: var(--color-muted); margin-bottom: 1.2rem; }

/* ---------- Forms ---------- */
.form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.form-group label { font-size: .85rem; font-weight: 600; color: var(--color-primary); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: .8rem .9rem; font-size: 16px; border: 1.5px solid var(--color-border);
  border-radius: 6px; background: #fff; color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:hover, .form-group textarea:hover, .form-group select:hover { border-color: var(--color-muted); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(156,74,46,.15); }
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: #C0392B; }
.field-error { font-size: .78rem; color: #C0392B; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

.form-group--checkbox {
  flex-direction: row; align-items: flex-start; gap: .7rem; margin-top: .2rem; margin-bottom: 1.1rem;
  padding: .75rem .9rem; background: var(--color-bg-alt); border-radius: 6px; border: 1px solid var(--color-border);
}
.checkbox-label { display: flex; align-items: flex-start; gap: .7rem; font-size: .82rem; line-height: 1.45; color: var(--color-text); font-weight: 400; cursor: pointer; width: 100%; }
.checkbox-label input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-accent); cursor: pointer; }
.checkbox-label a { color: var(--color-accent); text-decoration: underline; font-weight: 600; }
.checkbox-label[aria-invalid="true"], .form-group--checkbox:has(input[aria-invalid="true"]) { border-color: #C0392B; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__form-box { order: 2; }
}
@media (max-width: 420px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Form status (envío AJAX vía js/forms.js) ---------- */
.form-status { margin: 14px 0 0; padding: 12px 14px; border-radius: 4px; border-left: 3px solid transparent; font-size: .92rem; line-height: 1.5; display: none; }
.form-status.is-pending, .form-status.is-success, .form-status.is-error { display: block; }
.form-status.is-pending { background: #F1F4F8; border-left-color: var(--color-muted); color: var(--color-muted); }
.form-status.is-success { background: #ECFAF1; border-left-color: #1E9E5A; color: #145F38; font-weight: 600; }
.form-status.is-error { background: #FDEDED; border-left-color: #C0392B; color: #8C231A; }
button[type="submit"]:disabled { opacity: .65; cursor: progress; }

/* ============================================================
   GRIDS genéricos
   ============================================================ */
.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-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@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-column: auto; } }
@media (max-width: 560px) { .grid-3, .grid-3-center, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Service cards ---------- */
.service-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.8rem;
  display: flex; flex-direction: column; gap: .65rem; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--color-secondary); transform: scaleY(0); transform-origin: top; transition: transform var(--transition); }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-secondary); }
.service-card:hover::before { transform: scaleY(1); }
.service-card__icon {
  width: 54px; height: 54px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-accent); margin-bottom: .3rem;
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.18rem; }
.service-card h3 a { color: var(--color-primary); }
.service-card:hover h3 a { color: var(--color-accent); }
.service-card p { font-size: .95rem; color: var(--color-muted); flex: 1; }
.service-card__link { color: var(--color-accent); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; }
.service-card__link:hover { gap: .6rem; }

/* ---------- Feature / diferenciadores ---------- */
.feature { text-align: center; padding: 1.8rem 1.4rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--color-border); }
.feature__icon { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-secondary); }
.feature__icon svg { width: 28px; height: 28px; }
.feature h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.feature p { font-size: .92rem; color: var(--color-muted); }

/* ---------- Proceso (pasos) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.step { position: relative; padding-top: .5rem; }
.step__num { width: 52px; height: 52px; border-radius: 50%; background: transparent; border: 2px solid var(--color-secondary); color: var(--color-secondary); font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.step h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.step p { font-size: .92rem; color: var(--color-muted); }
.section--navy .step p { color: rgba(255,255,255,.75); }
.section--navy .step h3 { color: #fff; }
.section:not(.section--navy) .step__num { border-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Trabajos ---------- */
.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; position: relative; border: 1px solid var(--color-border); }
.trabajo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.trabajo-card__desc { padding: .85rem 1rem; font-size: .9rem; color: var(--color-text); }
@media (max-width: 900px) { .grid-trabajos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid-trabajos { grid-template-columns: 1fr; } }

/* ---------- Img placeholders ---------- */
.img-placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); color: var(--color-muted); font-size: .85rem; border: 1px dashed var(--color-border); text-align: center; padding: .5rem; }
.img-placeholder--banner { width: 100%; height: 340px; border-radius: var(--radius); }
.img-placeholder--card { width: 100%; aspect-ratio: 4/3; }

/* ---------- Testimonios ---------- */
.section--testimonios { text-align: center; }
.google-badge { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; padding: .5rem 1.1rem; font-size: .82rem; color: #374151; margin-top: .9rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.google-badge__stars { display: flex; align-items: center; gap: .2rem; border-left: 1px solid var(--color-border); padding-left: .55rem; }
.google-badge__stars strong { font-size: .85rem; color: var(--color-text); }
.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.9rem 1.7rem; display: flex; flex-direction: column; gap: .85rem; box-shadow: var(--shadow); position: relative; }
.testimonio-card::before { content: "\201C"; position: absolute; top: .35rem; right: 1.2rem; font-family: var(--font-head); font-size: 4rem; line-height: 1; color: var(--color-accent-soft); }
.testimonio-card__stars { display: flex; gap: .15rem; position: relative; }
.testimonio-card__text p { font-size: 1rem; line-height: 1.7; color: #4a4038; font-style: italic; font-family: var(--font-head); font-weight: 400; }
.testimonio-card__author { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--color-border); }
.testimonio-card__author strong { font-size: .92rem; color: var(--color-text); }
.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: 560px) { .grid-testimonios { grid-template-columns: 1fr; } }

/* ---------- Zonas ---------- */
.zonas-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.zona-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--color-border); border-radius: 3px; padding: .65rem 1.2rem; font-weight: 600; font-size: .92rem; color: var(--color-primary); transition: all var(--transition); }
.zona-chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.zona-chip svg { color: var(--color-accent); }
.zona-chip:hover svg { color: var(--color-secondary); }

/* ---------- Blog cards ---------- */
.blog-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); }
.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 .4s ease; }
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.05); }
.blog-card__body { padding: 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.blog-card__cat { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.blog-card__body h3 { font-size: 1.12rem; line-height: 1.3; }
.blog-card__body h3 a { color: var(--color-primary); }
.blog-card__body h3 a:hover { color: var(--color-accent); }
.blog-card__body > p { font-size: .9rem; color: var(--color-muted); flex: 1; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 840px; margin-inline: auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--color-primary); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.6rem; color: var(--color-accent); font-weight: 300; line-height: 1; transition: transform var(--transition); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--color-accent); }
.faq-item__answer { padding: 0 1.4rem 1.3rem; color: var(--color-muted); font-size: .96rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-primary); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Cg fill='none' stroke='%23B7892F' stroke-width='1' stroke-opacity='0.18'%3E%3Cpath d='M0 0h90M0 30h90M0 60h90M30 0v30M60 0v30M15 30v30M45 30v30M75 30v30'/%3E%3C/g%3E%3C/svg%3E"); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: .8rem; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0 auto 1.7rem; }
.cta-band .btn--primary { box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ---------- CTA Banner con imagen (dinámico) ---------- */
.cta-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); }
.cta-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(30,27,23,.94) 0%, rgba(42,38,34,.82) 45%, rgba(42,38,34,.35) 100%); }
.cta-hero__inner { display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: 2rem; padding: 2.6rem 2.8rem; }
.cta-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: .7rem; }
.cta-hero__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-secondary); }
.cta-hero h2 { color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.15rem); margin-bottom: .6rem; line-height: 1.12; }
.cta-hero h2 span { color: var(--color-secondary); }
.cta-hero p { color: rgba(255,255,255,.86); max-width: 52ch; margin-bottom: 1.5rem; }
.cta-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cta-hero__badges { display: flex; flex-direction: column; gap: .9rem; }
.cta-hero__badge { display: flex; align-items: center; gap: .7rem; color: #fff; font-weight: 600; font-size: .96rem; white-space: nowrap; }
.cta-hero__badge svg { flex-shrink: 0; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(183,137,47,.18); color: var(--color-secondary); }
.cta-hero .btn--outline { color: #fff; border-color: rgba(255,255,255,.55); }
.cta-hero .btn--outline:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.cta-hero .btn--primary { position: relative; overflow: hidden; }
.cta-hero .btn--primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: cta-shine 3.6s ease-in-out infinite; }
@keyframes cta-shine { 0%, 60% { left: -120%; } 100% { left: 160%; } }
@media (prefers-reduced-motion: reduce) { .cta-hero .btn--primary::after { animation: none; } }
@media (max-width: 780px) { .cta-hero__inner { grid-template-columns: 1fr; gap: 1.4rem; padding: 2rem 1.5rem; } .cta-hero__badges { flex-direction: row; flex-wrap: wrap; gap: .6rem 1.4rem; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumb { padding: .95rem 0; font-size: .82rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; color: var(--color-muted); }
.breadcrumb li { display: flex; align-items: center; gap: .4rem; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--color-border); }
.breadcrumb a { color: var(--color-accent); }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Prose (artículos / contenido largo) ---------- */
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { margin: 2.2rem 0 .8rem; }
.prose h3 { margin: 1.5rem 0 .5rem; color: var(--color-accent); }
.prose p { margin-bottom: 1rem; color: #3d362e; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.3rem; color: #3d362e; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--color-accent); text-decoration: underline; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose blockquote { border-left: 3px solid var(--color-secondary); background: var(--color-bg-alt); padding: 1.1rem 1.4rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; font-style: italic; font-family: var(--font-head); color: var(--color-primary); }

/* ---------- Service intro (2-col: texto + qué incluye) ---------- */
.service-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.service-intro__text h2 { margin-bottom: .75rem; }
.service-intro__text p { color: #3d362e; font-size: 1.04rem; line-height: 1.75; }
.service-intro__includes { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; border-top: 3px solid var(--color-secondary); }
.service-intro__includes-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .9rem; }
.includes-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .75rem; }
.includes-grid li { font-size: .88rem; padding-left: 1rem; position: relative; color: var(--color-text); }
.includes-grid li::before { content: ''; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; background: var(--color-secondary); border-radius: 50%; }
@media (max-width: 780px) { .service-intro { grid-template-columns: 1fr; } .includes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .includes-grid { grid-template-columns: 1fr; } }

/* ---------- Tabla precios ---------- */
.price-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.price-table th, .price-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.price-table th { background: var(--color-primary); color: #fff; font-weight: 600; font-family: var(--font-head); }
.price-table tr:last-child td { border-bottom: none; }
.price-table td:last-child { font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.price-note { font-size: .82rem; color: var(--color-muted); margin-top: .7rem; font-style: italic; }

/* ---------- Artículo de blog ---------- */
.article { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.article__header { max-width: 760px; margin-inline: auto; }
.hero--post { padding: clamp(1.5rem, 3.2vw, 2.4rem) 0; }
.hero--post .article__header { margin-inline: 0; max-width: 820px; }
.hero--post h1 { color: #fff; margin-bottom: .4rem; }
.hero--post .article__cat { color: var(--color-secondary); margin-bottom: .5rem; }
.hero--post .article__meta { color: rgba(255,255,255,.82); margin: .9rem 0 0; }
.hero--post .article__meta .sep { opacity: .55; }
.article__cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .6rem; }
.article__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--color-muted); margin: 1rem 0 1.5rem; align-items: center; }
.article__meta time { font-weight: 600; }
.article__meta .sep { opacity: .4; }
.article__hero { max-width: 980px; margin: 0 auto 2rem; }
.article__hero .img-placeholder { width: 100%; aspect-ratio: 16/7; border-radius: var(--radius-lg); }
.post-updated { font-size: .85rem; color: var(--color-muted); }

/* Índice de contenidos */
.toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 0 0 2rem; max-width: 760px; margin-inline: auto; border-left: 3px solid var(--color-secondary); }
.toc__title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-primary); margin-bottom: .7rem; }
.toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: .45rem; }
.toc li { counter-increment: toc; }
.toc li::before { content: counter(toc) ". "; color: var(--color-accent); font-weight: 700; font-family: var(--font-head); }
.toc a { color: var(--color-primary); font-size: .92rem; text-decoration: none; }
.toc a:hover { color: var(--color-accent); text-decoration: underline; }

/* CTA contextual dentro del artículo */
.cta-inline { background: var(--color-primary); color: #fff; border-radius: var(--radius); padding: 1.6rem 1.7rem; margin: 2rem auto; max-width: 760px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-left: 4px solid var(--color-secondary); }
.cta-inline p { color: rgba(255,255,255,.9); margin: 0; font-size: .95rem; max-width: 46ch; }
.cta-inline strong { color: #fff; }
.cta-inline .btn { flex-shrink: 0; }

/* Caja de autor E-E-A-T */
.author-box { display: flex; gap: 1.2rem; align-items: flex-start; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; margin: 2.5rem auto 0; max-width: 760px; }
.author-box__avatar { width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: 1.4rem; }
.author-box__name { font-family: var(--font-head); font-weight: 600; color: var(--color-primary); }
.author-box__role { font-size: .82rem; color: var(--color-accent); font-weight: 600; margin-bottom: .35rem; }
.author-box__bio { font-size: .9rem; color: var(--color-muted); margin: 0; }
.author-box__credentials { font-size: .82rem; color: var(--color-muted); margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.author-box__credentials span { display: inline-flex; align-items: center; gap: .35rem; }
.author-box__credentials svg { color: var(--color-secondary-dark); flex-shrink: 0; }

/* ── Blog hub: destacado, filtros, tags, byline ── */
.featured-post { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 3rem; }
.featured-post__media { position: relative; min-height: 260px; }
.featured-post__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-post__flag { position: absolute; top: 1rem; left: 1rem; background: var(--color-secondary); color: var(--color-primary-dark); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 4px; }
.featured-post__body { padding: clamp(1.5rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: .8rem; }
.featured-post__body h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.2; }
.featured-post__body h3 a { color: var(--color-primary); }
.featured-post__body h3 a:hover { color: var(--color-accent); }
.featured-post__excerpt { color: var(--color-muted); font-size: 1rem; }
@media (max-width: 780px) { .featured-post { grid-template-columns: 1fr; } .featured-post__media { min-height: 200px; } }

.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-bottom: 2rem; }
.blog-filter { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: .55rem 1.15rem; font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--color-primary); cursor: pointer; transition: all var(--transition); }
.blog-filter:hover { border-color: var(--color-primary); }
.blog-filter[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.blog-filter__count { font-size: .78rem; opacity: .7; }

.blog-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.blog-tag { font-size: .72rem; font-weight: 600; color: var(--color-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; padding: .18rem .55rem; }
a.blog-tag:hover { color: var(--color-primary); border-color: var(--color-primary); }
.blog-card__byline { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--color-muted); margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--color-border); }
.blog-card__avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: .68rem; }
.blog-card[hidden] { display: none; }

.tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.tag-cloud .blog-filter { font-size: .88rem; }
.blog-empty { text-align: center; color: var(--color-muted); padding: 2rem 0; grid-column: 1 / -1; }

/* Cifras / stats */
.stat { text-align: center; padding: 1.7rem 1rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); }
.stat__num { display: block; font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; color: var(--color-accent); line-height: 1.1; }
.stat__label { font-size: .85rem; color: var(--color-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--color-primary); color: rgba(255,255,255,.8); padding-top: 3.5rem; border-top: 3px solid var(--color-secondary); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer__brand .logo-svg { height: 42px; margin-bottom: 1rem; }
.footer__desc { font-size: .9rem; color: rgba(255,255,255,.62); line-height: 1.65; margin-bottom: 1.1rem; max-width: 34ch; }
.footer__nap { font-style: normal; font-size: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.footer__nap a { color: var(--color-secondary); }
.footer p { color: inherit; }
.footer__heading { color: #fff; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; }
.footer__nav ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer__nav a { font-size: .9rem; color: rgba(255,255,255,.72); transition: color var(--transition); }
.footer__nav a:hover { color: var(--color-secondary); }
.footer__map { margin-bottom: 2.5rem; }
.map-placeholder { width: 100%; min-height: 300px; border-radius: var(--radius); background: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); }
.map-placeholder iframe { border-radius: var(--radius); }
.map-embed { width: 100%; border-radius: var(--radius); overflow: hidden; line-height: 0; box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08)); }
.map-embed iframe { display: block; width: 100%; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.3rem 0; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .82rem; color: rgba(255,255,255,.6); }
.footer__bottom-inner a { color: rgba(255,255,255,.7); }
.footer__bottom-inner nav { display: flex; gap: 1.2rem; }
.footer__bottom-inner nav a:hover { color: var(--color-secondary); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE CTA BAR
   ============================================================ */
.topbar__phone { font-weight: 700; color: #fff; }

/* ============================================================
   FAB STACK — WhatsApp / Llamar / Menú (inferior derecha)
   ============================================================ */
.fab-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1100; display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; }
.fab-btn { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 0; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer; transition: transform .15s ease; }
.fab-btn:hover, .fab-btn:focus-visible { transform: scale(1.08); }
.fab-btn:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
.fab-btn--whatsapp { background: #25D366; }
.fab-btn--call { background: var(--color-accent); }
.fab-btn--top { background: var(--color-primary); }
.fab-btn[hidden] { display: none; }
@media (max-width: 980px) { .fab-stack { bottom: 1rem; } }

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

/* ---------- Cluster perks list (subtipos de servicio) ---------- */
.service-card__perks { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--color-border); }
.service-card__perks li { font-size: .84rem; color: var(--color-text); display: flex; align-items: center; gap: .5rem; line-height: 1.35; }
.service-card__perks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }

/* ---------- Split texto-imagen (secciones de contenido) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.split__body h2 { margin-bottom: .9rem; }
.split__body > p { color: var(--color-muted); margin-bottom: 1rem; }
.split__list { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin: 0 0 1.5rem; }
.split__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .97rem; line-height: 1.45; }
.split__list li svg { flex-shrink: 0; margin-top: 3px; color: var(--color-accent); }
.split__list li strong { color: var(--color-primary); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 2; } }


/* ─── Location pages: ficha de zona, patologías, trámites y zonas cercanas ─── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero__trust-row{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin-top:1.4rem;padding:0}
.hero__trust-row li{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:.35rem .85rem}
.hero__trust-row li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-secondary)}

.section--ficha{padding-block:clamp(2.2rem,5vw,3.5rem)}
.zona-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--color-border);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;margin:0}
.zona-ficha__item{background:#fff;padding:1.05rem 1.25rem}
.zona-ficha dt{display:flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);margin-bottom:.35rem}
.zona-ficha dt svg{color:var(--color-accent);flex:0 0 auto}
.zona-ficha dd{margin:0;font-family:'Fraunces',Georgia,serif;font-size:1.02rem;font-weight:600;
  line-height:1.3;color:var(--color-primary)}
.zona-ficha__note{margin:1.5rem 0 .7rem;font-size:.9rem;font-weight:600;color:var(--color-muted)}
.zona-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.zona-chips .zona-chip{background:var(--color-bg-alt);border:1px solid var(--color-border);
  border-radius:100px;padding:.35rem .9rem;font-size:.85rem;font-weight:600;color:var(--color-text)}

.zona-figure{margin:2rem 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border)}
.zona-figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.zona-figure figcaption{background:var(--color-bg-alt);padding:.7rem 1.1rem;font-size:.86rem;
  color:var(--color-muted);border-top:1px solid var(--color-border)}

.patologia-card{background:#fff;border:1px solid var(--color-border);border-left:4px solid var(--color-accent);
  border-radius:var(--radius);padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.patologia-card h3{font-size:1.12rem;margin:0 0 .2rem}
.patologia-card__row{margin:0;font-size:.94rem;line-height:1.55;color:var(--color-text)}
.patologia-card__tag{display:block;font-size:.7rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--color-muted);margin-bottom:.15rem}
.patologia-card__row--sol{padding-top:.7rem;border-top:1px dashed var(--color-border)}
.patologia-card__row--sol .patologia-card__tag{color:var(--color-accent)}

.tramites-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.tramites-wrap .prose{max-width:none}
.check-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.65rem}
.check-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.96rem;font-weight:600}
.check-list li svg{color:var(--color-accent);flex:0 0 auto;margin-top:.2rem}
.callout{background:var(--color-primary);color:#fff;border-radius:var(--radius-lg);padding:1.6rem 1.7rem;
  border-top:5px solid var(--color-secondary)}
.callout h3{color:#fff;font-size:1.1rem;margin-bottom:.6rem}
.callout p{margin:0;font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.86)}

.zona-near-card{display:flex;flex-direction:column;gap:.35rem;background:#fff;
  border:1px solid var(--color-border);border-radius:var(--radius);padding:1.15rem 1.3rem;
  transition:border-color .18s ease,transform .18s ease;min-height:96px;justify-content:center}
.zona-near-card:hover,.zona-near-card:focus-visible{border-color:var(--color-secondary);transform:translateY(-2px)}
.zona-near-card__name{font-family:'Fraunces',Georgia,serif;font-size:1.08rem;font-weight:600;
  color:var(--color-primary)}
.zona-near-card__name::after{content:" →";color:var(--color-accent)}
.zona-near-card__desc{font-size:.9rem;color:var(--color-muted);line-height:1.5}
.zona-near-card__meta{font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--color-accent);
  text-transform:uppercase}
.zona-near-card--lg{min-height:130px}
.section--alt .zona-near-card{background:#fff}

@media(max-width:860px){
  .tramites-wrap{grid-template-columns:1fr}
  .zona-ficha{border-radius:var(--radius)}
}

.tarea-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.45rem}
.tarea-card h3{font-size:1.04rem;line-height:1.3;margin:0}
.tarea-card h3::before{content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--color-secondary);margin-bottom:.6rem}
.tarea-card p{margin:0;font-size:.93rem;line-height:1.6;color:var(--color-muted)}
.section--alt .tarea-card{background:#fff}

/* ─── CTA de WhatsApp ─── */
.btn--whatsapp{background:#25D366;color:#08331c;border:0}
.btn--whatsapp:hover,.btn--whatsapp:focus-visible{background:#1fbb59;color:#08331c}
.btn--whatsapp svg{flex:0 0 auto}

/* ─── Galería de trabajos: título + descripción ─── */
.trabajo-card__body{padding:.9rem 1.05rem 1.05rem}
.trabajo-card__title{font-size:1rem;line-height:1.3;margin:0 0 .35rem;color:var(--color-primary)}
.trabajo-card .trabajo-card__desc{padding:0;font-size:.88rem;line-height:1.55;color:var(--color-muted)}

/* ── RGPD / LSSI-CE · consentimiento, avisos y legales (2026-09-29) ── */
.form-consent{display:flex;align-items:flex-start;gap:.7rem;margin:.2rem 0 .5rem;padding:.75rem .9rem;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:6px}
.form-consent input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--color-accent);cursor:pointer}
.form-consent label{font-size:.82rem;line-height:1.45;font-weight:400;color:var(--color-text);cursor:pointer}
.form-consent a{color:var(--color-accent);text-decoration:underline;font-weight:600}
.form-consent:has(input[aria-invalid="true"]){border-color:#C0392B}
.form-legal-info{font-size:.75rem;line-height:1.45;color:var(--color-muted);margin:0 0 1rem;overflow-wrap:anywhere}
.form-legal-info a{color:inherit;text-decoration:underline}
.wa-legal{font-size:13px;line-height:1.45;margin:.5rem 0 0;color:var(--color-muted)}
.wa-legal a{color:inherit;text-decoration:underline}
.wa-legal--light{color:rgba(255,255,255,.85)}
.wa-legal--light a{color:#fff}
.cta-inline .wa-legal{flex:1 1 100%;max-width:none;margin:0;font-size:13px;color:rgba(255,255,255,.85)}
.cta-band .wa-legal{margin:.8rem auto 0;font-size:13px}
.hero__text .wa-legal{max-width:46ch}
ul.legal-titular{list-style:none;margin:1rem 0 1.3rem;padding:1rem 1.2rem;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius)}
ul.legal-titular li{margin:.25rem 0;overflow-wrap:anywhere}
.legal-table-wrap{overflow-x:auto;margin:.8rem 0 1.3rem;-webkit-overflow-scrolling:touch}
.legal-table{width:100%;min-width:480px;border-collapse:collapse;font-size:.92rem}
.legal-table th,.legal-table td{padding:.55rem .6rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)}
.legal-table th{border-bottom-width:2px;font-weight:700;color:var(--color-primary)}
.legal-ck-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.1rem;margin:.2rem 0;border:2px solid var(--color-primary);border-radius:var(--radius);background:var(--color-primary);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.legal-ck-btn:focus-visible{outline:3px solid var(--color-secondary);outline-offset:2px}
.legal-ck-btn[hidden]{display:none}
.map-link{margin:.6rem 0 0;font-size:.9rem;line-height:1.4}
.map-link a{color:var(--color-accent);text-decoration:underline}

/* ─── Nota al pie de testimonios (art. 20 LGDCU) ─── */
.testimonios-nota{max-width:70ch;margin:1.6rem auto 0;text-align:center;font-size:.8rem;line-height:1.5;color:var(--color-muted)}

/* ─── Home: otros servicios de albañilería (lista numerada texto + imagen) ─── */
.otros-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;counter-reset:none}
.otro-item{display:grid;grid-template-columns:auto 1fr 150px;gap:1.1rem;align-items:center;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.1rem 1.1rem 1.1rem 1.3rem;transition:border-color var(--transition),box-shadow var(--transition)}
.otro-item:hover{border-color:var(--color-secondary);box-shadow:var(--shadow)}
.otro-item__num{font-family:var(--font-head);font-size:2.1rem;font-weight:600;line-height:1;color:var(--color-secondary);min-width:2.4ch}
.otro-item__body h3{font-size:1.08rem;margin-bottom:.35rem}
.otro-item__body p{font-size:.93rem;line-height:1.55;color:var(--color-muted)}
.otro-item__body strong{color:var(--color-primary)}
.otro-item__img{width:150px;height:112px;object-fit:cover;border-radius:var(--radius)}
@media(max-width:960px){.otros-list{grid-template-columns:1fr}}
@media(max-width:560px){.otro-item{grid-template-columns:auto 1fr;padding:1rem}.otro-item__img{grid-column:1/-1;grid-row:1;width:100%;height:auto;aspect-ratio:4/3}}

/* ─── Home: caja de presupuesto (albañil económico) ─── */
.ahorro-box{background:#fff;border:1px solid var(--color-border);border-top:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:1.8rem 1.7rem;box-shadow:var(--shadow-lg)}
.ahorro-box h3{font-size:1.3rem;margin-bottom:1.1rem}
.ahorro-box__list{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.ahorro-box__list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.98rem;line-height:1.45;color:var(--color-text)}
.ahorro-box__list svg{flex-shrink:0;margin-top:2px;color:var(--color-accent)}
.ahorro-box__list strong{color:var(--color-primary)}

/* ─── Home: zonas v2 (panel ciudad + tarjetas área metropolitana) ─── */
.zonas-v2{display:grid;grid-template-columns:5fr 7fr;gap:1.5rem;align-items:stretch}
.zonas-v2__kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.9rem}
.zonas-v2__city{background:var(--color-primary);color:#fff;border-radius:var(--radius-lg);padding:2rem 1.8rem;display:flex;flex-direction:column;position:relative;overflow:hidden}
.zonas-v2__city::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border:28px solid rgba(183,137,47,.12);border-radius:50%;pointer-events:none}
.zonas-v2__city .zonas-v2__kicker{color:var(--color-secondary)}
.zonas-v2__city h3{color:#fff;font-size:1.45rem;margin-bottom:.6rem}
.zonas-v2__city>p{color:rgba(255,255,255,.75);font-size:.97rem;margin-bottom:1.3rem}
.zonas-v2__barrios{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin-bottom:1.5rem;position:relative;z-index:1}
.zonas-v2__barrios a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:.55rem .85rem;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.04);transition:background var(--transition),border-color var(--transition)}
.zonas-v2__barrios a:hover,.zonas-v2__barrios a:focus-visible{background:rgba(183,137,47,.16);border-color:var(--color-secondary)}
.zonas-v2__barrios span{font-weight:700;font-size:.96rem;line-height:1.25}
.zonas-v2__barrios small{font-size:.76rem;color:rgba(255,255,255,.6)}
.zonas-v2__all{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-weight:700;color:var(--color-secondary);position:relative;z-index:1}
.zonas-v2__all:hover{color:#fff}
.zonas-v2__metro{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem 1.8rem;display:flex;flex-direction:column}
.zonas-v2__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:.75rem;flex:1}
.zona-card-v2{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;row-gap:.15rem;align-items:start;align-content:center;height:100%;padding:.9rem .95rem;border:1px solid var(--color-border);border-left:3px solid transparent;border-radius:var(--radius);background:var(--color-bg);transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
.zona-card-v2 svg{grid-row:1/3;color:var(--color-accent);margin-top:2px}
.zona-card-v2__name{font-weight:700;font-size:.97rem;line-height:1.25;color:var(--color-primary)}
.zona-card-v2__loc{font-size:.8rem;line-height:1.4;color:var(--color-muted)}
.zona-card-v2:hover,.zona-card-v2:focus-visible{border-left-color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow)}
@media(max-width:1020px){.zonas-v2{grid-template-columns:1fr}}
@media(max-width:720px){.zonas-v2__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.zonas-v2__city,.zonas-v2__metro{padding:1.5rem 1rem}.zonas-v2__grid,.zonas-v2__barrios{gap:.5rem}.zona-card-v2{padding:.75rem .7rem;grid-template-columns:1fr}.zona-card-v2 svg{display:none}}
@media(max-width:359px){.zonas-v2__grid,.zonas-v2__barrios{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.zona-card-v2:hover{transform:none}}

/* ─── Proyectos: texto de cierre con enlace a la home ─── */
.proyectos-cierre{padding:2.2rem 0 2.6rem}
.proyectos-cierre .prose{max-width:70ch;margin-inline:auto;text-align:center;color:var(--color-muted)}
.proyectos-cierre a{color:var(--color-accent);text-decoration:underline;font-weight:600}

/* ─── Cabeceras centradas + ritmo vertical compacto ─── */
.hero .container:not(.hero__grid) .hero__text{text-align:center;max-width:820px;margin-inline:auto}
.hero .container:not(.hero__grid) .hero__lead{margin-inline:auto;max-width:60ch}
.hero .container:not(.hero__grid) .hero__bullets{justify-items:center}
.hero .container:not(.hero__grid) .hero__actions{justify-content:center}
.hero .container:not(.hero__grid) .wa-legal{margin-inline:auto}
.hero__grid .hero__lead{max-width:none}
.section > .container.prose > h2:first-child{text-align:center;margin-bottom:1.25rem}
.section + .section-banner,.section-banner + .section{margin-top:0}

/* ── seofix 2026-10-13 ───────────────────────────────────────────────────── */
.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::after{z-index:1;opacity:1;background:linear-gradient(135deg,rgba(30,27,23,.9),rgba(42,38,34,.8) 55%,rgba(60,40,30,.88))}
.hero--img .hero__grid{z-index:2}
.map-facade{display:flex;align-items:center;justify-content:center;min-height:360px;width:100%;line-height:1.4;border-radius:var(--radius);
  background:var(--color-bg-alt,#F3EADD) repeating-linear-gradient(45deg,transparent 0 22px,rgba(42,38,34,.04) 22px 23px)}
.map-facade__btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.7rem 1.3rem;border:1px solid var(--color-border);
  border-radius:999px;background:#fff;color:var(--color-text);font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm,0 1px 4px rgba(0,0,0,.08))}
.map-facade__btn:hover,.map-facade__btn:focus-visible{border-color:var(--color-accent);color:var(--color-accent)}
.trabajo__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.trabajo__btn:focus-visible{outline:3px solid var(--color-secondary);outline-offset:-3px}
.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:96vh}
.lightbox::backdrop{background:rgba(20,17,14,.9)}
.lightbox__img{display:block;max-width:96vw;max-height:84vh;width:auto;height:auto;margin:auto;border-radius:var(--radius)}
.lightbox__cap{color:#fff;text-align:center;margin:.75rem auto 0;font-size:.95rem}
.lightbox__close{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.service-card__note{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--color-border);font-size:.86rem;line-height:1.5;color:var(--color-text)}
.service-card__link{margin-top:.5rem;font-size:.86rem;font-weight:600}
.e404{padding:clamp(2.5rem,8vw,6rem) 1rem}
.e404__h2{font-size:1rem;font-weight:600;margin:2rem 0 .25rem;color:#E8E1D6}
.e404 .e404__nav{margin-top:.5rem}

/* ─── v14 2026-10-16: tablas de zona, fases, obra destacada, fichas /trabajo/ ─── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.zona-table{min-width:560px}
.zona-table td:last-child{white-space:normal;font-weight:600}
.zona-table td:first-child{font-weight:700;color:var(--color-primary)}
.fase-list{list-style:none;counter-reset:fase;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;padding:0;margin:0}
.fase-list li{counter-increment:fase;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:1.3rem 1.4rem 1.4rem}
.fase-list li::before{content:counter(fase,decimal-leading-zero);display:block;font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:600;color:var(--color-secondary);margin-bottom:.4rem}
.fase-list h3{font-size:1.08rem;margin-bottom:.45rem}
.fase-list p{margin:0;font-size:.95rem;line-height:1.6}
.obra-destacada{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.obra-destacada__fig{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border)}
.obra-destacada__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.obra-destacada__body p{margin-bottom:1.1rem}
.obra-destacada__link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;color:var(--color-accent);border-bottom:2px solid currentColor}
.obra-destacada__link::after{content:"→"}
.obra-destacada__link:hover,.obra-destacada__link:focus-visible{color:var(--color-primary)}
.hero--obra .hero__eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:.7rem}
.hero--obra .hero__trust-row{justify-content:center}
.obra-complicacion{max-width:820px;margin-inline:auto;background:#fff;border:1px solid var(--color-border);border-left:5px solid var(--color-accent);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.2rem)}
.obra-complicacion p+p{margin-top:1rem}
.antes-despues{margin-top:2rem}
.antes-despues .trabajo-card__body{padding:.7rem 1rem}
.obra-nota{margin-top:1rem;font-size:.84rem;color:var(--color-muted);text-align:center}
.zonas-v2__barrio{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:.55rem .85rem;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.service-card h3 a{color:inherit}
.service-card h3 a:hover,.service-card h3 a:focus-visible{color:var(--color-accent)}
@media(max-width:860px){.obra-destacada{grid-template-columns:1fr}}