/* The marketing pages (home, printables): "Loud and flat" (taste-skill direction, seed 1941154461) in the
   app's own colours (loteriaSwift App/Theme.swift) and faces (Barlow + Barlow Condensed, SIL OFL, /fonts).
   Flat fields meet edge to edge; no shadows, gradients or rules. The /v/ page and the 404 keep site.css. */
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --cream: #fbeecb; --cream-light: #fdf6e3; --brown: #7a3b1e; --teal: #1c5f72; --pink: #bd356f; --marigold: #f2b705;
  --m: clamp(16px, 2vw, 28px);
  /* The five type steps. */
  --t-xxl: clamp(84px, 12vw, 190px);
  --t-xl: clamp(40px, 8.4vw, 136px);
  --t-l: clamp(24px, 2.3vw, 34px);
  --t-m: 19px;
  --t-s: 15px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --seam: 50%;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--brown); font: 400 var(--t-m)/1.5 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
/* Focus: brown on the cream grounds, cream on the coloured fields (3:1 or more against each). */
:root { --focus: var(--brown); }
.hero-low, .campo:not(:nth-child(3)), .cartas-sec, .pregunta, .pie, .papel, .cantor-mesa, .como-cantar { --focus: var(--cream-light); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The skip link: out of sight until the first Tab. It lands on the page's heading. */
.saltar { position: absolute; top: 8px; left: 8px; z-index: 10; padding: 12px 18px; background: var(--brown); color: var(--cream-light); font: 600 var(--t-m)/1.2 var(--text); transform: translateY(-200%); }
.saltar:focus { transform: none; }
h1[tabindex="-1"]:focus { outline: none; }
.display { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: .88; }

/* One button shape: a flat square-cornered block in the accent; it swaps colours on hover. */
.btn { display: inline-block; padding: 16px 26px; background: var(--marigold); color: var(--brown); font: 600 var(--t-m)/1.2 var(--text);
  text-decoration: none; text-align: center; transition: background-color .15s, color .15s, transform .15s var(--ease); }
.btn:hover { background: var(--brown); color: var(--cream-light); }
.btn:active { transform: translateY(2px); }
.wordmark { font: 700 var(--t-l)/1 var(--display); text-transform: uppercase; text-decoration: none; }
.btn, .wordmark { white-space: nowrap; }
/* The store buttons' Apple and Android marks (path data from simple-icons; the marks stay under their owners' terms, credited in
   the footer's .pie-credito), in the button's text colour so they swap with it on hover. */
.tienda { width: 1.15em; height: 1.15em; margin-right: .5em; vertical-align: -.2em; fill: currentColor; }

/* ---- Hero: two flat fields meeting at the seam; the headline changes ink as it crosses it. ---- */
.hero { --hero-low: 272px; position: relative; overflow: hidden; height: 100svh; min-height: 640px; background: var(--teal); }
.hero::before { content: ""; position: absolute; inset: 0 0 calc(100% - var(--seam)) 0; background: var(--cream); }
.hero-bar { position: absolute; z-index: 2; top: var(--m); left: var(--m); right: var(--m); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; color: var(--teal); }
.hero-bar .link { font-weight: 600; text-underline-offset: 4px; }
/* The home page's links: beside the wordmark while they fit, else on their own row under it (space-between starts a lone item at the left). */
.hero-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.hero-nav .link:hover { color: var(--pink); }
/* The two fields meet between the headline's lines: line one in teal on cream, line two in cream on teal.
   The box is centred on the seam (its bottom inset is 100% − 2 × seam). */
.hero-title { position: absolute; top: 0; left: 0; right: 0; bottom: calc(100% - 2 * var(--seam)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 var(--m); text-align: center;
  /* 12vw, but on short screens no taller than the room above the text block under the seam (--hero-low). */
  font-size: clamp(56px, min(12vw, calc(52svh - var(--hero-low))), 190px); }
.hero-title .line { display: block; overflow: hidden; padding: .1em 0 .04em; white-space: nowrap; color: var(--teal); }
.hero-title .line + .line { color: var(--cream-light); }
.hero-title .line > span { display: block; }
/* The home hero's block also holds the store buttons and the play line under them, so its title leaves more room. */
.hero-inicio { --hero-low: 315px; }
/* Wide enough for both store buttons on one row from 1000px, so the block stays inside the --hero-low the title leaves it. */
.hero-low { position: absolute; z-index: 1; left: var(--m); bottom: 40px; width: min(62vw, 760px); color: var(--cream-light); }
.hero-low p { max-width: 26ch; font: 600 var(--t-l)/1.2 var(--text); }
.hero-low .stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* "Descargar la app" lands with the buttons low on the screen, under the headline, not at the very top. */
#descargar { scroll-margin-top: 40svh; }
.hero-low .hero-play { max-width: none; margin-top: 18px; font: 600 var(--t-m)/1.4 var(--text); }
.hero-play a { text-underline-offset: 4px; }
.hero-play a:hover { color: var(--marigold); }
/* Below 1000px the line goes: the bar above already leads to both places to play, and the block needs the room
   (the store buttons stack from about 950px). */
@media (max-width: 999px) { .hero-low .hero-play { display: none; } }
/* Short screens: the sentence on two lines (at the body size below 1000px), so the block keeps clear of the title,
   whose size bottoms out at 56px. */
@media (min-width: 641px) and (max-height: 760px) { .hero-inicio .hero-low p:first-child { max-width: 40ch; } }
@media (min-width: 641px) and (max-width: 999px) and (max-height: 760px) { .hero-inicio .hero-low p:first-child { font-size: var(--t-m); } }
.hero-pic { position: absolute; right: 4vw; bottom: 0; width: clamp(200px, 24vw, 380px); transform: translateY(50%) rotate(4deg); }
.hero-pic.card { width: clamp(140px, 15vw, 240px); }
.hero-pic.c1 { right: 20vw; transform: translateY(38%) rotate(-7deg); }
.hero-pic.c2 { right: 13vw; transform: translateY(30%) rotate(2deg); animation-delay: 1.6s; }
.hero-pic.c3 { right: 6vw; transform: translateY(42%) rotate(9deg); animation-delay: 2s; }

/* ---- The tabla you can type ---- */
.typed { background: var(--cream-light); padding: 140px var(--m); }
.typed-line { font-size: var(--t-xl); color: var(--teal); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .22em; }
.typed-line h2 { margin: 0; font: inherit; }
.typed-line label { cursor: text; }
.typed-line input { width: 1ch; field-sizing: content; min-width: 1ch; padding: 0; border: 0; background: none; color: var(--pink);
  font: inherit; letter-spacing: inherit; text-transform: inherit; caret-color: var(--brown); }
.typed-line .of { color: var(--brown); }
.typed-body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 56px; margin-top: 48px; }
.tabla-col { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 16px; }
.tabla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.tabla img { aspect-ratio: 361 / 575; width: 100%; }
.typed-side { grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.typed-claim { font: 600 var(--t-l)/1.2 var(--text); color: var(--teal); max-width: 22ch; }
.pdfs { margin: 0; padding: 0; list-style: none; font: 700 var(--t-l)/1.15 var(--display); text-transform: uppercase; }
.pdfs li + li { margin-top: 14px; }
.pdfs a { color: var(--teal); text-underline-offset: 5px; text-decoration-thickness: 3px; transition: color .15s; }
.pdfs a:hover { color: var(--pink); }
.pdfs span { display: block; font: 400 var(--t-s)/1.4 var(--text); text-transform: none; color: var(--brown); }
.ejemplos { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 17px; }
.ejemplos[hidden] { display: none; }
.ejemplos button { min-height: 24px; padding: 0; border: 0; background: none; color: var(--teal); font: 600 17px/1.4 var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color .15s; }
.ejemplos button:hover { color: var(--pink); }
/* The board's deck: a two-part switch in teal, the chosen part filled. Hidden until the board
   script runs; while scripts run (.js) it keeps its space, so the board doesn't jump when it appears,
   and without them it takes none. */
.barajas { display: flex; }
.barajas[hidden] { display: none; }
.js .barajas[hidden] { display: flex; visibility: hidden; }
.barajas button { padding: 9px 20px; border: 2px solid var(--teal); background: none; color: var(--teal); font: 600 17px/1.2 var(--text); cursor: pointer; transition: background-color .15s, color .15s; }
.barajas button + button { border-left: 0; }
.barajas button:not([aria-pressed="true"]):hover { background: var(--marigold); color: var(--brown); }
.barajas button[aria-pressed="true"] { background: var(--teal); color: var(--cream-light); }

/* ---- How to play: one tabla, four fields, further along in each ---- */
.como { display: grid; grid-template-columns: repeat(4, 1fr); }
.campo { position: relative; min-height: 84svh; padding: var(--m) var(--m) 32px; display: flex; flex-direction: column; color: var(--cream-light); }
.campo:nth-child(1) { background: var(--teal); }
.campo:nth-child(2) { background: var(--pink); }
.campo:nth-child(3) { background: var(--cream); color: var(--brown); }
.campo:nth-child(4) { background: var(--brown); }
.campo h2 { font-size: var(--t-l); }
.mini { width: min(280px, 100%); margin: auto auto 0; padding-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; list-style: none; transition: transform .15s var(--ease); }
.campo:hover .mini { transform: translateY(-6px); }
.mini li { position: relative; }
.mini img { aspect-ratio: 361 / 575; width: 100%; }
.mini li.f::after { content: ""; position: absolute; left: 50%; top: 52%; width: 62%; aspect-ratio: 3 / 2; translate: -50% -50%; rotate: -24deg; border-radius: 50%; background: #3b1b0d; border: 3px solid var(--cream-light); }
.campo p { margin-top: 40px; font: 700 var(--t-l)/1.08 var(--display); text-transform: uppercase; min-height: 2.2em; }
.campo p.nota { margin-top: 10px; min-height: 0; font: 400 var(--t-s)/1.45 var(--text); text-transform: none; }

/* ---- The 54 cards: the name set huge, two prints beside it, then the whole deck as a plain list ---- */
.cartas-sec { background: var(--pink); color: var(--cream-light); }
.cartas-stage { position: relative; overflow: hidden; height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cartas-stage h2 { font-size: var(--t-xxl); text-align: center; }
.cartas-stage h2 span { display: block; }
.print { position: absolute; width: clamp(150px, 19vw, 320px); transition: transform .2s var(--ease); }
.print-a { left: 7vw; top: 16%; rotate: -8deg; }
.print-b { right: 7vw; top: 34%; rotate: 6deg; }
.print:hover { rotate: 0deg; transform: scale(1.03); }
.cartas-note { position: absolute; left: var(--m); bottom: 24px; max-width: 40ch; }
.cartas-lista { padding: 40px var(--m) 160px; }
.cartas-lista > p { font-size: var(--t-l); font-family: var(--display); font-weight: 700; text-transform: uppercase; }
.cartas { columns: 4; column-gap: var(--m); margin: 28px 0 0; padding: 0 0 0 2.2em; font: 600 var(--t-l)/1.5 var(--text); }
.cartas li { break-inside: avoid; }
.cartas li::marker { font-weight: 400; font-size: .7em; }

/* ---- The close: a question with its two answers between its lines ---- */
.pregunta { position: relative; height: 100svh; min-height: 640px; background: var(--brown); color: var(--cream-light); text-align: center; }
.pregunta h2 { font-size: var(--t-xxl); }
.pregunta h2 span { position: absolute; left: 0; right: 0; }
.pregunta .q1 { top: 32px; }
.pregunta .q2 { bottom: 24px; }
.respuesta { position: absolute; left: var(--m); right: var(--m); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.respuesta .botones { display: flex; align-items: center; justify-content: center; gap: 40px; }
.respuesta .btn { min-width: 260px; }
.respuesta .o { font-size: var(--t-m); }
.respuesta p { max-width: 52ch; font-size: 17px; }

/* ---- Footer: the picture half, the menu half ---- */
.pie { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--teal); color: var(--cream-light); }
.pie-foto { position: relative; overflow: hidden; background: var(--cream); }
.pie-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; transform: scale(1.5); transform-origin: 30% 22%; }
.pie-menu { padding: 80px var(--m) 24px clamp(24px, 6vw, 96px); display: flex; flex-direction: column; }
.pie-menu ul { margin: 48px 0 0; padding: 0; list-style: none; }
.pie-menu li + li { margin-top: 18px; }
.pie-menu nav a { display: inline-block; font: 700 clamp(28px, 2.6vw, 40px)/1.05 var(--display); text-transform: uppercase; text-decoration: none; transition: transform .15s var(--ease), color .15s; }
.pie-menu nav a:hover { transform: translateX(12px); color: var(--marigold); }
.pie-blocks { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 64px; font-size: var(--t-s); }
.pie-legal { margin-top: auto; padding-top: 40px; font-size: var(--t-s); }
/* Credit lines for the store buttons' marks: Apple's trademark notice and the CC BY 3.0 attribution Google asks for with the Android robot. */
.pie-credito { margin: 8px 0 0; max-width: 64ch; font-size: var(--t-s); line-height: 1.45; }

/* ---- Home: the printables band ---- */
.papel { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: center; padding: 160px var(--m); background: var(--brown); color: var(--cream-light); overflow: hidden; }
.papel-text { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.papel h2 { font-size: var(--t-xl); }
.papel img { grid-column: 8 / span 5; width: 88%; justify-self: center; rotate: -3deg; }

/* ---- The cantor page (/cantar-loteria/): the card on a teal table, the round beside it ----
   Desktop: two columns, the table (sticky, a screen tall) left, the title, the card's name, the
   buttons and the cards already called right. Phone: the title, then the table, then the rest. */
.cantor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "mesa cabeza" "mesa juego" "mesa salieron"; column-gap: clamp(24px, 4vw, 72px); min-height: 100svh; }
.cantor-cabeza { grid-area: cabeza; padding: var(--m) var(--m) 0 0; }
.cantor-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; color: var(--teal); }
.cantor-nav .link { font-weight: 600; text-underline-offset: 4px; }
.cantor h1 { margin-top: clamp(32px, 6svh, 72px); font-size: clamp(40px, 4.4vw, 76px); color: var(--teal); }
.cantor-lead { margin-top: 14px; max-width: 44ch; }
.cantor-mesa { grid-area: mesa; position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: var(--m); background: var(--teal); overflow: hidden; cursor: pointer; }
.cantor-mesa[data-estado="idle"], .cantor-mesa[data-estado="finished"] { cursor: default; }
.cantor-mesa > * { grid-area: 1 / 1; }
.carta { width: min(100%, calc((100svh - 2 * var(--m)) * 361 / 575)); }
.carta[hidden], .abanico[hidden], .sello[hidden] { display: none; }
.cantor-mesa[data-estado="paused"] .carta, .cantor-mesa[data-estado="finished"] .carta { opacity: .3; }
.abanico { display: flex; justify-content: center; width: min(86%, 600px); }
.abanico img { width: 36%; }
.abanico img:nth-child(1) { rotate: -9deg; translate: 12% 6%; }
.abanico img:nth-child(2) { position: relative; z-index: 1; }
.abanico img:nth-child(3) { rotate: 9deg; translate: -12% 6%; }
.sello { padding: 10px 28px; font: 700 clamp(40px, 5vw, 72px)/1 var(--display); text-transform: uppercase; rotate: -3deg;
  background: var(--pink); color: var(--cream-light); }
.cantor-mesa[data-estado="finished"] .sello { background: var(--marigold); color: var(--brown); }
.cantor-juego { grid-area: juego; padding: clamp(28px, 5svh, 56px) var(--m) 0 0; }
/* One line at every width: the longest name, El Violoncello, is 5.75em wide in Barlow Condensed. */
.cantor-nombre { font-size: clamp(48px, 6.6vw, 112px); color: var(--brown); }
.cantor-cuenta { margin-top: 10px; font: 600 var(--t-l)/1.2 var(--text); color: var(--teal); font-variant-numeric: tabular-nums; }
.cantor-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cantor-botones .btn { min-width: 200px; }
.btn-2 { background: var(--teal); color: var(--cream-light); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { background: var(--marigold); color: var(--brown); }
.btn-2:disabled:hover { background: var(--teal); color: var(--cream-light); }
button.btn { border: 0; cursor: pointer; }
.btn[hidden] { display: none; }
/* Barajear: a real button beside the round's two, outlined because it ends the round (it asks first). */
button.btn-borde { padding: 14px 24px; border: 2px solid var(--teal); background: none; color: var(--teal); }
.btn-borde:hover { background: var(--teal); color: var(--cream-light); }
.cantor-ajustes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; margin-top: 28px; }
.cantor-ajustes label { display: flex; flex-direction: column; gap: 6px; font: 600 var(--t-s)/1.2 var(--text); color: var(--teal); }
.cantor-ajustes select { min-width: 140px; padding: 10px 12px; border: 2px solid var(--teal); border-radius: 0; background: var(--cream-light); color: var(--brown); font: 600 17px/1.2 var(--text); }
.cantor-ajustes select:disabled { opacity: .5; }
.btn-3 { padding: 12px 0; border: 0; background: none; color: var(--teal); font: 600 17px/1.2 var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color .15s; }
.btn-3:hover { color: var(--pink); }
.btn-3[hidden] { display: none; }
.cantor-mensaje { margin-top: 16px; font-size: var(--t-s); }
.cantor-mensaje:empty { margin-top: 0; } /* stays in the accessibility tree, so its first message is read */
.cantor-salieron { grid-area: salieron; padding: clamp(32px, 6svh, 64px) var(--m) 48px 0; }
.cantor-sub { margin: 0; font: 700 var(--t-l)/1 var(--display); text-transform: uppercase; color: var(--teal); }
.ultimas { display: flex; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ultimas li { width: clamp(56px, 5.6vw, 96px); }
.ultimas li:first-child { width: clamp(72px, 7vw, 120px); }
.cantor-vacio { margin-top: 12px; font-size: var(--t-s); }
.cantor-vacio[hidden] { display: none; }
.cantadas { margin-top: 28px; }
.cantadas summary { min-height: 24px; width: fit-content; color: var(--teal); font: 600 17px/1.4 var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cantadas summary:hover { color: var(--pink); }
.cantadas ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.cantadas li { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.25; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.confirmar:not([open]) { display: none; } /* browsers without <dialog> (Safari before 15.4) */
.confirmar { max-width: min(440px, calc(100vw - 2 * var(--m))); padding: 32px; border: 0; background: var(--cream-light); color: var(--brown); }
.confirmar::backdrop { background: rgb(28 95 114 / .72); }
.confirmar h2 { font-size: clamp(40px, 4.4vw, 64px); color: var(--teal); }
.confirmar p { margin-top: 12px; }
.confirmar-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* How it goes: the title large on the left, the three steps and the app on the right. */
.como-cantar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 56px; padding: 160px var(--m); background: var(--brown); color: var(--cream-light); }
.como-cantar h2 { grid-column: 1 / span 5; font-size: var(--t-xl); }
.pasos { grid-column: 7 / span 6; margin: 0; padding-left: 1.6em; max-width: 46ch; }
.pasos li + li { margin-top: 36px; }
.pasos li::marker { font: 700 var(--t-l) var(--display); color: var(--marigold); }
.pasos h3 { margin-bottom: 6px; font-size: var(--t-l); line-height: 1.05; color: var(--marigold); }
.pasos a { text-underline-offset: 4px; }
.como-app { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 20px; }
.como-app .stores { display: flex; flex-wrap: wrap; gap: 12px; }
.carta.llega { animation: llega 350ms var(--ease); }
/* ---- The tabla page (/jugar-loteria/): the cantor page's layout (.cantor), with the 4×4 board on
   the teal table. A frijol is the printables page's bean; a completed figure outlines its tiles. ---- */
/* The table holds the cantor bar (#12) over the board: a column, the board as tall as the screen
   leaves once the bar's row (the same height off and on, so the board never jumps) is taken out. */
.jugar .cantor-mesa { --barra-h: 72px; --mesa-y: 16px; --extra-h: 0px; --filas: 2;
  --tablero-w: min(100%, calc((100svh - 2 * var(--mesa-y) - 18px - var(--barra-h) - 10px - var(--extra-h)) * 361 / 575 + 18px));
  /* Several tablas (#13 decision D), two per row: a small tabla is padding 10, title 44, gap 4 and four
     tiles with three 3px gaps; the rows share the height the bar leaves. At least 320px wide where the
     table has that much: where they don't fit then (a phone on its side) the table scrolls. */
  --tile-h: calc(((100svh - 2 * var(--mesa-y) - var(--barra-h) - 10px - (var(--filas) - 1) * 10px) / var(--filas) - 67px) / 4);
  --resumen-w: min(100%, max(320px, calc(2 * (4 * var(--tile-h) * 361 / 575 + 19px) + 10px)));
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: var(--mesa-y); cursor: default; }
.jugar .cantor-mesa[data-filas="1"] { --filas: 1; }
.jugar .cantor-mesa[data-vista="grande-varias"] { --extra-h: 54px; } /* the way back to all of them */
.jugar .cantor-mesa[data-vista="resumen"] { overflow-y: auto; }
/* Centred when it fits; when it doesn't, the auto margins give way and it scrolls from the top. */
.jugar .barra { margin-top: auto; }
.jugar .cantor-mesa > * { flex: none; } /* scrolling, not squeezing, when the small tablas don't fit */
.tableros { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-bottom: auto; }
.tablero[hidden], .resumen[hidden], .todas[hidden], .jugar-n[hidden] { display: none; }
.todas { width: var(--tablero-w); min-height: 44px; padding: 0; border: 0; background: none; color: var(--cream-light); font: 600 17px/1.2 var(--text);
  text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color .15s; }
.todas:hover { color: var(--marigold); }
.resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: var(--resumen-w); }
.chica { --focus: var(--brown); display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 5px; background: var(--cream-light); }
.chica.gano { outline: 4px solid var(--marigold); outline-offset: -4px; }
.chica-titulo { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--brown); font: 700 20px/1 var(--display); text-transform: uppercase;
  text-align: left; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .15s; }
.chica-titulo:hover { color: var(--pink); }
.chica .tablero { width: 100%; gap: 3px; }
.cuantas { margin: 0 0 28px; padding: 0; border: 0; }
.cuantas legend { padding: 0; margin-bottom: 10px; font: 700 var(--t-l)/1 var(--display); text-transform: uppercase; color: var(--teal); }
.cuantas label { display: inline-flex; align-items: center; gap: 6px; min-width: 56px; min-height: 44px; margin: 0 6px 6px 0; padding: 0 14px;
  border: 2px solid var(--teal); color: var(--teal); font: 600 17px/1 var(--text); cursor: pointer; }
.cuantas input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.cuantas:disabled { opacity: .5; }
.cuantas:disabled label { cursor: default; }
.tablero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: var(--tablero-w, 100%);
  margin: 0; padding: 0; list-style: none; }
/* As wide as the board, but never narrower than its card, name, last four and button need (a phone
   on its side leaves a board about 180px wide). */
.barra { width: max(var(--tablero-w), min(100%, 360px)); height: var(--barra-h); }
.jugar .cantor-mesa[data-vista="resumen"] .barra { width: max(var(--resumen-w), min(100%, 360px)); }
.barra-inicio { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; color: var(--cream-light); }
.barra-inicio p { font: 600 17px/1.25 var(--text); }
.barra-inicio .btn, .barra-tocar { padding: 12px 18px; font-size: 17px; }
.barra-cantor { --focus: var(--brown); display: flex; align-items: center; gap: 10px; height: 100%; padding: 6px 8px 6px 6px; background: var(--cream-light); color: var(--brown); }
.barra-inicio[hidden], .barra-cantor[hidden], .jugar-cantor[hidden] { display: none; }
.barra-carta { flex: none; width: 37px; }
.barra[data-estado="paused"] .barra-carta, .barra[data-estado="finished"] .barra-carta { opacity: .4; }
.barra-texto { flex: 1; min-width: 0; }
.barra-nombre { overflow: hidden; font: 700 24px/1 var(--display); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.barra-fila { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
/* The last four, newest first; where the bar is too narrow the oldest wrap out of sight (the app's ViewThatFits). */
.barra-ultimas { display: flex; flex-wrap: wrap; gap: 4px; height: 33px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.barra-ultimas li { width: 21px; }
.barra-cuenta { font: 600 15px/1 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-tocar { flex: none; min-width: 108px; }
/* The app's hint: a called card with no frijol gets a pink dot in its corner. */
.ficha.cantada:not([aria-pressed="true"])::after { content: ""; position: absolute; top: 5%; right: 7%; width: clamp(10px, 20%, 20px); aspect-ratio: 1; border-radius: 50%;
  background: var(--pink); border: 2px solid var(--cream-light); }
.jugar-cantor { margin-top: 32px; }
.jugar-cantor .cantor-ajustes { margin-top: 16px; }
.marcar { display: flex; align-items: center; gap: 10px; margin-top: 20px; font: 600 17px/1.2 var(--text); color: var(--teal); cursor: pointer; }
.marcar input { width: 22px; height: 22px; margin: 0; accent-color: var(--pink); }
.marcar-nota { margin-top: 4px; padding-left: 32px; font-size: var(--t-s); }
.ficha { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.ficha:disabled { cursor: default; }
.ficha img { aspect-ratio: 361 / 575; width: 100%; }
.ficha[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; background: rgb(122 59 30 / .28); }
.ficha[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; top: 52%; width: 62%; aspect-ratio: 3 / 2; translate: -50% -50%; rotate: -24deg;
  border-radius: 50%; background: #3b1b0d; border: 3px solid var(--cream-light); }
.ficha.gana img { outline: 4px solid var(--marigold); outline-offset: -4px; }
.jugar-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .22em; font-size: clamp(40px, 4.4vw, 76px); color: var(--teal); }
.jugar-n input { width: 3ch; field-sizing: content; min-width: 1ch; padding: 0; border: 0; border-bottom: 4px solid var(--pink); background: none; color: var(--pink);
  font: inherit; letter-spacing: inherit; text-transform: inherit; caret-color: var(--brown); }
.jugar-n span { color: var(--brown); }
.jugar-cuenta { margin-top: 28px; font: 600 var(--t-l)/1.2 var(--text); color: var(--teal); font-variant-numeric: tabular-nums; }
.jugar-figuras { margin-top: 6px; }
.reglas { margin-top: 28px; }
.reglas-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.reglas-botones button { padding: 10px 16px; border: 2px solid var(--teal); background: none; color: var(--teal); font: 600 17px/1.2 var(--text); cursor: pointer; transition: background-color .15s, color .15s; }
.reglas-botones button[aria-pressed="true"] { background: var(--teal); color: var(--cream-light); }
.reglas-botones button[aria-disabled="true"] { cursor: not-allowed; }
.reglas-botones button:not([aria-pressed="true"]):not(:disabled):hover { background: var(--marigold); color: var(--brown); }
.reglas-botones button:disabled, .jugar-n input:disabled, .btn-3:disabled { opacity: .5; cursor: default; }
.btn-3:disabled:hover { color: var(--teal); }

/* Motion: the title block rises in on load, and the fan drifts like the home page's cards. */
.cantor-nav, .cantor h1, .cantor-lead { animation: fade-up 600ms var(--ease) both; }
.cantor h1 { animation-delay: 80ms; }
.cantor-lead { animation-delay: 160ms; }
.abanico img { animation: lift 2.4s ease-in-out 1s forwards; }
.abanico img:nth-child(2) { animation-delay: 1.6s; }
.abanico img:nth-child(3) { animation-delay: 2.2s; }
/* Through transform, so it adds to each fanned card's own rotate and translate instead of replacing them. */
@keyframes lift { to { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes llega { from { transform: perspective(900px) rotateY(28deg) scale(.97); } }

/* ---- Motion: the masked headline on load, entrances once per section, one drifting picture. ---- */
.hero-title .line > span { animation: rise 900ms var(--ease) both; }
.hero-title .line + .line > span { animation-delay: 110ms; }
.hero-bar, .hero-low { animation: fade-up 600ms var(--ease) 650ms both; }
.hero-pic { animation: drift 2.4s ease-in-out 1.2s forwards; } /* settled within 5 s: anything longer would need a pause control */
@keyframes rise { from { transform: translateY(110%); } }
@keyframes fade-up { from { transform: translateY(14px); } }
@keyframes drift { to { translate: 0 -14px; rotate: 1.5deg; } }
/* Entrances move but never hide: where the animation clock stalls (a background tab, an in-app browser, a
   renderer's screenshot), everything still shows. */
.js [data-enter] > * { transform: translateY(24px); transition: transform .7s var(--ease); }
.js [data-enter].in > * { transform: none; }
.js [data-enter].in > :nth-child(2) { transition-delay: 80ms; }
.js [data-enter].in > :nth-child(3) { transition-delay: 160ms; }
.js [data-enter].in > :nth-child(4) { transition-delay: 240ms; }
.js [data-enter].in > :nth-child(5) { transition-delay: 320ms; }
@media print { .js [data-enter] > * { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-enter] > * { transform: none; }
}

/* ---- Tablet ---- */
@media (max-width: 1099px) {
  .como { grid-template-columns: 1fr 1fr; }
  .campo { min-height: 70svh; }
  .cartas { columns: 3; }
  .typed-side { gap: 24px; }
}

/* ---- The cantor page below 700px: one column, the table between the title and the buttons ---- */
@media (max-width: 699px) {
  .cantor { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "cabeza" "mesa" "juego" "salieron"; }
  .cantor-cabeza, .cantor-juego, .cantor-salieron { padding-left: var(--m); padding-right: var(--m); }
  .cantor-cabeza { padding-bottom: 28px; }
  .cantor h1 { margin-top: 28px; font-size: clamp(36px, 10.4vw, 56px); }
  .cantor-mesa { position: static; height: auto; padding: 20px var(--m); }
  .carta { width: min(100%, calc(56svh * 361 / 575)); }
  .cantor-juego { padding-top: 20px; }
  .cantor-nombre { font-size: clamp(40px, 12vw, 64px); }
  .cantor-cuenta { margin-top: 4px; font-size: var(--t-m); }
  .cantor-botones { margin-top: 18px; }
  .cantor-botones .btn { flex: 1 1 0; min-width: 0; padding: 16px 12px; }
  .cantor-botones .btn-borde { flex-basis: 100%; padding: 14px 12px; } /* its own line, under Pausa and Siguiente */
  .cantor-ajustes { margin-top: 20px; gap: 12px 16px; }
  .cantor-ajustes label { flex: 1 1 140px; }
  .cantor-ajustes select { width: 100%; min-width: 0; }
  .ultimas li { width: 16vw; }
  .ultimas li:first-child { width: 20vw; }
  .como-cantar { padding: 96px var(--m); row-gap: 40px; }
  .como-cantar h2, .pasos, .como-app { grid-column: 1 / -1; }
  .jugar .cantor-mesa { --tablero-w: 100%; --resumen-w: 100%; }
  .jugar-n { font-size: clamp(36px, 10.4vw, 56px); }
}
@media (max-width: 1099px) { .cantor-nav .wordmark { white-space: normal; } }

/* ---- Phone: its own composition ---- */
@media (max-width: 400px) { .wordmark { white-space: normal; font-size: 16px; } }
@media (max-width: 640px) {
  :root { --seam: 46%; --t-xl: clamp(36px, 10.4vw, 64px); --t-xxl: clamp(64px, 20vw, 120px); }
  .hero-title { font-size: 13.4vw; }
  .wordmark { font-size: 18px; }
  .hero-bar .btn { font-size: 15px; padding: 11px 14px; }
  .hero-nav { gap: 6px 20px; font-size: 17px; }
  .hero-low { bottom: auto; top: calc(var(--seam) + 72px); right: var(--m); width: auto; }
  .hero-low p { font-size: 20px; }
  .hero-pic { width: 58vw; right: 8vw; transform: translateY(55%) rotate(4deg); }
  .hero-pic.card { width: 30vw; }
  .hero-pic.c1 { right: 46vw; }
  .hero-pic.c2 { right: 27vw; }
  .hero-pic.c3 { right: 9vw; }
  .typed { padding: 96px var(--m); }
  .typed-line input { width: 2.2ch; }
  .typed-body { margin-top: 28px; row-gap: 40px; }
  .tabla-col, .typed-side { grid-column: 1 / -1; }
  .ejemplos { gap: 10px; }
  .ejemplos button { padding: 11px 16px; background: var(--teal); color: var(--cream-light); text-decoration: none; }
  .ejemplos button:hover { background: var(--brown); color: var(--cream-light); }
  .como { grid-template-columns: 1fr; }
  .campo { min-height: 64svh; }
  .campo p { margin-top: 28px; }
  .cartas-stage { height: 86svh; justify-content: flex-start; padding-top: 18svh; }
  .print { width: 46vw; top: auto; bottom: 10%; }
  .print-a { left: 4vw; }
  .print-b { right: 4vw; bottom: 4%; }
  .cartas-note { display: none; }
  .cartas { columns: 2; font-size: 19px; padding-left: 1.9em; }
  .pregunta h2 span { padding: 0 var(--m); }
  /* 72% of the column, but never narrower than the Android button with its mark (it overflowed at 375px). */
  .respuesta .botones { flex-direction: column; gap: 12px; width: min(100%, max(72%, 270px)); }
  .respuesta .btn { min-width: 0; width: 100%; }
  .pie { grid-template-columns: 1fr; }
  .pie-foto { height: 50svh; }
  .pie-menu { padding: 48px var(--m) 24px; }
  .pie-menu nav a { font-size: 8vw; }
  .papel { padding: 96px var(--m); row-gap: 48px; }
  .papel-text, .papel img { grid-column: 1 / -1; }
}

/* ---- The accessibility statement: plain reading text. ---- */
.aviso { max-width: 68ch; margin: 0 auto; padding: var(--m) var(--m) 96px; }
.aviso h1 { margin: 64px 0 24px; font-size: clamp(40px, 6vw, 72px); color: var(--teal); }
.aviso h2 { margin: 48px 0 12px; font-size: var(--t-l); color: var(--teal); }
.aviso p, .aviso li { font-size: var(--t-m); line-height: 1.5; }
.aviso p + p { margin-top: 12px; }
.aviso li + li { margin-top: 8px; }
.aviso a { color: var(--teal); text-underline-offset: 4px; }