/* ==========================================
   SANTILLER TRUSS - HOME PAGE
   Estilos exclusivos de index.html
   Depende de: tokens.css, main.css, components.css
   ========================================== */

/* ------------------------------------------
   NAV / DRAWER — variantes de la home
   ------------------------------------------ */
.nav-link-cta {
  font-weight: 700;
  color: var(--accent-primary);
}

.drawer-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* !important necesario: components.css:154 declara
   `.mobile-drawer-service-links a { color: ... !important }`.
   Al quitar ese !important de components.css, borrar estos dos. */
.mobile-drawer-service-links .drawer-link-cta {
  color: var(--accent-primary) !important;
  font-weight: 700 !important;
}

/* ------------------------------------------
   HERO
   ------------------------------------------ */
.home-hero {
  position: relative;
  height: 100vh;
  min-height: 580px;
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(43, 74, 117, 0.35), transparent 60%),
    var(--bg-dark);
  padding-top: var(--nav-height);
  padding-bottom: 0;
  box-sizing: border-box;
}

.home-hero-bg {
  position: absolute;
  inset: -6%;
  background: url('../img/escenario.webp') center 38% / cover;
  opacity: 0.85;
}

.home-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 10, 20, 0.6) 0%,
    rgba(0, 10, 20, 0.3) 38%,
    rgba(0, 19, 34, 0.9) 88%,
    var(--bg-dark) 100%
  );
}

.home-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(0, 12, 22, 0.6) 100%);
}

.home-hero-center {
  margin: auto 0;
  width: 100%;
}

.home-hero-stage {
  position: relative;
  z-index: 5;
  perspective: 1400px;
  padding: 0 24px;
  text-align: center;
  width: 100%;
}

.home-hero-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-hero-eyebrow {
  transform: translateZ(30px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.home-hero-eyebrow-text {
  font-size: 11px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-main);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.home-hero-title {
  transform: translateZ(70px);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  /* Piso bajado de 43px a 30px: Syne 800 es ~2.2x más ancha que
     Anton, y con 43px fijos "SANTILLER" se cortaba 40px por fuera
     en 375px. Con 30px el término 9vw gobierna en mobile.
     El 9vw y el máximo de 191px quedan como se pidieron. */
  font-size: clamp(30px, 9vw, 191px);
  line-height: 0.87;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  filter:
    drop-shadow(0 12px 25px rgba(0, 0, 0, 0.9))
    drop-shadow(0 35px 70px rgba(0, 0, 0, 0.65));
}

/* El degradado se aplica POR LÍNEA, no sobre la caja del título.
   Con line-height 0.87 las dos líneas se solapan (una va del -10%
   al 59% de la caja y la otra del 40% al 109%), así que un único
   degradado sobre el elemento dejaría la segunda línea casi sólida.
   Los stops llegan a su color final en el 50%: de ahí hacia abajo
   la letra queda en el tono sólido. */
.home-hero-title-line,
.section-title-line {
  display: block;
}

/* "Santiller" queda en blanco sólido: hereda el color del h1 y no
   lleva degradado. Solo la línea marcada con --metal lo recibe. */
/* 180deg y no 178deg: con 2° de inclinación la línea del degradado
   mide ancho·sin(178°) + alto·cos(178°). En una caja de 1376x74 eso
   da 122px en vez de 74px, así que el stop del 50% caía muy por
   debajo de la mitad de la letra y además variaba a lo ancho de la
   palabra. Con 180deg la línea mide exactamente el alto de la caja;
   como el glifo desborda simétricamente (~14px arriba y abajo), el
   50% de la caja coincide con el centro de la letra. */
.home-hero-title-line--metal,
.section-title-line--metal {
  background: linear-gradient(180deg, #fff 0%, #fff 26%, #EDE7D9 40%, #9FB0C2 53%, #5A7597 66%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-hero-subtitle {
  transform: translateZ(45px);
  font-family: var(--font-body);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(16px, 2vw, 26px);
  color: var(--text-main);
  margin-top: 14px;
  text-wrap: pretty;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.95);
}

.home-hero-actions {
  transform: translateZ(55px);
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
}

.home-hero-marquee {
  position: relative;
  z-index: 10;
  margin-top: auto;
}

/* ------------------------------------------
   SECCIONES — ritmo vertical
   ------------------------------------------ */
.section-servicios { padding: 120px 0 80px; }
.section-montajes  { padding: 60px 0 120px; }
.section-nosotros  { padding: 100px 0; }
.section-galeria   { padding: 80px 0 120px; }
.section-faqs      { padding: 60px 0 120px; }

.section-stats {
  padding: 100px 0;
  background: var(--bg-darker);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}

/* ------------------------------------------
   ENCABEZADOS DE SECCIÓN
   ------------------------------------------ */
.section-head {
  margin-bottom: 48px;
}

.section-head-center {
  text-align: center;
  margin-bottom: 50px;
}

.section-head-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 54px;
}

/* El título ocupa el ancho completo y el copy cae debajo:
   con títulos largos gana líneas de respiro en vez de
   comprimirse en media columna. */
.section-head-split > :first-child {
  flex: 1 1 100%;
  min-width: 0;
}

.section-head-copy {
  max-width: 440px;
  color: var(--text-muted);
  font-size: 1rem;
}

/* Escala tipográfica de títulos de sección.
   El piso del clamp es lo que manda por debajo de ~760px: con
   pisos de 32-38px, palabras largas como "ESTRUCTURAS" o
   "Destacados" se cortaban contra el borde en 375px y menos.
   Los máximos no cambian, así que desktop queda igual. */
/* Mismo tratamiento metálico del h1 del hero (Syne + degradado
   recortado sobre el texto), con menos peso: 700 contra 800.
   La sombra también es más suave porque acá no compite contra
   una foto de fondo. */
.section-title--metal {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  line-height: 0.87;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.section-title--xl { font-size: clamp(22px, 5vw, 68px); }
.section-title--lg { font-size: clamp(22px, 5vw, 64px); }
.section-title--md { font-size: clamp(24px, 5vw, 56px); }
.section-title--sm { font-size: clamp(24px, 4vw, 56px); }

/* ------------------------------------------
   TARJETAS DE SERVICIO
   El badge de .service-card-icon (components.css:536)
   pasa de número a miniatura del servicio. Se conserva
   la caja de 52x52 y el borde para no mover el layout.
   ------------------------------------------ */
/* Texto a la izquierda, miniatura a la derecha.
   El texto va primero en el DOM: es el orden de lectura
   correcto y deja la imagen a la derecha sin trucos. */
.service-card-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.service-card-text {
  flex: 1;
  min-width: 0;
}

.service-card-icon {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 0;
}

/* En una tarjeta de ~270px útiles, una miniatura de 96px deja
   el texto en 153px: ilegible. Se achica junto con el gap. */
@media (max-width: 640px) {
  .service-card-body {
    gap: 14px;
  }

  .service-card-icon {
    width: 72px;
    height: 72px;
  }
}

/* Pantallas muy angostas (<=360px): el padding de card-glass
   se come el ancho y el texto cae a ~128px. Se recupera
   achicando padding e imagen, manteniendo la imagen a la derecha. */
@media (max-width: 360px) {
  .service-card {
    padding: 20px;
  }

  .service-card-body {
    gap: 12px;
  }

  .service-card-icon {
    width: 64px;
    height: 64px;
  }
}

.service-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------
   NOSOTROS
   ------------------------------------------ */
.team-card-title {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 2.2rem;
  margin-bottom: 24px;
  line-height: 1.25;
}

.team-card-copy {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 32px;
  line-height: 1.7;
}

/* ------------------------------------------
   GALERÍA
   ------------------------------------------ */
.grid-galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
}

.gallery-img-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gallery-img-wrapper--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-img-wrapper--wide {
  grid-column: span 2;
}

/* ------------------------------------------
   FAQS
   ------------------------------------------ */
.faqs-container {
  max-width: 860px;
}

.faq-item {
  margin-bottom: 16px;
}

.faq-question {
  cursor: pointer;
  font-family: var(--font-editorial);
  font-size: 1.25rem;
  font-weight: 500;
  outline: none;
  list-style: none;
}

.faq-answer {
  margin-top: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ------------------------------------------
   FOOTER
   ------------------------------------------ */
.footer-logo {
  height: 54px;
}

.footer-contact-line {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.footer-btn-compact {
  padding: 10px 20px;
  font-size: 12px;
}

.footer-tagline {
  opacity: 0.75;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

.footer-credit {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-credit-name {
  color: var(--accent-primary);
  font-weight: 700;
}

/* ------------------------------------------
   LIGHTBOX
   ------------------------------------------ */
.lightbox-nav {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* ------------------------------------------
   MODAL DE COTIZACIÓN
   ------------------------------------------ */
.modal-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.modal-intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.form-error {
  color: #FF5555;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
}

.modal-submit {
  width: 100%;
  border-radius: var(--radius-sm);
}

.form-success {
  text-align: center;
  padding: 20px 0;
}

.form-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-subtle);
  border: 2px solid var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--accent-primary);
  margin: 0 auto 20px;
}

.form-success-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.form-success-copy {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

.form-success-close {
  width: 100%;
}

/* ------------------------------------------
   UTILIDADES
   ------------------------------------------ */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estado inicial oculto. El JS lo sobreescribe con style.display inline. */
.is-hidden {
  display: none;
}