/* Splat Mind. La noche.
 *
 * La pagina hereda de paint.css la tipografia, la barra, la marquesina y la grilla, y cambia lo
 * que tiene que cambiar: el fondo, el acento y el ritmo. Mind no es Paint en negro; Paint grita y
 * Mind respira, y eso se hace con aire, no con colores.
 *
 * Reglas propias:
 *   - El acento es UNO: la brasa del copal. El oro viejo para numeros y reglas. Nada de fluor.
 *   - Mas aire entre bloques que en Paint. Es el material mas barato que tenemos y el que mas
 *     cambia si algo se lee caro o apretado.
 *   - Nada de `filter`, `shadowBlur` ni `mix-blend-mode`: el lienzo del humo ya esta corriendo
 *     encima de toda la pagina y esta maquina no aguanta las dos cosas (ESTADO.md seccion 6).
 *
 * Necesita tokens.css, tipografia.css y paint.css antes. */

body.mind-pagina {
  background: var(--c-noche);
  color: var(--c-hueso);
}

/* --------------------------------------------------------------------------- el humo */

/* Fijo y detras de todo. `pointer-events: none` porque no es un control, es aire.
 *
 * Dos capas para lo mismo: la caja de video (el humo filmado, que es el camino bueno) y el canvas
 * (el respaldo por codigo). mind-humo.js usa una y borra la otra; nunca conviven.
 *
 * Los clips vienen con canal alfa horneado, asi que NO llevan `mix-blend-mode`. Es la diferencia
 * entre una capa que el compositor sube derecho y una que lo obliga a mezclar toda la pagina en
 * cada cuadro, y esta maquina no aguanta lo segundo. */
.humo, .humo-caja {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.humo { width: 100%; height: 100%; }

.humo-video {
  position: absolute;
  top: -12%;
  height: 124%;
  object-fit: cover;
  /* El humo sale del piso: arriba se desvanece para que el borde de arriba del clip no se vea, y
     a los costados tambien, para que no haya un canto vertical contra el margen. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* En telefono una sola columna y mas tenue: la pantalla es angosta y el humo cae encima del copy
   mucho mas seguido. */
@media (max-width: 760px) {
  .humo-video:nth-child(2) { display: none; }
  .humo-video:first-child { left: -25% !important; width: 150% !important; opacity: 0.34 !important; }
}

/* El humo vive en dos capas fijas a `z-index: 0` detras de todo. Para que el contenido quede por
 * ENCIMA hay que darle contexto de apilado propio, que es lo que hace esta regla.
 *
 * La barra iba en la misma regla y eso la sacaba de `fixed`: quedaba en el flujo, ocupando 69 px
 * de alto, y empujaba el `main` 69 px para abajo. Con la barra opaca no se notaba; al volverla
 * transparente aparecio una banda negra arriba del hero y la foto ya no llegaba al borde de la
 * pantalla, que es justo lo que se estaba buscando. La barra se queda fija con su `z-index: 40`,
 * que ya la deja arriba del humo igual. */
.mind-pagina main { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------- la barra */

/* La barra de Mind arranca TRANSPARENTE y se vuelve solida al salir del hero.
 *
 * Axel, 2026-09-24: "con barra de navegacion transparente". El motivo de diseno es que el hero pasa
 * a ser una foto a sangre: un rectangulo opaco de 70 px arriba le corta la palapa y el hero deja de
 * llegar al borde de la pantalla, que es justo lo que se estaba buscando.
 *
 * Transparente solo ARRIBA, no siempre. Mas abajo la barra flota sobre fichas de ritual con foto
 * clara y texto claro, y ahi sin fondo no se lee nada. El interruptor ya existia: `paint-barra.js`
 * pone `.barra--comprimida` al pasar el 55% de la primera pantalla. Se reusa ese, no uno nuevo.
 *
 * Sin JS la barra queda transparente, que sobre el hero es correcto: el estado por defecto es el
 * que sirve en el unico lugar donde se ve seguro. */
.barra--noche {
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--c-hueso);
  transition: background 320ms var(--salida), border-color 320ms var(--salida);
}

.barra--noche.barra--comprimida {
  background: color-mix(in oklch, var(--c-noche) 86%, transparent);
  border-bottom-color: color-mix(in oklch, var(--c-oro) 18%, transparent);
}

.barra--noche a { color: inherit; }
.barra--noche .barra__cta { color: var(--c-brasa); }

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

.mind-hero {
  position: relative;
  display: grid;
  place-items: end start;
  min-height: 100svh;
  padding: var(--margen);
  overflow: hidden;
  isolation: isolate;
}

.mind-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El encuadre lo eligio Axel scrolleando: "cortar la imagen para que empiece a esa altura".
     El 53% no es a ojo. Midiendo la foto por deciles: 0-20% es paja del techo, 20-30% es el dintel
     con el musgo, 30-80% es la ENTRADA (el cuero colgado, el tambor, las velas) y 80-100% es la
     arena con los dos copales. Con `center` el hero arrancaba en la paja y perdia media pantalla.
     En una caja de 1351x768 la ventana abarca el 56.8% del alto, asi que para que el cuadro
     empiece en el 23% (el dintel) la posicion tiene que ser 23/(1-0.568) = 53%. Lo que queda a la
     vista es 23%-80%: la entrada entera, que es lo que promete el portal y lo que el hero continua. */
  object-position: center 53%;
  /* Bastante mas clara que antes (era 0.52). El encuadre nuevo entra en la parte MAS OSCURA de la
     foto -el interior de la choza- y con el filtro viejo quedaba un rectangulo negro. Antes se
     podia hundir porque la foto era el lugar y el titular el protagonista; ahora la foto va a
     sangre debajo de una barra transparente y es ella la que tiene que sostener la primera
     pantalla. El contraste del texto no depende de este filtro sino del velo de abajo, que es
     donde el texto esta. */
  filter: saturate(1) brightness(0.92);
}

/* El velo: sostiene el contraste del titular y hunde la foto en la noche por abajo, de donde sale
   el humo. Un gradiente, no un `backdrop-filter`: el segundo rasteriza toda la caja por cuadro. */
.mind-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El velo se concentra ABAJO, que es donde esta el texto, y deja limpia la mitad de arriba: con
     la barra transparente, esa mitad es lo primero que se ve y tiene que ser la foto. El lateral
     tambien se acorto (62% -> 48%) porque ahora el titular ocupa todo el ancho y un velo que llega
     al 62% le apagaba el final del renglon. */
  background:
    /* El velo de ARRIBA existe solo para que se lea la barra. Sin fondo propio, la barra se cruza
       con la paja del techo -que es lo mas claro de la foto- y el menu desaparece. No se le puede
       poner fondo a la barra: usa `mix-blend-mode: difference` y cualquier caja opaca detras se
       invierte con ella y queda un rectangulo sucio. La solucion es oscurecer la FOTO, no la barra:
       14% de alto, suave, y como la barra hace `difference` contra un fondo oscuro, su texto sale
       claro. Al scrollear la barra toma su fondo solido y este velo ya no hace falta. */
    linear-gradient(to bottom, color-mix(in oklch, var(--c-noche) 62%, transparent), transparent 14%),
    /* El velo de ABAJO, que es donde vive el texto.
     *
     * Axel, 2026-09-24: "no se ve bien sobre ese fondo, hay que agregarle un fade". Tenia razon y
     * el error era mio: dos vueltas antes lo habia aflojado para que se viera la foto, y el titular
     * quedo cruzando el cuero colgado y el tambor, que son lo mas claro y lo mas texturado del
     * cuadro. Un titular en versales sobre textura no se lee aunque el contraste promedio de el
     * numero justo: lo que mata la lectura es que el fondo CAMBIE debajo de las letras.
     *
     * Ahora sube hasta el 72% y es solido hasta el 22%, que es la franja donde estan el titular,
     * la bajada y los dos botones. Arriba del 72% no toca nada: la entrada, el humo y la palapa
     * siguen limpios, que era el motivo de haberlo aflojado. */
    linear-gradient(to top,
      var(--c-noche) 0%,
      color-mix(in oklch, var(--c-noche) 88%, transparent) 10%,
      color-mix(in oklch, var(--c-noche) 66%, transparent) 30%,
      color-mix(in oklch, var(--c-noche) 34%, transparent) 50%,
      transparent 68%),
    /* **El peso lo lleva el LATERAL, no el de abajo**, y esa es la decision de esta version.
     *
     * El primer intento cargo todo en el gradiente de abajo y salio medido: la franja inferior
     * quedo en negro absoluto (luminancia maxima 0.011, o sea la foto directamente no estaba) y en
     * la del medio el maximo cayo de 0.80 a 0.11. El texto se leia perfecto sobre una foto que ya
     * no se veia, que es cambiar un problema por el otro.
     *
     * El texto vive en la MITAD IZQUIERDA. Lo interesante de la foto -el cuero colgado, el tambor,
     * el humo, el vano de la entrada- esta en el centro y a la derecha. Un velo lateral oscurece
     * exactamente donde estan las letras y deja intacto lo que hay que mirar. El de abajo queda
     * solo para el remate contra la seccion siguiente. */
    linear-gradient(to right,
      color-mix(in oklch, var(--c-noche) 86%, transparent) 0%,
      color-mix(in oklch, var(--c-noche) 72%, transparent) 26%,
      color-mix(in oklch, var(--c-noche) 46%, transparent) 52%,
      color-mix(in oklch, var(--c-noche) 18%, transparent) 70%,
      transparent 84%);
}

.mind-hero__texto {
  position: relative;
  z-index: 1;
  /* Ancho para que el titular entre en DOS renglones. Antes eran 34ch, que con el titular viejo
     daba seis renglones cortos apilados: Axel, "quiero en 2 lineas, no me gusta tan alto". El
     titular nuevo tiene 122 caracteres, asi que los dos renglones solo existen si la medida es
     ancha y el cuerpo mas chico que un display de portada. Es un titular de AFIRMACION sobre una
     foto a sangre, no una palabra gigante: a sangre, la foto es el golpe y el texto explica. */
  max-width: 100%;
  /* `.mind-hero` usa `place-items: end start`, asi que sus hijos NO se estiran: la caja del texto
     tomaba el ancho de su contenido (996 px) en vez de los 1214 disponibles. Eso recortaba el
     titular un 18% de ancho gratis, y como el tamano sale de dividir el ancho por el renglon mas
     largo, se perdian 7 px de cuerpo por nada. */
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-bottom: clamp(1rem, 5vh, 4rem);
}

/* El titular usa todo el ancho; la bajada no. Un parrafo de 1200 px de medida no se lee: el ojo
   pierde el renglon al volver. 46ch es la medida de lectura del resto del sitio. */
.mind-hero__texto .parrafo { max-width: 46ch; }

.mind-hero__sobre {
  margin: 0;
  font-family: var(--tipo-texto);
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-brasa);
}

/* Bastante mas chico que el `.hero` del resto del sitio, por lo de arriba: 122 caracteres en dos
   renglones no entran de otra forma. El corte entre las dos frases va escrito con `<br>` en el
   HTML, asi que cada renglon es una frase entera y no una particion al azar. */
/* Dos renglones, uno por frase, que es lo que pidio Axel ("quiero en 2 lineas, no me gusta tan
   alto"). El corte va escrito con `<br>` en el HTML, asi que cada renglon es una frase entera.
 *
 * El tamano sale de una medicion, no de un gusto: la primera frase tiene 87 caracteres y en esta
 * tipografia mide 44.17 em de largo. Para que entre en UN renglon dentro del ancho disponible, el
 * cuerpo no puede pasar de ancho/44.17. A 1366 px de pantalla el limite exacto da 27.5 px y va
 * 1.86vw = 25.4 px: el limite justo deja 7 px de margen y cualquier redondeo lo parte en tres.
 * Va en `vw` y no en `rem` para que la cuenta se mantenga en cualquier pantalla ancha y los dos
 * renglones sigan siendo dos. Es el precio de la frase: 87 caracteres en un renglon no pueden ser un display de
 * portada. Debajo de ~900 px no entra de ninguna manera y se deja que parta solo.
 *
 * `text-wrap: balance` NO se usa: repartiria las dos frases en renglones parejos y rompe el corte
 * por frase, que es justo lo que se pidio. */
.mind-hero .hero {
  color: var(--c-pared);
  /* En VERSALES y en tres renglones (Axel, 2026-09-24: "hagamoslo en 3 lineas, lo quiero en
   * mayuscula"). Los tres renglones son lo que hace posible las versales: en caja alta la frase
   * mide un 15% mas, y en DOS renglones eso obligaba a bajar el cuerpo a 22 px, mas chico que la
   * bajada que va justo debajo. Repartida en tres, el renglon mas largo baja de 87 a 45
   * caracteres y el cuerpo puede subir.
   *
   * Los cortes estan escritos con `<br>` y respetan las frases: la segunda oracion entera ocupa el
   * tercer renglon. El tamano sale de medir el renglon mas largo contra el ancho disponible, no de
   * tantear; va en `vw` para que la cuenta se sostenga en cualquier pantalla ancha. */
  font-size: clamp(1.05rem, 3vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.005em;
  /* La sombra es el ultimo tramo del contraste, y es la herramienta correcta para esto.
   *
   * Medido: con el velo solo, el peor pixel debajo del titular daba 2.77:1, por debajo del 3:1 que
   * pide un texto grande. El problema es de forma, no de cantidad: el titular ocupa todo el ancho
   * y su renglon mas largo termina sobre el cuero colgado, que es lo mas claro del cuadro. Subir
   * el velo hasta ahi apaga la foto entera de nuevo -ya paso una vez en esta misma vuelta- para
   * arreglar un problema que existe en el 5% del titular.
   *
   * Una sombra difusa es un velo POR LETRA: oscurece los tres pixeles que rodean cada glifo y no
   * toca el resto de la foto. Dos capas, una corta y dura para el filo y otra larga y suave que
   * hace de halo; las dos en el negro de la marca, nunca en negro puro, que sobre una foto calida
   * se ve gris. */
  text-shadow:
    0 1px 2px color-mix(in oklch, var(--c-noche) 60%, transparent),
    0 2px 20px color-mix(in oklch, var(--c-noche) 82%, transparent);
}
.mind-hero .punto { color: var(--c-brasa); }

/* ----------------------------------------------------------------------------- bloques */

.mind-bloque {
  position: relative;
  padding-block: clamp(5rem, 14vh, 11rem);
}

.mind-bloque .contenido {
  width: min(100% - var(--margen) * 2, 72rem);
  margin-inline: auto;
}

.contenido--dos {
  display: grid;
  gap: clamp(1.6rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contenido--dos { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

.mind-pagina .h1,
.mind-pagina .hero { color: var(--c-pared); }
.mind-pagina .punto { color: var(--c-brasa); }
.mind-pagina .parrafo { color: color-mix(in oklch, var(--c-hueso) 78%, transparent); }
.mind-pagina .parrafo--apagado { color: color-mix(in oklch, var(--c-hueso) 60%, transparent); }
.mind-pagina .h3 { color: var(--c-pared); }

/* Sobre la noche el contorno del titulo que se pinta va en oro, no en tinta. */
.mind-pagina .titulo-trazo__contorno {
  -webkit-text-stroke-color: color-mix(in oklch, var(--c-oro) 70%, transparent);
  text-stroke-color: color-mix(in oklch, var(--c-oro) 70%, transparent);
}

.mind-pagina .titulo-trazo__contorno .punto {
  -webkit-text-stroke-color: var(--c-brasa);
  text-stroke-color: var(--c-brasa);
}

/* ---------------------------------------------------------------------------- rituales */

.rituales {
  width: min(100% - var(--margen) * 2, 82rem);
  margin: clamp(3rem, 8vh, 6rem) auto 0;
  display: grid;
  gap: clamp(3rem, 8vh, 7rem);
}

.ritual {
  display: grid;
  gap: clamp(1.4rem, 3vw, 3.2rem);
  grid-template-columns: 1fr;
  align-items: start;
  padding-top: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid color-mix(in oklch, var(--c-oro) 20%, transparent);
}

@media (min-width: 900px) {
  .ritual { grid-template-columns: 0.85fr 1fr; }
  /* Alternado: el ritual impar tiene la lamina a la derecha. Ocho fichas con la foto siempre del
     mismo lado se leen como una tabla; alternadas se leen como un recorrido. */
  .ritual:nth-child(even) .ritual__medio { order: 2; }
}

.ritual__medio {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.ritual__medio img { width: 100%; height: 100%; object-fit: cover; }

/* El credito de una foto de banco. Chico y arriba de la foto, no escondido abajo: tiene que leerse
   sin buscarlo. Mientras el sitio use material de banco, esto es lo que separa un comp de una
   mentira. */
.ritual__banco {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-hueso) 74%, transparent);
  background: linear-gradient(to top, color-mix(in oklch, var(--c-noche) 92%, transparent), transparent);
}

/* El placeholder. NO es una caja gris.
 *
 * Splat Mind no tiene ni una foto propia (ESTADO.md seccion 7) y el brief prohibe tapar el hueco
 * con banco de imagenes haciendose pasar por material del cliente. Entonces el hueco se resuelve
 * en vez de disimularse: el numero del ritual enorme y vacio sobre la noche, el borde punteado que
 * ya usa la pagina de talleres, y abajo, en chico, que foto falta exactamente. Se lee como una
 * lamina, no como un error, y el cliente sabe que mandar. */
.ritual__falta {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  text-align: center;
  border: 1px dashed color-mix(in oklch, var(--tinte, var(--c-oro)) 42%, transparent);
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in oklch, var(--tinte, var(--c-oro)) 12%, transparent), transparent 70%),
    color-mix(in oklch, var(--c-noche) 82%, #000);
}

.ritual__falta__n {
  margin: 0;
  font-family: var(--tipo-display);
  font-size: clamp(4.5rem, 11vw, 9rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in oklch, var(--tinte, var(--c-oro)) 55%, transparent);
  text-stroke: 1.4px color-mix(in oklch, var(--tinte, var(--c-oro)) 55%, transparent);
}

.ritual__falta__que {
  margin: 0;
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--tinte, var(--c-oro)) 80%, transparent);
}

.ritual__falta__detalle {
  margin: 0;
  max-width: 24ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--c-hueso) 52%, transparent);
}

.ritual__ficha { display: flex; flex-direction: column; gap: 0.7rem; }

.ritual__n {
  margin: 0;
  font-family: var(--tipo-display);
  font-size: var(--t-dato);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--tinte, var(--c-oro));
}

.ritual__nombre {
  margin: 0;
  font-family: var(--tipo-display);
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-pared);
}

.ritual__titulo {
  margin: 0;
  font-size: 1.02rem;
  color: color-mix(in oklch, var(--c-hueso) 72%, transparent);
}

.ritual__dato {
  margin: 0 0 0.4rem;
  font-size: var(--t-dato);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brasa);
}

.ritual__lista {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.34rem;
  font-size: 0.92rem;
  color: color-mix(in oklch, var(--c-hueso) 70%, transparent);
}

.ritual__lista li { padding-left: 1.1rem; position: relative; }

.ritual__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--c-oro) 60%, transparent);
}

.ritual__lista--beneficios li::before {
  border-radius: 0;
  transform: rotate(45deg);
  background: color-mix(in oklch, var(--c-jade) 75%, transparent);
}

/* Lo que falta o no cierra en el material del cliente se dice, no se tapa. Mismo tratamiento que
   `.taller__pendiente` en Paint. */
.ritual__pendiente {
  margin: 0.5rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid color-mix(in oklch, var(--c-brasa) 45%, transparent);
  font-size: 0.8rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--c-hueso) 50%, transparent);
}

/* --------------------------------------------------------------------------- marquesina */

/* La cinta de Mind NO es la de Paint en negro.
 *
 * La de Paint es un campo magenta con la display enorme: grita, que es lo que Paint hace. Heredada
 * tal cual, en Mind quedaba una franja fucsia cruzando la noche. Axel la bajo: "esta tira se ve
 * horrible, no pega con la estetica".
 *
 * Aca no hay campo de color: dos reglas de oro finas y, entre ellas, los nombres en versalitas
 * espaciadas con un rombo entre uno y otro. Lo que se repite de Paint es el ritmo, no el volumen. */
.marquesina--noche {
  background: none;
  border-block: 1px solid color-mix(in oklch, var(--c-oro) 22%, transparent);
  padding-block: clamp(0.9rem, 1.6vw, 1.5rem);
  color: var(--c-hueso);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquesina--noche .marquesina__item {
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-right: clamp(1.4rem, 3vw, 3rem);
  font-family: var(--tipo-texto);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-hueso) 62%, transparent);
}

.marquesina--noche .marquesina__item a { color: inherit; text-decoration: none; transition: color 320ms var(--salida); }
.marquesina--noche .marquesina__item a:hover { color: var(--c-brasa); }
.marquesina--noche:hover .marquesina__item { color: color-mix(in oklch, var(--c-hueso) 62%, transparent); }

/* El rombo: el unico color de la cinta. Chico, para que separe sin competir. */
.marquesina--noche .marquesina__item i {
  font-size: 0.55em;
  color: color-mix(in oklch, var(--c-oro) 70%, transparent);
}

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

.boton--brasa {
  background: var(--c-brasa);
  color: var(--c-noche);
  border: 1px solid var(--c-brasa);
}

.boton--brasa:hover { background: var(--c-oro); border-color: var(--c-oro); }

.boton--linea {
  background: transparent;
  color: var(--c-hueso);
  border: 1px solid color-mix(in oklch, var(--c-hueso) 34%, transparent);
}

/* El hover del boton de linea en Mind: **el texto desaparecia**.
 *
 * `paint.css:194` pone `.boton:hover { background: var(--acento); color: var(--c-tinta) }`, y en
 * Mind `--acento` es `--c-brasa`. Esta regla pisaba SOLO el color del texto, tambien con
 * `--c-brasa`. Resultado medido haciendo hover de verdad sobre "Cotizar": texto #ff7a1a sobre
 * fondo #ff7a1a, contraste **1.00:1**. El boton quedaba en naranja liso, sin texto, y lo mismo
 * pasaba con `:focus-visible`, o sea navegando con el teclado.
 *
 * El arreglo es pisar tambien el FONDO. Se pisa a transparente y no a otro color porque un boton
 * de linea que al hover se rellena deja de ser un boton de linea: lo que tiene que cambiar es el
 * filete y la tinta, que es lo que hace ahora. */
.boton--linea:hover,
.boton--linea:focus-visible {
  background: transparent;
  border-color: var(--c-brasa);
  color: var(--c-brasa);
}

/* --------------------------------------------------------------------- para quien */

/* La grilla de "para quien lo montamos".
 *
 * Heredaba de paint.css tarjetas con FONDO CREMA, y sobre ellas Mind pinta el texto en hueso: claro
 * sobre claro, ilegible. Los titulos directamente no se veian.
 *
 * Aca las celdas son de la noche y lo unico que las separa es una regla de oro fina. Es el mismo
 * material que el resto de Mind: en esta pagina no hay ninguna otra caja clara y no tiene por que
 * aparecer una. */
.mind-pagina .grilla {
  background: color-mix(in oklch, var(--c-oro) 22%, transparent);
  border: 1px solid color-mix(in oklch, var(--c-oro) 22%, transparent);
}

.mind-pagina .grilla article { background: var(--c-noche); }
.mind-pagina .grilla article .h3 { color: var(--c-pared); }
.mind-pagina .grilla article p { color: color-mix(in oklch, var(--c-hueso) 72%, transparent); }

/* Cuatro publicos, CUATRO columnas.
 *
 * El `auto-fit` que hereda de paint.css reparte por ancho minimo y no por cantidad: dentro de los
 * 72rem de Mind entraban tres celdas y la cuarta se iba sola a un segundo renglon, dejando dos
 * huecos del color del filete. Un hueco en una grilla con fondo no se lee como aire, se lee como
 * que falta algo (Axel, 2026-09-24: "prefiero que sea de 4 y no que queden 2 vacias").
 *
 * La cantidad va fijada por escalon: cuatro en escritorio, dos en tablet, una en telefono. Ninguno
 * de esos tres repartos deja celdas sueltas, porque 4 es divisible por los tres.
 *
 * El padding baja en el escalon de cuatro: a 254 px de celda, los 2.4rem de paint.css dejaban 178
 * px de renglon y palabras como "entretenimiento" quedaban solas en su linea. */
@media (min-width: 1000px) {
  .mind-pagina .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mind-pagina .grilla article { padding: clamp(1.3rem, 1.9vw, 1.8rem); }
}

@media (min-width: 560px) and (max-width: 999px) {
  .mind-pagina .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
  .mind-pagina .grilla { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------ clientes */

/* Tres logos, no nueve. En una fila de tres no va una cinta que loopea: se ponen y se miran.
   Grandes, con mucho aire alrededor, que es lo que hace que tres se lean como suficientes. */
.clientes-mind {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  padding: clamp(2.5rem, 6vh, 4rem) 0 0;
  list-style: none;
  border-top: 1px solid color-mix(in oklch, var(--c-oro) 20%, transparent);
}

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

.cliente {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}

.cliente img {
  height: clamp(2.6rem, 4.4vw, 4rem);
  width: auto;
  opacity: 0.78;
  transition: opacity 420ms var(--salida), transform 420ms var(--salida);
}

.cliente:hover img { opacity: 1; transform: scale(1.04); }

/* La aclaracion de Secrets: todavia no arranca. Va impresa, no escondida. */
.cliente__nota {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-brasa);
}

/* -------------------------------------------------------------------------------- cierre */

.mind-cierre { padding-block: clamp(6rem, 18vh, 14rem); }
.mind-cierre .bloque--centro { text-align: center; margin-inline: auto; max-width: 30ch; }

/* En Mind el cierre es a sangre, igual que en Paint: la banda de ciudades tiene que poder salirse
   de la caja de 72rem del contenido. */
.mind-cierre .contenido { width: 100%; max-width: none; }
.mind-cierre .cierre__ciudades { color: var(--c-pared); }
.mind-cierre .cierre__ciudades i { color: var(--c-brasa); }
.mind-cierre .bloque--centro { max-width: none; }
.mind-cierre .parrafo--corto,
.mind-cierre .acciones { max-width: 34ch; margin-inline: auto; }
.mind-cierre .acciones { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------------- menos movimiento */

@media (prefers-reduced-motion: reduce) {
  .humo { opacity: 0.8; }
}