/* Base design tokens and shared primitives for the public app
   (landing + player). Visual language: a letter from the Río de la Plata —
   aged postcard paper, fountain-pen ink, postage red used only for
   postal details (stamp, postmark, CTA). */

:root {
  --papel: #F3EDE2;         /* aged postcard stock */
  --papel-claro: #FBF7EE;   /* card surface (postcard itself) */
  --papel-hondo: #EAE1CE;   /* deeper paper, wells and map backdrop */
  --tinta: #26355F;         /* fountain-pen blue-black: all running text */
  --tinta-suave: #6B7492;   /* faded ink: secondary text */
  --estampilla: #B23830;    /* postage red: stamp, postmark, one CTA per view */
  --mansa: #8FA69B;         /* silver-green water of Playa Mansa */
  --linea: #D9CDB4;         /* ruled address lines */

  --f-prosa: 'Alegreya', Georgia, serif;
  --f-ui: 'Alegreya Sans', system-ui, sans-serif;
  /* Homemade Apple carries no Cyrillic: Marck Script picks up the ru mirror */
  --f-mano: 'Homemade Apple', 'Marck Script', cursive;

  --ancho: 40rem;           /* single reading column */
}

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

/* one paper, edge to edge: html carries the colour too, so overscroll and
   short pages never show white underneath.
   The scrollbar keeps its lane whether the page needs it or not — otherwise
   switching language (different text, different height) shifts the whole
   column sideways. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--papel);
  scrollbar-gutter: stable;
}

body {
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  /* The product behaves like an app: text doesn't get selected by a stray
     tap, double-tap doesn't zoom the page, tap doesn't flash gray. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: var(--f-prosa);
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: inherit; }

button { font: inherit; cursor: pointer; }

/* --- Handwriting (Graciela's hand): sparse, always short lines --- */
.mano {
  font-family: var(--f-mano);
  font-size: 0.95em;
  line-height: 1.9;
  color: var(--tinta);
  transform: rotate(-1.2deg);
}

/* --- Eyebrow labels: small caps, letterpressed --- */
.sello-texto {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* --- CTA as a postage stamp: red imprint inside a perforated frame --- */
.estampilla-btn {
  display: inline-block;
  border: none;
  background: var(--estampilla);
  color: var(--papel-claro);
  font-family: var(--f-ui);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1rem 1.9rem;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
}
/* the frame is the stamp paper; perforation = punched holes along its edge */
.estampilla-marco {
  display: inline-block;
  padding: 0.45rem;
  background-image:
    radial-gradient(circle at 0 50%, var(--papel) 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 100% 50%, var(--papel) 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 50% 0, var(--papel) 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 50% 100%, var(--papel) 0.22rem, transparent 0.24rem);
  background-size: 0.55rem 0.55rem;
  background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
  background-position: left top, right top, top left, bottom left;
  background-color: var(--papel-claro);
  box-shadow: 0 3px 14px rgba(38, 53, 95, 0.18);
  transform: rotate(-0.6deg);
  transition: transform 0.15s ease;
}
.estampilla-marco:hover { transform: rotate(0.4deg) scale(1.02); }
.estampilla-marco:active { transform: scale(0.98); }
/* the stamp is not cancelled yet: it waits for the walker to reach the start */
.estampilla-btn:disabled {
  background: var(--tinta-suave);
  opacity: 0.45;
  cursor: default;
}
.estampilla-marco:has(.estampilla-btn:disabled) {
  box-shadow: none;
  transform: none;
}
.estampilla-marco:has(.estampilla-btn:disabled):hover { transform: none; }

.estampilla-btn:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--estampilla);
  outline-offset: 3px;
}

/* --- Postmark (round postal cancel) --- */
.matasellos { display: inline-block; }
.matasellos svg { display: block; }

/* --- A long page scrolls inside its sheet, not on the body: edge
   rubber-banding (iOS/macOS) drags the whole page, pinned header included.
   With the header outside the scroller only the content bounces. --- */
.rollo {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rollo-hoja {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* --- App header: the mark on the left, the language on the right.
   Pinned to the top: on a long page the brand and the language switch stay
   reachable; opaque paper, so scrolled text never shows through. --- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ancho);
  width: 100%;
  margin-inline: auto;
  padding: 0.9rem 1.4rem 0.6rem;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--tinta);
  text-decoration: none;
}
.marca-icono { color: var(--estampilla); flex: none; }
.marca-nombre {
  font-family: var(--f-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* language: a quiet dropdown, ruled like the address lines of the card */
.idioma {
  appearance: none;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: none;
  padding: 0.35rem 1.7rem 0.35rem 0.65rem;
  font-family: var(--f-ui);
  font-size: 0.82rem;
  color: var(--tinta-suave);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7492' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.6rem;
}
.idioma:hover { border-color: var(--tinta-suave); color: var(--tinta); }

/* --- Progress of a voice: a ruled line filling with ink --- */
/* A shared primitive: both the walk and the invitation show the same thing
   with it — how much voice is left. It used to live in player.css, which is
   why the bar was invisible on the invitation page. */
.progreso {
  height: 2px;
  background: var(--linea);
  max-width: var(--ancho);
  width: calc(100% - 2.8rem);
  margin-inline: auto;
}
/* the id form predates the landing, which needs several bars on one page */
#progreso-lleno, .progreso-lleno {
  height: 100%;
  width: 0;
  background: var(--tinta);
  transition: width 0.5s linear;
}

/* --- The one loud button of a screen: whatever action matters right now --- */
.btn-principal {
  border: none;
  border-radius: 3px;
  background: var(--estampilla);
  color: var(--papel-claro);
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 10px rgba(178, 56, 48, 0.25);
}
.btn-principal:hover { filter: brightness(1.06); }
.btn-principal:active { transform: translateY(1px); }
.btn-principal:disabled { background: var(--tinta-suave); box-shadow: none; opacity: 0.5; }

/* --- Quiet buttons (secondary actions) --- */
.btn-tenue {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 3px;
  color: var(--tinta-suave);
  font-family: var(--f-ui);
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}
.btn-tenue:hover { border-color: var(--tinta-suave); color: var(--tinta); }

/* Icon + caption on one line: the icon carries the meaning, the word confirms
   it, and neither is long enough to wrap the button onto a second line. */
.btn-con-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-con-icono svg { flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}