/* =========================================================================
   Presentador de identidad — sistema de diseño
   Dirección: galería oscura. El oro se presenta sobre fondo profundo y cada
   logo se monta en una cartela clara, que es su sustrato real.
   ========================================================================= */

:root {
  /* Superficies */
  --carbon-900: #101216;
  --carbon-850: #15181d;
  --carbon-800: #1b1f25;
  --carbon-750: #21262d;
  --carbon-700: #2b313a;
  --carbon-600: #3c434e;

  /* Sustrato claro (cartelas, papelería) */
  --hueso: #f7f4ee;
  --lino: #ede7dc;
  --arena: #ddd2c0;

  /* Marca — muestreados de los archivos originales */
  --oro: #d8a848;
  --oro-claro: #f0cc6c;
  --oro-profundo: #a86c18;

  /* Texto */
  --texto: #e9e5dd;
  --texto-suave: #9aa0a9;
  --texto-tenue: #6d747d;
  --tinta: #181818;
  --tinta-suave: #52565c;

  /* Semánticos */
  --exito: #6fbf8f;

  /* Sombras: tintadas en negro cálido, nunca negro puro plano */
  --sombra-cartela: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -20px rgba(0, 0, 0, .65);
  --sombra-alta: 0 4px 8px rgba(0, 0, 0, .35), 0 40px 80px -28px rgba(0, 0, 0, .8);
  --brillo-oro: 0 0 0 1px rgba(216, 168, 72, .5), 0 0 32px -6px rgba(216, 168, 72, .35);

  /* Tipografía */
  --f-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --f-lectura: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --f-ui: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.375rem, 2.4vw, 1.75rem);
  --t-2xl: clamp(1.875rem, 4.4vw, 3rem);
  --t-3xl: clamp(2.5rem, 7.5vw, 5rem);

  /* Ritmo */
  --ancho: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --seccion: clamp(4.5rem, 10vw, 8rem);

  --z-header: 100;
  --z-modal: 400;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carbon-900);
  color: var(--texto);
  font-family: var(--f-lectura);
  font-size: var(--t-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grano sutil sobre los planos oscuros: evita la esterilidad del vector puro */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
  color: var(--oro-claro);
  text-decoration-color: rgba(240, 204, 108, .45);
  text-underline-offset: .18em;
  transition: color .25s ease;
}
a:hover { color: var(--oro); }

/* Los hijos de grid y flex traen min-width:auto, así que una imagen ancha
   ensancha la pista por encima del contenedor y acaba recortada. */
.propuestas > *, .propuesta > *, .hero__grid > *, .racional > *,
.sistema > *, .aplicaciones > *, .pruebas > *, .prueba > *,
.app-tarjeta > *, .cartela > *, .decision-resumen > * { min-width: 0; }

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

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--oro);
  color: var(--tinta);
  padding: .75rem 1.25rem;
  font-weight: 600;
  font-size: var(--t-sm);
}
.salta-al-contenido:focus { left: 1rem; top: 1rem; }

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

section[id] { scroll-margin-top: 96px; }

/* ---------------------------------------------------------------- tipos */

.display {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

.etiqueta {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
}

.parrafo {
  font-family: var(--f-lectura);
  max-width: 64ch;
  color: var(--texto-suave);
  text-wrap: pretty;
  margin: 0;
}

.dato {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------- header */

.encabezado {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom: 1px solid transparent;
}
.encabezado[data-fijo='true'] {
  background: rgba(16, 18, 22, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--carbon-700);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--texto);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  letter-spacing: .01em;
}
.marca:hover { color: var(--oro-claro); }
.marca__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oro);
  flex: none;
}

.nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 900px) { .nav { display: flex; } }

.nav__enlace {
  background: none;
  border: 0;
  padding: .25rem 0;
  cursor: pointer;
  color: var(--texto-suave);
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  position: relative;
  transition: color .25s ease;
}
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--oro);
  transition: width .3s ease;
}
.nav__enlace:hover { color: var(--texto); }
.nav__enlace:hover::after { width: 100%; }
.nav__enlace[aria-current='true'] { color: var(--oro); }
.nav__enlace[aria-current='true']::after { width: 100%; }

.menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  color: var(--texto);
  cursor: pointer;
}
@media (min-width: 900px) { .menu-boton { display: none; } }

.menu-movil {
  display: grid;
  gap: .25rem;
  padding: .5rem var(--gutter) 1.25rem;
  background: rgba(16, 18, 22, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--carbon-700);
}
.menu-movil[hidden] { display: none; }
.menu-movil button {
  background: none;
  border: 0;
  padding: .7rem 0;
  text-align: left;
  color: var(--texto-suave);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--carbon-800);
}
.menu-movil button:hover { color: var(--oro); }

/* ------------------------------------------------------------- riel 01-04 */

.riel {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: .6rem;
  border-top: 1px solid var(--carbon-800);
}
.riel::-webkit-scrollbar { display: none; }

.riel__titulo {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  flex: none;
  margin-right: .5rem;
}

.ficha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .35rem .75rem .35rem .4rem;
  border: 1px solid var(--carbon-700);
  border-radius: 999px;
  background: var(--carbon-850);
  color: var(--texto-suave);
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease, transform .15s ease;
}
.ficha:hover { color: var(--texto); border-color: var(--carbon-600); }
.ficha:active { transform: translateY(1px); }
.ficha[aria-pressed='true'] {
  border-color: var(--oro);
  color: var(--oro-claro);
  background: rgba(216, 168, 72, .1);
}
.ficha__sello {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--hueso);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}
.ficha__sello img { width: 76%; height: 76%; object-fit: contain; }

/* ----------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .12s ease;
}
.boton:active { transform: translateY(1px); }

.boton--oro { background: var(--oro); color: #14161a; }
.boton--oro:hover { background: var(--oro-claro); }

.boton--linea {
  background: transparent;
  border-color: var(--carbon-600);
  color: var(--texto);
}
.boton--linea:hover { border-color: var(--oro); color: var(--oro-claro); }

.boton--sutil {
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
  padding-inline: .5rem;
}
.boton--sutil:hover { color: var(--oro-claro); }

.boton--mini {
  padding: .5rem .9rem;
  font-size: var(--t-xs);
  letter-spacing: .08em;
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-top: clamp(8rem, 18vh, 12rem);
  padding-bottom: var(--seccion);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  left: 50%; top: -30%;
  width: min(140vw, 1400px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(216, 168, 72, .11) 0%, rgba(216, 168, 72, 0) 62%);
  pointer-events: none;
  z-index: -1;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

.hero__texto { display: grid; gap: 1.5rem; justify-items: start; }
.hero__titulo { font-size: var(--t-3xl); }
.hero__titulo em {
  font-style: italic;
  color: var(--oro);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* Cartela: el logo montado sobre su sustrato real, colgado en la pared oscura */
.cartela {
  min-height: 0;
  background: var(--hueso);
  border-radius: 2px;
  box-shadow: var(--sombra-cartela);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  aspect-ratio: 4 / 3;
  max-height: 340px;
  position: relative;
}
.cartela::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(24, 24, 24, .08);
  pointer-events: none;
}
.cartela img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cartela--oscura { background: var(--carbon-850); }
.cartela--oscura::after { border-color: rgba(255, 255, 255, .08); }

/* -------------------------------------------------------------- secciones */

.seccion { padding-block: var(--seccion); position: relative; }
.seccion--murado { background: var(--carbon-850); }

.seccion__cabecera {
  display: grid;
  gap: .85rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 46ch;
}
.seccion__cabecera--fila {
  max-width: none;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
}
.seccion__titulo { font-size: var(--t-2xl); }

/* ------------------------------------------------------------- propuestas */

.propuestas {
  display: grid;
  gap: clamp(.9rem, 1.6vw, 1.35rem);
}
@media (min-width: 620px)  { .propuestas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .propuestas { grid-template-columns: repeat(4, 1fr); } }

.propuesta {
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: left;
  background: var(--carbon-800);
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.propuesta:hover {
  border-color: var(--carbon-600);
  transform: translateY(-3px);
  box-shadow: var(--sombra-cartela);
}
.propuesta[aria-pressed='true'] {
  border-color: var(--oro);
  box-shadow: var(--brillo-oro);
}

.propuesta__lienzo {
  min-width: 0;
  background: var(--hueso);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  height: clamp(146px, 15vw, 186px);
  position: relative;
}
.propuesta__lienzo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.propuesta__numero {
  position: absolute;
  top: .85rem; left: .95rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: rgba(24, 24, 24, .38);
}
.propuesta__estado {
  position: absolute;
  top: .7rem; right: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--oro);
  color: #14161a;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.propuesta[aria-pressed='true'] .propuesta__estado { opacity: 1; transform: none; }

.propuesta__cuerpo {
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: 1.05rem 1.15rem 1.15rem;
}
.propuesta__nombre {
  font-family: var(--f-display);
  font-size: 1.3125rem;
  line-height: 1.15;
  margin: 0;
}
.propuesta__tagline {
  margin: -.2rem 0 0;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* Afordancia explícita: la tarjeta se ve seleccionable de un vistazo */
.propuesta__accion {
  font-family: var(--f-ui);
  margin-top: .3rem;
  padding-top: .8rem;
  border-top: 1px solid var(--carbon-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color .25s ease;
}
.propuesta:hover .propuesta__accion { color: var(--oro-claro); }
.propuesta[aria-pressed='true'] .propuesta__accion { color: var(--oro); }
.propuesta__accion svg { flex: none; transition: transform .25s ease; }
.propuesta:hover .propuesta__accion svg { transform: translateX(3px); }
.muestras { display: flex; gap: .3rem; }
.muestra {
  width: 20px; height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .12);
}

.pie-nota {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--carbon-700);
}

/* ---------------------------------------------------------------- racional */

.racional {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .racional { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .racional > :first-child { position: sticky; top: 122px; }
}

.racional__bloques { display: grid; gap: 1.75rem; }

.bloque {
  display: grid;
  gap: .6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--carbon-700);
}
.bloque h3 {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
}
.bloque p { margin: 0; color: var(--texto-suave); }
.bloque ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .55rem;
}
.bloque ul li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: .6rem;
  color: var(--texto-suave);
}
.bloque ul li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro);
  margin-top: .58em;
}

.paleta-fila { display: flex; flex-wrap: wrap; gap: .6rem; }
.paleta-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem .35rem .4rem;
  border: 1px solid var(--carbon-700);
  border-radius: 999px;
}
.paleta-chip span:first-child {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------ aplicaciones */

.aplicaciones {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .aplicaciones { grid-template-columns: repeat(6, 1fr); } }

.app-tarjeta {
  background: var(--carbon-800);
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.app-tarjeta__titulo {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: .85rem 1rem .6rem;
}
.app-tarjeta__area {
  display: grid;
  place-items: center;
  padding: 1.25rem;
  min-height: 150px;
}

.col-2 { grid-column: span 2; }
@media (min-width: 860px) {
  .col-md-3 { grid-column: span 3; }
  .col-md-2 { grid-column: span 2; }
  .col-md-4 { grid-column: span 4; }
}

/* Tarjeta de presentación */
.tarjeta-visita {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 85 / 55;
  background: var(--hueso);
  border-radius: 3px;
  box-shadow: var(--sombra-cartela);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 1.1rem 1.2rem;
  gap: .5rem;
}
.tarjeta-visita img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.tarjeta-visita__pie {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(24, 24, 24, .5);
  text-align: center;
}

/* Cartel de venta */
.cartel {
  width: 100%;
  max-width: 240px;
  background: var(--hueso);
  border-radius: 3px;
  box-shadow: var(--sombra-cartela);
  display: grid;
  gap: .6rem;
  padding: 1rem;
  text-align: center;
}
.cartel img { max-width: 100%; max-height: 58px; width: auto; margin: auto; }
.cartel__banda {
  background: var(--tinta);
  color: var(--oro);
  font-family: var(--f-ui);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .22em;
  padding: .4rem;
}

/* Feed social */
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; }
.feed div { aspect-ratio: 1; display: grid; place-items: center; padding: 12%; }
.feed div:nth-child(odd) { background: var(--hueso); }
.feed div:nth-child(even) { background: var(--lino); }
.feed img { max-width: 100%; max-height: 100%; width: auto; }

/* Sello en seco */
.sello {
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--lino);
  border: 1px solid var(--arena);
  display: grid;
  place-items: center;
  box-shadow: inset 0 2px 8px rgba(24, 24, 24, .16), inset 0 -1px 2px rgba(255, 255, 255, .7);
}
.sello img { width: 62%; height: 62%; object-fit: contain; filter: grayscale(1) opacity(.55); }

/* Avatar circular */
.avatar {
  width: 118px; height: 118px;
  border-radius: 50%;
  background: var(--hueso);
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-cartela);
  overflow: hidden;
}
.avatar img { width: 68%; height: 68%; object-fit: contain; }

.mockup-papel {
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--sombra-cartela);
}
.mockup-papel img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ visor */

.escenario {
  position: relative;
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  overflow: hidden;
  background: var(--carbon-900);
}

.escenario__lienzo {
  display: block;
  width: 100%;
  height: clamp(340px, 56vh, 560px);
  touch-action: none;
  cursor: grab;
}
.escenario__lienzo:active { cursor: grabbing; }

.escenario__pista {
  position: absolute;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  pointer-events: none;
  transition: opacity .4s ease;
  text-align: center;
  white-space: nowrap;
}

.escenario__cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--carbon-900);
  color: var(--texto-tenue);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .5s ease;
}
.escenario__cargando[hidden] { display: none; }

.escenario__respaldo {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.visor-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--carbon-700);
  background: var(--carbon-850);
}
.visor-controles__grupo { display: flex; flex-wrap: wrap; gap: .4rem; }
.visor-controles__separador { flex: 1 1 auto; }

.acabado {
  display: grid;
  gap: .1rem;
  text-align: left;
  padding: .45rem .8rem;
  border: 1px solid var(--carbon-700);
  border-radius: 3px;
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.acabado:hover { border-color: var(--carbon-600); color: var(--texto); }
.acabado[aria-pressed='true'] {
  border-color: var(--oro);
  color: var(--oro-claro);
  background: rgba(216, 168, 72, .08);
}
.acabado strong {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
}
.acabado span {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--texto-tenue);
}
.acabado[aria-pressed='true'] span { color: rgba(240, 204, 108, .7); }

/* -------------------------------------------------------------- pruebas */

.pruebas {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 860px) { .pruebas { grid-template-columns: repeat(2, 1fr); } }

.prueba {
  background: var(--carbon-800);
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.prueba__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem .75rem;
  border-bottom: 1px solid var(--carbon-700);
}
.prueba__titulo h3 {
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.prueba__titulo p {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--texto-tenue);
  text-align: right;
}
.prueba__area { padding: 1.5rem; display: grid; place-items: center; }

/* Prueba de reducción */
.escala {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: wrap;
  background: var(--hueso);
  border-radius: 3px;
  padding: 1.75rem 1.25rem 1.25rem;
  width: 100%;
}
.escala__item { display: grid; justify-items: center; gap: .5rem; }
.escala__caja { display: grid; place-items: center; }
.escala__caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.escala__medida {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  color: rgba(24, 24, 24, .45);
}

/* Monocromo */
.mono-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--carbon-700); width: 100%; border-radius: 3px; overflow: hidden; }
.mono-celda { display: grid; place-items: center; padding: 1.5rem; min-height: 150px; }
.mono-celda--claro { background: var(--hueso); }
.mono-celda--oscuro { background: var(--tinta); }
.mono-celda img { max-width: 100%; max-height: 84px; width: auto; }
.mono-celda--claro img { filter: grayscale(1) brightness(0); }
.mono-celda--oscuro img { filter: grayscale(1) brightness(0) invert(1); }

/* Fondos */
.fondos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--carbon-700); width: 100%; border-radius: 3px; overflow: hidden; }
.fondo-celda { display: grid; place-items: center; padding: 1.4rem; min-height: 130px; }
.fondo-celda img { max-width: 100%; max-height: 66px; width: auto; }
.fondo-celda[data-tono='hueso'] { background: var(--hueso); }
.fondo-celda[data-tono='arena'] { background: var(--arena); }
.fondo-celda[data-tono='carbon'] { background: var(--tinta); }
.fondo-celda[data-tono='oro'] { background: var(--oro); }

/* Zona de protección */
.proteccion {
  position: relative;
  background: var(--hueso);
  border-radius: 3px;
  padding: clamp(2rem, 6vw, 3.5rem);
  display: grid;
  place-items: center;
  width: 100%;
}
.proteccion__marco {
  position: absolute;
  inset: clamp(1rem, 3vw, 1.75rem);
  border: 1px dashed rgba(168, 108, 24, .45);
}
.proteccion img { max-width: 100%; max-height: 120px; width: auto; position: relative; }

/* ------------------------------------------------------------- sistema */

.sistema { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .sistema { grid-template-columns: 1.3fr 1fr; } }

.paleta-rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--carbon-700);
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 620px) { .paleta-rejilla { grid-template-columns: repeat(3, 1fr); } }

.color {
  padding: 1.1rem;
  min-height: 128px;
  display: grid;
  align-content: space-between;
  gap: 1.5rem;
}
.color__nombre { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; }
.color__hex {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  opacity: .72;
}

.tipos { display: grid; gap: 1.25rem; }
.tipo {
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  padding: 1.35rem 1.5rem;
  display: grid;
  gap: .5rem;
}
.tipo__rol {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.tipo__muestra {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.05;
  margin: 0;
}
.tipo--lectura .tipo__muestra { font-family: var(--f-lectura); font-weight: 300; letter-spacing: -.01em; }
.tipo--ui .tipo__muestra { font-family: var(--f-ui); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 3.4vw, 2rem); }
.tipo__familia { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 700; }
.tipo__nota { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; max-width: 48ch; }

/* ------------------------------------------------------------- decisión */

.decision-caja {
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  background: var(--carbon-800);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.75rem;
  max-width: 720px;
  margin-inline: auto;
}

.decision-resumen {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
}
.decision-resumen__sello {
  width: 72px; height: 72px;
  border-radius: 3px;
  background: var(--hueso);
  display: grid;
  place-items: center;
  flex: none;
  padding: .55rem;
}
.decision-resumen__sello img { max-width: 100%; max-height: 100%; object-fit: contain; }
.decision-resumen h3 { margin: .2rem 0 0; font-family: var(--f-display); font-size: 1.5rem; }
.decision-resumen p { margin: .15rem 0 0; color: var(--texto-suave); font-size: var(--t-sm); }

.campo { display: grid; gap: .55rem; }
.campo label {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.campo textarea {
  font-family: var(--f-lectura);
  min-height: 108px;
  resize: vertical;
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 3px;
  border: 1px solid var(--carbon-700);
  background: var(--carbon-850);
  color: var(--texto);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.campo textarea::placeholder { color: var(--texto-tenue); }
.campo textarea:focus { border-color: var(--oro); outline: none; }

.decision-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
}

.aviso {
  display: flex;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: 3px;
  border: 1px solid rgba(216, 168, 72, .3);
  background: rgba(216, 168, 72, .07);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.aviso strong { color: var(--oro-claro); }

/* Éxito */
.exito { display: grid; gap: 1.25rem; justify-items: center; text-align: center; max-width: 560px; margin-inline: auto; }
.exito__marca {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(111, 191, 143, .12);
  border: 1px solid rgba(111, 191, 143, .4);
  color: var(--exito);
}
.exito__nota {
  border: 1px solid var(--carbon-700);
  border-radius: 3px;
  padding: .9rem 1.1rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  font-style: italic;
  width: 100%;
}

/* --------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(8, 9, 11, .78);
  backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal__caja {
  width: 100%;
  max-width: 440px;
  background: var(--carbon-800);
  border: 1px solid var(--carbon-700);
  border-radius: 4px;
  padding: 1.75rem;
  display: grid;
  gap: 1rem;
  box-shadow: var(--sombra-alta);
}
.modal__caja h3 { font-family: var(--f-display); font-size: 1.5rem; margin: 0; }
.modal__caja p { margin: 0; color: var(--texto-suave); font-size: var(--t-sm); }
.modal__acciones { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------------------------------------------------------- pie */

.pie {
  border-top: 1px solid var(--carbon-700);
  padding-block: 2.5rem 3rem;
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pie__marca { font-family: var(--f-display); font-size: 1.125rem; }
.pie__meta {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* -------------------------------------------------------- revelado suave */

.revelar {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  }
  .revelar.visible { opacity: 1; transform: none; }
}

.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================================
   Escena de aplicación, foco de cursor, lupa y avisos
   ========================================================================= */

.mockup-papel img {
  cursor: zoom-in;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.mockup-papel:hover img { transform: scale(1.015); }

/* ---------------------------------------- foco de cursor en las tarjetas */

.propuesta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              rgba(216, 168, 72, .18), transparent 68%);
}
.propuesta:hover::before,
.propuesta:focus-visible::before { opacity: 1; }

.propuesta__lienzo img {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.propuesta:hover .propuesta__lienzo img { transform: scale(1.04); }
.propuesta[aria-pressed='true'] .propuesta__lienzo img { transform: scale(1.02); }

/* -------------------------------------------------------------- la lupa */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 9, 11, .93);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lupa.visible { opacity: 1; pointer-events: auto; }
.lupa img {
  max-width: min(1120px, 94vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: var(--sombra-alta);
  transform: scale(.97);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.lupa.visible img { transform: scale(1); }
.lupa__pie {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.lupa__cerrar {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--carbon-600);
  background: rgba(16, 18, 22, .8);
  color: var(--texto);
  cursor: pointer;
}
.lupa__cerrar:hover { border-color: var(--oro); color: var(--oro-claro); }

/* ------------------------------------------------------- aviso flotante */

.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--carbon-600);
  background: rgba(21, 24, 29, .95);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-alta);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  transform: translate(-50%, 180%);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  max-width: calc(100vw - 2rem);
}
.aviso-flotante.visible { transform: translate(-50%, 0); }
.aviso-flotante__sello {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--hueso);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}
.aviso-flotante__sello img { width: 74%; height: 74%; object-fit: contain; }
.aviso-flotante kbd {
  font-family: var(--f-mono);
  font-size: .625rem;
  padding: .15em .4em;
  border-radius: 3px;
  border: 1px solid var(--carbon-600);
  color: var(--texto-tenue);
}

/* ----------------------------------------------------- pista de teclado */

.pista-teclado {
  display: none;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
@media (min-width: 900px) and (pointer: fine) {
  .pista-teclado { display: flex; }
}
.pista-teclado kbd {
  padding: .18em .45em;
  border-radius: 3px;
  border: 1px solid var(--carbon-700);
  color: var(--texto-suave);
}

/* --------------------------------------------------- ajustes responsive */

@media (max-width: 620px) {
  .seccion__cabecera--fila { grid-template-columns: 1fr; align-items: start; }
  .decision-acciones { flex-direction: column-reverse; }
  .decision-acciones .boton { width: 100%; }
  .visor-controles { gap: .4rem; }
  .visor-controles__grupo { width: 100%; }
  .acabado { flex: 1 1 auto; }
}

@media (hover: none) {
  .propuesta:hover { transform: none; }
  .propuesta:hover .propuesta__lienzo img { transform: none; }
  .mockup-papel:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mockup-papel img, .propuesta__lienzo img, .lupa img,
  .aviso-flotante { transition: none !important; }
  .propuesta::before { display: none; }
}