/* ==========================================================================
   Reformas Calderon - site.css v2
   Design system: "Editorial calmo". Warm off-white ground, pure white
   surfaces, one accent (obra orange), hairlines instead of boxes, large
   photography shown whole, generous vertical rhythm.

   Contract with assets/site.js (do not rename these):
     .site-nav / .nav-toggle / .menu-open / .is-scrolled
     .hero-carousel[data-carousel] > .carousel-stage > section.carousel-slide
        > .outer > .inner > .bg   (+ .carousel-btn.prev/.next, .carousel-dots,
        .carousel-caption, .carousel-live, .is-current, .is-paused,
        .is-progressing)
     .reveal / .reveal.on        (section reveals)
     .photo-grid, .work-strip, .line-photos, .photo-reveal  (photo reveals)
     .ba / .ba-antes / .ba-tag   (legacy before-after toggle)
     .ba-slider [data-ba-slider] (v2 pointer-driven before-after)
     .faq details/summary, .sticky-mobile, .float-wa, .mes-actual, .sr-only
     .lead-form[data-linea] / .field / .field-error / .has-error
        [data-poblacion-select] / [data-poblacion-municipio] / .hp
        .lead-form-status (native lead forms, replaces the old GHL iframe)

   Sections in this file:
     1. Tokens
     2. Base + typography
     3. Layout primitives
     4. Components (buttons, eyebrow, icons, cards, tables, media)
     5. Chrome (nav, footer, floating CTAs)
     6. Page sections (hero, proof, problema, oferta, plazo, precios,
        proceso, proyectos, antes/despues, contrato, faq, estudio, otros)
     7. Motion
     8. Responsive
     9. Page modules (styles owned by a single page)
    10. Visual pass (ba-pair, details.more, gallery band, team band)
    11. Visual pass: support pages
    12. Consent + legal (cookie banner, footer trigger, legal tables)
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* colour */
  --ground: #F7F4EE;
  --ground-2: #F1ECE3;
  --surface: #FFFFFF;
  --ink: #1B1714;
  --ink-2: #6B625A;
  --hair: rgba(27, 23, 20, 0.10);
  --hair-2: rgba(27, 23, 20, 0.18);
  --obra: #E05206;          /* fills, indicators, primary CTA only */
  --obra-ink: #B84200;      /* accent used as TEXT (AA on white) */
  --obra-wash: rgba(224, 82, 6, 0.08);
  --ok: #2E6B3F;
  --danger: #B3261E;        /* the one error red: form validation + failed submit only */

  /* radius */
  --r-md: 20px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* elevation: exactly one card shadow, nothing else */
  --elev: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(27, 23, 20, 0.08);

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 120px;
  --measure: 68ch;

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. BASE + TYPOGRAPHY ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 {
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
h3 {
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h4 { font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; }

p { max-width: var(--measure); }
strong { font-weight: 600; color: var(--ink); }
em { font-style: normal; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { list-style: none; }

a { color: inherit; }
main a:not([class]) {
  color: var(--obra-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 66, 0, 0.35);
  transition: text-decoration-color 0.15s var(--ease);
}
main a:not([class]):hover,
main a:not([class]):focus-visible { text-decoration-color: currentColor; }

/* focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--obra);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--ink); color: var(--surface);
  font-size: 14px; font-weight: 600;
  padding: 14px 20px; border-radius: var(--r-pill);
  text-decoration: none; transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 16px; }

.sr-only, .carousel-live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding: var(--section-y) 0; position: relative; }
section[id], #estudio { scroll-margin-top: 92px; }

/* one idea per section: eyebrow, heading, lead, then content.
   The head is a centred column on every section that owns one. Two-column
   sections that carry their heading inside a text column (contrato, estudio)
   keep it left-aligned next to their media or form. */
.section-head {
  margin-inline: auto; margin-bottom: 48px;
  max-width: 760px; text-align: center;
}
.section-head h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.section-head .lead { margin-inline: auto; }
/* a closing CTA that follows a centred head is centred with it */
.section-head + .cta-row { justify-content: center; }
.section-head + .cta-row + .scarcity { margin-inline: auto; justify-content: center; }
.lead {
  margin-top: 20px;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}
.measure { max-width: var(--measure); }

.stack > * + * { margin-top: 20px; }

/* ---------- 4. COMPONENTS ---------- */

/* eyebrow (class name kept: .cota) */
.cota {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--obra-ink);
  margin-bottom: 18px;
  /* it is a label, not a paragraph: the 68ch measure would wrap it */
  max-width: none;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--obra);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), transform 0.1s var(--ease);
}
.btn:hover { background: var(--obra-ink); }
.btn:active { transform: scale(0.97); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-2);
}
.btn.ghost:hover { background: rgba(27, 23, 20, 0.04); }
.btn.small { min-height: 44px; padding: 11px 20px; font-size: 14px; }

.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 36px;
}

/* icons: one stroke width, no emoji anywhere */
.icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon-check { color: var(--ok); }
.icon-accent { color: var(--obra-ink); }

/* cards */
.card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev);
  padding: 32px;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 16px; color: var(--ink-2); }

/* media: photos are shown whole in a 3:2 box, never cropped */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ground-2);
  aspect-ratio: 3 / 2;
}
.media img,
.media picture {
  width: 100%; height: 100%;
}
.media img { object-fit: contain; }
.media.is-natural { aspect-ratio: auto; }
.media.is-natural img { height: auto; object-fit: fill; }

figure { margin: 0; }
figcaption {
  margin-top: 12px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

/* hairline list */

/* ---------- 5. CHROME ---------- */

/* nav: translucent material, hairline only once scrolled */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-nav.is-scrolled { border-bottom-color: var(--hair); }
.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 68px;
}
.logo {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: -0.01em; white-space: nowrap;
}
.logo span { color: var(--obra); }
.site-nav nav { min-width: 0; }
.site-nav-links { display: flex; align-items: center; gap: 24px; }
.site-nav-links a {
  display: inline-block;
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  color: var(--ink-2); white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.site-nav-links a:hover { color: var(--ink); }
.site-nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--obra); }
.site-nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 11px;
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* footer */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--hair);
  padding: 72px 0 132px;
  font-size: 15px;
  color: var(--ink-2);
}
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .logo { color: var(--ink); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 16px;
}
.site-footer address { font-style: normal; font-size: 14px; line-height: 1.9; margin-top: 16px; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { font-size: 14px; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); text-decoration: underline; }
.site-footer .legal {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px;
}
.placeholder-inline {
  color: var(--ink-2);
  border-bottom: 1px solid var(--hair-2);
}

/* floating CTAs */
.float-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: 14px 22px; border-radius: var(--r-pill);
  background: #128C4A; color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: var(--elev);
  transition: transform 0.1s var(--ease);
}
.float-wa:active { transform: scale(0.97); }
.float-wa svg { width: 20px; height: 20px; fill: #fff; }

.sticky-mobile {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--hair);
}
.sticky-mobile .btn { flex: 1; min-height: 48px; padding: 12px 10px; font-size: 15px; }
.sticky-mobile .btn.wa { background: #128C4A; color: #fff; }
.sticky-mobile .btn.wa:hover { background: #0E7A40; }

/* ---------- 6. PAGE SECTIONS ---------- */

/* --- 6.1 hero: no form, centred copy, media at container width --- */
.hero { padding: 72px 0 var(--section-y); }
.hero h1 { max-width: 16ch; }
.hero h1 em { color: var(--obra-ink); }
.hero .sub {
  margin-top: 28px;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}
.hero .sub strong { color: var(--ink); }
.hero .cta-row { margin-top: 36px; }

/* Centred hero copy. `.legal-hero` opts out: aviso legal, privacidad and
   cookies are documents, and centred legal prose is unreadable. */
.hero:not(.legal-hero) > .wrap { text-align: center; }
.hero:not(.legal-hero) h1,
.hero:not(.legal-hero) .sub,
.hero:not(.legal-hero) .gracias-sub { margin-inline: auto; }
.hero:not(.legal-hero) .sub { max-width: 60ch; }
.hero:not(.legal-hero) .cta-row { justify-content: center; }
/* the blocks under the hero copy read as blocks again */
.hero:not(.legal-hero) .hero-carousel,
.hero:not(.legal-hero) .hero-media,
.hero:not(.legal-hero) .hero-points,
.hero:not(.legal-hero) .next-steps,
.hero:not(.legal-hero) .next-steps-label { text-align: left; }

/* carousel: full container width, 3:2, whole images */
.hero-carousel {
  position: relative;
  display: grid; grid-template-columns: 1fr; row-gap: 16px;
  width: 100%; margin-top: 64px;
}
.carousel-stage {
  grid-row: 1; grid-column: 1;
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ground-2);
  box-shadow: var(--elev);
  touch-action: pan-y;
}
.carousel-slide {
  position: absolute; inset: 0; padding: 0; margin: 0;
  visibility: hidden;
}
.carousel-slide:first-child,
.carousel-slide.is-current { visibility: visible; }
.carousel-slide .outer,
.carousel-slide .inner { width: 100%; height: 100%; overflow: hidden; }
.carousel-slide .bg { width: 100%; height: 100%; will-change: transform; }
.carousel-slide .bg picture { display: block; width: 100%; height: 100%; }
.carousel-slide .bg img {
  width: 100%; height: 100%;
  object-fit: contain; background: var(--ground-2);
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
.carousel-caption {
  grid-row: 2; grid-column: 1;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  min-height: 2.6em; max-width: 62ch;
}
.carousel-btn {
  grid-row: 1; grid-column: 1; align-self: center; z-index: 5;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.18s var(--ease), transform 0.1s var(--ease);
}
.carousel-btn:hover { background: #fff; }
.carousel-btn:active { transform: scale(0.97); }
.carousel-btn.prev { justify-self: start; margin-left: 16px; }
.carousel-btn.next { justify-self: end; margin-right: 16px; }
.carousel-dots {
  grid-row: 3; grid-column: 1;
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.carousel-dots .dot {
  position: relative; overflow: hidden;
  width: 8px; height: 8px; padding: 0; border: none;
  border-radius: var(--r-pill);
  background: var(--hair-2); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: width 600ms var(--ease), background-color 400ms var(--ease);
}
.carousel-dots .dot[aria-selected="true"] { width: 28px; background: var(--obra-wash); }
.carousel-dots .dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: var(--obra);
  transform: scaleX(0); transform-origin: left center;
}
.carousel-dots .dot[aria-selected="true"]::after { transform: scaleX(1); }
.carousel-dots .dot[aria-selected="true"].is-progressing::after {
  animation: carouselDotFill 6000ms linear forwards;
}
.hero-carousel.is-paused .carousel-dots .dot::after { animation-play-state: paused; }
@keyframes carouselDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 6.2 proof strip --- */
.proof { padding: 0 0 var(--section-y); }
.proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev);
  overflow: hidden;
}
.proof-item { padding: 44px 36px; border-left: 1px solid var(--hair); }
.proof-item:first-child { border-left: 0; }
.proof-item b {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.proof-item span {
  display: block; margin-top: 12px;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}

/* --- 6.3 problema --- */
.problema .problema-body {
  display: grid; grid-template-columns: 1fr minmax(320px, 420px);
  gap: 64px; align-items: start;
}
.problema-list > li {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 28px 0; border-top: 1px solid var(--hair);
}
.problema-list > li:last-child { border-bottom: 1px solid var(--hair); }
.problema-list .n {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--obra-ink);
}
.problema-list h3 { font-size: 21px; margin-bottom: 8px; }
.problema-list p { font-size: 16px; color: var(--ink-2); max-width: 56ch; }
.problema .kicker {
  margin-top: 40px;
  font-size: 19px; line-height: 1.55; color: var(--ink);
  max-width: var(--measure);
}
.problema-aside { position: sticky; top: 100px; }

/* --- 6.4 oferta --- */
.oferta { background: var(--surface); }
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
  margin-top: 88px;
}
.split:first-of-type { margin-top: 0; }
.split.is-reversed .split-media { order: -1; }
.split-text h3 { margin-bottom: 18px; max-width: 18ch; }
.split-text p { font-size: 17px; color: var(--ink-2); }
.split-list { margin-top: 24px; }
.split-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.5;
}
.split-list li:last-child { border-bottom: 1px solid var(--hair); }
.split-list .icon { width: 20px; height: 20px; margin-top: 3px; }

.guarantee-cards { display: grid; gap: 24px; }
.guarantee-cards .card { padding: 32px; }
.guarantee-cards .tag {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--obra-ink);
}
.guarantee-cards h3 { font-size: 22px; margin-bottom: 12px; }
.guarantee-cards p { font-size: 16px; line-height: 1.6; }

.bonus-block { margin-top: 96px; }
.bonus-block h3 { margin-bottom: 28px; }
.bonus-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}
.bonus {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--hair);
}
.bonus .b-name { display: block; font-size: 16px; font-weight: 600; }
.bonus .b-desc { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.bonus .b-value {
  flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--obra-ink); text-align: right; white-space: nowrap;
}
.bonus .b-value s { color: var(--ink-2); margin-right: 6px; font-weight: 400; }
.bonus .b-value.b-value-long { white-space: normal; max-width: 18ch; }
.bonus .b-value.b-value-long s { white-space: nowrap; }

.scarcity {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
  max-width: 52ch;
}
.scarcity .icon { width: 20px; height: 20px; margin-top: 2px; }
.scarcity b { color: var(--ink); font-weight: 600; }

/* --- 6.5 plazo y condiciones --- */
/* Reading order: head, then the timeline across the whole container, then the
   day-by-day paragraph, then the conditions beside the sticky photo, and the
   three callouts on their own full-width row. */
.plazo-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 38%;
  gap: 64px; align-items: start;
}
.plazo-aside { position: sticky; top: 112px; }

.timeline { margin: 0; }
.timeline-track {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  counter-reset: tl;
  position: relative;
}
/* hairline track running behind the numbered circles */
.timeline-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 36px;
  height: 1px; background: var(--hair);
}
.timeline-cell { position: relative; padding: 20px 18px; }
.timeline-cell::before {
  counter-increment: tl; content: counter(tl);
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 14px;
  border: 1px solid var(--hair-2); border-radius: 50%;
  background: var(--ground);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--ink-2);
}
.timeline-cell.is-final::before {
  background: var(--obra); border-color: var(--obra); color: var(--surface);
}
.timeline-cell .d {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
.timeline-cell.is-final .d { color: var(--obra-ink); }
.timeline-cell .t {
  display: block; margin-top: 8px;
  font-size: 16px; line-height: 1.45; color: var(--ink);
}
.timeline-note {
  margin: 32px 0 48px;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
  max-width: var(--measure);
}

.checklist { margin: 40px 0 0; columns: 2; column-gap: 48px; }
.checklist li {
  break-inside: avoid;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.5;
}
.checklist .icon { width: 20px; height: 20px; margin-top: 3px; }
/* inside the plazo the conditions sit in one column beside the photo */
.plazo .checklist { margin: 0; columns: auto; }
.plazo .checklist li { padding: 20px 0; font-size: 17px; line-height: 1.55; }
.plazo .checklist li:last-child { border-bottom: 1px solid var(--hair); }
.plazo .checklist .icon { width: 24px; height: 24px; margin-top: 2px; }

.callouts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px;
}
.callout {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--elev); padding: 32px 32px 36px;
}
.callout .c-key {
  display: block; margin-bottom: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
}
.callout p { margin-top: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.callout .c-label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.callout.is-accent .c-key { color: var(--obra-ink); }

/* --- 6.6 precios --- */
.precios { background: var(--surface); }
.price-card {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.price-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.price-table caption {
  caption-side: top; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  padding: 24px 28px 16px;
  color: var(--ink);
}
.price-table th, .price-table td {
  text-align: left; padding: 22px 28px;
  font-size: 15.5px; line-height: 1.5;
  border-top: 1px solid var(--hair);
  vertical-align: top;
  overflow-wrap: break-word;
}
.price-table thead th {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
  padding-top: 14px; padding-bottom: 14px;
}
.price-table th:first-child, .price-table td:first-child { width: 26%; }
.price-table th:nth-child(2), .price-table td:nth-child(2) { width: 18%; }
.price-table td:first-child { font-weight: 600; }
.price-table td.price {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--obra-ink);
}
.price-table td:last-child { color: var(--ink-2); }

.price-notes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 40px;
}
.price-notes h4 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 10px;
}
.price-notes p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.price-facts { margin-top: 32px; }
.price-facts p {
  padding: 16px 0; border-top: 1px solid var(--hair);
  font-size: 16px; color: var(--ink-2); max-width: var(--measure);
}
.price-facts p:last-child { border-bottom: 1px solid var(--hair); }

/* --- 6.7 proceso: five steps on a scroll rail, not a cramped 5-up grid --- */
.proceso { overflow-x: hidden; overflow-x: clip; }
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 20px;
}
.rail-hint { font-size: 14px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .rail-hint { visibility: hidden; } }
.rail-nav { display: flex; gap: 10px; margin-left: auto; }
.rail-btn {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--hair-2); border-radius: 50%;
  background: var(--surface); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.rail-btn:hover:not(:disabled) { background: var(--ground-2); }
.rail-btn:active:not(:disabled) { transform: scale(0.97); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.process-rail {
  display: flex; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
  /* bleeds to the right edge of the viewport so the next card peeks in */
  margin-right: calc(50% - 50vw);
  padding-right: max(var(--gutter), calc(50vw - 50%));
}
.process-rail::-webkit-scrollbar { display: none; }
.step-card {
  flex: 0 0 400px; scroll-snap-align: start;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--elev); overflow: hidden;
  display: flex; flex-direction: column;
}
.step-card .media { border-radius: 0; aspect-ratio: 3 / 2; }
.step-card .s-body { padding: 28px 28px 32px; }
.step-card .n {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.06em; color: var(--obra-ink);
}
.step-card h3 { font-size: 24px; margin: 10px 0 12px; }
.step-card p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* --- 6.8 proyectos tipo --- */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.project-card {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--elev); overflow: hidden;
}
.project-media { position: relative; padding-bottom: 40px; }
.project-media .media { border-radius: 0; }
.project-thumb {
  position: absolute; right: 20px; bottom: 0;
  width: 42%; max-width: 170px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ground-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(27, 23, 20, 0.14);
  outline: 3px solid var(--surface);
  aspect-ratio: 3 / 2;
}
.project-thumb img { width: 100%; height: 100%; object-fit: contain; }
.project-body { padding: 28px 28px 32px; }
.project-body .cota { margin-bottom: 12px; }
.project-body h3 { font-size: 22px; margin-bottom: 16px; }
.project-rows li {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.6;
}
.project-rows li span:first-child { color: var(--ink-2); }
.project-rows li span:last-child { font-weight: 600; }
.project-foot {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 14px; color: var(--ink-2);
}
.pending-note {
  margin-top: 32px;
  font-size: 14px; color: var(--ink-2);
}

/* --- 6.9 antes / despues slider --- */
.ba-slider { position: relative; --ba-pos: 50%; }
.ba-frame {
  position: relative;
  width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ground-2);
  box-shadow: var(--elev);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer img {
  width: 100%; height: 100%; object-fit: contain;
  -webkit-user-drag: none;
}
.ba-layer.ba-before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ba-tagline {
  position: absolute; top: 16px; z-index: 3;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.ba-tagline--before { left: 16px; }
.ba-tagline--after { right: 16px; }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos);
  width: 2px; margin-left: -1px; z-index: 4;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(27, 23, 20, 0.12);
  pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--hair); border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; pointer-events: auto;
}
.ba-handle:active { transform: translate(-50%, -50%) scale(0.97); }
.ba-handle .icon { width: 20px; height: 20px; }
.ba-note { margin-top: 14px; font-size: 14px; color: var(--ink-2); }

/* --- 6.10 contrato --- */
.contrato { background: var(--surface); }
.contrato-body { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.contrato-list { margin-top: 8px; }
.contrato-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.5;
}
.contrato-list li:last-child { border-bottom: 1px solid var(--hair); }
.contrato-list .icon { width: 20px; height: 20px; margin-top: 3px; }

/* --- 6.11 faq --- */
/* The FAQ is a text-only section: the whole block is a centred 820px column
   instead of a narrow ragged list hugging the left edge of the container. */
.faq .wrap { max-width: calc(820px + var(--gutter) * 2); }
.faq .faq-list { max-width: none; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 26px 48px 26px 0;
  font-size: 18px; font-weight: 600; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 8px; top: 50%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.faq summary::before { width: 16px; height: 1.5px; margin-top: -0.75px; }
.faq summary::after { width: 1.5px; height: 16px; margin-top: -8px; right: 15.25px; }
.faq details[open] summary::after { opacity: 0; transform: rotate(90deg); }
.faq details p { padding: 0 0 26px; font-size: 16.5px; color: var(--ink-2); max-width: var(--measure); }

/* --- 6.12 estudio gratis (only form on the page) --- */
.estudio { background: var(--surface); }
.estudio-body { display: grid; grid-template-columns: 1fr minmax(360px, 520px); gap: 64px; align-items: start; }
.estudio-text h2 { max-width: 15ch; }
.estudio-list { margin-top: 32px; }
.estudio-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.5;
}
.estudio-list li:last-child { border-bottom: 1px solid var(--hair); }
.estudio-list .icon { width: 20px; height: 20px; margin-top: 3px; }
.form-card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--elev);
  padding: 32px 28px;
}
.form-card h3 { font-size: 21px; margin-bottom: 10px; }
.form-card .form-sub { font-size: 15.5px; color: var(--ink-2); margin-bottom: 20px; }
.form-card iframe { display: block; width: 100%; min-height: 640px; border: 0; border-radius: var(--r-sm); }
.form-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }

/* --- 6.12b lead-form (native form replacing the GHL iframe) ---
   Contract with assets/site.js: .lead-form[data-linea], .field,
   .field-error, .has-error, [data-poblacion-select],
   [data-poblacion-municipio], .hp, .lead-form-status. See
   BUILD-NOTES.md > "Lead tracking" for the full payload contract. */
.lead-form { margin-top: 4px; }
.lead-form .field { margin-top: 18px; }
.lead-form .field:first-child { margin-top: 0; }
.lead-form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
}
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.15s var(--ease);
}
.lead-form input::placeholder { color: var(--ink-2); }
.lead-form input:focus-visible,
.lead-form select:focus-visible {
  outline: 2px solid var(--obra);
  outline-offset: 2px;
  border-color: var(--obra);
}
.lead-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  /* Inline chevron: encodes --ink-2 (#6B625A) literally because a data URI
     cannot read a CSS custom property. Same stroke system as .icon
     (stroke-width 1.75, round caps), just not an inline <svg> since this
     one lives in a background-image. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B625A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.lead-form select:required:invalid { color: var(--ink-2); }

.lead-form .field.has-error input,
.lead-form .field.has-error select { border-color: var(--danger); }
.lead-form .field-error {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger);
}
.lead-form .field-error:empty { display: none; }
.lead-form .field-hint { margin-top: 6px; font-size: 13px; color: var(--ink-2); }

.lead-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.lead-form .checkbox-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--obra);
}
.lead-form .checkbox-row a {
  color: var(--obra-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* honeypot: off-screen, not display:none (bots that only check computed
   display still fill it in; this is the same sr-only clip technique used
   elsewhere in the file, just scoped to the lead form) */
.lead-form .hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.lead-form .btn { margin-top: 24px; }

.lead-form-status { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.lead-form-status:empty { display: none; }
.lead-form-status.is-error { color: var(--danger); }
.lead-form-status.is-success { color: var(--ok); }
.lead-form-status a { color: inherit; }

/* --- 6.13 otros servicios --- */
/* four lines, two per row: a 4-up row inside a 1200px container leaves 272px
   per card, which is not enough for a photo plus three lines of copy. */
.other-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.service-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--elev); overflow: hidden;
  transition: transform 0.2s var(--ease);
}
.service-card:hover { transform: translateY(-3px); }
.service-card:active { transform: scale(0.99); }
.service-card .media { border-radius: 0; }
.service-card .sc-body { padding: 28px 28px 32px; }
.service-card .sc-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--obra-ink); margin-bottom: 10px;
}
.service-card h3 { font-size: 22px; margin-bottom: 12px; }
.service-card p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.service-card .sc-link { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--obra-ink); }

/* ---------- 7. MOTION ---------- */
/* .reveal is only hidden once JS is confirmed present (html.js). Without JS
   the content renders at its resting, fully visible state. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.on { opacity: 1; transform: none; }

/* hover zoom on photos, clipped by the media box */
.photo-grid figure > picture,
.work-strip figure > picture,
.line-photos figure > picture,
.photo-reveal figure > picture {
  display: block; overflow: hidden; border-radius: var(--r-md);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .service-card, .carousel-btn, .carousel-dots .dot,
  .nav-toggle span, .site-nav, .skip-link, .ba-layer { transition: none; }
  .carousel-dots .dot[aria-selected="true"].is-progressing::after { animation: none; transform: scaleX(1); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-nav, .sticky-mobile, .carousel-btn, .ba-tagline, .ba-handle {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .site-nav { border-bottom-color: var(--hair); }
}

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width: 1240px) {
  .site-nav-links { gap: 16px; }
  .site-nav-links a { font-size: 14px; }
}

@media (max-width: 1080px) {
  :root { --section-y: 96px; }
  .site-nav nav { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.menu-open nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--hair);
    box-shadow: var(--elev);
    padding: 8px 0 12px;
  }
  .site-nav.menu-open .site-nav-links { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .site-nav.menu-open .site-nav-links li { border-top: 1px solid var(--hair); }
  .site-nav.menu-open .site-nav-links a {
    display: block; padding: 15px 24px; font-size: 16px;
    border-bottom: none; white-space: normal;
  }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}

/* the day cells stop fitting seven across well before the layout breaks */
@media (max-width: 1180px) {
  .timeline-track {
    display: flex; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding-bottom: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .timeline-track::-webkit-scrollbar { display: none; }
  .timeline-track::before { display: none; }
  .timeline-cell {
    flex: 0 0 220px; scroll-snap-align: start;
    border-top: 1px solid var(--hair);
  }
}

@media (max-width: 1024px) {
  .step-card { flex: 0 0 360px; }
  .other-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .problema .problema-body,
  .plazo-body,
  .contrato-body,
  .estudio-body,
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.is-reversed .split-media { order: 0; }
  .problema-aside, .plazo-aside { position: static; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { border-left: 0; border-top: 1px solid var(--hair); padding: 30px 26px; }
  .proof-item:first-child { border-top: 0; }
  .projects-grid { grid-template-columns: 1fr; gap: 24px; }
  .bonus-grid { grid-template-columns: 1fr; }
  .callouts { grid-template-columns: 1fr; }
  .price-notes { grid-template-columns: 1fr; gap: 28px; }
  .checklist { columns: 1; }
  .plazo .checklist { margin-bottom: 8px; }
  .float-wa { display: none; }
  .sticky-mobile { display: flex; }
  body { padding-bottom: 76px; }
}

@media (max-width: 640px) {
  :root { --section-y: 72px; --gutter: 20px; }
  body { font-size: 17px; }
  .hero { padding: 48px 0 var(--section-y); }
  .hero-carousel { margin-top: 40px; }
  .section-head { margin-bottom: 36px; }

  .other-services-grid { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; }
  .site-footer .legal { flex-direction: column; }
  /* the timeline becomes a vertical list with the circles down the left */
  .timeline-track {
    display: grid; grid-template-columns: 1fr;
    gap: 0; overflow: visible; scroll-snap-type: none;
    padding-bottom: 0;
  }
  .timeline-cell {
    flex: none;
    display: grid; grid-template-columns: 32px 1fr;
    column-gap: 16px; align-items: start;
    padding: 18px 0;
  }
  .timeline-cell::before { margin-bottom: 0; grid-row: 1 / span 2; }
  .timeline-cell .d { grid-column: 2; }
  .timeline-cell .t { grid-column: 2; margin-top: 4px; }
  .other-services-grid { grid-template-columns: 1fr; }
  .step-card { flex: 0 0 300px; }
  .problema-list > li { grid-template-columns: 1fr; gap: 6px; }
  /* Three columns do not fit a 390px viewport without either a scroll
     container or unreadable text, so the table stacks: one card per row.
     Explicit ARIA roles keep the table semantics that `display: block`
     would otherwise strip, and the header row stays in the accessibility
     tree (visually hidden) instead of being removed. */
  .price-table,
  .price-table thead,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td { display: block; width: auto; }
  .price-table caption { padding: 20px 18px 4px; }
  .price-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .price-table tbody tr { padding: 20px 18px; border-top: 1px solid var(--hair); }
  .price-table tbody td { border-top: 0; padding: 0; font-size: 15px; }
  .price-table tbody td + td { margin-top: 8px; }
  .price-table tbody td:first-child { font-size: 17px; }
  .price-table tbody td.price { font-size: 18px; }
  .card, .callout { padding: 24px; }
  .cta-row .btn { width: 100%; }
  .project-thumb { width: 46%; right: 16px; }
  .carousel-btn { width: 44px; height: 44px; font-size: 19px; }
  .carousel-btn.prev { margin-left: 10px; }
  .carousel-btn.next { margin-right: 10px; }
  .form-card { padding: 24px 20px; }
  .lead-form .btn { width: 100%; }
  .ba-handle { width: 44px; height: 44px; }
}

/* very small: the price table is the only element that can outgrow 320px */
@media (max-width: 380px) {
  .price-table th, .price-table td { padding: 14px 14px; font-size: 14px; }
}

/* ---------- 9. PAGE MODULES ----------
   Styles owned by one page (or by a small group of pages) that have no place
   in the shared component layer. Merged here from the former page-local
   <style> blocks so every rule of the site lives in one file.
   Owners: legal (aviso-legal / privacidad / cookies), garantias,
   estudio-gratis, proyectos, gracias. */

/* --- 9.1 shared by the secondary pages (garantias, estudio-gratis, proyectos) --- */
.surface { background: var(--surface); }
.hero-media { margin-top: 64px; }
.note-out { margin-top: 28px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.obra-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.obra-strip figcaption {
  margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
}

/* --- 9.2 legal pages (aviso-legal, privacidad, cookies) --- */
.legal-title { font-size: clamp(32px, 3.4vw, 46px); max-width: 20ch; }
/* The document block spans the container so a table can use the full width;
   every prose element keeps the 68ch reading measure of its own (see 12.4). */
.legal-doc { max-width: var(--container); margin-top: 48px; }
.legal-doc ul, .legal-doc ol { max-width: var(--measure); }
.legal-doc > p { font-size: 17px; line-height: 1.75; color: var(--ink-2); margin-bottom: 18px; }
.legal-doc h2 {
  font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; max-width: 30ch;
  margin: 52px 0 16px; padding-top: 28px; border-top: 1px solid var(--hair);
}
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc ul { margin: 8px 0 24px; }
.legal-doc li {
  padding: 14px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.legal-doc li:last-child { border-bottom: 1px solid var(--hair); }
.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em; background: var(--ground-2); padding: 1px 6px; border-radius: 6px;
}

/* --- 9.3 garantias --- */
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g-two .card { padding: 36px; }
.g-two .card .cota { margin-bottom: 12px; }
.wide-table th:first-child, .wide-table td:first-child { width: 24%; }
.wide-table th:nth-child(2), .wide-table td:nth-child(2) { width: 40%; }
.wide-table td:last-child { color: var(--ink); }
.notes-list > li {
  padding: 18px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
  max-width: var(--measure);
}
.notes-list > li:last-child { border-bottom: 1px solid var(--hair); }
.sub-head { margin: 64px 0 24px; }
.sub-head h3 { max-width: 24ch; }

/* --- 9.4 estudio-gratis --- */
.hero-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
.hero-points li {
  padding-top: 18px; border-top: 1px solid var(--hair);
  font-size: 15.5px; line-height: 1.5; color: var(--ink-2);
}
.line-cards { display: grid; gap: 24px; }
.line-card {
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--elev);
  padding: 32px; display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start;
}
.line-card .media { border-radius: var(--r-sm); }
.line-card h3 { font-size: 22px; margin-bottom: 12px; }
.line-card p { font-size: 16px; line-height: 1.6; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* --- 9.5 proyectos --- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.case-body { margin-top: 22px; }
.case-body .c-meta {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 8px;
}
.case-body h3 { font-size: 20px; margin: 10px 0 8px; }
.case-body p { font-size: 15.5px; color: var(--ink-2); }
.case-plazo {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 14.5px; line-height: 1.45; color: var(--ink);
}
.case-plazo .icon { width: 20px; height: 20px; margin-top: 1px; }
.line-block { margin-top: 96px; }
.line-block:first-of-type { margin-top: 0; }
.line-block > h3 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 26px; }
.line-photos-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.line-label {
  margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
.line-label span {
  display: block; margin-top: 6px; font-size: 14px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

/* --- 9.6 gracias --- */
.gracias-title { font-size: clamp(34px, 4.4vw, 56px); max-width: 20ch; }
.gracias-sub { margin-top: 24px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.next-steps { margin-top: 44px; max-width: var(--measure); }
.next-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.5;
}
.next-steps li:last-child { border-bottom: 1px solid var(--hair); }
.next-steps .icon { width: 20px; height: 20px; margin-top: 3px; }
.next-steps-label { margin-top: 40px; font-size: 16px; font-weight: 600; }

/* --- 9.7 responsive for the page modules --- */
@media (max-width: 900px) {
  .g-two { grid-template-columns: 1fr; }
  .obra-strip { grid-template-columns: 1fr 1fr; }
  .hero-points { grid-template-columns: 1fr; gap: 0; }
  .hero-points li { padding: 16px 0; }
  .pair-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; gap: 44px; }
  .line-photos-row { grid-template-columns: 1fr; }
  .line-block { margin-top: 72px; }
}
@media (max-width: 780px) {
  .line-card { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .hero-media { margin-top: 40px; }
  .g-two .card { padding: 24px; }
  .line-card { padding: 28px; }
}

/* ---------- 10. VISUAL PASS ----------
   September 2026. The client's brief for this pass was blunt: "una reforma
   entra por lo visual, no podemos escatimar con imagenes; mucho texto".
   So this block adds three things and nothing else:

   1. `.ba-pair` — two before/after comparators side by side, because every
      line now has real pairs of the SAME room (antes-*.jpg + its match).
   2. `details.more` — the "Leer mas" disclosure. All the long explanatory
      copy stays in the DOM for SEO, it just no longer sits in the visual
      path. Minimal on purpose: a hairline, an accent summary and a plus.
   3. `.gallery-band` + `.team-band` — the two new photo blocks.

   Nothing above section 9 was touched. */

/* --- 10.1 pair of before/after comparators --- */
.ba-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.ba-pair .ba-slider { min-width: 0; }
.ba-caption {
  margin-top: 14px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
/* One honest note for the whole grid, not one per comparator. */
.ba-honest {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* --- 10.2 details.more: the SEO copy, out of the visual path --- */
.more {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  max-width: var(--measure);
}
.more > summary {
  display: flex; align-items: center; gap: 10px;
  list-style: none;
  cursor: pointer;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--obra-ink);
  padding: 6px 0;
  min-height: 32px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  background:
    linear-gradient(var(--obra-ink), var(--obra-ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--obra-ink), var(--obra-ink)) center / 1.5px 12px no-repeat;
  transition: transform 0.25s var(--ease);
}
.more[open] > summary::before {
  background: linear-gradient(var(--obra-ink), var(--obra-ink)) center / 12px 1.5px no-repeat;
}
.more > summary:focus-visible { outline: 2px solid var(--obra); outline-offset: 3px; border-radius: 4px; }
.more > *:not(summary) { max-width: var(--measure); }
.more > p,
.more > ul,
.more > ol,
.more > div { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.more h4 {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.more h4 + p { margin-top: 6px; }
.more ul { padding-left: 0; list-style: none; }
.more ul li { padding: 10px 0; border-top: 1px solid var(--hair); }
.more ul li:first-child { border-top: 0; }
/* inside a two-column price note block the measure is the column, not 68ch */
.price-notes .more { margin-top: 0; }

/* --- 10.3 gallery band: "Asi queda", six photos of the line --- */
.galeria { background: var(--surface); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.gallery-grid figure { min-width: 0; }
.gallery-grid figure > picture {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--ground-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.gallery-grid figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* --- 10.4 team band: who actually does the work --- */
.equipo { background: var(--surface); }
.equipo-media { margin: 0 auto; }
.equipo-media figure > picture {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--ground-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.equipo-media figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
.equipo-lines {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  list-style: none;
  padding-left: 0;
}
.equipo-lines li {
  padding: 20px 0 0;
  border-top: 2px solid var(--ink);
  font-size: 17px; font-weight: 600; line-height: 1.4;
  color: var(--ink);
}

/* --- 10.4b sub-head for the "proyectos tipo" pair row on the home --- */
.pair-head { margin-top: 96px; }

/* --- 10.5 responsive for the visual pass --- */
@media (max-width: 1080px) {
  .gallery-grid { gap: 20px; }
}
@media (max-width: 900px) {
  .ba-pair { grid-template-columns: 1fr; gap: 40px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipo-lines { grid-template-columns: 1fr; gap: 0; }
  .equipo-lines li { padding: 18px 0; border-top: 1px solid var(--hair); }
  .equipo-lines li:first-child { border-top: 2px solid var(--ink); }
}
@media (max-width: 640px) {
  .gallery-grid { gap: 16px; }
  .more { margin-top: 22px; }
}

/* ---------- 11. VISUAL PASS: SUPPORT PAGES ----------
   proyectos, estudio-gratis and garantias. They reuse section 10 as is
   (.ba-pair, .more, .equipo-media, .equipo-lines, .ba-caption); the only
   thing missing was a step of `.problema-list` that carries a photo, used
   in "Que pasa cuando pulsas el boton" on estudio-gratis. Nothing above is
   modified: this block only adds rules. */

/* --- 11.1 numbered step with a photo in its own column --- */
.steps-photo > li.has-photo {
  grid-template-columns: 64px minmax(0, 1fr) 280px;
  align-items: start;
}
.steps-photo > li.has-photo > .media {
  border-radius: var(--r-sm);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .steps-photo > li.has-photo { grid-template-columns: 64px minmax(0, 1fr); }
  .steps-photo > li.has-photo > .media { grid-column: 2 / -1; margin-top: 16px; }
}
@media (max-width: 640px) {
  .steps-photo > li.has-photo { grid-template-columns: minmax(0, 1fr); }
  .steps-photo > li.has-photo > .media { grid-column: 1 / -1; margin-top: 14px; }
}

/* ==========================================================================
   12. CONSENT + LEGAL
   Everything the data-protection pass added: the cookie banner owned by
   assets/consent.js, the "Configurar cookies" footer link that reopens it,
   the first-layer privacy note under every lead form consent checkbox, and
   the table/heading styles the three legal pages needed.
   No rule above this block is modified; this section only adds.
   ========================================================================== */

/* --- 12.1 cookie consent banner (assets/consent.js) ---
   Contract with assets/consent.js (do not rename): .consent-banner,
   .is-visible, .consent-panel, .consent-toggle, body.has-consent-banner, and
   the --rc-sticky-h / --rc-consent-h custom properties it publishes on
   <html> after measuring the sticky mobile CTA and its own height. */
.consent-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--rc-sticky-h, 0px);
  z-index: 95;
  background: var(--ground);
  border-top: 1px solid var(--hair);
  box-shadow: var(--elev);
  padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.consent-banner[hidden] { display: none !important; }
.consent-banner.is-visible { transform: none; opacity: 1; }
.consent-banner:focus-visible { outline: 2px solid var(--obra); outline-offset: -4px; }

.consent-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.consent-copy { flex: 1 1 420px; min-width: 0; }
.consent-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.consent-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 68ch;
}
.consent-more { margin-top: 6px; font-size: 14px; }
.consent-more a {
  color: var(--obra-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.consent-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* "Aceptar todas" and "Rechazar" are deliberately the SAME control: same
   geometry, same weight, same row, one click each (AEPD cookies guide 2023 :
   refusing must be as easy and as visible as accepting). Only the fill
   differs, and the darker one is the reject, so nothing nudges the visitor
   towards accepting. "Configurar" is the secondary, outlined one. */
.consent-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  min-height: 48px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.consent-btn:active { transform: scale(0.97); }
.consent-accept { background: var(--obra); color: #fff; }
.consent-accept:hover { background: var(--obra-ink); }
.consent-reject { background: var(--ink); color: #fff; }
.consent-reject:hover { background: #000; }
.consent-settings { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.consent-settings:hover { background: rgba(27, 23, 20, 0.04); }

.consent-panel {
  max-width: var(--container);
  margin: 20px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.consent-panel[hidden] { display: none; }
.consent-options { margin: 0; }
.consent-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}
.consent-option:first-child { border-top: 0; padding-top: 0; }
.consent-option-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.consent-option-name label { cursor: pointer; }
.consent-option-desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 68ch;
}
.consent-always {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 2px;
}
.consent-toggle {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--obra);
  cursor: pointer;
}
.consent-panel-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.consent-panel-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

@media (max-width: 900px) {
  .consent-banner { padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom)); }
  .consent-inner { gap: 18px; }
  .consent-copy { flex: 1 1 100%; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1 1 140px; }
}
@media (max-width: 560px) {
  .consent-actions .consent-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: none; }
}

/* The floating WhatsApp button sits where the banner is on desktop: push it
   up by exactly the banner's measured height so neither one hides the other. */
.float-wa { transition: transform 0.1s var(--ease), bottom 0.3s var(--ease); }
body.has-consent-banner .float-wa { bottom: calc(22px + var(--rc-consent-h, 0px)); }

/* --- 12.2 "Configurar cookies" footer link --- */
.link-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-footer .link-btn:hover,
.site-footer .link-btn:focus-visible { color: var(--ink); }

/* --- 12.3 first-layer privacy note under each lead form consent checkbox --- */
.form-legal-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.form-legal-note a {
  color: var(--obra-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- 12.4 legal pages: subheadings, tables, update stamp ---
   .legal-doc keeps prose at the 68ch measure; a table needs more room than
   that, so .legal-table-wrap steps outside it and scrolls horizontally on
   narrow screens instead of forcing the page to. */
.legal-doc h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 32px 0 10px;
  max-width: 34ch;
}
.legal-doc ol { margin: 8px 0 24px; }
.legal-doc ol li {
  padding: 14px 0; border-top: 1px solid var(--hair);
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.legal-doc ol li:last-child { border-bottom: 1px solid var(--hair); }
.legal-doc .legal-lead { font-size: 18px; line-height: 1.7; color: var(--ink); }
.legal-doc .legal-updated {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 14px;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* Full container width, with the table scrolling inside its own box on narrow
   screens instead of forcing the page to scroll sideways. */
.legal-table-wrap {
  width: 100%;
  margin: 20px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--surface);
}
.legal-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.legal-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  padding: 20px 22px 12px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 22px;
  font-size: 14.5px;
  line-height: 1.5;
  border-top: 1px solid var(--hair);
  overflow-wrap: break-word;
}
.legal-table thead th {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 12px;
  padding-bottom: 12px;
}
.legal-table tbody td { color: var(--ink-2); }
.legal-table tbody td:first-child { color: var(--ink); font-weight: 600; }
.legal-table tbody td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--ground-2);
  padding: 1px 6px;
  border-radius: 6px;
}