/*
Theme Name: La Negrita
Description: Landing La Negrita. Maquetada en vw (base escritorio 1652px, móvil 288px).
Version: 1.0
*/
@font-face{font-family:Tomato;src:url(fonts/TomatoGrotesk-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Tomato;src:url(fonts/TomatoGrotesk-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Editorial;src:url(fonts/PPEditorialNew-Ultralight.otf);font-weight:200;font-display:swap}
@font-face{font-family:Editorial;src:url(fonts/PPEditorialNew-Ultrabold.otf);font-weight:800;font-display:swap}
:root{--azul:#2d2dff}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--azul)}
body{color:#fff;font-family:Tomato,Arial,sans-serif;font-weight:400;font-size:1.285vw;line-height:1.3;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.page{padding:1.3vw 1.4vw 1.1vw}
.serif{font-family:Editorial,Georgia,serif;font-weight:200}
.d{display:inline}

/* cabecera */
.top{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:600;font-size:2.25vw;line-height:1;text-transform:uppercase}
.nav{display:flex;gap:.55vw}
.pill{display:inline-flex;align-items:flex-start;gap:.15vw;border:.1vw solid #fff;border-radius:99px;padding:.47vw 1vw;font-size:1.725vw;line-height:1;transition:background .2s,color .2s}
.pill:hover,.pill:focus-visible{background:#fff;color:var(--azul)}
.pa{width:.7vw;height:.7vw;margin-top:.05vw}

/* intro */
.hero{display:grid;grid-template-columns:41.25vw 1fr;margin-top:13.55vw}
.intro{margin-top:.48vw;font-size:1.19vw;line-height:1.12;display:flex;flex-direction:column;justify-content:space-between}
.intro>div{max-width:20.6vw}
.intro p+p{margin-top:1.12em}
.scroll{font-size:1.52vw;line-height:1}
.lead{font-family:Editorial,Georgia,serif;font-weight:200;font-size:3.15vw;line-height:1.09}
.lead p:first-child{text-indent:14.27vw}
.lead p+p{margin-top:1.09em}
.lead b{font-weight:800}

/* proyectos y premios */
.cols{display:grid;grid-template-columns:41.25vw 1fr;margin-top:6.27vw}
.cols h2{font-size:1.664vw;line-height:1;margin-bottom:2.15vw}
.list li{margin-bottom:.21vw}
.list a{display:flex;align-items:center;justify-content:space-between;gap:1vw;width:max-content;min-width:19.9vw;height:1.67vw;line-height:1.3;padding:0 .3vw 0 .42vw;margin-left:-.42vw;text-transform:uppercase;white-space:nowrap}
.list a:hover,.list a:focus-visible{background:#fff;color:#000;outline:0}
.b{display:inline-block;vertical-align:top;position:relative;top:.27vw;margin-left:.48vw;font-size:.763vw;line-height:1;opacity:.55}
.list a:hover .b,.list a:focus-visible .b{opacity:1}
.ar{width:1.15vw;height:1.15vw;opacity:0;flex:none}
.list a:hover .ar,.list a:focus-visible .ar{opacity:1}
.aw{display:grid;grid-template-columns:31.25vw 1fr}
.g{display:grid;grid-template-columns:4vw 1fr;font-size:1.285vw;line-height:1.41;text-transform:uppercase;margin-bottom:2vw}
.aw>div>.g:first-child{margin-bottom:2.8vw}
.g>span:first-child{width:1.95vw;text-align:right}
.g ul{grid-column:2;margin-top:.94vw}

/* pie */
.foot{display:grid;grid-template-columns:41.25vw 1fr auto;align-items:baseline;margin-top:15vw;text-transform:uppercase}
.foot>span{margin-left:-.35vw}
.tel{padding-left:4vw;text-transform:none}
.hab{text-transform:none}

@media(max-width:800px){
body{font-size:4.24vw}
.page{display:flex;flex-direction:column;padding:6.4vw 4.1vw 4vw}
.top,.hero{display:contents}
.logo{font-size:9.63vw}
.intro{order:1;margin-top:15vw;font-size:3.92vw;line-height:1.19;display:block}
.intro>div{max-width:66.5vw}
.scroll{display:none}
.lead{order:2;margin-top:13.9vw;font-size:7.16vw;line-height:1.13}
.lead p:first-child{text-indent:33vw}
.d{display:none}
.nav{order:3;flex-wrap:wrap;gap:2.4vw;margin-top:15.5vw}
.pill{border-width:.35vw;padding:1.6vw 3.5vw;font-size:5.97vw;gap:.5vw}
.pa{width:2.45vw;height:2.45vw;margin-top:.3vw}
.cols{order:4;display:block;margin-top:17.6vw}
.sec+.sec{margin-top:19.4vw}
.cols h2{font-size:5.55vw;margin-bottom:6.8vw}
.list li{margin-bottom:.76vw}
.list a{height:5.55vw;min-width:66.7vw;gap:3vw;padding:0 1vw;margin-left:-1vw}
.b{font-size:2.5vw;top:.9vw;margin-left:1.6vw}
.ar{width:4vw;height:4vw}
.aw{display:block}
.g{grid-template-columns:14vw 1fr;font-size:4.35vw;margin-bottom:7.8vw}
.g.i,.aw>div>.g:first-child{margin-bottom:9.3vw}
.g>span:first-child{width:8vw}
.g ul{margin-top:3.05vw}
.foot{order:5;display:flex;justify-content:space-between;margin-top:18vw;font-size:4.3vw}
.foot>span{margin-left:0}
.tel{padding:0}
.hab{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
