/* ============ RESET / BASE ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: #F2F4F7;
  color: #0C1220;
  font-family: Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #0A5CFF; }
::selection { background: #0A5CFF; color: #FFFFFF; }
.mono { font-family: 'JetBrains Mono', monospace; }

:focus-visible { outline: 2px solid #0A5CFF; outline-offset: 2px; }

/* ============ GRANO ============ */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain-overlay--local { position: absolute; z-index: 5; opacity: 0.12; }

/* ============ LAYOUT HELPERS ============ */
.section { padding: clamp(5rem, 12vw, 10rem) clamp(1.25rem, 5vw, 4rem); }
.section--white { background: #FFFFFF; }
.section--light { background: #F2F4F7; }
.section--dark { background: #0C1220; color: #F2F4F7; position: relative; overflow: hidden; }
.section--bleed { padding: clamp(5rem, 12vw, 10rem) 0; }

.wrap { max-width: 1280px; margin: 0 auto; }
.wrap--narrow { max-width: 880px; position: relative; }
.wrap--pad-only { padding: 0 clamp(1.25rem, 5vw, 4rem); position: relative; z-index: 10; }

.eyebrow { margin: 0 0 1rem; font-size: 0.8125rem; letter-spacing: 0.14em; color: #64708A; }
.eyebrow--center { text-align: center; }

.h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(2.5rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; }
.h2--center { text-align: center; }
.h2--xl { font-size: clamp(3rem, 9vw, 7.5rem); }

.h3 { margin: 0.75rem 0 1rem; font-family: Archivo, sans-serif; font-weight: 600; font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.02em; }
.h3--lg { margin: 0 0 0.5rem; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); }

.accent { color: #0A5CFF; }

.link-underline { font-size: 0.8125rem; letter-spacing: 0.08em; color: #F2F4F7; border-bottom: 1px solid #0A5CFF; padding-bottom: 2px; }
.link-underline--muted { border-bottom-color: #DCE1EA; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: #0A5CFF; color: #FFFFFF; font-weight: 600; font-size: 1rem;
  padding: 1rem 1.75rem; min-height: 44px; box-sizing: border-box;
  border: none; cursor: pointer; font-family: Inter, sans-serif;
}
.btn-primary:hover { background: #0449CC; color: #FFFFFF; }

/* ============ CUTLINE (dibujada por GSAP) ============ */
.cutline { height: 2px; background: #0A5CFF; transform-origin: left; transform: scaleX(0); }
.cutline--center { transform-origin: center; margin-left: auto; margin-right: auto; }
.cutline--sm { width: min(200px, 40%); margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 4rem); }
.cutline--md { width: min(240px, 50%); margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }
.cutline--lg { width: min(280px, 55%); margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }
.cutline--lg-gap { margin-bottom: clamp(4rem, 8vw, 6rem); }
.cutline--footer { width: min(320px, 60%); margin: clamp(2rem, 4vw, 3rem) 0; }
.hero-cutline { width: min(320px, 60%); margin: clamp(1.5rem, 3vw, 2.5rem) 0; }

/* ============ 01 · HERO ============ */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; display: block; will-change: transform; }
.hero-scrim-x { position: absolute; inset: 0; background: linear-gradient(to right, rgba(12, 18, 32, 0.88) 0%, rgba(12, 18, 32, 0.6) 55%, rgba(12, 18, 32, 0.25) 100%); }
.hero-scrim-y { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 18, 32, 0.7) 0%, rgba(12, 18, 32, 0) 35%); }
.hero-content { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 5vw, 4rem); color: #F2F4F7; }
.hero-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero-brand { display: flex; align-items: center; gap: 0.625rem; }
.hero-brand-mark { height: clamp(1.75rem, 4vw, 2.25rem); width: auto; display: block; }
.hero-logo { font-size: 0.8125rem; letter-spacing: 0.12em; font-weight: 500; }
.hero-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-eyebrow { margin: 0 0 1.5rem; font-size: 0.8125rem; letter-spacing: 0.14em; color: #A8B2C6; }
.hero-title { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.hero-copy { margin: 0; max-width: 34rem; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.6; color: #DCE1EA; text-wrap: pretty; }
.hero-ctas { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }
.hero-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-tag { font-size: 0.75rem; letter-spacing: 0.1em; color: #A8B2C6; }

/* ============ 02 · SERVICIOS ============ */
.svc-layout { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem); align-items: flex-start; }
.svc-stage-col { flex: 1 1 380px; position: sticky; top: clamp(1.5rem, 4vw, 3rem); }
/* Con las columnas apiladas (el flex hace wrap por debajo de ~990px de viewport),
   el sticky pintaría la imagen encima de los artículos */
@media (max-width: 1024px) {
  .svc-stage-col { position: static; }
}
.svc-stage { position: relative; height: min(64vh, 560px); background: #0C1220; overflow: hidden; }
.svc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.svc-img.is-active { opacity: 1; }
.svc-ring-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.svc-hint { font-size: 0.75rem; letter-spacing: 0.1em; color: #64708A; }
#svc-ring-progress { transition: stroke-dashoffset 0.5s ease; }

.svc-list { flex: 1 1 460px; display: flex; flex-direction: column; }
.svc-article { border-top: 1px solid #DCE1EA; padding: clamp(2.5rem, 5vw, 4rem) 0; min-height: 55vh; display: flex; flex-direction: column; justify-content: center; }
.svc-article--last { border-bottom: 1px solid #DCE1EA; }
.svc-num { font-size: 0.8125rem; color: #64708A; }
.svc-copy { margin: 0 0 1.5rem; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.65; color: #64708A; max-width: 34rem; text-wrap: pretty; }
.svc-prices { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.svc-price { font-size: clamp(1.5rem, 2.5vw, 2rem); color: #0A5CFF; }
.svc-price-label { font-size: 0.75rem; letter-spacing: 0.08em; color: #64708A; margin-top: 0.375rem; }
.svc-note { margin: 1.5rem 0 0; font-size: 0.9375rem; color: #64708A; }

.svc-img--inline { display: none; }

@media (max-width: 767px) {
  .svc-stage-col { display: none; }
  .svc-img--inline {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 1.5rem;
  }
}

/* ============ 03 · ESTIMADOR ============ */
.estimator-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.estimator-tab {
  font-size: 0.875rem; letter-spacing: 0.08em; padding: 0.875rem 1.5rem; min-height: 44px;
  cursor: pointer; border: 1px solid #64708A; border-radius: 0; background: transparent; color: #64708A;
}
.estimator-tab.is-active { background: #F2F4F7; color: #0C1220; border-color: #F2F4F7; }

.estimator-panel { border: 1px solid #141C2E; background: #141C2E; padding: clamp(1.5rem, 4vw, 2.5rem); }
.estimator-panel.is-hidden { display: none; }
.estimator-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.estimator-label { font-size: 0.8125rem; letter-spacing: 0.1em; color: #64708A; }
.estimator-value { font-size: 1.25rem; }
.range { width: 100%; margin: 1.25rem 0 2rem; accent-color: #0A5CFF; min-height: 44px; cursor: pointer; }
.range--last { margin: 1.25rem 0 0.5rem; }
.estimator-toggle-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.estimator-toggle {
  flex: 1 1 200px; font-size: 0.8125rem; letter-spacing: 0.06em; padding: 0.875rem 1rem; min-height: 44px;
  cursor: pointer; border: 1px solid #64708A; border-radius: 0; background: transparent; color: #64708A;
}
.estimator-toggle.is-active { background: #F2F4F7; color: #0C1220; border-color: #F2F4F7; }

.estimator-result { text-align: center; padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.estimator-detail { font-size: 0.8125rem; letter-spacing: 0.14em; color: #64708A; margin-bottom: 0.75rem; }
.estimator-amount { font-weight: 500; font-size: clamp(3rem, 11vw, 7.5rem); line-height: 1; color: #0A5CFF; letter-spacing: -0.02em; }
.estimator-disclaimer { margin: 1.75rem auto 2rem; max-width: 32rem; font-size: 0.9375rem; line-height: 1.6; color: #64708A; text-wrap: pretty; }

/* ============ 04 · PROCESO ============ */
.proc-wrap { position: relative; }
.proc-track { position: relative; }
.proc-track-bg { position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: #DCE1EA; }
.proc-track-fill { position: absolute; top: 5px; left: 0; height: 2px; width: 100%; background: #0A5CFF; transform-origin: left; transform: scaleX(0); }
.proc-track.is-vertical .proc-track-bg { top: 0; left: 5px; right: auto; width: 2px; height: 100%; }
.proc-track.is-vertical .proc-track-fill { top: 0; left: 5px; width: 2px; height: 100%; transform-origin: top; }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; position: relative; }
@media (max-width: 900px) {
  .proc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .proc-grid > div { position: relative; padding-left: 2.25rem; }
}
.proc-dot { width: 12px; height: 12px; background: #DCE1EA; margin-bottom: 1.5rem; transition: background 0.3s ease; }
.proc-dot.is-active { background: #0A5CFF; }
.proc-num { font-size: 0.8125rem; color: #64708A; margin-bottom: 0.5rem; }
.proc-label { font-family: Archivo, sans-serif; font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.375rem); letter-spacing: -0.01em; }
@media (max-width: 900px) {
  .proc-dot { position: absolute; left: 0; top: 1.6rem; margin-bottom: 0; }
}

/* ============ 05 · NUESTRO TALLER ============ */
.marquee-viewport { overflow: hidden; position: relative; user-select: none; touch-action: pan-y; }
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: vgb-mq 42s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover { animation-play-state: paused; }
}
.marquee-track.is-paused { animation-play-state: paused; }
@keyframes vgb-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.taller-placeholder {
  flex: none; height: clamp(240px, 34vw, 420px); width: clamp(280px, 30vw, 400px);
  background: #DCE1EA; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; font-size: 0.75rem; letter-spacing: 0.12em; color: #64708A; overflow: hidden;
}
.taller-placeholder--wide { width: clamp(340px, 40vw, 520px); }
.taller-placeholder--panoramic { width: clamp(400px, 50vw, 640px); }

.taller-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.taller-img--nave { object-position: 50% 20%; }
.taller-img--ventosa { object-position: 58% 40%; }
.taller-img--cortador { object-position: 45% 50%; }
.taller-img--soldador1 { object-position: 50% 45%; }
.taller-img--soldador2 { object-position: 50% 55%; }

/* ============ 06 · SEDES ============ */
.sedes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.sede-card { display: flex; flex-direction: column; gap: 1.5rem; }
.sede-copy { margin: 0; font-size: 1rem; line-height: 1.6; color: #64708A; }
.sede-map { width: 100%; height: clamp(220px, 26vw, 320px); border: 0; display: block; }
.sede-info { font-size: 0.875rem; line-height: 1.8; color: #64708A; }

/* ============ 07 · BANDA DE GRUPO ============ */
.banda-grupo { background: #0C1220; color: #F2F4F7; padding: 2.5rem clamp(1.25rem, 5vw, 4rem); border-bottom: 1px solid #141C2E; }
.banda-grupo-text { margin: 0; max-width: 1280px; margin-left: auto; margin-right: auto; font-size: 0.8125rem; letter-spacing: 0.1em; color: #64708A; text-align: center; }

/* ============ 08 · CONTACTO (formulario) ============ */
.contact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem 1.25rem; margin-top: clamp(1rem, 2vw, 1.5rem); text-align: left; }
.contact-field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-field--full { grid-column: 1 / -1; }
.contact-label { font-size: 0.75rem; letter-spacing: 0.1em; color: #64708A; }
.contact-input {
  font-family: Inter, sans-serif; font-size: 1rem; padding: 0.875rem 1rem; min-height: 44px;
  background: #0C1220; border: 1px solid #2A3550; color: #F2F4F7; border-radius: 0;
}
.contact-input:focus { outline: none; border-color: #0A5CFF; }
.contact-select { cursor: pointer; }
.contact-textarea { resize: vertical; min-height: 120px; font-family: Inter, sans-serif; }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-submit-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.contact-status { color: #64708A; font-size: 0.8125rem; margin: 0; }
.contact-status.is-success { color: #3ECF8E; }
.contact-status.is-error { color: #FF6B6B; }

/* ============ 09 · FOOTER ============ */
.footer { background: #0C1220; color: #F2F4F7; padding: clamp(5rem, 12vw, 9rem) clamp(1.25rem, 5vw, 4rem) 2.5rem; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; color: #F2F4F7; }
.footer-cta:hover { color: #F2F4F7; }
.footer-cta-text { font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(2.75rem, 9vw, 7.5rem); line-height: 0.95; letter-spacing: -0.03em; }
.footer-cta-arrow {
  width: clamp(72px, 9vw, 120px); height: clamp(72px, 9vw, 120px); border: 1px solid #64708A; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: clamp(1.75rem, 3vw, 2.5rem);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.footer-cta:hover .footer-cta-arrow { background: #0A5CFF; border-color: #0A5CFF; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2.5rem 2rem; padding: 1rem 0 clamp(3rem, 6vw, 4rem); }
.footer-col-label { font-size: 0.75rem; letter-spacing: 0.14em; color: #64708A; margin-bottom: 0.875rem; }
.footer-col-links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 1rem; line-height: 1.6; }
.footer-col-links a { color: #F2F4F7; }
.footer-col-text { font-size: 1rem; line-height: 1.6; color: #F2F4F7; }
.footer-bottom { border-top: 1px solid #141C2E; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; letter-spacing: 0.08em; color: #64708A; }
.footer-bottom a { color: #64708A; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-brand-mark { height: 0.875rem; width: auto; display: block; opacity: 0.85; }

/* ============ WHATSAPP FLOTANTE ============ */
.whatsapp-fab {
  position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); z-index: 80;
  transition: transform 0.2s ease, background 0.2s ease;
}
.whatsapp-fab:hover { background: #1EBE5A; transform: scale(1.06); color: #FFFFFF; }

/* ============ REVEALS (estado inicial, animados por GSAP) ============ */
[data-reveal] { opacity: 0; transform: translateY(60px); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}