/*
 * IEICII HUB · v267.4.13
 * Portada pública: Membresías y Servicios como bloques independientes.
 *
 * Filosofía:
 * - no colores rígidos por tema;
 * - usar variables ya existentes del sistema;
 * - respetar claro/oscuro y futuros temas;
 * - mantener lectura institucional y crecimiento independiente.
 */

body.public-body .home-membership-services-v118{
  display:block!important;
  width:100%;
  max-width:100%;
}

/* Cada área se convierte en una sección visual autónoma */
body.public-body .home-membership-panel-v118,
body.public-body .home-services-panel-v118{
  position:relative;
  width:100%;
  min-width:0;
}

body.public-body .home-membership-panel-v118{
  --home-section-accent:var(--brand,#2563eb);
  --home-section-accent-2:var(--brand-2,var(--brand,#2563eb));
  margin-bottom:clamp(44px,6vw,72px);
  padding-bottom:clamp(38px,5vw,58px);
  border-bottom:1px solid var(--line);
}

body.public-body .home-services-panel-v118{
  --home-section-accent:var(--brand-2,var(--brand,#2563eb));
  --home-section-accent-2:var(--brand,#2563eb);
  margin-bottom:0;
}

/* Cabeceras independientes */
body.public-body .home-membership-panel-v118 .section-head-v21,
body.public-body .home-services-panel-v118 .section-head-v21{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:100%;
  margin-bottom:20px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

body.public-body .home-membership-panel-v118 .section-head-v21>div,
body.public-body .home-services-panel-v118 .section-head-v21>div{
  min-width:0;
}

body.public-body .home-membership-panel-v118 .section-head-v21 h2,
body.public-body .home-services-panel-v118 .section-head-v21 h2{
  margin:.35rem 0 0!important;
  color:var(--text)!important;
  line-height:1.08!important;
}

body.public-body .home-membership-panel-v118 .eyebrow,
body.public-body .home-services-panel-v118 .eyebrow{
  color:var(--home-section-accent)!important;
  border-color:color-mix(in srgb,var(--home-section-accent) 32%,var(--line))!important;
  background:color-mix(in srgb,var(--home-section-accent) 9%,var(--surface))!important;
}

body.public-body .home-membership-panel-v118 .section-head-v21>.btn,
body.public-body .home-services-panel-v118 .section-head-v21>.btn{
  flex:0 0 auto;
  min-height:42px;
  white-space:nowrap;
}

/* ================================================================
   MEMBRESÍAS: protagonista, tres tarjetas equivalentes
   ================================================================ */
body.public-body .home-membership-grid-v118{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}

body.public-body .membership-plan-v118{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  min-height:100%!important;
  padding:20px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  text-decoration:none!important;
  overflow:hidden;
  box-shadow:0 8px 24px color-mix(in srgb,var(--text) 5%,transparent);
}

body.public-body .membership-plan-v118::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--home-section-accent),var(--home-section-accent-2));
}

body.public-body .membership-plan-v118:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--home-section-accent) 42%,var(--line))!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--text) 9%,transparent)!important;
}

body.public-body .membership-plan-v118>header{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 12px!important;
  padding:0 0 10px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:transparent!important;
}

body.public-body .membership-plan-v118>header h3{
  margin:0!important;
  color:var(--text)!important;
}

body.public-body .plan-badge-v118{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  min-width:32px!important;
  height:32px!important;
  padding:0 8px!important;
  border:1px solid color-mix(in srgb,var(--home-section-accent) 18%,var(--line))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--home-section-accent) 10%,var(--surface))!important;
  color:var(--home-section-accent)!important;
  font-weight:800!important;
}

body.public-body .plan-desc-v118{
  min-height:4.6em;
  margin:0 0 14px!important;
  color:var(--muted)!important;
}

body.public-body .membership-features-v118{
  display:grid!important;
  gap:7px!important;
  margin:0 0 18px!important;
  padding:0!important;
  list-style:none!important;
}

body.public-body .membership-features-v118 li{
  position:relative;
  padding-left:18px;
  color:var(--text)!important;
}

body.public-body .membership-features-v118 li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.58em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--home-section-accent);
}

body.public-body .plan-price-v118{
  margin-top:auto!important;
  padding-top:15px!important;
  border-top:1px solid var(--line)!important;
}

body.public-body .plan-price-v118 span{
  color:var(--muted)!important;
}

body.public-body .plan-price-v118 strong{
  color:var(--text)!important;
}

body.public-body .membership-plan-v118>em{
  color:var(--home-section-accent)!important;
  font-style:normal!important;
  font-weight:800!important;
}

/* ================================================================
   SERVICIOS: sección independiente y horizontal
   ================================================================ */
body.public-body .home-services-panel-v118{
  padding-top:0;
}

body.public-body .home-services-grid-v118{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
}

body.public-body .service-card-v118{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:88px!important;
  padding:15px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  text-decoration:none!important;
  box-shadow:0 7px 20px color-mix(in srgb,var(--text) 4%,transparent);
}

body.public-body .service-card-v118:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--home-section-accent) 40%,var(--line))!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--text) 8%,transparent)!important;
}

body.public-body .service-card-v118>i{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border:1px solid color-mix(in srgb,var(--home-section-accent) 16%,var(--line))!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--home-section-accent) 10%,var(--surface))!important;
  color:var(--home-section-accent)!important;
}

body.public-body .service-card-v118 span{
  color:var(--muted)!important;
}

body.public-body .service-card-v118 strong{
  color:var(--text)!important;
}

/* Estado vacío consistente con el theme */
body.public-body .public-empty-v118{
  border-color:var(--line)!important;
  background:var(--surface-2)!important;
  color:var(--muted)!important;
}
body.public-body .public-empty-v118 strong{
  color:var(--text)!important;
}

/* ================================================================
   DARK THEME: no redefine paleta, solo conserva contraste estructural.
   Las variables del theme siguen siendo la fuente.
   ================================================================ */
html[data-theme="dark"] body.public-body .membership-plan-v118,
html[data-theme="dark"] body.public-body .service-card-v118{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

html[data-theme="dark"] body.public-body .membership-plan-v118:hover,
html[data-theme="dark"] body.public-body .service-card-v118:hover{
  border-color:color-mix(in srgb,var(--home-section-accent) 48%,var(--line))!important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1100px){
  body.public-body .home-services-grid-v118{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:900px){
  body.public-body .home-membership-grid-v118{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.public-body .home-membership-panel-v118 .section-head-v21,
  body.public-body .home-services-panel-v118 .section-head-v21{
    align-items:flex-start!important;
  }
}

@media (max-width:640px){
  body.public-body .home-membership-grid-v118,
  body.public-body .home-services-grid-v118{
    grid-template-columns:1fr!important;
  }

  body.public-body .home-membership-panel-v118 .section-head-v21,
  body.public-body .home-services-panel-v118 .section-head-v21{
    flex-direction:column!important;
  }

  body.public-body .home-membership-panel-v118 .section-head-v21>.btn,
  body.public-body .home-services-panel-v118 .section-head-v21>.btn{
    width:100%;
    justify-content:center;
  }

  body.public-body .plan-desc-v118{
    min-height:0;
  }
}