/* goatted · la portada (goatted.com). Se expresa, no se explica: portada de revista, el manifiesto como letra,
   Edición Cero, el recibo, la gente y el Drop 1. Solo carga en "/". */
.sitio{width:100%;flex:1 0 auto;display:flex;flex-direction:column;background:var(--negro);overflow-x:clip}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ancho{max-width:1240px;margin:0 auto;width:100%}
.eti{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);margin:0}
.grito{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;word-spacing:.08em;margin:0;text-wrap:balance}
.grano{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--hueso);cursor:pointer}
.boton.lleno{background:var(--hueso);color:var(--negro)}
.boton.lleno:hover{background:#fff;color:var(--negro)}
.senal-viva{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tenue);margin:0}
.senal-viva i{width:7px;height:7px;border-radius:50%;background:var(--hueso);animation:gt-latido 2.4s ease-out infinite;flex:none}
@keyframes gt-latido{0%{box-shadow:0 0 0 0 rgba(236,230,216,.55)}80%,100%{box-shadow:0 0 0 10px rgba(236,230,216,0)}}

/* ---------- portada de revista: el logo detrás del modelo ---------- */
/* El logo y el titular se miden con el ancho Y el alto de la pantalla: en una laptop baja el titular nunca sube hasta el logo */
.portada{--mh-top:clamp(56px,9vh,96px);--mh-w:min(84vw,1120px,104vh);position:relative;min-height:min(100vh,940px);display:flex;isolation:isolate;overflow:hidden}
.portada .fondo,.portada .figura{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 28%;filter:contrast(1.06) saturate(.92)}
.portada .fondo{z-index:-2}
.portada::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,6,.7) 0%,rgba(6,6,6,.1) 20%,rgba(6,6,6,0) 48%,rgba(6,6,6,.82) 80%,#060606 100%)}
.portada .figura{z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%)}
.portada .masthead{position:absolute;left:50%;transform:translateX(-50%);top:var(--mh-top);width:var(--mh-w);height:auto;z-index:0;pointer-events:none}
.portada .grano{z-index:1}
.portada-int{width:100%;display:flex;flex-direction:column;padding-block:18px 40px}
.cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;z-index:3}
.cabecera .der{text-align:right}
.cabecera a{display:block;line-height:0}
.cabecera .marca{width:40px}
.portada-cuerpo{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:32px;padding-top:calc(var(--mh-top) + var(--mh-w) * .2568 - 6px)}
.portada-pie{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
.portada h1{font-size:clamp(64px,min(14vw,20vh),204px)}
.portada-accion{display:grid;gap:12px;justify-items:end;padding-bottom:10px}

/* ---------- el manifiesto como letra, con el cuerno ---------- */
.letra{position:relative;--c-top:calc(72px + clamp(64px,10vw,150px) * 1.84 + clamp(36px,4vw,56px))}
/* El mismo cuerno del ícono, a la derecha y debajo del titular, sin tocar la letra; el corte queda contra el borde */
.cuerno{position:absolute;right:-1px;top:var(--c-top);height:min(calc(100% - var(--c-top) - 110px),760px);width:auto;z-index:2;pointer-events:none}
.letra-int{position:relative;z-index:3;padding-block:72px 120px;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,30px);max-width:1240px}
.l{margin:0;min-width:0;overflow-wrap:break-word;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;max-width:15ch}
.lt1{font-stretch:62%;font-weight:900;font-size:clamp(64px,10vw,150px)}
.lt2{font-stretch:75%;font-size:clamp(34px,4.6vw,66px);color:#d9d3c5}
.lt3{font-stretch:62%;font-size:clamp(26px,3.2vw,46px);color:var(--tenue);max-width:20ch}
.lt4{font-stretch:75%;font-size:clamp(34px,4.6vw,66px)}
.lt5{font-stretch:62%;font-weight:900;font-size:clamp(48px,7vw,104px);margin-top:12px}

/* ---------- Edición Cero ---------- */
.cero-foto{margin:0;position:relative;height:min(92vh,900px);min-height:520px;overflow:hidden}
.cero-foto>img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.cero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,0) 30%,rgba(6,6,6,0) 55%,rgba(6,6,6,.9) 100%)}
.cero-foto figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1}
.cero-texto{padding-block:0 44px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.cero-texto h2{font-size:clamp(72px,12vw,180px)}
.cero-titulo{display:grid;gap:10px}
.cero-titulo .eti{color:#e2dccf;text-shadow:0 1px 10px rgba(0,0,0,.95)}
.cero-texto p.dicho{margin:0;font-family:var(--display);font-stretch:75%;font-weight:700;font-size:clamp(20px,2vw,28px);text-transform:uppercase;line-height:1}

/* ---------- Real ones got receipts ---------- */
.recibo-int{padding-block:96px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.recibo-foto{margin:0;aspect-ratio:4/5;overflow:hidden}
.recibo-foto img{width:100%;height:100%;object-fit:cover;display:block}
.recibo-texto{display:grid;gap:20px;min-width:0}
.recibo-texto h2{font-size:clamp(64px,9vw,136px)}
.recibo-texto p{margin:0;font-size:19px;color:#d4cec0;max-width:34ch}
.recibo-texto p.como{font-size:14px;color:var(--tenue)}
.enlace-sutil{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}

/* ---------- la gente: solo fotos ---------- */
.gente .ancho{padding-block:8px 96px}
.gente-rejilla{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:14px;align-items:start}
.gente figure{margin:0}
.gente figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.gente .g2{margin-top:72px}
.gente .g3 img{object-position:50% 25%}

/* ---------- Drop 1 con la banda de billete ---------- */
.viene{background:var(--asfalto);border-top:1px solid var(--linea)}
.banda-billete{position:relative;height:120px;background:url(/assets/img/guilloche-banda.svg) repeat-x center/600px 120px;border-bottom:1px solid var(--linea);overflow:hidden}
.banda-billete .micro{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:5.5px;letter-spacing:.16em;white-space:nowrap;color:#9a958a;background:var(--asfalto);padding:2px 0;overflow:hidden}
.banda-billete.abajo{border-bottom:0;border-top:1px solid var(--linea);transform:scaleY(-1)}
.viene-int{padding-block:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.viene-izq{display:grid;gap:16px}
.viene-izq h2{font-size:clamp(64px,9vw,128px)}
.viene-izq p{margin:0;color:var(--tenue);max-width:42ch;font-size:17px}
.viene form.formulario .btn{width:100%}
.viene .campo input{background:var(--negro)}

/* ---------- pie ---------- */
.s-pie{border-top:1px solid var(--linea);padding-bottom:24px}
.s-pie .ancho{padding-block:44px 28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center}
.s-pie .palabra{height:26px;width:auto}
.s-pie .marca-pie{width:46px;height:auto}
.pie-centro{display:grid;justify-items:center;gap:10px}
.s-pie nav{display:flex;gap:12px 20px;flex-wrap:wrap;justify-content:flex-end;align-items:center}

@media (max-width:900px){
  .portada-pie{grid-template-columns:minmax(0,1fr)}
  .portada-accion{justify-items:start}
  .recibo-int,.viene-int{grid-template-columns:minmax(0,1fr)}
  .gente-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gente .g2{margin-top:40px}
  .gente .g3{grid-column:1/3}
  .gente .g3 img{aspect-ratio:16/10}
  .s-pie .ancho{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .s-pie nav{justify-content:center}
}
@media (max-width:680px){
  .cuerno{top:40px;height:clamp(260px,66vw,340px)}
  .letra-int{padding-top:calc(40px + clamp(260px,66vw,340px) + 44px)}
}
@media (max-width:520px){
  .portada{min-height:820px}
  .cabecera .eti{font-size:9px;letter-spacing:.14em}
  .cero-foto{height:640px;min-height:0}
  .recibo-int{padding-block:72px}
}