/*
 * Componentes y layout de yebenes.dev (docs/web/yebenes-dev.md §5).
 *
 * Va después de tokens.css y solo usa sus variables: ningún color, duración
 * ni curva se escribe aquí. Tamaños, familias e interlineados: los papeles de
 * la escala de docs/marca/sistema_visual.md §3, que es su única fuente.
 * Móvil primero; puntos de corte de §5.7: 600 y 820 px (420, solo pósters).
 */

/* ---------- Base ---------- */

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);      /* Título de sección */
}
h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);    /* Subtítulo */
}
strong {
  font-weight: 500;                            /* el énfasis es Outfit 500 */
}

/* Al llegar con Tab a algo que está fuera de la pantalla, el navegador
   desplaza lo justo para que el elemento entre y lo deja pegado al borde:
   el anillo de foco (3 + 2 px por fuera) quedaría cortado. Este margen lo
   deja entero (T21: insignia y pósters). */
a,
button {
  scroll-margin-block: var(--s-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Marco ----------
   Una columna con un solo eje izquierdo: encabezado, secciones y pie
   comparten el marco de --wide, y el texto se queda en --measure dentro de
   él. Así la marca, los titulares, la tarjeta y los pósters empiezan en la
   misma vertical a cualquier ancho. */

.site-header,
.intro,
.section,
.site-footer,
.doc {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}
.wrap {
  max-width: var(--measure);   /* lectura: 60–70 caracteres */
}
.wrap--wide {
  max-width: var(--wide);      /* solo lista de apps y pósters */
}

/* ---------- Encabezado ---------- */

/* Móvil: marca y conmutador arriba, navegación debajo. Desde 600 px, una
   fila en el orden del documento. Sin la navegación (prensa, legal) queda
   una sola fila. Nada fijo: se va al bajar. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-6);
  padding-top: var(--s-6);
}

.skip {
  position: absolute;
  top: var(--s-2);
  left: var(--gutter);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--rice);
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--warm-grey);
  font: 500 0.9375rem/1 var(--sans);
}
.skip:not(:focus) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* BrandMark + logotipo. Separación de medio lado de la baldosa (14 px a
   28 px) y alineación por el centro óptico de las mayúsculas. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--charcoal);
  text-decoration: none;
}
.tile--header {
  --size: 28px;
}
.tile--gate {
  --size: 64px;
}
/* Refuerzo de los atributos de presentación del SVG. */
.tile rect {
  fill: currentColor;
}
.tile path {
  stroke: var(--mark);
}

/* Logotipo en cabecera. En Newsreader la caja de la línea (interlineado 1)
   mide ascendente + descendente = 1em y el centro de las mayúsculas queda
   0,1em por encima de su centro: se baja 0,1em para que la baldosa, centrada
   en la caja, quede centrada en las mayúsculas. */
.wordmark {
  position: relative;
  top: 0.1em;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wordmark-dev {
  color: var(--indigo);
}

/* Navegación del encabezado y del pie: carbón, sin subrayado en reposo.
   Cada enlace, 44 × 44 como mínimo: 8 px de relleno a cada lado (que el
   margen negativo de la lista devuelve al borde) y 8 de hueco dan 24 px
   entre palabras, iguales aunque una palabra sea corta («Apps», “Now”). */
.site-nav,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-2);
  margin-inline: calc(-1 * var(--s-2));
}
.site-nav {
  order: 3;
  flex-basis: calc(100% + 2 * var(--s-2));
}
.site-nav a,
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s-2);
  color: var(--charcoal);
  font: 500 0.9375rem/1 var(--sans);
  text-decoration: none;
}
.site-nav a:hover,
.site-footer nav a:hover {
  text-decoration: underline;
}

/* LangSwitch: la .lang de Kanso; el activo es un <span aria-current="page">. */
.lang {
  order: 2;
  display: inline-flex;
  flex: none;
  padding: 3px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--warm-grey);
}
.lang a,
.lang [aria-current] {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 32px;
  border-radius: var(--r-pill);
  color: var(--taupe);
  font: 500 0.8125rem/1 var(--sans);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.lang a:hover {
  color: var(--charcoal);
}
.lang [aria-current="page"] {
  background: var(--rice);
  color: var(--charcoal);
  box-shadow: 0 2px 8px var(--shadow);
}

/* ---------- Presentación ---------- */

/* Ritmo vertical (§5.1): en móvil, los mínimos de cada clamp (64 y 48 px),
   para que la primera pantalla llegue a la insignia; desde 600 px, el clamp
   entero. Cada filete lleva debajo --section-gap y encima el mismo aire que
   cierra la presentación. */
.intro {
  padding-block: var(--s-10) var(--s-9);
}
.lede {
  max-width: 36rem;
  margin-top: var(--s-6);
  color: var(--taupe);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
}
/* Revelado escalonado sin style="--i": el titular es el 0, el lede el 1. */
.intro .reveal:nth-child(2) {
  --i: 1;
}

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

.section {
  padding-block: var(--s-10) var(--s-9);
  border-top: 1px solid var(--hairline);
}
.section:last-child {
  padding-bottom: var(--s-11);   /* 96 px antes del pie */
}
.section h2 {
  margin-bottom: var(--s-4);
}
.section p + p {
  margin-top: var(--s-4);
}
.dateline {
  color: var(--taupe);
}

/* ---------- Superficie: tarjetas de app, documentos, 404 ---------- */

/* Sin sombra en ningún tema: la capa se explica por el borde. */
.surface {
  background: var(--rice);
  border: 1px solid var(--hairline);
  border-radius: var(--r-large);
}

/* ---------- Apps: AppEntry y AppIcon ---------- */

.app-list {
  display: grid;
  gap: var(--s-6);
}
/* Móvil: el icono y el nombre en una fila; debajo, frase, estado y
   acciones a todo el ancho. Desde 820 px, el icono en su columna y el
   contenido a la derecha, en dos filas: texto y acciones. */
.app {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-4);
  padding: var(--s-6);
}
.app-summary,
.app-status,
.app-actions {
  grid-column: 1 / -1;
}
.app-summary {
  margin-top: var(--s-3);
}
.app-status {
  margin-top: var(--s-2);
}
.app-actions {
  margin-top: var(--s-3);
}
.app-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: var(--rice);
  border: 1px solid var(--hairline);
  border-radius: var(--r-medium);
}
.app-icon img {
  display: block;
  width: 56px;
  height: 56px;
}
/* Las apps son discos (guía §5): sobre carbón, un aro tenue separa el disco
   del fondo, como en la web de Kanso. */
@media (prefers-color-scheme: dark) {
  .app-icon img {
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--warm-grey);
  }
}
.app-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  color: var(--taupe);
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* Estado pendiente: píldora con texto en arcilla (5,39:1 y 6,23:1 sobre
   --rice); el texto lo dice, no solo el color. */
.pending {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--warm-grey);
  color: var(--clay);
  font: 500 0.8125rem/1 var(--sans);
  letter-spacing: 0.04em;
}
.app-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.app-actions > a:not(.badge) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Insignia oficial a 40 px dentro de un enlace de 44; no se mueve al pasar. */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: opacity var(--t-press) var(--ease);
}
.badge img {
  display: block;
  width: auto;
  height: 40px;
}
.badge:hover {
  opacity: 0.92;
}

/* ---------- Vídeos: VideoPoster ---------- */

.posters {
  display: grid;
  grid-template-columns: minmax(0, 200px);
  gap: var(--s-6) var(--s-4);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.posters + p {
  margin-top: var(--s-6);
}
.poster {
  display: block;
  color: var(--taupe);
  text-decoration: none;
}
.poster picture {
  display: block;
}
.poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--r-medium);
  transition: opacity var(--t-press) var(--ease);
}
.poster:hover img {
  opacity: 0.92;
}
.poster-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.poster:hover .poster-title {
  text-decoration: underline;
}

/* ---------- Botones ---------- */

/* .btn de Kanso con los tokens de la casa; transición, hover y pulsación
   están en tokens.css. El de fondo índigo no aparece en ninguna página. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--indigo);
  color: var(--on-indigo);
  font: 500 1rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
/* Silencioso: carbón con aro decorativo, sin acento (el de la 404, 52 px). */
.btn--quiet {
  background: transparent;
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--warm-grey);
}
/* Pequeño: «Copiar», 40 px. */
.btn--small {
  min-height: 40px;
  padding: 0 var(--s-4);
}

/* ---------- Contacto: CopyEmail ---------- */

.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
/* Solo existe cuando site.js ha arrancado; sin él queda el mailto:. */
.copy {
  display: none;
}
.js-ready .copy {
  display: inline-flex;
}
.copy.is-failed {
  color: var(--clay);
}

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

.site-footer {
  padding-block: var(--s-7) var(--s-9);
  border-top: 1px solid var(--hairline);
  color: var(--taupe);
  font-size: 0.875rem;
  line-height: 1.5;
}
.site-footer nav {
  margin-bottom: var(--s-3);
}

/* ---------- Documentos: /press y /legal (T13, T14) ----------
   <main class="doc"><article class="surface">. La cabecera de la página es
   la misma <header class="site-header"> de la home, sin la navegación; el
   título del documento va en un <div class="doc-header"> (no <header>: el
   de la página es el único) con su h1 y la fecha o el lede. */

.doc {
  margin-top: var(--s-7);
  padding-bottom: var(--s-11);
}
.doc > article {
  max-width: 760px;
  padding: var(--s-9) 44px;
}
.doc-header {
  margin-bottom: var(--s-7);
}
.doc-header > * + * {
  margin-top: var(--s-5);
}
.doc .updated {
  color: var(--taupe);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.doc h2 {
  margin: 44px 0 var(--s-3);
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.doc h3 {
  margin: 28px 0 var(--s-2);
}
.doc h4 {
  margin: var(--s-6) 0 var(--s-2);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
.doc p,
.doc ul,
.doc ol,
.doc table {
  margin: 0 0 var(--s-4);
}
.doc ul,
.doc ol {
  padding-left: 22px;
}
.doc li {
  margin-bottom: 10px;
}
.doc li::marker {
  color: var(--taupe);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
}
.doc th,
.doc td {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.doc th {
  width: 32%;
  padding-right: var(--s-4);
  font-weight: 600;
}
/* Nota secundaria bajo un h3 (prensa: de dónde sale un texto). */
.doc .doc-note {
  margin-bottom: var(--s-3);
  color: var(--taupe);
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* Texto de ficha copiado tal cual (prensa, §4.1): conserva los saltos de
   línea del original y parte las URL largas en móvil. */
.doc .store-text {
  margin: 0 0 var(--s-6);
  padding-left: var(--s-4);
  border-left: 1px solid var(--warm-grey);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.doc .callout {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--clay);
  border-radius: 0 var(--r-medium) var(--r-medium) 0;
  background: var(--clay-tint);
  color: var(--charcoal);
}

/* ---------- Una sola tarjeta: 404 (T15) ----------
   <main class="gate"><div class="surface"> con BrandMark .tile--gate, h1
   (Título de sección), p y .btn.btn--quiet. */

.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-6) var(--gutter);
  text-align: center;
}
.gate .surface {
  width: 100%;
  max-width: 360px;
  padding: var(--s-8) 28px var(--s-7);
}
.gate .tile {
  display: block;
  margin: 0 auto var(--s-5);
}
.gate h1 {
  margin-bottom: 10px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.gate p {
  margin-bottom: 28px;
  color: var(--taupe);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.gate .btn {
  width: 100%;
}

/* ---------- Puntos de corte ---------- */

@media (min-width: 420px) {
  .posters {
    grid-template-columns: repeat(2, minmax(0, 200px));
  }
}

@media (min-width: 600px) {
  .intro {
    padding-block: clamp(var(--s-10), 14vh, var(--s-12))
      clamp(var(--s-9), 10vh, var(--s-11));
  }
  .section {
    padding-block: var(--section-gap) clamp(var(--s-9), 10vh, var(--s-11));
  }
  .section h2 {
    margin-bottom: var(--s-6);
  }
  .site-nav {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }
  .lang {
    order: 0;
  }
  .posters {
    grid-template-columns: repeat(2, minmax(0, 220px));
    column-gap: var(--s-6);
  }
}

@media (min-width: 820px) {
  .app {
    align-items: start;
    column-gap: var(--s-6);
    padding: var(--s-7);
  }
  .app-icon {
    grid-row: 1 / span 4;
  }
  .app-summary,
  .app-status,
  .app-actions {
    grid-column: 2;
  }
  .app-summary {
    margin-top: var(--s-2);
  }
  .app-actions {
    margin-top: var(--s-4);
  }
}

@media (max-width: 599px) {
  .doc > article {
    padding: var(--s-7) 22px;
  }
  /* Ficha de prensa: en dos columnas no cabe a 320 px (el dominio y
     «promocionales» no se parten); cada fila, rótulo encima del valor. */
  .doc th,
  .doc td {
    display: block;
    width: auto;
  }
  .doc th {
    padding: var(--s-3) 0 0;
  }
  .doc td {
    padding: var(--s-1) 0 var(--s-3);
    border-top: 0;
  }
}

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

/* El revelado y la baldosa ya se paran en tokens.css; aquí, lo propio de
   esta hoja. */
@media (prefers-reduced-motion: reduce) {
  .badge,
  .poster img {
    transition: none;
  }
}

@media print {
  .js-ready .reveal {
    opacity: 1;
    transform: none;
  }
  .skip,
  .lang,
  .copy {
    display: none;
  }
}