/* Transcribidor — "taller de sonido": papel cálido, ámbar de luz de grabación,
   y la forma de onda del audio como elemento protagonista. */

/* ---------------------------------------------------------------- fichas */

:root {
  --papel: oklch(0.983 0.007 85);
  --papel-hondo: oklch(0.952 0.013 82);
  --tarjeta: oklch(1 0 0);
  --tinta: oklch(0.245 0.02 55);
  --tinta-2: oklch(0.475 0.016 60);
  /* Medido: por encima de L=0.52 este gris cae bajo 4.5:1 sobre --papel-hondo,
     y se usa en textos pequeños (nota del modelo, pie de la zona de carga). */
  --tinta-3: oklch(0.52 0.015 65);
  --borde: oklch(0.9 0.012 80);
  --borde-fuerte: oklch(0.8 0.022 75);
  --ambar: oklch(0.775 0.155 68);
  --ambar-vivo: oklch(0.72 0.185 58);
  --ambar-hondo: oklch(0.5 0.14 48);
  --ambar-tenue: oklch(0.965 0.034 80);
  /* El ámbar es claro en ambos esquemas, así que su texto va oscuro SIEMPRE:
     si aquí se usara --tinta, en modo oscuro el botón quedaría claro sobre claro. */
  --sobre-ambar: oklch(0.22 0.028 55);
  --verde: oklch(0.56 0.115 165);
  --verde-tenue: oklch(0.955 0.03 165);
  --rojo: oklch(0.55 0.17 25);
  --rojo-tenue: oklch(0.96 0.03 25);

  --sombra-s: 0 1px 2px oklch(0.3 0.03 60 / 0.06), 0 2px 6px oklch(0.3 0.03 60 / 0.04);
  --sombra-m: 0 2px 4px oklch(0.3 0.03 60 / 0.05), 0 8px 24px oklch(0.3 0.03 60 / 0.07);
  --sombra-l: 0 4px 8px oklch(0.3 0.03 60 / 0.06), 0 20px 48px oklch(0.3 0.03 60 / 0.1);

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --ancho: 1080px;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: oklch(0.19 0.011 62);
    --papel-hondo: oklch(0.155 0.01 62);
    --tarjeta: oklch(0.232 0.014 62);
    --tinta: oklch(0.948 0.009 85);
    --tinta-2: oklch(0.76 0.014 78);
    /* Medido contra --tarjeta, que es la superficie más clara del esquema oscuro. */
    --tinta-3: oklch(0.645 0.014 70);
    --borde: oklch(0.315 0.016 65);
    --borde-fuerte: oklch(0.42 0.022 68);
    --ambar: oklch(0.8 0.16 70);
    --ambar-vivo: oklch(0.83 0.17 66);
    --ambar-hondo: oklch(0.86 0.14 74);
    --ambar-tenue: oklch(0.29 0.045 62);
    --verde: oklch(0.78 0.12 168);
    --verde-tenue: oklch(0.27 0.04 168);
    --rojo: oklch(0.75 0.15 28);
    --rojo-tenue: oklch(0.29 0.05 28);

    --sombra-s: 0 1px 2px oklch(0 0 0 / 0.3);
    --sombra-m: 0 2px 4px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.28);
    --sombra-l: 0 4px 8px oklch(0 0 0 / 0.3), 0 20px 48px oklch(0 0 0 / 0.38);
  }
}

/* ---------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grano sutil: da textura de papel sin pesar nada. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::before {
    opacity: 0.28;
  }
}

body > * {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.08;
  margin: 0;
  font-variation-settings: 'opsz' 96;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--ambar-hondo);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--tinta);
}

:focus-visible {
  outline: 2.5px solid var(--ambar-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.oculto {
  display: none !important;
}

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

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

.cabecera {
  border-bottom: 1px solid var(--borde);
  background: color-mix(in oklch, var(--papel) 82%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: 64px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

.marca__punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ambar-vivo);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ambar) 30%, transparent);
  flex: none;
}

.nav {
  display: flex;
  gap: 1.35rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover {
  color: var(--tinta);
}

.nav a[aria-current='page'] {
  color: var(--tinta);
  border-bottom-color: var(--ambar-vivo);
}

@media (max-width: 720px) {
  .nav {
    display: none;
  }
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.75rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.35rem, 6.2vw, 4rem);
  max-width: 15ch;
  margin-inline: auto;
  font-variation-settings: 'opsz' 144;
}

.hero__bajada {
  margin: 1.15rem auto 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, 2.1vw, 1.16rem);
  color: var(--tinta-2);
  text-wrap: balance;
}

.animar > * {
  animation: subir 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.animar > *:nth-child(1) {
  animation-delay: 0.04s;
}
.animar > *:nth-child(2) {
  animation-delay: 0.12s;
}
.animar > *:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ---------------------------------------------------------------- herramienta */

.herramienta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-l);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  animation: subir 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.26s backwards;
}

/* --- zona de carga --- */

.soltar {
  position: relative;
  /* Flex, no grid: con `place-items:center` el lienzo no se estira y queda diminuto. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 320px;
  padding: 2rem 1.5rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--papel-hondo), color-mix(in oklch, var(--papel-hondo) 40%, var(--tarjeta)));
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
}

.soltar:hover {
  border-color: var(--ambar);
  transform: translateY(-2px);
  box-shadow: var(--sombra-m);
}

.soltar.esta-encima {
  border-color: var(--ambar-vivo);
  border-style: dashed;
  background: var(--ambar-tenue);
  transform: scale(1.008);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--ambar) 22%, transparent);
}

.soltar__onda {
  width: min(100%, 560px);
  height: 84px;
  display: block;
  opacity: 0.8;
}

.soltar__titulo {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 600;
  margin-top: 1.1rem;
}

.soltar__pie {
  color: var(--tinta-3);
  font-size: 0.88rem;
  max-width: 46ch;
}

.soltar__boton {
  margin-top: 0.35rem;
  pointer-events: none;
}

/* --- panel de trabajo (archivo cargado / transcribiendo / listo) --- */

.panel {
  display: grid;
  gap: 1.15rem;
}

.archivo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
}

.archivo__icono {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ambar-tenue);
  color: var(--ambar-hondo);
}

.archivo__datos {
  min-width: 0;
  flex: 1;
}

.archivo__nombre {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archivo__meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* --- la onda: el corazón visual --- */

.onda {
  position: relative;
  border-radius: var(--r-m);
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  padding: 0.75rem;
  overflow: hidden;
}

.onda__lienzo {
  display: block;
  width: 100%;
  height: 132px;
}

.onda__reloj {
  position: absolute;
  right: 0.85rem;
  top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  background: color-mix(in oklch, var(--tarjeta) 78%, transparent);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* --- opciones --- */

.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.campo {
  display: grid;
  gap: 0.35rem;
}

.campo__etiqueta {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

select,
.campo select {
  appearance: none;
  width: 100%;
  padding: 0.6rem 2.2rem 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--tinta);
  background-color: var(--tarjeta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  cursor: pointer;
}

select:hover {
  border-color: var(--ambar);
}

.campo__nota {
  font-size: 0.74rem;
  color: var(--tinta-3);
  font-family: var(--mono);
}

/* --- botones --- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sobre-ambar);
  background: var(--ambar);
  border: 1px solid color-mix(in oklch, var(--ambar-vivo) 60%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s, opacity 0.14s;
  box-shadow: 0 1px 2px oklch(0.4 0.1 60 / 0.2), 0 6px 18px color-mix(in oklch, var(--ambar) 35%, transparent);
}

.boton:hover:not(:disabled) {
  background: var(--ambar-vivo);
  transform: translateY(-1.5px);
  box-shadow: 0 2px 4px oklch(0.4 0.1 60 / 0.2), 0 10px 26px color-mix(in oklch, var(--ambar) 45%, transparent);
}

.boton:active:not(:disabled) {
  transform: translateY(0);
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.boton--grande {
  padding: 1.05rem 2.4rem;
  font-size: 1.08rem;
  width: 100%;
}

.boton--fantasma {
  background: transparent;
  color: var(--tinta-2);
  border-color: var(--borde-fuerte);
  box-shadow: none;
  font-weight: 500;
}

.boton--fantasma:hover:not(:disabled) {
  background: var(--papel-hondo);
  color: var(--tinta);
  border-color: var(--tinta-3);
  box-shadow: none;
}

.boton--chico {
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* --- estado / progreso --- */

.estado {
  display: grid;
  gap: 0.6rem;
}

.estado__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.estado__texto {
  font-size: 0.94rem;
  color: var(--tinta-2);
}

.estado__pct {
  font-family: var(--mono);
  font-size: 0.94rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ambar-hondo);
}

.barra {
  height: 7px;
  border-radius: 999px;
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.barra__relleno {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-vivo));
  transition: width 0.3s ease-out;
}

.barra--indeterminada .barra__relleno {
  width: 35%;
  animation: vaiven 1.4s ease-in-out infinite;
}

@keyframes vaiven {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(330%);
  }
}

/* --- resultado --- */

.resultado {
  display: grid;
  gap: 0.85rem;
}

.resultado__caja {
  max-height: 460px;
  overflow-y: auto;
  padding: 1.15rem 1.25rem;
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  font-size: 0.97rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  scrollbar-width: thin;
}

.resultado__caja mark {
  background: none;
  color: var(--ambar-hondo);
  font-family: var(--mono);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
  padding-right: 0.35em;
}

/* Cada párrafo aparece al llegar, como si se escribiera solo. */
.parrafo-nuevo {
  animation: aparecer 0.45s ease-out backwards;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Donación: aparece con el resultado, cuando la herramienta ya cumplió.
   Nunca antes, y nunca entre los botones de acción. */
.donacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: 0.35rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed color-mix(in oklch, var(--ambar) 45%, transparent);
  border-radius: var(--r-m);
  background: var(--ambar-tenue);
}

.donacion__texto {
  flex: 1 1 16rem;
  font-size: 0.89rem;
  color: var(--tinta-2);
  line-height: 1.5;
}

.aviso {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--r-m);
  font-size: 0.9rem;
  border: 1px solid;
}

.aviso--info {
  background: var(--ambar-tenue);
  border-color: color-mix(in oklch, var(--ambar) 40%, transparent);
  color: var(--tinta);
}

.aviso--error {
  background: var(--rojo-tenue);
  border-color: color-mix(in oklch, var(--rojo) 35%, transparent);
  color: var(--tinta);
}

.aviso--ok {
  background: var(--verde-tenue);
  border-color: color-mix(in oklch, var(--verde) 32%, transparent);
  color: var(--tinta);
}

.aviso__icono {
  flex: none;
  margin-top: 1px;
}

/* ---------------------------------------------------------------- confianza */

.confianza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.confianza__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.15rem;
}

.confianza__icono {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  color: var(--ambar-hondo);
}

.confianza__titulo {
  font-weight: 650;
  font-size: 0.94rem;
  line-height: 1.35;
}

.confianza__texto {
  font-size: 0.855rem;
  color: var(--tinta-3);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- anuncios

   Reglas que nos autoimponemos:
   - Nunca por encima de la herramienta ni superpuestos a ella.
   - Nunca pegados al botón de acción (evita clics accidentales, que además
     violan las políticas de AdSense).
   - Altura reservada por CSS: el bloque ocupa su espacio desde el primer
     pintado, así que cuando el anuncio carga no mueve nada (cero CLS).
   - El carril lateral solo existe si de verdad sobra ancho (>=1360px).      */

.anuncio {
  margin: 2.5rem auto;
  display: grid;
  place-items: center;
  gap: 0.4rem;
}

.anuncio__etiqueta {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  opacity: 0.65;
}

.anuncio__caja {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--papel-hondo);
  border: 1px dashed var(--borde);
  border-radius: var(--r-m);
  color: var(--tinta-3);
  font-size: 0.8rem;
}

/* Espacio reservado: cambia estos valores y el anuncio nunca provocará saltos. */
.anuncio--horizontal .anuncio__caja {
  min-height: 100px;
  max-width: 728px;
}

@media (min-width: 768px) {
  .anuncio--horizontal .anuncio__caja {
    min-height: 90px;
  }
}

.anuncio--bloque .anuncio__caja {
  min-height: 250px;
  max-width: 336px;
}

.anuncio--carril {
  position: sticky;
  top: 92px;
  margin: 0;
}

.anuncio--carril .anuncio__caja {
  width: 300px;
  min-height: 600px;
}

/* El carril lateral solo aparece cuando hay ancho de sobra para él. */
.con-carril {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1360px) {
  .con-carril {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 1359px) {
  .anuncio--carril {
    display: none;
  }
}

/* ---------------------------------------------------------------- contenido */

.seccion {
  padding: 3.25rem 0 0;
}

.seccion h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin-bottom: 1.1rem;
}

.prosa {
  max-width: 68ch;
  color: var(--tinta-2);
}

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  margin-top: 1.75rem;
  counter-reset: paso;
}

.paso {
  counter-increment: paso;
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ambar-hondo);
  margin-bottom: 0.45rem;
}

.paso h3 {
  font-size: 1.07rem;
  margin-bottom: 0.3rem;
}

.paso p {
  font-size: 0.9rem;
  color: var(--tinta-3);
  margin: 0;
}

/* --- preguntas frecuentes --- */

.faq {
  max-width: 78ch;
  margin-top: 1.4rem;
}

.faq__item {
  border-bottom: 1px solid var(--borde);
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.2rem 1.05rem 0;
  font-weight: 600;
  font-size: 1.01rem;
  position: relative;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--tinta-3);
  border-bottom: 2px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform 0.22s;
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq__item summary:hover {
  color: var(--ambar-hondo);
}

.faq__item p {
  color: var(--tinta-2);
  font-size: 0.95rem;
  max-width: 66ch;
  padding-bottom: 1.05rem;
  margin: 0;
}

/* --- otras herramientas --- */

.rejilla-enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 0.7rem;
  margin-top: 1.35rem;
}

.tarjeta-enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  text-decoration: none;
  color: var(--tinta);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.tarjeta-enlace:hover {
  border-color: var(--ambar);
  transform: translateY(-2px);
  box-shadow: var(--sombra-m);
  color: var(--tinta);
}

.tarjeta-enlace__titulo {
  font-weight: 600;
  font-size: 0.95rem;
}

.tarjeta-enlace__flecha {
  color: var(--ambar-hondo);
  transition: transform 0.16s;
}

.tarjeta-enlace:hover .tarjeta-enlace__flecha {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- pie */

.pie {
  margin-top: 4rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--borde);
  color: var(--tinta-3);
  font-size: 0.86rem;
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
}

.pie a {
  color: var(--tinta-2);
  text-decoration: none;
}

.pie a:hover {
  color: var(--ambar-hondo);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}