/* ==========================
   SISTEMA DE PLANTILLAS CSS
   ========================== */

/* --- Variables globales por marca --- */
:root {
  --color-blnz: #0070c9;
  --color-geoblueshield: #1a4b9e;
  --color-balizas: #ffb400;
  --color-oscuro: #0b0b0b;
  --color-claro: #ffffff;
}

/* --- Contenedores globales --- */
.section-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: center;
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
}

/* --- Fondos reutilizables --- */
.bg-light { background: #f8f9fa; color: #000; }
.bg-dark { background: #0b0b0b; color: #fff; }
.bg-gradient { background: linear-gradient(135deg, var(--color-geoblueshield), #00aaff); color: #fff; }

/* --- Hero genérico (ya lo tienes) --- */
.hero-grid {
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  justify-items:center;
  min-height:90vh;
  position:relative;
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.hero-grid::before {
  content:"";
  position:absolute; inset:0;
  background-image:var(--hero-bg, none);
  background-size:cover; background-position:center;
  filter:brightness(.45);
  z-index:0;
}
.hero-grid > *{ z-index:1; padding:1rem; }
.btn-cta {
  display:inline-block; padding:1rem 2rem; border-radius:30px;
  font-weight:700; text-decoration:none; text-transform:uppercase;
  background:#ffb400; color:#000; transition:.2s;
}
.btn-cta:hover{ background:#fff; color:#000; }
.bg-hero--foto1{ --hero-bg:url('/img/cms/hero1.jpg'); }
.bg-hero--foto2{ --hero-bg:url('/img/cms/hero2.jpg'); }

/* --- Bloque de texto + imagen lateral --- */
.text-img-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items:center;
  text-align:left;
}
.text-img-grid img {
  width:100%; border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,.15);
}

/* --- Ranking / comparador --- */
.ranking-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:2rem;
}
.ranking-card {
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  padding:1rem;
  transition:transform .2s;
}
.ranking-card:hover { transform:translateY(-5px); }

/* --- Footer visual uniforme --- */
.footer-bar {
  background: var(--color-oscuro);
  color:#fff;
  text-align:center;
  padding:2rem 1rem;
  font-size:0.9rem;
  border-top:3px solid var(--color-balizas);
}