/* ═══════════════════════════════════════════════════════════
   FLETES EL ÁGUILA — hoja de estilos
   Paleta: papel viejo / tinta / sello rojo / azul de fichero / dorado
   Tipos:  IM Fell English (display) · Crimson Pro (texto) · Courier Prime (fichas)
   ═══════════════════════════════════════════════════════════ */

/* — Fuentes auto-hosteadas (antes Google Fonts; PageSpeed: -2,9 s de bloqueo) — */
/* Courier Prime italic 400 (latin) */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:url(fonts/courier-prime-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Courier Prime normal 400 (latin) */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(fonts/courier-prime-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Courier Prime normal 700 (latin) */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(fonts/courier-prime-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Crimson Pro italic 300-700 (latin) */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src:url(fonts/crimson-pro-italic-300-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Crimson Pro normal 300-700 (latin) */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src:url(fonts/crimson-pro-normal-300-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IM Fell English italic 400 (latin) */
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:url(fonts/im-fell-english-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IM Fell English normal 400 (latin) */
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(fonts/im-fell-english-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --papel:#EFE5CE;
  --papel-hondo:#E2D3AF;
  --carta:#F7F0DC;
  --tinta:#2B2118;
  --tinta-suave:#6A5844;
  --sello:#A33B2E;
  --fichero:#3C5A78;
  --dorado:#8C6D2F;
  --wa:#177E41;   /* AA: 4.9:1 con el texto crema del botón */
  --fell:"IM Fell English",Georgia,serif;
  --crimson:"Crimson Pro",Georgia,serif;
  --maquina:"Courier Prime","Courier New",monospace;
  --ancho:64rem;
  --medida:62ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--crimson);
  font-size:1.185rem;
  line-height:1.65;
  color:var(--tinta);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,252,240,.55), rgba(255,252,240,0) 60%),
    radial-gradient(140% 120% at 50% 105%, rgba(97,74,42,.16), rgba(97,74,42,0) 55%),
    var(--papel);
}

::selection{background:var(--fichero);color:var(--carta)}
:focus-visible{outline:3px solid var(--fichero);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
a{color:var(--fichero)}

/* ── barra superior ─────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.65rem clamp(1rem,4vw,2.5rem);
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  transition:box-shadow .3s;
}
.topbar.is-scrolled{box-shadow:0 8px 24px -18px rgba(43,33,24,.55)}
.wordmark{
  font-family:var(--fell);font-size:1.35rem;color:var(--tinta);
  text-decoration:none;letter-spacing:.02em;
}
.nav{display:flex;gap:clamp(.7rem,2vw,1.5rem);flex-wrap:wrap}
.nav a{
  font-family:var(--maquina);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-suave);text-decoration:none;padding:.2rem 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--tinta)}
.nav a.is-current{color:var(--sello);border-bottom-color:var(--sello)}

/* ── reglas y ornamentos ────────────────────────── */
.regla{
  border:none;border-top:1px solid var(--tinta);
  width:min(22rem,70%);margin:1.4rem auto;
}
.regla--doble{border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);height:5px;background:none}

/* ── portada (página de título) ─────────────────── */
.portada{
  max-width:var(--ancho);margin:0 auto;
  padding:clamp(4rem,10vh,7rem) 1.25rem 4.5rem;
  text-align:center;
}
.portada__ante{
  font-family:var(--maquina);font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tinta-suave);
}
.portada__titulo{
  font-family:var(--fell);font-weight:400;
  font-size:clamp(4rem,14vw,9.5rem);
  line-height:.95;letter-spacing:.01em;
  margin:.5rem 0 .2rem;
}
.pluma{width:clamp(120px,20vw,190px);margin:.4rem auto .9rem;display:block}
.pluma__cuerpo{fill:var(--tinta);opacity:.88}
.pluma__eje{stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round}
.portada__epigrafe{
  font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.55;
  font-family:var(--fell);color:var(--tinta);
  max-width:34rem;margin:0 auto;
}
.portada__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0 1.4rem}
.portada__cota{
  font-family:var(--maquina);font-size:.85rem;letter-spacing:.12em;
  color:var(--tinta-suave);
}

/* ── botones ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--maquina);font-size:.95rem;letter-spacing:.04em;
  text-decoration:none;padding:.85rem 1.5rem;border-radius:3px;
  border:1.5px solid var(--tinta);
  transition:transform .15s, box-shadow .15s;
}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(43,33,24,.6)}
.btn--wa{background:var(--wa);border-color:color-mix(in srgb, var(--wa) 60%, var(--tinta));color:#FDFBF2}
.btn--fantasma{background:transparent;color:var(--tinta)}
.btn--grande{font-size:1.1rem;padding:1.05rem 2rem}

/* ── capítulos ──────────────────────────────────── */
.cap{max-width:var(--ancho);margin:0 auto;padding:clamp(3rem,8vh,5.5rem) 1.25rem}
.cap__cabeza{text-align:center;margin-bottom:2.2rem}
.cap__num{
  font-family:var(--maquina);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sello);
}
.cap__titulo{
  font-family:var(--fell);font-weight:400;
  font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1.1;margin-top:.3rem;
}

/* ── prosa ──────────────────────────────────────── */
.prosa{max-width:var(--medida);margin:0 auto}
.prosa p + p{margin-top:1.1em}
.prosa--capitular > p:first-child::first-letter{
  font-family:var(--fell);
  font-size:4.6em;line-height:.78;
  float:left;padding:.06em .12em 0 0;
  color:var(--sello);
}

/* ── láminas (fotos) ────────────────────────────── */
.lamina{max-width:46rem;margin:3rem auto 0}
.lamina img{
  border:1px solid var(--tinta);
  outline:6px solid var(--carta);
  outline-offset:0;
  box-shadow:0 1px 0 6px color-mix(in srgb, var(--tinta) 30%, transparent),
             0 22px 44px -24px rgba(43,33,24,.55);
}
.lamina figcaption{
  font-family:var(--maquina);font-size:.82rem;letter-spacing:.1em;
  text-align:center;color:var(--tinta-suave);margin-top:1.1rem;
}

/* ── ficha de catálogo ──────────────────────────── */
.ficha{
  position:relative;
  max-width:46rem;margin:0 auto;
  background:
    linear-gradient(var(--carta), var(--carta)) padding-box,
    var(--carta);
  background-image:
    linear-gradient(to bottom, var(--sello) 0, var(--sello) 2px, transparent 2px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 2.05rem, rgba(60,90,120,.24) 2.05rem, rgba(60,90,120,.24) calc(2.05rem + 1px));
  background-position:0 4.4rem, 0 4.4rem;
  background-repeat:no-repeat, repeat-y;
  background-color:var(--carta);
  border:1px solid color-mix(in srgb, var(--tinta) 40%, transparent);
  border-radius:4px;
  box-shadow:0 2px 0 rgba(43,33,24,.15), 0 26px 50px -30px rgba(43,33,24,.6);
  padding:1.6rem clamp(1.2rem,4vw,2.6rem) 2rem;
  font-family:var(--maquina);
}
.ficha__clasif{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sello);padding-bottom:1.15rem;
}
.ficha__campos{display:grid;gap:.15rem;margin-bottom:1.4rem}
.ficha__campos > div{display:flex;gap:.6rem;align-items:baseline;line-height:2.05rem}
.ficha__campos dt{
  min-width:6.5rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fichero);
}
.ficha__campos dd{font-size:.98rem}
.ficha__medidas{list-style:none;margin-top:1.3rem}
.ficha__medidas li{display:flex;align-items:baseline;gap:.55rem;line-height:2.05rem;font-size:.95rem}
.ficha__medidas strong{font-weight:700;text-align:right}
.puntos{flex:1;min-width:1.5rem;border-bottom:2px dotted color-mix(in srgb, var(--tinta) 45%, transparent);transform:translateY(-.3em)}
.ficha__nota{
  margin-top:1.5rem;line-height:1.75;
  color:var(--tinta-suave);font-style:italic;font-family:var(--crimson);font-size:.98rem;
}

/* sello de goma */
.ficha__sello{
  position:absolute;top:-2.4rem;right:-1.2rem;
  width:clamp(96px,16vw,148px);aspect-ratio:1;
  transform:rotate(-12deg);
  opacity:.85;pointer-events:none;
}
.ficha__sello svg{width:100%;height:100%}
.ficha__sello circle{stroke:var(--sello);stroke-width:3}
.ficha__sello text{
  fill:var(--sello);font-family:var(--maquina);font-weight:700;
  font-size:14px;letter-spacing:.12em;
}
.sello__centro{font-size:34px;letter-spacing:.02em}
.sello__centro--chico{font-size:17px;letter-spacing:.3em}
@keyframes estampar{
  0%{transform:rotate(-12deg) scale(1.6);opacity:0}
  60%{transform:rotate(-12deg) scale(.94);opacity:.9}
  100%{transform:rotate(-12deg) scale(1);opacity:.85}
}
.ficha__sello.is-in{animation:estampar .45s cubic-bezier(.2,1.4,.4,1) both}
@media (prefers-reduced-motion:reduce){.ficha__sello.is-in{animation:none}}

/* plano del furgón */
.plano{width:100%;height:auto;margin:1.6rem 0 .4rem;display:block}
.plano__linea{fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.plano__linea--fina{stroke-width:1.4;opacity:.75}
.plano__rueda{fill:var(--carta);stroke:var(--tinta);stroke-width:2.4}
.plano__rueda--centro{stroke-width:1.6}
.plano #rayado line{stroke:var(--fichero);stroke-width:1.4;opacity:.55}
.plano__carga--borde{stroke:var(--fichero);stroke-width:1.6;stroke-dasharray:5 4}
.plano__cota{stroke:var(--sello);stroke-width:1.4;fill:none}
.plano__rotulo{
  font-family:var(--maquina);font-size:17px;fill:var(--tinta);
}
.plano__rotulo--carga{font-size:26px;font-weight:700;fill:var(--fichero)}

/* ── índice de lo que entra ─────────────────────── */
.indice{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(1.6rem,4vw,3.2rem);
  max-width:54rem;margin:0 auto;
}
.indice__rotulo{
  font-family:var(--fell);font-weight:400;font-size:1.45rem;
  border-bottom:1px solid var(--tinta);padding-bottom:.4rem;margin-bottom:1rem;
}
.toc{list-style:none}
.toc li{display:flex;align-items:baseline;gap:.55rem;padding:.34rem 0;font-size:1.05rem}
.toc .folio{font-family:var(--maquina);color:var(--dorado);font-weight:700}
.toc--nota .folio{color:var(--sello)}
.indice__aclara{
  margin-top:1.3rem;font-style:italic;color:var(--tinta-suave);font-size:1.02rem;line-height:1.7;
}

/* ── pasos ──────────────────────────────────────── */
.pasos{
  list-style:none;counter-reset:paso;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2.4rem);
  max-width:54rem;margin:0 auto;
}
.pasos li{counter-increment:paso;border-top:1px solid var(--tinta);padding-top:1rem}
.pasos li::before{
  content:counter(paso, upper-roman);
  font-family:var(--fell);font-size:2rem;color:var(--sello);
  display:block;line-height:1;margin-bottom:.4rem;
}
.pasos h3{font-family:var(--fell);font-weight:400;font-size:1.3rem;margin-bottom:.35rem}
.pasos p{font-size:1.02rem;line-height:1.6}
.cobertura{
  text-align:center;margin-top:2.4rem;
  font-family:var(--maquina);font-size:.9rem;letter-spacing:.1em;
}
.cobertura strong{color:var(--sello)}

/* ── contacto y colofón ─────────────────────────── */
.cap--contacto{text-align:center;padding-bottom:3rem}
.contacto__lead{
  font-family:var(--fell);font-size:clamp(1.15rem,2.4vw,1.4rem);
  max-width:32rem;margin:0.8rem auto 1.8rem;
}
.contacto__nota{margin-top:1.4rem;font-style:italic;color:var(--tinta-suave);font-size:1rem}

.colofon{
  text-align:center;padding:2.5rem 1.25rem 7rem;
  border-top:1px solid color-mix(in srgb, var(--tinta) 30%, transparent);
  max-width:var(--ancho);margin:0 auto;
}
.colofon__fleuron{font-size:1.6rem;color:var(--sello);margin-bottom:.6rem}
.colofon p{font-size:.98rem}
.colofon__tipos{font-size:.85rem;color:var(--tinta-suave);font-style:italic;margin-top:.35rem}
.colofon a{color:var(--fichero)}

/* ── FAB WhatsApp ───────────────────────────────── */
.fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#FDFBF2;
  border:2px solid color-mix(in srgb, var(--wa) 55%, var(--tinta));
  display:grid;place-items:center;
  box-shadow:0 10px 24px -10px rgba(43,33,24,.7);
  animation:latido 2.6s infinite;
}
.fab svg{width:30px;height:30px}
@keyframes latido{
  0%{box-shadow:0 10px 24px -10px rgba(43,33,24,.7),0 0 0 0 rgba(30,158,82,.45)}
  70%{box-shadow:0 10px 24px -10px rgba(43,33,24,.7),0 0 0 16px rgba(30,158,82,0)}
  100%{box-shadow:0 10px 24px -10px rgba(43,33,24,.7),0 0 0 0 rgba(30,158,82,0)}
}
@media (prefers-reduced-motion:reduce){.fab{animation:none}}

/* ── reveal ─────────────────────────────────────── */
.up{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.up.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none;transition:none}}

/* ── responsive ─────────────────────────────────── */
@media (max-width:760px){
  body{font-size:1.1rem}
  .nav a:not(:last-child){display:none}
  .indice{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .ficha__sello{top:-2rem;right:-.4rem}
  .ficha__campos dt{min-width:5.2rem}
}