/* =============================================================================
   css/oferta-detalle.css — estilos de la ficha de oferta.
   =============================================================================
   Estaba inline en modulos/render-detalle-oferta.php, repartido en tres <style>
   que viajaban en CADA una de las ~28.600 fichas: 15.284 bytes identicos byte a
   byte, imposibles de cachear. Por eso el solapamiento del HTML crudo entre dos
   fichas seguia en 94% aunque el texto visible bajara un tercio.

   Acá es UNA descarga para todo el sitio. La ficha numero dos ya lo tiene en
   cache.

   ⚠️ Se carga con <link rel="stylesheet"> BLOQUEANTE en el <head> de oferta.php,
   no con el preload+onload asincrono que usa saplic-theme.css. Es deliberado:
   esto estiliza el contenido principal (el LCP de la pagina), y cargarlo async
   haria que la ficha se pintara sin estilo por un frame. El theme puede ir
   async porque el CSS critico above-the-fold sigue inline en oferta.php.

   ⚠️ El detalle tambien se inyecta por AJAX en el buscador
   (fgm-consultar-detalle-oferta-empleo.php). Ese camino emite su propio <link>
   dentro del fragmento — ver detCssLink() en render-detalle-oferta.php.

   Al tocar este archivo hay que subir ?v= en los dos lugares que lo enlazan.
   ============================================================================= */

/* ── Layout ── */
#det-oferta-root { padding:4px 0 20px; }
.det-volver { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gris-med);cursor:pointer;margin-bottom:18px;border:none;background:none;padding:0; }
.det-volver:hover { color:var(--v); }
.det-breadcrumb { font-size:12px;color:var(--gris-med);margin-bottom:12px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.4; }
.det-breadcrumb a { color:var(--v);text-decoration:none;font-weight:700; }
.det-breadcrumb a:hover { text-decoration:underline; }
/* ⚠️ F · 1,51:1 ERA EL PEOR CONTRASTE DEL SITIO. #c9c9c9 sobre #f4f4f8 es un
   gris sobre otro gris: el separador del breadcrumb practicamente no existia
   para quien no tiene vista perfecta. #63636f sobre el mismo fondo da 5,40:1 y
   sigue leyendose como separador —mas apagado que el texto, no mas fuerte. */
.det-breadcrumb .sep { color:#63636f;font-weight:600; }
/* ── EL DESBORDE HORIZONTAL DE MOVIL VIVIA ACA ─────────────────────────
   Este .current lleva el titulo COMPLETO de la oferta y ya traia
   overflow:hidden + ellipsis + max-width:100% para contenerlo. No alcanzaba:
   .det-breadcrumb es display:flex, y un item de flex tiene min-width:auto por
   defecto, que para un texto en nowrap vale su ancho MIN-CONTENT — el string
   entero. min-width:auto le gana a max-width:100%, asi que el item se plantaba
   en su ancho real (452px medidos) y estiraba la linea de flex.

   Con el documento mas ancho que el viewport, el fondo del encabezado y el del
   pie —que se dimensionan al VIEWPORT— se cortaban antes del borde derecho, y
   al hacer scroll quedaba la franja. Los tres sintomas reportados salian de
   este unico elemento.

   No se veia en el emulador de escritorio porque a 1521px el breadcrumb mide
   1060 y 452 entra comodo: el desborde solo existe por debajo de ~470px.

   min-width:0 es lo que habilita a un item de flex a encogerse por debajo de su
   contenido, que es lo que el ellipsis necesitaba desde el principio. Va tambien
   en los <a> —el nombre de empresa puede ser largo— y en el nav. */
.det-breadcrumb { min-width:0; }
.det-breadcrumb a { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.det-breadcrumb .current { color:var(--negro);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0; }
/* ── En movil no hay breadcrumb ────────────────────────────────────────
   Se esconde entero por debajo de 600px. El .current arreglado arriba dejo de
   desbordar, pero el bloque seguia sobrando: ocupaba DOS lineas en una
   pantalla de 390px y empujaba hacia abajo la oferta, que es lo que la
   persona vino a leer. El nivel de empresa puede medir casi el ancho de la
   pantalla el solo ("Great Lakes Saint Lawrence Seaway Development
   Corporation"), y el ultimo repite el titulo, que aparece otra vez abajo en
   grande dentro de la tarjeta. Recortar con ellipsis no arreglaba eso:
   seguian siendo dos lineas, ahora de texto cortado.

   Y lo que quedaba tampoco justificaba la linea. En este ancho la navegacion
   ya esta cubierta dos veces: el logo del encabezado lleva a la home del pais
   —lo hacian los dos primeros niveles— y "Volver a resultados", que esta
   inmediatamente debajo, es el volver.

   Se paga que un lector de pantalla en movil pierde el nav de migas. Se
   asume: en 390px ese nav costaba dos lineas de la primera pantalla y sus dos
   destinos siguen alcanzables desde el mismo viewport.

   ⚠️ Esto es SOLO presentacion. El BreadcrumbList del JSON-LD lo arma
   oferta.php aparte, con los cuatro niveles siempre, y eso es lo que Google
   lee: no se pierde nada de SEO. */
@media(max-width:600px){
    .det-breadcrumb { display:none; }
}

/* ── Hero card ── */
.det-hero { background:#fff;border:1px solid var(--borde);border-radius:var(--radio-m);padding:22px 24px;margin-bottom:14px;box-shadow:var(--sombra-s); }
.det-empresa-row { display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--borde); }
.det-logo-wrap { width:56px;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--borde);background:var(--gris-cla);flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.det-logo-wrap img { width:100%;height:100%;object-fit:contain; }
.det-empresa-nombre { font-weight:800;font-size:15px;color:var(--negro);margin-bottom:2px; }
.det-empresa-sub { font-size:12px;color:var(--gris-med); }
/* overflow-wrap:anywhere: un titulo puede traer una palabra sola mas ancha que
   la pantalla (referencias tipo "GS-2101-12/13", URLs pegadas). Sin esto la
   palabra desborda el contenedor y el texto llega al filo derecho. */
/* ⚠️ AHORA ES UN <h1> Y ESTO TIENE QUE VERSE IGUAL QUE CUANDO ERA UN <div>.
   El reset del theme (*{margin:0}) ya mata el margen del user-agent, pero NO
   el font-size:2em ni el font-weight:bold que Chrome le pone a h1: los dos se
   declaran aca abajo, asi que ganan igual. Se deja escrito para que nadie
   "limpie" el font-weight pensando que es redundante — no lo es. */
.det-titulo { font-size:22px;font-weight:900;color:var(--negro);line-height:1.2;margin:0 0 8px;overflow-wrap:anywhere;min-width:0; }
.det-badges { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.det-badge { display:inline-flex;align-items:center;gap:5px;background:var(--gris-cla);color:var(--gris-osc);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:600; }
.det-badge.verde { background:#f0fdf4;color:#16a34a; }
.det-badge.violeta { background:var(--v-clr);color:var(--v); }
.det-badge.amarillo { background:#fff8e1;color:#b45309; }
/* ⚠️ EL IMPORTE DEL SUELDO, que es el dato por el que se abre esta pagina.
   --verde (#00996a) es el verde de FORMA de la marca —puntos de estado,
   barras— y como texto da 3,6:1 sobre blanco y 3,3:1 sobre --gris-cla.
   --verde-txt (#0a6e4e) es el mismo verde bajado de luminosidad: 5,3:1.
   --verde NO se toca: lo usan fondos y formas en medio sitio. */
.det-salario { font-size:20px;font-weight:900;color:var(--verde-txt,#0a6e4e);margin-bottom:4px; }
.det-salario-lbl { font-size:11px;color:var(--gris-med);font-weight:600;text-transform:uppercase;letter-spacing:.5px; }

/* ── Info grid ── */
.det-info-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px; }
.det-info-item { background:var(--gris-cla);border-radius:var(--radio-s);padding:12px 14px; }
.det-info-lbl { font-size:10px;font-weight:700;color:var(--gris-med);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px; }
.det-info-val { font-size:14px;font-weight:700;color:var(--negro); }

/* ── Secciones ── */
.det-section { background:#fff;border:1px solid var(--borde);border-radius:var(--radio-m);padding:20px 22px;margin-bottom:12px;box-shadow:var(--sombra-s); }
/* Idem: ahora son <h2>. font-size y font-weight explicitos + margin en la
   forma corta, para que el user-agent no meta nada. */
.det-section-title { font-size:13px;font-weight:800;color:var(--gris-med);text-transform:uppercase;letter-spacing:.6px;margin:0 0 12px;display:flex;align-items:center;gap:8px; }
.det-section-title::before { content:'';width:3px;height:14px;background:var(--v);border-radius:2px;display:inline-block; }
/* ⚠️ MEDIDA DE LECTURA. Medido a 1440px: el parrafo de la descripcion salia
   a 1014px de ancho con 14px de cuerpo, o sea ~145 caracteres por renglon.
   El maximo comodo son ~75-90: mas alla de eso el ojo pierde el renglon al
   volver al margen izquierdo, y una descripcion de vacante son varios parrafos
   seguidos. 68ch a 14px son ~640px de texto.

   Va en ch y no en px a proposito: la unidad sigue al tamaño de fuente, asi
   que la cuenta de caracteres se mantiene si alguien cambia el cuerpo. Y con
   max-width el bloque encoge solo en pantallas angostas — no hace falta
   ninguna media query. */
.det-desc { font-size:14px;line-height:1.75;color:var(--negro);overflow-wrap:anywhere;max-width:68ch; }
/* Parrafos de las descripciones scrapeadas (ver detDescripcionHtml). El
   scraper entrega texto plano; sin esto se renderiza como un muro. */
.det-desc p { margin:0 0 12px; }
.det-desc p:last-child { margin-bottom:0; }
.det-tags { display:flex;flex-wrap:wrap;gap:8px; }
.det-tag { background:var(--v-clr);color:var(--v);border-radius:6px;padding:5px 12px;font-size:12px;font-weight:700;border:1px solid #ddd6fe; }

/* ── Aviso oferta vencida ── */
.det-vencida-aviso {
    background:#fef2f2;
    border:1.5px solid #fecaca;
    border-left:5px solid #dc2626;
    border-radius:var(--radio-m);
    padding:16px 20px;
    margin-bottom:14px;
    display:flex;align-items:flex-start;gap:14px;
    box-shadow:var(--sombra-s);
}
.det-vencida-aviso .det-vencida-icon { font-size:24px;line-height:1;flex-shrink:0; }
.det-vencida-aviso .det-vencida-title { font-size:15px;font-weight:800;color:#991b1b;margin-bottom:4px;letter-spacing:-.2px; }
.det-vencida-aviso .det-vencida-sub   { font-size:13px;color:#7f1d1d;line-height:1.5; }
.det-vencida-aviso .det-vencida-sub a { color:#7f1d1d;text-decoration:underline;font-weight:700; }

/* ── CTA ── */
.det-cta { background:linear-gradient(135deg,var(--v),#7c3aed);border-radius:var(--radio-m);padding:22px 24px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px; }
.det-cta-text { color:#fff;font-size:16px;font-weight:700; }
.det-cta-sub { color:rgba(255,255,255,.75);font-size:13px;margin-top:2px; }
.det-btn-postular { background:#fff;color:var(--v);border:none;border-radius:var(--radio-s);padding:12px 28px;font-size:15px;font-weight:800;cursor:pointer;transition:var(--trans); }
.det-btn-postular:hover { background:var(--v-clr);transform:translateY(-1px); }
.det-cta-actions { display:flex;flex-direction:column;align-items:stretch;gap:10px; }
/* Bloqueo por pais: mismo bloque que el CTA pero en ambar, no en violeta. El
   violeta es "hace esto"; aca no hay accion posible sobre esta vacante, asi
   que el color no puede prometer lo mismo. El boton blanco se mantiene porque
   SI hay una accion util: ver los empleos de su pais. */
.det-cta-pais { background:linear-gradient(135deg,#b45309,#d97706); }
.det-cta a.det-btn-postular { text-decoration:none;display:inline-block;text-align:center; }
/* Boton secundario "ghost": mismo alto/padding que el primario para que sea
   legible y facil de tocar, pero con fondo transparente + borde translucido
   para que la jerarquia siga siendo clara (blanco solido = accion principal). */
.det-cta-alerta-link { background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);border-radius:var(--radio-s);padding:11px 22px;color:#fff;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.3;text-align:center;transition:var(--trans);white-space:nowrap; }
.det-cta-alerta-link:hover { background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-1px); }
/* ── Barra fija de postulacion (solo movil) ──────────────────────────
   El CTA de arriba queda a ~970px del tope del documento en un viewport de
   372px de ancho: mas de una pantalla de scroll. Medido, no estimado. En un
   iPhone con las barras de Safari (~650-700px utiles) son casi dos. O sea que
   el boton que crea las cuentas —el unico camino de registro que tiene el
   sitio— no se ve nunca si el visitante no baja a buscarlo.

   Esta barra lo deja siempre a mano mientras se lee la oferta. Solo en movil:
   en desktop el CTA entra en pantalla sin scroll y una barra fija ahi seria
   ruido. Aparece cuando el CTA original sale de vista y se esconde cuando
   vuelve, para no mostrar el mismo boton dos veces. */
.det-cta-fija { display:none; }
@media (max-width:900px) {
    .det-cta-fija {
        display:block; position:fixed; left:0; right:0; bottom:0; z-index:400;
        background:rgba(255,255,255,.97);
        border-top:1px solid var(--borde);
        box-shadow:0 -4px 20px rgba(15,15,26,.10);
        padding:10px 14px calc(10px + env(safe-area-inset-bottom));
        transform:translateY(110%);
        transition:transform .22s ease;
        backdrop-filter:blur(6px);
    }
    .det-cta-fija.visible { transform:translateY(0); }
    .det-cta-fija .det-btn-postular {
        display:block; width:100%; padding:14px 18px; font-size:15px;
        background:var(--v); color:#fff;
        box-shadow:0 4px 14px rgba(81,40,242,.30);
    }
    .det-cta-fija .det-btn-postular:hover { background:var(--v-osc);transform:none; }
    .det-cta-fija .det-btn-postular:disabled { background:var(--gris-med);box-shadow:none;cursor:default; }
    /* Que la barra no tape el final del contenido al scrollear hasta abajo. */
    #det-oferta-root { padding-bottom:88px; }
}
/* Variante "empresa": aviso discreto, sin CTA (aplicar es solo para candidatos). */
.det-cta.det-cta-empresa { background:#fff7ed;border:1px solid #fed7aa; }
.det-cta.det-cta-empresa .det-cta-text { color:#9a3412; }
.det-cta.det-cta-empresa .det-cta-sub { color:#9a3412;opacity:.85; }

/* ── Compartir oferta ── */
.det-share { background:#fff;border:1px solid var(--borde);border-radius:var(--radio-m);padding:16px 22px;margin-bottom:12px;box-shadow:var(--sombra-s); }
.det-share-title { font-size:12px;font-weight:800;color:var(--gris-med);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:8px; }
.det-share-title::before { content:'';width:3px;height:14px;background:var(--v);border-radius:2px;display:inline-block; }
.det-share-chips { display:flex;flex-wrap:wrap;gap:8px; }
.det-share-chip { display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:700;text-decoration:none;border:1.5px solid var(--borde);background:#fff;color:var(--gris-osc);cursor:pointer;transition:var(--trans);font-family:var(--fb);line-height:1; }
.det-share-chip:hover { transform:translateY(-1px);box-shadow:var(--sombra-s);text-decoration:none; }
.det-share-chip svg { display:block; }
/* ⚠️ EL PEOR CONTRASTE DEL SITIO: blanco sobre #25D366 da 2,0:1. El verde
   claro de WhatsApp es un color de ICONO, no de fondo con texto blanco encima.
   #075E54 es el verde OSCURO de la propia marca —el de la barra de la app— y
   con blanco da 7,7:1. No se inventa un color: se usa el otro de la marca. */
.det-share-chip.wa    { background:#075E54;border-color:#075E54;color:#fff; }
/* #1877F2 con blanco da 4,23:1 — por debajo de 4,5 a 13px. #1266DC es el
   mismo azul un escalon mas oscuro: 5,3:1 y sigue leyendose como Facebook. */
.det-share-chip.fb    { background:#1266DC;border-color:#1266DC;color:#fff; }
.det-share-chip.x     { background:#0f0f0f;border-color:#0f0f0f;color:#fff; }
.det-share-chip.li    { background:#0A66C2;border-color:#0A66C2;color:#fff; }
.det-share-chip.copy  { background:#fff;color:var(--negro);border-color:var(--borde); }
.det-share-chip.native{ background:var(--v);border-color:var(--v);color:#fff; }
.det-share-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--negro);color:#fff;padding:10px 18px;border-radius:99px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999;box-shadow:0 6px 24px rgba(0,0,0,.2); }
.det-share-toast.show { opacity:.95; }

.leaflet-div-icon.saplic-pin{background:transparent;border:none;}

@media(max-width:600px){
    .det-info-grid{grid-template-columns:1fr;}
    .det-titulo{font-size:18px;}
    .det-cta{flex-direction:column;}
    .det-btn-postular{width:100%;}
    .det-cta-actions{width:100%;align-items:stretch;}
    .det-cta-alerta-link{white-space:normal;}
    .det-share{padding:14px 16px;}
    .det-share-chip{font-size:12px;padding:7px 11px;}
}

/* ── Ofertas similares (bloque al final del detalle) ─────────────── */
.det-similares { margin-top:6px; }
.det-sim-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
}
/* ⚠️ ACA NO VA CSS DE TARJETA. La tarjeta sale de modulos/tarjeta-oferta.php
   (.tof-card), la misma del buscador, de recursos, de las paginas de ciudad,
   de salario y de la pagina de oferta borrada. Lo unico que queda de este
   bloque es la GRILLA de arriba: el detalle la quiere de dos columnas fijas y
   no en auto-fill como el resto, porque vive dentro de la columna angosta de
   la ficha. Lo que vivia aca —.det-sim-card y sus cinco hijas— era otra copia
   del mismo componente, con otra tipografia y cuatro datos de los seis. */
/* ── "Mas postulaciones 1-click" (post-postulacion, oferentes logueados) ── */
.det-mp { margin-top:8px; background:#f0fdf4; border:1px solid #86efac; border-radius:14px; padding:16px 18px; }
.det-mp-titulo { font-size:15px; font-weight:800; color:#065f46; margin-bottom:4px; }
.det-mp-bajada { font-size:12.5px; color:#166534; margin-bottom:12px; }
.det-mp-lista { display:flex; flex-direction:column; gap:8px; }
.det-mp-card { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--borde); border-radius:10px; padding:10px 12px; }
.det-mp-info { flex:1; min-width:0; text-decoration:none; color:var(--negro); }
.det-mp-info:hover .det-mp-t { color:var(--v); }
.det-mp-t { font-size:13.5px; font-weight:800; color:var(--negro); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.det-mp-e { font-size:11.5px; font-weight:700; color:var(--v); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.det-mp-m { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px; color:var(--gris-med); margin-top:3px; }
.det-mp-m .s { font-weight:800; color:var(--verde-txt,#0a6e4e); }
.det-mp-btn { flex-shrink:0; padding:8px 14px; background:var(--v); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; transition:var(--trans); font-family:var(--fb); }
.det-mp-btn:hover:not(:disabled) { background:var(--v-osc); }
.det-mp-btn:disabled { cursor:not-allowed; opacity:.9; }
.det-mp-btn.ya { background:#f0fdf4; color:#15803d; border:1.5px solid #86efac; }
.det-mp-toast { display:none; margin-top:10px; padding:8px 12px; border-radius:8px; font-size:12.5px; font-weight:700; text-align:center; }
@media (max-width:520px) {
    .det-mp-card { flex-wrap:wrap; }
    .det-mp-btn { width:100%; padding:10px; }
}
@media (max-width:640px) {
    .det-sim-grid { grid-template-columns:1fr; }
}

/* ── Recurso relacionado (bloque opcional del detalle) ────────────── */
/* Prefijo det- como el resto del detalle. El icono va como SVG en linea y
       no como <i data-lucide>: este parcial se inyecta por AJAX desde el
       buscador y ahi lucide.createIcons() ya corrio, asi que un icono nuevo
       quedaria vacio. */
    .det-recurso{padding:0;border:none;background:none;margin:14px 0;}
    .det-recurso-link{display:flex;align-items:center;gap:11px;padding:13px 15px;
        background:#f7f5ff;border:1px solid #e2dff7;border-radius:12px;
        text-decoration:none;color:inherit;transition:.18s;}
    .det-recurso-link:hover{border-color:#6d28d9;background:#f2eeff;}
    .det-recurso-ico{display:inline-flex;align-items:center;justify-content:center;
        width:34px;height:34px;border-radius:9px;background:#e0daff;color:#6d28d9;flex:0 0 auto;}
    .det-recurso-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
    .det-recurso-txt strong{font-size:11.5px;font-weight:800;color:#6d28d9;
        text-transform:uppercase;letter-spacing:.4px;}
    .det-recurso-txt span{font-size:14px;font-weight:600;line-height:1.35;}
    .det-recurso-flecha{color:#6d28d9;font-weight:800;flex:0 0 auto;}

/* ── Modal de captura de postulacion (anonimo) ────────────────────── */
@media(max-width:500px){
        #modal-captura-postulacion > div { max-height: 90vh; overflow-y: auto; }
    }

/* ── ORDEN DE LOS CHIPS DE COMPARTIR, POR PAIS ─────────────────────────────
   Ver la nota de modulos/render-detalle-oferta.php: WhatsApp iba primero en
   los 72 paises. Donde no es el canal de reclutamiento, baja al final de la
   fila sin tocar el HTML — el orden de lectura para un lector de pantalla no
   cambia, solo el visual.
   order:0 es el default de los demas chips, asi que basta con empujar uno. */
.det-share-wa-tarde .det-share-chip.wa { order: 5; }

/* ── G2 · ZONAS TACTILES DE LA FICHA ─────────────────────────────────────
   Entre 28 y 30 elementos por debajo de 44×44 a 380px en cada una de las tres
   fichas auditadas: las migas, los badges que son enlaces, los botones de
   accion y los enlaces del bloque de vacantes relacionadas.

   `pointer:coarse` y no un breakpoint de ancho: el umbral de 44px es del DEDO.
   Una tablet tactil de 1024px lo necesita igual y un monitor angosto con mouse
   no. Ni un color ni un tamano de letra cambian: crece la caja. */
@media (pointer: coarse) {
    .det-breadcrumb a,
    .det-badge a,
    .det-cta,
    .det-cta-pais,
    .det-mp a,
    .det-section a { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
    /* Los enlaces DENTRO del texto de la descripcion quedan afuera: un enlace
       en medio de una oracion esta exceptuado del minimo (WCAG 2.5.8) y
       estirarlo rompe el interlineado del aviso. */
    .det-descripcion a { min-height: 0; display: inline; }
}
