/* ==========================================================================
   Acredita EMS — tema sobre Bootstrap 5.3
   Identidad ANEP: Source Sans (tipografía complementaria), violeta institucional
   Pantone 287 (#003087) para acciones; cian #00AFEF solo en líneas separadoras.
   ========================================================================== */

/* Tipografía local (Source Sans 3, licencia OFL) */
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/source-sans-3-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/source-sans-3-latin-900-normal.woff2') format('woff2');
}

:root {
  --ems-violeta: #003087;
  --ems-violeta-oscuro: #001E57;
  --ems-violeta-claro: #E8EEF9;
  --ems-cian: #00AFEF;
  --ems-verde: #94C11E;
  --ems-naranja: #F7931D;
  --ems-magenta: #ED028C;
  --ems-purpura: #90268F;
  --ems-amarillo: #FFC107;
  --ems-gris: #F3F6FA;
  --ems-borde: #E3E8F0;

  /* Bootstrap */
  --bs-body-font-family: 'Source Sans 3', 'Source Sans Pro', Arial, Helvetica, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-color: #192335;
  --bs-secondary-color: #5A6B85;
  --bs-primary: #003087;
  --bs-primary-rgb: 0, 48, 135;
  --bs-link-color: #003087;
  --bs-link-color-rgb: 0, 48, 135;
  --bs-link-hover-color: #001E57;
  --bs-link-hover-color-rgb: 0, 30, 87;
  --bs-border-color: #E3E8F0;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-focus-ring-color: rgba(0, 175, 239, .5);
}

@media (min-width: 992px) { :root { --bs-body-font-size: 1.125rem; } }

svg { flex-shrink: 0; }

/* Lo oculto con el atributo hidden queda oculto aunque tenga clases de Bootstrap como d-flex */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ems-cian); outline-offset: 2px; }

/* ---------- Botones ---------- */
.btn { font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.btn-lg { min-height: 58px; font-size: 1.15rem; padding-inline: 1.5rem; }
.btn-primary {
  --bs-btn-bg: var(--ems-violeta); --bs-btn-border-color: var(--ems-violeta);
  --bs-btn-hover-bg: var(--ems-violeta-oscuro); --bs-btn-hover-border-color: var(--ems-violeta-oscuro);
  --bs-btn-active-bg: var(--ems-violeta-oscuro); --bs-btn-active-border-color: var(--ems-violeta-oscuro);
  --bs-btn-disabled-bg: var(--ems-violeta); --bs-btn-disabled-border-color: var(--ems-violeta);
  --bs-btn-focus-shadow-rgb: 0, 175, 239;
}
.btn-outline-primary {
  --bs-btn-color: var(--ems-violeta); --bs-btn-border-color: var(--ems-violeta);
  --bs-btn-hover-bg: var(--ems-violeta-claro); --bs-btn-hover-color: var(--ems-violeta); --bs-btn-hover-border-color: var(--ems-violeta);
  --bs-btn-active-bg: var(--ems-violeta-claro); --bs-btn-active-color: var(--ems-violeta);
  border-width: 2px;
}
.btn-light { --bs-btn-color: var(--ems-violeta); --bs-btn-hover-color: var(--ems-violeta-oscuro); font-weight: 800; }
.btn-outline-light { border-width: 2px; }

/* ---------- Encabezado ---------- */
.navbar-ems { background: var(--ems-violeta); min-height: 76px; }
.navbar-ems .navbar-brand img { height: 28px; width: auto; }
.navbar-ems .nav-link { color: #fff; font-weight: 600; border-radius: .6rem; padding: .6rem .9rem !important; }
.navbar-ems .nav-link:hover, .navbar-ems .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .1); }
.navbar-ems .nav-link.active { color: #fff; background: rgba(255, 255, 255, .16); font-weight: 700; }
.navbar-ems .navbar-toggler {
  color: #fff; border: 0; background: rgba(255, 255, 255, .14); border-radius: .75rem;
  min-height: 48px; padding: 0 .9rem; font-weight: 700; align-items: center; gap: .5rem;
}
@media (max-width: 991.98px) { .navbar-ems .navbar-toggler { display: inline-flex; } }
.navbar-ems .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }
.navbar-ems .btn-tel { border-radius: 999px; }
@media (min-width: 992px) {
  .navbar-ems { min-height: 84px; }
  .navbar-ems .navbar-brand img { height: 38px; }
}
@media (max-width: 991.98px) {
  .navbar-ems .navbar-collapse { padding: .75rem 0 1rem; }
  .navbar-ems .nav-link { font-size: 1.1rem; min-height: 52px; display: flex; align-items: center; }
}

.stripe { display: flex; height: 6px; }
.stripe span { flex: 1; }
.stripe span:nth-child(1) { background: var(--ems-cian); }
.stripe span:nth-child(2) { background: var(--ems-verde); }
.stripe span:nth-child(3) { background: var(--ems-naranja); }
.stripe span:nth-child(4) { background: var(--ems-magenta); }
.stripe span:nth-child(5) { background: var(--ems-purpura); }
@media (min-width: 992px) { .stripe { height: 8px; } }

/* ---------- Tipografía ---------- */
.titulo-ems { font-size: 2.375rem; line-height: 1.02; font-weight: 900; letter-spacing: -.01em; color: var(--ems-violeta); }
.page-head .titulo-ems { font-size: 2.125rem; }
@media (min-width: 992px) {
  .titulo-ems { font-size: 4rem; line-height: 1; letter-spacing: -.015em; }
  .page-head .titulo-ems { font-size: 3.25rem; }
}
.lead { color: #3A4A63; font-weight: 400; }
.lead strong { color: var(--bs-body-color); }
.seccion-titulo { font-size: 1.5rem; font-weight: 800; line-height: 1.15; margin-bottom: .9rem; }
@media (min-width: 992px) { .seccion-titulo { font-size: 1.875rem; } }
.eyebrow { font-size: .9375rem; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.text-violeta { color: var(--ems-violeta) !important; }
.bg-gris { background: var(--ems-gris) !important; }
.bg-violeta { background: var(--ems-violeta) !important; }
.bg-violeta-claro { background: var(--ems-violeta-claro) !important; }

.badge-amarillo { background: var(--ems-amarillo); color: #3D2C00; font-weight: 700; font-size: .875rem; padding: .35rem .8rem; border-radius: 999px; }

/* ---------- Portada ---------- */
.logo-acredita { height: 44px; width: auto; align-self: flex-start; }
@media (min-width: 992px) { .logo-acredita { height: 60px; } }

.progreso { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.progreso li { flex: 1; height: 10px; border-radius: 5px; background: #D7DEEA; }
.progreso li.hecho { background: var(--ems-violeta); }
.progreso li.actual { background: var(--ems-cian); }

.etapas .list-group-item {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
  border: 2px solid var(--ems-borde) !important; border-radius: 1rem !important;
}
.etapas .list-group-item + .list-group-item { margin-top: .6rem; }
.etapa-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #B8C3D6;
  color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.etapa-hecha .etapa-num { border: 0; background: #EEF6DA; color: #4E6A0A; }
.etapa-actual { border-color: var(--ems-violeta) !important; background: var(--ems-violeta-claro) !important; }
.etapa-actual .etapa-num { border: 0; background: var(--ems-violeta); color: #fff; font-weight: 900; }
.etapa-actual .etapa-titulo { color: var(--ems-violeta); }
.etapa-titulo { font-weight: 800; }
.etapa-texto { font-size: .9375rem; color: var(--bs-secondary-color); }
.etapa-actual .etapa-texto { color: #3A4A63; }

.fecha { border-top: 8px solid var(--ems-naranja) !important; }
.fecha-dia { font-size: 3rem; line-height: 1; font-weight: 900; color: var(--ems-violeta); }
@media (min-width: 992px) { .fecha-dia { font-size: 4rem; } }

.aviso { background: #FEF0DF; color: #5C3300; }

.tarjeta-link { border: 2px solid var(--ems-borde); border-top-width: 8px; color: var(--bs-body-color); text-decoration: none; transition: background-color .15s; }
.tarjeta-link:hover { background: var(--ems-gris); color: var(--bs-body-color); }
.borde-cian { border-top-color: var(--ems-cian) !important; }
.borde-verde { border-top-color: var(--ems-verde) !important; }
.borde-naranja { border-top-color: var(--ems-naranja) !important; }
.borde-magenta { border-top-color: var(--ems-magenta) !important; }

.ayuda { background: var(--ems-violeta); color: #fff; }
.ayuda .text-ayuda { color: #DCE4F2; }

/* ---------- Pie ---------- */
.footer-ems { background: var(--ems-violeta-oscuro); color: #DCE4F2; font-size: .9375rem; }
.footer-ems img { height: 30px; width: auto; }
.footer-ems a { color: #fff; }
.linea-cian { height: 2px; width: 48px; background: var(--ems-cian); }

/* ---------- Consulta ---------- */
.input-ci { height: 60px; font-size: 1.5rem; letter-spacing: .08em; border: 2px solid #7A8BA6; }
.input-ci:focus { border-color: var(--ems-violeta); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.ci-ejemplo strong { color: var(--ems-violeta); letter-spacing: .06em; }
.captcha { min-height: 78px; }
/* Resultado de la consulta: misma estética que las tarjetas de "¿Qué quiere decir mi estado?" */
#resultado {
  display: flex; gap: .9rem; align-items: flex-start; background: #fff;
  border: 2px solid var(--ems-borde); border-top: 8px solid var(--ems-violeta);
}
#resultado:focus { outline: 3px solid var(--ems-cian); outline-offset: 2px; }
#resultado .res-icono { flex-shrink: 0; margin-top: .15rem; color: var(--ems-violeta); }
#resultado .res-texto { flex-grow: 1; min-width: 0; color: #3A4A63; }
#resultado .res-texto > :last-child { margin-bottom: 0; }
#resultado h2, #resultado h4 { font-size: 1.35rem; font-weight: 800; color: var(--bs-body-color); margin-bottom: .4rem; }
#resultado.res-ok { border-top-color: var(--ems-verde); }
#resultado.res-ok .res-icono { color: #4E6A0A; }
#resultado.res-no { border-top-color: var(--ems-magenta); }
#resultado.res-no .res-icono { color: #B5006B; }
#resultado.res-noinsc { border-top-color: var(--ems-cian); }
#resultado.res-noinsc .res-icono { color: #00739E; }
#resultado.res-proceso { border-top-color: var(--ems-naranja); }
#resultado.res-proceso .res-icono { color: #B85F00; }
.estado { border: 2px solid var(--ems-borde); border-top-width: 8px; }

/* ---------- Preguntas frecuentes (accordion de Bootstrap) ---------- */
.accordion-ems .accordion-item {
  border: 2px solid var(--ems-borde); border-radius: 1rem !important; overflow: hidden;
}
.accordion-ems .accordion-item + .accordion-item { margin-top: .6rem; }
.accordion-ems .accordion-button {
  font-size: 1.125rem; font-weight: 700; min-height: 64px; color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: inset 0 0 0 3px var(--bs-focus-ring-color);
}
.accordion-ems .accordion-button:not(.collapsed) { background: var(--ems-violeta-claro); color: var(--ems-violeta); font-weight: 800; box-shadow: none; }
.accordion-ems .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--ems-violeta); }
.accordion-ems .accordion-body { color: #3A4A63; }
.accordion-ems .accordion-body p:last-child, .accordion-ems .accordion-body ul:last-child { margin-bottom: 0; }
.accordion-ems mark { background: #FFF3CC; padding: 0 .1em; border-radius: 3px; }
.grupo-titulo { display: flex; align-items: center; gap: .6rem; scroll-margin-top: 1rem; }
.grupo-titulo::before { content: ""; width: 8px; height: 26px; border-radius: 4px; background: var(--grupo, var(--ems-cian)); }
.chip { border-radius: 999px; border: 2px solid var(--ems-borde); min-height: 44px; color: var(--bs-body-color); font-weight: 700; }
.chip:hover { background: var(--ems-gris); color: var(--bs-body-color); }
.chip-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.buscador .input-group-text { background: #fff; border: 2px solid #7A8BA6; border-right: 0; }
.buscador .form-control { height: 60px; font-size: 1.125rem; border: 2px solid #7A8BA6; border-left: 0; }
.buscador .form-control:focus { box-shadow: none; border-color: #7A8BA6; }
.buscador .input-group:focus-within { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); border-radius: var(--bs-border-radius); }
.buscador .btn-borrar { border: 2px solid #7A8BA6; border-left: 0; background: #fff; }

/* ---------- Reglamento ---------- */
.reglamento h2 {
  font-size: 1.375rem; font-weight: 800; color: var(--ems-violeta);
  padding-top: 1.25rem; margin: .5rem 0 .9rem; border-top: 2px solid var(--ems-cian); scroll-margin-top: 1rem;
}
.reglamento p { color: #3A4A63; max-width: 72ch; }
.reglamento p strong { color: var(--bs-body-color); }

@media (min-width: 992px) {
  .sticky-lg { position: sticky; top: 1.5rem; }
  .indice-scroll { max-height: calc(100vh - 3rem); overflow: auto; }
}

@media (prefers-reduced-motion: reduce) { .tarjeta-link { transition: none; } }

/* ---------- Menú desplegable "Documentos" ---------- */
.navbar-ems .dropdown-toggle::after { vertical-align: .15em; }
.dropdown-ems { border: 0; border-radius: 1rem; padding: .5rem; box-shadow: 0 12px 28px rgba(0, 30, 87, .18); min-width: 18rem; }
.dropdown-ems .dropdown-item { border-radius: .6rem; padding: .7rem .9rem; font-weight: 600; color: var(--bs-body-color); white-space: normal; }
.dropdown-ems .dropdown-item:hover, .dropdown-ems .dropdown-item:focus { background: var(--ems-violeta-claro); color: var(--ems-violeta); }
.dropdown-ems .dropdown-item.active { background: var(--ems-violeta); color: #fff; }
@media (max-width: 991.98px) {
  .dropdown-ems { background: rgba(255, 255, 255, .08); box-shadow: none; }
  .dropdown-ems .dropdown-item { color: #fff; min-height: 48px; display: flex; align-items: center; }
  .dropdown-ems .dropdown-item:hover, .dropdown-ems .dropdown-item:focus { background: rgba(255, 255, 255, .12); color: #fff; }
  .dropdown-ems .dropdown-item.active { background: rgba(255, 255, 255, .2); }
}

/* ---------- Orientaciones para postulantes ---------- */
.orientaciones { color: #3A4A63; }
.orientaciones p, .orientaciones li { max-width: 72ch; }
.orientaciones strong { color: var(--bs-body-color); }
.orient-h2 {
  font-size: 1.5rem; font-weight: 800; color: var(--ems-violeta); line-height: 1.2;
  padding-top: 1.5rem; margin: 1.5rem 0 1rem; border-top: 2px solid var(--ems-cian); scroll-margin-top: 1rem;
}
.orientaciones > .orient-h2:first-child, .orientaciones .orient-h2#sec1 { margin-top: 0; }
.orient-h3 { font-size: 1.2rem; font-weight: 800; color: var(--bs-body-color); margin: 1.5rem 0 .6rem; scroll-margin-top: 1rem; }
.subtitulo { font-size: 1.05rem; font-weight: 800; color: var(--ems-violeta); margin: 1.1rem 0 .3rem; }
@media (min-width: 992px) { .orient-h2 { font-size: 1.75rem; } .orient-h3 { font-size: 1.3rem; } }

.recuadro { background: var(--ems-violeta-claro); color: #2A3A55; }
.recuadro ul { margin-bottom: .5rem; }

.lista-check { list-style: none; padding-left: 0; }
.lista-check li { display: flex; gap: .6rem; align-items: flex-start; }
.lista-check li + li { margin-top: .5rem; }
.lista-check svg { margin-top: .2rem; }

.tabla-orient { --bs-table-bg: #fff; font-size: .975rem; }
.tabla-orient thead th { background: var(--ems-violeta); color: #fff; font-weight: 700; border: 0; padding: .8rem 1rem; }
.tabla-orient th[scope="row"] { color: var(--ems-violeta); font-weight: 800; min-width: 10rem; }
.tabla-orient td, .tabla-orient th[scope="row"] { padding: .9rem 1rem; }
.tabla-orient td p, .tabla-orient th p { margin-bottom: .4rem; }
.tabla-orient td p:last-child, .tabla-orient th p:last-child { margin-bottom: 0; }

.horario .dia { padding: 1rem; border: 2px solid var(--ems-borde); border-top: 8px solid var(--ems-violeta); background: #fff; }
.horario .dia-2 { border-top-color: var(--ems-verde); }
.horario .dia-titulo { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 800; color: var(--bs-body-color); margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.horario .bloque { display: flex; gap: .75rem; align-items: center; padding: .75rem .9rem; border-radius: .75rem; background: var(--ems-gris); color: var(--bs-body-color); }
.horario .bloque.b1 svg { color: var(--ems-violeta); }
.horario .bloque.b2 svg { color: #4E6A0A; }
.horario .bloque .small svg { color: inherit; }
.horario .recreo { background: transparent; border: 2px dashed var(--ems-borde); color: var(--bs-secondary-color); padding-block: .5rem; }
.horario .taza { width: 24px; height: 2px; }

.tarjeta-material { border: 2px solid var(--ems-borde); border-top-width: 8px; background: #fff; }
.tabla-orient thead th, .tabla-orient thead th * { color: #fff !important; }
@media (max-width: 767.98px) {
  .tabla-orient thead { display: none; }
  .tabla-orient tr, .tabla-orient th[scope="row"], .tabla-orient td { display: block; width: 100%; }
  .tabla-orient tr + tr { border-top: 2px solid var(--ems-borde); }
  .tabla-orient th[scope="row"] { padding-bottom: .25rem; border-bottom: 0; }
  .tabla-orient td { padding-top: 0; }
}

/* ==========================================================================
   Escritorio (≥ 992px): escala más contenida.
   En celular se mantienen los tamaños grandes; en pantallas anchas se bajan
   tipografías, botones y espacios para que la página no resulte tan imponente.
   ========================================================================== */
.titulo-etapa { font-size: 1.6rem; }

@media (min-width: 992px) {
  :root { --bs-body-font-size: 1rem; }
  body { line-height: 1.55; }

  /* Encabezado */
  .navbar-ems { min-height: 70px; }
  .navbar-ems .navbar-brand img { height: 32px; }
  .navbar-ems .nav-link { font-size: .95rem; padding: .5rem .75rem !important; }
  .navbar-ems .btn-tel { font-size: .9rem; padding: .4rem 1rem; }
  .stripe { height: 6px; }

  /* Títulos */
  .titulo-ems { font-size: 2.75rem; line-height: 1.05; }
  .page-head .titulo-ems { font-size: 2.25rem; }
  .page-head { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
  .lead { font-size: 1.1rem; }
  .seccion-titulo { font-size: 1.35rem; margin-bottom: .75rem; }
  .titulo-etapa { font-size: 1.5rem; }
  .eyebrow { font-size: .8rem; }
  .logo-acredita { height: 46px; }

  /* Botones */
  .btn-lg { min-height: 48px; font-size: 1rem; padding-inline: 1.25rem; }

  /* Portada */
  .etapas .list-group-item { padding: .65rem .9rem; gap: .75rem; }
  .etapas .list-group-item + .list-group-item { margin-top: .45rem; }
  .etapa-num { width: 32px; height: 32px; font-size: .9rem; }
  .etapa-texto { font-size: .875rem; }
  .fecha-dia { font-size: 2.75rem; }
  .fecha .fs-5 { font-size: 1.05rem !important; }
  .tarjeta-link .fs-5 { font-size: 1.05rem !important; }
  .ayuda h2 { font-size: 1.25rem; }
  section.bg-gris.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .container.py-lg-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }

  /* Consulta */
  .input-ci { height: 52px; font-size: 1.25rem; }

  /* Preguntas frecuentes */
  .accordion-ems .accordion-button { font-size: 1rem; min-height: 54px; padding: .75rem 1.1rem; }
  .accordion-ems .accordion-body { padding: .9rem 1.1rem 1.1rem; }
  .buscador .form-control { height: 52px; font-size: 1rem; }
  .buscador label { font-size: 1.1rem !important; }
  .chip { min-height: 40px; font-size: .9rem; }

  /* Orientaciones y reglamento */
  .orient-h2 { font-size: 1.4rem; padding-top: 1.25rem; margin: 1.25rem 0 .8rem; }
  .orient-h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
  .subtitulo { font-size: 1rem; }
  .reglamento h2 { font-size: 1.25rem; }
  .tabla-orient { font-size: .925rem; }
  .horario .dia-titulo { font-size: 1rem; }

  /* Pie */
  .footer-ems { font-size: .875rem; }
  .footer-ems .container { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}

/* ---------- Ejemplos de actividades ---------- */
.tarjeta-area { border: 2px solid var(--ems-borde); border-top-width: 8px; background: #fff; }
.tarjeta-area.proximamente { background: var(--ems-gris); }
.ejemplo-link {
  border: 2px solid var(--ems-borde); color: var(--bs-body-color); text-decoration: none; background: #fff;
  transition: border-color .15s, background-color .15s;
}
.ejemplo-link:hover, .ejemplo-link:focus-visible { border-color: var(--ems-violeta); background: var(--ems-violeta-claro); color: var(--ems-violeta); }
.ejemplo-link svg { color: var(--ems-violeta); }
.ejemplo-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ems-violeta); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900;
}
@media (prefers-reduced-motion: reduce) { .ejemplo-link { transition: none; } }
.borde-violeta { border-top-color: var(--ems-violeta) !important; }

/* ---------- Portada: destacado de ejemplos ---------- */
.destacado-ejemplos { background: var(--ems-violeta-claro); border: 2px solid #C9D6EE; }
.destacado-icono {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--ems-violeta);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 991.98px) { .destacado-icono { width: 48px; height: 48px; } .destacado-icono svg { width: 26px; height: 26px; } }