/* =========================================================
   ZALCON — Proyecto Fénix
   Sistema visual: "cuaderno de ingeniería"
   ========================================================= */

:root{
  --ink:        #0B0D0F;
  --ink-soft:   #1A1D21;
  --paper:      #FFFFFF;
  --fog:        #F1F0EE;
  --fog-dark:   #E7E5E2;
  --steel:      #6B6E72;
  --steel-light:#9A9C9F;
  --line:       #DBDAD6;
  --line-dark:  #2A2D31;
  --signal:     #F17B21;
  --signal-deep:#BB5F19;
  --signal-tint:#FDEFE4;

  --f-display: 'Archivo Expanded', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --edge: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1440px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer;}
input, textarea, select{font:inherit;}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--signal);
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:-0.005em;
  line-height:1.08;
  font-weight:700;
  text-wrap:balance;
}
h2{font-size:clamp(1.7rem, 3.4vw, 3.1rem);}
h3{font-size:clamp(1.15rem, 1.8vw, 1.5rem);}
p{color:var(--steel); max-width:60ch; line-height:1.65;}
.lede{font-size:clamp(1.02rem, 1.4vw, 1.25rem); color:var(--ink); max-width:56ch; line-height:1.55;}
.hero .lede{color:rgba(255,255,255,0.94);}

/* ---------- Blueprint corner marks (signature element) ---------- */
.blueprint{position:relative;}
.blueprint::before,
.blueprint::after,
.blueprint > .bp-tl, .blueprint > .bp-tr, .blueprint > .bp-bl, .blueprint > .bp-br{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border:1.5px solid currentColor;
  opacity:0.5;
  z-index:3;
  pointer-events:none;
}
.blueprint::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.blueprint::after{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.blueprint > .bp-bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.blueprint > .bp-br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.coord{
  font-family:var(--f-mono);
  font-size:0.68rem;
  color:var(--steel-light);
  letter-spacing:0.04em;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:100px;
}
.logo{
  font-family:var(--f-display);
  font-size:1.3rem;
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:0.5rem;
}
.logo .dot{width:9px; height:9px; background:var(--signal); display:inline-block;}
.logo img{height:58px; width:auto; display:block;}
footer .logo img{height:46px;}
.nav-desktop{display:flex; gap:0.4rem; align-items:center;}
.nav-desktop a{
  font-family:var(--f-mono);
  font-size:0.86rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding:0.65rem 1.1rem;
  border-radius:2px;
  transition:background 0.2s ease, color 0.2s ease;
}
.nav-desktop a:hover, .nav-desktop a:focus-visible{
  background:var(--ink);
  color:var(--paper);
}
.btn{
  font-family:var(--f-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.85rem 1.4rem;
  border:1px solid var(--ink);
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--signal); border-color:var(--signal); color:var(--paper);}
.btn-primary:hover{background:var(--signal-deep); border-color:var(--signal-deep); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px);}
.btn-ghost-light{background:transparent; color:var(--paper); border-color:rgba(255,255,255,0.4);}
.btn-ghost-light:hover{background:var(--paper); color:var(--ink);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none;}
.mobile-nav{
  flex-direction:column;
  align-items:stretch;
  gap:0.3rem;
  padding-bottom:1.5rem;
  border-top:1px solid var(--line);
  padding-top:1rem;
}
.mobile-nav a:not(.btn){
  font-family:var(--f-mono);
  font-size:1rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
  padding:0.9rem 0.2rem;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:not(.btn):hover{color:var(--signal);}
.nav-toggle span{width:28px; height:2.5px; background:var(--ink);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  padding-top:calc(100px + 5vw);
}
.hero-photo{
  position:absolute; inset:0;
  background-image:linear-gradient(180deg, rgba(11,13,15,0.88) 0%, rgba(11,13,15,0.72) 42%, rgba(11,13,15,0.94) 100%), var(--hero-img);
  background-size:cover;
  background-position:center 30%;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 70% 30%, black 10%, transparent 70%);
}
.hero .wrap{position:relative; z-index:2; padding-bottom:0;}
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:1px solid var(--line-dark);
  padding-bottom:1.5rem;
  margin-bottom:2.5rem;
  flex-wrap:wrap; gap:1rem;
}
.hero-top .eyebrow{color:var(--signal);}
.hero-meta{display:flex; gap:2rem; font-family:var(--f-mono); font-size:0.7rem; color:var(--steel-light); flex-wrap:wrap;}
.hero-body{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:var(--gap);
  align-items:end;
  padding-bottom:3rem;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  margin-bottom:1.5rem;
}
.hero h1 .accent{color:var(--signal);}
.hero-actions{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;}
.hero-side{border-left:1px solid var(--line-dark); padding-left:var(--gap);}
.hero-side p{color:var(--steel-light);}
.hero-side .stat{
  font-family:var(--f-display); font-size:2.4rem; color:var(--paper);
  margin-top:1rem;
}
.hero-schema{
  position:relative;
  margin-top:3rem;
  border-top:1px solid var(--line-dark);
  padding:1.5rem 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.hero-schema .schema-item{font-family:var(--f-mono); font-size:0.7rem; color:var(--steel-light);}
.hero-schema .schema-item b{display:block; color:var(--paper); font-size:1.15rem; font-family:var(--f-display); margin-top:0.3rem;}

/* ---------- Generic section shell ---------- */
section{padding:clamp(3.5rem, 8vw, 7rem) 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:3rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:1.5rem;
}
.section-head h2{max-width:20ch;}
.section-head .lede{margin-left:auto; text-align:right;}
@media (max-width:720px){ .section-head .lede{text-align:left; margin-left:0;} }

.on-dark{background:var(--ink); color:var(--paper);}
.on-dark p{color:var(--steel-light);}
.on-dark .section-head{border-color:var(--line-dark);}
.on-fog{background:var(--fog);}

/* ---------- Problema / Solución ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);}
.split-card{
  border:1px solid var(--line);
  padding:2.2rem;
  position:relative;
}
.split-card .eyebrow{margin-bottom:1.2rem;}
.split-card ul{margin-top:1.4rem; display:grid; gap:0.8rem;}
.split-card li{
  font-size:0.95rem; color:var(--steel);
  padding-left:1.4rem; position:relative;
}
.split-card li::before{
  content:"—"; position:absolute; left:0; color:var(--signal);
}
.split-card.solution{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.split-card.solution p, .split-card.solution li{color:var(--steel-light);}
.split-card.solution li::before{color:var(--signal);}

/* ---------- Servicios ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.service-card{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:2.4rem 2rem;
  position:relative;
  transition:background 0.25s ease;
}
.service-card:hover{background:var(--fog);}
.service-card .num{font-family:var(--f-mono); font-size:0.75rem; color:var(--signal);}
.service-card .icon{margin:1.4rem 0 1.2rem; color:var(--signal); transition:color 0.2s ease;}
.service-card:hover .icon{color:var(--ink);}
.service-card h3{margin-bottom:0.8rem;}
.service-card p{font-size:0.92rem; margin-bottom:1.4rem;}
.service-card .more{
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.4rem; color:var(--ink);
}
.service-card .more svg{transition:transform 0.2s ease;}
.service-card:hover .more svg{transform:translateX(4px);}

/* ---------- Proceso ---------- */
.process{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.process-step{
  background:var(--paper);
  padding:2rem 1.4rem;
}
.process-step .idx{font-family:var(--f-mono); color:var(--signal); font-size:0.85rem;}
.process-step h4{margin:1rem 0 0.6rem; font-size:1.05rem;}
.process-step p{font-size:0.86rem;}

/* ---------- Indicadores ---------- */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.stats-bar .stat-cell{
  padding:2.4rem 1.6rem;
  border-right:1px solid var(--line-dark);
}
.stats-bar .stat-cell:last-child{border-right:none;}
.stats-bar .num{font-family:var(--f-display); font-size:clamp(2.2rem,4vw,3.4rem); color:var(--signal);}
.stats-bar .lbl{font-family:var(--f-mono); font-size:0.72rem; color:var(--steel-light); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.6rem;}

/* ---------- Beneficios ---------- */
.benefits{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);}
.benefit{padding-top:1.6rem; border-top:2px solid var(--ink);}
.benefit h4{margin-bottom:0.6rem;}
.benefit p{font-size:0.9rem;}

/* ---------- Clientes / Marcas ---------- */
.clients-row{
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.clients-row span{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:1.2rem 1.6rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--steel); flex:1 1 auto; text-align:center;
}
.brands-row{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap);
  align-items:center; margin-top:2.5rem; opacity:0.7;
}
.brands-row span{font-family:var(--f-mono); font-size:0.78rem; text-align:center; color:var(--steel-light);}

/* ---------- Proyectos ---------- */
.filters{display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:2.5rem;}
.filter-btn{
  font-family:var(--f-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em;
  padding:0.6rem 1.1rem; border:1px solid var(--line); background:transparent; color:var(--steel);
  transition:all 0.2s ease;
}
.filter-btn.active, .filter-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}
.project-card{position:relative; cursor:pointer; overflow:hidden; border:1px solid var(--line);}
.project-thumb{
  aspect-ratio:4/3; width:100%;
  background:var(--ink);
  position:relative; overflow:hidden;
}
.project-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform 0.5s ease;
}
.project-card:hover .project-thumb img{transform:scale(1.05);}
.project-thumb::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,13,15,0.05) 40%, rgba(11,13,15,0.55) 100%);
}
.project-card[data-cat] .project-thumb .tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--f-mono); font-size:0.68rem; color:var(--paper);
  border:1px solid rgba(255,255,255,0.5); background:rgba(11,13,15,0.35); backdrop-filter:blur(2px);
  padding:0.3rem 0.6rem; letter-spacing:0.05em; text-transform:uppercase;
}

/* ---------- Detail photo banner ---------- */
.detail-banner{
  display:grid; grid-template-columns:1fr 1.3fr; gap:var(--gap); align-items:center;
}
.detail-banner figure{position:relative; margin:0;}
.detail-banner img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.detail-banner figcaption{
  margin-top:0.8rem; font-family:var(--f-mono); font-size:0.72rem; color:var(--steel);
  letter-spacing:0.03em;
}
@media (max-width:860px){
  .detail-banner{grid-template-columns:1fr;}
}
.project-info{padding:1.4rem;}
.project-info .coord{display:block; margin-bottom:0.4rem;}
.project-info h4{font-size:1rem;}
.project-card.hidden{display:none;}

/* ---------- Testimonios ---------- */
.testimonials{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);}
.testimonial{border-left:2px solid var(--signal); padding-left:1.6rem;}
.testimonial p{color:var(--paper); font-size:1.02rem; margin-bottom:1.4rem;}
.testimonial .who{font-family:var(--f-mono); font-size:0.75rem; color:var(--steel-light); text-transform:uppercase; letter-spacing:0.04em;}

/* ---------- CTA ---------- */
.cta-band{
  background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:3.5rem var(--edge);
}
.cta-band h2{color:var(--paper); max-width:14ch;}
.cta-band .btn-ghost{border-color:var(--paper); color:var(--paper);}
.cta-band .btn-ghost:hover{background:var(--paper); color:var(--signal-deep);}

/* ---------- Mapa + Formulario ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);}
.map-block{
  background:var(--fog); border:1px solid var(--line); min-height:420px;
  position:relative; overflow:hidden; color:var(--ink);
}
.map-block iframe{position:absolute; inset:0; width:100%; height:100%;}
.map-caption{
  position:absolute; bottom:1.2rem; left:1.2rem; z-index:2;
  font-family:var(--f-mono); font-size:0.7rem; color:var(--ink);
  background:rgba(255,255,255,0.9); padding:0.5rem 0.8rem; letter-spacing:0.03em;
  pointer-events:none;
}

.form-block{border:1px solid var(--line); padding:2.4rem;}
.field{margin-bottom:1.3rem;}
.field label{
  display:block; font-family:var(--f-mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--steel); margin-bottom:0.5rem;
}
.field input, .field textarea, .field select{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:0.7rem 0.2rem; font-size:0.98rem; color:var(--ink); transition:border-color 0.2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--signal); outline:none;}
.field textarea{resize:vertical; min-height:90px;}
.field.error input, .field.error textarea{border-color:#C0392B;}
.field .err-msg{font-family:var(--f-mono); font-size:0.7rem; color:#C0392B; margin-top:0.4rem; display:none;}
.field.error .err-msg{display:block;}
.form-status{
  font-family:var(--f-mono); font-size:0.8rem; margin-top:1rem; display:none; padding:0.9rem 1rem; border:1px solid var(--line);
}
.form-status.show{display:block;}
.form-status.ok{border-color:#2E7D32; color:#2E7D32;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:var(--steel-light); padding-top:4rem;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--gap);
  padding-bottom:3rem; border-bottom:1px solid var(--line-dark);
}
.footer-grid h5{
  font-family:var(--f-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--paper); margin-bottom:1.2rem;
}
.footer-grid ul{display:grid; gap:0.7rem;}
.footer-grid a{font-size:0.9rem; color:var(--steel-light);}
.footer-grid a:hover{color:var(--signal);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding:1.6rem 0; font-family:var(--f-mono); font-size:0.72rem; color:var(--steel-light);
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--signal-deep);
  transition:transform 0.2s ease, background 0.2s ease;
}
.whatsapp-fab:hover{background:var(--signal-deep); transform:translateY(-3px);}
@media (max-width:640px){
  .whatsapp-fab{width:50px; height:50px; right:1rem; bottom:1rem;}
}
.reveal{opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .process{grid-template-columns:repeat(3,1fr);}
  .benefits{grid-template-columns:repeat(2,1fr);}
  .stats-bar{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .testimonials{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .nav-desktop{display:none;}
  .nav-toggle{display:flex;}
  #headerCta{display:none;}
  .hero-body{grid-template-columns:1fr;}
  .hero-side{border-left:none; padding-left:0; border-top:1px solid var(--line-dark); padding-top:1.5rem;}
  .hero-schema{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .services-grid{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr;}
  .benefits{grid-template-columns:1fr;}
  .stats-bar{grid-template-columns:1fr;}
  .stats-bar .stat-cell{border-right:none; border-bottom:1px solid var(--line-dark);}
  .projects-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; align-items:flex-start;}
}