/*
Theme Name: Prohumanos 2026
Description: Tema editorial y comercial para Prohumanos.
Version: 0.1.0
Text Domain: prohumanos-2026
*/

:root {
    --ph-ink: #102f3f;
    --ph-sea: #0c6d72;
    --ph-paper: #f5f1e9;
    --ph-mint: #dcece5;
    --ph-lime: #cbdc68;
    --ph-line: #bfd0ca;
    --ph-white: #fffdf9
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--ph-paper);
    color: var(--ph-ink)
}

.wp-site-blocks {
    padding-top: 0 !important
}

.ph-topline {
    background: var(--ph-ink);
    color: #b9cfca;
    font-size: .68rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    padding: .6rem 6vw;
    display: flex;
    justify-content: space-between
}

.ph-header {
    background: rgba(245, 241, 233, .96);
    border-bottom: 1px solid rgba(16, 47, 63, .15);
    padding: 1.1rem 6vw;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    position: sticky;
    top: 0;
    z-index: 20
}

.ph-brand {
    color: var(--ph-ink);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.09em;
    text-decoration: none;
    white-space: nowrap
}

.ph-brand span {
    color: var(--ph-sea)
}

.ph-brand i {
    display: inline-block;
    width: .42rem;
    height: .42rem;
    background: var(--ph-lime);
    border-radius: 50%;
    margin: 0 0 .28rem .13rem
}

.ph-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.6rem
}

.ph-nav a {
    color: var(--ph-ink);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none
}

.ph-nav a:hover {
    color: var(--ph-sea)
}

.ph-nav .ph-header-cta {
    background: var(--ph-lime);
    color: var(--ph-ink);
    border: none;
    border-radius: 0;
    padding: .85rem 1.3rem;
    font-weight: 800;
    transition: background .15s ease, color .15s ease
}

.ph-nav .ph-header-cta:hover {
    background: var(--ph-ink);
    color: var(--ph-lime)
}

.ph-hero {
    background: var(--ph-paper);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 5vw;
    align-items: center;
    padding: 6.5rem 10vw 5.6rem
}

.ph-eyebrow {
    color: var(--ph-sea);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    margin: 0 0 1.4rem;
    text-transform: uppercase
}

.ph-eyebrow:before {
    background: currentColor;
    content: '';
    display: inline-block;
    height: 1px;
    margin: 0 .6rem .25rem 0;
    width: 1.5rem
}

.ph-hero h1,
.ph-section-title {
    font-family: Georgia, serif;
    font-size: clamp(2.85rem, 5.1vw, 5.3rem);
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: .97;
    margin: 0
}

.ph-hero h1 em,
.ph-section-title em {
    color: var(--ph-sea);
    font-weight: 400
}

.ph-hero .ph-lead {
    color: #45626a;
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 38rem;
    margin: 1.8rem 0
}

.ph-actions {
    display: flex;
    align-items: center;
    gap: 1.7rem;
    margin: 2.1rem 0 3.5rem
}

.ph-button {
    background: var(--ph-lime);
    color: var(--ph-ink);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .01em;
    padding: 1.05rem 1.6rem;
    display: inline-flex;
    gap: 1.4rem;
    align-items: center;
    transition: background .15s ease, color .15s ease
}

.ph-button:hover {
    background: var(--ph-ink);
    color: var(--ph-lime)
}

.ph-button .wp-block-button__link {
    background: var(--ph-lime);
    color: var(--ph-ink);
    border-radius: 0;
    padding: 1.05rem 1.6rem;
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background .15s ease, color .15s ease
}

.ph-button .wp-block-button__link:hover {
    background: var(--ph-ink);
    color: var(--ph-lime)
}

.ph-text-link {
    border-bottom: 1px solid var(--ph-ink);
    color: var(--ph-ink);
    font-size: .82rem;
    font-weight: 700;
    padding-bottom: .18rem;
    text-decoration: none
}

.ph-proof {
    border-top: 1px solid var(--ph-line);
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 26rem;
    padding-top: 1rem
}

.ph-proof strong {
    font-family: Georgia, serif;
    font-size: 2rem;
    letter-spacing: -.08em
}

.ph-proof span {
    color: #557178;
    font-size: .78rem;
    line-height: 1.25;
    max-width: 10rem
}

.ph-hero-art {
    height: 29rem;
    position: relative
}

.ph-portrait {
    background: linear-gradient(135deg, #dcece5 0%, #a9cac6 55%, #0c6d72 100%);
    height: 25rem;
    margin: 1.3rem 0 0 auto;
    overflow: hidden;
    position: relative;
    width: 80%
}

.ph-portrait:before {
    background: rgba(16, 47, 63, .9);
    border-radius: 50%;
    content: '';
    height: 15rem;
    left: 18%;
    position: absolute;
    top: 28%;
    width: 15rem
}

.ph-portrait:after {
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    content: '';
    height: 26rem;
    left: 3%;
    position: absolute;
    top: -18%;
    width: 26rem
}

.ph-art-lines {
    border: 1px solid rgba(12, 109, 114, .38);
    border-radius: 50%;
    bottom: -2rem;
    height: 19rem;
    position: absolute;
    right: -3.5rem;
    width: 19rem
}

.ph-art-card {
    background: var(--ph-lime);
    bottom: 0;
    box-shadow: .8rem .8rem 0 rgba(16, 47, 63, .12);
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    left: 0;
    line-height: 1.18;
    padding: 1.15rem;
    position: absolute;
    width: 13rem;
    z-index: 2
}

.ph-art-tag {
    background: var(--ph-ink);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.05;
    padding: 1.1rem;
    position: absolute;
    right: 0;
    top: 0;
    width: 9rem;
    z-index: 3
}

.ph-art-tag small {
    color: var(--ph-lime);
    display: block;
    font-family: monospace;
    font-size: .6rem;
    margin-bottom: 1.15rem
}

.ph-trust {
    background: var(--ph-mint);
    display: flex;
    gap: 2.2rem;
    justify-content: center;
    overflow: auto;
    padding: 1.2rem 6vw
}

.ph-trust span {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    white-space: nowrap
}

.ph-trust small {
    color: #557178;
    font-family: monospace;
    font-size: .61rem;
    letter-spacing: .1em;
    padding-top: .3rem;
    white-space: nowrap
}

.ph-intro,
.ph-services,
.ph-coverage,
.ph-resources {
    padding: 7rem 10vw
}

.ph-intro {
    display: grid;
    grid-template-columns: .7fr 2fr;
    gap: 5.5rem
}

.ph-number {
    color: var(--ph-sea);
    font-family: monospace;
    font-size: .7rem;
    letter-spacing: .1em;
    padding-top: .5rem
}

.ph-intro p {
    color: #49656b;
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 36rem;
    margin: 1.7rem 0 0
}

.ph-services {
    background: var(--ph-white)
}

.ph-services-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 2.8rem
}

.ph-services-head h2 {
    font-size: clamp(2.5rem, 4vw, 4.3rem)
}

.ph-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: 1.08fr 1fr
}

.ph-card {
    background: #e2ebe7;
    min-height: 20rem;
    padding: 1.8rem;
    position: relative
}

.ph-card.dark {
    background: var(--ph-ink);
    color: #fff
}

.ph-card.feature {
    background: var(--ph-sea);
    color: #fff
}

.ph-card .ph-card-index {
    color: var(--ph-sea);
    font-family: monospace;
    font-size: .68rem;
    letter-spacing: .1em
}

.ph-card.dark .ph-card-index,
.ph-card.feature .ph-card-index {
    color: var(--ph-lime)
}

.ph-card h3 {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3vw, 3.2rem);
    letter-spacing: -.065em;
    line-height: .98;
    margin: 2.9rem 0 .8rem
}

.ph-card p {
    font-size: .86rem;
    line-height: 1.35;
    max-width: 18rem
}

.ph-card a {
    bottom: 1.5rem;
    color: inherit;
    font-size: .77rem;
    font-weight: 700;
    position: absolute;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: .18rem
}

.ph-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ph-ink);
    color: #fff
}

.ph-process-art {
    background: radial-gradient(circle at 45% 30%, #8ab8b1 0 2%, transparent 2.4%), radial-gradient(circle at 69% 44%, #cbdc68 0 1.4%, transparent 1.8%), linear-gradient(135deg, #195462, #102f3f);
    min-height: 39rem;
    position: relative
}

.ph-process-art:before {
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    content: '';
    height: 23rem;
    left: 18%;
    position: absolute;
    top: 18%;
    width: 23rem
}

.ph-process-copy {
    padding: 6.2rem 10%
}

.ph-process-copy h2 {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 4vw, 4.3rem);
    letter-spacing: -.07em;
    line-height: .98;
    margin: 0
}

.ph-process-copy h2 em {
    color: var(--ph-lime);
    font-weight: 400
}

.ph-process-copy>p {
    color: #b9ceca;
    max-width: 28rem
}

.ph-steps {
    list-style: none;
    margin: 2rem 0;
    padding: 0
}

.ph-steps li {
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .85rem;
    padding: 1rem 0 1rem 2.7rem;
    position: relative
}

.ph-steps li:before {
    color: var(--ph-lime);
    content: counter(item, decimal-leading-zero);
    counter-increment: item;
    font-family: monospace;
    font-size: .65rem;
    left: 0;
    position: absolute;
    top: 1.25rem
}

.ph-steps {
    counter-reset: item
}

.ph-steps b {
    display: block;
    margin-bottom: .18rem
}

.ph-steps span {
    color: #b9ceca;
    font-size: .78rem
}

.ph-coverage {
    background: var(--ph-paper)
}

.ph-coverage-head {
    display: flex;
    gap: 5rem;
    margin-bottom: 3.5rem
}

.ph-coverage-layout {
    align-items: center;
    display: grid;
    gap: 5rem;
    grid-template-columns: 1.3fr .7fr
}

.ph-map {
    background: #dfeae5;
    height: 22rem;
    overflow: hidden;
    position: relative
}

.ph-map:before {
    background: var(--ph-sea);
    clip-path: polygon(56% 0, 64% 12%, 60% 23%, 71% 30%, 61% 41%, 72% 54%, 58% 61%, 63% 76%, 49% 100%, 41% 83%, 29% 72%, 34% 60%, 19% 45%, 34% 30%, 37% 16%);
    content: '';
    height: 24rem;
    left: 31%;
    position: absolute;
    top: -.4rem;
    width: 19rem
}

.ph-map span {
    font-family: monospace;
    font-size: .7rem;
    position: absolute
}

.ph-map .city-bog {
    left: 56%;
    top: 46%
}

.ph-map .city-med {
    left: 39%;
    top: 33%
}

.ph-map .city-cal {
    left: 33%;
    top: 58%
}

.ph-map .city-bar {
    left: 49%;
    top: 13%
}

.ph-map .city-buc {
    left: 58%;
    top: 29%
}

.ph-map .map-label {
    bottom: 1.6rem;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    left: 1.6rem;
    line-height: 1.02
}

.ph-stat {
    color: var(--ph-sea);
    font-family: Georgia, serif;
    font-size: 6rem;
    font-weight: 700;
    letter-spacing: -.1em;
    line-height: .8;
    margin: 0
}

.ph-stat span {
    color: var(--ph-lime)
}

.ph-coverage-copy h3 {
    font-family: Georgia, serif;
    font-size: 1.7rem;
    letter-spacing: -.05em;
    line-height: 1.02;
    margin: 1rem 0
}

.ph-coverage-copy p {
    color: #4f6b70;
    font-size: .85rem
}

.ph-quote {
    background: var(--ph-lime);
    padding: 6rem 10vw
}

.ph-quote blockquote {
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 1.01;
    margin: 0;
    max-width: 53rem
}

.ph-quote p {
    font-family: monospace;
    font-size: .65rem;
    letter-spacing: .1em;
    margin-top: 2rem
}

.ph-resources {
    background: var(--ph-white);
    display: grid;
    gap: 5rem;
    grid-template-columns: .85fr 1.15fr
}

.ph-resource-list {
    border-top: 1px solid var(--ph-line)
}

.ph-resource-list a {
    align-items: start;
    border-bottom: 1px solid var(--ph-line);
    color: var(--ph-ink);
    display: grid;
    gap: 1rem;
    grid-template-columns: 7rem 1fr 1rem;
    padding: 1.4rem 0;
    text-decoration: none
}

.ph-resource-list small {
    color: var(--ph-sea);
    font-family: monospace;
    font-size: .6rem;
    letter-spacing: .06em
}

.ph-resource-list strong {
    font-family: Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.1
}

.ph-contact {
    background: var(--ph-ink);
    color: #fff;
    display: grid;
    gap: 8vw;
    grid-template-columns: 1fr 1fr;
    padding: 6.5rem 10vw
}

.ph-contact h2 {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 4vw, 4.3rem);
    letter-spacing: -.07em;
    line-height: .98;
    margin: 0
}

.ph-contact h2 em {
    color: var(--ph-lime);
    font-weight: 400
}

.ph-contact>div>p {
    color: #b9ceca;
    max-width: 30rem
}

.ph-form {
    background: #f1f5f0;
    color: var(--ph-ink);
    padding: 2.1rem
}

.ph-form h3 {
    font-family: Georgia, serif;
    font-size: 1.7rem;
    letter-spacing: -.04em;
    margin-top: 0
}

.ph-form p {
    color: #567279;
    font-size: .85rem
}

.ph-form a {
    margin-top: 1rem
}

.ph-footer {
    background: var(--ph-paper);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 6vw
}

.ph-footer p {
    color: #557178;
    font-size: .75rem;
    margin: 0
}

.ph-footer-links {
    display: flex;
    gap: 1rem
}

.ph-footer-links a {
    color: var(--ph-ink);
    font-size: .75rem;
    text-decoration: none
}

@media(max-width:800px) {
    .ph-topline span:last-child {
        display: none
    }

    .ph-header {
        padding: 1rem 6vw
    }

    .ph-nav {
        display: none
    }

    .ph-hero,
    .ph-intro,
    .ph-process,
    .ph-coverage-layout,
    .ph-resources,
    .ph-contact {
        grid-template-columns: 1fr
    }

    .ph-hero {
        padding: 4.5rem 7vw
    }

    .ph-hero-art {
        height: 24rem
    }

    .ph-portrait {
        height: 21rem
    }

    .ph-intro,
    .ph-services,
    .ph-coverage,
    .ph-resources,
    .ph-contact,
    .ph-quote {
        padding: 4.5rem 7vw
    }

    .ph-intro {
        gap: 1rem
    }

    .ph-services-head,
    .ph-coverage-head {
        display: block
    }

    .ph-services-head .ph-text-link {
        display: inline-block;
        margin-top: 1.5rem
    }

    .ph-grid {
        grid-template-columns: 1fr
    }

    .ph-process-art {
        min-height: 22rem
    }

    .ph-process-copy {
        padding: 4.5rem 7vw
    }

    .ph-coverage-layout {
        gap: 2rem
    }

    .ph-resources {
        gap: 2.5rem
    }

    .ph-footer {
        display: block
    }

    .ph-footer p {
        margin: 1rem 0
    }

    .ph-hero h1 {
        font-size: 3.25rem
    }
}