/* Splat Paint · v2.
 *
 * Reemplaza a splat.css, que era la demo de movimiento de la v1 (Syne, DM Sans, medidas en rem y
 * fotos de banco). Lo que cambia, y por que:
 *
 * 1. La composicion mide en vw, no en rem. Es lo que hace que layrmedia se vea igual de intencional
 *    a 1350 y a 1920: la pagina es una pieza que escala, no un layout fluido con breakpoints a
 *    medias. El texto corrido si mide en rem (tiene que ser legible, no proporcional).
 * 2. Un solo acento en la interfaz: el magenta fluor. Los seis colores siguen siendo de la pintura.
 *    El acento aparece donde hay que mirar (numeros, enlaces, el punto del titulo) y en ningun
 *    fondo.
 * 3. Sin ceja: ninguna etiqueta chica anuncia la seccion. Lo pide tipografia.css y es la diferencia
 *    entre una pagina compuesta y una plantilla.
 * 4. Reglas de 1 px y aire. Nada de tarjetas con sombra y radio.
 *
 * Necesita tokens.css y tipografia.css antes. Aca no hay un solo hex ni una sola font-family. */

/* El acento va en [data-marca] y no en :root porque tokens.css ya define --acento ahi con esa
   misma especificidad: en :root perderia siempre.
   Dos acentos y no uno: el magenta que eligio Axel es el de la marca y vive sobre la noche, donde
   contrasta 8:1. Sobre la pared clara da 3.1:1, que alcanza para un punto de 6vw y no para una
   linea de 12 px, asi que el texto chico con acento sobre la pared usa el violeta (5.2:1). */
[data-marca='paint'] {
  --acento: var(--c-f-magenta);
  --acento-en-claro: var(--c-f-violeta);
}

:root {
  --margen: clamp(1.25rem, 5vw, 5.5rem);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --linea-clara: color-mix(in oklch, var(--c-tinta) 14%, transparent);
  --linea-oscura: color-mix(in oklch, var(--c-hueso) 16%, transparent);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--c-tinta);
  background-color: var(--c-pared);
  /* grano de lienzo: un SVG de ruido estatico en mosaico; no se anima ni usa blend */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11  0 0 0 0 .07  0 0 0 0 .19  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

.barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 1.6vw var(--margen);
  mix-blend-mode: difference;
  color: var(--c-pared);
  transition: transform 420ms var(--salida);
  will-change: transform;
}

.barra__marca {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  text-decoration: none;
  font-family: var(--tipo-display);
  font-size: clamp(0.8rem, 1.05vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.barra__marca img { width: 2.2vw; min-width: 26px; filter: invert(1); }
.barra__marca span::after { content: '.'; color: var(--c-f-magenta); }

.barra nav {
  display: flex;
  align-items: center;
  gap: 2.2vw;
  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.barra nav a { text-decoration: none; opacity: 0.75; transition: opacity 240ms var(--salida); }
.barra nav a:hover, .barra nav a:focus-visible { opacity: 1; }

/* En telefono la barra pasa a DOS renglones en vez de esconder el menu.
 *
 * Antes `Talleres`, `Nosotros` y `Eventos` iban a `display: none` sin nada en su lugar, sobre una
 * pagina de casi 8.000 px: el visitante que abre el link en el celular -que es el caso normal, el
 * gerente en el lobby entre dos cosas- se quedaba sin ninguna forma de llegar a un taller que no
 * fuera scrollear a mano. Y el `←` sin su palabra parecia el boton atras del navegador.
 *
 * Dos renglones y no un menu desplegable, por una restriccion concreta: la barra usa
 * `mix-blend-mode: difference`, asi que **no se le puede poner un fondo**. Cualquier panel opaco
 * detras se invierte junto con el texto y queda un rectangulo sucio sobre el contenido. Un menu
 * desplegable tendria que vivir fuera del header, con su propio contexto de apilado, su foco
 * atrapado y su tecla Escape: mucha maquinaria para tres enlaces.
 *
 * Dos renglones cuestan 34 px de alto, no necesitan una linea de JS, y la barra ya se esconde sola
 * al bajar (`paint-barra.js`), asi que esos 34 px no acompanan al visitante mientras lee. Un menu
 * de dos renglones en escritorio seria un defecto; en telefono es lo normal. */
@media (max-width: 760px) {
  .barra {
    flex-wrap: wrap;
    row-gap: 0;
    padding: 2.2vw var(--margen) 0;
  }

  /* El menu baja entero al segundo renglon y se reparte a lo ancho. `Cotizar` viaja con el: es
     parte del mismo menu y separarlo dejaria un huerfano arriba. */
  .barra nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .barra nav a:not(.barra__cta) { display: inline-block; }

  /* Objetivo tactil: el texto mide 11 px de alto y el dedo necesita 44. El padding vertical los
     lleva ahi sin mover el renglon, porque el `nav` ya reparte a lo ancho. Y como el padding ES la
     altura del segundo renglon, la barra no paga dos veces: el `row-gap` va en 0 y el aire lo pone
     el propio area tactil. */
  /* `min-height` y no mas padding: el padding lo comia el `padding-bottom: 0.35em` que estos
     enlaces ya traen de titulares.css (el subrayado que entra al pasar por encima), y quedaban
     siempre uno o dos pixeles cortos. 44 px es el piso del dedo; se pide directo. */
  .barra nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* Sin `padding-block`: se sumaba al `min-height` y la barra llegaba a 123 px, el 15% de la
       pantalla. El area tactil la da el `min-height` solo. */
    padding-block: 0;
  }
}

/* -------------------------------------------------------------------- muro */

/* Las secciones pintadas: la pared clara con su lienzo detras del contenido. */
.muro {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 11vh, 9rem);
  overflow: hidden;
}

.capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--margen);
}

.bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.bloque--angosto { max-width: 46ch; }
.bloque--centro { align-items: center; text-align: center; margin-inline: auto; }

/* ----------------------------------------------------------------- portada */

.portada {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: 22vh 12vh;
}

/* El punto del titular es lo unico con acento en toda la portada. */
.portada .hero .punto { color: var(--acento); }

.portada .bajada {
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  color: var(--c-tinta-suave);
}

.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; }

/* La pista, abajo a la izquierda como en layr: no centrada, no flotando. */
.pista {
  position: absolute;
  left: var(--margen);
  bottom: 3.2vh;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-tinta-suave);
}

.pista::before {
  content: '';
  width: 3.4vw;
  min-width: 34px;
  height: 1px;
  background: currentColor;
}

/* ------------------------------------------------------------------ boton */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  background: var(--c-tinta);
  color: var(--c-pared);
  text-decoration: none;
  font-size: var(--t-chico);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 280ms var(--salida), color 280ms var(--salida);
}

.boton::after { content: '\2192'; transition: transform 280ms var(--salida); }
.boton:hover::after, .boton:focus-visible::after { transform: translateX(0.3rem); }
.boton:hover, .boton:focus-visible { background: var(--acento); color: var(--c-tinta); }

.boton--linea {
  background: transparent;
  color: var(--c-tinta);
  box-shadow: inset 0 0 0 1px var(--linea-clara);
}

.boton--claro { background: var(--c-pared); color: var(--c-tinta); }

/* --------------------------------------------------------------- nosotros */

/* Este titular tiene 62 caracteres, el doble que el que habia ("Cualquiera puede crear algo
   propio", 34). En la columna de 630 px del bloque de Nosotros, al cuerpo del resto de la pagina
   se parte en SEIS renglones. Bajarlo a dos renglones pediria 32 px, que es la mitad y ya no es un
   titular. A 42 px entra en los tres renglones escritos en el HTML, que es el punto medio honesto
   entre el largo del texto y el ancho de la columna. */
.nosotros__titulo { font-size: clamp(1.6rem, 3.1vw, 2.7rem); }

.nosotros .contenido {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}

.foto { margin: 0; }
.foto img { width: 100%; }

.foto figcaption {
  margin-top: 0.8rem;
  font-size: var(--t-dato);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-tinta-suave);
}

.nosotros .parrafo + .parrafo { margin-top: 1.1rem; }

@media (max-width: 860px) {
  .nosotros .contenido { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- eventos */

/* Sin fotos: las tres del sitio viejo eran de banco y se notaba al lado del video real. Hasta que
   el cliente mande material, la seccion es una lista de datos, que es informacion de verdad. */
/* Fondo BLANCO, no el crema del resto de Paint.
 *
 * Axel, 2026-09-24: "me gustaria probar como queda con fondo blanco y no gris". El crema
 * (`--c-pared`, #f6f2ea) es el muro sobre el que se pinta: funciona en las secciones que tienen
 * pintura encima. Eventos no tiene ninguna -es una lista de texto- asi que el crema ahi no lee
 * como muro, lee como gris sucio. En blanco la seccion se despega de las vecinas y los filetes
 * ganan contraste, que es lo unico que le da estructura a una lista.
 *
 * Va con `--linea-clara` propia: la del crema desaparece sobre blanco. */
.eventos {
  background: #fff;
  --linea-clara: color-mix(in oklch, var(--c-tinta) 13%, transparent);
}

.eventos .contenido { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

.lista-eventos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-clara); }

.evento {
  display: grid;
  grid-template-columns: 4vw minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--linea-clara);
  /* El movimiento de la fila. Dos cosas a la vez y las dos son del mismo gesto:
     el filete de abajo se dibuja de izquierda a derecha, y el numero se enciende.
     No hay desplazamiento: una lista que se mueve al pasar el cursor se lee inestable. */
  position: relative;
  transition: background 420ms var(--salida);
}

/* El filete que se dibuja. Va en un pseudo y no en el `border`, porque un borde no se puede
   animar por ancho sin mover el contenido de abajo. */
.evento::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--acento-en-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 560ms var(--salida);
}

.evento:hover { background: color-mix(in oklch, var(--acento-en-claro) 4%, transparent); }
.evento:hover::after { transform: scaleX(1); }

/* El numero crece un escalon y se pone pleno. Es lo unico que cambia de tamano, y cambia poco:
   en una lista de tres filas, mover mas que eso hace que el ojo pierda el renglon. */
.evento__n { transition: color 420ms var(--salida), transform 420ms var(--salida); }
.evento:hover .evento__n { transform: scale(1.35); transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .evento, .evento::after, .evento__n { transition: none; }
  .evento:hover .evento__n { transform: none; }
  .evento::after { transform: scaleX(1); opacity: 0.35; }
}

.evento__n {
  font-family: var(--tipo-display);
  font-size: var(--t-dato);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--acento-en-claro);
  font-variant-numeric: tabular-nums;
}

.evento h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.evento p { color: var(--c-tinta-suave); }

@media (max-width: 760px) {
  .evento { grid-template-columns: 3rem 1fr; }
  .evento p { grid-column: 2; }
}

/* ------------------------------------------------------------- fortalezas */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--linea-clara);
  border: 1px solid var(--linea-clara);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.grilla article {
  background: var(--c-pared);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 14vw;
}

.grilla article p { color: var(--c-tinta-suave); font-size: var(--t-chico); }

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

/* Las cuatro ciudades, en UNA linea a lo ancho de toda la pantalla.
 *
 * Estaban apiladas en cuatro renglones centrados dentro de una caja de 30ch: con dos ciudades
 * (Cancun y Puerto Vallarta) eso funcionaba, con cuatro nombres largos quedaba una columna alta y
 * angosta que no dice "estamos en toda la Riviera", dice "no entramos".
 *
 * Ahora es una banda a sangre, con la tipografia dimensionada en `vw` para que la linea LLENE el
 * ancho sea cual sea la pantalla, y un rombo entre ciudad y ciudad. Ocupar el ancho es el mensaje:
 * la lista es larga a proposito. */
.cierre__ciudades {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.34em;
  width: 100%;
  margin: 0;
  padding-inline: var(--margen);
  font-family: var(--tipo-display);
  /* El tamano sale del ancho de la ventana, no de un clamp con tope: el tope es justo lo que dejaba
     la linea corta y centrada en pantallas grandes. 3.05vw es lo que hace que los cuatro nombres
     mas los tres rombos toquen los dos margenes. */
  font-size: 3.05vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-pared);
}

.cierre__ciudades i {
  font-style: normal;
  font-size: 0.34em;
  color: var(--acento);
  transform: translateY(-0.35em);
}

.cierre__ciudades b { font-weight: inherit; }

/* En telefono una sola linea de 3vw es ilegible: pasa a dos columnas apiladas, que es lo unico que
   entra, pero con los rombos como separadores para que siga siendo la misma pieza. */
@media (max-width: 760px) {
  .cierre__ciudades {
    flex-wrap: wrap;
    white-space: normal;
    font-size: clamp(1.6rem, 8.5vw, 2.6rem);
    gap: 0.3em 0.45em;
  }
}

.cierre { background: var(--c-noche); color: var(--c-hueso); }
.cierre .contenido { color: var(--c-hueso); }
.cierre h2 .punto { color: var(--acento); }
.cierre p { color: color-mix(in oklch, var(--c-hueso) 72%, transparent); }

/* La banda que funde la pared clara en la noche del cierre. */
.fundido-a-noche {
  height: 30vh;
  background: linear-gradient(to bottom, var(--c-pared), var(--c-noche));
}

/* ------------------------------------------------------------- utilidades */

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

/* El foco tiene que verse sobre las dos paredes. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

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

/* La cinta de los 15 talleres pasando, entre la portada y la galeria.
   Es la `banda-en-marquesina` de layr: ahi el texto va en rojo sobre rojo al 10% y se vuelve
   legible al pasar el mouse. Aca el magenta es el acento, asi que la cinta es magenta y el texto
   es la tinta al 20%: mismo gesto, y el unico lugar del sitio donde el acento es fondo.
   El tween lo pone paint-marquesina.js; sin JS la cinta se ve igual, quieta. */
.marquesina {
  overflow: hidden;
  background: var(--c-f-magenta);
  border-block: 1px solid var(--c-tinta);
  padding-block: 1.1vw;
}

.marquesina__pista {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquesina__item {
  display: inline-flex;
  align-items: center;
  gap: 2.2vw;
  padding-right: 2.2vw;
  font-family: var(--tipo-display);
  font-size: clamp(1.6rem, 4.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in oklch, var(--c-tinta) 22%, transparent);
  transition: color 420ms var(--salida);
}

.marquesina:hover .marquesina__item { color: var(--c-tinta); }

.marquesina__item i { font-style: normal; font-size: 0.4em; color: var(--c-tinta); }

@media (prefers-reduced-motion: reduce) {
  .marquesina__item { color: var(--c-tinta); }
}

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

/* La cinta de clientes. Loopea sola, como la de talleres, pero mas lenta: son logos, no titulares,
   y a la velocidad de la otra no se leen.
   Los logos ya vienen con el fondo recortado desde scripts/logos-cliente.mjs: nada de
   `mix-blend-mode` en una fila de 18 imagenes que se mueve.
   En gris al reposo y en color al pasar por encima: una fila de nueve logos a todo color compite
   con la pintura. */
.clientes .contenido { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.clientes__cinta {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 2rem);
  border-block: 1px solid var(--linea-clara);
  /* Sin la mascara de degradado: existia para que la cinta se desvaneciera en los bordes. Sin
     cinta, lo unico que hacia era comerse el primer y el ultimo logo. */
}

/* Grilla quieta y centrada, igual que en el portal. `wrap` + `center` reparte lo que entra y
   CENTRA el sobrante, asi que la ultima fila queda equilibrada sea cual sea el ancho: nueve no es
   divisible por ninguna cuenta de columnas que sirva para todas las pantallas. */
.clientes__grilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.clientes__item { flex: 0 0 auto; }

/* Grandes de verdad: el pedido de Axel del 24/09. Casi el doble que antes. Nueve logos de hotel
   son la prueba social del sitio; a 30 px no se lee ninguno y no prueban nada. */
.clientes__item img {
  height: clamp(3.4rem, 6.2vw, 6rem);
  width: auto;
  filter: grayscale(1) contrast(1.15) opacity(0.66);
  transition: filter 420ms var(--salida), transform 420ms var(--salida);
}

.clientes__item:hover img { transform: scale(1.04); }

.clientes__item:hover img { filter: grayscale(0) contrast(1) opacity(1); }

@media (prefers-reduced-motion: reduce) {
  .clientes__item img { filter: grayscale(0) contrast(1) opacity(0.9); }
}