@font-face{font-family:UnboundedCompacta;src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;size-adjust:72%}
/* ============================================================
   INICIO · versión "Archivo compacta" (se carga al final, por eso gana a los archivos anteriores)
   Para volver atrás: en index.html, borra la línea que dice home-modern.css.
   Colores (los mismos del sitio): hueso #f7f6f2 · hueso frío #eeede8 · tinta #121212
   naranja #ff8346 · amarillo #f2c94c
   Letra de títulos de sección: UnboundedCompacta (condensada, en mayúsculas). El título del banner NO cambia.
   ============================================================ */
.home-page{--hm-bone:#f7f6f2;--hm-cold:#eeede8;--hm-ink:#121212;--hm-orange:#ff8346;--hm-gold:#f2c94c;--hm-line:#dedbd4;--hm-mute:#77746d;--hm-disp:UnboundedCompacta,"Arial Narrow",Impact,sans-serif;--hm-mono:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- 1 · Banner: misma foto, mismo tamaño, mismo título ---------- */
/* La frase de arriba (PEYOTE FC · CAMISETAS RETRO) ya no se ve, pero se queda en la página para Google. */
.home-page .hero-kicker{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Botones: cuadrados, naranja con flecha y blanco */
.home-page .hero-cta{gap:18px;padding:15px 20px;border-radius:0;font:600 12px/1 var(--hm-mono);letter-spacing:.08em}
.home-page .hero-cta:hover{background:#ff7330;border-color:#ff7330;color:var(--hm-ink)}
.home-page .hero-cta-ghost{background:#fff;border-color:#fff;color:var(--hm-ink)}
.home-page .hero-cta-ghost:hover{background:var(--hm-cold);border-color:var(--hm-cold);color:var(--hm-ink)}
@media (max-width:760px){
  .home-page .hero-cta{gap:12px;padding:13px 14px;font-size:11px;letter-spacing:.04em}
}

/* ---------- Títulos de sección (los tres con la misma letra) ---------- */
.home-page .jersey-rail-heading h2,
.home-page .home-nosotros h2,
.home-page .home-collections .home-section-heading h2{
  font:400 clamp(30px,3.9vw,54px)/.96 var(--hm-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--hm-ink);margin:0;text-wrap:balance}
.home-page .home-collections .home-section-heading h2{font-size:clamp(26px,3.3vw,44px)}
.home-page .home-text-link{font-family:var(--hm-mono)}

/* ---------- 2 · Las favoritas de Peyo: mosaico ---------- */
.home-page .jersey-rail{background:var(--hm-bone);padding:clamp(32px,4.2vw,60px) clamp(20px,5vw,86px)}
.home-page .jersey-rail-heading{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px 28px;max-width:none;margin:0 0 clamp(16px,2.2vw,28px);padding:0;text-align:left}
.home-page .jersey-rail-heading p{margin:8px 0 0;color:#55534c;font:500 14px/1.5 Raleway,Arial,sans-serif}
.fav-mosaic{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,1fr);gap:12px;height:clamp(300px,34vw,440px)}
.fav-card{position:relative;display:block;min-width:0;overflow:hidden;background:var(--hm-cold);color:var(--hm-ink);text-decoration:none}
.fav-card.is-big{grid-row:span 2}
.fav-card img{position:absolute;left:6%;top:6%;width:88%;height:68%;object-fit:contain;transition:transform .35s}
.fav-card:hover img{transform:scale(1.04) rotate(-1.5deg)}
.fav-card:focus-visible{outline:3px solid var(--hm-orange);outline-offset:2px}
.fav-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:12px 14px}
.fav-cap b{font:400 clamp(13px,1.5vw,20px)/1 var(--hm-disp);text-transform:uppercase;letter-spacing:.005em}
.fav-cap span{font:600 12px/1 var(--hm-mono);white-space:nowrap}
.fav-tag{position:absolute;z-index:2;top:14px;left:14px;background:var(--hm-gold);color:var(--hm-ink);font:600 10.5px/1 var(--hm-mono);padding:6px 9px;transform:rotate(-3deg);box-shadow:1px 2px 0 rgba(0,0,0,.3)}
@media (max-width:760px){
  .fav-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;gap:10px}
  .fav-card{aspect-ratio:1/1.22}
  .fav-card.is-big{grid-column:span 2;grid-row:auto;aspect-ratio:1/.92}
  .fav-card img{left:6%;top:4%;width:88%;height:58%}
  .fav-card.is-big img{top:5%;height:71%}
  .fav-cap{flex-direction:column;align-items:flex-start;gap:3px}
  .fav-card.is-big .fav-cap{flex-direction:row;align-items:flex-end}
}

/* ---------- 3 · Cuatro amigos: la foto manda ---------- */
.home-page .home-nosotros{grid-template-columns:1fr 1fr;gap:0;padding:0;align-items:stretch;background:var(--hm-cold)}
.home-page .home-nosotros-photo{position:relative;aspect-ratio:auto;min-height:320px;background:#111}
.home-page .home-nosotros-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-page .home-nosotros-copy{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(24px,4vw,56px) clamp(20px,5vw,86px) clamp(24px,4vw,56px) clamp(20px,4vw,56px)}
.home-page .home-nosotros h2{margin:0}
.home-page .home-nosotros-copy p{margin:0;max-width:46ch;color:#2f2d29;font:500 15px/1.6 Raleway,Arial,sans-serif}
.home-page .home-nosotros-crew{display:flex;flex-wrap:wrap;gap:0;margin:6px 0 0;padding:0;list-style:none}
.home-page .home-nosotros-crew li{border:0;padding:0;font:600 12px/1 var(--hm-mono);letter-spacing:.1em;text-transform:uppercase}
.home-page .home-nosotros-crew li+li::before{content:"·";margin:0 10px}
.home-page .home-nosotros-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:14px 0 6px;border-top:1px solid var(--hm-ink)}
.home-page .home-nosotros-stats div{min-width:0;border-top:0;padding:14px clamp(14px,2.4vw,34px) 0 0}
.home-page .home-nosotros-stats div+div{padding-left:clamp(14px,2.4vw,34px);border-left:1px solid #c9c6bf}
.home-page .home-nosotros-stats dt{font:400 clamp(30px,3.4vw,44px)/1 var(--hm-disp);letter-spacing:.005em}
.home-page .home-nosotros-stats dd{margin:6px 0 0;color:#66645d;font:500 10px/1.3 var(--hm-mono);letter-spacing:.08em;text-transform:uppercase}
.home-page .home-nosotros .home-text-link{align-self:flex-start;margin-top:2px}
@media (max-width:820px){
  .home-page .home-nosotros{grid-template-columns:1fr}
  .home-page .home-nosotros-photo{aspect-ratio:4/3;min-height:0;max-height:320px;width:100%}
  .home-page .home-nosotros-copy{padding:28px 20px 34px}
}

/* ---------- 4 · Épocas: el mismo diseño de hoy, más compacto ---------- */
.home-page .home-collections{background:var(--hm-bone);border-top:0;padding:clamp(32px,4.2vw,60px) clamp(20px,5vw,86px)}
.home-page .home-collections .home-section-heading{margin:0 0 clamp(16px,2.2vw,26px)}
.home-page .ep-bar,.ep-bar{gap:12px;padding-bottom:0;margin-bottom:clamp(14px,2vw,22px);border-bottom-color:var(--hm-line)}
.ep-tabs{gap:2px clamp(2px,.6vw,8px)}
.ep-tabs button{padding:12px clamp(10px,1.3vw,18px);font-size:clamp(12px,1vw,13px)}
.ep-tabs button small{margin-left:6px;font:500 11px/1 var(--hm-mono);color:#9a978e}
.ep-tabs button[aria-selected="true"] small{color:#bdb9ae}
.ep-note{color:#9a978e}
.ep-grid{gap:clamp(12px,1.8vw,22px)}
.ep-vis{aspect-ratio:1/.86;background:var(--hm-cold)}
.ep-vis i{left:12px;top:10px;font-size:11px;color:var(--hm-orange)}
.ep-vis img{width:70%;height:78%;max-height:78%;object-fit:contain}
.ep-name{align-items:baseline;margin-top:12px}
.ep-name a{font:700 clamp(14px,1.3vw,17px)/1.2 Raleway,Arial,sans-serif;letter-spacing:-.03em}
.ep-name span{font:500 12px/1 var(--hm-mono)}
.ep-meta{margin:3px 0 10px;font-size:10px;color:#9a978e}
.ep-acts{padding-top:9px;border-top-color:var(--hm-line)}
.ep-acts button{font-size:11px;letter-spacing:.08em}
.ep-acts button[aria-pressed="true"]{color:#e8602e}
.ep-more{margin-top:16px}
@media (max-width:900px){.ep-name{flex-direction:row;gap:10px}}
@media (max-width:560px){.ep-acts button{font-size:9px;letter-spacing:.02em;white-space:nowrap}}

/* Peyo animado (peyote-logo.js) junto al título "Las favoritas de Peyo".
   El título pasa a ser una fila: texto + Peyo sentado al lado (abajo alineados). Peyo nunca tapa el texto
   y ni el título ni el encabezado tienen overflow:hidden, así el brinco no se corta. */
.home-page #jersey-rail-title{display:flex;align-items:flex-end;gap:.35em}
.peyo-sit--fav{--w:64px;flex:none;display:block;width:var(--w);margin:0 0 -.06em;pointer-events:auto}
@media(max-width:700px){.peyo-sit--fav{--w:48px}}