/* ==========================================================================
   Fuente — Baloo 2, self-hosted (antes Google Fonts CDN).
   Un solo archivo variable cubre 400/600/800 (subset "latin": U+0000-00FF +
   puntuación, alcanza para español + inglés, que es todo lo que usa el
   sitio — el subset "latin-ext" que Google manda además es para idiomas
   con diacríticos que acá no aparecen, así que no se descarga).
   Se auto-hosteó por dos motivos: performance (elimina 2 conexiones
   externas — fonts.googleapis.com + fonts.gstatic.com — y ~200-300ms de
   handshake antes de poder pintar texto) y privacidad (cargar fonts.gstatic.com
   manda la IP del visitante a Google en cada visita; en la UE eso requiere
   consentimiento GDPR que este sitio no pide en ningún lado).
   ========================================================================== */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-latin-variable.woff2") format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-latin-variable.woff2") format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-latin-variable.woff2") format('woff2');
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* Marca: negro carbón de fondo, naranja óxido para CTAs, turquesa apagado
     para hover/detalles. Tema único, sin variante clara. */
  --color-bg: #1a1a1a;
  /* Base bajo la capa del patrón: el tile es opaco y aclara, así que se
     arranca por debajo del carbón para terminar en #1a1a1a. Ver body::before. */
  --color-bg-under: #131416;
  --color-text: #f2f0ec;
  --color-text-muted: #9a9691;
  --color-cta: #c1502e;
  --color-cta-hover: #a3421f;
  --color-cta-rgb: 193, 80, 46;
  --color-accent: #4a8080;
  --color-accent-hover: #5c9a9a;
  --color-accent-rgb: 74, 128, 128;
  /* Variantes "-text": --color-cta y --color-accent dan 3.29:1 y 3.47:1
     sobre --color-card — de sobra para íconos/bordes (mínimo 3:1) pero por
     debajo del 4.5:1 que pide texto normal. Estas dos son la misma marca
     aclarada lo justo para pasar AA (4.57:1 y 4.61:1) y se usan SOLO donde
     el color pinta letras (precios, subtítulos, notas); títulos grandes,
     bordes e íconos se quedan en el tono original. */
  --color-cta-text: #cd7358;
  --color-accent-text: #679494;
  /* Celeste claro solo para los links del nav: el turquesa normal sobre el
     naranja de la pastilla da 1.47:1 (ilegible). Este llega a 5.17:1 sobre
     --color-nav-bg (21/09/2026, medido con axe-core; sobre el --color-cta
     original daba 3.64:1 y no pasaba AA). */
  --color-nav-active: #9ff0f0;
  /* La pastilla del nav NO usa --color-cta: sobre ese naranja ningún celeste
     distinguible del blanco llega a 4.5:1, así que el link de la página actual
     fallaba AA. Un escalón más oscuro (x0.8) deja pasar a los dos: celeste
     5.17:1 y blanco 6.70:1. Los botones CTA del resto del sitio se quedan en
     --color-cta. */
  --color-nav-bg: #9a4024;
  --color-cream: #f3e4c8;
  --color-carbon-soft: #2a2826;
  /* Carbón claro: superficie elevada para tarjetas que "flotan" sobre el
     fondo texturado. Se mantiene el tema oscuro único en vez de un panel
     crema, para no romper la paleta de texto ya definida.
     El alpha va en el color y NO como opacity del contenedor: así el texto
     de adentro se sigue pintando al 100% y no pierde nitidez. */
  --color-card: rgba(36, 36, 36, 0.88);
  --color-border: #2f2f2f;
  /* Rojo de "cerrado/error", ya en uso en .account__status--error y en
     /admin (.errorText, .smallButtonDanger) — mismo tono en todo el sitio
     en vez de inventar uno nuevo acá. AA sobre --color-card (~6.4:1). */
  --color-danger-text: #f87171;
  --color-danger-rgb: 248, 113, 113;
  /* Verde de "abierto/confirmado", mismo tono que ya usa /admin para
     "Payment confirmed" y el botón activo del toggle (#4ade80) — no se
     inventa uno nuevo acá tampoco. AA de sobra sobre --color-card (~9:1). */
  --color-success-text: #4ade80;
  --color-success-rgb: 74, 222, 128;

  /* Fallback antes de que script.js mida la altura real del header (dos
     cápsulas + separaciones); se recalcula en runtime y en cada resize. */
  --header-height: 104px;
  /* 19/08/2026: 1000px -> 1200px. El sitio esta en rem y el root font-size
     ya esta al 125%, pero el cuello de botella de legibilidad no era el
     tamano de letra sino el ancho: en el monitor del usuario (viewport de
     ~2400px CSS) el contenido ocupaba apenas el 42% de la pantalla. Los
     parrafos siguen topados por su propio max-width en ch, asi que la linea
     de texto no se alarga: lo que gana aire son las grillas y las imagenes.
     .container usa width:100% + max-width, asi que en pantallas chicas no
     cambia nada. */
  --container-width: min(1320px, 92vw);
  --radius: 10px;
  --transition: 0.2s ease;
  --transition-lift: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  /* Escala de timing: fast para feedback táctil (press/tap), lift para
     hovers (ya existía), slow para entradas grandes de contenido. Misma
     curva "ease-out" en todas — acelera fuerte al arrancar y frena suave,
     que es lo que se lee como "fluido" en vez de mecánico. */
  --transition-fast: 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  --font-family: 'Baloo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Transición nativa entre documentos (Chrome/Edge): navegar entre páginas
   (index → comms → tos, etc.) hace un cross-fade en vez del corte seco de
   una navegación normal. Es progressive enhancement puro — sin soporte
   (Firefox/Safari a la fecha), el navegador simplemente ignora la regla y
   navega como siempre, sin romper nada. */
@view-transition {
  navigation: auto;
}

/* prefers-reduced-motion: apaga entradas, hover-lift y la view-transition
   para quien pidió menos movimiento, sin tocar los estilos base. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  @view-transition {
    navigation: none;
  }
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--color-text);
  /* 1.5 -> 1.6: más aire entre líneas, menos esfuerzo para seguir el
     renglón en párrafos largos (mismo pedido de legibilidad). */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Sin background-color propio a propósito: el color base lo pone <html>.
     Si el body tuviera fondo opaco taparía a body::before, porque en el
     stacking context raíz el fondo de un bloque en flujo se pinta DESPUÉS
     de los descendientes con z-index negativo. */
  background-color: transparent;
}

/* Textura de fondo: el patrón de cabezas + huellas, tileado. Va en una capa
   fija aparte (no en background-image del body) para poder bajarle opacidad
   y recolorearlo sin tocar el contenido que va encima.

   El tile es opaco y su marrón base (#7a6e5a) cubre el 59%, así que al
   componerlo SUMA luz al fondo. Por eso la base va en --color-bg-under
   (más oscura que el carbón) calculada para que, con este opacity y este
   filter, el campo marrón del patrón aterrice justo en #1a1a1a:
     0.10 * (122,110,90)*0.7 + 0.90 * (19,20,22) ≈ (26,26,26)
   Los motivos claros del tile suben hasta ~#202020, que es la textura que
   se ve. Al 10% ningún píxel del fondo llega al brillo de las tarjetas
   (#242424), así que siguen siendo la superficie más clara y no pierden
   separación; al 12% un 0.23% de los píxeles las superaba.

   Sin hue-rotate a propósito: los acentos del patrón ya son naranja óxido
   y turquesa (la paleta del sitio), rotar el tono los sacaría de ella. */
html {
  background-color: var(--color-bg-under);
  scroll-behavior: smooth;
  /* Base subida de 16px a ~17px el 16/08/2026 (feedback: "hago mucha fuerza
     de vista para leerlo"), después a 138% el 17/08/2026 porque seguía baja.
     Bajada a 125% el 17/08/2026 a pedido del usuario: 138% quedó demasiado
     grande (16px -> 20px). Todo el sitio está en rem, así que este único
     cambio escala cada tamaño de texto proporcionalmente sin tener que tocar
     reglas una por una. */
  /* 19/08/2026 — escala fluida. Estaba fijo en 125% (20px), que se calibro
     contra un monitor de 2400px CSS: en una pantalla de 1920x1080 normal el
     sitio se veia con zoom. Ahora el cuerpo crece con el ancho entre 17px y
     20px y deja de depender de en que monitor se calibro.
     El minimo de 1rem del clamp evita romper el zoom del navegador. */
  font-size: clamp(16px, 0.62rem + 0.36vw, 19px);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/background.webp");
  background-repeat: repeat;
  opacity: 0.10;
  filter: brightness(0.7) saturate(1.25);
}

h1, h2, h3, h4, p, ul, ol {
  margin: 0 0 1rem 0;
}

/* Escala de pesos — Baloo 2 se carga SOLO en 400/600/800, así que ningún
   valor fuera de esos tres debe usarse: el navegador lo redondearía o
   fabricaría un bold sintético (letras deformadas). La regla explícita
   sobre los títulos evita justamente eso, porque el default de <h1>-<h4>
   es "bold" (700), un peso que no existe en la familia.
     800 → títulos y wordmark    600 → subtítulos, botones y links
     400 → cuerpo de texto (body) */
h1, h2, h3, h4 {
  font-weight: 800;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

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

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--lg {
  width: 28px;
  height: 28px;
}

/* Every section anchor sits below the fixed header */
/* ==========================================================================
   Skip link — primer foco del documento
   ========================================================================== */
/* Fuera de pantalla hasta que se lo enfoca: con 6 links de nav y una galería
   de botones, llegar al contenido con teclado era una tabulación larga.
   Blanco sobre --color-cta es el mismo par ya validado en .pill__link (4.71:1). */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: 1000;
  padding: 0.6rem 1.2rem;
  background: var(--color-nav-bg);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0 0 0.75rem 0.75rem;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--color-nav-active);
  outline-offset: 2px;
}

/* El destino recibe el foco por tabIndex=-1; no hace falta anillo ahí. */
main:focus {
  outline: none;
}

/* ==========================================================================
   Header — cápsula doble
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.6rem 0;
  /* Nombre estable: en la view-transition entre páginas el header (mismo
     markup en todas) se mantiene fijo en vez de cross-fadear con el resto,
     así la navegación se siente como si la cápsula "quedara puesta" y solo
     cambiara el contenido de abajo. */
  view-transition-name: site-header;
}

.header__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pill {
  width: 100%;
  border-radius: 999px;
  box-sizing: border-box;
}

/* Barra 1 — marca */
.pill--brand {
  display: block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 0.55rem 1.25rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Barra 2 — navegación: Home / Comms / ToS centrados, con wrap de
   seguridad por si el texto crece en pantallas muy angostas. */
.pill--nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 0.9rem;
  background: var(--color-nav-bg);
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
}

/* Blanco y no el gris apagado de siempre: sobre el naranja de la pastilla
   ese gris queda en 1.60:1, ilegible. El blanco da 6.70:1 sobre
   --color-nav-bg (4.71:1 sobre el --color-cta que había antes). */
.pill__link {
  font-weight: 600;
  font-size: 0.8rem;
  color: #fff;
  padding: 0.2rem 0.3rem;
  white-space: nowrap;
  transition: color var(--transition);
}

.pill__link:hover,
.pill__link:focus-visible,
.pill__link.is-active {
  /* Celeste contra el naranja de la pastilla, para que el link de la página
     actual se despegue del resto. */
  color: var(--color-nav-active);
}

.pill__link:focus-visible {
  outline: 2px solid var(--color-nav-active);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
  padding: 4rem 0;
}

.section__title {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.section__lead {
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 2rem;
}

main {
  padding-top: calc(var(--header-height) + 1rem);
}

/* Hero — tarjeta flotante de dos columnas */
.section--hero {
  padding: 2rem 0 3rem;
}

.hero-card {
  background: var(--color-card);
  border-radius: 2rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(var(--color-accent-rgb), 0.08);
  /* Entrada suave: cubre tanto la carga inicial de cada página como el
     reveal del bloque NSFW al confirmar el age-gate (arranca con display:none
     vía [hidden], así que la animación corre recién cuando se muestra). */
  animation: card-in 0.5s var(--transition-lift) both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll reveal — clase agregada por script.js (ver IntersectionObserver);
   sin JS o sin soporte el contenido nunca queda en opacity:0, porque la
   clase que lo esconde la pone el propio script que después lo revela. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--transition-lift), transform 0.5s var(--transition-lift);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Centrado (16/08/2026, referencia: puprenn.carrd.co) — la columna de texto
   queda centrada dentro de su propio espacio en vez de pegada al borde
   izquierdo, incluso al lado de la imagen en el layout de 2 columnas de
   escritorio (el ancho de columna no cambia, solo cómo se alinea el
   contenido adentro). El párrafo del bio mantiene su max-width en ch para
   legibilidad — ver .hero__bio — pero ahora centrado con margin auto en
   vez de pegado a la izquierda. */
.hero-card__col--text {
  text-align: center;
}

/* Cascada de entrada: cada hijo directo de la columna de texto (badge,
   wordmark, tagline, bio, boundaries, CTA) entra con un delay creciente
   en vez de aparecer todos de golpe con la card. Se anima por encima de la
   animation de .hero-card (que ya mueve toda la tarjeta) — el resultado es
   que el texto "se asienta" mientras la tarjeta todavía está subiendo,
   sensación de cascada en vez de un solo bloque estático. */
.hero-card__col--text > * {
  animation: content-in 0.5s var(--transition-lift) both;
}

.hero-card__col--text > *:nth-child(1) { animation-delay: 0.08s; }
.hero-card__col--text > *:nth-child(2) { animation-delay: 0.15s; }
.hero-card__col--text > *:nth-child(3) { animation-delay: 0.22s; }
.hero-card__col--text > *:nth-child(4) { animation-delay: 0.29s; }
.hero-card__col--text > *:nth-child(5) { animation-delay: 0.36s; }
.hero-card__col--text > *:nth-child(6) { animation-delay: 0.43s; }

.hero-card__col--image {
  animation: content-in var(--transition-slow) both;
  animation-delay: 0.2s;
}

@keyframes content-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__wordmark {
  color: var(--color-cta);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.hero__tagline {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.hero__bio {
  color: var(--color-text-muted);
  font-size: 1rem;
  /* ~62 caracteres por línea — por fuera del rango cómodo de lectura
     (45-75ch) el texto se volvía difícil de seguir en la columna ancha
     del layout de escritorio. margin auto lo centra dentro de la columna
     ya centrada (el max-width por sí solo no alcanza: un bloque con
     width:auto se pega al borde izquierdo del contenedor salvo que se le
     pidan márgenes automáticos). */
  max-width: 62ch;
  margin: 0 auto 1rem;
}

.hero__boundaries {
  color: var(--color-accent-text);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.pill--action {
  background: var(--color-carbon-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), transform var(--transition-lift), box-shadow var(--transition-lift);
}

.pill--action:hover,
.pill--action:focus-visible {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.pill--action:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--transition-fast);
}

/* Pill lleno — CTA principal (home → comms.html), fondo sólido naranja
   óxido en vez del outline sutil de .pill--action. */
.pill--cta {
  display: inline-block;
  background: var(--color-cta);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition-lift), box-shadow var(--transition-lift);
}

.pill--cta:hover,
.pill--cta:focus-visible {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--color-cta-rgb), 0.35);
}

.pill--cta:active {
  transform: scale(0.98);
  box-shadow: none;
  transition-duration: var(--transition-fast);
}

/* Badge de estado de comisiones — controlado desde script.js */
.hero__badge {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem 0;
}

/* Punto de estado — mismo color que el texto (currentColor), así
   blinkea junto con .hero__badge-text sin tocar el JS. */
.hero__badge-text::before {
  content: "\25CF  ";
}

.hero__badge.is-open .hero__badge-text {
  color: var(--color-success-text);
  display: inline-block;
  animation: badge-blink 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Lista de espera: ni el verde urgente de "abierto" ni el rojo de
   "cerrado" — turquesa fijo, sin blink (el pulso es para "hay lugar
   ya mismo", acá el mensaje es "hay cola pero se puede sumar"). */
.hero__badge.is-waitlist .hero__badge-text {
  color: var(--color-accent-text);
}

.hero__badge.is-closed .hero__badge-text {
  color: var(--color-danger-text);
}

/* Pulso del punto de "comisiones abiertas": antes era un parpadeo plano de
   opacidad; con una curva ease-in-out simétrica y un scale muy sutil se
   lee más como un "latido" que como un blink mecánico. El scale va en el
   span completo (no solo el ::before) para no desalinear el texto. */
@keyframes badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.99); }
}

/* Ilustración del hero — caja cuadrada de borde turquesa. Va SIN fondo
   propio a propósito: el GIF tiene índice transparente, así que por
   detrás del personaje se ve el carbón de la tarjeta. */
.hero-avatar {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--color-accent);
  border-radius: 1.5rem;
  background: transparent;
}

/* contain y no cover: el GIF no es cuadrado (138x132) y con cover se
   recortarían las patas de los costados.
   pixelated porque el GIF es pixel art chico y acá se AMPLÍA ~2.4x
   (138 → 320): con el suavizado por defecto los píxeles salen borrosos. */
.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition-lift), box-shadow var(--transition-lift);
}

.btn:active {
  transform: scale(0.98);
  transition-duration: var(--transition-fast);
}

.btn--primary {
  background: var(--color-cta);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--color-cta-rgb), 0.35);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  transform: translateY(-2px);
}

.btn--outline-cta {
  background: transparent;
  border: 2px solid var(--color-cta);
  color: var(--color-cta-text);
}

.btn--outline-cta:hover,
.btn--outline-cta:focus-visible {
  background: var(--color-cta);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--color-cta-rgb), 0.35);
}

/* Fila de íconos circulares — hoy solo la usa el footer */
.icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.icon-circle {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.icon-circle .icon {
  width: 22px;
  height: 22px;
}

.icon-circle:hover,
.icon-circle:focus-visible {
  transform: scale(1.1);
  background: var(--color-accent-hover);
  box-shadow: 0 0 0 2px rgba(var(--color-cta-rgb), 0.55), 0 0 20px rgba(var(--color-cta-rgb), 0.5);
}

.icon-circle:active {
  transform: scale(1.02);
  transition-duration: var(--transition-fast);
}

/* Nota corta propia del tipo de contenido (sfw-tos.html / nsfw-tos.html),
   antes de la comparación sí/no hago. */
.tos-block-note {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  max-width: 58ch;
  margin: 0 auto 1.25rem;
}

/* Tarjeta intro de Commissions — mismo lenguaje visual que .sheet-card y
   .age-gate (título + texto corto centrados); antes quedaba a la izquierda,
   la única de las tres tarjetas "intro" del sitio con esa alineación. */
.commissions-card {
  text-align: center;
  margin-bottom: 2.5rem;
}

.commissions-card__title {
  margin-bottom: 0.5rem;
}

.commissions-card__text {
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.commissions-card__actions {
  margin-left: auto;
  margin-right: auto;
}

/* Commission sheet — tarjeta interna de cada bloque SFW/NSFW */
.sheet-card {
  text-align: center;
}

/* Acceso al sheet NSFW desde comms.html: pill naranja arriba de todo,
   antes del título. Se centra solo por el text-align de .sheet-card;
   el width:auto pisa el 100% que trae .pill. */
.sheet-card__nsfw {
  margin-bottom: 2rem;
}

.sheet-card__nsfw .pill--cta {
  width: auto;
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 2.25rem;
}

.sheet-card__title {
  color: var(--color-cta);
  font-size: 1.65rem;
  margin-bottom: 0.35rem;
}

.sheet-card__subtitle {
  color: var(--color-accent-text);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Lista de notas — bloque centrado, texto interno alineado a la izquierda
   del guion para que se lea natural. */
.sheet-notes {
  max-width: 40ch;
  margin: 0 auto 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.sheet-notes li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--color-accent-text);
  font-size: 0.9rem;
}

.sheet-notes li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.sheet-notes li.sheet-notes__item--muted {
  color: var(--color-text-muted);
}

/* Tablas por técnica — una debajo de otra */
.technique-tables {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.technique-table__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 800;
  padding-bottom: 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-cta);
}

.technique-table__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(var(--color-cta-rgb), 0.25);
}

.technique-table__row:last-child {
  border-bottom: none;
}

.technique-table__size,
.technique-table__price {
  color: var(--color-accent-text);
  font-weight: 600;
}

/* Examples */
.sheet-card__section-title {
  color: var(--color-cta-text);
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0 0 2rem;
}

.example-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.example-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-accent);
  border-radius: 1rem;
  background: rgba(var(--color-accent-rgb), 0.06);
  color: var(--color-text-muted);
  overflow: hidden;
  /* Hover del marco (ver .example-item:hover más abajo): mismo timing que
     el resto del sitio, borde/sombra apenas más presentes. */
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Piezas reales (foto/ilustración) llenan el marco recortando por el centro;
   los íconos SVG placeholder (secciones sin arte todavía) se centran solos
   dentro del mismo marco gracias al flex de .example-thumb, sin necesitar
   una regla aparte. */
.example-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-lift);
}

/* Hover/foco en la imagen de ejemplo (16/08/2026, pedido explícito: "una
   animación leve que sume pero no que reste") — zoom sutil de la imagen +
   el marco se ilumina un poco, mismo patrón que ya usan los íconos de
   redes (.icon-circle:hover) pero con una escala bastante más chica
   porque acá el elemento es mucho más grande y una foto que salta 10%
   se siente brusca en vez de prolija. */
.example-item:hover .example-thumb,
.example-item:focus-within .example-thumb {
  border-color: var(--color-cta);
  box-shadow: 0 0 0 1px rgba(var(--color-cta-rgb), 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.example-item:hover .example-thumb img,
.example-item:focus-within .example-thumb img {
  transform: scale(1.05);
}

/* Pixelart: sprite chico, se muestra completo (sin recortar) y sin blur de
   escalado — el resto de los thumbs usa fotos/ilustraciones grandes donde
   recortar no pierde el sujeto, pero un sprite de pocos px sí lo perdería. */
.example-thumb--pixel img {
  object-fit: contain;
  image-rendering: pixelated;
  padding: 0.75rem;
}

/* Pixelart — mismo lenguaje visual que .example-grid, pero en fila flex
   centrada en vez de grid de 3 columnas fijas: con 1-2 piezas, un grid de
   3 columnas las deja pegadas a la izquierda con una celda vacía. El ancho
   de cada item se calcula igual que en .example-grid (contenedor menos los
   2 gaps de 0.75rem, dividido 3) para que el thumb quede exactamente del
   mismo tamaño que los de Examples arriba — antes tenían un tope de 9rem
   propio y salían visiblemente más chicos. */
.example-grid--pixel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.example-grid--pixel .example-item {
  width: 100%;
  max-width: calc((100% - 1.5rem) / 3);
}

.example-item figcaption {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Reference sheet — misma pieza, formato horizontal */
.reference-sheet {
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.reference-sheet__thumb {
  width: 100%;
  /* 17/08/2026: era 21/9 (2.333), heredado de cuando acá había un placeholder
     abstracto. Las dos hojas reales (SFW y NSFW) son 1400x942 = 1.486, así que
     con object-fit:cover el marco recortaba ~36% de la altura, arriba y abajo:
     en una hoja de referencia eso se come turnaround, paleta y anotaciones,
     que es justamente la información que la pieza tiene que mostrar.
     Se usa el ratio exacto del arte para que no recorte ni deje barras; si
     alguna vez entra una hoja con otra proporción, actualizar este valor. */
  aspect-ratio: 1400 / 942;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-accent);
  border-radius: 1rem;
  background: rgba(var(--color-accent-rgb), 0.06);
  color: var(--color-text-muted);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.reference-sheet__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-lift);
}

/* Mismo hover leve que .example-item, ver comentario ahí. */
.reference-sheet:hover .reference-sheet__thumb,
.reference-sheet:focus-within .reference-sheet__thumb {
  border-color: var(--color-cta);
  box-shadow: 0 0 0 1px rgba(var(--color-cta-rgb), 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.reference-sheet:hover .reference-sheet__thumb img,
.reference-sheet:focus-within .reference-sheet__thumb img {
  transform: scale(1.05);
}

.reference-sheet figcaption {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Testimonios — agradecimientos reales de Telegram, sin nombre ni avatar
   (los DM 1 a 1 de Telegram no muestran el nombre del cliente en la burbuja).
   Mismo lenguaje visual que .example-thumb (borde turquesa, radio grande)
   pero con blockquote real en vez de placeholder. */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0 0 2.5rem;
  text-align: left;
}

.testimonial-card {
  margin: 0;
  background: rgba(var(--color-accent-rgb), 0.06);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}

.testimonial-card__quote {
  margin: 0 0 0.5rem;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.testimonial-card__quote::before {
  content: "\201C";
  color: var(--color-accent-text);
  font-weight: 800;
}

.testimonial-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Bloque compacto — métodos de pago + proceso */
.sheet-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: left;
}

.sheet-info__title {
  color: var(--color-cta-text);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.payment-methods__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  font-size: 0.9rem;
}

/* --color-accent-text esta calibrado contra el carbon liso (#1a1a1a, 5.17:1);
   la tarjeta de metodos de pago es mas clara (#262b2b) y ahi el mismo tono cae
   a 4.27:1, por debajo de AA. --color-accent-on-tint existe justamente para
   eso y da 4.73:1 sobre este fondo (medido con axe-core el 21/09/2026). */
.payment-methods__name {
  color: var(--color-accent-on-tint);
  font-weight: 600;
}

.payment-methods__note {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.payment-methods__item.is-unavailable .payment-methods__name {
  text-decoration: line-through;
  opacity: 0.6;
}

.payment-methods__item.is-unavailable .payment-methods__note {
  color: var(--color-cta-text);
}

.process-list {
  list-style: decimal;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-accent-text);
  margin-bottom: 0.9rem;
}

/* El ::marker cuelga de cada <li> (es el que tiene display: list-item),
   no del <ol> — apuntarlo a .process-list directamente no aplica nada. */
.process-list li::marker {
  color: var(--color-cta-text);
  font-weight: 800;
}

.process-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-cta);
  padding-left: 0.6rem;
  margin: 0;
}

/* Age gate (NSFW) — va sobre .hero-card, así que hereda fondo, radio,
   padding y sombra: acá solo se centra el contenido. */
.age-gate {
  text-align: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Clase que agrega script.js al confirmar 18+: cross-fade de salida antes
   de que el gate se oculte y aparezca el contenido (que ya trae su propia
   entrada via la animation de .hero-card). */
.age-gate--leaving {
  opacity: 0;
  transform: scale(0.98);
}

.age-gate__text {
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

/* ToS — lista de reglas con bullet propio (zarpazo) + separador */
.tos-rules {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 2rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.tos-rules li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9rem;
}

.tos-rules__bullet {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--color-accent);
}

/* Separador de guiones entre las dos listas de reglas — texto, no <hr> */
.tos-divider {
  text-align: center;
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  opacity: 0.6;
  margin: -0.5rem 0 1.5rem;
}

/* Política de reembolso */
.tos-refund {
  margin: 0 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: left;
}

.tos-refund__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tos-refund__list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.tos-refund__pct {
  flex-shrink: 0;
  min-width: 3.2rem;
  color: var(--color-cta-text);
  font-weight: 800;
}

/* Comparación sí hago / no hago — reutiliza el grid de .sheet-info */
.tos-compare__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tos-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.tos-compare__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.tos-compare__list--yes li {
  color: var(--color-accent-text);
}

.tos-compare__list--no li {
  color: var(--color-text-muted);
}

.tos-compare__list--no .tos-compare__icon {
  color: var(--color-cta);
}

.tos-footnote {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 55ch;
  margin: 0 auto 2.5rem;
}

/* Footer */
.footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.footer .icon-row {
  margin-bottom: 1.5rem;
}

/* Wordmark del footer — misma pastilla turquesa que el header, pero
   centrada y de ancho ajustado al contenido en vez de ocupar toda la fila. */
.pill--brand.footer__brand {
  display: inline-block;
  width: auto;
  text-align: center;
  margin: 0 auto 1.75rem;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition-lift), border-color var(--transition), color var(--transition);
  z-index: 90;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-3px);
}

.back-to-top.is-visible:active {
  transform: translateY(0) scale(0.94);
  transition-duration: var(--transition-fast);
}

/* ==========================================================================
   Breakpoint: tablet / desktop
   ========================================================================== */
@media (min-width: 768px) {
  .header {
    padding: 0.85rem 0;
  }

  .header__inner {
    gap: 0.5rem;
  }

  .pill--brand {
    font-size: 1.2rem;
    padding: 0.65rem 1.5rem;
  }

  .pill--nav {
    gap: 2rem;
    padding: 0.6rem 1rem;
  }

  .pill__link {
    font-size: 0.9rem;
  }

  .hero-card {
    padding: 3rem;
  }

  .hero-card__grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 3rem;
  }

  .hero__wordmark {
    font-size: 4.5rem;
  }

  .hero__bio {
    font-size: 1.1rem;
  }

  .hero__actions {
    max-width: 320px;
  }

  .sheet-info {
    grid-template-columns: 1fr 1fr;
  }

  .section {
    padding: 6rem 0;
  }

  .icon-circle {
    width: 60px;
    height: 60px;
  }

  .icon-circle .icon {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   Galería rotativa (19/08/2026)
   Cada marco cicla entre piezas de SU categoría: el de bust-up entre
   bust-ups, el de fullbody entre fullbodies. El epígrafe queda fijo porque
   todas las piezas del marco son lo mismo — así la sección muestra variedad
   de UN producto, que es lo que mira alguien decidiendo si lo encarga.
   Es CSS puro: sin JS, sin timers y sin reflow (sólo cambia opacity).
   ========================================================================== */
.example-rot {
  display: grid;
  width: 100%;
  height: 100%;
}

/* Todas las piezas ocupan la misma celda del grid y se turnan por opacidad.
   Con position:absolute haría falta un alto fijo; con grid, el alto lo pone
   el marco y no hay que mantener un número aparte. */
.example-rot__slide {
  grid-area: 1 / 1;
  opacity: 0;
  animation: example-swap 15s ease-in-out infinite;
  animation-delay: var(--rd, 0s);
}

@keyframes example-swap {
  0%, 1% { opacity: 0; }
  5%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

/* Se frena cuando el visitante se para encima o llega con el teclado: si está
   mirando una pieza, cambiársela es exactamente lo que no hay que hacer. */
.example-item:hover .example-rot__slide,
.example-item:focus-within .example-rot__slide {
  animation-play-state: paused;
}

/* El marco pasó a ser <button> para abrir el lightbox y ser alcanzable por
   teclado; hay que apagarle los estilos propios del botón. */
button.example-thumb,
button.reference-sheet__thumb {
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

button.example-thumb:focus-visible,
button.reference-sheet__thumb:focus-visible {
  outline: 2px solid var(--color-nav-active);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento se muestra la primera pieza de cada marco, fija. Hace falta
     decirlo explícito: el bloque global sólo acorta la duración, y con una
     animación que termina en opacity:0 eso dejaría todo invisible. */
  .example-rot__slide { animation: none; opacity: 0; }
  .example-rot__slide:first-child { opacity: 1; }
}

/* ==========================================================================
   Lightbox
   Los marcos recortan a cuadrado: sin esto el visitante nunca ve la pieza
   entera. Entra lento y desacelerando; sale rápido y acelerando — igualar
   las dos duraciones es lo que hace que una interfaz se sienta pesada.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 10, 10, 0.94);
  animation: lightbox-in 0.42s cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

.lightbox[hidden] { display: none; }

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox--leaving {
  animation: lightbox-out 0.16s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes lightbox-out { to { opacity: 0; } }

.lightbox__figure {
  margin: 0;
  max-width: min(100%, 1100px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  animation: lightbox-zoom 0.42s cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

@keyframes lightbox-zoom {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: none; }
}

.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  border-radius: 1rem;
  border: 2px solid var(--color-accent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox__caption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.lightbox__btn {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), transform var(--transition-lift);
}

.lightbox__btn:hover { border-color: var(--color-cta); }
.lightbox__btn:focus-visible { outline: 2px solid var(--color-nav-active); outline-offset: 3px; }

.lightbox__btn--close { top: 1.25rem; right: 1.25rem; }
.lightbox__btn--close:hover { transform: rotate(90deg); }
.lightbox__btn--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__btn--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next:hover { transform: translateY(-50%) translateX(3px); }

/* Bloquea el scroll del fondo mientras el lightbox está abierto. El lugar de
   la barra que desaparece lo conserva el `scrollbar-gutter` de `html`. */
html.has-lightbox { overflow: hidden; }

/* Al pasar de pieza con las flechas la imagen se reemplaza por un nodo
   nuevo, así que la animación corre en cada cambio y no solo al abrir. */
.lightbox__stage img { animation: img-fade var(--dur-base) var(--ease-decel) both; }

/* ==========================================================================
   Brief de encargo (brief.html, 19/08/2026)
   El embudo terminaba en "Contact via Telegram": el cliente abría un chat sin
   saber qué decir y la artista pedía lo mismo una y otra vez. Este formulario
   arma el mensaje y calcula un estimado con los mismos precios del sheet.
   Sin backend: nada sale del navegador hasta que el cliente copia y pega.
   ========================================================================== */
.brief {
  text-align: left;
  max-width: 46rem;
  margin: 0 auto;
}

.brief__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .brief__grid { grid-template-columns: 1fr 1fr; }
  .brief__field--wide { grid-column: 1 / -1; }
}

.brief__field { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.brief__label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cta-text);
}

.brief__input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-carbon-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.brief__input:hover { border-color: var(--color-accent); }

.brief__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.45);
}

textarea.brief__input { resize: vertical; min-height: 3rem; }

.brief__choices { display: flex; flex-wrap: wrap; gap: 1rem; }

.brief__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}

.brief__choice input { accent-color: var(--color-cta); width: 1.05rem; height: 1.05rem; }

.brief__hint { font-size: 0.8rem; color: var(--color-text-muted); }

/* Oculta los campos que no aplican al tipo elegido. Con [hidden] alcanza:
   display:none saca el campo del formulario para el lector de pantalla
   además de para la vista, que es lo correcto acá. */
.brief__field[hidden] { display: none; }

.brief__estimate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-cta);
  border-radius: var(--radius);
  background: rgba(var(--color-cta-rgb), 0.07);
  margin-bottom: 0.9rem;
}

.brief__estimate-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.brief__estimate-value {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-cta-text);
  font-variant-numeric: tabular-nums;
}

.brief__estimate-note { font-size: 0.82rem; color: var(--color-text-muted); }

.brief__disclaimer { margin-bottom: 1.75rem; }

.brief__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }

.brief__status { min-height: 1.4rem; font-size: 0.85rem; color: var(--color-accent-text); margin: 0 0 1rem; }

.brief__label--output { display: block; margin-bottom: 0.4rem; }

.brief__output {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85rem;
  resize: vertical;
}

.brief__output:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.45);
}

/* ==========================================================================
   Cuenta de cliente (09/09/2026) — login/registro/historial en /cuenta.
   Mismos tokens que .brief__* (no existía nada parecido a un form de cuenta
   en static-site, así que es vocabulario nuevo, pero calcado del de arriba
   para no introducir un estilo distinto).
   ========================================================================== */
.account {
  text-align: left;
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.account__field { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.account__label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cta-text);
}

.account__input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-carbon-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.account__input:hover { border-color: var(--color-accent); }

.account__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.45);
}

.account__hint { font-size: 0.8rem; color: var(--color-text-muted); }
.account__status { min-height: 1.4rem; font-size: 0.85rem; color: var(--color-accent-text); margin: 0; }
.account__status--error { color: var(--color-danger-text); }

/* Login social (09/09/2026) — separador entre el botón de Google y el
   formulario de email/contraseña. */
.account__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.account__divider::before,
.account__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.account__oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.account__list { display: flex; flex-direction: column; gap: 0.75rem; }

.account__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.account__row-what { font-weight: 700; }
.account__row-meta { font-size: 0.85rem; color: var(--color-text-muted); }

/* ==========================================================================
   Estado de la cola en las price sheets (19/08/2026)
   El badge vivía sólo en el Home: si la cola se cerraba, las sheets seguían
   invitando a encargar y el sitio se contradecía a sí mismo. Las tres páginas
   leen ahora la misma constante COMMISSIONS_STATUS de script.js.
   ========================================================================== */
.commission-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.55rem 1.35rem;
  margin: 0 auto 1.75rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.commission-status[hidden] { display: none; }

.commission-status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.commission-status.is-open {
  background: rgba(var(--color-success-rgb), 0.14);
  border-color: var(--color-success-text);
  color: var(--color-success-text);
}

/* Sólo late cuando está abierta: es la única de las tres que pide acción. */
.commission-status.is-open .commission-status__dot {
  animation: badge-blink 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.commission-status.is-waitlist {
  background: rgba(var(--color-accent-rgb), 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.commission-status.is-closed {
  background: rgba(var(--color-danger-rgb), 0.14);
  border-color: var(--color-danger-text);
  color: var(--color-danger-text);
}

/* Un control deshabilitado tiene que leerse inerte ANTES de que lo toquen:
   pierde la sombra y el lift, no sólo el color. */
.btn[aria-disabled="true"] {
  background: var(--color-carbon-soft);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Marca 18+ en el "I do" del ToS SFW: la artista sí dibuja gore y vore, pero
   se encargan por el sheet NSFW. Sin esta marca, una página sin age gate que
   se declara "SFW and mild suggestive" se contradiría sola. */
.tos-compare__18 {
  display: inline-block;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: var(--color-cta);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.45rem;
  vertical-align: 1px;
  transition: background var(--transition);
}

.tos-compare__18:hover,
.tos-compare__18:focus-visible { background: var(--color-cta-hover); }

.sheet-extra-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: -1.5rem auto 2.5rem;
}


/* ==========================================================================
   OPCION C — 19/08/2026
   La direccion que eligio el artista, aplicada sobre el markup existente.
   Tres reglas la sostienen fuera del Home:
     1. Capsula para el chrome, rectangulo redondeado para la obra. El circulo
        queda solo para el avatar (es una cara); un fullbody en circulo se
        recorta a la cintura y una hoja de referencia pierde el turnaround.
     2. El patron de fondo cede detras de texto largo.
     3. Dato comparable = tabla. Dato suelto = chip.
   ========================================================================== */
:root {
  /* Texto sobre fondo TEÑIDO: --color-cta-text y --color-accent-text estan
     calculados contra el carbon liso de las tarjetas y sobre un tinte vuelven
     a caer por debajo de AA. Estos son un escalon mas claros, medidos contra
     el fondo real que van a tener encima. */
  --color-cta-on-tint: #db8166;      /* 4.57:1 sobre rgba(cta, .18) + card */
  --color-accent-on-tint: #5c9f9f;   /* 4.60:1 sobre rgba(accent, .10) + card */
  --color-accent-deep: #497e7e;      /* 4.60:1 con blanco encima */

  /* Escala de tiempos. Lo que ENTRA tarda mas y desacelera; lo que SE VA tarda
     menos y acelera. Igualar las dos duraciones es lo que hace que una
     interfaz se sienta pesada. */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-enter: 640ms;
  --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);
}

/* ---- la capsula ---------------------------------------------------------- */
.hero-card {
  border: 3px solid var(--color-accent);
  border-radius: 3rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 60px rgba(var(--color-accent-rgb), 0.12);
  animation: card-in var(--dur-enter) var(--ease-decel) both;
}

/* Regla 2: detras de una pagina de ToS el patron pelea con cada renglon. */
body::before { opacity: 0.12; }

/* ---- Home: el avatar monta el borde de la capsula ------------------------ */
@media (min-width: 768px) {
  .hero-card__col--image { margin-top: -5.5rem; }
}

.hero-avatar {
  border-radius: 50%;
  border-width: 4px;
  border-color: var(--color-cta);
  max-width: 260px;
  background: var(--color-bg);
  animation: c-breathe 7s ease-in-out infinite, c-ring 7s ease-in-out infinite;
}

@keyframes c-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes c-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-cta-rgb), 0.45); }
  50% { box-shadow: 0 0 0 14px rgba(var(--color-cta-rgb), 0); }
}

.hero__actions { max-width: 380px; margin-left: auto; margin-right: auto; }

/* ---- etiquetas tipo eyebrow --------------------------------------------- */
.sheet-info__title,
.sheet-card__subtitle {
  color: var(--color-accent-on-tint);
}

.sheet-info__title {
  display: inline-block;
  border-radius: 999px;
  background: var(--color-accent-deep);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.95rem;
}

/* ---- precios: capsula por fuera, tabla por dentro ------------------------ */
.technique-tables { gap: 1rem; }

@media (min-width: 768px) {
  .technique-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Una sola tarjeta (pixel art) no llena el grid de 3 columnas y queda pegada
     a la izquierda — la centramos como bloque propio en vez de ocupar 1/3. */
  .technique-tables--single { display: block; max-width: 22rem; margin: 0 auto; }
}

.technique-table {
  border: 2px solid var(--color-border);
  border-radius: 2rem;
  padding: 1.5rem 1.25rem;
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-decel),
              box-shadow var(--dur-base) var(--ease-decel);
}

.technique-table:hover {
  border-color: var(--color-cta);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.technique-table__head {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

/* La palabra "prices" era un encabezado de columna; sin tabla ya no dice nada. */
.technique-table__head span:last-child { display: none; }

.technique-table__head span:first-child {
  display: inline-block;
  border-radius: 999px;
  background: rgba(var(--color-cta-rgb), 0.18);
  color: var(--color-cta-on-tint);
  font-size: 0.82rem;
  padding: 0.3rem 0.9rem;
}

.technique-table__row { border-bottom-color: rgba(var(--color-cta-rgb), 0.2); }
.technique-table__size { color: var(--color-text-muted); font-weight: 400; }
.technique-table__price { color: var(--color-accent-on-tint); font-variant-numeric: tabular-nums; }

/* ---- regla 3: dato suelto = chip ---------------------------------------- */
.sheet-notes,
.payment-methods,
.tos-compare__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: none;
}

.sheet-notes { justify-content: center; }

.sheet-notes li,
.payment-methods__item,
.tos-compare__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.10);
  color: var(--color-accent-on-tint);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  transition: transform var(--dur-base) var(--ease-decel), border-color var(--dur-fast);
}

.sheet-notes li:hover,
.payment-methods__item:hover,
.tos-compare__list li:hover { transform: translateY(-2px); border-color: var(--color-cta); }

.sheet-notes li { padding-left: 1rem; }
.sheet-notes li::before { content: none; }
.sheet-notes li.sheet-notes__item--muted {
  border-color: var(--color-border);
  background: var(--color-carbon-soft);
  color: var(--color-text-muted);
}

.payment-methods__item.is-unavailable {
  border-color: var(--color-border);
  background: transparent;
  text-decoration: line-through;
}

.tos-compare__list--no li {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

.tos-compare__icon { display: none; }
.sheet-info.tos-compare { max-width: 900px; }

/* ---- testimonios: la comilla es tipografia, no una chapita --------------- */
.testimonial-card {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 2.9rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.testimonial-card__quote::before { content: none; }

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.6rem;
  font-size: 2.9rem;
  line-height: 1;
  font-weight: 800;
  color: var(--color-accent);
  opacity: 0.5;
}

.testimonial-card__quote {
  font-size: 1rem;
  color: var(--color-cream);
  margin-bottom: 1rem;
  text-wrap: pretty;
}

/* La atribucion repetida tres veces era ruido: queda una regla al pie. */
.testimonial-card__meta { font-size: 0; margin-top: auto; }
.testimonial-card__meta::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent);
  opacity: 0.6;
}

/* ---- reembolsos: cuatro numeros que se comparan de un vistazo ------------ */
@media (min-width: 768px) {
  .tos-refund__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tos-refund__list li {
  display: block;
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  padding: 0.9rem 0.6rem;
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-decel);
}

.tos-refund__list li:hover { border-color: var(--color-cta); transform: translateY(-3px); }

.tos-refund__pct {
  display: block;
  min-width: 0;
  font-size: 1.5rem;
  color: var(--color-cta-on-tint);
  font-variant-numeric: tabular-nums;
}

.tos-refund { border-radius: 2rem; padding: 1.75rem; }
.sheet-info { border-radius: 2rem; padding: 1.75rem; }

/* ---- botones y foco ------------------------------------------------------ */
.btn, .pill--cta, .pill--action { border-radius: 999px; }
.btn--primary, .pill--cta { font-weight: 800; }

.tos-rules li { font-weight: 400; }

/* ---- entrada en cascada -------------------------------------------------- */
.sheet-card > * { animation: content-in var(--dur-slow) var(--ease-decel) both; }
.sheet-card > *:nth-child(1) { animation-delay: 0.08s; }
.sheet-card > *:nth-child(2) { animation-delay: 0.14s; }
.sheet-card > *:nth-child(3) { animation-delay: 0.20s; }
.sheet-card > *:nth-child(4) { animation-delay: 0.26s; }
.sheet-card > *:nth-child(5) { animation-delay: 0.32s; }
.sheet-card > *:nth-child(6) { animation-delay: 0.38s; }

/* Salida mas rapida que la entrada. */
.age-gate--leaving { animation: gate-out var(--dur-fast) var(--ease-accel) both; }
@keyframes gate-out { to { opacity: 0; transform: scale(0.97) translateY(-6px); } }


/* ---- opcion C: piezas propias del Home ---------------------------------- */
.capc-shell { max-width: var(--container-width); margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }

.capc-card {
  position: relative;
  background: var(--color-card);
  border: 3px solid var(--color-accent);
  border-radius: 3rem;
  padding: 6rem 3rem 3rem;
  margin-top: 5rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 60px rgba(var(--color-accent-rgb), 0.12);
  animation: card-in var(--dur-enter) var(--ease-decel) both;
}

/* El avatar monta el borde de la capsula: es el gesto que define la direccion. */
.capc-avatar-wrap { position: absolute; top: -75px; left: 50%; transform: translateX(-50%); }

.capc-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid var(--color-cta);
  background: var(--color-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: c-breathe 7s ease-in-out infinite, c-ring 7s ease-in-out infinite;
}

.capc-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

.capc-wordmark { margin: 0 0 0.5rem; font-size: 5rem; line-height: 1; letter-spacing: -0.03em; color: var(--color-cta); }
.capc-tagline { margin: 0 0 1.5rem; font-size: 1rem; font-weight: 600; color: var(--color-text-muted); }
.capc-bio { margin: 0 auto 2rem; max-width: 52ch; font-size: 1.05rem; color: var(--color-text-muted); }
.capc-boundaries { margin: 0 0 2.5rem; font-size: 0.85rem; color: var(--color-accent-on-tint); }

.capc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.75rem; }

.capc-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.10);
  color: var(--color-accent-on-tint);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  transition: transform var(--dur-base) var(--ease-decel), border-color var(--dur-fast);
}

.capc-chip:hover { transform: translateY(-2px); border-color: var(--color-cta); }
.capc-chip--muted { border-color: var(--color-border); background: var(--color-carbon-soft); color: var(--color-text-muted); }

.capc-actions { display: flex; flex-direction: column; gap: 0.75rem; max-width: 380px; margin: 0 auto 1rem; }

.capc-cta {
  display: inline-block;
  border-radius: 999px;
  background: var(--color-cta);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 2.75rem;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-base) var(--ease-decel), box-shadow var(--dur-base);
}

.capc-cta:hover { background: var(--color-cta-hover); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--color-cta-rgb), 0.4); }
.capc-cta:focus-visible { outline: 2px solid var(--color-nav-active); outline-offset: 3px; }
.capc-cta--ghost { background: transparent; border: 2px solid var(--color-cta); color: var(--color-cta-text); }
.capc-cta--ghost:hover { background: var(--color-cta); color: #fff; }

/* Regla 1 de la direccion: la obra NUNCA en circulo. Solo el avatar. */
.capc-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

@media (min-width: 768px) {
  .capc-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.capc-figure { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.capc-figure figcaption { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); }

.capc-tile {
  border-radius: 2rem;
  overflow: hidden;
  border: 2px solid var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.06);
  padding: 0;
  cursor: zoom-in;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-base) var(--ease-decel);
}

.capc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease-decel); }
.capc-tile:hover { border-color: var(--color-cta); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); transform: translateY(-3px); }
.capc-tile:hover img { transform: scale(1.05); }
.capc-tile:focus-visible { outline: 2px solid var(--color-nav-active); outline-offset: 3px; }
.capc-tile--pixel img { object-fit: contain; image-rendering: pixelated; padding: 1rem; }

/* La nav de C: una sola capsula centrada, sin pastilla de marca arriba. */
.header--c { position: static; padding: 1.5rem 1.25rem 0; }
.header--c .header__inner { align-items: center; }
.header--c .pill--nav { width: auto; gap: 2.25rem; padding: 0.6rem 2rem; }
.header--c + main { padding-top: 1rem; }

@media (max-width: 767px) {
  .header--c .pill--nav { gap: 0.6rem 0.9rem; padding: 0.5rem 1rem; }
  .capc-card { padding: 5rem 1.25rem 2rem; border-radius: 2rem; border-width: 2px; margin-top: 4rem; }
  .capc-avatar-wrap { top: -56px; }
  .capc-avatar { width: 112px; height: 112px; border-width: 3px; }
  .capc-wordmark { font-size: 3rem; }
  .capc-shell { padding: 2rem 1rem 2.5rem; }
}


/* ==========================================================================
   Refinamiento final — 19/08/2026
   ========================================================================== */

/* ---- entrada del Home ----------------------------------------------------
   Antes la capsula aparecia de golpe con todo su contenido dentro. Ahora se
   despliega: primero baja el aro del avatar, despues crece la capsula desde
   su centro, y recien entonces el contenido sube en cascada. Los delays
   salen de una sola base para que el ritmo se lea parejo. */
.capc-card {
  animation: capc-open var(--dur-enter) var(--ease-decel) both;
  transform-origin: top center;
}

@keyframes capc-open {
  from { opacity: 0; transform: translateY(26px) scale(0.965); }
  to { opacity: 1; transform: none; }
}

.capc-avatar-wrap { animation: capc-drop 0.72s var(--ease-decel) both; }

@keyframes capc-drop {
  from { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(0.82); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* El contenido entra despues de la capsula, escalonado por posicion. */
.capc-card > *:not(.capc-avatar-wrap) {
  animation: capc-rise 0.52s var(--ease-decel) both;
}

.capc-card > *:nth-child(2) { animation-delay: 0.26s; }
.capc-card > *:nth-child(3) { animation-delay: 0.32s; }
.capc-card > *:nth-child(4) { animation-delay: 0.38s; }
.capc-card > *:nth-child(5) { animation-delay: 0.44s; }
.capc-card > *:nth-child(6) { animation-delay: 0.50s; }
.capc-card > *:nth-child(7) { animation-delay: 0.56s; }
.capc-card > *:nth-child(8) { animation-delay: 0.62s; }
.capc-card > *:nth-child(9) { animation-delay: 0.68s; }

@keyframes capc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Los chips entran de a uno, no como bloque. */
.capc-chips .capc-chip { animation: capc-pop 0.42s var(--ease-decel) both; }
.capc-chips .capc-chip:nth-child(1) { animation-delay: 0.50s; }
.capc-chips .capc-chip:nth-child(2) { animation-delay: 0.56s; }
.capc-chips .capc-chip:nth-child(3) { animation-delay: 0.62s; }
.capc-chips .capc-chip:nth-child(4) { animation-delay: 0.68s; }
.capc-chips .capc-chip:nth-child(5) { animation-delay: 0.74s; }

@keyframes capc-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* La tira de obra cierra la secuencia. */
.capc-strip .capc-figure { animation: capc-pop 0.46s var(--ease-decel) both; }
.capc-strip .capc-figure:nth-child(1) { animation-delay: 0.80s; }
.capc-strip .capc-figure:nth-child(2) { animation-delay: 0.87s; }
.capc-strip .capc-figure:nth-child(3) { animation-delay: 0.94s; }
.capc-strip .capc-figure:nth-child(4) { animation-delay: 1.01s; }

/* La nav entra antes que todo lo demas: es el marco. */
.header--c .pill--nav { animation: capc-rise 0.46s var(--ease-decel) both; }

/* ---- timing unificado ----------------------------------------------------
   Todo lo interactivo comparte la misma escala. Lo que responde al mouse usa
   --dur-base; lo que solo cambia de color, --dur-fast. */
.pill__link, .icon-circle, .btn, .pill--cta, .pill--action,
.example-thumb, .reference-sheet__thumb, .capc-tile, .capc-chip,
.technique-table, .tos-refund__list li, .brief__input {
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-decel);
}

.pill__link { transition-duration: var(--dur-fast); }

/* Press: mas corto que cualquier otra cosa, para que se sienta fisico. */
.btn:active, .pill--cta:active, .pill--action:active, .capc-cta:active,
.icon-circle:active { transition-duration: 90ms; }

/* ---- 1920x1080 y mas ancho ----------------------------------------------
   A 1920 el hero de dos columnas quedaba con la imagen muy chica al lado de
   una columna de texto muy larga; se equilibra el reparto. */
@media (min-width: 1400px) {
  .hero-card__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .capc-card { padding-left: 4rem; padding-right: 4rem; }
}

/* ---- respeto por prefers-reduced-motion ---------------------------------
   El bloque global solo acorta duraciones, y estas animaciones terminan en el
   estado visible, asi que quedan bien. Se apagan las que son puro ambiente. */
@media (prefers-reduced-motion: reduce) {
  .capc-avatar { animation: none; }
  .hero__badge.is-open .hero__badge-text { animation: none; }
  .commission-status.is-open .commission-status__dot { animation: none; }
}


/* ==========================================================================
   Feed de reseñas — 19/08/2026
   Tres columnas que rotan entre nueve reseñas reales de clientes (las del
   feed de Telegram, transcriptas). Cada columna cicla su propio terceto, con
   estrellas al tope como en una reseña de Google.
   ========================================================================== */
.review-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 2.5rem;
  text-align: left;
}

@media (min-width: 768px) {
  .review-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

/* Las tres reseñas de cada columna comparten celda y se turnan por opacidad.
   Con grid el alto lo define la mas larga y ninguna queda recortada. */
.review-rot { display: grid; }

.review {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  background: rgba(var(--color-accent-rgb), 0.05);
  opacity: 0;
  animation: review-swap 18s var(--ease-decel) infinite;
  animation-delay: var(--rd, 0s);
}

/* Las ventanas de las tres reseñas se SOLAPAN a proposito. Con la version
   anterior (visible del 4% al 34% y delays de 0/6/12s) la columna quedaba
   completamente en blanco ~0.6s en cada relevo: medido, la opacidad maxima de
   la columna llegaba a 0. Ahora cada una sigue visible hasta el 38%, es decir
   0.84s despues de que arranca la siguiente. */
@keyframes review-swap {
  0% { opacity: 0; transform: translateY(6px); }
  3%, 33% { opacity: 1; transform: none; }
  38%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Se pausa SOLO la columna que el visitante tiene debajo del cursor, no el
   feed entero: con .review-feed:hover, apoyar el mouse en cualquier parte
   congelaba las tres columnas a la vez — y si eso pasaba en el primer medio
   segundo, quedaban las tres en blanco. */
.review-rot:hover .review { animation-play-state: paused; }

.review__stars { display: inline-flex; gap: 0.15rem; }
.review__stars svg { width: 15px; height: 15px; fill: #e8b44a; flex-shrink: 0; }

.review__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-cream);
  text-wrap: pretty;
}

.review__meta { font-size: 0.75rem; color: var(--color-text-muted); margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .review-rot { gap: 0.75rem; }
  .review { animation: none; opacity: 0; grid-area: auto; }
  .review:first-child { opacity: 1; }
}

/* ==========================================================================
   Home compacto
   Entrar y tener que scrollear hasta el fondo para ver de que va el sitio es
   el problema que resuelve esto: se ajusta el aire entre la nav, la capsula
   y el pie para que el Home entre practicamente de una.
   ========================================================================== */
.header--c { padding: 1.1rem 1.25rem 0; }
.header--c + main { padding-top: 0; }
.section--hero { padding: 0 0 0.5rem; }
.capc-shell { padding: 1.75rem 1.25rem 0.75rem; }

.capc-card {
  margin-top: 3.25rem;
  padding: 3.75rem 3rem 1.75rem;
}

.capc-avatar-wrap { top: -58px; }
.capc-avatar { width: 116px; height: 116px; }

.capc-wordmark { font-size: 3.4rem; margin-bottom: 0.35rem; }
.capc-tagline { margin-bottom: 1rem; font-size: 0.92rem; }
.capc-chips { margin-bottom: 1.15rem; gap: 0.4rem; }
.capc-chip { font-size: 0.8rem; padding: 0.32rem 0.85rem; }
.capc-bio { margin-bottom: 1.1rem; font-size: 0.98rem; max-width: 58ch; }

/* Los dos CTAs pasan a ir uno al lado del otro: apilados empujaban la tira
   de obra fuera de la pantalla. */
.capc-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: none;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.capc-cta { font-size: 0.95rem; padding: 0.8rem 1.9rem; }
.capc-boundaries { margin-bottom: 1.15rem; font-size: 0.82rem; }
.capc-strip { gap: 0.7rem; }

/* Cuadrado en vez de 4/5: cuatro piezas verticales se comian media pantalla. */
.capc-strip .capc-tile { aspect-ratio: 1 / 1 !important; }
.capc-figure figcaption { font-size: 0.76rem; }

.footer { padding: 1.25rem 0 1rem; }
.footer .icon-row { margin-bottom: 1rem; }
.pill--brand.footer__brand { margin-bottom: 1rem; }

@media (min-width: 768px) {
  .icon-circle { width: 48px; height: 48px; }
  .icon-circle .icon { width: 22px; height: 22px; }
}

/* ==========================================================================
   Fluidez
   ========================================================================== */
html { scroll-behavior: smooth; }

/* Reserva siempre el lugar de la barra de scroll (desktop con barras
   clásicas; en táctil son superpuestas y no ocupan lugar). Sin esto, al abrir
   el lightbox la barra desaparecía y toda la página saltaba de costado; y como
   Chrome descuenta el gutter de `vw` solo cuando es estable, dejarlo fijo
   también mantiene constantes los anchos que dependen de `vw`. */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-gutter: stable; }
}

/* Una sola curva para todo lo que responde al puntero: mezclar curvas es lo
   que hace que una interfaz se sienta despareja aunque cada pieza este bien. */
a, button, .capc-tile, .capc-chip, .technique-table, .review, .icon-circle {
  transition-timing-function: var(--ease-decel);
}

/* Las imagenes entran con un fundido en vez de aparecer de golpe cuando el
   lazy-load las resuelve. */
.capc-tile img, .example-thumb img, .reference-sheet__thumb img {
  animation: img-fade 0.5s var(--ease-decel) both;
}

@keyframes img-fade { from { opacity: 0; } to { opacity: 1; } }

/* Cambio de página dentro del sitio (PageTransition.tsx). Lo que se va sale
   rápido y acelerando; lo que entra llega un poco después, desacelerando y
   subiendo apenas, igual que las tarjetas. El header no participa: tiene su
   propio view-transition-name y queda quieto. */
::view-transition-old(.page-out) {
  animation: page-out var(--dur-fast) var(--ease-accel) both;
}
::view-transition-new(.page-in) {
  animation: page-in var(--dur-slow) var(--ease-decel) 60ms both;
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Sin esto, el navegador repinta la capsula entera en cada hover de una pieza. */
.capc-tile, .example-thumb, .technique-table, .review { will-change: transform; }

/* ==========================================================================
   Zonas tactiles en mobile — 19/08/2026
   Los cuatro items de la nav median 27px de alto (y "ToS" 30px de ancho): la
   navegacion principal del sitio quedaba por debajo del minimo tactil de
   44px, y el trafico de este nicho llega casi todo desde el telefono.
   Se agranda el area sin agrandar la letra: el que crece es el padding.
   ========================================================================== */
@media (max-width: 767px) {
  /* Con "Account" (31/08) son 6 items: ya no entran en una fila en ningun
     ancho de telefono comun (probado 360-428px), asi que el wrap de
     seguridad de .pill--nav pasa a ser la norma, no la excepcion. El
     border-radius:999px heredado de .pill redondea esa capsula de dos
     filas como un ovalo con "Account" descentrado en la segunda — se
     achica solo aca para que lea como un rectangulo redondeado prolijo. */
  .header--c .pill--nav { padding: 0.2rem 0.5rem; gap: 0.1rem 0.2rem; border-radius: 1.75rem; }

  .pill__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.7rem;
  }

  /* Los iconos de redes tambien: 52px es comodo, 44 es el piso. */
  .icon-circle { width: 48px; height: 48px; }
}


/* ---- tablero de cola y notas de pixel art (19/09/2026) ------------------ */
/* Link a /queue adentro de la píldora de estado: hereda el color del estado. */
.commission-status__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.commission-status__link::before { content: "·"; margin-right: 0.55rem; text-decoration: none; display: inline-block; }

/* /queue reusa .technique-table; la lista numerada no trae viñetas propias. */
.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-list .technique-table__row { gap: 1rem; }
.queue-list .technique-table__price { text-align: right; flex-shrink: 0; }
#queue .technique-tables--single { margin-bottom: 2rem; }

/* Qué incluye cada escalón de pixel art, debajo del nombre. */
.technique-table__note {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 0.2rem;
  max-width: 30ch;
}
.technique-tables__footnote { margin: 1rem auto 0; }
/* En teléfono la píldora no da para dot + texto + link en una fila: el link
   baja a una línea propia en vez de estrujar el texto en tres columnas. */
@media (max-width: 480px) {
  .commission-status:has(.commission-status__link) { flex-wrap: wrap; justify-content: center; }
  .commission-status:has(.commission-status__link) .commission-status__text { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 1.25rem); }
  .commission-status__link { flex-basis: 100%; text-align: center; }
  .commission-status__link::before { content: none; }
}