/* sopa.css · el sistema visual de sopadeletras® para construir cosas.
 * Guía: https://dev5.sopadeletras.art/corea/estilo
 *
 * Un solo sistema, tres volúmenes. Se elige con data-volumen en <html> o en
 * cualquier contenedor:
 *   data-volumen="oficina"   propuestas, contratos, herramientas internas, corporativos
 *                            (sin placas y casi sin filetes: separa el espacio)
 *   data-volumen="editorial" el sitio, casos, decks de avances (default)
 *   data-volumen="juego"     redes, recreo, campañas, portafolio
 * Tema oscuro: data-tema="oscuro" (en oficina y editorial).
 *
 * Todo empieza con s- para no chocar con el CSS del proyecto donde se use.
 */

@font-face { font-family: "SopaHN"; src: url("/ref-fuentes/HelveticaNeue-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "SopaHN"; src: url("/ref-fuentes/HelveticaNeue-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SopaHN"; src: url("/ref-fuentes/HelveticaNeue-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SopaHN"; src: url("/ref-fuentes/HelveticaNeue-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */
:root, [data-volumen] {
  /* color de la casa: la paleta oficial de sopadeletras.art/branding */
  --s-tinta: #1d1d1f;         /* negro */
  --s-papel: #f0f0f0;         /* blanco */
  --s-tarjeta: #e7e7e7;       /* superficie de los decks */
  --s-blanco: #ffffff;
  --s-azul: #1961ae;
  --s-rojo: #e03e52; --s-amarillo: #f7ea48; --s-naranja: #ff9e1b; --s-verde: #71b790; --s-morado: #b4b5df;
  /* sin texto gris: lo secundario va en Light. el gris queda para estados apagados */
  --s-gris: #86868b;
  --s-linea: rgba(29, 29, 31, .14);
  --s-contorno: rgba(0, 0, 0, .5);

  /* tipografía */
  --s-fuente: "SopaHN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --s-t-micro: 11px;
  --s-t-chico: clamp(13px, .95vw, 15px);
  --s-t-texto: clamp(15px, 1.1vw, 18px);
  --s-t-entrada: clamp(20px, 2vw, 32px);
  --s-t-titulo: clamp(34px, 4.6vw, 80px);
  --s-t-display: clamp(56px, 11vw, 210px);

  /* retícula y espacio */
  --s-m: clamp(16px, 3.4vw, 56px);
  --s-g: clamp(12px, 1.6vw, 24px);
  --s-aire: clamp(64px, 9vw, 150px);

  /* movimiento */
  --s-resorte: cubic-bezier(.2, 1.3, .35, 1);
  --s-salida: cubic-bezier(.19, 1, .22, 1);

  /* lo que cambia con el volumen (valores de editorial) */
  --s-fondo: var(--s-papel);
  --s-texto: var(--s-tinta);
  --s-superficie: var(--s-blanco);
  --s-filete: 1.5px;
  --s-radio: 10px;
  --s-display-peso: 400;
  --s-display-track: -.035em;
  --s-titulo-peso: 400;
  --s-acento: var(--s-azul);
  --s-placa: var(--s-amarillo);
  --s-etiqueta: var(--s-fuente);
  --s-etiqueta-peso: 700;
}

[data-volumen="oficina"] {
  --s-fondo: var(--s-papel);
  --s-superficie: var(--s-tarjeta);
  --s-filete: 2px;
  --s-radio: 0px;
  --s-display-peso: 700;
  --s-display-track: -.04em;
  --s-titulo-peso: 700;
  --s-placa: transparent;
  --s-etiqueta-peso: 300;
}
[data-volumen="juego"] {
  --s-filete: 1.5px;
  --s-radio: 10px;
  --s-display-peso: 400;
}
/* paleta guardada: la de corea (folleto de Nodeul). no es la de la casa; queda a la mano
   y se prende con data-paleta="corea" en el contenedor. */
[data-paleta="corea"], [data-paleta="corea"] [data-volumen] {
  --s-tinta: #161616; --s-papel: #f3f3f1; --s-tarjeta: #dfe4e9;
  --s-azul: #1a7bc0;
  --s-rojo: #d8252b; --s-amarillo: #f6cb1a; --s-naranja: #ee7a24; --s-verde: #1f8f48; --s-morado: #b4b5df; --s-rosa: #e2689a;
  --s-mesa: #141012;
  --s-linea: rgba(22, 22, 22, .14);
}
[data-tema="oscuro"] {
  --s-fondo: #131315;
  --s-texto: #f0f0f0;
  --s-superficie: #1f1f22;
  --s-linea: rgba(240, 240, 240, .14);
  --s-contorno: rgba(255, 255, 255, .45);
}

/* ---------- base ---------- */
.s-base, [data-volumen] { background: var(--s-fondo); color: var(--s-texto); font-family: var(--s-fuente); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.s-base *, [data-volumen] * { box-sizing: border-box; }
.s-base ::selection, [data-volumen] ::selection { background: var(--s-amarillo); color: var(--s-tinta); }

/* ---------- tipografía ---------- */
.s-display { font-size: var(--s-t-display); line-height: .9; letter-spacing: var(--s-display-track); font-weight: var(--s-display-peso); margin: 0; }
.s-titulo { font-size: var(--s-t-titulo); line-height: .98; letter-spacing: -.025em; font-weight: var(--s-titulo-peso); margin: 0; }
.s-entrada { font-size: var(--s-t-entrada); line-height: 1.12; letter-spacing: -.015em; font-weight: 400; margin: 0; }
.s-texto { font-size: var(--s-t-texto); line-height: 1.55; font-weight: 700; letter-spacing: -.01em; margin: 0; max-width: 62ch; }
[data-volumen="oficina"] .s-texto { font-weight: 400; }
.s-chico { font-size: var(--s-t-chico); line-height: 1.4; font-weight: 700; margin: 0; }
.s-gris, .s-light { font-weight: 300; }   /* lo secundario es Light, no gris */
.s-etiqueta { font-family: var(--s-etiqueta); font-weight: var(--s-etiqueta-peso); font-size: var(--s-t-chico); letter-spacing: .01em; margin: 0; }

/* titular en escalera: el segundo renglón se va a la derecha (editorial y juego) */
.s-escalera > span { display: block; }
.s-escalera > span + span { text-align: right; }
[data-volumen="oficina"] .s-escalera > span + span { text-align: left; }

/* ---------- estructura ---------- */
.s-pagina { padding: 0 var(--s-m); }
.s-seccion { padding-top: 14px; padding-bottom: var(--s-aire); border-top: var(--s-filete) solid var(--s-texto); }
/* etiqueta a la izquierda, contenido a la derecha */
.s-fila { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-g); row-gap: 10px; padding: 14px 0; border-top: 1px solid var(--s-linea); }
.s-fila:first-child { border-top: var(--s-filete) solid var(--s-texto); }
.s-reticula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-g); }
@media (max-width: 700px) { .s-fila { grid-template-columns: 1fr; } }

/* ---------- acciones ---------- */
/* acción de texto: filete arriba y flecha que dice a dónde va (→ en el sitio, ↗ afuera, ↓ baja) */
.s-accion { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 10px; border-top: var(--s-filete) solid currentColor; color: var(--s-texto); text-decoration: none; font-size: var(--s-t-entrada); line-height: 1.1; letter-spacing: -.015em; }
.s-accion::after { content: "→"; transition: transform .5s var(--s-salida); }
.s-accion[data-a="fuera"]::after { content: "↗"; }
.s-accion[data-a="abajo"]::after { content: "↓"; }
.s-accion:hover::after { transform: translateX(.25em); }
.s-accion[data-a="fuera"]:hover::after { transform: translate(.18em, -.18em); }
/* botón sólido (oficina y formularios) */
.s-boton { display: inline-flex; align-items: center; gap: .6em; font: 700 var(--s-t-chico)/1 var(--s-fuente); background: var(--s-texto); color: var(--s-fondo); border: 1px solid var(--s-texto); border-radius: var(--s-radio); padding: .95em 1.4em; cursor: pointer; text-decoration: none; transition: opacity .2s, transform .35s var(--s-resorte); }
.s-boton:hover { opacity: .85; }
.s-boton.s-fantasma { background: transparent; color: var(--s-texto); border-color: var(--s-linea); }
/* en juego el botón es una placa */
[data-volumen="juego"] .s-boton { background: var(--s-placa); color: var(--s-tinta); border: 0; box-shadow: 0 0 0 1px var(--s-contorno); font-weight: 400; font-size: var(--s-t-entrada); letter-spacing: -.015em; padding: .45em .8em .5em; }
[data-volumen="juego"] .s-boton:hover { opacity: 1; transform: rotate(-2deg) scale(1.03); }
/* chip / pastilla de filtro */
.s-chip { display: inline-flex; align-items: center; gap: .5em; font: 700 13px/1 var(--s-fuente); color: var(--s-texto); background: transparent; border: 1px solid var(--s-linea); border-radius: 999px; padding: .6em .9em; cursor: pointer; }
.s-chip[aria-pressed="true"] { background: var(--s-texto); color: var(--s-fondo); border-color: var(--s-texto); }
.s-chip .s-num { font-weight: 300; font-size: 11px; }
.s-kbd { font: 300 11px/1 var(--s-fuente); padding: .35em .5em; border: 1px solid var(--s-linea); border-radius: 4px; }
.s-enlace { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.s-enlace:hover { color: var(--s-acento); }

/* ---------- listas ---------- */
/* renglón tipo menú: marca triangular (juego/editorial) o flecha (oficina) al pasar */
.s-lista { list-style: none; margin: 0; padding: 0; }
.s-lista > li > a, .s-lista > li > .s-renglon { display: grid; grid-template-columns: 18px minmax(0, 4fr) minmax(0, 6fr) auto; column-gap: var(--s-g); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--s-linea); text-decoration: none; color: inherit; font-size: var(--s-t-texto); line-height: 1.37; }
.s-lista > li:first-child > * { border-top: var(--s-filete) solid var(--s-texto); }
.s-lista > li > a::before { content: ""; width: 12px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: scale(0); transition: transform .25s var(--s-resorte); }
.s-lista > li > a:hover::before, .s-lista > li > a:focus-visible::before { transform: scale(1); }
[data-volumen="oficina"] .s-lista > li > a::before { content: "→"; width: auto; height: auto; background: none; clip-path: none; font-size: var(--s-t-texto); }
.s-lista .s-n { font-weight: 700; }
.s-lista .s-d { font-weight: 500; }
.s-lista .s-dato { font-family: var(--s-etiqueta); font-weight: var(--s-etiqueta-peso); font-size: var(--s-t-chico); white-space: nowrap; }

/* ---------- datos ---------- */
.s-datos { margin: 0; }
.s-datos > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-g); padding: 12px 0; border-bottom: 1px solid var(--s-linea); }
.s-datos > div:first-child { border-top: var(--s-filete) solid var(--s-texto); }
.s-datos dt { font-family: var(--s-etiqueta); font-weight: 300; font-size: var(--s-t-chico); }

.s-datos dd { margin: 0; font-weight: 700; font-size: var(--s-t-texto); line-height: 1.45; }
.s-numero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-g); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--s-linea); }
.s-numero .s-g { font-size: clamp(48px, 7vw, 130px); line-height: .9; letter-spacing: -.035em; font-weight: var(--s-display-peso); }
.s-tabla { width: 100%; border-collapse: collapse; font-size: var(--s-t-texto); }
.s-tabla th { text-align: left; font-family: var(--s-etiqueta); font-weight: 300; font-size: var(--s-t-chico); padding: 0 14px 10px 0; border-bottom: var(--s-filete) solid var(--s-texto); }
.s-tabla td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--s-linea); vertical-align: top; line-height: 1.4; }
.s-tabla td.s-cifra { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- superficies ---------- */
/* tarjeta: limpia en oficina, placa con contorno en juego */
.s-tarjeta { position: relative; display: block; background: var(--s-superficie); border-radius: var(--s-radio); padding: clamp(18px, 2vw, 28px); color: inherit; text-decoration: none; }
[data-volumen="oficina"] .s-tarjeta { background: transparent; border-top: var(--s-filete) solid var(--s-texto); padding-left: 0; padding-right: 0; }
[data-volumen="juego"] .s-tarjeta { background: var(--s-placa); box-shadow: 0 0 0 1px var(--s-contorno); transition: transform .4s var(--s-resorte); }
[data-volumen="juego"] a.s-tarjeta:hover { transform: rotate(-1.5deg); }
.s-tarjeta .s-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
[data-volumen="juego"] .s-tarjeta .s-foto { box-shadow: 0 0 0 1px #2b2b2b; }
/* placa sola (juego) */
.s-placa { background: var(--s-placa); border-radius: var(--s-radio); box-shadow: 0 0 0 1px var(--s-contorno); }
.s-hueco { color: #fff; -webkit-text-stroke: max(1.4px, .14vw) #3a3a3a; paint-order: stroke fill; }
.s-vertical { writing-mode: vertical-rl; text-orientation: sideways; font-weight: 700; font-size: var(--s-t-chico); }

/* ---------- formularios ---------- */
.s-campo { display: block; padding: 14px 0 8px; border-bottom: var(--s-filete) solid var(--s-texto); }
.s-campo > span { display: block; font-family: var(--s-etiqueta); font-weight: var(--s-etiqueta-peso); font-size: var(--s-t-chico); }
[data-volumen="oficina"] .s-campo > span { font-weight: 300; }
.s-campo input, .s-campo textarea, .s-campo select { display: block; width: 100%; border: 0; background: transparent; color: var(--s-texto); font: 400 clamp(18px, 1.6vw, 26px)/1.25 var(--s-fuente); padding: 6px 0 0; }
.s-campo input::placeholder, .s-campo textarea::placeholder { color: currentColor; opacity: .35; font-weight: 300; }
.s-campo:focus-within { border-bottom-color: var(--s-acento); }
.s-campo input:focus, .s-campo textarea:focus, .s-campo select:focus { outline: none; }

/* ---------- avisos ---------- */
.s-aviso { display: inline-flex; gap: .6em; align-items: baseline; font: 700 var(--s-t-chico)/1.3 var(--s-fuente); background: var(--s-texto); color: var(--s-fondo); padding: .8em 1.1em; border-radius: var(--s-radio); }
[data-volumen="juego"] .s-aviso { background: var(--s-placa); color: var(--s-tinta); box-shadow: 0 0 0 1px var(--s-contorno); }
.s-marca { display: inline-block; width: 12px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ---------- oficina: el espacio separa, no las lineas ---------- */
[data-volumen="oficina"] .s-seccion { border-top: 0; padding-top: 0; }
[data-volumen="oficina"] .s-fila, [data-volumen="oficina"] .s-fila:first-child { border-top: 0; padding: 0 0 clamp(26px, 3vw, 44px); }
[data-volumen="oficina"] .s-datos > div, [data-volumen="oficina"] .s-datos > div:first-child { border: 0; padding: 6px 0; }
[data-volumen="oficina"] .s-numero { border: 0; padding: 10px 0; }
[data-volumen="oficina"] .s-lista > li > *, [data-volumen="oficina"] .s-lista > li:first-child > * { border: 0; padding: 9px 0; }
[data-volumen="oficina"] .s-lista > li > a:hover { color: var(--s-acento); }
[data-volumen="oficina"] .s-tabla th { border-bottom: 1px solid var(--s-texto); }
[data-volumen="oficina"] .s-tabla td { border: 0; padding-top: 9px; padding-bottom: 9px; }
[data-volumen="oficina"] .s-tarjeta { border-top: 0; padding: 0; }
[data-volumen="oficina"] .s-accion { border-top: 0; padding-top: 0; justify-content: flex-start; gap: .4em; }

/* ---------- foco y movimiento ---------- */
[data-volumen] :focus-visible { outline: 2px solid var(--s-acento); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { [data-volumen] * { transition: none !important; animation: none !important; } }