/* ==========================================================================
   SG MARTÍN · Sistema de diseño
   Azul marino corporativo + oro. Editorial, minimalista, de lujo.
   Orden: 1 Tokens · 2 Base · 3 Tipografía · 4 Utilidades · 5 Botones
          6 Header · 7 Hero · 8 Secciones · 9 Footer · 10 Motion · 11 Responsive
   ========================================================================== */

/* 1 ── TOKENS ============================================================== */
:root {
  /* Marca */
  --sg-navy-900: #060e1b;
  --sg-navy-850: #08121f;
  --sg-navy-800: #0a1526;
  --sg-navy-700: #10203a; /* azul del manual corporativo */
  --sg-navy-600: #16294a;
  --sg-navy-500: #1e3760;

  --sg-gold-deep:  #8a6a2f;
  --sg-gold:       #c8a24c;
  --sg-gold-light: #e8cf8e;
  --sg-gold-glare: #fbf1c7;

  --sg-cream: #f3efe7;
  --sg-text:  #dfe3ea;
  --sg-muted: #93a0b5;

  /* Superficies */
  --sg-line:       rgba(200, 162, 76, 0.22);
  --sg-line-soft:  rgba(200, 162, 76, 0.12);
  --sg-surface:    rgba(255, 255, 255, 0.022);
  --sg-surface-2:  rgba(255, 255, 255, 0.045);

  /* Oro con volumen, como el logotipo */
  --sg-gold-grad: linear-gradient(
    100deg,
    var(--sg-gold-deep) 0%,
    var(--sg-gold) 20%,
    var(--sg-gold-glare) 44%,
    var(--sg-gold) 60%,
    var(--sg-gold-light) 78%,
    var(--sg-gold-deep) 100%
  );

  /* Tipografía */
  --sg-serif: "Cormorant Garamond", "Times New Roman", serif;
  --sg-sans:  "Jost", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ritmo */
  --sg-section: clamp(5.5rem, 11vw, 10.5rem);
  --sg-radius: 2px;
  --sg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--sg-sans);
  --bs-body-color: var(--sg-text);
  --bs-body-bg: var(--sg-navy-900);
  --bs-link-color: var(--sg-gold);
  --bs-link-hover-color: var(--sg-gold-light);
}

/* 2 ── BASE =============================================================== */
* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px; /* alto de la cabecera fija ya compactada */
}

body {
  background-color: var(--sg-navy-900);
  color: var(--sg-text);
  font-family: var(--sg-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.012em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grano finísimo: quita el plano digital y aporta textura de impresión */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; }

::selection {
  background: var(--sg-gold);
  color: var(--sg-navy-900);
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--sg-navy-900); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--sg-gold-deep), var(--sg-gold));
  border-radius: 9px;
}

:focus-visible {
  outline: 1px solid var(--sg-gold);
  outline-offset: 4px;
}

.sg-skip {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--sg-gold);
  color: var(--sg-navy-900);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.25s var(--sg-ease);
}
.sg-skip:focus { top: 1rem; }

/* 3 ── TIPOGRAFÍA ========================================================= */
h1, h2, h3, h4, .sg-display {
  font-family: var(--sg-serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--sg-cream);
}

.sg-display-xl { font-size: clamp(3rem, 8.5vw, 7.5rem); }
.sg-display-lg { font-size: clamp(2.4rem, 5.4vw, 4.5rem); }
.sg-display-md { font-size: clamp(1.75rem, 2.9vw, 2.6rem); }
.sg-display-sm { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.25; }

.sg-italic {
  font-style: italic;
  font-weight: 300;
}

/* Cormorant usa numeración antigua por defecto: en precios y cifras queda
   irregular, así que forzamos numeración de caja alta. */
.sg-hero__sello b,
.sg-paso__num,
.sg-division__num,
.sg-serv-fila__num,
.sg-inm__precio,
.sg-inm__datos,
.sg-ficha-top__precio-valor,
.sg-ficha__rapidos b,
.sg-tabla-datos dd,
.sg-energia__item,
.sg-lateral__datos,
.sg-paginacion,
.sg-badge {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Texto en oro pulido */
.sg-gold-text {
  background: var(--sg-gold-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sg-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sg-gold);
  margin-bottom: 1.5rem;
}
.sg-eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sg-gold));
}
.sg-eyebrow--center::after {
  content: "";
  width: clamp(24px, 4vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, var(--sg-gold), transparent);
}

.sg-lead {
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  color: var(--sg-muted);
  line-height: 1.85;
  max-width: 62ch;
}

.sg-muted { color: var(--sg-muted); }

/* Filete ornamental con rombo, tomado del logotipo */
.sg-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.75rem 0;
}
.sg-rule::before,
.sg-rule::after {
  content: "";
  height: 1px;
  width: clamp(38px, 9vw, 96px);
  background: linear-gradient(90deg, transparent, var(--sg-gold));
}
.sg-rule::after { background: linear-gradient(90deg, var(--sg-gold), transparent); }
.sg-rule i {
  width: 6px;
  height: 6px;
  background: var(--sg-gold);
  transform: rotate(45deg);
  display: block;
}
.sg-rule--start { justify-content: flex-start; }
.sg-rule--start::before { display: none; }

/* 4 ── UTILIDADES ========================================================= */
.sg-section {
  position: relative;
  padding-block: var(--sg-section);
}

.sg-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Las filas «row g-5» de Bootstrap llevan un margen negativo de 24 px a cada
   lado, y por debajo de 480 px el contenedor solo tiene 20 de relleno: la fila
   se salía 4 px y la página entera se ensanchaba (en iPhone puede «bailar» de
   lado). En el móvil el hueco entre columnas baja a 40 px (margen de 20, igual
   que el relleno). El texto se queda donde estaba: 20 px del borde. */
@media (max-width: 479.98px) {
  .sg-container .row.g-5 { --bs-gutter-x: 2.5rem; }
}

.sg-hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--sg-line), transparent);
  opacity: 1;
}

/* Halos de luz cálida sobre el azul */
.sg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.sg-glow--gold { background: rgba(200, 162, 76, 0.13); }
.sg-glow--blue { background: rgba(30, 55, 96, 0.5); }

/* ---------------------------------------------------------------------------
   FONDOS FOTOGRÁFICOS DIFUMINADOS

   Rompen el azul plano de las secciones largas sin robarle protagonismo al
   texto. Las imágenes de assets/img/fondos/ ya vienen desenfocadas y guardadas
   a 480 px: pesan unos 10 KB y el navegador las estira sin coste, así que no
   hace falta ningún filtro CSS en tiempo real (que sí penalizaría al hacer
   scroll en equipos modestos).

   Para cambiar la foto de una sección basta con sustituir el fichero. Para
   añadir el fondo a otra sección, súmela a los dos selectores de abajo y
   declárele su propia --sg-fondo.

   El velo es el primer degradado del background-image: subir sus alfas oscurece
   la foto, bajarlas la deja verse más.
--------------------------------------------------------------------------- */
.sg-divisiones { --sg-fondo: url("../img/fondos/divisiones.jpg"); }
.sg-servicios  { --sg-fondo: url("../img/fondos/servicios.jpg"); }
.sg-footer     { --sg-fondo: url("../img/fondos/pie.jpg"); }

.sg-divisiones::before,
.sg-servicios::before,
.sg-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      180deg,
      rgba(6, 14, 27, 0.92) 0%,
      rgba(6, 14, 27, 0.74) 45%,
      rgba(6, 14, 27, 0.95) 100%),
    var(--sg-fondo);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* El contenido pasa por delante del fondo. */
.sg-divisiones > .sg-container,
.sg-servicios > .sg-container,
.sg-footer > .sg-container { position: relative; z-index: 1; }

/* En el pie la foto se abre hacia abajo, detrás de la firma tipográfica. */
.sg-footer::before {
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 9, 15, 0.96) 0%,
      rgba(4, 9, 15, 0.84) 50%,
      rgba(4, 9, 15, 0.66) 100%),
    var(--sg-fondo);
}

/* Excepción: en páginas que ya llevan mucha fotografía, una sección concreta
   puede renunciar al fondo añadiendo «sg-sin-fondo» a su <section>. Va la
   última del bloque a propósito, para ganar a todas las reglas anteriores. */
.sg-sin-fondo::before { display: none; }

.sg-icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.05;
}

/* Marca de agua del monograma */
.sg-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.045;
  z-index: 0;
}

/* 5 ── BOTONES ============================================================ */
.sg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.4rem;
  font-family: var(--sg-sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--sg-ease), border-color 0.45s var(--sg-ease),
    transform 0.45s var(--sg-ease), box-shadow 0.45s var(--sg-ease);
}
.sg-btn .sg-icon { width: 17px; height: 17px; }
.sg-btn:hover { transform: translateY(-2px); }

/* Relleno que sube desde abajo */
.sg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sg-gold-grad);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--sg-ease);
}
.sg-btn:hover::before { transform: scaleY(1); }

.sg-btn--gold {
  color: var(--sg-navy-900);
  background: var(--sg-gold-grad);
  background-size: 220% 100%;
  border-color: transparent;
  font-weight: 500;
  box-shadow: 0 10px 34px -14px rgba(200, 162, 76, 0.7);
  transition: background-position 0.7s var(--sg-ease), transform 0.45s var(--sg-ease),
    box-shadow 0.45s var(--sg-ease);
}
.sg-btn--gold::before { display: none; }
.sg-btn--gold:hover {
  color: var(--sg-navy-900);
  background-position: 100% 0;
  box-shadow: 0 16px 44px -14px rgba(200, 162, 76, 0.85);
}

.sg-btn--ghost { color: var(--sg-cream); background: transparent; }
.sg-btn--ghost:hover { color: var(--sg-navy-900); border-color: transparent; }

.sg-btn--sm { padding: 0.72rem 1.5rem; font-size: 0.68rem; letter-spacing: 0.2em; }

/* Enlace con subrayado que se dibuja */
.sg-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sg-gold);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
}
.sg-link .sg-icon { width: 16px; height: 16px; transition: transform 0.4s var(--sg-ease); }
.sg-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sg-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--sg-ease);
}
.sg-link:hover { color: var(--sg-gold-light); }
.sg-link:hover::after { transform: scaleX(1); transform-origin: left; }
.sg-link:hover .sg-icon { transform: translateX(5px); }

/* 6 ── HEADER ============================================================= */
.sg-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding-block: 1.1rem 0.9rem;
  transition: padding 0.5s var(--sg-ease), background-color 0.5s var(--sg-ease),
    box-shadow 0.5s var(--sg-ease), backdrop-filter 0.5s var(--sg-ease);
}
.sg-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sg-line), transparent);
  opacity: 0;
  transition: opacity 0.5s var(--sg-ease);
}
.sg-header.is-stuck {
  padding-block: 0.6rem 0.5rem;
  background: rgba(6, 14, 27, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.9);
}
.sg-header.is-stuck::after { opacity: 1; }

/* Logo centrado en tres pisos y el menú en una segunda fila (oct-2026).
   Rejilla de tres columnas iguales a los lados: el logo queda en el centro
   exacto de la pantalla aunque a la derecha esté el botón de «Hablemos». */
.sg-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
}

.sg-brand {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  line-height: 1.1;
}
.sg-brand img {
  width: auto;
  height: 50px;
  margin-bottom: 0.45rem;
  transition: height 0.5s var(--sg-ease), margin 0.5s var(--sg-ease);
}
.is-stuck .sg-brand img { height: 32px; margin-bottom: 0.3rem; }
.sg-brand__name {
  font-family: var(--sg-serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em; /* compensa el espaciado de la última letra */
  text-transform: uppercase;
  color: var(--sg-cream);
  transition: font-size 0.5s var(--sg-ease);
}
.is-stuck .sg-brand__name { font-size: 1.05rem; }
.sg-brand__sub {
  margin-top: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--sg-gold);
}

.sg-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 2.4vw, 2.3rem);
  margin-top: 1rem;
  transition: margin 0.5s var(--sg-ease);
}
.is-stuck .sg-nav { margin-top: 0.55rem; }
.sg-nav a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sg-text);
  text-decoration: none;
  padding-block: 4px;
  transition: color 0.4s var(--sg-ease);
}
.sg-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sg-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--sg-ease);
}
.sg-nav a:hover,
.sg-nav a.is-active { color: var(--sg-gold); }
.sg-nav a:hover::after,
.sg-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Submenú desplegable */
.sg-nav__drop { position: relative; }
.sg-nav__drop > a { display: inline-flex; align-items: center; gap: 0.4rem; }
.sg-nav__caret {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform 0.4s var(--sg-ease);
}
.sg-nav__drop:hover .sg-nav__caret { transform: rotate(90deg) translateX(2px); }

.sg-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  min-width: 250px;
  padding: 0.6rem 0;
  margin-top: 1.1rem;
  background: rgba(8, 18, 31, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px);
  transition: opacity 0.35s var(--sg-ease), transform 0.35s var(--sg-ease), visibility 0.35s;
}
/* Puente invisible para que el ratón no pierda el menú al bajar */
.sg-nav__menu::before {
  content: "";
  position: absolute;
  inset: -1.1rem 0 auto 0;
  height: 1.1rem;
}
.sg-nav__drop:hover .sg-nav__menu,
.sg-nav__drop:focus-within .sg-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.sg-nav__menu a {
  display: block;
  padding: 0.65rem 1.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--sg-text);
  white-space: nowrap;
}
.sg-nav__menu a::after { display: none; }
.sg-nav__menu a:hover,
.sg-nav__menu a.is-active { color: var(--sg-gold); background: rgba(200, 162, 76, 0.06); }

.sg-header__cta {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Botón hamburguesa */
.sg-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  cursor: pointer;
}
.sg-burger span {
  display: block;
  width: 20px;
  height: 1px;
  margin-inline: auto;
  background: var(--sg-gold);
  transition: transform 0.4s var(--sg-ease), opacity 0.3s var(--sg-ease);
}
.sg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil */
.sg-mobile {
  position: fixed;
  inset: 0;
  z-index: 1029;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 8vw, 4rem) 3rem;
  background: linear-gradient(160deg, var(--sg-navy-800), var(--sg-navy-900));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.45s var(--sg-ease), transform 0.45s var(--sg-ease),
    visibility 0.45s;
}
.sg-mobile.is-open { opacity: 1; visibility: visible; transform: none; }
.sg-mobile a.sg-mobile__link {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--sg-serif);
  font-size: clamp(1.75rem, 8vw, 2.6rem);
  color: var(--sg-cream);
  text-decoration: none;
  border-bottom: 1px solid var(--sg-line-soft);
  transition: color 0.35s var(--sg-ease), padding-left 0.35s var(--sg-ease);
}
.sg-mobile a.sg-mobile__link:hover { color: var(--sg-gold); padding-left: 0.6rem; }
.sg-mobile a.sg-mobile__link--hijo {
  font-size: clamp(1rem, 4vw, 1.25rem);
  padding-left: 1.4rem;
  color: var(--sg-muted);
}
.sg-mobile a.sg-mobile__link--hijo::before { content: "— "; color: var(--sg-gold); }
.sg-mobile__foot { margin-top: 2.5rem; display: grid; gap: 0.9rem; }

body.is-locked { overflow: hidden; }

/* 7 ── HERO =============================================================== */
.sg-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 85% 60% at 50% 0%, rgba(30, 55, 96, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 105%, rgba(200, 162, 76, 0.1), transparent 70%),
    linear-gradient(175deg, var(--sg-navy-800) 0%, var(--sg-navy-900) 55%, #04090f 100%);
}

/* Fondo audiovisual opcional. Va lo primero del hero para que la retícula, los
   halos y el contenido queden por encima sin necesidad de más z-index. */
.sg-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Velo sobre el vídeo: el logotipo y el claim mandan siempre sobre la imagen.
   ---------------------------------------------------------------------------
   Son DOS degradados apilados en un mismo elemento, y ahí está el truco al
   ajustarlo: no se suman, se multiplican.

     · El radial abre una ventana más clara en el centro, donde va el claim.
     · El lineal oscurece arriba y abajo, para que respiren la cabecera y el
       indicador de scroll.

   Cuánto vídeo se ve en el punto más despejado: (1 − radial) × (1 − lineal).
   Con estos valores ≈ (1 − 0,34) × (1 − 0,39) ≈ 0,40, o sea un 40 %. Antes
   eran 0,5 y 0,58, que dejaban pasar solo un 21 % y tapaban demasiado.

   PARA AJUSTARLO: mueva solo los dos primeros números de cada línea (0.34 y
   0.36). Bajarlos deja ver más vídeo; subirlos lo tapan. Los de los extremos
   (0.70, 0.78, 0.86) son los que sostienen la legibilidad en los bordes y
   conviene no tocarlos.

   El límite no es estético: el claim va en texto claro y tiene que leerse
   TAMBIÉN en el fotograma más luminoso del vídeo. Compruébelo ahí antes de
   bajar más, no en el primer segundo. */
.sg-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 45%, rgba(4, 9, 15, 0.34), rgba(4, 9, 15, 0.70) 72%),
    linear-gradient(180deg, rgba(4, 9, 15, 0.78) 0%, rgba(4, 9, 15, 0.36) 40%, rgba(4, 9, 15, 0.86) 100%);
}
.sg-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sin vídeo, la foto de póster se mueve sola con un zoom muy lento. */
.sg-hero__video--fija { animation: sg-hero-zoom 30s var(--sg-ease) infinite alternate; }
@keyframes sg-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* Retícula tenue: sensación de plano arquitectónico */
.sg-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(200, 162, 76, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 162, 76, 0.05) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 78%);
}

.sg-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-block: 12rem 6rem;
}

.sg-hero__mark {
  width: clamp(96px, 13vw, 150px);
  margin-inline: auto;
  filter: drop-shadow(0 14px 44px rgba(200, 162, 76, 0.35));
}

.sg-hero__name {
  margin-top: 1.9rem;
  font-family: var(--sg-serif);
  font-size: clamp(2.6rem, 9.5vw, 6.6rem);
  font-weight: 300;
  letter-spacing: clamp(0.08em, 1.4vw, 0.22em);
  text-transform: uppercase;
  line-height: 1;
  text-indent: clamp(0.08em, 1.4vw, 0.22em); /* compensa el tracking final */
}

.sg-hero__tagline {
  margin-top: 1.4rem;
  font-family: var(--sg-serif);
  font-size: clamp(1.3rem, 3.1vw, 2.3rem);
  font-style: italic;
  font-weight: 300;
  color: var(--sg-cream);
}

.sg-hero__sub {
  margin: 1.35rem auto 0;
  max-width: 58ch;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: var(--sg-muted);
}

.sg-hero__plazas {
  margin-top: 2.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sg-gold);
}
.sg-hero__plazas i {
  width: 4px;
  height: 4px;
  background: var(--sg-gold);
  transform: rotate(45deg);
  opacity: 0.75;
}

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

.sg-hero__sellos {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--sg-line-soft);
}
.sg-hero__sello { padding: 1.8rem 0.75rem 0; }
.sg-hero__sello + .sg-hero__sello { border-left: 1px solid var(--sg-line-soft); }
.sg-hero__sello b {
  display: block;
  font-family: var(--sg-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
}
.sg-hero__sello span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sg-muted);
}

.sg-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sg-muted);
  text-decoration: none;
}
.sg-hero__scroll span { display: block; width: 1px; height: 52px; background: var(--sg-line); position: relative; overflow: hidden; }
.sg-hero__scroll span::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--sg-gold);
  animation: sg-scroll 2.4s var(--sg-ease) infinite;
}
@keyframes sg-scroll {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}

/* 8 ── SECCIONES ========================================================== */

/* 8.1 Cinta de divisiones */
.sg-marquee {
  position: relative;
  padding-block: 1.5rem;
  border-block: 1px solid var(--sg-line-soft);
  background: linear-gradient(90deg, var(--sg-navy-850), var(--sg-navy-800), var(--sg-navy-850));
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sg-marquee__track {
  display: flex;
  width: max-content;
  animation: sg-marquee 44s linear infinite;
}
.sg-marquee:hover .sg-marquee__track { animation-play-state: paused; }
.sg-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  padding-inline: 1.3rem;
  font-family: var(--sg-serif);
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.55);
  white-space: nowrap;
}
.sg-marquee__item i {
  width: 5px;
  height: 5px;
  background: var(--sg-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
@keyframes sg-marquee {
  to { transform: translateX(-50%); }
}

/* 8.2 El Grupo */
.sg-grupo { background: var(--sg-navy-900); }
.sg-grupo__quote {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--sg-line);
  font-family: var(--sg-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--sg-cream);
}
.sg-grupo__firma {
  margin-top: 1.5rem;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sg-gold);
}

.sg-pilar {
  display: flex;
  gap: 1.15rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--sg-line-soft);
}
.sg-pilar:last-child { border-bottom: 1px solid var(--sg-line-soft); }
.sg-pilar__ico {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sg-line);
  border-radius: 50%;
  color: var(--sg-gold);
  transition: background-color 0.5s var(--sg-ease), color 0.5s var(--sg-ease),
    transform 0.5s var(--sg-ease);
}
.sg-pilar:hover .sg-pilar__ico {
  background: var(--sg-gold-grad);
  color: var(--sg-navy-900);
  transform: rotate(-8deg) scale(1.06);
}
.sg-pilar h3 { font-size: 1.28rem; margin-bottom: 0.35rem; }
.sg-pilar p { margin: 0; font-size: 0.93rem; color: var(--sg-muted); line-height: 1.72; }

/* 8.3 Divisiones */
.sg-divisiones {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(22, 41, 74, 0.6), transparent 70%),
    var(--sg-navy-850);
}
.sg-division {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--sg-line-soft);
}
.sg-division:last-child { border-bottom: 1px solid var(--sg-line-soft); }
/* En las pares la imagen pasa a la derecha y las columnas se invierten con
   ella, para que todas las imágenes tengan el mismo tamaño. */
.sg-division:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.sg-division:nth-child(even) .sg-division__media { order: 2; }

/* Cuadrado, como las imágenes de división y de zona (1254×1254): con el 4:3
   de antes se les cortaba el monograma por arriba y el icono por abajo, y el
   cliente quiere verlas siempre enteras (oct-2026). */
.sg-division__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: var(--sg-navy-700);
}
/* Sin zoom al pasar el ratón: al crecer, la imagen perdía los bordes. */
.sg-division__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sg-division__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 14, 27, 0.55));
  pointer-events: none;
}
.sg-division__num {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  left: 1.1rem;
  font-family: var(--sg-serif);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--sg-gold);
}

.sg-division__kicker {
  font-size: 0.65rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--sg-gold);
}
.sg-division h3 {
  margin: 0.85rem 0 1.1rem;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.sg-division p { color: var(--sg-muted); max-width: 54ch; }
.sg-division__lista {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.sg-division__lista li {
  padding: 0.42rem 1rem;
  border: 1px solid var(--sg-line-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sg-text);
  transition: border-color 0.4s var(--sg-ease), color 0.4s var(--sg-ease);
}
.sg-division:hover .sg-division__lista li { border-color: var(--sg-line); }

/* 8.4 Servicios */
.sg-servicios { position: relative; background: var(--sg-navy-900); }
.sg-servicios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border-top: 1px solid var(--sg-line-soft);
  border-left: 1px solid var(--sg-line-soft);
}
.sg-servicio {
  position: relative;
  padding: clamp(2rem, 3.5vw, 3rem);
  border-right: 1px solid var(--sg-line-soft);
  border-bottom: 1px solid var(--sg-line-soft);
  overflow: hidden;
  transition: background-color 0.6s var(--sg-ease);
}
.sg-servicio::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.7s var(--sg-ease);
}
.sg-servicio:hover { background: var(--sg-surface); }
.sg-servicio:hover::before { transform: scaleX(1); }
.sg-servicio__ico {
  color: var(--sg-gold);
  margin-bottom: 1.5rem;
  display: inline-flex;
  transition: transform 0.6s var(--sg-ease);
}
.sg-servicio__ico .sg-icon { width: 32px; height: 32px; }
.sg-servicio:hover .sg-servicio__ico { transform: translateY(-4px); }
.sg-servicio h3 { font-size: 1.45rem; margin-bottom: 0.75rem; }
.sg-servicio p { margin: 0; font-size: 0.93rem; color: var(--sg-muted); }

/* 8.5 Método */
.sg-metodo {
  position: relative;
  background: linear-gradient(180deg, var(--sg-navy-850), var(--sg-navy-800));
  overflow: hidden;
}
.sg-paso {
  position: relative;
  padding: 2.1rem 0;
  display: grid;
  grid-template-columns: minmax(70px, 0.5fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  border-top: 1px solid var(--sg-line-soft);
  transition: padding-left 0.55s var(--sg-ease);
}
.sg-paso:last-child { border-bottom: 1px solid var(--sg-line-soft); }
.sg-paso:hover { padding-left: clamp(0px, 1.5vw, 1.25rem); }
.sg-paso__num {
  font-family: var(--sg-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}
.sg-paso h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.sg-paso p { margin: 0; color: var(--sg-muted); font-size: 0.95rem; }

/* 8.6 Presencia */
.sg-presencia { background: var(--sg-navy-900); }
/* Tarjeta de zona. Las fotos ya traen el nombre de la ciudad rotulado, así
   que se ven enteras y el texto va DEBAJO, nunca encima: antes el título y la
   frase se montaban sobre el rótulo de la imagen y no se leía ninguno. */
.sg-plaza {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sg-line-soft);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  text-decoration: none;
  transition: border-color 0.5s var(--sg-ease), transform 0.5s var(--sg-ease);
}
.sg-plaza:hover { border-color: var(--sg-line); transform: translateY(-4px); }
.sg-plaza__img { aspect-ratio: 1 / 1; overflow: hidden; background: #0b1b3c; }
.sg-plaza__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* entera siempre: ni recorte ni zoom */
}
.sg-plaza__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1.5rem;
}
.sg-plaza p { flex: 1 1 auto; margin: 0; font-size: 0.9rem; color: var(--sg-muted); }
.sg-plaza .sg-link { align-self: flex-start; }
.sg-plaza:hover .sg-link::after { transform: scaleX(1); transform-origin: left; }

/* 8.7 FAQ */
.sg-faq { background: var(--sg-navy-850); }
.sg-acc { border-top: 1px solid var(--sg-line-soft); }
.sg-acc__item { border-bottom: 1px solid var(--sg-line-soft); }
.sg-acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--sg-serif);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 300;
  color: var(--sg-cream);
  cursor: pointer;
  transition: color 0.4s var(--sg-ease);
}
.sg-acc__btn:hover,
.sg-acc__btn[aria-expanded="true"] { color: var(--sg-gold); }
.sg-acc__sign {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 6px;
}
.sg-acc__sign::before,
.sg-acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--sg-gold);
  transition: transform 0.45s var(--sg-ease);
}
.sg-acc__sign::after { transform: rotate(90deg); }
.sg-acc__btn[aria-expanded="true"] .sg-acc__sign::after { transform: rotate(0deg); }
.sg-acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.5s var(--sg-ease);
}
.sg-acc__panel.is-abierto { height: auto; }
.sg-acc__panel p {
  margin: 0;
  padding: 0 0 1.7rem;
  max-width: 78ch;
  color: var(--sg-muted);
  font-size: 0.95rem;
}

/* 8.8 CTA de contacto */
.sg-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(200, 162, 76, 0.16), transparent 70%),
    linear-gradient(160deg, var(--sg-navy-700), var(--sg-navy-900) 70%);
  border-top: 1px solid var(--sg-line-soft);
}
.sg-cta__canales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--sg-line-soft);
  border: 1px solid var(--sg-line-soft);
}
.sg-canal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1.8rem, 3vw, 2.5rem) 1.25rem;
  background: rgba(6, 14, 27, 0.6);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.5s var(--sg-ease);
}
.sg-canal:hover { background: rgba(200, 162, 76, 0.07); }
.sg-canal__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),
    transform 0.5s var(--sg-ease);
}
.sg-canal:hover .sg-canal__ico {
  background: var(--sg-gold-grad);
  color: var(--sg-navy-900);
  transform: translateY(-3px);
}
.sg-canal__label {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sg-muted);
}
.sg-canal__valor {
  font-family: var(--sg-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--sg-cream);
  word-break: break-word;
  transition: color 0.4s var(--sg-ease);
}
/* El correo es el más largo de los cuatro valores y el único que puede no caber
   de una pieza en su columna. Va un punto por debajo del resto; con eso y el
   <wbr> que mete email_html() queda en dos líneas limpias —usuario arriba,
   dominio entero abajo— en vez de partirse por donde caiga.
   El «word-break» de arriba se queda como último recurso, por si algún día el
   correo es aún más largo. */
.sg-canal__valor--email {
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  letter-spacing: 0.01em;
}
.sg-canal:hover .sg-canal__valor { color: var(--sg-gold-light); }

/* 9 ── FOOTER ============================================================= */
.sg-footer {
  position: relative;
  background: #04090f;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
}
/* Logo y redes centrados arriba; debajo, las tres columnas de enlaces también
   centradas, para que todo el pie cuelgue del mismo eje que el logo. */
.sg-footer__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--sg-line-soft);
}
.sg-footer__marca .sg-social { margin-top: 1.75rem; }
/* El logo completo, como en la cabecera pero un punto más grande. */
.sg-footer__firma {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  text-align: center;
}
.sg-footer__firma .sg-footer__logo { margin-bottom: 0.8rem; }
.sg-footer__nombre {
  font-family: var(--sg-serif);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--sg-cream);
}
.sg-footer__sub {
  margin-top: 6px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--sg-gold);
}
.sg-footer__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  text-align: center;
}
.sg-footer__top ul { justify-items: center; }
/* Sedes del pie: ciudad en claro encima y la dirección debajo, más apretada
   que los enlaces de las otras columnas porque son dos líneas por sede. */
.sg-footer__sedes { gap: 1rem; }
.sg-footer__sedes a { display: block; line-height: 1.45; font-size: 0.85rem; }
.sg-footer__sedes b { display: block; font-weight: 500; color: var(--sg-cream); }
@media (max-width: 991.98px) {
  /* Cuatro columnas no caben en tableta: dos y dos. */
  .sg-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sg-footer__logo { width: 74px; }
.sg-footer h4 {
  font-family: var(--sg-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sg-gold);
  margin-bottom: 1.4rem;
}
.sg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sg-footer a {
  color: var(--sg-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.35s var(--sg-ease), padding-left 0.35s var(--sg-ease);
}
.sg-footer a:hover { color: var(--sg-gold); }
/* Firma del desarrollador: en dorado de base, no solo al pasar por encima
   (petición del 22-oct-2026, para que se vea). Encima se aclara. */
.sg-footer__credit a { color: var(--sg-gold); }
.sg-footer__credit a:hover { color: var(--sg-gold-light); }

.sg-social { display: flex; gap: 0.65rem; margin-top: 1.75rem; }
.sg-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sg-line-soft);
  border-radius: 50%;
  color: var(--sg-muted);
  transition: color 0.4s var(--sg-ease), border-color 0.4s var(--sg-ease),
    transform 0.4s var(--sg-ease);
}
.sg-social a:hover {
  color: var(--sg-gold);
  border-color: var(--sg-gold);
  transform: translateY(-3px);
}
.sg-social svg { width: 17px; height: 17px; }

.sg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--sg-line-soft);
  font-size: 0.78rem;
  color: rgba(147, 160, 181, 0.75);
}
.sg-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sg-footer__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem; }
.sg-footer__credit a { font-size: inherit; }

/* Firma tipográfica gigante del footer */
.sg-footer__wordmark {
  display: block;
  width: 100%;
  font-family: var(--sg-serif);
  font-size: clamp(2.6rem, 15vw, 12rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(200, 162, 76, 0.075);
  padding-bottom: 0.6rem;
  user-select: none;
}

/* Botón flotante de WhatsApp */
.sg-wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1040;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sg-gold-grad);
  color: var(--sg-navy-900);
  box-shadow: 0 12px 34px -12px rgba(200, 162, 76, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.45s var(--sg-ease), transform 0.45s var(--sg-ease),
    visibility 0.45s;
}
.sg-wa-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.sg-wa-float:hover { transform: translateY(-3px) scale(1.05); color: var(--sg-navy-900); }
.sg-wa-float .sg-icon { width: 26px; height: 26px; }

/* 10 ── MOTION ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--sg-ease), transform 0.9s var(--sg-ease);
  transition-delay: var(--sg-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* 11 ── RESPONSIVE ======================================================== */
@media (max-width: 991.98px) {
  .sg-nav,
  .sg-header__cta .sg-btn { display: none; }
  .sg-burger { display: flex; }
  /* Sin la fila del menú la cabecera es solo el logo: se aprieta un poco. */
  .sg-header { padding-block: 0.8rem; }
  .sg-header.is-stuck { padding-block: 0.5rem; }
  .sg-brand img { height: 40px; margin-bottom: 0.35rem; }
  .sg-brand__name { font-size: 1.12rem; }
  .sg-division,
  .sg-division:nth-child(even),
  .sg-division:nth-child(even) .sg-division__media { grid-template-columns: 1fr; order: 0; }
  /* En una columna sigue cuadrada (no se recorta), pero sin pasar de un
     tamaño razonable para no ocupar toda la pantalla. */
  .sg-division__media { width: 100%; max-width: 480px; }
  .sg-paso { grid-template-columns: 64px minmax(0, 1fr); }
  .sg-paso p { grid-column: 2; }
}

@media (max-width: 767.98px) {
  html { scroll-padding-top: 110px; }
  .sg-brand__name { font-size: 1rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .sg-brand__sub { font-size: 0.5rem; letter-spacing: 0.28em; text-indent: 0.28em; }
  .sg-hero__sellos { grid-template-columns: 1fr; }
  .sg-hero__sello + .sg-hero__sello {
    border-left: 0;
    border-top: 1px solid var(--sg-line-soft);
  }
  .sg-hero__sello { padding-block: 1.25rem; }
  .sg-hero__scroll { display: none; }
  .sg-footer__top { grid-template-columns: 1fr; }
  .sg-footer__bottom { justify-content: center; text-align: center; }
  .sg-footer__copy { justify-content: center; }
  .sg-grupo__quote { font-size: 1.2rem; }
  .sg-btn { width: 100%; }
  .sg-hero__actions .sg-btn { width: auto; flex: 1 1 100%; }
}