/* C: camiseta del día / día de partido · G: drops · E: regalo y amigo invisible. Tokens de main.css. */

/* ---------- Camiseta del día ---------- */
.cdd-card { display: grid; gap: 24px; padding: clamp(20px, 4vw, 40px); border-radius: var(--r-l); background: var(--bg-2); overflow: hidden; }
.cdd-media { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-m); overflow: hidden; background: #fff; }
.cdd-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cdd-media:hover img { transform: scale(1.04); }
.cdd-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.cdd-copy .eyebrow, .cdd-copy .sub, .cdd-copy .cta-row, .cdd-copy h2 { margin: 0; }
.cdd-story { font-size: 1.05rem; color: var(--ink-2); max-width: 52ch; }
.cdd-prod { color: var(--ink-2); }
.cdd-prod strong { color: var(--ink); margin-right: 6px; }
.cdd-next { margin-top: 6px; }
.cdd-ex { display: inline-block; padding: 2px 8px; border-radius: var(--pill); background: #fff3cd; color: #7a5a00; font-size: .7rem; font-weight: 650; letter-spacing: 0; text-transform: none; vertical-align: middle; }

/* Día de partido: fondo oscuro, cuenta atrás grande */
.cdd-card.is-match { background: radial-gradient(120% 100% at 0% 0%, #16305a 0%, var(--dark) 60%); color: #fff; }
.cdd-card.is-match .eyebrow { color: #7cc0ff; }
.cdd-card.is-match .sub, .cdd-when { color: rgba(255, 255, 255, .72); }
.cdd-vs { color: var(--brand); font-weight: 400; }
.cdd-count { display: flex; gap: 10px; flex-wrap: wrap; }
.cdd-count > span { display: grid; min-width: 68px; padding: 10px 8px; border-radius: var(--r-s); background: rgba(255, 255, 255, .08); text-align: center; }
.cdd-count b { font: 800 clamp(1.5rem, 3.4vw, 2.2rem)/1 var(--font-d); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cdd-count small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-top: 4px; }
.cdd-live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--pill); background: rgba(255, 255, 255, .1); font-weight: 650; }
.cdd-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: cdd-blink 1.2s infinite; }
@keyframes cdd-blink { 50% { opacity: .3; } }
.cdd-off { padding: 12px 16px; border-radius: var(--r-s); background: var(--brand); color: #fff; font-weight: 500; }
.cdd-shirts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cdd-shirts a { display: grid; gap: 8px; color: #fff; }
.cdd-shirt-media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-m); overflow: hidden; background: #fff; }
.cdd-shirt-media img { width: 100%; height: 100%; object-fit: cover; }
.cdd-shirts b { font-size: .92rem; line-height: 1.3; }
.cdd-shirts small, .cdd-shirts .price-now { color: rgba(255, 255, 255, .8); }
.cdd-shirts .price-was { color: rgba(255, 255, 255, .5); }
.cdd-badge { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: var(--pill); background: var(--brand-600); color: #fff; font-size: .8rem; font-weight: 650; }

@media (min-width: 760px) {
	.cdd-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); }
	.cdd-card.is-match { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
	.cdd-shirts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ---------- Drops ---------- */
.drop-hero { padding: clamp(40px, 6vw, 80px) 0; background: var(--bg-2); }
.drop-hero-grid { display: grid; gap: 28px; }
.drop-copy { display: flex; flex-direction: column; gap: 16px; }
.drop-copy .eyebrow, .drop-copy h1, .drop-copy .lead { margin: 0; }
.drop-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-2); }
.drop-pill { display: inline-block; padding: 6px 14px; border-radius: var(--pill); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: #fff; }
.drop-pill.is-disponible { background: #1d7f3e; }
.drop-pill.is-agotado { background: var(--ink-3); }
.drop-count > span { background: #fff; color: var(--ink); }
.drop-aviso { display: flex; gap: 8px; flex-wrap: wrap; }
.drop-aviso input { flex: 1 1 220px; height: 48px; padding: 0 18px; border-radius: var(--pill); border: 1.5px solid var(--line); background: #fff; font-size: 1rem; }
.drop-aviso input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10, 132, 255, .18); }
.drop-ok { font-weight: 600; color: #1d7f3e; }
.drop-ok.is-error { color: #c62828; }
.drop-hero-media { aspect-ratio: 1 / 1; border-radius: var(--r-l); overflow: hidden; background: #fff; }
.drop-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.drop-hero-media.is-teaser img { filter: blur(14px) saturate(1.2); transform: scale(1.1); }
.drop-item.is-out { opacity: .55; }
.drop-units { display: block; margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.drop-units em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.badge-out { background: var(--ink); color: #fff; }
.drop-others li a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.drop-others small { color: var(--ink-3); }
@media (min-width: 760px) { .drop-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }

/* ---------- Regalo ---------- */
.gift-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; }
.gift-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--bg-3); color: var(--brand-700); font-weight: 600; font-size: .92rem; }
.gift-link:hover { background: #d9e9ff; }
.off-cart-foot .gift-link { justify-content: center; width: 100%; margin-top: 8px; }
.gift-box { margin: 24px 0; padding: 20px; border: 0; border-radius: var(--r-m); background: var(--bg-2); }
.gift-fields { display: grid; gap: 14px; margin-top: 14px; }
.gift-fields[hidden] { display: none; }
.gift-fields label:not(.pz-switch) { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.gift-fields label em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.gift-fields input[type="text"], .gift-fields textarea { padding: 12px 16px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: #fff; font-size: 1rem; font-weight: 500; width: 100%; resize: vertical; }
.gift-fields input:focus, .gift-fields textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10, 132, 255, .18); }
.gift-fields .pz-switch { font-weight: 550; }

/* ---------- Amigo invisible ---------- */
.ai-opt { margin-top: 16px; }
.ai-reveal { border: 0; background: none; padding: 0; color: var(--brand-600); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ai-field { margin-top: 10px; padding: 16px; border-radius: var(--r-m); background: var(--bg-3); }
.ai-field[hidden] { display: none; }
.ai-field label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.ai-field label em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.ai-field input { height: 48px; padding: 0 16px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: #fff; font-size: 1.05rem; font-weight: 600; }
.ai-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10, 132, 255, .18); }
.ai-field .fine { margin-top: 8px; }
.ai-hero .lead { max-width: 60ch; margin-top: 12px; }
.ai-steps { display: grid; gap: 14px; counter-reset: ai; margin-top: 20px; }
.ai-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; counter-increment: ai; }
.ai-steps li::before { content: counter(ai); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-600); color: #fff; font: 700 1rem/1 var(--font-d); }
.ai-steps b { font-size: 1.05rem; }
.ai-steps span { color: var(--ink-2); }
.ai-tool { padding: clamp(20px, 4vw, 32px); border-radius: var(--r-l); background: var(--bg-2); }
.ai-form { display: grid; gap: 12px; margin: 16px 0; }
.ai-form label, .ai-add label { font-size: .85rem; font-weight: 600; color: var(--ink-2); display: grid; gap: 6px; }
.ai-form input, .ai-add input { height: 48px; padding: 0 16px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: #fff; font-size: 1rem; width: 100%; }
.ai-form input:focus, .ai-add input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10, 132, 255, .18); }
.ai-add { display: flex; gap: 8px; }
.ai-add input { flex: 1; }
.ai-people { display: grid; gap: 8px; margin-top: 16px; }
.ai-people li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--r-m); background: #fff; }
.ai-people b { flex: 1 1 120px; }
.ai-people .ai-st { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.ai-people .ai-st.is-ok { color: #1d7f3e; }
.ai-people .ai-st.is-ok::before { content: "✓ "; }
.ai-people .ai-rm { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 6px; }
.ai-people .ai-rm:hover { color: #c62828; }
.ai-cart { display: grid; gap: 10px; margin: 16px 0 20px; }
.ai-cart li { display: flex; align-items: center; gap: 14px; }
.ai-cart img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s); background: var(--bg-2); }
.ai-cart span { display: grid; }
.ai-cart small { color: var(--ink-3); }
@media (min-width: 600px) { .ai-form { grid-template-columns: 1fr 180px; } }

@media (prefers-reduced-motion: reduce) {
	.cdd-media img, .cdd-live::before { transition: none; animation: none; }
}

/* Oferta de la camiseta del día (inc/oferta-del-dia.php): tarjeta clara, sello −X %, cuenta atrás hasta medianoche */
.od-card { display: grid; gap: clamp(18px, 4vw, 48px); align-items: center; padding: clamp(16px, 3vw, 32px); border-radius: var(--r-l, 28px); background: #F5F5F7; }
@media (min-width: 800px) { .od-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.od-media { position: relative; display: block; border-radius: var(--r-m, 20px); overflow: hidden; background: #fff; }
.od-media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.od-seal { position: absolute; top: 12px; left: 12px; padding: 8px 14px; border-radius: 999px; background: #0071E3; color: #fff; font: 800 1rem/1 var(--font-d); }
.od-copy h2 { margin: 6px 0 10px; }
.od-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-size: 1.1rem; }
.od-price del { color: #6E6E73; }
.od-price strong { font: 800 clamp(2rem, 6vw, 3rem)/1 var(--font-d); color: #1D1D1F; letter-spacing: -.02em; }
.od-count > span { background: #fff; color: #1D1D1F; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.od-count { margin: 0 0 8px; }