/* ============================================================
   mejoras.css — Grupo Szczech (16/10/2026)
   Extiende szczech.css: design tokens, hero con contenido,
   tarjetas de obras, accesibilidad, fachadas de mapas, etc.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --szc-radio: .6rem;
  --szc-radio-s: .35rem;
  --szc-sombra-sm: 0 .25rem .6rem rgba(22, 32, 57, .12);
  --szc-sombra-md: 0 .6rem 1.4rem rgba(22, 32, 57, .22);
  --szc-foco: 2px solid #0d6efd;
  --szc-azul: #162039;
}

/* El wrapper <picture> no altera el layout */
picture { display: contents; }

/* Anclas por debajo del navbar fijo + scroll suave */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Tipografía fluida para titulares */
.display-1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem) !important; }
.display-3 { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem) !important; }
.display-5 { font-size: clamp(1.35rem, .95rem + 1.8vw, 2.25rem) !important; }
.display-6 { font-size: clamp(1.15rem, .92rem + 1.1vw, 1.75rem) !important; }

/* ---------- Fondos de sección (antes inline) ---------- */
.bg-szc-azul {
  background-image: url(../img/szczech_bg-azul.jpg);
  background-image: image-set(url(../img/szczech_bg-azul.webp) type('image/webp'), url(../img/szczech_bg-azul.jpg) type('image/jpeg'));
  background-size: cover;
}
.bg-szc-azul-fijo {
  background-image: url(../img/szczech_bg-azul.jpg);
  background-image: image-set(url(../img/szczech_bg-azul.webp) type('image/webp'), url(../img/szczech_bg-azul.jpg) type('image/jpeg'));
  background-size: cover;
  background-attachment: fixed;
}
.bg-szc-mision {
  background-image: url(../img/szczech_bg-mision.jpg);
  background-image: image-set(url(../img/szczech_bg-mision.webp) type('image/webp'), url(../img/szczech_bg-mision.jpg) type('image/jpeg'));
  background-size: cover;
  background-position: left top;
  background-attachment: fixed;
}
.bg-szc-historia {
  background-image: url(../img/szczech_bg-historia.jpg);
  background-image: image-set(url(../img/szczech_bg-historia.webp) type('image/webp'), url(../img/szczech_bg-historia.jpg) type('image/jpeg'));
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}
.bg-szc-blanco {
  background-image: url(../img/szczech_bg-blanco.jpg);
  background-image: image-set(url(../img/szczech_bg-blanco.webp) type('image/webp'), url(../img/szczech_bg-blanco.jpg) type('image/jpeg'));
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 768px) {
  .bg-szc-azul-fijo, .bg-szc-mision, .bg-szc-historia, .bg-szc-blanco { background-attachment: scroll; }
}

.texto-sombra { text-shadow: -1px 1px 0 rgba(0, 0, 0, .5); }
.texto-sombra-suave { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.min-h-640 { min-height: 640px; }
.texto-ed { color: #ededed; }
.logo-pie { max-width: 40%; }
.mapa-caja { height: 45%; position: relative; min-height: 220px; }
.texto-justificado { margin: auto; text-align: justify; }

/* ---------- Hero con contenido ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22, 32, 57, .55) 0%, rgba(22, 32, 57, .18) 42%, rgba(22, 32, 57, .72) 100%);
}
.hero__contenido {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
}
.hero__titulo {
  font-size: clamp(1.9rem, 1.05rem + 3.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  max-width: 20ch;
  margin-bottom: .6rem;
}
.hero__titulo .fw-semibold { font-weight: 600; }
.hero__bajada {
  font-size: clamp(1rem, .85rem + .75vw, 1.35rem);
  font-weight: 300;
  max-width: 46ch;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 1.5rem;
  opacity: .8;
}
.hero__scroll:hover { opacity: 1; color: #fff; }

/* ---------- Botones ---------- */
.btn { border-radius: var(--szc-radio-s); }
.btn-szc_primary { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-szc_primary:hover { filter: brightness(1.12); box-shadow: var(--szc-sombra-sm); transform: translateY(-1px); }
.btn-szc_primary:active { transform: translateY(0); filter: brightness(.95); }
.btn-whatsapp { background-color: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }
.btn-whatsapp:hover { background-color: #1fbd5a; border-color: #1fbd5a; color: #fff; }

/* Foco visible para navegación por teclado */
:focus-visible { outline: var(--szc-foco); outline-offset: 2px; border-radius: var(--szc-radio-s); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: #fff;
  color: var(--szc-azul);
  padding: .6rem 1rem;
  border-radius: 0 0 var(--szc-radio-s) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Obras: slides y tarjetas (compatibles con el CSS original) ----------
   El diseño de las tarjetas viene de szczech.css (caja con padding-top, foto al
   120%, opacidad .6, badge en :before, hover). Único ajuste necesario: en mi
   estructura el padding-top % se resolvería contra el wrapper (no contra el
   slide de 272px como en el Slick original), así que en desktop lo anulo y la
   altura la da el flex (igual que el track flex del original).
   En mobile (un slide = ancho completo) el % coincide naturalmente: no se toca. */
.slider_obras.swiper { overflow: hidden; padding-bottom: .35rem; }
@media (min-width: 768px) {
  .slider_obras .slider_obras_mod_img { padding-top: 0; height: auto; }
  .slider_obras .slider_obras_mod_obra { height: auto; }
}

/* Flechas del slider (44px, accesibles) */
.slider_obras .swiper-button-prev,
.slider_obras .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--szc-azul, #162039);
  box-shadow: var(--szc-sombra-sm);
  border: 1px solid rgba(22, 32, 57, .12);
}
.slider_obras .swiper-button-prev::after,
.slider_obras .swiper-button-next::after { font-size: 16px; font-weight: 800; }
.slider_obras .swiper-button-prev:hover,
.slider_obras .swiper-button-next:hover { background: var(--szc-azul, #162039); color: #fff; }

/* Navbar: sección activa (scrollspy) */
.navbar:not(.navbar-scrolled) .nav-link.active { border-color: #fff; background-color: rgba(var(--bs-szc_primary-rgb), .35); }
.navbar-scrolled .nav-link.active { color: #fff; }
.nav-link-icono { min-width: 40px; min-height: 40px; }

/* Navbar scrolleado: vidrio esmerilado (patrón Apple/Stripe) con separación sutil
   del contenido: fondo semitransparente + blur + saturación + línea y sombra. */
.navbar {
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease,
    -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
.navbar-scrolled {
  background-color: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(22, 32, 57, .10), 0 .4rem 1.1rem rgba(22, 32, 57, .08);
}
/* Fallback para navegadores sin soporte de blur: fondo blanco sólido */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .navbar-scrolled { background-color: #fff; }
}
.navbar-scrolled .nav-link:hover { color: var(--szc-azul); }

/* ---------- Fachadas de mapa ---------- */
.mapa-fachada {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: var(--szc-radio);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(22, 32, 57, .08), transparent 55%),
    linear-gradient(135deg, #eef2f7 0%, #dfe6ef 100%);
  border: 1px solid rgba(22, 32, 57, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mapa-fachada__contenido { padding: 1.2rem; color: var(--szc-azul); }
.mapa-fachada__icono { font-size: 2rem; margin-bottom: .5rem; }
.mapa-fachada__dir { font-weight: 600; margin-bottom: .8rem; }
.mapa-fachada iframe { border: 0; }

/* ---------- Formulario ---------- */
.form-control:focus,
.form-control:focus-visible {
  border-color: #37538f;
  box-shadow: 0 0 0 .2rem rgba(22, 32, 57, .15);
}
textarea.form-control { resize: none; }
.campo-error { color: #b02a37; font-size: .85rem; margin: .3rem 0 0; min-height: 0; }
.form-control[aria-invalid="true"] { border-color: #b02a37; }
.form-estado { border-radius: var(--szc-radio-s); padding: .9rem 1rem; margin-top: 1rem; }
.form-estado--ok { background: #e8f5ec; color: #1c5e33; border: 1px solid #bfe3cc; }
.form-estado--err { background: #fdecee; color: #842029; border: 1px solid #f3c2c8; }
.recaptcha-local {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid #d3d3d3;
  background: #f9f9f9;
  border-radius: .35rem;
  padding: .7rem .9rem;
  font-size: .9rem;
  color: #222;
  cursor: pointer;
  min-height: 44px;
}
.recaptcha-local input { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.texto-tenue-80 { color: rgba(var(--bs-szc_gray-w-rgb), .8); font-size: .9rem; }
.borde-tenue-top { border-top: 1px solid rgba(var(--bs-szc_gray-w-rgb), .3); }
.link-szc_gray-w:hover, .text-szc_gray-w:hover { color: #fff; }

/* ---------- Volver arriba ---------- */
#volverArriba {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 1500;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--szc-azul);
  color: #fff;
  box-shadow: var(--szc-sombra-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(8px);
}
#volverArriba.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#volverArriba:hover { filter: brightness(1.15); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .slider_obras_mod_img a:hover img { transform: none; }
}