/* Xa cho fajo eu: azul de Sargadelos, verde mar e motivos celtas (triskel e trenzado) */
/* Tipografías libres (SIL OFL 1.1, licenzas en /fuentes/): Fraunces para títulos e Figtree para o texto.
   Fraunces vai recortada aos pesos que se usan (redonda 500-800, cursiva 400-700); os eixos SOFT, WONK e opsz quedan
   enteiros porque a web usa varias combinacións */
@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-italica.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fuentes/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #f6f1e7;
  --papel-2: #ede5d5;
  --papel-3: #fffaf1;
  --tinta: #172131;
  --tinta-suave: #4a5566;
  --azul: #1d4f91;
  --azul-claro: #2a63b0;
  --azul-forte: #123a6c;
  --mar: #2f7d74;
  --vermello: #b5452f;
  --linea: #d8ccb5;
  --sombra: 0 1px 0 rgb(23 33 49 / .05), 0 18px 40px -22px rgb(29 79 145 / .45);
  --sombra-forte: 0 2px 0 rgb(23 33 49 / .04), 0 40px 80px -40px rgb(15 39 71 / .55);
  --degradado: linear-gradient(120deg, var(--azul-claro), var(--azul) 45%, var(--mar));
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ancho: 70rem;
  --radio: 16px;
  --suave: cubic-bezier(.2, .7, .2, 1);
  --fondo-1: #1d4f91;
  --fondo-2: #0f2747;
  color-scheme: light dark;
}

/* Escuro: tema.js pon .escuro antes de pintar se o sistema o pide OU se en Vigo (ou onde estea a persoa) é de noite;
   efectos.js cámbiao ao vivo cando amence ou solpón. :where() non suma especificidade: estas regras pesan coma as
   claras e manda a orde do ficheiro. Sen JavaScript, sempre claro */
:root:where(.escuro) { color-scheme: dark; }
:root:where(.claro) { color-scheme: light; }
:root:where(.escuro) {
  --papel: #0d1522;
  --papel-2: #152036;
  --papel-3: #18253d;
  --tinta: #eee8dc;
  --tinta-suave: #b6b2a8;
  --azul: #8fb3ea;
  --azul-claro: #a9c6f2;
  --azul-forte: #c4d8f6;
  --mar: #7cc4b8;
  --vermello: #ec917b;
  --linea: #2a3852;
  --sombra: 0 18px 40px -22px rgb(0 0 0 / .8);
  --sombra-forte: 0 40px 80px -40px rgb(0 0 0 / .9);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background:
    radial-gradient(26rem 26rem at 90% 4%, rgb(255 190 80 / .16), transparent 65%),
    radial-gradient(60rem 40rem at 85% -10%, rgb(42 99 176 / .14), transparent 60%),
    radial-gradient(50rem 36rem at -10% 30%, rgb(47 125 116 / .10), transparent 60%),
    var(--papel);
  background-repeat: no-repeat;
  transition: background-color 1s ease;
  color: var(--tinta);
  font: 400 clamp(1rem, .96rem + .2vw, 1.125rem)/1.6 var(--sans);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
main { overflow-x: clip; }
.parada-1 { stop-color: var(--azul-claro); }
.parada-2 { stop-color: var(--azul); }
.parada-3 { stop-color: var(--mar); }

a { color: var(--azul); text-underline-offset: .2em; }
a:hover { color: var(--azul-forte); }
:focus-visible { outline: 3px solid var(--vermello); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: .6rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 8px;
  z-index: 20;
}
.saltar:focus { top: 1rem; }

.cabeceira-dentro, main > section, .pe-dentro {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

/* Cenefa celta: trenzado de dous cordóns, coloreado cun degradado */
.cenefa {
  height: 16px;
  background: var(--degradado);
  -webkit-mask: url("/celta.svg") repeat-x center / 48px 16px;
  mask: url("/celta.svg") repeat-x center / 48px 16px;
  opacity: .85;
}

/* Cabeceira fixa e translúcida */
.cabeceira {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(246 241 231 / .94);
}
:where(.escuro) .cabeceira { background: rgb(13 21 34 / .94); }
@supports (backdrop-filter: blur(1px)) {
  .cabeceira { background: color-mix(in srgb, var(--papel) 72%, transparent); backdrop-filter: saturate(1.4) blur(14px); }
}
.cabeceira-dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .85rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinta);
  font: 700 1.2rem/1 var(--serif);
  letter-spacing: -.01em;
  text-decoration: none;
}
.marca:hover { color: var(--tinta); }
.marca-texto em { font-style: italic; color: var(--azul); }
/* Triskel da cabeceira: entra, xira sempre e respira (só con transform; o degradado brilla co animateTransform do
   SVG). Con movemento reducido queda quieto (bloque de movemento reducido e efectos.js para o SVG) */
.marca-icono {
  width: 2.1rem;
  height: 2.1rem;
  stroke: url(#degradado);
  stroke-width: 8;
  animation: entrar 1.4s var(--suave) both, xira 12s linear 1.4s infinite, respirar 4s ease-in-out 1.4s infinite;
  transition: transform .8s var(--suave);
}
.marca:hover .marca-icono, .marca:focus-visible .marca-icono { transform: rotate(120deg); }
.marca:hover .marca-icono { animation-duration: 1.4s, 2.4s, 4s; }
@keyframes entrar { from { opacity: 0; transform: rotate(-240deg) scale(.4); } }
@keyframes respirar { 50% { scale: 1.08; } }

.cabeceira ul { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.cabeceira nav a {
  display: inline-block;
  padding: .4rem .75rem;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.cabeceira nav a:hover { background-color: var(--papel-2); color: var(--azul); }

/* Portada */
.portada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.5rem 3rem;
  padding-block: clamp(3rem, 8vw, 7rem) clamp(3.5rem, 9vw, 7.5rem);
  isolation: isolate;
}
.portada-triskel {
  position: absolute;
  z-index: -1;
  right: -14rem;
  top: 50%;
  width: 46rem;
  height: 46rem;
  margin-top: -23rem;
  stroke: url(#degradado);
  stroke-width: 2.2;
  opacity: .2;
  animation: xirar 140s linear infinite;
}
@keyframes xirar { to { transform: rotate(360deg); } }

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  padding: .4rem .9rem .4rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel-3);
  color: var(--tinta-suave);
  font-size: .9rem;
  line-height: 1.35;
}
/* O latexo vai nun pseudoelemento con escala e opacidade: non repinta en cada fotograma */
.punto {
  position: relative;
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--mar);
}
.punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: .5;
  animation: latexo 2.4s ease-out infinite;
}
@keyframes latexo { 70%, 100% { transform: scale(3); opacity: 0; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 650; letter-spacing: -.025em; line-height: 1.02; margin: 0; font-variation-settings: "SOFT" 50, "WONK" 0; }
h1 { font-size: clamp(3.1rem, 1.6rem + 7vw, 7.25rem); font-weight: 700; color: var(--tinta); }
h1 .destaque, h2 .destaque { font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; }
h2 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem); }
h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.destaque {
  display: inline-block;
  color: var(--azul);
  font-style: italic;
  padding-right: .08em;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .destaque {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.entrada {
  max-width: 34ch;
  margin: 1.4rem 0 2.2rem;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.45;
}
.accions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
/* A entrada cambia en cada visita (efectos.js): resérvase o oco das máis longas para que nada salte */
.portada .entrada { min-height: 3lh; }
/* No móbil, filas fixas: o texto do botón principal cambia en cada visita e os botóns non se recolocan */
@media (max-width: 40rem) {
  .portada .entrada { min-height: 4lh; }
  .accions { display: grid; grid-template-columns: 1fr 1fr; }
  .accions .boton-principal { grid-column: 1 / -1; }
  .accions .boton { justify-content: center; padding-inline: 1rem; }
}

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3.1rem;
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--degradado);
  background-size: 160% 100%;
  background-position: 0 0;
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgb(29 79 145 / .8), inset 0 1px 0 rgb(255 255 255 / .2);
  transition: background-position .5s var(--suave), transform .3s var(--suave), box-shadow .3s var(--suave);
}
.boton:hover { color: #fff; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgb(47 125 116 / .8), inset 0 1px 0 rgb(255 255 255 / .2); }
.boton:active { transform: translateY(0) scale(.97); transition-duration: .5s, .08s, .3s; }
.boton-suave {
  background: var(--papel-3);
  color: var(--azul);
  box-shadow: inset 0 0 0 1.5px var(--linea), 0 10px 24px -18px rgb(23 33 49 / .5);
}
.boton-suave:hover { background: var(--papel-3); color: var(--azul-forte); box-shadow: inset 0 0 0 1.5px var(--azul), 0 16px 30px -18px rgb(23 33 49 / .5); }
:where(.escuro) .boton, :where(.escuro) .boton:hover { color: #0d1522; }
:where(.escuro) .boton-suave, :where(.escuro) .boton-suave:hover { color: var(--azul); }

/* Selo con texto en círculo que xira */
.selo {
  overflow: visible;
  filter: drop-shadow(0 22px 30px rgb(29 79 145 / .25));
}
.selo-fondo { fill: var(--papel-3); stroke: var(--azul); stroke-width: 3; }
.selo-linea { fill: none; stroke: var(--azul); stroke-width: 1; stroke-dasharray: 2 3; }
.selo-aro {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: xirar 36s linear infinite;
}
.selo-aro text { fill: var(--azul); font: 700 13.5px/1 var(--sans); letter-spacing: .14em; }
.selo-triskel { stroke: url(#degradado); stroke-width: 9; overflow: visible; }
.selo-grande { fill: var(--tinta); font: italic 650 20px/1 var(--serif); }
.selo-pequeno { fill: var(--tinta-suave); font: 500 8.5px/1 var(--sans); letter-spacing: .04em; }

/* Seccións */
.tarifa, .preguntas { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion-entrada { margin: .8rem 0 0; color: var(--tinta-suave); font-size: 1.125rem; }

/* Catálogo: un pouco de todo */
.catalogo { padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; }
.catalogo h2 .destaque { display: inline; }
.lista-catalogo {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
}
.lista-catalogo li {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--radio);
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.lista-catalogo li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--degradado);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .5s var(--suave);
}
.lista-catalogo li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-forte); }
.lista-catalogo li:hover::before { transform: scaleX(1); }
.etiqueta {
  display: inline-block;
  margin-bottom: .7rem;
  font: italic 600 1.35rem/1.1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--azul);
}
.lista-catalogo p { margin: 0; color: var(--tinta-suave); }

/* Dicionario da retranca: maquetado coma un dicionario impreso */
.dicionario { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.lista-dicionario {
  margin: 2.5rem 0 0;
  columns: 2 22rem;
  column-gap: 3.5rem;
  column-rule: 1px solid var(--linea);
}
.lista-dicionario > div { break-inside: avoid; padding: 0 0 1.35rem; }
.lista-dicionario dt {
  display: inline;
  font: 700 1.3rem/1.3 var(--serif);
  color: var(--tinta);
}
.lista-dicionario dt::after { content: ". "; }
.lista-dicionario dt.sen-punto::after { content: " "; }
.lista-dicionario dd { display: inline; margin: 0; color: var(--tinta-suave); }
.categoria {
  margin-right: .3rem;
  font: italic 500 .95rem/1 var(--serif);
  color: var(--mar);
  text-decoration: none;
  cursor: help;
}

/* En números */
.numeros {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: calc(var(--radio) * 2);
  background:
    radial-gradient(30rem 18rem at 0% 100%, rgb(47 125 116 / .5), transparent 65%),
    linear-gradient(120deg, var(--fondo-1), var(--fondo-2) 70%);
  color: #f6f1e7;
  box-shadow: var(--sombra-forte);
}
.numeros::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4rem;
  top: -4rem;
  width: 16rem;
  height: 16rem;
  background: rgb(255 255 255 / .07);
  -webkit-mask: url("/triskel.svg") center / contain no-repeat;
  mask: url("/triskel.svg") center / contain no-repeat;
}
.numeros-titulo { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); color: rgb(246 241 231 / .9); font-weight: 500; font-style: italic; }
.lista-numeros {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem;
}
.lista-numeros strong {
  display: block;
  font: 600 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, #fff, #a9e0d6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lista-numeros span { display: block; margin-top: .5rem; color: rgb(246 241 231 / .92); }

/* Opinións */
.opinions { padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; }
.aviso { display: block; margin-top: .5rem; font: italic 400 1rem/1.3 var(--sans); letter-spacing: 0; color: var(--tinta-suave); }
.lista-opinions {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}
.lista-opinions li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--papel-3), var(--papel-2));
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
  transition: transform .4s var(--suave);
}
.lista-opinions li:hover { transform: translateY(-4px); }
.lista-opinions li::before {
  content: "«";
  position: absolute;
  right: 1.1rem;
  top: -.4rem;
  font: 700 5rem/1 var(--serif);
  color: var(--azul);
  opacity: .15;
}
.estrelas { margin: 0 0 .75rem; color: #9a6f0e; letter-spacing: .15em; }
:where(.escuro) .estrelas { color: #e3b648; }
.estrelas span { color: color-mix(in srgb, var(--tinta-suave) 72%, transparent); }
.lista-opinions blockquote { margin: 0; flex: 1; }
.lista-opinions blockquote p { margin: 0; font: italic 400 1.2rem/1.45 var(--serif); }
.firma { margin: 1rem 0 0; color: var(--tinta-suave); font-size: .92rem; }
.firma::before { content: "— "; }

/* Opinións en mosaico, con nota media de broma */
.opinions-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.valoracion {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-radius: var(--radio);
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
}
.valoracion p { margin: 0; }
.valoracion-nota {
  font: 600 3.4rem/1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.valoracion-texto { font-size: .92rem; color: var(--tinta-suave); line-height: 1.4; }
.valoracion-texto .estrelas { display: block; margin: 0 0 .15rem; }
.valoracion-texto small { font-size: .82rem; font-style: italic; }
.lista-opinions { display: block; columns: 3 17rem; column-gap: 1.25rem; }
.lista-opinions li { display: block; break-inside: avoid; margin: 0 0 1.25rem; }
.lista-opinions li:nth-child(3n + 2) { rotate: .5deg; }
.lista-opinions li:nth-child(4n) { rotate: -.5deg; }
.lista-opinions li:nth-child(5n + 1) blockquote p { font-size: 1.35rem; }
.lista-opinions li:hover { rotate: 0deg; }
.opinions-nota { margin: .5rem 0 0; color: var(--tinta-suave); font-size: .92rem; font-style: italic; }

/* Tarifa como carta de taberna */
.tarifa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem 4rem; align-items: start; }
.tarifa-cabeza { position: sticky; top: 6rem; }
.carta {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1.5px solid transparent;
  border-radius: calc(var(--radio) + 4px);
  background:
    linear-gradient(var(--papel-3), var(--papel-3)) padding-box,
    linear-gradient(135deg, var(--azul-claro), var(--linea) 40%, var(--linea) 60%, var(--mar)) border-box;
  box-shadow: var(--sombra-forte);
}
.lista-tarifa { margin: 0; }
.lista-tarifa > div {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: .25rem 2rem;
  padding: 1.05rem 0;
  border-bottom: 1px dashed var(--linea);
}
.lista-tarifa > div:first-child { padding-top: .25rem; }
.lista-tarifa dt { font-weight: 600; }
.lista-tarifa dd { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--azul); text-align: right; }
.nota { margin: 1.25rem 0 0; font-size: .9rem; color: var(--tinta-suave); }

/* Retrouso: cinta de frases que pasa soa (párase co rato) */
.retrouso {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--linea);
  background: linear-gradient(90deg, var(--papel-2), var(--papel-3) 50%, var(--papel-2));
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.retrouso-pista { display: flex; width: max-content; animation: desprazar 60s linear infinite; }
.retrouso:hover .retrouso-pista { animation-play-state: paused; }
.retrouso ul { display: flex; margin: 0; padding: 0; list-style: none; }
.retrouso li {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-right: 1.75rem;
  font: italic 500 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  white-space: nowrap;
  color: var(--tinta);
}
.retrouso li::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background: var(--degradado);
  -webkit-mask: url("/triskel.svg") center / contain no-repeat;
  mask: url("/triskel.svg") center / contain no-repeat;
}
@keyframes desprazar { to { transform: translateX(-50%); } }

/* Preguntas */
.lista-preguntas { margin-top: 2rem; max-width: 48rem; }
.lista-preguntas details { border-bottom: 1px solid var(--linea); }
.lista-preguntas summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.lista-preguntas summary:hover { color: var(--azul); }
.lista-preguntas summary::-webkit-details-marker { display: none; }
.lista-preguntas summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--papel-2);
  color: var(--azul);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .35s var(--suave), background-color .2s ease;
}
.lista-preguntas details[open] summary::after { transform: rotate(45deg); background: var(--papel-3); box-shadow: inset 0 0 0 1px var(--linea); }
.lista-preguntas details p { margin: 0 0 1.25rem; color: var(--tinta-suave); animation: aparecer .4s var(--suave); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } }

/* Final */
.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-block: clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: calc(var(--radio) * 2);
  background:
    radial-gradient(40rem 24rem at 100% 0%, rgb(47 125 116 / .55), transparent 60%),
    linear-gradient(135deg, var(--fondo-1), var(--fondo-2));
  color: #f6f1e7;
  text-align: center;
  box-shadow: var(--sombra-forte);
}
.final-triskel {
  position: absolute;
  z-index: -1;
  left: -6rem;
  bottom: -9rem;
  width: 26rem;
  height: 26rem;
  stroke: rgb(255 255 255 / .09);
  stroke-width: 3;
  animation: xirar 90s linear infinite reverse;
}
.final h2 { color: #fff; }
.final-entrada { margin: .9rem auto 0; max-width: 32ch; color: rgb(246 241 231 / .94); font-size: 1.15rem; }
.pedido { margin-top: 2rem; }
.pedido summary.boton { list-style: none; background: #f6f1e7; color: #1d4f91; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6); }
.pedido summary.boton:hover { background: #fff; color: #123a6c; }
.pedido summary::-webkit-details-marker { display: none; }
.pedido[open] summary { display: none; }
.resposta { margin: 0; font: 700 clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem)/1.2 var(--serif); animation: aparecer .6s var(--suave); }
.resposta span { display: block; margin-top: .4rem; font-weight: 400; font-style: italic; color: #a9e0d6; }

/* Pé */
.pe { color: var(--tinta-suave); font-size: .92rem; }
.pe .cenefa { opacity: .5; }
.pe-dentro { padding-block: 2.25rem 3rem; }
.pe p { margin: .25rem 0; }
.pe-marca { display: flex; align-items: center; gap: .5rem; color: var(--tinta); font-family: var(--serif); font-size: 1.05rem; }
.pe-icono { width: 1.4rem; height: 1.4rem; stroke: url(#degradado); stroke-width: 9; }

/* Sorpresas: selo que xira, gheada, choiva, confeti, pago con Bizum e brillo nas tarxetas */

/* Selo: dáse a volta ao pasar o rato ou co teclado */
.selo-carta {
  width: clamp(13rem, 21vw, 17.5rem);
  aspect-ratio: 1;
  perspective: 900px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .6s var(--suave);
}
.selo-carta:focus-visible { outline-offset: 8px; border-radius: 50%; }
.selo-xiro {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, 1.4, .4, 1);
}
.selo-carta:hover, .selo-carta:focus-visible { transform: scale(1.04); }
.selo-carta:hover .selo-xiro, .selo-carta:focus-visible .selo-xiro { transform: rotateY(180deg); }
.selo, .selo-reverso { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.selo-reverso {
  display: grid;
  place-content: center;
  gap: .35rem;
  padding: 2.2rem;
  border-radius: 50%;
  text-align: center;
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / .25), transparent 55%),
    linear-gradient(135deg, var(--azul-claro), var(--azul) 50%, var(--mar));
  color: #fff;
  box-shadow: 0 22px 40px -16px rgb(29 79 145 / .6), inset 0 0 0 6px rgb(255 255 255 / .18);
}
.reverso-grande { font: italic 650 clamp(1.5rem, 1rem + 1.4vw, 2.1rem)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; }
.reverso-pequeno { font-size: .78rem; opacity: .85; }
:where(.escuro) .selo-reverso { color: #0d1522; }

/* Gheada: a «j» ten unha nota escondida */
.gheada { position: relative; cursor: help; anchor-name: --gheada; }
/* Safari (iPhone) non pinta o texto recortado do pai nun fillo con position: a j leva o seu propio degradado */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .destaque .gheada {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* O degradado só se pinta dentro da caixa: a j cursiva baixa e sobresae pola esquerda, así que a caixa crece
       cara abaixo e á esquerda (o padding vertical dun inline non move a liña; a marxe negativa compensa o lateral) */
    padding: 0 .08em .32em .22em;
    margin: 0 -.08em 0 -.22em;
  }
  .destaque .gheada::after { left: .27em; right: .18em; bottom: .3em; }
}
h1:has(.gheada) { position: relative; }
.gheada-nota {
  position: absolute;
  left: 62%;
  bottom: 100%;
  z-index: 5;
  width: max-content;
  max-width: 17rem;
  padding: .6rem .85rem;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--papel);
  font: 500 .9rem/1.35 var(--sans);
  font-style: normal;
  letter-spacing: 0;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, .5rem) scale(.95);
  transition: opacity .25s ease, transform .35s var(--suave);
}
.gheada-nota::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border: 7px solid transparent;
  border-top-color: var(--tinta);
  transform: translateX(-50%);
}
h1:has(.gheada:hover) .gheada-nota, h1.nota-aberta .gheada-nota { opacity: 1; transform: translate(-50%, -.2rem) scale(1); }
@supports (anchor-name: --a) {
  .gheada-nota { position-anchor: --gheada; left: anchor(center); bottom: anchor(top); }
}
.gheada::after {
  content: "";
  position: absolute;
  left: .05em;
  right: .1em;
  bottom: -.02em;
  height: .05em;
  border-radius: 1em;
  background: var(--mar);
  opacity: .5;
  animation: chiscar 2.8s ease-in-out 2s infinite;
}
@keyframes chiscar { 50% { opacity: .1; } }

/* Estación do tempo: cinco tempos con selector en CSS puro. efectos.js marca o de Vigo (tempo.json, cada 3 horas) */
.estacion { margin-top: 2.1rem; }
.tempo { min-width: 0; margin: 0; padding: 0; border: 0; }
.tempo-titulo {
  margin-bottom: .65rem;
  padding: 0;
  font: 700 .76rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mar);
}
.tempo-titulo span { color: var(--tinta-suave); }
.tempo-opcions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .3rem;
  border-radius: 1.6rem;
  background: color-mix(in srgb, var(--papel-3) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
}
.tempo-opcions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tempo-opcions label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .48rem .75rem;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s var(--suave);
}
.tempo-opcions label:hover { color: var(--azul); background-color: var(--papel-2); }
.tempo-opcions label:active { transform: scale(.96); }
.tempo-opcions input:checked + label {
  background: var(--degradado);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgb(29 79 145 / .9), inset 0 1px 0 rgb(255 255 255 / .25);
}
.tempo-opcions input:focus-visible + label { outline: 3px solid var(--vermello); outline-offset: 2px; }
:where(.escuro) .tempo-opcions input:checked + label { color: #0d1522; }
.icona-tempo { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tempo-opcions input:checked + label .icona-tempo { animation: icona-viva 2.8s ease-in-out infinite; }
@keyframes icona-viva { 50% { transform: translateY(-1.5px) rotate(10deg); } }

.parte { margin: 1rem 0 0; max-width: 48ch; color: var(--tinta-suave); font-size: .95rem; }
.parte-hoxe { font-weight: 700; color: var(--tinta); }
.parte > span:not(.parte-hoxe) { display: none; }
.parte > span:not(.parte-hoxe) { animation: aparecer .5s var(--suave); }
.tempo-real { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin: .45rem 0 0; color: var(--tinta-suave); font-size: .82rem; }
.tempo-real[hidden], .tempo-volver[hidden], .tempo-aqui[hidden], .tempo-vigo[hidden] { display: none; }
.tempo-aqui, .tempo-vigo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem .3rem .55rem;
  border: 0;
  border-radius: 999px;
  background: var(--papel-3);
  color: var(--azul);
  font: 650 .82rem/1.2 var(--sans);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow .2s ease, transform .3s var(--suave);
}
.tempo-vigo { padding-left: .75rem; }
.tempo-aqui:hover, .tempo-vigo:hover { box-shadow: inset 0 0 0 1px var(--azul); transform: translateY(-1px); }
.tempo-aqui:focus-visible, .tempo-vigo:focus-visible { outline: 3px solid var(--vermello); outline-offset: 2px; }
.tempo-aqui[disabled] { opacity: .7; cursor: progress; }
.tempo-aqui svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.tempo-dato::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--mar); vertical-align: .05em; }
.tempo-volver {
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* Que se ve en cada tempo: parte e selo */
[class^="estado-"] { display: none; }
body:has(#tempo-sol:checked) .parte-sol,
body:has(#tempo-nubes:checked) .parte-nubes,
body:has(#tempo-bretema:checked) .parte-bretema,
body:has(#tempo-orballo:checked) .parte-orballo,
body:has(#tempo-escampa:checked) .parte-escampa,
body:has(#tempo-choiva:checked) .parte-choiva,
body:has(#tempo-raios:checked) .parte-raios { display: inline; }
html.noite body:has(#tempo-sol:checked) .parte-sol { display: none; }
html.noite body:has(#tempo-sol:checked) .parte-lua { display: inline; }
body:has(#tempo-sol:checked) .estado-sol,
body:has(#tempo-nubes:checked) .estado-nubes,
body:has(#tempo-bretema:checked) .estado-bretema,
body:has(#tempo-orballo:checked) .estado-orballo,
body:has(#tempo-escampa:checked) .estado-escampa,
body:has(#tempo-choiva:checked) .estado-choiva,
body:has(#tempo-raios:checked) .estado-raios { display: inline; }
.selo-grande-longo { font-size: 17px; }

/* Ceo de fondo (detrás do contido): sol ou lúa, arco da vella e nubes */
.ceo-fondo, .ceo { position: fixed; inset: 0; pointer-events: none; }
/* O ceo de fondo (sol, arco, nubes, brétema) é da portada: vai coa páxina e desvanécese cara abaixo */
.ceo-fondo {
  position: absolute;
  inset: 0 0 auto;
  height: 115vh;
  z-index: -1;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 60%, transparent);
  mask: linear-gradient(#000 60%, transparent);
}
.ceo { z-index: 25; }
.ceo-fondo > div, .ceo > div { position: absolute; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 1.4s; }
.ceo-sol {
  top: -14rem;
  right: -14rem;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 214 120 / .6) 0 10%, rgb(255 190 80 / .2) 28%, transparent 62%);
}
.ceo-sol::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 196 90 / .16) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%);
  mask: radial-gradient(circle, #000 12%, transparent 60%);
  animation: xira 90s linear infinite;
}
html.noite .ceo-sol { background: radial-gradient(circle, rgb(220 230 255 / .55) 0 7%, rgb(160 185 230 / .14) 24%, transparent 55%); }
html.noite .ceo-sol::before { display: none; }
.ceo-arco {
  top: 3rem;
  right: -22rem;
  width: 64rem;
  height: 32rem;
  border-radius: 64rem 64rem 0 0;
  background: radial-gradient(circle at 50% 100%,
    transparent 0 57%, rgb(231 76 60 / .22) 57% 59%, rgb(243 156 18 / .22) 59% 61%, rgb(241 196 15 / .22) 61% 63%,
    rgb(46 204 113 / .2) 63% 65%, rgb(52 152 219 / .2) 65% 67%, rgb(142 68 173 / .18) 67% 69%, transparent 69%);
  -webkit-mask: linear-gradient(90deg, transparent 5%, #000 35%, #000 75%, transparent 95%);
  mask: linear-gradient(90deg, transparent 5%, #000 35%, #000 75%, transparent 95%);
  transform: translateY(2rem) scale(.96);
  transition: opacity 2s ease, visibility 2s, transform 2.4s var(--suave);
}
.ceo-nubes {
  inset: 0 0 auto;
  height: 22rem;
  background-image: url("/nubes.svg"), url("/nubes.svg");
  background-repeat: repeat-x;
  background-size: 900px 260px, 640px 185px;
  background-position: 0 -20px, 200px 90px;
  animation: nubes 120s linear infinite;
}
@keyframes nubes { to { background-position: -900px -20px, -440px 90px; } }
/* En escuro as nubes van tintadas e en modo pantalla: aclaran o ceo en vez de manchalo de gris */
:where(.escuro) .ceo-nubes { filter: brightness(.5) saturate(.5) !important; mix-blend-mode: screen; }

.ceo-bretema {
  inset: -10% 0;
  background:
    radial-gradient(60rem 13rem at 15% 25%, rgb(255 255 255 / .85), transparent 70%),
    radial-gradient(52rem 12rem at 85% 50%, rgb(255 255 255 / .8), transparent 70%),
    radial-gradient(70rem 15rem at 35% 80%, rgb(255 255 255 / .85), transparent 70%);
  background-size: 180% 100%;
  animation: bretema 38s ease-in-out infinite alternate;
}
@keyframes bretema { from { background-position: 0 0; } to { background-position: 100% 0; } }
:where(.escuro) .ceo-bretema { filter: brightness(.28); }

/* Ceo por riba do contido: choiva e lóstregos */
.ceo-choiva {
  inset: 0;
  background-color: rgb(40 58 82 / .08);
  background-image: url("/choiva.svg"), url("/choiva.svg");
  background-size: 120px 240px, 190px 380px;
}
@keyframes chover { to { background-position: -24px 240px, -38px 380px; } }
.ceo-lostrego { inset: 0; background: #fff; }
.ceo-bretema-diante { inset: auto 0 0; height: 45vh; background: linear-gradient(to top, rgb(240 241 240 / .6), transparent); }
:where(.escuro) .ceo-bretema-diante { background: linear-gradient(to top, rgb(20 28 40 / .6), transparent); }
@keyframes orballar { to { background-position: -12px 140px, -18px 220px; } }
@keyframes lostregos {
  0%, 2.5%, 6%, 52%, 54%, 100% { opacity: 0; }
  1% { opacity: .45; } 1.8% { opacity: .1; } 3.6% { opacity: .35; }
  53% { opacity: .3; }
}
:where(.escuro) .ceo-choiva { background-color: rgb(0 0 0 / .22); filter: brightness(2.4) saturate(.6); }

/* Cada tempo co seu ceo */
body:has(#tempo-sol:checked) .ceo-sol { opacity: 1; visibility: visible; }
body:has(#tempo-nubes:checked) .ceo-sol { opacity: .2; visibility: visible; }
body:has(#tempo-nubes:checked) .ceo-nubes { opacity: 1; visibility: visible; }
body:has(#tempo-bretema:checked) .ceo-bretema,
body:has(#tempo-bretema:checked) .ceo-bretema-diante { opacity: 1; visibility: visible; }
body:has(#tempo-bretema:checked) .ceo-sol { opacity: .12; visibility: visible; }
body:has(#tempo-orballo:checked) .ceo-nubes { opacity: .85; visibility: visible; animation-duration: 90s; }
body:has(#tempo-orballo:checked) .ceo-choiva {
  opacity: .5;
  visibility: visible;
  background-size: 60px 140px, 95px 220px;
  animation: orballar 1.3s linear infinite;
}
body:has(#tempo-escampa:checked) .ceo-sol { opacity: .65; visibility: visible; }
body:has(#tempo-escampa:checked) .ceo-arco { opacity: 1; visibility: visible; transform: none; }
body:has(#tempo-escampa:checked) .ceo-nubes { opacity: .7; visibility: visible; animation-duration: 70s; }
body:has(#tempo-escampa:checked) .ceo-choiva { opacity: .25; visibility: visible; animation: chover 1.1s linear infinite; }
body:has(#tempo-choiva:checked) .ceo-nubes { opacity: .85; visibility: visible; filter: brightness(.92); }
body:has(#tempo-choiva:checked) .ceo-choiva { opacity: .8; visibility: visible; animation: chover .5s linear infinite; }
body:has(#tempo-raios:checked) .ceo-nubes { opacity: .95; visibility: visible; filter: brightness(.8) contrast(1.1); animation-duration: 45s; }
body:has(#tempo-raios:checked) .ceo-choiva { opacity: .95; visibility: visible; animation: chover .32s linear infinite; }
body:has(#tempo-raios:checked) .ceo-lostrego { visibility: visible; opacity: 0; transition: none; animation: lostregos 7s linear 1s infinite; }

body:has(#tempo-nubes:checked) { --papel: #eceae4; }
body:has(#tempo-bretema:checked) { --papel: #ecedeb; }
body:has(#tempo-orballo:checked) { --papel: #e8e8e4; }
body:has(#tempo-escampa:checked) { --papel: #f2eee5; }
body:has(#tempo-choiva:checked) { --papel: #e4e4e0; }
body:has(#tempo-raios:checked) { --papel: #e0e2e3; --papel-3: #f4f3ef; }
:where(.escuro) body:has(#tempo-nubes:checked) { --papel: #111a28; }
:where(.escuro) body:has(#tempo-bretema:checked) { --papel: #121a25; }
:where(.escuro) body:has(#tempo-orballo:checked) { --papel: #0e1521; }
:where(.escuro) body:has(#tempo-escampa:checked) { --papel: #0f1724; }
:where(.escuro) body:has(#tempo-choiva:checked) { --papel: #0b121e; }
:where(.escuro) body:has(#tempo-raios:checked) { --papel: #080d16; --papel-3: #141f33; }

/* O selo segundo o tempo */
.selo-carta { animation: balanceo 7s ease-in-out infinite; }
@keyframes balanceo {
  0%, 100% { rotate: -8deg; translate: 0 0; }
  50% { rotate: -2deg; translate: 0 -10px; }
}
@keyframes tremer {
  0%, 100% { rotate: -8deg; translate: 0 0; }
  25% { rotate: -10deg; translate: -2px 2px; }
  75% { rotate: -6deg; translate: 2px 0; }
}
body:has(#tempo-nubes:checked) .selo-carta { animation-duration: 11s; }
body:has(#tempo-bretema:checked) .selo-carta { animation-duration: 14s; }
body:has(#tempo-orballo:checked) .selo-carta { animation-duration: 9s; }
body:has(#tempo-bretema:checked) .selo-fondo { fill: color-mix(in srgb, var(--papel-3) 85%, #b9c2cc); }
body:has(#tempo-bretema:checked) .selo-aro { animation-duration: 60s; }
body:has(#tempo-choiva:checked) .selo-carta { animation-name: tremer; animation-duration: 3.5s; }
body:has(#tempo-raios:checked) .selo-carta { animation-name: tremer; animation-duration: 1.4s; }
body:has(#tempo-choiva:checked) .selo-fondo { fill: color-mix(in srgb, var(--papel-3) 80%, #8aa0b8); }
body:has(#tempo-raios:checked) .selo-fondo { fill: color-mix(in srgb, var(--papel-3) 65%, #6d7f96); }
body:has(#tempo-choiva:checked) .selo-aro { animation-direction: reverse; animation-duration: 20s; }
body:has(#tempo-raios:checked) .selo-aro { animation-direction: reverse; animation-duration: 9s; }
body:has(#tempo-sol:checked) .selo-carta { box-shadow: 0 0 60px 6px rgb(255 196 90 / .28); }

/* Os triskeles nunca paran */
@keyframes xira { to { rotate: 360deg; } }
.selo-triskel use { transform-box: view-box; transform-origin: 50% 50%; animation: xira 14s linear infinite; }
.pe-icono { animation: xira 22s linear infinite; }
.rotulo::before { animation: xira 18s linear infinite; }
.retrouso li::after { animation: xira 10s linear infinite; }
.portada-triskel { animation-duration: 90s; }

/* Confeti de triskeles ao pedir */
.pedido { position: relative; }
.confeti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.confeti i {
  position: absolute;
  width: 1.7rem;
  height: 1.7rem;
  margin: -.85rem;
  background: linear-gradient(135deg, #fff, #a9e0d6);
  -webkit-mask: url("/triskel.svg") center / contain no-repeat;
  mask: url("/triskel.svg") center / contain no-repeat;
  opacity: 0;
}
.confeti i:nth-child(3n) { background: linear-gradient(135deg, #ffd27a, #f6f1e7); width: 1.2rem; height: 1.2rem; }
.confeti i:nth-child(4n) { border-radius: 50%; -webkit-mask: none; mask: none; width: .6rem; height: .6rem; background: #a9e0d6; }
.pedido[open] .confeti i { animation: estoupar 1.6s cubic-bezier(.15, .7, .3, 1) forwards; }
.confeti i:nth-child(1)  { --x: -15rem; --y: -7rem;  --r: 400deg; }
.confeti i:nth-child(2)  { --x: 13rem;  --y: -9rem;  --r: -380deg; animation-delay: .03s; }
.confeti i:nth-child(3)  { --x: -9rem;  --y: -12rem; --r: 300deg; animation-delay: .06s; }
.confeti i:nth-child(4)  { --x: 8rem;   --y: -13rem; --r: 200deg; }
.confeti i:nth-child(5)  { --x: -19rem; --y: 1rem;   --r: -320deg; animation-delay: .05s; }
.confeti i:nth-child(6)  { --x: 18rem;  --y: -1rem;  --r: 360deg; animation-delay: .02s; }
.confeti i:nth-child(7)  { --x: -4rem;  --y: -14rem; --r: -250deg; animation-delay: .08s; }
.confeti i:nth-child(8)  { --x: 3rem;   --y: -11rem; --r: 280deg; }
.confeti i:nth-child(9)  { --x: -12rem; --y: 5rem;   --r: 340deg; animation-delay: .04s; }
.confeti i:nth-child(10) { --x: 11rem;  --y: 6rem;   --r: -300deg; animation-delay: .07s; }
.confeti i:nth-child(11) { --x: -21rem; --y: -10rem; --r: 220deg; animation-delay: .1s; }
.confeti i:nth-child(12) { --x: 21rem;  --y: -6rem;  --r: -420deg; animation-delay: .09s; }
.confeti i:nth-child(13) { --x: -6rem;  --y: 8rem;   --r: 260deg; animation-delay: .03s; }
.confeti i:nth-child(14) { --x: 6rem;   --y: 9rem;   --r: -260deg; animation-delay: .06s; }
@keyframes estoupar {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 3rem)) rotate(var(--r)) scale(1); }
}
.resposta { animation: aparecer .6s var(--suave), latexar .6s var(--suave) .15s; }
@keyframes latexar { 40% { transform: scale(1.06); } }

/* Formas de pago e móbil cos avisos */
.pago {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.5rem 4rem;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.lista-pago { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.lista-pago li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  column-gap: .75rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  background-color: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--tinta-suave);
}
.lista-pago strong { display: block; color: var(--tinta); }
.marca-pago {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mar) 18%, transparent);
}
.marca-pago::after { content: "✓"; color: var(--mar); font-weight: 700; font-size: .9rem; }
.lista-pago .non strong { text-decoration: line-through; text-decoration-color: var(--vermello); text-decoration-thickness: 2px; }
.lista-pago .non .marca-pago { background: color-mix(in srgb, var(--vermello) 16%, transparent); }
.lista-pago .non .marca-pago::after { content: "✕"; color: var(--vermello); }

.movil {
  justify-self: center;
  width: min(100%, 19rem);
  aspect-ratio: 9 / 17;
  padding: .7rem;
  border-radius: 2.6rem;
  background: linear-gradient(145deg, #2b3a55, #0d1522);
  box-shadow: 0 40px 70px -30px rgb(15 39 71 / .7), inset 0 0 0 2px rgb(255 255 255 / .08);
  rotate: 4deg;
  transition: rotate .6s var(--suave);
}
.movil:hover { rotate: 0deg; }
.movil-pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 2.75rem .8rem 1rem;
  border-radius: 2rem;
  background:
    radial-gradient(18rem 14rem at 20% 0%, rgb(42 99 176 / .9), transparent 70%),
    radial-gradient(16rem 14rem at 100% 100%, rgb(47 125 116 / .9), transparent 70%),
    #0f2747;
}
.movil-pantalla::before { content: ""; position: absolute; top: .7rem; left: 50%; width: 5rem; height: 1.25rem; border-radius: 1rem; background: #05090f; transform: translateX(-50%); }
.movil-hora { margin: 0 0 1.5rem; text-align: center; color: #fff; font: 300 3rem/1 var(--sans); letter-spacing: -.02em; }
.aviso-pago {
  margin-top: .6rem;
  padding: .75rem .85rem;
  border-radius: 1.1rem;
  background: rgb(246 241 231 / .86);
  color: #172131;
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .5);
  animation: notificar 9s var(--suave) infinite;
}
.aviso-dous { animation-delay: 1.4s; }
.aviso-pago p { margin: 0; }
.aviso-cabeza { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4a5566; }
.aviso-app { width: .9rem; height: .9rem; border-radius: .25rem; background: linear-gradient(135deg, #2a63b0, #2f7d74); }
.aviso-cando { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; }
.aviso-pago .aviso-corpo { margin-top: .3rem; font-size: .86rem; line-height: 1.35; }
.aviso-corpo strong { display: block; font-size: .92rem; }
@keyframes notificar {
  0%, 4% { opacity: 0; transform: translateY(-1.5rem) scale(.96); }
  10%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-.5rem) scale(.98); }
}

/* Brillo que segue o rato (efectos.js pon --mx e --my) */
.lista-catalogo li, .lista-pago li {
  background-image: radial-gradient(16rem 16rem at var(--mx, -20rem) var(--my, -20rem), color-mix(in srgb, var(--azul-claro) 14%, transparent), transparent 70%);
}

/* Barra de progreso de lectura */
@supports (animation-timeline: scroll()) {
  .progreso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 3px;
    background: var(--degradado);
    transform-origin: left;
    animation: progreso linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Temas da portada: tema.js escolle un en cada visita (data-tema). Só a familia do azul de Sargadelos:
   variacións serenas, sen cores estridentes. Contraste medido en claro e escuro */
[data-tema="atlantico"] { --azul: #0f4c81; --azul-claro: #1d66a6; --azul-forte: #0a3559; --mar: #1b7896; --fondo-1: #0f4c81; --fondo-2: #08263f; }
[data-tema="ria"] { --azul: #1e5a8a; --azul-claro: #2a70a6; --azul-forte: #133d5e; --mar: #2f7f9f; --fondo-1: #1e5a8a; --fondo-2: #0c2a40; }
[data-tema="noite"] { --azul: #2b3f94; --azul-claro: #3b52b4; --azul-forte: #1b2a66; --mar: #2f6fb0; --fondo-1: #26388a; --fondo-2: #0e1638; }
[data-tema="lousa"] { --azul: #2e4a6e; --azul-claro: #3e6290; --azul-forte: #1f334d; --mar: #3a6c92; --fondo-1: #2f4a6d; --fondo-2: #141f2e; }
[data-tema="ceo"] { --azul: #1a5ba3; --azul-claro: #2a6fba; --azul-forte: #124478; --mar: #22709c; --fondo-1: #1d5fa8; --fondo-2: #0d2f57; }
:where(.escuro)[data-tema="atlantico"] { --azul: #8cc4f0; --azul-claro: #b0d8f7; --azul-forte: #d3e9fb; --mar: #7fd0e6; }
:where(.escuro)[data-tema="ria"] { --azul: #93c6e6; --azul-claro: #b8dbf0; --azul-forte: #d9edf8; --mar: #8fd3e0; }
:where(.escuro)[data-tema="noite"] { --azul: #a9b6f2; --azul-claro: #c6cff7; --azul-forte: #e0e5fb; --mar: #8fb3ea; }
:where(.escuro)[data-tema="lousa"] { --azul: #a9bfd9; --azul-claro: #c7d6e8; --azul-forte: #e1e9f3; --mar: #9ccbe6; }
:where(.escuro)[data-tema="ceo"] { --azul: #9ccaf5; --azul-claro: #bfdcf8; --azul-forte: #dcecfb; --mar: #8fd8f0; }

/* Formas do fondo da portada (data-forma): triskel de liña, triskel holográfico, aneis de Sargadelos ou onda trenzada */
@property --angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.portada-forma { position: absolute; z-index: -1; pointer-events: none; display: none; }
[data-forma="holograma"] .portada-triskel, [data-forma="aneis"] .portada-triskel, [data-forma="onda"] .portada-triskel { display: none; }
[data-forma="holograma"] .portada-forma {
  display: block;
  right: -13rem;
  top: 50%;
  width: 46rem;
  height: 46rem;
  margin-top: -23rem;
  background: conic-gradient(from var(--angulo), #2a63b0, #7fd0e6, #b9b2f2, #8fb3ea, #3a86d4, #a9e0f0, #2a63b0);
  -webkit-mask: url("/triskel.svg") center / contain no-repeat;
  mask: url("/triskel.svg") center / contain no-repeat;
  opacity: .42;
  animation: holograma 7s linear infinite, xirar 120s linear infinite;
}
/* Brillo de lámina que pasa por riba do holograma */
[data-forma="holograma"] .portada-forma::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .75) 48%, transparent 60%) 0 0 / 250% 100% no-repeat;
  -webkit-mask: inherit;
  mask: inherit;
  animation: lamina 5.5s ease-in-out infinite;
}
@keyframes holograma { to { --angulo: 360deg; } }
@keyframes lamina { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
:where(.escuro)[data-forma="holograma"] .portada-forma { opacity: .32; } :where(.escuro)[data-forma="holograma"] .portada-forma::after { opacity: .5; }
[data-forma="aneis"] .portada-forma {
  display: block;
  right: -16rem;
  top: 50%;
  width: 44rem;
  height: 44rem;
  margin-top: -22rem;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 2.4rem, color-mix(in srgb, var(--azul) 26%, transparent) 2.4rem 2.55rem),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--azul) 10%, transparent) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%);
  mask: radial-gradient(circle, #000 35%, transparent 70%);
  animation: xirar 120s linear infinite;
}
[data-forma="onda"] .portada-forma {
  display: block;
  right: -16rem;
  top: -1rem;
  width: 60rem;
  height: 4.5rem;
  background: var(--degradado);
  opacity: .26;
  -webkit-mask: url("/celta.svg") repeat-x center / 144px 48px;
  mask: url("/celta.svg") repeat-x center / 144px 48px;
  rotate: -18deg;
}
[data-forma="onda"] .portada-forma::after {
  content: "";
  position: absolute;
  inset: 14rem 0 auto 12rem;
  height: 4.5rem;
  background: inherit;
  -webkit-mask: inherit;
  mask: inherit;
}
@media (max-width: 40rem) {
  [data-forma="holograma"] .portada-forma, [data-forma="aneis"] .portada-forma { right: -20rem; top: 2rem; margin-top: 0; width: 32rem; height: 32rem; }
  [data-forma="onda"] .portada-forma { right: -24rem; }
}

/* Hoxe tócache: unha tarifa ao chou na portada */
.toca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  max-width: 40rem;
  margin-top: 1.6rem;
  padding: .85rem 1rem .85rem 1.2rem;
  border-radius: 1.1rem;
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
}
.toca[hidden] { display: none; }
/* O rotador e «Hoxe tócache» veñen co texto de serie no HTML (sen saltos ao cargar); sen JavaScript, «Outra» non fai
   nada e non se ve, pero garda o seu oco */
html:not(.js) .toca-outra { visibility: hidden; }
.toca-texto { flex: 1 1 18rem; margin: 0; line-height: 1.4; color: var(--tinta-suave); }
.toca-rotulo { display: block; font: 700 .72rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mar); }
.toca-servizo { color: var(--tinta); }
.toca-prezo { font-family: var(--serif); font-style: italic; color: var(--azul); }
.toca-prezo::before { content: "→ "; font-style: normal; color: var(--tinta-suave); }
.toca-texto.cambia { animation: aparecer .45s var(--suave); }
.toca-outra {
  padding: .45rem .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--papel-2);
  color: var(--azul);
  font: 650 .88rem/1 var(--sans);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .2s ease, transform .3s var(--suave);
}
.toca-outra:hover { background: var(--papel); transform: rotate(-3deg); }
.toca-outra:focus-visible { outline: 3px solid var(--vermello); outline-offset: 2px; }

/* Detalles: grao de papel, selección, rótulos e parte meteorolóxico */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: url("/grano.svg");
  opacity: .05;
  mix-blend-mode: multiply;
}
:where(.escuro) body::after { opacity: .08; mix-blend-mode: screen; filter: invert(1); }
::selection { background: color-mix(in srgb, var(--mar) 30%, transparent); color: var(--tinta); }
html { scrollbar-color: color-mix(in srgb, var(--azul) 45%, var(--papel)) var(--papel); }

.rotulo {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
  font: 700 .78rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mar);
}
.rotulo::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--degradado);
  -webkit-mask: url("/triskel.svg") center / contain no-repeat;
  mask: url("/triskel.svg") center / contain no-repeat;
}
.antetitulo-suave { color: var(--tinta-suave); font-style: italic; }

.prazo {
  display: block;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--linea);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--mar);
}
.lista-catalogo li { display: flex; flex-direction: column; }
.lista-catalogo p { flex: 1; }

.carta-titulo {
  margin: 0 0 1rem;
  text-align: center;
  font: italic 600 1.1rem/1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--azul);
}
.carta-titulo::before, .carta-titulo::after { content: " ~ "; color: var(--linea); }
.compartir-cabeceira {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  padding: .4rem .85rem .4rem .6rem;
  border-radius: 999px;
  background: var(--degradado);
  color: #fff;
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px rgb(29 79 145 / .8);
  transition: transform .3s var(--suave), box-shadow .3s var(--suave);
}
.compartir-cabeceira:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgb(47 125 116 / .9); }
.compartir-cabeceira svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: rotate .5s var(--suave); }
.compartir-cabeceira:hover svg { rotate: -20deg; }
:where(.escuro) .compartir-cabeceira, :where(.escuro) .compartir-cabeceira:hover { color: #0d1522; }
.accions .compartir { gap: .45rem; }
.compartir-bloque { display: grid; justify-items: center; gap: .6rem; margin-top: 2.25rem; }
.boton-compartir {
  gap: .55rem;
  background: rgb(255 255 255 / .08);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45), 0 14px 30px -16px rgb(0 0 0 / .6);
}
.boton-compartir:hover { background: rgb(255 255 255 / .16); color: #fff; box-shadow: inset 0 0 0 1.5px #a9e0d6, 0 18px 34px -16px rgb(0 0 0 / .6); }
.boton-compartir .icona-tempo { transition: rotate .5s var(--suave); }
.boton-compartir:hover .icona-tempo { rotate: -20deg; }
.compartir-nota { margin: 0; font-size: .85rem; color: rgb(246 241 231 / .9); }
:where(.escuro) .boton-compartir, :where(.escuro) .boton-compartir:hover { color: #fff; }
.horario { margin: 1.75rem 0 0; font-size: .9rem; color: rgb(246 241 231 / .88); }

.cabeceira nav a { background-image: linear-gradient(var(--mar), var(--mar)); background-repeat: no-repeat; background-size: 0 1.5px; background-position: 50% calc(100% - .3rem); transition: background-size .35s var(--suave), background-color .2s ease, color .2s ease; }
.cabeceira nav a:hover { background-size: calc(100% - 1.5rem) 1.5px; }

/* Máis opinións, só se se piden */
.mais-opinions { margin-top: .25rem; }
.mais-opinions > summary {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: .25rem 0 1.5rem;
  padding: .7rem 1.2rem .7rem 1.4rem;
  border-radius: 999px;
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1.5px var(--linea), var(--sombra);
  color: var(--azul);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: box-shadow .3s var(--suave), transform .3s var(--suave);
}
.mais-opinions > summary::-webkit-details-marker { display: none; }
.mais-opinions > summary:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--azul), var(--sombra-forte); }
.mais-conta { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: .4rem; border-radius: 999px; background: var(--degradado); color: #fff; font-size: .85rem; font-weight: 700; }
:where(.escuro) .mais-conta { color: #0d1522; }
.mais-aberto, .mais-opinions[open] .mais-pechado, .mais-opinions[open] .mais-conta { display: none; }
.mais-opinions[open] .mais-aberto { display: inline; }
.mais-opinions[open] .lista-opinions li { animation: aparecer .5s var(--suave) both; }
.mais-opinions[open] .lista-opinions li:nth-child(2) { animation-delay: .06s; }
.mais-opinions[open] .lista-opinions li:nth-child(3) { animation-delay: .12s; }
.mais-opinions[open] .lista-opinions li:nth-child(4) { animation-delay: .18s; }
.mais-opinions[open] .lista-opinions li:nth-child(5) { animation-delay: .24s; }
.mais-opinions[open] .lista-opinions li:nth-child(6) { animation-delay: .3s; }

/* Menú: sección na que estás (efectos.js) */
.cabeceira nav a[aria-current] { color: var(--azul); background-size: calc(100% - 1.5rem) 1.5px; }

/* Con JavaScript o desprazamento lévao efectos.js, máis suave e co tempo medido */
html.js { scroll-behavior: auto; }

/* Scroll: aparicións en cascada (efectos.js pon .revelar e .visto), cortinas nos títulos e paralaxe.
   Sen JavaScript ou con movemento reducido non se esconde nada. */
html.js .revelar {
  opacity: 0;
  translate: 0 2.2rem;
  scale: .97;
  transition:
    opacity .9s var(--suave) calc(var(--i, 0) * 80ms),
    translate 1.1s var(--suave) calc(var(--i, 0) * 80ms),
    scale 1.1s var(--suave) calc(var(--i, 0) * 80ms),
    transform .4s var(--suave),
    rotate .4s var(--suave),
    box-shadow .4s var(--suave);
}
html.js .revelar.visto { opacity: 1; translate: 0 0; scale: 1; }

/* Títulos: ábrense coma unha cortina e o degradado pasa unha vez */
html.js h2.revelar { scale: 1; translate: 0 .5em; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--suave), translate 1.1s var(--suave), opacity .6s ease; }
html.js h2.revelar.visto { clip-path: inset(-10% -5% -25% -5%); }
h2 .destaque { background-size: 220% 100%; background-position: 100% 0; }
html.js h2.visto .destaque { animation: brillo 2.4s var(--suave) .5s both; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* As liñas das tarxetas debúxanse despois de aparecer */
html.js .lista-catalogo li.revelar::before { transform: scaleX(0); transition: transform .8s var(--suave) calc(var(--i, 0) * 80ms + .5s); }
html.js .lista-catalogo li.visto::before { transform: scaleX(.18); }
html.js .lista-catalogo li.visto:hover::before { transform: scaleX(1); transition-delay: 0s; }

/* Cinta de frases: inclínase coa velocidade do scroll (efectos.js pon --inercia) */
.retrouso ul { transform: skewX(var(--inercia, 0deg)); transition: transform .25s ease-out; }

/* Paralaxe e cabeceira, onde o navegador ten scroll-driven animations */
@supports (animation-timeline: scroll()) {
  .portada-triskel {
    animation: xirar 90s linear infinite, paralaxe-fondo linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 100vh;
  }
  @keyframes paralaxe-fondo { to { translate: 0 18vh; scale: 1.15; } }
  .portada-texto {
    animation: saida-portada linear both;
    animation-timeline: view();
    animation-range: exit 10% exit 95%;
  }
  /* Saída suave: nótase, pero o texto séguese lendo mentres se ve */
  @keyframes saida-portada { to { opacity: .4; translate: 0 -2.2rem; } }
  .cabeceira {
    animation: cabeceira-baixa linear both;
    animation-timeline: scroll(root);
    animation-range: 0 140px;
  }
  @keyframes cabeceira-baixa { to { box-shadow: 0 1px 0 var(--linea), 0 14px 34px -24px rgb(15 39 71 / .45); } }
  .numeros::after {
    animation: xira-scroll linear both;
    animation-timeline: view();
  }
  @keyframes xira-scroll { from { rotate: -60deg; } to { rotate: 120deg; } }
  .final-triskel {
    animation: xirar 90s linear infinite reverse, paralaxe-final linear both;
    animation-timeline: auto, view();
  }
  @keyframes paralaxe-final { from { translate: 0 6rem; } to { translate: 0 -6rem; } }
}

/* Móbil e tableta */
@media (max-width: 52rem) {
  .tarifa { grid-template-columns: 1fr; }
  .tarifa-cabeza { position: static; }
}
@media (max-width: 40rem) {
  .portada { grid-template-columns: 1fr; }
  .portada-triskel { right: -16rem; top: 2rem; margin-top: 0; width: 30rem; height: 30rem; }
  .selo-carta { justify-self: start; width: 12.5rem; margin-top: .25rem; }
  .pago { grid-template-columns: 1fr; }
  .movil { width: min(100%, 17rem); }
  .lista-tarifa > div { grid-template-columns: 1fr; }
  .lista-tarifa dd { text-align: left; }
  .cabeceira nav { width: 100%; }
  .cabeceira ul { margin-left: -.75rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .cabeceira ul::-webkit-scrollbar { display: none; }
  .cabeceira nav a { padding: .35rem .6rem; white-space: nowrap; }
  .cabeceira-dentro { padding-block: .6rem; column-gap: .6rem; }
  /* Compartir só co icono (leva aria-label): a marca, a lupa e compartir caben nunha fila */
  .compartir-cabeceira { width: 2.25rem; height: 2.25rem; justify-content: center; padding: 0; gap: 0; font-size: 0; }
}

/* Movemento reducido: nada en bucle nin desprazándose. Cada animación salta ao seu estado final (o triskel, o
   selo, as nubes, a choiva e a cinta quedan quietos); o degradado SVG do logo párao efectos.js */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .aviso-pago { opacity: 1; animation: none; }
  .portada-texto, .cabeceira, .numeros::after, .portada-triskel { animation: none !important; }
  .retrouso ul { transform: none; }
  .ceo-lostrego { display: none; }
}
/* Bucles en pausa mentres a súa sección non se ve; o ceo da portada, ao saír dela (efectos.js) */
.fora, .fora *, .fora *::before, .fora *::after, .ceo-quieto .ceo-fondo *, .ceo-quieto .ceo-fondo *::before { animation-play-state: paused !important; }

/* 404 */
.erro { padding-block: clamp(4rem, 12vw, 9rem); }
.erro p { max-width: 40ch; font-size: 1.2rem; margin: 1.25rem 0 2rem; }

/* Rótulos pequenos en maiúsculas: un chisco máis escuros que o verde mar para ler ben en todos os temas */
.rotulo, .toca-rotulo, .tempo-titulo, .prazo, .categoria { color: color-mix(in srgb, var(--mar) 70%, var(--tinta)); }

/* En modo escuro o sol vai máis apagado: é noite na pantalla, non un foco */
:where(.escuro) .ceo-sol { filter: saturate(.75) brightness(.85); }
:where(.escuro) body:has(#tempo-sol:checked) .ceo-sol { opacity: .6; }
:where(.escuro)[data-forma="onda"] .portada-forma { opacity: .16; }


/* ---------- Web viva: o que cambia en cada visita (efectos.js + contido.js) ---------- */

/* Especialidade da casa: un oficio distinto cada poucos segundos */
.rotador { margin: .9rem 0 0; color: var(--tinta-suave); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.rotador[hidden] { display: none; }
.rotador-texto { display: inline-block; font: italic 600 1.1em/1.2 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--azul); }
.rotador-texto.cambia { animation: rotar .55s var(--suave); }
@keyframes rotar { from { opacity: 0; translate: 0 .55em; } }

/* Disposición da portada: ás veces o selo vai á esquerda */
@media (width > 40rem) {
  [data-disposicion="invertida"] .portada { grid-template-columns: auto minmax(0, 1fr); }
  [data-disposicion="invertida"] .portada-texto { order: 2; }
  [data-disposicion="invertida"] .selo-carta { order: 1; }
  [data-disposicion="invertida"] .portada-triskel, [data-disposicion="invertida"] .portada-forma { right: auto; left: -14rem; }
}
/* Ritmo: ás veces os títulos das seccións van centrados */
[data-ritmo="b"] :is(.catalogo, .dicionario, .preguntas) > :is(.rotulo, h2, .seccion-entrada) { text-align: center; justify-content: center; margin-inline: auto; }
[data-ritmo="b"] .lista-preguntas { margin-inline: auto; }
/* A cinta de frases corre nun sentido ou noutro */
[data-cinta="dereita"] .retrouso-pista { animation-direction: reverse; }

.catalogo-mais { display: flex; justify-content: center; margin: 1.75rem 0 0; }
.catalogo-mais[hidden] { display: none; }

/* O refrán de hoxe */
.refran {
  position: relative;
  max-width: 50rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5rem) 0;
  text-align: center;
}
.refran .rotulo { justify-content: center; }
.refran-texto { margin: .5rem 0 0; }
.refran-texto p {
  margin: 0;
  font: italic 600 clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem)/1.2 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--tinta);
}
.refran-texto p::before, .refran-texto p::after { color: var(--azul); }
.refran-texto p::before { content: "« "; }
.refran-texto p::after { content: " »"; }
.refran-remate { margin: 1rem auto 0; max-width: 34ch; font-size: 1.15rem; color: var(--tinta-suave); }
.refran-remate::before { content: "— "; color: var(--azul); }
.refran-outro { margin-top: 1.25rem; }
.refran.cambia .refran-texto, .refran.cambia .refran-remate { animation: aparecer .5s var(--suave); }

/* Aviso flotante: copiar, o logo… */
.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 50;
  max-width: min(90vw, 26rem);
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 92%, transparent);
  color: var(--papel);
  font: 600 .95rem/1.3 var(--sans);
  text-align: center;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .6);
  pointer-events: none;
  opacity: 0;
  translate: -50% 1rem;
  transition: opacity .35s ease, translate .45s var(--suave);
}
.aviso-flotante.visible { opacity: 1; translate: -50% 0; }
.marca-icono.tolo { animation: xira .6s linear 3; }

/* Móbil: servizos e opinións en carrusel lateral, para non facer tan longo o scroll */
@media (max-width: 40rem) {
  .lista-catalogo, .opinions .lista-opinions {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -1.25rem;
    padding: .5rem 1.25rem 1.25rem;
    scrollbar-width: none;
    columns: auto;
  }
  .lista-catalogo::-webkit-scrollbar, .opinions .lista-opinions::-webkit-scrollbar { display: none; }
  .lista-catalogo > li, .opinions .lista-opinions > li { flex: 0 0 82%; scroll-snap-align: center; margin: 0; }
  .catalogo .seccion-entrada::after, .opinions-cabeza::after { content: "Desliza →"; display: block; margin-top: .6rem; font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
  .opinions-cabeza { flex-direction: column; align-items: flex-start; }
}

/* Momento do día (tema.js e efectos.js): luz do ceo, sol ou lúa no seu sitio e estrelas pola noite. Só azuis.
   Sen JavaScript non hai data-momento e queda o ceo de sempre */
.momento { margin: 0 0 .9rem; max-width: 48ch; color: var(--tinta-suave); font-size: .95rem; line-height: 1.45; }
.momento[hidden] { display: none; }
.momento-nome { font: italic 600 1.2rem/1 var(--serif); color: var(--tinta); }
.momento-hora { font-size: .8rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; color: color-mix(in srgb, var(--mar) 70%, var(--tinta)); }
.momento-texto { display: block; margin-top: .25rem; animation: aparecer .6s var(--suave); }

.ceo-fondo > .ceo-luz { inset: 0; opacity: 1; visibility: visible; animation: luz-entra 2.4s ease both; }
@keyframes luz-entra { from { opacity: 0; } }
[data-momento="madrugada"] .ceo-luz { background: linear-gradient(rgb(46 72 186 / .2), rgb(60 92 205 / .08) 55%, transparent 85%); }
[data-momento="amencer"] .ceo-luz { background: radial-gradient(70rem 30rem at 0% 52%, rgb(150 184 255 / .34), transparent 70%), linear-gradient(rgb(70 110 200 / .14), transparent 60%); }
[data-momento="mana"] .ceo-luz { background: radial-gradient(60rem 30rem at 80% 0%, rgb(140 195 255 / .24), transparent 70%); }
[data-momento="mediodia"] .ceo-luz { background: linear-gradient(rgb(110 175 255 / .2), rgb(160 205 255 / .08) 45%, transparent 75%); }
[data-momento="tarde"] .ceo-luz { background: radial-gradient(64rem 34rem at 100% 20%, rgb(80 135 230 / .22), transparent 70%); }
[data-momento="solpor"] .ceo-luz { background: radial-gradient(72rem 30rem at 100% 64%, rgb(98 96 220 / .3), transparent 72%), linear-gradient(rgb(40 70 160 / .16), transparent 65%); }
[data-momento="noite"] .ceo-luz { background: linear-gradient(rgb(46 72 186 / .15), rgb(60 92 205 / .06) 55%, transparent 85%); }
/* Amencer e solpor en claro: o papel colle a luz da hora azul, un chisco máis frío e apagado (só o fondo; o
   contraste do texto segue por riba de 6:1). O tempo escollido manda sobre isto (body:has no bloque do tempo) */
[data-momento="amencer"]:not(.escuro) { --papel: #f1efe9; }
[data-momento="solpor"]:not(.escuro) { --papel: #eeebe6; }
/* Pola noite a web vai en escuro (tema.js) e o ceo, máis fondo; sen JavaScript queda o azul suave de arriba */
:where(.escuro)[data-momento="madrugada"] .ceo-luz { background: linear-gradient(rgb(10 18 52 / .34), rgb(16 28 74 / .14) 55%, transparent 85%); }
:where(.escuro)[data-momento="noite"] .ceo-luz { background: linear-gradient(rgb(14 24 64 / .26), rgb(20 34 84 / .1) 55%, transparent 85%); }

/* O sol (ou a lúa) percorre o ceo: baixo ao amencer, alto ao xantar, baixo cara ás Cíes ao solpor */
.ceo-fondo > .ceo-sol { transition: opacity 1.4s ease, visibility 1.4s, top 3s var(--suave), right 3s var(--suave); }
[data-momento="madrugada"] .ceo-sol { top: calc(26vh - 20rem); right: -15rem; }
[data-momento="amencer"] .ceo-sol { top: calc(48vh - 20rem); right: calc(100% - 13rem);
  background: radial-gradient(circle, rgb(255 238 210 / .6) 0 8%, rgb(176 200 255 / .24) 30%, transparent 62%); }
[data-momento="mana"] .ceo-sol { top: -15rem; right: calc(14% - 20rem); }
[data-momento="mediodia"] .ceo-sol { top: -25rem; right: calc(32% - 20rem); }
[data-momento="solpor"] .ceo-sol { top: calc(58vh - 20rem); right: -24rem;
  background: radial-gradient(circle, rgb(255 222 180 / .55) 0 8%, rgb(130 130 235 / .24) 30%, transparent 62%); }
[data-momento="noite"] .ceo-sol { top: -17rem; right: calc(10% - 20rem); }

/* Estrelas: dúas capas fixas e unha que escintila, e de cando en vez unha fugaz */
.ceo-estrelas { --e: rgb(43 63 148 / .5); inset: 0 0 20%; }
:where(.escuro) .ceo-estrelas { --e: rgb(236 242 255 / .85); }
.ceo-estrelas, .ceo-estrelas i {
  background-image:
    radial-gradient(circle 1.3px at 22px 34px, var(--e) 90%, transparent),
    radial-gradient(circle 1px at 118px 12px, var(--e) 90%, transparent),
    radial-gradient(circle 1.6px at 190px 96px, var(--e) 90%, transparent),
    radial-gradient(circle 1px at 64px 150px, var(--e) 90%, transparent),
    radial-gradient(circle 1.2px at 250px 178px, var(--e) 90%, transparent),
    radial-gradient(circle 1px at 152px 206px, var(--e) 90%, transparent);
  background-size: 290px 230px;
}
.ceo-estrelas i { position: absolute; inset: 0; background-size: 410px 330px; background-position: 140px 60px; animation: escintilar 3.6s ease-in-out infinite alternate; }
@keyframes escintilar { from { opacity: .15; } to { opacity: 1; } }
.ceo-estrelas::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 70%;
  width: 9rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e));
  opacity: 0;
  transform: rotate(-24deg);
  animation: fugaz 13s ease-in 4s infinite;
}
@keyframes fugaz {
  0% { opacity: 0; translate: 0 0; }
  1% { opacity: 1; }
  5% { opacity: 0; translate: -22rem 10rem; }
  100% { opacity: 0; translate: -22rem 10rem; }
}
[data-momento="noite"] .ceo-estrelas, [data-momento="madrugada"] .ceo-estrelas { opacity: 1; visibility: visible; }
body:has(#tempo-nubes:checked) .ceo-estrelas, body:has(#tempo-orballo:checked) .ceo-estrelas { opacity: .35; }
body:has(#tempo-bretema:checked) .ceo-estrelas, body:has(#tempo-choiva:checked) .ceo-estrelas,
body:has(#tempo-raios:checked) .ceo-estrelas { opacity: .1; }

@media (prefers-reduced-motion: reduce) {
  .ceo-fondo > .ceo-luz, .ceo-estrelas i, .momento-texto { animation: none; }
  .ceo-estrelas::after { display: none; }
  .ceo-fondo > .ceo-sol { transition: opacity 1.4s ease, visibility 1.4s; }
}

/* De onde vén isto? Fichas de arquivo: procedencia en versalitas, dato e remate en cursiva */
.orixes { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.lista-orixes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.lista-orixes li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--radio);
  background:
    repeating-linear-gradient(to bottom, transparent 0 1.9rem, color-mix(in srgb, var(--azul) 7%, transparent) 1.9rem calc(1.9rem + 1px)),
    var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.lista-orixes li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radio) 0 0 var(--radio);
  background: var(--degradado);
}
.lista-orixes li:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-forte); }
.orixe-cabeza { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; margin: 0 0 .6rem; }
.orixe-num { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--mar) 70%, var(--tinta)); }
.orixe-de { font: italic 500 .95rem/1.2 var(--serif); color: var(--tinta-suave); }
.lista-orixes h3 { margin: 0 0 .6rem; font: 700 1.55rem/1.1 var(--serif); color: var(--tinta); }
.orixe-dato { margin: 0 0 1rem; color: var(--tinta-suave); }
.orixe-remate {
  margin: auto 0 0;
  padding-top: .85rem;
  border-top: 1px dashed var(--linea);
  font: italic 600 1.05rem/1.35 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--azul);
}
.orixes-mais { display: flex; justify-content: center; margin: 1.75rem 0 0; }
.orixes-mais[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lista-orixes li { transition: none; } .lista-orixes li:hover { transform: none; } }
[data-ritmo="b"] .orixes > :is(.rotulo, h2, .seccion-entrada) { text-align: center; justify-content: center; margin-inline: auto; }

/* Chistes de sempre: lousas de taberna en azul, letra de xiz e o remate tapado ata «E logo?» */
.chistes { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.lista-chistes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .lista-chistes { grid-template-columns: repeat(2, 1fr); } }
.chiste {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 14rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: var(--radio);
  background:
    radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / .09), transparent 60%),
    linear-gradient(150deg, var(--fondo-1), var(--fondo-2) 75%);
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / .06), inset 0 0 0 7px rgb(0 0 0 / .18), var(--sombra);
  color: #f3f0e8;
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.chiste:hover { transform: translateY(-4px) rotate(.4deg); box-shadow: inset 0 0 0 6px rgb(255 255 255 / .06), inset 0 0 0 7px rgb(0 0 0 / .18), var(--sombra-forte); }
.chiste-num { position: absolute; top: 1rem; right: 1.2rem; font: italic 600 1rem/1 var(--serif); color: rgb(243 240 232 / .55); }
.chiste-linea { margin: 0 0 .35rem; font: 500 1.08rem/1.4 var(--sans); }
.chiste-remate {
  margin: .9rem 0 0;
  font: italic 650 clamp(1.45rem, 1.2rem + 1vw, 1.8rem)/1.15 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: #fff;
  transition: opacity .45s ease, filter .45s ease, translate .45s var(--suave);
}
.chiste.tapado .chiste-remate { opacity: 0; filter: blur(6px); translate: 0 .4rem; user-select: none; }
.chiste-boton {
  align-self: flex-start;
  margin-top: auto;
  padding: .45rem 1rem;
  border: 1.5px solid rgb(243 240 232 / .6);
  border-radius: 999px;
  background: transparent;
  color: #f3f0e8;
  font: 600 .92rem/1 var(--sans);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.chiste:not(.tapado) .chiste-boton { margin-top: 1.1rem; }
.chiste-boton:hover, .chiste-boton:focus-visible { background: #f3f0e8; color: var(--fondo-2); }
.chiste-boton:focus-visible { outline: 3px solid #f3f0e8; outline-offset: 3px; }
.chiste-boton[hidden] { display: none; }
.chistes-nota { margin: 1.5rem 0 0; color: var(--tinta-suave); font: italic 500 1rem/1.4 var(--serif); }
@media (prefers-reduced-motion: reduce) { .chiste, .chiste-remate { transition: none; } .chiste:hover { transform: none; } }
[data-ritmo="b"] .chistes > :is(.rotulo, h2, .seccion-entrada, .chistes-nota) { text-align: center; justify-content: center; margin-inline: auto; }

/* A retranca tamén se debuxa: autores de viñeta, sen reproducir a súa obra */
.vinetas { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.lista-vinetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem 2rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.lista-vinetas li { padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--azul) 45%, transparent); }
.vineta-autor { margin: 0; font: italic 650 1.3rem/1.15 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--azul); }
.vineta-onde { margin: .2rem 0 .45rem; font: 600 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--mar) 70%, var(--tinta)); }
.vineta-texto { margin: 0; color: var(--tinta-suave); font-size: .97rem; }
[data-ritmo="b"] .vinetas > :is(.rotulo, h2, .seccion-entrada) { text-align: center; justify-content: center; margin-inline: auto; }

/* Apéndice: a costura entre a broma e a broma explicada. Centrado, entre dúas regras, co triskel no medio */
.apendice {
  position: relative;
  max-width: 46rem;
  margin: clamp(2rem, 6vw, 4rem) auto 0;
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.apendice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea) 20%, var(--azul) 50%, var(--linea) 80%, transparent);
}
.apendice .rotulo { justify-content: center; }
.apendice h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
.apendice h2 .destaque { display: block; }
.apendice .seccion-entrada { margin-inline: auto; max-width: 38rem; }

/* Créditos e letra pequena (/creditos/): páxina sinxela, de lectura, enlazada en pequeno desde o pé */
.pe-legal { margin-top: .9rem !important; font-size: .82rem; }
.pe-legal a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; }
.letra { max-width: 46rem; margin-inline: auto; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem); }
.letra-cabeza h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.8rem); }
.letra-cabeza h1 .destaque { display: inline; }
.letra-bloque { margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid var(--linea); }
.letra-bloque h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .8rem; }
.letra-bloque p, .letra-bloque li { color: var(--tinta-suave); }
.letra-bloque ul { margin: 0; padding-left: 1.1rem; }
.letra-bloque li { margin: 0 0 .55rem; }
.letra-bloque strong { color: var(--tinta); }
.letra-bloque a { color: var(--azul); text-underline-offset: .18em; }
.letra-volver { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.letra-bloque h3 { margin: 1.3rem 0 .5rem; font: 700 1.15rem/1.2 var(--serif); color: var(--tinta); }

/* Espazos despois de reordenar (24/10/2026): a banda das cifras vai agora entre servizos e tarifa e precisa aire
   propio; o número dos chistes vai enriba do texto para non pisalo no móbil */
.numeros { margin-block: clamp(3rem, 8vw, 5rem); }
.catalogo-mais { margin-bottom: .5rem; }

/* Cifras: as documentadas levan «Dato real» para non confundilas coa contabilidade inventada */
.dato-real {
  display: inline-block;
  align-self: flex-start;
  justify-self: start;
  width: max-content;
  margin-top: .45rem;
  padding: .15rem .55rem;
  border: 1px solid rgb(246 241 231 / .45);
  border-radius: 999px;
  font: 600 .68rem/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(246 241 231 / .85);
}

/* Calcula o favor: formulario á esquerda e recibo de papel á dereita (no móbil, un debaixo do outro). O recibo usa
   letra de máquina só nos datos; o selo cae unha vez ao facelo (sen movemento, aparece sen máis) */
.calcula { padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.calcula-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 2.25rem; }
@media (max-width: 52rem) { .calcula-corpo { grid-template-columns: 1fr; } }
.calcula-form[hidden] { display: none; }
.calcula-pregunta { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.calcula-pregunta legend { margin-bottom: .6rem; font: 700 1.15rem/1.2 var(--serif); color: var(--tinta); }
.calcula-opcions { display: flex; flex-wrap: wrap; gap: .5rem; }
.calcula-opcions input { position: absolute; opacity: 0; pointer-events: none; }
.calcula-opcions label {
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1.5px var(--linea);
  color: var(--tinta);
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.calcula-opcions input:checked + label { background: var(--azul); box-shadow: none; color: var(--papel); }
.calcula-opcions input:focus-visible + label { outline: 3px solid var(--azul); outline-offset: 3px; }
.recibo {
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: 6px;
  background: #fffdf8;
  color: #24262b;
  box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 30px 60px -30px rgb(15 39 71 / .45);
  -webkit-mask: linear-gradient(#000 calc(100% - 10px), transparent 0), conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 50% 100% / 20px 10px repeat-x;
  mask: linear-gradient(#000 calc(100% - 10px), transparent 0), conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 50% 100% / 20px 10px repeat-x;
  outline: none;
}
.recibo-cabeza { margin: 0; text-align: center; font: 700 1.25rem/1.2 var(--serif); }
.recibo-expediente { margin: .35rem 0 1rem; padding-bottom: .9rem; border-bottom: 1.5px dashed #c9c4b8; text-align: center; font: 600 .78rem/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #5b606b; }
.recibo-linas { margin: 0; }
.recibo-linas > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .2rem 1rem; padding: .45rem 0; border-bottom: 1px dotted #ddd6c8; }
/* As liñas do recibo pasan a unha columna segundo o ancho do propio recibo, non o da pantalla */
.recibo { container-type: inline-size; }
@container (max-width: 24rem) { .recibo-linas > div { grid-template-columns: 1fr; } }
.recibo-linas dt { font: 600 .72rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #6b6f78; }
.recibo-linas dd { margin: 0; font-size: 1rem; line-height: 1.4; }
.recibo-selo {
  display: block;
  width: max-content;
  margin: 1.1rem .4rem 0 auto;
  padding: .35rem .8rem;
  border: 3px double #1d4f91;
  border-radius: 8px;
  color: #1d4f91;
  font: 800 .9rem/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
  transform: rotate(-9deg);
  pointer-events: none;
}
.recibo.selado .recibo-selo { animation: selar .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes selar { from { opacity: 0; transform: rotate(-9deg) scale(2.2); } to { opacity: .75; transform: rotate(-9deg) scale(1); } }
.recibo-nota { margin: 1rem 0 0; font: italic 600 1rem/1.3 var(--serif); color: #1d4f91; }
.recibo-accions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 .4rem; }
.recibo-accions .boton { font-size: .92rem; padding: .7rem 1.1rem; }
.favor-dia { margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--azul); background: var(--papel-3); border-radius: 0 var(--radio) var(--radio) 0; }
.favor-dia[hidden] { display: none; }
.favor-dia-rotulo { margin: 0 0 .3rem; font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--mar) 70%, var(--tinta)); }
.favor-dia-texto { margin: 0; font: italic 600 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.35 var(--serif); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .recibo.selado .recibo-selo { animation: none; } }
[data-ritmo="b"] .calcula > :is(.rotulo, h2, .seccion-entrada) { text-align: center; justify-content: center; margin-inline: auto; }

/* Texto só para lectores de pantalla (aviso curto do recibo) */
.oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Especialidade da casa: botón para parala (WCAG 2.2.2); tamén se para co rato enriba ou co foco dentro */
.rotador-pausa {
  margin-right: .15rem;
  padding: .2rem .65rem;
  border: 0;
  border-radius: 999px;
  background: var(--papel-2);
  color: var(--azul);
  font: 650 .78rem/1.4 var(--sans);
  vertical-align: .1em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linea);
}
.rotador-pausa:hover { background: var(--papel-3); }
.rotador-pausa[hidden] { display: none; }

/* Títulos sen viúvas e parágrafos sen palabras soltas ao final */
h1, h2, h3 { text-wrap: balance; }
.entrada, .seccion-entrada, .refran-remate, .lista-catalogo p { text-wrap: pretty; }

/* Buscador (paleta.js): botón da lupa na cabeceira e caixa con <dialog> */
.abrir-paleta {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--papel-3);
  color: var(--azul);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--linea);
  transition: box-shadow .2s ease, color .2s ease;
}
.abrir-paleta:hover { color: var(--azul-forte); box-shadow: inset 0 0 0 1.5px var(--azul); }
.abrir-paleta[hidden] { display: none; }
.abrir-paleta svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.abrir-paleta:not([hidden]) + .compartir-cabeceira { margin-left: 0; }
.paleta {
  width: min(36rem, 100% - 2rem);
  max-height: min(80vh, 36rem);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--azul) 18%, transparent);
  border-radius: 20px;
  color: var(--tinta);
  background: var(--papel-3);
  box-shadow: var(--sombra-forte);
  overflow: hidden;
}
.paleta::backdrop { background: rgb(13 21 34 / .4); }
.paleta[open] { animation: paleta-entra .35s var(--suave); }
@keyframes paleta-entra { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
.paleta input { width: 100%; padding: 1.1rem 1.25rem; border: 0; border-bottom: 1px solid var(--linea); background: transparent; font: 500 1.125rem/1.3 var(--sans); color: inherit; }
.paleta input:focus-visible { outline: none; }
.paleta ul { max-height: min(55vh, 26rem); margin: 0; padding: .4rem; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.paleta li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .7rem .85rem; border-radius: 12px; cursor: pointer; }
.paleta li[aria-selected="true"] { background: color-mix(in srgb, var(--azul) 12%, transparent); box-shadow: inset 3px 0 0 var(--azul); }
.paleta .p-tipo { font: 700 .7rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.paleta .p-extra { grid-column: 1 / -1; font: italic 500 .95rem/1.35 var(--serif); color: var(--tinta-suave); }
.paleta .p-baleiro { display: block; padding: 1.5rem; text-align: center; color: var(--tinta-suave); cursor: default; }
.paleta kbd { font: 600 .75rem/1 var(--sans); padding: .2rem .4rem; border: 1px solid var(--linea); border-radius: 6px; }
.paleta-pe { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: .6rem 1rem; border-top: 1px solid var(--linea); font-size: .8rem; color: var(--tinta-suave); }
@media (hover: none) { .paleta-pe { display: none; } }

/* Recibo: ao facelo, o novo sae coma dunha impresora (efectos.js usa startViewTransition onde exista).
   Entre páxinas da web, a cabeceira queda quieta. Con movemento reducido, nada */
@media (prefers-reduced-motion: no-preference) {
  .recibo { view-transition-name: recibo; }
  ::view-transition-old(recibo) { animation: .16s ease-in both recibo-sae; }
  ::view-transition-new(recibo) { animation: .5s var(--suave) both recibo-imprime; transform-origin: top; }
  @keyframes recibo-sae { to { opacity: 0; transform: translateY(8px); } }
  @keyframes recibo-imprime { from { opacity: 0; transform: translateY(-24px) scaleY(.8); } }
  @view-transition { navigation: auto; }
  /* Ao amencer e ao solpor a web pasa de claro a escuro (ou ao revés) amodo, coma a luz de fóra */
  .cambio-luz::view-transition-old(root), .cambio-luz::view-transition-new(root) { animation-duration: 1.6s; animation-timing-function: ease-in-out; }
  .cabeceira { view-transition-name: cabeceira; }
}

/* Compartir flotante: só no móbil, abaixo á dereita (zona do polgar), cando non hai outro botón de compartir á vista
   (efectos.js pon .visible). Con JavaScript substitúe ao da cabeceira, que no móbil queda lonxe do dedo */
.compartir-flotante { display: none; }
@media (max-width: 40rem) {
  html.js .compartir-cabeceira { display: none; }
  .compartir-flotante {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--degradado);
    color: #fff;
    box-shadow: 0 14px 30px -12px rgb(15 39 71 / .7), inset 0 1px 0 rgb(255 255 255 / .25);
    opacity: 0;
    visibility: hidden;
    translate: 0 1.25rem;
    scale: .85;
    transition: opacity .3s ease, translate .45s var(--suave), scale .45s var(--suave), visibility .45s;
  }
  .compartir-flotante[hidden] { display: none; }
  .compartir-flotante.visible { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
  .compartir-flotante:active { scale: .92; }
  .compartir-flotante svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  /* O aviso ("Ligazón copiada"…) sobe para non quedar debaixo do botón */
  .con-flotante .aviso-flotante { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
:where(.escuro) .compartir-flotante { color: #0d1522; }

/* Impresión: todo visible, sen ceo, cabeceira fixa, adornos nin botóns que non serven no papel */
@media print {
  html.js .revelar, html.js h2.revelar { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
  .cabeceira, .ceo-fondo, .ceo, .progreso, .portada-forma, .portada-triskel, .aviso-flotante, .retrouso, .saltar,
  .toca-outra, .rotador-pausa, .compartir, .catalogo-mais, .orixes-mais, .refran-outro, .chiste-boton, .recibo-accions, .tempo, .paleta, .abrir-paleta { display: none !important; }
  .chiste.tapado .chiste-remate { opacity: 1 !important; translate: none !important; }
  body { background: #fff; }
}