/* ============================================================
   AMIR Certificados
   Paleta tomada del logo · azul #004A94 · verde #14972C
   ============================================================ */

:root {
  /* Marca */
  --azul:         #004A94;
  --azul-hover:   #003A75;
  --azul-suave:   #E8F0F9;
  --azul-borde:   #B8D2EA;

  --verde:        #14972C;
  --verde-hover:  #0E7522;
  --verde-suave:  #EAF6EC;

  /* Neutros */
  --texto:        #1D1D1F;
  --texto-sec:    #6E6E73;
  --texto-ter:    #86868B;
  --borde:        #D2D2D7;
  --borde-suave:  #E8E8ED;
  --fondo:        #FFFFFF;
  --fondo-alt:    #F5F5F7;

  /* Estados */
  --error:        #C7332B;
  --error-suave:  #FDECEA;

  /* Sistema */
  --radio:        18px;
  --radio-sm:     12px;
  --radio-pill:   980px;
  --sombra:       0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sombra-alta:  0 4px 16px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);
  --transicion:   .4s cubic-bezier(.4,0,.2,1);
  --transicion-r: .25s cubic-bezier(.4,0,.2,1);
  --ancho:        980px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: var(--azul); text-decoration: none; transition: opacity var(--transicion-r); }
a:hover { opacity: .7; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.1; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }

.subtitulo {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--texto-sec);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: .75rem 0 0;
}

.texto-chico { font-size: .875rem; color: var(--texto-sec); }
.texto-mini  { font-size: .8125rem; color: var(--texto-ter); }

/* ---------- Layout ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

.seccion { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.seccion-alt { background: var(--fondo-alt); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--borde-suave);
}

.barra-interna {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca { display: flex; align-items: center; gap: .7rem; }
.marca img { height: 38px; width: 38px; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong {
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--texto);
}
.marca-texto span { font-size: .72rem; color: var(--texto-ter); letter-spacing: .01em; }

.barra-nav { display: flex; gap: 1.6rem; font-size: .875rem; }
.barra-nav a { color: var(--texto-sec); }
.barra-nav a:hover { color: var(--texto); opacity: 1; }

/* ---------- Portada ---------- */
.portada { text-align: center; padding: clamp(3rem, 9vw, 6rem) 0 clamp(2rem, 5vw, 3rem); }

.filete {
  width: 54px; height: 4px; border-radius: 4px;
  margin: 0 auto 1.75rem;
  background: linear-gradient(90deg, var(--azul) 0%, var(--verde) 100%);
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--sombra);
}

.tarjeta-busqueda { max-width: 560px; margin: 2.5rem auto 0; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 1.1rem; text-align: left; }

.campo label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--texto-sec);
  margin-bottom: .45rem;
  letter-spacing: .005em;
}

.control {
  width: 100%;
  padding: .95rem 1.1rem;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color var(--transicion-r), box-shadow var(--transicion-r);
  appearance: none;
}

.control:hover { border-color: #B0B0B8; }

.control:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0,74,148,.12);
}

.control::placeholder { color: var(--texto-ter); }

select.control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236E6E73' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

.fila { display: grid; grid-template-columns: 150px 1fr; gap: .75rem; }

@media (max-width: 520px) {
  .fila { grid-template-columns: 1fr; }
}

/* Input de documento: numeros grandes y aireados */
.control-doc {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: center;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
  background: var(--azul);
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  cursor: pointer;
  transition: background var(--transicion-r), transform var(--transicion-r),
              box-shadow var(--transicion-r), opacity var(--transicion-r);
  text-decoration: none;
  white-space: nowrap;
}

.boton:hover { background: var(--azul-hover); transform: translateY(-1px); opacity: 1; }
.boton:active { transform: translateY(0) scale(.985); }
.boton:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0,74,148,.25); }
.boton[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.boton-bloque { width: 100%; }

.boton-verde { background: var(--verde); }
.boton-verde:hover { background: var(--verde-hover); }
.boton-verde:focus-visible { box-shadow: 0 0 0 4px rgba(20,151,44,.25); }

.boton-linea {
  background: transparent;
  color: var(--azul);
  border-color: var(--borde);
}
.boton-linea:hover { background: var(--azul-suave); border-color: var(--azul-borde); }

.boton-chico { padding: .6rem 1.25rem; font-size: .9375rem; }

/* ---------- Certificados encontrados ---------- */
.lista-certificados { display: grid; gap: 1rem; margin-top: 2rem; }

.cert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--fondo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform var(--transicion-r), box-shadow var(--transicion-r),
              border-color var(--transicion-r);
}

.cert:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  border-color: var(--borde);
}

.cert-datos { min-width: 0; }

.cert-curso {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .3rem;
}

.cert-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-size: .875rem;
  color: var(--texto-sec);
}

@media (max-width: 620px) {
  .cert { flex-direction: column; align-items: stretch; text-align: left; }
  .cert .boton { width: 100%; }
}

/* ---------- Etiquetas de tipo de participacion ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: .2rem .7rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: var(--radio-pill);
  background: var(--azul-suave);
  color: var(--azul);
  white-space: nowrap;
}

.etiqueta-verde { background: var(--verde-suave); color: var(--verde-hover); }

/* ---------- Avisos ---------- */
.aviso {
  display: flex;
  gap: .75rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radio-sm);
  font-size: .9375rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
  text-align: left;
}

.aviso-error   { background: var(--error-suave); color: var(--error); }
.aviso-ok      { background: var(--verde-suave); color: var(--verde-hover); }
.aviso-info    { background: var(--azul-suave);  color: var(--azul); }

/* ---------- Estado vacio ---------- */
.vacio { text-align: center; padding: 2.5rem 1rem; }
.vacio-icono {
  width: 56px; height: 56px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--fondo-alt);
  display: grid; place-items: center;
  font-size: 1.5rem; color: var(--texto-ter);
}

/* ---------- Pie ---------- */
.pie {
  border-top: 1px solid var(--borde-suave);
  padding: 2.5rem 0;
  background: var(--fondo-alt);
  font-size: .8125rem;
  color: var(--texto-ter);
}

.pie-interna {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.pie a { color: var(--texto-sec); }

/* ---------- Animaciones de entrada ---------- */
@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.surge { animation: surgir .6s cubic-bezier(.4,0,.2,1) both; }
.surge-1 { animation-delay: .06s; }
.surge-2 { animation-delay: .12s; }
.surge-3 { animation-delay: .18s; }
.surge-4 { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilidades ---------- */
.centrado { text-align: center; }
.oculto { display: none !important; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   PANEL DE ADMINISTRACION
   ============================================================ */

/* ---------- Login ---------- */
.login-pantalla {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background: var(--fondo-alt);
}

.login-caja { width: 100%; max-width: 400px; }

.login-marca { text-align: center; margin-bottom: 2rem; }
.login-marca img { width: 68px; height: 68px; margin: 0 auto .9rem; object-fit: contain; }
.login-marca h1 { font-size: 1.5rem; }
.login-marca p { margin: .35rem 0 0; font-size: .875rem; color: var(--texto-sec); }

/* ---------- Estructura del panel ---------- */
.panel { display: flex; min-height: 100vh; background: var(--fondo-alt); }

.lateral {
  width: 248px;
  flex-shrink: 0;
  background: var(--fondo);
  border-right: 1px solid var(--borde-suave);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.lateral-marca {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--borde-suave);
}
.lateral-marca img { width: 34px; height: 34px; object-fit: contain; }
.lateral-marca strong { font-size: .9375rem; letter-spacing: -.01em; }
.lateral-marca span { display: block; font-size: .6875rem; color: var(--texto-ter); }

.menu { padding: .9rem .75rem; flex: 1; overflow-y: auto; }
.menu-titulo {
  padding: .9rem .6rem .35rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-ter);
}

.menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem;
  margin-bottom: .1rem;
  border-radius: 9px;
  font-size: .9375rem;
  color: var(--texto);
  transition: background var(--transicion-r), color var(--transicion-r);
}
.menu a:hover { background: var(--fondo-alt); opacity: 1; }
.menu a.activo { background: var(--azul-suave); color: var(--azul); font-weight: 500; }
.menu-icono { width: 18px; text-align: center; opacity: .65; font-size: .95rem; }
.menu a.activo .menu-icono { opacity: 1; }

.lateral-pie {
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--borde-suave);
  font-size: .8125rem;
}
.lateral-pie strong { display: block; font-size: .875rem; font-weight: 500; }
.lateral-pie span { color: var(--texto-ter); font-size: .75rem; }
.lateral-pie a { display: inline-block; margin-top: .5rem; font-size: .8125rem; }

/* ---------- Contenido ---------- */
.contenido { flex: 1; min-width: 0; padding: 2rem 2.25rem 3.5rem; }

@media (max-width: 860px) {
  .panel { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; flex-direction: column; }
  .menu { display: flex; flex-wrap: wrap; gap: .25rem; padding: .6rem; }
  .menu-titulo { display: none; }
  .menu a { padding: .5rem .75rem; }
  .contenido { padding: 1.5rem 1.25rem 3rem; }
}

.encabezado {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.encabezado h1 { font-size: 1.75rem; }
.encabezado p { margin: .3rem 0 0; color: var(--texto-sec); font-size: .9375rem; }
.encabezado-acciones { display: flex; gap: .6rem; flex-wrap: wrap; }

.migas { font-size: .8125rem; color: var(--texto-ter); margin-bottom: .5rem; }
.migas a { color: var(--texto-sec); }

/* ---------- Metricas ---------- */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.metrica {
  background: var(--fondo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  padding: 1.15rem 1.3rem;
}
.metrica-valor {
  font-size: 2rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
}
.metrica-etiqueta {
  font-size: .8125rem; color: var(--texto-sec); margin-top: .2rem;
}
.metrica-azul  .metrica-valor { color: var(--azul); }
.metrica-verde .metrica-valor { color: var(--verde); }

/* ---------- Panel: bloques ---------- */
.bloque {
  background: var(--fondo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.bloque-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--borde-suave);
}
.bloque-cabecera h2 { font-size: 1.0625rem; letter-spacing: -.01em; }
.bloque-cuerpo { padding: 1.3rem; }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; }

table.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }

table.tabla th {
  text-align: left;
  padding: .75rem 1.3rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-ter);
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}

table.tabla td {
  padding: .85rem 1.3rem;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: middle;
}

table.tabla tbody tr { transition: background var(--transicion-r); }
table.tabla tbody tr:hover { background: var(--fondo-alt); }
table.tabla tbody tr:last-child td { border-bottom: none; }

.td-acciones { text-align: right; white-space: nowrap; }
.td-numero { font-variant-numeric: tabular-nums; }

.enlace-peligro { color: var(--error); }

/* ---------- Estados ---------- */
.estado {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem;
  font-size: .75rem; font-weight: 500;
  border-radius: var(--radio-pill);
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-publicado { background: var(--verde-suave); color: var(--verde-hover); }
.estado-borrador  { background: #FFF4E5; color: #8A5300; }
.estado-archivado { background: var(--fondo-alt); color: var(--texto-ter); }

/* ---------- Formularios del panel ---------- */
.form-panel { max-width: 720px; }

.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.campos-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }

@media (max-width: 640px) {
  .campos-2, .campos-3 { grid-template-columns: 1fr; }
}

textarea.control { min-height: 96px; resize: vertical; font-size: .9375rem; line-height: 1.5; }

.ayuda { font-size: .8125rem; color: var(--texto-ter); margin: .35rem 0 0; }

.acciones-form {
  display: flex; gap: .75rem; align-items: center;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--borde-suave);
}

/* ---------- Subida de archivos ---------- */
.zona-archivo {
  border: 1.5px dashed var(--borde);
  border-radius: var(--radio-sm);
  padding: 1.75rem 1.25rem;
  text-align: center;
  background: var(--fondo-alt);
  cursor: pointer;
  transition: border-color var(--transicion-r), background var(--transicion-r);
}
.zona-archivo:hover, .zona-archivo.encima {
  border-color: var(--azul);
  background: var(--azul-suave);
}
.zona-archivo input[type=file] { display: none; }
.zona-archivo-titulo { font-weight: 500; font-size: .9375rem; }

/* ---------- Vacio en el panel ---------- */
.panel-vacio { text-align: center; padding: 3rem 1.5rem; color: var(--texto-sec); }
.panel-vacio h3 { margin-bottom: .5rem; }

/* ---------- Barra de busqueda ---------- */
.buscador { position: relative; max-width: 320px; width: 100%; }
.buscador .control { padding-left: 2.4rem; font-size: .9375rem; padding-top: .6rem; padding-bottom: .6rem; }
.buscador::before {
  content: "\002315";
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--texto-ter); font-size: 1rem; pointer-events: none;
}

/* ---------- Paginacion ---------- */
.paginas { display: flex; gap: .35rem; justify-content: center; padding: 1.1rem; flex-wrap: wrap; }
.paginas a, .paginas span {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6rem;
  border-radius: 8px;
  font-size: .875rem;
  color: var(--texto-sec);
  transition: background var(--transicion-r);
}
.paginas a:hover { background: var(--fondo-alt); opacity: 1; }
.paginas .actual { background: var(--azul); color: #fff; font-weight: 500; }

/* ============================================================
   MODO RESULTADOS
   Cuando la busqueda encuentra certificados, estos quedan
   arriba de todo: no hay que scrollear para verlos.
   ============================================================ */

.resultados { padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(3rem, 6vw, 4.5rem); }

.resultados-cabecera { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.resultados-hola {
  font-size: 1rem;
  color: var(--texto-sec);
  margin: 0 0 .35rem;
  letter-spacing: -.01em;
}

.resultados-cabecera h1 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); }

.resultados-cabecera .subtitulo {
  font-size: clamp(.95rem, 2vw, 1.0625rem);
  margin-top: .5rem;
}

/* Boton de descarga: el elemento mas visible de la pantalla */
.boton-descargar {
  padding: 1rem 2.1rem;
  font-size: 1.0625rem;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(20,151,44,.28);
}
.boton-descargar:hover { box-shadow: 0 6px 20px rgba(20,151,44,.34); }

/* En celular, la tarjeta entera respira mas y el boton ocupa todo el ancho */
@media (max-width: 620px) {
  .cert { padding: 1.25rem 1.3rem; gap: 1.1rem; }
  .cert-curso { font-size: 1.125rem; }
  .boton-descargar { padding: 1.05rem 1.5rem; }
}

/* Boton que parece un enlace (para acciones dentro de tablas) */
.enlace-boton {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: .9375rem;
  color: var(--azul);
  cursor: pointer;
  transition: opacity var(--transicion-r);
}
.enlace-boton:hover { opacity: .7; }
.enlace-boton.enlace-peligro { color: var(--error); }

/* Select chico dentro de tablas */
.control-mini {
  padding: .35rem 1.9rem .35rem .6rem;
  font-size: .8125rem;
  border-radius: 8px;
  background-position: right .6rem center;
  min-width: 130px;
}

/* Boton de accion destructiva */
.boton-peligro { background: var(--error); }
.boton-peligro:hover { background: #A32922; }
.boton-peligro:focus-visible { box-shadow: 0 0 0 4px rgba(199,51,43,.25); }

/* ============================================================
   VERIFICACION - constancia
   ============================================================ */

.sello-ok {
  width: 62px; height: 62px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde);
  display: grid; place-items: center;
  font-size: 1.9rem; line-height: 1;
}

.constancia { max-width: 620px; margin: 0 auto; padding: .5rem 1.75rem; }

.constancia-fila {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--borde-suave);
}
.constancia-fila:last-child { border-bottom: none; }

.constancia-etiqueta {
  font-size: .8125rem;
  color: var(--texto-ter);
  letter-spacing: .01em;
}

.constancia-valor { font-size: 1rem; }
strong.constancia-valor { font-size: 1.125rem; letter-spacing: -.01em; }

@media (max-width: 560px) {
  .constancia { padding: .5rem 1.1rem; }
  .constancia-fila { grid-template-columns: 1fr; gap: .2rem; padding: .8rem 0; }
}