/* Huellarte Guardian - CSS común para Basic, Plus y Family */
.hg-plan-section {
  max-width: 1100px;
  margin: 0 auto;
  font-family: inherit;
  color: #2f2940;
}

.hg-plan-hero {
  text-align: center;
  border-radius: 24px;
  padding: 36px 22px;
  margin-bottom: 28px;
}

.hg-plan-basic .hg-plan-hero {
  background: linear-gradient(135deg, #fff7f7, #f5f0ff);
  border: 1px solid #f4dddd;
}

.hg-plan-plus .hg-plan-hero {
  background: linear-gradient(135deg, #f6fbff, #f6f0ff);
  border: 1px solid #dfe9ff;
}

.hg-plan-family .hg-plan-hero {
  background: linear-gradient(135deg, #fff7f7, #f5f0ff);
  border: 1px solid #f4dddd;
}

.hg-plan-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.hg-plan-basic .hg-plan-badge {
  background: #ffe1df;
  color: #ff5f5a;
}

.hg-plan-plus .hg-plan-badge {
  background: #e7f1ff;
  color: #2f7df6;
}

.hg-plan-family .hg-plan-badge {
  background: #ffe1df;
  color: #ff5f5a;
}

.hg-plan-hero h2 {
  font-size: 36px;
  margin: 14px 0 8px;
  color: #302746;
}

.hg-plan-hero p {
  font-size: 18px;
  color: #6f6a7d;
  max-width: 760px;
  margin: 0 auto 16px;
}

.hg-plan-hero small {
  color: #7d6c78;
  font-size: 15px;
}

.hg-desktop-tabs input {
  display: none;
}

.hg-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.hg-tab-buttons label {
  cursor: pointer;
  padding: 13px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f1dede;
  color: #6f6a7d;
  font-weight: 700;
}

.hg-tab-panel {
  display: none;
}

.hg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hg-info-card {
  background: #fff;
  border: 1px solid #eee6f5;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(60, 40, 90, 0.06);
}

.hg-info-card strong {
  display: block;
  font-size: 18px;
  color: #302746;
  margin-bottom: 8px;
}

.hg-info-card p {
  color: #6f6a7d;
  line-height: 1.6;
  margin: 0;
}

.hg-warning {
  background: #fff7f6;
  border: 1px dashed #ff9b9b;
  color: #7a3d3d;
  padding: 18px 20px;
  border-radius: 18px;
  margin-top: 22px;
  font-size: 15px;
}

.hg-list {
  background: #fff;
  border: 1px solid #eee6f5;
  border-radius: 22px;
  padding: 24px 28px 24px 46px;
  color: #6f6a7d;
  line-height: 2;
}

.hg-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #eee6f5;
  border-radius: 22px;
  overflow: hidden;
}

.hg-table th,
.hg-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #eee6f5;
  text-align: left;
}

.hg-table th {
  color: #302746;
  width: 35%;
}

.hg-table td {
  color: #6f6a7d;
}

.hg-description {
  background: #faf8ff;
  border-radius: 22px;
  padding: 26px;
  color: #6f6a7d;
  line-height: 1.7;
}

.hg-description h3 {
  color: #302746;
  font-size: 26px;
  margin-bottom: 12px;
}

.hg-link {
  color: #ff5f5a;
  font-weight: 700;
  text-decoration: none;
  transition: .2s;
}

.hg-link:hover {
  color: #d93f3a;
  text-decoration: underline;
}

.hg-mobile-accordion {
  display: none;
}

.hg-mobile-accordion details {
  background: #fff;
  border: 1px solid #eee6f5;
  border-radius: 18px;
  margin-bottom: 14px;
  overflow: hidden;
}

.hg-mobile-accordion summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 800;
  color: #302746;
  background: #faf8ff;
}

.hg-mobile-accordion details > *:not(summary) {
  margin: 18px;
}

/* Estados únicos para Basic */
#hg-basic-tab-1:checked ~ .hg-tab-buttons label[for="hg-basic-tab-1"],
#hg-basic-tab-2:checked ~ .hg-tab-buttons label[for="hg-basic-tab-2"],
#hg-basic-tab-3:checked ~ .hg-tab-buttons label[for="hg-basic-tab-3"],
#hg-basic-tab-4:checked ~ .hg-tab-buttons label[for="hg-basic-tab-4"] {
  background: #ff5f5a;
  color: #fff;
  border-color: #ff5f5a;
}

#hg-basic-tab-1:checked ~ .hg-basic-panel-1,
#hg-basic-tab-2:checked ~ .hg-basic-panel-2,
#hg-basic-tab-3:checked ~ .hg-basic-panel-3,
#hg-basic-tab-4:checked ~ .hg-basic-panel-4 {
  display: block;
}

/* Estados únicos para Plus */
#hg-plus-tab-1:checked ~ .hg-tab-buttons label[for="hg-plus-tab-1"],
#hg-plus-tab-2:checked ~ .hg-tab-buttons label[for="hg-plus-tab-2"],
#hg-plus-tab-3:checked ~ .hg-tab-buttons label[for="hg-plus-tab-3"],
#hg-plus-tab-4:checked ~ .hg-tab-buttons label[for="hg-plus-tab-4"] {
  background: #2f7df6;
  color: #fff;
  border-color: #2f7df6;
}

#hg-plus-tab-1:checked ~ .hg-plus-panel-1,
#hg-plus-tab-2:checked ~ .hg-plus-panel-2,
#hg-plus-tab-3:checked ~ .hg-plus-panel-3,
#hg-plus-tab-4:checked ~ .hg-plus-panel-4 {
  display: block;
}

/* Estados únicos para Family */
#hg-family-tab-1:checked ~ .hg-tab-buttons label[for="hg-family-tab-1"],
#hg-family-tab-2:checked ~ .hg-tab-buttons label[for="hg-family-tab-2"],
#hg-family-tab-3:checked ~ .hg-tab-buttons label[for="hg-family-tab-3"],
#hg-family-tab-4:checked ~ .hg-tab-buttons label[for="hg-family-tab-4"] {
  background: #ff5f5a;
  color: #fff;
  border-color: #ff5f5a;
}

#hg-family-tab-1:checked ~ .hg-family-panel-1,
#hg-family-tab-2:checked ~ .hg-family-panel-2,
#hg-family-tab-3:checked ~ .hg-family-panel-3,
#hg-family-tab-4:checked ~ .hg-family-panel-4 {
  display: block;
}

@media (max-width: 980px) {
  .hg-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .hg-desktop-tabs {
    display: none;
  }

  .hg-mobile-accordion {
    display: block;
  }

  .hg-plan-hero {
    padding: 28px 18px;
    margin-bottom: 20px;
  }

  .hg-plan-hero h2 {
    font-size: 28px;
  }

  .hg-plan-hero p {
    font-size: 16px;
  }

  .hg-card-grid {
    grid-template-columns: 1fr;
  }

  .hg-info-card {
    padding: 18px;
  }

  .hg-table,
  .hg-table tbody,
  .hg-table tr,
  .hg-table th,
  .hg-table td {
    display: block;
    width: 100%;
  }

  .hg-table tr {
    padding: 12px 0;
    border-bottom: 1px solid #eee6f5;
  }

  .hg-table th,
  .hg-table td {
    border-bottom: none;
    padding: 4px 12px;
  }
}