/* APEX MOTO LOG — el oliva del páramo y el lima del chaleco reflectivo.
   Archivo para la interfaz, Permanent Marker para lo que escribe cada quien,
   Overpass Mono —hija de la Highway Gothic— para las cifras.
   Layout: barra de pestañas abajo en el teléfono, columna lateral en escritorio. */

:root{
  /* --- sistema, tema Día. El mismo oliva que en Noche es el suelo, aquí es la tinta. --- */
  --paramo:#eceee3;
  --paramo-2:#ffffff;
  --paramo-3:#f5f7ec;
  --linea:#d6dac8;
  --tinta:#21261c;
  --tinta-2:#49523e;
  --tinta-3:#5f6954;
  --reflectivo:#c2e92f;
  --sobre-reflectivo:#21261c;   /* la ÚNICA tinta que va encima del reflectivo */
  --musgo:#4f6b10;
  --musgo-tenue:#e4efc7;
  --sobre-musgo:#ffffff;
  --cono:#a8400a;
  --cono-tenue:#fbe6d8;
  --podio:#7e6005;
  --logo-sub:var(--musgo);      /* MOTO LOG: sobre claro no puede ir en lima */

  /* --- nombres de antes, apuntando al sistema, para no reescribir el archivo entero.
         Ojo: --signal es el verde LEGIBLE (musgo), no el reflectivo. El reflectivo
         marca una sola cosa por pantalla y se pide por su nombre. --- */
  --asphalt:var(--paramo);
  --paper:var(--paramo-2);
  --paper-2:var(--paramo-3);
  --ink:var(--tinta);
  --ink-soft:var(--tinta-2);
  --ink-faint:var(--tinta-3);
  --rule:var(--linea);
  --signal:var(--musgo);
  --signal-soft:var(--musgo-tenue);
  --on-signal:var(--sobre-musgo);
  --hazard:var(--cono);
  --hazard-soft:var(--cono-tenue);
  --oro:var(--podio);

  --font-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-num:"Overpass Mono",ui-monospace,Consolas,monospace;
  --font-mano:"Permanent Marker","Segoe Print",cursive;
  --r:4px;          /* lo que se lee es cuadrado */
  --r-toque:999px;  /* lo que se toca es redondo */
  --nav-h:60px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paramo:#21261c; --paramo-2:#2b3126; --paramo-3:#363d31; --linea:#3f473a;
    --tinta:#edefe3; --tinta-2:#b6bea8; --tinta-3:#949d88;
    --reflectivo:#cdf23f; --musgo:#8fa63c; --musgo-tenue:#2e3a1e; --sobre-musgo:#21261c;
    --cono:#e8702a; --cono-tenue:#3a2317; --podio:#d9a93e;
    --logo-sub:var(--reflectivo);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paramo:#21261c; --paramo-2:#2b3126; --paramo-3:#363d31; --linea:#3f473a;
  --tinta:#edefe3; --tinta-2:#b6bea8; --tinta-3:#949d88;
  --reflectivo:#cdf23f; --musgo:#8fa63c; --musgo-tenue:#2e3a1e; --sobre-musgo:#21261c;
  --cono:#e8702a; --cono-tenue:#3a2317; --podio:#d9a93e;
  --logo-sub:var(--reflectivo);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--asphalt); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:var(--signal)}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

.wrap{
  max-width:1000px;margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* ---------- barra superior ---------- */
.top{
  position:sticky;top:0;z-index:30;
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0px);
}
.top-in{display:flex;align-items:center;gap:12px;padding-block:11px}
.mark{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
/* 34px: el símbolo aguanta desde 32 px, por debajo se le cierra el camino. */
.logo-simbolo{height:34px;width:auto;display:block;flex:none}
.mark span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.yo{
  display:flex;align-items:center;gap:7px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:999px;padding:4px 11px 4px 5px;font-size:13px;font-weight:600;
}
.dot{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:10px;font-weight:800}
/* La foto va redonda por su cuenta, sin recortar el círculo, para que la chapita
   de "cambiar" pueda salirse del borde. */
.dot img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

/* ---------- navegación ---------- */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--paper);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);text-decoration:none;color:var(--ink-faint);font-size:10.5px;font-weight:600;
}
.nav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  box-sizing:content-box;padding:3px 13px;border-radius:var(--r-toque);
  transition:background-color .26s cubic-bezier(.65,.05,0,1)}
/* La pestaña activa es la píldora reflectiva: junto al botón principal, el otro
   —y último— reflectivo que puede haber a la vez. La chapa va detrás del icono y
   no de toda la pestaña, porque a cinco columnas no cabe. El rótulo se queda en
   tinta: sobre el lima solo va tinta oliva, y esa es la del icono. */
.nav a[aria-current="page"]{color:var(--tinta)}
.nav a[aria-current="page"] svg{background:var(--reflectivo);stroke:var(--sobre-reflectivo)}
@media (prefers-reduced-motion: reduce){ .nav a svg{transition:none} }

/* ---------- bloques ---------- */
main{padding-block:18px 28px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r)}
.sec{margin-bottom:22px}
.sec > h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;margin-bottom:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* Tarjetas sueltas, no una rejilla con lineas: asi una cifra impar no deja
   un bloque gris vacio colgando al final. */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:13px 14px 14px}
@media (min-width:620px){ .tiles{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))} }
.tile b{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:24px;font-weight:600;line-height:1.1;margin-top:3px}
.tile b i{font-style:normal;font-size:12px;color:var(--ink-faint);font-weight:400;margin-left:2px}

/* ---------- tarjetas de rodada ---------- */
.rides{display:flex;flex-direction:column;gap:10px}
.ride{
  display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--signal);
  border-radius:var(--r);padding:0;overflow:hidden;
}
.ride.plan{border-left-color:var(--hazard)}
.ride-top{display:grid;grid-template-columns:74px minmax(0,1fr);gap:13px;padding:12px 14px;align-items:center}
.ride-top svg.trace{display:block;width:74px;height:52px}
.ride h3{font-size:15.5px;line-height:1.25;overflow-wrap:anywhere}
.ride-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:baseline;margin-top:4px}
.ride-meta span{font-size:12.5px;color:var(--ink-soft)}
.ride-meta .km{font-family:var(--font-num);font-weight:600;color:var(--ink)}
.ride-foot{display:flex;gap:8px;align-items:center;padding:8px 14px;border-top:1px solid var(--rule);
  background:var(--paper-2);flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;
  font-size:11px;font-weight:700;letter-spacing:.03em;
  background:var(--signal-soft);color:var(--signal);
}
.badge.plan{background:var(--hazard-soft);color:var(--hazard)}
.badge.score{background:transparent;border:1px solid var(--rule);color:var(--ink);font-family:var(--font-num)}
.caras{display:flex;margin-left:auto}
.caras .dot{margin-left:-6px;border:2px solid var(--paper);width:24px;height:24px}
.caras .dot:first-child{margin-left:0}

/* ---------- detalle ---------- */
.hero-foto{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--r) var(--r) 0 0;background:var(--paper-2)}
.d-head{padding:16px 16px 14px;border-bottom:1px solid var(--rule)}
.d-head h1{font-size:24px;line-height:1.18}
.d-sub{display:flex;gap:9px;flex-wrap:wrap;align-items:baseline;margin-top:7px}
.d-sub span{font-size:13px;color:var(--ink-soft)}
.ruta-linea{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:14px;flex-wrap:wrap}
.ruta-linea b{font-weight:600}
.ruta-linea i{font-style:normal;color:var(--ink-faint)}
#mapa,.mapa{height:300px;width:100%;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.mapa.chico{height:200px;border:1px solid var(--rule);border-radius:var(--r)}
.blk{padding:15px 16px;border-bottom:1px solid var(--rule)}
.blk:last-child{border-bottom:0}
.blk > .lbl{display:block;margin-bottom:7px}
.blk p.txt{font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.dos > div{background:var(--paper);padding:15px 16px}
@media (max-width:560px){ .dos{grid-template-columns:1fr} }

.gente{display:flex;flex-direction:column;gap:8px}
.persona{display:flex;align-items:center;gap:9px;font-size:14px}
.persona .pts{margin-left:auto;font-family:var(--font-num);font-weight:600}
.persona .pts.vacio{color:var(--ink-faint);font-weight:400;font-size:12.5px}

/* ---------- formularios ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.f input,.f select,.f textarea{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:9px 10px;font-size:15px;width:100%;
}
.f textarea{min-height:82px;resize:vertical;line-height:1.5}
.f .hint{font-size:11.5px;color:var(--ink-faint)}
/* El botón principal es LA cosa reflectiva de la pantalla, y el único sitio donde
   entra el lima. Encima del lima solo va tinta oliva, en los dos temas. */
.btn{
  background:var(--reflectivo);color:var(--sobre-reflectivo);border:1px solid transparent;
  border-radius:var(--r-toque);padding:10px 18px;font-weight:700;font-size:14.5px;
}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--paper-2);filter:none}
.btn.danger{background:transparent;color:var(--hazard);border-color:var(--rule)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.block{width:100%;justify-content:center}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);
  background:var(--paper-2);border-radius:999px;padding:5px 12px 5px 6px;font-size:13.5px;font-weight:600;
}
.chip[aria-pressed="true"]{border-color:var(--signal);background:var(--signal-soft);color:var(--signal)}
.chip[aria-pressed="true"] .dot{box-shadow:0 0 0 2px var(--signal-soft)}

.escala{display:flex;gap:4px;flex-wrap:wrap}
.escala button{
  width:34px;height:34px;border-radius:var(--r-toque);border:1px solid var(--rule);
  background:var(--paper-2);font-family:var(--font-num);font-size:13.5px;font-weight:600;padding:0;
}
.escala button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}

.paradas{display:flex;flex-direction:column;gap:7px}
.parada{display:grid;grid-template-columns:auto minmax(0,1fr) 110px 34px 34px;gap:7px;align-items:center}
/* El orden de la parada: las flechas con su número en medio, porque ese número
   es el que lleva su pin en el mapa. En el teléfono se paran en vertical al
   lado de la fila, para no robarle ancho al nombre. */
.parada .ord{display:flex;align-items:center;justify-content:center;gap:1px}
.parada .n{font-family:var(--font-num);font-size:12px;color:var(--ink-faint);
  min-width:14px;text-align:center}
.parada .mover{border:0;background:transparent;border-radius:var(--r);padding:0;
  width:24px;height:26px;font-size:13px;line-height:1;color:var(--ink-faint)}
.parada .mover:disabled{opacity:.22}
.parada input,.parada select{background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:7px 9px;font-size:14px;min-width:0}
.parada .x{border:1px solid var(--rule);background:transparent;border-radius:var(--r-toque);
  height:34px;color:var(--hazard);padding:0}
/* El botón de ubicar: en la parada va sin rótulo, en la tarjeta de lugar con él. */
.pin{border:1px solid var(--rule);background:transparent;border-radius:var(--r-toque);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;
  padding:0 9px;font-size:12.5px;font-weight:600;color:var(--ink-faint)}
.pin svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.pin.tiene{color:var(--signal);border-color:var(--signal)}
.pin[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal,#fff)}
.parada .pin{padding:0}
.lugar .pie .pin{height:30px;padding:0 8px;font-size:12px}

/* el mapa donde se le pone punto a cada parada */
.picker{margin-top:12px;border-top:1px dashed var(--rule);padding-top:12px}
/* En el directorio el mapa manda: no cuelga de un bloque del formulario. */
.picker.suelto{margin-top:0;border-top:0;padding-top:0;margin-bottom:16px}
.picker .mapa{height:240px;border:1px solid var(--rule);border-radius:var(--r)}
.picker .hint{display:block;margin-top:7px;font-size:11.5px;color:var(--ink-faint)}
.picker .barra{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
/* 180px de base para que en el teléfono el campo se quede solo en su renglón
   en vez de encogerse hasta no dejar leer lo que uno pega. */
.picker .barra input{flex:1 1 180px;min-width:0;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;font-size:14px}
.pin-num{box-sizing:border-box;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:var(--signal);color:var(--on-signal,#fff);border:2px solid #fff;
  font-family:var(--font-num);font-size:12px;font-weight:600;line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pin-num.viva{box-shadow:0 0 0 3px rgba(181,66,13,.85),0 1px 4px rgba(0,0,0,.35)}
@media (max-width:560px){
  .parada{grid-template-columns:30px minmax(0,1fr) 34px 34px;
    grid-template-areas:"ord nom pin x" "ord tipo tipo tipo"}
  .parada .ord{grid-area:ord;flex-direction:column;align-self:stretch;
    justify-content:space-between;gap:0}
  .parada .mover{width:30px;height:30px;font-size:14px}
  .parada .nom{grid-area:nom} .parada select{grid-area:tipo}
  .parada .pin{grid-area:pin} .parada .x{grid-area:x}
}

/* ---------- checklist ---------- */
.cat{margin-bottom:16px}
.cat h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.cat h3 em{font-style:normal;font-family:var(--font-num);font-size:12px;color:var(--ink-faint);margin-left:auto}
.items{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.item{display:flex;align-items:center;gap:11px;background:var(--paper);padding:11px 13px;
  width:100%;text-align:left;border:0}
.item .box{width:20px;height:20px;border-radius:4px;border:1.8px solid var(--rule);flex:none;
  display:grid;place-items:center}
.item[aria-pressed="true"] .box{background:var(--signal);border-color:var(--signal)}
.item[aria-pressed="true"] .box svg{stroke:var(--on-signal)}
.item[aria-pressed="true"] .t{color:var(--ink-faint);text-decoration:line-through}
.item .box svg{width:12px;height:12px;stroke:transparent;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.item .t{font-size:14.5px;overflow-wrap:anywhere}
.item .quien{margin-left:auto;display:flex}
.item .quien .dot{width:18px;height:18px;margin-left:-5px;border:2px solid var(--paper);font-size:9px}

/* Los acuerdos se leen, no se palomean: sin casilla y con su número al lado. */
.item.lectura .n{font-family:var(--font-num);font-size:12px;color:var(--ink-faint);
  min-width:1.5em;flex:none;text-align:center}

/* ---------- lugares ---------- */
.lugares{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.lugar{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:13px 14px}
.lugar h3{font-size:15px}
.lugar .tipo{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}
.lugar .nota{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.45}
/* En tres columnas el pie no cabe en un renglón: estrellas, autor, enlace y botón.
   Que baje el grupo de la derecha antes que partirse el nombre de quien lo anotó. */
.lugar .pie{display:flex;gap:10px;row-gap:7px;align-items:center;margin-top:9px;
  font-size:12.5px;flex-wrap:wrap}
.lugar .pie > span{white-space:nowrap}
.estrellas{color:var(--oro);letter-spacing:1px;font-size:13px}
.filtros{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.filtros button{
  border:1px solid var(--rule);background:var(--paper);border-radius:999px;
  padding:6px 13px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink-soft);
}
.filtros button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}

/* ---------- equipo ---------- */
.miembros{display:flex;flex-direction:column;gap:10px}
.miembro{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:11px;align-items:center;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:11px 12px}
.miembro .dot{width:44px;height:44px;font-size:14px}
/* La cara de la fila del equipo es un botón, con una chapita en la esquina para
   que se note que se puede tocar. */
.cara{position:relative;border:0;background:transparent;padding:0;line-height:0;border-radius:50%}
.cara .cam{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:11px;line-height:16px;text-align:center;
  font-weight:700;border:2px solid var(--paper-2);box-sizing:content-box}
.cara:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.cara:disabled .cam{display:none}
.cara.subiendo{opacity:.45}
.miembro .quitafoto{grid-column:2/-1;justify-self:start;border:0;background:transparent;padding:0;
  font-size:12.5px;font-weight:600;color:var(--ink-faint);text-decoration:underline}
.miembro input{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:9px 10px;font-size:15px;font-weight:600;width:100%}
.miembro input:disabled{opacity:.6}
.miembro .baja{border:1px solid var(--rule);background:transparent;border-radius:var(--r-toque);
  padding:8px 11px;font-size:12.5px;font-weight:600;color:var(--hazard);white-space:nowrap}
.miembro.off{opacity:.6}
.miembro.off .baja{color:var(--signal)}
.paleta{grid-column:2/-1;display:flex;gap:7px;flex-wrap:wrap}
.paleta button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.paleta button[aria-pressed="true"]{border-color:var(--ink)}

/* ---------- estados ---------- */
.vacio{border:1px dashed var(--rule);border-radius:var(--r);padding:28px 20px;text-align:center;
  background:var(--paper)}
.vacio p{color:var(--ink-soft);font-size:14px;margin-top:7px;line-height:1.5}
.aviso{background:var(--hazard-soft);color:var(--hazard);border-radius:var(--r);
  padding:11px 13px;font-size:13.5px;font-weight:600;margin-bottom:14px}
.cargando{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:14px;padding:22px 0}
.spin{width:14px;height:14px;border:2px solid var(--rule);border-top-color:var(--signal);
  border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2.4s} }
.toast{
  position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:var(--asphalt);border-radius:var(--r);
  padding:11px 17px;font-size:13.5px;font-weight:600;max-width:min(520px,calc(100% - 32px));
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}

/* ---------- la voz de quien escribe ---------- */
/* Un punto más grande y con el interlineado holgado: el marcador necesita aire.
   Solo lo escrito por una persona — los mensajes de la app se quedan en Archivo. */
p.txt.mano,p.nota.mano{font-family:var(--font-mano);font-size:16px;line-height:1.62;
  color:var(--ink-soft)}
.lugar p.nota.mano{font-size:14.5px;line-height:1.55}

/* ---------- intro ---------- */
/* Fondo negro y no oliva: el video empieza en claro y TERMINA en negro, así que
   ningún color de marca le queda bien a los dos extremos; el negro es el estado
   en que se queda. El botón va en blanco y negro fijos porque se apoya sobre el
   video, no sobre una superficie del tema. */
.intro{position:fixed;inset:0;z-index:100;background:#000;
  transition:opacity .5s cubic-bezier(.65,.05,0,1)}
.intro.fuera{opacity:0;pointer-events:none}
.intro-video{width:100%;height:100%;object-fit:cover;display:block}
/* En pantalla ancha, recortar un video vertical se lo comería: ahí cabe entero. */
@media (min-width:700px){ .intro-video{object-fit:contain} }
.intro-saltar{position:absolute;
  top:calc(14px + env(safe-area-inset-top,0px));
  right:calc(14px + env(safe-area-inset-right,0px));
  border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.6);color:#fff;
  border-radius:var(--r-toque);padding:9px 17px;font-size:13px;font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 2px 10px rgba(0,0,0,.35)}
@media (prefers-reduced-motion: reduce){ .intro{transition:none} }

/* ---------- entrada ---------- */
.puerta{min-height:100svh;display:grid;place-items:center;padding:24px}
.puerta-card{width:100%;max-width:380px;text-align:center}
/* En la puerta el logotipo ocupa el sitio del título, y debajo va la única
   línea escrita a mano de la app. */
.logo-h1{margin:0 0 12px}
.logo-lockup{display:block;width:min(215px,64%);height:auto;margin:0 auto}
.lema{font-family:var(--font-mano);font-size:18px;line-height:1;color:var(--musgo);
  margin-bottom:16px}
.puerta .sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:22px;line-height:1.5}
.puerta input{
  width:100%;text-align:center;font-family:var(--font-num);font-size:19px;letter-spacing:.09em;
  padding:13px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  text-transform:uppercase;
}
.quienes{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.quien-btn{
  display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:13px 15px;font-size:16px;font-weight:600;text-align:left;
}
.quien-btn:hover{border-color:var(--signal)}
.quien-btn .dot{width:28px;height:28px;font-size:12px}
.err{color:var(--hazard);font-size:13.5px;font-weight:600;margin-top:11px;min-height:1.2em}

/* ---------- escritorio ---------- */
@media (min-width:860px){
  body{padding-bottom:0}
  .nav{
    position:sticky;top:0;bottom:auto;height:100svh;border-top:0;border-right:1px solid var(--rule);
    grid-template-columns:1fr;grid-template-rows:repeat(5,auto);align-content:start;
    gap:3px;padding:14px 10px;width:188px;
  }
  .nav a{flex-direction:row;justify-content:flex-start;gap:11px;height:auto;padding:10px 12px;
    border-radius:var(--r-toque);font-size:14.5px}
  /* Una sola marca también aquí: la píldora del icono, sin teñir la fila entera. */
  .nav a[aria-current="page"]{background:transparent}
  .shell{display:grid;grid-template-columns:188px minmax(0,1fr)}
  .top{position:sticky;top:0}
  main{padding-block:22px 48px}
}