/* Maquetacion de la landing. Sin un solo hex: los colores, tipografias y radios
   salen de marca.css (copia de colors_and_type.css). Celular primero; desde 860px
   se reacomoda a dos columnas. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--ink);
  font-family: var(--fuente-texto);
  font-size: 19px;
  line-height: 1.5;
}
img, video { display: block; max-width: 100%; }
a { color: var(--azul-2); }
h1, h2, h3 {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  color: var(--azul);
  line-height: 1.15;
  margin: 0 0 var(--esp-2);
}
h1 { font-size: clamp(32px, 8vw, 54px); }
h2 { font-size: clamp(27px, 6vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0 0 var(--esp-2); }

/* --- Botones de WhatsApp: el unico oro de la pagina ------------------------ */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1);
  background: var(--oro); color: var(--azul);
  font-family: var(--fuente-titular); font-weight: var(--peso-titular); font-size: 19px;
  text-decoration: none; border-radius: var(--radio-boton);
  padding: 14px 26px; min-height: 52px;
}
.btn-wa:hover { filter: brightness(1.06); }
.btn-wa .ico { width: 24px; height: 24px; flex: none; }
.btn-grande { font-size: 21px; padding: 18px 30px; width: 100%; max-width: 440px; }
.btn-linea {
  background: transparent; color: var(--azul); border: 2px solid var(--azul);
  font-size: 17px; padding: 10px 20px; min-height: 46px;
}
.centro { text-align: center; margin-top: var(--esp-3); }

/* --- Portada: foto a pantalla completa, pestana de navegacion arriba y titular
   grande abajo. El velo azul solo cubre el tercio inferior, donde va el texto. */
.portada { padding: var(--esp-1); }
.portada-marco {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Celular: el alto lo pone el contenido, con una franja de foto arriba. A pantalla
     completa, una foto horizontal se amplia demasiado. */
  padding-top: 200px;
  border-radius: var(--radio-pastilla); background: var(--azul);
}
/* Con foto vertical para celular: la foto va arriba en su proporcion, sin ampliarse,
   y abajo se funde con el azul, donde va el texto. Asi el titular no pisa la llave. */
.portada-marco.con-movil { padding-top: 0; min-height: 154vw; }
.portada-marco.con-movil .portada-fondo { height: auto; bottom: auto; aspect-ratio: 1086 / 1448; object-position: 50% 0; }
.portada-marco.con-movil::after {
  background: linear-gradient(to top, rgb(0 0 0 / .9) 24%, rgb(0 0 0 / .5) 46%, transparent 64%);
  background: linear-gradient(to top,
    var(--azul) 24%,
    color-mix(in srgb, var(--azul) 60%, transparent) 46%,
    transparent 64%);
}
.portada-fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%;
}
.portada-marco::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .4) 38%, transparent 62%); /* respaldo iOS < 16.2 */
  background: linear-gradient(to top,
    color-mix(in srgb, var(--azul) 90%, transparent) 0%,
    color-mix(in srgb, var(--azul) 50%, transparent) 38%,
    transparent 62%);
}

.portada-nav {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: var(--esp-3); white-space: nowrap;
  width: max-content; /* sin esto, en celular le toca media pantalla y aplasta el logo */
  background: var(--blanco); padding: 10px 22px;
  border-radius: 0 0 var(--radio-pastilla) var(--radio-pastilla);
}
.portada-nav .logo { flex: none; }
.portada-nav .logo img { height: 40px; width: auto; max-width: none; }
.nav-enlaces { display: none; list-style: none; margin: 0; padding: 0; gap: var(--esp-3); }
.nav-enlaces a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 16px; }
.nav-enlaces a:hover { color: var(--azul); }
.menu-abrir {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  border: 0; background: var(--azul); color: var(--blanco); cursor: pointer;
}
.menu-abrir .ico { width: 22px; height: 22px; }

/* --- Menu hamburguesa: panel a pantalla completa ---------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: var(--azul); color: var(--blanco);
  padding: var(--esp-2) 20px var(--esp-4);
  display: flex; flex-direction: column; gap: var(--esp-3);
}
.menu[hidden] { display: none; }
body.menu-abierto { overflow: hidden; }
.menu-cabeza { display: flex; align-items: center; justify-content: space-between; }
.menu-cabeza img { height: 44px; width: auto; max-width: none; background: var(--blanco); padding: 6px 12px; border-radius: var(--radio-lg); box-sizing: content-box; }
.menu-cerrar {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .3); background: transparent; color: var(--blanco); cursor: pointer;
}
.menu-cerrar .ico { width: 22px; height: 22px; }
.menu ul { list-style: none; margin: var(--esp-2) 0 0; padding: 0; }
.menu li { border-bottom: 1px solid rgb(255 255 255 / .14); }
.menu li a {
  display: block; padding: 16px 0; color: var(--blanco); text-decoration: none;
  font-family: var(--fuente-titular); font-weight: var(--peso-titular); font-size: 26px;
}
.menu li a:hover { color: var(--oro); }
.menu .btn-pildora { align-self: flex-start; margin-top: var(--esp-2); }

.portada-contenido { display: grid; gap: var(--esp-2); padding: 0 20px 24px; color: var(--blanco); }
.portada-titular {
  color: var(--blanco); margin: 0;
  font-size: clamp(36px, 10vw, 56px); line-height: .95; letter-spacing: -.035em;
}
.portada .credencial {
  font-family: var(--fuente-titular); font-weight: var(--peso-titular);
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: var(--esp-1); opacity: .9;
}
.portada .bajada { font-size: 19px; line-height: 1.3; margin-bottom: var(--esp-2); max-width: 30ch; }
.nota-boton { font-size: 16px; opacity: .85; margin-top: var(--esp-2); }
.portada .nota-boton { padding-right: 72px; } /* que no la tape el WhatsApp flotante */

/* El titular sube palabra por palabra; el bloque lateral entra despues. */
@keyframes sube { from { transform: translateY(.4em); opacity: 0; } }
.palabra { display: inline-block; animation: sube .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 80ms); }
.portada-lateral > * { animation: sube .8s cubic-bezier(.16, 1, .3, 1) .5s both; }
.portada-lateral > :nth-child(n+3) { animation-delay: .7s; }
@media (prefers-reduced-motion: reduce) {
  .palabra, .portada-lateral > * { animation: none; }
}

/* Boton pildora: texto y, a la derecha, el circulo con el icono de WhatsApp. */
.btn-pildora {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  background: var(--oro); color: var(--azul); text-decoration: none;
  font-family: var(--fuente-titular); font-weight: var(--peso-titular); font-size: 20px;
  border-radius: var(--radio-boton); padding: 6px 6px 6px 26px; min-height: 58px;
  transition: gap .2s;
}
.btn-pildora:hover { gap: var(--esp-3); }
.btn-pildora-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--azul); color: var(--blanco); transition: transform .2s;
}
.btn-pildora:hover .btn-pildora-ico { transform: scale(1.08); }
.btn-pildora .ico { width: 24px; height: 24px; }

/* --- Bloques ----------------------------------------------------------------- */
.bloque { padding: 48px 20px; max-width: 1140px; margin: 0 auto; }
.bajada-seccion { font-size: 20px; color: var(--ink-2); max-width: 720px; }
.etiqueta {
  font-family: var(--fuente-titular); font-weight: var(--peso-titular);
  color: var(--oro-texto); text-transform: uppercase; letter-spacing: .06em; font-size: 15px;
  margin-bottom: var(--esp-1);
}
.num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--azul); color: var(--blanco);
  font-family: var(--fuente-titular); font-weight: var(--peso-titular); margin-bottom: var(--esp-1);
}

.lista-pasos { list-style: none; padding: 0; margin: var(--esp-3) 0 0; display: grid; gap: var(--esp-3); }
.paso { background: var(--hueso); border-radius: var(--radio-pastilla); overflow: hidden; }
.paso-texto { padding: var(--esp-3); }

.casa { background: var(--hueso); max-width: none; overflow-x: hidden; overflow-x: clip; } /* las fotos de los costados no empujan la pagina */
.casa > * { max-width: 1060px; margin-left: auto; margin-right: auto; }
.casa-grid { display: grid; gap: var(--esp-3); }
.casa-video { max-width: 360px; width: 100%; margin: 0 auto; }
.casa blockquote { margin: 0 0 var(--esp-3); }
.casa blockquote p {
  font-family: var(--fuente-titular); font-weight: var(--peso-titular);
  font-size: clamp(24px, 5vw, 32px); color: var(--azul); line-height: 1.25;
}
.casa cite { font-style: normal; color: var(--ink-2); }

/* --- Galeria de un proyecto (la mueve sitio.js; es CircularTestimonials de
   21st.dev). Celular: foto arriba, texto abajo. Desde 768px, dos columnas. ------- */
.galeria {
  display: grid; gap: 64px; margin: var(--esp-4) auto 56px; max-width: 1140px;
  outline: none;
}
.galeria-fotos {
  position: relative; width: 100%; aspect-ratio: 5 / 4; perspective: 1000px; margin-top: 56px;
  touch-action: pan-y; /* el deslizamiento horizontal es de la galeria; el vertical, de la pagina */
}
.galeria-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radio-pastilla); box-shadow: 0 10px 30px rgb(0 0 0 / .2);
  transition: all .8s cubic-bezier(.4, 2, .3, 1); user-select: none;
}
.galeria:not(.activa) .galeria-foto:not(:first-child) { display: none; }
.galeria.activa .galeria-foto[aria-hidden="true"] { cursor: pointer; }

.galeria-texto { display: flex; flex-direction: column; justify-content: space-between; gap: var(--esp-3); }
.galeria-titulo { font-size: 28px; margin-bottom: 4px; }
.galeria-proyecto { color: var(--ink-2); font-size: 18px; margin: 0; }

.galeria-leyenda { transition: opacity .3s ease-in-out, transform .3s ease-in-out; }
.galeria-leyenda.saliendo { opacity: 0; transform: translateY(-20px); }
.galeria-leyenda.entrando { opacity: 0; transform: translateY(20px); transition: none; }

.galeria-flechas { display: none; gap: var(--esp-3); }
.galeria.activa .galeria-flechas { display: flex; }
.galeria-flechas button {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--azul); color: var(--blanco);
  transition: background-color .3s;
}
.galeria-flechas button:hover { background: var(--azul-3); }
.galeria-flechas svg { width: 24px; height: 24px; }
.galeria:focus-visible { outline: 3px solid var(--azul-3); outline-offset: 8px; border-radius: var(--radio); }
@media (prefers-reduced-motion: reduce) {
  .galeria-foto, .galeria-leyenda { transition: none; }
}
@media (min-width: 768px) {
  .galeria { grid-template-columns: 1fr 1fr; gap: 80px; }
  .galeria-flechas { padding-top: 0; }
}

/* --- Cuentanos tu caso: tarjetas de los otros servicios --------------------- */
.tarjetas { display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.tarjeta { border: 1px solid var(--line); border-radius: var(--radio-pastilla); overflow: hidden; }
.tarjeta-texto { padding: var(--esp-3); }
.nota { background: var(--soft); border-radius: var(--radio); padding: 10px 14px; font-weight: 600; color: var(--azul); }
.ampliaciones {
  margin-top: var(--esp-3); padding: var(--esp-3); border-radius: var(--radio-pastilla);
  background: var(--soft); display: grid; gap: var(--esp-2); justify-items: start;
}
.ampliaciones p { margin: 0; font-size: 20px; }

/* --- Por que confiar: tarjetas con sello ---------------------------------- */
.confianza { background: var(--hueso); max-width: none; }
.confianza > * { max-width: 1060px; margin-left: auto; margin-right: auto; }
.tarjetas-confianza {
  list-style: none; padding: 0; margin-top: var(--esp-3); margin-bottom: 0;
  display: grid; gap: var(--esp-2);
}
.tarjeta-confianza {
  display: flex; align-items: center; gap: 20px;
  background: var(--blanco); border: 1px solid var(--line); border-radius: var(--radio-pastilla);
  padding: 20px 24px; box-shadow: 0 6px 20px rgb(0 0 0 / .05);
}
.tarjeta-confianza img { flex: none; width: 76px; height: 76px; }
.tarjeta-confianza b {
  display: block; font-family: var(--fuente-titular); font-weight: var(--peso-titular);
  font-size: 22px; color: var(--azul); line-height: 1.2;
}
.tarjeta-confianza span { display: block; color: var(--ink-2); font-size: 17px; line-height: 1.4; margin-top: 4px; }

/* --- Protege tu inversion: frase grande y galeria de obras ----------------- */
.inversion { overflow-x: hidden; overflow-x: clip; } /* la foto del costado no empuja la pagina */
.inversion h2 { max-width: 22ch; font-size: clamp(28px, 6.5vw, 48px); line-height: 1.1; letter-spacing: -.02em; }

/* --- Preguntas frecuentes: acordeon de tarjetas ----------------------------- */
.faq-lista { display: grid; gap: 12px; margin-top: var(--esp-3); }
.faq-item { background: var(--soft); border-radius: var(--radio-pastilla); transition: background-color .2s; }
.faq-item[open] { background: var(--blanco); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgb(0 0 0 / .06); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  padding: 20px 24px; font-family: var(--fuente-titular); font-weight: 700; font-size: 19px; color: var(--azul);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico {
  flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  background: var(--azul); color: var(--blanco); transition: transform .25s;
}
.faq-item[open] .faq-ico { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 24px 22px; color: var(--ink-2); }

/* --- Contacto: tarjeta azul con formulario ---------------------------------- */
.contacto-tarjeta {
  display: grid; gap: var(--esp-3); border-radius: var(--radio-pastilla);
  background: var(--azul); color: var(--blanco); padding: var(--esp-4) 20px;
}
.contacto-intro h2 { color: var(--blanco); }
.contacto-intro .etiqueta { color: var(--oro); }
.contacto-intro p:last-child { opacity: .85; }
.contacto-form { display: grid; gap: var(--esp-2); }
.contacto-form label { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.contacto-form input, .contacto-form select, .contacto-form textarea {
  font: inherit; font-size: 17px; color: var(--ink); width: 100%;
  background: var(--blanco); border: 2px solid transparent; border-radius: var(--radio-lg);
  padding: 12px 14px; min-height: 50px;
}
.contacto-form textarea { resize: vertical; min-height: 110px; }
.contacto-form input:focus, .contacto-form select:focus, .contacto-form textarea:focus { outline: none; border-color: var(--oro); }
.contacto-form .btn-pildora { justify-self: start; border: 0; cursor: pointer; margin-top: var(--esp-1); }
.contacto-nota { font-size: 15px; opacity: .75; margin: 0; }

/* --- Oficina: tarjeta con mapa --------------------------------------------- */
.oficina-tarjeta {
  display: grid; border-radius: var(--radio-lg); overflow: hidden;
  background: var(--blanco); border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgb(0 0 0 / .08);
}
.oficina-texto { padding: var(--esp-4) var(--esp-3); }
.oficina address {
  display: flex; gap: var(--esp-2); align-items: flex-start;
  font-style: normal; font-size: 20px; line-height: 1.5; color: var(--ink);
  margin: var(--esp-3) 0;
}
.oficina address .ico {
  flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: var(--azul); color: var(--oro);
}
.oficina-horario { display: flex; gap: var(--esp-2); align-items: flex-start; color: var(--ink-2); }
.oficina-horario .ico {
  flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: var(--soft); color: var(--azul);
}
.oficina-horario b { color: var(--ink); }
.oficina-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-3); }
.btn-ruta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul); color: var(--blanco); text-decoration: none;
  font-family: var(--fuente-titular); font-weight: var(--peso-titular); font-size: 18px;
  border-radius: var(--radio-boton); padding: 12px 24px; min-height: 48px;
}
.btn-ruta:hover { background: var(--azul-2); }
.oficina-enlace { font-weight: 600; color: var(--azul-2); }
.oficina-mapa { position: relative; min-height: 300px; background: var(--soft); }
.oficina-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }

/* --- Pie: hueso, donde vive el logo ----------------------------------------- */
.pie { background: var(--hueso); padding: 48px 20px 110px; text-align: center; }
.pie-logo { margin: 0 auto var(--esp-3); height: 64px; width: auto; }
.pie-cierre {
  font-family: var(--fuente-titular); font-weight: var(--peso-titular);
  font-size: 24px; color: var(--azul);
}
.pie-datos { margin: var(--esp-4) auto 0; max-width: 560px; display: grid; gap: var(--esp-2); }
.pie-datos dt { font-weight: 600; color: var(--ink-2); font-size: 16px; }
.pie-datos dd { margin: 0; }
.pie-redes, .pie-derechos { margin-top: var(--esp-3); color: var(--ink-2); font-size: 16px; }

/* --- WhatsApp flotante ------------------------------------------------------- */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--oro); color: var(--azul);
  box-shadow: 0 4px 14px rgb(0 0 0 / .25);
}
.wa-flotante .ico { width: 34px; height: 34px; }

/* --- Pagina "muy pronto": la raiz mientras la landing esta en borrador ------- */
body.pronto {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background: var(--azul);
}
.pronto-caja {
  width: 100%; max-width: 640px; text-align: center;
  background: var(--blanco); border-radius: var(--radio-lg);
  padding: 48px 24px 32px; box-shadow: 0 24px 60px rgb(0 0 0 / .3);
}
.pronto-imagen {
  display: block; width: calc(100% + 48px); max-width: none; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: 45% 40%;
  margin: -48px -24px var(--esp-3); border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}
.pronto-logo { height: 72px; width: auto; margin: 0 auto var(--esp-3); display: block; }
.pronto .credencial { color: var(--oro-texto); }
.pronto h1 { font-size: clamp(28px, 6vw, 40px); }
.pronto-bajada { font-size: 19px; color: var(--ink-2); margin-bottom: var(--esp-3); }
.pronto .nota-boton { color: var(--ink-2); }
.pronto-oficina {
  margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--line);
  display: grid; justify-items: center; gap: var(--esp-2);
}
.pronto-oficina address {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  font-style: normal; font-size: 17px; line-height: 1.5;
}
.pronto-oficina address .ico {
  flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 50%;
  background: var(--azul); color: var(--oro);
}

/* --- Huecos: lo que falta, a la vista ---------------------------------------- */
.hueco {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: var(--soft); border: 2px dashed var(--silver); color: var(--ink-2);
  padding: var(--esp-3); font-size: 15px; text-align: center; width: 100%;
}
.hueco b { font-family: var(--fuente-titular); font-size: 28px; color: var(--azul-3); }
.hueco-formato { font-weight: 600; }
.medio { width: 100%; object-fit: cover; }
.r-4x5  { aspect-ratio: 4 / 5; }
.r-4x3  { aspect-ratio: 4 / 3; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-9x16 { aspect-ratio: 9 / 16; border-radius: var(--radio-pastilla); }

mark.pendiente { background: var(--gold-soft); color: var(--bad); padding: 0 4px; font-weight: 600; }

/* --- Pantallas grandes ------------------------------------------------------- */
@media (min-width: 860px) {
  .portada { padding: 12px; }
  .portada-marco, .portada-marco.con-movil { padding-top: 0; height: calc(100vh - 24px); height: calc(100svh - 24px); min-height: 620px; }
  .portada-marco.con-movil .portada-fondo { height: 100%; bottom: 0; aspect-ratio: auto; object-position: 46% 30%; }
  .portada-marco.con-movil::after {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--azul) 90%, transparent) 0%,
      color-mix(in srgb, var(--azul) 50%, transparent) 38%,
      transparent 62%);
  }
  .portada .credencial { font-size: 15px; letter-spacing: .06em; }
  .portada .bajada { font-size: 21px; margin-bottom: var(--esp-3); }
  .portada-nav { gap: 40px; padding: 12px 32px; }
  .nav-enlaces { gap: 28px; }
  .portada-contenido { grid-template-columns: 2fr 1fr; align-items: end; gap: 48px; padding: 0 48px 48px; }
  .portada-titular { font-size: clamp(64px, 7.5vw, 120px); }
  .portada .nota-boton { padding-right: 0; }
  .btn-grande { width: auto; }
  .bloque { padding: 72px 40px; }
  .lista-pasos { grid-template-columns: repeat(4, 1fr); }
  .casa-grid { grid-template-columns: 360px 1fr; align-items: center; gap: 48px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .tarjetas-confianza { grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
  .tarjeta-confianza { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
  .tarjeta-confianza img { width: 88px; height: 88px; margin-bottom: var(--esp-1); }
  .faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
  .faq h2 { position: sticky; top: 32px; }
  .faq-lista { margin-top: 0; }
  .contacto-tarjeta { grid-template-columns: 1fr 1.2fr; gap: 56px; padding: 56px; }
  .ampliaciones { grid-template-columns: 1fr auto; align-items: center; }
  .oficina-tarjeta { grid-template-columns: 5fr 7fr; }
  .oficina-texto { padding: 56px 48px; }
  .oficina-mapa { min-height: 440px; }
}

/* Los enlaces de la pestana caben desde 1100 px; antes de eso, hamburguesa. */
@media (min-width: 1100px) {
  .nav-enlaces { display: flex; }
  .menu-abrir { display: none; }
}