/* ============================================================
   VILUX — Instalaciones y Reformas
   Design tokens
   ============================================================ */
:root{
  /* Brand-derived color tokens */
  --ink:        #17140F;   /* near-black, from logo badge */
  --ink-soft:   #3B362C;   /* secondary text on light */
  --paper:      #EEE9DF;   /* warm stone / plaster */
  --card:       #FFFEFB;
  --gold:       #B8843A;   /* burnished brass, evolved from logo yellow */
  --gold-deep:  #8C6224;
  --gold-pale:  #E7C892;
  --teal:       #2E6B76;   /* Mediterranean water-pipe blue */
  --teal-deep:  #1F4C54;
  --line:       #D8D0C0;   /* borders on paper */
  --muted:      #6B6355;   /* secondary text, warm grey-brown */
  --white:      #FFFFFF;
  --on-dark:    #F3EEE3;
  --on-dark-muted: #B9AF9B;
  --danger:     #B3261E;

  /* Type */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Spacing scale (marketing page: spacious) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --radius: 2px;
  --container: 1180px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: 180ms;
  --dur-m: 320ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure{ margin: 0; }
button{ font: inherit; }
input, select, textarea{ font: inherit; }

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

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: var(--sp-4); top: -60px;
  background: var(--ink); color: var(--on-dark);
  padding: var(--sp-3) var(--sp-4); z-index: 200;
  transition: top var(--dur-s) var(--ease);
}
.skip-link:focus{ top: var(--sp-4); }

:focus-visible{
  outline: 2.5px solid var(--teal);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px){ .wrap{ padding-inline: var(--sp-7); } }

/* ============================================================
   Type
   ============================================================ */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 var(--sp-3);
}
.eyebrow--light{ color: var(--gold-pale); }

.h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
}
.h2--light{ color: var(--on-dark); }

.section__intro{
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: var(--sp-4);
}
.section__intro--light{ color: var(--on-dark-muted); }

/* Signature motif: measure line / circuit trace */
.ruler{
  height: 14px;
  width: 92px;
  margin: var(--sp-4) 0;
  background:
    linear-gradient(var(--gold), var(--gold)) left bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(to right, var(--gold) 0 1.5px, transparent 1.5px 13px) left bottom / 100% 7px no-repeat;
}
.ruler--light{
  background:
    linear-gradient(var(--gold-pale), var(--gold-pale)) left bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(to right, var(--gold-pale) 0 1.5px, transparent 1.5px 13px) left bottom / 100% 7px no-repeat;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn .icon{ width: 18px; height: 18px; flex: none; }

.btn--gold{ background: var(--gold); color: var(--ink); }
.btn--gold:hover{ background: var(--gold-deep); color: var(--on-dark); }

.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink); }

.btn--outline-light{ background: transparent; color: var(--on-dark); border-color: rgba(243,238,227,.5); }
.btn--outline-light:hover{ border-color: var(--on-dark); background: rgba(243,238,227,.08); }

.btn--sm{ padding: 9px 16px; font-size: 14px; }
.btn--lg{ padding: 15px 26px; font-size: 16px; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(238,233,223,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__row{
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--sp-3);
}
.brand{ display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand__mark{ border-radius: 50%; flex: none; }
.brand__word{
  font-family: var(--font-display);
  font-weight: 800; font-size: 24px; letter-spacing: .02em;
}
.brand--footer{ align-items: center; }
.brand--footer .brand__sub{
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted);
}

.nav{ display: none; align-items: center; gap: var(--sp-6); }
.nav a{
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding-block: var(--sp-2);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.nav a:hover{ color: var(--ink); border-color: var(--gold); }

.site-header__actions{ display: flex; align-items: center; gap: var(--sp-3); }
.hide-mobile{ display: none !important; }

.icon-link{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.icon-link .icon{ width: 18px; height: 18px; }
.icon-link:hover{ color: var(--gold-deep); border-color: var(--gold-deep); }

.icon-link--footer{
  color: var(--on-dark-muted);
  border-color: rgba(243,238,227,.3);
}
.icon-link--footer:hover{ color: var(--gold-pale); border-color: var(--gold-pale); }

.nav-toggle{
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; align-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar{ width: 18px; height: 2px; background: var(--ink); transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px){
  .nav{ display: flex; }
  .hide-mobile{ display: inline-flex !important; }
  .nav-toggle{ display: none; }
}

.nav--open{
  display: flex; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
}
.nav--open a{ padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 65%;
}
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(15,13,9,.92) 0%, rgba(15,13,9,.65) 32%, rgba(15,13,9,.15) 62%, rgba(15,13,9,.05) 100%);
}
.hero__content{
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  max-width: 720px;
}
.hero__title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 10vw, 108px);
  line-height: .92;
  letter-spacing: .005em;
  color: var(--on-dark);
  text-transform: uppercase;
}
.hero__lead{
  color: var(--on-dark-muted);
  font-size: 18px;
  max-width: 46ch;
  margin-top: var(--sp-4);
}
.hero__actions{
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ============================================================
   Sections (shared)
   ============================================================ */
.section{ padding-block: var(--sp-9); }
.section--dark{ background: var(--ink); }
.section--stone{ background: var(--card); border-block: 1px solid var(--line); }

/* ============================================================
   Servicios
   ============================================================ */
.services{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  margin-top: var(--sp-7);
  border: 1px solid var(--line);
}
.service-card{
  position: relative;
  background: var(--card);
  padding: var(--sp-6) var(--sp-5);
  transition: background var(--dur-s) var(--ease);
}
.service-card:hover{ background: #FFFFFF; }
.service-card__tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em;
  color: var(--teal-deep);
  border: 1px solid var(--teal-deep);
  border-radius: var(--radius);
  padding: 3px 7px;
  margin-bottom: var(--sp-5);
}
.service-card__icon{
  width: 30px; height: 30px;
  color: var(--gold-deep);
  display: block;
  margin-bottom: var(--sp-4);
}
.service-card h3{
  font-family: var(--font-display);
  font-weight: 700; font-size: 22px;
  margin-bottom: var(--sp-2);
}
.service-card p{ color: var(--muted); font-size: 15px; }

/* ============================================================
   Gallery (proyecto destacado)
   ============================================================ */
.gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}
.gallery__item{ overflow: hidden; background: #000; }
.gallery__item img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.gallery__item--wide{ grid-column: 1 / -1; }
.gallery__item--wide img{ aspect-ratio: 16 / 10; }

@media (min-width: 640px){
  .gallery{ grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Proceso
   ============================================================ */
.steps{
  display: grid;
  gap: var(--sp-7);
  margin-top: var(--sp-8);
}
.step__num{
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  color: var(--gold-deep);
  letter-spacing: .08em;
}
.step h3{
  font-family: var(--font-display);
  font-weight: 700; font-size: 26px;
  margin-bottom: var(--sp-2);
}
.step p{ color: var(--ink-soft); max-width: 48ch; }

@media (min-width: 768px){
  .steps{ grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Por qué VILUX
   ============================================================ */
.why{
  display: grid;
  gap: var(--sp-7);
}
.why__list{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.why__item h3{
  font-family: var(--font-display);
  font-weight: 700; font-size: 20px;
  margin-bottom: var(--sp-2);
}
.why__item p{ color: var(--muted); font-size: 15px; }

@media (min-width: 1024px){
  .why{ grid-template-columns: 320px 1fr; align-items: start; }
}

/* ============================================================
   Contacto
   ============================================================ */
.contact{
  display: grid;
  gap: var(--sp-8);
}
.contact__details{ margin-top: var(--sp-7); display: grid; gap: var(--sp-4); }
.contact__details li{ display: flex; flex-direction: column; gap: 2px; }
.contact__label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
.contact__details a{
  font-size: 18px; color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.contact__details a:hover{ color: var(--gold-pale); border-color: var(--gold-pale); }

.form{
  background: var(--card);
  padding: var(--sp-6);
  border-radius: var(--radius);
  display: grid; gap: var(--sp-4);
}
.form__row{ display: grid; gap: var(--sp-2); }
.form__row label{ font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.form__row input, .form__row select, .form__row textarea{
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  resize: vertical;
}
.form__row input:focus, .form__row select:focus, .form__row textarea:focus{
  border-color: var(--teal);
}
.form__note{ font-size: 13px; color: var(--danger); min-height: 1em; margin: 0; }
.form__submit{ width: 100%; justify-content: center; margin-top: var(--sp-2); }

@media (min-width: 1024px){
  .contact{ grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer{ background: var(--ink); color: var(--on-dark-muted); padding-block: var(--sp-6); }
.footer__row{
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: 13px;
}
.footer__meta, .footer__copy{ margin: 0; }

@media (min-width: 1024px){
  .footer__row{ flex-wrap: nowrap; align-items: center; }
  .brand--footer{ flex: none; }
  .footer__meta{ flex: 1 1 auto; text-align: center; }
  .footer__copy{ flex: none; white-space: nowrap; }
}

/* ============================================================
   WhatsApp FAB
   ============================================================ */
.whatsapp-fab{
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #0B1B0F;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  z-index: 90;
  transition: transform var(--dur-s) var(--ease);
}
.whatsapp-fab:hover{ transform: scale(1.06); }
.whatsapp-fab .icon{ width: 28px; height: 28px; }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
[data-reveal]{
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
}