:root{
  --brand-orange:#e47922;   /* ajusta si tu variable de marca difiere */
  --brand-orange-700:#c96516;
  --pill-border:#d9e3ef;
  --text:#0f172a;
  --white:#fff;
  --shadow:0 6px 20px rgba(0,0,0,.12);
}

/* Botón “compacto → píldora” */
.smart-btn{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  height:44px;
  padding:0 11px;
  border:1.5px solid var(--pill-border);
  border-radius:999px;
  background:var(--white);
  color:var(--brand-orange);
  transition:width .25s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  width:44px;                 /* estado compacto tipo “círculo con ícono” */
  overflow:hidden;

}
.smart-btn svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto;   transition: transform .6s ease;}
.smart-btn:hover svg {
  transform: rotate(180deg);
}

.smart-btn .smart-label{
  white-space:nowrap;
  font-weight:600;
  color:#fff;                 /* visible solo en hover porque el fondo será naranja */
}

/* Hover = estilo gov.co naranja, expandido con etiqueta */
.smart-btn:hover,
.smart-btn:focus{
  width:210px;                /* expande a píldora */
  background:var(--brand-orange);
  color:#fff;
  border-color:transparent;
  outline:0;
}

/* modalAJ */
.modalAJ{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;    /* centro exacto */
}
.modalAJ[hidden]{display:none}
.modalAJ{position:fixed;inset:0;z-index:1000}
.modalAJ__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .22s ease;
}

/* Card en modo burbuja */
.modalAJ__card {
  position: relative;
  width: min(560px, 92vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: scale(0.86);
  opacity: 0;
  transition:
    transform .38s cubic-bezier(.16, .84, .44, 1),
    opacity .38s ease;
  will-change: transform, opacity;
}


.modalAJ__header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid #eef2f7
}
.modalAJ__header h3{margin:0;font-size:16px;color:var(--text)}
.modalAJ__close{
  all:unset;cursor:pointer;font-size:28px;line-height:1;padding:4px 6px;border-radius:8px
}
.modalAJ__close:hover{background:#f2f4f8}
.modalAJ__body{
  display:flex;gap:12px;justify-content:center;align-items:center;
  padding:18px 16px 22px
}
/* Estado abierto */
.modalAJ.is-open .modalAJ__overlay{opacity:1}
.modalAJ.is-open .modalAJ__card{transform:scale(1); opacity:1}

/* Estado cerrando (contracción) */
.modalAJ.is-closing .modalAJ__overlay{opacity:0}
.modalAJ.is-closing .modalAJ__card{transform:scale(.86); opacity:0}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .modalAJ__overlay, .modalAJ__card{transition:none}
}
/* Botones de acción internos */
.action-btn{
  all:unset;cursor:pointer;box-sizing:border-box;
  padding:10px 16px;border-radius:999px;
  background:var(--brand-orange);color:#fff;
  box-shadow:0 2px 8px rgba(228,121,34,.35)
}
.action-btn:hover{background:var(--brand-orange-700)}
.action-btn--alt{
  background:#0d6efd;               /* azul institucional; ajusta a tu token */
  box-shadow:0 2px 8px rgba(13,110,253,.25)
}
.action-btn--alt:hover{filter:brightness(.92)}



.modalAJ__intro{
  padding:12px 16px 0;
  font-size:14px;
  color:#475569;
}

.modalAJ__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  padding: 16px;
}
@media (max-width:600px){
  .modalAJ__grid{grid-template-columns:1fr}
}

.opt-card{
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  
  /* --- NUEVO: alineación vertical y alturas iguales --- */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;  /* ajusta según el contenido */
}
.opt-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-color: #dde7f3;
}

.opt-card__head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.opt-card__head h4{
  margin: 0;
  font-size: 16px;
  color: #0f172a;
  font-weight: 700;
}
.opt-ico{
  width: 22px;
  height: 22px;
  fill: var(--brand-orange);
}

.opt-card__desc{
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #64748b;
  flex-grow: 1; /* mantiene el texto flexible para alinear botones */
}

/* Botones dentro de la tarjeta */
.btn-cta{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:999px; font-weight:700; font-size:14px;
  background:var(--brand-orange); color:#fff; box-shadow:0 2px 8px rgba(228,121,34,.35);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ filter:brightness(.96); box-shadow:0 4px 14px rgba(228,121,34,.45)}
.btn-cta:active{ transform: scale(.98) }

.btn-cta--alt{
  background:#0d6efd; box-shadow:0 2px 8px rgba(13,110,253,.25);
}
.btn-cta--alt:hover{ filter:brightness(.95); box-shadow:0 4px 14px rgba(13,110,253,.35) }

.smart-btn{
	display:none;
}