/* ════════ INSTITUCIONAL — estilos de sección ════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
  --gold:#8b6814;
  --gold-lt:#a8862a;
  --dark:#0A0A0A;
  --dark2:#111111;
  --text:#D4D0C8;
  --white:#F5F3EE;
  --line:rgba(255,255,255,0.08);
  --radius:3px;
}

body {
  background:var(--dark);
  color:var(--text);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 3rem;
  background:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 100%);
  transition:background 0.4s;
}
nav.scrolled { background:rgba(10,10,10,0.97); border-bottom:1px solid rgba(139, 104, 20,0.15); }

.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  color:var(--text); text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.78rem; letter-spacing:0.25em; text-transform:uppercase;
  transition:color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }

.nav-cta {
  font-family:'Barlow Condensed',sans-serif; font-size:0.72rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; text-decoration:none;
  padding:0.65rem 1.2rem; border:1px solid var(--gold); color:var(--gold);
  transition:background 0.25s, color 0.25s;
}
.nav-cta:hover { background:var(--gold); color:var(--dark); }

#page-hero {
  position:relative;
  min-height:clamp(480px, 72vh, 640px);
  display:flex; align-items:flex-end;
  padding-top:7rem;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:var(--r2-institucional-hero) center/cover no-repeat;
  filter:brightness(0.42) saturate(0.75);
}
.page-hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.35) 0%, var(--dark) 100%);
}
.page-hero-content {
  position:relative; z-index:2; width:100%;
  padding:0 3rem 3.5rem;
}
.breadcrumb {
  font-family:'Barlow Condensed',sans-serif; font-size:0.65rem;
  letter-spacing:0.22em; text-transform:uppercase; margin-bottom:1.2rem;
  color:rgba(212,208,200,0.45);
}
.breadcrumb a { color:rgba(139, 104, 20,0.7); text-decoration:none; }
.breadcrumb .sep { margin:0 0.5rem; color:rgba(139, 104, 20,0.35); }
.hero-eyebrow {
  display:flex; align-items:center; gap:0.8rem; margin-bottom:1rem;
}
.eyebrow-line { width:32px; height:1px; background:var(--gold); }
.hero-eyebrow span {
  font-family:'Barlow Condensed',sans-serif; font-size:0.68rem;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);
}
.hero-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,8vw,5.5rem); line-height:0.95; color:var(--white);
}
.hero-title .outline {
  color:transparent; -webkit-text-stroke:1px rgba(139, 104, 20,0.55);
}

#filtros-bar {
  background:var(--dark2); border-bottom:1px solid var(--line);
  padding:1rem 3rem;
}
.filtros-inner { display:flex; justify-content:flex-end; }
.marca-select {
  min-width:220px; padding:0.65rem 2rem 0.65rem 0.85rem;
  background:var(--dark); border:1px solid rgba(139, 104, 20,0.25);
  color:var(--text); font-family:'Barlow',sans-serif; font-size:0.88rem;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b6814' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.7rem center;
}

#institucional-section { padding:3.5rem 3rem 5rem; }
.loading-state, .empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:4rem 1rem; color:rgba(212,208,200,0.5);
  font-family:'Barlow Condensed',sans-serif; letter-spacing:0.12em; text-transform:uppercase;
}
.loading-spinner {
  width:36px; height:36px; border:2px solid rgba(139, 104, 20,0.2);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }
.empty-icon { font-size:2rem; color:var(--gold); opacity:0.5; }

.institucional-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.25rem;
}

.acc-card {
  background:var(--dark2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:border-color 0.25s, transform 0.25s;
}
.acc-card:hover {
  border-color:rgba(139, 104, 20,0.35);
  transform:translateY(-4px);
}
.acc-card-img-wrap {
  aspect-ratio:4/3;
  background:#0d0d0d;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.acc-card-img {
  width:100%; height:100%; object-fit:contain; padding:1rem;
  transition:transform 0.35s;
}
.acc-card:hover .acc-card-img { transform:scale(1.04); }
.acc-card-placeholder {
  font-family:'Barlow Condensed',sans-serif; font-size:0.65rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(212,208,200,0.25);
}
.acc-card-body { padding:1.1rem 1.2rem 1.25rem; }
.acc-card-marca {
  font-family:'Barlow Condensed',sans-serif; font-size:0.62rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.35rem;
}
.acc-card-nombre {
  font-family:'Bebas Neue',sans-serif; font-size:1.45rem;
  letter-spacing:0.04em; color:var(--white); line-height:1.05; margin-bottom:0.85rem;
}
.acc-card-footer {
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
}
.acc-card-codigo {
  font-family:'Barlow Condensed',sans-serif; font-size:0.68rem;
  letter-spacing:0.14em; color:rgba(212,208,200,0.45);
}
.acc-card-disp {
  font-family:'Barlow Condensed',sans-serif; font-size:0.62rem;
  letter-spacing:0.12em; text-transform:uppercase; padding:0.2rem 0.45rem;
  border-radius:2px;
}
.acc-card-disp.si { color:#6ecf8d; background:rgba(110,207,141,0.12); }
.acc-card-disp.no { color:#d08080; background:rgba(208,128,128,0.12); }

.detail-panel {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.78);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s, visibility 0.3s;
}
.detail-panel.is-open { opacity:1; visibility:visible; }
.detail-card {
  width:min(720px, 100%);
  max-height:90dvh; overflow:auto;
  background:var(--dark2);
  border:1px solid rgba(139, 104, 20,0.2);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.detail-close {
  position:absolute; top:1rem; right:1rem;
  width:40px; height:40px; border:1px solid rgba(255,255,255,0.15);
  background:transparent; color:var(--text); font-size:1.5rem;
  cursor:pointer; border-radius:var(--radius);
}
.detail-img-wrap {
  background:#0a0a0a; display:flex; align-items:center; justify-content:center;
  min-height:280px; padding:1.5rem;
}
.detail-img { max-width:100%; max-height:320px; object-fit:contain; }
.detail-content { padding:2rem; display:flex; flex-direction:column; gap:0.85rem; }
.detail-marca {
  font-family:'Barlow Condensed',sans-serif; font-size:0.68rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
}
.detail-nombre {
  font-family:'Bebas Neue',sans-serif; font-size:2rem;
  letter-spacing:0.04em; color:var(--white); line-height:1;
}
.detail-meta {
  font-family:'Barlow Condensed',sans-serif; font-size:0.72rem;
  letter-spacing:0.14em; color:rgba(212,208,200,0.5);
}
.detail-desc { font-size:0.92rem; line-height:1.65; color:rgba(212,208,200,0.75); }
.detail-disp {
  display:inline-block; font-family:'Barlow Condensed',sans-serif;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.3rem 0.55rem; border-radius:2px; width:fit-content;
}
.detail-disp.si { color:#6ecf8d; background:rgba(110,207,141,0.12); }
.detail-disp.no { color:#d08080; background:rgba(208,128,128,0.12); }
.detail-whatsapp {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  margin-top:0.5rem; padding:0.8rem 1.1rem;
  background:#25D366; color:#fff; border-radius:999px;
  font-family:'Barlow Condensed',sans-serif; font-size:0.72rem;
  font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; width:fit-content;
}

footer {
  background:var(--dark); border-top:1px solid rgba(139, 104, 20,0.15);
  padding:3rem; text-align:center;
}
.footer-copy {
  font-family:'Barlow Condensed',sans-serif; font-size:0.62rem;
  letter-spacing:0.2em; text-transform:uppercase; color:rgba(212,208,200,0.28);
}

.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity:1; transform:translateY(0); }

body.detail-open {
  overflow:hidden;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width:900px) {
  nav { padding:1rem 1.25rem; }
  #page-hero {
    min-height:auto;
    padding-top:5.5rem;
  }
  .page-hero-content { padding:0 1.25rem 3rem; }
  .hero-title { font-size:clamp(2.6rem,10vw,4.5rem); }
  .hero-eyebrow span { font-size:0.62rem; letter-spacing:0.24em; }
  #filtros-bar {
    padding:0.85rem 1.25rem;
  }
  #filtros-bar, #institucional-section {
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
  .filtros-inner {
    justify-content:stretch;
  }
  .marca-select {
    width:100%;
    min-width:0;
    font-size:1rem;
  }
  #institucional-section {
    padding-top:2.5rem;
    padding-bottom:3.5rem;
  }
  .institucional-grid {
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
  }
  .acc-card-nombre { font-size:1.3rem; }
  .detail-panel {
    padding:0;
    align-items:flex-end;
  }
  .detail-card {
    width:100%;
    max-height:92dvh;
    border-radius:12px 12px 0 0;
    grid-template-columns:1fr;
    -webkit-overflow-scrolling:touch;
  }
  .detail-close {
    top:0.75rem;
    right:0.75rem;
    z-index:5;
    width:44px;
    height:44px;
  }
  .detail-img-wrap {
    min-height:200px;
    padding:1.25rem 1rem 0.5rem;
  }
  .detail-img { max-height:240px; }
  .detail-content {
    padding:1.25rem 1.25rem 2rem;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .detail-nombre { font-size:1.75rem; }
  .detail-desc { font-size:0.9rem; }
  .detail-whatsapp {
    width:100%;
    padding:0.95rem 1rem;
    font-size:0.75rem;
  }
  footer { padding:2rem 1.25rem; }
}

@media (max-width:560px) {
  #page-hero { min-height:auto; }
  .page-hero-content { padding:0 1rem 2.5rem; }
  .hero-title { font-size:clamp(2.35rem,11vw,3.2rem); }
  .breadcrumb { font-size:0.58rem; margin-bottom:1rem; }
  .institucional-grid { grid-template-columns:1fr; }
  .acc-card-body { padding:1rem 1.1rem 1.15rem; }
  .acc-card-nombre { font-size:1.2rem; margin-bottom:0.65rem; }
  .acc-card-img { padding:0.75rem; }
  .loading-state, .empty-state { padding:3rem 1rem; font-size:0.72rem; }
  .detail-nombre { font-size:1.55rem; }
  .detail-meta, .detail-marca { font-size:0.65rem; }
}

@media (pointer:coarse) {
  .acc-card:hover {
    transform:none;
  }
  .acc-card:active {
    border-color:rgba(139, 104, 20,0.35);
  }
  .acc-card:hover .acc-card-img {
    transform:none;
  }
  .nav-cta, .marca-select, .acc-card, .detail-close, .detail-whatsapp {
    cursor:pointer;
  }
}