/* ==========================================================================
   SG MARTÍN · Componentes de páginas interiores y catálogo
   Depende de los tokens definidos en style.css
   Orden: 1 Cabeceras · 2 Texto · 3 Tarjetas · 4 Listas · 5 Contacto
          6 Catálogo · 7 Ficha · 8 Avisos · 9 Responsive
   ========================================================================== */

/* 1 ── CABECERAS INTERIORES ============================================== */
.sg-hero-int {
  position: relative;
  overflow: hidden;
  padding-block: clamp(9rem, 16vw, 13rem) clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(30, 55, 96, 0.5), transparent 68%),
    linear-gradient(175deg, var(--sg-navy-800), var(--sg-navy-900));
  border-bottom: 1px solid var(--sg-line-soft);
}
.sg-hero-int__inner { position: relative; z-index: 2; }
.sg-hero-int__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: grayscale(0.3);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.sg-hero-int h1 { max-width: 20ch; }

/* Con el logo en tres pisos y el menú en su propia fila, la cabecera fija de
   escritorio mide unos 170 px: las cabeceras de página arrancan por debajo. */
@media (min-width: 992px) {
  .sg-hero-int { padding-top: clamp(12rem, 17vw, 14rem); }
  /* Con «.pagina-ficha» delante para ganar a sus reglas, que van más abajo. */
  .pagina-ficha .sg-ficha-top { padding-top: clamp(12rem, 16vw, 13.5rem); }
  .pagina-ficha .sg-ficha-hero__content { padding-top: 12rem; }
}

.sg-hero--corto { min-height: auto; padding-block: clamp(9rem, 18vw, 13rem) clamp(5rem, 10vw, 8rem); }

/* Migas de pan */
.sg-migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-muted);
}
.sg-migas a { color: var(--sg-muted); text-decoration: none; transition: color 0.35s var(--sg-ease); }
.sg-migas a:hover { color: var(--sg-gold); }
.sg-migas span[aria-hidden] { color: var(--sg-line); }
.sg-migas__actual { color: var(--sg-gold); }

/* Sobre fotografía (portada a sangre de la ficha) el gris de texto secundario
   se queda corto: se sube el contraste y se le pone una sombra, porque debajo
   puede haber cualquier cosa. Las barras separadoras bajan de tono para que no
   compitan con los enlaces. */
.sg-migas--sobre-foto {
  color: rgba(243, 239, 231, 0.78);
  text-shadow: 0 1px 12px rgba(4, 9, 15, 0.7);
}
.sg-migas--sobre-foto a { color: rgba(243, 239, 231, 0.78); }
.sg-migas--sobre-foto span[aria-hidden] { color: rgba(243, 239, 231, 0.35); }

/* 2 ── TEXTO LARGO ======================================================= */
.sg-texto p { color: var(--sg-muted); margin-bottom: 1.25rem; }
.sg-texto p:last-child { margin-bottom: 0; }
.sg-texto strong { color: var(--sg-cream); font-weight: 400; }

.sg-legal h2 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  margin: 2.75rem 0 1rem;
  color: var(--sg-cream);
}
.sg-legal h2:first-child { margin-top: 0; }
.sg-legal ul { padding-left: 1.15rem; margin-bottom: 1.25rem; color: var(--sg-muted); }
.sg-legal li { margin-bottom: 0.5rem; }
.sg-legal code {
  color: var(--sg-gold-light);
  background: rgba(200, 162, 76, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  font-size: 0.88em;
}

/* Páginas legales: el texto empieza cerca de la raya del título y acaba cerca
   del pie. El hueco de --sg-section (hasta 168 px) es para separar bloques
   distintos; aquí solo hay uno y dejaba media pantalla en blanco. */
.sg-section--legal { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }

/* Política de cookies: lo que escribe CookieFirst dentro de
   #cookiefirst-policy-page. Trae sus propios estilos a medias (botones grises
   del navegador) y Bootstrap le manda el título de cada tabla
   («Necesarias»…) debajo de ella, donde parecía suelto. */
.sg-legal #cookiefirst-policy-page h3,
.sg-legal > h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 2rem 0 0.75rem; }
.sg-legal #cookiefirst-policy-page h4 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.sg-legal #cookiefirst-policy-page button {
  margin: 0.25rem 0.5rem 0.25rem 0;
  padding: 0.6rem 1.2rem;
  font-family: var(--sg-sans);
  font-size: 0.85rem;
  color: var(--sg-cream);
  background: transparent;
  border: 1px solid var(--sg-gold);
  border-radius: 2px;
  cursor: pointer;
}
.sg-legal #cookiefirst-policy-page button:hover { background: var(--sg-gold); color: var(--sg-navy-900); }
.sg-legal #cookiefirst-policy-page table { width: 100%; margin-bottom: 1.5rem; }
.sg-legal #cookiefirst-policy-page caption {
  caption-side: top;
  padding: 0 0 0.5rem;
  font-family: var(--sg-serif);
  font-size: 1.2rem;
  color: var(--sg-cream);
}

/* En el móvil la tabla de cookies (seis columnas) medía 1007 px: pasa a una
   ficha por cookie, con el nombre arriba y cada dato con su etiqueta. Las
   etiquetas van por posición porque CookieFirst no pone ninguna en las
   celdas; si algún día cambia el orden de sus columnas, hay que tocar esto.
   El min-width con !important es necesario: CookieFirst pone a la tabla un
   ancho mínimo de 768 px y a cada celda 400 px, y sin anularlo la ficha
   seguía midiendo eso (comprobado en el servidor el 30-oct-2026). */
@media (max-width: 767.98px) {
  .sg-legal #cookiefirst-policy-page thead { display: none; }
  .sg-legal #cookiefirst-policy-page table,
  .sg-legal #cookiefirst-policy-page tbody,
  .sg-legal #cookiefirst-policy-page tr,
  .sg-legal #cookiefirst-policy-page th,
  .sg-legal #cookiefirst-policy-page td { display: block; width: 100%; min-width: 0 !important; }
  .sg-legal #cookiefirst-policy-page caption { display: block; }
  .sg-legal #cookiefirst-policy-page tr {
    padding: 0.5rem 0;
    border-top: 1px solid var(--sg-line-soft);
  }
  .sg-legal #cookiefirst-policy-page th,
  .sg-legal #cookiefirst-policy-page td { padding: 2px 0; border: 0; }
  .sg-legal #cookiefirst-policy-page tbody th { color: var(--sg-cream); }
  .sg-legal #cookiefirst-policy-page td::before { color: var(--sg-cream); }
  .sg-legal #cookiefirst-policy-page td:nth-of-type(1)::before { content: "Propósito: "; }
  .sg-legal #cookiefirst-policy-page td:nth-of-type(2)::before { content: "Dominio: "; }
  .sg-legal #cookiefirst-policy-page td:nth-of-type(3)::before { content: "Caducidad: "; }
  .sg-legal #cookiefirst-policy-page td:nth-of-type(4)::before { content: "Proveedor: "; }
  .sg-legal #cookiefirst-policy-page td:nth-of-type(5)::before { content: "Tipo: "; }
}

/* Marco decorativo para imágenes destacadas */
.sg-marco {
  position: relative;
  padding: 0.85rem;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
}
.sg-marco::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-top-color: var(--sg-gold);
  border-left-color: var(--sg-gold);
  width: 68px;
  height: 68px;
  opacity: 0.65;
  pointer-events: none;
}
.sg-marco img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--sg-radius);
}

/* 3 ── TARJETAS DE DIVISIÓN ============================================== */
.sg-div-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px;
  background: var(--sg-line-soft);
  border: 1px solid var(--sg-line-soft);
}
/* Cinco tarjetas: tres arriba y dos más anchas abajo. Con el reparto
   automático quedaba una sola en la segunda fila y huecos vacíos al lado. */
@media (min-width: 992px) {
  .sg-div-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sg-div-grid--5 > * { grid-column: span 2; }
  .sg-div-grid--5 > :nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .sg-div-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-div-grid--5 > :last-child { grid-column: 1 / -1; }
}

.sg-div-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.9rem, 3.2vw, 2.6rem);
  background: rgba(6, 14, 27, 0.75);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.55s var(--sg-ease);
}
.sg-div-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--sg-gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--sg-ease);
}
.sg-div-card:hover { background: rgba(200, 162, 76, 0.05); }
.sg-div-card:hover::before { transform: scaleX(1); }
.sg-div-card--estatica { cursor: default; }

.sg-div-card__ico {
  color: var(--sg-gold);
  margin-bottom: 0.5rem;
  transition: transform 0.55s var(--sg-ease);
}
.sg-div-card__ico .sg-icon { width: 30px; height: 30px; }
.sg-div-card:hover .sg-div-card__ico { transform: translateY(-3px) rotate(-6deg); }

.sg-div-card__kicker {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sg-gold);
}
.sg-div-card h3 { margin: 0; }
.sg-div-card p { margin: 0; font-size: 0.92rem; color: var(--sg-muted); flex: 1 1 auto; }
.sg-div-card .sg-link { margin-top: 0.75rem; align-self: flex-start; }

/* Variante de portada: solo más alta. Sin imagen propia desde oct-2026; el
   fondo translúcido es el de la tarjeta normal, igual que en servicios. */
.sg-div-card--foto { min-height: clamp(300px, 32vw, 360px); }

/* 4 ── LISTAS ============================================================ */
.sg-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.sg-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--sg-line-soft);
  color: var(--sg-text);
  font-size: 0.95rem;
}
.sg-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.sg-checklist .sg-icon { width: 17px; height: 17px; color: var(--sg-gold); flex-shrink: 0; margin-top: 5px; }
.sg-checklist--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0.85rem 2rem; }

/* Filas de servicio */
.sg-serv-fila {
  display: grid;
  grid-template-columns: minmax(90px, 0.5fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--sg-line-soft);
  scroll-margin-top: 160px;
}
.sg-serv-fila:last-child { border-bottom: 1px solid var(--sg-line-soft); }
.sg-serv-fila__num {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-family: var(--sg-serif);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
}
.sg-serv-fila__ico { color: var(--sg-gold); }
.sg-serv-fila__ico .sg-icon { width: 30px; height: 30px; }
.sg-serv-fila__cuerpo p { margin: 0; }

.sg-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: rgba(200, 162, 76, 0.16);
  color: var(--sg-gold);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.sg-redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* 5 ── CONTACTO ========================================================== */
.sg-contacto-lista { display: grid; gap: 1px; background: var(--sg-line-soft); border: 1px solid var(--sg-line-soft); }
.sg-contacto-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(6, 14, 27, 0.7);
  text-decoration: none;
  transition: background-color 0.5s var(--sg-ease);
}
.sg-contacto-item:hover { background: rgba(200, 162, 76, 0.06); }
.sg-contacto-item__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sg-line);
  border-radius: 50%;
  color: var(--sg-gold);
  transition: background 0.5s var(--sg-ease), color 0.5s var(--sg-ease);
}
.sg-contacto-item:hover .sg-contacto-item__ico {
  background: var(--sg-gold-grad);
  color: var(--sg-navy-900);
}
.sg-contacto-item__cuerpo { display: flex; flex-direction: column; gap: 0.2rem; }
.sg-contacto-item__cuerpo b {
  font-family: var(--sg-serif);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--sg-cream);
}
.sg-contacto-item__cuerpo span { font-size: 0.88rem; color: var(--sg-muted); }
.sg-contacto-item__valor {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--sg-gold);
  text-align: right;
  word-break: break-word;
}
/* El correo es largo (31 letras): con el espaciado de los teléfonos no cabe
   en el móvil y se partía en «gerencia@» / «sgmartininversiones.es». Con el
   espaciado normal entra en una línea desde 360 px; en pantallas aún más
   estrechas sigue pudiendo partirse tras la @, que es el sitio menos feo. */
.sg-contacto-item__valor--email { letter-spacing: 0.02em; }
/* Sedes (contacto.php): las dos fichas una al lado de la otra en el ordenador,
   una debajo de otra desde tableta. Más ancho que la columna de canales, así
   que se limita para que no queden dos franjas larguísimas. */
.sg-sedes { max-width: 980px; margin-inline: auto; text-align: left; }
@media (min-width: 992px) {
  .sg-sedes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Frase de la llamada a contacto cuando va sin titular (presencia.php):
   algo más grande que un texto normal, en la letra de los titulares. */
.sg-cta__texto { max-width: 34ch; }

/* 6 ── CATÁLOGO ========================================================== */
/* Sube menos que una sección normal: encima está la cabecera de la página, que
   ya trae su propio aire por abajo, y sumar los dos huecos dejaba el buscador
   muy lejos del título. Por abajo se mantiene el de siempre. */
.sg-catalogo {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--sg-navy-900);
}

/* Filtros */
.sg-filtros {
  border: 1px solid var(--sg-line-soft);
  background: rgba(255, 255, 255, 0.018);
  margin-bottom: 2.5rem;
}
.sg-filtros__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.75rem);
}
.sg-filtros__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sg-gold);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.sg-filtros__toggle .sg-icon { width: 17px; height: 17px; }

.sg-filtros__orden { display: flex; align-items: center; gap: 0.75rem; }
.sg-filtros__orden label {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sg-muted);
  margin: 0;
}

.sg-filtros__panel {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1.1rem;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem) 1.75rem;
  border-top: 1px solid var(--sg-line-soft);
  padding-top: 1.6rem;
}
.sg-filtros.is-abierto .sg-filtros__panel { display: grid; }

.sg-campo { display: flex; flex-direction: column; gap: 0.5rem; }
.sg-campo--ancho { grid-column: span 2; }
.sg-campo label {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sg-gold);
  margin: 0;
}
.sg-campo input,
.sg-campo select,
.sg-campo textarea,
.sg-filtros__orden select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--sg-navy-900);
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  color: var(--sg-cream);
  font-family: var(--sg-sans);
  font-size: 0.92rem;
  font-weight: 300;
  transition: border-color 0.35s var(--sg-ease);
}
.sg-campo input:focus,
.sg-campo select:focus,
.sg-filtros__orden select:focus { border-color: var(--sg-gold); outline: none; }
.sg-campo select,
.sg-filtros__orden select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sg-gold) 50%),
    linear-gradient(135deg, var(--sg-gold) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.sg-campo input::placeholder { color: rgba(147, 160, 181, 0.6); }

/* Los botones ya no se llevan una fila entera para ellos solos: ocupan dos
   columnas y se colocan en el hueco que dejan los campos, con lo que el
   buscador entero baja una fila en escritorio. «align-self: end» es lo que los
   deja alineados con los campos de al lado y no flotando arriba.

   En pantallas de una sola columna vuelven a ocupar el ancho, en el bloque
   responsive del final: un «span 2» dentro de una rejilla de una columna hace
   que el navegador se invente una segunda, y ahí se descuadra todo. */
.sg-filtros__acciones {
  grid-column: span 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 0.35rem;
}

/* Resumen y chips */
.sg-catalogo__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--sg-line-soft);
  color: var(--sg-muted);
  font-size: 0.92rem;
}
.sg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sg-chip {
  padding: 0.42rem 1rem;
  border: 1px solid var(--sg-line-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--sg-muted);
  text-decoration: none;
  transition: color 0.35s var(--sg-ease), border-color 0.35s var(--sg-ease),
    background-color 0.35s var(--sg-ease);
}
.sg-chip:hover { color: var(--sg-gold); border-color: var(--sg-line); }
.sg-chip.is-activa {
  color: var(--sg-navy-900);
  background: var(--sg-gold-grad);
  border-color: transparent;
  font-weight: 500;
}

/* Rejilla de inmuebles */
.sg-inm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.sg-inm { position: relative; }
.sg-inm__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.5s var(--sg-ease), transform 0.5s var(--sg-ease),
    box-shadow 0.5s var(--sg-ease);
}
.sg-inm__enlace:hover {
  border-color: var(--sg-line);
  transform: translateY(-5px);
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, 0.95);
}

.sg-inm__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sg-navy-700); }
.sg-inm__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--sg-ease);
}
.sg-inm__enlace:hover .sg-inm__media img { transform: scale(1.06); }
.sg-inm__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 14, 27, 0.6));
  pointer-events: none; /* que no se trague el deslizamiento de la tira */
}
.sg-inm.is-cerrado .sg-inm__media img { filter: grayscale(0.75) brightness(0.75); }

/* Pasafotos del catálogo ------------------------------------------------------
   Las fotos van en fila y la caja se desliza de una en una: en el móvil con el
   dedo (lo hace el navegador solo) y en el ordenador con las flechas. */
.sg-inm__tira {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.sg-inm__tira::-webkit-scrollbar { display: none; }
.sg-inm__tira img {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Con varias fotos no hay zoom al pasar el ratón: la foto vecina, al crecer,
   asomaría por el borde. */
[data-pasafotos] .sg-inm__enlace:hover .sg-inm__media img { transform: none; }

/* Las flechas y los puntos van fuera del enlace y se colocan encima de la foto,
   que ocupa la parte de arriba de la tarjeta con su misma proporción (4:3). */
.sg-inm__pasar {
  position: absolute;
  z-index: 3;
  top: 1px;
  left: 1px;
  right: 1px;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  transition: transform 0.5s var(--sg-ease);
}
.sg-inm__pasar[hidden] { display: none; }
/* La tarjeta sube 5 px al pasar el ratón: los mandos suben con ella. */
.sg-inm:hover .sg-inm__pasar { transform: translateY(-5px); }

.sg-inm__flecha {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.92);
  color: #1c3f6e;
  box-shadow: 0 4px 14px -4px rgba(12, 30, 58, 0.45);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s var(--sg-ease), transform 0.2s var(--sg-ease);
}
.sg-inm__flecha .sg-icon { width: 18px; height: 18px; }
.sg-inm__flecha--ant { left: 0.7rem; }
.sg-inm__flecha--sig { right: 0.7rem; }
.sg-inm__flecha:active { transform: scale(0.94); }
.sg-inm:hover .sg-inm__flecha,
.sg-inm__flecha:focus-visible { opacity: 1; }
/* En pantallas táctiles no hay «pasar el ratón»: las flechas se ven siempre,
   algo más discretas, aunque lo natural ahí es deslizar. */
@media (hover: none) {
  .sg-inm__flecha { opacity: 0.85; width: 34px; height: 34px; margin-top: -17px; }
}

.sg-inm__puntos {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
}
.sg-inm__puntos i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.55);
  transition: background-color 0.3s var(--sg-ease), transform 0.3s var(--sg-ease);
}
.sg-inm__puntos i.is-activo { background: #fff; transform: scale(1.25); }

.sg-inm__etiqueta {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.36rem 0.85rem;
  border-radius: 999px;
  background: var(--sg-gold-grad);
  color: var(--sg-navy-900);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sg-inm__etiqueta--estatica { position: static; display: inline-block; margin-bottom: 1.1rem; }

.sg-inm__ref {
  position: absolute;
  z-index: 2;
  right: 0.9rem;
  bottom: 0.8rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: rgba(243, 239, 231, 0.85);
}

.sg-inm__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem; flex: 1 1 auto; }
.sg-inm__cat {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sg-gold);
}
.sg-inm__titulo {
  font-family: var(--sg-serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--sg-cream);
  margin: 0;
}
.sg-inm__ubi {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--sg-muted);
}
.sg-inm__ubi .sg-icon { width: 15px; height: 15px; color: var(--sg-gold); flex-shrink: 0; }

.sg-inm__datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--sg-muted);
}
.sg-inm__datos b { color: var(--sg-cream); font-weight: 400; }

.sg-inm__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sg-line-soft);
}
.sg-inm__precio {
  font-family: var(--sg-serif);
  font-size: 1.32rem;
  color: var(--sg-gold);
}
.sg-inm__ver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sg-muted);
  transition: color 0.4s var(--sg-ease);
}
.sg-inm__ver .sg-icon { width: 15px; height: 15px; transition: transform 0.4s var(--sg-ease); }
.sg-inm__enlace:hover .sg-inm__ver { color: var(--sg-gold); }
.sg-inm__enlace:hover .sg-inm__ver .sg-icon { transform: translateX(4px); }

/* Paginación */
.sg-paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sg-paginacion a {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 0.9rem;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  color: var(--sg-muted);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.35s var(--sg-ease), border-color 0.35s var(--sg-ease);
}
.sg-paginacion a:hover { color: var(--sg-gold); border-color: var(--sg-line); }
.sg-paginacion a.is-activa {
  background: var(--sg-gold-grad);
  border-color: transparent;
  color: var(--sg-navy-900);
  font-weight: 500;
}

/* 7 ── FICHA DE INMUEBLE ================================================= */

/* Portada a sangre (opcional) -------------------------------------------------
   Se pinta solo con SG_FICHA_HERO = true en includes/config.php. Con la
   constante en false no se usa ni una de estas reglas y manda .sg-ficha-top,
   que es la cabecera de siempre y sigue intacta más abajo.

   Es el mismo montaje que el hero de la portada (.sg-hero en style.css): capa
   de medios al fondo, velo encima y contenido por delante. Cambian dos cosas:
   aquí el contenido va abajo a la izquierda, no centrado, y el velo carga la
   mano en esa esquina, que es donde tiene que leerse el título. */
.sg-ficha-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 940px);
  overflow: hidden;
  background: var(--sg-navy-900);
}

.sg-ficha-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* El velo. Dos degradados apilados que se MULTIPLICAN, no se suman:
     · El diagonal oscurece la banda izquierda, donde van título y precio.
     · El vertical oscurece arriba (para que respire la cabecera fija) y abajo
       (para el bloque de datos y los mandos del vídeo).
   En la esquina inferior izquierda se cruzan los dos y queda casi opaca: es
   justo donde va el texto. En la mitad derecha apenas tapan, así que la foto
   se ve limpia.

   PARA AJUSTARLO: suba o baje los valores del PRIMER degradado. Es el que
   decide cuánta foto se come el texto. Los del segundo sostienen la cabecera y
   el pie, y conviene dejarlos. Antes de aclararlo, compruebe la legibilidad con
   una foto MUY luminosa —un salón blanco a contraluz—, que es el caso malo. */
.sg-ficha-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, rgba(4, 9, 15, 0.82) 0%, rgba(4, 9, 15, 0.42) 42%, rgba(4, 9, 15, 0) 76%),
    linear-gradient(180deg, rgba(4, 9, 15, 0.62) 0%, rgba(4, 9, 15, 0.05) 34%, rgba(4, 9, 15, 0.78) 100%);
}

/* «cover» y no «contain», al revés que en el marco 16:9 de .sg-ficha-video: una
   portada a sangre con bandas negras no es una portada. El precio es que un
   vídeo vertical se recorta por los lados; con material apaisado, que es lo
   normal, no se pierde nada. */
.sg-ficha-hero__pieza {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin vídeo, la fotografía se mueve sola con un zoom muy lento: la misma
   solución que el hero de la portada cuando solo hay póster. */
.sg-ficha-hero__pieza--fija { animation: sg-hero-zoom 30s var(--sg-ease) infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .sg-ficha-hero__pieza--fija { animation: none; }
}

.sg-ficha-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(7rem, 13vw, 10rem) clamp(2.5rem, 5vw, 4rem);
}

.sg-ficha-hero .sg-migas { margin-bottom: 1.4rem; }
.sg-ficha-hero__titulo { max-width: 18ch; }

.sg-ficha-hero__ubi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.05rem 0 0;
  color: var(--sg-text);
}
.sg-ficha-hero__ubi .sg-icon { width: 17px; height: 17px; color: var(--sg-gold); }

/* Precio y datos en una sola línea, separados por puntos medios. Es lo que se
   mira antes que nada y por eso va por delante de los botones. */
.sg-ficha-hero__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin: 1.5rem 0 0;
  color: var(--sg-text);
}
.sg-ficha-hero__datos b {
  font-family: var(--sg-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.1;
}
.sg-ficha-hero__datos span { font-size: 0.95rem; }
.sg-ficha-hero__datos span::before {
  content: "·";
  margin-right: 1rem;
  color: var(--sg-gold);
}

.sg-ficha-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Mandos del vídeo, abajo a la derecha. Cada botón lleva dentro sus dos iconos
   y se enseña uno u otro según el estado, sin que el JavaScript tenga que
   construir SVG. Ver «Vídeo de la ficha» en assets/js/main.js. */
.sg-ficha-hero__mandos {
  position: absolute;
  z-index: 3;
  right: clamp(1.1rem, 4vw, 2.75rem);
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  gap: 0.6rem;
}
.sg-ficha-hero__mando {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--sg-line);
  border-radius: 50%;
  background: rgba(6, 14, 27, 0.55);
  backdrop-filter: blur(10px);
  color: var(--sg-cream);
  cursor: pointer;
  transition: border-color 0.35s var(--sg-ease), color 0.35s var(--sg-ease),
              background 0.35s var(--sg-ease);
}
.sg-ficha-hero__mando:hover,
.sg-ficha-hero__mando:focus-visible {
  border-color: var(--sg-gold);
  color: var(--sg-gold);
  background: rgba(6, 14, 27, 0.78);
}
.sg-ficha-hero__mando .sg-icon { width: 19px; height: 19px; }
.sg-mando__off { display: none; }
.sg-ficha-hero__mando.is-off .sg-mando__on  { display: none; }
.sg-ficha-hero__mando.is-off .sg-mando__off { display: block; }

.sg-ficha-top {
  padding-block: clamp(8rem, 14vw, 11rem) 2.5rem;
  background: linear-gradient(175deg, var(--sg-navy-800), var(--sg-navy-900));
}
.sg-ficha-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem;
}
.sg-ficha-top h1 { max-width: 22ch; }
.sg-ficha-top__ubi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  color: var(--sg-muted);
}
.sg-ficha-top__ubi .sg-icon { width: 17px; height: 17px; color: var(--sg-gold); }
.sg-ficha-top__precio { text-align: right; }
.sg-ficha-top__precio-valor {
  display: block;
  font-family: var(--sg-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1;
}
.sg-ficha-top__precio-ref {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sg-muted);
}

/* Galería */
.sg-galeria { padding-bottom: 1rem; background: var(--sg-navy-900); }

/* Aire entre la portada a sangre y lo que venga detrás. Con la cabecera clásica
   no hace falta —.sg-ficha-top ya trae su propio margen inferior—, así que la
   regla se limita a lo que va justo después del hero: la galería, o el marco del
   vídeo cuando el inmueble tiene enlace de YouTube o Vimeo. */
.sg-ficha-hero + .sg-galeria,
.sg-ficha-hero + .sg-ficha-video { padding-top: clamp(2.25rem, 5vw, 4rem); }
.sg-galeria__principal {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: var(--sg-navy-700);
}
.sg-galeria__principal img { width: 100%; height: 100%; object-fit: cover; }

/* La foto principal es un botón que abre el visor a pantalla completa. */
.sg-galeria__ampliar {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.sg-galeria__lupa {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.92);
  color: #1c3f6e;
  box-shadow: 0 4px 14px -4px rgba(12, 30, 58, 0.45);
  transition: transform 0.3s var(--sg-ease);
}
.sg-galeria__lupa .sg-icon { width: 19px; height: 19px; }
.sg-galeria__ampliar:hover .sg-galeria__lupa { transform: scale(1.08); }

/* Visor de fotos a pantalla completa --------------------------------------- */
.sg-visor {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.5rem, 6vw, 5.5rem);
  background: rgba(16, 38, 72, 0.96);
  opacity: 0;
  transition: opacity 0.25s var(--sg-ease);
}
.sg-visor[hidden] { display: none; }
.sg-visor.is-abierto { opacity: 1; }
.sg-visor__img {
  max-width: 100%;
  /* El alto de la ventana menos el margen de arriba y abajo del visor: con un
     «100 %» la foto apaisada grande se salía por abajo. */
  max-height: calc(100vh - 2 * clamp(3.5rem, 6vw, 4.5rem));
  max-height: calc(100dvh - 2 * clamp(3.5rem, 6vw, 4.5rem));
  object-fit: contain;
  border-radius: var(--sg-radius);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  user-select: none;
  transform: scale(0.97);
  transition: transform 0.3s var(--sg-ease), opacity 0.2s var(--sg-ease);
}
.sg-visor.is-abierto .sg-visor__img { transform: none; }
.sg-visor__img.is-cambiando { opacity: 0.35; }

.sg-visor__boton {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(247, 244, 236, 0.35);
  border-radius: 50%;
  background: rgba(28, 63, 110, 0.6);
  color: #f7f4ec;
  cursor: pointer;
  transition: background-color 0.25s var(--sg-ease), border-color 0.25s var(--sg-ease),
    transform 0.2s var(--sg-ease);
}
.sg-visor__boton:hover { background: rgba(42, 85, 144, 0.9); border-color: #ddbd72; }
.sg-visor__boton:active { transform: scale(0.94); }
.sg-visor__boton .sg-icon { width: 22px; height: 22px; }
.sg-visor__cerrar { top: 1rem; right: 1rem; }
.sg-visor__ant { left: 1rem; top: 50%; margin-top: -24px; }
.sg-visor__sig { right: 1rem; top: 50%; margin-top: -24px; }
.sg-visor__cuenta {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  margin: 0;
  transform: translateX(-50%);
  color: #e9eef6;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  /* En el móvil las flechas bajan al pie para no tapar la foto: se pasa
     deslizando el dedo y ellas quedan de apoyo. */
  .sg-visor__ant,
  .sg-visor__sig { top: auto; bottom: 0.6rem; margin-top: 0; width: 44px; height: 44px; }
  .sg-visor__ant { left: 1rem; }
  .sg-visor__sig { right: 1rem; }
  .sg-visor__cuenta { bottom: 1.4rem; }
}
.sg-galeria__sello {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 0.75rem 2.5rem;
  border: 2px solid var(--sg-gold);
  background: rgba(6, 14, 27, 0.72);
  color: var(--sg-gold);
  font-family: var(--sg-serif);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.sg-galeria__miniaturas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(110px, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}
.sg-galeria__mini {
  padding: 0;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color 0.35s var(--sg-ease), opacity 0.35s var(--sg-ease);
  opacity: 0.65;
}
.sg-galeria__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-galeria__mini:hover,
.sg-galeria__mini.is-activa { border-color: var(--sg-gold); opacity: 1; }

/* Cuerpo de la ficha.
   Sube menos que una sección normal: las fotografías quedan justo encima y el
   hueco de --sg-section, pensado para separar bloques de contenido distintos,
   dejaba la galería flotando lejos de los datos del inmueble. Por abajo sí se
   mantiene el aire de siempre, que ahí ya empieza otra cosa. */
.sg-ficha {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  background: var(--sg-navy-900);
}

.sg-ficha__rapidos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  background: var(--sg-line-soft);
  border: 1px solid var(--sg-line-soft);
}
.sg-ficha__rapidos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.5rem 1rem;
  background: rgba(6, 14, 27, 0.7);
  text-align: center;
}
.sg-ficha__rapido-ico { color: var(--sg-gold); margin-bottom: 0.3rem; }
.sg-ficha__rapidos b {
  font-family: var(--sg-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--sg-cream);
}
.sg-ficha__rapidos span:last-child {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sg-muted);
}

.sg-bloque { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--sg-line-soft); }
.sg-bloque:first-of-type { border-top: 0; padding-top: 0; }

/* Tabla de datos */
.sg-tabla-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  /* Sin separación entre filas (las líneas se apilan) y aire entre columnas. */
  gap: 0 clamp(1.75rem, 5vw, 3.5rem);
  margin: 0;
}
.sg-tabla-datos > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--sg-line-soft);
}
.sg-tabla-datos dt { font-size: 0.85rem; color: var(--sg-muted); font-weight: 300; }
.sg-tabla-datos dd { margin: 0; color: var(--sg-cream); font-size: 0.95rem; text-align: right; }

/* Certificado energético */
.sg-energia { display: flex; flex-wrap: wrap; gap: 2rem; }
.sg-energia__item { display: flex; align-items: center; gap: 1rem; }
.sg-energia__item b { display: block; color: var(--sg-cream); font-weight: 400; font-size: 0.95rem; }
.sg-energia__item span:last-child { font-size: 0.85rem; color: var(--sg-muted); }
.sg-energia__letra {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--sg-radius);
  font-family: var(--sg-serif);
  font-size: 1.7rem;
  color: #06121f;
  background: var(--sg-gold-grad);
}
.sg-energia__letra--a { background: linear-gradient(135deg, #1f7a4d, #34a86a); color: #fff; }
.sg-energia__letra--b { background: linear-gradient(135deg, #3d8b3d, #5fb85f); color: #fff; }
.sg-energia__letra--c { background: linear-gradient(135deg, #7c9c2f, #a8c845); color: #12200f; }
.sg-energia__letra--d { background: linear-gradient(135deg, #b39a2a, #ddc447); color: #201d0d; }
.sg-energia__letra--e { background: linear-gradient(135deg, #c98a2b, #edb14c); color: #221708; }
.sg-energia__letra--f { background: linear-gradient(135deg, #c26a2a, #e8913f); color: #fff; }
.sg-energia__letra--g { background: linear-gradient(135deg, #b03a2e, #d4574a); color: #fff; }

/* Mapa
   (aquí vivía también «.sg-video», el contenedor del vídeo dentro de la
   columna de contenido. El vídeo pasó a mostrarse a sangre antes de la
   galería, con .sg-ficha-video, y esas reglas se quedaron sin usar.) */
.sg-mapa {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  overflow: hidden;
  background: var(--sg-navy-800);
}
.sg-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Vídeo del inmueble, justo antes de la galería --------------------------------
   Mismo ancho de container y mismo marco 16:9 que .sg-galeria__principal: los
   dos bloques van seguidos y tienen que verse como piezas de la misma serie, no
   como dos cajas distintas. Si algún día se cambia el marco de la galería,
   conviene cambiar este a la vez.

   El padding inferior es la separación con las fotografías, que arrancan
   pegadas: .sg-galeria no tiene padding superior.

   «contain» y no «cover» a propósito: el vídeo lo sube el cliente y puede no ser
   16:9. Recortar le comería parte de la imagen; así, en el caso normal llena la
   caja exacta y en el raro aparecen bandas negras, que sobre fondo negro no
   desentonan. */
.sg-ficha-video {
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--sg-navy-900);
}
.sg-ficha-video__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: #000;
}
.sg-ficha-video__marco video,
.sg-ficha-video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* Mapa a la espera de que lo pidan: hasta entonces no hay iframe, solo este
   botón a toda la caja. Ver el bloque «Ubicación» de inmueble.php. */
.sg-mapa--espera { background: var(--sg-surface); }
.sg-mapa__aviso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1.5rem;
  background: none;
  border: 0;
  color: var(--sg-muted);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.45s var(--sg-ease), color 0.45s var(--sg-ease);
}
.sg-mapa__aviso:hover { background: var(--sg-surface-2); color: var(--sg-gold); }
.sg-mapa__aviso .sg-icon { width: 30px; height: 30px; color: var(--sg-gold); }
.sg-mapa__aviso b {
  font-family: var(--sg-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sg-cream);
}
.sg-mapa__aviso small { max-width: 42ch; font-size: 0.78rem; line-height: 1.6; }

/* Documentos descargables */
.sg-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sg-doc {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  text-decoration: none;
  transition: border-color 0.4s var(--sg-ease), background-color 0.4s var(--sg-ease);
}
.sg-doc:hover { border-color: var(--sg-line); background: var(--sg-surface-2); }
.sg-doc__ext {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--sg-gold);
}
.sg-doc__cuerpo { flex: 1 1 auto; min-width: 0; }
.sg-doc__cuerpo b {
  display: block;
  font-weight: 400;
  color: var(--sg-cream);
  font-size: 0.95rem;
  word-break: break-word;
}
.sg-doc__cuerpo small { font-size: 0.78rem; color: var(--sg-muted); }
.sg-doc__flecha { flex-shrink: 0; width: 18px; height: 18px; color: var(--sg-gold); }

/* Columna lateral */
.sg-lateral { position: sticky; top: 150px; display: grid; gap: 1.25rem; }
.sg-lateral__caja {
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  background: linear-gradient(160deg, rgba(22, 41, 74, 0.55), rgba(6, 14, 27, 0.85));
}
.sg-lateral__caja h2 { margin-bottom: 0.75rem; }
.sg-lateral__caja p { font-size: 0.9rem; }
.sg-lateral__acciones { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
.sg-lateral__acciones .sg-btn { width: 100%; }

.sg-lateral__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sg-lateral__datos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
  color: var(--sg-muted);
}
.sg-lateral__datos b { color: var(--sg-cream); font-weight: 400; }

.sg-lateral__nota {
  display: flex;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
}
.sg-lateral__nota .sg-icon { width: 22px; height: 22px; color: var(--sg-gold); flex-shrink: 0; }
.sg-lateral__nota p { margin: 0; font-size: 0.82rem; color: var(--sg-muted); }

/* 8 ── AVISOS Y ESTADOS VACÍOS =========================================== */
.sg-nota { color: var(--sg-muted); font-size: 0.95rem; }
.sg-nota strong { color: var(--sg-gold); font-weight: 400; }

.sg-aviso {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--sg-line);
  border-left-width: 2px;
  border-radius: var(--sg-radius);
  background: rgba(200, 162, 76, 0.05);
  color: var(--sg-muted);
}
.sg-aviso strong { display: block; color: var(--sg-cream); font-weight: 400; margin-bottom: 0.3rem; }
.sg-aviso code { color: var(--sg-gold-light); }

.sg-vacio {
  padding: clamp(3rem, 8vw, 5.5rem) 1.5rem;
  border: 1px dashed var(--sg-line-soft);
  border-radius: var(--sg-radius);
  text-align: center;
}
.sg-vacio__ico {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--sg-line);
  border-radius: 50%;
  color: var(--sg-gold);
}
.sg-vacio p { max-width: 56ch; margin: 1rem auto 0; }

/* 9 ── RESPONSIVE ======================================================== */
@media (min-width: 992px) {
  /* En escritorio los filtros van siempre desplegados. */
  .sg-filtros__panel { display: grid; }
  .sg-filtros__toggle { display: none; }
  .sg-filtros__cabecera { justify-content: flex-end; }
}

@media (max-width: 991.98px) {
  .sg-serv-fila { grid-template-columns: 70px minmax(0, 1fr); }
  .sg-serv-fila__lista { grid-column: 2; }
  .sg-serv-fila__num { flex-direction: column; }
  .sg-lateral { position: static; }
  .sg-ficha-top__precio { text-align: left; }
}

@media (max-width: 767.98px) {
  /* La portada a sangre baja de altura: con la cabecera fija, el título largo,
     el precio y dos botones, una pantalla entera queda apelmazada. Y los
     botones pasan a ocupar el ancho, que en el móvil es lo que se pulsa bien. */
  .sg-ficha-hero { min-height: 76svh; }
  .sg-ficha-hero__mandos { bottom: auto; top: 7.5rem; }
  .sg-ficha-hero__acciones .sg-btn { flex: 1 1 100%; justify-content: center; }
  .sg-campo--ancho { grid-column: span 1; }
  .sg-filtros__acciones { grid-column: span 1; padding-top: 0.5rem; }
  .sg-contacto-item { grid-template-columns: 48px minmax(0, 1fr); }
  .sg-contacto-item__valor { grid-column: 2; text-align: left; }
  .sg-tabla-datos > div { flex-direction: column; gap: 0.15rem; }
  .sg-tabla-datos dd { text-align: left; }
  .sg-galeria__miniaturas { grid-auto-columns: minmax(88px, 1fr); }
  .sg-serv-fila { grid-template-columns: 1fr; }
  .sg-serv-fila__lista { grid-column: 1; }
  .sg-serv-fila__num { flex-direction: row; align-items: center; gap: 1.25rem; }
}

/* 10 ── TEXTOS EN DORADO, EN NEGRITA ======================================
   Petición del cliente (oct-2026), la misma que en el panel: el dorado es
   fino y en letra pequeña se perdía. Va al final de la última hoja de estilos
   que fija grosores para ganar a las reglas de arriba.

   Solo textos pequeños y precios. Los titulares grandes en oro («SG Martín»,
   «una misma marca», los números 01, 02…) se quedan finos a propósito: esa
   letra está dibujada para verse ligera a gran tamaño.

   Tampoco engorda lo que solo se vuelve dorado al pasar el ratón: cambiaría
   de ancho y movería la línea. 500 es el grueso más alto que se carga de las
   dos tipografías. */
.sg-eyebrow,
.sg-brand__sub,
.sg-nav a.is-active,
.sg-nav__menu a.is-active,
.sg-hero__plazas,
.sg-grupo__firma,
.sg-division__kicker,
.sg-division__num,
.sg-div-card__kicker,
.sg-link,
.sg-migas__actual,
.sg-footer h4,
.sg-contacto-item__valor,
.sg-badge,
.sg-campo label,
.sg-filtros__toggle,
.sg-inm__cat,
.sg-nota strong,
.sg-doc__ext,
.sg-inm__precio,
.sg-ficha-top__precio-valor,
.sg-ficha-hero__datos b {
  font-weight: 500;
}