/* Proposta de identidade gráfica — un carrusel de diapositivas a pantalla
   completa. Branco e tinta, Xunta Sans para ler e Xunta Sans Mono para os
   rótulos, filetes de 1 px e moito aire. A cor só aparece onde significa algo:
   a táboa, a cinta e a barra de progreso, que leva o degradado da cinta. */

@font-face { font-family: "Xunta Sans"; font-weight: 400; font-display: swap; src: url("fuentes/XuntaSans-Regular.otf") format("opentype"); }
@font-face { font-family: "Xunta Sans"; font-weight: 700; font-display: swap; src: url("fuentes/XuntaSans-Bold.otf") format("opentype"); }
@font-face { font-family: "Xunta Sans Mono"; font-weight: 400; font-display: swap; src: url("fuentes/XuntaSansMono-Regular.otf") format("opentype"); }

:root {
  --fondo: #fbfbf9;
  --tinta: #121212;
  --gris: #6b6b6b;
  --tenue: #e2e2de;
  --apagado: #b5b5b0;
  --acento: #121212;
  --lienzo: #fff;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 48px -20px rgb(0 0 0 / 0.18);
  --cinta: linear-gradient(90deg, #EE9277, #EDB021, #67BC7D, #7BAEE3, #E491BB);

  --sans: "Xunta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Xunta Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --margen: max(1rem, 5vw);
  --pagina: 86rem;
  --lectura: 36rem;
  --titular: clamp(2.25rem, 0.75rem + 4.2vw, 4.5rem);
  --subtitulo: clamp(1.875rem, 1.2rem + 2.6vw, 3.75rem);
  --cuerpo: clamp(0.9375rem, 0.86rem + 0.25vw, 1.0625rem);
  --meta: 0.6875rem;
  --objetivo: 2.75rem; /* 44 px: el área mínima de cada mando */

  /* Solo claro: la propuesta se ve siempre sobre papel. */
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  block-size: 100dvh;
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 var(--cuerpo) / 1.55 var(--sans);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

p, ol, ul, figure, dl, dd { margin: 0; }

strong { font-weight: 700; }

/* Los rótulos: mono, versales abiertas, en gris. */
code, .meta, .num, .contador, th, .rotulo, dt {
  font-family: var(--mono);
  font-size: var(--meta);
  font-weight: 400;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.rotulo, .meta, dt, .ambitos thead th { text-transform: uppercase; }

/* ---------------------------------------------------------------- cabecera */

/* En todas las diapositivas: Closet, qué es el documento y para quién. */
.cabecera {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  max-inline-size: var(--pagina);
  inline-size: 100%;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vh, 2.25rem) var(--margen) 0;
}

.cabecera::after {
  content: "";
  grid-column: 1 / -1;
  block-size: 1px;
  margin-block-start: clamp(0.875rem, 2.5vh, 1.25rem);
  background: var(--tenue);
}

.logo {
  display: block;
  block-size: 1.5rem;
  inline-size: auto;
}

.cabecera .rotulo { margin: 0; color: var(--gris); justify-self: end; text-align: end; }
.cabecera .evento { display: none; }

@media (min-width: 48rem) {
  .cabecera { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .cabecera .rotulo { justify-self: center; text-align: center; }
  .cabecera .evento { display: block; justify-self: end; text-align: end; }
}

/* ---------------------------------------------------------------- carrusel */

/* Una pantalla, sin scroll: las diapositivas arriba, los mandos abajo. */
main {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-block-size: 0;
}

.carrusel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-block-size: 0;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  touch-action: pan-y pinch-zoom; /* el gesto horizontal es del carrusel */
}

.pista { min-block-size: 0; overflow-x: clip; } /* la entrada lateral no abre scroll */

.diapositiva {
  display: grid;
  align-content: center;
  row-gap: 1.25rem;
  block-size: 100%;
  max-inline-size: var(--pagina);
  margin-inline: auto;
  padding: clamp(1.25rem, 4vh, 3.5rem) var(--margen) 0.5rem;
  /* Red de seguridad, no diseño: con el texto ampliado (WCAG 1.4.4) se lee
     desplazando en vez de cortarse. A tamaño normal ninguna lo necesita. */
  overflow-y: auto;
}

.diapositiva[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .diapositiva.adelante { animation: desde-dereita 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .diapositiva.atras { animation: desde-esquerda 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes desde-dereita { from { opacity: 0; transform: translateX(2rem); } }
  @keyframes desde-esquerda { from { opacity: 0; transform: translateX(-2rem); } }
}

/* ------------------------------------------------------------------ mandos */

/* Móvil: los segmentos en una fila y debajo las flechas, a mano del pulgar. */
.mandos {
  display: grid;
  grid-template-columns: var(--objetivo) minmax(0, 1fr) var(--objetivo);
  grid-template-areas: "puntos puntos puntos" "ant cont seg";
  align-items: center;
  max-inline-size: var(--pagina);
  inline-size: 100%;
  margin-inline: auto;
  padding: 0.25rem var(--margen) max(0.75rem, env(safe-area-inset-bottom));
}

.puntos { grid-area: puntos; display: flex; justify-content: center; }
.anterior { grid-area: ant; }
.contador { grid-area: cont; margin: 0; color: var(--gris); text-align: center; }
.seguinte { grid-area: seg; }

/* Escritorio: contador a la izquierda, segmentos al centro, flechas a la derecha. */
@media (min-width: 48rem) {
  .mandos {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "cont puntos flechas";
    column-gap: 1rem;
    padding-block: 0.5rem max(1.25rem, env(safe-area-inset-bottom));
  }
  .contador { text-align: start; }
  .anterior, .seguinte { grid-area: flechas; }
  .anterior { justify-self: end; margin-inline-end: var(--objetivo); }
  .seguinte { justify-self: end; }
}

.flecha,
.punto {
  display: grid;
  place-items: center;
  inline-size: var(--objetivo);
  block-size: var(--objetivo);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  touch-action: manipulation;
}

/* Con doce segmentos la fila de 358 px no da para 44 px cada uno: se encogen. */
.punto { flex: 0 1 auto; min-inline-size: 1.5rem; }

.flecha { font: 400 1.125rem / 1 var(--sans); }
.flecha:disabled { color: var(--apagado); cursor: default; }

/* El segmento se ve fino; su área es la del botón entero. */
.punto::before {
  content: "";
  inline-size: calc(100% - 0.25rem);
  block-size: 2px;
  background: var(--tenue);
}

.punto[aria-current="true"]::before {
  block-size: 3px;
  background: var(--cinta);
}

@media (hover: hover) and (pointer: fine) {
  .flecha:not(:disabled):hover { color: var(--gris); }
  .punto:not([aria-current]):hover::before { background: var(--gris); }
}

@media (prefers-reduced-motion: no-preference) {
  .punto::before { transition: block-size 0.2s ease-out, background-color 0.2s; }
}

/* ------------------------------------------------------------------ portada */

.portada { align-content: end; padding-block-end: clamp(1.5rem, 5vh, 4rem); }

h1 {
  margin: 0;
  max-inline-size: 14ch;
  font: 400 var(--titular) / 0.95 var(--sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.meta { margin-block-start: clamp(1rem, 3.5vh, 2.25rem); color: var(--gris); }

.lema {
  max-inline-size: 26ch;
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lema em { font-style: normal; }

/* Lugar, datas e quen convoca: tres columnas sobre un filete. */
.ficha {
  display: grid;
  gap: 0.75rem 2rem;
  margin-block-start: clamp(1rem, 4vh, 3rem);
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--tenue);
  font-size: 0.875em;
  line-height: 1.4;
}

.ficha dt { margin-block-end: 0.25rem; color: var(--gris); }

@media (min-width: 48rem) {
  .ficha { grid-template-columns: 2fr 1fr 1fr; }
}

/* -------------------------------------------------------------- diapositivas */

/* El número de sección lleva un filete detrás, como un índice. */
.num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gris);
  line-height: 1;
}

.num::after {
  content: "";
  inline-size: 2.5rem;
  block-size: 1px;
  background: currentColor;
}

h2 {
  margin: 0;
  max-inline-size: 14ch;
  font: 400 var(--subtitulo) / 1.02 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.texto { max-inline-size: var(--lectura); }

/* Móvil: el texto más largo (la letra e a retícula) cabe con un interlineado algo más prieto. */
@media (max-width: 47.99rem) {
  .texto { line-height: 1.48; }
}
.texto > * + * { margin-block-start: 0.9em; }

.tres { padding: 0; list-style: none; }
.tres li + li { margin-block-start: 0.6em; }
ol.tres { counter-reset: tres; }
ol.tres li { counter-increment: tres; position: relative; padding-inline-start: 2rem; }
ol.tres li::before {
  content: counter(tres, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.4em;
  font: 400 var(--meta) / 1 var(--mono);
  color: var(--gris);
}

/* Escritorio: número y título a la izquierda, el texto a la derecha. */
@media (min-width: 56rem) {
  .diapositiva:not(.portada) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-content: center;
  }
  .diapositiva > .num { grid-column: 1; }
  .diapositiva > h2 { grid-column: 1; grid-row: 2; align-self: start; }
  .diapositiva > .texto { grid-column: 2; grid-row: 2; align-self: start; padding-block-start: 0.5em; }
}

/* -------------------------------------------------------------------- táboa */

.ambitos {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
  line-height: 1.35;
}

.ambitos th,
.ambitos td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-block-end: 1px solid var(--tenue);
  text-align: start;
  vertical-align: top;
}

.ambitos thead th {
  padding-block: 0 0.5rem;
  border-block-end-color: var(--tinta);
  color: var(--gris);
}

.ambitos tbody th {
  font-family: var(--sans);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.ambitos td:nth-child(2) { white-space: nowrap; }
.ambitos .color { display: inline-block; vertical-align: top; }
.ambitos code { display: block; color: var(--gris); }

.muestra {
  display: inline-block;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin-inline-end: 0.5rem;
  margin-block-start: 0.15rem;
  border-radius: 50%;
  background: var(--c);
}
.tella { --c: #EE9277; }
.millo { --c: #EDB021; }
.prado { --c: #67BC7D; }
.ria { --c: #7BAEE3; }
.hortensia { --c: #E491BB; }

@media (min-width: 56rem) {
  .ambitos { font-size: inherit; }
  .ambitos th, .ambitos td { padding-block: 0.75rem; }
}

/* ------------------------------------------------------------------ lienzos */

/* El lienzo es siempre blanco: es lo que sale en el SVG, sin fondo. Un papel
   con un filete y una sombra larga y suave. */
.lienzo {
  aspect-ratio: 16 / 9;
  background: var(--lienzo);
  box-shadow: var(--sombra);
  outline: 1px solid var(--tenue);
  outline-offset: -1px;
}

.lienzo svg,
.lienzo img { display: block; inline-size: 100%; block-size: auto; }

/* ------------------------------------------------- logotipo y retícula */

/* Móvil: el lienzo a todo el ancho. Escritorio: a la mitad de lo que dejaría
   el alto de la pantalla, centrado y con su pie debajo. */
.logotipo,
.reticula { align-content: center; }

.bucle,
.figura-reticula {
  grid-column: 1 / -1;
  display: grid;
  row-gap: 0.75rem;
  inline-size: min(100%, calc((100dvh - 16rem) * 16 / 9));
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .bucle,
  .figura-reticula { inline-size: min(100%, calc((100dvh - 16rem) * 16 / 9 / 2)); }
}

.bucle figcaption,
.figura-reticula figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  color: var(--gris);
}

/* El lienzo del bucle es estrecho: el rótulo se parte y el contador y el botón
   siguen en su fila, a la derecha. */
.bucle figcaption { flex-wrap: nowrap; }
.bucle figcaption > .rotulo:first-child { flex: 1 1 auto; min-inline-size: 0; }
.contador-bucle { margin-inline-start: auto; white-space: nowrap; }

.pausa {
  flex: none;
  min-inline-size: var(--objetivo);
  min-block-size: var(--objetivo);
  padding: 0 0.875rem;
  border: 1px solid var(--tenue);
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font: 400 var(--meta) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.pausa[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .pausa:hover { border-color: var(--tinta); }
}

/* ----------------------------------------------------------------- xerador */

/* La cinta es pequeña y el botón va alineado a la izquierda con el titular. */
.generador {
  display: grid;
  row-gap: 1.25rem;
  justify-items: start;
}

.marco { inline-size: min(100%, 15rem); }

@media (prefers-reduced-motion: no-preference) {
  .marco .lienzo svg { animation: aparece 0.35s ease-out; }
  @keyframes aparece { from { opacity: 0; } }
}

.xerar {
  min-inline-size: 8rem;
  min-block-size: var(--objetivo);
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--tinta);
  color: var(--fondo);
  font: 700 1rem / 1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.xerar:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .xerar:hover { background: var(--fondo); color: var(--tinta); }
}

@media (prefers-reduced-motion: no-preference) {
  .xerar { transition: background-color 0.15s, color 0.15s; }
}

/* Escritorio: el botón bajo el titular, en su columna; la cinta bajo el texto. */
@media (min-width: 56rem) {
  .generador {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    padding-block-start: 0.75rem;
  }
  .generador .marco { inline-size: min(100%, 24rem); grid-column: 2; grid-row: 1; }
  .generador figcaption { grid-column: 1; grid-row: 1; }
}

/* --------------------------------------------------------------- tiradas */

/* Solo cintas: una rejilla de composiciones distintas del mismo sistema. */
.tiradas { align-content: center; }

.rejilla {
  display: grid;
  inline-size: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.375rem, 1.2vw, 1rem);
  padding: 0;
  list-style: none;
}

.tiradas > .rejilla { grid-column: 1 / -1; }
.rejilla li { background: var(--lienzo); box-shadow: var(--sombra); outline: 1px solid var(--tenue); outline-offset: -1px; }
.rejilla img { display: block; inline-size: 100%; block-size: auto; }

@media (min-width: 48rem) {
  .rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Tres filas de cinco no caben en una pantalla baja: se achican con el alto. */
@media (min-width: 48rem) and (max-height: 56rem) {
  .rejilla { max-inline-size: calc((100dvh - 13rem) * 16 / 9 * 5 / 3); margin-inline: auto; }
}

/* ------------------------------------------------------------ plans locais */

/* Tres lienzos, uno por concello: la aplicación de la identidad a los plans. */
.plans { align-content: center; }

.figura-plans {
  grid-column: 1 / -1;
  display: grid;
  row-gap: 0.75rem;
  inline-size: 100%;
}

.rejilla-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rejilla-plans .lienzo {
  display: grid;
  align-items: end;
  padding: 0.875rem 1rem;
  color: var(--gris);
}

.figura-plans figcaption { color: var(--gris); }

/* Móvil: los tres apilados caben en el alto de la pantalla. */
@media (max-width: 47.99rem) {
  .rejilla-plans { inline-size: min(100%, calc((100dvh - 18rem) / 3 * 16 / 9)); margin-inline: auto; }
}

@media (min-width: 48rem) {
  .rejilla-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- adornos */

/* Una cinta sutil, sin texto, por detrás del contenido, en las diapositivas de
   texto. Las que ya enseñan cintas o lienzos (logotipo, retícula, tiradas,
   xerador y plans locais) no llevan. app.js marca la actual en <body>. */
.adornos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.adorno {
  position: absolute;
  inline-size: clamp(11rem, 24vw, 24rem);
  block-size: clamp(8rem, 17vw, 17rem);
  background: center / contain no-repeat;
  opacity: 0;
}

body[data-diapositiva="1"] .adorno:nth-child(1),
body[data-diapositiva="3"] .adorno:nth-child(3),
body[data-diapositiva="4"] .adorno:nth-child(4),
body[data-diapositiva="5"] .adorno:nth-child(5),
body[data-diapositiva="7"] .adorno:nth-child(7),
body[data-diapositiva="8"] .adorno:nth-child(8),
body[data-diapositiva="9"] .adorno:nth-child(9),
body[data-diapositiva="12"] .adorno:nth-child(11),
body[data-diapositiva="14"] .adorno:nth-child(12) { opacity: 0.22; }

@media (prefers-reduced-motion: no-preference) {
  .adorno { transition: opacity 0.5s ease-out; }
}

.adorno:nth-child(1) { background-image: url("adornos/01.svg"); inset: -2% -5% auto auto; transform: rotate(-8deg); }
.adorno:nth-child(3) { background-image: url("adornos/03.svg"); inset: auto auto -5% -6%; transform: rotate(-6deg); }
.adorno:nth-child(4) { background-image: url("adornos/04.svg"); inset: -3% -6% auto auto; transform: rotate(12deg); }
.adorno:nth-child(5) { background-image: url("adornos/05.svg"); inset: 12% -7% auto auto; transform: rotate(-70deg); }
.adorno:nth-child(7) { background-image: url("adornos/07.svg"); inset: 40% auto auto -12%; transform: rotate(80deg); }
.adorno:nth-child(8) { background-image: url("adornos/08.svg"); inset: 20% -12% auto auto; transform: rotate(-80deg); }
.adorno:nth-child(9) { background-image: url("adornos/09.svg"); inset: -4% auto auto -4%; transform: rotate(-10deg); }
.adorno:nth-child(11) { background-image: url("adornos/11.svg"); inset: -4% -5% auto auto; transform: rotate(9deg); }
.adorno:nth-child(12) { background-image: url("adornos/12.svg"); inset: auto auto -5% -5%; transform: rotate(6deg); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.oculto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}