/* TechnoGames brand layer (corporate-web only). tokens.css and layout.css stay identical across
   apps (ADR-006); this file re-themes the shared shell by overriding tokens and adds the public
   site's components. Palette, type and shape follow the brand kit: graphite surfaces, yellow only
   for actions and small accents. No inline styles anywhere: the CSP blocks them. */

/* Fonts are self-hosted (the CSP only allows our own origin). Rajdhani and Inter: SIL OFL. */
@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
  --tg-yellow: #ffcf25;
  --tg-yellow-hover: #f1be0b;
  --tg-charcoal: #2f2d2d;
  --tg-background: #131417;
  --tg-surface: #1e2024;
  --tg-surface-raised: #292b31;
  --tg-text: #fafafa;
  --tg-text-muted: #b5b7c0;
  --tg-border: #41444b;
  --tg-radius-card: 18px;
  --tg-radius-button: 12px;
  --tg-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  --tg-font-display: "Rajdhani", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --tg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Map the brand tokens onto the app tokens used by layout.css and components.css. */
  --font-sans: var(--tg-font-body);
  --color-primary: var(--tg-yellow);
  --color-primary-hover: var(--tg-yellow-hover);
  --color-primary-soft: rgb(255 207 37 / 12%);
  --color-accent: var(--tg-yellow);
  --color-accent-strong: var(--tg-yellow);
  --color-bg: var(--tg-background);
  --color-surface: var(--tg-surface);
  --color-text: var(--tg-text);
  --color-text-muted: var(--tg-text-muted);
  --color-border: var(--tg-border);
  --color-border-strong: #565a63;
  --color-danger: #ff8787;
  --radius-lg: var(--tg-radius-card);
  --radius-md: var(--tg-radius-button);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: var(--tg-shadow);
  --header-h: 4.5rem;
  color-scheme: dark;
}

body.site { background: radial-gradient(52rem 22rem at 100% -8rem, rgb(255 207 37 / 9%), transparent 70%), var(--tg-background); }
h1, h2, h3, .display { font-family: var(--tg-font-display); font-weight: 700; letter-spacing: 0.015em; }
a { color: var(--tg-yellow); }
:focus-visible { outline: 3px solid var(--tg-yellow); outline-offset: 3px; }
.muted { color: var(--tg-text-muted); }

/* --- Shell ------------------------------------------------------------------------------------ */
.site-header { background: rgb(19 20 23 / 88%); backdrop-filter: blur(12px); border-bottom: 1px solid var(--tg-border); }
.site-header__brand { display: inline-flex; align-items: center; padding-block: 0.3rem; }
.site-header__logo { display: block; width: auto; height: 4rem; }  /* same size as the footer logo */
.site-header__nav a { color: var(--tg-text-muted); font-weight: 500; }
.site-header__nav a:hover { color: var(--tg-text); }
.site-header__nav a[aria-current="page"] { color: var(--tg-text); font-weight: 700; border-bottom-color: var(--tg-yellow); }
.site-header__user span { color: var(--tg-text-muted); }
.page-header__title { font-size: 2rem; line-height: 1.05; }
.page-header__subtitle { font-size: var(--text-md); }
@media (min-width: 48rem) { .page-header__title { font-size: 2.75rem; } .site-main { padding-top: var(--space-8); } }

/* --- Buttons: yellow for the main action, outline for the rest -------------------------------- */
.button { background: var(--tg-yellow); border-color: var(--tg-yellow); color: #1a1a1a; font-weight: 700; border-radius: var(--tg-radius-button); transition: background 0.18s, border-color 0.18s, box-shadow 0.18s; }
.button:hover { background: var(--tg-yellow-hover); border-color: var(--tg-yellow-hover); box-shadow: 0 6px 20px rgb(255 207 37 / 22%); }
.button--accent { background: var(--tg-yellow); border-color: var(--tg-yellow); color: #1a1a1a; }
.button--ghost { background: transparent; color: var(--tg-text); border-color: #565a63; }
.button--ghost:hover { background: var(--tg-surface-raised); border-color: var(--tg-text-muted); box-shadow: none; }
.button--danger { background: transparent; border-color: #7a2e2e; color: var(--color-danger); }
.button--danger:hover { background: #3a1818; border-color: #a33c3c; box-shadow: none; }
.button--whatsapp { background: #25d366; border-color: #25d366; color: #04210f; }
.button--whatsapp:hover { background: #4be083; border-color: #4be083; box-shadow: 0 6px 20px rgb(37 211 102 / 22%); }
.button .icon { width: 1.15em; height: 1.15em; margin-right: 0.45em; color: inherit; }

/* --- Cards ------------------------------------------------------------------------------------ */
.card { background: var(--tg-surface); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); box-shadow: none; }
.tile { transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
.tile:hover { transform: translateY(-2px); border-color: rgb(255 207 37 / 55%); box-shadow: var(--tg-shadow); }
.tile__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-3); border-radius: var(--tg-radius-button); color: var(--tg-yellow); background: rgb(255 207 37 / 10%); border: 1px solid rgb(255 207 37 / 28%); }
.tile__title { margin: 0 0 var(--space-2); font-size: 1.35rem; }
.tile p { margin: 0; }
.tile .button { margin-top: var(--space-3); }

/* Brand icons keep their own colors */
.icon { flex: none; }
.icon--whatsapp { color: #25d366; }
.icon--instagram { color: #ee5a7a; }
.icon--pin { color: #ff6b6b; }
.tile__icon .icon--whatsapp, .tile__icon .icon--instagram, .tile__icon .icon--pin { width: 1.5rem; height: 1.5rem; }

/* --- Carousel ---------------------------------------------------------------------------------- */
.carousel { position: relative; margin-bottom: var(--space-8); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); background: var(--tg-surface); box-shadow: var(--tg-shadow); overflow: hidden; }
.carousel__track { display: grid; }
.slide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; min-height: 21rem; padding: var(--space-6) var(--space-6) 4.5rem; color: var(--tg-text); opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide--art { background: linear-gradient(135deg, var(--tg-surface-raised), var(--tg-surface) 60%, #17181b); }
.slide--art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 16%) 1px, transparent 1.6px) 0 0 / 22px 22px; mask-image: linear-gradient(90deg, #000 15%, transparent 70%); -webkit-mask-image: linear-gradient(90deg, #000 15%, transparent 70%); animation: dots-drift 30s linear infinite; }
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(19 20 23 / 92%), rgb(19 20 23 / 62%) 55%, rgb(19 20 23 / 12%)); }
.slide__body { position: relative; z-index: 2; max-width: 36rem; }
.slide__title { margin: 0 0 var(--space-3); font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.05; }
.slide__text { margin: 0 0 var(--space-5); font-size: var(--text-lg); color: #e6e7ec; }
.eyebrow { margin: 0 0 var(--space-2); font: 700 var(--text-xs) var(--tg-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-yellow); }
@media (min-width: 48rem) { .slide { min-height: 23rem; padding: var(--space-8) var(--space-8) 4.5rem; } .slide__text { font-size: var(--text-xl); } }

.carousel__controls { position: absolute; left: 0; right: 0; bottom: var(--space-3); z-index: 3; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding-inline: var(--space-4); }
.carousel__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; font: 700 1.4rem/1 var(--tg-font-body); color: var(--tg-text); background: rgb(19 20 23 / 70%); border: 1px solid #565a63; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.18s, border-color 0.18s; }
.carousel__btn:hover { background: rgb(41 43 49 / 90%); border-color: var(--tg-yellow); }
.carousel__btn--toggle { font-size: 0.8rem; margin-left: auto; }
.carousel__dots { display: flex; gap: 0.15rem; }
.carousel__dot { position: relative; width: 1.75rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; }
.carousel__dot::before { content: ""; position: absolute; left: 0.2rem; right: 0.2rem; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgb(255 255 255 / 35%); transition: background 0.2s; }
.carousel__dot[aria-current="true"]::before { background: var(--tg-yellow); }
.carousel__dot:hover::before { background: rgb(255 255 255 / 70%); }
@media (max-width: 47.99rem) { .carousel__btn--toggle { margin-left: 0; } .slide { padding-inline: var(--space-5); } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.stat { display: flex; flex-direction: column; padding: var(--space-3); border-radius: var(--tg-radius-button); background: rgb(255 255 255 / 4%); border: 1px solid var(--tg-border); }
.stat__value { font: 700 var(--text-xl) var(--tg-font-display); letter-spacing: 0.02em; color: var(--tg-yellow); }
.stat__label { font-size: var(--text-xs); color: var(--tg-text-muted); }
@media (min-width: 48rem) { .stat__value { font-size: 2rem; } .stat__label { font-size: var(--text-sm); } }

/* --- Sections --------------------------------------------------------------------------------- */
.section { margin-bottom: var(--space-8); }
.section__title { margin: 0 0 var(--space-4); font-size: 1.75rem; }
.section__title::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: var(--space-2); border-radius: 2px; background: var(--tg-yellow); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section__head .section__title { margin: 0; }
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--blocks { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.stack { display: grid; gap: var(--space-4); }

.feature { display: grid; gap: var(--space-3); padding: var(--space-5); }
@media (min-width: 48rem) { .feature { grid-template-columns: auto 1fr; gap: var(--space-5); } }
.feature .tile__icon { margin: 0; }
.feature__title { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; padding: 0; list-style: none; }
.checks li::before { content: "✓"; margin-right: 0.4rem; color: var(--tg-yellow); font-weight: 800; }

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--tg-border); border-bottom: 3px solid var(--tg-yellow); border-radius: var(--tg-radius-card); background: linear-gradient(135deg, var(--tg-surface-raised), var(--tg-surface)); }
.cta__title { margin: 0 0 var(--space-1); font-size: 1.75rem; }
.cta p { margin: 0; color: var(--tg-text-muted); }

/* --- Public content blocks -------------------------------------------------------------------- */
.block { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.block__media { display: block; width: 100%; height: auto; background: #000; }
.block__media--video { aspect-ratio: 16 / 9; }
.block__media--embed { position: relative; aspect-ratio: 16 / 9; }
.block__media--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.block__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
.block__kind { padding: 0 var(--space-2); font: 700 var(--text-xs) var(--tg-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #1a1a1a; background: var(--tg-yellow); border-radius: 4px; }
.block__title { margin: 0; font-size: 1.35rem; }
.block__text { margin: 0; white-space: pre-line; }
.block__date { margin: 0; font-size: var(--text-xs); }

/* --- Hero in motion ----------------------------------------------------------------------------
   Decoration only (aria-hidden), pure CSS/SVG: circuit traces with light pulses running along
   them, a line-art controller whose buttons light up in sequence, a glass shine sweeping across
   the block and a slow dot-matrix drift. Everything stops with prefers-reduced-motion. */
.slide > .hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 6%) 50%, transparent 65%); background-size: 250% 100%; animation: hero-shine 8s ease-in-out infinite; }
.circuit { position: absolute; left: 0; width: 100%; height: 3.5rem; }
.circuit--top { top: 0; }
.circuit--bottom { bottom: 0; }
.circuit__lines path, .circuit__lines circle { stroke: rgb(255 255 255 / 20%); stroke-width: 1.5; }
.circuit__lines circle { fill: var(--tg-surface); }
.pulse { stroke: var(--tg-yellow); stroke-width: 2.5; stroke-dasharray: 55 945; stroke-dashoffset: 1000; filter: drop-shadow(0 0 4px rgb(255 207 37 / 90%)); animation: pulse-run 7s linear infinite; }
.pulse--2 { animation-delay: -2.2s; animation-duration: 8.5s; }
.pulse--3 { animation-delay: -4s; animation-duration: 6s; }
.pulse--4 { animation-delay: -1s; animation-duration: 9.5s; }
.pad3d { position: absolute; right: 2rem; top: 50%; width: 16rem; height: auto; margin-top: -5.4rem; color: var(--tg-yellow); filter: drop-shadow(0 0 14px rgb(255 207 37 / 35%)); animation: pad-float 7s ease-in-out infinite; }
.pad3d__btn { fill: transparent; animation: btn-press 3.2s ease-in-out infinite; }
.pad3d__btn--b { animation-delay: 0.8s; }
.pad3d__btn--c { animation-delay: 1.6s; }
.pad3d__btn--d { animation-delay: 2.4s; }
.pad3d__stick { animation: stick-look 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse-run { to { stroke-dashoffset: 0; } }
@keyframes pad-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-0.7rem) rotate(2deg); } }
@keyframes btn-press { 0%, 70%, 100% { fill: transparent; } 12%, 30% { fill: var(--tg-yellow); } }
@keyframes stick-look { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(2px, -2px); } 65% { transform: translate(-2px, 1.5px); } }
@keyframes hero-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
@keyframes dots-drift { to { background-position: 22px 22px; } }
@media (max-width: 47.99rem) {
  .pad3d, .circuit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .button { transition: none; } .tile:hover { transform: none; }
  .pad3d, .pad3d__btn, .pad3d__stick, .pulse, .hero__art::before, .slide--art::after { animation: none; }
  .slide { transition: none; } .carousel__btn, .carousel__dot::before { transition: none; }
  .pulse { display: none; }
}

/* --- Footer: corporate, four columns --------------------------------------------------------- */
.site-footer { position: relative; margin-top: var(--space-8); padding: 0; font-size: var(--text-base); color: var(--tg-text-muted); background: radial-gradient(40rem 16rem at 0 0, rgb(255 207 37 / 7%), transparent 70%), #0d0e10; border-top: 0; }
.site-footer::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--tg-yellow), rgb(255 207 37 / 15%) 70%, transparent); }
.site-footer__grid { display: grid; gap: var(--space-8) var(--space-6); padding-block: 3.5rem 2.5rem; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 1.3fr 1.4fr 1.2fr 1.1fr; } }
.site-footer__brand p { max-width: 18rem; margin: var(--space-4) 0; line-height: 1.55; }
.site-footer__logo { display: block; width: auto; height: 4rem; }
.site-footer__title { margin: 0 0 var(--space-4); padding-bottom: var(--space-2); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tg-text); border-bottom: 1px solid var(--tg-border); position: relative; }
.site-footer__title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 2.5rem; height: 3px; background: var(--tg-yellow); }
.site-footer__list, .site-footer__links, .site-footer__contact, .social { margin: 0; padding: 0; list-style: none; }
.site-footer__list li { margin-bottom: var(--space-3); line-height: 1.5; }
.site-footer__list strong { color: var(--tg-text); font-weight: 600; }
.site-footer__text { margin: 0 0 var(--space-4); line-height: 1.55; }
.site-footer__links li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--tg-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--tg-yellow); }
.site-footer__links a::before { content: "›"; margin-right: 0.5rem; color: var(--tg-yellow); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: var(--space-3); line-height: 1.45; }
.site-footer__contact .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; }
.social { display: flex; gap: var(--space-3); }
.social__link { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); background: var(--tg-surface); transition: transform 0.18s, border-color 0.18s, background 0.18s; }
.social__link .icon { width: 1.35rem; height: 1.35rem; }
.social__link:hover { transform: translateY(-2px); background: var(--tg-surface-raised); }
.social__link--whatsapp:hover { border-color: #25d366; }
.social__link--instagram:hover { border-color: #ee5a7a; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); font-size: var(--text-sm); border-top: 1px solid var(--tg-border); }
@media (prefers-reduced-motion: reduce) { .social__link { transition: none; } .social__link:hover { transform: none; } }

/* --- Admin tabs ------------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); border-bottom: 1px solid var(--tg-border); }
.tabs a { padding: var(--space-2) var(--space-4); margin-bottom: -1px; color: var(--tg-text-muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--tg-text); }
.tabs a[aria-current="page"] { color: var(--tg-text); border-bottom-color: var(--tg-yellow); }

/* --- Home sections ---------------------------------------------------------------------------- */
.stats--page { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.split { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 48rem) { .split:has(.split__img) { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .split--right .split__img { order: 2; } }
.split__img { display: block; width: 100%; height: auto; border-radius: var(--tg-radius-card); border: 1px solid var(--tg-border); }
.split__text { margin: 0 0 var(--space-4); white-space: pre-line; color: var(--tg-text-muted); font-size: var(--text-md); line-height: 1.6; }
.video-section__media { display: block; width: 100%; max-width: 56rem; aspect-ratio: 16 / 9; border-radius: var(--tg-radius-card); border: 1px solid var(--tg-border); background: #000; }
.video-section__media--embed { position: relative; overflow: hidden; }
.video-section__media--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Admin: home sections --------------------------------------------------------------------- */
.notice { margin-bottom: var(--space-5); border-color: rgb(255 207 37 / 40%); }
.notice__title { margin: 0 0 var(--space-2); font-size: 1.25rem; }
.sections { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--tg-surface); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); }
.section-row--off { opacity: 0.65; }
.section-row__main { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-3); min-width: 0; }
.section-row__main > * { flex: none; }
.section-row__main > .section-row__title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-row__kind { padding: 0 var(--space-2); font: 700 var(--text-xs) var(--tg-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-yellow); border: 1px solid rgb(255 207 37 / 40%); border-radius: 4px; white-space: nowrap; }
.section-row__title { font-size: var(--text-md); }
.section-row .actions { flex-wrap: nowrap; flex: none; gap: var(--space-2); }
.section-row form { margin: 0; }
@media (max-width: 52rem) {
  .section-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .section-row__main { flex-wrap: wrap; }
  .section-row__main > .section-row__title { flex: 1 1 100%; white-space: normal; }
  /* Keep every control of a row on one line, even on a phone: tighter gaps and padding. */
  .section-row .actions { width: 100%; justify-content: space-between; gap: 0.25rem; }
  .section-row .actions .actions { width: auto; }
  .section-row .button--sm { padding-inline: 0.55rem; }
}
.button[disabled] { opacity: 0.35; cursor: not-allowed; }
.add-section { margin-top: var(--space-5); }
.kind-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .kind-list { grid-template-columns: repeat(3, 1fr); } }
.kind-card { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-3) var(--space-4); color: var(--tg-text); text-decoration: none; background: var(--tg-surface-raised); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); transition: border-color 0.18s, transform 0.18s; }
.kind-card:hover { border-color: var(--tg-yellow); transform: translateY(-2px); }
.kind-card .muted { font-size: var(--text-sm); }
.slides, .add-section { max-width: none; }
.slides { margin-top: var(--space-5); }
.slides__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.slides__head .notice__title { margin: 0; }
.slide-thumb { width: 4rem; height: 2.25rem; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-border); }

/* --- Phones ------------------------------------------------------------------------------------
   Rule: the site never scrolls sideways. Media never exceeds its box, long words wrap, and the
   page clips as a last resort (the real causes are fixed in the rules above and below). */
html { max-width: 100%; }
body.site { overflow-x: clip; }
.site-main, .site-main .container, .card, .block__body, .slide__body, .split__body { min-width: 0; }
.block__title, .slide__title, .section__title, .cta__title, .section-row__title { overflow-wrap: anywhere; }
.block__text, .slide__text, .split__text, .cta p { overflow-wrap: break-word; }
img, video, svg, iframe { max-width: 100%; }

@media (max-width: 47.99rem) {
  :root { --header-h: 3.5rem; }
  .site-header__logo { height: 3rem; }  /* same size as the footer logo on phones */
  /* Logo and menu share one row (a signed-in admin's longer menu wraps to a second row). */
  .site-header__inner { column-gap: var(--space-2); }
  .site-header__nav { order: 0; flex: 1 1 auto; align-self: stretch; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .site-header__nav a { display: flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-3); font-size: var(--text-base); }
  .section, .carousel { margin-bottom: var(--space-6); }
  .section__title { font-size: 1.4rem; margin-bottom: var(--space-3); }
  .section__head { margin-bottom: var(--space-3); }
  .page-header { margin-bottom: var(--space-3); }
  .page-header__title { font-size: 1.75rem; }
  .page-header__subtitle { font-size: var(--text-base); }
  .page-header__actions .button { min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--text-sm); }

  /* Carousel: shorter slides, smaller type */
  .slide { min-height: 16.5rem; padding: var(--space-5) var(--space-4) 4rem; }
  .slide__title { font-size: 1.6rem; margin-bottom: var(--space-2); }
  .slide__text { font-size: var(--text-base); margin-bottom: var(--space-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .carousel__controls { bottom: var(--space-2); gap: var(--space-2); }
  .carousel__btn { width: 2.5rem; height: 2.5rem; }
  .carousel__dot { height: 2.5rem; width: 1.5rem; }

  /* Figures: three across, small */
  .stats--page { grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); gap: var(--space-2); }
  .stats--page .stat { padding: var(--space-2) var(--space-3); }
  .stats--page .stat__value { font-size: 1.3rem; }
  .stats--page .stat__label { font-size: 0.7rem; line-height: 1.25; }

  /* Promotions: a compact list. Cards with a picture become a thumbnail beside the text. */
  .grid--blocks { grid-template-columns: 1fr; gap: var(--space-3); }
  .block:has(> img.block__media) { display: grid; grid-template-columns: 6.5rem 1fr; align-items: stretch; }
  .block:has(> img.block__media) > .block__media { width: 100%; height: 100%; min-height: 6.5rem; aspect-ratio: auto; object-fit: cover; }
  .block__media--video, .block__media--embed { aspect-ratio: 16 / 9; }
  .block__body { gap: var(--space-1); padding: var(--space-3); }
  .block__kind { font-size: 0.65rem; }
  .block__title { font-size: 1.1rem; line-height: 1.15; }
  .block__text { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .block__date { font-size: 0.7rem; }
  .block .button { margin-top: var(--space-1); }

  /* Other sections */
  .split { gap: var(--space-3); }
  .split__img { max-height: 11rem; object-fit: cover; }
  .split__text, .video-section .split__text { font-size: var(--text-base); }
  .cta { padding: var(--space-4); gap: var(--space-3); }
  .cta__title { font-size: 1.35rem; }
  .cta .button { width: 100%; }
  .tile__icon { width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-2); }

  /* Footer: tighter */
  .site-footer { margin-top: var(--space-6); }
  .site-footer__grid { gap: var(--space-5); padding-block: 2rem 1.25rem; }
  .site-footer__logo { height: 3rem; }
  .site-footer__brand p { margin: var(--space-3) 0; }
  .site-footer__title { margin-bottom: var(--space-3); font-size: 1.05rem; }
  .site-footer__list li { margin-bottom: var(--space-2); }
  .site-footer__bottom { font-size: 0.75rem; }

  /* Admin: tighter cards and forms */
  .card--form { padding: var(--space-3); }
  .field-group { padding: var(--space-2) var(--space-3); }
}

@media (max-width: 24rem) {
  .container { padding-inline: var(--space-3); }
  .site-header__nav a { padding: 0 var(--space-2); font-size: var(--text-sm); }
  .section-row { padding: var(--space-2); }
  .section-row .button--sm { padding-inline: 0.35rem; font-size: 0.7rem; }
  .section-row .button--sm[name="direction"] { min-width: 1.75rem; }
  .card--form { padding: var(--space-2); }
  .block:has(> img.block__media) { grid-template-columns: 5.5rem 1fr; }
}

/* --- Online store -------------------------------------------------------------------------------- */
.cart-link { position: relative; display: inline-flex; align-items: center; padding: 0 var(--space-2); color: var(--tg-text); text-decoration: none; }
.cart-link .icon { width: 1.4rem; height: 1.4rem; }
.cart-link__count { position: absolute; top: -0.35rem; right: -0.1rem; min-width: 1.15rem; padding: 0 0.3rem; font: 700 0.7rem/1.15rem var(--tg-font-body); text-align: center; color: #1a1a1a; background: var(--tg-yellow); border-radius: 999px; }
.badge--warn { background: #3d2f08; color: #ffd45e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.prose h2 { margin: var(--space-5) 0 var(--space-2); font-size: 1.3rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0; color: var(--tg-text-muted); line-height: 1.6; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-4); }
.shop-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.shop-card--out { opacity: 0.7; }
.shop-card__media { display: block; aspect-ratio: 1 / 1; background: #000; }
.shop-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tg-border); }
.shop-card__placeholder .icon { width: 3rem; height: 3rem; }
.shop-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3); }
.shop-card__cat { font: 600 0.68rem var(--tg-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tg-text-muted); }
.shop-card__title { margin: 0; font-size: 1.15rem; line-height: 1.15; overflow-wrap: anywhere; }
.shop-card__title a { color: var(--tg-text); text-decoration: none; }
.shop-card__title a:hover { color: var(--tg-yellow); }
.shop-card__price { margin: 0; font: 700 1.3rem var(--tg-font-display); color: var(--tg-yellow); }
.shop-card__form { margin: auto 0 0; padding-top: var(--space-2); }

.product { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); } }
.product__main { display: block; width: 100%; max-height: 32rem; object-fit: contain; background: #000; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-card); }
.product__main--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--tg-border); }
.product__main--empty .icon { width: 4rem; height: 4rem; }
.product__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.product__thumb { padding: 0; width: 4rem; height: 4rem; background: #000; border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); overflow: hidden; cursor: pointer; }
.product__thumb:hover { border-color: var(--tg-yellow); }
.product__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product__price { margin: 0 0 var(--space-2); font: 700 2.2rem var(--tg-font-display); color: var(--tg-yellow); }
.product__text { white-space: pre-line; line-height: 1.6; color: var(--tg-text-muted); }
.product__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-4); }
.product__form .field { margin: 0; }
.product__hint { font-size: var(--text-sm); }
.field--inline input { width: 4.5rem; }

.cart { display: grid; gap: var(--space-4); }
@media (min-width: 56rem) { .cart { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.cart__lines { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.cart-line { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3); background: var(--tg-surface); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); }
.cart-line--problem { border-color: #7a5d12; }
.cart-line__img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 8px; background: #000; }
.cart-line__img--empty { display: grid; place-items: center; color: var(--tg-border); }
.cart-line__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cart-line__name { color: var(--tg-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cart-line__qty { display: flex; align-items: center; gap: var(--space-2); grid-column: 2 / 3; margin: 0; }
.cart-line__qty input { width: 3rem; min-height: 2.25rem; padding: 0 var(--space-2); text-align: center; color: inherit; background: var(--tg-surface-raised); border: 1px solid var(--color-border-strong); border-radius: 8px; font: inherit; }
.cart-line__total { grid-column: 3 / 4; grid-row: 1 / 2; align-self: start; font: 700 1.1rem var(--tg-font-display); white-space: nowrap; }
.cart-line__remove { grid-column: 3 / 4; margin: 0; justify-self: end; }
.cart__summary, .checkout__summary { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0; }
.cart__sum { font: 700 1.4rem var(--tg-font-display); color: var(--tg-yellow); }
.summary { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.summary li { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--tg-border); overflow-wrap: anywhere; }
.summary li span:last-child { white-space: nowrap; }

.checkout { display: grid; gap: var(--space-4); }
@media (min-width: 56rem) { .checkout { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
.checkout__title { margin: 0 0 var(--space-3); font-size: 1.3rem; }
.checkout__note { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.checkout__timer { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0; padding: var(--space-3); color: var(--tg-text); background: rgb(255 207 37 / 10%); border: 1px solid rgb(255 207 37 / 35%); border-radius: var(--tg-radius-button); }
.checkout__timer .icon { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; color: var(--tg-yellow); }
.check--top { align-items: flex-start; }
.check input[type="radio"], .check input[type="checkbox"] { accent-color: var(--tg-yellow); width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }

.order { display: grid; gap: var(--space-4); max-width: 44rem; }
.order__title { margin: 0 0 var(--space-3); font-size: 1.35rem; }
.order__text { white-space: pre-line; line-height: 1.6; }
.countdown { text-align: center; border-color: rgb(255 207 37 / 50%); background: linear-gradient(135deg, var(--tg-surface-raised), var(--tg-surface)); }
.countdown__label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 700 var(--text-xs) var(--tg-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-yellow); }
.countdown__label .icon { width: 1.1rem; height: 1.1rem; }
.countdown__time { margin: var(--space-1) 0; font: 700 clamp(3rem, 14vw, 5rem)/1 var(--tg-font-display); letter-spacing: 0.04em; color: var(--tg-text); font-variant-numeric: tabular-nums; }
.countdown__text { margin: 0; color: var(--tg-text-muted); }
.countdown--low { border-color: #e0a100; }
.countdown--low .countdown__time { color: var(--tg-yellow); }
.countdown--critical { border-color: #ff6b6b; }
.countdown--critical .countdown__time { color: #ff8787; }
.order-state--ok { border-color: #25d366; }
.order-state--bad { border-color: #7a2e2e; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; }
.facts dt { color: var(--tg-text-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Admin: store */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; }
.tabs__count { margin-left: 0.4rem; padding: 0 0.4rem; font: 700 0.7rem/1.1rem var(--tg-font-body); color: #1a1a1a; background: var(--tg-yellow); border-radius: 999px; }
.store-status { margin: 0 0 var(--space-3); }
.picker__list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.picker__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--tg-surface-raised); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); cursor: pointer; }
.picker__item input { accent-color: var(--tg-yellow); width: 1.1rem; height: 1.1rem; flex: none; }
.picker__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.picker__meta { flex: none; color: var(--tg-text-muted); white-space: nowrap; }
.photos { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.photos__item img { display: block; object-fit: cover; border-radius: 8px; border: 1px solid var(--tg-border); }
.order-admin { display: grid; gap: var(--space-4); max-width: 46rem; }
.pay-form { margin-bottom: var(--space-3); }
.card--form, .order-admin .card { max-width: none; }

@media (max-width: 47.99rem) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .shop-card__body { padding: var(--space-2); }
  .shop-card__title { font-size: 1rem; }
  .shop-card__price { font-size: 1.1rem; }
  .shop-card__cat { font-size: 0.6rem; }
  .product__price { font-size: 1.8rem; }
  .product__main { max-height: 22rem; }
  .cart-line { grid-template-columns: 3rem minmax(0, 1fr) auto; padding: var(--space-2); }
  .cart-line__img { width: 3rem; height: 3rem; }
  .cart__summary, .checkout__summary { position: static; }
  .countdown__time { font-size: clamp(2.6rem, 16vw, 3.6rem); }
}
@media (max-width: 24rem) { .cart-line__qty .button { padding-inline: 0.4rem; font-size: 0.7rem; } }

.site-footer__legal { color: var(--tg-text); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal:hover { color: var(--tg-yellow); }
.cf-turnstile { margin: var(--space-3) 0; min-height: 4rem; }

/* --- "Click the right icon" challenge ------------------------------------------------------------ */
.game { margin: var(--space-3) 0; padding: var(--space-3); background: var(--tg-surface-raised); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-button); }
.game__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: 1.15rem; }
.game__title .icon { width: 1.2rem; height: 1.2rem; color: var(--tg-yellow); }
.game__prompt { margin: 0 0 var(--space-2); font: 700 1.25rem var(--tg-font-display); letter-spacing: 0.02em; color: var(--tg-yellow); }
.game__stage { position: relative; width: 100%; max-width: 320px; aspect-ratio: 2 / 1; overflow: hidden; border: 2px solid var(--tg-border); border-radius: 10px; cursor: crosshair; touch-action: manipulation; }
.game__stage:focus-visible { outline: 3px solid var(--tg-yellow); outline-offset: 2px; }
.game__img { display: block; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; }
.game__marker { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid var(--tg-yellow); border-radius: 50%; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000; pointer-events: none; }
.game--missing .game__stage { border-color: #ff6b6b; }
.game__error { margin: var(--space-2) 0 0; color: #ff8787; font-size: var(--text-sm); }
.game__help { margin: var(--space-2) 0 0; color: var(--tg-text-muted); font-size: var(--text-sm); }
.linklike { padding: 0; font: inherit; color: var(--tg-yellow); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Open/closed switch on the admin Tienda page */
.open-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: rgb(37 211 102 / 8%); border: 1px solid rgb(37 211 102 / 40%); border-radius: var(--tg-radius-button); }
.open-switch--closed { background: rgb(255 107 107 / 8%); border-color: rgb(255 107 107 / 45%); }
.open-switch__label { margin: 0; align-items: center; font-size: var(--text-md); }
.open-switch__label input { width: 1.4rem; height: 1.4rem; }

/* --- Compact cards on wide screens: many items without a saturated page -------------------------- */
@media (min-width: 48rem) {
  .grid--blocks { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); }
  img.block__media { aspect-ratio: 1 / 1; object-fit: cover; }
  .block__body { gap: 0.25rem; padding: var(--space-3); }
  .block__title { font-size: 1.1rem; line-height: 1.15; }
  .block__text { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .block__kind { font-size: 0.65rem; }

  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); }
  .shop-card__media { aspect-ratio: 5 / 4; }
  .shop-card__body { gap: 0.2rem; padding: var(--space-2) var(--space-3) var(--space-3); }
  .shop-card__title { font-size: 1rem; }
  .shop-card__price { font-size: 1.15rem; }
  .shop-card__cat { font-size: 0.62rem; }
}