/* ==========================================================================
   R.R. CONSTRUCIVILES SAS — HOJA DE ESTILOS PRINCIPAL
   Sistema visual: navy / azul corporativo / blancos / grises.
   Sin frameworks. CSS puro con variables, Grid y Flexbox.
   ========================================================================== */

/* ==========================================================================
   RESET & VARIABLES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; }

:root{
  /* Color */
  --navy-deep:#0B1622;
  --navy:#1F314D;
  --blue:#004194;
  --blue-light:#3D6FA8;
  --white:#FFFFFF;
  --grey-900:#20242A;
  --grey-600:#5B6167;
  --grey-400:#8A9099;
  --grey-200:#E3E5E8;
  --grey-100:#F5F6F7;
  --line: var(--grey-200);

  /* Type */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --nav-h: 84px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
}

body{
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--blue); color: #fff; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}
.eyebrow{
  display:flex; align-items:center; gap:0.65rem;
  font-family: var(--font-body); font-weight:600; font-size:0.8rem;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--blue);
}
.eyebrow::before{ content:""; width:28px; height:2px; background: var(--blue); display:inline-block; }
.eyebrow.on-dark{ color:#BBD3F0; }
.eyebrow.on-dark::before{ background:#BBD3F0; }
.eyebrow.grey{ color: var(--grey-400); }
.eyebrow.grey::before{ background: var(--grey-400); }

.h-display{ font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.02; }
.h-xl{ font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; }
.h-lg{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; }
.h-md{ font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; }

.lede{ font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--grey-600); line-height:1.65; }
.body-copy{ color: var(--grey-600); font-size: 1rem; line-height: 1.75; max-width: 60ch; }

.text-link{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:600; font-size:0.95rem; color: var(--navy);
  border-bottom: 1px solid var(--grey-400); padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.text-link:hover{ color: var(--blue); border-color: var(--blue); gap:0.75rem; }
.text-link.on-dark{ color:#fff; border-color: rgba(255,255,255,0.4); }
.text-link.on-dark:hover{ color:#BBD3F0; border-color:#BBD3F0; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  font-family: var(--font-body); font-weight:600; font-size:0.92rem; letter-spacing:0.02em;
  padding: 1rem 1.9rem; border:1.5px solid var(--navy); color: var(--navy);
  white-space:nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn.btn--primary{ background: var(--blue); border-color: var(--blue); color:#fff; }
.btn.btn--primary:hover{ background: var(--navy); border-color: var(--navy); }
.btn.btn--ghost-light{ border-color: rgba(255,255,255,0.55); color:#fff; }
.btn.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.btn.btn--dark{ background: var(--navy); border-color: var(--navy); color:#fff; }
.btn.btn--dark:hover{ background: var(--blue); border-color: var(--blue); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.section{ padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--tight{ padding: clamp(3rem, 6vw, 5rem) 0; }
.section--grey{ background: var(--grey-100); }
.section--navy{ background: var(--navy-deep); color: #fff; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; flex-wrap:wrap; margin-bottom: clamp(2.5rem,5vw,4rem); }
.section-head .h-lg{ margin-top:0.7rem; max-width: 30ch; }
.section-head p{ margin-top:0.9rem; max-width:36rem; }
.divider{ height:1px; background: var(--line); border:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
[id]{ scroll-margin-top: var(--nav-h); }

.ph-caption{
  position:absolute; left:0.9rem; bottom:0.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background: rgba(11,22,34,0.55); backdrop-filter: blur(6px);
  padding: 0.4rem 0.7rem;
}
.ph-caption::before{ content:""; width:5px; height:5px; background: var(--blue-light); border-radius:50%; flex:none; }
.ph-caption.on-light{ color: var(--navy); background: rgba(255,255,255,0.82); }

/* Nota discreta para marcar texto/cifras de ejemplo (no imágenes) */
.ph-note{
  font-size:0.74rem; color: var(--grey-400); font-style:italic;
}
.ph-note.on-dark{ color: rgba(255,255,255,0.45); }

/* reveal-on-scroll (JS toggles .is-visible) */
/* Por defecto [data-reveal] es completamente visible: si por cualquier
   razón script.js no se ejecuta, el contenido nunca queda oculto.
   Solo cuando el JS confirma que puede animar añade ".reveal-armed",
   que es lo único que oculta el elemento antes de animarlo a la vista. */
[data-reveal].reveal-armed{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].reveal-armed.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal].reveal-armed{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.navbar.is-scrolled, .navbar.is-solid{
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  height: 72px;
}
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:46px; width:auto; transition: height .35s var(--ease); }
.navbar.is-scrolled .nav-logo img, .navbar.is-solid .nav-logo img{ height:38px; }
.navbar:not(.is-scrolled):not(.is-solid) .nav-links a{ color:#fff; }
.navbar:not(.is-scrolled):not(.is-solid) .nav-cta.btn{ border-color: rgba(255,255,255,0.6); color:#fff; }

.nav-links{ display:flex; align-items:center; gap:2.4rem; }
.nav-links a{
  font-size:0.86rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color: var(--navy); padding-bottom:4px; border-bottom:1.5px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active{ border-color: var(--blue); }

/* Dropdown / mega-menu al pasar el mouse por Nosotros, Proyectos, Servicios */
.nav-item{ position:relative; display:flex; align-items:center; }
.dropdown-panel{
  position:absolute; top:calc(100% + 18px); left:50%;
  transform: translateX(-50%) translateY(-6px);
  background:#fff; border:1px solid var(--line); box-shadow: 0 24px 48px rgba(11,22,34,0.16);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
  z-index:150;
}
.nav-item:hover .dropdown-panel, .nav-item:focus-within .dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* puente invisible para que el mouse no "pierda" el panel al bajar */
.nav-item::after{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; }

.dropdown-panel--simple{ display:flex; flex-direction:column; padding:0.7rem 0; min-width:240px; }
.nav-links .dropdown-panel--simple a{
  padding:0.65rem 1.5rem; font-size:0.85rem; font-weight:600; letter-spacing:0.01em;
  text-transform:none; color: var(--navy) !important; border-bottom:none; white-space:nowrap;
}
.nav-links .dropdown-panel--simple a:hover{ background: var(--grey-100); color: var(--blue) !important; }

/* Dropdown de "Proyectos": tile por categoría (foto simple, sin scrim ni
   contador — mismo estilo limpio de referencia bechtel.com que usan las
   tarjetas del portafolio). Es un acceso rápido por categoría; el
   filtrado real (categoría + ciudad combinables) vive en la barra de
   filtros de proyectos.html — ver .filter-bar más abajo. */
.dropdown-panel--mega{ padding:1.3rem; }
.dropdown-panel--mega .mega-tiles{ display:grid; grid-template-columns: repeat(5, 128px); gap:1.1rem; }
.nav-links .mega-tile{
  display:block; border-bottom:none; padding:0; text-transform:none; letter-spacing:0; color: var(--navy) !important;
}
.mega-tile .thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden; background: var(--grey-100);
  outline:1.5px solid var(--line); outline-offset:-1.5px; transition: outline-color .2s var(--ease);
}
.mega-tile .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s var(--ease); }
.mega-tile:hover .thumb{ outline-color: var(--blue); }
.mega-tile:hover .thumb img{ transform: scale(1.08); }
.mega-tile .label{ display:block; margin-top:0.6rem; font-size:0.78rem; font-weight:700; color: var(--navy) !important; }
.nav-links .mega-tile:hover .label{ color: var(--blue) !important; }

.nav-right{ display:flex; align-items:center; gap:2.2rem; }
.nav-cta.btn{ padding:0.7rem 1.4rem; font-size:0.82rem; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; z-index:110; }
.nav-toggle span{ height:2px; width:100%; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.navbar:not(.is-scrolled):not(.is-solid) .nav-toggle{ color:#fff; }
.navbar.is-scrolled .nav-toggle, .navbar.is-solid .nav-toggle{ color: var(--navy); }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0; top:0; z-index:105;
    background: var(--navy-deep); color:#fff;
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.6rem; padding: 0 2rem;
    transform: translateY(-100%); opacity:0; visibility:hidden;
    transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s linear .4s;
  }
  .nav-links a{ color:#fff; font-size:1.6rem; }
  body.nav-open .nav-links{ transform:none; opacity:1; visibility:visible; transition: transform .4s var(--ease), opacity .3s var(--ease); }
  .nav-toggle{ display:flex; }
  body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  body.nav-open .nav-toggle{ color:#fff; }
  .nav-cta.btn.desktop-only{ display:none; }

  /* En móvil los submenús van siempre visibles, en línea, bajo cada link
     (no hay hover en touch) */
  .nav-links{ overflow-y:auto; justify-content:flex-start; padding-top:6rem; padding-bottom:3rem; align-items:stretch; }
  .nav-item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav-item::after{ display:none; }
  .dropdown-panel{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; background:transparent; transition:none;
    width:100%; margin-top:0.6rem;
  }
  .dropdown-panel--simple{ padding:0; gap:0.2rem; }
  .nav-links .dropdown-panel--simple a{
    padding:0.45rem 0; font-size:1rem; font-weight:500; color: rgba(255,255,255,0.7) !important;
  }
  .nav-links .dropdown-panel--simple a:hover{ background:transparent; color:#fff !important; }
  .dropdown-panel--mega{ padding:0; }
  .dropdown-panel--mega .mega-tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:0.8rem; max-width:340px; }
  .nav-links .mega-tile{ color: rgba(255,255,255,0.85) !important; }
  .mega-tile .label{ font-size:0.72rem; color: rgba(255,255,255,0.85) !important; }
}
@media (min-width: 901px){ .nav-links a.mobile-only-cta{ display:none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; overflow:hidden; background: var(--navy-deep);
}
.hero-media{ position:absolute; inset:0; z-index:0; background: var(--navy-deep); }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-slides{ position:absolute; inset:0; z-index:0; background: var(--navy-deep); }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(11,22,34,0.35) 0%, rgba(11,22,34,0.15) 35%, rgba(11,22,34,0.88) 100%);
}
.hero-project-tag{
  position:absolute; z-index:2; top: calc(var(--nav-h) + 1.2rem); right: var(--gutter);
  display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem;
  background: rgba(11,22,34,0.5); backdrop-filter: blur(6px);
  padding:0.7rem 1rem; border-radius:2px; text-align:right; max-width:min(60vw, 320px);
}
.hero-project-tag .label{
  font-size:0.64rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color: rgba(255,255,255,0.6);
}
.hero-project-tag .name{
  font-family: var(--font-display); font-weight:700; font-size:0.95rem; color:#fff;
  text-decoration:none; line-height:1.25;
}
.hero-project-tag .name:hover{ color: var(--blue-light); }
.hero-dots{
  position:absolute; z-index:2; bottom:2rem; left: var(--gutter);
  display:flex; gap:0.5rem;
}
.hero-dots button{
  width:22px; height:3px; border:none; padding:0; background: rgba(255,255,255,0.35);
  cursor:pointer; transition: background 0.3s ease;
}
.hero-dots button.is-active{ background:#fff; }
.hero-ph-note{ top:calc(var(--nav-h) + 1.2rem); bottom:auto; left: var(--gutter); }
.hero-content{ position:relative; z-index:2; padding: calc(var(--nav-h) + 2rem) 0 clamp(3rem,7vw,5rem); }
.hero-content .eyebrow{ margin-bottom:1.4rem; }
.hero h1{ font-size: clamp(2.6rem, 7vw, 5.6rem); line-height:1.0; max-width:16ch; color:#fff; }
.hero-sub{ margin-top:1.8rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero-sub .brandline{ font-family: var(--font-display); font-weight:700; letter-spacing:0.06em; font-size:0.95rem; }
.hero-actions{ margin-top:2.6rem; display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; }
.scroll-cue{
  position:absolute; bottom:2rem; right: var(--gutter); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.75);
}
.scroll-cue .line{ width:1px; height:38px; background: rgba(255,255,255,0.5); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff;
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }

@media (max-width: 680px){
  .hero-ph-note{
    left:1rem; right:1rem; top:calc(var(--nav-h) + 0.8rem); max-width:none;
  }
  .hero-project-tag{
    left:1rem; right:1rem; top:calc(var(--nav-h) + 3.4rem); max-width:none;
    align-items:flex-start; text-align:left;
  }
  .hero-dots{ bottom:1.1rem; }
  .scroll-cue{ display:none; }
}

/* ==========================================================================
   INTRODUCTION / STATEMENT
   ========================================================================== */
.intro{ padding: clamp(4.5rem,9vw,8rem) 0; }
.intro-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:flex-end; }
.intro-grid h2{ font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height:1.08; }
.intro-side p{ margin-bottom:1.6rem; }
@media (max-width: 860px){ .intro-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROJECTS (editorial composition)
   ========================================================================== */
.proj-editorial{ display:grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: 12vw; gap: 1.4rem; }
.proj-tile{
  position:relative; overflow:hidden; background: var(--grey-100);
  grid-column: span 3; grid-row: span 3;
}
.proj-tile.tile--wide{ grid-column: span 4; }
.proj-tile.tile--narrow{ grid-column: span 2; }
.proj-tile.tile--tall{ grid-row: span 4; }
.proj-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.proj-tile:hover img{ transform: scale(1.06); }
.proj-tile .tile-scrim{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,22,34,0) 45%, rgba(11,22,34,0.88) 100%);
  opacity:0.75; transition: opacity .4s var(--ease);
}
.proj-tile:hover .tile-scrim{ opacity:0.92; }
.proj-tile .tile-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.4rem 1.5rem;
  color:#fff; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
}
.proj-tile .tile-info .meta{ font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:#BBD3F0; margin-bottom:0.4rem; }
.proj-tile .tile-info h3{ font-size: clamp(1.1rem,1.6vw,1.5rem); color:#fff; }
.proj-tile .tile-arrow{
  flex:none; width:38px; height:38px; border:1px solid rgba(255,255,255,0.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition: background .3s var(--ease), transform .3s var(--ease);
}
.proj-tile:hover .tile-arrow{ background:#fff; color: var(--navy); transform: rotate(45deg); }

@media (max-width: 980px){
  .proj-editorial{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 46vw; }
  .proj-tile, .proj-tile.tile--wide, .proj-tile.tile--narrow{ grid-column: span 2; grid-row: span 1; }
  .proj-tile.tile--tall{ grid-row: span 1; }
}

/* Projects listing page — barra de filtros real: Categoría + Ciudad se
   combinan entre sí (AND), más el orden por año. El selector visual con
   fotos (por categoría) vive en el dropdown del nav — ver
   .dropdown-panel--mega más abajo — como acceso rápido; esta barra es la
   que de verdad filtra en la página, y admite cualquier combinación. */
.filter-section{ margin-bottom: clamp(2.6rem,5vw,3.6rem); padding-bottom: 1.6rem; border-bottom:1px solid var(--line); }
.filter-bar{ display:flex; flex-wrap:wrap; gap:1.6rem 2rem; }
.filter-group{ display:flex; flex-direction:column; gap:0.5rem; }
.filter-group span{
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--grey-400);
}
.filter-group select{
  font-family: var(--font-body); font-size:0.92rem; font-weight:600; color: var(--navy);
  background: var(--grey-100) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%235B6167" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 0.9rem center;
  border:1px solid var(--line); border-radius:8px; appearance:none;
  padding:0.7rem 2.2rem 0.7rem 0.9rem; min-width:200px; cursor:pointer; transition: border-color .2s;
}
.filter-group select:hover, .filter-group select:focus{ border-color: var(--blue); outline:none; }
.filter-group--sort{ margin-left:auto; }
@media (max-width:760px){
  .filter-group{ flex:1 1 45%; }
  .filter-group select{ min-width:0; width:100%; }
  .filter-group--sort{ margin-left:0; flex-basis:100%; }
}

.filter-summary{
  margin-top:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:0.85rem; color: var(--grey-400);
}
.filter-clear{
  font-size:0.82rem; font-weight:600; color: var(--blue);
  border-bottom:1px solid transparent; transition: border-color .2s var(--ease);
}
.filter-clear:hover{ border-color: var(--blue); }

.proj-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2.2rem 1.6rem; }
@media (max-width:980px){ .proj-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px){ .proj-grid{ grid-template-columns: 1fr; } }
.proj-card{ display:block; }
.proj-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background: var(--grey-100); }
.proj-card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.proj-card:hover .thumb img{ transform: scale(1.05); }
.proj-card .thumb .tile-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(11,22,34,0.8) 100%); opacity:0.55; transition: opacity .3s; }
.proj-card:hover .thumb .tile-scrim{ opacity:0.8; }
.proj-card .card-body{ padding-top:1rem; }
.proj-card .meta{ font-size:0.74rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--grey-400); }
.proj-card h3{ margin-top:0.4rem; font-size:1.2rem; }
.proj-card .view{ margin-top:0.6rem; display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:600; color: var(--blue); }
.empty-state{ padding: 4rem 0; text-align:center; color: var(--grey-400); font-size:0.95rem; display:none; }
.empty-state.is-visible{ display:block; }

/* ==========================================================================
   CAPACIDADES / SERVICIOS (numbered, no icons)
   ========================================================================== */
.capabilities-list{ border-top:1px solid var(--line); }
.capability-row{
  display:grid; grid-template-columns: 5rem 1.4fr 1fr; gap:2rem; align-items:baseline;
  padding: clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line);
  transition: background .3s var(--ease);
}
.capability-row:hover{ background: var(--grey-100); }
.capability-row .num{ font-family: var(--font-display); font-weight:700; color: var(--grey-400); font-size:1.1rem; }
.capability-row h3{ font-size: clamp(1.3rem,2.2vw,1.9rem); }
.capability-row p{ color: var(--grey-600); }
@media (max-width:760px){ .capability-row{ grid-template-columns: 3rem 1fr; } .capability-row p{ grid-column: 2; } }

/* Services page: capability detail cards (no icon circles — just line + text) */
.service-detail{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding: clamp(2.5rem,5vw,4rem) 0; border-bottom:1px solid var(--line); align-items:center; }
.service-detail:last-child{ border-bottom:none; }
.service-detail.reverse{ direction: rtl; }
.service-detail.reverse > *{ direction: ltr; }
.service-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background: var(--grey-100); }
.service-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.service-text .num{ font-family: var(--font-display); font-weight:700; color: var(--blue); }
.service-text h3{ margin-top:0.6rem; font-size: clamp(1.5rem,2.6vw,2.1rem); }
.service-text p{ margin-top:1rem; }
.service-text ul{ margin-top:1.4rem; display:flex; flex-direction:column; gap:0.6rem; }
.service-text ul li{ padding-left:1.3rem; position:relative; color: var(--grey-600); font-size:0.94rem; }
.service-text ul li::before{ content:""; position:absolute; left:0; top:0.55em; width:8px; height:1.5px; background: var(--blue); }
@media (max-width:860px){ .service-detail, .service-detail.reverse{ grid-template-columns:1fr; direction:ltr; } }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: 2rem 2rem 2rem 0; border-left:1px solid rgba(255,255,255,0.18); padding-left:2rem; }
.stat .num{ font-family: var(--font-display); font-weight:800; font-size: clamp(2.6rem,5vw,4rem); font-variant-numeric: tabular-nums; }
.stat .num .plus{ color: var(--blue-light); }
.stat .lbl{ margin-top:0.6rem; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.65); }
@media (max-width:860px){ .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap:2.5rem; } }

/* Variante para usar el bloque de cifras sobre fondo claro (p. ej. la
   sección Equipo de nosotros.html, que no usa section--navy) */
.equipo-stats .stat{ border-left-color: var(--line); }
.equipo-stats .stat .lbl{ color: var(--grey-400); }

/* ==========================================================================
   ABOUT (home teaser + full nosotros page)
   ========================================================================== */
.about-teaser{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.about-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--grey-100); }
.about-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .about-teaser{ grid-template-columns:1fr; } .about-media{ order:-1; } }

.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ border-top:2px solid var(--navy); padding-top:1.3rem; }
.pillar .num{ font-family:var(--font-display); font-weight:700; color: var(--grey-400); font-size:0.9rem; }
.pillar h3{ margin-top:0.7rem; font-size:1.25rem; }
.pillar p{ margin-top:0.7rem; color: var(--grey-600); font-size:0.95rem; }

.values-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.value-cell{ background:#fff; padding: clamp(1.6rem,3vw,2.4rem); }
.value-cell h4{ font-size:1.1rem; margin-bottom:0.6rem; }
.value-cell p{ color: var(--grey-600); font-size:0.94rem; }
@media (max-width:700px){ .values-grid{ grid-template-columns:1fr; } }

.timeline{ border-left:1px solid var(--line); }
.timeline-item{ position:relative; padding: 0 0 2.6rem 2.2rem; }
.timeline-item::before{ content:""; position:absolute; left:-5.5px; top:4px; width:10px; height:10px; background: var(--blue); border-radius:50%; }
.timeline-item .year{ font-family: var(--font-display); font-weight:700; color: var(--blue); }
.timeline-item h4{ margin-top:0.3rem; font-size:1.1rem; }
.timeline-item p{ margin-top:0.4rem; color: var(--grey-600); font-size:0.94rem; }

.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.8rem; }
@media (max-width:860px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }
.team-card .photo{ aspect-ratio:3/4; background: var(--grey-100); position:relative; overflow:hidden; }
.team-card .photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.team-card .name{ margin-top:0.9rem; font-weight:700; font-family:var(--font-display); }
.team-card .role{ font-size:0.85rem; color: var(--grey-400); text-transform:uppercase; letter-spacing:0.04em; margin-top:0.2rem; }

/* ==========================================================================
   CTA (full-bleed closing band)
   ========================================================================== */
.cta-block{
  position:relative; overflow:hidden; background: var(--navy-deep); color:#fff;
  padding: clamp(4.5rem,10vw,8rem) 0;
}
.cta-block .grid-overlay{
  position:absolute; inset:0; opacity:0.4;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.cta-block .container{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.cta-block h2{ color:#fff; font-size: clamp(2rem, 4.4vw, 3.4rem); max-width:16ch; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem,5vw,5rem); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info dl{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.4rem; }
.contact-info dt{ font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--grey-400); }
.contact-info dd{ margin:0.3rem 0 0; font-size:1.05rem; font-weight:600; }
.contact-info .socials{ margin-top:2.2rem; display:flex; gap:1.2rem; }

.field{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.5rem; }
.field label{ font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color: var(--grey-600); }
.field input, .field select, .field textarea{
  border:none; border-bottom:1.5px solid var(--grey-200); padding:0.8rem 0.1rem; font-size:1rem; color:var(--navy);
  background:transparent; transition: border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--blue); }
.field textarea{ resize:vertical; min-height:110px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ margin-top:1rem; font-size:0.85rem; color: var(--grey-400); }
.form-success{
  display:none; padding:1.4rem; border:1.5px solid var(--blue); color: var(--navy); background: var(--grey-100);
  font-weight:600;
}
.form-success.is-visible{ display:block; }
form.is-hidden{ display:none; }

/* ==========================================================================
   PROJECT DETAIL TEMPLATE
   ========================================================================== */
.proj-hero{ position:relative; height:70vh; min-height:480px; color:#fff; display:flex; align-items:flex-end; overflow:hidden; }
.proj-hero-media{ position:absolute; inset:0; }
.proj-hero-media img{ width:100%; height:100%; object-fit:cover; }
.proj-hero .hero-scrim{ background: linear-gradient(180deg, rgba(11,22,34,0.25) 0%, rgba(11,22,34,0.9) 100%); }
.proj-hero-content{ position:relative; z-index:2; padding: calc(var(--nav-h) + 1rem) 0 3rem; width:100%; }
.breadcrumb{ font-size:0.8rem; color: rgba(255,255,255,0.7); margin-bottom:1.2rem; }
.breadcrumb a{ color:#fff; border-bottom:1px solid rgba(255,255,255,0.5); }

.proj-meta-bar{ background: var(--grey-100); border-bottom:1px solid var(--line); }
.proj-meta-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:1.6rem; padding: 2.2rem 0; }
@media (max-width:900px){ .proj-meta-grid{ grid-template-columns: repeat(2,1fr); } }
.proj-meta-grid dt{ font-size:0.72rem; letter-spacing:0.07em; text-transform:uppercase; color: var(--grey-400); }
.proj-meta-grid dd{ margin:0.35rem 0 0; font-weight:700; }

.proj-body{ display:grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2.5rem,5vw,5rem); }
@media (max-width:900px){ .proj-body{ grid-template-columns:1fr; } }
.proj-scope ul{ margin-top:1rem; display:flex; flex-direction:column; gap:0.6rem; }
.proj-scope ul li{ padding-left:1.2rem; position:relative; font-size:0.94rem; color: var(--grey-600); }
.proj-scope ul li::before{ content:""; position:absolute; left:0; top:0.55em; width:8px; height:1.5px; background: var(--blue); }

.proj-gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; margin-top: clamp(2.5rem,5vw,4rem); }
.proj-gallery .g-item{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--grey-100); }
.proj-gallery .g-item.wide{ grid-column: span 2; aspect-ratio:16/9; }
.proj-gallery img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:700px){ .proj-gallery{ grid-template-columns:1fr; } .proj-gallery .g-item.wide{ grid-column: span 1; } }

.proj-nav{ display:flex; justify-content:space-between; padding: 2.4rem 0; border-top:1px solid var(--line); }
.proj-nav a{ font-weight:600; font-size:0.95rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,0.72); }
.footer-top{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.6rem; padding: clamp(3rem,6vw,5rem) 0 3rem; }
@media (max-width:820px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand img{ height:36px; margin-bottom:1.2rem; }
.footer-brand p{ max-width:26rem; font-size:0.92rem; }
.footer-col h5{ font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a{ font-size:0.92rem; transition: color .2s var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.14); padding:1.4rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.8rem;
}
.footer-bottom a:hover{ color:#fff; }

/* ==========================================================================
   PAGE HEADER (interior pages: nosotros / proyectos / servicios / contacto)
   ========================================================================== */
.page-header{ position:relative; padding: calc(var(--nav-h) + 4rem) 0 4rem; background: var(--navy-deep); color:#fff; overflow:hidden; }
.page-header .grid-overlay{
  position:absolute; inset:0; opacity:0.35;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.page-header .container{ position:relative; z-index:1; }
.page-header h1{ color:#fff; margin-top:0.8rem; }
.page-header p{ margin-top:1.2rem; max-width:44rem; color: rgba(255,255,255,0.72); }