/* =========================================================
   ARISTAS 2026 — Página de Colección (Aura / Bold / Magno)
   Una sola hoja para las tres: lo que cambia entre ellas es el color de
   acento (--col-acento, inline por página) y los campos, no el CSS.
   ========================================================= */

.pagina-coleccion{--col-acento:#CAB9A2}
.pagina-coleccion img{border-radius:0} /* regla de marca: las imágenes nunca llevan bordes redondeados */

/* Título de sección compartido: Amadine + el mismo trazo que .disenos__title
   (medido en producción: 0,5px sobre fondo claro). El tamaño lo pone cada
   instancia porque no todos los titulares miden lo mismo (3em / 2.4em / 1.8em). */
/* Los textos de la landing van en blanco sobre el acento: es como esta en
   produccion, medido. */
.col-title{font-family:var(--display);font-weight:300;line-height:1.15;margin:0 0 20px;-webkit-text-stroke:var(--ar-trazo,.5px) currentColor;color:#fff}

/* ================= 1. HERO ================= */
.col-hero{position:relative;height:750px;overflow:hidden;background:var(--ink)}
.col-hero__track{position:relative;width:100%;height:100%}
/* La que entra se funde por ENCIMA; la que sale se queda opaca por debajo.
   Si se desvanecen las dos a la vez, en el punto medio ambas estan al 50% y
   asoma el fondo oscuro: el hero parpadea a negro en cada cambio. */
.col-hero__slide{position:absolute;inset:0;opacity:0;z-index:0}
.col-hero__slide.is-active{opacity:1;z-index:2;transition:opacity 1.1s var(--ease)}
.col-hero__slide.fue-activa{opacity:1;z-index:1;transition:none}
.col-hero__img{width:100%;height:100%;object-fit:cover;display:block}
/* Velo sobre la foto: las fotos de Aura son claras y el texto blanco se
   perdia. Mas fuerte en el centro, que es donde cae el texto, y suave en los
   bordes para no apagar la foto. Va entre la foto y el texto. */
/* z-index 3: por encima de las dos diapositivas que se cruzan (1 y 2) y por
   debajo del texto (4). */
.col-hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(62% 78% at 50% 50%, rgba(18,16,14,.42) 0%, rgba(18,16,14,.26) 58%, rgba(18,16,14,.10) 100%),
    linear-gradient(180deg, rgba(18,16,14,.20) 0%, rgba(18,16,14,.06) 42%, rgba(18,16,14,.28) 100%);
}
.col-hero__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:0 20px;color:#fff;z-index:4}
/* Los titulos de la coleccion iban en em, o sea relativos al body (15px). Al subir el body a 16px
   por la escala de letra B se habrian agrandado sin que nadie lo pidiera (la escala solo toca
   lo de 16px para abajo); se dejan en px, que es el tamano que ya tenian a 15px de base. */
.col-hero__titulo{font-family:var(--display);font-weight:300;font-size:75px;letter-spacing:1.5px;margin:0;-webkit-text-stroke:.3px currentColor}
.col-hero__texto{font-family:var(--sans);font-weight:300;font-size:28px;margin:0;max-width:820px}
@media(max-width:1366px){.col-hero{height:550px}}
@media(max-width:767px){
  .col-hero{height:400px}
  .col-hero__titulo{font-size:52.5px}
  .col-hero__texto{font-size:22px}
}

/* ================= carrusel reutilizable (colcar) =================
   La misma estructura que .coleccion__/.disenos__ del home: grid con
   scroll-snap en móvil, flechas y puntos ocultos hasta que hacen falta.
   .colcar--uno = 1 tarjeta por vista SIEMPRE (fila1, acabados, inspírate).
   .colcar--multi = varias por vista en escritorio, carrusel en móvil (como
   .disenos del home) — lo usan los 8 productos. */
.colcar{position:relative}
.colcar__grid{display:grid;gap:10px}
.colcar__card{display:block}
.colcar__img{display:block;overflow:hidden}
.colcar__img img{width:100%;height:100%;object-fit:cover;display:block}
.colcar__nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:none;background:rgba(255,255,255,.55);color:var(--ink);align-items:center;justify-content:center;border-radius:50%}
.colcar__nav--prev{left:4px}
.colcar__nav--next{right:4px}
/* align-items:center + display:block en el punto: sin eso la fila mide 25px
   para un punto de 9 —el resto es la caja en linea del boton— y los puntos se
   ven despegados de la foto. */
.colcar__dots{display:none;justify-content:center;align-items:center;gap:8px;padding:4px 0 0;line-height:0}
/* Blancos: es el unico color que se ve sobre los tres acentos —el beige de
   Aura, el marron oscuro de Bold y el medio de Magno— y es el que ya usa el
   resto del texto de estas paginas. El sin rellenar lleva el aro a media
   opacidad para que se distinga del activo sin desaparecer. */
.colcar__dot{display:block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:transparent;padding:0;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.colcar__dot:hover{border-color:#fff}
.colcar__dot.is-active{background:#fff;border-color:#fff}

/* --uno: siempre 1 por vista, con flechas/puntos siempre visibles (no solo
   en móvil, porque en escritorio también muestra una foto a la vez). */
.colcar--uno .colcar__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.colcar--uno .colcar__grid::-webkit-scrollbar{display:none}
.colcar--uno .colcar__card{flex:0 0 100%;scroll-snap-align:start}
.colcar--uno .colcar__img{aspect-ratio:570/700}
.colcar--uno.colcar--ancho .colcar__img{aspect-ratio:1920/550}
.colcar--uno .colcar__nav,.colcar--uno .colcar__dots{display:flex}

/* --multi: rejilla fija en escritorio (4 por vista), carrusel en móvil */
/* Carrusel de verdad tambien en escritorio, con 3 por vista: es el valor por
   defecto del widget en produccion. Antes eran 4 fijas en rejilla. */
.colcar--multi .colcar__grid{
  display:flex;grid-template-columns:none;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.colcar--multi .colcar__grid::-webkit-scrollbar{display:none}
.colcar--multi .colcar__card{flex:0 0 calc((100% - 20px)/3);scroll-snap-align:start}
.colcar--multi .colcar__nav,.colcar--multi .colcar__dots{display:flex}
.colcar--multi .colcar__img{aspect-ratio:600/360}
@media(max-width:900px){
  .colcar--multi .colcar__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
  .colcar--multi .colcar__grid::-webkit-scrollbar{display:none}
  .colcar--multi .colcar__card{flex:0 0 calc(50% - 5px);scroll-snap-align:start}
  .colcar--multi .colcar__nav,.colcar--multi .colcar__dots{display:flex}
}

/* acabados en móvil: el bloque .colcar__movil-only solo existe para <900px;
   arriba de eso lo oculta el JSON de producción (oculto: hide_desktop,hide_tablet) */
.colcar__movil-only{display:none}
@media(max-width:899px){.colcar__movil-only{display:block}}

/* ================= 2. FILA carrusel + texto ================= */
/* El acento va a sangre; lo que se queda dentro del ancho maximo de la
   pagina es el contenido, como en la banda de cierre del home. */
.col-fila1{background:var(--col-acento)}
.col-fila1__inner{display:flex;flex-wrap:wrap;max-width:var(--maxw);margin-inline:auto}
.col-fila1__col{flex:1 1 50%;min-width:320px}
.col-fila1__col--carrusel{display:flex;align-items:center;justify-content:center;padding:20px}
.col-fila1__col--carrusel .colcar{height:100%;width:100%;max-width:570px}
.col-fila1__col--carrusel .colcar__grid{height:100%}
/* La foto es de 570×700: la columna puede ser más ancha que eso en
   escritorios grandes, y estirarla se ve borrosa (regla de marca: nunca por
   encima de su resolución nativa). Se limita el ancho de la FOTO, no el de
   la columna, para que el acento siga llenando el resto. */
.col-fila1__col--carrusel .colcar__img{max-width:570px;margin:0 auto}
.col-fila1__col--texto{display:flex;flex-direction:column;justify-content:center;padding:60px 60px}
.col-fila1__titulo{font-size:45px}
.col-fila1__texto{font-family:var(--sans);font-size:16px;line-height:1.7;color:#fff}
.col-fila1__texto p{margin:0}
@media(max-width:767px){
  .col-fila1__col--texto{padding:34px 22px}
  .col-fila1__titulo{font-size:clamp(24px,7vw,36px)}
}

/* ================= 3. ACABADOS ================= */
.col-acabados{background:var(--col-acento);padding:60px 40px;text-align:center}
.col-acabados__titulo{font-size:45px}
.col-acabados__texto{max-width:760px;margin:0 auto 34px;font-family:var(--sans);font-size:16px;line-height:1.7;color:#fff}
.col-acabados__texto p{margin:0}
.col-acabados__fila{display:flex;gap:10px;max-width:1140px;margin:0 auto}
.col-acabados__img{display:block;flex:1 1 0;aspect-ratio:1/1;overflow:hidden}
.col-acabados__img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:899px){
  .col-acabados{padding:44px 20px}
  .col-acabados__titulo{font-size:clamp(24px,7vw,36px)}
  .col-acabados__fila{display:none}
  .col-acabados--acabados .colcar__img{aspect-ratio:1/1}
  .col-acabados .colcar--uno .colcar__img{aspect-ratio:1/1}
}
@media(min-width:900px){.col-acabados .colcar__movil-only{display:none!important}}

/* ================= 4. INSPÍRATE ================= */
.col-inspirate{background:var(--col-acento);padding:60px 0;text-align:center}
.col-inspirate__titulo{font-size:45px}
.col-inspirate .colcar{max-width:1920px;margin:0 auto}
@media(max-width:767px){.col-inspirate__titulo{font-size:clamp(24px,7vw,36px);padding:0 20px}}

/* ================= 5. PRODUCTOS ================= */
.col-productos{background:var(--col-acento);padding:50px 40px}
.col-productos .colcar{max-width:1360px;margin:0 auto}
@media(max-width:900px){.col-productos{padding:36px 16px}}

/* ================= 6. CIERRE ================= */
.col-cierre{background:var(--col-acento);padding:70px 40px 50px;text-align:center}
.col-cierre__titulo{font-family:var(--display);font-weight:300;font-size:36px;line-height:1.3;max-width:980px;margin:0 auto 18px;-webkit-text-stroke:var(--ar-trazo,.5px) currentColor;color:#fff}
.col-cierre__nombre{font-family:var(--display);font-weight:300;font-size:27px;text-align:end;max-width:1140px;margin:0 auto;-webkit-text-stroke:var(--ar-trazo,.5px) currentColor;color:#fff}
.col-cierre__divisor{max-width:1140px;margin:26px auto 0;border:none;border-top:1px solid rgba(30,30,28,.25)}
@media(max-width:767px){
  .col-cierre{padding:44px 20px 34px}
  .col-cierre__titulo{font-size:clamp(21px,6.5vw,30px)}
  .col-cierre__nombre{font-size:clamp(16.5px,5vw,22.5px)}
}

/* ================= 7. BANNER catálogos ================= */
.col-banner{display:block}
.col-banner__enlace{display:block}
.col-banner__img{width:100%;height:auto;display:block}

/* Pie del carrusel de productos: el nombre bajo cada foto, como produccion.
   Es el unico de los cuatro carruseles de la pagina que lo lleva. */
.colcar__pie{
  display:block;
  margin-top:12px;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.02em;
  text-align:center;
  color:#fff;
}
@media(max-width:767px){ .colcar__pie{font-size:14px;margin-top:9px} }