/* =========================================================
   A-uno Ingeniería — sistema de diseño compartido (multi-página)
   Paleta oficial: azul corporativo, gris claro, grafito, gris nube, blanco.
   Tipografía: Montserrat (títulos) + Lato (cuerpo).
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #0A2E52;   /* fondo de franjas institucionales oscuras */
  --blue:      #0D3B66;   /* azul corporativo oficial */
  --accent:    #14508A;   /* tinte claro del azul corporativo (hover) */
  --sky:       #0D3B66;   /* acento Ingeniería sobre fondo claro */
  --white:     #FFFFFF;
  --gray:      #63666A;   /* texto secundario sobre fondo claro */
  --ink:       #262626;   /* texto principal sobre fondo claro */
  --cloud:     #E9E9EB;   /* gris nube oficial */
  --line:      rgba(13,59,102,0.14);
  --gold:      #333333;   /* acento Integridad (grafito oficial) */
  --gold-dim:  #55585C;
  --gold-line: rgba(51,51,51,0.16);
  --on-accent: #FFFFFF;
  --alert:     #C83C32;
}
/* Franjas oscuras institucionales: nav, hero, cta, footer */
nav, .dark-band {
  --sky: #FFFFFF;
  --gold: #C7CACD;
  --gray: #A9ACAF;
  --ink: #FFFFFF;
  --line: rgba(255,255,255,0.14);
  --gold-line: rgba(255,255,255,0.16);
  --on-accent: var(--navy);
  background: var(--navy);
  color: #FFFFFF;
}

html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background: var(--white); color: var(--ink); overflow-x: hidden; }
h1,h2,h3,h4 { font-family: 'Montserrat', sans-serif; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--white); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* NAV */
nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 48px;
  background: rgba(10,46,82,0.95); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line); transition: padding 0.3s;
}
.logo-img { display:block; height:36px; width:auto; }
.nav-logo { text-decoration:none; flex-shrink:0; display:flex; align-items:center; }
.nav-links { display:flex; gap:26px; list-style:none; align-items:center; }
.nav-links a { font-family:'Montserrat',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.active { color:#FFFFFF; }
.nav-cta-meeting { font-family:'Montserrat',sans-serif; font-size:0.76rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:#FFFFFF; color:var(--navy); border-radius:2px; padding:10px 20px; text-decoration:none; transition:background 0.2s; white-space:nowrap; }
.nav-cta-meeting:hover { background: var(--cloud); }
.nav-links-cta { display:none; } /* solo visible dentro del panel mobile, ver responsive */

/* Botón hamburguesa (mobile) */
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; align-items:flex-end;
  gap:5px; width:26px; height:20px; background:none; border:none; padding:0;
  cursor:pointer; flex-shrink:0; z-index:101; position:relative;
}
.nav-toggle span { display:block; width:100%; height:2px; background:#fff; border-radius:1px; transition:transform 0.25s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); width:100%; }

/* Fondo oscuro detrás del panel mobile */
.nav-backdrop {
  display:none; position:fixed; inset:0; background:rgba(10,46,82,0.55);
  z-index:98; opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.nav-backdrop.show { opacity:1; pointer-events:auto; }
body.nav-open { overflow:hidden; }

/* BUTTONS */
.btn { font-family:'Montserrat',sans-serif; font-size:0.85rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; padding:14px 30px; border-radius:2px; transition:background 0.2s,transform 0.2s,border-color 0.2s,color 0.2s; display:inline-block; border:none; cursor:pointer; }
.btn-primary { background: var(--blue); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent); transform:translateY(-2px); }
.btn-light { background: #FFFFFF; color: var(--navy); }
.btn-light:hover { background: var(--cloud); transform:translateY(-2px); }
.btn-outline { border:1px solid var(--line); color: var(--ink); background:transparent; }
.dark-band .btn-outline, nav .btn-outline { color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); transform:translateY(-2px); }
.dark-band .btn-outline:hover, nav .btn-outline:hover { border-color:#FFFFFF; color:#FFFFFF; }

/* SECTION UTILITIES */
.section-wrap { max-width:1180px; margin:0 auto; padding:88px 48px; }
.section-label { font-family:'Montserrat',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:14px; color: var(--blue); }
.dark-band .section-label { color:#FFFFFF; }
.section-title { font-family:'Montserrat',sans-serif; font-size:clamp(1.9rem,3.4vw,2.85rem); font-weight:800; line-height:1.08; }
.section-sub { font-size:1rem; color:var(--gray); line-height:1.7; margin-top:16px; max-width:760px; }

/* HERO (page headers) */
.page-hero {
  position:relative; padding:170px 48px 90px; overflow:hidden;
}
.page-hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.page-hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,46,82,0.97) 0%, rgba(10,46,82,0.90) 45%, rgba(10,46,82,0.62) 100%); }
.page-hero-inner { position:relative; z-index:2; max-width:1180px; margin:0 auto; }
.page-hero-eyebrow { font-family:'Montserrat',sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#B9C7D6; margin-bottom:20px; }
.page-hero-title { font-family:'Montserrat',sans-serif; font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:800; line-height:1.05; max-width:820px; color:#FFFFFF; }
.page-hero-title .accent { color:#7FB2E0; }
.page-hero-desc { font-size:1.05rem; color:#D3DCE6; line-height:1.75; margin-top:24px; max-width:640px; }
.page-hero-ctas { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.breadcrumb { font-size:0.82rem; color:#9CB0C4; margin-bottom:22px; }
.breadcrumb a { text-decoration:none; color:#9CB0C4; }
.breadcrumb a:hover { color:#FFFFFF; }

/* CARDS */
.card-grid { display:grid; gap:2px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.card { background: var(--cloud); border:1px solid var(--line); padding:30px 26px; position:relative; }
.card-num { font-family:'Montserrat',sans-serif; font-size:0.68rem; font-weight:700; color:var(--blue); margin-bottom:14px; letter-spacing:0.1em; }
.card-title { font-family:'Montserrat',sans-serif; font-size:1.08rem; font-weight:700; margin-bottom:10px; line-height:1.25; }
.card-text { font-size:0.9rem; color:var(--gray); line-height:1.65; }

/* PHOTO CARD (con imagen real) */
.photo-card { position:relative; border-radius:3px; overflow:hidden; background:var(--navy); }
.photo-card img { width:100%; height:100%; object-fit:cover; }
.photo-card-caption { position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(0deg, rgba(10,46,82,0.92) 0%, transparent 100%); color:#fff; }
.photo-card-caption .t { font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.95rem; }
.photo-card-caption .s { font-size:0.78rem; color:#D3DCE6; margin-top:2px; }

/* CTA STRIP */
.cta-strip { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background: var(--navy); color:#fff; border-radius:4px; padding:34px 40px; margin-top:56px; }
.cta-strip-text { font-family:'Montserrat',sans-serif; font-size:1.2rem; font-weight:700; color:#fff; }
.cta-strip-sub { font-size:0.88rem; color:#B9C7D6; margin-top:4px; }

/* CLIENTES / COLABORADORES */
.clients-strip { background: var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.clients-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); max-width:1180px; margin:0 auto; }
.client-logo { background:#fff; display:flex; align-items:center; justify-content:center; padding:18px; aspect-ratio:16/9; }
.client-logo img { max-width:100%; max-height:56px; width:auto; height:auto; filter:grayscale(45%); opacity:0.85; transition:filter 0.2s,opacity 0.2s; }
.client-logo:hover img { filter:grayscale(0%); opacity:1; }

/* STATS */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:8px; }
.stat { background:rgba(255,255,255,0.05); border:1px solid var(--line); padding:26px 22px; text-align:left; }
.stat .n { font-family:'Montserrat',sans-serif; font-size:2.2rem; font-weight:800; color:#7FB2E0; }
.stat .l { font-size:0.82rem; color:#B9C7D6; margin-top:6px; line-height:1.4; }

/* Fila de 3 stats del hero (home): mantiene 3 columnas en todos los tamaños */
.stats-row-3 { grid-template-columns:repeat(3,1fr); }

/* PROCESS LIST (pasos numerados) */
.process-list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.process-item { display:grid; grid-template-columns:70px 1fr; gap:22px; padding:22px 26px; border-bottom:1px solid var(--line); align-items:start; }
.process-item:last-child { border-bottom:none; }
.process-item .num { font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:800; color:var(--blue); opacity:0.35; }
.process-item .name { font-family:'Montserrat',sans-serif; font-size:1rem; font-weight:700; margin-bottom:4px; }
.process-item .desc { font-size:0.87rem; color:var(--gray); line-height:1.6; }

/* COMPARISON TABLE (tradicional vs fase cero) */
.compare-row { display:grid; grid-template-columns:140px repeat(5,1fr); border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:2px; }
.compare-row.header-row { background:var(--cloud); font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); }
.compare-row .lbl { padding:16px 18px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.85rem; display:flex; align-items:center; }
.compare-row.tradicional .lbl { color:var(--gold-dim); }
.compare-row.fasecero .lbl { color:var(--blue); }
.compare-row .cell { padding:16px 14px; font-size:0.8rem; border-left:1px solid var(--line); }
.compare-row .cell .t { font-weight:700; font-size:0.82rem; margin-bottom:3px; }
.compare-row .cell .s { color:var(--gray); font-size:0.76rem; line-height:1.4; }
.compare-row.tradicional { background:rgba(51,51,51,0.03); }
.compare-row.fasecero { background:rgba(13,59,102,0.04); }

/* ROI CIRCLE */
.roi-block { display:grid; grid-template-columns:1fr auto 1fr; gap:30px; align-items:center; background:var(--navy); color:#fff; border-radius:4px; padding:40px; }
.roi-circle { width:180px; height:180px; border-radius:50%; border:14px solid rgba(255,255,255,0.12); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.roi-circle::before { content:''; position:absolute; inset:-14px; border-radius:50%; border:14px solid transparent; border-top-color:#7FB2E0; transform:rotate(-8deg); }
.roi-circle .n { font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:800; color:#7FB2E0; }
.roi-circle .l { font-size:0.68rem; color:#B9C7D6; text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; text-align:center; }

/* FOOTER */
footer.site-footer { background: var(--navy); border-top:1px solid var(--line); padding:52px 48px 28px; color:#fff; }
.footer-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:44px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.footer-logo { margin-bottom:10px; }
.footer-tagline { font-size:0.82rem; color:#B9C7D6; line-height:1.6; }
.footer-col-title { font-family:'Montserrat',sans-serif; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:0.83rem; color:#B9C7D6; text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { max-width:1180px; margin:22px auto 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.72rem; color:#7C93A8; letter-spacing:0.04em; }

/* CONTACT FORM (compartido: home + páginas con CTA) */
.contact-block { background: var(--navy); color:#fff; }
.contact-inner { max-width:1180px; margin:0 auto; padding:90px 48px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.contact-form { background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:4px; padding:32px 30px; }
.form-title { font-family:'Montserrat',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-family:'Montserrat',sans-serif; font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#B9C7D6; margin-bottom:7px; }
.form-group input, .form-group select, .form-group textarea { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:2px; padding:11px 14px; font-family:'Lato',sans-serif; font-size:0.88rem; color:#fff; outline:none; resize:none; transition:border-color 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#7FB2E0; }
.form-group select option { background:var(--navy); color:#fff; }
.form-submit { width:100%; font-family:'Montserrat',sans-serif; font-size:0.88rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:#fff; color:var(--navy); border:none; border-radius:2px; padding:14px; cursor:pointer; transition:background 0.2s; margin-top:4px; }
.form-submit:hover { background:var(--cloud); }
.form-submit:disabled { opacity:0.7; cursor:not-allowed; }
.form-note { margin-top:12px; font-size:0.78rem; line-height:1.5; min-height:1em; }
.contact-info { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.meet-btn { margin-top:24px; display:inline-flex; align-items:center; gap:10px; color:#fff; border-color:rgba(255,255,255,0.35); }
.meet-btn:hover { border-color:#fff; color:#fff; }
.contact-item { display:flex; gap:12px; align-items:flex-start; }
.c-label { font-family:'Montserrat',sans-serif; font-size:0.62rem; font-weight:700; color:#7FB2E0; letter-spacing:0.08em; text-transform:uppercase; min-width:60px; padding-top:2px; }
.c-val { font-size:0.9rem; color:#D3DCE6; }
.c-val a { text-decoration:none; }
.c-val a:hover { color:#fff; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* CALCULADORA SEN 277/25 (autoevaluacion.html) */
.sen-calc { background: var(--cloud); border:1px solid var(--line); border-radius:4px; padding:40px; }
.sen-calc-head { margin-bottom:26px; }
.sen-calc-title { font-family:'Montserrat',sans-serif; font-size:1.3rem; font-weight:700; margin-bottom:10px; }
.sen-calc-sub { font-size:0.9rem; color:var(--gray); line-height:1.65; max-width:720px; }
.sen-calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.sen-calc-field label { display:block; font-family:'Montserrat',sans-serif; font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); margin-bottom:8px; }
.sen-calc-field input { width:100%; background:#fff; border:1px solid var(--line); border-radius:2px; padding:12px 14px; font-family:'Lato',sans-serif; font-size:0.95rem; color:var(--ink); outline:none; transition:border-color 0.2s; }
.sen-calc-field input:focus { border-color:var(--blue); }
.sen-calc-cats { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-bottom:28px; }
.sen-calc-cat { display:flex; align-items:flex-start; gap:10px; font-size:0.87rem; color:var(--ink); cursor:pointer; line-height:1.5; }
.sen-calc-cat input { margin-top:4px; flex-shrink:0; }
.sen-calc-actions { display:flex; gap:12px; margin-bottom:6px; }
.sen-calc-result { display:none; margin-top:26px; padding:22px 24px; border-radius:3px; border:1px solid var(--line); }
.sen-calc-result.show { display:block; }
.sen-calc-result.yes { background:rgba(200,60,50,0.07); border-color:rgba(200,60,50,0.3); }
.sen-calc-result.no { background:rgba(20,80,60,0.06); border-color:rgba(20,80,60,0.25); }
.sen-calc-result-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem; margin-bottom:8px; }
.sen-calc-result.yes .sen-calc-result-title { color:#9E2A20; } /* más oscuro que --alert: contraste AA (≥4.5:1) sobre el fondo con tinte rojo */
.sen-calc-result.no .sen-calc-result-title { color:#1A6B4A; }
.sen-calc-result-text { font-size:0.9rem; color:var(--ink); line-height:1.65; }
.sen-calc-result-text a { color:var(--blue); font-weight:700; }

/* MODELO 3D INTERACTIVO (skid, ingenieria-de-detalle.html) */
.skid3d-card { position:relative; cursor:grab; }
.skid3d-card:active { cursor:grabbing; }
.skid3d-fallback { transition:opacity 0.5s; }
.skid3d-card.skid3d-active .skid3d-fallback { opacity:0; }
.skid3d-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 0.6s; touch-action:none; }
.skid3d-canvas.ready { opacity:1; }
.skid3d-hint { pointer-events:none; }

/* RESPONSIVE */
@media(max-width:1024px){
  nav#main-nav { padding:14px 24px; }
  .nav-toggle { display:flex; }
  .nav-cta-meeting { display:none; } /* en mobile, "Agendar una reunión" vive dentro del panel del menú */
  .nav-backdrop { display:block; }
  .nav-links {
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:0; right:0; height:100vh; width:min(320px,84vw);
    background:var(--navy); border-left:1px solid var(--line);
    padding:100px 28px 32px; z-index:99; overflow-y:auto;
    transform:translateX(100%); transition:transform 0.3s ease;
  }
  .nav-links.open { transform:translateX(0); }
  .nav-links li { width:100%; border-bottom:1px solid var(--line); }
  .nav-links li:last-child { border-bottom:none; }
  .nav-links a { display:block; padding:16px 2px; font-size:0.85rem; }
  .nav-links-cta { display:block; padding-top:22px; border-bottom:none !important; }
  .nav-links-cta a { padding:14px 20px; text-align:center; color:var(--navy); }
  .nav-links-cta a:hover { background:var(--cloud); }
  .section-wrap { padding:64px 24px; }
  .page-hero { padding:150px 24px 70px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .stats-row-3 { grid-template-columns:repeat(3,1fr); }
  .clients-grid { grid-template-columns:repeat(4,1fr); }
  .contact-inner { grid-template-columns:1fr; gap:36px; padding:64px 24px; }
  .compare-row { grid-template-columns:110px repeat(5,1fr); font-size:0.8rem; }
  .roi-block { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:640px){
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .stats-row-3 { grid-template-columns:repeat(3,1fr); }
  .stats-row-3 .stat { padding:16px 12px; }
  .stats-row-3 .n { font-size:1.5rem; }
  .stats-row-3 .l { font-size:0.68rem; }
  .clients-grid { grid-template-columns:repeat(2,1fr); }
  .form-row { grid-template-columns:1fr; }
  .compare-row { grid-template-columns:90px repeat(5,minmax(90px,1fr)); overflow-x:auto; }
  .footer-grid { grid-template-columns:1fr; }
  .page-hero-ctas { flex-direction:column; }
  .cta-strip { flex-direction:column; align-items:flex-start; }
  .sen-calc-grid, .sen-calc-cats { grid-template-columns:1fr; }
  .sen-calc { padding:26px 22px; }
}