/* Don Taco — misma paleta y tipografía que el juego (www/index.html) */
:root {
  --out: #3a2416; --brown: #2a1a10; --cream: #fff7e6; --pink: #e4007c; --yellow: #ffcf33;
  --orange: #ff8a00; --green: #13a24a; --blue: #1f6fd1;
  --brand: "Marker Felt", "Chalkboard SE", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%23f6f1e4' stroke='%23d9cfb8'/%3E%3Cg fill='%231f4fa3'%3E%3Ccircle cx='28' cy='28' r='8'/%3E%3Cpath d='M28 5q8 11 0 16q-8-5 0-16zM28 51q8-11 0-16q-8 5 0 16zM5 28q11-8 16 0q-5 8-16 0zM51 28q-11-8-16 0q5 8 16 0z'/%3E%3Cpath d='M0 0h9L0 9zM56 0h-9l9 9zM0 56h9l-9-9zM56 56h-9l9-9z'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='3.5' fill='%23f2b51f'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--brown); color: var(--cream); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, .btn, .tagline { font-family: var(--brand); font-weight: normal; }
a { color: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* portada: rayos de sol como el ícono + papel picado */
.hero { position: relative; text-align: center; padding: 70px 0 56px; overflow: hidden; color: var(--out);
  background: url(garland.svg) top center / 1160px 70px repeat-x, repeating-conic-gradient(from 0deg at 50% 45%, var(--orange) 0 11.25deg, #ffb21e 0 22.5deg);
  border-bottom: 10px solid #8a5a33; }
.hero h1 { margin: 0; }
.hero h1 img { width: min(400px, 82vw); height: auto; display: block; margin: 0 auto -10px; }
.tagline { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin: 8px 0 22px; }
.btn { display: inline-block; font-size: 26px; padding: 8px 30px; color: #fff; background: var(--pink); border: 4px solid var(--out); border-radius: 20px;
  box-shadow: 0 7px 0 var(--out); text-decoration: none; text-shadow: 0 3px 0 #0005; transition: transform .1s, box-shadow .1s; }
a.btn:hover { color: #fff; transform: translateY(2px); box-shadow: 0 5px 0 var(--out); }
.btn small { display: block; font-size: 16px; line-height: 1; opacity: .9; }
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.promises li { background: #2a1a10e0; color: #fff7e0; padding: 4px 16px; border-radius: 99px; font-size: 15px; font-weight: 600; }

section { padding: 64px 0; }
h2 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin: 0 0 16px; color: var(--yellow); text-align: center; }
.lead { max-width: 40em; margin: 0 auto 40px; text-align: center; font-size: 18px; color: #f3e6cc; }

/* modos: tarjetas como los botones del menú */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mode { background: var(--cream); color: var(--out); border: 4px solid var(--out); border-radius: 22px; box-shadow: 0 8px 0 #0006; overflow: hidden; }
.mode h3 { margin: 0; padding: 8px 12px; font-size: 26px; text-align: center; color: #fff; background: var(--c, var(--pink)); border-bottom: 4px solid var(--out); text-shadow: 0 2px 0 #0005; }
.mode p { margin: 0; padding: 14px 18px 18px; font-size: 16px; }
.mode.green { --c: var(--green); } .mode.blue { --c: var(--blue); }
.mode.orange h3 { --c: var(--orange); color: var(--out); text-shadow: none; }
.extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 40px 0 0; padding: 0; list-style: none; color: #f3e6cc; }
.extras li::before { content: "★ "; color: var(--yellow); }

/* capturas */
.shots { background: var(--tile) 0 0 / 56px 56px; border-block: 10px solid #8a5a33; }
.shots h2 { color: var(--out); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; }
.grid img { width: 100%; height: auto; display: block; border: 5px solid var(--out); border-radius: 22px; box-shadow: 0 8px 0 #0005; background: var(--out); }

/* soporte */
.card { max-width: 760px; margin: 0 auto; background: var(--cream); color: var(--out); border: 5px solid var(--out); border-radius: 24px; box-shadow: 0 10px 0 #0006; padding: 28px clamp(18px, 4vw, 40px) 34px; }
.card h2 { color: var(--out); }
.card a:not(.btn) { color: #b0005f; }
details { border-bottom: 2px dashed #3a241633; padding: 12px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 18px; }
details p { margin: 8px 0 0; }
.contact { text-align: center; margin-top: 28px; }
.contact p { margin: 0 0 14px; }

footer { padding-bottom: 40px; font-size: 15px; color: #d9c8a8; }
footer::before { content: ""; display: block; height: 28px; margin-bottom: 28px; background: var(--tile) 0 0 / 28px 28px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer nav { display: flex; gap: 18px; }
footer a { color: #d9c8a8; }

@media (max-width: 900px) { .modes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .modes, .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 60px; }
  .btn { font-size: 22px; }
}