/* ── HERO SLIDER ── */
.tricolor-hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;background:var(--noche);color:#fff}
.tricolor-hero__pista{position:absolute;inset:0;z-index:0}
.tricolor-hero__slide{position:absolute;inset:0;display:flex;align-items:center}
.tricolor-hero__slide[aria-hidden="true"]{pointer-events:none}
.tricolor-hero__slide + .tricolor-hero__slide{opacity:0}
.tricolor-hero__media{position:absolute;inset:-8% 0;z-index:0}
.tricolor-hero__img{width:100%;height:100%;object-fit:cover;will-change:transform}
.tricolor-hero__velo{background:linear-gradient(to top,rgba(12,16,26,.88) 0%,rgba(12,16,26,.6) 34%,transparent 52%),linear-gradient(to bottom,rgba(12,16,26,.45) 0%,transparent 18%)}
.tricolor-hero__velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(12,16,26,.74) 0%,rgba(12,16,26,.36) 46%,transparent 74%),
             linear-gradient(to bottom,rgba(12,16,26,.5) 0%,transparent 32%);
}
.tricolor-hero__cuerpo{position:relative;z-index:2;width:100%;padding-top:var(--cab-h)}
.tricolor-hero__card{max-width:620px}
.tricolor-hero__h1{font-size:var(--t-h1);font-weight:700;line-height:1.06;letter-spacing:-.035em;color:#fff;margin:16px 0 26px}
.tricolor-hero__p{color:rgba(255,255,255,.86);font-size:15px;line-height:1.65;max-width:44ch;margin-bottom:38px}
.js-anim .tricolor-hero__card{opacity:0}

/* ── Diapositiva con producto ── */
.tricolor-hero__slide--sujeto{
  container-type:size;background:#2a1c12;
  --iw:max(100cqw,calc(100cqh * var(--ar)));
  --off:max(0px,calc(var(--x1) * var(--iw) - 100cqw + max(24px,3cqw)));
  --izq:calc(max(0px,(100cqw - var(--shell)) / 2) + var(--pad));
  --hueco:calc(var(--x0) * var(--iw) - var(--off) - 32px);
  --inicio:clamp(var(--pad),calc(var(--hueco) - 440px),var(--izq));
}
.tricolor-hero__slide--sujeto .tricolor-hero__media{inset:0}
.tricolor-hero__slide--sujeto picture{display:contents}
.tricolor-hero__slide--sujeto .tricolor-hero__img{object-position:calc(var(--off) * -1) 50%}
.tricolor-hero__slide--sujeto .tricolor-hero__card{
  container-type:inline-size;
  margin-left:calc(var(--inicio) - var(--izq));
  max-width:max(260px,min(620px,calc(var(--hueco) - var(--inicio))));
}
.tricolor-hero__slide--sujeto .tricolor-hero__h1{font-size:clamp(28px,10.5cqi,var(--t-h1))}
@media (max-aspect-ratio:13/10){
  .tricolor-hero__slide--sujeto{flex-direction:column;align-items:stretch}
  .tricolor-hero__slide--sujeto .tricolor-hero__media{position:relative;inset:auto;flex:1 1 0;min-height:0;display:flex;justify-content:center;align-items:flex-start}
  .tricolor-hero__slide--sujeto .tricolor-hero__img{
    width:100%;height:auto;max-height:100%;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
  }
  .tricolor-hero__slide--sujeto .tricolor-hero__cuerpo{flex:none;padding-top:0;margin-top:-56px}
  .tricolor-hero__slide--sujeto .tricolor-hero__card{margin-left:0;max-width:620px;padding-bottom:104px}
  .tricolor-hero__slide--sujeto .tricolor-hero__h1{font-size:clamp(28px,7.4cqi,var(--t-h1))}
  .tricolor-hero__slide--sujeto .tricolor-hero__velo{background:linear-gradient(to top,rgba(12,16,26,.88) 0%,rgba(12,16,26,.55) 30%,transparent 46%),linear-gradient(to bottom,rgba(12,16,26,.45) 0%,transparent 18%)}
}
@media (max-aspect-ratio:13/10) and (max-height:760px){
  .tricolor-hero__slide--sujeto .tricolor-hero__h1{font-size:clamp(26px,7vw,34px);margin:10px 0 14px}
  .tricolor-hero__slide--sujeto .tricolor-hero__p{display:none}
  .tricolor-hero__slide--sujeto .tricolor-hero__card{padding-bottom:86px}
}
.tricolor-hero__bodegon{
  position:absolute;right:calc(var(--pad) + 4vw);bottom:34%;z-index:2;
  display:flex;align-items:flex-end;list-style:none;
}
.tricolor-hero__bodegon{--h:clamp(170px,30svh,320px)}
.tricolor-hero__bodegon li{position:relative;block-size:var(--h);aspect-ratio:.84}
.tricolor-hero__bodegon li + li{margin-left:calc(var(--h) * -.22)}
.tricolor-hero__bodegon li:nth-child(2){z-index:2;block-size:calc(var(--h) * 1.18)}
.tricolor-hero__bodegon a{position:absolute;inset:0;display:block}
.tricolor-hero__lata{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 22px 26px rgba(0,0,0,.38))}

.tricolor-hero__nav{position:absolute;right:var(--pad);bottom:44px;z-index:5;display:flex;align-items:center;gap:18px;color:#fff}
.tricolor-hero__flecha{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);color:#fff;
  transition:background .4s var(--ease),border-color .4s var(--ease);will-change:transform;
}
.tricolor-hero__flecha:hover{background:var(--rojo);border-color:transparent}
.tricolor-hero__flecha .tricolor-icono{width:17px;height:17px}
.tricolor-hero__flecha--prev .tricolor-icono{transform:rotate(180deg)}
.tricolor-hero__cuenta{font-size:12px;font-weight:600;letter-spacing:.1em;min-width:58px;text-align:center}
.tricolor-hero__cuenta i{font-style:normal;opacity:.5}
.tricolor-hero__barra{position:relative;width:clamp(70px,10vw,140px);height:2px;background:rgba(255,255,255,.28);overflow:hidden;border-radius:2px}
.tricolor-hero__barra i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}

/* ── AMBIENTES ── */

/* ── ENCUENTRA TU COLOR ── */
.tricolor-sec--color{position:relative;overflow:hidden;background:var(--tinta);isolation:isolate;color:#fff}
.tricolor-colorbg{position:absolute;inset:0;z-index:0}
.tricolor-colorbg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tricolor-colorbg__img.es-visible{opacity:1}
.tricolor-colorbg__velo{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(12,16,26,.78) 0%,rgba(12,16,26,.42) 48%,rgba(12,16,26,.12) 100%),
             linear-gradient(to top,rgba(12,16,26,.42) 0%,transparent 42%),
             radial-gradient(ellipse 70% 60% at 88% 108%,rgba(12,16,26,.62) 0%,transparent 70%);
}
.tricolor-colorwrap{position:relative;z-index:2;min-height:clamp(370px,40vw,458px)}
.tricolor-colortxt{max-width:min(560px,52%)}
.tricolor-colornota{display:flex;gap:14px;margin-top:24px;max-width:46ch;color:rgba(255,255,255,.82)}
.tricolor-colornota p{font-size:14px;line-height:1.6}
.tricolor-rodillo{width:26px;height:26px;flex:none;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tricolor-rodillo__gota{fill:#fff;stroke:none}
.tricolor-colorprod{margin-top:22px;font-size:13.5px;color:rgba(255,255,255,.82)}
.tricolor-colorprod strong{color:#fff;font-weight:600}
.tricolor-colorcta{margin-top:26px}
.tricolor-colorname{
  position:absolute;right:var(--pad);bottom:clamp(24px,4vw,52px);z-index:2;
  margin:0;text-align:right;pointer-events:none;
  font-size:clamp(38px,6.6vw,116px);font-weight:700;line-height:.92;letter-spacing:-.045em;color:#fff;
  text-shadow:0 2px 40px rgba(12,16,26,.35);
}
.tricolor-colorname__mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.tricolor-colorname__in{display:block;will-change:transform}
.tricolor-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,14px);max-width:min(470px,46%);margin-top:34px}
.tricolor-chip{
  position:relative;aspect-ratio:.62;border-radius:var(--r-pill);background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 30px rgba(12,16,26,.28);
  outline:0 solid rgba(255,255,255,.9);outline-offset:5px;
  transition:outline-width .35s var(--ease);transform-origin:50% 100%;will-change:transform;
}
.tricolor-chip.es-activa{outline-width:2px}

/* ── PRODUCTOS ── */
.tricolor-sec--prod .tricolor-rejilla-productos{gap:clamp(18px,2.4vw,34px)}

/* ── LA DIANA ── */
.tricolor-crea{position:relative;overflow:hidden}
.tricolor-crea--diana{background:#fff;display:grid;place-items:center;min-height:min(780px,94svh);padding-block:clamp(60px,7vw,90px)}
.tricolor-anillos{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none}
.tricolor-anillos__r{position:absolute;border-radius:50%;width:var(--d,120px);height:var(--d,120px);border:var(--w,26px) solid var(--c);opacity:0}
.tricolor-crea__txt{position:relative;z-index:2;display:grid;place-items:center;text-align:center}
.tricolor-crea__big{font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;color:var(--tinta)}
.tricolor-crea__num{display:block;font-size:clamp(62px,9.6vw,144px);line-height:.9;letter-spacing:-.045em;margin:2px 0;color:var(--azul);font-variant-numeric:tabular-nums}

/* ── MIRA EL CAMBIO ── */
.tricolor-sec--cambio{background:var(--azul);color:#fff;overflow:hidden;isolation:isolate}
.tricolor-cambiowrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.tricolor-sec--cambio .tricolor-h2{font-size:clamp(26px,3vw,40px)}
.tricolor-cambiotxt__p{font-size:14px;line-height:1.65;margin:22px 0 32px;max-width:42ch;color:rgba(255,255,255,.82)}

.tricolor-ba{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-l);background:#D9D9D9;touch-action:pan-y;cursor:ew-resize}
.tricolor-ba__capa{position:absolute;inset:0}
.tricolor-ba__capa img{width:100%;height:100%;object-fit:cover}
.tricolor-ba__capa--antes{clip-path:inset(0 50% 0 0)}
.tricolor-ba__lbl{
  position:absolute;top:20px;z-index:3;padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(12,16,26,.46);backdrop-filter:blur(8px);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.tricolor-ba__lbl--i{left:22px}
.tricolor-ba__lbl--d{right:22px}
.tricolor-ba__barra{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:2px;background:#fff;margin-left:-1px}
.tricolor-ba__tirador{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:54px;height:54px;border-radius:50%;background:#fff;padding:9px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);display:grid;place-items:center;
}
.tricolor-ba__pulso{position:absolute;inset:0;border-radius:50%;border:2px solid #fff;pointer-events:none}
.tricolor-ba__rango{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.tricolor-ba__rango:focus-visible ~ .tricolor-ba__barra .tricolor-ba__tirador,.tricolor-ba:focus-within .tricolor-ba__tirador{outline:2px solid var(--rojo);outline-offset:3px}

/* ── Catálogo: líneas y Línea Hogar ── */
.tricolor-catalogo{position:relative;overflow:hidden;isolation:isolate;background:#fff}
.tricolor-catalogo__logo{position:absolute;z-index:-1;top:50%;right:0;width:min(1150px,85vw);aspect-ratio:1;transform:translate(46%,-50%);opacity:.06;pointer-events:none;will-change:transform}
.tricolor-catalogo__logo .tricolor-diana{display:block;width:100%;height:100%}
.tricolor-catalogo .tricolor-sec{background:transparent}
.tricolor-catalogo .tricolor-sec--lineas{padding-bottom:clamp(36px,4vw,56px)}
.tricolor-catalogo .tricolor-sec--amb{padding-top:clamp(36px,4vw,56px)}
.tricolor-catalogo__sep{display:flex;align-items:center;gap:18px}
.tricolor-catalogo__sep span{flex:1;height:1px;background:var(--linea)}
.tricolor-catalogo__sep .tricolor-diana{flex:none;width:34px;height:34px}

.tricolor-lineas{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.tricolor-linea > a{display:flex;flex-direction:column;height:100%;border-radius:var(--r-l);overflow:hidden;background:var(--tono);color:var(--tono-texto);box-shadow:var(--sombra-s);isolation:isolate}
.tricolor-linea__ph{display:block;overflow:hidden;aspect-ratio:4/3.4}
.tricolor-linea__ph img{width:100%;height:100%;object-fit:cover;will-change:transform}
.tricolor-linea__cuerpo{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px 16px 20px}
.tricolor-linea__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--tono-texto) 16%,transparent)}
.tricolor-linea__ico .tricolor-icono{width:22px;height:22px}
.tricolor-linea__n{display:block;font-size:clamp(16px,1.35vw,19px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.tricolor-linea__k{display:block;margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;opacity:.78}
.tricolor-linea .tricolor-flecha{transition:transform .6s var(--ease-lux)}
.tricolor-linea > a:hover .tricolor-flecha,.tricolor-linea > a:focus-visible .tricolor-flecha{transform:rotate(45deg)}

/* ── BLOG ── */
.tricolor-sec--blog{z-index:1;background:#EEF0F2;padding-block:clamp(64px,7vw,100px)}
.tricolor-sec--blog.es-pintando{background:transparent}
.tricolor-pintura{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.tricolor-pintura__fila{position:absolute;left:0;width:100%;clip-path:inset(0 100% 0 0)}
.tricolor-pintura__fila--1{background:url(../../img/pintura/primera-mano.svg) 0 0/100% 100% no-repeat}
.tricolor-pintura__fila--2{background:#EEF0F2}
.tricolor-bloggrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px)}
.tricolor-postlist{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px)}
.tricolor-post{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--gris);will-change:transform}
.tricolor-post > a{display:block;height:100%;color:inherit}
.tricolor-post__media{position:relative;overflow:hidden}
.tricolor-post__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tricolor-post:hover .tricolor-post__media img{transform:scale(1.05)}
.tricolor-post__t{display:block;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--azul)}
.tricolor-post__t span{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-position:0 calc(100% - .14em);background-repeat:no-repeat;transition:background-size .55s var(--ease)}
.tricolor-post:hover .tricolor-post__t span{background-size:100% 1.5px}
.tricolor-post__x{font-size:13px;line-height:1.6;opacity:.66;margin-top:10px}
.tricolor-post__meta{display:flex;align-items:center;gap:9px;font-size:11.5px;opacity:.55;margin-top:auto}
.tricolor-post--lead{background:var(--tinta);color:#fff;min-height:100%}
.tricolor-post--lead > a{display:flex;flex-direction:column}
.tricolor-post--lead .tricolor-post__media{flex:1;min-height:clamp(170px,19vw,250px)}
.tricolor-post--lead .tricolor-post__media img{position:absolute;inset:0}
.tricolor-post--lead .tricolor-post__cuerpo{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,28px)}
.tricolor-post--lead .tricolor-post__t{color:#fff;font-size:clamp(19px,1.9vw,26px);margin-top:14px}
.tricolor-post--lead .tricolor-post__x{opacity:.7;max-width:46ch}
.tricolor-post--lead .tricolor-post__meta{margin-top:22px}
.tricolor-post--fila{flex:1;background:#fff;border:1px solid var(--linea)}
.tricolor-post--fila > a{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);align-items:stretch}
.tricolor-post--fila .tricolor-post__media{height:100%;min-height:126px}
.tricolor-post--fila .tricolor-post__media img{position:absolute;inset:0}
.tricolor-post--fila .tricolor-post__cuerpo{display:flex;flex-direction:column;justify-content:center;padding:16px 58px 16px 20px}
.tricolor-post--fila .tricolor-post__t{font-size:15px;margin-top:11px}
.tricolor-post--fila .tricolor-post__meta{margin-top:12px}
.tricolor-post--fila .tricolor-flecha{position:absolute;right:16px;top:50%;translate:0 -50%;pointer-events:none}

/* ── responsive ── */
@media (max-width:1180px){
  .tricolor-hero__bodegon{--h:min(18vw,30svh)}
  .tricolor-hero__slide--bodegon .tricolor-hero__card{max-width:52%}
}
@media (max-width:1180px){
  .tricolor-hero__img{object-position:var(--enfoque,50%) 50%}
}
@media (max-width:900px){
  .tricolor-hero__bodegon{display:none}
  .tricolor-hero__slide--bodegon .tricolor-hero__card{max-width:620px}
}
@media (max-width:1024px){
  .tricolor-bloggrid{grid-template-columns:1fr}
  .tricolor-colorwrap{min-height:0}
  .tricolor-cambiowrap{grid-template-columns:1fr}
  .tricolor-colorname{position:static;text-align:left;max-width:var(--shell);margin:0 auto 28px;padding-inline:var(--pad);font-size:clamp(34px,10vw,60px);position:relative;z-index:2}
  .tricolor-colortxt,.tricolor-chips{max-width:none}
  .tricolor-colorbg__img{object-position:24% center}
  .tricolor-lineas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .tricolor-lineas{grid-template-columns:minmax(0,1fr)}
  .tricolor-linea > a{flex-direction:row}
  .tricolor-linea__ph{flex:none;width:32%;aspect-ratio:auto}
  .tricolor-linea__cuerpo{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:16px 14px}
  .tricolor-linea__ico{display:none}
  .tricolor-linea__k{font-size:10px;letter-spacing:.1em}
  .tricolor-linea .tricolor-flecha{width:34px;height:34px}
}
@media (max-width:760px){
  .tricolor-catalogo__logo{width:130vw}
  .tricolor-hero__nav{right:auto;left:var(--pad);bottom:30px;gap:12px}
  .tricolor-chip{aspect-ratio:.44}
  .tricolor-post--fila > a{grid-template-columns:minmax(0,96px) minmax(0,1fr)}
  .tricolor-post--fila .tricolor-post__cuerpo{padding-right:48px}
}
@media (prefers-reduced-motion:reduce){
  .tricolor-anillos__r{opacity:.9}
}