/* La web pública de orveosoftware.com. Va encima de tokens.css, que es el
   del kit de marca v1.0 sin tocar: si el kit cambia, se copia el suyo encima.
   Viaja con la web a Cloudflare Pages y se edita en web/, nunca en destino.
   Se publica con sus comentarios, que lee cualquiera: nada interno en ellos.

   Claude, 12/10/2026: el manual pide un solo acento Forge por pantalla. Por
   eso los enlaces del texto van en Iron subrayados y solo se vuelven Forge al
   pasar o enfocar; Forge en reposo queda para una cosa por pantalla. */

:root {
  color-scheme: light;
  --borde: rgb(92 104 116 / 0.22);
  --blanco-suave: rgb(255 255 255 / 0.78);
  --ancho: 1120px;
  --ancho-texto: 70ch;
  --gutter: clamp(28px, 6vw, 64px);
  --logo-h: 36px;
  /* Claude, 12/10/2026: el aire del manual es el diámetro del símbolo. En el
     logo con descriptor el símbolo ocupa 100,1 de sus 125,36 de alto; en el
     horizontal, todo el alto. */
  --aire: calc(var(--logo-h) * 0.8);
}

@media (min-width: 720px) {
  :root { --logo-h: 52px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* El pie, abajo del todo también en las páginas cortas */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }

p, ul, ol, dl { margin: 0; }

/* ---- Enlaces y foco ---- */

a {
  color: var(--or-iron);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { color: var(--or-forge); }

/* Una dirección de correo no tiene dónde partirse: en un móvil estrecho
   empujaría la página hacia el lado */
a[href^="mailto:"] { overflow-wrap: anywhere; }
li { min-width: 0; }

:focus-visible {
  outline: 2px solid var(--or-forge);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--or-radius);
  background: var(--or-iron);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.saltar:focus { top: 12px; color: #fff; }

/* ---- Estructura ---- */

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cabecera { padding-block: var(--aire); }

.cabecera .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aire) calc(var(--aire) * 1.5);
}

.marca { display: inline-block; text-decoration: none; }
.marca img { height: var(--logo-h); width: auto; }
.marca--horizontal img { height: calc(var(--logo-h) * 0.62); }

.menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.menu a {
  display: inline-block;
  padding-block: 8px;
  font-size: var(--or-small-size);
  line-height: var(--or-small-leading);
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* ---- Tipografía ---- */

h1, h2, h3 { margin: 0; color: var(--or-iron); }

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, var(--or-h1-size));
  line-height: 1.1875;
}

h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, var(--or-h1-size));
  line-height: 1.1875;
}

h3 {
  font-size: var(--or-h2-size);
  line-height: var(--or-h2-leading);
}

.etiqueta {
  margin-bottom: 16px;
  font-size: var(--or-label-size);
  line-height: var(--or-label-leading);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or-slate);
}

.secundario { color: var(--or-slate); }

/* Inter se carga hasta 600: sin esto, el navegador fingiría la negrita */
strong, b { font-weight: 600; }

code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* ---- La portada ---- */

.portada {
  padding-block: clamp(32px, 7vw, 104px) clamp(56px, 9vw, 120px);
}

.portada h1 {
  font-size: clamp(2.125rem, 1.35rem + 3.4vw, var(--or-display-size));
  line-height: 1.0833;
}

.portada h1 span { display: block; }
.acento { color: var(--or-forge); }

.entradilla {
  max-width: 56ch;
  margin-top: 28px;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}

.boton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--or-radius);
  background: var(--or-iron);
  color: var(--or-paper);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.boton:hover { background: var(--or-graphite); color: var(--or-paper); }

.enlace-flecha {
  font-weight: 500;
  padding-block: 12px;
}

/* ---- Secciones ---- */

.seccion {
  padding-block: clamp(56px, 9vw, 112px);
  border-top: 1px solid var(--borde);
}

.seccion > .contenedor > h2 { max-width: 24ch; }

.intro {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--or-slate);
}

.bloque { margin-top: 40px; }

.rejilla {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.tarjeta {
  padding: 28px;
  border-radius: var(--or-radius-lg);
  background: var(--or-sand);
}

.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p + p { margin-top: 12px; }

.tarjeta--oscura {
  background: var(--or-iron);
  color: #fff;
}

.tarjeta--oscura h3 { color: #fff; }
.tarjeta--oscura p { color: var(--blanco-suave); }

.nota {
  max-width: 62ch;
  margin-top: 28px;
}

/* Los pasos de «Cómo trabajamos», numerados como en el manual: Sora y Slate */
.pasos {
  list-style: none;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: 36px 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.pasos li { counter-increment: paso; }

.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--or-font-display);
  font-weight: 600;
  font-size: var(--or-small-size);
  letter-spacing: 0.08em;
  color: var(--or-slate);
}

.pasos h3 { margin-bottom: 8px; }

.aparte {
  max-width: 62ch;
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: var(--or-radius-lg);
  border: 1px solid var(--borde);
}

.aparte h3 { margin-bottom: 8px; }

/* «Lo que no hacemos»: el círculo con aspa del manual (página 07), en Slate */
.no-hacemos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 22px;
  max-width: 70ch;
}

.no-hacemos li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}

.no-hacemos svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--or-slate);
}

.no-hacemos strong { font-weight: 600; }

.lista {
  max-width: 64ch;
  margin-top: 32px;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
}

/* ---- Contacto, sobre Iron: aquí el acento pasa a Ember ---- */

.contacto {
  padding-block: clamp(64px, 10vw, 128px);
  background: var(--or-iron);
  color: #fff;
}

.contacto .etiqueta { color: var(--blanco-suave); }
.contacto h2 { color: #fff; max-width: 20ch; }
.contacto p { max-width: 60ch; }
.contacto .intro { color: var(--blanco-suave); }
.contacto a { color: #fff; }
.contacto a:hover { color: var(--or-ember); }
.contacto :focus-visible { outline-color: var(--or-ember); }

/* Claude, 12/10/2026: la dirección cabe en una línea desde 360 px; por debajo,
   el <wbr> del HTML la parte tras la arroba y no en cualquier letra. */
.boton--ember {
  margin-top: 36px;
  padding-inline: clamp(16px, 4vw, 24px);
  font-family: var(--or-font-display);
  font-size: clamp(1rem, 0.8rem + 1vw, 1.375rem);
  background: var(--or-ember);
  color: var(--or-iron);
}

.contacto .boton--ember,
.contacto .boton--ember:hover { color: var(--or-iron); }
.contacto a.boton--ember { overflow-wrap: normal; }
/* Claude, 12/10/2026: sin cambio de color al pasar el puntero. Un Ember más
   claro no está en la paleta del manual («un solo acento»), y el Graphite de
   .boton:hover dejaría el texto Iron sin contraste. */
.boton--ember:hover {
  background: var(--or-ember);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.contacto .pequeno { margin-top: 28px; }

.pequeno {
  font-size: var(--or-small-size);
  line-height: var(--or-small-leading);
}

/* ---- Pie ---- */

.pie {
  padding-block: 48px;
  border-top: 1px solid var(--borde);
}

.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}

.pie .marca img { height: 22px; }

.pie ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.pie a {
  display: inline-block;
  padding-block: 8px;
}

/* El aire del logo horizontal es su propio alto: 22 px */
.pie__lema { margin-top: 24px; }

/* ---- Textos legales ---- */

/* El texto, alineado con el logo y a una medida que se lee */
.legal {
  padding-block: clamp(24px, 5vw, 64px) clamp(64px, 9vw, 112px);
  /* Las direcciones escritas como texto tampoco tienen dónde partirse */
  overflow-wrap: break-word;
}

.legal > * { max-width: var(--ancho-texto); }

.legal h1 { margin-bottom: 12px; }

.legal h2 {
  margin-top: 56px;
  margin-bottom: 16px;
  font-size: var(--or-h2-size);
  line-height: var(--or-h2-leading);
}

.legal h3 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 1.125rem;
  line-height: 1.6rem;
}

.legal p + p,
.legal p + ul,
.legal ul + p,
.legal dl + p,
.legal p + dl { margin-top: 14px; }

.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }

.fecha { color: var(--or-slate); }

.esencial {
  margin-top: 36px;
  padding: 28px;
  border-radius: var(--or-radius-lg);
  background: var(--or-sand);
}

.esencial h2 { margin-top: 0; }

/* Forge sobre Sand da 4,39:1, menos del 4,5:1 del texto: aquí el enlace no
   cambia de color al pasar el puntero, engorda el subrayado */
.esencial a:hover {
  color: var(--or-iron);
  text-decoration-thickness: 2px;
}

/* Pares término y valor: dos columnas en ancho, una en el móvil. Con
   minmax(0, …) la columna no crece hasta la palabra más larga. */
.pares {
  display: grid;
  gap: 4px 24px;
  grid-template-columns: minmax(0, 1fr);
}
.pares dt { font-weight: 600; }
.pares dd { margin: 0 0 12px; }

@media (min-width: 640px) {
  .pares { grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); }
  .pares dd { margin-bottom: 8px; }
}

.ficha { margin-top: 20px; }

/* Lo que falta por rellenar: visible a propósito para que no se publique sin
   verlo. El porqué de cada hueco está en docs/PENDIENTE.md y no en un
   comentario junto a él: lo que va aquí se publica. */
.hueco {
  padding: 1px 6px;
  border: 1px dashed var(--or-forge);
  border-radius: 4px;
  background: var(--or-sand);
  color: var(--or-iron);
  font-family: var(--or-font-mono);
  font-size: 0.9em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- 404 ---- */

.perdida { padding-block: clamp(48px, 10vw, 128px); }
.perdida p { max-width: 50ch; margin-top: 20px; }

/* ---- Movimiento e impresión ---- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Claude, 12/10/2026: con el alto contraste de Windows en un tema oscuro, el
   logo en color queda Iron sobre negro y solo se ve el punto. El fondo Paper
   le devuelve su contraste sin mover nada: el aire es una sombra sólida, no
   un relleno. Y el botón, sin borde, quedaría como texto suelto. */
@media (forced-colors: active) {
  .marca img {
    forced-color-adjust: none;
    background: var(--or-paper);
    box-shadow: 0 0 0 4px var(--or-paper);
  }

  .boton { border: 1px solid; }
}

@media print {
  .saltar, .menu, .acciones { display: none; }
  .contacto { background: none; color: var(--or-iron); }
  .contacto h2, .contacto a, .contacto .intro, .contacto .etiqueta { color: var(--or-iron); }
  .boton--ember { background: none; padding: 0; }
}