/* ============================================================
   PANORÁMICA GLASS — sistema de diseño
   Paleta derivada de fotografías reales de instalaciones:
   cielo costero, hormigón, madera de deck, aluminio anodizado.
   Motivo de firma: líneas de cota (estilo ficha técnica de
   perfiles) usadas como separadores y etiquetas.
   ============================================================ */

:root{
  --ink:        #1B252B;   /* aluminio oscuro / texto principal */
  --ink-70:     rgba(27,37,43,.7);
  --ink-45:     rgba(27,37,43,.45);
  --paper:      #F6F4EF;   /* fondo claro, arena/hormigón claro */
  --paper-dim:  #EDE9E0;
  --concrete:   #A9A296;   /* hormigón medio */
  --ocean:      #3E86AA;   /* acento vidrio/cielo */
  --ocean-dark: #2C6786;
  --wood:       #B87A3D;   /* acento madera de deck */
  --night:      #12191D;   /* secciones oscuras */
  --night-2:    #1B252B;
  --line:       rgba(27,37,43,.14);
  --line-on-dark: rgba(246,244,239,.18);

  --display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', 'Courier New', monospace;

  --container: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--display); margin:0; line-height:1.1; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width: var(--container); margin:0 auto; padding:0 28px; }

/* ---- utility: dimension-line label (signature element) ---- */
.spec-label{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ocean-dark);
}
.spec-label::before{
  content:""; width:22px; height:1px; background: currentColor;
}
.spec-label.on-dark{ color:#8FC4DE; }

.dim-rule{
  position:relative; height:1px; background: var(--line);
  margin: 0;
}
.dim-rule::before, .dim-rule::after{
  content:""; position:absolute; top:-4px; width:1px; height:9px; background: var(--line);
}
.dim-rule::before{ left:0; }
.dim-rule::after{ right:0; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px; border-radius: 2px;
  font-family: var(--body); font-weight:600; font-size:15px;
  border: 1px solid transparent; cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--ocean); color: #fff; }
.btn-primary:hover{ background: var(--ocean-dark); }
.btn-ghost{ background: transparent; color: var(--paper); border-color: var(--line-on-dark); }
.btn-ghost:hover{ border-color: var(--paper); }
.btn-outline-dark{ background:transparent; color:var(--ink); border-color: var(--ink); }
.btn-outline-dark:hover{ background: var(--ink); color: var(--paper); }

/* ---- nav ---- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(246,244,239,.97);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.scrolled{ border-color: var(--line); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 28px; max-width: var(--container); margin:0 auto;
}
.nav-logo img{ height: 34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
  font-size:14px; font-weight:500; color: var(--ink-70);
  transition:color .15s ease;
}
.nav-links a:hover{ color: var(--ocean-dark); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

/* ---- hero ---- */
.hero{
  position:relative; min-height: 100vh;
  display:flex; align-items:flex-end;
  background: var(--night);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,25,29,.55) 0%, rgba(18,25,29,.35) 40%, rgba(18,25,29,.94) 100%);
}
.hero-content{
  position:relative; z-index:2; color: var(--paper);
  padding-top: 160px; padding-bottom: 64px;
  width:100%;
}
.hero-eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size: clamp(40px, 6vw, 76px);
  font-weight:600; letter-spacing:-.01em; max-width: 15ch;
  color:#fff;
}
.hero h1 em{ font-style:normal; color:#8FC4DE; }
.hero-sub{
  margin-top:22px; max-width:46ch; font-size:18px; color: rgba(246,244,239,.82);
}
.hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{
  margin-top:64px; display:grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line-on-dark); padding-top:22px; gap: 20px;
}
.hero-stats .stat b{ display:block; font-family:var(--display); font-size:26px; color:#fff; }
.hero-stats .stat span{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: rgba(246,244,239,.6); }

/* ---- section basics ---- */
section{ padding: 120px 0; }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(28px,4vw,42px); margin-top:16px; }
.section-head p{ margin-top:18px; font-size:17px; color: var(--ink-70); }
.on-dark{ background: var(--night-2); color: var(--paper); }
.on-dark .section-head p{ color: rgba(246,244,239,.7); }
.bg-dim{ background: var(--paper-dim); }

/* ---- trayectoria ---- */
.trayectoria{ display:grid; grid-template-columns: 1.1fr .9fr; gap:72px; align-items:center; }
.trayectoria-copy p{ font-size:17px; color: var(--ink-70); margin-top:18px; }
.trayectoria-copy p:first-of-type{ margin-top:24px; }
.trayectoria-figure{ position:relative; }
.trayectoria-figure img{ filter: grayscale(1) contrast(1.05); border-radius:2px; }
.trayectoria-figure figcaption{
  margin-top:14px; font-family: var(--mono); font-size:12px; letter-spacing:.05em;
  color: var(--ink-45);
}
.trayectoria-quote{
  margin-top:28px; padding-left:20px; border-left:2px solid var(--wood);
  font-family: var(--display); font-size:20px; color: var(--ink);
}

/* ---- materiales grid ---- */
.materiales-grid{
  display:grid; grid-template-columns: repeat(5,1fr); gap:1px;
  background: var(--line); border:1px solid var(--line);
}
.material-card{
  background: var(--paper); padding: 30px 24px; min-height: 230px;
  display:flex; flex-direction:column; gap:14px;
}
.material-card .spec-label{ order:1; }
.material-card h3{ font-size:18px; order:2; }
.material-card p{ font-size:14px; color:var(--ink-70); order:3; }

.proj-strip{
  margin-top: 2px; display:grid; grid-template-columns: repeat(4,1fr); gap: 2px;
}
.proj-strip a{ position:relative; display:block; overflow:hidden; aspect-ratio: 3/4; }
.proj-strip img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.proj-strip a:hover img{ transform: scale(1.05); }

/* ---- revestimientos ---- */
.revest{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items:start; }
.revest-list li{
  padding: 22px 0; border-top:1px solid var(--line);
}
.revest-list li:last-child{ border-bottom:1px solid var(--line); }
.revest-list h4{ font-size:17px; margin-bottom:6px; }
.revest-list p{ font-size:15px; color: var(--ink-70); }
.revest-list .tag{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; color: var(--wood); text-transform:uppercase; }
.revest-photos{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.revest-photos figure{ margin:0; }
.revest-photos img{ border-radius:2px; aspect-ratio: 4/3; object-fit:cover; }
.revest-photos figure.wide{ grid-column: 1 / -1; }
.revest-photos figure.wide img{ aspect-ratio: 16/9; }
.revest-photos figcaption{ margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--ink-45); letter-spacing:.04em; }

/* ---- caracteristicas ---- */
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--line-on-dark); }
.feature-card{ background: var(--night-2); padding: 0 0 32px; }
.feature-card img{ aspect-ratio: 4/3; object-fit:cover; margin-bottom:24px; }
.feature-card-body{ padding: 0 28px; }
.feature-card .spec-label{ margin-bottom:14px; }
.feature-card h3{ font-size:22px; color:#fff; }
.feature-card p{ margin-top:10px; font-size:15px; color: rgba(246,244,239,.7); }

/* ---- servicios ---- */
.servicios-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.servicio-card{
  border:1px solid var(--line); padding: 26px; border-radius:2px;
  transition: border-color .15s ease, background .15s ease;
}
.servicio-card:hover{ border-color: var(--ocean); background:#fff; }
.servicio-card h4{ font-size:17px; margin-bottom:8px; }
.servicio-card p{ font-size:14px; color: var(--ink-70); }
.servicio-card.highlight{ background: var(--ink); color: var(--paper); grid-column: span 1; }
.servicio-card.highlight p{ color: rgba(246,244,239,.75); }
.servicio-card.wide{ grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ---- contacto ---- */
.contacto{ display:grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.contact-channels{ margin-top:34px; display:flex; flex-direction:column; gap:16px; }
.contact-channel{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 0; border-top:1px solid var(--line-on-dark);
  font-family: var(--mono); font-size:15px;
}
.contact-channel:last-child{ border-bottom:1px solid var(--line-on-dark); }
.contact-channel span{ color: rgba(246,244,239,.55); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.contact-channel a{ color:#fff; font-size:16px; }
.contact-channel a:hover{ color: #8FC4DE; }

.form{ display:flex; flex-direction:column; gap:18px; }
.form label{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: rgba(246,244,239,.6); margin-bottom:8px; display:block; }
.form input, .form textarea, .form select{
  width:100%; background: transparent; border:none; border-bottom:1px solid var(--line-on-dark);
  color:#fff; font-family: var(--body); font-size:16px; padding: 10px 2px;
  outline:none; transition: border-color .15s ease;
}
.form input::placeholder, .form textarea::placeholder{ color: rgba(246,244,239,.35); }
.form input:focus, .form textarea:focus, .form select:focus{ border-color: #8FC4DE; }
.form select option{ color:#000; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:13px; color: rgba(246,244,239,.5); }
.form-status{ font-family: var(--mono); font-size:13px; padding:10px 0; }
.form-status.ok{ color:#8FC4DE; }
.form-status.err{ color:#e2a17a; }

/* ---- footer ---- */
footer{ background: var(--ink); color: rgba(246,244,239,.55); padding: 40px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-inner img{ height:26px; opacity:.85; }
.footer-inner .credit a{ color: rgba(246,244,239,.75); }
.footer-inner .credit a:hover{ color:#fff; }
.footer-legal{ font-family: var(--mono); font-size:12px; }

/* ---- reveal on scroll ---- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---- responsive ---- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); row-gap:24px; }
  .trayectoria, .revest, .contacto{ grid-template-columns: 1fr; }
  .materiales-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-strip{ grid-template-columns: repeat(2,1fr); }
  .feature-grid{ grid-template-columns: 1fr; }
  .servicios-grid{ grid-template-columns: 1fr 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  section{ padding: 80px 0; }
  .materiales-grid{ grid-template-columns: 1fr; }
  .proj-strip{ grid-template-columns: 1fr 1fr; }
  .servicios-grid{ grid-template-columns: 1fr; }
  .hero-content{ padding-top: 120px; }
}

/* ---- mobile nav drawer ---- */
.nav-links.open{
  display:flex; position:fixed; left:0; right:0; bottom:0; top:66px;
  background: var(--paper); z-index: 99; opacity:1;
  flex-direction:column; padding: 32px 28px; gap: 22px; align-items:flex-start;
  font-size: 18px;
}