/* ============================================
   GRIDS
   ============================================ */
.grid-2 { display: grid; gap: var(--space-8); }
.grid-3 { display: grid; gap: var(--space-6); }
.grid-4 { display: grid; gap: var(--space-6); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
.split--reverse > :first-child { order: 2; }
@media (min-width: 768px) {
  .split--reverse > :first-child { order: 0; }
  .split--reverse > :last-child { order: -1; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-white);
  padding-top: var(--header-height);
  isolation: isolate;
}
.hero--full { min-height: min(85vh, 720px); }
.hero--short { min-height: 50vh; }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img,
.hero__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-dark);
}
.hero__content {
  max-width: 760px;
  position: relative;
}
.hero__content h1 {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.hero__content p {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--space-8);
  max-width: 60ch;
  line-height: 1.7;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  display: none;
  transition: transform var(--transition-base), color var(--transition-base);
}
.hero__scroll:hover {
  color: var(--color-white);
  transform: translateX(-50%) translateY(4px);
}
.hero__scroll i { width: 32px; height: 32px; }
@media (min-width: 768px) {
  .hero__scroll { display: block; }
}

/* ============================================
   PAGE HERO (más corto, para páginas internas)
   ============================================ */
.page-hero {
  min-height: 50vh;
  padding-top: calc(var(--header-height) + var(--space-12));
  padding-bottom: var(--space-12);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-dark);
}
.page-hero h1 { color: var(--color-white); }
.page-hero p {
  color: rgba(255,255,255,0.9);
  font-size: 1.125rem;
  margin-top: var(--space-4);
  max-width: 60ch;
}

/* ============================================
   IMAGE LAYERED (con cuadro decorativo detrás)
   ============================================ */
.image-layered {
  position: relative;
  display: inline-block;
  width: 100%;
}
.image-layered::before {
  content: '';
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-xl);
  z-index: 0;
  transition: transform var(--transition-slow);
}
.image-layered img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-xl);
}
.image-layered:hover::before {
  transform: translate(-8px, -8px);
}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--section-py);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08), transparent 60%),
              radial-gradient(circle at 70% 50%, rgba(0,0,0,0.15), transparent 60%);
  pointer-events: none;
}
.cta-banner__content {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.cta-banner p {
  color: rgba(255,255,255,0.92);
  margin: 0 auto var(--space-8);
  font-size: 1.125rem;
}

/* ============================================
   STATS
   ============================================ */
.stats-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 600px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.stat {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat:hover {
  box-shadow: var(--shadow-xl);
}
.stat__number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat__label {
  color: var(--color-gray-700);
  font-weight: 500;
}

/* ============================================
   FEATURE LIST (¿Por qué elegirnos?)
   ============================================ */
.features {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 600px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}
.feature {
  text-align: left;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.feature:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(193,39,45,0.1);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.feature__icon i { width: 28px; height: 28px; }
.feature:hover .feature__icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: rotate(8deg);
}
.feature h3 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
}
.feature p {
  color: var(--color-gray-700);
  font-size: 0.9375rem;
}

/* ============================================
   COUNTER (animado)
   ============================================ */
.counter-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.counter-row__plus {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.counter {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}