/*==================================================
    SolucionaPC
    windows.css
    Estilos específicos de la página "Windows"
    Extiende style.css, responsive.css, darkmode.css
    manteniendo exactamente la misma identidad visual.
==================================================*/

/*==================================================
    ACCESIBILIDAD: SALTAR AL CONTENIDO
==================================================*/

.skip-link{

    position:absolute;

    left:16px;
    top:-60px;

    z-index:2000;

    background:var(--primary);

    color:#fff;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

    font-size:.92rem;

    transition:top .25s ease;

}

.skip-link:focus{

    top:16px;

}

/*==================================================
    BREADCRUMB
==================================================*/

.breadcrumb{

    padding:22px 0 0;

}

.breadcrumb ol{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    list-style:none;

    font-size:.9rem;

    color:var(--text-secondary);

}

.breadcrumb a{

    color:var(--text-secondary);
    transition:color var(--transition-fast);

}

.breadcrumb a:hover{

    color:var(--primary);

}

.breadcrumb li:not(:last-child)::after{

    content:"›";

    margin-left:8px;

    color:var(--text-secondary);

    opacity:.6;

}

.breadcrumb li[aria-current="page"]{

    color:var(--text);
    font-weight:500;

}

/*==================================================
    PAGE HERO (variante de .hero)
==================================================*/

.page-hero{

    min-height:auto;

    padding:70px 20px 90px;

}

.page-hero .hero-icon{

    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 26px;

    border-radius:20px;

    background:rgba(0,113,227,.1);

    color:var(--primary);

}

.page-hero .hero-icon svg{

    width:32px;
    height:32px;

}

.page-hero .hero-icon.is-success{

    background:rgba(52,199,89,.12);
    color:#1f9c46;

}

body.dark-mode .page-hero .hero-icon.is-success{

    color:#34C759;

}

.page-hero .hero-icon.is-warning{

    background:rgba(255,159,10,.14);
    color:#c47500;

}

body.dark-mode .page-hero .hero-icon.is-warning{

    color:#FF9F0A;

}

.page-hero .hero-icon.is-purple{

    background:rgba(139,92,246,.14);
    color:#7c3aed;

}

body.dark-mode .page-hero .hero-icon.is-purple{

    color:#a78bfa;

}

.page-hero h1{

    max-width:820px;

}

/*==================================================
    BANNER DE SECCIÓN (título de categoría)
    Tarjeta redondeada con resplandor degradado,
    insignia con icono y título grande.
==================================================*/

.section-banner{

    position:relative;

    isolation:isolate;
    overflow:hidden;

    text-align:center;

    max-width:900px;

    margin:0 auto 60px;

    padding:64px 32px 56px;

    border-radius:32px;

    border:1px solid var(--border);

    background:var(--background-secondary);

}

.section-alt .section-banner{

    background:var(--background);

}

.section-banner::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:radial-gradient(ellipse 65% 55% at 50% 0%,rgba(var(--banner-rgb),.16),transparent 75%);

}

body.dark-mode .section-banner::before{

    background:radial-gradient(ellipse 65% 55% at 50% 0%,rgba(var(--banner-rgb),.42),transparent 75%);

}

.section-banner.is-primary{ --banner-rgb:0,113,227; }
.section-banner.is-success{ --banner-rgb:52,199,89; }
.section-banner.is-warning{ --banner-rgb:255,159,10; }
.section-banner.is-purple{ --banner-rgb:139,92,246; }
.section-banner.is-neutral{ --banner-rgb:110,110,115; }

.section-badge{

    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:8px 20px 8px 10px;

    border-radius:999px;

    margin-bottom:28px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:rgb(var(--banner-rgb));

    background:rgba(var(--banner-rgb),.1);

    border:1px solid rgba(var(--banner-rgb),.28);

}

.badge-icon{

    width:26px;
    height:26px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:rgb(var(--banner-rgb));

    color:#fff;

    flex-shrink:0;

}

.badge-icon svg{

    width:14px;
    height:14px;

}

.section-banner h2{

    max-width:680px;

    margin:0 auto 16px;

}

.section-banner p{

    max-width:600px;

    margin:0 auto;

    font-size:1.05rem;

}

/*==================================================
    GRID DE TARJETAS (Aprende / Haz / Soluciona)
==================================================*/

.card-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.info-card{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    background:var(--surface,#fff);

    border:1px solid var(--border);

    border-radius:22px;

    padding:38px 32px;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}

.info-card:hover,
.info-card:focus-visible{

    transform:translateY(-8px);

    box-shadow:var(--shadow-accent);

    border-color:transparent;

}

.info-card:focus-visible{

    outline:2px solid var(--primary);
    outline-offset:3px;

}

.info-card h3{

    margin-bottom:10px;

    color:var(--text);

}

.info-card p{

    font-size:.97rem;

    margin-bottom:0;

}

.info-card .card-link{

    margin-top:20px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    font-size:.92rem;

    font-weight:600;

    color:var(--primary);

}

.info-card .card-link svg{

    width:16px;
    height:16px;

    transition:transform .25s ease;

}

.info-card:hover .card-link svg{

    transform:translateX(4px);

}

/*==================================================
    SECCIONES: fondos alternos suaves
==================================================*/

.section-alt{

    background:var(--background-secondary);

}

/*==================================================
    ARTÍCULOS DESTACADOS
==================================================*/

.featured-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.article-feature{

    display:flex;
    flex-direction:column;
    min-width:0;

    background:var(--surface,#fff);

    border:1px solid var(--border);

    border-radius:22px;

    padding:34px;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}

.article-feature:hover,
.article-feature:focus-visible{

    transform:translateY(-8px);

    box-shadow:var(--shadow-accent);

}

.article-feature:focus-visible{

    outline:2px solid var(--primary);
    outline-offset:3px;

}

.article-meta{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:16px;

    font-size:.82rem;

    color:var(--text-secondary);

}

.article-tag{

    padding:5px 12px;

    border-radius:999px;

    font-weight:600;

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.02em;

}

.article-tag.tag-aprende{
    color:var(--primary);
    background:rgba(0,113,227,.1);
}

.article-tag.tag-haz{
    color:#1f9c46;
    background:rgba(52,199,89,.12);
}

body.dark-mode .article-tag.tag-haz{
    color:#34C759;
}

.article-tag.tag-soluciona{
    color:#c47500;
    background:rgba(255,159,10,.14);
}

body.dark-mode .article-tag.tag-soluciona{
    color:#FF9F0A;
}

.article-tag.tag-tutorial{
    color:#7c3aed;
    background:rgba(139,92,246,.14);
}

body.dark-mode .article-tag.tag-tutorial{
    color:#a78bfa;
}

.article-feature h3{

    margin-bottom:12px;

    color:var(--text);

    overflow-wrap:break-word;

}

.article-feature p{

    font-size:.98rem;

    flex-grow:1;

}

.article-feature .card-link{

    margin-top:22px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    font-weight:600;

    color:var(--primary);

    font-size:.95rem;

}

.article-feature .card-link svg{

    width:16px;
    height:16px;

    transition:transform .25s ease;

}

.article-feature:hover .card-link svg{

    transform:translateX(4px);

}

/*==================================================
    FAQ (acordeón nativo <details>)
==================================================*/

.faq-list{

    max-width:820px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:16px;

}

.faq-item{

    background:var(--surface,#fff);

    border:1px solid var(--border);

    border-radius:18px;

    padding:6px 30px;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}

.faq-item[open]{

    box-shadow:var(--shadow-medium);

}

.faq-item summary{

    list-style:none;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:22px 0;

    font-weight:600;

    font-size:1.05rem;

    color:var(--text);

    cursor:pointer;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary .faq-icon{

    flex-shrink:0;

    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--background-secondary);

    color:var(--text-secondary);

    transition:transform .3s ease,background .3s ease,color .3s ease;

}

.faq-item summary .faq-icon svg{

    width:12px;
    height:12px;

}

.faq-item[open] summary .faq-icon{

    transform:rotate(45deg);

    background:var(--primary);

    color:#fff;

}

.faq-item summary:focus-visible{

    outline:2px solid var(--primary);
    outline-offset:4px;

    border-radius:8px;

}

.faq-answer{

    padding:0 0 26px;

    color:var(--text-secondary);

    font-size:.98rem;

    max-width:700px;

}

.no-results{

    text-align:center;

    padding:30px 20px;

    color:var(--text-secondary);

    font-size:.98rem;

    border:1px dashed var(--border);

    border-radius:18px;

    grid-column:1/-1;

}

[hidden]{

    display:none !important;

}

/*==================================================
    TARJETA DE CONTACTO
==================================================*/

.contact-card{

    max-width:480px;

    margin:0 auto;

    text-align:center;

    background:var(--surface,#fff);

    border:1px solid var(--border);

    border-radius:24px;

    padding:48px 40px;

    box-shadow:var(--shadow-small);

}

.contact-card h2{

    margin-bottom:8px;

}

.contact-card-email{

    display:inline-block;

    font-size:1.05rem;

    font-weight:600;

    color:var(--primary);

    margin-bottom:30px;

}

.contact-card-cta{

    display:inline-block;

    padding:16px 40px;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    text-decoration:none;

    box-shadow:0 1px 2px rgba(0,113,227,.15);

    transition:background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition);

}

.contact-card-cta:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(0,113,227,.28);

}

.contact-card-respuesta{

    margin-top:22px;

    margin-bottom:0;

    color:var(--text-secondary);

    font-size:.92rem;

}

.contact-card-divisor{

    border:none;

    border-top:1px solid var(--border);

    margin:28px 0 18px;

}

.contact-card-aviso{

    margin:0;

    font-size:.85rem;

    color:var(--text-secondary);

}

@media (max-width:600px){

    .contact-card{

        padding:36px 24px;

    }

}

/*==================================================
    PÁGINA 404
==================================================*/

.not-found-code{

    font-size:clamp(3.5rem,10vw,6rem);

    font-weight:800;

    letter-spacing:-.02em;

    color:var(--primary);

    opacity:.16;

    margin-bottom:-10px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    font-size:1rem;

    box-shadow:var(--shadow-medium);

    transition:var(--transition);

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}

.not-found{

    padding-bottom:50px;

}

/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:1024px){

    .card-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .featured-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .card-grid{

        grid-template-columns:1fr;

    }

    .page-hero{

        padding:50px 20px 60px;

    }

    .section-banner{

        padding:44px 22px 40px;

        border-radius:26px;

    }

    .faq-item{

        padding:4px 22px;

    }

}