/* =========================
   Programa Impulsa T - Overlay
   ========================= */

.impulsa-overlay[hidden] { display: none !important; }
.impulsa-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.impulsa-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.80);
  backdrop-filter: blur(6px);
}

.impulsa-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 95vh;
  overflow-y: auto;
  background: hsl(var(--background));
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(2,6,23,.4);
  transform: scale(.98);
  animation: iu-pop .3s ease-out both;
}
@keyframes iu-pop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Header image */
.impulsa-hero { position: relative; }
.impulsa-hero__img { position: relative; height: 16rem; }
@media (min-width:768px){ .impulsa-hero__img{ height: 20rem; } }

.impulsa-hero__img-el {
  width: 100%; height: 100%; object-fit: cover;
  border-top-left-radius: 1rem; border-top-right-radius: 1rem;
  display: block;
}
.impulsa-hero__shade {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  border-top-left-radius: 1rem; border-top-right-radius: 1rem;
}

.impulsa-close {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: hsla(var(--background)/0.2);
  backdrop-filter: blur(6px);
  border: 1px solid hsla(var(--primary)/0.2);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
  z-index: 2;
}
.impulsa-close:hover {
  background: hsla(var(--background)/0.3);
  transform: translateY(-1px);
}

.impulsa-hero__content {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem;
  z-index: 1;
}
.impulsa-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: 2px .75rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 12px;
  margin-bottom: .75rem;
}
.impulsa-title {
  margin: 0 0 .5rem; color: #fff; font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}
.impulsa-subhead { margin: 0; color: rgba(255,255,255,.9); line-height: 1.6; }

/* Body */
.impulsa-body { padding: 1.5rem; }
@media (min-width:768px){ .impulsa-body{ padding: 2rem; } }

.impulsa-grid { display: grid; gap: 2rem; }
@media (min-width:1024px){
  .impulsa-grid { grid-template-columns: 2fr 1fr; }
}

/* Aside (acciones) */
.impulsa-actions { order: 1; }
@media (min-width:1024px){ .impulsa-actions { order: 2; } }

.impulsa-actions__card {
  position: sticky; top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, hsla(var(--primary)/0.05), hsl(var(--background)), hsla(var(--secondary)/0.05));
  border: 1px solid hsla(var(--primary)/0.1);
  border-radius: .875rem;
}
.impulsa-actions__header { text-align: center; margin-bottom: 1rem; }
.impulsa-actions__title { margin: 0 0 .25rem; color: hsl(var(--foreground)); font-weight: 600; }
.impulsa-actions__subtitle { margin: 0; color: hsl(var(--muted-foreground)); font-size: .9rem; }
.impulsa-actions__buttons { display: grid; gap: .75rem; justify-content: center; }

/* Botones */
.impulsa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
  border: 0;
  padding: 12px 0px;
  width: 226px;
  min-width: 226px;
  font-size: .875rem;
}
.impulsa-btn svg { width:16px; height:16px; flex: 0 0 auto; stroke: #fff }

.impulsa-btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.impulsa-btn--primary:hover { background: hsla(var(--primary)/0.9); transform: translateY(-1px); }

.impulsa-btn--outline {
  background: transparent;
  border: 1px solid hsl(var(--secondary));
  color: hsl(var(--secondary));
}
.impulsa-btn--outline:hover { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); transform: translateY(-1px); }

.impulsa-btn--accent {
  background: #f59e0b;
  color: #fff;
}
.impulsa-btn--accent:hover { background: #d97706; transform: translateY(-1px); }

/* Main */
.impulsa-main { order: 2; }
@media (min-width:1024px){ .impulsa-main { order: 1; } }

/* Features */
.impulsa-feats { margin-bottom: 2rem; }
.impulsa-h2 {
  font-size: 1rem; font-weight: 600; color: hsl(var(--foreground));
  margin: 0 0 .75rem;
}
.impulsa-feats__grid { display: grid; gap: .75rem; }

.impulsa-feat {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem; border-radius: .875rem;
}
.impulsa-feat__icon {
  width: 40px; height: 40px; border-radius: .5rem; flex: 0 0 auto;
  display: grid; place-items: center;
}
.impulsa-feat__icon svg { width:20px; height:20px; stroke: currentColor; }
.impulsa-feat__title { margin: 0 0 .25rem; font-weight: 500; color: hsl(var(--foreground)); font-size: 1rem; }
.impulsa-feat__desc { margin: 0; color: hsl(var(--muted-foreground)); font-size: .9rem; }

/* variantes */
.impulsa-feat--primary  { background: hsla(var(--primary)/0.05); }
.impulsa-feat--primary  .impulsa-feat__icon { background: hsla(var(--primary)/0.10); color: hsl(var(--primary)); }
.impulsa-feat--secondary{ background: hsla(var(--secondary)/0.05); }
.impulsa-feat--secondary .impulsa-feat__icon { background: hsla(var(--secondary)/0.10); color: hsl(var(--secondary)); }
.impulsa-feat--amber    { background: hsla(38 92% 50% / .07); }
.impulsa-feat--amber .impulsa-feat__icon { background: hsla(38 92% 50% / .20); color: #b45309; }

/* Info PME/IDPS */
.impulsa-info {
  background: hsla(var(--muted)/1);
  border: 1px solid hsla(var(--primary)/0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: .875rem;
}
.impulsa-info__intro { line-height:1.65; margin: 0 0 1rem; color: hsl(var(--muted-foreground)); }
.highlight {
   font-weight: 700;
   background-color: hsl(var(--primary)/.1);
   border-radius: 4px;
   padding: 4px 8px;
}
.impulsa-info__panel {
  background: hsla(var(--background)/0.6);
  backdrop-filter: blur(6px);
  border: 1px solid hsla(var(--background)/0.4);
  border-radius: .875rem;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
}
.impulsa-info__list { display: grid; gap: .75rem; grid-template-columns: 1fr; padding:0; }
@media (min-width:768px){ .impulsa-info__list { grid-template-columns: repeat(3, 1fr); } }
.impulsa-info__item { display: flex; align-items: center; gap: .5rem; }
.impulsa-info__bullet {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9999px; flex: 0 0 auto;
  color: white;
}
.impulsa-info__item:nth-child(3n + 1) .impulsa-info__bullet {
  background: linear-gradient(135deg, hsl(var(--primary)), hsla(var(--primary)/0.7));
}
.impulsa-info__item:nth-child(3n + 2) .impulsa-info__bullet {
  background: linear-gradient(135deg, hsl(var(--secondary)), hsla(var(--secondary)/0.7));
}
.impulsa-info__item:nth-child(3n + 3) .impulsa-info__bullet {
  background: linear-gradient(135deg, hsl(var(--accent)), hsla(var(--accent)/0.7));
}
.impulsa-info__bullet svg { width:12px; height:12px; stroke:#fff; }
.impulsa-info__text { font-size: .85rem; color: hsl(var(--muted-foreground)); }
.impulsa-info__outro { line-height:1.65; margin: 0; color: hsl(var(--muted-foreground)); }

/* Scroll dentro del modal */
.impulsa-modal::-webkit-scrollbar { width: 10px; }
.impulsa-modal::-webkit-scrollbar-thumb { background: hsla(var(--foreground)/0.2); border-radius: 9999px; }

/* =========================
   Ajustes Mobile
   ========================= */
@media (max-width: 767px) {
  .impulsa-overlay {
    align-items: stretch;
    justify-content: stretch;
  }

  .impulsa-modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .impulsa-hero__img {
    height: 14rem;
  }

  /* quitar border radius en mobile */
  .impulsa-hero__img-el,
  .impulsa-hero__shade {
    border-radius: 0 !important;
  }

  .impulsa-hero__shade {
    background: rgba(0,0,0,0.65);
  }

  .impulsa-hero__content {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    text-align: left;
  }

  .impulsa-badge {
    font-size: 0.7rem;
    padding: 2px 0.5rem;
    margin-bottom: 0.5rem;
  }

  .impulsa-title {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
  }

  .impulsa-subhead {
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.9);
  }

  .impulsa-body {
    padding: 1rem;
  }

  /* botones full-width en mobile */
  .impulsa-btn {
    width: 100% !important;
    min-width: unset;
  }
}