/* Encabezado y pie de www.descifra.com (repo descifralanding: components/header.tsx y footer.tsx).
   Azul marino #0D1537, azul #2981D6 del botón, gris #BBC6C3 del pie, amarillo #FFE800 del botón de RH.
   Work Sans; contenedor como el `container` de Tailwind del sitio (máx. 1280 px, 16/24/32 px a los lados). */
.dx-cont { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 16px; box-sizing: border-box; }
@media (min-width: 640px) { .dx-cont { padding-inline: 24px; } }
@media (min-width: 1024px) { .dx-cont { padding-inline: 32px; } }

.dx-enc { position: sticky; top: 0; z-index: 50; background: #0D1537; font-family: "Work Sans", system-ui, sans-serif; }
.dx-enc-fila { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
@media (min-width: 640px) { .dx-enc-fila { height: 64px; } }
@media (min-width: 768px) { .dx-enc-fila { height: 80px; } }
.dx-logo { display: flex; align-items: center; gap: 10px; transition: opacity .2s; text-decoration: none; }
.dx-nombre { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1; }
@media (min-width: 768px) { .dx-nombre { font-size: 19px; } }
.dx-logo:hover { opacity: .8; }
.dx-logo img { height: 15px; width: auto; display: block; }
@media (min-width: 768px) { .dx-logo img { height: 19px; } }
.dx-links { display: none; align-items: center; gap: 8px; }
@media (min-width: 640px) { .dx-links { display: flex; } }
@media (min-width: 768px) { .dx-links { gap: 16px; } }
@media (min-width: 1024px) { .dx-links { gap: 24px; } }
.dx-links a:not(.dx-cta):not(.dx-rh) { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; transition: color .2s; white-space: nowrap; }
@media (min-width: 768px) { .dx-links a:not(.dx-cta):not(.dx-rh) { font-size: 16px; } }
.dx-links a:not(.dx-cta):not(.dx-rh):hover { color: #2981D6; }
.dx-links .dx-propio { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.25); }
.dx-cta { background: #2981D6; color: #fff !important; font-weight: 700; font-size: 12px; padding: 6px 8px; border-radius: 6px; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transition: transform .2s, background .2s; white-space: nowrap; }
@media (min-width: 768px) { .dx-cta { font-size: 14px; padding: 8px 16px; } }
.dx-cta:hover { transform: scale(1.05); background: rgba(41,129,214,.9); }
.dx-rh { width: 24px; height: 24px; border-radius: 50%; background: #FFE800; display: inline-grid; place-items: center; flex: none; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); transition: transform .2s; }
.dx-rh svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .dx-rh { width: 32px; height: 32px; } .dx-rh svg { width: 20px; height: 20px; } }
.dx-rh:hover { transform: scale(1.05); }
.dx-rh.grande { width: 40px; height: 40px; } .dx-rh.grande svg { width: 20px; height: 20px; }

.dx-menu { color: #fff; }
@media (min-width: 640px) { .dx-menu { display: none; } }
.dx-menu summary { list-style: none; cursor: pointer; padding: 8px; display: grid; place-items: center; }
.dx-menu summary::-webkit-details-marker { display: none; }
.dx-menu summary:hover { color: #2981D6; }
.dx-menu .cierra, .dx-menu[open] .abre { display: none; }
.dx-menu[open] .cierra { display: block; }
.dx-panel { position: absolute; left: 0; right: 0; top: 100%; background: #0D1537; padding: 4px 16px 16px; display: grid; gap: 4px; box-shadow: 0 12px 24px rgba(13,21,55,.3); }
.dx-panel > a { display: block; color: #fff; text-decoration: none; padding: 8px 0; font-size: 14px; }
.dx-panel > a:hover { color: #2981D6; }
.dx-panel-fila { display: flex; gap: 12px; margin-top: 8px; align-items: center; }
.dx-panel-fila .dx-cta { flex: 1; text-align: center; font-size: 14px; padding: 10px 16px; }

.dx-pie { background: #0D1537; color: #BBC6C3; font-family: "Work Sans", system-ui, sans-serif; font-size: 14px; line-height: 1.5; margin-top: 64px; }
.dx-pie a { color: #BBC6C3; text-decoration: none; transition: color .2s; }
.dx-pie a:hover { color: #FFE800; }
.dx-pie-cols { display: grid; gap: 28px; padding-block: 48px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .dx-pie-cols { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; } }
.dx-pie h2 { font-family: "Work Sans", system-ui, sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; font-weight: 700; margin: 0 0 12px; line-height: 1.2; }
.dx-pie-col { display: grid; gap: 8px; align-content: start; }
.dx-pie-col p { margin: 0; }
.dx-pie-col b { color: #fff; }
.dx-pie-marca { display: grid; gap: 16px; align-content: start; }
.dx-pie-marca img { height: 19px; width: auto; display: block; }
.dx-pie-marca p { margin: 0; max-width: 34ch; }
.dx-redes { display: flex; gap: 12px; }
.dx-redes a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff; transition: background .3s, color .3s, transform .3s; }
.dx-redes a:hover { background: #FFE800; color: #0D1537; transform: scale(1.1); }
.dx-redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dx-borrador { margin: 0 0 20px; font-size: 12px; color: #0D1537; background: #FFF6BF; border-radius: 8px; padding: 6px 10px; display: inline-block; }
.dx-pie-fila { border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 24px 32px; text-align: center; }
.dx-pie-fila p { margin: 0; font-size: 12px; }
@media (min-width: 768px) { .dx-pie-fila { flex-direction: row; justify-content: space-between; padding-block: 20px; } }