/* ==================================================================
   Garrison Ingeniería y Construcción — Capa de refinamiento visual
   Se carga DESPUÉS del bundle para ganar por orden de cascada.
   No reescribe el sitio: eleva tipografía, superficies e interacción
   sin tocar el JS compilado. Reversible (quitar el <link> en HTML).
   Acentos de marca reales del build: navy #0F1C35 · dorado #C9A227
   ================================================================== */

/* --- 1. TIPOGRAFÍA PREMIUM ----------------------------------------
   Montserrat + Poppins (dupla de plantilla) -> combinación
   técnica-editorial: Space Grotesk (títulos) + Manrope (texto) +
   JetBrains Mono (cifras). */
:root{
  --app-font-sans:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --app-font-display: "Space Grotesk", "Manrope", sans-serif;
  --app-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
}
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
h4, h5     { letter-spacing: -0.01em; text-wrap: balance; }
p          { text-wrap: pretty; }
/* Cifras técnicas alineadas (stats 10+ / 50+ / 100%). */
h1, h2, h3, h4,
[class*="font-display"], [class*="font-mono"] { font-variant-numeric: tabular-nums; }

/* --- 2. DETALLES GLOBALES DE MARCA -------------------------------- */
html { scroll-behavior: smooth; }

/* Selección y foco accesible en dorado de marca */
::selection { background: #C9A227; color: #0F1C35; }
:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }

/* Scrollbar fina tintada */
* { scrollbar-width: thin; scrollbar-color: #C9A227 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,.6); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #C9A227; background-clip: content-box; }

/* Grano/textura sutil: rompe la planitud digital sin ensuciar */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 3. HERO: pantalla completa, imagen fija y protagonista -------
   Hero a 100vh (acapara la pantalla al cargar); la foto de fondo se
   FIJA (efecto parallax) y se ve más; overlay más ligero. El contenido
   del hero (z-10) sube con el scroll y descubre el resto. */
section[class*="min-h-[90vh]"] { min-height: 100vh !important; }

/* La imagen del hero pasa a ser fondo FIJO del wrapper (parallax) */
section[class*="min-h-[90vh]"] > div[class*="z-0"]{
  background: url("/industria-4.jpg") center center / cover no-repeat fixed !important;
}
section[class*="min-h-[90vh]"] img[alt="Hero background"]{ display: none !important; }

/* Overlay más ligero: la foto se ve llamativa, el texto sigue legible */
section[class*="min-h-[90vh]"] [class*="bg-[#0F1C35]/88"]{
  background:
    linear-gradient(100deg, rgba(15,28,53,.80) 0%, rgba(15,28,53,.30) 50%, rgba(15,28,53,.55) 100%) !important;
  box-shadow: inset 0 -120px 110px -60px rgba(7,14,30,.85) !important;
}

/* --- 4. TARJETAS DE SERVICIO: vida e intención -------------------
   Quita la sensación de "card con borde" plana: elevación al hover,
   sombra tintada navy y un acento dorado que se dibuja arriba. */
[class*="hover:border-[#C9A227]"]{
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease,
              border-color .25s ease, background-color .25s ease;
}
[class*="hover:border-[#C9A227]"]:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -20px rgba(15,28,53,.45);
  background-color: rgba(201,162,39,.035);
}
[class*="hover:border-[#C9A227]"]::before{
  content:""; position:absolute; top:-1px; left:-1px;
  height:3px; width:0; background:#C9A227;
  transition: width .3s ease; pointer-events:none;
}
[class*="hover:border-[#C9A227]"]:hover::before{ width:52px; }

/* --- 5. MICROINTERACCIÓN EN BOTONES ------------------------------ */
button{ transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
button:active{ transform: translateY(1px) scale(.99); }

/* --- 6. ACENTOS DORADOS EN LA NAVBAR ------------------------------
   Línea dorada bajo la barra, "¿Quiénes somos?" destacado, y
   "Contacto" convertido en botón CTA (como "Cotizar Proyecto"). */

/* Navbar: en el TOP sólo se ve el logo (sin barra); al hacer SCROLL
   aparece la barra navy + línea dorada + enlaces. El atributo
   data-scrolled lo pone site-enhancements.js según el scroll. */
header[class*="fixed"]{
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
header[class*="fixed"] nav, header[class*="fixed"] button{
  transition: opacity .3s ease !important;
}
/* TOP: transparente, sin línea y con los enlaces ocultos -> sólo el logo */
header[class*="fixed"]:not([data-scrolled]){
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
header[class*="fixed"]:not([data-scrolled]) nav,
header[class*="fixed"]:not([data-scrolled]) button{
  opacity: 0 !important;
  pointer-events: none !important;
}
/* SCROLLED: aparece la barra completa */
header[class*="fixed"][data-scrolled]{
  background: #0F1C35 !important;
  border-bottom: 2px solid #C9A227 !important;
}

/* "¿Quiénes somos?" siempre en negrita y dorado */
header a[href="/quienes-somos"]{
  color: #C9A227 !important;
  font-weight: 700 !important;
}

/* "Contacto" como botón grande dorado (igual que el CTA del hero) */
header a[href="/contacto"]{
  background: #C9A227 !important;
  color: #0F1C35 !important;
  font-weight: 700 !important;
  padding: 0.55rem 1.5rem !important;
  border-radius: 0.4rem !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
header a[href="/contacto"]:hover{
  background: #D9B53D !important;        /* dorado un punto más claro */
  color: #0F1C35 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(201,162,39,.55);
}

/* --- 7. FORMULARIO: marcar "Empresa" como opcional ----------------
   El campo Empresa/Organización es opcional pero su label no lo decía
   (sí lo hace Teléfono). Se añade por CSS, sin tocar el bundle. */
label[for="company"]::after{
  content: " (Opcional)";
}

/* --- 8. NAVBAR: ícono grande + "GARRISON" (en vez del logo completo)
   El link del logo (a[href="/"] con gap-3; NO el link "Inicio") muestra
   sólo el símbolo (favicon.png, transparente) en grande + el wordmark. */
header a[href="/"][class*="gap-3"] img { display: none !important; }
header a[href="/"][class*="gap-3"]::before{
  content: ""; width: 54px; height: 54px; flex-shrink: 0;
  background: url("/favicon.png") center / contain no-repeat;
}
header a[href="/"][class*="gap-3"]::after{
  content: "Garrison";
  font-family: "Baloo 2", "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 28px; letter-spacing: 0; line-height: 1;
  white-space: nowrap;
  /* mismo degradado azul del logo */
  background: linear-gradient(135deg, #5A8DF2 0%, #3A5BD0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- 9. BOTÓN FLOTANTE DE WHATSAPP (ligeramente shiny) ------------ */
.gar-wa-btn{
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 24px -6px rgba(37,211,102,.6);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: gar-wa-pulse 2.8s ease-out infinite;
}
.gar-wa-btn:hover{ transform: scale(1.08); box-shadow: 0 14px 30px -6px rgba(37,211,102,.75); }
.gar-wa-btn svg{ width: 30px; height: 30px; position: relative; z-index: 1; }
/* destello (shine) que cruza el botón */
.gar-wa-btn::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  animation: gar-wa-shine 3.4s ease-in-out infinite;
}
@keyframes gar-wa-shine{ 0%,62%{ left:-130% } 82%,100%{ left:140% } }
@keyframes gar-wa-pulse{
  0%  { box-shadow: 0 10px 24px -6px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow: 0 10px 24px -6px rgba(37,211,102,.6), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 10px 24px -6px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 640px){ .gar-wa-btn{ width: 52px; height: 52px; right: 16px; bottom: 16px; } }

/* --- 10. OBRAS EJECUTADAS: de grid bento (fotos grandes) a lista
   compacta con la foto pequeña y el título al lado, siempre visible. */
[class*="auto-rows-["]{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
[class*="auto-rows-["] > div{                 /* cada obra */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  height: auto !important;
  background: rgba(15,28,53,.035) !important;
  border: 1px solid rgba(15,28,53,.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding: 8px !important;
  transition: border-color .2s ease, background-color .2s ease !important;
}
[class*="auto-rows-["] > div:hover{
  border-color: rgba(201,162,39,.5) !important;
  background: rgba(201,162,39,.045) !important;
}
[class*="auto-rows-["] > div > img{          /* foto pequeña */
  width: 170px !important;
  height: 115px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
}
[class*="auto-rows-["] > div > div[class*="inset-0"]{ display: none !important; } /* quita overlay */
[class*="auto-rows-["] > div > div[class*="translate-y-full"]{                    /* título al lado */
  position: static !important;
  transform: none !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}
[class*="auto-rows-["] > div > div[class*="translate-y-full"] span{
  color: #0F1C35 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
@media (max-width: 640px){
  [class*="auto-rows-["] > div > img{ width: 120px !important; height: 88px !important; }
}