/* Yalemo v2.7d — menú de documentos con SÓLO los 3 habilitados. Celular primero: 3 cuadritos en una fila (360–599 px); a menos de
   360 px (p. ej. 320) una columna de renglones (ícono a la izquierda) para no cortar «Recomendación laboral» ni dejar una fila coja;
   desde 600 px, 3 tarjetas anchas con su «para». Sin chips ni etiquetas de «no listo». Prefijo dm-. Sin estilos en línea (CSP). */
@media (min-width:960px){ .dm .nav .nav__empezar{display:none} }
@media (max-width:959px){
  .dm .nav .nav__empezar{color:var(--y-cobalto-900);font-weight:600}
  .dm .top__acc .top__entrar{min-height:44px;padding:0 10px;font-weight:500;font-size:.9375rem;color:var(--y-tinta-2)}
  .dm .top__acc .top__entrar:hover{background:transparent;color:var(--y-tinta);text-decoration:underline}
}
.dm{line-height:1.5}
html.dm-modal{overflow:hidden}
.dm-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dm-wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}
[hidden]{display:none!important}

/* Sello rojo «GRATIS» (siempre arriba, sin desplazar) */
.dm-gratis{background:#C8102E;color:#fff}
.dm-gratis__in{display:flex;align-items:center;justify-content:center;padding-top:7px;padding-bottom:7px;text-align:center}
.dm-gratis p{margin:0}
.dm-gratis b{font-family:var(--y-font-titulos);font-size:17px;line-height:1.3}
.dm-gratis em{font-style:normal;background:#fff;color:#C8102E;border-radius:8px;padding:0 7px;margin:0 2px;font-weight:800;letter-spacing:.03em}
.dm-gratis__st{display:block;font-size:14px}
.dm-nw{white-space:nowrap}

/* Título */
.dm-hero{padding:12px 0 2px}
.dm-hero h1{font-size:24px;line-height:1.15;margin:0 0 4px;letter-spacing:0}
.dm-sub{color:var(--y-tinta-2);margin:0;font-size:15px;line-height:1.4}

/* Cuadritos */
.dm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:12px 0 0;padding:0}
.dm-grid li{display:flex;min-width:0}
.dm-cua{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:100%;min-height:100px;
  padding:10px 4px 8px;margin:0;text-align:center;background:#fff;border:1.5px solid #C9D1FF;border-radius:16px;font:inherit;color:var(--y-tinta);box-shadow:var(--y-sombra-1)}
button.dm-cua{cursor:pointer;transition:border-color .16s,transform .16s}
button.dm-cua:hover{border-color:var(--y-cobalto);transform:translateY(-1px)}
button.dm-cua:focus-visible{border-color:var(--y-cobalto);outline:3px solid var(--y-foco);outline-offset:2px}
.dm-cua__ic{width:44px;height:44px;border-radius:14px;background:var(--y-cobalto-50);color:var(--y-cobalto);display:grid;place-items:center;flex:0 0 auto}
.dm-ic{width:28px;height:28px}
.dm-cua__nom{font-family:var(--y-font-titulos);font-weight:600;font-size:13.5px;line-height:1.2;letter-spacing:-.005em;overflow-wrap:break-word;hyphens:manual}
/* «Para qué sirve» dentro de la tarjeta: sólo en renglones (<360 px) y en compu (≥600 px); en 3 cuadritos de celular sale en el panel */
.dm-cua__para{display:none;color:var(--y-tinta-2);font-size:14px;line-height:1.35;font-weight:400}
/* Íconos A COLOR (reglas de Corp_Disenador, adaptadas): el SVG trae su
   propio fondo redondeado; la caja no pinta otro y el dibujo la llena (44 px celular / 56 px desde 600 px). Las medidas no cambian. */
.dm-ic--color{background:transparent;box-shadow:none}
.dm-ic--color .dm-ic{width:100%;height:100%}

.dm-nada{background:#fff;border:1px dashed var(--y-borde-campo);border-radius:14px;padding:16px;color:var(--y-tinta-2)}
.dm-ayuda{margin:16px 0 6px;color:var(--y-tinta-2);font-size:14.5px;text-align:center}
.dm-plan{color:var(--y-tinta-3);font-size:14px;text-align:center;margin:0 0 20px}
.dm .pie{margin-top:8px}

/* Panel «¿Cómo lo quieres hacer?» (dialog nativo: foco atrapado y Esc) — igual que v2.7m */
.dm-velo{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--y-tinta);overflow:auto}
.dm-velo[open]{display:flex;align-items:flex-end;justify-content:center}
.dm-velo::backdrop{background:rgba(22,27,51,.55)}
.dm-velo:not([open]){display:none}
.dm-hoja{background:#fff;width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:14px 18px 22px;box-shadow:var(--y-sombra-2)}
.dm-asa{width:44px;height:5px;border-radius:9px;background:var(--y-linea);margin:0 auto 14px}
.dm-elegido{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.dm-em .dm-ic{width:30px;height:30px}
.dm-em.dm-ic--color .dm-ic{width:52px;height:52px}
.dm-em{flex:0 0 52px;height:52px;border-radius:14px;background:var(--y-cobalto-50);color:var(--y-cobalto);display:grid;place-items:center}
.dm-elegido small{display:block;color:var(--y-tinta-3);font-size:14px;font-weight:600}
.dm-elegido h2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:0;margin:0}
.dm-hoja__para{color:var(--y-tinta-2);margin:6px 0 16px;font-size:15px}
.dm-hoja h3{font-size:19px;margin:0 0 10px;font-weight:700;letter-spacing:0}
.dm-modo{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;border-radius:18px;padding:14px 16px;text-decoration:none;margin-bottom:10px;border:2px solid var(--y-cobalto)}
.dm-modo__em{font-size:32px;flex:0 0 44px;text-align:center;line-height:1}
.dm-modo b{display:block;font-family:var(--y-font-titulos);font-size:19px;line-height:1.2}
.dm-modo__tx > span{display:block;font-size:14.5px;line-height:1.35}
.dm-modo--escribir{background:var(--y-cobalto);color:#fff}
.dm-modo--escribir:hover{background:var(--y-cobalto-hover);color:#fff}
.dm-modo--escribir .dm-modo__tx > span{color:#DDE3FF}
.dm-modo--dictar{background:#fff;color:var(--y-cobalto-900)}
.dm-modo--dictar:hover{background:var(--y-cobalto-50);color:var(--y-cobalto-900)}
.dm-modo--dictar .dm-modo__tx > span{color:var(--y-tinta-2)}
.dm-modo:focus-visible{outline:3px solid var(--y-tinta);outline-offset:3px;border-radius:18px}
.dm-nota{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14.5px;color:var(--y-tinta-2);margin:6px 0 10px;text-align:center}
.dm-rojo{color:#C8102E;font-weight:700}
.dm-otro{display:block;width:100%;min-height:44px;background:none;border:0;color:var(--y-cobalto);font:600 16px var(--y-font-texto);padding:12px;cursor:pointer;border-radius:12px}
.dm-otro:hover{text-decoration:underline}

@media (max-width:359px){
  .dm-grid{grid-template-columns:minmax(0,1fr);gap:8px;grid-auto-rows:1fr}   /* filas iguales aunque un «para» ocupe 3 líneas */
  .dm-cua{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;
    justify-items:start;min-height:72px;padding:10px 12px;text-align:left}
  .dm-cua__ic{grid-row:1 / span 2}
  .dm-cua__nom{font-size:16px;align-self:end}
  .dm-cua__para{display:block;font-size:13.5px;align-self:start}
  .dm-hero h1{font-size:22px}
  .dm-gratis b{font-size:16px}
}
@media (max-width:599px){ .dm-nw{display:block} }
@media (min-width:600px){
  .dm-grid{gap:16px;margin-top:20px}
  .dm-cua__para{display:block;max-width:30ch}
  .dm-hero h1{font-size:32px}
  .dm-hero{padding-top:28px}
  .dm-cua{min-height:180px;padding:22px 16px 18px;gap:10px}
  .dm-cua__ic{width:56px;height:56px}
  .dm-ic{width:34px;height:34px}
  .dm-cua__nom{font-size:18px;letter-spacing:0}
  .dm-velo[open]{align-items:center}
  .dm-hoja{border-radius:24px;padding:22px 26px}
  .dm-asa{display:none}
}
@media (min-width:900px){ .dm-cua__ic{width:64px;height:64px} .dm-cua{min-height:200px} }
@media (prefers-reduced-motion:reduce){ button.dm-cua{transition:none} button.dm-cua:hover{transform:none} }

/* T3 — más de tres tarjetas (formatos nuevos prendidos con interruptor): el menú pone data-muchos en la cuadrícula. Renglones de 3
   (celular y tableta) o de 4 (compu ≥900 px), el último renglón CENTRADO; en <360 px sigue siendo una columna. Con 3 no cambia nada. */
.dm-grid[data-muchos]{display:flex;flex-wrap:wrap;justify-content:center}
.dm-grid[data-muchos] li{flex:0 0 calc((100% - 16px) / 3)}
@media (max-width:359px){ .dm-grid[data-muchos] li{flex:0 0 100%} }
@media (min-width:600px){ .dm-grid[data-muchos] li{flex:0 0 calc((100% - 32px) / 3)} }
@media (min-width:900px){ .dm-grid[data-muchos] li{flex:0 0 calc((100% - 48px) / 4)} .dm-grid[data-muchos] .dm-cua{min-height:190px} }