/* Demoliciones Higueras — sitio estático (réplica del sitio en Wix).
   Layout: columna de 980px centrada, bandas de color a todo el ancho, como el original. */
:root {
  --red: #DD0235;        /* rojo de marca: botones, menú activo, banda de servicios */
  --red-2: #EE003C;      /* rojo secundario: botones cuadrados, cifra, subrayados */
  --pink: #FD2658;       /* etiqueta del inicio */
  --red-dark: #BC002C;   /* cita en Nosotros */
  --ink: #000000;
  --ink-2: #292929;
  --gray: #595959;
  --gray-2: #6E6E6E;
  --line: #C7C7C7;
  --paper: #FFFFFF;
  --paper-2: #E8E7E7;
  --paper-3: #F8F7F7;
  --paper-4: #E8E6E6;
  --footer: #333232;
  --hero-under: #242323;
  --header-bg: rgba(89, 89, 89, 0.6);
  --wa: #25D366;
  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --helv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header-h: 57px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--footer);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
:focus-visible { outline: 2px solid var(--red-2); outline-offset: 3px; }

.wrap {
  max-width: 980px;
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  box-sizing: content-box;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 8px 12px;
}
.skip:focus { top: 8px; }

/* ---------- Encabezado ---------- */
.site-header {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--header-bg);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 130px;
  height: var(--header-h);
}
.logo { display: block; flex: none; }
.logo img { width: 196px; height: 49px; object-fit: contain; object-position: left center; }
.nav { display: flex; align-items: center; }
.nav a {
  color: var(--paper);
  font: 700 14px/1 var(--font);
  text-decoration: none;
  padding: 10px 20px;
  white-space: nowrap;
}
.nav a:hover { color: var(--pink); }
.nav a[aria-current="page"] { color: var(--red); }
.menu-btn {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--paper);
  cursor: pointer; padding: 10px;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  content: ""; display: block; height: 2px; width: 24px; background: currentColor;
  position: relative; transition: transform .2s, opacity .2s;
}
.menu-btn span::before { position: absolute; top: -7px; }
.menu-btn span::after { position: absolute; top: 7px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-7px) rotate(-45deg); }

main { display: block; }
.page-top { padding-top: var(--header-h); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 40px;
  padding: 0 24px;
  border: 1px solid transparent;
  font: 400 16px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn--pill { border-radius: 20px; min-width: 202px; }
.btn--sq { border-radius: 0; font-weight: 500; letter-spacing: 1.6px; }
.btn--white { background: var(--paper); color: var(--red); }
.btn--white:hover { background: var(--paper-4); }
.btn--red { background: var(--red); color: var(--paper); }
.btn--red:hover { background: var(--red-dark); }
.btn--red2 { background: var(--red-2); color: var(--paper); border-color: var(--red-2); }
.btn--red2:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn--black { background: var(--ink); color: var(--paper); font-weight: 300; letter-spacing: 0; }
.btn--black:hover { background: var(--ink-2); }
.btn--outline { background: transparent; color: var(--red-2); border-color: var(--red-2); }
.btn--outline:hover { background: var(--red-2); color: var(--paper); }
.btn svg { width: 26px; height: 10px; flex: none; }

/* ---------- Héroes ---------- */
.hero {
  position: relative;
  background-color: var(--hero-under);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1024px) and (hover: hover) {
  .hero--fixed { background-attachment: fixed; }
}
.hero--inicio {
  background-image: url("../img/hero-inicio.jpg");
  color: var(--paper);
  min-height: 642px;
  padding-block: 176px 72px;
}
.hero__inner { position: relative; padding-left: 47px; }
.side-text {
  position: absolute;
  left: 0; top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 300 11px/14px var(--font);
  white-space: nowrap;
}
.eyebrow { font: 400 16px/22px var(--font); color: var(--pink); }
.hero--inicio h1 {
  font: 800 50px/50px var(--font);
  letter-spacing: -2.5px;
  margin-top: 12px;
  max-width: 835px;
  text-wrap: balance;
}
.hero__lead { font: 300 20px/25px var(--font); max-width: 663px; margin-top: 17px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 43px; }

/* ---------- Inicio: experiencia ---------- */
.exp { padding-block: 41px 89px; }
.exp__row { display: flex; align-items: flex-start; }
.exp__text { width: 596px; flex: none; }
.label { font: 700 14px/19.6px var(--font); color: var(--gray); }
.exp__big { font: 300 40px/52px var(--font); letter-spacing: -2px; margin-top: 17px; }
.exp .btn { margin-top: 64px; min-width: 266px; margin-left: 2px; }
.exp__line { flex: none; width: 3px; height: 334px; background: var(--ink); margin: 33px 0 0 35px; }
.exp__badge { flex: none; width: 205px; margin: 43px 0 0 111px; }

/* ---------- Inicio: clientes ---------- */
.clients { background: var(--paper-2); padding-block: 28px 18px; text-align: center; }
.clients h2 { font: 700 35px/42px var(--helv); color: var(--ink-2); letter-spacing: .35px; }
.rule { width: 169px; height: 3px; background: var(--red-2); margin: 1px auto 0; }
.logos {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  row-gap: 22px;
  max-width: 900px;
  margin: 66px auto 0;
}
.logos img { object-fit: contain; }
.stat {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  margin-top: 54px;
  padding: 8px 20px 8px 20px;
  border: 1px solid var(--ink-2);
  text-align: left;
}
.stat__label { font: 400 21px/26px var(--helv); color: var(--ink); }
.stat__value { font: 700 46px/52px var(--helv); color: var(--red-2); font-variant-numeric: tabular-nums; }
.stat img { width: 118px; height: auto; }

/* ---------- Inicio: servicios (banda roja) ---------- */
.svc { background: var(--red); color: var(--paper); padding-block: 48px 64px; overflow: hidden; }
.svc .wrap { position: relative; }
.svc__label { font: 500 16px/22px var(--font); }
.svc h2 { font: 900 42px/58px var(--font); color: var(--ink); margin-top: 9px; letter-spacing: -.4px; }
.svc__list {
  list-style: none; padding: 0;
  position: relative; z-index: 1;
  margin-top: 16px;
  font: 500 36px/50.4px var(--font);
  letter-spacing: -.8px;
  color: var(--paper-4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.svc__img { position: absolute; top: 187px; left: 404px; width: 586px; }
.svc .btn { margin: 48px 0 0 95px; min-width: 142px; position: relative; z-index: 1; }

/* ---------- Inicio: banda proyectos ---------- */
.banner {
  background: var(--paper) url("../img/banner-proyectos.jpg") center / cover no-repeat;
  padding-block: 69px 52px;
}
.banner__box {
  max-width: 521px;
  margin-inline: auto;
  padding: 18px 20px 20px;
  background: rgba(89, 89, 89, .15);
  text-align: center;
}
.banner h2 { font: 700 27px/32px var(--helv); color: var(--ink); }
.banner p { font: 300 17px/23.8px var(--font); margin-top: 4px; }
.banner .btn { margin-top: 14px; min-width: 229px; }

/* ---------- Inicio: diferenciador ---------- */
.diff { padding-block: 48px 59px; overflow: hidden; }
.diff__row { display: flex; justify-content: space-between; align-items: flex-start; }
.diff__text { width: 590px; flex: none; }
.diff__label { font: 600 16px/22.4px var(--font); color: var(--gray); }
.diff__big { font: 700 40px/52px var(--font); letter-spacing: -2px; color: var(--red); margin-top: 33px; }
.diff__para { font: 400 18px/25.2px var(--font); letter-spacing: -.9px; color: var(--gray); max-width: 310px; margin: 34px 0 0 12px; }
.diff__para strong { font-weight: 700; }
.diff .btn { margin: 35px 0 0 14px; min-width: 266px; }
.diff__img { flex: none; width: 453px; height: 407px; object-fit: cover; margin-top: 19px; }
@media (min-width: 1240px) { .diff__img { margin-right: -104px; } }

/* ---------- Banda roja de llamado (Nosotros, Servicios) ---------- */
.cta { background: var(--red); color: var(--paper); padding-block: 53px 113px; }
.cta .wrap > * { margin-left: 8px; }
.cta__label { font: 900 16px/22.4px var(--font); letter-spacing: 1.6px; }
.cta h2 { font: 500 40px/40px var(--font); max-width: 450px; margin-top: 77px; text-wrap: balance; }
.cta h2 a { font-weight: 900; text-decoration: none; }
.cta h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- Nosotros ---------- */
.hero--nosotros {
  background-color: #BABCC7;
  background-image: url("../img/hero-nosotros.jpg");
  background-position: left top;
  color: var(--ink);
  min-height: 582px;
  padding-block: 242px 65px;
}
.kicker { font: 900 14px/19.6px var(--font); letter-spacing: 1.4px; color: var(--red); }
.hero--nosotros h1 { font: 900 36px/50.4px var(--font); max-width: 600px; margin-top: 18px; text-wrap: balance; }
.hero--nosotros p:last-child { font: 400 16px/22.4px var(--font); max-width: 491px; margin-top: 42px; }
.story { padding-block: 76px 100px; }
.story h2 { font: 500 28px/39.2px var(--font); max-width: 625px; }
.story__body { max-width: 310px; margin-top: 36px; font: 300 16px/22.4px var(--font); display: grid; gap: 22px; }
.vision { padding-block: 34px 63px; }
.vision__row { display: flex; justify-content: space-between; gap: 40px; }
.vision__col { max-width: 310px; flex: none; }
.vision h2 { font: 900 30px/42px var(--font); margin-top: 18px; }
.vision__body { margin-top: 49px; font: 300 16px/22.4px var(--font); display: grid; gap: 22px; }
.vision__quote { max-width: 543px; margin-top: 170px; font: 500 20px/28px var(--font); color: var(--red-dark); }

/* ---------- Servicios ---------- */
.intro { background: var(--paper-3); padding-block: 44px 68px; }
.intro .wrap { position: relative; }
.intro__inner { padding-left: 49px; }
.intro .side-text { color: var(--line); font: 400 10px/14px var(--font); letter-spacing: 1px; }
.intro .kicker { color: #D90234; }
.intro h1 { font: 900 40px/56px var(--font); margin-top: 8px; }
.intro p:last-child { font: 300 16px/22.4px var(--font); max-width: 702px; margin-top: 23px; }
.svc-row { background: var(--paper-4); }
.card {
  display: flex;
  width: 654px;
  min-height: 500px;
  background: var(--paper);
}
.svc-row--right .card { margin-left: 326px; }
.card__img { width: 327px; flex: none; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { width: 327px; padding: 17px 10px 28px; display: flex; flex-direction: column; }
.card h2 { font: 900 37px/40px var(--font); letter-spacing: -.6px; overflow-wrap: anywhere; }
.card__text { font: 300 14px/19.6px var(--font); margin-top: 21px; display: grid; gap: 20px; }
.card__text strong { font-weight: 600; }
.segments { margin-top: 30px; }
.segments__label { font: 300 12px/16.8px var(--font); letter-spacing: 1.2px; color: var(--red); }
.segments hr { width: 165px; border: 0; border-top: 1px solid var(--line); margin: 8px 0 12px; }
.segments ul { list-style: none; padding: 0; font: 300 12px/16.8px var(--font); color: var(--gray-2); display: grid; gap: 4px; }

/* ---------- Contacto ---------- */
.talk { padding-block: 0; }
.talk h1 {
  font: 900 110px/154px var(--font);
  color: #9B9292;
  text-align: right;
  letter-spacing: -1px;
  padding-right: 4px;
}
.contact {
  background: linear-gradient(90deg, rgba(232, 230, 230, .81) 0%, var(--paper) 100%);
  padding-block: 26px 84px;
}
.contact__row { display: flex; justify-content: space-between; gap: 48px; }
.contact__info { max-width: 400px; margin: 241px 0 0 31px; }
.contact__info .label { font: 600 12px/16.8px var(--font); letter-spacing: 1.2px; }
.contact__big { font: 600 40px/40px var(--font); margin-top: 15px; }
.contact__text { margin-top: 23px; font: 300 16px/22.4px var(--font); max-width: 393px; display: grid; gap: 22px; }
.contact__text a { color: var(--red); }
.form { width: 400px; flex: none; margin-right: 60px; }
.form__title { font: 500 16px/22.4px var(--font); letter-spacing: .8px; color: var(--red); }
.field { margin-top: 46px; display: grid; gap: 9px; }
.form__title + .field { margin-top: 31px; }
.field label { font: 300 14px/14px var(--font); }
.field label span { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 20px/1.2 var(--font);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gray);
  border-radius: 0;
  padding: 10px 12px;
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { height: 94px; resize: vertical; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.field select:invalid { color: var(--line); }
.field input::placeholder, .field textarea::placeholder { color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--red); }
.field-pair { display: grid; grid-template-columns: 157px minmax(0, 1fr); gap: 16px; }
.field-pair .field { margin-top: 46px; }
.form .btn {
  margin-top: 60px;
  height: 37px;
  min-width: 187px;
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--paper);
  font: 400 15px/1 var(--font);
}
.form .btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form__status { min-height: 22px; margin-top: 18px; font: 400 16px/22.4px var(--font); color: var(--gray); }
.form__status.is-error { color: var(--red); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Proyectos ---------- */
.projects {
  background: linear-gradient(90deg, rgba(232, 230, 230, .57) 0 calc(50% - 115px), var(--paper) 0);
  padding-block: 69px 23px;
}
.projects__row { display: flex; justify-content: space-between; gap: 32px; }
.projects__intro { width: 394px; flex: none; }
.projects__sticky { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px); padding-top: 8px; }
.projects h1 { font: 700 40px/44px var(--helv); }
.projects__intro p { font: 400 20px/28px var(--helv); color: var(--gray); margin-top: 17px; }
.projects__intro .btn { margin: 61px 0 0 86px; height: 48px; font: 500 15px/1 var(--font); letter-spacing: 1.5px; }
.projects__list { width: 537px; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 27px; }
.project h2 {
  display: inline-block;
  font: 400 20px/28px var(--helv);
  border-bottom: 2px solid var(--red-2);
  padding-bottom: 2px;
}
.project p { font: 400 16px/28.8px var(--helv); margin-top: 18px; }
.gallery { position: relative; margin-top: 18px; width: 523px; max-width: 100%; aspect-ratio: 523 / 328; background: var(--paper-4); overflow: hidden; }
.gallery__track { display: flex; height: 100%; transition: transform .4s ease; }
.gallery__track button { flex: 0 0 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__track img { width: 100%; height: 100%; object-fit: cover; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: var(--paper); cursor: pointer;
  display: grid; place-items: center;
}
.gallery__nav:hover { background: rgba(0, 0, 0, .7); }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__nav svg { width: 14px; height: 14px; }
.gallery__count {
  position: absolute; right: 10px; bottom: 10px;
  padding: 3px 8px; background: rgba(0, 0, 0, .55); color: var(--paper);
  font: 400 12px/1.4 var(--font); font-variant-numeric: tabular-nums;
}
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 10, 10, .92);
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l);
}
.lightbox img { max-width: min(1200px, 100%); max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lightbox__close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--paper);
  font: 300 34px/1 var(--font); cursor: pointer;
}
.lightbox .gallery__nav { width: 48px; height: 48px; }
.lightbox .gallery__nav--prev { left: calc(12px + env(safe-area-inset-left, 0px)); }
.lightbox .gallery__nav--next { right: calc(12px + env(safe-area-inset-right, 0px)); }

/* ---------- Pie de página ---------- */
.site-footer { background: var(--footer); color: var(--paper); padding-block: 47px 41px; }
.footer__row { display: grid; grid-template-columns: 400px 422px; column-gap: 16px; justify-content: center; }
.footer__contact { display: grid; justify-items: start; padding-left: 14px; }
.footer__top { justify-self: stretch; display: grid; justify-items: center; }
.footer__title { font: 400 25px/35px var(--helv); letter-spacing: 5px; }
.footer__mail { font: 400 18px/25.2px var(--helv); margin-top: 75px; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.footer__mail:hover { color: var(--pink); }
.footer__top .btn { margin-top: 25px; background: var(--red-2); color: var(--paper); }
.footer__top .btn:hover { background: var(--red-dark); }
.footer__addr { margin-top: 28px; font: 400 16px/22.4px var(--helv); max-width: 310px; }
.footer__addr strong { display: block; font-weight: 700; }
.footer__logo { margin-top: 14px; width: 313px; }
.footer__nav { display: flex; flex-wrap: wrap; margin: 4px 0 0 -10px; }
.footer__nav a { font: 300 12px/16.8px var(--font); text-decoration: none; padding: 16px 10px; }
.footer__nav a:hover { color: var(--pink); }
.footer__copy { font: 300 12px/16.8px var(--font); }
.map {
  position: relative;
  width: 422px; height: 460px;
  margin-top: 2px;
  background: #E2E1DE;
  overflow: hidden;
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.map--static {
  display: grid; place-items: center; text-align: center;
  color: var(--ink-2); padding: 24px;
  background:
    linear-gradient(0deg, rgba(255,255,255,.55), rgba(255,255,255,.55)),
    repeating-linear-gradient(35deg, #D5D4D1 0 2px, transparent 2px 46px),
    repeating-linear-gradient(-55deg, #D5D4D1 0 3px, transparent 3px 70px),
    #E9E8E5;
}
.map--static svg { width: 34px; height: 44px; margin: 0 auto 10px; color: var(--red-2); }
.map--static strong { display: block; font: 700 16px/1.3 var(--helv); }
.map--static span { display: block; font: 400 14px/1.4 var(--helv); margin-top: 4px; }
.map--static a { display: inline-block; margin-top: 14px; color: var(--red-2); font: 600 14px/1 var(--font); }

/* ---------- WhatsApp flotante ---------- */
.wa {
  position: fixed;
  right: calc(19px + env(safe-area-inset-right, 0px));
  bottom: calc(19px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  background: var(--wa);
  transition: transform .15s;
}
.wa:hover { transform: scale(1.06); }
.wa img { width: 48px; height: 48px; }
.wa svg { width: 32px; height: 32px; color: var(--paper); }

/* ---------- Página 404 ---------- */
.notfound { padding-block: 120px 120px; text-align: center; }
.notfound h1 { font: 900 72px/1 var(--font); color: #9B9292; }
.notfound p { margin-top: 16px; font: 400 18px/1.5 var(--font); }
.notfound .btn { margin-top: 28px; }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1100px) {
  .site-header .wrap { gap: 40px; }
  .nav a { padding-inline: 14px; }
}
@media (max-width: 1023px) {
  .exp__row { flex-wrap: wrap; }
  .exp__text { width: auto; flex: 1 1 520px; }
  .exp__line { display: none; }
  .exp__badge { margin: 32px auto 0; }
  .svc__img { position: static; width: min(586px, 100%); margin: 24px 0 0 auto; }
  .svc .btn { margin-left: 0; }
  .diff__row { flex-direction: column; }
  .diff__text { width: auto; }
  .diff__img { width: 100%; height: auto; aspect-ratio: 453 / 407; max-width: 560px; margin-top: 36px; }
  .vision__row { flex-direction: column; }
  .vision__quote { margin-top: 0; }
  .svc-row--right .card { margin-left: 0; }
  .card { width: 100%; }
  .card__body { width: auto; flex: 1; padding: 17px 20px 28px; }
  .contact__row { flex-direction: column; }
  .contact__info { margin: 24px 0 0; }
  .form { width: 100%; max-width: 560px; margin: 8px 0 0; }
  .projects { background: var(--paper); }
  .projects__row { flex-direction: column; }
  .projects__intro { width: auto; }
  .projects__sticky { position: static; }
  .projects__intro .btn { margin-left: 0; margin-top: 28px; }
  .projects__list { width: auto; margin-top: 24px; }
  .footer__row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; max-width: 520px; margin-inline: auto; }
  .map { width: 100%; height: 340px; }
}

/* ---------- Teléfonos ---------- */
@media (max-width: 760px) {
  .site-header .wrap { gap: 12px; }
  .logo img { width: 150px; height: 38px; }
  .menu-btn { display: block; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(51, 50, 50, .97);
    padding: 8px var(--gutter-r) 16px var(--gutter-l);
    display: none;
  }
  .menu-open .nav { display: flex; }
  .nav a { font-size: 17px; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); }

  .hero--inicio { min-height: 0; padding-block: calc(var(--header-h) + 56px) 56px; }
  .hero__inner { padding-left: 0; }
  .side-text { display: none; }
  .hero--inicio h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.04; letter-spacing: -1.2px; }
  .hero__lead { font-size: 17px; line-height: 1.4; }
  .hero__actions { gap: 12px; margin-top: 28px; }
  .hero__actions .btn { min-width: 0; flex: 1 1 140px; }

  .exp { padding-block: 40px 48px; }
  .exp__big { font-size: 28px; line-height: 36px; letter-spacing: -1px; }
  .exp .btn { margin-top: 32px; min-width: 0; width: 100%; max-width: 266px; }
  .exp__badge { width: 160px; }

  .clients h2 { font-size: 28px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; column-gap: 16px; margin-top: 36px; }
  .logos img { max-height: 64px; max-width: 100%; }
  .stat { gap: 16px; padding: 10px 14px; margin-top: 40px; }
  .stat__label { font-size: 17px; }
  .stat__value { font-size: 36px; line-height: 42px; }
  .stat img { width: 84px; }

  .svc { padding-block: 40px 48px; }
  .svc h2 { font-size: 28px; line-height: 34px; }
  .svc__list { font-size: 21px; line-height: 32px; letter-spacing: -.3px; margin-top: 18px; }
  .svc .btn { margin-top: 24px; }

  .banner { padding-block: 44px; }
  .banner h2 { font-size: 23px; }
  .banner p { font-size: 16px; }
  .banner .btn { min-width: 0; width: 100%; max-width: 229px; }

  .diff { padding-block: 40px 48px; }
  .diff__big { font-size: 27px; line-height: 35px; letter-spacing: -1px; margin-top: 18px; }
  .diff__para { margin: 22px 0 0; max-width: none; }
  .diff .btn { margin: 26px 0 0; min-width: 0; width: 100%; max-width: 266px; }

  .cta { padding-block: 44px 56px; }
  .cta .wrap > * { margin-left: 0; }
  .cta h2 { font-size: 28px; line-height: 32px; margin-top: 28px; }

  .hero--nosotros { min-height: 0; padding-block: calc(var(--header-h) + 48px) 48px; }
  .hero--nosotros h1 { font-size: 27px; line-height: 34px; }
  .hero--nosotros p:last-child { margin-top: 22px; }
  .hero--nosotros br { display: none; }
  .story { padding-block: 44px 40px; }
  .story h2 { font-size: 22px; line-height: 31px; }
  .story__body, .vision__col, .vision__body { max-width: none; }
  .vision { padding-block: 24px 48px; }
  .vision h2 { font-size: 26px; }
  .vision__body { margin-top: 20px; }
  .vision__quote { font-size: 18px; line-height: 26px; }

  .intro { padding-block: 36px 40px; }
  .intro__inner { padding-left: 0; }
  .intro h1 { font-size: 30px; line-height: 38px; }
  .svc-row { padding-block: 0; }
  .card { flex-direction: column; min-height: 0; }
  .card__img { width: 100%; aspect-ratio: 4 / 3; }
  .card__body { padding: 20px 16px 28px; }
  .card h2 { font-size: 28px; line-height: 30px; }
  .card h2 br { display: none; }
  .svc-row + .svc-row .card { border-top: 12px solid var(--paper-4); }

  .talk h1 { font-size: clamp(54px, 17vw, 110px); line-height: 1.3; text-align: center; padding-right: 0; }
  .contact { background: linear-gradient(180deg, rgba(232, 230, 230, .81) 0%, var(--paper) 60%); padding-block: 8px 48px; }
  .contact__big { font-size: 30px; line-height: 32px; }
  .field-pair { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .field input, .field select, .field textarea { font-size: 18px; }
  .form .btn { width: 100%; }

  .projects { padding-block: 40px 40px; }
  .projects h1 { font-size: 32px; line-height: 36px; }
  .projects__intro p { font-size: 18px; line-height: 26px; }
  .project p { line-height: 26px; }

  .site-footer { padding-block: 40px 96px; }
  .footer__contact { padding-left: 0; }
  .footer__mail { margin-top: 28px; font-size: 16px; }
  .footer__logo { width: 240px; }
  .map { height: 280px; }
  .wa { width: 56px; height: 56px; }
  .wa img { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}