/* ==========================================================================
   San José Soluciones Técnicas Constructivas — Tema Bootstrap 5.3 (v2)
   Cargar DESPUÉS de bootstrap.min.css y bootstrap-icons.min.css
   Todo el aspecto se controla desde las variables de :root
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Identidad */
  --sj-rojo: #d40300;
  --sj-rojo-oscuro: #a80200;
  --sj-negro: #111;
  --sj-gris-claro: #f4f4f5;
  --sj-gris-borde: #e4e4e7;
  --sj-texto: #333;
  --sj-texto-suave: #666;
  --sj-fuente-titulos: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --sj-radio: .75rem;
  --sj-radio-sm: .5rem;
  --sj-sombra: 0 6px 24px rgba(0, 0, 0, .08);
  --sj-sombra-hover: 0 10px 32px rgba(0, 0, 0, .14);
  --sj-alto-cabecera: 84px;

  /* Mapeo a Bootstrap */
  --bs-primary: #d40300;
  --bs-primary-rgb: 212, 3, 0;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: #333;
  --bs-body-bg: #fff;
  --bs-link-color: #d40300;
  --bs-link-color-rgb: 212, 3, 0;
  --bs-link-hover-color: #111;
  --bs-link-hover-color-rgb: 17, 17, 17;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
}

/* Ancho máximo del contenedor.
   Bootstrap usa 1320px a partir de 1400px de pantalla.
   Para 1440px descomentar: */
/* @media (min-width: 1500px) { .container { max-width: 1440px; } } */

/* Margen lateral del contenedor algo mayor (24px) para que las filas g-5 no se salgan */
.container { --bs-gutter-x: 3rem; }

html { scroll-padding-top: var(--sj-alto-cabecera); }

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .sj-titulo {
  font-family: var(--sj-fuente-titulos);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sj-negro);
  line-height: 1.25;
}
.sj-antetitulo {
  display: inline-block;
  font-family: var(--sj-fuente-titulos);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sj-rojo);
  margin-bottom: .5rem;
}
.sj-titulo-seccion {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: .75rem;
}
.sj-titulo-seccion::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 56px; height: 4px;
  background: var(--sj-rojo);
  border-radius: 2px;
}
.text-center .sj-titulo-seccion::after { left: 50%; transform: translateX(-50%); }
.sj-lead { font-size: 1.125rem; color: var(--sj-texto-suave); }

/* --------------------------------------------------------------------------
   3. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--sj-fuente-titulos);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .875rem;
  padding: .7rem 1.4rem;
  border-radius: var(--sj-radio-sm);
}
.btn-primary {
  --bs-btn-bg: var(--sj-rojo);
  --bs-btn-border-color: var(--sj-rojo);
  --bs-btn-hover-bg: var(--sj-rojo-oscuro);
  --bs-btn-hover-border-color: var(--sj-rojo-oscuro);
  --bs-btn-active-bg: var(--sj-rojo-oscuro);
  --bs-btn-active-border-color: var(--sj-rojo-oscuro);
}
.btn-outline-primary {
  --bs-btn-color: var(--sj-rojo);
  --bs-btn-border-color: var(--sj-rojo);
  --bs-btn-hover-bg: var(--sj-rojo);
  --bs-btn-hover-border-color: var(--sj-rojo);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sj-rojo-oscuro);
  --bs-btn-active-border-color: var(--sj-rojo-oscuro);
  --bs-btn-active-color: #fff;
}
.btn-sm { padding: .5rem 1rem; font-size: .75rem; }
.btn-dark {
  --bs-btn-bg: var(--sj-negro);
  --bs-btn-border-color: var(--sj-negro);
}

/* --------------------------------------------------------------------------
   4. CABECERA (header): logo + menú en la misma barra, fija al hacer scroll
   -------------------------------------------------------------------------- */
.sj-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 5px solid var(--sj-negro);
  box-shadow: 0 1px 0 var(--sj-gris-borde);
}
.sj-header .navbar { min-height: var(--sj-alto-cabecera); padding: .5rem 0; }
.sj-header .navbar-brand img { height: 52px; width: auto; display: block; }

.sj-header .nav-link {
  font-family: var(--sj-fuente-titulos);
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sj-negro);
  padding: .5rem .9rem !important;
  border-radius: var(--sj-radio-sm);
  transition: background-color .2s, color .2s;
}
.sj-header .nav-link:hover,
.sj-header .nav-link:focus-visible { color: var(--sj-rojo); background: var(--sj-gris-claro); }
.sj-header .nav-link.active { color: #fff; background: var(--sj-rojo); }

.sj-header .navbar-toggler { border: 0; padding: .5rem; font-size: 1.75rem; color: var(--sj-negro); }
.sj-header .navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .sj-header .navbar-collapse { padding: .5rem 0 1rem; }
  .sj-header .nav-link { padding: .75rem 1rem !important; }
  .sj-header .sj-header-cta { margin-top: .5rem; width: 100%; }
}

/* --------------------------------------------------------------------------
   5. HERO (portada) y CABECERA DE PÁGINA (interiores)
   -------------------------------------------------------------------------- */
.sj-hero {
  position: relative;
  border-radius: var(--sj-radio);
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.sj-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sj-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.05) 100%);
}
.sj-hero-texto { position: relative; z-index: 2; padding: 3rem; max-width: 640px; }
.sj-hero h1 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); margin-bottom: 1rem; }
.sj-hero p { font-size: 1.125rem; color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.sj-hero .sj-antetitulo { color: #fff; background: var(--sj-rojo); padding: .25rem .6rem; border-radius: 4px; }

.sj-cabecera-pagina {
  position: relative;
  border-radius: var(--sj-radio);
  overflow: hidden;
  min-height: 220px;
  display: flex; align-items: center;
  color: #fff;
}
.sj-cabecera-pagina > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sj-cabecera-pagina::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.35));
}
.sj-cabecera-pagina .sj-hero-texto { padding: 2.5rem; }
.sj-cabecera-pagina h1 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); margin: 0; }
.sj-cabecera-pagina .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.6); --bs-breadcrumb-item-active-color: #fff; margin-bottom: .5rem; font-size: .875rem; }
.sj-cabecera-pagina .breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.sj-cabecera-pagina .breadcrumb a:hover { color: #fff; }

@media (max-width: 575.98px) {
  .sj-hero { min-height: 380px; }
  .sj-hero-texto, .sj-cabecera-pagina .sj-hero-texto { padding: 1.75rem; }
  .sj-hero::before { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 100%); }
}

/* --------------------------------------------------------------------------
   6. SECCIONES
   -------------------------------------------------------------------------- */
.sj-seccion { padding: 4.5rem 0; }
.sj-seccion--gris { background: var(--sj-gris-claro); }
@media (max-width: 767.98px) { .sj-seccion { padding: 3rem 0; } }

/* --------------------------------------------------------------------------
   7. TARJETAS DE SERVICIO (las tres cajas roja / negra / negra)
   -------------------------------------------------------------------------- */
.sj-caja {
  height: 100%;
  padding: 2rem;
  border-radius: var(--sj-radio);
  color: rgba(255,255,255,.9);
  box-shadow: var(--sj-sombra);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.sj-caja:hover { transform: translateY(-4px); box-shadow: var(--sj-sombra-hover); }
.sj-caja h2, .sj-caja h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1rem; }
.sj-caja ul { padding-left: 1.1rem; }
.sj-caja a { color: #fff; }
.sj-caja .sj-caja-icono {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--sj-radio-sm);
  background: rgba(255,255,255,.15);
  font-size: 1.5rem; color: #fff;
  margin-bottom: 1.25rem;
}
.sj-caja .sj-caja-enlace {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--sj-fuente-titulos); font-weight: 700;
  text-transform: uppercase; font-size: .8125rem; letter-spacing: .06em;
  text-decoration: none;
}
.sj-caja .sj-caja-enlace:hover { text-decoration: underline; }
.sj-caja--roja  { background: var(--sj-rojo); }
.sj-caja--negra { background: var(--sj-negro); }
.sj-caja--negra .sj-caja-icono { color: var(--sj-rojo); background: rgba(255,255,255,.08); }

/* Las cajas se superponen al hero en escritorio */
@media (min-width: 992px) {
  .sj-cajas-solapadas { margin-top: -3.5rem; position: relative; z-index: 3; }
  .sj-hero .sj-hero-texto { padding-bottom: 6.5rem; }
}

/* --------------------------------------------------------------------------
   8. QUIÉNES SOMOS / FILOSOFÍA
   -------------------------------------------------------------------------- */
.sj-imagen-redonda { border-radius: var(--sj-radio); overflow: hidden; }
.sj-imagen-redonda img { width: 100%; height: auto; display: block; }

.sj-lista-check { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.sj-lista-check li {
  position: relative;
  padding: .85rem 1rem .85rem 3rem;
  background: #fff;
  border: 1px solid var(--sj-gris-borde);
  border-radius: var(--sj-radio-sm);
  margin-bottom: .6rem;
}
.sj-lista-check li::before {
  content: "\F26E"; /* bi-check-lg */
  font-family: "bootstrap-icons";
  position: absolute; left: 1rem; top: .8rem;
  color: var(--sj-rojo); font-size: 1.15rem; font-weight: 700;
}

.sj-datos { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.sj-dato strong {
  display: block; font-family: var(--sj-fuente-titulos);
  font-size: 1.75rem; color: var(--sj-rojo); line-height: 1.1;
}
.sj-dato span { font-size: .875rem; color: var(--sj-texto-suave); }

/* --------------------------------------------------------------------------
   9. LLAMADA A LA ACCIÓN (franja roja de presupuesto)
   -------------------------------------------------------------------------- */
.sj-cta {
  background: var(--sj-rojo);
  border-radius: var(--sj-radio);
  padding: 2.5rem;
  color: #fff;
  position: relative; overflow: hidden;
}
.sj-cta::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.sj-cta h2 { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .35rem; }
.sj-cta p { margin: 0; color: rgba(255,255,255,.9); }
.sj-cta .btn-light { color: var(--sj-rojo); }
.sj-cta .btn-outline-light:hover { color: var(--sj-rojo); }
.sj-cta > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   10. LISTADO (servicios / trabajos realizados)
   -------------------------------------------------------------------------- */
.sj-item {
  display: flex; gap: 1.75rem; align-items: stretch;
  background: #fff;
  border: 1px solid var(--sj-gris-borde);
  border-radius: var(--sj-radio);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: box-shadow .25s, border-color .25s;
}
.sj-item:hover { box-shadow: var(--sj-sombra-hover); border-color: transparent; }
.sj-item-imagen {
  flex: 0 0 280px;
  border-radius: var(--sj-radio-sm);
  overflow: hidden;
  background: var(--sj-gris-claro);
}
.sj-item-imagen img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; transition: transform .4s; }
.sj-item:hover .sj-item-imagen img { transform: scale(1.04); }
.sj-item-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; padding: .25rem 0; }
.sj-item h2 { font-size: 1.2rem; margin-bottom: .35rem; }
.sj-item h2 a { color: inherit; text-decoration: none; }
.sj-item h2 a:hover { color: var(--sj-rojo); }
.sj-item-subtitulo { font-weight: 600; color: var(--sj-texto-suave); margin-bottom: .75rem; }
.sj-item ul { padding-left: 1.1rem; }
.sj-item-pie { margin-top: auto; padding-top: .75rem; }
@media (max-width: 767.98px) {
  .sj-item { flex-direction: column; gap: 1rem; padding: 1rem; }
  .sj-item-imagen { flex-basis: auto; aspect-ratio: 16 / 9; }
  .sj-item-imagen img { min-height: 0; }
}

/* Lateral de contacto en interiores */
.sj-lateral {
  position: sticky; top: calc(var(--sj-alto-cabecera) + 1.5rem);
  background: var(--sj-negro); color: rgba(255,255,255,.85);
  border-radius: var(--sj-radio); padding: 2rem;
}
.sj-lateral h2 { color: #fff; font-size: 1.15rem; margin-bottom: 1rem; }
.sj-lateral a { color: #fff; text-decoration: none; }
.sj-lateral a:hover { color: var(--sj-rojo); }

/* --------------------------------------------------------------------------
   11. CONTACTO (líneas con icono, usadas en lateral y pie)
   -------------------------------------------------------------------------- */
.sj-contacto { list-style: none; padding: 0; margin: 0; }
.sj-contacto li { display: flex; gap: .85rem; margin-bottom: 1rem; }
.sj-contacto i {
  flex: 0 0 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--sj-radio-sm);
  background: rgba(255,255,255,.08);
  color: var(--sj-rojo); font-size: 1.1rem;
}
.sj-contacto small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }

/* --------------------------------------------------------------------------
   12. PIE (footer)
   -------------------------------------------------------------------------- */
.sj-footer { background: var(--sj-negro); color: rgba(255,255,255,.75); margin-top: 4.5rem; }
.sj-footer-principal { padding-top: 4rem; padding-bottom: 2.5rem; }
.sj-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 1.25rem; }
.sj-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.sj-footer a:hover { color: #fff; }
.sj-footer-logo { background: #fff; display: inline-block; padding: .6rem .8rem; border-radius: var(--sj-radio-sm); margin-bottom: 1rem; }
.sj-footer-logo img { height: 44px; width: auto; display: block; }
.sj-footer-menu { list-style: none; padding: 0; margin: 0; }
.sj-footer-menu li { margin-bottom: .5rem; }
.sj-footer-legal {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.25rem 0; font-size: .8125rem;
}
.sj-footer-legal a { color: rgba(255,255,255,.6); }
.sj-footer-legal a:hover { color: #fff; }
.sj-footer-legal .sj-sep { opacity: .3; margin: 0 .5rem; }

/* --------------------------------------------------------------------------
   13. AVISO DE COOKIES
   -------------------------------------------------------------------------- */
.sj-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080;
  max-width: 420px; margin-left: auto;
  background: #fff; color: var(--sj-texto);
  border-radius: var(--sj-radio);
  padding: 1.25rem; font-size: .875rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  border-top: 4px solid var(--sj-rojo);
}
.sj-cookies strong { font-family: var(--sj-fuente-titulos); text-transform: uppercase; }
.sj-cookies[hidden] { display: none; }
.sj-cookies .btn { padding: .45rem 1rem; font-size: .75rem; }

/* --------------------------------------------------------------------------
   14. ACCESIBILIDAD / MOVIMIENTO
   -------------------------------------------------------------------------- */
.sj-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--sj-rojo); color: #fff; padding: .5rem 1rem;
}
.sj-saltar:focus { left: 1rem; top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}