/* =========================================
   NAVANTIA – Modern Responsive CSS
   Compatible: Chrome, Firefox, Opera, iOS (Safari)
   ========================================= */

/* ---------- CSS Variables (light theme) ---------- */
:root{
  --brand: #0c3c78;
  --brand-2: #134e9b;
  --ink: #111827;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f8fafc;
  --border: #e5e7eb;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
}

/* Dark mode (opcional) */
@media (prefers-color-scheme: dark){
  :root{
    --ink: #e5e7eb;
    --muted: #9ca3af;
    --bg: #0b1220;
    --card: #111827;
    --border: #1f2937;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 12px 28px rgba(0,0,0,.45);
  }
}

/* ---------- Base & Layout ---------- */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3.2vw, 24px);
}

.flex{ display:flex; }
.between{ justify-content: space-between; }
.center{ align-items: center; }

.grid{ display:grid; gap: clamp(16px, 2.5vw, 24px); }
.grid.two{ grid-template-columns: 1fr 1fr; }
.grid.four{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px){
  .grid.two{ grid-template-columns: 1fr; }
  .grid.four{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid.four{ grid-template-columns: 1fr; }
}

/* ---------- Topbar (sticky, translúcido) ---------- */
.topbar{
  position: sticky; top: 0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: dark){
  .topbar{ background: rgba(11,18,32,.7); }
}
.brand{
  color: var(--brand);
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(18px, 2.5vw, 22px);
}
nav a{
  text-decoration: none;
  color: var(--ink);
  margin: 0 10px;
  font-weight: 500;
}
nav a:hover{ color: var(--brand); }
.langs a{
  text-decoration: none;
  color: var(--muted);
  margin-left: 6px;
}
.langs a:hover{ color: var(--brand); }

/* ---------- Hero (con imagen de fondo via --hero) ---------- */
.hero{
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  padding: clamp(56px, 10svh, 110px) 0; /* svh para iOS; fallback natural al no soportarlo */
}
.hero .overlay{
  position:absolute; inset:0;
  background-image: var(--hero);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .12;
  pointer-events: none; /* iOS/Safari: no bloquear clics */
}
.hero h1{
  margin: 0;
  font-size: clamp(24px, 4.5vw, 40px);
  font-weight: 800;
  letter-spacing: .2px;
}
.hero .tagline{
  margin-top: 10px;
  font-size: clamp(14px, 2.6vw, 18px);
  opacity: .95;
}

/* ---------- Secciones ---------- */
section{ padding: clamp(26px, 4.5vw, 48px) 0; }
h2{
  margin: 0 0 8px 0;
  font-size: clamp(20px, 3.6vw, 30px);
}
h3{
  margin: 16px 0 4px 0;
  font-size: clamp(16px, 2.8vw, 20px);
  color: var(--brand);
}

/* ---------- About + Carousel (full width) ---------- */
/* Forzamos about a una sola columna para que el carrusel ocupe ancho completo debajo del texto */
#about.container.grid.two{ grid-template-columns: 1fr; }

.carousel{
  /* Full width + altura estable en todos los navegadores */
  position: relative;
  width: 100%;
  height: 70vh;                      /* fallback */
  max-height: 720px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: var(--shadow-sm);
}
@supports (height: 100svh){
  .carousel{ height: min(70svh, 720px); }   /* iOS Safari moderno */
}
@supports (height: 100dvh){
  .carousel{ height: min(70dvh, 720px); }   /* otros navegadores modernos */
}

/* Slides apiladas con crossfade (sin reflow) */
.carousel .slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.carousel .slide.active{ opacity: 1; }

/* Navegación del carrusel */
.carousel .prev, .carousel .next{
  position: absolute; top: 50%; transform: translateY(-50%);
  border: none; cursor: pointer; z-index: 3;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0,0,0,.45); color:#fff;
  transition: transform .2s ease, background .2s ease;
}
.carousel .prev{ left: 10px; } 
.carousel .next{ right: 10px; }
.carousel .prev:hover, .carousel .next:hover{
  transform: translateY(-52%);
  background: rgba(0,0,0,.6);
}

/* ---------- Gallery (con fallback de aspect-ratio) ---------- */
.gallery h2{ margin-bottom: 12px; }
.gallery .grid.four{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ .gallery .grid.four{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){  .gallery .grid.four{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){  .gallery .grid.four{ grid-template-columns: 1fr; } }

.gallery .thumb{
  display:block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gallery .thumb:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

/* Fallback 4:3 */
.gallery .thumb::before{
  content:""; display:block; padding-top: 75%;
}
.gallery .thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
}
@supports (aspect-ratio: 4 / 3){
  .gallery .thumb::before{ display:none; padding:0; }
  .gallery .thumb{ aspect-ratio: 4 / 3; }
  .gallery .thumb img{ position: static; height:100%; object-fit: cover; }
}

/* ---------- Services ---------- */
.services{ background: var(--card); }
.services .card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(14px, 2.5vw, 18px);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.services .card h4{ margin: 0 0 6px 0; color: var(--brand); }
.services .card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ---------- Stats ---------- */
.stats{
  font-size: 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Stats counter emphasis (subtle) */
.stat span{
  transition: transform .25s ease, color .25s ease;
}
.stat span.counting{
  transform: scale(1.06);
  color: var(--brand-2, #134e9b);
}

/* ===== Lightbox (gallery modal) ===== */
.lb-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: env(safe-area-inset-top) clamp(8px,2vw,16px)
           env(safe-area-inset-bottom) clamp(8px,2vw,16px);
}
.lb-backdrop.open{ display: flex; }

.lb-dialog{
  position: relative;
  max-width: 96vw;
  max-height: 90vh;
  background: #0b1220;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.4);
  overflow: hidden;
}
.lb-figure{
  margin: 0;
  display:flex; align-items:center; justify-content:center;
  width: min(1200px, 96vw);
  height: min(90vh, 820px);
  background: #0b1220;
}
.lb-figure img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
}

/* Controles */
.lb-close, .lb-prev, .lb-next{
  position:absolute; border:none; cursor:pointer;
  background: rgba(0,0,0,.45); color:#fff;
  padding: 10px 12px; border-radius: 10px; z-index: 2;
  transition: transform .2s ease, background .2s ease;
}
.lb-close{ top:10px; right:10px; }
.lb-prev{ top:50%; left:10px; transform: translateY(-50%); }
.lb-next{ top:50%; right:10px; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover, .lb-close:hover{ background: rgba(0,0,0,.65); }

@media (max-width: 700px){
  .lb-figure{ width: 96vw; height: 80vh; }
}