:root {
  --ink: #18181A;
  --ink2: #3A3A3C;
  --muted: #8A8A8E;
  --rule: rgba(24,24,26,0.1);
  --blue: #2756C5;
  --blue2: #1A3C8F;
  --cream: #FAF9F6;
  --wa: #25D366;
  --serif: 'DM Sans', system-ui, sans-serif;   /* antes: DM Serif Display */
  --sans: 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

/* WA */
.wa { position: fixed; bottom: 32px; right: 32px; width: 52px; height: 52px; background: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 9999; text-decoration: none; box-shadow: 0 8px 24px rgba(37,211,102,.35); transition: transform .2s, box-shadow .2s; }
.wa:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37,211,102,.45); }

/* PAGES */
.page { display: none; }
.page.active { display: block; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--rule);
  padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-logo { display: flex; align-items: center; gap: 0; cursor: pointer; text-decoration: none; line-height: 1; }
.nav-logo-text { display: flex; flex-direction: column; }
.nav-logo-text .n1 { font-family: var(--serif); font-size: 17px; font-weight: 500; color: #2756C5; letter-spacing: 0.12em; line-height: 1; }
.nav-logo-text .n2 { font-size: 8px; font-weight: 400; color: var(--blue); letter-spacing: 0.28em; text-transform: uppercase; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; }
.nav-links a {
  font-size: 11.5px; font-weight: 400; color: var(--muted);
  text-decoration: none; padding: 6px 16px; cursor: pointer;
  position: relative; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 16px;
  width: calc(100% - 32px); height: 1px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.on { color: var(--ink); font-weight: 500; }
.nav-links a.on::after { transform: scaleX(1); }
.nav-cta-btn {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--ink);
  border: none; padding: 10px 22px; border-radius: 3px; cursor: pointer;
  margin-left: 16px; transition: background .2s;
}
.nav-cta-btn:hover { background: var(--blue); }

/* ── HERO ── */
.hero {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.hero-left {
  background: var(--ink);
  padding: 60px 64px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.hero-left::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(39,86,197,.15) 0%, transparent 60%);
  pointer-events: none;
}
.hero-year {
  position: absolute; top: 48px; left: 64px;
  font-family: var(--serif); font-size: 11px; color: rgba(255,255,255,.3);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.hero-line {
  position: absolute; top: 48px; right: 64px;
  width: 48px; height: 1px; background: rgba(255,255,255,.2);
}
.hero-eyebrow {
  font-size: 10px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--blue); }
.hero h1 {
  font-family: var(--serif); font-size: clamp(48px, 5.5vw, 72px);
   line-height: 1.08; color: #fff;
  margin-bottom: 28px; letter-spacing: -0.01em;
}
.hero h1 strong { font-weight: 500; }
.hero-sub {
  font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.8;
  max-width: 340px; margin-bottom: 48px;
}
.hero-actions { display: flex; align-items: center; gap: 20px; }
.btn-light {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: #fff; color: var(--ink); border: none;
  padding: 14px 28px; border-radius: 3px; cursor: pointer; transition: background .2s, color .2s;
}
.btn-light:hover { background: var(--blue); color: #fff; }
.btn-dark {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: none;
  padding: 14px 28px; border-radius: 3px; cursor: pointer; transition: background .2s;
}
.btn-dark:hover { background: var(--blue); }
.btn-ghost {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: rgba(255,255,255,.55);
  border: 0.5px solid rgba(255,255,255,.2);
  padding: 14px 28px; border-radius: 3px; cursor: pointer; transition: all .2s;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.hero-stats {
  margin-top: 48px; padding-top: 28px; padding-bottom: 4px;
  border-top: 0.5px solid rgba(255,255,255,.1);
  display: flex; gap: 40px;
}
.hstat-num {
  font-family: var(--serif); font-size: 36px; 
  color: #fff; line-height: 1;
}
.hstat-lbl { font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px; }

.hero-right {
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background-size: cover !important;
  background-position: center center !important;
}
.hero-right-inner {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #C8D5E8 0%, #96AEC8 45%, #5A7898 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
}
.hero-ph-icon { font-size: 56px; opacity: .2; }
.hero-ph-txt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hero-corner {
  position: absolute; bottom: 32px; right: 32px;
  font-family: var(--serif); font-size: 11px; color: rgba(0,0,0,.25);
  letter-spacing: .1em; text-transform: uppercase;
  writing-mode: vertical-rl; text-orientation: mixed;
}

/* ── MARQUEE ── */
.marquee-wrap {
  background: var(--ink); padding: 14px 0;
  border-top: 0.5px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.marquee-track {
  display: flex; gap: 0; white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 0 32px; font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.marquee-dot { width: 3px; height: 3px; background: var(--blue); border-radius: 50%; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SERVICES SECTION ── */
.services-section { padding: 100px 48px; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
.section-eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.section-title { font-family: var(--serif); font-size: clamp(32px, 3.5vw, 46px);  color: var(--ink); line-height: 1.1; }
.link-underline {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; cursor: pointer;
  position: relative; padding-bottom: 2px;
}
.link-underline::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.link-underline:hover { color: var(--ink); }
.link-underline:hover::after { transform: scaleX(1); }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 0.5px solid var(--rule); }
.svc-card {
  background: #fff; padding: 40px 36px;
  position: relative; overflow: hidden;
  transition: background .3s;
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.svc-card:hover { background: var(--cream); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-num { font-family: var(--serif); font-size: 13px; color: var(--rule); font-weight: 400; letter-spacing: .1em; margin-bottom: 24px; display: block; }
.svc-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.svc-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.svc-tag { display: inline-block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); background: rgba(39,86,197,.06); padding: 4px 10px; border-radius: 2px; margin-top: 16px; }

/* ── PROCESS ── */
.process-section { background: var(--cream); padding: 100px 48px; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 0.5px solid var(--rule); }
.process-step { padding: 40px 0 0; border-right: 0.5px solid var(--rule); padding-right: 40px; padding-left: 0; }
.process-step:first-child { padding-left: 0; }
.process-step:last-child { border-right: none; padding-right: 0; }
.process-step + .process-step { padding-left: 40px; }
.pstep-n { font-family: var(--serif); font-size: 64px;  color: rgba(24,24,26,.07); line-height: 1; margin-bottom: 20px; }
.pstep-title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.pstep-txt { font-size: 13px; color: var(--muted); line-height: 1.75; }

/* ── WHY ── */
.why-section { padding: 100px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-left .section-eyebrow { margin-bottom: 12px; }
.why-left .section-title { margin-bottom: 24px; }
.why-left p { font-size: 15px; color: var(--muted); line-height: 1.85; margin-bottom: 36px; max-width: 420px; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.why-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.why-check { width: 18px; height: 18px; background: var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.why-check svg { width: 8px; height: 8px; }
.why-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-card {
  background: var(--cream); border: 0.5px solid var(--rule);
  padding: 32px 24px; border-radius: 4px;
  position: relative; overflow: hidden;
}
.why-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.why-card:hover::after { transform: scaleX(1); }
.why-big { font-family: var(--serif); font-size: 48px;  color: var(--blue); line-height: 1; margin-bottom: 8px; }
.why-lbl { font-size: 11px; color: var(--muted); letter-spacing: .06em; line-height: 1.4; }

/* ── PROYECTOS CAROUSEL ── */
.carousel-section { background: var(--ink); }
.carousel-header { padding: 64px 48px 40px; display: flex; align-items: flex-end; justify-content: space-between; }
.carousel-header .section-eyebrow { color: rgba(255,255,255,.35); }
.carousel-header .section-title { color: #fff; }
.carousel-header a { color: rgba(255,255,255,.4); }
.carousel-header a:hover { color: #fff; }
.carousel-header a::after { background: #fff; }

.c-wrap { position: relative; height: 420px; overflow: hidden; }
.c-track { display: flex; height: 100%; transition: transform .85s cubic-bezier(.77,0,.175,1); }
.c-slide { min-width: 100%; height: 100%; position: relative; flex-shrink: 0; }
.c-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 72px; transition: transform 10s ease; }
.c-slide:not(.active-slide) .c-img { transform: scale(1.04); }
.c-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 80px 48px 40px;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.c-tag { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.c-tag::before { content: ''; display: block; width: 20px; height: 1px; background: var(--blue); }
.c-title { font-family: var(--serif); font-size: 34px;  color: #fff; margin-bottom: 12px; line-height: 1.15; }
.c-meta { display: flex; gap: 24px; font-size: 12px; color: rgba(255,255,255,.35); }
.c-prev, .c-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 0.5px solid rgba(255,255,255,.15);
  color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; transition: background .2s;
}
.c-prev { left: 24px; }
.c-next { right: 24px; }
.c-prev:hover, .c-next:hover { background: rgba(255,255,255,.15); }
.c-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--blue); transition: width .08s linear; z-index: 10; }

.c-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: #000; }
.c-thumb {
  height: 88px; cursor: pointer; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 10px 14px;
  transition: opacity .2s;
}
.c-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); transition: opacity .2s; }
.c-thumb:hover::after { opacity: .25; }
.c-thumb.on::after { opacity: 0; outline: 1.5px solid rgba(255,255,255,.6); outline-offset: -1.5px; }
.c-thumb-label { position: relative; z-index: 1; font-size: 10px; color: #fff; line-height: 1.3; }
.c-thumb-tag { font-size: 9px; color: rgba(255,255,255,.4); display: block; margin-bottom: 2px; letter-spacing: .06em; }

.c-info-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.03);
  border-top: 0.5px solid rgba(255,255,255,.06);
}
.c-info-cell { padding: 24px 32px; border-right: 0.5px solid rgba(255,255,255,.06); }
.c-info-cell:last-child { border-right: none; }
.c-info-lbl { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 6px; }
.c-info-val { font-family: var(--serif); font-size: 17px; font-weight: 400; color: rgba(255,255,255,.8); }

.proyectos-cta {
  padding: 48px; display: flex; align-items: center; justify-content: space-between;
  border-top: 0.5px solid rgba(255,255,255,.06);
}
.proyectos-cta h3 { font-family: var(--serif); font-size: 26px;  color: #fff; margin-bottom: 6px; }
.proyectos-cta p { font-size: 13px; color: rgba(255,255,255,.35); }

/* ── BLOG ── */
.blog-section { padding: 100px 48px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.blog-card { cursor: pointer; group: true; }
.blog-img-wrap { height: 200px; overflow: hidden; margin-bottom: 24px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; }
.blog-img-wrap::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .3s; }
.blog-card:hover .blog-img-wrap::after { background: rgba(0,0,0,.06); }
.blog-cat { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.blog-title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); line-height: 1.3; margin-bottom: 10px; }
.blog-excerpt { font-size: 13px; color: var(--muted); line-height: 1.7; }
.blog-date { font-size: 10px; color: rgba(24,24,26,.3); margin-top: 14px; letter-spacing: .08em; }
.blog-rule { width: 0; height: 1px; background: var(--blue); margin-top: 14px; transition: width .3s; }
.blog-card:hover .blog-rule { width: 40px; }

/* ── FAQ ── */
.faq-section { background: var(--cream); padding: 100px 48px; }
.faq-cols { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; margin-top: 56px; }
.faq-sticky { position: sticky; top: 80px; }
.faq-sticky p { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 28px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 0.5px solid var(--rule); }
.faq-item:last-child { border-bottom: 0.5px solid var(--rule); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; cursor: pointer;
  font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--ink);
  transition: color .2s;
}
.faq-q:hover { color: var(--blue); }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--muted);
  transition: transform .25s, opacity .25s;
}
.faq-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a { display: none; padding: 0 0 22px; font-size: 14px; color: var(--muted); line-height: 1.8; max-width: 520px; }
.faq-item.open .faq-a { display: block; }

/* ── NOSOTROS ── */
.nosotros-section { padding: 0; }
.nosotros-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.nosotros-dark { background: var(--ink); padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.nosotros-dark .section-eyebrow { color: rgba(255,255,255,.3); margin-bottom: 12px; }
.nosotros-dark .section-title { color: #fff; margin-bottom: 20px; }
.nosotros-dark p { font-size: 15px; color: rgba(255,255,255,.4); line-height: 1.85; max-width: 380px; }
.nosotros-img { background: linear-gradient(160deg, #B8CAE0, #6B8DB2); display: flex; align-items: center; justify-content: center; font-size: 64px; opacity: 1; }

/* ── CONTACTO ── */
.contact-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.contact-dark { background: var(--ink); padding: 80px 64px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-dark .section-eyebrow { color: rgba(255,255,255,.3); margin-bottom: 12px; }
.contact-dark .section-title { color: #fff; margin-bottom: 20px; }
.contact-dark > p { font-size: 14px; color: rgba(255,255,255,.4); line-height: 1.8; max-width: 340px; margin-bottom: 48px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; }
.contact-line { display: flex; flex-direction: column; gap: 3px; }
.contact-line .cl { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.25); }
.contact-line .cv { font-size: 15px; color: rgba(255,255,255,.75); font-family: var(--serif); }
.contact-form-wrap { background: var(--cream); padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.contact-form-wrap h3 { font-family: var(--serif); font-size: 28px;  color: var(--ink); margin-bottom: 36px; }
.cform { display: flex; flex-direction: column; gap: 20px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf { display: flex; flex-direction: column; gap: 6px; }
.cf label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cf input, .cf textarea, .cf select {
  border: none; border-bottom: 1px solid var(--rule);
  background: transparent; padding: 10px 0; font-family: var(--sans);
  font-size: 14px; color: var(--ink); outline: none; resize: none;
  transition: border-color .2s;
}
.cf input:focus, .cf textarea:focus, .cf select:focus { border-color: var(--blue); }
.cf textarea { min-height: 80px; }
.cf select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.submit-btn {
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; background: var(--ink); color: #fff; border: none;
  padding: 16px 32px; border-radius: 3px; cursor: pointer;
  align-self: flex-start; margin-top: 8px; transition: background .2s;
}
.submit-btn:hover { background: var(--blue); }

/* ── FOOTER ── */
footer {
  background: var(--ink);
  border-top: 0.5px solid rgba(255,255,255,.06);
  padding: 64px 48px 0;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.8fr; gap: 48px; padding-bottom: 56px; border-bottom: 0.5px solid rgba(255,255,255,.06); }
.fcol-title { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 22px; }
.flink { font-size: 13px; color: rgba(255,255,255,.4); display: block; margin-bottom: 12px; text-decoration: none; cursor: pointer; transition: color .2s; }
.flink:hover { color: #fff; }
.footer-phone { font-family: var(--serif); font-size: 28px;  color: #fff; text-decoration: none; display: block; margin-bottom: 6px; }
.footer-email { font-size: 13px; color: var(--blue); text-decoration: none; display: block; margin-bottom: 20px; }
.footer-social { display: flex; gap: 8px; }
.fsoc { width: 34px; height: 34px; border: 0.5px solid rgba(255,255,255,.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); cursor: pointer; transition: all .2s; text-decoration: none; }
.fsoc:hover { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08); }
.fsoc:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
.footer-copy { font-size: 11px; color: rgba(255,255,255,.18); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 11px; color: rgba(255,255,255,.18); text-decoration: none; cursor: pointer; transition: color .2s; }
.footer-legal a:hover { color: rgba(255,255,255,.5); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .75s cubic-bezier(.22,1,.36,1) both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .18s; }
.fade-up-3 { animation-delay: .30s; }
.fade-up-4 { animation-delay: .42s; }
.fade-up-5 { animation-delay: .56s; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: .0s; }
.reveal-2 { transition-delay: .12s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .36s; }

/* ── MOBILE NAV ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  outline: none;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: rgba(24,24,26,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 199;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 40px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  cursor: pointer;
  padding: 14px 0;
  width: 100%;
  text-align: center;
  border-bottom: 0.5px solid rgba(255,255,255,.06);
  transition: color .2s;
  animation: fadeUp .5s ease both;
}
.nav-mobile-link:nth-child(1){animation-delay:.05s;}
.nav-mobile-link:nth-child(2){animation-delay:.1s;}
.nav-mobile-link:nth-child(3){animation-delay:.15s;}
.nav-mobile-link:nth-child(4){animation-delay:.2s;}
.nav-mobile-link:nth-child(5){animation-delay:.25s;}
.nav-mobile-link:nth-child(6){animation-delay:.3s;}
.nav-mobile-link:hover { color: #fff; }
.nav-mobile-cta {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  border: none;
  padding: 16px 40px;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
  animation: fadeUp .5s ease .35s both;
}
.nav-mobile-contact {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.25);
  text-align: center;
  animation: fadeUp .5s ease .4s both;
}
.nav-mobile-contact a { color: rgba(255,255,255,.45); text-decoration: none; }




/* El botón de WhatsApp tapaba el botón ACEPTAR del banner de cookies.
   Mientras el banner esté visible, el botón sube por encima de él. */
.wa { transition: transform .2s, box-shadow .2s, bottom .4s cubic-bezier(.22,1,.36,1); }
body.cookies-visibles .wa { bottom: 120px !important; }
@media (max-width: 768px) {
  body.cookies-visibles .wa { bottom: 190px !important; }
}
/* Sitio libre a la derecha para que el banner no quede debajo del botón */
.cookie-banner { padding-right: 96px !important; }
@media (max-width: 768px) {
  .cookie-banner { padding-right: 24px !important; }
}

/* ==========================================================================
   ADAPTACIÓN A MÓVIL DE LAS SECCIONES CON ESTILOS EN LÍNEA
   Estas secciones llevan el estilo escrito dentro de la propia etiqueta, así
   que hay que forzarlo con !important para poder cambiarlo en pantallas
   pequeñas. Evita que los textos se salgan o se solapen.
   ========================================================================== */
@media (max-width: 768px) {
  /* Márgenes laterales: 48-64px en un móvil de 360px no deja sitio al texto */
  [style*="padding:80px 48px"],
  [style*="padding:64px 48px"],
  [style*="padding:48px;"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  [style*="padding:60px 64px"],
  [style*="padding:48px 64px"] {
    padding: 44px 22px !important;
  }

  /* Barras de llamada a la acción: en móvil, texto arriba y botón debajo */
  [style*="padding:44px 48px"] {
    padding: 36px 22px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* Cuadrículas de 3 y 4 columnas → una sola columna */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  [style*="grid-template-columns:1fr 1fr;"] {
    grid-template-columns: 1fr !important;
  }

  /* Títulos grandes: 42px se sale en pantallas estrechas */
  [style*="font-size:42px"] { font-size: 30px !important; line-height: 1.15 !important; }
  [style*="font-size:46px"] { font-size: 32px !important; line-height: 1.15 !important; }

  /* Cabeceras de página interiores: dejar respirar el titular */
  .hero { min-height: auto !important; max-height: none !important; }

  /* Rótulos sobre las fotos: más pequeños para que no tapen la imagen */
  [style*="position:absolute;bottom:12px;left:12px"],
  [style*="position:absolute;bottom:14px;left:14px"] {
    font-size: 9px !important;
    max-width: calc(100% - 28px);
  }

  /* Tabla de la política de cookies: sin scroll horizontal */
  table { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
  [style*="padding:80px 48px"],
  [style*="padding:64px 48px"],
  [style*="padding:48px;"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  [style*="font-size:42px"] { font-size: 26px !important; }
  .hstat-num { font-size: 24px !important; }
}

/* SECCIONES NUEVAS DE LA PORTADA — adaptación a móvil */
@media (max-width: 900px) {
  .h-pasos { grid-template-columns: 1fr 1fr !important; }
  .h-form  { grid-template-columns: 1fr !important; gap: 36px !important; }
  .h-faq   { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .h-pasos     { grid-template-columns: 1fr !important; gap: 22px !important; }
  .h-procfotos { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .hero-year, .hero-line { display: none; }
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-cta-btn { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-text .n2 { display: none; }

  .hero { grid-template-columns: 1fr; max-height: none; min-height: auto; }
  .hero-left { padding: 48px 24px 40px; min-height: 480px; }
  .hero-right { min-height: 240px; }
  .hero h1 { font-size: 42px; }
  .hero-stats { gap: 24px; }
  .hstat-num { font-size: 28px; }

  .marquee-wrap { padding: 12px 0; }

  .services-section { padding: 56px 24px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .svc-grid { grid-template-columns: 1fr; }

  .process-section { padding: 56px 24px; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 24px; border-top: none; }
  .process-step { border-right: none; padding: 0 !important; border-top: 0.5px solid var(--rule); padding-top: 24px !important; }

  .why-section { grid-template-columns: 1fr; padding: 56px 24px; gap: 40px; }
  .why-right { grid-template-columns: 1fr 1fr; }

  .nosotros-hero { grid-template-columns: 1fr; }
  .nosotros-dark { padding: 48px 24px; }
  .nosotros-img { min-height: 200px; }

  .why-wrap { padding: 56px 24px; }
  .why-2col { grid-template-columns: 1fr; gap: 40px; }

  .contact-section { grid-template-columns: 1fr; }
  .contact-dark { padding: 48px 24px; }
  .contact-form-wrap { padding: 48px 24px; }
  .cform-row { grid-template-columns: 1fr; }

  .carousel-header { padding: 40px 24px 28px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .c-wrap { height: 260px; }
  .c-info { padding: 40px 24px 28px; }
  .c-title { font-size: 22px; }
  .c-prev { left: 12px; width: 40px; height: 40px; }
  .c-next { right: 12px; width: 40px; height: 40px; }
  .c-thumbs { grid-template-columns: repeat(5, 1fr); }
  .c-thumb { height: 64px; }
  .c-info-bar { grid-template-columns: 1fr 1fr; }
  .c-info-cell:nth-child(2) { border-right: none; }
  .proyectos-cta { padding: 32px 24px; flex-direction: column; gap: 20px; align-items: flex-start; }

  .blog-section { padding: 56px 24px; }
  .blog-grid { grid-template-columns: 1fr; }

  .faq-section { padding: 56px 24px; }
  .faq-cols { grid-template-columns: 1fr; gap: 32px; }
  .faq-sticky { position: static; }

  footer { padding: 48px 24px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > div:last-child { grid-column: span 2; }

  .wa { bottom: 20px; right: 20px; width: 46px; height: 46px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 34px; }
  .process-steps { grid-template-columns: 1fr; }
  .why-right { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:last-child { grid-column: span 1; }
  .c-meta { flex-wrap: wrap; gap: 8px; }
}


/* ── ANTES / DESPUÉS ── */
.ba-section { padding: 100px 48px; background: var(--ink); }
.ba-section .section-eyebrow { color: rgba(255,255,255,.3); margin-bottom: 12px; }
.ba-section .section-title { color: #fff; margin-bottom: 56px; }

.ba-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }

.ba-item { position: relative; overflow: hidden; cursor: col-resize; user-select: none; }
.ba-wrap { position: relative; height: 320px; overflow: hidden; }
.ba-before, .ba-after {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
}
.ba-after { clip-path: inset(0 0 0 50%); transition: clip-path .0s; }
.ba-divider {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: #fff;
  left: 50%; transform: translateX(-50%);
  z-index: 10; pointer-events: none;
  transition: left .0s;
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 11; pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  font-size: 13px; color: var(--ink); font-weight: 600;
}
.ba-labels {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 16px; z-index: 12; pointer-events: none;
}
.ba-label {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.7); background: rgba(0,0,0,.45);
  padding: 4px 10px; border-radius: 2px;
}
.ba-info { padding: 18px 0 0; }
.ba-info-tag { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.ba-info-title { font-family: var(--serif); font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.3; }
.ba-info-meta { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 4px; }

@media (max-width: 768px) {
  .ba-section { padding: 56px 24px; }
  .ba-grid { grid-template-columns: 1fr; gap: 32px; }
  .ba-wrap { height: 280px; }
}


/* ── COOKIE BANNER ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(24,24,26,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 0.5px solid rgba(255,255,255,.1);
  padding: 20px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  z-index: 99998;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-txt { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; max-width: 640px; }
.cookie-txt a { color: rgba(255,255,255,.75); text-decoration: underline; cursor: pointer; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-accept {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: #fff; color: var(--ink); border: none;
  padding: 10px 22px; border-radius: 3px; cursor: pointer;
  transition: background .2s;
}
.cookie-accept:hover { background: var(--blue); color: #fff; }
.cookie-reject {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: rgba(255,255,255,.4);
  border: 0.5px solid rgba(255,255,255,.15);
  padding: 10px 22px; border-radius: 3px; cursor: pointer;
  transition: all .2s;
}
.cookie-reject:hover { color: #fff; border-color: rgba(255,255,255,.4); }
@media(max-width:768px){
  .cookie-banner { flex-direction: column; align-items: flex-start; padding: 20px 24px; }
  .cookie-actions { width: 100%; }
  .cookie-accept, .cookie-reject { flex: 1; text-align: center; }
}

/* ── LEGAL PAGES ── */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 80px 48px; }
.legal-wrap h1 { font-family: var(--serif); font-size: 38px; font-weight: 400; color: var(--ink); margin-bottom: 12px; }
.legal-updated { font-size: 12px; color: var(--muted); margin-bottom: 56px; letter-spacing: .06em; }
.legal-wrap h2 { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); margin: 40px 0 14px; }
.legal-wrap p { font-size: 14px; color: #444; line-height: 1.85; margin-bottom: 16px; }
.legal-wrap ul { padding-left: 20px; margin-bottom: 16px; }
.legal-wrap ul li { font-size: 14px; color: #444; line-height: 1.85; margin-bottom: 6px; }
.legal-wrap a { color: var(--blue); }
.legal-nav { display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }
.legal-tab {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 18px; border: 0.5px solid var(--rule); border-radius: 3px;
  cursor: pointer; color: var(--muted); transition: all .2s; background: #fff;
  font-family: var(--sans);
}
.legal-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.legal-section { display: none; }
.legal-section.on { display: block; }
@media(max-width:768px){ .legal-wrap { padding: 48px 24px; } }


/* ── COOKIE BANNER ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(18,18,20,0.97);
  backdrop-filter: blur(12px);
  border-top: 0.5px solid rgba(255,255,255,.1);
  padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  z-index: 9998;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-txt { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; max-width: 600px; }
.cookie-txt a { color: var(--blue); text-decoration: none; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 3px; cursor: pointer; border: none;
  white-space: nowrap;
}
.cookie-accept { background: #fff; color: var(--ink); }
.cookie-reject { background: transparent; color: rgba(255,255,255,.4); border: 0.5px solid rgba(255,255,255,.15); }
@media(max-width:768px){
  .cookie-banner { flex-direction: column; align-items: flex-start; padding: 20px 24px; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}


/* ── RESPONSIVE COMPLETO ── */

/* Tablet grande (1024px) */
@media (max-width: 1024px) {
  .nav { padding: 0 32px; }
  .hero-left { padding: 60px 40px; }
  .services-section { padding: 72px 32px; }
  .process-section { padding: 72px 32px; }
  .why-section { padding: 72px 32px; gap: 48px; }
  .blog-section { padding: 72px 32px; }
  .faq-section { padding: 72px 32px; }
  .contact-dark { padding: 60px 40px; }
  .contact-form-wrap { padding: 60px 40px; }
  .nosotros-dark { padding: 60px 40px; }
  footer { padding: 48px 32px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}

/* Tablet (768px) */
@media (max-width: 768px) {
  /* NAV */
  .nav { padding: 0 20px; height: 56px; }
  .nav-links { display: none; }
  .nav-cta-btn { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-text .n2 { display: none; }

  /* HERO */
  .hero { grid-template-columns: 1fr; height: auto; min-height: auto; }
  .hero-left { padding: 48px 24px 40px; min-height: 420px; }
  .hero h1 { font-size: 38px; }
  .hero-right { height: 260px; min-height: 260px; }
  .hero-year, .hero-line { display: none; }
  .hero-stats { gap: 24px; margin-top: 40px; }
  .hstat-num { font-size: 28px; }

  /* MARQUEE */
  .marquee-wrap { padding: 10px 0; }

  /* SERVICES */
  .services-section { padding: 56px 24px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { padding: 28px 24px; }

  /* PROCESS */
  .process-section { padding: 56px 24px; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .process-step { border-right: none !important; padding-right: 0 !important; padding-left: 0 !important; border-top: 0.5px solid var(--rule); padding-top: 24px !important; }

  /* WHY */
  .why-section { grid-template-columns: 1fr; padding: 56px 24px; gap: 40px; }
  .why-right { grid-template-columns: 1fr 1fr; }
  .why-big { font-size: 36px; }

  /* NOSOTROS */
  .nosotros-hero { grid-template-columns: 1fr; }
  .nosotros-dark { padding: 48px 24px; min-height: auto; }
  .nosotros-img { height: 220px !important; min-height: 220px !important; }

  /* CONTACT */
  .contact-section { grid-template-columns: 1fr; min-height: auto; }
  .contact-dark { padding: 48px 24px; }
  .contact-form-wrap { padding: 48px 24px; }
  .cform-row { grid-template-columns: 1fr; }

  /* BLOG */
  .blog-section { padding: 56px 24px; }
  .blog-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-section { padding: 56px 24px; }
  .faq-cols { grid-template-columns: 1fr; gap: 32px; }
  .faq-sticky { position: static; }

  /* PROYECTOS */
  .proyectos-cta { padding: 32px 24px; flex-direction: column; gap: 20px; align-items: flex-start; }

  /* FOOTER */
  footer { padding: 48px 24px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-phone { font-size: 22px; }

  /* WA */
  .wa { bottom: 20px; right: 20px; width: 46px; height: 46px; }

  /* OBRA STRIP */
  .nosotros-obra-strip { grid-template-columns: 1fr !important; gap: 8px !important; }
  .nosotros-obra-strip > div { height: 200px !important; }

  /* SUB HEROES */
  .hero[style*="260px"], .hero[style*="240px"] {
    height: auto !important;
    min-height: 200px !important;
  }
}

/* Móvil (480px) */
@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .hero-left { padding: 36px 20px 32px; min-height: 380px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .btn-light, .btn-ghost, .btn-dark { width: 100%; text-align: center; justify-content: center; padding: 13px 20px; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .process-steps { grid-template-columns: 1fr; }
  .why-right { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .svc-num { font-size: 11px; }
  .section-title { font-size: 28px !important; }
  .nav-mobile-link { font-size: 28px; padding: 12px 0; }
  .cform-row { grid-template-columns: 1fr; }
  .contact-dark, .contact-form-wrap { padding: 36px 20px; }
  .nosotros-dark { padding: 36px 20px; }
  .faq-section, .blog-section, .services-section, .process-section { padding: 48px 20px; }
  .why-section { padding: 48px 20px; }
  footer { padding: 40px 20px 0; }
  .why-card { padding: 20px 16px; }
  .why-big { font-size: 32px; }
  .blog-img-wrap { height: 160px; }
}

/* Móvil pequeño (360px) */



/* ==========================================================================
   VERSIÓN TODO EN DM SANS
   Al quitar la serif, los titulares pierden el contraste que los hacía
   destacar. Se recupera con peso (600/700) y tracking cerrado, que es lo
   que hace que una sans geométrica funcione como titular.
   ========================================================================== */
.section-title, .c-title, .hstat-num, .why-big, .pstep-n, .footer-phone {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.section-title { letter-spacing: -0.03em; line-height: 1.08; }
.hstat-num, .why-big, .pstep-n { font-weight: 700; letter-spacing: -0.035em; }
.pstep-title, .blog-title, .faq-q, .ba-info-title, .c-info-val {
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav-mobile-link { font-weight: 500; letter-spacing: -0.02em; }
.nav-logo-text .n1 { font-weight: 700; letter-spacing: 0.06em; }
.svc-num, .hero-year, .hero-corner { font-weight: 500; }
.contact-line .cv { font-weight: 400; }

/* Titulares escritos directamente en el HTML generado */
[style*="var(--serif)"] { font-weight: 500; letter-spacing: -0.015em; }
[style*="var(--serif);font-size:42px"],
[style*="var(--serif); font-size: 42px"] {
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

/* La serif compensaba ópticamente; la sans a 64px pesa demasiado */
.pstep-n { font-size: 56px; }



/* Opiniones de clientes en móvil */
@media (max-width: 900px) { .op-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) { .op-grid { grid-template-columns: 1fr !important; } }

/* El botón de WhatsApp se montaba sobre los enlaces legales del pie.
   Le damos sitio libre a la derecha en la barra inferior del footer. */
.footer-bottom { flex-wrap: wrap; gap: 12px; padding-right: 76px; }
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
    padding-bottom: 78px;   /* hueco para que el botón no tape nada */
  }
  .footer-legal { flex-wrap: wrap; gap: 16px; }
}

/* La foto de la cabecera de "Nosotros" quedaba pegada a la tira de fotos
   del proceso: parecían una sola imagen partida. Las separamos. */
@media (max-width: 768px) {
  .nosotros-hero { min-height: auto !important; }
  .nosotros-img  { height: 240px !important; min-height: 240px !important; }

  .proc-strip {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 22px !important;
    margin-bottom: 0 !important;
  }
  .proc-strip > div { height: 220px !important; }
}
@media (max-width: 420px) {
  .proc-strip { padding: 18px !important; gap: 12px !important; }
  .proc-strip > div { height: 190px !important; }
}

/* ==========================================================================
   REPASO FINAL DE MÓVIL
   ========================================================================== */
/* Red de seguridad: nada puede provocar barra de desplazamiento lateral */
/* 'clip' en vez de 'hidden': hidden convierte el body en contenedor de
   desplazamiento y eso rompe el position:sticky de la barra superior. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, table { max-width: 100%; }

@media (max-width: 768px) {
  /* Números decorativos gigantes del proceso */
  .pstep-n { font-size: 44px !important; margin-bottom: 12px !important; }

  /* El menú desplegable arranca justo debajo de la barra */
  .nav-mobile-menu { padding-left: 24px !important; padding-right: 24px !important; }

  /* Las 5 miniaturas del carrusel se quedan en 40px de ancho: mejor 3 */
  .c-thumbs { grid-template-columns: repeat(3, 1fr) !important; }

  /* Cinta de texto en movimiento: un poco más compacta */
  .marquee-item { padding: 0 20px !important; font-size: 10px !important; }

  /* Cifras destacadas de "por qué nosotros" */
  .why-right { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

@media (max-width: 420px) {
  .nav-mobile-link { font-size: 24px !important; padding: 10px 0 !important; }
  .why-right { grid-template-columns: 1fr !important; }
  .pstep-n { font-size: 36px !important; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 26px; }
  .hstat-num { font-size: 24px; }
  .nav { padding: 0 16px; }
}


/* Los titulares principales usan la clase .section-title; al ser ahora <h1>
   hay que neutralizar el margen que el navegador aplica por defecto. */
h1.section-title { margin: 0; font-weight: inherit; }

/* =========================================================================
   MENÚ MÓVIL — la barra superior se queda fija y visible por encima
   ========================================================================= */
.nav-mobile-menu {
  top: 0 !important;              /* cubre toda la pantalla, sin franja suelta */
  padding-top: 64px !important;   /* el contenido arranca bajo la barra */
  overflow-y: auto;               /* si no cabe, se desplaza dentro del menú */
}
@media (max-width: 768px) {
  .nav-mobile-menu { padding-top: 56px !important; }
}

/* Con el menú abierto anclamos la barra: así el logo no se mueve
   y el aspa siempre queda donde el dedo la dejó. */
body.menu-abierto .nav {
  position: fixed;
  top: 0; left: 0; right: 0;
}
body.menu-abierto { overflow: hidden; }

/* El botón de WhatsApp estorba con el menú abierto */
body.menu-abierto .wa { opacity: 0; pointer-events: none; }
.wa { transition: opacity .2s, transform .2s, box-shadow .2s, bottom .4s cubic-bezier(.22,1,.36,1); }

/* =========================================================================
   BOTONES QUE SON ENLACES
   Los botones de "Solicitar presupuesto" y similares son <a> para poder
   navegar. Estas reglas hacen que se vean y se comporten como botones.
   ========================================================================= */
a.btn-dark, a.btn-light, a.btn-ghost, a.nav-cta-btn, a.nav-mobile-cta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}
a.nav-mobile-cta { display: flex; width: 100%; }

/* Las zonas del pie son informativas, no enlaces: sin cursor de mano ni hover. */
.flink-txt { display: block; cursor: default; }
.flink-txt:hover { color: inherit; }