:root {
    --negro:#111;
    --blanco:#fff;
    --papel:#f8f7f3;
    --morado:#7c4dff;
    --linea:#d9d6cf
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--papel);
    color:var(--negro);
    font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace
}

a {
    color:inherit;
    text-decoration:none
}

.cabecera {
    position:sticky;
    top:0;
    z-index:100;
    width:min(1240px,calc(100% - 64px));
    margin:0 auto;
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    border-bottom:1px solid var(--linea);
    background:var(--papel)
}

.marca {
    font-family:Arial,Helvetica,sans-serif;
    font-size:24px;
    font-weight:900;
    letter-spacing:.02em
}

.nav-escritorio {
    display:flex;
    flex-wrap:wrap;
    gap:26px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase
}

.nav-escritorio a:hover,footer a:hover {
    color:var(--morado)
}

details.nav-movil {
    display:none!important
}

main {
    width:min(1240px,calc(100% - 64px));
    margin:0 auto
}

.hero {
    min-height:680px;
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
    gap:clamp(32px,6vw,90px);
    align-items:center;
    border-bottom:1px solid var(--linea)
}

.etiqueta {
    margin:0;
    color:var(--morado);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em
}

h1,h2,h3 {
    font-family:Arial,Helvetica,sans-serif
}

h1 {
    max-width:850px;
    margin:22px 0 28px;
    font-size:clamp(54px,7.2vw,98px);
    line-height:.92;
    letter-spacing:-.065em
}

h1 span,h2 em {
    color:var(--morado);
    font-style:normal
}

.entradilla {
    max-width:650px;
    font-size:17px;
    line-height:1.75
}

.boton {
    display:inline-block;
    margin-top:24px;
    padding:15px 19px;
    background:var(--negro);
    color:var(--blanco);
    font-size:13px;
    font-weight:900
}

.boton:hover {
    background:var(--morado)
}

.hero__woki {
    align-self:end;
    padding-bottom:75px;
    text-align:center
}

.hero__woki img {
    display:block;
    width:min(100%,410px);
    height:auto;
    margin:0 auto
}

.hero__woki p {
    margin:8px 0 0;
    color:var(--morado);
    font-size:12px;
    font-weight:800
}

.seccion {
    padding:90px 0;
    border-bottom:1px solid var(--linea)
}

.proyectos {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:34px
}

.proyecto {
    position:relative;
    min-height:340px;
    padding:28px;
    background:var(--blanco);
    border:1px solid var(--linea);
    transition:transform .15s ease,border-color .15s ease
}

.proyecto:hover {
    transform:translateY(-4px);
    border-color:var(--morado)
}

.estado {
    color:var(--morado);
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em
}

.proyecto h2 {
    margin:86px 0 18px;
    font-size:clamp(34px,4vw,48px);
    letter-spacing:-.045em
}

.proyecto p {
    max-width:34ch;
    line-height:1.65
}

.proyecto--futuro {
    background:var(--negro);
    color:var(--blanco)
}

.destello {
    position:absolute;
    right:26px;
    bottom:22px;
    color:var(--morado);
    font-size:32px
}

.dos-columnas {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px,8vw,110px);
    margin-top:34px
}

.dos-columnas h2 {
    margin:0;
    font-size:clamp(44px,5.5vw,72px);
    line-height:.98;
    letter-spacing:-.05em
}

.dos-columnas>div {
    font-size:16px;
    line-height:1.85
}

.filosofia {
    overflow:hidden
}

.filosofia__cabecera {
    display:grid;
    grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);
    gap:clamp(56px,10vw,150px);
    margin-top:52px;
    padding-bottom:96px;
    align-items:start
}

.filosofia__izquierda {
    position:relative
}

.filosofia__izquierda h2 {
    margin:0;
    font-size:clamp(48px,5.8vw,78px);
    line-height:.94;
    letter-spacing:-.055em
}

.filosofia__izquierda h2 em {
    color:var(--morado);
    font-style:normal
}

.woki-caja {
    display:block;
    max-width:100%;
    height:auto;
    margin:46px auto 0 0
}

.filosofia__intro {
    max-width:650px;
    padding-top:4px;
    font-size:16px;
    line-height:1.85
}

.filosofia__intro p {
    max-width:58ch
}

.filosofia__intro p:first-child {
    margin-top:0
}

.filosofia__laboratorio {
    max-width:12ch!important;
    margin-bottom:34px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(36px,4vw,54px);
    font-weight:800;
    line-height:.96;
    letter-spacing:-.05em
}

.filosofia__principios {
    margin:0;
    border-top:1px solid var(--negro)
}

.filosofia__principios article {
    display:grid;
    grid-template-columns:54px minmax(250px,.75fr) minmax(320px,1fr);
    gap:clamp(24px,5vw,76px);
    align-items:start;
    padding:54px 0 58px;
    border-bottom:1px solid var(--linea)
}

.filosofia__principios article:nth-child(even) h3 {
    color:var(--morado)
}

.filosofia__principios span {
    padding-top:7px;
    color:var(--morado);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em
}

.filosofia__principios h3 {
    max-width:13ch;
    margin:0;
    font-size:clamp(30px,3.3vw,46px);
    line-height:.98;
    letter-spacing:-.045em
}

.filosofia__principios p {
    max-width:58ch;
    margin:2px 0 0;
    font-size:15px;
    line-height:1.8
}

.filosofia__principios article:last-child {
    border-bottom:0
}

.filosofia__cierre {
    margin:96px 0 0;
    padding:clamp(54px,6vw,76px) 0 10px;
    border-top:1px solid var(--negro);
    font-size:16px;
    line-height:1.8
}

.filosofia__cierre p {
    max-width:760px
}

.filosofia__cierre p:first-child {
    max-width:900px;
    margin-top:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(26px,3vw,38px);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.035em
}

.filosofia__cierre p:first-child strong {
    color:var(--morado)
}

.filosofia__cierre strong {
    font-family:Arial,Helvetica,sans-serif
}

.filosofia__claim {
    display:block;
    max-width:900px;
    margin-top:62px;
    color:var(--morado);
    font-size:clamp(34px,4.5vw,58px);
    line-height:.92;
    letter-spacing:-.055em
}

.nosotros {
    overflow:hidden
}

.nosotros__intro {
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
    gap:clamp(56px,9vw,120px);
    margin-top:52px;
    padding-bottom:96px;
    align-items:start
}

.nosotros__intro h2 {
    max-width:10ch;
    margin:0;
    font-size:clamp(42px,4.6vw,64px);
    line-height:.94;
    letter-spacing:-.055em
}

.nosotros__intro>div {
    max-width:620px;
    font-size:15px;
    line-height:1.85
}

.nosotros__intro>div p {
    max-width:58ch
}

.nosotros__intro>div p:first-child {
    margin-top:0
}

.equipo {
    border-top:1px solid var(--negro)
}

.equipo__titulo {
    margin:0;
    padding:26px 0 34px;
    color:var(--morado);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em
}

.miembro {
    display:grid;
    grid-template-columns:48px minmax(250px,.72fr) minmax(0,1.28fr);
    gap:clamp(28px,5vw,72px);
    align-items:start;
    padding:54px 0 58px;
    border-top:1px solid var(--linea)
}

.miembro__numero {
    padding-top:5px;
    color:var(--morado);
    font-size:11px;
    font-weight:900
}

.miembro__nombre h3 {
    margin:0 0 10px;
    font-size:clamp(40px,4.4vw,62px);
    line-height:.92;
    letter-spacing:-.05em
}

.miembro__nombre strong {
    display:block;
    max-width:20ch;
    color:var(--morado);
    font-family:Arial,Helvetica,sans-serif;
    font-size:17px;
    line-height:1.25
}

.miembro__texto {
    max-width:560px;
    font-size:15px;
    line-height:1.75
}

.miembro__texto p {
    max-width:58ch
}

.miembro__texto p:first-child {
    margin-top:0
}

.miembro--invertido .miembro__nombre {
    grid-column:2
}

.miembro--invertido .miembro__texto {
    grid-column:3;
    grid-row:1
}

.miembro--woki {
    grid-template-columns:48px minmax(250px,.72fr) minmax(0,1.28fr);
    padding-bottom:72px
}

.miembro--woki .miembro__texto {
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(180px,260px);
    gap:36px;
    align-items:start;
    max-width:none
}

.miembro--woki img {
    display:block;
    width:100%;
    max-width:240px;
    height:auto;
    margin:0;
    justify-self:end
}

.nosotros__cierre {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:50px;
    align-items:end;
    padding:64px 0 12px;
    border-top:1px solid var(--negro)
}

.nosotros__cierre strong {
    display:block;
    max-width:10ch;
    font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(48px,6.2vw,84px);
    line-height:.9;
    letter-spacing:-.06em
}

.nosotros__cierre em {
    color:var(--morado);
    font-style:normal
}

.nosotros__cierre p {
    margin:0 0 7px;
    color:var(--morado);
    font-size:12px;
    font-weight:900
}

footer {
    width:min(1240px,calc(100% - 64px));
    margin:0 auto;
    padding:52px 0 70px;
    display:grid;
    grid-template-columns:minmax(250px,2fr) repeat(3,auto);
    gap:32px;
    align-items:end;
    font-size:12px
}

.footer__marca {
    display:flex;
    flex-direction:column;
    gap:8px
}

.footer__marca strong {
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px
}

.footer__marca span {
    color:var(--morado)
}

@media(max-width:900px) {
    .hero {
        grid-template-columns:1fr;
        padding-top:80px;
        min-height:auto
    }
    .hero__woki {
        padding:20px 0 60px
    }
    .hero__woki img {
        max-width:320px
    }
    .proyectos {
        grid-template-columns:1fr
    }
    .proyecto {
        min-height:270px
    }
    .proyecto h2 {
        margin-top:55px
    }
    .dos-columnas {
        grid-template-columns:1fr
    }
    .filosofia__cabecera {
        grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr);
        gap:48px
    }
    .woki-caja {
        width:min(100%,320px)
    }
    .filosofia__principios article {
        grid-template-columns:42px minmax(210px,.8fr) 1.2fr;
        gap:26px
    }
    .nosotros__intro {
        grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
        gap:48px
    }
    .miembro,.miembro--woki {
        grid-template-columns:38px minmax(190px,.7fr) minmax(0,1.3fr);
        gap:26px
    }
    .miembro--woki .miembro__texto {
        grid-template-columns:1fr 170px;
        gap:24px
    }
    .nosotros__cierre {
        grid-template-columns:1fr
    }
    footer {
        grid-template-columns:1fr 1fr;
        align-items:start
    }
}

@media(max-width:700px) {
    .cabecera,main,footer {
        width:min(100% - 36px,1240px)
    }
    .cabecera {
        min-height:72px;
        padding:0;
        z-index:100
    }
    .marca {
        font-size:20px
    }
    .nav-escritorio {
        display:none
    }
    details.nav-movil {
        display:block!important
    }
    .nav-movil summary {
        min-width:76px;
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:10px;
        cursor:pointer;
        list-style:none;
        font-size:12px;
        font-weight:900;
        text-transform:uppercase
    }
    .nav-movil summary::-webkit-details-marker {
        display:none
    }
    .nav-movil summary::marker {
        content:""
    }
    .nav-movil summary:focus-visible {
        outline:3px solid var(--morado);
        outline-offset:4px
    }
    .nav-movil__icono,.nav-movil__icono::before,.nav-movil__icono::after {
        display:block;
        width:22px;
        height:2px;
        background:var(--negro);
        content:"";
        transition:transform .18s ease
    }
    .nav-movil__icono {
        position:relative
    }
    .nav-movil__icono::before {
        position:absolute;
        top:-7px
    }
    .nav-movil__icono::after {
        position:absolute;
        top:7px
    }
    .nav-movil[open] .nav-movil__icono {
        background:transparent
    }
    .nav-movil[open] .nav-movil__icono::before {
        top:0;
        transform:rotate(45deg)
    }
    .nav-movil[open] .nav-movil__icono::after {
        top:0;
        transform:rotate(-45deg)
    }
    .nav-movil nav {
        position:absolute;
        top:72px;
        left:-18px;
        width:calc(100% + 36px);
        padding:10px 18px 22px;
        background:var(--papel);
        border-top:1px solid var(--linea);
        border-bottom:1px solid var(--negro);
        box-shadow:0 14px 30px rgba(17,17,17,.08)
    }
    .nav-movil nav a {
        min-height:62px;
        display:flex;
        align-items:center;
        gap:18px;
        border-bottom:1px solid var(--linea);
        font-family:Arial,Helvetica,sans-serif;
        font-size:22px;
        font-weight:800;
        letter-spacing:-.02em
    }
    .nav-movil nav a:last-child {
        border-bottom:0
    }
    .nav-movil nav a span {
        min-width:24px;
        color:var(--morado);
        font-family:ui-monospace,monospace;
        font-size:10px;
        letter-spacing:.08em
    }
    .nav-movil nav a:active {
        color:var(--morado)
    }
    h1 {
        font-size:clamp(46px,15vw,68px)
    }
    .entradilla {
        font-size:15px
    }
    .seccion {
        padding:68px 0
    }
    .dos-columnas h2 {
        font-size:44px
    }
    .filosofia__cabecera {
        grid-template-columns:1fr;
        gap:46px;
        margin-top:34px;
        padding-bottom:62px
    }
    .filosofia__izquierda h2 {
        font-size:46px
    }
    .woki-caja {
        width:min(100%,300px);
        margin:30px auto 0
    }
    .filosofia__intro {
        font-size:15px
    }
    .filosofia__laboratorio {
        max-width:11ch!important;
        font-size:40px
    }
    .filosofia__principios article {
        grid-template-columns:34px 1fr;
        gap:10px 16px;
        padding:38px 0 42px
    }
    .filosofia__principios span {
        grid-row:1/span 2
    }
    .filosofia__principios h3 {
        max-width:12ch;
        font-size:30px
    }
    .filosofia__principios p {
        grid-column:2;
        margin-top:14px;
        font-size:14px
    }
    .filosofia__cierre {
        margin:64px 0 0;
        padding:42px 0 0
    }
    .filosofia__cierre p:first-child {
        font-size:28px
    }
    .filosofia__cierre p:not(:first-child) {
        font-size:14px
    }
    .filosofia__claim {
        margin-top:44px;
        font-size:40px
    }
    .nosotros__intro {
        grid-template-columns:1fr;
        gap:34px;
        margin-top:34px;
        padding-bottom:58px
    }
    .nosotros__intro h2 {
        font-size:46px
    }
    .nosotros__intro>div {
        font-size:14px
    }
    .equipo__titulo {
        padding:22px 0 26px
    }
    .miembro,.miembro--woki {
        grid-template-columns:30px 1fr;
        gap:8px 14px;
        padding:34px 0 40px
    }
    .miembro__numero {
        grid-row:1/span 3
    }
    .miembro__nombre,.miembro--invertido .miembro__nombre {
        grid-column:2;
        grid-row:auto
    }
    .miembro__nombre h3 {
        font-size:40px
    }
    .miembro__nombre strong {
        font-size:16px
    }
    .miembro__texto,.miembro--invertido .miembro__texto {
        grid-column:2;
        grid-row:auto;
        font-size:14px
    }
    .miembro--woki .miembro__texto {
        display:block
    }
    .miembro--woki img {
        width:min(100%,190px);
        margin:24px auto 0
    }
    .nosotros__cierre {
        margin-top:0;
        padding-top:42px;
        gap:24px
    }
    .nosotros__cierre strong {
        font-size:46px
    }
    .nosotros__cierre p {
        margin:0
    }
    footer {
        grid-template-columns:1fr;
        padding-bottom:50px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .proyecto,.nav-movil__icono,.nav-movil__icono::before,.nav-movil__icono::after {
        transition:none
    }
}