:root {
  color-scheme: light dark;

  /* light-dark() en vez de dos bloques: antes el modo oscuro repetia los catorce
     tokens dentro de un @media, y cambiar un color obligaba a acordarse del gemelo.
     Aca los dos valores viven en la misma linea y el interruptor de abajo es lo unico
     que decide cual se usa. Necesita color-scheme declarado, que ya estaba. */
  --bg: light-dark(#faf7fa, #141015);
  --panel: light-dark(#ffffff, #1c161e);
  --fg: light-dark(#2a1030, #f6ecf9);
  --muted: light-dark(#6a5273, #c2a8cb);
  --line: light-dark(#e2dae2, #372e39);
  --borde-boton: light-dark(#8c7a8c, #6b5f70);
  /* Indigo, en pareja con el fondo animado: el titulo usa luminosity y toma el tono
     del fondo, asi que un acento magenta contra un fondo indigo se peleaban.
     Medido: #3a2f8f da 9.96:1 sobre el fondo claro y el blanco encima 10.59:1.
     En oscuro el acento tiene que ser el gemelo claro, que llega a 5.18:1 sobre el
     vidrio; el rosa anterior se quedaba en 4.43 y no pasaba. */
  --accent: light-dark(#3a2f8f, #a9b2f0);
  --accent-hover: light-dark(#4f42b8, #c8cefb);
  --on-accent: light-dark(#ffffff, #12102e);
  --franja: light-dark(#2b2470, #171340);
  --franja-fg: #ffedcb;
  --franja-muted: #e5c9a4;
  --franja-line: light-dark(#4a4296, #2f2a68);
  /* ponytail-keep: tonos MEDIOS, no el casi-negro ni el casi-blanco que parecian
     los correctos. Con multiply el fondo modula la letra en proporcion a lo clara
     que sea: con #2a1030 la modulacion era del 16% y no se veia nada. Arrancando
     en un medio la modulacion sube a ~45%, y como multiply solo oscurece, el
     resultado vuelve a un tono seguro solo. En oscuro es igual con screen, que
     solo aclara: desde casi blanco modulaba 4%, desde un medio modula 50%. */
  --titulo-ini: light-dark(#232323, #ffffff);
  --titulo-fin: light-dark(#444444, #232323);
  /* El punto medio del degrade cambia por tema y light-dark() solo acepta
     colores, asi que viaja con las dos reglas de mix-blend-mode de abajo. */
  --titulo-medio: 60%;

  /* Vidrio. El efecto no es el desenfoque sino el canto de luz de arriba: sin el
     inset queda una tarjeta borrosa, no un vidrio. */
  --vidrio-alto: light-dark(rgb(255 255 255 / 60%), rgb(255 255 255 / 14%));
  --vidrio-bajo: light-dark(rgb(255 255 255 / 30%), rgb(255 255 255 / 4%));
  --vidrio-borde: light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 14%));
  --vidrio-canto: light-dark(rgb(255 255 255 / 96%), rgb(255 255 255 / 34%));
  --vidrio-sombra: light-dark(rgb(58 20 58 / 22%), rgb(0 0 0 / 62%));
  --vidrio-brillo: light-dark(rgb(255 255 255 / 78%), rgb(255 255 255 / 15%));
  --vidrio-interior: light-dark(rgb(255 255 255 / 52%), rgb(255 255 255 / 11%));
  --vidrio-foco: light-dark(rgb(255 255 255 / 92%), rgb(169 178 240 / 26%));
  --vidrio-lado: light-dark(rgb(255 255 255 / 60%), rgb(255 255 255 / 12%));
}

/* El interruptor de la lunita. Sin atributo manda el sistema, que es lo que hace
   light-dark() por su cuenta y sin JavaScript: por eso no hay parpadeo al cargar. */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ui-serif da New York en Apple y Georgia en Windows: contraste tipografico
   real sin cargar una sola webfont. */
h1, h2, h3 {
  font-family: "Crimson Pro", ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
}

.envoltorio {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
}

.angosto {
  max-width: 62ch;
}

section {
  padding: 72px 0;
}

section + section {
  border-top: 1px solid var(--line);
}

.seccion-titulo {
  margin-bottom: 12px;
}

.seccion-bajada {
  color: var(--muted);
  max-width: 58ch;
  margin-bottom: 36px;
}

/* La barra de navegacion se inyecta desde /assets/nav.js, con sus clases nav- propias. */

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 12px;
  /* Vidrio teñido, no vidrio transparente: es la llamada principal y con el
     vidrio puro perdia todo el peso contra los botones de al lado. */
  background:
    linear-gradient(155deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 4%) 60%),
    color-mix(in srgb, var(--accent) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 38%),
    inset 0 -1px 0 rgb(0 0 0 / 12%),
    0 12px 26px -14px var(--vidrio-sombra);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 240ms ease;
}

.boton:hover,
.boton:focus-visible {
  background:
    linear-gradient(155deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 6%) 60%),
    var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 48%),
    inset 0 -1px 0 rgb(0 0 0 / 12%),
    0 16px 32px -14px var(--vidrio-sombra);
}

.boton-suave {
  background: linear-gradient(155deg, var(--vidrio-alto), var(--vidrio-bajo) 72%);
  border-color: var(--vidrio-borde);
  color: var(--fg);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--vidrio-canto),
    inset 0 -1px 0 var(--vidrio-brillo),
    0 12px 26px -16px var(--vidrio-sombra);
}

.boton-suave:hover,
.boton-suave:focus-visible {
  background: linear-gradient(155deg, var(--vidrio-canto), var(--vidrio-alto) 72%);
  color: var(--accent);
}

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

/* Tarjetas de vidrio.
   .pasos li entra en la misma regla a proposito: vive en el CSS de la home y
   repetir aca la receta del vidrio era la forma segura de que las dos versiones
   se desincronizaran al primer retoque. */
.tarjeta,
.pasos li {
  position: relative;
  isolation: isolate;
  padding: 24px;
  border: 1px solid var(--vidrio-borde);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 12% -10%, var(--vidrio-interior), transparent 58%),
    linear-gradient(155deg, var(--vidrio-alto), var(--vidrio-bajo) 72%);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  box-shadow:
    inset 0 1px 0 var(--vidrio-canto),
    inset 1px 0 0 var(--vidrio-lado),
    inset -1px 0 0 var(--vidrio-lado),
    inset 0 -1px 0 var(--vidrio-brillo),
    0 22px 48px -26px var(--vidrio-sombra);
  transition: border-color 320ms ease, box-shadow 420ms ease;
}

/* La luz que sigue al puntero. Va en ::after porque ::before ya es el numero
   de .pasos li, y pisarlo borraba el contador de "Como trabajamos". */
.tarjeta::after,
.pasos li::after,
.marco-retrato::after,
.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    var(--vidrio-foco),
    transparent 64%);
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.tarjeta:hover::after,
.tarjeta:focus-within::after,
.pasos li:hover::after,
.marco-retrato:hover::after,
.boton:hover::after,
.boton:focus-visible::after {
  opacity: 1;
}

.tarjeta:hover,
.tarjeta:focus-within,
.pasos li:hover {
  box-shadow:
    inset 0 1px 0 var(--vidrio-canto),
    inset 1px 0 0 var(--vidrio-lado),
    inset -1px 0 0 var(--vidrio-lado),
    inset 0 -1px 0 var(--vidrio-brillo),
    0 34px 64px -24px var(--vidrio-sombra);
}

/* Los pasos: la grilla, el numero en circulo y la separacion vivian en el <style>
   de la home. Al hacer global el vidrio de .pasos li, en fotografia quedaban
   pegados uno al otro y con el numero decimal nativo afuera de la tarjeta. */
.pasos {
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: "Crimson Pro", ui-serif, "New York", Georgia, serif;
  font-size: 1.05rem;
}

.pasos strong {
  display: block;
  margin-bottom: 6px;
}

.pasos p {
  color: var(--muted);
  margin: 0;
  font-size: 0.97rem;
}

/* El fondo animado. Va detras de todo: el color de pagina pasa a <html> para que
   el body transparente lo deje ver. Sin eso el body tapaba el canvas en z-index -1. */
.con-aurora { background: var(--bg); }
.con-aurora body { background: transparent; }

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Respaldo cuando no hay WebGL2: manchas quietas con la misma paleta, sin grano.
   Es peor, pero deja las tarjetas con algo que refractar. */
.sin-aurora {
  background:
    radial-gradient(50% 45% at 22% 26%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(45% 42% at 80% 68%, color-mix(in srgb, var(--franja-fg) 16%, transparent), transparent 62%),
    var(--bg);
}

@media print {
  .aurora { display: none; }
}

.grilla-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.pie {
  border-top: 1px solid var(--line);
  padding: 32px 0 44px;
  color: var(--muted);
  font-size: 0.94rem;
}

.pie-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
}

/* Cuatro tarjetas de entrega: con el auto-fit de .grilla-3 caian 3 arriba y una
   huerfana abajo, que leia como un anexo en vez de como la cuarta pieza. */
.grilla-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 760px) {
  .grilla-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* El tiempo de entrega es el dato que tiene que saltar antes del titulo:
   es lo que distingue "lo construi" de "lo construi en seis dias". */
.entrega-cuando {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

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

.entrega p {
  color: var(--muted);
  margin: 0;
}

.clientes-nota {
  margin: 22px 0 0;
  max-width: 62ch;
  color: var(--muted);
}

/* La tarjeta de aportes no lleva plaqueta de tiempo a proposito: no es una entrega
   con plazo. Medido en el navegador, su titulo arrancaba 39px mas arriba que el de
   la tarjeta de al lado, y la fila entera se leia desalineada. */
.entrega > h3:first-child {
  margin-top: 39px;
}

/* ponytail-keep: este contenedor existe solo para recibir la perspective del giro.
   Puesta directamente en .hero, que era lo natural, .hero pasa a ser contexto de
   apilado y el mix-blend-mode del h1 deja de mezclarse con el canvas del fondo:
   el titulo se ve, pero el fondo ya no lo atraviesa y nadie nota por que. */
.marco-caja {
  display: inline-block;
  line-height: 0;
}

/* Marco de la foto del hero. El envoltorio existe porque un <img> no admite
   pseudo-elementos: sin el no hay ni bisel ni foco que siga al puntero. */
.marco-retrato {
  position: relative;
  isolation: isolate;
  display: inline-block;
  border-radius: 20px;
  padding: 7px;
  border: 1px solid var(--vidrio-borde);
  background:
    radial-gradient(120% 90% at 12% -10%, var(--vidrio-interior), transparent 58%),
    linear-gradient(155deg, var(--vidrio-alto), var(--vidrio-bajo) 72%);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    inset 0 1px 0 var(--vidrio-canto),
    inset 1px 0 0 var(--vidrio-lado),
    inset -1px 0 0 var(--vidrio-lado),
    0 26px 54px -24px var(--vidrio-sombra);
  transition: border-color 320ms ease, box-shadow 420ms ease;
}

.marco-retrato:hover {
  box-shadow:
    inset 0 1px 0 var(--vidrio-canto),
    inset 1px 0 0 var(--vidrio-lado),
    inset -1px 0 0 var(--vidrio-lado),
    0 38px 70px -22px var(--vidrio-sombra);
}

.marco-retrato img {
  display: block;
  border-radius: 14px;
}

/* Los botones tambien reaccionan: el foco necesita una caja propia y un contexto
   de apilado, porque su ::after va detras del texto. */
.boton {
  position: relative;
  isolation: isolate;
}

/* El titulo se veia plano contra tanto vidrio. El degrade le da la misma
   profundidad que el resto y no cuesta un pixel de imagen. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1,
  .seccion-titulo {
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(90deg,
      var(--titulo-ini) 16%,
      color-mix(in srgb, var(--titulo-fin) 58%, var(--titulo-ini)) var(--titulo-medio),
      var(--titulo-fin));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* ponytail-keep: luminosity, no color-burn. El fondo animado atraviesa las
       letras tomando su color, mientras la luminosidad la fija el token: por eso
       la letra cambia de tono con la mancha pero nunca se aclara. Con color-burn
       el resultado sale de 1-(1-fondo)/fuente, o sea que el fondo decide cuanto
       se ve: medido en claro daba 1.19:1 y el titulo quedaba rosa sobre rosa. */
    mix-blend-mode: luminosity;
  }

  /* Lo unico que cambia por tema es el punto medio del degrade: light-dark() solo
     acepta colores, asi que este par de reglas es la unica forma. */
  :root[data-tema="oscuro"] { --titulo-medio: 65%; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) { --titulo-medio: 65%; }
  }

  /* Los titulos de seccion son mas chicos: el degrade recorre menos para que se
     lea como color y no como un desvanecido. Los colores son los mismos tokens que
     el h1: antes esta regla usaba --fg y --accent por su cuenta, asi que lo que se
     ajustaba en el laboratorio no era lo que terminaba publicado. */
  /* ponytail-keep: fit-content. El h2 es un bloque y ocupa los 830px del contenedor,
     asi que un titulo corto solo pintaba el primer tramo del degrade: medido, entre
     el 14% y el 36% segun el largo del texto, y por eso unos se veian con transicion
     y otros planos. Encogido al texto, todos recorren el degrade entero. */
  .seccion-titulo {
    width: fit-content;
    max-width: 100%;
    background-image: linear-gradient(90deg,
      var(--titulo-ini) 30%,
      color-mix(in srgb, var(--titulo-fin) 62%, var(--titulo-ini)));
  }

  /* La franja de contacto tiene fondo violeta propio: ahi el degrade la dejaba
     ilegible y cualquier mezcla le come el crema. */
  .contacto .seccion-titulo,
  :root[data-tema="oscuro"] .contacto .seccion-titulo {
    background: none;
    color: var(--franja-fg);
    mix-blend-mode: normal;
  }
}

/* Laboratorio del titulo (assets/paleta.js). El icono vive discreto en el pie:
   se nota si lo buscas y no distrae si no. */
.paleta-caja {
  margin-top: 22px;
  text-align: center;
}

.paleta-icono {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease;
}

.paleta-icono:hover,
.paleta-icono:focus-visible {
  opacity: 1;
  transform: scale(1.12) rotate(-10deg);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .paleta-icono { transition: opacity 220ms ease; }
  .paleta-icono:hover { transform: none; }
}

.paleta-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: none;
  width: min(320px, calc(100vw - 36px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 16px 18px 18px;
  border: 1px solid var(--vidrio-borde);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--vidrio-canto),
    0 34px 70px -28px var(--vidrio-sombra);
  color: var(--fg);
  font-size: 0.85rem;
}

.paleta-panel.paleta-abierta { display: block; }

.paleta-cab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.paleta-cab strong { font-size: 0.95rem; }
.paleta-tema { margin-right: auto; color: var(--muted); font-size: 0.78rem; }

.paleta-cerrar {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.paleta-panel label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 11px;
  color: var(--muted);
}

.paleta-panel label em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.paleta-panel input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.paleta-panel input[type="color"] { width: 46px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }

.paleta-panel select {
  grid-column: 1 / -1;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
}

.paleta-pie { display: flex; gap: 8px; margin-top: 4px; }

.paleta-pie button {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--borde-boton);
  border-radius: 9px;
  background: none;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

.paleta-pie button:hover { border-color: var(--accent); color: var(--accent); }

.paleta-aviso { margin: 12px 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.45; }

@media print { .paleta-caja, .paleta-panel { display: none; } }