/* ==========================================================================
   Cometa Taller · Ajustes finales (assets/css/ajustes.css)
   --------------------------------------------------------------------------
   Esta hoja se encola la ÚLTIMA, después de componentes.css y después del CSS
   de cada pantalla. Existe por una razón concreta: las hojas de
   assets/css/pantallas/ cargan después de componentes.css, así que una
   corrección escrita allí perdía contra ellas y había que subir la
   especificidad o repetirla pantalla por pantalla. Aquí gana por orden, que es
   más limpio que ganar por peso.

   Lote 45 · Las fotos, rectas y sin sombra
   --------------------------------------------------------------------------
   La maqueta inclinaba y levantaba cada fotografía: el hero giraba -4°, el
   plano -3°, el sistema 3°, el taller 4°, el retrato de contacto 1.5°, las dos
   fotos de envíos -2.5° y 2°, y casi todas llevaban una sombra proyectada de
   hasta 70 px. Funciona cuando la foto es un recorte sobre fondo transparente,
   que es como estaba pensada la maqueta. Las fotos reales están tomadas
   derechas, así que la inclinación se lee como un encuadre torcido y la sombra
   proyectada, como un montaje.

   Se quitan las dos cosas de todo lo que sea una fotografía. No se tocan:
   - los textos verticales (badge del hero, SKU de la ficha), que giran -90°
     porque ese es su oficio;
   - las bandas inclinadas de sección, que ya contra-inclinan su contenido —una
     foto dentro de una banda sale recta, está comprobado;
   - los anillos de foco (box-shadow en :focus), que son accesibilidad;
   - las tarjetas de interfaz —formularios, megamenú, resumen de compra, barra
     de filtros—, que no son fotos.
   ========================================================================== */

/*
 * La mayoría de las sombras de foto venían de este único token, usado como
 * `filter: var(--ct-sombra-producto)` en la tienda, el megamenú, las colecciones,
 * la ficha, el sistema y el taller. Apagarlo aquí las apaga todas a la vez, y
 * deja el token vivo por si algún día se quiere recuperar en un sitio concreto.
 */
:root {
  --ct-sombra-producto: none;
  --ct-sombra-tarjeta: none;
}

/* ---- 1. Fotos del home ---- */

.ct-hero__img-wrap {
  transform: none;
}

.ct-hero__img,
.ct-plano__img,
.ct-sistema__img,
.ct-taller__img {
  transform: none;
  filter: none;
}

/* La animación de flote subía y bajaba la foto, pero además la mantenía girada
   entre -4° y -3°. Se queda el flote; se va el giro. */
@keyframes ct-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

/* ---- 2. Fotos de la tienda y del catálogo ---- */

.ct-tienda-hero__img,
.ct-catalogo-tile__img,
.ct-teja__img,
.ct-carta__img,
.ct-coleccion-fila__img,
.ct-coleccion-hero__img,
.ct-megamenu__cajon-img img,
.ct-encaja-card__img-wrap img,
.ct-producto-foto-principal,
.ct-carrito-item-img,
.ct-config-preview-img {
  transform: none;
  filter: none;
}

/* Las cajas que enmarcan una foto llevaban la sombra por ella: en el catálogo,
   en las tejas del pie y en las tarjetas de colección la sombra se lee como
   sombra de la foto, no de una tarjeta. */
.tile,
.ct-tile,
.ct-catalogo-tile,
.ct-carta-wrap,
.ct-teja__caja-img,
.ct-sistema-rosca__plano-wrap {
  box-shadow: none;
}

/* El levantamiento al pasar el cursor se queda —es la señal de que la pieza es
   pulsable—; lo que se va es la sombra que lo acompañaba. */
.tile:hover,
.ct-catalogo-item:hover .ct-catalogo-tile,
.ct-teja:hover .ct-teja__caja-img {
  box-shadow: none;
}

.ct-carta:hover .ct-carta__img {
  transform: scale(1.05);
}

.ct-config-preview-img:hover {
  transform: scale(1.03);
}

/* ---- 3. Fotos de Envíos y Contacto ---- */

.ct-envios-llega__figura:nth-child(1) .ct-envios-llega__img,
.ct-envios-llega__figura:nth-child(2) .ct-envios-llega__img,
.ct-envios-llega__img {
  transform: none;
  box-shadow: none;
  filter: none;
}

.ct-envios-llega__figura:hover .ct-envios-llega__img {
  transform: scale(1.015);
}

.ct-contacto-quien__img {
  transform: none;
  box-shadow: none;
  filter: none;
}

/* La plancha de color que va detrás del retrato giraba -3° para hacer juego con
   el retrato girado. Sin el giro del retrato, sola, se vería torcida. */
.ct-contacto-quien__retrato::before {
  transform: none;
}

/* ---- 4. Fotos de El sistema y El taller ---- */

.ct-sistema-hero__img,
.ct-taller-hero__img {
  transform: none;
  filter: none;
}

/* ==========================================================================
   Lote 47 · El hero del home, a sangre
   --------------------------------------------------------------------------
   El hero estaba maquetado con posiciones absolutas en píxeles fijos: 760 px
   de alto, el titular a 54 px del borde, el bloque de botones a 566 px y el
   recorte a la derecha, girado. Funcionaba mientras la imagen fuera un objeto
   recortado de un ancho conocido.

   Ahora la foto cubre la escena entera y el texto se apoya encima, en la mitad
   izquierda, que es la que el velo mantiene legible. Como el alto lo marca la
   proporción de la foto y no una cifra fija, el titular pasa a escalar con el
   ancho en vez de quedarse en 116 px.

   Esto vive aquí y no en pantallas/home.css porque esa hoja carga DESPUÉS de
   componentes.css y antes que ésta: es la única que gana por orden.
   ========================================================================== */

.ct-hero-escena--foto {
  position: relative;
  height: auto;
  aspect-ratio: 21 / 9;
  min-height: 560px;
  max-height: 840px;
  overflow: hidden;
  background: var(--ct-hondo, #2A1560);
}

/* Sobre una fotografía, la cometa giratoria compite con el sujeto. */
.ct-hero-escena--foto .ct-hero__cometa-fondo {
  display: none;
}

.ct-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Una foto de fondo no impone su proporción: la toma de la caja que llena. */
.ct-foto--fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.ct-hero__contenedor--foto {
  position: relative;
  z-index: 10;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--ct-margen, 52px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.ct-hero__columna {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  max-width: 560px;
}

/*
 * 116 px fijos no caben en una columna que ahora es la mitad del ancho: en
 * 1440 px la columna mide 560 y «ACCESORIOS» se salía. Escala con el ancho y
 * se detiene en 92, que es donde deja de crecer la caja.
 */
.ct-hero-escena--foto .ct-hero__titulo {
  font-size: clamp(46px, 6.2vw, 92px);
  margin-top: 0;
  text-wrap: balance;
}

.ct-hero-escena--foto .ct-hero__parrafo {
  max-width: 44ch;
}

/* El rótulo vertical se ancla al alto de la escena, que ya no es fijo. */
.ct-hero-escena--foto .ct-hero__vertical-badge {
  top: auto;
  bottom: 28px;
  color: rgba(247, 245, 240, .8);
  z-index: 12;
}

/* El marco de encuadre, mientras no haya foto, se aparta del texto real. */
.ct-foto--con-zona .ct-foto__marco {
  margin-left: auto;
  text-align: left;
}

@media (max-width: 1100px) {
  .ct-hero-escena--foto {
    aspect-ratio: 16 / 10;
  }
  .ct-hero__columna {
    max-width: 62%;
  }
}

@media (max-width: 760px) {
  .ct-hero-escena--foto {
    aspect-ratio: 4 / 5;
    min-height: 520px;
    max-height: none;
  }
  /* En vertical el velo sube desde abajo, así que el texto baja con él. */
  .ct-hero__contenedor--foto {
    align-items: flex-end;
    padding-bottom: 40px;
  }
  .ct-hero__columna {
    max-width: 100%;
    gap: 16px;
  }
  .ct-hero-escena--foto .ct-hero__vertical-badge {
    display: none;
  }
  .ct-foto--con-zona .ct-foto__marco {
    margin-left: 0;
  }
  /* La zona reservada del marco también cambia de sitio en vertical. */
  .ct-foto--con-zona .ct-foto__zona {
    inset: 58% 0 0 0 !important;
  }
}

/* ==========================================================================
   Lote 48 · Las colecciones, con foto
   --------------------------------------------------------------------------
   La carta era color plano de la colección con un recorte flotando en el
   centro, entre dos reglas. Ahora la foto vertical llena la carta y el texto
   se apoya encima, sobre la viñeta.

   Lo que se pierde al hacerlo es el golpe cromático: la carta ya no es un
   rectángulo verde, morado o lila. El color de cada colección se queda donde
   sigue funcionando sobre una foto: el botón, que tiene fondo propio, y el
   número fantasma.

   Lo que NO se puede conservar es el color de la colección en el texto. Sobre
   la viñeta —tinta al 84 %— el texto va en crema (15:1) y la etiqueta en sol
   (13,8:1). Si la etiqueta llevara el color del término, Antojo escribiría
   #1C0E3D sobre tinta y sería ilegible.
   ========================================================================== */

.ct-carta--foto {
  background-color: var(--ct-hondo, #2A1560);
  color: var(--ct-crema, #F7F5F0);
  justify-content: space-between;
}

.ct-carta__foto {
  z-index: 0;
}

.ct-carta--foto .ct-carta__numero {
  color: rgba(247, 245, 240, .14);
  z-index: 1;
}

.ct-carta--foto .ct-carta__marco {
  z-index: 2;
  opacity: .3;
}

.ct-carta--foto .ct-carta__encabezado,
.ct-carta--foto .ct-carta__pie {
  z-index: 3;
}

.ct-carta--foto .ct-carta__titulo {
  color: var(--ct-crema, #F7F5F0);
}

.ct-carta--foto .ct-carta__sub {
  color: var(--ct-sol, #F9E069);
  opacity: 1;
}

.ct-carta--foto .ct-carta__parrafo {
  color: rgba(247, 245, 240, .92);
  opacity: 1;
}

/* Sin foto, la carta enseña el marco: el rótulo del marco se centra y el texto
   de la carta sigue por encima, así que se le baja el peso para que no compitan. */
.ct-carta--foto .ct-foto--vacia .ct-foto__marco {
  max-width: 24ch;
}

/* ---- Las filas de la página Colecciones ---- */

.ct-coleccion-fila__foto {
  max-width: 440px;
  margin-inline: auto;
  border-radius: 24px;
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .ct-coleccion-fila__foto {
    max-width: 100%;
  }
}

/* ==========================================================================
   Lote 49 · Los dos paneles del home
   --------------------------------------------------------------------------
   «El sistema» y «El taller» llevaban un recorte girado con sombra proyectada.
   Ahora son foto de ambiente en marco recto.

   Lo de la banda inclinada: la sección del sistema vive dentro de .ct-banda,
   inclinada -3,2°, y su contenido va contra-inclinado +3,2°, así que la foto
   sale recta —medido, no supuesto—. Lo que queda en diagonal es el borde de la
   banda. Va la versión con marco redondeado dentro de la banda, que conserva
   el sol alrededor; la otra —foto sangrando hasta el borde inclinado— es un
   cambio de clase en la plantilla.
   ========================================================================== */

.ct-sistema__foto,
.ct-taller__foto {
  border-radius: 26px;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

/* El envoltorio de GSAP dimensionaba la columna a partir del ancho del recorte;
   con una caja de proporción fija hay que darle el ancho a la columna. */
.ct-sistema__img-wrap,
.ct-taller__img-wrap {
  width: 100%;
  transform: none;
}

/* Variante B: la foto sangra hasta el borde inclinado de la banda. */
.ct-sistema__foto--bleed {
  max-width: none;
  border-radius: 0;
  aspect-ratio: 3 / 4;
}

@media (max-width: 900px) {
  .ct-sistema__foto,
  .ct-taller__foto {
    max-width: 100%;
  }
}

/* ==========================================================================
   Lote 50 · Las páginas informativas
   --------------------------------------------------------------------------
   Heros de El taller y El sistema, y los dos bloques de Envíos y Contacto que
   se diseñaron hace unos lotes y siguen sin fotos.

   Esos dos últimos desaparecían enteros mientras no hubiera imagen, que era lo
   honesto cuando no había forma de saber qué hacía falta. Ahora se pintan con
   su marco, pero sólo para quien puede editar: un visitante no tiene por qué
   leer las notas de la sesión de fotos.
   ========================================================================== */

.ct-taller-hero__foto,
.ct-sistema-hero__foto {
  border-radius: 26px;
  width: 100%;
}

.ct-envios-llega__foto,
.ct-contacto-quien__foto {
  border-radius: 20px;
  width: 100%;
}

/*
 * La caja vacía que ve un visitante: sin trama, sin borde de puntos y sin
 * rótulo. Se queda en el color de fondo, para que no parezca un error de carga
 * ni un andamio olvidado.
 */
.ct-foto--muda {
  background: rgba(247, 245, 240, .06);
  border: 0;
}

@media (max-width: 900px) {
  .ct-taller-hero__foto,
  .ct-sistema-hero__foto {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   Lote 51 · La foto de ambiente de cada pieza
   --------------------------------------------------------------------------
   El recorte se dibuja DENTRO de la caja lila, con aire alrededor: es un
   objeto puesto sobre un color. La foto de ambiente hace lo contrario, llena
   la caja hasta el borde, porque la foto ES el fondo.

   Sólo la piden las tejas del home. El megamenú, la búsqueda y el 404 pintan
   la misma teja sin pedir ambiente, así que siguen con el recorte.
   ========================================================================== */

.ct-teja__img--ambiente {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  max-height: none;
  padding: 0;
  filter: none;
  transform: none;
}

/* La caja recorta la foto con su propio radio. */
.ct-teja__caja-img:has(.ct-teja__img--ambiente) {
  padding: 0;
  overflow: hidden;
}

/* ==========================================================================
   Lote 52 · Los puntos de color, con filete
   --------------------------------------------------------------------------
   Con los hex reales de los filamentos en su sitio, diez de los diecinueve
   colores que usa el catálogo quedan casi invisibles sobre el lila de la
   tarjeta de paleta. Medido:

     Teal Green    #85E2DD  1.02:1
     Sakura Pink   #FFC2F4  1.05:1
     Vivit Yellow  #EAC642  1.08:1
     Mint Green    #A7ECC1  1.13:1
     Sunshine Yellow #F9E069 1.17:1   ← es el mismo sol de la marca
     Beige         #D4B996  1.22:1
     Ice Blue      #B4F5FE  1.28:1
     Green Flash   #75CB5D  1.30:1
     Pastel Purple #B2A8FF  1.37:1
     Blanco        #FFFFFF  1.54:1

   Un punto de color no es texto y no le aplica el 4,5:1, pero a 1,02 el disco
   literalmente desaparece contra el fondo y la paleta se lee con dos colores
   en vez de tres. Un filete interior de un píxel los devuelve sin ensuciar el
   color: va por dentro, así que no cambia el tamaño del punto ni miente sobre
   el tono.
   ========================================================================== */

.ct-paleta-punto,
.ct-paleta-card__dot,
.ct-cuenta-paleta-mini__puntos span,
.ct-colores-punto {
  box-shadow: inset 0 0 0 1px rgba(26, 15, 46, .28);
}

/* Sobre fondo oscuro el filete tinta no se ve: ahí va en crema. */
.ct-cuenta-dashboard .ct-cuenta-paleta-mini__puntos span {
  box-shadow: inset 0 0 0 1px rgba(26, 15, 46, .22);
}

/* ==========================================================================
   Lote 54 · La caja de la teja del home, en 4:5
   --------------------------------------------------------------------------
   La foto de ambiente salía mal encuadrada y la culpa no era de la foto: era
   de la caja. La caja del home mide 270×270 —cuadrada— y la fotografía del
   catálogo es 4:5 vertical, que es lo que dice la dirección fotográfica y lo
   que WordPress recorta en el tamaño `ct-panel` (1400×1750). Meter un 4:5 en
   un cuadrado con `object-fit: cover` obliga a cortar un 20% de alto: por eso
   el vaso aparecía con la tapa y la base comidas aunque el producto estuviera
   justo en la mitad del encuadre.

   No hay recorte horizontal que enseñe entera una pieza fotografiada de pie.
   La caja es la que tiene que ceder. Con 4:5 la foto entra exacta —cero
   recorte— y el recorte sin fondo, que va con `contain`, sólo gana aire.

   La tarjeta de acción en Sol vivía clavada a los mismos 270px para cuadrar
   la fila, así que sigue a la caja con la misma proporción.

   Sólo toca la rejilla del home. El megamenú, la búsqueda y el 404 siguen con
   su caja compacta.
   ========================================================================== */

.ct-catalogo__grilla .ct-teja__caja-img {
  height: auto;
  aspect-ratio: 4 / 5;
}

.ct-catalogo__grilla .ct-teja__img {
  max-height: 100%;
}

.ct-catalogo__grilla .ct-teja-accion {
  height: auto;
  aspect-ratio: 4 / 5;
}

/* ==========================================================================
   Lote 54 · El aviso del filtro del megamenú, legible
   --------------------------------------------------------------------------
   El rótulo que dice qué colección se está filtrando, y el nombre de la
   colección bajo el cursor, iban en Sol (#F9E069) sobre el panel del megamenú,
   que es Lila (#D9C9F5). Ese par mide 1,17:1 —está en la lista de pares
   prohibidos de la guía de marca—: el aviso se escribía y no se veía.

   Violeta sobre Lila mide 6,85:1 y ya está verificado. Se nota el cambio de
   color al pasar el cursor y además se lee.
   ========================================================================== */

.ct-megamenu__filtro-aviso {
  color: var(--ct-violeta, #4A2A8A);
}

.ct-megamenu__tab.is-previsualizando {
  color: var(--ct-violeta, #4A2A8A);
}

/* ==========================================================================
   Lote 55 · El giro de las cartas de colección, de vuelta
   --------------------------------------------------------------------------
   Vuelve el naipe lanzado sobre la mesa: cada carta con su propio ángulo, no
   todas con el mismo. El ángulo llega como `--col-giro` desde la plantilla,
   de modo que lo decide el contenido y lo pinta esta hoja. Antes era un
   `transform` escrito en el atributo style y por eso, cuando hubo que
   enderezar, hubo que borrarlo del PHP: un estilo en línea no se discute
   desde una hoja.

   Gira la carta, no la foto: la foto va de fondo dentro de la carta, con su
   propio recorte 4:5, así que lo que se inclina es el objeto entero y no el
   encuadre. Es la diferencia entre un naipe caído y una foto mal pegada.

   La sombra se muda de la envolvente a la carta. Si se queda en la envolvente
   —que no gira, porque ahí escribe la animación de entrada— queda una mancha
   recta detrás de una carta torcida, y se ve el truco.

   Al pasar el cursor la carta se endereza. No es adorno: son 630 px de texto
   y un botón, y se leen mejor a 0°. También da el acuse de recibo de que la
   carta responde.
   ========================================================================== */

.ct-carta-wrap {
  box-shadow: none;
}

.ct-carta {
  --ct-giro: var(--col-giro, 0deg);
  transform: rotate(var(--ct-giro)) scale(var(--ct-escala, 1));
  transform-origin: 50% 50%;
  box-shadow: var(--ct-sombra-carta);
  transition: transform .22s var(--ct-ease, cubic-bezier(.16,1,.3,1));
}

/* El giro se apaga por variable, no reescribiendo el transform entero: así la
   escala del foco no se pierde al pasar el cursor. */
.ct-carta-wrap:hover .ct-carta,
.ct-carta-wrap:focus-within .ct-carta {
  --ct-giro: 0deg;
}

/* Quien pide menos movimiento se queda con las cartas derechas y sin
   transición. El tamaño sí se conserva: no es movimiento, es la jerarquía. */
@media (prefers-reduced-motion: reduce) {
  .ct-carta {
    --ct-giro: 0deg;
    transition: none;
  }
}

/* ==========================================================================
   Lote 56 · El foco del carrusel: manda la carta del centro
   --------------------------------------------------------------------------
   Con el bucle puesto se ven cuatro cartas a la vez y las cuatro pesan igual:
   cuatro bloques de color saturado, cada uno con su foto, su título y su
   botón. No hay dónde mirar. Y como todas gritan, ninguna se oye.

   `carrusel.js` mide, carta por carta, lo lejos que está su centro del centro
   de lo que se ve y escribe el resultado en `--ct-foco`: 1 en la del medio, 0
   en las que ya están a casi dos cartas. Aquí sólo se lee esa variable.

   Tres cosas ceden a la vez, porque una sola no basta para separar planos:

     · el tamaño, de 1 a 0,78 — la del centro se queda exactamente como está
       hoy y son las otras las que se retiran, que es lo que se pidió;
     · la saturación, de 1 a 0,6 — el color es lo que hace ruido, y bajarlo
       apaga la carta sin borrarla;
     · la opacidad, de 1 a 0,88 — apenas un velo del violeta del fondo, lo
       justo para que se lean como un plano de atrás.

   Ninguna llega a cero: el encargo era que se siga viendo lo que viene.

   Los números se ajustaron después de verlos. Lo que ensuciaba no era la
   saturación sino la opacidad: al 0,7 sobre un fondo violeta oscuro la carta
   no se apagaba, se ensombrecía, y una foto de producto en penumbra parece
   mal iluminada, no de segundo plano. Se sube la opacidad a 0,88 y la
   saturación a 0,6 —que descolora sin agrisar— y el trabajo de separar los
   planos se le pasa al tamaño, que baja a 0,78. La jerarquía la marca la
   escala; el color sólo la acompaña.

   Sin JavaScript `--ct-foco` no existe, el valor de respaldo es 1 y las cartas
   se ven como hasta ahora. El efecto es una mejora, no un requisito.
   ========================================================================== */

.ct-carta-wrap {
  --ct-foco: 1;
}

.ct-carta {
  --ct-escala: calc(.78 + .22 * var(--ct-foco, 1));
  filter: saturate(calc(.6 + .4 * var(--ct-foco, 1)));
  opacity: calc(.88 + .12 * var(--ct-foco, 1));
  transition: transform .22s var(--ct-ease, cubic-bezier(.16,1,.3,1)),
              filter .3s var(--ct-ease, cubic-bezier(.16,1,.3,1)),
              opacity .3s var(--ct-ease, cubic-bezier(.16,1,.3,1));
}

/* La del centro va delante: al crecer invade a las vecinas y tiene que pasar
   por encima, no por debajo. */
.ct-carta-wrap {
  z-index: calc(1 + var(--ct-foco, 1) * 10);
}

/* ==========================================================================
   Lote 59 · La cabecera de cada colección, con la foto de fondo
   --------------------------------------------------------------------------
   La foto pasa de tarjeta flotando a la derecha a fondo a sangre, como el
   hero del home y como la portada de Colecciones. Tres páginas, un mismo
   gesto.

   Lo que hay que resolver es el color. La cabecera de cada colección vive de
   su color plano —verde en Raíz, lila en Pausa— y el texto se escribe en la
   tinta que contrasta con ese color. Al tapar el color con una foto y un velo
   oscuro, esa tinta deja de tener con qué contrastar: el titular de Raíz es
   oscuro porque su fondo era verde claro, y sobre el velo se volvería ilegible.

   Así que con foto se cambia la tinta entera a crema, que sobre el velo tinta
   mide 16,7:1. Basta redefinir `--col-tinta`: el titular, el párrafo y las
   píldoras de paleta ya la leen, así que se enderezan los tres de una vez.

   La identidad de la colección no se pierde: la pone la fotografía, que en
   estas escenas tiene el color de su mundo —verde Raíz, azul Pausa—, y eso
   identifica mejor que un rectángulo de color plano.

   Sin foto no cambia nada: la cabecera se queda con su color y su tinta.
   ========================================================================== */

.ct-coleccion-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ct-coleccion-hero--foto {
  --col-tinta: var(--ct-crema, #F7F5F0);
  background-color: var(--ct-hondo, #2A1560);
}

/* El rótulo en Sol, siempre. La regla de «fondo claro» lo mandaba al color del
   botón de la colección, que sobre el velo oscuro puede desaparecer: el de
   Antojo es #1C0E3D y mide 1,1:1 contra el velo. */
.ct-coleccion-page[data-modo-claro="true"] .ct-coleccion-hero--foto .ct-coleccion-hero__tag,
.ct-coleccion-hero--foto .ct-coleccion-hero__tag {
  color: var(--ct-sol, #F9E069);
}

/* ==========================================================================
   Lote 58 · La portada de Colecciones, con foto de fondo
   --------------------------------------------------------------------------
   Mismo mecanismo que el hero del home: la foto se pone detrás de todo, a
   sangre, y el texto vive encima. El velo de la izquierda es lo que hace que
   el titular se lea: sin él, un titular crema sobre una foto clara depende de
   la suerte de lo que haya en ese trozo de imagen.

   La caja no cambia de alto según la foto. Se queda en su altura de siempre y
   la foto se recorta para llenarla, que es lo que hace `ct-foto--fondo`: una
   foto de fondo no impone su proporción, la toma de la caja que llena.
   ========================================================================== */

.ct-colecciones-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Con foto, la sección necesita un suelo oscuro propio: mientras la imagen
   carga —y en los bordes, si la proporción no cuadra— lo que se ve es esto y
   no el violeta de la página, que dejaría el texto a media asta. */
.ct-colecciones-hero--foto {
  background-color: var(--ct-hondo, #2A1560);
  min-height: 520px;
}

/* ==========================================================================
   Lote 60 · Las franjas de colección: la foto llena la franja
   --------------------------------------------------------------------------
   La foto pasa de ocupar la mitad de la fila a ser el fondo de la banda
   entera, como el hero del home, la portada de Colecciones y la cabecera de
   cada colección. Cuatro sitios, un mismo gesto.

   Va DENTRO de la banda, que está inclinada 2,4°, así que se inclina con ella
   y llena exactamente su paralelogramo. Si se pusiera fuera, asomaría por las
   esquinas.

   El color de la colección ahora llega como variable y no como `color:` en
   cada elemento. Eso es lo que permite lo de abajo: con foto, la tinta elegida
   para contrastar con un color plano se queda sin nada con qué contrastar —el
   nombre de Raíz es oscuro porque su fondo era verde claro—, así que se cambia
   a crema de una vez para los cinco elementos.
   ========================================================================== */

.ct-banda__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* El color de la colección, ahora desde las variables. */
.ct-colecciones-lista .ct-banda {
  background-color: var(--col-fondo);
  color: var(--col-tinta);
}

.ct-colecciones-lista .ct-banda__dentro {
  position: relative;
  z-index: 2;
}

.ct-coleccion-fila__meta,
.ct-coleccion-fila__nombre,
.ct-coleccion-fila__parrafo,
.ct-coleccion-fila__pill {
  color: var(--col-tinta);
}

.ct-coleccion-fila__pill {
  border-color: color-mix(in srgb, var(--col-tinta) 27%, transparent);
}

.ct-coleccion-fila__btn {
  background-color: var(--col-btn-bg);
  color: var(--col-btn-tinta);
}

/* ---- Con foto ---- */

.ct-banda--foto {
  --col-tinta: var(--ct-crema, #F7F5F0);
  background-color: var(--ct-hondo, #2A1560);
}

/*
 * El velo aclara la izquierda. En las filas invertidas el texto está a la
 * derecha, así que el velo se voltea con él: si no, el nombre queda sobre la
 * parte clara de la foto y se pierde.
 */
.ct-banda--foto:has(.ct-coleccion-fila--invertida) .ct-foto__velo {
  transform: scaleX(-1);
}

/*
 * El número ya no va detrás de la foto sino delante.
 *
 * Vivía al 12 % de opacidad porque su trabajo era ser una marca de agua sobre
 * un color plano y liso. Sobre una fotografía eso no existe: cae justo encima
 * de la parte clara —el texto está al otro lado, así que el número siempre
 * queda fuera del velo— y desaparece.
 *
 * Sube al 55 % en crema y se le pone una sombra difusa en tinta. La sombra no
 * se ve como sombra: lo que hace es separarlo del fondo cuando la foto de
 * debajo es clara, que es cuando un crema translúcido se evapora.
 */
.ct-coleccion-fila__fantasma {
  z-index: 3;
  color: color-mix(in srgb, var(--col-tinta) 12%, transparent);
}

.ct-banda--foto .ct-coleccion-fila__fantasma {
  color: color-mix(in srgb, var(--ct-crema, #F7F5F0) 55%, transparent);
  text-shadow: 0 6px 40px rgba(26, 15, 46, .6);
}

/*
 * Sin el hueco de la foto, la fila es una sola columna de texto que se queda
 * en su mitad: la otra mitad es la fotografía. El orden lo decide la columna,
 * no el orden de los elementos, porque ya sólo queda uno.
 */
.ct-coleccion-fila__info {
  grid-column: 1;
}

.ct-coleccion-fila--invertida .ct-coleccion-fila__info {
  grid-column: 2;
  justify-self: end;
}

@media (max-width: 900px) {
  .ct-coleccion-fila__info,
  .ct-coleccion-fila--invertida .ct-coleccion-fila__info {
    grid-column: 1;
    justify-self: start;
  }
}

/* ==========================================================================
   Lote 61 · Cuatro cosas que quedaron a medias
   ========================================================================== */

/* --- 1. El número de la colección, entero ---------------------------------
   Vivía a `bottom: -60px` dentro de una fila con `overflow: hidden`: le
   faltaba el pie. Eso tenía sentido cuando era una marca de agua al 12 % y el
   recorte se leía como gesto. Ahora que va delante de la foto y se lee, un
   número cortado por la mitad no es un gesto: es un número cortado. */

.ct-coleccion-fila__fantasma {
  bottom: 18px;
  font-size: clamp(120px, 17vw, 240px);
}

/* --- 2. El aviso de «ningún filtro», callado hasta que haga falta ---------
   El bloque sale con el atributo `hidden` y lo enciende el filtrado en vivo.
   Pero `.ct-coleccion-vacia` trae su propio `display` desde la hoja de la
   colección, y eso gana al `display:none` que el navegador le pone a
   `[hidden]`. Resultado: «Ninguna pieza coincide con ese filtro» impreso al
   final de la lista, justo debajo de las piezas que sí coinciden. */

.ct-coleccion-vacia[hidden] {
  display: none !important;
}

/* --- 3. «Encaja con»: el nombre y el botón, ahora enlaces -----------------
   Eran un <span> y un <button> que no llevaban a ninguna parte. El botón ya
   traía su aspecto de la hoja; sólo le falta ser un bloque para que el
   relleno cuente, que en un enlace en línea no cuenta. */

.ct-encaja-card__nombre {
  display: block;
  text-decoration: none;
}

.ct-encaja-card__nombre:hover,
.ct-encaja-card__nombre:focus-visible {
  text-decoration: underline;
}

.ct-encaja-card__btn {
  display: inline-block;
  line-height: 1.2;
}

/* --- 4. La foto de ambiente en las tarjetas -------------------------------
   Una foto de ambiente es un rectángulo con fondo, no un recorte flotando:
   llena su caja y se recorta con ella. Sin esto entraría con el `contain` y
   el `max-height` del recorte y quedaría pequeña y centrada, con el lila
   alrededor. */

.ct-catalogo-tile__img--ambiente,
.ct-catalogo-tile:has(.ct-catalogo-tile__img--ambiente) .ct-catalogo-tile__img {
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.ct-catalogo-tile:has(.ct-catalogo-tile__img--ambiente) {
  padding: 0;
  overflow: hidden;
}

/* ==========================================================================
   Lote 62 · Las cajas del catálogo, verticales
   --------------------------------------------------------------------------
   Las tejas del home ya son 4:5 desde el lote 54, porque es la forma de la
   fotografía. Las del catálogo se quedaron atrás: la tienda en 280 px de alto
   y la grilla de colección en 340, las dos más anchas que altas. Con el
   recorte sin fondo daba casi igual —un objeto centrado sobre lila cabe en
   cualquier caja—, pero con la foto de ambiente no: una foto vertical metida
   en una caja apaisada se recorta por arriba y por abajo, que es donde está
   la pieza.

   Misma proporción en los tres sitios, entonces. Y el alto deja de ser un
   número fijo: lo pone el ancho de la columna, así que la caja se adapta sola
   a cuántas columnas haya.
   ========================================================================== */

.ct-catalogo-tile {
  height: auto;
  aspect-ratio: 4 / 5;
}

.ct-catalogo-tile__img {
  max-height: 100%;
}

/* ==========================================================================
   Lote 62b · La viñeta de las cartas de colección, sólo abajo
   --------------------------------------------------------------------------
   Eran dos degradados: uno desde arriba, para el nombre, y otro desde abajo,
   para el párrafo y el botón. Se quita el de arriba.

   El nombre se queda sin su franja, así que lleva una sombra difusa en tinta
   para no depender de lo que haya en esa parte de la foto. No se ve como
   sombra —no hay desplazamiento, sólo desenfoque—: lo único que hace es que
   la letra no se pierda si detrás cae una zona clara.
   ========================================================================== */

.ct-foto--vineta .ct-foto__velo {
  background: linear-gradient(
    to top,
    rgba(26, 15, 46, .88) 0%,
    rgba(26, 15, 46, .62) 18%,
    rgba(26, 15, 46, 0) 32%
  );
}

.ct-carta__titulo,
.ct-carta__sub {
  text-shadow: 0 0 24px rgba(26, 15, 46, .75);
}

/* ==========================================================================
   Lote 63 · Tres arreglos de contraste y encuadre
   ========================================================================== */

/* --- 1. «Encaja con»: la tarjeta deja de estirarse ------------------------
   Las tarjetas llevaban `flex: 1`, que reparte TODO el ancho entre las que
   haya. Con tres quedaban bien; con una sola, esa una se comía la banda
   entera y la foto salía espichada dentro de una caja de 900 px de ancho por
   180 de alto.

   Ahora la tarjeta tiene su ancho y la fila empieza por la izquierda: una,
   dos o tres se ven igual de bien. Y la foto se enmarca en 4:5 y se recorta
   centrada, como en el resto del sitio, en vez de encogerse hasta caber. */

.ct-encaja-productos {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.ct-encaja-card {
  flex: 0 1 300px;
  max-width: 340px;
}

.ct-encaja-card__img-wrap {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--ct-radio-tarjeta, 18px);
  overflow: hidden;
  background: rgba(26, 15, 46, .06);
}

.ct-encaja-card__img-wrap img {
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* --- 2. El megamenú: recorte centrado y texto legible ---------------------
   La teja nació para el home, que va sobre violeta: por eso su nombre es
   crema y su línea es crema al 60 %. El panel del megamenú es Lila. Crema
   sobre lila mide 1,41:1 — está en la lista de pares prohibidos de la guía—,
   así que el nombre y el precio se escribían y no se veían.

   Y la caja de la foto medía 270 px de alto en una columna de ~180: una foto
   vertical ahí se recorta en una tira estrecha. Con 4:5 el recorte respira y
   cae centrado, que es lo que deja ver la pieza. */

.ct-megamenu .ct-teja__caja-img {
  height: auto;
  aspect-ratio: 4 / 5;
}

.ct-megamenu .ct-teja__img {
  max-height: 100%;
}

.ct-megamenu .ct-teja__nombre {
  color: var(--ct-tinta);
}

.ct-megamenu .ct-teja__linea {
  color: rgba(26, 15, 46, .66);
}

.ct-megamenu .ct-teja__precio,
.ct-megamenu .ct-precio {
  color: var(--ct-violeta);
}

/* --- 3. El rótulo de la carta de colección --------------------------------
   «Colección 01 · crecer» iba en la tinta de la colección al 70 % de opacidad.
   Eso funcionaba cuando debajo había un color plano elegido para contrastar
   con ella. Desde que la carta tiene foto y se quitó el velo de arriba, ese
   rótulo cae sobre lo que haya: en Raíz, un verde claro, y desaparece.

   Se le pone su propia chapa: fondo tinta, letra crema, opacidad entera. Once
   píxeles de texto no pueden depender de la suerte del encuadre. */

.ct-carta--foto .ct-carta__sub {
  display: inline-block;
  align-self: flex-start;
  opacity: 1;
  color: var(--ct-crema);
  background: rgba(26, 15, 46, .82);
  padding: 5px 10px;
  border-radius: var(--ct-radio-pildora, 999px);
  text-shadow: none;
}

/* ==========================================================================
   Lote 64 · La ficha de la cometa: puerta al armado, no botón de compra
   ========================================================================== */

/* «Cometa personalizada» y «Clicker personalizado» son el renglón con el que se
   cobra algo que se arma en otra página. Su ficha ya no lleva formulario de
   compra —comprarlos desde ahí dejaba un pedido sin decir qué imprimir—, sino un
   aviso y un botón al armador.

   El bloque hereda el mismo aire que el de «no disponible», que es la otra vez
   que esta tarjeta no tiene nada que vender. La diferencia es que aquí el botón
   sí lleva a algún sitio, así que ocupa el ancho de la tarjeta y se lee como la
   acción principal. */

.ct-compra-acciones--armar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.ct-compra-acciones--armar .ct-compra-aviso {
  opacity: .82;
}

.ct-compra-btn-armar {
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* --- La ficha técnica sin datos -------------------------------------------
   Cuando una pieza no tiene medidas guardadas, la columna ya no inventa las de
   la caja: lo dice. Ese párrafo necesita el mismo aire que la lista de specs
   que reemplaza. */

.ct-ficha-tecnica__pendiente {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ct-tinta);
  opacity: .72;
  max-width: 34ch;
  margin: 0;
}

/* ==========================================================================
   Lote 65 · Una sola portada, y la miga siempre a la misma altura
   ==========================================================================
   Cinco pantallas tenían cinco portadas parecidas pero distintas: Colecciones
   con 480 px de alto y la miga a 6 px, las dos mesas de armado a 460 px y la de
   cometas con la miga a 16, El Taller con un grid de dos columnas y la foto en
   un panel, y la página de colección con la miga sin envoltorio, pegada al
   borde. Nadie lo decidió: se fueron escribiendo por separado.

   Aquí se igualan las cinco a la de Colecciones, que es la que quedó bien: foto
   a sangre de fondo, texto abajo a la izquierda, y la miga encima con el mismo
   aire. Va en ajustes.css porque es la única hoja que se carga después de las
   de pantalla y por tanto la única que puede pisarlas sin tocar cinco archivos.
   ========================================================================== */

/* --- 1. La miga, a la misma altura en todas ------------------------------- */

.ct-colecciones-miga-wrap,
.ct-taller-miga-wrap,
.ct-cometa-miga-wrap,
.ct-clicker-miga-wrap,
.ct-coleccion-miga-wrap {
  padding: 6px var(--ct-margen) 0;
}

/* --- 2. La caja de la portada -------------------------------------------- */

.ct-colecciones-hero,
.ct-taller-hero,
.ct-cometa-hero,
.ct-clicker-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  padding: 50px var(--ct-margen) 40px;
  overflow: hidden;
}

/* La cabecera de colección lleva el nombre gigante de la colección y su propio
   color de término: se le iguala el alto y el aire, no la tipografía. */
.ct-coleccion-hero {
  min-height: 480px;
}

.ct-colecciones-hero__fondo,
.ct-taller-hero__fondo,
.ct-cometa-hero__fondo,
.ct-clicker-hero__fondo,
.ct-coleccion-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ct-colecciones-hero__grid,
.ct-taller-hero__grid,
.ct-cometa-hero__texto,
.ct-clicker-hero__texto {
  position: relative;
  z-index: 2;
}

/* El Taller ya no tiene panel de foto: su grid pasa a ser una sola columna. */
.ct-taller-hero__grid {
  display: block;
}

.ct-taller-hero__texto,
.ct-colecciones-hero__texto,
.ct-cometa-hero__texto,
.ct-clicker-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 700px;
}

/* --- 3. La misma escala tipográfica -------------------------------------- */

.ct-colecciones-hero__etiqueta,
.ct-taller-hero__etiqueta,
.ct-cometa-hero__etiqueta,
.ct-clicker-hero__etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

/* 118 px fijos era lo que tenía Colecciones: en un teléfono se salía de la
   pantalla. El clamp conserva ese tamaño en escritorio y lo baja donde hace
   falta, que es lo que ya hacían las dos mesas. */
.ct-colecciones-hero__titulo,
.ct-taller-hero__titulo,
.ct-cometa-hero__titulo,
.ct-clicker-hero__titulo {
  font-family: var(--ct-titular);
  font-size: clamp(44px, 8vw, 112px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ct-crema);
  margin: 0;
}

.ct-colecciones-hero__bajada,
.ct-taller-hero__bajada,
.ct-cometa-hero__bajada,
.ct-clicker-hero__bajada {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--ct-crema-84);
  max-width: 540px;
  margin: 0;
}

/* --- El «Desde» del clicker personalizado en la vitrina -------------------
   Su tarjeta enseñaba $ 32.000, el precio del producto base, cuando la base más
   barata de las siete cuesta $ 38.000. Ahora enseña la más barata y dice que lo
   es. */

.ct-catalogo-meta__desde {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
  margin-right: 3px;
}