/* Documentación: iconos protagonistas, estilos aislados del resto del sitio. */
main.docs-page { --docs-ink:var(--site-text); --docs-muted:var(--site-muted); --docs-line:var(--site-line); width:100%; max-width:none; margin:0; padding:124px 0 76px; background:#fff; color:var(--docs-ink); font-size:16px; line-height:1.55; }
.docs-container { width:calc(100% - 64px); max-width:1320px; margin:0 auto; }
.docs-intro { padding:0 24px; }
.docs-intro h1 { margin:0; color:var(--docs-ink); font-size:var(--site-title-size); font-weight:700; line-height:1.5; letter-spacing:2px; }
.docs-intro h1::after { content:""; display:block; width:44px; height:3px; margin-top:14px; background:var(--site-accent); }
.docs-intro p { margin:14px 0 0; color:var(--docs-muted); font-size:16px; font-weight:300; line-height:1.8; }
.docs-resources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:52px; }
.docs-resource { --docs-accent:var(--site-link); min-width:0; padding:0 26px; text-align:center; }
.docs-resource + .docs-resource { border-left:1px solid var(--docs-line); }
.docs-resource-rest { --docs-accent:var(--site-link); }
.docs-resource-video { --docs-accent:var(--site-link); }
.docs-art { display:flex; align-items:center; justify-content:center; width:fit-content; height:216px; margin:0 auto 25px; border-radius:10px; }
.docs-logo { display:block; width:208px; height:208px; object-fit:contain; transition:transform .18s ease; }
.docs-logo-dotnet { border-radius:17px; }
.docs-logo-youtube { width:228px; height:208px; }
.docs-art:hover .docs-logo { transform:translateY(-4px); }
.docs-resource h2 { margin:0 0 14px; color:var(--docs-ink); font-size:var(--site-subtitle-size); font-weight:600; line-height:1.5; letter-spacing:normal; }
.docs-description { max-width:335px; min-height:52px; margin:0 auto; color:var(--docs-muted); font-size:16px; line-height:1.8; }
.docs-meta { display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 19px; color:var(--docs-muted); font-size:14px; }
.docs-meta .mdi { font-size:19px; }
.docs-page .docs-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:var(--docs-accent); font-size:16px; font-weight:600; line-height:1.5; }
.docs-link .mdi { font-size:22px; }
.docs-page .docs-link:hover { color:var(--docs-accent); text-decoration:underline; text-underline-offset:5px; }
.docs-details { max-width:340px; margin:15px auto 0; }
.docs-details summary { display:flex; align-items:center; justify-content:center; gap:15px; min-height:46px; width:fit-content; min-width:210px; max-width:100%; margin:0 auto; padding:14px 10px 0; border-top:1px solid var(--docs-line); color:var(--docs-muted); font-size:14px; list-style:none; cursor:pointer; }
.docs-details summary::-webkit-details-marker { display:none; }
.docs-details summary .mdi { font-size:22px; transition:transform .18s ease; }
.docs-details[open] summary .mdi { transform:rotate(90deg); }
.docs-details summary:hover { color:var(--docs-ink); }
.docs-details-content { padding:17px 4px 0; color:var(--docs-muted); text-align:left; font-size:16px; line-height:1.6; }
.docs-details-content p { margin:0 0 12px; }
.docs-details-content p:last-child { margin-bottom:0; }
.docs-page a:focus-visible,.docs-page summary:focus-visible { outline:3px solid var(--docs-accent,var(--site-text)); outline-offset:5px; border-radius:3px; }
/* Conserva el contacto compartido sin que el flotante cubra los recursos. */
body:has(.docs-page) .sf-call-widget { position:static; display:flex; justify-content:flex-end; padding:16px 24px; background:#fff; }
@media (max-width:1199px) and (min-width:768px) {
    .docs-container { width:calc(100% - 40px); }
    .docs-resource { padding:0 18px; }
    .docs-resource h2 { min-height:60px; font-size:var(--site-subtitle-size); display:flex; align-items:center; justify-content:center; line-height:1.5; letter-spacing:normal; font-weight:600; }
    .docs-description { min-height:77px; font-size:16px; }
    .docs-logo { width:172px; height:172px; }
    .docs-logo-youtube { width:182px; height:172px; }
    .docs-art { height:184px; }
    .docs-page .docs-link { font-size:16px; }
}
@media (max-width:767px) {
    main.docs-page { padding:98px 0 48px; }
    .docs-container { width:calc(100% - 40px); }
    .docs-intro { padding:0; }
    .docs-intro h1 { font-size:var(--site-title-size); line-height:1.5; letter-spacing:2px; font-weight:700; }
    .docs-intro p { max-width:360px; font-size:16px; }
    .docs-resources { grid-template-columns:1fr; margin-top:38px; gap:32px; }
    .docs-resource { padding:0 8px; }
    .docs-resource + .docs-resource { border-left:0; border-top:1px solid var(--docs-line); padding-top:32px; }
    .docs-art { height:158px; margin-bottom:20px; }
    .docs-logo { width:150px; height:150px; }
    .docs-logo-youtube { width:164px; height:150px; }
    .docs-resource h2 { font-size:var(--site-subtitle-size); line-height:1.5; letter-spacing:normal; font-weight:600; }
    .docs-description { min-height:0; max-width:335px; font-size:16px; }
    .docs-meta { margin:18px 0 8px; }
    .docs-page .docs-link { font-size:16px; }
    .docs-details { margin-top:8px; }
    body:has(.docs-page) .sf-call-widget { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
    .docs-logo,.docs-details summary .mdi { transition:none; }
    .docs-art:hover .docs-logo { transform:none; }
}