/* ============================================================ LA TORRE KARIN STORE · MVP "Playa" · Design System Neobrutalismo amigable · paleta costera (mar + arena + madera) Tokens → componentes → secciones · 0 build, vanilla. Fuentes cargadas vía en el (no @import, evita render-block). ============================================================ */ /* ---------- TOKENS ---------- */ :root { /* Mar (primary) */ --sea: #0693e3; --sea-deep: #066ba6; --sea-light: #5cc0f0; --sea-wash: #e4f4fd; /* Arena (fondos) */ --sand: #f6e5cf; /* base */ --sand-light: #fbf2e1; /* raised */ --sand-deep: #ecd8b8; /* input / deeper */ --cream: #fffaf0; /* Madera / logo (bordes + texto + acentos cálidos) */ --ink: #3a2412; /* borde/texto principal (chocolate, no negro) */ --brown: #68380b; /* aro del logo */ --brown-mid: #97500c; /* saddle */ --tan: #db7e2c; /* acento cálido (la gorra) */ --tan-soft: #f4d8b0; /* Estados */ --wa: #25d366; /* WhatsApp / actividad viva */ --wa-deep: #128c4a; --gold: #e9b85a; /* Texto */ --text: #3a2412; --text-mid: #6b5238; --text-soft: #7a6446; /* AA 4.6:1 sobre arena */ --on-sea: #ffffff; /* Colores por juego — oscurecidos para pasar AA con texto blanco (calendario/eventos) */ --g-op: #c44d18; --g-magic: #8a6210; --g-pkmn: #1f7a4f; --g-lorcana: #7d3fc0; --g-ygo: #4a37b0; /* Bordes / radios (redondeado amigable) */ --bw: 3px; /* grosor borde tarjeta */ --bw-sm: 2.5px; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --r-ic: 12px; /* contenedores de icono (unificado) */ --r-full: 999px; /* Sombras duras (neobrutalismo, tinta marrón) */ --sh: 5px 5px 0 var(--ink); --sh-sm: 3px 3px 0 var(--ink); --sh-lg: 8px 8px 0 var(--ink); --sh-press:2px 2px 0 var(--ink); --sh-sea: 5px 5px 0 var(--sea-deep); /* Layout */ --maxw: 1180px; --gut: clamp(18px, 4vw, 40px); --font-head: 'Fredoka', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; } /* ---------- RESET ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--text); background: var(--sand); line-height: 1.6; overflow-x: hidden; background-image: radial-gradient(circle at 12% -5%, rgba(6,147,227,.10), transparent 42%), radial-gradient(circle at 95% 8%, rgba(219,126,44,.10), transparent 38%); } @media (min-width: 860px) { body { background-attachment: fixed; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.06; letter-spacing: -.01em; color: var(--ink); } :focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 4px; } /* foco inset dentro de contenedores con overflow:hidden (no se recorta) */ .cal-cell:focus-visible, .flip-back a:focus-visible, .merch-card:focus-visible { outline-offset: -3px; } ::selection { background: var(--tan); color: #fff; } /* ---------- TYPE SCALE ---------- */ .eyebrow { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--brown); } .h-display { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 700; } .h-1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 700; } .h-2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; } .lead { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--text-mid); font-weight: 500; } /* ---------- LAYOUT HELPERS ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(56px, 9vw, 104px); position: relative; } /* ritmo: secciones alternas en crema + textura arena suave = capítulos */ .section--alt { background: var(--cream); } .section--alt::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, var(--sand-deep) 1px, transparent 0); background-size: 26px 26px; } .section--alt > .wrap { position: relative; z-index: 1; } /* divisor de ola costera entre secciones */ .wave { display: block; width: 100%; height: 36px; color: var(--cream); margin-bottom: -1px; } .wave--up { transform: rotate(180deg); color: var(--cream); } .section-head { max-width: 620px; margin-bottom: clamp(28px, 4vw, 48px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head .h-1 { margin: 10px 0 12px; } /* ---------- COMPONENTS: chips, badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-full); background: var(--cream); font-family: var(--font-head); font-weight: 600; font-size: .78rem; box-shadow: var(--sh-sm); white-space: nowrap; } .chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 3px rgba(37,211,102,.25); } .chip--sea { background: var(--sea-wash); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-full); font-family: var(--font-head); font-weight: 600; font-size: .72rem; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--cream); color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; box-shadow: var(--sh); transition: transform .12s ease, box-shadow .12s ease, background .15s; min-height: 48px; } .btn:hover { transform: translate(2px,2px); box-shadow: var(--sh-press); } .btn:active { transform: translate(5px,5px); box-shadow: 0 0 0 var(--ink); } .btn svg { width: 20px; height: 20px; } .btn--sea { background: var(--sea); color: var(--on-sea); } .btn--wa { background: var(--wa); color: #06351c; } .btn--tan { background: var(--tan); color: #fff; } .btn--ghost{ background: transparent; } .btn--lg { padding: 17px 30px; font-size: 1.1rem; } .btn--sm { padding: 10px 16px; font-size: .9rem; min-height: 40px; box-shadow: var(--sh-sm); } .btn--sm:hover { box-shadow: var(--sh-press); } /* ---------- CARD base ---------- */ .card { background: var(--sand-light); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } /* ============================================================ HEADER / NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; background: linear-gradient(100deg, var(--sea), var(--sea-deep) 70%); border-bottom: 3px solid var(--ink); } .nav-inner { display: flex; align-items: center; gap: 18px; height: 70px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--cream); } .brand img { width: 50px; height: 50px; } .brand small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .12em; color: var(--tan); text-transform: uppercase; } .nav-links { display: flex; gap: 2px; margin-left: auto; } .nav-links a { font-family: var(--font-head); font-weight: 500; font-size: .94rem; color: rgba(246,229,207,.9); padding: 8px 13px; border-radius: var(--r-sm); transition: background .15s, color .15s; display: inline-flex; align-items: center; min-height: 44px; } .nav-links a.active { background: rgba(219,126,44,.22); color: #fff; } .nav-links a:hover { background: rgba(246,229,207,.12); color: #fff; } .nav-cta { margin-left: 8px; } .nav-burger { display: none; margin-left: auto; width: 46px; height: 46px; border: var(--bw-sm) solid var(--cream); border-radius: var(--r-sm); background: rgba(246,229,207,.1); color: var(--cream); align-items: center; justify-content: center; } .nav-burger svg { width: 24px; height: 24px; } @media (max-width: 880px) { .nav-links, .nav-cta.desktop { display: none; } .nav-burger { display: inline-flex; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: linear-gradient(100deg, var(--brown), var(--ink) 60%); border-bottom: 3px solid #20140a; padding: 14px var(--gut); gap: 6px; } .nav-links.open a { font-size: 1.05rem; padding: 12px; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(34px, 5vw, 60px); padding-bottom: clamp(50px,7vw,86px); overflow: hidden; } .hero::before { /* horizonte de playa sutil */ content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, transparent, rgba(6,147,227,.07)); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .hero-copy .h-display { margin: 16px 0 18px; } .hero-copy .h-display .u { color: var(--sea); position: relative; white-space: nowrap; } .hero-copy .h-display .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 12px; background: var(--tan); opacity: .5; z-index: -1; border-radius: 4px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } /* ============================================================ MARQUEE (carrusel en movimiento) ============================================================ */ .marquee { overflow: hidden; background: linear-gradient(100deg, var(--sea), var(--sea-deep)); border-block: 3px solid var(--ink); } .marquee-track { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; padding: 12px 0; will-change: transform; animation: marquee 60s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: #fff; } .marquee-track .sep { color: var(--gold); font-size: .8rem; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; padding: 12px var(--gut); } } /* ============================================================ HERO VISUAL · baraja TCG estilo Pokémon + badges + fondo heroico ============================================================ */ .hero-visual { --px: 0; --py: 0; position: relative; min-height: 480px; display: grid; place-items: center; perspective: 1400px; } /* fondo heroico: rayos que giran lento + destellos */ .hero-rays { position: absolute; inset: -20% ; z-index: 0; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 8deg, rgba(6,147,227,.10) 8deg 12deg, transparent 12deg 30deg, rgba(219,126,44,.10) 30deg 34deg, transparent 34deg 60deg); -webkit-mask: radial-gradient(circle at 50% 45%, #000 0, transparent 62%); mask: radial-gradient(circle at 50% 45%, #000 0, transparent 62%); animation: rays 48s linear infinite; opacity: .8; } @keyframes rays { to { transform: rotate(360deg); } } .hero-sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1.4px, transparent 2px), radial-gradient(circle, var(--tan) 0 1.2px, transparent 2px), radial-gradient(circle, var(--sea-light) 0 1.2px, transparent 2px); background-position: 12% 20%, 78% 30%, 60% 78%; background-size: 220px 220px, 260px 260px, 300px 300px; background-repeat: no-repeat; animation: twinkle 4.5s ease-in-out infinite; opacity: .55; } @keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: .7; } } /* badges de juego flotando · DETRÁS de la carta (z-index 1 < stack 2) para no taparla */ .game-badges { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .gb { position: absolute; font-family: var(--font-head); font-weight: 700; font-size: .74rem; padding: 6px 12px; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-full); box-shadow: var(--sh-sm); color: #fff; white-space: nowrap; animation: bob 11s ease-in-out infinite; } .gb-magic { top: 2%; left: 0; background: var(--g-magic); animation-delay: -.4s; } .gb-op { top: 8%; right: -2%; background: var(--g-op); animation-delay: -2.4s; } .gb-pkmn { bottom: 14%; left: -3%; background: var(--g-pkmn); animation-delay: -4.6s; } .gb-lorcana { bottom: 0; right: 2%; background: var(--g-lorcana); animation-delay: -6.4s; } .gb-ygo { top: 46%; right: -4%; background: var(--g-ygo); animation-delay: -8.2s; } .gb-db { bottom: 6%; left: 6%; background: #c0392b; animation-delay: -10s; } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } } /* baraja TCG */ .tcg-stack { position: relative; z-index: 2; width: min(300px, 78vw); aspect-ratio: 5/7; transform-style: preserve-3d; transform: rotateY(calc(var(--px)*6deg)) rotateX(calc(var(--py)*-5deg)); transition: transform .2s ease-out; } .tcg-back { position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--sh); background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.18) 0 22%, transparent 23%), repeating-linear-gradient(45deg, rgba(0,0,0,.10) 0 8px, transparent 8px 16px), linear-gradient(160deg, var(--brown-mid), var(--brown)); } .tcg-back::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--tan); font-size: 2.4rem; opacity: .9; } .tcg-back-1 { transform: translate(14px, 10px) rotate(6deg); } .tcg-back-2 { transform: translate(26px, 20px) rotate(11deg); } .tcg-front { position: relative; inset: 0; width: 100%; height: 100%; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(160deg, var(--gold), #d8a534); box-shadow: var(--sh-lg); padding: 10px; display: flex; flex-direction: column; gap: 7px; } .tcg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; } .tcg-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1; } .tcg-hp { font-family: var(--font-head); font-weight: 700; font-size: .66rem; color: var(--brown); } .tcg-art { position: relative; border: 2.5px solid var(--ink); border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; background: radial-gradient(circle at 50% 40%, #fff, var(--sand-light)); display: grid; place-items: center; } .tcg-art img { width: 62%; height: auto; } .tcg-stage { position: absolute; left: 6px; bottom: 6px; font-family: var(--font-head); font-weight: 700; font-size: .58rem; background: var(--ink); color: var(--cream); padding: 2px 7px; border-radius: var(--r-full); } .tcg-body { background: var(--cream); border: 2px solid var(--ink); border-radius: 9px; padding: 7px 9px; display: flex; flex-direction: column; gap: 6px; } .tcg-move-h { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .76rem; color: var(--ink); } .tcg-move p { font-size: .66rem; color: var(--text-mid); line-height: 1.2; font-weight: 600; } .tcg-move .ti { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); flex-shrink: 0; } .ti-magic { background: var(--g-magic); } .ti-op { background: var(--g-op); } .tcg-flavor { font-size: .62rem; font-style: italic; color: var(--brown); line-height: 1.25; padding: 0 4px; } .tcg-foot { margin-top: auto; display: flex; gap: 5px; flex-wrap: wrap; padding: 0 2px; } .tcg-foot span { font-family: var(--font-head); font-weight: 700; font-size: .56rem; background: var(--ink); color: var(--cream); padding: 3px 7px; border-radius: var(--r-full); } @media (prefers-reduced-motion: reduce){ .hero-rays, .hero-sparks, .gb { animation: none !important; } .tcg-stack { transform: none !important; } } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; min-height: 420px; } } @media (max-width: 420px){ .tcg-stack { width: min(260px, 82vw); } .gb { font-size: .68rem; padding: 5px 9px; } } /* ============================================================ BENTO 3D TILT — "el giro" ============================================================ */ .bento { --px: 0; --py: 0; perspective: 1400px; } .bento-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; transform-style: preserve-3d; } .bento-card { position: relative; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh); background: var(--sand-light); transition: box-shadow .3s, border-color .3s; display: flex; flex-direction: column; gap: 10px; min-height: 190px; } .bento-card h3 { font-size: 1.18rem; } .bento-card p { color: var(--text-mid); font-size: .96rem; } .bento-card .bc-num { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--sea); line-height: 1; } .bento-card .bc-ic { width: 46px; height: 46px; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-ic); display: grid; place-items: center; box-shadow: var(--sh-sm); } .bento-card .bc-ic svg { width: 24px; height: 24px; } .bc-wide { grid-column: span 2; } .bc-sea { background: linear-gradient(155deg, var(--sea), var(--sea-deep)); color: #fff; } .bc-sea h3, .bc-sea .bc-num { color: #fff; } .bc-sea p { color: rgba(255,255,255,.9); } .bc-tan { background: linear-gradient(155deg, var(--tan), var(--brown-mid)); color: #fff; } .bc-tan h3 { color: #fff; } .bc-tan p { color: rgba(255,255,255,.92); } .bc-1 { transform: translate3d(calc(var(--px)*-14px), calc(var(--py)*-12px),0) rotateY(calc(var(--px)*7deg)) rotateX(calc(var(--py)*-6deg)); } .bc-2 { transform: translate3d(calc(var(--px)*18px), calc(var(--py)*14px),0) rotateY(calc(var(--px)*9deg)) rotateX(calc(var(--py)*-7deg)); } .bc-3 { transform: translate3d(calc(var(--px)*-10px), calc(var(--py)*9px),0) rotateY(calc(var(--px)*5deg)) rotateX(calc(var(--py)*-4deg)); } .bc-4 { transform: translate3d(calc(var(--px)*12px), calc(var(--py)*-10px),0) rotateY(calc(var(--px)*6deg)) rotateX(calc(var(--py)*-5deg)); } .bento-card:hover { box-shadow: var(--sh-lg); z-index: 3; } @media (max-width: 820px) { .bento-grid { grid-template-columns: 1fr 1fr; } .bc-wide { grid-column: span 2; } } @media (max-width: 520px) { .bento-grid { grid-template-columns: 1fr; } .bc-wide { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .bc-1,.bc-2,.bc-3,.bc-4 { transform: none !important; } } /* ============================================================ PRÓXIMO TORNEO (countdown → WhatsApp) ============================================================ */ .next-t { background: linear-gradient(160deg, var(--ink), #20140a); color: #fff; border-radius: var(--r-xl); border: var(--bw) solid var(--ink); box-shadow: var(--sh-lg); overflow: hidden; position: relative; } .next-t::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 22px 22px; pointer-events:none; } .next-t-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,48px); padding: clamp(26px,4vw,46px); position: relative; } .next-t h2 { color: #fff; } .next-t .eyebrow { color: var(--tan); } .next-t .t-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; } .next-t .t-meta .badge { background: var(--cream); } .next-t .t-game { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem,3vw,2.3rem); margin-bottom: 4px; } .next-t p.t-sub { color: rgba(255,255,255,.78); } .countdown { display: flex; gap: 10px; margin: 8px 0 4px; } .cd-cell { background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); border-radius: var(--r); padding: 12px 8px; text-align: center; min-width: 70px; } .cd-cell b { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; display: block; color: var(--gold); } .cd-cell span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); } .t-spots { margin-top: 16px; } .t-bar { height: 12px; border-radius: var(--r-full); background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2); overflow: hidden; } .t-bar i { display: block; height: 100%; background: var(--wa); } .t-spots small { color: rgba(255,255,255,.7); display: block; margin-top: 7px; font-weight: 600; } .next-t-side { display: flex; flex-direction: column; justify-content: center; gap: 14px; } @media (max-width: 760px){ .next-t-inner { grid-template-columns: 1fr; } } /* ============================================================ CALENDARIO (estilo ltk-pixel, repaletizado playa) ============================================================ */ .cal { background: var(--sand-light); border: var(--bw) solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--sh); padding: clamp(20px,3vw,38px); position: relative; overflow: hidden; } .cal::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, var(--sand-deep) 1.4px, transparent 0); background-size: 22px 22px; opacity:.5; pointer-events:none; } .cal-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: end; margin-bottom: 22px; position: relative; z-index: 2; } .cal-month { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem,3vw,2.2rem); } .cal-month span { color: var(--sea); } .cal-count { text-align: right; } .cal-count b { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem,4vw,3rem); color: var(--tan); line-height: 1; display: block; } .cal-count small { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); font-weight: 700; } .cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; position: relative; z-index: 2; } .cal-legend-title { font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--brown); margin-right: 4px; } .cal-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: var(--text-mid); } .cal-legend i { width: 16px; height: 12px; border-radius: 4px; border: 1.5px solid var(--ink); } .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; position: relative; z-index: 2; } .cal-dow { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brown-mid); padding-bottom: 4px; } .cal-cell { min-height: 90px; border: 2px solid var(--sand-deep); border-radius: var(--r-sm); background: var(--cream); padding: 7px; display: flex; flex-direction: column; gap: 4px; position: relative; transition: transform .12s, box-shadow .12s; } .cal-cell .d { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--text-mid); } .cal-cell.today { border-color: var(--sea); box-shadow: var(--sh-sm); } .cal-cell.today .d { color: var(--sea); } .cal-cell.has-ev { cursor: pointer; } .cal-cell.has-ev:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); } .cal-cell.closed { background: repeating-linear-gradient(45deg, var(--sand-light) 0 7px, var(--sand) 7px 14px); } .cal-ev { font-family: var(--font-head); font-weight: 600; font-size: .66rem; line-height: 1.12; padding: 4px 6px; border-radius: 7px; color: var(--ink); border: 1.5px solid rgba(58,36,18,.35); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .cal-closed { font-family: var(--font-head); font-weight: 700; font-size: .68rem; color: var(--brown); opacity: .65; margin-top: auto; } .cal-note { font-size: .62rem; font-style: italic; font-weight: 600; color: var(--brown-mid); line-height: 1.15; } .cal-foot { margin-top: 14px; font-size: .68rem; font-style: italic; color: var(--text-soft); position: relative; z-index: 2; max-width: 640px; } /* 3 próximos torneos */ .next-head { text-align: center; margin: clamp(34px,5vw,54px) 0 22px; scroll-margin-top: 90px; } .next-head .h-2 { margin-bottom: 6px; } .next-head p { color: var(--text-mid); font-weight: 500; } .next-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .nt-card { position: relative; background: var(--sand-light); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 20px; display: flex; flex-direction: column; gap: 9px; border-top: 7px solid var(--tc); transition: transform .14s, box-shadow .14s; } .nt-card:hover { transform: translate(-1px,-3px); box-shadow: var(--sh); } .nt-card--next { box-shadow: var(--sh); } .nt-flag { position: absolute; top: -13px; left: 16px; background: var(--tc); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .66rem; padding: 4px 11px; border: 2px solid var(--ink); border-radius: var(--r-full); } .nt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nt-game { font-family: var(--font-head); font-weight: 600; font-size: .76rem; color: var(--tc); } .nt-fee { font-family: var(--font-head); font-weight: 700; font-size: .68rem; background: var(--ink); color: var(--cream); padding: 3px 9px; border-radius: var(--r-full); } .nt-name { font-size: 1.18rem; } .nt-date { font-size: .84rem; color: var(--text-mid); font-weight: 600; } .nt-count { display: flex; gap: 10px; margin-top: 2px; } .nt-cd { font-size: .72rem; font-weight: 700; color: var(--text-mid); } .nt-cd b { font-family: var(--font-head); font-size: 1.25rem; color: var(--ink); margin-right: 2px; } .nt-bar { height: 9px; border-radius: var(--r-full); background: var(--sand-deep); border: 2px solid var(--ink); overflow: hidden; } .nt-bar i { display: block; height: 100%; width: 0; background: var(--tc); transition: width 1s linear; } .nt-card .btn { margin-top: 4px; } @media (max-width: 820px){ .next-grid { grid-template-columns: 1fr; } } @media (max-width: 680px){ .cal-head { grid-template-columns: 1fr auto; } .cal-cell { min-height: 70px; padding: 4px; border-radius: 7px; } .cal-cell .d { font-size: .76rem; } .cal-ev { font-size: .55rem; padding: 2px 4px; -webkit-line-clamp: 3; } .cal-dow { font-size: .6rem; } } @media (max-width: 460px){ /* scroll horizontal: el calendario no se aplasta, se desliza */ .cal { overflow-x: auto; } .cal-grid { min-width: 540px; } } /* ============================================================ ELIGE TU JUEGO — flip cards ============================================================ */ .games-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; } .flip { perspective: 1200px; aspect-ratio: 3/4.2; } .flip-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,.1,.2,1); transform-style: preserve-3d; } .flip:hover .flip-inner, .flip:focus-within .flip-inner, .flip.flipped .flip-inner { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-sm); display: flex; flex-direction: column; padding: 18px; overflow: hidden; } .flip-front { align-items: center; justify-content: center; text-align: center; gap: 12px; color: #fff; position: relative; width: 100%; cursor: pointer; font: inherit; } .flip-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34)); pointer-events: none; } .flip-front > * { position: relative; z-index: 1; } .flip-front .gm-ic { width: 60px; height: 60px; border: 2.5px solid rgba(255,255,255,.6); border-radius: var(--r-ic); display: grid; place-items: center; background: rgba(255,255,255,.14); } .flip-front .gm-ic svg { width: 32px; height: 32px; } .flip-front h3 { color: #fff; font-size: 1.16rem; } .flip-front .gm-status { font-size: .72rem; font-weight: 700; background: rgba(0,0,0,.22); padding: 4px 10px; border-radius: var(--r-full); border: 1.5px solid rgba(255,255,255,.4); } .flip-front .gm-hint { position: absolute; bottom: 12px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .flip-back { transform: rotateY(180deg); background: var(--sand-light); justify-content: space-between; gap: 8px; } .flip-back h4 { font-size: 1.02rem; } .flip-back ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .flip-back li { font-size: .82rem; font-weight: 600; color: var(--text-mid); padding-left: 18px; position: relative; line-height: 1.3; } .flip-back li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--g); border: 1.5px solid var(--ink); } @media (max-width: 900px){ .games-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 560px){ .games-grid { grid-template-columns: 1fr 1fr; } .flip { aspect-ratio: 3/4; } } /* ============================================================ COMUNIDADES por juego / canal ============================================================ */ .comm-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .comm-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--sand-light); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform .14s, box-shadow .14s; } .comm-card:hover { transform: translate(-1px,-3px); box-shadow: var(--sh); } .comm-top { display: flex; align-items: center; gap: 12px; } .comm-ic { width: 48px; height: 48px; border: var(--bw-sm) solid var(--ink); border-radius: var(--r-ic); display: grid; place-items: center; box-shadow: var(--sh-sm); flex-shrink: 0; color: #fff; } .comm-ic svg { width: 26px; height: 26px; } .comm-card h3 { font-size: 1.1rem; } .comm-card .comm-meta { font-size: .78rem; font-weight: 700; color: var(--wa-deep); display: inline-flex; align-items: center; gap: 6px; } .comm-card .comm-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 3px rgba(37,211,102,.25); } .comm-card p { font-size: .9rem; color: var(--text-mid); flex: 1; } .comm-actions { display: flex; gap: 8px; flex-wrap: wrap; } .comm-banner { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; background: linear-gradient(150deg, var(--sea), var(--sea-deep)); color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh); } .comm-banner h3 { color: #fff; font-size: 1.3rem; } .comm-banner p { color: rgba(255,255,255,.9); font-size: .92rem; } @media (max-width: 820px){ .comm-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px){ .comm-grid { grid-template-columns: 1fr; } } /* ============================================================ MÁS ALLÁ DE LAS CARTAS — merch grid (fotos reales) ============================================================ */ .merch-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .merch-card { position: relative; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; background: var(--cream); transition: transform .14s, box-shadow .14s; aspect-ratio: 1; } .merch-card:hover { transform: translate(-1px,-3px); box-shadow: var(--sh); } .merch-card img { width: 100%; height: 100%; object-fit: cover; } .merch-ph { width:100%; height:100%; display:grid; place-items:center; background: repeating-linear-gradient(135deg, var(--sand-light) 0 14px, var(--sand-deep) 14px 28px); } .merch-ph span { font-family: var(--font-head); font-weight: 600; font-size: .7rem; color: var(--text-soft); border: 2px dashed var(--text-soft); padding: 6px 10px; border-radius: var(--r-sm); } .merch-cap { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .merch-cap b { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: #fff; background: rgba(58,36,18,.82); padding: 5px 11px; border-radius: var(--r-full); border: 2px solid var(--ink); } .merch-cap em { font-style: normal; font-size: .68rem; font-weight: 700; background: var(--brown); color: #fff; padding: 4px 9px; border-radius: var(--r-full); border: 2px solid var(--ink); } .merch-feature { grid-column: span 2; grid-row: span 2; } .merch-note { margin-top: 16px; font-size: .85rem; color: var(--text-soft); display: flex; align-items: center; gap: 8px; font-weight: 600; } .pending-note { margin-top: 16px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--text-soft); } @media (max-width: 880px){ .merch-grid { grid-template-columns: repeat(2,1fr); } .merch-feature { grid-column: span 2; grid-row: auto; aspect-ratio: 2/1; } } @media (max-width: 480px){ .merch-grid { grid-template-columns: 1fr 1fr; } .merch-feature { grid-column: span 2; } } /* ============================================================ VISITA / mapa ============================================================ */ .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } .visit-info { display: flex; flex-direction: column; gap: 14px; } .visit-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--sand-light); border: var(--bw-sm) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-sm); } .visit-row .vic { width: 38px; height: 38px; flex-shrink: 0; border: 2px solid var(--ink); border-radius: var(--r-ic); display: grid; place-items: center; background: var(--sea-wash); } .visit-row .vic svg { width: 20px; height: 20px; color: var(--sea-deep); } .visit-row b { font-family: var(--font-head); font-weight: 600; display: block; } .visit-row span { font-size: .9rem; color: var(--text-mid); } .hours-tab { list-style: none; } .hours-tab li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1.5px dashed var(--sand-deep); font-size: .9rem; } .hours-tab li.today { font-weight: 800; color: var(--sea-deep); } .hours-tab li.closed span { color: #c0392b; font-weight: 700; } .map-wrap { border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; min-height: 340px; } .map-wrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: saturate(1.05); } @media (max-width: 820px){ .visit-grid { grid-template-columns: 1fr; } } /* ============================================================ REVIEWS strip ============================================================ */ /* carrusel que gira (auto-scroll continuo, pausa en hover) */ .rev-grid { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .rev-track { display: inline-flex; gap: 16px; will-change: transform; animation: revscroll 55s linear infinite; } .rev-grid:hover .rev-track { animation-play-state: paused; } .rev { flex: 0 0 clamp(280px, 32vw, 360px); padding: 20px; background: var(--cream); border: var(--bw-sm) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 10px; white-space: normal; } .rev .stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; } .rev p { font-size: .9rem; color: var(--text-mid); } .rev b { font-family: var(--font-head); font-size: .92rem; } .rev small { color: var(--text-soft); font-weight: 600; } @keyframes revscroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .rev-track { animation: none; flex-wrap: wrap; justify-content: center; } } /* ============================================================ FOOTER ============================================================ */ .foot { background: var(--ink); color: #f6e5cf; border-top: var(--bw) solid var(--ink); } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-block: clamp(40px,6vw,64px); } .foot h4 { color: var(--tan); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; } .foot a, .foot p { color: rgba(246,229,207,.82); font-size: .9rem; display: block; padding: 4px 0; } .foot a { display: inline-flex; align-items: center; min-height: 40px; } .foot a:hover { color: #fff; } .foot-brand { color: #fff; margin-bottom: 12px; min-height: auto; } .foot-brand img { width: 56px; height: 56px; } .foot-brand small { color: var(--tan); } .foot-social { display: flex; gap: 10px; margin-top: 14px; } .foot-social a { width: 44px; height: 44px; min-height: 44px; border: 2px solid rgba(246,229,207,.3); border-radius: 11px; display: grid; place-items: center; } .foot-social a:hover { background: rgba(246,229,207,.1); } .foot-social svg { width: 20px; height: 20px; } .foot-press { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 0; border-top: 1.5px solid rgba(246,229,207,.16); } .foot-press-l { font-family: var(--font-head); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tan); } .foot-press-item { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: rgba(246,229,207,.78); } .foot-bottom { border-top: 1.5px solid rgba(246,229,207,.16); padding: 18px 0; font-size: .8rem; color: rgba(246,229,207,.72); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } @media (max-width: 760px){ .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 440px){ .foot-grid { grid-template-columns: 1fr; } } /* WhatsApp floating (izquierda) */ .wa-float { position: fixed; left: 18px; bottom: 18px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); border: var(--bw) solid var(--ink); box-shadow: var(--sh); display: grid; place-items: center; transition: transform .14s; } .wa-float:hover { transform: scale(1.06) translate(1px,1px); box-shadow: var(--sh-press); } .wa-float svg { width: 30px; height: 30px; color: #06351c; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* stagger de hijos en grids al revelar */ .reveal.stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .reveal.stagger.in > * { opacity: 1; transform: none; } .reveal.stagger.in > *:nth-child(1){ transition-delay: .04s; } .reveal.stagger.in > *:nth-child(2){ transition-delay: .10s; } .reveal.stagger.in > *:nth-child(3){ transition-delay: .16s; } .reveal.stagger.in > *:nth-child(4){ transition-delay: .22s; } .reveal.stagger.in > *:nth-child(5){ transition-delay: .28s; } .reveal.stagger.in > *:nth-child(6){ transition-delay: .34s; } .reveal.stagger.in > *:nth-child(7){ transition-delay: .40s; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } .reveal, .reveal.stagger > * { opacity: 1; transform: none; transition: none; } .flip-inner { transition: none; } .comm-card, .merch-card, .cal-cell, .wa-float, .btn { transition: none; } .comm-card:hover, .merch-card:hover, .cal-cell:hover, .wa-float:hover, .btn:hover, .btn:active { transform: none; } }