/* ── hero ── */
.tricolor-landing__hero{
  min-height:100svh;flex-direction:column;justify-content:flex-end;align-items:stretch;
  padding-top:calc(var(--cab-h) + 28px);padding-bottom:clamp(20px,2.6vw,36px);
}
.tricolor-landing__hero .tricolor-hero-pag__velo{
  background:linear-gradient(to right,rgba(12,16,26,.78) 0%,rgba(12,16,26,.4) 52%,rgba(12,16,26,.05) 85%),
             linear-gradient(to top,color-mix(in srgb,var(--tono) 55%,transparent) 0%,transparent 40%),
             linear-gradient(to bottom,rgba(12,16,26,.45) 0%,transparent 28%);
}
.tricolor-landing__hero-in{width:100%}
.tricolor-landing__hero .tricolor-hero-pag__in{max-width:960px}
.tricolor-landing__fila{display:flex;align-items:center;gap:clamp(24px,3.4vw,52px)}
.tricolor-landing__txt{min-width:0;flex:1}
.tricolor-landing__eyebrow{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;
  padding:10px 26px 10px 16px;color:var(--tono-texto);font-size:14px;font-weight:600;line-height:1.3;
}
.tricolor-landing__brocha{position:absolute;inset:-2px -6px;z-index:-1;width:calc(100% + 12px);height:calc(100% + 4px);color:var(--tono);fill:currentColor;rotate:-1.2deg;transform-origin:left center}
.tricolor-landing__icono{display:grid;place-items:center}
.tricolor-landing__icono .tricolor-icono{width:18px;height:18px}
.tricolor-landing__hero .tricolor-h1{max-width:17ch;font-size:min(var(--t-h1),8.2svh)}
.tricolor-landing__hero .tricolor-acento{
  color:#fff;text-decoration:none;
  background-image:linear-gradient(var(--tono),var(--tono));
  background-repeat:no-repeat;background-position:0 86%;
  background-size:calc(var(--pasada,1) * 100%) .34em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-inline:.06em;
}
.tricolor-landing__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tricolor-landing__cta .tricolor-btn--fantasma{color:#fff}

.tricolor-landing__lata{position:relative;flex:none;display:grid;place-items:center;width:clamp(200px,min(27vw,38svh),400px);aspect-ratio:1}
.tricolor-landing__disco{position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:0 30px 80px rgba(12,16,26,.35)}
.tricolor-landing__disco::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--tono) 70%,#fff);opacity:.9}
.tricolor-landing__lata img{position:absolute;inset-block:7%;inset-inline:-100%;margin-inline:auto;height:86%;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(12,16,26,.25))}

/* ── sellos ── */
.tricolor-landing__sellos{position:relative;margin-top:clamp(28px,4svh,48px)}

/* ── módulo ── */
.tricolor-modulo__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.tricolor-modulo__txt .tricolor-lead{margin-top:18px}
.tricolor-modulo__filas{list-style:none;display:grid;gap:14px;margin-top:30px;counter-reset:f}
.tricolor-modulo__filas li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding-top:14px;border-top:1px solid var(--linea);font-size:14px;line-height:1.55;color:var(--tinta-70)}
.tricolor-modulo__filas strong{display:block;font-size:15px;color:var(--tinta);margin-bottom:2px}
.tricolor-modulo__num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tono);color:var(--tono-texto);font-size:12px;font-weight:700}
.tricolor-modulo__demo{position:relative}

.tricolor-dn,.tricolor-gota,.tricolor-cubre{position:relative;overflow:hidden;border-radius:var(--r-l);aspect-ratio:16/11;background:var(--gris);box-shadow:var(--sombra-l)}
.tricolor-dn img,.tricolor-gota > img,.tricolor-cubre > img,.tricolor-cubre__antes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tricolor-dn__lbl{
  position:absolute;top:18px;z-index:4;display:inline-flex;align-items:center;gap:8px;
  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:.12em;text-transform:uppercase;color:#fff;
}
.tricolor-dn__lbl .tricolor-icono{width:15px;height:15px}
.tricolor-dn__lbl--a{left:18px}
.tricolor-dn__lbl--b{right:18px}

.tricolor-dn__capa{position:absolute;inset:0}
.tricolor-dn__capa + .tricolor-dn__capa{opacity:0}
.tricolor-dn__cielo{position:absolute;left:0;right:0;top:0;height:40%;z-index:2;pointer-events:none}
.tricolor-dn__astro{
  position:absolute;left:calc(8% + var(--hora,.5) * 76%);top:calc(38% - sin(var(--hora,.5) * 3.1416rad) * 26%);
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 40%,rgba(255,236,190,.9) 55%,rgba(255,200,120,0) 72%);
  box-shadow:0 0 40px 10px rgba(255,220,160,.45);
}
.tricolor-dn__rango{position:absolute;left:0;right:0;bottom:0;z-index:5;width:100%;height:64px;opacity:0;cursor:ew-resize;margin:0}
.tricolor-dn__pista{
  position:absolute;left:28px;right:28px;bottom:28px;z-index:4;height:4px;border-radius:4px;pointer-events:none;
  background:linear-gradient(to right,#C9B6E4,#FFF4D6 30%,#FFFFFF 50%,#FFD08A 72%,#FF9A4D);box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.tricolor-dn__pista b{
  position:absolute;top:50%;left:calc(var(--k) / (var(--n) - 1) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.tricolor-dn__pista i{position:absolute;top:50%;left:calc(var(--hora,.5) * 100%);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--tono) 80%,transparent),0 6px 16px rgba(0,0,0,.3)}
.tricolor-dn__rango:focus-visible + .tricolor-dn__pista i{outline:2px solid var(--rojo);outline-offset:4px}

.tricolor-gota{isolation:isolate}
.tricolor-gota::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 46% 42%,transparent 55%,rgba(12,16,26,.28))}
.tricolor-gota__foto{will-change:transform;transform-origin:46% 34%}
.tricolor-gota__svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:hidden}
.tricolor-gota:not(.es-animada) .tricolor-gota__svg [data-gota-estela]{display:none}
.tricolor-gota .tricolor-dn__lbl{z-index:3}
.tricolor-modulo--humedad .tricolor-modulo__filas li{transition:opacity .6s var(--ease)}
.tricolor-modulo--humedad:has(.tricolor-gota.es-animada) .tricolor-modulo__filas li:not(.es-activa){opacity:.35}
.tricolor-modulo--humedad .tricolor-modulo__filas li .tricolor-modulo__num{transition:background .5s var(--ease),transform .5s var(--ease)}
.tricolor-modulo--humedad .tricolor-modulo__filas li.es-activa .tricolor-modulo__num{transform:scale(1.08)}

.tricolor-cubre__foto,.tricolor-cubre__lienzo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tricolor-cubre__lienzo{z-index:1}
.tricolor-cubre__antes{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--cubierto,0%))}
.tricolor-cubre__antes img{filter:grayscale(1) brightness(1.02) contrast(.88)}
.tricolor-cubre .tricolor-dn__lbl{z-index:4}
.tricolor-cubre__nombre{gap:8px;transition:opacity .4s var(--ease)}
.tricolor-cubre__nombre i{width:12px;height:12px;border-radius:50%;background:var(--muestra,#c9c9c9);box-shadow:0 0 0 1.5px rgba(255,255,255,.8);transition:background .6s var(--ease)}

/* ── carta ── */
.tricolor-landing__carta .tricolor-carta{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.tricolor-landing .tricolor-muestra__probar{color:var(--tono)}

@media (max-width:1024px){
  .tricolor-modulo__in{grid-template-columns:minmax(0,1fr)}
  .tricolor-landing__lata{width:clamp(170px,24vw,240px)}
}
@media (max-width:760px){
  .tricolor-landing__fila{flex-direction:column;align-items:flex-start;gap:16px}
  .tricolor-landing__lata{width:150px}
  .tricolor-landing__hero{padding-top:calc(var(--cab-h) + 16px)}
  .tricolor-landing__cta{margin-top:24px}
  .tricolor-landing__sellos .tricolor-beneficios{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tricolor-landing__sellos .tricolor-beneficio{padding:12px 14px;gap:10px}
  .tricolor-landing__sellos .tricolor-beneficio__ico{width:36px;height:36px}
  .tricolor-landing__sellos .tricolor-beneficio__ico .tricolor-icono{width:19px;height:19px}
  .tricolor-landing__sellos .tricolor-beneficio small{display:none}
}
@media (max-height:720px) and (min-width:761px){
  .tricolor-landing__hero .tricolor-migas{display:none}
  .tricolor-landing__hero .tricolor-h1{margin:12px 0 14px}
  .tricolor-landing__hero .tricolor-hero-pag__intro{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tricolor-landing__cta{margin-top:18px}
  .tricolor-landing__lata{width:min(34svh,300px)}
  .tricolor-landing__sellos{margin-top:20px}
  .tricolor-landing__sellos .tricolor-beneficio{padding:12px 16px}
  .tricolor-landing__sellos .tricolor-beneficio small{display:none}
}
@media (max-width:600px){
  .tricolor-dn__lbl--b{top:auto;bottom:14px;left:14px;right:auto}
  .tricolor-dn__lbl--a{left:14px;top:14px}
}
@media (min-width:601px) and (max-width:1024px){
  .tricolor-landing__sellos .tricolor-beneficios{grid-template-columns:repeat(2,minmax(0,1fr))}
}