/* =========================================================
   GARANTÍA — VIDAMOTOS
   Depende de style.css (reset, body, navbar, footer, wa-btn)
========================================================= */

/* =========================================================
   HERO
========================================================= */

.g-hero {

  position: relative;

  min-height: 480px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 80px 8%;

  overflow: hidden;

  background: #0d0d0d;

}

.g-hero-bg {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      #C8102E 0%,
      #7a0019 40%,
      #0d0d0d 70%
    );

  opacity: .9;

  z-index: 0;

}

/* Patrón de puntos decorativo */
.g-hero-bg::after {

  content: '';

  position: absolute;

  inset: 0;

  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);

  background-size: 28px 28px;

}

.g-hero-content {

  position: relative;

  z-index: 2;

  max-width: 700px;

}

.g-hero-tag {

  display: inline-block;

  background: rgba(255,255,255,.12);

  border: 1px solid rgba(255,255,255,.2);

  color: #fff;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  padding: 6px 16px;

  border-radius: 100px;

  margin-bottom: 24px;

  text-transform: uppercase;

}

.g-hero-content h1 {

  font-size: 80px;

  font-weight: 900;

  color: #fff;

  line-height: 1;

  margin-bottom: 20px;

}

.g-hero-content p {

  font-size: 18px;

  color: rgba(255,255,255,.75);

  line-height: 1.7;

  max-width: 500px;

}

/* Badge "2 años" */
.g-hero-badge {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  border: 3px solid rgba(255,255,255,.25);

  background: rgba(255,255,255,.07);

  backdrop-filter: blur(8px);

  text-align: center;

  flex-shrink: 0;

}

.badge-number {

  font-size: 72px;

  font-weight: 900;

  color: #fff;

  line-height: 1;

}

.badge-label {

  font-size: 13px;

  color: rgba(255,255,255,.7);

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

  line-height: 1.4;

}

/* =========================================================
   INTRO
========================================================= */

.g-intro {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 60px;

  align-items: center;

  padding: 80px 8%;

  background: #fff;

}

.g-intro-text h2 {

  font-size: 48px;

  font-weight: 900;

  line-height: 1.15;

  margin-bottom: 20px;

  color: #111;

}

.g-intro-text h2 span {

  color: #C8102E;

}

.g-intro-text p {

  font-size: 17px;

  line-height: 1.8;

  color: #666;

}

.g-intro-stat-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}

.g-stat {

  background: #f9f9f9;

  border-left: 4px solid #C8102E;

  padding: 24px 20px;

  border-radius: 0 12px 12px 0;

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.g-stat strong {

  font-size: 28px;

  font-weight: 900;

  color: #C8102E;

}

.g-stat span {

  font-size: 13px;

  color: #888;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

}

/* =========================================================
   SECCIÓN HEADER REUTILIZABLE
========================================================= */

.g-section-header {

  text-align: center;

  margin-bottom: 50px;

}

.g-section-header h2 {

  font-size: 44px;

  font-weight: 900;

  color: #111;

  margin-bottom: 12px;

}

.g-section-header p {

  font-size: 17px;

  color: #888;

}

.g-section-header.light h2 {

  color: #fff;

}

.g-section-header.light p {

  color: rgba(255,255,255,.6);

}

/* =========================================================
   COBERTURA — CARDS
========================================================= */

.g-coverage {

  padding: 80px 8%;

  background: #f5f5f5;

}

.g-cards {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}

.g-card {

  background: #fff;

  border-radius: 16px;

  padding: 36px 28px;

  transition: .25s;

  border-bottom: 4px solid transparent;

}

.g-card:hover {

  transform: translateY(-6px);

  border-bottom-color: #C8102E;

  box-shadow: 0 16px 40px rgba(0,0,0,.08);

}

.g-card-icon {

  font-size: 36px;

  margin-bottom: 16px;

}

.g-card h3 {

  font-size: 20px;

  font-weight: 800;

  margin-bottom: 12px;

  color: #111;

}

.g-card p {

  font-size: 15px;

  line-height: 1.7;

  color: #666;

}

/* =========================================================
   EXCLUSIONES
========================================================= */

.g-exclusions {

  padding: 70px 8%;

  background: #fff;

}

.g-exclusions-inner {

  max-width: 800px;

  margin: 0 auto;

  text-align: center;

}

.g-exclusions-inner h2 {

  font-size: 36px;

  font-weight: 900;

  color: #111;

  margin-bottom: 36px;

}

.g-excl-list {

  list-style: none;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  text-align: left;

}

.g-excl-list li {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  font-size: 15px;

  color: #555;

  background: #fafafa;

  padding: 16px 18px;

  border-radius: 10px;

  line-height: 1.5;

}

.g-excl-list li::before {

  content: '✕';

  color: #C8102E;

  font-weight: 900;

  font-size: 13px;

  flex-shrink: 0;

  margin-top: 2px;

}

/* =========================================================
   PLAN DE MANTENIMIENTO
========================================================= */

.g-maint {

  padding: 80px 8%;

  background: #f5f5f5;

}

.g-maint-table-wrap {

  overflow-x: auto;

  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(0,0,0,.08);

}

.g-maint-table {

  width: 100%;

  border-collapse: collapse;

  background: #fff;

  min-width: 600px;

}

.g-maint-table thead tr {

  background: #C8102E;

  color: #fff;

}

.g-maint-table th {

  padding: 18px 20px;

  font-size: 13px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;

  text-align: center;

}

.g-maint-table th:first-child {

  text-align: left;

}

.g-maint-table td {

  padding: 16px 20px;

  font-size: 15px;

  color: #444;

  text-align: center;

  border-bottom: 1px solid #f0f0f0;

}

.g-maint-table td:first-child {

  text-align: left;

}

.g-maint-table .highlight-row {

  background: #fff9f9;

}

.g-maint-note {

  margin-top: 20px;

  font-size: 13px;

  color: #999;

  text-align: center;

}

/* =========================================================
   PASOS
========================================================= */

.g-steps {

  padding: 80px 8%;

  background: #0d0d0d;

}

.g-steps-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;

  counter-reset: steps;

}

.g-step {

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 16px;

  padding: 36px 28px;

  transition: .25s;

}

.g-step:hover {

  background: rgba(200,16,46,.12);

  border-color: rgba(200,16,46,.4);

}

.g-step-num {

  font-size: 52px;

  font-weight: 900;

  color: #C8102E;

  line-height: 1;

  margin-bottom: 16px;

  opacity: .7;

}

.g-step h3 {

  font-size: 18px;

  font-weight: 800;

  color: #fff;

  margin-bottom: 10px;

}

.g-step p {

  font-size: 14px;

  color: rgba(255,255,255,.55);

  line-height: 1.7;

}

/* =========================================================
   CTA
========================================================= */

.g-cta {

  padding: 80px 8%;

  background: #fff;

}

.g-cta-inner {

  text-align: center;

  max-width: 700px;

  margin: 0 auto;

}

.g-cta-inner h2 {

  font-size: 44px;

  font-weight: 900;

  color: #111;

  margin-bottom: 16px;

}

.g-cta-inner p {

  font-size: 17px;

  color: #666;

  line-height: 1.7;

  margin-bottom: 36px;

}

.g-cta-buttons {

  display: flex;

  justify-content: center;

  gap: 16px;

  flex-wrap: wrap;

}

.g-cta-btn {

  padding: 16px 32px;

  border-radius: 12px;

  font-weight: 700;

  font-size: 15px;

  text-decoration: none;

  transition: .3s ease;

}

.g-cta-btn.primary {

  background: #25D366;

  color: #fff;

}

.g-cta-btn.primary:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 24px rgba(37,211,102,.25);

}

.g-cta-btn.secondary {

  border: 2px solid #ddd;

  color: #111;

}

.g-cta-btn.secondary:hover {

  border-color: #C8102E;

  color: #C8102E;

  transform: translateY(-3px);

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width: 768px) {

  /* HERO */

  .g-hero {

    flex-direction: column;

    align-items: flex-start;

    padding: 60px 6%;

    min-height: auto;

    gap: 40px;

  }

  .g-hero-content h1 {

    font-size: 52px;

  }

  .g-hero-badge {

    width: 130px;

    height: 130px;

  }

  .badge-number {

    font-size: 52px;

  }

  /* INTRO */

  .g-intro {

    grid-template-columns: 1fr;

    padding: 50px 6%;

    gap: 36px;

  }

  .g-intro-text h2 {

    font-size: 34px;

  }

  .g-intro-stat-grid {

    grid-template-columns: 1fr 1fr;

  }

  /* COBERTURA */

  .g-coverage {

    padding: 50px 6%;

  }

  .g-cards {

    grid-template-columns: 1fr 1fr;

  }

  /* EXCLUSIONES */

  .g-exclusions {

    padding: 50px 6%;

  }

  .g-excl-list {

    grid-template-columns: 1fr;

  }

  /* MANTENIMIENTO */

  .g-maint {

    padding: 50px 6%;

  }

  .g-section-header h2 {

    font-size: 30px;

  }

  /* PASOS */

  .g-steps {

    padding: 50px 6%;

  }

  .g-steps-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }

  /* CTA */

  .g-cta {

    padding: 50px 6%;

  }

  .g-cta-inner h2 {

    font-size: 32px;

  }

  .g-cta-buttons {

    flex-direction: column;

  }

  .g-cta-btn {

    text-align: center;

  }

}

@media(max-width: 480px) {

  .g-cards {

    grid-template-columns: 1fr;

  }

}