/* Inicio · "Un día como hoy" (hoy-historia.js). Clases hy-*.
   Titular grande, hoja de calendario con la historia del partido a la izquierda y el jersey que lo vivió como tarjeta a la derecha.
   Abajo, una tira con los otros partidos que se jugaron ese mismo día. Tipografías de la tienda: Unbounded, Raleway e IBM Plex Mono. */
.hoy-historia{--ink:#151412;--bone:#f7f6f2;--line:#cfcbc0;--muted:#6b675e;--accent:#ff8346;--display:var(--hn-display,"Unbounded",Rubik,"Arial Black",sans-serif);--mono:var(--hn-mono,"IBM Plex Mono",ui-monospace,monospace);position:relative;margin:0 5vw;padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px);border-top:1.5px solid var(--line);color:var(--ink)}
.hoy-historia:empty{height:1px;margin:0;padding:0;border:0}
.hoy-historia[hidden]{display:none}

.hy-eyebrow{margin:0 0 clamp(10px,1.4vw,18px);font:500 clamp(11px,1vw,14px)/1.3 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.hy-title{margin:0 0 clamp(26px,4vw,56px);font:400 clamp(34px,6.2vw,92px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em}

.hy-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);align-items:center;gap:clamp(28px,5vw,80px)}
.hy-left{display:flex;align-items:flex-start;gap:clamp(20px,3vw,44px);min-width:0}

/* Hoja de calendario */
.hy-leaf{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;width:clamp(112px,13.5vw,188px);padding:clamp(12px,1.4vw,20px) 0 clamp(12px,1.4vw,20px);margin-top:clamp(4px,.8vw,12px);background:#faf9f5;border:1.5px solid var(--ink);border-radius:10px;box-shadow:7px 7px 0 var(--ink);transform:rotate(-3deg)}
.hy-leaf::before,.hy-leaf::after{content:"";position:absolute;top:-12px;width:13px;height:22px;border-radius:7px;background:var(--bone);border:1.5px solid var(--ink)}
.hy-leaf::before{left:20%}.hy-leaf::after{right:20%}
.hy-mes{align-self:stretch;padding:0 0 clamp(6px,.8vw,10px);margin:0 0 2px;border-bottom:1.5px solid var(--ink);text-align:center;font:400 clamp(14px,1.6vw,22px)/1 var(--display);text-transform:uppercase;color:var(--accent)}
.hy-dia{font:400 clamp(60px,8.6vw,124px)/1.02 var(--display);letter-spacing:-.05em}
.hy-ano{font:600 clamp(13px,1.35vw,18px)/1 var(--mono);color:var(--muted)}

/* Historia */
.hy-body{min-width:0;padding-top:clamp(2px,.4vw,8px)}
.hy-ago{margin:0 0 8px;font:500 clamp(11px,1vw,13px)/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hy-story{margin:0 0 clamp(14px,1.8vw,24px);font:400 clamp(22px,3.1vw,46px)/1.02 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.hy-game{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(12px,1.6vw,24px);margin:0 0 clamp(10px,1.2vw,16px);font:600 clamp(16px,1.9vw,27px)/1.1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.hy-game b{padding:clamp(7px,.9vw,12px) clamp(16px,2vw,30px);border-radius:14px;background:var(--ink);color:#fff;font:400 clamp(20px,2.7vw,40px)/1 var(--display);letter-spacing:0}
.hy-game small{flex-basis:100%;font:500 clamp(11px,1vw,13px)/1.3 var(--mono);letter-spacing:.1em;color:var(--muted)}
.hy-stamp{margin:0 0 clamp(10px,1.2vw,14px);font:500 clamp(11px,1vw,13px)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hy-end{margin:0 0 clamp(18px,2.4vw,30px);max-width:44ch;font:500 clamp(15px,1.4vw,20px)/1.55 Raleway,Arial,sans-serif}
.hy-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,2.4vw,36px)}
.hy-cta{display:inline-flex;align-items:center;gap:10px;min-height:clamp(48px,4.2vw,58px);padding:0 clamp(22px,2.4vw,34px);border-radius:999px;background:var(--ink);color:#fff;font:800 clamp(14px,1.25vw,17px)/1 Rubik,Arial,sans-serif;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.hy-cta:hover{background:var(--accent);color:var(--ink);transform:translateY(-2px)}
.hy-link{display:inline-flex;align-items:center;gap:8px;padding:4px 0;border-bottom:2px solid var(--ink);color:var(--ink);font:800 clamp(14px,1.25vw,17px)/1.2 Rubik,Arial,sans-serif;text-decoration:none;transition:color .2s,border-color .2s}
.hy-link:hover{color:var(--accent);border-color:var(--accent)}
.hy-cta:focus-visible,.hy-link:focus-visible,.hy-pol:focus-visible,.hy-also a:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}

/* Tarjeta del jersey, con una hoja durazno detrás y cinta */
.hy-pol{position:relative;display:block;justify-self:end;width:100%;max-width:520px;color:var(--ink);text-decoration:none}
.hy-pol::before{content:"";position:absolute;inset:clamp(8px,1.2vw,18px) calc(-1 * clamp(10px,1.4vw,22px)) calc(-1 * clamp(10px,1.2vw,18px)) clamp(10px,1.4vw,22px);border-radius:6px;background:rgba(243,163,128,.62);transform:rotate(1.4deg)}
.hy-pol-card{position:relative;display:flex;flex-direction:column;padding:clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px) clamp(14px,1.4vw,20px);border-radius:6px;background:#faf9f5;box-shadow:0 2px 3px rgba(70,50,30,.12),0 24px 40px -16px rgba(70,50,30,.32);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.hy-pol-card::before{content:"";position:absolute;z-index:2;left:50%;top:calc(-1 * clamp(14px,1.6vw,22px));width:clamp(96px,10vw,148px);height:clamp(30px,3.2vw,46px);margin-left:-8%;background:rgba(243,163,128,.94);transform:rotate(-2deg)}
.hy-pol:hover .hy-pol-card{transform:translateY(-6px) rotate(-.4deg)}
.hy-pol-tag{font:500 clamp(11px,1vw,14px)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hy-ph{position:relative;display:block;aspect-ratio:1/.92}
.hy-ph img{position:absolute;inset:3% 4%;width:92%;height:94%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hy-pol:hover .hy-ph img{transform:scale(1.04) rotate(-1deg)}
.hy-cap{position:relative;display:block;padding-right:34px}
.hy-cap small{display:block;margin-bottom:4px;font:500 clamp(11px,.95vw,13px)/1.3 var(--mono);letter-spacing:.04em;color:var(--muted)}
.hy-cap b{display:block;font:800 clamp(18px,1.9vw,26px)/1.15 Rubik,Arial,sans-serif}
.hy-cap i{position:absolute;right:0;bottom:2px;font-style:normal;font-size:clamp(22px,2vw,30px);line-height:1;transition:transform .3s}
.hy-pol:hover .hy-cap i{transform:translate(3px,-3px)}

/* Tira con los otros partidos de ese día */
.hy-also{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(20px,3vw,48px);margin-top:clamp(34px,5vw,64px);padding-top:clamp(16px,2vw,24px);border-top:1.5px solid var(--line)}
.hy-also-t{font:500 clamp(11px,1vw,13px)/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hy-also ul{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.4vw,36px);margin:0;padding:0;list-style:none}
.hy-also li+li{position:relative}
.hy-also li+li::before{content:"•";position:absolute;left:calc(-1 * clamp(10px,1.3vw,20px));top:50%;transform:translate(-50%,-52%);color:var(--muted)}
.hy-also a{color:var(--ink);font:500 clamp(14px,1.3vw,18px)/1.3 Raleway,Arial,sans-serif;text-decoration:none;border-bottom:1.5px solid var(--ink)}
.hy-also a:hover{color:var(--accent);border-color:var(--accent)}

.hy-also-y::before{content:" · "}

/* Tableta y celular: la tarjeta pasa debajo */
@media(max-width:900px){
  .hy-main{grid-template-columns:1fr;gap:clamp(34px,7vw,52px)}
  .hy-pol{justify-self:center;max-width:440px}
}
@media(max-width:560px){
  .hy-eyebrow{letter-spacing:.24em}
  .hy-title{font-size:clamp(30px,11.4vw,46px);line-height:.98;margin-bottom:26px}
  /* La hoja a la izquierda y, a su lado, el título, el marcador y el lugar; debajo, el texto y el botón ancho */
  .hy-left{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:start}
  .hy-body{display:contents}
  .hy-leaf{grid-column:1;grid-row:1/5;width:92px;margin-top:6px;padding:9px 0 9px;border-radius:8px;box-shadow:4px 4px 0 var(--ink)}
  .hy-leaf::before,.hy-leaf::after{top:-9px;width:10px;height:16px}
  .hy-mes{font-size:12px;padding-bottom:5px}
  .hy-dia{font-size:48px}
  .hy-ano{font-size:11px}
  .hy-ago{display:none}
  .hy-story{grid-column:2;grid-row:1;margin:0 0 12px;font-size:clamp(19px,5.9vw,26px)}
  .hy-game{grid-column:2;grid-row:2;margin:0 0 8px;gap:6px 8px;font-size:12px;letter-spacing:.05em}
  .hy-game b{padding:6px 12px;border-radius:10px;font-size:19px}
  .hy-stamp{grid-column:2;grid-row:3;margin:0;font-size:10.5px;letter-spacing:.1em}
  .hy-end{grid-column:1/3;grid-row:5;margin:22px 0 20px;max-width:none;font-size:17px}
  .hy-actions{grid-column:1/3;grid-row:6;display:block}
  .hy-cta{display:flex;justify-content:center;width:100%;min-height:54px;font-size:17px}
  .hy-link{display:none}
  .hy-pol{margin-top:6px}
  /* Los otros partidos del mismo día, como lista con el año a la derecha */
  .hy-also{display:block;margin-top:34px;padding-top:18px}
  .hy-also-t{display:block;margin-bottom:6px}
  .hy-also ul{display:block}
  .hy-also li+li::before{display:none}
  .hy-also li{border-bottom:1.5px solid var(--line)}
  .hy-also a{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:0;font-size:17px}
  .hy-also-y{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.hy-pol-card,.hy-ph img,.hy-cta,.hy-link,.hy-cap i{transition:none}}

/* El inicio trae reglas globales de tipografía: aquí se fija cuál letra va en cada parte. */
html body .hoy-historia :is(.hy-title,.hy-story,.hy-mes,.hy-dia,.hy-game b){font-family:var(--display)!important;font-weight:400!important}
html body .hoy-historia :is(.hy-eyebrow,.hy-ago,.hy-game,.hy-game small,.hy-stamp,.hy-ano,.hy-pol-tag,.hy-cap small,.hy-also-t){font-family:var(--mono)!important}
html body .hoy-historia .hy-game b{font-weight:400!important}
@media(max-width:560px){.hy-also-y::before{content:none}}
