/* Páginas de contenido (HTML estático, sin JavaScript). Misma identidad que la app: tómbola de feria (DISEÑO.md). */
@font-face { font-family: 'Bowlby One'; src: url(/fonts/bowlby-one.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; src: url(/fonts/atkinson-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; src: url(/fonts/atkinson-700.woff2) format('woff2'); font-display: swap; }
:root {
  --night: #14213d; --night-2: #1d2f57; --red: #d7263d; --yellow: #f5b700; --paper: #f6eedc;
  --ink: #1b1b1b; --green: #2e8b57; --white: #fffaf0; --soft: #c9d2e6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--white); font: 18px/1.55 'Atkinson Hyperlegible', system-ui, sans-serif; }
a { color: var(--yellow); }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.awning { height: 22px; background: repeating-linear-gradient(90deg, var(--red) 0 26px, var(--paper) 26px 52px); border-bottom: 4px solid var(--ink); }
.bulbs { height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='22'%3E%3Ccircle cx='12' cy='11' r='6' fill='%23f5b700' stroke='%231b1b1b' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: repeat-x; }
main { max-width: 680px; margin: 0 auto; padding: 20px 16px 40px; }
.crumbs { font-size: .95rem; margin: 0 0 18px; }
h1, h2, h3 { font-family: 'Bowlby One', 'Arial Black', sans-serif; font-weight: 400; line-height: 1.12; letter-spacing: .01em; }
h1 { color: var(--yellow); font-size: clamp(1.9rem, 7vw, 2.6rem); margin: 0 0 .4em; }
h2 { color: var(--yellow); font-size: 1.35rem; margin: 1.8em 0 .5em; }
h3 { font-size: 1.05rem; margin: 1.2em 0 .3em; }
p, li { margin: 0 0 .9em; }
.lead { font-size: 1.12rem; color: var(--white); }
.hint { color: var(--soft); font-size: .95rem; }
ol, ul { padding-left: 1.3em; }
.paper { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px 18px 4px 18px; box-shadow: 4px 5px 0 var(--ink); padding: 16px; margin: 20px 0; }
.paper a { color: #8a1020; }
.cta { display: inline-block; margin: 8px 0 4px; padding: 14px 26px; background: var(--red); color: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 5px 0 var(--ink); font-family: 'Bowlby One', 'Arial Black', sans-serif; font-size: 1.1rem; text-decoration: none; }
.cta:active { transform: translate(2px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.shots { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; margin: 16px 0; scroll-snap-type: x mandatory; }
.shots figure { flex: 0 0 min(62%, 240px); margin: 0; scroll-snap-align: start; }
.shots img { width: 100%; height: auto; display: block; border: 3px solid var(--paper); border-radius: 14px; box-shadow: 4px 5px 0 var(--ink); background: var(--night-2); }
.shots figcaption { font-size: .9rem; color: var(--soft); margin-top: 8px; }
.more { list-style: none; padding: 0; }
.more li { margin: 0 0 .6em; }
dt { font-weight: 700; margin-top: 1em; }
dd { margin: .2em 0 0; color: var(--soft); }
footer { max-width: 680px; margin: 0 auto; padding: 18px 16px 32px; display: flex; gap: 20px; flex-wrap: wrap; font-size: .95rem; border-top: 3px dashed var(--night-2); }