/* =========================================================
   /css/layout/verticales.css
   Scopeado 100% a la página de verticales
   NO pisa dropdown ni otras cards
========================================================= */

.page-verticales .page-hero--vicnet{
  padding: clamp(36px, 6vw, 64px) 0 24px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.page-verticales .page-hero--vicnet .kicker{
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 10px;
}

.page-verticales .page-hero--vicnet .h1{
  font-family: var(--font-display, Zrnic, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  letter-spacing: .02em;
  margin: 0 0 10px;
  line-height: 1.05;
}

.page-verticales .page-hero--vicnet .lead{
  max-width: 76ch;
  opacity: .85;
  margin: 0;
}

/* =========================================================
   Toolbar
========================================================= */

.page-verticales .sol-toolbar-wrap{
  padding: 18px 0 6px;
}

.page-verticales .sol-toolbar{
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 12px;
  align-items: center;
}

@media (max-width: 820px){
  .page-verticales .sol-toolbar{
    grid-template-columns: 1fr;
  }
}

.page-verticales .sol-input,
.page-verticales .sol-select{
  height: 46px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 0;
  background: #fff;
  padding: 0 14px;
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.page-verticales .sol-input::placeholder{ opacity: .55; }

.page-verticales .sol-input:focus,
.page-verticales .sol-select:focus{
  border-color: rgba(243,144,33,.65);
  box-shadow: 0 0 0 3px rgba(243,144,33,.14);
}

/* =========================================================
   Grid de cards (ESTO ES LO IMPORTANTE)
========================================================= */

.page-verticales .sol-list{
  padding: 18px 0 28px;
}

.page-verticales .v-industrias__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Desktop chico */
@media (max-width: 1200px){
  .page-verticales .v-industrias__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet */
@media (max-width: 900px){
  .page-verticales .v-industrias__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile — 2 cards por fila */
@media (max-width: 560px){
  .page-verticales .v-industrias__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Mobile MUY chico — 1 sola columna */
@media (max-width: 380px){
  .page-verticales .v-industrias__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Cards
========================================================= */

.page-verticales .v-ind-card{
  border-radius: 0;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  overflow: hidden;
  position: relative;
  min-height: 220px;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;

  /* background por CSS var (imagen) */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}

.page-verticales .v-ind-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.08),
    rgba(0,0,0,.62)
  );
  pointer-events:none;
}

.page-verticales .v-ind-card__inner{
  position: relative;
  z-index: 1;
  padding: 18px;
  display: grid;
  gap: 8px;
  height: 100%;
  align-content: end;
}

.page-verticales .v-ind-card__title{
  font-family: var(--font-display, Zrnic, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  line-height: 1.05;
  font-size: 20px;
}

.page-verticales .v-ind-card__desc{
  margin: 0;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
  font-size: 14px;
  max-width: 52ch;
}

.page-verticales .v-ind-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* =========================================================
   Empty state
========================================================= */

.page-verticales .sol-empty{
  padding: 18px 0;
  opacity: .72;
}