/* Rayo de luz del sur — componentes.
   Sin un solo hex crudo: todo sale de los tokens de tokens.css + marca.css.
   Dos únicos puntos de quiebre: 40em (640px) y 61.25em (980px). */

/* ---------------------------------------------------------------- 1. base */

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

/* Regla obligatoria: el JS oculta con el atributo hidden, y sin esto cualquier
   clase con display explícito lo pisa por especificidad. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

/* Medida base de todo ícono. Sin esto, un svg con viewBox y sin width se
   expande hasta el ancho del contenedor: pasó, y costó 4.400 px de página. */
.ic { width: 1.15em; height: 1.15em; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl)); }
h2 { font-size: clamp(var(--text-xl), 4.2vw, var(--text-2xl)); }
h3 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); letter-spacing: 0; }
p { text-wrap: pretty; }

a { color: var(--fg); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: var(--space-4); top: calc(var(--space-4) * -4);
  z-index: 60; background: var(--surface); color: var(--fg);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  box-shadow: var(--elev-raised); transition: top var(--motion-fast) var(--ease-standard);
}
.saltar:focus { top: var(--space-4); }

/* --------------------------------------------------------- 2. contenedores */

.contenedor {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-phone);
}
@media (min-width: 40em) { .contenedor { padding-inline: var(--container-gutter-tablet); } }
@media (min-width: 61.25em) { .contenedor { padding-inline: var(--container-gutter-desktop); } }

.seccion { padding-block: var(--section-y-phone); }
@media (min-width: 40em) { .seccion { padding-block: var(--section-y-tablet); } }
@media (min-width: 61.25em) { .seccion { padding-block: var(--section-y-desktop); } }
.seccion--apretada { padding-block: var(--space-12); }

/* Banda profunda: alterna densidad para que la página no quede plana */
.banda { background: var(--surface-warm); }

main { flex: 1 0 auto; }

/* ------------------------------------------------------- 3. rejilla bento */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.bento > * { min-width: 0; }
/* Tablet: el par asimétrico (contenido + panel) pasa a mitad y mitad.
   A 4+2 el panel chico quedaba en 178 px y los controles se partían. */
@media (min-width: 48em) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
  .t-3 { grid-column: span 3; }
  .t-4, .t-5, .t-6, .t-7, .t-8 { grid-column: span 3; }
  .t-12 { grid-column: span 6; }
}
@media (min-width: 61.25em) {
  .bento { grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
  .t-3 { grid-column: span 3; }
  .t-4 { grid-column: span 4; }
  .t-5 { grid-column: span 5; }
  .t-6 { grid-column: span 6; }
  .t-7 { grid-column: span 7; }
  .t-8 { grid-column: span 8; }
  .t-12 { grid-column: span 12; }
}

.teja {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.teja--plana { background: transparent; box-shadow: none; padding: 0; }

a.teja {
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}
a.teja:hover { box-shadow: var(--elev-raised); transform: translateY(-3px); }
a.teja:hover .sobretitulo--marca { text-decoration: underline; text-underline-offset: 0.25em; }
a.teja:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a.teja:active { transform: translateY(0); }
.tarjeta__titulo a { text-decoration: none; }
.tarjeta:hover .tarjeta__titulo a { text-decoration: underline; text-underline-offset: 0.22em; }
.teja--calida { background: var(--surface-warm); }
.teja--tinta { background: var(--fg); color: var(--surface); }
.teja--tinta h2, .teja--tinta h3 { color: var(--surface); }
.teja--tinta .apagado { color: var(--border); }

/* ----------------------------------------------------------- 4. tipografía */

.sobretitulo {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.sobretitulo--marca { color: var(--meta); }
.bajada {
  font-size: var(--text-lg);
  color: var(--fg-2);
  max-width: 58ch;
}
.apagado { color: var(--muted); font-size: var(--text-sm); }
.cifra { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.precio { font-size: var(--text-xl); font-family: var(--font-display); letter-spacing: -0.01em; }
.precio small { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-body); letter-spacing: 0.02em; }
.tachado { text-decoration: line-through; color: var(--muted); font-size: var(--text-sm); }

/* ------------------------------------------------------------- 5. botones */
/* Cinco estados distinguibles por variante: hover, focus-visible, active,
   disabled y carga. Hover y foco nunca comparten estilo. */

.boton {
  --_borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--_borde);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.boton:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.boton:active:not([disabled]):not([aria-busy="true"]) { transform: translateY(2px); }
.boton[disabled], .boton[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; transform: none; }
.boton[aria-busy="true"] { cursor: progress; color: transparent; }
.boton[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--accent-on);
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(1turn); } }

.boton--principal { background: var(--accent); color: var(--accent-on); --_borde: var(--accent); }
.boton--principal:hover:not([disabled]) { background: var(--accent-hover); --_borde: var(--accent-hover); }
.boton--principal:active:not([disabled]) { background: var(--accent-active); }

/* Sobre fondo de tinta el acento no llega ni a 2:1. El primario se invierte. */
.boton--claro { background: var(--surface); color: var(--fg); --_borde: var(--surface); }
.boton--claro:hover:not([disabled]) {
  background: var(--surface-warm); --_borde: var(--surface-warm);
}
.boton--claro:active:not([disabled]) { background: var(--border); --_borde: var(--border); }
.boton--claro[aria-busy="true"]::after { color: var(--fg); }

.boton--fantasma { color: var(--surface); --_borde: color-mix(in oklab, var(--surface) 55%, transparent); }
.boton--fantasma:hover:not([disabled]) {
  background: color-mix(in oklab, var(--surface) 14%, transparent);
  --_borde: var(--surface);
}
.boton--fantasma:active:not([disabled]) { background: color-mix(in oklab, var(--surface) 24%, transparent); }
.boton--fantasma[aria-busy="true"]::after { color: var(--surface); }

.boton--contorno { color: var(--fg); --_borde: var(--muted); }
.boton--contorno:hover:not([disabled]) { background: var(--surface-warm); }
.boton--contorno:active:not([disabled]) { background: var(--border); }
.boton--contorno[aria-busy="true"]::after { color: var(--fg); }

.boton--desnudo { color: var(--fg-2); padding-inline: var(--space-3); }
.boton--desnudo:hover:not([disabled]) { background: var(--border-soft); color: var(--fg); }
.boton--desnudo:active:not([disabled]) { background: var(--border); }
.boton--desnudo[aria-busy="true"]::after { color: var(--fg); }

.boton--peligro { color: var(--danger); --_borde: var(--danger); }
.boton--peligro:hover:not([disabled]) { background: color-mix(in oklab, var(--danger) 10%, var(--surface)); }
.boton--peligro:active:not([disabled]) { background: color-mix(in oklab, var(--danger) 18%, var(--surface)); }
.boton--peligro[aria-busy="true"]::after { color: var(--danger); }

.boton--ancho { width: 100%; }
.boton--grande { min-height: 52px; padding-inline: var(--space-6); font-size: var(--text-base); }
.boton--icono { min-width: 44px; padding: var(--space-2); border-radius: 50%; }
.boton .ic { width: 18px; height: 18px; flex: none; }

.motivo-deshabilitado { font-size: var(--text-xs); color: var(--muted); }

/* ------------------------------------------------- 6. chips, píldoras, etc */

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.chip .ic { width: 13px; height: 13px; }
.chip--exito { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); }
.chip--aviso { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, var(--border)); }
.chip--marca { color: var(--fg-2); border-color: color-mix(in oklab, var(--meta) 55%, var(--border)); }

/* Filtros conmutables */
.filtro {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.filtro:hover { background: var(--surface-warm); }
.filtro:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filtro:active { background: var(--border); }
.filtro[aria-pressed="true"] {
  background: var(--fg); color: var(--surface); border-color: var(--fg);
}
.filtro[aria-pressed="true"]:hover { background: var(--fg-2); border-color: var(--fg-2); }
.fila-filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* -------------------------------------------------------- 7. formularios */

.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo > label { font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); }
.campo .pista { font-size: var(--text-xs); color: var(--muted); }

.entrada, select.entrada, textarea.entrada {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--muted);  /* 4.8:1 — los bordes de control necesitan contraste propio */
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
textarea.entrada { min-height: 88px; resize: vertical; line-height: var(--leading-body); }
.entrada:hover { border-color: var(--fg-2); }
.entrada:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.entrada[disabled] { background: var(--border-soft); color: var(--muted); cursor: not-allowed; }
.entrada[aria-invalid="true"] { border-color: var(--danger); }
.entrada::placeholder { color: var(--muted); }

.error-campo {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--danger);
}
.error-campo .ic { width: 15px; height: 15px; flex: none; margin-top: 3px; }

.fila > .entrada, .fila > .campo { min-width: 0; }
.rejilla-campos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 40em) { .rejilla-campos--2 { grid-template-columns: 1fr 1fr; } }

/* Opciones tipo radio en tarjeta */
.opcion {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
}
.opcion:hover { background: var(--surface-warm); }
.opcion:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.opcion:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.opcion input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.opcion .et { font-weight: 500; }
.opcion .de { font-size: var(--text-sm); color: var(--muted); }

/* Interruptor */
.interruptor { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; }
.interruptor input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------------------------------------- 8. marcador de posición de medios */

.ph-img {
  position: relative;
  container-type: inline-size;
  /* width explícito: con aspect-ratio y width:auto, un max-height que entra
     en juego achica TAMBIÉN el ancho para conservar la proporción. Así la
     media de rituales se encogió de 448 a 307 px. Con el ancho definido,
     el tope sólo recorta el alto. */
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Tope duro: ningún bloque de imagen puede dominar la pantalla.
     El retrato de rituales llegaba a 597 px de alto. */
  max-height: 20rem;
  border-radius: var(--radius-md);
  background: var(--surface-warm);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* Rayos radiales del emblema, proceduralmente. Cero assets remotos. */
.ph-img::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--meta) 0deg 0.45deg,
    transparent 0.45deg 5deg
  );
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 8%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 50%, black 8%, transparent 58%);
}
.ph-img::after {
  content: "";
  position: absolute;
  width: 16%; aspect-ratio: 1; border-radius: 50%;
  background: var(--meta); opacity: 0.5;
}
/* El hueco de imagen lleva la marca, no un cartel de defecto. */
.ph-img__marca {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: center;
  color: var(--accent);
}
/* A 44 px los rayos arrancan pegados al sol y el emblema se empasta en una
   mancha. Con más tamaño se separan, y en latón pesa como filigrana y no
   como un sello encima de la imagen que algún día va a ir detrás. */
.ph-img__marca .marca__emblema { width: 62px; height: 62px; color: var(--meta); opacity: 0.9; }
.ph-img__nombre {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}
/* En los bloques chicos sólo entra el emblema. */
@container (max-width: 190px) {
  .ph-img__nombre { display: none; }
  .ph-img__marca .marca__emblema { width: 34px; height: 34px; }
}
.ph-img--ancho { aspect-ratio: 16 / 9; }
.renglon__media { max-height: none; aspect-ratio: 1; }

/* Cuando entren las fotos reales: object-fit cover recorta, nunca deforma. */
.ph-img > img { width: 100%; height: 100%; object-fit: cover; }

/* Hueco declarado: lo que todavía no tiene dato real */
.hueco {
  border: 1px dashed var(--meta);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--fg-2);
  background: color-mix(in oklab, var(--meta) 6%, transparent);
  font-size: var(--text-sm);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.hueco b { font-weight: 600; letter-spacing: 0.08em; font-size: var(--text-xs); text-transform: uppercase; color: var(--accent); }

/* ------------------------------------------------------- 9. encabezamiento */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
/* Compacta por defecto. En pantalla angosta el lema del logo mide mas que
   el propio nombre y empujaba las acciones fuera del viewport: ahi solo va
   el emblema con el wordmark, y el lema reaparece recien en pantalla ancha. */
.cabecera__fila {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 64px;
}
.marca {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none; min-width: 0; flex: 0 1 auto;
}
.marca__emblema { width: 28px; height: 28px; flex: none; color: var(--accent); }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca__nombre {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;    /* versales: tracking positivo obligatorio */
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marca__lema {
  display: none;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 61.25em) {
  .cabecera__fila { gap: var(--space-4); }
  .marca { gap: var(--space-3); flex: none; }
  .marca__emblema { width: 32px; height: 32px; }
  .marca__nombre { font-size: var(--text-sm); letter-spacing: 0.14em; }
  .marca__lema { display: block; }
}

.nav-principal { display: none; }
@media (min-width: 48em) {
  .nav-principal { display: flex; gap: var(--space-1); margin-inline-start: var(--space-4); }
}
@media (min-width: 61.25em) {
  .nav-principal { gap: var(--space-2); margin-inline-start: var(--space-6); }
}
.nav-principal a {
  min-height: 44px; display: inline-flex; align-items: center;
  padding-inline: var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--text-sm); text-decoration: none; color: var(--fg-2);
  transition: background var(--motion-fast) var(--ease-standard);
}
.nav-principal a:hover { background: var(--surface-warm); color: var(--fg); }
.nav-principal a[aria-current="page"] { color: var(--fg); background: var(--surface); box-shadow: var(--elev-ring); }

.cabecera__acciones {
  margin-inline-start: auto; display: flex; align-items: center;
  gap: var(--space-1); flex: none;
}
.pill-carrito { position: relative; min-width: 44px; padding-inline: var(--space-2); }
@media (min-width: 61.25em) {
  .cabecera__acciones { gap: var(--space-2); }
  .pill-carrito { padding-inline: var(--space-5); }
}
.pill-carrito__n {
  position: absolute; top: -2px; inset-inline-end: -2px;
  min-width: 19px; height: 19px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-on);
  border-radius: var(--radius-pill);
  font-size: 11px; font-family: var(--font-mono); line-height: 1;
}
.solo-ancho { display: none; }
@media (min-width: 48em) { .solo-angosto { display: none !important; } }
@media (min-width: 61.25em) { .solo-ancho { display: inline-flex; } }

/* Cajón de navegación en pantalla angosta */
.cajon {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr;
}
.cajon__velo { position: absolute; inset: 0; background: color-mix(in oklab, var(--fg) 55%, transparent); border: 0; }
.cajon__panel {
  position: relative; margin-inline-start: auto;
  width: min(20rem, 86vw); height: 100%;
  background: var(--surface);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  overflow-y: auto;
  box-shadow: var(--elev-raised);
}
/* :not(.boton) es obligatorio: sin eso esta regla gana por especificidad
   sobre el color propio del boton y lo deja en 1.89:1. */
.cajon__panel a:not(.boton) {
  position: relative;
  min-height: 48px;
  display: flex; align-items: center; gap: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg-2);
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.cajon__panel a:not(.boton) .ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cajon__panel a:not(.boton):hover { background: var(--surface-warm); color: var(--fg); }
.cajon__panel a:not(.boton):hover .ic { color: var(--fg-2); }
.cajon__panel a:not(.boton):active { background: var(--border); }
.cajon__panel a:not(.boton):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* El activo se marca con un filo de laton, no con un tinte de 4 % que casi
   no se distingue del panel. */
.cajon__panel a[aria-current="page"] {
  background: var(--surface-warm);
  color: var(--fg);
  font-weight: 500;
}
.cajon__panel a[aria-current="page"]::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: var(--radius-pill);
  background: var(--accent);
}
.cajon__panel a[aria-current="page"] .ic { color: var(--accent); }

/* Dos grupos con rotulo en vez de seis renglones indistinguibles. */
/* Marca y cerrar en el mismo renglón: con .fila el wordmark ocupaba la
   línea entera y el botón de cerrar bajaba solo. */
.cajon__encabezado { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; }
.cajon__encabezado .marca { min-width: 0; flex: 0 1 auto; }
.cajon__encabezado .marca__nombre { overflow: hidden; text-overflow: ellipsis; }

.cajon__grupo { display: flex; flex-direction: column; gap: var(--space-1); }
.cajon__grupo + .cajon__grupo {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}
.cajon__grupo > .sobretitulo { padding-inline: var(--space-4); margin-bottom: var(--space-2); }
.cajon__pie { margin-top: auto; padding-top: var(--space-6); display: grid; gap: var(--space-2); }
.cajon__cuenta {
  margin-inline-start: auto;
  min-width: 22px; height: 22px; padding-inline: 6px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-on);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
}

/* --------------------------------------------------------------- 9b. hero */
/* Franja a sangre completa en tinta: es el primer golpe de vista del trafico
   que llega de redes. El fondo es arte procedural derivado del propio
   emblema (sol, rayos y sierra) — ver PENDIENTES.md: es el lugar exacto
   donde entra la fotografia real cuando exista. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fg);
  color: var(--surface);
  min-height: min(80vh, 40rem);
  display: grid;
  align-items: center;
  padding-block: var(--space-12);
}
.hero__fondo { position: absolute; inset: 0; z-index: -2; }

.hero__rayos {
  position: absolute;
  top: -42%; inset-inline-end: -28%;
  width: min(135vh, 62rem); aspect-ratio: 1;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--meta) 0deg 0.35deg,
    transparent 0.35deg 3.4deg
  );
  -webkit-mask-image: radial-gradient(circle, black 6%, transparent 62%);
  mask-image: radial-gradient(circle, black 6%, transparent 62%);
  opacity: 0.5;
}
.hero__sol {
  position: absolute;
  top: -42%; inset-inline-end: -28%;
  width: min(135vh, 62rem); aspect-ratio: 1;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--meta) 70%, transparent) 0%,
    transparent 34%);
  opacity: 0.55;
}
/* La sierra del emblema, al pie de la franja. */
.hero__sierra {
  position: absolute; inset-inline: 0; bottom: 0;
  width: 100%; height: auto;
  color: color-mix(in oklab, var(--meta) 34%, transparent);
  z-index: -1;
}
/* Scrim: garantiza la legibilidad del texto pase lo que pase detras. */
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--fg) 86%, transparent) 0%,
    color-mix(in oklab, var(--fg) 62%, transparent) 55%,
    color-mix(in oklab, var(--fg) 88%, transparent) 100%);
}
@media (min-width: 48em) {
  .hero__velo {
    background: linear-gradient(to right,
      color-mix(in oklab, var(--fg) 92%, transparent) 0%,
      color-mix(in oklab, var(--fg) 74%, transparent) 52%,
      color-mix(in oklab, var(--fg) 40%, transparent) 100%);
  }
}

.hero__cuerpo { max-width: 40rem; display: flex; flex-direction: column; gap: var(--space-5); }
.hero h1 {
  font-size: clamp(var(--text-2xl), 8.5vw, var(--text-4xl));
  letter-spacing: var(--tracking-display);
}
.hero .bajada { color: var(--border); font-size: clamp(var(--text-base), 2.4vw, var(--text-xl)); }
.hero .sobretitulo { color: var(--meta); }
.hero__micro {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--border);
}
.hero__micro span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__micro .ic { width: 15px; height: 15px; color: var(--meta); }

/* Cinta de prueba gratuita dentro del hero. */
.hero__gratis {
  display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--meta) 70%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--meta) 16%, transparent);
  font-size: var(--text-sm);
  color: var(--surface);
}
.hero__gratis .ic { width: 16px; height: 16px; color: var(--meta); }

/* ---------------------------------------------------- 10. aviso sin conexión */

.aviso-offline {
  background: var(--warn); color: var(--surface);
  font-size: var(--text-sm); text-align: center;
  padding: var(--space-2) var(--space-4);
}

/* --------------------------------------------------- 11. tarjeta de producto */

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-ring);
  overflow: hidden;
  transition: box-shadow var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}
.tarjeta:hover { box-shadow: var(--elev-raised); transform: translateY(-3px); }
.tarjeta:focus-within { box-shadow: var(--focus-ring); }
.tarjeta .ph-img { border-radius: 0; }
.tarjeta__cuerpo { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.tarjeta__titulo { font-size: var(--text-lg); font-family: var(--font-display); letter-spacing: -0.01em; }
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tarjeta__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.tarjeta { position: relative; }

.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
}
@media (min-width: 48em) { .rejilla-productos { gap: var(--space-5); } }
@media (min-width: 61.25em) { .rejilla-productos { gap: var(--space-6); } }
.rejilla-productos > * { min-width: 0; }

/* Las cuatro puertas de entrada de la portada: fluidas, nunca una tira
   de bloques a ancho completo. */
.rejilla-rutas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}
.rejilla-rutas > * { min-width: 0; }
@media (min-width: 48em) {
  .rejilla-rutas { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 61.25em) {
  .rejilla-rutas { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

/* ---------------------------------------------- 12. estados: carga / error */

.esqueleto {
  background: linear-gradient(90deg,
    var(--border-soft) 0%, var(--surface-warm) 50%, var(--border-soft) 100%);
  background-size: 200% 100%;
  animation: barrer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes barrer { to { background-position: -200% 0; } }
.esqueleto--media { height: 0; padding-bottom: 75%; border-radius: var(--radius-md); }
.esqueleto--linea { height: 14px; }
.esqueleto--linea.corta { width: 54%; }

.estado {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.estado h3 { font-size: var(--text-xl); }
.estado p { color: var(--muted); max-width: 46ch; }
.estado--error { border-color: color-mix(in oklab, var(--danger) 45%, var(--border)); }

/* Canal visible de rechazo — nunca sólo para lectores de pantalla */
.rechazo {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--danger) 10%, var(--surface));
  color: var(--danger);
  font-size: var(--text-sm);
}
.confirmacion-ok {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--success) 10%, var(--surface));
  color: var(--success);
  font-size: var(--text-sm);
}
.rechazo .ic, .confirmacion-ok .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* Confirmación en línea de acciones destructivas — sin diálogo modal */
.confirmar-linea {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--fg-2);
}

/* ------------------------------------------------- 13. respiración (alarde) */

.respirar { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.respirar__aro {
  position: relative;
  width: min(13rem, 100%); aspect-ratio: 1;
  display: grid; place-items: center;
}
.respirar__rayos {
  --_r: 0.82; --_g: 0deg; --_d: 4000ms;   /* el JS los pisa por fase */
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--meta) 0deg 0.5deg,
    transparent 0.5deg 4.5deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 36%, black 42%, black 72%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 36%, black 42%, black 72%, transparent 78%);
  opacity: 0.45;
  transform: scale(var(--_r, 0.82)) rotate(var(--_g, 0deg));
  transition: transform var(--_d, 4000ms) cubic-bezier(0.37, 0, 0.63, 1), opacity var(--_d, 4000ms) linear;
}
.respirar__sol {
  --_r: 0.82; --_d: 4000ms;
  position: relative; z-index: 1;
  width: 32%; aspect-ratio: 1; border-radius: 50%;
  background: var(--accent);
  transform: scale(var(--_r, 0.82));
  transition: transform var(--_d, 4000ms) cubic-bezier(0.37, 0, 0.63, 1);
}
.respirar__fase {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  min-height: 1.4em;
}
.respirar__cuenta { font-size: var(--text-sm); color: var(--muted); }
.respirar__barra { width: 100%; height: 4px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.respirar__barra i { display: block; height: 100%; width: 0%; background: var(--meta); transition: width 200ms linear; }

/* ------------------------------------------------- 14. barra fija de compra */

.barra-compra {
  position: sticky; bottom: 0; z-index: 30;
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--container-gutter-phone);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-4);
}
.barra-compra__precio { display: flex; flex-direction: column; line-height: 1.2; }
.barra-compra .boton { flex: 1; }
@media (min-width: 48em) { .barra-compra { display: none; } }

/* --------------------------------------------------- 14b. bloque de ritual */
/* Media y cuerpo lado a lado tienen que terminar a la misma altura. Con
   aspect-ratio fijo la media medía 252 px contra un cuerpo de 476 y dejaba
   224 px de hueco en escritorio — 544 px en tablet. En dos columnas la
   media estira a la fila; en una sola recupera su proporción. */

.ritual {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.ritual > * { min-width: 0; }

.ritual__media { display: grid; }
.ritual__media > .ph-img { aspect-ratio: 16 / 9; }

@media (min-width: 61.25em) {
  /* Recién acá hay ancho para una columna de imagen: a 350 px la media
     quedaba como una tira angosta de 741 px de alto. */
  .ritual { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
  .ritual--invertido { grid-template-columns: 7fr 5fr; }
  .ritual__media > .ph-img {
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    min-height: 14rem;
  }
}

/* ----------------------------------------- 14c. detalle de hábito */

/* Calendario mensual: cada día es un control, porque se puede corregir
   una marca de cualquier día pasado. */
.calendario { display: grid; gap: var(--space-4); }
.calendario__barra { display: flex; align-items: center; gap: var(--space-2); }
.calendario__mes { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.01em; }
.calendario__grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.calendario__rotulo {
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--space-2);
}
.dia {
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.dia:hover:not([disabled]) { background: var(--border); }
.dia:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dia:active:not([disabled]) { background: color-mix(in oklab, var(--border), var(--fg) 12%); }
/* El día cumplido toma el matiz del hábito, el mismo de la grilla.
   Sin --hue definido cae al acento: ninguna pantalla queda sin color. */
.dia[aria-pressed="true"] {
  background: var(--hue, var(--accent));
  border-color: var(--hue, var(--accent));
  color: var(--accent-on);
}
.dia[disabled] { background: transparent; border-style: dashed; color: var(--border); cursor: default; }
.dia--hoy { border-color: var(--hue, var(--accent)); border-width: 2px; }
.dia--vacio { border: 0; background: transparent; cursor: default; }

/* Cumplimiento por día de la semana. */
.barras-dia { display: grid; gap: var(--space-3); }
.barras-dia__fila {
  display: grid;
  grid-template-columns: 2.6rem 1fr 3rem;
  align-items: center;
  gap: var(--space-3);
}
.barras-dia__dia { font-size: var(--text-sm); color: var(--fg-2); }
.barras-dia__pista {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  overflow: hidden;
}
.barras-dia__pista i { display: block; height: 100%; background: var(--hue, var(--meta)); }
.barras-dia__fila--flojo .barras-dia__pista i { background: var(--warn); }
.barras-dia__pct {
  text-align: end;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* Objetivo semanal */
.objetivo { display: grid; gap: var(--space-3); }
.objetivo input[type="range"] { width: 100%; accent-color: var(--hue, var(--accent)); min-height: 44px; }
.objetivo__escala {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
}

/* ------------------------------------------------------------ 15. listas */

.lista-limpia { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.lista-chequeo { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.lista-chequeo li { display: flex; align-items: flex-start; gap: var(--space-3); }
.lista-chequeo .ic { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--meta); }

/* Lista de «qué hábito / para qué sirve» de la portada. */
.lista-ayudas { display: grid; gap: var(--space-5); }
.lista-ayudas dt {
  font-family: var(--font-display); font-size: var(--text-lg);
  letter-spacing: -0.01em; margin-bottom: var(--space-1);
}
.lista-ayudas dd { color: var(--muted); font-size: var(--text-sm); max-width: 62ch; }

.pasos { list-style: none; counter-reset: p; display: grid; gap: var(--space-5); }
.pasos li { counter-increment: p; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.pasos li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--meta);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--meta);
  display: grid; place-items: center;
}

/* Renglón de línea de pedido / carrito */
.renglon {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.renglon:last-child { border-bottom: 0; }
.renglon__media { border-radius: var(--radius-sm); aspect-ratio: 1; }
.renglon__cuerpo { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.renglon__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

.contador { display: inline-flex; align-items: center; border: 1px solid var(--muted); border-radius: var(--radius-pill); }
.contador button {
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center; font-size: var(--text-lg);
  transition: background var(--motion-fast) var(--ease-standard);
}
.contador button:hover:not([disabled]) { background: var(--surface-warm); }
.contador button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.contador button:active:not([disabled]) { background: var(--border); }
.contador button[disabled] { opacity: 0.4; cursor: not-allowed; }
.contador output { min-width: 2.2rem; text-align: center; font-family: var(--font-mono); }

/* Totales */
.totales { display: flex; flex-direction: column; gap: var(--space-3); }
.totales__fila { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--fg-2); }
.totales__fila--gran {
  font-size: var(--text-lg); color: var(--fg); font-weight: 500;
  border-top: 1px solid var(--border); padding-top: var(--space-3);
}

/* --------------------------------------------------------- 16. pestañas */

.pestanas { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.pestanas button {
  min-height: 48px; padding-inline: var(--space-4);
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer; white-space: nowrap;
  font-size: var(--text-sm); color: var(--muted);
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.pestanas button:hover { color: var(--fg); }
.pestanas button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.pestanas button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------- 17. pie */

.pie {
  border-top: 1px solid var(--border);
  background: var(--surface-warm);
  padding-block: var(--space-12);
  margin-top: var(--space-12);
}
/* Fluido: 2 columnas apenas entra, 3 en tablet. En una sola columna el pie
   medía 875 px a 600 px de ancho — más que cualquier sección de contenido. */
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-6) var(--space-8);
}
.pie__rejilla > * { min-width: 0; }
@media (min-width: 48em) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pie ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.pie a:not(.boton) { font-size: var(--text-sm); color: var(--fg-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pie a:not(.boton):hover { color: var(--fg); text-decoration: underline; }
.pie__legal { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted); }

/* ------------------------------------------------- 17b. registro de hábitos */

.habito {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.habito--hecho { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); }
.habito__icono {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-warm);
  color: var(--meta);
  flex: none;
}
.habito--hecho .habito__icono { color: var(--success); }
.habito__icono .ic { width: 19px; height: 19px; }
.habito__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.habito__nombre { font-size: var(--text-base); font-family: var(--font-display); letter-spacing: 0; }
.habito__nombre a { text-decoration: none; }
.habito__nombre a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.habito__accion { flex: none; align-self: center; }

/* El «para qué sirve» va plegado: está siempre disponible pero no compite
   con la acción de marcar. */
.habito__ayuda > summary,
details > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--fg-2);
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.habito__ayuda > summary::-webkit-details-marker,
details > summary::-webkit-details-marker { display: none; }
.habito__ayuda > summary::before,
details > summary::before {
  content: "+";
  font-family: var(--font-mono);
  margin-inline-end: var(--space-2);
  color: var(--meta);
}
details[open] > summary::before { content: "–"; }
.habito__ayuda > summary:hover { color: var(--fg); }
.habito__ayuda > p { font-size: var(--text-sm); color: var(--muted); max-width: 58ch; }

/* Marcar hecho: un solo control grande, no una casilla de 16 px. */
.marca-check {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--surface);
  color: var(--border);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.marca-check .ic { width: 24px; height: 24px; stroke-width: 2.2; }
.marca-check:hover { background: var(--surface-warm); color: var(--muted); }
.marca-check:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.marca-check:active { transform: scale(0.94); }
.marca-check[disabled] { opacity: 0.5; cursor: not-allowed; }
.marca-check[aria-pressed="true"] {
  background: var(--success); border-color: var(--success); color: var(--surface);
}
.marca-check[aria-pressed="true"]:hover {
  background: color-mix(in oklab, var(--success), black 10%);
}

/* Matiz por hábito. Una clase por matiz en vez de componer el nombre del
   token en JS: así cada var() que se escribe es un token que existe y el
   verificador puede resolverlo. Sin clase, --hue cae al acento. */
:root { --hue: var(--accent); }
.m-oro { --hue: var(--h-oro); }
.m-terracota { --hue: var(--h-terracota); }
.m-oliva { --hue: var(--h-oliva); }
.m-salvia { --hue: var(--h-salvia); }
.m-cielo { --hue: var(--h-cielo); }
.m-ciruela { --hue: var(--h-ciruela); }
.m-arcilla { --hue: var(--h-arcilla); }
.m-indigo { --hue: var(--h-indigo); }

/* ------------------------------------------------- 17b. grilla de hábitos

   Replica estructural de la grilla de seguimiento de Monai, con la piel de
   Rayo de luz del sur: cada hábito tiene su matiz propio (ocho tokens
   --h-* en marca.css), el día marcado se rellena con ese matiz y el día de
   hoy lo lleva saturado con el tilde en papel.

   El matiz se inyecta por --hue desde el marcado; acá no se nombra ningún
   color de hábito, sólo se usa la variable. */

.grilla {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.grilla__cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.grilla__cabecera > .apilar { flex: 1 1 16rem; }
.grilla__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Interruptor Día · Semana · Mes */
.segmento {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.segmento button {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--fg-2);
  font: 500 var(--text-sm)/1 var(--font-body);
  min-height: 44px; padding-inline: var(--space-4);
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.segmento button:hover { color: var(--fg); }
.segmento button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.segmento button:active { transform: translateY(1px); }
.segmento button[aria-pressed="true"] {
  background: var(--surface); color: var(--fg); font-weight: 600;
  box-shadow: var(--elev-ring);
}

.paso {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-2);
  transition: background var(--motion-fast) var(--ease-standard);
}
.paso .ic { width: 16px; height: 16px; }
.paso:hover { background: var(--surface-warm); color: var(--fg); }
.paso:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.paso:active { transform: translateY(1px); }
.paso[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ESTE es el único contenedor del sitio con desplazamiento lateral:
   la página nunca lo tiene en ningún ancho.

   `contain: paint` no es decoración. Con sólo overflow-x:auto la tira
   clipea su propio contenido (su scrollWidth da 326 sobre 326) pero el área
   de scroll de la RAÍZ seguía contando el ancho mínimo de la tabla, y a
   360 px la página entera se corría 233 px — medido arrastrándola, no
   leyendo scrollWidth. overflow:hidden en el envoltorio no alcanzaba;
   contain:paint sí, porque declara que nada de adentro existe para los
   ancestros. */
.tabla-semana {
  overflow-x: auto;
  contain: paint;
  -webkit-overflow-scrolling: touch;
  --celda: 44px;
  --gap-celda: var(--space-2);
}
.tabla-semana--mes { --celda: 26px; --gap-celda: 3px; }
.tabla-semana table { border-collapse: collapse; width: 100%; }
.tabla-semana th, .tabla-semana td {
  padding: var(--gap-celda); text-align: center; vertical-align: middle;
}
.tabla-semana thead th {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-xs); color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  padding-block: var(--space-3);
}
.dia-nombre { display: block; letter-spacing: 0.09em; text-transform: uppercase; }
.dia-numero {
  display: inline-grid; place-items: center;
  min-width: 1.7em; padding: 2px 0.35em; margin-top: 3px;
  font-size: var(--text-sm); color: var(--fg-2);
  border-radius: var(--radius-pill);
}
.es-hoy .dia-nombre { color: var(--accent); font-weight: 600; }
.es-hoy .dia-numero { background: var(--accent); color: var(--accent-on); font-weight: 600; }

.celda-habito {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--surface);
  text-align: start !important;
  font-family: var(--font-body); font-weight: 400;
  min-width: 11.5rem;
  border-inline-end: 1px solid var(--border-soft);
}
.tabla-semana tbody tr + tr th,
.tabla-semana tbody tr + tr td { border-top: 1px solid var(--border-soft); }

.habito-fila { display: flex; align-items: flex-start; gap: var(--space-3); }
.habito-fila__punto {
  width: 9px; height: 9px; flex: none; margin-top: 7px;
  border-radius: 50%; background: var(--hue, var(--accent));
}
.habito-fila__nombre {
  display: block; font-size: var(--text-sm); font-weight: 600; color: var(--fg);
  font-family: var(--font-body); text-decoration: none;
}
a.habito-fila__nombre:hover { color: var(--accent); text-decoration: underline; }
a.habito-fila__nombre:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.habito-fila__plan { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------- celdas */

.celda-dia {
  width: var(--celda); height: var(--celda);
  border-radius: var(--radius-sm);
  /* La celda sin marcar es una caja al aire, no un bloque relleno: con
     --surface-warm se confundía con el tinte de una celda cumplida. */
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--hue, var(--accent));
  cursor: pointer;
  display: grid; place-items: center;
  margin-inline: auto;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.celda-dia .ic { width: 55%; height: 55%; stroke-width: 2.4; }
.celda-dia:hover {
  background: color-mix(in oklab, var(--hue, var(--accent)) 16%, var(--surface));
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 45%, var(--border));
}
.celda-dia:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.celda-dia:active { transform: scale(0.94); }

/* Día cumplido en el pasado: tinte del matiz, con el tilde un punto más
   oscuro que el matiz. Con el tilde en el matiz pleno cuatro de los ocho
   quedaban en 4,2:1 sobre su propio tinte — medido, no estimado. Con el
   24 % de negro el peor caso sube a 6,71:1 y empareja con la celda de hoy. */
.celda-dia[aria-pressed="true"] {
  background: color-mix(in oklab, var(--hue, var(--accent)) 26%, var(--surface));
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 38%, var(--surface));
  color: color-mix(in oklab, var(--hue, var(--accent)), black 24%);
}
/* Hoy cumplido: el matiz pleno, tilde en papel. Es el único saturado. */
.celda-dia--hoy[aria-pressed="true"] {
  background: var(--hue, var(--accent));
  border-color: var(--hue, var(--accent));
  color: var(--accent-on);
}
.celda-dia--hoy { border-color: color-mix(in oklab, var(--hue, var(--accent)) 50%, var(--border)); }

/* Día que el plan del hábito no espera: se puede marcar igual, pero no
   cuenta ni a favor ni en contra. Se dibuja hundido, no ausente. */
.celda-dia--fuera { background: transparent; border-style: dotted; }
.celda-dia--fuera[aria-pressed="false"] { opacity: 0.55; }

.celda-dia--futura {
  width: var(--celda); height: var(--celda);
  margin-inline: auto;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-soft);
  background: transparent;
  display: block;
}

.celda-racha {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  color: var(--hue, var(--accent));
  white-space: nowrap; padding-inline: var(--space-4) !important;
}
.celda-racha--cero { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------- pie de grilla */

.grilla__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-soft);
  background: color-mix(in oklab, var(--surface-warm) 45%, var(--surface));
}
.leyenda { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.leyenda > div { display: flex; align-items: center; gap: var(--space-2); }
.leyenda dt {
  width: 15px; height: 15px; flex: none;
  border-radius: 4px; border: 1px solid var(--border); background: var(--surface);
}
.leyenda dd { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.leyenda .l-marcado { background: var(--accent); border-color: var(--accent); }
.leyenda .l-futuro { background: transparent; border-style: dashed; border-color: var(--border-soft); }

/* ------------------------------------------- 17c. todos los hábitos

   La vista de tarjetas: una por hábito, con el mapa de los últimos 90 días,
   la racha y el cumplimiento de 30 días. Cada tarjeta toma el matiz de su
   hábito por la clase .m-* de la grilla. */

.tarjeta-habito {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.tarjeta-habito__cabecera {
  display: flex; align-items: flex-start; gap: var(--space-4);
}
.tarjeta-habito__cabecera > div:first-child { flex: 1 1 auto; min-width: 0; }
.tarjeta-habito__nombre {
  font-family: var(--font-display); font-size: var(--text-xl);
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
  color: var(--fg); text-decoration: none; display: block;
}
a.tarjeta-habito__nombre:hover { color: var(--accent); }
a.tarjeta-habito__nombre:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}
.tarjeta-habito__plan { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }

.pastilla-racha {
  flex: none;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: color-mix(in oklab, var(--hue, var(--accent)) 18%, var(--surface));
  color: color-mix(in oklab, var(--hue, var(--accent)), black 24%);
}
.pastilla-racha--cero {
  background: var(--surface-warm); color: var(--muted); font-weight: 400;
}

/* Mapa de 90 días: 13 columnas de semana, 7 filas de día. La celda es
   deliberadamente chica — acá no se marca, se lee la forma del hábito.
   Para marcar está la grilla, donde la celda llega a 44 px. */
/* La celda es chica y de medida fija a propósito. Con columnas de 1fr se
   estiraba a 41 px y el mapa se comía la tarjeta entera: 287 px de alto
   para un dato que se lee de un vistazo. Acá el mapa mide 205 x 109. */
.mapa-90 {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 13px);
  grid-auto-columns: 13px;
  justify-content: start;
  gap: 3px;
  min-width: 0;
}
.mapa-90 i {
  display: block; border-radius: 2px;
  background: color-mix(in oklab, var(--border) 65%, var(--surface));
}
.mapa-90 i.hecho { background: var(--hue, var(--accent)); }
/* Día que el plan no espera: mucho más tenue que un día esperado sin
   cumplir, para que un hábito de lunes y viernes no parezca abandonado.
   La distancia entre los dos tonos tiene que verse, no deducirse. */
.mapa-90 i.fuera { background: color-mix(in oklab, var(--border) 14%, var(--surface)); }
.mapa-90 i.porvenir { background: transparent; }

.tarjeta-habito__pie {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: auto;
}
.tarjeta-habito__pie .cifra { font-weight: 600; color: var(--fg); }
.barra-30 {
  flex: 1 0 100%;
  height: 6px; border-radius: var(--radius-pill);
  background: var(--surface-warm);
  overflow: hidden;
}
/* El relleno va en bloque: en línea, width y height no miden. */
.barra-30 i { display: block; height: 100%; background: var(--hue, var(--accent)); }

/* ------------------------------------------------- aviso de contexto

   No es un error ni un hueco declarado: es una condición del entorno que
   el visitante tiene que conocer para no perder trabajo. Se distingue del
   rojo de error y del punteado de hueco por el latón de la marca. */

.aviso {
  border: 1px solid color-mix(in oklab, var(--meta) 45%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--meta) 8%, var(--surface));
  padding: var(--space-5);
}
.aviso__texto { display: block; color: var(--fg-2); font-size: var(--text-sm); }
.aviso b {
  display: block;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------ hábito en riesgo */

.riesgo {
  border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--warn) 7%, var(--surface));
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.riesgo__rotulo {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--warn);
  display: flex; align-items: center; gap: var(--space-2);
}
.riesgo__nombre {
  font-family: var(--font-display); font-size: var(--text-xl);
  letter-spacing: var(--tracking-display); color: var(--fg);
  text-decoration: none;
}
a.riesgo__nombre:hover { color: var(--accent); }
a.riesgo__nombre:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ------------------------------------------- selector de días de la semana */

.dias-semana { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dias-semana button {
  min-width: 44px; height: 44px; padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-2);
  font: 500 var(--text-sm)/1 var(--font-body);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.dias-semana button:hover { background: var(--surface-warm); color: var(--fg); }
.dias-semana button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dias-semana button:active { transform: translateY(1px); }
.dias-semana button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600;
}

.matices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.matices button {
  width: 44px; height: 44px; flex: none; cursor: pointer;
  border-radius: 50%; border: 2px solid transparent;
  background: var(--surface); padding: 5px;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.matices button > i {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; background: var(--hue);
}
.matices button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.matices button[aria-pressed="true"] { border-color: var(--fg); }

/* ------------------------------------------------------- 18. utilidades */

.apilar { display: flex; flex-direction: column; gap: var(--space-4); }
.apilar--chico { gap: var(--space-2); }
.apilar--grande { gap: var(--space-6); }
.fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* Botones apilados en pantalla angosta: mismo ancho, no uno por palabra. */
.fila--acciones { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 40em) {
  .fila--acciones { display: flex; flex-wrap: wrap; align-items: center; }
}
.fila--fin { justify-content: flex-end; }
.empuje { margin-inline-start: auto; }
.centro-texto { text-align: center; }
.medida { max-width: 62ch; }
.regla { height: 1px; background: var(--border); border: 0; }

/* ------------------------------------------------- 19. movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tarjeta:hover { transform: none; }
  .boton:active:not([disabled]) { transform: none; }
  .respirar__rayos, .respirar__sol { transform: none; }
}