/* /css/case.css */

.page-case { background: #fff; color: #0b1220; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 18px; }

.case-hero {
  position: relative;
  min-height: 420px;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.case-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.case-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,.15), rgba(11,18,32,.82));
}
.case-hero__content {
  position: relative;
  padding: 42px 18px 34px;
  color: #fff;
}
.case-hero__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 10px;
}
.case-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  margin: 0 0 10px;
}
.case-hero__subtitle {
  margin: 0 0 14px;
  font-size: 16px;
  opacity: .95;
}
.case-hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.pill--ok { background: rgba(46, 204, 113, .20); border-color: rgba(46, 204, 113, .25); }
.pill--muted { opacity: .9; }

.case-overview { padding: 34px 0; }
.case-overview__grid {
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 22px;
}
@media (max-width: 900px){
  .case-overview__grid { grid-template-columns: 1fr; }
}

.case-facts {
  list-style: none;
  padding: 16px;
  margin: 0;
  border: 1px solid rgba(11,18,32,.10);
  background: #fff;
}
.case-facts li { padding: 10px 0; border-bottom: 1px solid rgba(11,18,32,.08); }
.case-facts li:last-child { border-bottom: 0; }

.case-section { padding: 34px 0; }
.case-section--alt { background: rgba(11,18,32,.03); }
.case-section--dark { background: #0b1220; color: #fff; }
.case-section__head h2 { margin: 0 0 12px; font-size: 22px; }

.case-list { margin: 14px 0 0; padding-left: 18px; }
.case-list li { margin: 8px 0; }

.case-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.case-gallery__item { grid-column: span 3; margin: 0; }
.case-gallery__item img {
  width: 100%; height: 160px; object-fit: cover;
  display: block;
  border: 1px solid rgba(11,18,32,.10);
}
@media (max-width: 900px){
  .case-gallery__item { grid-column: span 6; }
  .case-gallery__item img { height: 170px; }
}
@media (max-width: 520px){
  .case-gallery__item { grid-column: span 12; }
}

.case-cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.case-card {
  grid-column: span 6;
  border: 1px solid rgba(11,18,32,.10);
  background: #fff;
  padding: 16px;
}
.case-card__title { margin: 0 0 8px; font-size: 16px; }
.case-card__text { margin: 0; opacity: .9; }
@media (max-width: 900px){
  .case-card { grid-column: span 12; }
}

.case-tech {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  margin: 12px 0 0;
}
.case-tech img {
  height: 30px;
  width: auto;
  opacity: .95;
  filter: grayscale(1);
}

.case-results {
  margin: 0;
  padding-left: 18px;
}
.case-results li { margin: 9px 0; }

.case-cta { padding: 44px 0; background: rgba(11,18,32,.02); }
.case-cta__box {
  border: 1px solid rgba(11,18,32,.10);
  background: #fff;
  padding: 22px;
}
.case-cta__box h2 { margin: 0 0 10px; }
.case-cta__box p { margin: 0 0 14px; opacity: .9; }

/* Si tu .btn ya existe en styles.css, esto no hace falta.
   Si no existe, descomentá y ajusto a tu UI.
*/
/*
.btn { display:inline-flex; padding:12px 14px; border:1px solid #0b1220; text-decoration:none; }
.btn--primary { background:#ff6a00; color:#fff; border-color:#ff6a00; }
.btn--ghost { background:transparent; color:#0b1220; }
*/

/* LISTADO - 3 por fila */
.cases-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

@media (max-width:1100px){
  .cases-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .cases-grid{ grid-template-columns:1fr; }
}

/* Aseguramos que el card NO tenga spans viejos */
.cases-grid .case-card{
  grid-column:auto !important;
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  overflow:hidden;
}

/* Media arriba */
.case-card__media{
  height:160px;
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(11,18,32,.10);
}

/* Body */
.case-card__body{ padding:18px; }
.case-card__kicker{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.65;
  margin-bottom:8px;
}
.case-card__title{ margin:0 0 6px; font-size:14px; font-weight:800; }
.case-card__sub{ margin:0 0 12px; opacity:.8; }
.case-card__meta{ display:flex; gap:12px; font-size:12px; opacity:.75; }


/* ===============================
   DESTACADOS
================================ */
.cases-featured {
  padding: 34px 18px 12px;
}

.cases-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

@media (max-width:1100px){
  .cases-featured-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  .cases-featured-grid {
    grid-template-columns: 1fr;
  }
}

/* Card destacada */
.case-card--featured {
  position: relative;
  border: 2px solid rgba(255,106,0,.35); /* naranja Vicnet */
}

.case-card--featured::before {
  content: "DESTACADO";
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff6a00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 6px 8px;
  z-index: 2;
}

/* ===============================
   LISTADO GENERAL (ya lo tenías)
================================ */
.cases-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

@media (max-width:1100px){
  .cases-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .cases-grid{ grid-template-columns:1fr; }
}

/* ===============================
   CASOS DESTACADOS - GRID
================================ */
.cases-featured-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

/* Tablet */
@media (max-width:1100px){
  .cases-featured-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width:640px){
  .cases-featured-grid{
    grid-template-columns:1fr;
  }
}

/* Card destacada: NO full width */
.cases-featured-grid .case-card--featured{
  grid-column:auto !important;
  width:auto !important;
}

/* ===============================
   PAGE HEAD – ZRNIC
================================ */
.v-pagehead{
  padding: 34px 0 14px;
}

.v-pagehead__kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.v-pagehead__bar{
  width:86px;
  height:4px;
  background:#ff6a00; /* Vicnet Orange */
}

.v-pagehead__kickertext{
  font-family: "ZRNIC", system-ui, sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(11,18,32,.80);
}

/* 👇 CLAVE: ZRNIC necesita menos line-height y tracking controlado */
.v-pagehead__title{
  font-family: "ZRNIC", system-ui, sans-serif;
  margin:0 0 12px;
  font-size:clamp(46px, 5.2vw, 74px);
  line-height:0.98;
  font-weight:900;
  letter-spacing:-.01em;
  color:#0b1220;
}

.v-pagehead__lead{
  max-width:860px;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:20px;
  line-height:1.55;
  color:rgba(11,18,32,.68);
}

/* Mobile fine-tuning */
@media (max-width:640px){
  .v-pagehead{
    padding-top:26px;
  }
  .v-pagehead__bar{
    width:64px;
  }
  .v-pagehead__title{
    font-size:clamp(34px, 9vw, 44px);
    line-height:1.02;
  }
  .v-pagehead__lead{
    font-size:17px;
  }
}