/* CSS específico para la interna El Proyecto (proyecto-plib2.html) */

/* Altura de la navbar y compensación */
:root{ --navbar-h:72px; }
body.page-proyecto{ padding-top: var(--navbar-h); }

/* Navbar transparente/solid (alineado al index) */
.navbar.navbar-dark{ transition: background-color .2s ease, box-shadow .2s ease; }
.navbar.navbar-dark:not(.navbar-solid){ background: transparent; box-shadow: none; }
.navbar.navbar-dark.navbar-solid{
  background:#193a62; /* mismo color que en el index */
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  backdrop-filter: saturate(120%) blur(4px);
}

/* Header del proyecto (sin .page-header) */
.header-proyecto {
  position: relative;
  width: 100%;
  min-height: 40vh;
  margin-top: calc(var(--navbar-h) * -1); /* sube bajo la navbar fija */
  z-index: 1;
  background: url("../images/header-proyecto.jpg") center / cover no-repeat;
}
@media (min-width: 992px){
  .header-proyecto { min-height: 70vh; }
}

/* Overlay sutil para contraste con la navbar transparente */
.header-proyecto::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
}

/* Tipografía más nítida */
h1, h2, h3, p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Intro por encima */
.section{
    padding: 3% 0 1% 0;
}
.section--intro { position: relative; z-index: 2; padding-top: 3.25rem; }

/* Checklist con iconos */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.checklist i { line-height: 1.4; }

/* Callout */
.callout { background: #0d6efd10; border: 1px solid #0d6efd30; padding: 1rem 1.25rem; border-radius: .5rem; margin-top: 1rem; }

/* Zonificación */
.zoning__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 768px){ .zoning__grid { grid-template-columns: repeat(3, 1fr); } }
.zoning__item { background: #f8f9fa; border: 1px solid #e9ecef; padding: 1rem; border-radius: .5rem; }
.tag { display: inline-block; font-size: .9rem; padding: .15rem .5rem; border-radius: 999px; }
.tag--green { background: #19875422; color: #198754; border: 1px solid #19875455; }
.tag--amber { background: #ffc10722; color: #b08900; border: 1px solid #ffc10766; }
.tag--red   { background: #dc354522; color: #842029; border: 1px solid #dc354566; }

.table-responsive { margin-top: .5rem; }
.table { width: 100%; }
.table caption { caption-side: top; font-weight: 600; margin-bottom: .25rem; }

/* Cards (audiencia) */
.cards { display: grid; gap: 1rem; }
.cards--cols-2 { grid-template-columns: 1fr; }
@media (min-width: 768px){ .cards--cols-2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: #ffffff; border: 1px solid #e9ecef; border-radius: .5rem; padding: 1rem; height: 100%; }
.card h3 { font-size: 1.1rem; margin-bottom: .25rem; }

/* Estado actual */
.status__grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 576px){ .status__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .status__grid { grid-template-columns: repeat(3, 1fr); } }
.status__item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: .5rem; padding: .75rem 1rem; display: flex; align-items: center; }

/* Case section */
.case__grid { display: grid; gap: 1.25rem; align-items: center; } /* fix typo */
@media (min-width: 992px){ .case__grid { grid-template-columns: 1.2fr .8fr; } }
.case__media img { width: 100%; height: auto; border-radius: .5rem; }
.quote, .highlight { font-size: 1.1rem; font-style: italic; color: #0d1b2a; background: #0d6efd08; border-left: 4px solid #0d6efd; padding: 1rem 1.25rem; border-radius: .25rem; }

/* CTA barra */
.cta--bar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #0d6efd; color: #fff; border-radius: .5rem; padding: 1rem 1.25rem; }
.cta--bar .btn-primary { background: #fff; color: #0d6efd; border-color: #fff; }

/* Utilidades */
.img-cover { width: 100%; height: 100%; object-fit: cover; } /* no se usa en el header */
.me-2 { margin-right: .5rem; }