/* ==========================================================================
   Sitio público — Estudio Técnico Integral e Inmobiliario Franzoi

   Estructura y aire tomados de sartorinmobiliaria.com: líneas rectas, sin
   bordes redondeados, títulos en mayúsculas, tipografía sans moderna y
   sombras casi inexistentes. La paleta es azul (la de la marca Franzoi).
   ========================================================================== */

:root {
  --tinta:      #0b1a30;   /* azul casi negro: textos y fondos oscuros */
  --azul:       #14325c;
  --azul-medio: #1f4d8f;
  --acento:     #4e73df;   /* azul de marca (el mismo del sistema) */
  --acento-claro: #9db4ee;  /* para fondos oscuros: el de marca no contrasta */

  --papel:      #ffffff;
  --papel-alt:  #f4f6fa;
  --apagado:    #5a6a80;
  --linea:      #dde3ec;

  --display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texto: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 1280px;
  --transicion: 380ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 32px; }

/* --- Tipografía ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin: 0;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.15rem; letter-spacing: .01em; }

.sobretitulo {
  display: inline-block;
  font-family: var(--texto);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 500;
}
/* Sobre fondo oscuro el azul de marca no contrasta lo suficiente. */
.seccion--oscura .sobretitulo { color: var(--acento-claro); }
/* Sobre la foto del hero ni el azul claro alcanza: va casi blanco. */
.hero .sobretitulo { color: rgba(255,255,255,.9); }
.seccion--oscura .pilar-linea { background: var(--acento-claro); }

/* --- Encabezado ---------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 20px 0;
  border-bottom: 1px solid transparent;
  transition: background var(--transicion), padding var(--transicion),
              border-color var(--transicion);
}
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.cabecera.solida {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--linea);
  padding: 12px 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.1;
}
.marca-texto { display: block; }
.marca small {
  display: block;
  font-family: var(--texto);
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--apagado);
  margin-top: 3px;
}

/* Isotipo: solo la casa. El logo completo trae texto propio que a esta
   altura resultaría ilegible, así que el nombre lo pone el HTML al lado. */
.marca-iso { height: 42px; width: auto; flex: none; transition: height var(--transicion); }
.cabecera.solida .marca-iso { height: 34px; }

/* Se muestra la versión que contrasta con el fondo de la cabecera. */
.marca-iso--oscuro { display: none; }
.cabecera.solida .marca-iso--claro { display: none; }
.cabecera.solida .marca-iso--oscuro { display: block; }

/* Sobre el hero la cabecera es transparente y el texto va en blanco. */
.cabecera:not(.solida) { color: #fff; }
.cabecera:not(.solida) .marca small { color: rgba(255,255,255,.7); }

.navegacion { display: flex; gap: 30px; align-items: center; }
.navegacion a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
.navegacion a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicion);
}
.navegacion a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-boton { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; }
.menu-boton span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; }
.menu-boton.abierto { color: var(--tinta) !important; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--tinta);
  overflow: hidden;
}
/* La foto va en web/img/hero.jpg. Si no está, queda el degradado azul. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* El degradado se aclara arriba (para que se vea la casa) y se oscurece
     desde el 30% en adelante, que es la banda donde va el texto. Con el
     punto claro en el medio el sobretítulo quedaba ilegible sobre las zonas
     iluminadas de la foto. */
  background:
    linear-gradient(180deg,
      rgba(11,26,48,.58) 0%,
      rgba(11,26,48,.24) 24%,
      rgba(11,26,48,.70) 56%,
      rgba(11,26,48,.94) 100%),
    url("../img/hero.jpg") center/cover no-repeat,
    linear-gradient(140deg, var(--azul-medio) 0%, var(--tinta) 100%);
}
.hero .envoltura { position: relative; padding-top: 150px; padding-bottom: 56px; }
.hero h1 { max-width: 20ch; margin-top: 16px; }
.hero p {
  max-width: 48ch;
  margin: 22px 0 0;
  font-size: 1.05rem;
  color: rgba(255,255,255,.84);
}

/* --- Buscador del hero --------------------------------------------------- */
.buscador {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 1px;
  margin-top: 44px;
  background: var(--linea);
  border: 1px solid rgba(255,255,255,.18);
}
.buscador-campo { background: rgba(255,255,255,.97); padding: 14px 18px; }
.buscador-campo label {
  display: block;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 2px;
}
.buscador-campo select {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--texto);
  font-size: .95rem;
  color: var(--tinta);
  cursor: pointer;
}
.buscador-campo select:focus { outline: none; }
.buscador button {
  border: 0;
  background: var(--acento);
  color: #fff;
  font-family: var(--texto);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 38px;
  cursor: pointer;
  transition: background var(--transicion);
}
.buscador button:hover { background: var(--azul-medio); }

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font-family: var(--texto);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.boton:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton--relleno { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--relleno:hover { background: var(--azul-medio); border-color: var(--azul-medio); color: #fff; }

/* --- Secciones ----------------------------------------------------------- */
.seccion { padding: clamp(66px, 8.5vw, 118px) 0; }
.seccion--alt { background: var(--papel-alt); }
.seccion--oscura { background: var(--tinta); color: rgba(255,255,255,.78); }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }

.seccion-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
}
.seccion--oscura .seccion-encabezado { border-bottom-color: rgba(255,255,255,.16); }
.seccion-encabezado h2 { margin-top: 12px; }
.seccion-encabezado p { color: var(--apagado); margin: 14px 0 0; max-width: 58ch; }
.seccion-encabezado-texto { max-width: 62ch; }

.enlace-mas {
  flex: none;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  white-space: nowrap;
}
.enlace-mas:hover { color: var(--azul-medio); }

/* --- Filtros rápidos ---------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.filtro {
  background: none;
  border: 1px solid var(--linea);
  padding: 9px 20px;
  font-family: var(--texto);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  cursor: pointer;
  transition: all var(--transicion);
}
.filtro:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* --- Grilla de propiedades ---------------------------------------------- */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 44px 32px;
}

.tarjeta { display: block; }
.tarjeta-imagen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--papel-alt);
  margin-bottom: 18px;
}
.tarjeta-imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 820ms cubic-bezier(.22,.61,.36,1);
}
.tarjeta:hover .tarjeta-imagen img { transform: scale(1.045); }

.tarjeta-vacia {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--apagado);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.etiqueta {
  position: absolute;
  top: 0; left: 0;
  background: var(--acento);
  color: #fff;
  padding: 7px 15px;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.etiqueta--reservada { background: var(--azul-medio); }
.etiqueta--cerrada { background: var(--tinta); }

.tarjeta-tipo {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}
.tarjeta h3 { margin: 8px 0 6px; font-size: 1.1rem; }
.tarjeta-ubicacion { color: var(--apagado); font-size: .9rem; }
.tarjeta-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--linea);
}
.tarjeta-precio {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
}
.tarjeta-datos { color: var(--apagado); font-size: .78rem; }

/* --- Servicios numerados ------------------------------------------------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.servicio {
  background: var(--papel);
  padding: 38px 32px 42px;
  transition: background var(--transicion);
}
.servicio:hover { background: var(--papel-alt); }
.servicio-num {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--acento);
}
.servicio h3 { margin: 16px 0 12px; }
.servicio p { color: var(--apagado); font-size: .92rem; margin: 0; }

/* --- Pilares ------------------------------------------------------------- */
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 44px; }
.pilar h3 { margin-bottom: 12px; }
.pilar p { color: var(--apagado); margin: 0; font-size: .94rem; }
.seccion--oscura .pilar p { color: rgba(255,255,255,.7); }
.pilar-linea { width: 42px; height: 2px; background: var(--acento); margin-bottom: 22px; }

/* --- Bloque a dos columnas ---------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.duo-figura { aspect-ratio: 4 / 5; background: var(--papel-alt); overflow: hidden; }
.duo p { color: var(--apagado); }

/* --- Matrículas (credenciales reales) ----------------------------------- */
.matriculas { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.matriculas li {
  padding: 14px 0;
  border-top: 1px solid var(--linea);
  font-size: .92rem;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.matriculas li:last-child { border-bottom: 1px solid var(--linea); }
.matriculas strong { font-weight: 500; }
.matriculas span { color: var(--apagado); }

/* --- Estados ------------------------------------------------------------- */
.estado { padding: 72px 0; text-align: center; color: var(--apagado); }
.cargador {
  width: 26px; height: 26px;
  border: 2px solid var(--linea);
  border-top-color: var(--acento);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Formulario ---------------------------------------------------------- */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
}
.campo input, .campo textarea, .campo select {
  border: 1px solid var(--linea);
  background: var(--papel);
  padding: 12px 14px;
  font-family: var(--texto);
  font-size: .98rem;
  color: var(--tinta);
  transition: border-color var(--transicion);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--acento);
}
.campo textarea { resize: vertical; min-height: 110px; }

.aviso { grid-column: 1 / -1; padding: 13px 17px; font-size: .9rem; }
.aviso--ok { background: #e8f1e6; color: #2f5029; }
.aviso--error { background: #fbecec; color: #7d2f2f; }

/* --- Contacto: datos al costado ---------------------------------------- */
.contacto-grilla { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; }
.oficina { margin-bottom: 34px; }
.oficina h3 { font-size: 1rem; margin-bottom: 10px; }
.oficina p { color: var(--apagado); margin: 0; font-size: .94rem; }
.oficina a:hover { color: var(--acento); }

/* --- Pie ----------------------------------------------------------------- */
.pie { background: var(--tinta); color: rgba(255,255,255,.7); padding: 68px 0 30px; }
.pie a { color: rgba(255,255,255,.7); }
.pie a:hover { color: #fff; }
.pie-grilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; }
.pie .marca { color: #fff; }
/* En el pie sí entra el logo completo, con su propio texto. */
.pie-logo { width: 200px; height: auto; }
.pie h4 {
  color: #fff;
  margin: 0 0 15px;
  font-family: var(--texto);
  font-size: .68rem;
  letter-spacing: .2em;
  font-weight: 500;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .9rem; }
.pie-legal {
  margin-top: 54px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,255,255,.48);
}

/* --- Ficha de propiedad -------------------------------------------------- */
.ficha { padding-top: 124px; }
.volver { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.volver:hover { color: var(--acento); }

.galeria { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 28px 0 56px; }
.galeria-principal { aspect-ratio: 3 / 2; overflow: hidden; background: var(--papel-alt); }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-lado { display: grid; gap: 10px; grid-template-rows: 1fr 1fr; }
.galeria-lado > div { overflow: hidden; background: var(--papel-alt); }
.galeria-lado img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

@media (min-width: 901px) {
  .galeria { height: min(45vw, 640px); }
  .galeria > .galeria-principal { aspect-ratio: auto; }
}

/* Miniatura con contador de fotos restantes ("+3"): la imagen se oscurece
   por estilo en línea y el número va encima, centrado. */
.galeria-miniatura { position: relative; }
.galeria-mas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  pointer-events: none;   /* el clic lo maneja la imagen de abajo */
}

.ficha-cuerpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 72px; align-items: start; }
.ficha-precio { font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1; }

.datos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.datos li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: .94rem;
}
.datos li span:first-child { color: var(--apagado); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  border: 1px solid var(--linea);
  padding: 7px 15px;
  font-size: .78rem;
  color: var(--apagado);
}

.panel-contacto { border: 1px solid var(--linea); padding: 32px; position: sticky; top: 100px; }
.panel-contacto h3 { margin-bottom: 8px; font-size: 1rem; }
.panel-contacto p { color: var(--apagado); font-size: .9rem; margin: 0 0 22px; }

/* --- Visor de imagen ----------------------------------------------------- */
.visor {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,16,28,.95);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.visor.abierto { display: flex; }
.visor img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.visor-cerrar {
  position: absolute; top: 24px; right: 30px;
  background: none; border: 0; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff;
  font-size: 2.6rem; cursor: pointer; padding: 20px;
  opacity: .6; transition: opacity var(--transicion);
}
.visor-nav:hover { opacity: 1; }
.visor-nav--prev { left: 10px; }
.visor-nav--sig { right: 10px; }

/* --- Aparición al hacer scroll ------------------------------------------
   Mejora progresiva: el contenido es visible por defecto y solo se oculta
   cuando el JS marca <html class="js-animar">. Así, si el script falla o el
   IntersectionObserver no llega a dispararse, la página se ve igual en vez
   de quedar en blanco. */
.js-animar .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 750ms ease, transform 750ms ease;
}
.js-animar .revelar.visible { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .buscador { grid-template-columns: 1fr 1fr; }
  .buscador button { grid-column: 1 / -1; padding: 16px; }
}

@media (max-width: 900px) {
  .duo, .ficha-cuerpo, .pie-grilla, .contacto-grilla { grid-template-columns: 1fr; gap: 40px; }
  .galeria { grid-template-columns: 1fr; }
  .galeria-lado { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .panel-contacto { position: static; }
  .seccion-encabezado { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 720px) {
  .envoltura { padding: 0 22px; }
  .navegacion {
    position: fixed; inset: 0;
    background: var(--papel);
    color: var(--tinta);
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    transform: translateX(100%);
    transition: transform var(--transicion);
  }
  .navegacion.abierta { transform: none; }
  .navegacion a { font-size: 1.05rem; }
  .menu-boton { display: block; z-index: 60; }
  /* El subtítulo es largo y competiría con el botón de menú. */
  .marca small { display: none; }
  .marca { gap: 10px; font-size: 1.15rem; }
  .marca-iso, .cabecera.solida .marca-iso { height: 32px; }
  .grilla { grid-template-columns: 1fr; gap: 38px; }
  .formulario { grid-template-columns: 1fr; }
  .buscador { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js-animar .revelar { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Mapa de la ficha
   El iframe de OpenStreetMap trae su propia botonera y sus enlaces al pie, y
   no se pueden tocar desde acá porque es de otro origen. La solución es
   enmarcarlo: el recuadro le da el lenguaje del sitio y la tarjeta flotante
   lleva la dirección y el botón, que es lo que la persona vino a buscar.
   --------------------------------------------------------------------------- */
.mapa {
  position: relative;
  margin-top: 18px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  overflow: hidden;                 /* recorta las esquinas del iframe */
  background: var(--papel-alt);
  box-shadow: 0 18px 40px -28px rgba(11, 26, 48, .45);
}

.mapa__lienzo {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  /* La paleta cruda de OSM es más saturada que el resto del sitio; esto la
     acerca sin volverla gris ni comerse el marcador. */
  filter: saturate(.82) contrast(1.04);
}

/* La tarjeta se apoya sobre el mapa, dejando ver el pie de OSM (que hay que
   conservar: es la atribución que exige la licencia). */
.mapa__tarjeta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(11, 26, 48, .5);
}

.mapa__rotulo {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apagado);
}
.mapa__texto {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.35;
}

.mapa__accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transicion), transform var(--transicion);
}
.mapa__accion:hover { background: var(--azul-medio); transform: translateY(-1px); }
.mapa__accion svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 640px) {
  .mapa__lienzo { height: 320px; }
  .mapa__tarjeta { left: 12px; right: 12px; bottom: 38px; padding: 14px; }
  .mapa__accion { width: 100%; justify-content: center; }
}

/* Quien pidió menos movimiento no necesita el desplazamiento del botón. */
@media (prefers-reduced-motion: reduce) {
  .mapa__accion:hover { transform: none; }
}