/* CERPERDATA: verificador público de certificados (colores de marca: navy #273087, rojo #e2001a) */
#cerperdata {
  --cd-navy: #273087; --cd-navy-prof: #121848; --cd-rojo: #e2001a; --cd-tinta: #0e1440; --cd-gris: #4a5384; --cd-gris-claro: #6b7399;
  --cd-borde: #dde2f1; --cd-fondo: #f3f5fb; --cd-suave: #e9edf8;
  --cd-ok: #0b7040; --cd-ok-bg: #e1f4e9; --cd-am: #8a5300; --cd-am-bg: #fff1d6; --cd-err: #c20017; --cd-err-bg: #fde8ea;
  --cd-sombra: 0 1px 2px #0e14400f, 0 8px 24px #0e144012; --cd-sombra-alta: 0 14px 36px #0e144024;
}
#cerperdata .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cd-ancho { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Portada con buscador */
.cd-portada { position: relative; padding: 32px 0 40px; color: #fff; text-align: center; overflow: hidden;
  background: radial-gradient(80% 120% at 85% -10%, #e2001a33, transparent 60%), radial-gradient(90% 120% at 0% 0%, #3a45b8, transparent 55%), linear-gradient(160deg, #273087, #121848); }
.cd-portada::after { content: ""; position: absolute; inset: auto 0 0; height: 48px; background: var(--cd-fondo); clip-path: ellipse(70% 100% at 50% 100%); }
.cd-portada > * { position: relative; z-index: 1; }
.cd-sello { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border-radius: 99px; background: #ffffff1a; border: 1px solid #ffffff33; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.cd-portada h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; font-weight: 700; color: #fff; }
.cd-lema { margin: 12px auto 28px; max-width: 560px; color: #d4d9f3; font-size: 1.05rem; }
.cd-buscador { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 0 auto; padding: 6px 8px 6px 20px; background: #fff; border-radius: 99px; box-shadow: 0 16px 40px #0a0f3a59; color: var(--cd-gris); transition: box-shadow .2s; }
.cd-buscador:focus-within { box-shadow: 0 16px 40px #0a0f3a59, 0 0 0 4px #ffffff59; }
.cd-buscador input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 4px; font: inherit; font-size: 1.05rem; color: var(--cd-tinta); background: transparent; text-align: left; }
.cd-buscador input::placeholder { text-align: left; color: var(--cd-gris-claro); }
.cd-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px auto 16px; }
.cd-tabs button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 16px; border-radius: 99px; border: 1px solid #ffffff40; background: #ffffff14; color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.cd-tabs button:hover { background: #ffffff29; }
.cd-tabs button[aria-selected="true"] { background: #fff; color: var(--cd-navy); border-color: #fff; }
.cd-tabs span { font-size: .75rem; padding: 0 8px; border-radius: 99px; background: #ffffff26; }
.cd-tabs button[aria-selected="true"] span { background: var(--cd-suave); }
.cd-tabs button:focus-visible, .cd-tarjeta button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

/* Resultados */
.cd-seccion { background: var(--cd-fondo); padding: 8px 0 64px; }
.cd-conteo { margin: 0 0 16px; color: var(--cd-gris); font-weight: 600; }
.cd-grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.cd-tarjeta { display: grid; gap: 12px; align-content: start; padding: 20px; background: #fff; border: 1px solid var(--cd-borde); border-radius: 16px; box-shadow: var(--cd-sombra); color: var(--cd-tinta); transition: box-shadow .2s, transform .2s; }
.cd-tarjeta:hover { box-shadow: var(--cd-sombra-alta); transform: translateY(-2px); }
.cd-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cd-cab > div { flex: 1 1 auto; min-width: 0; } /* sin esto un nombre largo empuja el estado fuera de la tarjeta */
.cd-cab h2 { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; color: var(--cd-tinta); overflow-wrap: anywhere; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cd-chip { font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: var(--cd-suave); color: var(--cd-navy); }
.cd-estado { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
.cd-estado .cd-i { width: 16px; height: 16px; }
.e-activo { background: var(--cd-ok-bg); color: var(--cd-ok); }
.e-suspendido { background: var(--cd-am-bg); color: var(--cd-am); }
.e-cancelado, .e-retirado { background: var(--cd-suave); color: var(--cd-gris); }
.e-vencido { background: var(--cd-err-bg); color: var(--cd-err); }
.cd-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--cd-fondo); }
.cd-datos div { min-width: 0; }
.cd-datos dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cd-gris-claro); }
.cd-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cd-num { font-family: Consolas, "IBM Plex Mono", monospace; }
.cd-aviso { color: var(--cd-am); font-size: .82rem; font-weight: 600; }
.cd-alcance { margin: 0; color: var(--cd-gris); font-size: .92rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cd-tarjeta.abierta .cd-alcance { display: block; }
.cd-dir { display: none; margin: 0; color: var(--cd-gris); font-size: .88rem; }
.cd-tarjeta.abierta .cd-dir { display: flex; gap: 6px; }
.cd-mas { justify-self: start; font: inherit; font-size: .88rem; font-weight: 700; color: var(--cd-navy); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
mark { background: #ffe58f; color: inherit; border-radius: 3px; padding: 0 1px; }

/* Vacío y ayuda */
.cd-vacio { grid-column: 1 / -1; text-align: center; padding: 48px 24px; background: #fff; border: 1px dashed var(--cd-borde); border-radius: 16px; color: var(--cd-gris); }
.cd-vacio .cd-i { width: 40px; height: 40px; color: var(--cd-navy); margin-bottom: 8px; }
.cd-vacio b { display: block; font-size: 1.15rem; color: var(--cd-tinta); margin-bottom: 6px; }
.cd-vacio a { color: var(--cd-navy); font-weight: 700; }
.cd-pie { margin: 24px 0 0; text-align: center; color: var(--cd-gris-claro); font-size: .85rem; }

@media (max-width: 600px) {
  .cd-portada { padding: 16px 0 36px; }
  .cd-buscador { padding-left: 14px; }
  .cd-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .cd-tabs button { white-space: nowrap; }
  .cd-cab { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) { .cd-tarjeta, .cd-tarjeta:hover { transition: none; transform: none; } }

/* ¿Qué es CERPERDATA? (va antes de los resultados; al buscar, los resultados suben) */
#cerperdata #mayor { display: flex; flex-direction: column; }
#cd-portada { order: 0; } #cd-acerca { order: 1; } #cd-resultados { order: 2; }
#cerperdata.buscando #cd-resultados { order: 1; } #cerperdata.buscando #cd-acerca { order: 2; }
.cd-acerca { background: var(--cd-fondo); padding: 16px 0 40px; }
#cerperdata.buscando .cd-acerca { padding-top: 48px; border-top: 1px solid var(--cd-borde); }
.cd-intro { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.cd-eyebrow { margin: 0 0 6px; color: var(--cd-rojo); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cd-intro h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--cd-tinta); }
.cd-intro p { margin: 0; color: var(--cd-gris); font-size: 1.05rem; line-height: 1.65; }
.cd-intro b { color: var(--cd-tinta); }
.cd-beneficios { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.cd-beneficios article { padding: 24px; background: #fff; border: 1px solid var(--cd-borde); border-radius: 16px; box-shadow: var(--cd-sombra); transition: box-shadow .2s, transform .2s; }
.cd-beneficios article:hover { box-shadow: var(--cd-sombra-alta); transform: translateY(-2px); }
.cd-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #3a45b8, var(--cd-navy)); box-shadow: 0 6px 16px #27308740; }
.cd-ico .cd-i { width: 24px; height: 24px; }
.cd-beneficios h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--cd-tinta); }
.cd-beneficios p { margin: 0; color: var(--cd-gris); font-size: .93rem; line-height: 1.55; }
.cd-estados { margin-top: 24px; padding: 20px 24px; background: #fff; border: 1px solid var(--cd-borde); border-radius: 16px; }
.cd-estados h3 { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--cd-tinta); }
.cd-estados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cd-estados li { display: flex; align-items: center; gap: 10px; color: var(--cd-gris); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .cd-beneficios article, .cd-beneficios article:hover { transition: none; transform: none; } }