:root {
  --golfo: #17C3B2;
  --golfo-dark: #0F86A0;
  --hondo: #0A4C70;
  --noche: #0B3554;
  --krill: #FF4D7A;
  --krill-dark: #D62E5C;
  --sol: #FFC93C;
  --tinta: #1C2740;
  --gris: #5A6577;
  --nube: #F2F8FA;
  --linea: #E1ECEF;
  --borde: #D8E7EC;
  --papel: #FFF8E6;
  /* Atkinson Hyperlegible: hecha para leer fácil a cualquier edad. Lilita One: del argentino Juan Montoreano */
  --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Lilita One', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
}
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lilita-one-latin.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/atkinson-next-latin.woff2) format('woff2'); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; font-family: var(--font); font-synthesis: none; color: var(--tinta); background: var(--nube); -webkit-font-smoothing: antialiased; line-height: 1.4; font-size: 16px; }
main { overflow-x: hidden; overflow-x: clip; }
.logo, .top-play, .now-temp, .readings b, .block h2, .btn, .pos, .arcade h2, .arcade-sub { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; border-radius: 6px; }

/* Encabezado */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.top-in { display: flex; align-items: center; gap: 12px; height: 56px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 22px; color: var(--noche); white-space: nowrap; margin-right: auto; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; background: url(../juegos/img/icon.svg?v=2) center / cover; }
.top-nav { display: flex; gap: 2px; }
.top-nav a { text-decoration: none; font-weight: 600; padding: 7px 11px; border-radius: 999px; white-space: nowrap; color: var(--gris); }
.top-nav a:hover { background: #E7F4F6; color: var(--tinta); }
.top-play { text-decoration: none; background: var(--krill); color: #fff; font-size: 18px; padding: 7px 18px 8px; border-radius: 999px; box-shadow: 0 3px 0 var(--krill-dark); }
@media (max-width: 760px) { .top-nav { display: none; } }

/* ---------------- Hoy en Madryn: la playa dibujada y el tiempo encima ---------------- */
/* En el celu: el tiempo arriba, sobre el mismo celeste del cielo del dibujo, y la playa entera abajo */
.scene { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, #2A84BF 0%, #3A9AD2 100%); display: flex; flex-direction: column; }
.scene-text { order: 1; } .scene-art { order: 2; }
.scene-art { position: relative; margin-top: -44px; aspect-ratio: 4 / 3; max-height: 430px; width: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
.scene-pano { position: absolute; inset: 0; }
.scene-still, .scene-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.scene-video { opacity: 0; transition: opacity .8s ease; }
.scene-video.on { opacity: 1; }
.scene-text { position: relative; z-index: 2; padding-top: 18px; text-shadow: 0 2px 10px rgba(6, 40, 66, .25); }
.date { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.3; }
@media (max-width: 420px) { .date-place { display: none; } }
.temp-line { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.now-temp { font-size: 92px; line-height: .9; letter-spacing: -.01em; flex: none; text-shadow: 0 3px 0 rgba(6, 40, 66, .18); }
.now-text { min-width: 0; max-width: 30ch; }
.now-desc { margin: 0; font-size: 21px; line-height: 1.15; font-weight: 800; }
.now-feels { margin: 4px 0 0; font-size: 15px; line-height: 1.3; color: #F1FAFF; }
/* En compu: la playa ancha (el mismo dibujo, estirado hacia la izquierda con más cielo y el muelle entero)
   y el tiempo a la izquierda, sobre el cielo. El panorama mide 3 a 1 y tapa todo el ancho, pegado a la derecha;
   el video de la playa va justo encima de su parte original (el 44 % de la derecha), con el borde fundido. */
@media (min-width: 761px) {
  .scene { height: clamp(460px, 34vw, 640px); }
  .scene-art { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; max-height: none; -webkit-mask-image: none; mask-image: none; container-type: size; }
  .scene-pano { inset: auto; right: 0; width: max(100cqw, 300cqh); height: max(100cqh, 33.334cqw); top: calc((100cqh - max(100cqh, 33.334cqw)) * .62); }
  .scene-still { object-position: 100% 62%; }
  .scene-video { inset: auto; top: 0; left: 55.5556%; width: 44.4444%; height: 100%; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%); mask-image: linear-gradient(90deg, transparent 0, #000 10%); }
  .scene-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 95% at 0% 0%, rgba(11, 53, 84, .42) 0%, rgba(11, 53, 84, .18) 38%, rgba(11, 53, 84, 0) 62%); }
  .scene-text { width: 100%; padding-top: 40px; text-shadow: 0 2px 14px rgba(6, 40, 66, .4); }
  .date { font-size: 19px; }
  .now-temp { font-size: 120px; } .now-desc { font-size: 30px; } .now-feels { font-size: 17px; }
  .now-text { max-width: 40ch; }
}

/* Las mediciones: una sola franja blanca que se apoya sobre el mar */
.readings {
  list-style: none; margin: -18px 0 0; padding: 0; position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea);
  border-radius: 22px; overflow: hidden; box-shadow: 0 3px 0 var(--borde);
}
.readings li { background: #fff; padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-label { font-size: 14px; color: var(--gris); }
.readings b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.readings small { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--gris); }
.r-sub { font-size: 13px; color: var(--gris); line-height: 1.3; }
.r-sub a { color: var(--golfo-dark); }
.r-sub .up { color: var(--krill-dark); font-weight: 600; }
.r-sub .down { color: #0E7A55; font-weight: 600; }
.arrow { display: inline-block; margin-right: 4px; color: var(--golfo-dark); transition: transform .6s; }
/* La noticia importante del día: un mensaje lindo, con su cartelito de "última hora" que late */
.readings { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.readings .r-msg { background: linear-gradient(160deg, #FFF8E6 0%, #FFEFF3 100%); }
.r-msg .r-label { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--krill-dark); }
.r-live { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--krill); }
.r-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--krill); animation: r-live 1.8s ease-out infinite; }
@keyframes r-live { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
.r-msg p { margin: 3px 0 0; font-family: var(--display); font-size: 18px; line-height: 1.16; color: var(--tinta); text-wrap: pretty; }
.r-msg p.nuevo { animation: r-nuevo .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes r-nuevo { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .r-live::after, .r-msg p.nuevo { animation: none; } }
/* en el celu: viento y mar arriba; abajo el sol y, más ancha, la noticia */
@media (max-width: 760px) {
  .readings { grid-template-columns: repeat(20, minmax(0, 1fr)); } .readings b { font-size: 24px; }
  .readings li:nth-child(1), .readings li:nth-child(2) { grid-column: span 10; }
  .readings li:nth-child(3) { grid-column: span 7; }
  .readings .r-msg { grid-column: span 13; padding-right: 12px; }
  .r-msg .r-label { font-size: 13.5px; white-space: nowrap; }
  .r-msg p { font-size: 16px; }
}

/* Columnas */
.grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 30px; align-items: start; }
.block { margin-top: 30px; }
.block h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.05; color: var(--noche); }
.lead { margin: -4px 0 12px; color: var(--gris); max-width: 62ch; }
.fine { margin: 8px 2px 0; font-size: 13px; color: var(--gris); }
.panel, .verdicts, .weekly, .ads, .days, .fauna { background: #fff; border-radius: 22px; box-shadow: 0 3px 0 var(--borde); }
@media (max-width: 760px) {
  .grid { display: flex; flex-direction: column; }
  .main-col, .side-col { display: contents; }
  #sepuede { order: 1; } #juegos { order: 2; } #historias { order: 3; } .side-col .block:first-child { order: 4; } #recordar { order: 5; } #fauna { order: 6; } #destacados { order: 7; }
  .block { margin-top: 26px; }
  .block h2 { font-size: 28px; }
}

/* ¿Se puede hoy? */
.verdicts { list-style: none; margin: 0; padding: 4px 0; }
.verdicts li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 16px; }
.verdicts li + li { border-top: 1px solid var(--linea); }
.v-ic { font-size: 26px; line-height: 1; text-align: center; }
.v-name { font-weight: 700; font-size: 17px; line-height: 1.2; }
.v-why { display: block; font-weight: 400; font-size: 14px; color: var(--gris); }
.v-tag { font-weight: 700; font-size: 15px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.v-good { background: #DDF6EA; color: #0E7A55; }
.v-ok { background: #FFF1C7; color: #7A5200; }
.v-no { background: #EEF2F5; color: var(--gris); }
.v-bad { background: #FFE3EA; color: #B4234C; }
.v-info { background: #E3F3FB; color: #0F6E8C; }

/* ---------------- Juegos: una franja de golfo con las figuritas ---------------- */
.arcade {
  grid-column: 1 / -1; position: relative; margin: 46px calc(50% - 50vw) 6px; padding: 30px 0 44px; color: #fff;
  background: linear-gradient(180deg, #17BDB3 0, #0E8DA6 38%, #0A5A82 78%, #0A4C70 100%);
}
.arcade::before, .arcade::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; background-repeat: repeat-x; }
.arcade::before {
  top: -24px; height: 26px; background-size: 150px 26px; opacity: .5; animation: ola 12s linear infinite reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 26'%3E%3Cpath d='M0 15C25 4 50 4 75 15s50 11 75 0v11H0z' fill='%237DEBDD'/%3E%3C/svg%3E");
}
.arcade::after {
  top: -18px; height: 20px; background-size: 110px 20px; animation: ola2 8s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cpath d='M0 11C18 3 37 3 55 11s37 8 55 0v9H0z' fill='%2317BDB3'/%3E%3C/svg%3E");
}
@keyframes ola { to { background-position-x: 150px; } }
@keyframes ola2 { to { background-position-x: 110px; } }
.arcade-in {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "feat more"; gap: 18px 36px; align-items: start;
}
.arcade-head { grid-area: head; }
.arcade h2 { margin: 0; font-size: 44px; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(4, 34, 56, .3); }
.arcade-head p { margin: 6px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.feat-col { grid-area: feat; display: flex; flex-direction: column; gap: 16px; }
.feature {
  grid-area: feat; display: block; text-decoration: none; color: var(--tinta); background: #fff; border-radius: 30px; overflow: hidden;
  box-shadow: 0 8px 0 rgba(4, 34, 56, .4), 0 22px 44px rgba(4, 34, 56, .28); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.feature:hover { transform: translateY(-4px) rotate(-.5deg); }
.feature:active { transform: translateY(3px) scale(.985); transition-duration: .08s; }
.feature-art { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--g1); border: 6px solid #fff; border-bottom: 0; border-radius: 30px 30px 0 0; }
.feature-art img, .tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.feature-art img.svg { inset: 10% 26%; width: 48%; height: 80%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12)); }
.feature-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-130%); animation: brillo 7s ease-in-out 2s infinite;
}
@keyframes brillo { 0%, 78% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.ribbon {
  position: absolute; left: 10px; top: 12px; z-index: 1; padding: 6px 14px 8px; border-radius: 12px; transform: rotate(-3deg);
  font-family: var(--display); font-size: 18px; line-height: 1; color: var(--tinta); background: var(--sol); box-shadow: 0 3px 0 #E0A400, 0 6px 14px rgba(0, 0, 0, .18);
}
.feature-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 18px; }
.feature-name { font-family: var(--display); font-size: 38px; line-height: .95; color: var(--g2); }
.feature-prize, .feature-lead { font-size: 16px; line-height: 1.35; color: var(--gris); }
.feature-prize b, .feature-lead b { color: var(--tinta); font-weight: 800; }
.btn-big {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; margin-top: 4px; border-radius: 20px;
  background: var(--krill); color: #fff; font-family: var(--display); font-size: 28px; letter-spacing: .02em; box-shadow: 0 6px 0 var(--krill-dark);
}
.btn-big svg { width: 22px; height: 22px; fill: #fff; }
.feature:active .btn-big { transform: translateY(3px); box-shadow: 0 3px 0 var(--krill-dark); }
.arcade-more { grid-area: more; }
.arcade-sub { margin: 0 0 14px; font-size: 26px; line-height: 1; color: #fff; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
.tile {
  --tilt: -1.4deg; display: flex; flex-direction: column; height: 100%; padding: 6px 6px 12px; border-radius: 22px; text-decoration: none;
  background: #fff; color: var(--tinta); box-shadow: 0 6px 0 rgba(4, 34, 56, .42), 0 12px 24px rgba(4, 34, 56, .22);
  transform: rotate(var(--tilt)); transition: transform .26s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
.tiles li:nth-child(4n+2) .tile { --tilt: 1.2deg; } .tiles li:nth-child(4n+3) .tile { --tilt: .8deg; } .tiles li:nth-child(4n) .tile { --tilt: -1deg; }
.tile:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); }
.tile:active { transform: rotate(0deg) translateY(4px) scale(.96); box-shadow: 0 2px 0 rgba(4, 34, 56, .42); transition-duration: .07s; }
.tile-art { position: relative; display: block; aspect-ratio: 1; border-radius: 17px; overflow: hidden; background: var(--g1); }
.tile-art img.svg { inset: 12%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .1)); }
.tile-go { position: absolute; right: 7px; bottom: 7px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--krill); box-shadow: 0 0 0 3px #fff, 0 4px 0 3px var(--krill-dark); }
.tile-go svg { width: 16px; height: 16px; margin-left: 2px; fill: #fff; }
.tile-name { margin: 9px 5px 0; font-family: var(--display); font-size: 19px; line-height: 1; color: var(--g2); }
.tile-line { margin: 4px 5px 0; font-size: 14px; line-height: 1.25; color: var(--gris); }
.tile-line b { color: var(--tinta); font-weight: 800; }
.arcade-goal { margin: 18px 2px 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.arcade-goal:empty { display: none; }
/* Invitar a jugar: una pastilla blanca sobre el mar, con el globito de WhatsApp */
.invite {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border: 0; border-radius: 20px; cursor: pointer; text-align: left;
  font: inherit; color: var(--tinta); background: #fff; box-shadow: 0 5px 0 rgba(4, 34, 56, .35); transition: transform .08s, box-shadow .08s;
}
.invite svg { width: 34px; height: 34px; flex: none; fill: #1FAF5A; }
.invite span { display: flex; flex-direction: column; font-family: var(--display); font-size: 21px; line-height: 1.05; color: var(--tinta); }
.invite small { margin-top: 3px; font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--gris); }
.invite:hover { transform: translateY(-2px); }
.invite:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(4, 34, 56, .35); }
.invite:focus-visible, .r-share:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
/* mandar la noticia del día */
.r-share {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 11px 5px 7px; border: 0; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: #128C4A; box-shadow: 0 2px 0 #0B6A37;
}
.r-share svg { width: 17px; height: 17px; fill: #fff; }
.r-share svg path + path { fill: #128C4A; }
.r-share:active { transform: translateY(2px); box-shadow: none; }
@media (min-width: 761px) { .feat-col { position: sticky; top: 80px; } }
@media (max-width: 760px) {
  .arcade { margin-top: 40px; padding: 24px 0 30px; }
  .arcade-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "feat" "more"; gap: 16px; }
  .arcade h2 { font-size: 36px; }
  .arcade-head p { font-size: 16px; }
  .arcade-more { margin-top: 8px; }
  .tiles { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 8px 16px 18px; scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tiles li { flex: none; width: 44%; max-width: 180px; scroll-snap-align: start; scroll-margin-left: 16px; }
}
.btn { display: inline-block; text-decoration: none; text-align: center; border: 0; border-radius: 16px; padding: 11px 22px 12px; font-size: 20px; cursor: pointer; background: var(--krill); color: #fff; box-shadow: 0 4px 0 var(--krill-dark); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--krill-dark); }
.btn.secondary { background: #EAF4F6; color: var(--tinta); box-shadow: 0 4px 0 #C9DDE2; }
.link-btn { border: 0; background: none; padding: 0; color: var(--golfo-dark); text-decoration: underline; cursor: pointer; font-size: 14px; font-weight: 600; }

.ad-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.act { border: 0; text-decoration: none; border-radius: 12px; padding: 7px 12px; font-weight: 500; font-size: 15px; cursor: pointer; background: #EAF4F6; }
.act.wa { background: #25D366; color: #fff; }

/* Comercios */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 500; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 2px var(--linea); white-space: nowrap; }
.chip[aria-selected="true"] { background: var(--hondo); color: #fff; box-shadow: none; }
.ads { list-style: none; margin: 0; padding: 4px 0; }
.ad { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
.ad + .ad { border-top: 1px solid var(--linea); }
.pos { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; font-size: 18px; background: #EAF4F6; }
.ad.p1 .pos { background: var(--sol); }
.ad.p2 .pos { background: #DDE3EA; }
.ad.p3 .pos { background: #F2C9A0; }
.ad h3 { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 600; }
.ad .cat { margin: 1px 0 0; font-size: 14px; color: var(--gris); }
.ad .desc { grid-column: 2; margin: 4px 0 0; font-size: 15px; }
.ad .pts { grid-column: 2; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); margin-top: 4px; }
.pts .bar { flex: 1; max-width: 220px; height: 6px; border-radius: 6px; background: #EAF1F3; overflow: hidden; }
.pts .bar i { display: block; height: 100%; background: var(--golfo); border-radius: 6px; }
.ad .ad-actions { grid-column: 2; margin-top: 8px; }
.ad-empty { padding: 16px; color: var(--gris); }
/* Lugares libres del ranking y ficha de ejemplo: borde punteado, sin botones de verdad */
.ad.slot { background: repeating-linear-gradient(135deg, rgba(23, 195, 178, .045) 0 12px, transparent 12px 24px); }
.ad.slot .pos { background: transparent; box-shadow: inset 0 0 0 2px var(--borde); color: var(--gris); }
.ad.slot h3 { color: var(--hondo); }
.ad.slot .act { background: var(--hondo); color: #fff; }
.act.fake { cursor: default; opacity: .55; }
/* fichas de ejemplo del ranking: iguales a una real, con su cartelito y los botones apagados */
.ej-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #FFF1C2; color: #7A5200; font-size: 12px; font-weight: 700; vertical-align: 3px; }
.ad.ejemplo .act.fake { opacity: .5; }
.invite { margin: 10px 2px 0; color: var(--gris); }
.link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--golfo-dark); font-weight: 600; text-decoration: underline; }

/* Próximos días */
.days { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(5, 1fr); }
.days li { text-align: center; padding: 8px 2px; border-radius: 16px; }
.days .d { display: block; font-weight: 600; font-size: 14px; }
.days .ic { display: block; font-size: 26px; line-height: 1.25; }
.days .t { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.days .t span { color: var(--gris); font-weight: 400; }
.days .wd { display: block; font-size: 12px; color: var(--gris); }
.days li.windy { background: #FFF0F4; }
.days li.windy .wd { color: var(--krill-dark); font-weight: 600; }

/* Fauna */
.fauna { list-style: none; margin: 0; padding: 4px 0; }
.fauna li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding: 11px 16px; align-items: start; }
.fauna li + li { border-top: 1px solid var(--linea); }
.f-ic { font-size: 26px; line-height: 1.1; text-align: center; }
.f-name { font-weight: 600; font-size: 17px; }
.f-name .peak { font-size: 12px; font-weight: 600; background: #FFF4D1; color: #7A5200; border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; vertical-align: 2px; }
.f-txt { grid-column: 2; font-size: 14px; color: var(--gris); }
/* Para recordar: la luna llena y las fechas que vienen; la de hoy, resaltada */
.recordar .f-name .peak { background: #EAF4F6; color: var(--golfo-dark); }
.recordar li.hoy { background: linear-gradient(160deg, #FFF8E6, #FFEFF3); }
.recordar li.hoy .peak { background: var(--krill); color: #fff; }
.recordar li.luna .f-ic { filter: drop-shadow(0 0 6px rgba(255, 214, 102, .9)); }
.readings .r-msg p b { font-size: inherit; line-height: inherit; font-variant-numeric: normal; color: var(--krill-dark); font-weight: 400; }

/* Postal de la bahía antes del pie */
/* el dibujo va en una capa propia, un poco más alta que la postal, para que al bajar se mueva más lento que la página */
.postal { position: relative; overflow: hidden; margin-top: 56px; height: clamp(170px, 30vw, 400px); background: var(--nube); }
.postal::before, .postal::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.postal::before { top: -12%; bottom: -12%; background: url(../juegos/img/arte/bahia.webp?v=1) center 58% / cover no-repeat; }
.postal::after { top: 0; bottom: 0; background: linear-gradient(180deg, rgba(242, 248, 250, 1) 0, rgba(242, 248, 250, 0) 22%, rgba(10, 76, 112, 0) 72%, var(--hondo) 100%); }
@media (max-width: 760px) { .postal::before { background-image: url(../juegos/img/arte/bahia-m.webp?v=1); } }

/* Pie */
.foot { margin-top: 0; background: var(--hondo); color: #fff; padding: 26px 0 34px; }
.foot p { margin: 6px 0; }
.foot-links { display: flex; gap: 14px; flex-wrap: wrap; }
.foot-links a, .foot .link { color: #fff; opacity: .9; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-size: 16px; font-weight: 400; }
.attrib { font-size: 13px; opacity: .78; }
.foot-credit { font-size: 15px; }
.foot-credit a { color: #FFC93C; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Ventana */
dialog#modal { border: 0; border-radius: 24px; padding: 22px 18px 18px; width: min(460px, 94vw); max-height: 90vh; color: var(--tinta); }
dialog#modal::backdrop { background: rgba(11, 53, 84, .5); }
.modal-close-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.x { border: 0; background: #EEF5F7; width: 38px; height: 38px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; }
#modal-body h2 { margin: 0 34px 6px 0; font-size: 25px; line-height: 1.1; font-weight: 600; }
#modal-body p { margin: 0 0 10px; color: var(--gris); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-weight: 500; font-size: 15px; }
.field input, .field select, .field textarea { font: inherit; font-size: 17px; padding: 10px 11px; border-radius: 12px; border: 2px solid #CFE0E5; background: #F6FBFC; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pack { border: 2px solid #CFE0E5; border-radius: 14px; padding: 10px 6px; text-align: center; cursor: pointer; background: #fff; }
.pack b { display: block; font-size: 24px; font-weight: 600; }
.pack span { font-size: 13px; color: var(--gris); }
.pack[aria-pressed="true"] { border-color: var(--krill); background: #FFF0F4; }
.err { color: var(--krill-dark); font-weight: 500; margin: 0 0 8px; }

/* Historias de Chubut: la elegida de la semana, grande, y las anteriores en lista */
.story { background: #fff; border-radius: 22px; box-shadow: 0 3px 0 var(--borde); overflow: hidden; }
.story-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--nube); }
.story-in { padding: 16px 18px 18px; }
.story-kicker { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--golfo-dark); }
.story h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.08; color: var(--noche); }
.story-by { margin: 6px 0 10px; font-size: 15px; color: var(--gris); }
.story-text p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; max-width: 64ch; }
.story-text.short { max-height: 8.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.story-list { list-style: none; margin: 12px 0 0; padding: 4px 0; background: #fff; border-radius: 22px; box-shadow: 0 3px 0 var(--borde); }
.story-list li + li { border-top: 1px solid var(--linea); }
.story-list button { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 12px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--tinta); }
.story-list b { font-weight: 700; font-size: 17px; line-height: 1.25; }
.story-list span { grid-column: 1; font-size: 14px; color: var(--gris); }
.story-list i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: 22px; color: var(--golfo-dark); }
.story-empty { background: var(--papel); border: 2px dashed #E9D9B0; border-radius: 22px; padding: 18px; }
.story-empty p { margin: 0; font-size: 17px; line-height: 1.45; }
.story-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 12px; }
.story-cta p { margin: 0; flex: 1 1 220px; font-size: 16px; color: var(--gris); }
.story-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #E3F3FB; color: #0F6E8C; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.kind-pick label { display: block; border: 2px solid #CFE0E5; border-radius: 14px; padding: 10px; text-align: center; font-weight: 600; cursor: pointer; }
.kind-pick input { position: absolute; opacity: 0; pointer-events: none; }
.kind-pick label:has(input:checked) { border-color: var(--golfo); background: #EAF7F6; }
.kind-pick label:focus-within { outline: 2px solid var(--golfo-dark); outline-offset: 2px; }
.photo-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.photo-pick img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 14px; line-height: 1.35; color: var(--gris); }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.count { font-size: 12px; color: var(--gris); text-align: right; font-weight: 400; }
#modal-body .story-read p { color: var(--tinta); font-size: 17px; line-height: 1.55; }
#modal-body .story-photo { border-radius: 16px; margin: 4px 0 12px; }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 12px; z-index: 50; max-width: 90vw; text-align: center; }

/* ---------------- El pasacalle: los mensajes lindos pasan como un cartel de tela colgado en la calle ---------------- */
.pasacalle { position: relative; z-index: 2; margin: 30px calc(50% - 50vw) 0; padding: 12px 0; }
.pc-cinta {
  position: relative; overflow: hidden; rotate: -1.2deg; padding: 13px 0 12px;
  /* tela crema con la costura arriba y abajo */
  background:
    linear-gradient(90deg, rgba(10, 76, 112, .34) 55%, transparent 0) 0 6px / 12px 2px repeat-x,
    linear-gradient(90deg, rgba(10, 76, 112, .34) 55%, transparent 0) 6px calc(100% - 6px) / 12px 2px repeat-x,
    repeating-linear-gradient(0deg, rgba(10, 76, 112, .022) 0 1px, transparent 1px 3px),
    #FFFBEF;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .9), inset 0 -3px 0 rgba(10, 76, 112, .06), 0 4px 0 rgba(10, 76, 112, .09), 0 14px 26px -8px rgba(10, 76, 112, .24);
}
.pc-cinta { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pc-track { display: flex; width: max-content; will-change: transform; animation: pc-pasa var(--pc-dur, 120s) linear infinite; }
@keyframes pc-pasa { to { transform: translateX(-50%); } }
.pc-copia { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.pc-msg { padding: 0 22px; white-space: nowrap; font-family: var(--display); font-size: 23px; line-height: 30px; letter-spacing: .01em; color: var(--hondo); }
.pc-msg b { font-weight: 400; color: var(--krill-dark); }
.pc-sep { display: grid; place-items: center; flex: none; }
.pc-sep svg { display: block; width: 26px; height: 26px; }
.pc-sep:nth-child(4n+2) svg { rotate: -10deg; } .pc-sep:nth-child(4n) svg { rotate: 8deg; }
/* se frena con el mouse encima, con el foco, apretando con el dedo, con el botón o si no está en pantalla */
.pasacalle.quieto .pc-track, .pasacalle.sostiene .pc-track, .pasacalle.fuera .pc-track { animation-play-state: paused; }
.pasacalle:has(:focus-visible) .pc-track { animation-play-state: paused; }
@media (hover: hover) { .pasacalle:hover .pc-track { animation-play-state: paused; } }
.pc-pausa {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #FFFBEF; color: var(--hondo); box-shadow: 0 0 0 2px rgba(10, 76, 112, .14), -14px 0 14px 4px #FFFBEF;
}
.pc-pausa svg { width: 16px; height: 16px; }
.pc-pausa .i-pausa { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.pc-pausa .i-mover { fill: currentColor; display: none; }
.pasacalle.quieto .pc-pausa .i-pausa { display: none; } .pasacalle.quieto .pc-pausa .i-mover { display: block; }
.pc-pausa:hover { background: #fff; }
@media (max-width: 760px) {
  .pasacalle { margin-top: 22px; padding: 8px 0; }
  .pc-cinta { padding: 11px 0 10px; rotate: -1.6deg; }
  .pc-msg { padding: 0 16px; font-size: 19px; line-height: 26px; }
  .pc-sep svg { width: 22px; height: 22px; }
  .pc-pausa { width: 30px; height: 30px; right: 8px; }
}

/* ---------------- Movimiento: la página se acomoda como la marea, sin apuro ----------------
   Lo que entra en pantalla sube un poquito y se asienta (una sola vez); las filas de las listas llegan de a una.
   Solo si el script anda (clase js-motion) y si no piden menos movimiento: sin script, todo se ve quieto y completo. */
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--golfo), #7DEBDD); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rv { opacity: 0; translate: 0 34px; transition: opacity .7s ease, translate 1s cubic-bezier(.16, .84, .3, 1), rotate 1s cubic-bezier(.16, .84, .3, 1); }
  .js-motion .feat-col.rv { rotate: -2deg; translate: 0 46px; }
  .js-motion .rv.in { opacity: 1; translate: none; rotate: none; }
  .rv.in:not(.listo) :is(.verdicts, .days, .fauna, .ads, .story-list) > *,
  .rv.in:not(.listo) .tiles > li > .tile { animation: rv-fila .75s cubic-bezier(.16, .84, .3, 1) backwards; animation-delay: calc(var(--k, 0) * 70ms + 160ms); }
  .rv.in:not(.listo) .tiles > li > .tile { animation-name: rv-tile; animation-duration: .9s; }
  .rv.in:not(.listo) .v-tag { animation: rv-pop .5s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--k, 0) * 70ms + 420ms); }
  .rv.in:not(.listo) .f-ic { animation: rv-nada .9s cubic-bezier(.16, .84, .3, 1) backwards; animation-delay: calc(var(--k, 0) * 70ms + 220ms); }
  .rv.in:not(.listo) .ribbon { animation: rv-cuelga 1s cubic-bezier(.2, 1.1, .4, 1) .45s backwards; }
  @keyframes rv-fila { from { opacity: 0; translate: 0 16px; } }
  @keyframes rv-tile { from { opacity: 0; translate: 0 34px; rotate: 5deg; } }
  @keyframes rv-pop { from { opacity: 0; scale: .6; } }
  @keyframes rv-nada { from { opacity: 0; translate: -14px 6px; rotate: -16deg; } }
  @keyframes rv-cuelga { from { opacity: 0; rotate: -12deg; translate: -8px -10px; } }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(2) { --k: 1; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(3) { --k: 2; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(4) { --k: 3; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(5) { --k: 4; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(6) { --k: 5; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(7) { --k: 6; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(8) { --k: 7; }
  :is(.verdicts, .days, .fauna, .ads, .story-list, .tiles) > :nth-child(n+9) { --k: 8; }

  /* Lo que se mueve con el scroll: la playa de arriba va más lenta que la página, el pasacalle se acomoda con el viento,
     las figuritas de los juegos flotan en el mar, la bahía del final se desliza y una rayita de mar marca cuánto bajaste.
     Con animaciones atadas al scroll (corren fuera del hilo principal); donde no las hay, el script pone --p y se usa lo de .sd-js */
  @supports (animation-timeline: view()) {
    .scene { view-timeline: --hoy block; }
    .scene-art { animation: par-hoy linear both; animation-timeline: --hoy; animation-range: exit 0% exit 100%; }
    .scene-text { animation: par-txt linear both; animation-timeline: --hoy; animation-range: exit 0% exit 90%; }
    .top::after { animation: marea linear both; animation-timeline: scroll(root block); }
    .pc-cinta { animation: pc-viento linear both; animation-timeline: view(); animation-range: cover; }
    .arcade { view-timeline: --mar block; }
    .tiles > li { animation: boya ease-in-out both; animation-timeline: --mar; animation-range: cover; }
    .tiles > li:nth-child(3n+2) { animation-name: boya2; } .tiles > li:nth-child(3n) { animation-name: boya3; }
    .postal { view-timeline: --postal block; }
    .postal::before { animation: par-postal linear both; animation-timeline: --postal; animation-range: cover; }
  }
  .sd-js .scene-art { translate: 0 calc(var(--pe, 0) * 28%); }
  .sd-js .scene-text { translate: 0 calc(var(--pe, 0) * -44px); opacity: calc(1 - var(--pe, 0) * .75); }
  .sd-js .top::after { transform: scaleX(var(--pp, 0)); }
  .sd-js .pc-cinta { rotate: calc(-2.4deg + var(--pv, .5) * 2.2deg); }
  .sd-js .tiles > li { translate: 0 calc(sin(var(--pv, 0) * 12.566rad) * -6px); }
  .sd-js .tiles > li:nth-child(3n+2) { translate: 0 calc(sin(var(--pv, 0) * 12.566rad + 2.1rad) * -6px); }
  .sd-js .tiles > li:nth-child(3n) { translate: 0 calc(sin(var(--pv, 0) * 12.566rad + 4.2rad) * -6px); }
  .sd-js .postal::before { translate: 0 calc((var(--pv, .5) - .5) * 16%); }
  @keyframes par-hoy { to { translate: 0 28%; } }
  @keyframes par-txt { to { translate: 0 -44px; opacity: .25; } }
  @keyframes marea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes pc-viento { from { rotate: -2.4deg; } to { rotate: -.2deg; } }
  @keyframes boya { 0%, 50%, 100% { translate: 0 0; } 25% { translate: 0 -6px; } 75% { translate: 0 6px; } }
  @keyframes boya2 { 0%, 50%, 100% { translate: 0 -5px; } 25% { translate: 0 5px; } 75% { translate: 0 -5px; } }
  @keyframes boya3 { 0%, 50%, 100% { translate: 0 5px; } 25% { translate: 0 0; } 75% { translate: 0 -6px; } }
  @keyframes par-postal { from { translate: 0 -8%; } to { translate: 0 8%; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* con "reducir movimiento": el pasacalle sigue pasando, más despacio y con su botón para frenarlo;
     las secciones solo aparecen suaves (sin subir ni girar) y nada se mueve atado al scroll */
  .js-motion .rv { opacity: 0; transition: opacity .9s ease; }
  .js-motion .rv.in { opacity: 1; }
  .top::after { display: none; }
  .arcade::before, .arcade::after, .feature-art::after { animation: none !important; }
  .scene-video { display: none; }
  .tile, .feature { transition: none; }
  .arrow { transition: none; }
}