/* Tu Puedes TV — teletext/CRT-broadcast archetype v2. Self-hosted fonts, no Tailwind, no runtime icon CDN. */

@font-face {
  font-family: 'TPTPixel';
  src: url('../fonts/press-start-2p-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TPTScreen';
  src: url('../fonts/silkscreen-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TPTScreen';
  src: url('../fonts/silkscreen-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --tpt-blue:#0000FF;
  --tpt-red:#FF0000;
  --tpt-green:#00FF00;
  --tpt-yellow:#FFFF00;
  --tpt-magenta:#FF00FF;
  --tpt-cyan:#00FFFF;
  --tpt-black:#000000;
  --tpt-white:#FFFFFF;
  --tv-shell:#0000B3;
  --tv-shell-light:#3333FF;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body.tpt{
  background:var(--tpt-black);
  color:var(--tpt-white);
  font-family:'TPTScreen',cursive;
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
.tpt-pixel{font-family:'TPTPixel',cursive;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.tpt-wrap{max-width:1320px;margin:0 auto;padding:0 24px;}
button{font-family:inherit;cursor:pointer;}

/* CRT scanline overlay */
.tpt-scanline{
  position:fixed;inset:0;pointer-events:none;z-index:100;
  background:
    linear-gradient(to bottom, rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%),
    linear-gradient(90deg, rgba(255,0,0,.05), rgba(0,255,0,.02), rgba(0,0,255,.05));
  background-size:100% 4px, 3px 100%;
}
.tpt-flicker{animation:tpt-flicker .13s infinite;}
@keyframes tpt-flicker{0%{opacity:.99;}50%{opacity:1;}100%{opacity:.98;}}
.tpt-blink{animation:tpt-blink-anim 1s step-end infinite;}
@keyframes tpt-blink-anim{50%{visibility:hidden;}}

/* Channel-tune flash: fired by JS on any in-page nav click, so every
   nav button gives visible feedback even when the scroll distance is ~0.
   Uses filter (contained within the element's own box) rather than
   box-shadow, which gets clipped when the target sits flush at the very
   top of the document (no room for an outer ring to render). */
.tpt-tune-pulse{animation:tpt-tune-pulse .5s steps(3,end);}
@keyframes tpt-tune-pulse{
  0%,70%{filter:invert(1) brightness(1.3);}
  100%{filter:none;}
}

.screen-reader-text{position:absolute;left:-9999px;}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:200;background:var(--tpt-yellow);color:var(--tpt-black);padding:8px 16px;}

/* 1. Status bar + marquee ticker */
.tpt-statusbar{background:var(--tpt-black);border-bottom:4px solid var(--tpt-white);padding:10px 24px;display:flex;align-items:center;gap:24px;font-size:11px;}
.tpt-statusbar .tpt-sb-brand{color:var(--tpt-yellow);flex-shrink:0;}
.tpt-statusbar #tpt-clock{color:var(--tpt-cyan);flex-shrink:0;}
.tpt-marquee-outer{flex:1;overflow:hidden;position:relative;height:16px;}
.tpt-marquee-track{position:absolute;white-space:nowrap;display:flex;gap:64px;animation:tpt-marquee-scroll 26s linear infinite;}
.tpt-marquee-track span{color:var(--tpt-green);}
@keyframes tpt-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* 2. Header: logo + nav */
.tpt-header{background:var(--tpt-blue);border-bottom:4px solid var(--tpt-white);position:relative;z-index:20;}
.tpt-header-in{max-width:1320px;margin:0 auto;padding:16px 24px 40px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.tpt-brand{display:flex;align-items:center;gap:16px;}
.tpt-logo-tv{border:2px solid var(--tpt-white);flex-shrink:0;image-rendering:auto;}
.tpt-brand-text{display:flex;flex-direction:column;line-height:1;}
.tpt-brand-text .tpt-wm{font-size:22px;letter-spacing:-0.02em;}
.tpt-brand-text .tpt-tv-tag{background:var(--tpt-black);color:var(--tpt-white);padding:2px 4px;margin-top:4px;font-size:9px;width:fit-content;}

.tpt-nav{display:flex;align-items:center;gap:4px;font-size:10px;position:relative;z-index:30;transform:translateY(28px);}
.tpt-nav .tpt-nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.tpt-nav a{background:var(--tpt-black);padding:12px;border:2px solid var(--tpt-white);white-space:nowrap;display:block;transition:background-color .15s ease,color .15s ease;}
.tpt-nav-magenta{color:var(--tpt-magenta);}
.tpt-nav-green{color:var(--tpt-green);}
.tpt-nav-yellow{color:var(--tpt-yellow);}
.tpt-nav-cyan{color:var(--tpt-cyan);}
.tpt-nav-magenta:hover,.tpt-nav-magenta:focus-visible{background:var(--tpt-magenta);color:var(--tpt-black);}
.tpt-nav-green:hover,.tpt-nav-green:focus-visible{background:var(--tpt-green);color:var(--tpt-black);}
.tpt-nav-yellow:hover,.tpt-nav-yellow:focus-visible{background:var(--tpt-yellow);color:var(--tpt-black);}
.tpt-nav-cyan:hover,.tpt-nav-cyan:focus-visible{background:var(--tpt-cyan);color:var(--tpt-black);}
.tpt-nav a:active{transform:translateY(1px);}
.tpt-burger{display:none;background:var(--tpt-black);border:2px solid var(--tpt-white);padding:10px 14px;color:var(--tpt-white);font-size:10px;}
@media (max-width:920px){
  .tpt-nav{display:none;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:24px;right:24px;background:var(--tpt-blue);border:4px solid var(--tpt-white);padding:16px;transform:none;z-index:40;}
  .tpt-nav .tpt-nav-list{flex-direction:column;align-items:stretch;}
  .tpt-nav a{text-align:center;}
  .tpt-nav.tpt-nav-open{display:flex;}
  .tpt-burger{display:block;}
}

/* 3. HERO — CRT TV set as framing device */
.tpt-hero{background:var(--tpt-magenta);padding:56px 24px 72px;position:relative;overflow:visible;}
.tpt-hero-board{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:start;}
@media (min-width:980px){.tpt-hero-board{grid-template-columns:7fr 3fr;}}

.tpt-tv-set{
  position:relative;
  background:linear-gradient(155deg,var(--tv-shell-light),var(--tv-shell) 60%);
  border:6px solid var(--tpt-black);
  border-radius:28px 28px 14px 14px;
  padding:28px 28px 44px;
  box-shadow:0 18px 0 rgba(0,0,0,.35);
}
.tpt-tv-antenna{position:absolute;top:-70px;right:56px;width:110px;height:78px;pointer-events:none;z-index:5;}
.tpt-tv-antenna .a1,.tpt-tv-antenna .a2{position:absolute;bottom:0;width:7px;height:72px;background:linear-gradient(var(--tv-shell-light),var(--tv-shell));border-radius:3px;transform-origin:bottom center;border:1px solid #000;}
.tpt-tv-antenna .a1{left:40px;transform:rotate(-28deg);}
.tpt-tv-antenna .a2{left:52px;transform:rotate(22deg);}
.tpt-tv-antenna .a1::after,.tpt-tv-antenna .a2::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--tv-shell-light);border:2px solid #000;}
.tpt-tv-antenna-base{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:36px;height:14px;background:var(--tv-shell-light);border:2px solid #000;border-radius:6px 6px 0 0;}
.tpt-tv-lights{position:absolute;top:14px;left:24px;display:flex;gap:10px;align-items:center;z-index:5;}
.tpt-tv-light{width:9px;height:9px;border-radius:50%;}
.tpt-tv-light.rec{background:var(--tpt-red);animation:tpt-blink-anim .9s step-end infinite;}
.tpt-tv-light.pwr{background:var(--tpt-green);box-shadow:0 0 6px var(--tpt-green);}
.tpt-tv-light-label{font-size:8px;color:#cfcfff;}
.tpt-tv-knobs{position:absolute;top:20px;right:22px;display:flex;gap:16px;z-index:5;}
.tpt-tv-knob{width:30px;height:30px;border-radius:50%;background:var(--tpt-yellow);border:4px solid #000;position:relative;overflow:hidden;box-shadow:0 3px 4px rgba(0,0,0,.45);}
.tpt-tv-knob::after{content:"";position:absolute;top:50%;left:50%;width:160%;height:4px;background:#000;transform:translate(-50%,-50%) rotate(45deg);}
.tpt-tv-plate{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:8px;color:#cfcfff;letter-spacing:2px;}

.tpt-tv-screen{
  position:relative;
  margin-top:60px;
  background:var(--tpt-black);
  border:5px solid #000;
  border-radius:10px;
  padding:32px;
  overflow:hidden;
  box-shadow:inset 0 0 0 4px #050505, inset 0 0 60px 18px rgba(0,0,0,.85);
}
.tpt-tv-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(18,16,16,0) 50%, rgba(0,0,0,.3) 50%);
  background-size:100% 100%, 100% 4px;
}
.tpt-live-tag{display:flex;align-items:center;gap:14px;color:var(--tpt-green);font-size:13px;margin-bottom:28px;position:relative;z-index:2;}
.tpt-score-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;margin-bottom:20px;position:relative;z-index:2;min-width:0;}
.tpt-team-block{text-align:center;min-width:0;}
.tpt-team-block .tpt-icon-box{padding:18px;margin-bottom:12px;border:4px solid var(--tpt-white);display:flex;align-items:center;justify-content:center;}
.tpt-team-block .tpt-icon-box svg{max-width:100%;height:auto;}
.tpt-team-block p{font-size:11px;color:var(--tpt-white);font-family:'TPTPixel',cursive;}
.tpt-score-center{text-align:center;padding:0 20px;background:var(--tpt-red);border-left:4px solid var(--tpt-white);border-right:4px solid var(--tpt-white);min-width:0;}
.tpt-score-center .tpt-score-num{font-size:44px;color:var(--tpt-white);line-height:1;font-family:'TPTPixel',cursive;padding:12px 0;}
.tpt-score-illustrative{font-size:8px;color:var(--tpt-black);background:var(--tpt-yellow);display:inline-block;padding:2px 6px;margin-top:6px;}

.tpt-arcade-track{position:relative;height:38px;margin-bottom:24px;border-bottom:2px dashed rgba(255,255,255,.35);z-index:2;}
.tpt-arcade-sprite{position:absolute;bottom:0;left:0;width:30px;height:30px;animation:tpt-sprite-dribble 5.4s linear infinite;}
.tpt-arcade-sprite svg{width:100%;height:100%;display:block;}
@keyframes tpt-sprite-dribble{
  0%  {left:0;    transform:translateY(0);    opacity:1;}
  5%  {left:0;    transform:translateY(-26px);opacity:1;}
  10% {left:16%;  transform:translateY(0);    opacity:1;}
  13% {left:16%;  transform:translateY(0);    opacity:1;}
  18% {left:16%;  transform:translateY(-26px);opacity:1;}
  23% {left:32%;  transform:translateY(0);    opacity:1;}
  26% {left:32%;  transform:translateY(0);    opacity:1;}
  31% {left:32%;  transform:translateY(-26px);opacity:1;}
  36% {left:48%;  transform:translateY(0);    opacity:1;}
  39% {left:48%;  transform:translateY(0);    opacity:1;}
  44% {left:48%;  transform:translateY(-26px);opacity:1;}
  49% {left:64%;  transform:translateY(0);    opacity:1;}
  52% {left:64%;  transform:translateY(0);    opacity:1;}
  57% {left:64%;  transform:translateY(-20px);opacity:1;}
  62% {left:80%;  transform:translateY(0);    opacity:1;}
  65% {left:80%;  transform:translateY(0);    opacity:1;}
  70% {left:80%;  transform:translateY(-16px);opacity:1;}
  75% {left:calc(100% - 30px); transform:translateY(0); opacity:1;}
  84% {left:calc(100% - 30px); transform:translateY(0); opacity:1;}
  89% {left:calc(100% - 30px); transform:translateY(0); opacity:0;}
  91% {left:0;    transform:translateY(0);    opacity:0;}
  95% {left:0;    transform:translateY(0);    opacity:1;}
  100%{left:0;    transform:translateY(0);    opacity:1;}
}
.tpt-hero-headline{font-family:'TPTPixel',cursive;font-size:20px;color:var(--tpt-yellow);margin-bottom:24px;line-height:1.5;position:relative;z-index:2;}
.tpt-post-title{font-family:'TPTPixel',cursive;font-size:20px;line-height:1.5;}
.tpt-hero-actions{display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:2;}
.tpt-btn{padding:14px 26px;font-size:11px;border:4px solid var(--tpt-white);font-family:'TPTPixel',cursive;background:none;color:var(--tpt-white);display:inline-block;}
.tpt-btn-watch{background:var(--tpt-green);color:var(--tpt-black);}
.tpt-btn-watch:hover{background:var(--tpt-white);}

/* --- scattered "next up" cards beside the TV set --- */
.tpt-stacked-cards{display:flex;flex-direction:column;gap:22px;padding-top:24px;}
.tpt-scard{background:var(--tpt-cyan);color:var(--tpt-black);border:4px solid var(--tpt-black);padding:18px;box-shadow:6px 6px 0 rgba(0,0,0,.4);}
.tpt-scard:nth-child(1){transform:rotate(-3deg);margin-left:0;}
.tpt-scard:nth-child(2){transform:rotate(2deg);margin-left:28px;background:var(--tpt-yellow);}
.tpt-scard:nth-child(3){transform:rotate(-1.5deg);margin-left:8px;background:var(--tpt-white);}
.tpt-scard .tpt-next-meta{font-size:9px;font-family:'TPTPixel',cursive;margin-bottom:8px;}
.tpt-scard .tpt-next-title{font-weight:700;font-size:16px;}

/* 4. Secondary ticker strip below hero */
.tpt-ticker-strip{background:var(--tpt-black);border-bottom:4px solid var(--tpt-white);padding:14px 0;overflow:hidden;}
.tpt-ticker-strip .tpt-marquee-track{animation-duration:32s;gap:80px;}
.tpt-ticker-strip .tpt-marquee-track span{color:var(--tpt-white);font-size:13px;font-family:'TPTPixel',cursive;}
.tpt-ticker-strip .tpt-marquee-track span b{color:var(--tpt-yellow);}

/* 5. Mission / editorial text-page */
.tpt-mission{background:var(--tpt-black);padding:64px 24px;border-bottom:4px solid var(--tpt-white);}
.tpt-mission-layout{display:flex;gap:0;align-items:stretch;flex-wrap:wrap;}
.tpt-mission-frame{flex:1 1 480px;min-width:300px;border:4px solid var(--tpt-white);padding:40px;border-left:8px solid var(--tpt-yellow);}
.tpt-mission-photo{flex:1 1 300px;max-width:45%;min-width:0;min-height:340px;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08);border:4px solid var(--tpt-white);position:relative;overflow:hidden;}
.tpt-mission-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 55%),repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);}
.tpt-mission-photo-tag{position:absolute;left:20px;bottom:20px;z-index:2;font-family:'TPTPixel',cursive;font-size:9px;color:var(--tpt-yellow);}
.tpt-mission-head{display:flex;gap:24px;font-size:10px;color:var(--tpt-cyan);margin-bottom:28px;font-family:'TPTPixel',cursive;}
.tpt-mission h2{font-family:'TPTPixel',cursive;font-size:19px;color:var(--tpt-yellow);margin-bottom:28px;line-height:1.6;}
.tpt-mission p{font-size:15px;line-height:1.85;margin-bottom:20px;max-width:660px;}
.tpt-mission p:last-child{margin-bottom:0;}
.tpt-mission strong{color:var(--tpt-cyan);}

/* 6. Disciplines — bento grid */
.tpt-disciplines{background:var(--tpt-black);padding:64px 24px;border-bottom:4px solid var(--tpt-white);}
.tpt-disciplines h2{font-family:'TPTPixel',cursive;font-size:18px;color:var(--tpt-white);margin-bottom:32px;text-decoration:underline;}
.tpt-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:14px;}
@media (max-width:760px){.tpt-bento{grid-template-columns:repeat(2,1fr);}}
.tpt-bento-tile{border:4px solid var(--tpt-white);position:relative;overflow:hidden;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08);}
.tpt-bento-tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.8) 100%),repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);}
.tpt-bento-tile .tpt-tab{position:absolute;top:0;left:0;z-index:2;padding:5px 10px;font-family:'TPTPixel',cursive;font-size:8px;}
.tpt-bento-tile .tpt-name{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-family:'TPTPixel',cursive;font-size:11px;color:var(--tpt-white);line-height:1.5;}
.tpt-b-basket{grid-column:span 2;grid-row:span 2;}
.tpt-b-basket .tpt-name{font-size:14px;}
.tpt-b-basket .tpt-tab{background:var(--tpt-blue);color:var(--tpt-white);}
.tpt-b-rugby{grid-column:span 2;}
.tpt-b-rugby .tpt-tab{background:var(--tpt-green);color:var(--tpt-black);}
.tpt-b-padel .tpt-tab{background:var(--tpt-magenta);color:var(--tpt-white);}
.tpt-b-swim .tpt-tab{background:var(--tpt-cyan);color:var(--tpt-black);}
.tpt-b-boccia{grid-column:span 2;}
.tpt-b-boccia .tpt-tab{background:var(--tpt-yellow);color:var(--tpt-black);}

/* 7. Tournament hubs — scattered circular badges */
.tpt-hubs{background:var(--tpt-blue);padding:64px 24px;border-bottom:4px solid var(--tpt-white);}
.tpt-hubs h2{font-family:'TPTPixel',cursive;font-size:18px;color:var(--tpt-white);margin-bottom:40px;text-decoration:underline;}
.tpt-hub-row{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.tpt-hub-badge{border-radius:50%;border:5px solid var(--tpt-white);display:flex;align-items:flex-end;justify-content:center;text-align:center;font-family:'TPTPixel',cursive;padding:14px;position:relative;overflow:hidden;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08);}
.tpt-hub-badge::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 32%, rgba(0,0,0,0) 28%, rgba(0,0,0,.88) 100%);}
.tpt-hub-badge span{position:relative;z-index:2;font-size:10px;line-height:1.4;color:var(--tpt-white);}
.tpt-hub-badge.big{width:170px;height:170px;border-color:var(--tpt-red);}
.tpt-hub-badge.mid{width:128px;height:128px;border-color:var(--tpt-magenta);align-self:flex-start;margin-top:20px;}
.tpt-hub-badge.sml{width:104px;height:104px;border-color:var(--tpt-green);align-self:flex-end;}

/* 8. Schedule — featured photo + inset teletext page-frame */
.tpt-schedule{background:var(--tpt-black);padding:64px 24px;border-bottom:4px solid var(--tpt-white);}
.tpt-schedule-row{display:flex;max-width:1320px;margin:0 auto;flex-wrap:wrap;}
.tpt-schedule-feature{flex:1 1 300px;min-height:300px;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08);border:4px solid var(--tpt-white);border-right:0;position:relative;overflow:hidden;display:flex;align-items:flex-end;}
.tpt-schedule-feature::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 60%);}
.tpt-schedule-feature-tag{position:relative;z-index:2;font-family:'TPTPixel',cursive;font-size:10px;color:var(--tpt-yellow);padding:20px;line-height:1.7;}
.tpt-sched-frame{flex:2 1 640px;max-width:980px;display:flex;border:4px solid var(--tpt-white);}
.tpt-sched-body{flex:1;overflow-x:auto;}
.tpt-sched-body table{width:100%;border-collapse:collapse;font-size:11px;font-family:'TPTPixel',cursive;white-space:nowrap;}
.tpt-sched-body thead th{color:var(--tpt-cyan);padding:18px;border-bottom:4px solid var(--tpt-white);text-align:left;}
.tpt-sched-body td{padding:18px;border-bottom:2px solid var(--tpt-white);}
.tpt-sched-body tr:last-child td{border-bottom:0;}
.tpt-sched-body tr.tpt-row-alt{background:var(--tpt-white);color:var(--tpt-black);}
/* P40x tab is a real table cell (not a parallel flex column) so its row
   boundary is always pixel-identical to the data row next to it. */
.tpt-sched-tab-head{background:var(--tpt-yellow);border-right:4px solid var(--tpt-white);padding:0 !important;width:1%;}
.tpt-sched-body td.tpt-sched-tab{background:var(--tpt-yellow) !important;color:var(--tpt-black);text-align:center;font-size:9px;border-right:4px solid var(--tpt-white);white-space:nowrap;width:1%;}
.tpt-sched-thumb{padding:8px !important;width:56px;}
.tpt-sched-thumb img{width:48px;height:48px;object-fit:cover;filter:grayscale(1) contrast(1.08);border:2px solid var(--tpt-white);display:block;}
.tpt-sched-body tr.tpt-row-alt .tpt-sched-thumb img{border-color:var(--tpt-black);}
.tpt-day-sab{color:var(--tpt-red);}
.tpt-day-lun{color:var(--tpt-green);}
.tpt-day-mar{color:var(--tpt-yellow);}
.tpt-sched-body tr.tpt-row-alt .tpt-day-sab,.tpt-sched-body tr.tpt-row-alt .tpt-day-lun,.tpt-sched-body tr.tpt-row-alt .tpt-day-mar{filter:none;}

/* 9. Clubs — one large featured + smaller siblings */
.tpt-clubs{background:var(--tpt-magenta);padding:72px 24px;}
.tpt-clubs h2{font-family:'TPTPixel',cursive;font-size:18px;color:var(--tpt-black);margin-bottom:40px;text-decoration:underline;}
.tpt-club-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:860px){.tpt-club-grid{grid-template-columns:1.6fr 1fr 1fr;}}
.tpt-club-tile{background:var(--tpt-black);border:4px solid var(--tpt-white);padding:26px;}
.tpt-club-tile.tpt-featured{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.tpt-club-tile.tpt-featured .tpt-icon-box{width:150px;height:150px;flex-shrink:0;}
.tpt-club-tile.tpt-featured > div:last-child{min-width:0;flex:1 1 200px;}
.tpt-club-tile .tpt-icon-box{border-width:4px;border-style:solid;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08);position:relative;width:100%;aspect-ratio:1;margin-bottom:16px;overflow:hidden;}
.tpt-club-tile .tpt-icon-box::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);}
.tpt-club-tile.tpt-featured .tpt-icon-box{margin-bottom:0;}
.tpt-club-tile h3{font-family:'TPTPixel',cursive;font-size:13px;margin-bottom:10px;}
.tpt-club-tile.tpt-featured h3{font-size:16px;}
.tpt-club-tile p{font-size:12px;line-height:1.6;margin-bottom:14px;}
.tpt-club-tile a{font-family:'TPTPixel',cursive;font-size:9px;color:var(--tpt-cyan);}
.tpt-club-tile a:hover{text-decoration:underline;}

/* Static pages / long-form content */
/* padding-top/bottom only (not shorthand `padding`) — this class always
   pairs with .tpt-wrap on the same element, and a shorthand here would
   zero out .tpt-wrap's side padding wherever no inline override masks it. */
.tpt-article{padding-top:32px;padding-bottom:64px;}
/* Centered "text page" frame — long-form prose left unconstrained in a wide
   section otherwise sits flush-left with a huge dead void beside it. */
.tpt-prose-frame{max-width:1160px;margin:0 auto;border:4px solid var(--tpt-white);border-left:8px solid var(--tpt-yellow);padding:40px;}
.tpt-prose-frame .tpt-prose{max-width:none;}
.tpt-prose{font-size:15px;line-height:1.7;max-width:640px;}
.tpt-prose h2,.tpt-prose h3{font-family:'TPTPixel',cursive;color:var(--tpt-yellow);margin:32px 0 16px;font-size:16px;line-height:1.4;}
.tpt-prose p{margin:0 0 16px;}
.tpt-prose a{color:var(--tpt-cyan);text-decoration:underline;}
.tpt-prose ul,.tpt-prose ol{margin:0 0 16px;padding-left:24px;}

/* FAQ (details/summary) */
.tpt-faq-item{border-bottom:2px solid var(--tpt-white);padding:16px 0;}
.tpt-faq-item summary{cursor:pointer;font-family:'TPTPixel',cursive;font-size:13px;color:var(--tpt-yellow);list-style:none;}
.tpt-faq-item summary::-webkit-details-marker{display:none;}
.tpt-faq-item summary::before{content:"+ ";color:var(--tpt-green);}
.tpt-faq-item[open] summary::before{content:"- ";}
.tpt-faq-item p{margin:12px 0 0;font-size:14px;line-height:1.6;}

/* 10. Footer */
.tpt-footer{background:var(--tpt-black);color:var(--tpt-white);padding:56px 24px 28px;border-top:8px solid var(--tpt-white);margin-top:auto;}
.tpt-footer-in{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:40px;font-size:12px;font-family:'TPTPixel',cursive;}
@media (min-width:768px){.tpt-footer-in{flex-direction:row;justify-content:space-between;align-items:flex-start;}}
.tpt-footer-brand{display:flex;align-items:center;gap:12px;background:var(--tpt-red);padding:8px;border:2px solid var(--tpt-white);width:fit-content;color:inherit;text-decoration:none;}
.tpt-footer-brand:hover,.tpt-footer-brand:focus-visible{background:var(--tpt-white);color:var(--tpt-red);}
.tpt-footer-tagline{color:var(--tpt-cyan);margin-top:20px;font-size:10px;}
.tpt-footer-social{display:flex;gap:16px;margin-top:24px;}
.tpt-footer-social svg{width:24px;height:24px;}
.tpt-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.tpt-footer-cols .tpt-col-h{margin-bottom:14px;font-size:10px;}
.tpt-col-secciones{color:var(--tpt-yellow);}
.tpt-col-legal{color:var(--tpt-magenta);}
.tpt-footer-cols a{display:block;margin-bottom:12px;font-size:10px;}
.tpt-footer-cols a:hover{color:var(--tpt-green);}
.tpt-footer-bottom{max-width:1320px;margin:48px auto 0;padding-top:24px;border-top:2px solid var(--tpt-white);text-align:center;font-size:9px;font-family:'TPTPixel',cursive;}
.tpt-year-line{color:var(--tpt-green);}

/* Mobile — CRT bezel/screen/scoreboard sized for desktop; shrink proportionally
   instead of letting fixed padding/antenna/knobs/score-grid force a horizontal scroll. */
@media (max-width:640px){
  .tpt-tv-set{padding:18px 18px 32px;border-radius:20px 20px 10px 10px;}
  .tpt-tv-antenna{top:-46px;right:30px;width:76px;height:52px;}
  .tpt-tv-antenna .a1,.tpt-tv-antenna .a2{height:50px;width:5px;}
  .tpt-tv-antenna .a1::after,.tpt-tv-antenna .a2::after{width:11px;height:11px;}
  .tpt-tv-antenna-base{width:28px;height:11px;top:-6px;}
  .tpt-tv-lights{top:10px;left:14px;gap:6px;}
  .tpt-tv-light-label{font-size:7px;}
  .tpt-tv-knobs{top:12px;right:14px;gap:10px;}
  .tpt-tv-knob{width:20px;height:20px;border-width:3px;}
  .tpt-tv-screen{margin-top:44px;padding:16px;}
  .tpt-live-tag{font-size:11px;gap:8px;margin-bottom:18px;}
  .tpt-score-grid{gap:8px;margin-bottom:12px;}
  .tpt-team-block .tpt-icon-box{padding:8px;margin-bottom:8px;}
  .tpt-team-block .tpt-icon-box svg{width:22px;height:22px;}
  .tpt-team-block p{font-size:9px;}
  .tpt-score-center{padding:0 8px;}
  .tpt-score-center .tpt-score-num{font-size:24px;padding:6px 0;}
  .tpt-score-illustrative{font-size:7px;}
  .tpt-arcade-track{height:26px;margin-bottom:14px;}
  .tpt-arcade-sprite{width:20px;height:20px;}
  .tpt-hero-headline{font-size:15px;margin-bottom:16px;}
  .tpt-post-title{font-size:14px;}
  .tpt-btn{padding:10px 18px;font-size:9px;}
  .tpt-tv-plate{font-size:7px;}
  .tpt-club-tile.tpt-featured .tpt-icon-box{width:96px;height:96px;}

  .tpt-sched-tab-head,.tpt-sched-body td.tpt-sched-tab{display:none;}
  .tpt-sched-body table{white-space:normal;font-size:10px;}
  .tpt-sched-body thead th{padding:10px 8px;}
  .tpt-sched-body td{padding:10px 8px;}
  .tpt-sched-thumb{width:44px;}
  .tpt-sched-thumb img{width:32px;height:32px;}

  /* text-page frames (mission / prose) — 40px padding each side eats too much
     of a ~360px viewport; tighten instead of leaving it merely "not broken". */
  .tpt-mission-frame,.tpt-prose-frame{padding:22px;border-left-width:6px;}
  .tpt-mission h2{font-size:13px;line-height:1.4;margin-bottom:18px;}
  .tpt-mission-photo{min-height:220px;}
  .tpt-mission-frame{min-width:0;}
  .tpt-mission-photo{max-width:100%;}

  /* FAQ accordion sits directly in .tpt-wrap (24px padding) with no inner frame of
     its own, unlike mission/prose blocks above — the pixel-font heading/question
     text was never given a mobile size pass, so it reads as pinched against the
     24px edge on narrow phones. */
  .tpt-faq{padding:0 4px;}
  .tpt-faq h2{font-size:12px;line-height:1.5;}
  .tpt-faq-item summary{font-size:11px;line-height:1.5;}
  .tpt-faq-item p{font-size:13px;}

}

/* Legacy compatibility — index.php / page.php / page-calendario.php still use the
   pre-v2 schedule-table classes (not yet ported to the CRT redesign). Keep them
   styled so those pages don't visually break until their own pass. */
.tpt-schedule-in{max-width:1280px;margin:0 auto;}
.tpt-schedule-head{background:var(--tpt-yellow);color:var(--tpt-black);padding:16px;margin-bottom:32px;border:4px solid var(--tpt-white);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.tpt-schedule-head h1,.tpt-schedule-head h2{font-size:20px;font-family:'TPTPixel',cursive;line-height:1.5;margin:0;}
.tpt-schedule-head span{font-size:12px;font-family:'TPTPixel',cursive;}
.tpt-table-wrap{border:4px solid var(--tpt-white);overflow-x:auto;background:var(--tpt-black);max-width:1160px;margin:32px auto 0;}
.tpt-table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;font-family:'TPTPixel',cursive;white-space:nowrap;}
.tpt-table thead{background:var(--tpt-black);border-bottom:4px solid var(--tpt-white);}
.tpt-table thead th{color:var(--tpt-cyan);padding:24px;border-right:4px solid var(--tpt-white);}
.tpt-table thead th:last-child{border-right:0;text-align:right;}
.tpt-table tbody tr{border-bottom:4px solid var(--tpt-white);}
.tpt-table tbody tr:last-child{border-bottom:0;}
.tpt-table tbody tr.tpt-row-alt{background:var(--tpt-white);color:var(--tpt-black);}
.tpt-table td{padding:24px;border-right:4px solid var(--tpt-white);}
.tpt-table tbody tr.tpt-row-alt td{border-right-color:var(--tpt-black);}
.tpt-table td:last-child{border-right:0;text-align:right;}
/* A colspan="4" status row (e.g. "no fixtures yet") IS its row's last-child by
   virtue of being its only cell, which wrongly inherits the ESTADO column's
   right-align above — this is a plain full-width message, not ESTADO data. */
.tpt-table td.tpt-table-empty{text-align:center;}
/* ESTADO has no fixed width, so with no fixture rows yet it stretches to fill
   whatever space EVENTO doesn't use — reading as one blended-together void
   instead of its own clearly bounded column. */
.tpt-table th:nth-child(4),.tpt-table td:nth-child(4){width:140px;}

/* page-calendario.php's full agenda table — same nowrap-overflow risk as the
   home schedule inset. Must come AFTER the unconditional .tpt-table rule above
   (same specificity — source order decides), otherwise this mobile override
   is silently beaten by the "Legacy compatibility" block's white-space:nowrap
   regardless of viewport width. */
@media (max-width:640px){
  .tpt-table{white-space:normal;font-size:10px;}
  .tpt-table thead th{padding:12px 8px;}
  .tpt-table td{padding:12px 8px;}
  .tpt-schedule-head h1,.tpt-schedule-head h2{font-size:14px;line-height:1.4;}
  .tpt-schedule-head span{font-size:10px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .tpt-flicker,.tpt-blink,.tpt-tv-light.rec,.tpt-marquee-track,.tpt-arcade-sprite,.tpt-tune-pulse{animation:none !important;}
  .tpt-tune-pulse{filter:invert(1) brightness(1.3);}
  .tpt-marquee-track{position:static;white-space:normal;}
}