/* Estilos de TimaStudio. Colores, fuentes y curvas de movimiento salen de tokens.css. */

/* ---------- Base ---------- */

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-texto);
  line-height: 1.5;
}

/* ---------- Accesibilidad ---------- */

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

.saltar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 8px 14px;
  background: var(--tinta);
  color: var(--lima);
  font-weight: 700;
  border-radius: 8px;
  transform: translateY(-200%);
}

.saltar:focus { transform: none; }

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* ---------- Transición entre la portada y el panel ---------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 160ms var(--curva-salida) both pagina-salida; }
::view-transition-new(root) { animation: 320ms var(--curva-salida) both pagina-entrada; }

@keyframes pagina-salida { to { opacity: 0; transform: scale(0.99); } }
@keyframes pagina-entrada { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Controles comunes ---------- */

.boton,
.campo__ver {
  min-height: 48px;
  padding: 10px 18px;
  font: 700 1rem var(--font-texto);
  border: 2px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform var(--duracion-pulsar) var(--curva-salida),
    box-shadow var(--duracion-pulsar) var(--curva-salida);
}

.boton { background: var(--lima); color: var(--tinta); }

.boton--secundario,
.campo__ver { background: var(--fondo); color: var(--texto); }

.boton--pequeno { min-height: 40px; padding: 6px 14px; font-size: 0.9375rem; }

.boton--mini { min-height: 34px; padding: 4px 12px; font-size: 0.875rem; border-radius: 10px; }

.boton--grande {
  min-height: 56px;
  padding: 14px 34px;
  font-size: 1.125rem;
  box-shadow: 4px 4px 0 var(--borde);
}

/* Los botones se levantan un poco al pasar el ratón, como el sticker, y se hunden al pulsar. */
@media (hover: hover) and (pointer: fine) {
  .boton:hover:not(:disabled),
  .campo__ver:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--borde); }

  .boton--grande:hover:not(:disabled) { box-shadow: 6px 6px 0 var(--borde); }
}

.boton:active:not(:disabled),
.campo__ver:active { transform: scale(0.97); box-shadow: 0 0 0 var(--borde); }

.boton--grande:active:not(:disabled) { transform: translate(2px, 2px) scale(0.98); box-shadow: 1px 1px 0 var(--borde); }

.boton:disabled { opacity: 0.6; cursor: progress; }

.enlace {
  align-self: center;
  padding: 8px;
  background: none;
  color: var(--texto);
  font: 500 0.9375rem var(--font-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
  cursor: pointer;
  transition: text-underline-offset var(--duracion-corta) ease;
}

.enlace:hover { text-underline-offset: 5px; }

.cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px 0;
  background: none;
  color: var(--texto);
  font: 400 1.75rem/1 var(--font-texto);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform var(--duracion-corta) var(--curva-salida),
    background-color var(--duracion-corta) ease;
}

@media (hover: hover) and (pointer: fine) {
  .cerrar:hover { background: var(--fondo); transform: rotate(90deg); }
}

.cerrar:active { transform: scale(0.92); }

.tarjeta {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--borde);
}

.tarjeta p { margin: 0; }

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tarjeta__titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 1.5rem;
}

.formulario { display: flex; flex-direction: column; gap: 16px; }

.formulario__titulo { margin: 0; font: 800 1.125rem var(--font-titulo); }

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo label { font-weight: 700; }

.campo__fila { display: flex; gap: 8px; }

.campo input,
.campo select,
.campo textarea,
.mensajes__form textarea {
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--fondo);
  color: var(--texto);
  font: 1rem var(--font-texto);
  border: 2px solid var(--borde);
  border-radius: 12px;
  transition: box-shadow var(--duracion-corta) var(--curva-salida);
}

.campo__fila input { flex: 1; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.mensajes__form textarea:focus { box-shadow: 3px 3px 0 var(--borde); }

.campo input[aria-invalid="true"] { border-width: 3px; }

.campo input[type="file"] { padding: 10px; }

.campo textarea { resize: vertical; }

.campo__opcional { font-weight: 400; color: var(--texto-suave); }

.campo__ayuda { margin: 0; color: var(--texto-suave); font-size: 0.9375rem; }

.campo__error { margin: 0; font-weight: 700; }

.aviso { margin: 0; font-weight: 500; }

.campo__ayuda:empty,
.campo__error:empty,
.aviso:empty { display: none; }

/* Los mensajes de error y los avisos aparecen deslizándose un poco, para que se note el cambio. */
.campo__error:not(:empty),
.aviso:not(:empty) { animation: aviso-entrada var(--duracion-corta) var(--curva-salida); }

@keyframes aviso-entrada { from { opacity: 0; transform: translateY(-4px); } }

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--lima);
  color: var(--tinta);
  font: 800 0.9375rem/1 var(--font-titulo);
  border: 2px solid var(--borde);
  border-radius: 50%;
}

.avatar--pequeno { width: 26px; height: 26px; font-size: 0.75rem; }

.etiqueta {
  padding: 2px 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 2px solid var(--borde);
  border-radius: 999px;
}

.etiqueta--admin { background: var(--lima); color: var(--tinta); }

/* ---------- Portada ---------- */

.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: max(56px, 9vh) 16px 24px;
  text-align: center;
}

.cabecera__logo { width: min(400px, 78vw); }

.cabecera__marca {
  margin: 0;
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 1.1;
}

.marca__tima,
.marca__studio { display: inline-block; }

.marca__studio { font-weight: 200; color: var(--acento); }

.cabecera__lema { margin: 0; max-width: 32ch; color: var(--texto-suave); font-size: 1.125rem; }

/* Botón discreto de pausa y play en una esquina: solo se nota al pasar el ratón o al llegar con el teclado. */
.pausa {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--duracion-corta) ease,
    transform var(--duracion-pulsar) var(--curva-salida);
}

.pausa:hover,
.pausa:focus-visible { opacity: 1; }

.pausa:active { transform: scale(0.92); }

.pausa__icono {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition:
    opacity var(--duracion-corta) var(--curva-salida),
    transform var(--duracion-corta) var(--curva-salida),
    filter var(--duracion-corta) var(--curva-salida);
}

/* Cambio de icono con un fundido y un ligero desenfoque, para que parezca uno solo que se transforma. */
.pausa[aria-pressed="false"] .pausa__icono--play,
.pausa[aria-pressed="true"] .pausa__icono--pausa {
  opacity: 0;
  transform: scale(0.6);
  filter: blur(2px);
}

.acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 64px;
}

.tarjeta--acceso { transform-origin: top center; }

.acceso__opciones { display: flex; flex-direction: column; gap: 12px; }

.enlace.enlace--volver { align-self: flex-start; margin: -8px 0 0 -8px; }

/* Entrada de la portada en dos tiempos: primero el logo y la marca; después, el lema y el acceso.
   Se usa `backwards` para que, al terminar, no bloquee los efectos al pasar el ratón. */
.portada .logo { animation: logo-entrada 1000ms var(--curva-salida) backwards; }
.portada .logo__anillo { animation: logo-giro 40s linear infinite, fundido 700ms 250ms ease-out backwards; }
.portada .logo__destello--grande { animation: logo-destello 2.6s ease-in-out infinite, destello-entrada 500ms 650ms var(--curva-rebote) backwards; }
.portada .logo__destello--pequeno { animation: logo-destello 3.4s ease-in-out -1.2s infinite, destello-entrada 500ms 800ms var(--curva-rebote) backwards; }
.portada .marca__tima { animation: texto-entrada 700ms 450ms var(--curva-salida) backwards; }
.portada .marca__studio { animation: texto-entrada 700ms 580ms var(--curva-salida) backwards; }
.portada .cabecera__lema { animation: texto-entrada 600ms 1150ms var(--curva-salida) backwards; }
.portada #iniciar { animation: texto-entrada 600ms 1300ms var(--curva-salida) backwards; }
.portada .pausa { animation: fundido 400ms 1600ms ease-out backwards; }

@keyframes logo-entrada {
  0% { opacity: 0; transform: scale(0.72) rotate(-14deg); }
  55% { opacity: 1; transform: scale(1.03) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes texto-entrada {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
}

@keyframes destello-entrada {
  from { opacity: 0; transform: scale(0.4) rotate(-45deg); }
}

@keyframes fundido { from { opacity: 0; } }

/* ---------- Logo ---------- */

.logo { display: block; width: 100%; height: auto; overflow: visible; }

.logo__texto { fill: var(--texto); }
.logo__sombra { fill: var(--oliva); }
.logo__circulo { fill: var(--lima); }
.logo__t { fill: var(--tinta); }
.logo__s { fill: var(--oliva-oscuro); }
.logo__destello { stroke: var(--lima); }
.logo__destello--grande { fill: var(--oliva); }
.logo__destello--pequeno { fill: var(--texto); }

.logo__anillo {
  transform-origin: 220px 220px;
  animation: logo-giro 40s linear infinite;
}

.logo__sticker {
  transform-origin: 220px 220px;
  transform: rotate(-6deg);
  transition: transform 450ms var(--curva-rebote);
}

.logo__sombra {
  transform: translate(13px, 13px);
  transition: transform 450ms var(--curva-rebote);
}

.logo__destello {
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-destello 2.6s ease-in-out infinite;
}

.logo__destello--pequeno { animation-duration: 3.4s; animation-delay: -1.2s; }

.sin-movimiento .logo__anillo,
.sin-movimiento .logo__destello { animation-play-state: paused; }

@media (hover: hover) and (pointer: fine) {
  .cabecera__logo:hover .logo__sticker { transform: rotate(0deg); }
  .cabecera__logo:hover .logo__sombra { transform: translate(5px, 5px); }
}

@keyframes logo-giro { to { transform: rotate(360deg); } }

@keyframes logo-destello {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.35; transform: scale(0.7) rotate(15deg); }
}

/* ---------- Panel: barra superior ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 12px 24px;
  background: var(--fondo);
  border-bottom: 2px solid var(--borde);
  animation: barra-entrada 400ms var(--curva-salida) backwards;
}

@keyframes barra-entrada { from { opacity: 0; transform: translateY(-100%); } }

.barra__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font: 800 1.25rem var(--font-titulo);
  text-decoration: none;
}

.barra__marca span span { font-weight: 200; color: var(--acento); }

.barra__sticker {
  transform: rotate(-6deg);
  transition: transform 450ms var(--curva-rebote);
}

@media (hover: hover) and (pointer: fine) {
  .barra__marca:hover .barra__sticker { transform: rotate(8deg) scale(1.06); }
}

.barra__usuario { display: flex; align-items: center; gap: 10px; font-weight: 500; }

/* ---------- Panel: estructura (contenido a la izquierda y mensajes a la derecha) ---------- */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.panel:focus { outline: none; }

.panel > .tarjeta,
.panel > .cargando { grid-column: 1 / -1; justify-self: center; }

@media (min-width: 1040px) {
  .panel { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}

.panel__principal { display: flex; flex-direction: column; gap: 56px; min-width: 0; }

.cargando {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 64px 0;
  color: var(--texto-suave);
  font-weight: 500;
}

.cargando__punto {
  width: 12px;
  height: 12px;
  background: var(--lima);
  border: 2px solid var(--borde);
  border-radius: 50%;
  animation: latido 900ms ease-in-out infinite;
}

@keyframes latido { 50% { transform: scale(0.6); opacity: 0.5; } }

.seccion { display: flex; flex-direction: column; gap: 20px; }

.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.seccion__titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
}

.seccion__titulo--pequeno { font-size: clamp(1.375rem, 3vw, 1.75rem); }

.seccion__subtitulo { margin: 4px 0 0; color: var(--texto-suave); font-weight: 500; }

.seccion__subtitulo:empty { display: none; }

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  color: var(--texto-suave);
  text-align: center;
  border: 2px dashed var(--borde);
  border-radius: 20px;
}

.vacio img { transform: rotate(-6deg); }

.vacio p { margin: 0; max-width: 36ch; }

/* ---------- Panel: webs ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--borde);
  transition:
    transform var(--duracion-corta) var(--curva-salida),
    box-shadow var(--duracion-corta) var(--curva-salida);
}

.web__captura {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lima);
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--borde);
}

.web__captura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 500ms var(--curva-salida);
}

.web__inicial {
  color: var(--tinta);
  font: 800 3.5rem var(--font-titulo);
  transition: transform 500ms var(--curva-rebote);
}

@media (hover: hover) and (pointer: fine) {
  .web:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--borde); }
  .web:hover .web__captura img { transform: scale(1.04); }
  .web:hover .web__inicial { transform: rotate(-8deg) scale(1.08); }
}

.web__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 18px;
}

.web__titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.25;
}

.web__titulo a {
  color: var(--texto);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 300ms var(--curva-salida);
}

.web__titulo a:hover,
.web__titulo a:focus-visible { background-size: 100% 2px; }

.web__dominio { margin: 0; color: var(--texto-suave); font-size: 0.875rem; font-weight: 500; }

.web__descripcion { margin: 6px 0 0; color: var(--texto-suave); }

.web__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.web__autor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--acento);
  font-weight: 700;
}

.web__acciones { display: flex; gap: 6px; }

/* ---------- Panel: miembros ---------- */

.miembros {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
}

.miembro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 16px;
}

.miembro + .miembro { border-top: 2px solid var(--borde); }

.miembro__datos { display: flex; flex: 1; flex-direction: column; min-width: 180px; }

.miembro__nombre { font-weight: 700; }

.miembro__email { color: var(--texto-suave); font-size: 0.9375rem; overflow-wrap: anywhere; }

.formulario--fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: start;
  gap: 16px;
  padding: 20px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 16px;
}

.formulario--fila .formulario__titulo { grid-column: 1 / -1; }

.formulario--fila .boton { align-self: end; }

/* ---------- Panel: mensajes ---------- */

.mensajes {
  display: flex;
  flex-direction: column;
  height: 520px;
  min-height: 0;
  overflow: hidden;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--borde);
}

/* En pantallas anchas la columna de mensajes se queda fija a la derecha y ocupa el alto disponible. */
@media (min-width: 1040px) {
  .mensajes {
    position: sticky;
    top: 96px;
    height: calc(100vh - 128px);
  }
}

.mensajes__cabecera { padding: 16px 20px 14px; border-bottom: 2px solid var(--borde); }

.mensajes__titulo { margin: 0; font: 800 1.25rem var(--font-titulo); }

.mensajes__subtitulo { margin: 0; color: var(--texto-suave); font-size: 0.875rem; font-weight: 500; }

.mensajes__cuerpo {
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mensajes__vacio { margin: 24px 0; color: var(--texto-suave); text-align: center; }

.mensajes__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mensaje {
  position: relative;
  align-self: flex-start;
  max-width: 88%;
  padding: 8px 12px 10px;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: 14px 14px 14px 4px;
}

.mensaje--mio {
  align-self: flex-end;
  background: var(--lima);
  color: var(--tinta);
  border-color: var(--tinta);
  border-radius: 14px 14px 4px 14px;
}

.mensaje__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 0.8125rem;
}

.mensaje__autor { font-weight: 700; color: var(--acento); }

.mensaje__hora { color: var(--texto-suave); }

.mensaje--mio .mensaje__autor,
.mensaje--mio .mensaje__hora { color: var(--oliva-oscuro); }

.mensaje__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.mensaje__borrar {
  margin: 4px 0 0 -4px;
  padding: 2px 4px;
  background: none;
  color: inherit;
  font: 500 0.8125rem var(--font-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
  border: 0;
  cursor: pointer;
}

/* Con ratón, «Borrar» solo aparece al pasar por encima del mensaje o al llegar con el teclado. */
@media (hover: hover) and (pointer: fine) {
  .mensaje__borrar {
    position: absolute;
    top: 6px;
    right: 8px;
    margin: 0;
    padding: 2px 6px;
    background: var(--superficie);
    color: var(--texto);
    border-radius: 6px;
    opacity: 0;
    transition: opacity var(--duracion-corta) ease;
  }

  .mensaje:hover .mensaje__borrar,
  .mensaje__borrar:focus-visible { opacity: 1; }
}

.mensajes__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 2px solid var(--borde);
}

.mensajes__form textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; }

.aviso--mensajes { padding: 0 16px 12px; }

/* ---------- Panel: diálogo ---------- */

.dialogo {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 28px 24px;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--borde);
}

.dialogo::backdrop {
  background: var(--tinta);
  opacity: 0.6;
  transition: opacity var(--duracion-media) var(--curva-salida);
}

@starting-style {
  .dialogo[open]::backdrop { opacity: 0; }
}

.dialogo.dialogo--cerrando::backdrop { opacity: 0; transition-duration: var(--duracion-pulsar); }

.dialogo__acciones { display: flex; justify-content: flex-end; gap: 12px; }

/* ---------- Reducir movimiento ---------- */
/* Sin desplazamientos ni giros: solo se mantienen fundidos cortos que ayudan a ver los cambios. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }

  .logo__anillo,
  .logo__destello,
  .cargando__punto { animation: none !important; }

  .portada .logo,
  .portada .marca__tima,
  .portada .marca__studio { animation: fundido 300ms ease-out backwards !important; }

  .portada .cabecera__lema,
  .portada #iniciar,
  .portada .pausa { animation: fundido 300ms 250ms ease-out backwards !important; }

  .barra,
  .campo__error:not(:empty),
  .aviso:not(:empty) { animation: fundido 150ms ease-out !important; }

  .pausa { display: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: fundido 150ms ease-out both; }

  ::view-transition-old(root) { animation-direction: reverse; }
}