/* Pie de pagina. Tres franjas: oscura con las columnas, roja con las redes y
   casi negra con lo legal. El corte de color es lo que separa lo que sirve
   para navegar de lo que esta ahi por obligacion.

   El aire es corto a proposito. Un pie alto empuja el contenido real fuera de
   pantalla y hace que llegar al final del sitio cueste tres ruedas de scroll:
   aca las franjas van al ras del texto. */

/* portal.css todavia tiene la regla del pie viejo:
     footer{padding:44px 0 60px;border-top:1px solid var(--line);background:var(--surf)}
   Esos 60px de abajo, con fondo claro, quedaban DESPUES de la franja negra:
   por eso la pagina seguia bajando cuando ya no habia nada que leer. Y los
   44 de arriba se sumaban a los de la grilla. Se anulan aca, con la clase, en
   vez de tocar portal.css, que es grande y lo usa el portal del socio. */
footer.pie{padding:0;border-top:0;background:var(--ink);
color:#B4B4BA;font-size:inherit}

/* El ultimo bloque de la home ("Entra a ver CLUB76 por dentro") venia en el
   mismo negro que el pie, asi que los dos se leian como una sola mancha y la
   invitacion se perdia justo donde tiene que destacarse. Pasa a claro: contra
   el pie negro se despega, y el boton puede ser oscuro, que pesa mas que el
   blanco que tenia antes. La regla vive aca porque existe por el pie. */
.door{background:var(--surf);color:var(--ink);
border-top:1px solid var(--line);padding:46px 0}
.door h2{color:var(--ink)}
.door p{color:var(--mut)}
.door .btn{background:var(--ink);border-color:var(--ink);color:#fff}
.door .btn:hover{background:#000;border-color:#000}

.piegrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:28px;
padding-top:24px;padding-bottom:22px}

.piemarca .pielogo{font-family:"Days One",sans-serif;font-size:19px;color:#fff;
letter-spacing:-.02em;margin-bottom:9px}
.piemarca .pielogo span{color:var(--red)}
.piemarca p{font-size:13.5px;line-height:1.5;color:#9A9AA1;max-width:38ch}

/* Va como enlace y no como boton: en el pie nada compite con lo de arriba. */
.pieva{display:inline-block;margin-top:11px;font-size:13.5px;color:#fff;cursor:pointer;
border-bottom:1px solid #45454C;padding-bottom:2px}
.pieva:hover{border-bottom-color:var(--red)}

.piecol h4{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:#6C6C73;font-weight:400;margin-bottom:9px}
.piecol a{display:block;font-size:13.5px;color:#B4B4BA;padding:3px 0;line-height:1.4}
.piecol a:hover{color:#fff}
.piedir p{font-size:13.5px;line-height:1.5;color:#9A9AA1;max-width:28ch}

/* ---- la banda de redes ----
   Circulos blancos sobre rojo, como los de la tienda. Es la unica franja de
   color del pie: son lo unico que uno busca a proposito ahi abajo. */
.pieredes{background:var(--red)}
.pieredes .wrap{display:flex;justify-content:center;gap:14px;
padding-top:13px;padding-bottom:13px}
.pieredes a{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--red);
display:flex;align-items:center;justify-content:center;flex:none;
transition:transform .18s,box-shadow .18s}
.pieredes a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.22)}
.pieredes a svg{width:18px;height:18px}
/* Red sin icono conocido: la inicial adentro del mismo circulo. */
.pieredes a b{font-family:"Days One",sans-serif;font-size:15px;line-height:1}

/* ---- la linea legal ----
   Una sola linea de alto: es letra chica obligatoria, no contenido. Y es lo
   ultimo de la pagina, asi que abajo no lleva nada. */
.piebajo{background:#0B0B0C;color:#6C6C73;font-size:12px}
.piebajo .wrap{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;
padding-top:9px;padding-bottom:10px}
.piebajo .sp{flex:1}
.piebajo a{color:#8A8A92;border-bottom:1px solid transparent}
.piebajo a:hover{color:#fff;border-bottom-color:#45454C}

@media(max-width:1000px){
.piegrid{grid-template-columns:1fr 1fr;gap:22px 24px;padding-top:20px;padding-bottom:18px}
.piemarca{grid-column:1 / -1}
.piemarca p{max-width:none}
.door{padding:36px 0}
}
@media(max-width:640px){
.piegrid{grid-template-columns:1fr;gap:20px}
.pieredes .wrap{gap:12px}
.piebajo .wrap{flex-direction:column;align-items:flex-start;gap:5px}
.piebajo .sp{display:none}
}