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

:root {
  --color-fondo:    #faf9f7;
  --color-texto:    #1a1a1a;
  --color-suave:    #6b6b6b;
  --color-enlace:   #2c2c2c;
  --color-borde:    #e0ddd8;
  --fuente-cuerpo:  Georgia, 'Times New Roman', serif;
  --fuente-ui:      system-ui, sans-serif;
  --ancho-max:      42rem;
  --espaciado:      1.6rem;
}

html {
  font-size: 18px;
  background: var(--color-fondo);
  color: var(--color-texto);
}

body {
  font-family: var(--fuente-cuerpo);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  overflow-x: hidden; /* los trazos entran volando desde fuera; sin scroll horizontal */
}

/* ── Cabecera ── */

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--espaciado) 0;
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: calc(var(--espaciado) * 2);
  font-family: var(--fuente-ui);
}

.site-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-texto);
}

nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
}

nav a {
  text-decoration: none;
  color: var(--color-suave);
}

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

/* Botón hamburguesa: oculto salvo en móvil */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 1.4rem;
  height: 1rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-texto);
}

@media (max-width: 36rem) {
  .nav-toggle { display: flex; }

  nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
  }

  nav.abierto { display: flex; }
}

/* ── Contenido principal ── */

main {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
}

h1 { font-size: 1.8rem; line-height: 1.3; margin-bottom: var(--espaciado); }
h2 { font-size: 1.3rem; line-height: 1.4; margin: calc(var(--espaciado) * 1.5) 0 0.6rem; }
h3 { font-size: 1.1rem; margin: var(--espaciado) 0 0.4rem; }

p { margin-bottom: var(--espaciado); }

a {
  color: var(--color-enlace);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* ── Portada: firma de pluma ── */

.portada {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 48vh;
  text-align: left;
}

.portada-firma {
  flex: none;
  height: clamp(120px, 22vh, 200px);
}

.firma {
  height: 100%;
  width: auto;
  overflow: visible;
}

/* Trazos (antes definidos dentro del propio SVG) */
.firma .trazo {
  fill: none;
  stroke: var(--color-texto);
  stroke-miterlimit: 10;
}
.firma .cls-1 { stroke-width: 1.13px; }
.firma .cls-2 { stroke-width: .57px; }

/* Cada trazo se dibuja solo (pathLength="1") y entra en bucle:
   reintegra volando desde --dx/--dy (~0.9s) → se mantiene 5s →
   se desintegra EN SU SITIO (~0.7s) → reinicia.
   El salto de transform al reiniciar es invisible (ocurre con el trazo borrado). */
.firma .trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform-box: fill-box;
  will-change: transform, stroke-dashoffset;
  animation: trazo-bucle 6.6s cubic-bezier(.22, .61, .36, 1) infinite both;
}

@keyframes trazo-bucle {
  0%     { stroke-dashoffset: 1; transform: translate(var(--dx, 0), var(--dy, 0)); } /* disperso e invisible */
  13.64% { stroke-dashoffset: 0; transform: translate(0, 0); }                        /* llega y se dibuja (~0.9s) */
  89.39% { stroke-dashoffset: 0; transform: translate(0, 0); }                        /* se mantiene 5s */
  100%   { stroke-dashoffset: 1; transform: translate(0, 0); }                        /* se desintegra en su sitio */
}

.portada-titulo {
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 .4rem;
  letter-spacing: -0.01em;
}

.portada-lema {
  font-style: italic;
  color: var(--color-suave);
  font-size: 1.05rem;
  margin: 0;
}

/* El texto entra cuando los trazos ya casi están dibujados */
.portada-texto {
  opacity: 0;
  animation: portada-aparece .9s ease .8s both;
}

@keyframes portada-aparece {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 30rem) {
  .portada { gap: 1.25rem; }
}

/* Pluma decorativa, abajo a la derecha (fija en la esquina) */
.portada-pluma {
  position: fixed;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  height: clamp(96px, 14vh, 150px);
  width: auto;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: pluma-aparece 1s ease 1.1s both;
}

@keyframes pluma-aparece {
  from { opacity: 0; transform: translateY(0.8rem) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}

/* Accesibilidad: sin movimiento, todo aparece ya dibujado y en su sitio */
@media (prefers-reduced-motion: reduce) {
  .firma .trazo { stroke-dashoffset: 0; transform: none; animation: none; }
  .portada-texto { opacity: 1; animation: none; }
  .portada-pluma { opacity: 1; animation: none; }
}

/* ── Pie de página ── */

footer {
  text-align: center;
  font-family: var(--fuente-ui);
  font-size: 0.78rem;
  color: var(--color-suave);
  padding: calc(var(--espaciado) * 1.5) 0 var(--espaciado);
  border-top: 1px solid var(--color-borde);
  margin-top: calc(var(--espaciado) * 2);
}