/* ============================================================
   site.css — personalizaciones de yanchirino.com
   Carga después de style.css y responsive.css del template.
   Enfoque mobile-first: base = móvil, @media (min-width) para
   tablet y escritorio.
   ============================================================ */


/* ============================================================
   Base (móvil)
   ============================================================ */

body.home1-page {
    background: #1f1f1f;
}


/* ---- Hamburguesa ---- */

.icon-menu {
    width: 42px;
    height: 42px;
    top: 10px;
    right: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.icon-menu span {
    width: 16px;
}


/* ---- Section header ---- */

.section-header {
    padding-right: 60px;
}

.section-header h2 {
    font-size: 48px;
    line-height: 60px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 33px;
}

.section-header h2 span {
    color: var(--primary_color);
}

p.subtitle {
    margin-top: 0;
}


/* ---- Hero ---- */

.hero-section {
    padding-top: 90px;
}

.hero-section .hero-content h1 {
    font-size: 42px;
    line-height: 50px;
}

.hero-section .hero-content .go-to-project-btn {
    display: none;
}

.hero-section .hero-content .go-to-project-btn .round-text {
    animation: rotating 6s infinite linear;
}

.hero-section .hero-content .facts .fact-number {
    font-size: 72px;
    color: var(--primary_color);
    line-height: 56px;
    margin: 0 0 38px;
    font-weight: 300;
}


/* ---- Sidebar ---- */

.left-sidebar > img.me {
    max-width: 100%;
    height: auto;
}

.sidebar-header .brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sidebar-header .brand .name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.sidebar-header .brand .name span {
    color: var(--primary_color);
}

.left-sidebar .email {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 6px;
    letter-spacing: 0.3px;
    color: #fff;
    text-align: center;
}

.left-sidebar .address {
    font-size: 13px;
    font-weight: 300;
    color: #bdbdbd;
    margin: 0 0 18px;
    text-align: center;
}

.left-sidebar .copyright {
    font-size: 11px;
    margin-bottom: 28px;
    color: #888;
}


/* ---- Tech stack ---- */

.tech-stack {
    margin-top: 20px;
}

.tech-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #2a2a2a;
}

.tech-row:last-child {
    border-bottom: none;
}

.tech-category {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.tech-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.tech-icons li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    color: #cfcfcf;
    transition: .25s ease;
    cursor: default;
}

.tech-icons li i {
    font-size: 32px;
    line-height: 1;
}

.tech-icons li img {
    height: 28px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    filter: grayscale(0.2) brightness(1.05);
    transition: .25s ease;
}

.tech-icons li:hover {
    color: var(--primary_color);
    transform: translateY(-3px);
}

.tech-icons li:hover img {
    filter: none;
}


/* ---- Contact cards ---- */

.contact-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
}

.contact-methods .contact-card {
    border: 2px solid #333;
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    transition: .3s;
    text-decoration: none;
    display: block;
}

.contact-methods .contact-card:hover {
    border-color: var(--primary_color);
    transform: translateY(-4px);
}

.contact-methods .contact-card i {
    font-size: 42px;
    color: var(--primary_color);
    margin-bottom: 14px;
    display: block;
}

.contact-methods .contact-card h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-methods .contact-card p {
    color: #999;
    font-size: 15px;
    margin: 0;
    word-break: break-word;
}


/* ---- Portfolio: fondo claro con padding ---- */

.portfolio-items .portfolio-item .portfolio-item-inner.portfolio-contain {
    background: #f9f9f9;
    padding: 8px;
}

.portfolio-items .portfolio-item .portfolio-item-inner.portfolio-contain img {
    object-fit: contain;
    object-position: center;
}


/* ============================================================
   ≥576px — landscape phones / small tablets
   ============================================================ */

@media (min-width: 576px) {
    .contact-methods {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   ≥768px — tablet / desktop (defaults del template)
   ============================================================ */

@media (min-width: 768px) {
    .icon-menu {
        width: 55px;
        height: 55px;
        top: 60px;
        right: 68px;
        box-shadow: none;
    }

    .icon-menu span {
        width: 20px;
    }

    .section-header {
        padding-right: 0;
    }

    .hero-section {
        padding-top: 68px;
    }

    .hero-section .hero-content h1 {
        font-size: 62px;
        line-height: 72px;
    }

    .hero-section .hero-content .go-to-project-btn {
        display: flex;
    }

    .tech-row {
        flex-direction: row;
        align-items: center;
        gap: 30px;
        padding: 22px 0;
    }

    .tech-category {
        flex: 0 0 220px;
        font-size: 13px;
    }

    .tech-icons {
        gap: 28px;
    }

    .tech-icons li i {
        font-size: 38px;
    }

    .tech-icons li img {
        height: 34px;
    }

    .portfolio-items .portfolio-item .portfolio-item-inner.portfolio-contain {
        padding: 10px 20px;
    }
}


/* ============================================================
   Language switcher en el sidebar
   ============================================================ */

.lang-switcher {
    list-style: none;
    margin: 14px 0 22px;
    padding: 0;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.lang-switcher li {
    display: inline-block;
}

.lang-switcher a {
    color: #cfcfcf;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid #444;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    line-height: 1.4;
    display: inline-block;
}

.lang-switcher a:hover {
    border-color: var(--primary_color);
    color: var(--primary_color);
}

.lang-switcher a.active {
    background: var(--primary_color);
    color: #000;
    border-color: var(--primary_color);
}


/* ============================================================
   Lang banner (sugerencia de idioma)
   Aparece al top; empuja el contenido cuando está visible.
   ============================================================ */

body.has-lang-banner {
    padding-top: var(--lang-banner-h, 50px);
}

.lang-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary_color);
    color: #000;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.4;
    z-index: 1000000;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    font-family: 'Inter', sans-serif;
}

.lang-banner.lang-banner-visible {
    transform: translateY(0);
}

.lang-banner-text {
    color: #000;
}

.lang-banner-text strong {
    color: #000;
    font-weight: 700;
}

.lang-banner-switch {
    background: #000;
    color: var(--primary_color) !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    transition: background .2s ease, color .2s ease;
    line-height: 1;
}

.lang-banner-switch:hover {
    background: #1f1f1f;
}

.lang-banner-dismiss {
    background: transparent;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.35);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background .2s ease;
}

.lang-banner-dismiss:hover {
    background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 767px) {
    .lang-banner {
        padding: 10px 14px;
        font-size: 13px;
        gap: 10px;
    }
}