/* ==========================================================================
SG MARTÍN · Versión clara (opcional)
==========================================================================
La versión oscura es la principal y NO se toca: este fichero solo añade
reglas bajo [data-theme="claro"], que el usuario activa con el botón de la
cabecera. Para retirar la opción basta con quitar el de este fichero
y el botón de includes/layout-top.php; el diseño original queda intacto.
── Cómo funciona ────────────────────────────────────────────────────────
1. TOKENS. Se redefinen los mismos nombres de variable que usa style.css,
así que los ~365 var(--sg-*) repartidos por las hojas cambian solos. Los
nombres conservan su ROL, no su color literal: en claro «--sg-navy-900»
sigue siendo «el fondo de página» aunque ya no sea azul, y «--sg-cream»
sigue siendo «el texto destacado» aunque ahora sea tinta oscura.
2. BLOQUES QUE SIGUEN EN AZUL. El marco de la marca (cabecera, menú móvil,
cinta, Divisiones y pie) y todo lo que se monta sobre fotografía (hero,
media de las tarjetas, galería) conservan la paleta oscura. El papel se
reserva para el contenido que hay que leer, que es donde importaba la
accesibilidad.
3. LITERALES. Las reglas de style.css/paginas.css que llevan el color a
pelo (velos, sombras, cristales) se repiten aquí con su equivalente
claro. Están agrupadas por la misma sección y en el mismo orden que en
style.css para poder cotejarlas.
── Contraste (WCAG 2.1 AA) ──────────────────────────────────────────────
Todo medido contra el lienzo #f4f1ea. El oro corporativo #c8a24c da 2,1:1
sobre claro y es inservible para texto, así que la rampa baja a bronce —
el mismo pigmento, envejecido — y toda ella supera el 4,5:1:
--sg-cream #132339 14,2:1 texto destacado
--sg-text #26364d 10,9:1 cuerpo
--sg-muted #5b6b80 4,9:1 texto secundario
--sg-gold-light #55401a 8,9:1 hover de enlaces
--sg-gold #6d5222 6,6:1 acentos y texto en oro
--sg-gold-glare #806429 4,9:1 punto de brillo del degradado
Como hasta el brillo del degradado cumple, cualquier uso del oro —texto,
borde o fondo de botón con texto claro encima— pasa AA sin excepciones.
========================================================================== */
/* 1 ── TOKENS ============================================================== */
:root[data-theme="claro"] {
color-scheme: light;
/* Superficies, de lienzo a elevada. Desde oct-2026 el papel tira a azul muy
claro en vez de a crema: el cliente pidió «todo en azul». */
--sg-navy-900: #f5f8fc; /* fondo de página */
--sg-navy-850: #edf2f8;
--sg-navy-800: #e4ebf4; /* tarjetas */
--sg-navy-700: #d5e0ee; /* hueco de imagen mientras carga */
--sg-navy-600: #c3d2e6;
--sg-navy-500: #adc1dc;
/* Oro en bronce: legible sobre papel sin salirse de la gama de la marca */
--sg-gold-deep: #4a3616;
--sg-gold: #6d5222;
--sg-gold-light: #55401a; /* en claro el hover oscurece, no aclara */
--sg-gold-glare: #806429;
/* Tinta */
--sg-cream: #132339;
--sg-text: #26364d;
--sg-muted: #4f6079; /* un punto más oscuro que antes: el papel azulado resta contraste */
/* Filetes y veladuras: en oscuro tiñen de blanco, aquí de tinta */
--sg-line: rgba(109, 82, 34, 0.34);
--sg-line-soft: rgba(109, 82, 34, 0.17);
--sg-surface: rgba(19, 35, 57, 0.035);
--sg-surface-2: rgba(19, 35, 57, 0.065);
}
/* 2 ── BASE =============================================================== */
/* El grano en «overlay» sobre papel solo lava el color; en «multiply» y muy
flojo aporta la textura de impresión que buscaba el original. */
:root[data-theme="claro"] body::after {
opacity: 0.09;
mix-blend-mode: multiply;
}
:root[data-theme="claro"] ::-webkit-scrollbar-thumb {
background: linear-gradient(var(--sg-gold-light), var(--sg-gold));
}
/* 4 ── UTILIDADES ========================================================= */
/* Halos: sobre azul suman luz, sobre papel tienen que restarla o manchan. */
:root[data-theme="claro"] .sg-glow--gold { background: rgba(160, 125, 55, 0.13); }
:root[data-theme="claro"] .sg-glow--blue { background: rgba(96, 124, 168, 0.16); }
/* Fondos fotográficos difuminados: mismo velo, del lado claro. Subir las
alfas aclara la foto; bajarlas la deja verse más (igual que en style.css).
Solo Servicios: Divisiones y el pie se quedan oscuros a propósito y
conservan su velo original (ver «bloques que siguen en azul»). */
:root[data-theme="claro"] .sg-servicios::before {
background-image:
linear-gradient(
180deg,
rgba(245, 248, 252, 0.94) 0%,
rgba(245, 248, 252, 0.82) 45%,
rgba(245, 248, 252, 0.96) 100%),
var(--sg-fondo);
}
/* La marca de agua del monograma es un negativo: sobre papel necesita algo
más de cuerpo para no desaparecer del todo. */
:root[data-theme="claro"] .sg-watermark { opacity: 0.07; }
/* 5 ── BOTONES ============================================================ */
/* Las sombras doradas del botón principal se ven sucias sobre papel: aquí
la sombra la da la tinta, no el oro. */
:root[data-theme="claro"] .sg-btn--gold {
box-shadow: 0 10px 30px -14px rgba(19, 35, 57, 0.55);
}
:root[data-theme="claro"] .sg-btn--gold:hover {
box-shadow: 0 16px 40px -14px rgba(19, 35, 57, 0.65);
}
/* 6 ── HEADER ============================================================= */
/* La cabecera se queda azul marino (ver «bloques que siguen en azul»), pero
necesita fondo propio desde el principio, no solo al hacer scroll: en la
versión oscura puede nacer transparente porque debajo siempre hay algo
oscuro, y aquí no —en la ficha de inmueble, por ejemplo, arranca sobre
papel y el menú claro se perdería. El compactado al bajar no se toca. */
:root[data-theme="claro"] .sg-header {
background: rgba(31, 69, 118, 0.94);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
:root[data-theme="claro"] .sg-header::after { opacity: 1; }
:root[data-theme="claro"] .sg-header.is-stuck {
background: rgba(28, 63, 110, 0.97);
box-shadow: 0 18px 50px -30px rgba(12, 30, 58, 0.6);
}
:root[data-theme="claro"] .sg-nav__menu {
background: rgba(28, 63, 110, 0.98);
box-shadow: 0 26px 60px -30px rgba(12, 30, 58, 0.7);
}
/* 7 ── HERO =============================================================== */
/* El hero va en azul (ver «bloques que siguen en azul» al final del fichero):
es un vídeo o una fotografía a sangre y el claim tiene que leerse encima
pase lo que pase. Desde oct-2026 es un azul más claro y sin el casi negro
del fondo: aquí se repiten con el azul nuevo los colores que style.css
escribe a pelo.
Lo mismo vale para .sg-ficha-hero, la portada a sangre de la ficha de
inmueble: la fotografía la sube el cliente y no se sabe si viene clara u
oscura, así que conserva un velo fuerte, ahora teñido de azul marino. */
:root[data-theme="claro"] .sg-hero {
background:
radial-gradient(ellipse 85% 60% at 50% 0%, rgba(59, 107, 168, 0.55), transparent 70%),
radial-gradient(ellipse 60% 50% at 50% 105%, rgba(221, 189, 114, 0.12), transparent 70%),
linear-gradient(175deg, #234b7f 0%, #1c3f6e 55%, #183863 100%);
}
:root[data-theme="claro"] .sg-hero__media::after {
background:
radial-gradient(ellipse 65% 55% at 50% 45%, rgba(16, 38, 72, 0.34), rgba(16, 38, 72, 0.70) 72%),
linear-gradient(180deg, rgba(16, 38, 72, 0.78) 0%, rgba(16, 38, 72, 0.36) 40%, rgba(16, 38, 72, 0.86) 100%);
}
:root[data-theme="claro"] .sg-ficha-hero__media::after {
background:
linear-gradient(102deg, rgba(12, 30, 58, 0.82) 0%, rgba(12, 30, 58, 0.42) 42%, rgba(12, 30, 58, 0) 76%),
linear-gradient(180deg, rgba(12, 30, 58, 0.62) 0%, rgba(12, 30, 58, 0.05) 34%, rgba(12, 30, 58, 0.78) 100%);
}
:root[data-theme="claro"] .sg-ficha-hero__mando { background: rgba(20, 48, 88, 0.6); }
:root[data-theme="claro"] .sg-ficha-hero__mando:hover,
:root[data-theme="claro"] .sg-ficha-hero__mando:focus-visible { background: rgba(20, 48, 88, 0.82); }
/* 8 ── SECCIONES ========================================================== */
/* Canales de contacto */
:root[data-theme="claro"] .sg-canal { background: rgba(250, 252, 255, 0.75); }
:root[data-theme="claro"] .sg-canal:hover { background: rgba(109, 82, 34, 0.07); }
/* Sección Divisiones (y las que reutilizan su clase): velo azul sobre la foto
difuminada en lugar del casi negro de style.css. */
:root[data-theme="claro"] .sg-divisiones {
background:
radial-gradient(ellipse 70% 50% at 80% 0%, rgba(59, 107, 168, 0.45), transparent 70%),
var(--sg-navy-850);
}
:root[data-theme="claro"] .sg-divisiones::before {
background-image:
linear-gradient(
180deg,
rgba(28, 63, 110, 0.9) 0%,
rgba(28, 63, 110, 0.76) 45%,
rgba(28, 63, 110, 0.94) 100%),
var(--sg-fondo);
}
:root[data-theme="claro"] .sg-div-card { background: rgba(28, 63, 110, 0.7); }
:root[data-theme="claro"] .sg-div-card:hover { background: rgba(42, 85, 144, 0.75); }
:root[data-theme="claro"] .sg-division__media::after {
background: linear-gradient(180deg, transparent 45%, rgba(24, 55, 98, 0.45));
}
:root[data-theme="claro"] .sg-inm__media::after {
background: linear-gradient(180deg, transparent 55%, rgba(20, 48, 88, 0.55));
}
:root[data-theme="claro"] .sg-galeria__sello { background: rgba(28, 63, 110, 0.8); }
/* 9 ── FOOTER ============================================================= */
/* El pie va en el mismo azul que la cabecera. style.css le pone un fondo
casi negro escrito a pelo; aquí se sustituye. */
:root[data-theme="claro"] .sg-footer { background: var(--sg-navy-900); }
:root[data-theme="claro"] .sg-footer::before {
background-image:
linear-gradient(
180deg,
rgba(24, 55, 98, 0.96) 0%,
rgba(24, 55, 98, 0.9) 50%,
rgba(24, 55, 98, 0.84) 100%),
var(--sg-fondo);
}
:root[data-theme="claro"] .sg-footer__bottom { color: var(--sg-muted); }
:root[data-theme="claro"] .sg-wa-float {
box-shadow: 0 12px 30px -12px rgba(19, 35, 57, 0.6);
}
/* ── PAGINAS.CSS: literales que asumían fondo oscuro ─────────────────────── */
:root[data-theme="claro"] .sg-legal code { background: rgba(109, 82, 34, 0.1); }
:root[data-theme="claro"] .sg-badge { background: rgba(109, 82, 34, 0.14); }
:root[data-theme="claro"] .sg-contacto-item { background: rgba(250, 252, 255, 0.8); }
/* Las sedes de contacto.php van en el bloque azul, con letra clara: ahí la
ficha no puede ser blanca o no se lee. Velo azul translúcido. */
:root[data-theme="claro"] .sg-divisiones .sg-contacto-item { background: rgba(12, 32, 60, 0.45); }
:root[data-theme="claro"] .sg-divisiones .sg-contacto-item:hover { background: rgba(200, 162, 76, 0.14); }
:root[data-theme="claro"] .sg-filtros { background: rgba(19, 35, 57, 0.03); }
:root[data-theme="claro"] .sg-campo input::placeholder { color: rgba(91, 107, 128, 0.75); }
:root[data-theme="claro"] .sg-inm__enlace { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="claro"] .sg-inm__enlace:hover {
box-shadow: 0 28px 55px -34px rgba(19, 35, 57, 0.55);
}
:root[data-theme="claro"] .sg-ficha__rapidos li { background: rgba(250, 252, 255, 0.85); }
:root[data-theme="claro"] .sg-lateral__caja {
background: linear-gradient(160deg, rgba(214, 226, 242, 0.85), rgba(237, 242, 248, 0.95));
}
:root[data-theme="claro"] .sg-aviso { background: rgba(109, 82, 34, 0.07); }
/* Certificado energético: las letras A–G llevan su propio color semántico y
no cambian. La casilla por defecto sí, porque su fondo es el degradado de
oro y en claro el bronce pide texto claro encima.
El :not() es obligatorio: sin él este selector le gana por especificidad a
.sg-energia__letra--a … --g y les pisaría su color de texto. */
:root[data-theme="claro"] .sg-energia__letra:not([class*="letra--"]) {
color: #f5f8fc;
}
/* ── BLOQUES QUE SIGUEN EN AZUL ══════════════════════════════════════════════
Recuperan la paleta oscura completa, así que todo lo que contienen vuelve a
comportarse como en la versión oscura sin escribir una regla por elemento.
Son de dos tipos:
a) EL MARCO DE LA MARCA. Cabecera, menú móvil, cinta de divisiones, la
sección de Divisiones y el pie. El azul marino queda de marco y el papel
se reserva para el contenido que hay que leer, que es donde importaba
la accesibilidad.
b) SOBRE FOTOGRAFÍA. Hero, imágenes de las tarjetas y galería. Aquí no es
una decisión estética: velo oscuro con texto claro es lo único que
garantiza legibilidad sobre fotos que sube el cliente.
Ojo con --sg-gold-grad: se declara en :root ya sustituido, así que heredarlo
no basta y hay que repetirlo aquí con los valores literales.
AZUL MÁS CLARO (oct-2026). El cliente veía la web «muy oscura»: estos
bloques eran un azul casi negro (#060e1b). Ahora son un azul medio, y como
el fondo es más claro, el oro y los grises suben de tono para seguir
leyéndose. Contraste medido sobre el azul más claro de la gama (#234b7f):
--sg-cream #f7f4ec 8,0:1 --sg-gold #ddbd72 4,9:1
--sg-text #e9eef6 7,6:1 --sg-gold-light #f0dca5 ≥ 6:1
--sg-muted #c4d1e4 5,7:1
.sg-plaza ya no está en la lista: desde oct-2026 su texto va debajo de la
foto, sobre papel, y no encima de ella. */
:root[data-theme="claro"] .sg-header,
:root[data-theme="claro"] .sg-mobile,
:root[data-theme="claro"] .sg-marquee,
:root[data-theme="claro"] .sg-divisiones,
:root[data-theme="claro"] .sg-footer,
:root[data-theme="claro"] .sg-hero,
:root[data-theme="claro"] .sg-ficha-hero,
:root[data-theme="claro"] .sg-inm__media,
:root[data-theme="claro"] .sg-division__media,
:root[data-theme="claro"] .sg-div-card--foto,
:root[data-theme="claro"] .sg-galeria__sello,
:root[data-theme="claro"] .sg-visor {
--sg-navy-900: #1c3f6e;
--sg-navy-850: #1f4576;
--sg-navy-800: #234b7f;
--sg-navy-700: #2a5590;
--sg-navy-600: #31609c;
--sg-navy-500: #3b6ba8;
--sg-gold-deep: #a8843d;
--sg-gold: #ddbd72;
--sg-gold-light: #f0dca5;
--sg-gold-glare: #fbf1c7;
--sg-cream: #f7f4ec;
--sg-text: #e9eef6;
--sg-muted: #c4d1e4;
--sg-line: rgba(221, 189, 114, 0.32);
--sg-line-soft: rgba(221, 189, 114, 0.18);
--sg-gold-grad: linear-gradient(
100deg,
#a8843d 0%,
#ddbd72 20%,
#fbf1c7 44%,
#ddbd72 60%,
#f0dca5 78%,
#a8843d 100%
);
}
/* El hueco de imagen mientras carga sí acompaña al tema: si no, cada tarjeta
sin foto es un rectángulo azul en mitad del papel. */
:root[data-theme="claro"] .sg-inm__media,
:root[data-theme="claro"] .sg-division__media { background: #d5e0ee; }
/* ── BOTÓN DE CAMBIO DE VERSIÓN ═══════════════════════════════════════════
Vive fuera del bloque [data-theme] porque tiene que verse en las dos. */
.sg-tema {
flex-shrink: 0;
width: 42px;
height: 42px;
display: grid;
place-items: center;
padding: 0;
background: transparent;
border: 1px solid var(--sg-line-soft);
border-radius: 50%;
color: var(--sg-muted);
cursor: pointer;
transition: color 0.4s var(--sg-ease), border-color 0.4s var(--sg-ease),
transform 0.4s var(--sg-ease);
}
.sg-tema:hover {
color: var(--sg-gold);
border-color: var(--sg-gold);
transform: translateY(-2px);
}
.sg-tema .sg-icon { width: 19px; height: 19px; }
/* Se muestra el icono de lo que vas a activar, no el de donde estás. */
.sg-tema__luna { display: none; }
:root[data-theme="claro"] .sg-tema__sol { display: none; }
:root[data-theme="claro"] .sg-tema__luna { display: block; }
/* Sin JS el botón no hace nada, así que no se enseña. main.js lo revela. */
.sg-tema[hidden] { display: none; }
/* Compensación del ancho que se lleva el botón ---------------------------------
Son unos 54 px (42 del círculo + el hueco del flex) y el menú se quedaba sin
sitio, partiendo palabras: «EL» arriba y «GRUPO» debajo.
El nowrap es lo que garantiza que no vuelva a partirse; lo demás es recuperar
el espacio. El icono de WhatsApp era lo más desproporcionado —26 px dentro de
un botón con texto de 0,68 rem—, así que ahí está la mayor ganancia.
Va en este fichero, y no en style.css, para que quitando el y el botón
la cabecera vuelva exactamente a como estaba. Y sin [data-theme] porque el
botón existe en las dos versiones y en las dos apretaba igual. */
.sg-nav a { white-space: nowrap; }
.sg-nav { gap: clamp(0.9rem, 2.2vw, 2.3rem); }
.sg-header__cta .sg-btn--sm {
gap: 0.55rem;
padding: 0.72rem 1.2rem;
}
.sg-header__cta .sg-btn--sm .sg-icon { width: 18px; height: 18px; }
@media (max-width: 767.98px) {
/* La regla general pone los .sg-btn al 100 %; este no es un .sg-btn, pero
conviene fijar el tamaño para que no lo estire el flex de la cabecera. */
.sg-tema { width: 40px; height: 40px; }
}