/* ============================================
   TEYRA CREATIVE — Subpages Stylesheet
   ============================================ */

/* --- Page Hero --- */
.page-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--nav-height) + 3rem) 0 4rem;
    overflow: hidden;
}

.page-hero--compact {
    min-height: 360px;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--black) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.8) 100%),
        linear-gradient(to right, var(--black) 0%, transparent 60%);
}

.page-hero .container {
    width: 100%;
}

.page-hero-content {
    position: relative;
    z-index: 1;
}

.page-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.page-hero-desc {
    font-size: 1.1rem;
    color: var(--gray-400);
    max-width: 550px;
    line-height: 1.7;
}

/* ===========================
   PROYECTOS PAGE — Redesign
   =========================== */

/* Editorial Header */
.pf-header {
    padding: calc(var(--nav-height) + 5rem) 0 4rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pf-header-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
}

.pf-header-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.2rem;
}

.pf-header-title {
    font-family: var(--font-primary);
    font-size: clamp(4.5rem, 11vw, 9rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.88;
    margin: 0;
}

.pf-header-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
    padding-bottom: 0.3rem;
}

.pf-header-desc {
    font-size: 1rem;
    color: var(--gray-400);
    line-height: 1.8;
    max-width: 420px;
}

.pf-header-count {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.pf-header-num {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.pf-header-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Section + Filters */
.pf-section {
    padding: 3rem 0 8rem;
}

.pf-filters-wrap {
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pf-filters {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.pf-btn {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 1.5rem;
    margin-bottom: -1.5rem;
    position: relative;
    transition: color 0.3s;
}

.pf-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--red);
    transition: width 0.4s var(--ease-out-expo);
}

.pf-btn:hover { color: var(--gray-300); }
.pf-btn.active { color: var(--white); }
.pf-btn.active::after { width: 100%; }

/* ---- Cursor Image Preview (solo mouse real) ---- */
@media (hover: none), (pointer: coarse) {
    .pw-cursor-preview { display: none !important; }
}

.pw-cursor-preview {
    position: fixed;
    width: 340px;
    height: 210px;
    border-radius: 14px;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, calc(-100% - 20px)) rotate(-2deg);
    opacity: 0;
    transition: opacity 0.22s, transform 0.22s;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}

.pw-cursor-preview.active {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 20px)) rotate(-1deg);
}

.pw-cursor-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Project List ---- */
.pw-list {
    border-top: 1px solid rgba(255,255,255,0.07);
}

.pw-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto auto;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
    cursor: pointer;
    transition: padding-left 0.45s var(--ease-out-expo);
}

.pw-item.hidden { display: none; }

/* Red left bar on hover */
.pw-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s var(--ease-out-expo);
}

.pw-item:hover { padding-left: 1.2rem; }
.pw-item:hover::before { transform: scaleY(1); }

/* Number */
.pw-num {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.18);
    transition: color 0.3s;
    line-height: 1;
}
.pw-item:hover .pw-num { color: var(--red); }

/* Name + type block */
.pw-name-wrap {
    min-width: 0;
}

.pw-name {
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 3.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--gray-500);
    margin: 0 0 0.3rem;
    transition: color 0.35s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-item:hover .pw-name { color: var(--white); }

.pw-type {
    font-size: 0.78rem;
    color: var(--gray-600);
    transition: color 0.3s;
}
.pw-item:hover .pw-type { color: var(--gray-400); }

/* Tags */
.pw-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pw-tags span {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.22rem 0.65rem;
    border-radius: 100px;
    transition: color 0.3s, background 0.3s, border-color 0.3s;
    white-space: nowrap;
}
.pw-item:hover .pw-tags span {
    color: var(--gray-300);
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
}

/* Date */
.pw-date {
    font-size: 0.75rem;
    color: var(--gray-600);
    white-space: nowrap;
    transition: color 0.3s;
    min-width: 7rem;
    text-align: right;
}
.pw-item:hover .pw-date { color: var(--gray-400); }

/* Desktop: ocultar imagen de card */
.pw-item-img { display: none; }

/* Responsive */
@media (max-width: 768px) {
    /* Filtros scrolleables horizontalmente */
    .pf-filters-wrap {
        margin-left: calc(-1 * var(--container-padding, 1.5rem));
        margin-right: calc(-1 * var(--container-padding, 1.5rem));
        padding-left: var(--container-padding, 1.5rem);
        padding-right: var(--container-padding, 1.5rem);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pf-filters-wrap::-webkit-scrollbar { display: none; }
    .pf-filters { gap: 1.8rem; flex-wrap: nowrap; width: max-content; }

    /* Ocultar cursor preview */
    .pw-cursor-preview { display: none; }

    /* Mantener formato lista igual que desktop */
    .pw-list {
        display: block;
        border-top: 1px solid rgba(255,255,255,0.07);
    }

    /* Item: mismo estilo lista que desktop, compacto */
    .pw-item {
        display: grid;
        grid-template-columns: 2rem 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0 0.75rem;
        padding: 1.1rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        border-radius: 0;
        background: transparent;
        border-left: none;
        border-right: none;
        border-top: none;
        overflow: visible;
    }
    .pw-item:hover { padding-left: 0.6rem; }
    .pw-item::before { display: block; }

    /* Sin imagen en mobile */
    .pw-item-img { display: none; }

    /* Número */
    .pw-num {
        font-size: 0.6rem;
        color: var(--gray-600);
        grid-column: 1;
        grid-row: 1 / 3;
        padding: 0;
        display: block;
        align-self: center;
    }

    /* Nombre + tipo */
    .pw-name-wrap {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }
    .pw-name {
        font-size: clamp(0.95rem, 3.5vw, 1.15rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--gray-300);
        margin-bottom: 0;
    }
    .pw-type { font-size: 0.72rem; }

    /* Tags debajo del nombre */
    .pw-tags {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 0.3rem;
        margin-top: 0.3rem;
        padding: 0;
        justify-content: flex-start;
    }
    .pw-tags span { font-size: 0.58rem; padding: 0.18rem 0.5rem; }
    .pw-tags span:nth-child(n+3) { display: none; }

    /* Fecha: ocultar en mobile */
    .pw-date { display: none; }
}

/* ===========================
   NOSOTROS PAGE — Redesign
   =========================== */

/* Story */
.nosotros-story {
    padding: 6rem 0 4rem;
}

.nosotros-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.nosotros-story-left {
    position: sticky;
    top: 120px;
}

.nosotros-story-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
}

.nosotros-story-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--ease-out-expo);
}

.nosotros-story-img-wrap:hover img {
    transform: scale(1.04);
}

.nosotros-story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 45%, transparent 75%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
}

.nosotros-year {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
}

.nosotros-quote {
    font-family: var(--font-primary);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
    padding: 0;
    border: none;
    border-left: 3px solid var(--red);
    padding-left: 1.2rem;
}

.nosotros-story-right {
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nosotros-story-right .section-tag {
    margin-bottom: 2rem;
    display: inline-block;
}

.nosotros-story-lead {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gray-300);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.nosotros-story-body {
    font-size: 0.95rem;
    color: var(--gray-400);
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.nosotros-story-body strong {
    color: var(--white);
    font-weight: 600;
}

.nosotros-story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.nosotros-story-tags span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gray-300);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
}

/* ---- Numbers Ribbon ---- */
.nos-ribbon {
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.01);
}

.nos-ribbon-inner {
    display: flex;
    align-items: stretch;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 2rem);
}

.nos-ribbon-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.nos-ribbon-sep {
    width: 1px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
    margin: 1.5rem 0;
}

.nos-ribbon-num {
    display: block;
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.nos-ribbon-sfx { color: var(--red); }

.nos-ribbon-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* ---- Differentiators ---- */
.nos-diffs {
    padding: 7rem 0;
}

.nos-diffs-head {
    margin-bottom: 4rem;
}

.nos-diffs-list {
    border-top: 1px solid rgba(255,255,255,0.07);
}

.nos-diff {
    display: grid;
    grid-template-columns: 2.5rem 1fr 300px 1.5rem;
    align-items: start;
    gap: 2.5rem;
    padding: 3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
    cursor: default;
    transition: padding-left 0.45s var(--ease-out-expo);
}

.nos-diff::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s var(--ease-out-expo);
}

.nos-diff:hover { padding-left: 1.2rem; }
.nos-diff:hover::before { transform: scaleY(1); }

.nos-diff-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.18);
    padding-top: 0.6rem;
    transition: color 0.3s;
}
.nos-diff:hover .nos-diff-num { color: var(--red); }

.nos-diff-title {
    font-family: var(--font-primary);
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--gray-400);
    transition: color 0.35s;
}
.nos-diff:hover .nos-diff-title { color: var(--white); }

.nos-diff-text {
    font-size: 0.88rem;
    color: var(--gray-500);
    line-height: 1.75;
    padding-top: 0.5rem;
    transition: color 0.3s;
}
.nos-diff:hover .nos-diff-text { color: var(--gray-300); }

.nos-diff-arrow {
    color: var(--gray-600);
    flex-shrink: 0;
    margin-top: 0.5rem;
    transition: color 0.3s, transform 0.35s var(--ease-out-expo);
}
.nos-diff:hover .nos-diff-arrow {
    color: var(--red);
    transform: translate(3px, -3px);
}

/* ---- Values — full-bleed panels ---- */
.nos-vals {
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.nos-vals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.nos-val {
    position: relative;
    padding: 5rem 4rem;
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    background: var(--black);
    transition: background 0.4s;
}

.nos-val:last-child { border-right: none; }
.nos-val:hover { background: rgba(255,255,255,0.015); }

.nos-val-bg {
    position: absolute;
    top: -1.5rem;
    right: -0.5rem;
    font-family: var(--font-primary);
    font-size: 13rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: rgba(255,255,255,0.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition: color 0.4s;
}
.nos-val:hover .nos-val-bg { color: rgba(200,30,30,0.04); }

.nos-val-inner {
    position: relative;
    z-index: 1;
}

.nos-val-icon {
    width: 52px; height: 52px;
    background: rgba(200,30,30,0.1);
    border: 1px solid rgba(200,30,30,0.22);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    color: var(--red);
    transition: background 0.3s, border-color 0.3s;
}
.nos-val:hover .nos-val-icon {
    background: rgba(200,30,30,0.18);
    border-color: rgba(200,30,30,0.4);
}

.nos-val-title {
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.nos-val-text {
    font-size: 0.92rem;
    color: var(--gray-400);
    line-height: 1.8;
    transition: color 0.3s;
}
.nos-val:hover .nos-val-text { color: var(--gray-300); }

/* ---- Skills Cloud ---- */
.nos-skills {
    padding: 7rem 0 9rem;
}

.nos-skills-head {
    margin-bottom: 4rem;
}

.nos-skills-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.nos-skill-tag {
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: 100px;
    border: 1.5px solid rgba(255,255,255,0.1);
    color: var(--gray-400);
    letter-spacing: -0.01em;
    cursor: default;
    transition: all 0.3s var(--ease-out-expo);
}

.nos-skill-tag--lg {
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    padding: 0.8rem 1.8rem;
}

.nos-skill-tag--accent {
    border-color: rgba(200,30,30,0.3);
    color: var(--red);
}

.nos-skill-tag:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: scale(1.04);
}

/* ---- Responsive Nosotros ---- */
@media (max-width: 900px) {
    .nosotros-story-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .nosotros-story-left {
        position: static;
        order: 2;
    }
    .nosotros-story-right { order: 1; }

    .nos-ribbon-inner { flex-wrap: wrap; }
    .nos-ribbon-item { flex: 0 0 50%; padding: 2.5rem 1rem; }
    .nos-ribbon-sep { display: none; }

    .nos-diffs-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nos-diff {
        grid-template-columns: 2rem 1fr;
        gap: 1.5rem;
    }
    .nos-diff-text { display: none; }
    .nos-diff-arrow { display: none; }

    .nos-vals-grid { grid-template-columns: 1fr; }
    .nos-val {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 3.5rem 2.5rem;
    }
    .nos-val:last-child { border-bottom: none; }
    .nos-val-bg { font-size: 9rem; }
}

@media (max-width: 600px) {
    .nos-ribbon-item { flex: 0 0 50%; padding: 2rem 0.5rem; }
    .nos-diff { grid-template-columns: 2rem 1fr; gap: 1rem; }
    .nos-val { padding: 3rem 1.8rem; }
    .nos-skill-tag--lg { font-size: 1rem; padding: 0.7rem 1.4rem; }
}

@media (max-width: 768px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Values */
.values-section {
    padding: 6rem 0;
    background: var(--black-light);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.value-card {
    background: var(--black-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: border-color 0.4s, transform 0.4s var(--ease-out-expo);
}

.value-card:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.value-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.5rem;
}

.value-card-icon svg {
    width: 100%;
    height: 100%;
    color: var(--red);
}

.value-card h3 {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.value-card p {
    font-size: 0.88rem;
    color: var(--gray-400);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Team Expanded */
.team-expanded {
    padding: 6rem 0;
}

.team-expanded-grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.team-expanded-card {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 3rem;
    align-items: center;
    background: var(--black-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.4s;
}

.team-expanded-card:hover {
    border-color: rgba(255,255,255,0.12);
}

.team-expanded-card--reverse {
    grid-template-columns: 1fr 350px;
}

.team-expanded-card--reverse .team-expanded-img {
    order: 2;
}

.team-expanded-card--reverse .team-expanded-info {
    order: 1;
    padding-left: 2.5rem;
}

.team-expanded-img {
    height: 100%;
    min-height: 380px;
}

.team-expanded-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-expanded-info {
    padding: 2.5rem 2.5rem 2.5rem 0;
}

.team-expanded-info h3 {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.team-expanded-info p {
    font-size: 0.92rem;
    color: var(--gray-400);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.team-expanded-social {
    margin-bottom: 1.5rem;
}

.team-expanded-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-400);
    transition: color 0.3s;
}

.team-expanded-social a:hover {
    color: var(--red);
}

.team-expanded-social svg {
    color: var(--red);
}

@media (max-width: 768px) {
    .team-expanded-card,
    .team-expanded-card--reverse {
        grid-template-columns: 1fr;
    }
    .team-expanded-card--reverse .team-expanded-img {
        order: 0;
    }
    .team-expanded-card--reverse .team-expanded-info {
        order: 0;
        padding-left: 1.5rem;
    }
    .team-expanded-img {
        min-height: 280px;
    }
    .team-expanded-info {
        padding: 1.5rem;
    }
}

/* Gallery */
.gallery-section {
    padding: 6rem 0;
    background: var(--black-light);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 280px 280px;
    gap: 1rem;
    margin-top: 1rem;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item--wide {
    grid-column: span 1;
}

.gallery-item:nth-child(1) { grid-column: 1; grid-row: 1 / 2; }
.gallery-item:nth-child(2) { grid-column: 2; grid-row: 1 / 2; }
.gallery-item:nth-child(3) { grid-column: 3; grid-row: 1 / 2; }
.gallery-item:nth-child(4) { grid-column: 1 / 4; grid-row: 2 / 3; }

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: auto; }
    .gallery-item:nth-child(2) { grid-column: 1; grid-row: auto; }
    .gallery-item:nth-child(3) { grid-column: 2; grid-row: auto; }
    .gallery-item:nth-child(4) { grid-column: 1 / 3; grid-row: auto; }
}

/* ===========================
   EQUIPO PAGE
   =========================== */

/* ===========================
   EQUIPO PAGE — Redesign
   =========================== */

.equipo-section {
    padding: 3rem 0 4rem;
}

/* ---- Featured Member ---- */
.equipo-featured {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 0;
    min-height: 640px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 5rem;
    padding-bottom: 5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
}

/* Gradient line separator image ↔ text */
.equipo-featured::after {
    content: '';
    position: absolute;
    left: 420px;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(200,30,30,0.55) 25%, rgba(200,30,30,0.55) 75%, transparent);
    pointer-events: none;
}

.equipo-featured-img {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.equipo-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(12%);
    transition: filter 0.7s, transform 0.9s var(--ease-out-expo);
}

.equipo-featured:hover .equipo-featured-img img {
    filter: grayscale(0%);
    transform: scale(1.04);
}

.equipo-featured-body {
    padding: 2rem 0 2rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: none;
    position: relative;
    overflow: hidden;
}

/* Ghost "01" number */
.equipo-featured-body::before {
    content: '01';
    position: absolute;
    bottom: -3rem;
    right: -2rem;
    font-family: var(--font-primary);
    font-size: 20rem;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: rgba(255,255,255,0.022);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ---- Index label ---- */
.equipo-index {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--red);
    text-transform: uppercase;
}

/* Featured: line prefix */
.equipo-featured .equipo-index {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.equipo-featured .equipo-index::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--red);
    flex-shrink: 0;
}

.equipo-featured-name {
    font-family: var(--font-primary);
    font-size: clamp(4rem, 6.5vw, 7.5rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
    color: var(--white);
}

.equipo-featured-role {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    padding: 0.44rem 1.1rem;
    border: 1px solid rgba(200,30,30,0.45);
    border-radius: 100px;
    background: rgba(200,30,30,0.1);
    width: fit-content;
}

.equipo-featured-bio {
    font-size: 0.98rem;
    color: var(--gray-400);
    line-height: 1.85;
    margin-bottom: 2.5rem;
    max-width: 400px;
}

.equipo-featured-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin-bottom: 2rem;
}

.equipo-featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.equipo-featured-tags span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-400);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    padding: 0.38rem 0.9rem;
    border-radius: 100px;
    transition: all 0.3s;
}

.equipo-featured:hover .equipo-featured-tags span {
    color: var(--gray-200);
    border-color: rgba(200,30,30,0.3);
}

/* ---- Portrait Bento Grid ---- */
.equipo-portraits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 360px;
    gap: 1rem;
}

/* Ariana: 2 cols × 2 rows — big showcase */
.equipo-portrait:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.equipo-portrait {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--black-card);
    cursor: default;
}

.equipo-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s var(--ease-out-expo), filter 0.5s;
    filter: grayscale(25%);
}

.equipo-portrait:hover img {
    transform: scale(1.06);
    filter: grayscale(0%);
}

.equipo-portrait-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,6,6,0.97) 18%, rgba(6,6,6,0.4) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4rem;
    transition: background 0.45s;
}

.equipo-portrait:hover .equipo-portrait-overlay {
    background: linear-gradient(to top, rgba(6,6,6,0.98) 35%, rgba(6,6,6,0.72) 68%, rgba(6,6,6,0.12) 100%);
}

/* Portrait index: pill badge */
.equipo-portrait-overlay > .equipo-index {
    align-self: flex-start;
    margin-bottom: 0;
    font-size: 0.6rem;
    padding: 0.26rem 0.72rem;
    border-radius: 100px;
    background: rgba(200,30,30,0.14);
    border: 1px solid rgba(200,30,30,0.3);
}

.equipo-portrait-overlay > .equipo-index::before {
    display: none !important;
}

.equipo-portrait-bottom {
    display: flex;
    flex-direction: column;
}

.equipo-portrait-name {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 0.25rem;
    line-height: 1.1;
}

/* Bigger name for the featured portrait */
.equipo-portrait:nth-child(1) .equipo-portrait-name {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.equipo-portrait-role {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
}

.equipo-portrait-bio {
    font-size: 0.82rem;
    color: var(--gray-400);
    line-height: 1.65;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.45s ease, opacity 0.38s ease, margin-top 0.38s;
}

.equipo-portrait:hover .equipo-portrait-bio {
    max-height: 120px;
    opacity: 1;
    margin-top: 0.75rem;
}

.equipo-portrait-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.45s ease 0.07s, opacity 0.38s ease 0.07s, margin-top 0.38s 0.07s;
}

.equipo-portrait:hover .equipo-portrait-tags {
    max-height: 80px;
    opacity: 1;
    margin-top: 0.7rem;
}

.equipo-portrait-tags span {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--gray-300);
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 0.22rem 0.58rem;
    border-radius: 100px;
}

/* CTA */
.equipo-cta {
    padding: 4rem 0 6rem;
}

.equipo-cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4rem;
    background: var(--black-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

.equipo-cta-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--red);
    border-radius: 4px 0 0 4px;
}

.equipo-cta-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.equipo-cta-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
}

.equipo-cta-desc {
    font-size: 1rem;
    color: var(--gray-400);
    max-width: 480px;
    line-height: 1.7;
}

.equipo-cta-action {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .equipo-featured { grid-template-columns: 360px 1fr; }
    .equipo-featured::after { left: 360px; }
}

@media (max-width: 900px) {
    .equipo-featured {
        grid-template-columns: 1fr;
        padding-bottom: 3rem;
        margin-bottom: 3rem;
        overflow: visible;
    }
    .equipo-featured::after { display: none; }
    .equipo-featured-img { aspect-ratio: 3/4; max-height: 480px; }
    .equipo-featured-body {
        padding: 2.5rem 0 0;
        overflow: visible;
    }
    .equipo-featured-body::before { font-size: 10rem; bottom: -1rem; }
    .equipo-featured .equipo-index { margin-bottom: 1.5rem; }

    .equipo-portraits {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 300px;
    }
    .equipo-portrait:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .equipo-cta-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem;
    }
}

@media (max-width: 600px) {
    .equipo-featured-img { max-height: 400px; }
    .equipo-portraits { grid-auto-rows: 260px; }
}

@media (max-width: 480px) {
    .equipo-portraits {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }
    .equipo-portrait:nth-child(1) { grid-column: span 1; grid-row: span 1; }
}

/* ===========================
   CONTACTO PAGE
   =========================== */

.contact-page {
    padding: 5rem 0 8rem;
}

/* Intro */
.contact-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0;
}

.contact-main-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 0.75rem;
}

.contact-main-desc {
    font-size: 1.05rem;
    color: var(--gray-400);
    line-height: 1.7;
    max-width: 480px;
}

.contact-intro-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.contact-cta-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.contact-cta-text {
    flex: 1;
}

.contact-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.2rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .contact-cta-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    .contact-cta-actions {
        align-items: flex-start;
    }
}

.contact-cta-inline {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.contact-response-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-400);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    white-space: nowrap;
}

.contact-response-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

/* Channels List */
.contact-channels-list {
    display: flex;
    flex-direction: column;
}

.contact-channel-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2.2rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    cursor: pointer;
}

.contact-channel-row--static {
    cursor: default;
}

.contact-channel-row-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(196, 30, 42, 0.1);
    border: 1px solid rgba(196, 30, 42, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--red);
}

.contact-channel-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact-channel-row-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.contact-channel-row-value {
    font-family: var(--font-primary);
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.01em;
}

.contact-channel-row-arrow {
    color: var(--gray-600);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .contact-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    .contact-intro-right {
        align-items: flex-start;
    }
    .contact-channel-row {
        grid-template-columns: 52px 1fr;
        gap: 1.2rem;
    }
    .contact-channel-row-arrow {
        display: none;
    }
    .contact-channel-row-icon {
        width: 48px;
        height: 48px;
    }
}

/* ===========================
   FAQ
   =========================== */

.faq-section {
    padding: 6rem 0 8rem;
    background: var(--black-light);
}

.faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.faq-item {
    background: var(--black-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.faq-item.open {
    border-color: rgba(196, 30, 42, 0.3);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-body);
}

.faq-question svg {
    flex-shrink: 0;
    color: var(--gray-500);
    transition: transform 0.3s var(--ease-out-expo), color 0.3s;
}

.faq-item.open .faq-question svg {
    transform: rotate(180deg);
    color: var(--red);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out-expo), padding 0.4s;
    padding: 0 1.5rem;
}

.faq-item.open .faq-answer {
    max-height: 300px;
    padding: 0 1.5rem 1.3rem;
}

.faq-answer p {
    font-size: 0.88rem;
    color: var(--gray-400);
    line-height: 1.7;
}

/* ===========================
   PRECIOS PAGE — Included & Tools
   =========================== */

.included-section {
    padding: 6rem 0;
    background: var(--black-light);
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.included-item {
    background: var(--black-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 2rem;
    transition: border-color 0.4s, transform 0.4s var(--ease-out-expo);
}

.included-item:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.included-item svg {
    width: 32px;
    height: 32px;
    color: var(--red);
    margin-bottom: 1rem;
}

.included-item h3 {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.included-item p {
    font-size: 0.85rem;
    color: var(--gray-400);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .included-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   SERVICIOS PAGE — Detail blocks & Tools
   =========================== */

.services-detail {
    padding: 4rem 0 6rem;
}

.service-detail-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.service-detail-block:last-child {
    border-bottom: none;
}

.service-detail-block--reverse {
    direction: rtl;
}

.service-detail-block--reverse > * {
    direction: ltr;
}

.service-detail-num {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--red);
    margin-bottom: 1rem;
}

.service-detail-title {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.2rem;
}

.service-detail-desc {
    font-size: 0.92rem;
    color: var(--gray-400);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.service-detail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.service-detail-list li {
    font-size: 0.88rem;
    color: var(--gray-300);
    padding-left: 1.2rem;
    position: relative;
}

.service-detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
}

.service-detail-visual {
    border-radius: 16px;
    overflow: hidden;
}

.service-detail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.6s var(--ease-out-expo);
}

.service-detail-visual:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .service-detail-block,
    .service-detail-block--reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
        direction: ltr;
    }
}

/* Tools */
.tools-section {
    padding: 6rem 0;
    background: var(--black-light);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.tool-card {
    background: var(--black-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.4s, transform 0.4s var(--ease-out-expo);
}

.tool-card:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.tool-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.2rem;
}

.tool-card-icon svg {
    width: 100%;
    height: 100%;
    color: var(--red);
}

.tool-card h3 {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tool-card p {
    font-size: 0.82rem;
    color: var(--gray-400);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   PROJECT LIST REVEAL
   =========================== */
.pw-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.pw-reveal.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

html.skip-reveal .pw-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}