*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fuente-texto); font-size: var(--t-1); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
img, picture, video, svg { display: block; max-width: 100%; }
a { color: var(--teal-texto); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.contenedor {
  width: 100%; max-width: var(--ancho); margin-inline: auto;
  padding-inline: max(var(--e-3), env(safe-area-inset-left, 0px)) max(var(--e-3), env(safe-area-inset-right, 0px));
}
.salto { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: var(--e-1) var(--e-2); z-index: 20; }
.salto:focus { left: var(--e-2); top: var(--e-2); }

/* Botones: uno principal por pantalla */
.boton {
  display: inline-block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1rem; line-height: 1.1;
  border: 2px solid transparent; border-radius: var(--radio); padding: 0.8125rem 1.25rem; min-height: 44px;
  text-decoration: none; cursor: pointer; transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton--principal { background: var(--teal); color: var(--navy); }
.boton--principal:hover { background: #09bdb6; }
.boton--secundario { color: #fff; border-color: #ffffffb3; }
.boton--secundario:hover { background: #ffffff1f; }
.boton--secundario.boton--claro { color: var(--navy); border-color: var(--navy); }
.boton--secundario.boton--claro:hover { background: #002a540f; }
.botones { display: flex; gap: var(--e-2) var(--e-2); flex-wrap: wrap; }

/* Etiquetas de cifra */
.etiqueta { display: inline-block; font: 600 0.8125rem var(--fuente-titulos); border-radius: 4px; padding: 2px 8px; }
.etiqueta--medido { background: var(--navy); color: #fff; }
.etiqueta--estimado { border: 1.5px solid var(--tinta-2); color: var(--tinta-2); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }