@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@font-face{font-family:UnboundedCompacta;src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;size-adjust:72%}
/* FICHA NUEVA · la ficha de cada jersey con el estilo del inicio (hueso, papel, UnboundedCompacta y píldoras).
   La carga header-tools.js solo en las fichas (le pone la clase "ficha-nueva" al <body>).
   Lo que se mueve está en ficha-nueva.js. Para quitarlo: borra este archivo, ficha-nueva.js y su bloque en header-tools.js. */
html body.product-editorial-page.ficha-nueva{
  --fn-bone:#eeede8;--fn-paper:#f7f6f2;--fn-ink:#151412;--fn-mute:#6b675e;--fn-line:#d9d6cd;--fn-or:#ff8346;--fn-or-ink:#c4521c;
  --fn-display:UnboundedCompacta,Impact,"Arial Narrow",sans-serif;--fn-body:Raleway,Arial,sans-serif
}

/* ---------- Encabezado de la ficha: ya no es negro ---------- */
html body.ficha-nueva .product-title-banner{background:transparent!important;color:var(--fn-ink)!important;box-shadow:none!important;clip-path:none!important;border:0!important}
html body.ficha-nueva .product-title-banner::before,html body.ficha-nueva .product-title-banner::after{display:none!important}
html body.ficha-nueva .product-title-banner h1,html body.ficha-nueva .product-title-banner h1.product-title-fit{max-width:none!important;color:var(--fn-ink)!important;font:400 clamp(44px,6.4vw,92px)/.9 var(--fn-display)!important;letter-spacing:0!important;text-transform:uppercase!important}
html body.ficha-nueva .product-title-banner .back,html body.ficha-nueva .product-title-banner .tp-team-link{color:var(--fn-ink)!important;font:700 13.5px/1.4 var(--fn-body)!important;letter-spacing:0!important;text-transform:none!important}
html body.ficha-nueva .product-title-banner .tp-team-link{color:var(--fn-or-ink)!important;text-decoration:underline!important;text-underline-offset:4px}
html body.ficha-nueva .pr-kicker{color:var(--fn-or-ink)!important;font:700 12px/1.3 var(--fn-body)!important;letter-spacing:.08em!important}
html body.ficha-nueva .pr-chips li{border:1.5px solid var(--fn-ink)!important;color:var(--fn-ink)!important;font:700 12.5px/1 var(--fn-body)!important;letter-spacing:.02em!important}
html body.ficha-nueva .pr-share-icon{border-color:var(--fn-ink)!important;color:var(--fn-ink)!important;background:transparent!important}
/* El título entra subiendo (ficha-nueva.js le pone la clase) */
html body.ficha-nueva .fn-title-in{display:inline-block;animation:fn-rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes fn-rise{from{opacity:0;transform:translateY(40%)}}

/* ---------- Tarjetas: papel, sin bordes ---------- */
html body.ficha-nueva .gallery .main-photo,html body.ficha-nueva .product-archive-details,html body.ficha-nueva .buy-box,html body.ficha-nueva .memo,html body.ficha-nueva .pc2-set{background:var(--fn-paper)!important;border:0!important;box-shadow:none!important}
html body.ficha-nueva .gallery .main-photo{border-radius:24px!important}
html body.ficha-nueva .buy-box,html body.ficha-nueva .product-archive-details,html body.ficha-nueva .memo{border-radius:24px!important}
html body.ficha-nueva .gallery .main-photo.fn-in{animation:fn-photo 1s cubic-bezier(.2,.8,.2,1) both}
html body.ficha-nueva .gallery{perspective:1400px}
html body.ficha-nueva .gallery .main-photo.fn-tilt{transform:rotateX(var(--fn-rx,0deg)) rotateY(var(--fn-ry,0deg));transform-style:preserve-3d}
@keyframes fn-photo{from{opacity:0;transform:translateY(24px) rotate(-2deg) scale(.97)}}
html body.ficha-nueva .thumbs button{border-radius:14px!important}
html body.ficha-nueva .thumbs button.active{border-color:var(--fn-ink)!important}

/* ---------- Títulos de sección en UnboundedCompacta ---------- */
html body.ficha-nueva #archive-details-title,html body.ficha-nueva #product-archive-story-heading,html body.ficha-nueva .memo-title,html body.ficha-nueva .pc2-title,html body.ficha-nueva #cp-proof-title,html body.ficha-nueva .collection-complete-head h2,html body.ficha-nueva #pr-trio-title{font:400 clamp(28px,3.2vw,44px)/.95 var(--fn-display)!important;letter-spacing:0!important;text-transform:uppercase!important;color:var(--fn-ink)!important}
html body.ficha-nueva #pr-trio-title{font-size:26px!important}
html body.ficha-nueva .product-archive-note-title{font:800 clamp(20px,2vw,26px)/1.15 var(--fn-body)!important;letter-spacing:-.01em!important;color:var(--fn-or-ink)!important}
html body.ficha-nueva .product-archive-details dt,html body.ficha-nueva .product-archive-details-heading span{color:var(--fn-mute)!important;font:700 11.5px/1.2 var(--fn-body)!important;letter-spacing:.06em!important}

/* ---------- Compra ---------- */
html body.ficha-nueva .buy-box>.price,html body.ficha-nueva .buy-box .price{font-family:var(--fn-display)!important;font-weight:400!important;letter-spacing:0!important}
html body.ficha-nueva .size-label,html body.ficha-nueva .size-label *{font-family:var(--fn-body)!important;letter-spacing:.04em!important}
html body.ficha-nueva .size-option{min-width:52px!important;height:46px!important;padding:0 14px!important;border:1.5px solid var(--fn-line)!important;border-radius:999px!important;background:#fff!important;color:var(--fn-ink)!important;font:800 14px var(--fn-body)!important;transition:border-color .2s,background .2s,color .2s,transform .2s!important}
html body.ficha-nueva .size-option:hover:not(.is-unavailable){border-color:var(--fn-ink)!important;transform:translateY(-1px)}
html body.ficha-nueva .size-option.selected{background:var(--fn-ink)!important;border-color:var(--fn-ink)!important;color:var(--fn-bone)!important}
html body.ficha-nueva .size-option.selected.fn-pop{animation:fn-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes fn-pop{50%{transform:scale(1.14)}}
html body.ficha-nueva .buy-box>#order,html body.ficha-nueva .purchase-actions #order{min-height:58px!important;border-radius:999px!important;background:var(--fn-or)!important;color:var(--fn-ink)!important;font:800 16px/1 var(--fn-body)!important;letter-spacing:0!important;text-transform:none!important;transition:transform .2s,background .2s,color .2s!important}
html body.ficha-nueva .buy-box>#order:hover{background:var(--fn-ink)!important;color:var(--fn-bone)!important;transform:translateY(-2px)}
html body.ficha-nueva .buy-now{border-radius:999px!important;border:1.5px solid var(--fn-ink)!important;background:transparent!important;color:var(--fn-ink)!important;font:800 15px/1 var(--fn-body)!important;letter-spacing:0!important;text-transform:none!important}
html body.ficha-nueva .buy-now:hover{background:var(--fn-ink)!important;color:var(--fn-bone)!important}
html body.ficha-nueva .collection-product-action{border-radius:999px!important;font-family:var(--fn-body)!important}
html body.ficha-nueva .collection-action-label{font:800 13px/1 var(--fn-body)!important;letter-spacing:.02em!important}
html body.ficha-nueva .pr-wa-size,html body.ficha-nueva .jersey-builder,html body.ficha-nueva .product-quantity select{border-radius:16px!important}
html body.ficha-nueva .product-payment-note{border-radius:14px!important}

/* ---------- La historia: las palabras se van prendiendo al leer ---------- */
html body.ficha-nueva .fn-w{opacity:.22;transition:opacity .25s}
html body.ficha-nueva .fn-w.fn-on{opacity:1}

/* ---------- Forma parte de: la barra se llena al aparecer ---------- */
html body.ficha-nueva .pc2-set{border-radius:22px!important}
html body.ficha-nueva .pc2-bar i.fn-fill{animation:fn-fill 1.1s cubic-bezier(.2,.8,.2,1) .2s both;transform-origin:left}
@keyframes fn-fill{from{transform:scaleX(0)}}

/* ---------- Sello sobre la foto al marcar "Lo tengo" / "Lo quiero" ---------- */
html body.ficha-nueva .gallery{position:relative}
.fn-stamp{position:absolute;left:50%;top:44%;z-index:6;padding:12px 20px;border:4px solid currentColor;border-radius:10px;background:rgba(247,246,242,.88);color:#1f7a3f;font:400 clamp(26px,3.4vw,44px)/1 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg);animation:fn-stamp 1.9s cubic-bezier(.3,1.4,.5,1) both}
.fn-stamp.is-wanted{color:#c4521c}
.fn-stamp.is-fixed{position:fixed;top:45%;z-index:80;box-shadow:0 18px 40px rgba(21,20,18,.18)}
@keyframes fn-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-20deg) scale(2.4)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(.94)}26%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

@media(prefers-reduced-motion:reduce){html body.ficha-nueva .fn-title-in,html body.ficha-nueva .gallery .main-photo.fn-in,html body.ficha-nueva .pc2-bar i.fn-fill,html body.ficha-nueva .size-option.selected.fn-pop{animation:none}.fn-stamp{animation:none}}

/* "¿Dónde estabas tú?" en celular salía ANTES de la foto: lo mandamos después de la historia */
html body.ficha-nueva .detail-layout>.memo{order:6!important}
/* Barra fija de abajo en celular (precio + Añadir al carrito) */
html body.ficha-nueva .product-sticky-bar{background:color-mix(in srgb,var(--fn-bone) 94%,transparent)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--fn-line)!important;box-shadow:none!important}
html body.ficha-nueva .product-sticky-bar .sticky-price,html body.ficha-nueva .product-sticky-bar strong{font-family:var(--fn-display)!important;font-weight:400!important;letter-spacing:0!important;color:var(--fn-ink)!important}
html body.ficha-nueva .product-sticky-bar button,html body.ficha-nueva .product-sticky-bar a{border-radius:999px!important;background:var(--fn-or)!important;color:var(--fn-ink)!important;font:800 15px/1 var(--fn-body)!important;letter-spacing:0!important;text-transform:none!important;border:0!important}
/* "Revive la final": antes era texto blanco sobre el encabezado negro; ahora va sobre hueso */
html body.ficha-nueva .pr-match-chip{color:var(--fn-ink)!important;border-color:var(--fn-or)!important;background:#fff!important;font:800 13px/1 var(--fn-body)!important;letter-spacing:.02em!important;text-transform:none!important}
html body.ficha-nueva .pr-match-chip:hover{background:var(--fn-or)!important}
html body.ficha-nueva .product-archive-note .fn-revive{grid-column:1/-1;min-width:0}
html body.ficha-nueva.fn-has-revive .product-match{display:none!important}

/* ================= Acomodo de la ficha: aprovechar el espacio de la derecha =================
   En compu, en TODAS las fichas: a la izquierda foto, ficha, historia (+ Revive el partido si hay) y "Forma parte de";
   a la derecha, debajo de la compra, "¿Dónde estabas tú?" y "Así les llegó". ficha-nueva.js pone la clase fn-acomodo.
   Se hace solo con la cuadrícula (sin mover nada de lugar en la página). */
@media(min-width:1000px){
  /* Dos columnas que se apilan solas (ficha-nueva.js calcula cuánto mide cada bloque):
     izquierda: foto, ficha, historia + Revive el partido, Forma parte de · derecha: compra, ¿Dónde estabas tú?, Así les llegó */
  html body.ficha-nueva.fn-acomodo main.product-page{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,440px);grid-template-areas:none!important;grid-template-rows:none!important;grid-auto-rows:6px;grid-auto-flow:row dense;column-gap:clamp(24px,3.5vw,56px);row-gap:0;align-items:start}
  html body.ficha-nueva.fn-acomodo main.product-page>*{grid-column:1/-1;min-width:0;order:20}
  html body.ficha-nueva.fn-acomodo main.product-page .detail-layout,html body.ficha-nueva.fn-acomodo main.product-page .product-left-column{display:contents!important}
  html body.ficha-nueva.fn-acomodo .product-title-banner{order:0!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .detail-layout>.gallery{grid-column:1/2!important;grid-row-start:auto!important;order:1!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .product-story .thumbs{grid-column:1/2!important;grid-row-start:auto!important;order:2!important;margin:0!important;align-self:start}
  html body.ficha-nueva.fn-acomodo .product-left-column>.product-story{grid-column:1/2!important;grid-row-start:auto!important;order:2!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .product-left-column>.product-archive-details{grid-column:1/2!important;grid-row-start:auto!important;order:3!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .detail-layout>.product-archive-note{grid-column:1/2!important;grid-row-start:auto!important;order:4!important;margin:0!important;padding-top:28px!important}
  html body.ficha-nueva.fn-acomodo .pc2{grid-column:1/2!important;grid-row-start:auto!important;order:5!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .detail-layout>.buy-box{grid-column:2/3!important;grid-row-start:auto!important;order:1!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .memo{grid-column:2/3!important;grid-row-start:auto!important;order:2!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .cp-proof{grid-column:2/3!important;grid-row-start:auto!important;order:3!important;margin:0!important;max-width:none!important}
  html body.ficha-nueva.fn-acomodo .product-information{order:30!important;grid-column:1/-1!important;margin:0!important}
  html body.ficha-nueva.fn-acomodo .collection-complete{order:31!important;grid-column:1/-1!important;margin:0!important}
  /* Sin Revive el partido la izquierda queda más corta: ahí va "¿Dónde estabas tú?", debajo de "Forma parte de" */
  html body.ficha-nueva.fn-acomodo:not(.fn-has-revive) .memo{grid-column:1/2!important;order:6!important}
  html body.ficha-nueva.fn-has-revive .fn-revive .rv-team span{white-space:normal;line-height:1.05;overflow:visible}
  html body.ficha-nueva.fn-has-revive .fn-revive .rv-board{font-size:clamp(14px,1.4vw,18px)}
  /* Versión compacta de las tres en la columna angosta */
  html body.ficha-nueva.fn-acomodo .pc2-title,html body.ficha-nueva.fn-acomodo .memo-title,html body.ficha-nueva.fn-acomodo #cp-proof-title{font-size:26px!important}
  html body.ficha-nueva.fn-acomodo .pc2-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:12px!important}
  html body.ficha-nueva.fn-acomodo .pc2-set{width:auto!important;max-width:none!important}
  html body.ficha-nueva.fn-acomodo .pc2-slots{gap:5px!important}
  html body.ficha-nueva.fn-acomodo .memo{padding:20px!important;border-radius:22px!important}
  html body.ficha-nueva.fn-acomodo .memo-wrap{grid-template-columns:1fr!important;gap:12px!important}
  html body.ficha-nueva.fn-acomodo .memo-head{margin-bottom:10px!important;padding-bottom:10px!important}
  html body.ficha-nueva.fn-acomodo .memo-empty{margin:0!important;font-size:14px!important}
  html body.ficha-nueva.fn-acomodo .memo-form{margin-top:4px!important;padding:16px!important;border-radius:16px!important}
  html body.ficha-nueva.fn-acomodo .memo-row{grid-template-columns:1fr 1fr!important}
  html body.ficha-nueva.fn-acomodo .cp-proof{padding:20px;border-radius:22px;background:var(--fn-paper)}
  html body.ficha-nueva.fn-acomodo .cp-head{margin-bottom:10px!important}
  html body.ficha-nueva.fn-acomodo .cp-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  html body.ficha-nueva.fn-acomodo .cp-empty{padding:14px!important;gap:10px!important}
  html body.ficha-nueva.fn-acomodo .cp-empty p{font-size:14px!important}
}

/* "¿Dónde estabas tú?" más chico en todas las fichas: el formulario se abre con un botón (ficha-nueva.js) */
html body.ficha-nueva .memo.fn-memo-cerrado .memo-form{display:none!important}
.fn-memo-abrir{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:12px 18px;border:0;border-radius:999px;background:var(--fn-ink);color:var(--fn-bone);font:800 14.5px/1 var(--fn-body);cursor:pointer;transition:transform .2s,background .2s}
.fn-memo-abrir:hover{background:var(--fn-or);color:var(--fn-ink);transform:translateY(-1px)}
.fn-memo-abrir:focus-visible{outline:3px solid var(--fn-or);outline-offset:3px}
html body.ficha-nueva .memo:not(.fn-memo-cerrado) .fn-memo-abrir{display:none}
@media(min-width:1000px){html body.ficha-nueva:not(.fn-acomodo) .memo-wrap{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important}}

/* "Revive el partido" más chico dentro de la ficha */
html body.ficha-nueva .fn-revive .rv{margin-top:22px;padding:18px}
html body.ficha-nueva .fn-revive .rv-title{font-size:clamp(24px,2.6vw,36px)}
html body.ficha-nueva .fn-revive .rv-board{font-size:clamp(16px,1.6vw,20px)}
html body.ficha-nueva .fn-revive .rv-score{font-size:clamp(20px,2.2vw,28px);padding:8px 14px}
html body.ficha-nueva .fn-revive .rv-team{padding:9px 12px}
html body.ficha-nueva .fn-revive .rv-stage{grid-template-columns:150px minmax(0,1fr);gap:18px;margin-top:14px;min-height:0}
html body.ficha-nueva .fn-revive .rv-min{font-size:clamp(56px,6.4vw,88px)}
html body.ficha-nueva .fn-revive .rv-min.is-long{font-size:clamp(44px,4.8vw,64px)}
html body.ficha-nueva .fn-revive .rv-name{font-size:clamp(26px,3vw,40px)}
html body.ficha-nueva .fn-revive .rv-field{max-width:520px;margin:0 auto}
html body.ficha-nueva .fn-revive .rv-gol{font-size:clamp(56px,7vw,96px)}
html body.ficha-nueva .fn-revive .rv-end-stamp{font-size:clamp(36px,5vw,64px)}
html body.ficha-nueva .fn-revive .rv-end-shirt img{width:120px;height:120px}
html body.ficha-nueva .fn-revive .rv-tick{margin:14px -18px -18px;font-size:14px}
html body.ficha-nueva .fn-revive .rv-tick b{padding:10px 12px}
@media(max-width:700px){html body.ficha-nueva .fn-revive .rv-stage{grid-template-columns:100px minmax(0,1fr)}html body.ficha-nueva .fn-revive .rv-board{font-size:14px}html body.ficha-nueva .fn-revive .rv-team{padding:8px 7px;gap:5px}html body.ficha-nueva .fn-revive .rv-score{font-size:20px;padding:7px 9px}}

/* Evita que la ficha "brinque" al cargar: el contenido se muestra cuando ya está armado el título grande
   (product-editorial.js crea .product-title-banner). Si algo falla, se muestra solo a los 3 segundos.
   Navegadores sin :has() ignoran esta regla y se ve como antes. */
body.ficha-nueva main.product-page:not(:has(.product-title-banner)){opacity:0;animation:fn-aparece 0s 3s forwards}
@keyframes fn-aparece{to{opacity:1}}
/* "Completa tu colección": se arma desde el principio como fila deslizable (igual que product-editorial.css),
   así no cambia de cuadrícula a fila cuando carga ese estilo (eso movía la página). */
body.product-editorial-page .collection-complete-grid{display:flex!important;gap:0!important;overflow-x:auto!important;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;border-bottom:1px solid #b8b8b5}