/* mapas.hechoamaquina.com · identidad «Hecho a Máquina» (marca/hecho-a-maquina/estilo.css), fuentes servidas en local.
   Cifras siempre en IBM Plex Mono (.num), nunca en la tipografía de titular. Lo copia scripts/sitio_mapas.py. */
@font-face{font-family:Archivo;src:url(fuentes/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fuentes/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fuentes/plexmono-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --fondo:#F1ECE2;--fondo2:#E6DFD1;--tarjeta:#F8F4EC;--tinta:#1A1A1A;--gris:#5E594F;
  --acento:#B53A0C;--naranja:#FF5A1F;--azul:#1F3F8F;--linea:rgba(26,26,26,.16);--reticula:rgba(31,63,143,.06);
  --sombra:0 1px 2px rgba(26,26,26,.08),0 12px 32px -12px rgba(26,26,26,.28);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--fondo:#151412;--fondo2:#1E1C19;--tarjeta:#1E1C19;--tinta:#F1ECE2;--gris:#AAA395;
    --acento:#FF8A57;--linea:rgba(241,236,226,.16);--reticula:rgba(140,165,230,.05);
    --sombra:0 1px 2px rgba(0,0,0,.4),0 14px 36px -12px rgba(0,0,0,.7);color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 1.0625rem/1.55 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  background-image:linear-gradient(var(--reticula) 1px,transparent 1px),linear-gradient(90deg,var(--reticula) 1px,transparent 1px);
  background-size:36px 36px}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--tinta)}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}
.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:var(--fondo);padding:.5em 1em;z-index:9}
.saltar:focus{left:16px}
.envoltura{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.envoltura{padding:0 32px}}

/* Cabecera */
.cabecera{border-bottom:2px solid var(--tinta);background:color-mix(in srgb,var(--fondo) 92%,transparent)}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marca{color:var(--tinta);display:block;line-height:0}
.logo{height:40px;width:auto}
.seccion{font:600 .78rem/1.2 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);text-decoration:none;text-align:right}

/* Tipografía */
h1,h2{font-family:Archivo,sans-serif;font-weight:900;font-stretch:112%;letter-spacing:-.02em;line-height:1;margin:0}
h1{font-size:clamp(2.6rem,9vw,5.6rem);margin:.1em 0 .25em;overflow-wrap:anywhere}
h2{font-size:clamp(1.35rem,3.4vw,1.8rem);margin:2rem 0 .8rem}
.antetitulo{font:600 .8rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin:2rem 0 0}
.entrada{font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:1.45;max-width:38ch;margin:0 0 1.2rem;font-weight:500}
p{max-width:62ch}

/* Botón */
.boton{display:inline-flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:center;background:var(--tinta);color:var(--fondo);font-weight:800;
  border:0;border-radius:999px;padding:.75em 1.35em;box-shadow:0 5px 0 var(--naranja);text-decoration:none;font:800 1rem/1.2 Archivo,sans-serif;cursor:pointer;
  transition:transform .12s ease-out,box-shadow .12s ease-out}
.boton small{font:400 .78rem "IBM Plex Mono",monospace;opacity:.75}
.boton:hover{color:var(--fondo);transform:translateY(2px);box-shadow:0 3px 0 var(--naranja)}
.boton:active{transform:translateY(5px);box-shadow:0 0 0 var(--naranja)}

/* Portada */
.portada{padding-bottom:1rem;display:grid;gap:0 48px}
@media (min-width:900px){.portada{grid-template-columns:1.25fr .75fr;align-items:start}
  .portada .muestra{grid-column:2;grid-row:1/span 5;margin-top:2rem}}
.buscador label{display:block;font-weight:700;margin:.4rem 0 .5rem}
.caja{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.caja input{flex:1 1 220px;min-width:0;font:600 1.2rem Archivo,sans-serif;padding:.7em .9em;border:2px solid var(--tinta);border-radius:14px;
  background:var(--tarjeta);color:var(--tinta)}
.caja input::placeholder{color:var(--gris);font-weight:400}
.caja .boton{flex:0 0 auto}
.resultado{min-height:3.2em;margin-top:.9rem;max-width:560px}
.resultado:empty{min-height:1em}
.muestra{display:block;max-width:420px;margin:1rem auto 0;transform:rotate(1.5deg);box-shadow:var(--sombra);border-radius:4px;overflow:hidden}
.muestra:hover{transform:rotate(0)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:.38em .8em;border:1.5px solid var(--linea);border-radius:999px;background:var(--tarjeta);
  color:var(--tinta);text-decoration:none;font-weight:600}
.chips a:hover{border-color:var(--naranja);color:var(--acento)}
.falta{margin-top:1.4rem}
.como ul{padding-left:1.1em;max-width:70ch}
.como li{margin:.35em 0}

/* Ficha de apellido */
.migas{font:400 .85rem "IBM Plex Mono",monospace;color:var(--gris);margin-top:1.4rem}
.migas a{color:var(--gris)}
.rejilla{display:grid;gap:8px 56px}
@media (min-width:900px){.rejilla{grid-template-columns:1fr 1fr;align-items:start}
  .lamina{position:sticky;top:20px;margin-top:2rem!important}}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:2px solid var(--tinta);border-bottom:1px solid var(--linea);margin:1.2rem 0 1.4rem}
.cifra{padding:.8rem .9rem .8rem 0}
.cifra+.cifra{border-left:1px solid var(--linea);padding-left:.9rem}
.cifra b{display:block;font-size:clamp(1.35rem,3.2vw,1.75rem);font-weight:600;line-height:1.15;color:var(--tinta);white-space:nowrap}
.cifra:first-child b{color:var(--acento)}
.cifra span{display:block;font-size:.88rem;color:var(--gris);line-height:1.3;margin-top:.25rem}
@media (max-width:520px){.cifra+.cifra{border-left:0;padding-left:0;border-top:1px solid var(--linea)}}
.curiosas{padding:0;list-style:none;margin:1rem 0}
.curiosas li{border-left:4px solid var(--naranja);padding:.2em 0 .2em .9em;margin:.6em 0;font-weight:600;max-width:58ch}
.aviso{background:var(--fondo2);border-radius:12px;padding:.9em 1.1em;font-size:.95rem}
.top{width:100%;border-collapse:collapse;max-width:560px}
.top th,.top td{padding:.55em .4em;border-bottom:1px solid var(--linea);text-align:left}
.top thead th{font:600 .72rem "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);border-bottom:2px solid var(--tinta)}
.top tbody th{font-weight:700}
.top tbody th .num{color:var(--acento);margin-right:.4em}
.top td{text-align:right;white-space:nowrap}
.top thead th:not(:first-child){text-align:right}
.nota{font-size:.85rem;color:var(--gris)}
.lamina{margin:1rem 0 0}
.lamina img{box-shadow:var(--sombra);border-radius:4px;background:#F2ECE1}
.lamina figcaption{margin-top:1.4rem;display:grid;justify-items:start;gap:.9rem}
.imprimir{font-size:.92rem;color:var(--gris);margin:0}
.fuente,.otros{border-top:1px solid var(--linea);margin-top:2.5rem}
.fuente p{font-size:.95rem}

/* Pie */
.pie{margin-top:4rem;border-top:2px solid var(--tinta);padding:1.6rem 0 2.4rem;font-size:.92rem;color:var(--gris)}
.pie .arbol{font-size:1.05rem;color:var(--tinta);margin-top:0}
.legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.legal a{color:var(--gris)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Tienda (botones de scripts/tienda_web.py): «Muy pronto» mientras no haya URL de checkout */
.tienda{margin-top:1.6rem;padding:1.1rem 1.2rem 1.2rem;border:2px solid var(--tinta);border-radius:16px;background:var(--tarjeta);display:grid;gap:.7rem;justify-items:start;max-width:560px}
.tienda-titulo{font:600 .78rem/1.2 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);margin:0}
.tienda .incluye,.tienda .letra,.pedido .letra{font-size:.88rem;color:var(--gris);margin:0}
.packs{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.packs li{font-size:.92rem;color:var(--gris)}
.packs a{font-weight:700;margin-right:.3em}
.pronto,.boton[disabled]{cursor:not-allowed;opacity:.62;box-shadow:0 5px 0 var(--linea)}
.pronto:hover,.boton[disabled]:hover{transform:none;box-shadow:0 5px 0 var(--linea);color:var(--fondo)}
.pronto-txt,.boton small{white-space:nowrap}
.pronto .pronto-txt{background:var(--naranja);color:#1A1A1A;border-radius:999px;padding:.12em .6em;opacity:1;font-weight:600}
.renuncia{display:flex;gap:.6em;align-items:flex-start;font-size:.88rem;line-height:1.4;max-width:60ch;cursor:pointer}
.renuncia input{width:1.15em;height:1.15em;margin:.15em 0 0;flex:0 0 auto;accent-color:var(--acento)}
.falta-casilla{margin:0;color:var(--acento);font-weight:700;font-size:.9rem}
.pedido{border-top:1px solid var(--linea);margin-top:2rem}
.pedido form{display:grid;gap:1rem;max-width:640px;margin:1rem 0 .8rem}
.opciones{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.opciones legend{font-weight:700;margin-bottom:.4rem;padding:0}
.opcion{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .6em;padding:.6em .9em;border:1.5px solid var(--linea);border-radius:12px;background:var(--tarjeta);cursor:pointer}
.opcion:has(input:checked){border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.opcion input{accent-color:var(--acento)}
.opcion .num{font-weight:600;color:var(--acento)}
.opcion small{flex-basis:100%;padding-left:1.6em;color:var(--gris)}
.huecos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem 1rem}
.hueco-ap[hidden]{display:none}
.hueco-ap label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.3rem}
.hueco-ap input{width:100%;font:600 1.1rem Archivo,sans-serif;padding:.6em .8em;border:2px solid var(--tinta);border-radius:12px;background:var(--tarjeta);color:var(--tinta)}
.pedido .boton{justify-self:start}
.resultado-pedido{margin:0;min-height:1.2em;font-weight:600}