/* ===== Vars ===== */
:root { --header-h: 65px; }

/* ===== Header fijo ===== */
header{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  min-height:65px; background-color:var(--brand); padding:10px 20px; color:#fff;
  position:fixed; top:0; left:0; width:100%; z-index:1000; transition:box-shadow .3s ease;
}
header.scrolled{ box-shadow:0 2px 8px rgba(0,0,0,.25); }

/* Compensación por header y prevenir scroll lateral por full-bleed */
body{
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  overflow-x: hidden;
}

/* ===== HERO ===== */
.hero-instalaciones{
  position:relative;
  margin: 0 auto 10px;
  max-width:1100px; border-radius:2px; overflow:hidden; box-shadow:var(--shadow-strong);
  height:420px; display:grid; place-items:center; color:#fff; text-align:center; isolation:isolate;
}
.hero-instalaciones img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-instalaciones::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.25)); z-index:1;
}
.hero-instalaciones > *{ position:relative; z-index:2; }
.hero-instalaciones h1{
  font-size:clamp(2.2rem, 3vw + 1rem, 4rem);
  letter-spacing:2px; font-weight:900; color:#fff; text-transform:uppercase;
  text-shadow:2px 2px 6px rgba(0,0,0,.7);
}
.hero-instalaciones .metrics{ display:grid; gap:6px; font-weight:600; opacity:.95; }

/* ===== Intro ===== */
.intro-instalaciones{
  max-width:1100px; width:100%; margin:30px auto; padding:20px;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  text-align:center;
}
.intro-instalaciones p{ margin:0; }

/* ===== Grid tarjetas ===== */
.grid-instalaciones{
  max-width:1100px; margin:0 auto 30px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  background:transparent; padding:0; border-radius:0; box-shadow:none;
}
.card-instalacion{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s ease, box-shadow .5s ease;
}
.card-instalacion .media{ aspect-ratio:16 / 10; background:#ddd; overflow:hidden; }
.card-instalacion .media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.card-instalacion .body{ padding:12px 16px 16px; text-align:center; }
.card-instalacion .title{ font-weight:600; color:var(--text-strong); margin-bottom:4px; }
.card-instalacion .desc{ color:#555; font-size:.95rem; }
.card-instalacion:hover{ transform:scale(1.025); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.card-instalacion:hover img{ transform:scale(1.025); }

/* ===== CTA + MAPA ===== */
.cta-experiencia{
  max-width:1100px; margin:40px auto;
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;
}
.cta-experiencia .panel{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; min-height:280px; display:flex; flex-direction:column; justify-content:center; text-align:center;
}
.cta-experiencia h3{ font-size:clamp(1.4rem, 1.2vw + 1rem, 1.8rem); margin:0 0 12px; }
.cta-experiencia p{ margin:0 0 20px; color:#444; }
.cta-experiencia img{ max-width:140px; margin:0 auto; display:block; }
.mapa-container{ flex:1; min-height:220px; border-radius:var(--radius); overflow:hidden; }

/* ===== Redes ===== */
.social-contact{
  max-width:1100px; margin:40px auto; text-align:center; padding:30px 20px;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
}
.social-contact h3{ font-size:1.6rem; margin-bottom:20px; color:var(--text-strong); }
.social-icons{ display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; width:fit-content; margin:0 auto; }
.social-icons a{ font-size:2rem; color:var(--brand); transition:color .3s ease, transform .3s ease; }
.social-icons a:hover{ color:var(--accent); transform:scale(1.1); }

/* ===== Animaciones ===== */
@keyframes heroFadeIn{ 0%{opacity:0;transform:translateY(10px) scale(.98);} 100%{opacity:1;transform:translateY(0) scale(1);} }
.hero-instalaciones .metrics span{ opacity:0; animation:heroFadeIn .8s ease-out forwards; }
.hero-instalaciones .metrics span:nth-child(1){ animation-delay:.15s; }
.hero-instalaciones .metrics span:nth-child(2){ animation-delay:.30s; }
.hero-instalaciones .metrics span:nth-child(3){ animation-delay:.45s; }

/* ===== Responsivo ===== */

/* iPad 11" vertical y anchos chicos: HERO full-bleed */
@media (max-width: 900px){
  .hero-instalaciones{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 360px;
  }
  .grid-instalaciones{ grid-template-columns:1fr 1fr; }
  .cta-experiencia{ grid-template-columns:1fr 1fr; }
  .grid-instalaciones > .card-instalacion:last-child{ grid-column:1 / -1; }
  .grid-instalaciones > .card-instalacion:last-child .media{ aspect-ratio:16 / 7; }
}

/* Reafirmar solo en portrait (iPad Air 11" = ~820px) */
@media (orientation: portrait) and (min-width: 800px) and (max-width: 834px){
  .hero-instalaciones{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* CTA en una columna en tablets chicas */
@media (max-width:768px){
  .cta-experiencia{ grid-template-columns:1fr; }
}

/* Una sola columna en móviles */
@media (max-width:600px){
  .grid-instalaciones{ grid-template-columns:1fr; }
  .hero-instalaciones{ height:320px; }
}

/* Limitar ancho de secciones (NO del hero) a 750px en iPad vertical */
@media (max-width:834px){
  .intro-instalaciones, .grid-instalaciones, .cta-experiencia, .social-contact{
    max-width:750px; margin-left:auto; margin-right:auto;
  }
}