/* Proposta de imaxe — un carrusel de diapositivas a pantalla completa. Branco e
   tinta, DM Sans para ler e DM Mono para os metadatos, un só acento. As cores
   dos ámbitos só aparecen onde significan algo (a táboa e a cinta). */

@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("fuentes/DMSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url("fuentes/DMSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("fuentes/DMMono-Regular.woff2") format("woff2"); }

:root {
  --fondo: #fff;
  --tinta: #111;
  --gris: #666;
  --tenue: #d9d9d9;
  --apagado: #b3b3b3;
  --acento: #2d3be0;
  --sobre-acento: #fff;
  --lienzo: #fff;

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

  --margen: max(1rem, 5vw);
  --pagina: 84rem;
  --lectura: 36rem;
  --titular: clamp(2.75rem, 1rem + 7vw, 7.5rem);
  --subtitulo: clamp(1.75rem, 1.15rem + 2.4vw, 3.5rem);
  --cuerpo: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --meta: 0.75rem;
  --objetivo: 2.75rem; /* 44 px: el área mínima de cada mando */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b0b0b;
    --tinta: #ececec;
    --gris: #9e9e9e;
    --tenue: #333;
    --apagado: #5c5c5c;
    --acento: #a3adff;
    --sobre-acento: #0b0b0b;
  }
}

*, *::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;
  -webkit-font-smoothing: antialiased;
}

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

/* El logotipo de Closet, pequeño, arriba a la izquierda, con el mismo margen
   que el texto. Ocupa su altura y el carrusel toma el resto. */
.cabecera {
  flex: none;
  max-inline-size: var(--pagina);
  inline-size: 100%;
  margin-inline: auto;
  padding: 50px var(--margen) 0;
}

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

/* El logotipo es tinta negra: en esquema oscuro se invierte para leerse. */
@media (prefers-color-scheme: dark) {
  .logo { filter: invert(1); }
}

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

strong { font-weight: 600; }

code, .meta, .num, .contador, th {
  font-family: var(--mono);
  font-size: var(--meta);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- 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; }

.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, 5vh, 4rem) 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.28s ease-out; }
  .diapositiva.atras { animation: desde-esquerda 0.28s ease-out; }
  @keyframes desde-dereita { from { opacity: 0; transform: translateX(1.5rem); } }
  @keyframes desde-esquerda { from { opacity: 0; transform: translateX(-1.5rem); } }
}

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

/* Móvil: los puntos 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: todo en una fila, flechas a los lados de los puntos. */
@media (min-width: 48rem) {
  .mandos {
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "cont ant puntos seg .";
    column-gap: 0.5rem;
    padding-block: 0.75rem max(1.5rem, env(safe-area-inset-bottom));
  }
  .contador { text-align: start; }
}

.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 nueve puntos 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.25rem / 1 var(--sans); }
.flecha:disabled { color: var(--apagado); cursor: default; }

/* El punto se ve pequeño; su área es la del botón entero. */
.punto::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 1rem;
  background: var(--gris);
}

.punto[aria-current="true"]::before {
  inline-size: 1.25rem;
  background: var(--acento);
}

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

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

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

.portada { align-content: end; padding-block-end: clamp(2rem, 8vh, 6rem); }

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

.meta {
  margin-block-start: clamp(1rem, 4vh, 2.5rem);
  color: var(--gris);
  text-transform: uppercase;
}

.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; }

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

.num { color: var(--gris); line-height: 1; }

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

.texto { max-inline-size: var(--lectura); }
.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: 1.75rem; }
ol.tres li::before {
  content: counter(tres);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.35em;
  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);
  text-transform: uppercase;
}

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

.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; }
}

/* ----------------------------------------------------------------- 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); }

/* El lienzo es siempre blanco: es lo que sale en el SVG, sin fondo. */
.lienzo {
  aspect-ratio: 16 / 9;
  background: var(--lienzo);
}

@media (prefers-color-scheme: light) {
  .lienzo { outline: 1px solid var(--tenue); outline-offset: -1px; }
}

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

@media (prefers-reduced-motion: no-preference) {
  .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.75rem 1.5rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--tinta);
  color: var(--fondo);
  font: 600 1rem / 1 var(--sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  touch-action: manipulation;
}

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

@media (hover: hover) and (pointer: fine) {
  .xerar:hover { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
}

@media (prefers-reduced-motion: no-preference) {
  .xerar { transition: background-color 0.15s, border-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%, 22rem); 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); }
.rejilla img { display: block; inline-size: 100%; block-size: auto; }

@media (prefers-color-scheme: light) {
  .rejilla li { outline: 1px solid var(--tenue); outline-offset: -1px; }
}

@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: 40rem) {
  .rejilla { max-inline-size: calc((100dvh - 9rem) * 16 / 9 * 5 / 3); margin-inline: auto; }
}

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

/* Una cinta sutil por diapositiva, sin texto, por detrás del contenido. Cada
   diapositiva tiene la suya y su sitio: 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="2"] .adorno:nth-child(2),
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="6"] .adorno:nth-child(6),
body[data-diapositiva="7"] .adorno:nth-child(7),
body[data-diapositiva="8"] .adorno:nth-child(8),
body[data-diapositiva="9"] .adorno:nth-child(9) { opacity: 0.3; }

@media (prefers-color-scheme: dark) {
  body[data-diapositiva] .adorno { filter: brightness(0.8); }
}

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

.adorno:nth-child(1) { background-image: url("adornos/01.svg"); inset: auto -5% -4% auto; transform: rotate(-8deg); }
.adorno:nth-child(2) { background-image: url("adornos/02.svg"); inset: -4% auto auto -5%; transform: rotate(10deg); }
.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: 40% auto auto -12%; transform: rotate(80deg); }
.adorno:nth-child(6) { background-image: url("adornos/06.svg"); inset: 20% -12% auto auto; transform: rotate(-80deg); }
.adorno:nth-child(7) { background-image: url("adornos/07.svg"); inset: -4% auto auto -4%; transform: rotate(-10deg); }
.adorno:nth-child(8) { background-image: url("adornos/08.svg"); inset: auto -6% -4% auto; transform: rotate(8deg); }
.adorno:nth-child(9) { background-image: url("adornos/09.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;
}