/* ARKA PREFABRICADOS S.A.S — estilos compartidos (marca, base, header, nav, footer) */

/* ---------- Variables de marca ---------- */
:root {
  --bg: oklch(0.975 0.003 120);
  --fg: oklch(0.2 0.03 245);
  --card: #ffffff;
  --secondary: oklch(0.93 0.004 100);
  --muted-fg: oklch(0.48 0.015 245);
  --border: oklch(0.88 0.005 100);
  --ink: oklch(0.2 0.035 240);
  --ink-2: oklch(0.26 0.04 235);
  --ink-fg: oklch(0.96 0.005 120);
  --lime: oklch(0.82 0.21 130);
  --lime-deep: oklch(0.62 0.18 132);
  --whatsapp: oklch(0.72 0.17 150);
  --danger: oklch(0.577 0.245 27.3);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, sans-serif;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --section-y: clamp(4rem, 9vw, 7rem);
  --container: 80rem;
  --gutter: 1.25rem;

  --radius: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-full: 999px;

  --shadow-card: 0 1px 2px oklch(0.2 0.03 245 / 0.06), 0 18px 40px -18px oklch(0.2 0.03 245 / 0.28);
  --shadow-lime: 0 12px 30px -10px oklch(0.82 0.21 130 / 0.55);
  --gradient-hero: linear-gradient(100deg, oklch(0.16 0.03 240 / 0.94) 0%, oklch(0.18 0.035 240 / 0.78) 45%, oklch(0.18 0.03 240 / 0.3) 100%);
  --gradient-ink: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  --header-h: 5.5rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.05; font-weight: 900; text-transform: uppercase; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.9rem, 6.5vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.6rem); }
.eyebrow { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 0.75rem; }
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--lime); flex-shrink: 0; }
.eyebrow--plain::before { display: none; }

/* ---------- Utilidades ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid-lines { background-image: linear-gradient(to right, oklch(1 0 0 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: 64px 64px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.9rem 1.5rem; border-radius: var(--radius); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; transition: transform .25s ease, filter .25s ease, background .25s ease, color .25s ease, border-color .25s ease; text-align: center; }
.btn-lime { background: var(--lime); color: var(--ink); box-shadow: var(--shadow-lime); }
.btn-lime:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-ink { background: var(--ink); color: var(--ink-fg); font-size: 0.8rem; padding: 0.8rem 1.25rem; }
.btn-ink:hover { background: var(--lime-deep); }
.btn-ghost { border: 1px solid oklch(1 0 0 / 0.35); color: var(--ink-fg); background: oklch(1 0 0 / 0.06); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: oklch(1 0 0 / 0.14); }
.btn-outline-light { border: 1px solid oklch(0.96 0.005 120 / 0.4); color: var(--ink-fg); }
.btn-outline-light:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Formularios base ---------- */
.field { width: 100%; min-height: 2.75rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); outline: none; transition: border-color .2s; }
.field:focus { border-color: var(--lime); }
.field--dark { border-color: oklch(0.96 0.005 120 / 0.15); background: oklch(0.96 0.005 120 / 0.05); color: var(--ink-fg); }
.field--dark::placeholder { color: oklch(0.96 0.005 120 / 0.4); }
.field--dark option { color: var(--fg); }

/* ---------- Header y nav ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 40; background: oklch(1 0 0 / 0.78); backdrop-filter: blur(12px); transition: background .4s, box-shadow .4s; }
.site-header.is-scrolled { background: oklch(1 0 0 / 0.92); box-shadow: var(--shadow-card); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 0.5rem; }
.site-header__logo img { height: 4.5rem; width: auto; }
.site-nav { display: none; gap: 2rem; align-items: center; }
.site-nav a, .mobile-nav a.mobile-nav__link { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.2 0.035 240 / 0.8); transition: color .2s; }
.site-nav a:hover, .mobile-nav a.mobile-nav__link:hover { color: var(--lime-deep); }
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.site-header__cta .long { display: none; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); }
.menu-toggle:hover { border-color: var(--lime); color: var(--lime-deep); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.mobile-nav { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s, opacity .3s; }
.mobile-nav.is-open { max-height: 30rem; opacity: 1; }
.mobile-nav__inner { border-top: 1px solid var(--border); background: oklch(1 0 0 / 0.96); padding: 0.75rem var(--gutter) 1.5rem; }
.mobile-nav a.mobile-nav__link { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--border); color: var(--ink); font-size: 0.85rem; }
.mobile-nav .btn { width: 100%; margin-top: 1.25rem; }

@media (min-width: 640px) {
  .site-header__cta .long { display: inline; }
  .site-header__cta .short { display: none; }
}
@media (min-width: 768px) { .site-header__logo img { height: 6.5rem; } }
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .menu-toggle, .mobile-nav { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--card); }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: 4rem; }
.site-footer__logo { height: 10rem; width: auto; }
.site-footer p { margin-top: 1rem; max-width: 24rem; color: var(--muted-fg); }
.site-footer__col { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; }
.site-footer__col .eyebrow { color: var(--lime-deep); margin-bottom: 0.5rem; }
.site-footer__col .eyebrow::before { display: none; }
.site-footer__col a { color: var(--ink); min-height: 2.75rem; display: flex; align-items: center; }
.site-footer__col a:hover { color: var(--lime-deep); }
.site-footer__legal { border-top: 1px solid var(--border); padding: 1.5rem var(--gutter); text-align: center; font-size: 0.75rem; color: var(--muted-fg); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Botón flotante WhatsApp (global) ---------- */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 oklch(0.72 0.17 150 / 0.6); } 100% { box-shadow: 0 0 0 18px oklch(0.72 0.17 150 / 0); } }
.pulse-ring { animation: pulse-ring 2s infinite; }
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.75rem; border-radius: var(--radius-full); background: var(--whatsapp); color: var(--ink); font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--shadow-card); transition: transform .2s; }
.wa-float:hover { transform: scale(1.05); }
.wa-float svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.wa-float span { display: none; }
@media (min-width: 640px) { .wa-float { padding-right: 1.25rem; } .wa-float span { display: inline; } }