/* ========= GRID CARDS ========= */
.grid{display:grid;gap:clamp(14px,2.4vw,22px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--plum-line);border-radius:var(--r);overflow:hidden}
.card__b{padding:1.05rem 1.15rem 1.25rem}
.card__b h3{margin-bottom:.4rem}
.card__b p{font-size:.9rem;color:var(--ink-soft);margin:0}
.src{display:block;margin-top:.7rem;font-size:.73rem;color:var(--plum);border-top:1px dashed var(--plum-line);padding-top:.5rem}


/* ingredientes: tema por landing (JSON → variables) */
:is(#soporte,#ingredientes-detalle).ingredients-sec{
  --ing-section-bg:#fff;
  --ing-card-bg:var(--plum-deep);
  --ing-reveal-bg:rgba(0,147,221,.96);
  background:var(--ing-section-bg);
}
:is(#soporte,#ingredientes-detalle).ingredients-sec .ing{background:var(--ing-card-bg)}
:is(#soporte,#ingredientes-detalle).ingredients-sec .ing__reveal{background:var(--ing-reveal-bg)}

/* ingredientes: nombre sobre la imagen, explicación al pasar el puntero */
.ings{display:grid;gap:clamp(12px,2vw,18px);grid-template-columns:1fr}
@media(min-width:560px){.ings{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.ings{grid-template-columns:repeat(3,1fr)}}
.ing{position:relative;border-radius:var(--r);overflow:hidden;background:var(--plum-deep);cursor:pointer;
  aspect-ratio:4/3;border:0;padding:0;text-align:left;display:block;width:100%}
.ing img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s ease}
.ing__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,30,.78) 0%,rgba(10,22,30,.2) 46%,rgba(10,22,30,0) 72%)}
.ing__name{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:.9rem 1rem;margin:0;color:var(--ivory);
  font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.15;letter-spacing:-.01em;
  transition:opacity .22s ease,visibility .22s ease}
.ing:hover .ing__name,.ing:focus-visible .ing__name,.ing.open .ing__name{opacity:0;visibility:hidden}
.ing__hint{display:block;font-family:var(--body);font-weight:400;font-size:.7rem;color:#D7ECF8;margin-top:.2rem;letter-spacing:.02em}
/* sin detalle (USA, CO: sin aria-expanded): solo el nombre, sin interacción */
.ing:not([aria-expanded]){cursor:default}
.ing:not([aria-expanded]):is(:hover,:focus-visible) .ing__name{opacity:1;visibility:visible}
.ing:not([aria-expanded]):hover img{transform:none}
.ing:not([aria-expanded]):hover .ing__name{background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.ing__reveal{position:absolute;inset:0;z-index:3;background:rgba(0,147,221,.96);color:var(--ivory);
  padding:clamp(.85rem,1.8vw,1.15rem);display:flex;flex-direction:column;justify-content:flex-start;gap:.45rem;
  overflow:auto;opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s}
.ing__reveal p{font-size:clamp(.76rem,1.05vw,.86rem);line-height:1.45;margin:0;color:#EAF6FD}
.ing__reveal .src{color:#E9F7C8;border-top:1px dashed rgba(255,255,240,.32);margin-top:.3rem;padding-top:.4rem;font-size:.68rem;line-height:1.4;display:block}
.ing:hover .ing__reveal,.ing:focus-visible .ing__reveal,.ing.open .ing__reveal{opacity:1;visibility:visible}
.ing:hover img,.ing.open img{transform:scale(1.05)}
.ing:hover .ing__hint,.ing.open .ing__hint{opacity:0;transition:opacity .2s}
.ing:hover .ing__name,.ing.open .ing__name{background:linear-gradient(to top,rgba(0,147,221,.98) 60%,rgba(0,147,221,0))}
@media (hover:none){.ing__hint::after{content:" · toca para ver"}}
@media(max-width:559px){.ing{aspect-ratio:16/10}.ing__reveal{padding-bottom:3.2rem}.ing__reveal p{font-size:.8125rem}.ing__reveal .src{font-size:.6875rem}}
@media(min-width:560px) and (max-width:859px){.ing{aspect-ratio:1/1}}

/* molecular pattern eco del empaque */
.mol{position:relative}
.mol::before,.mol::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:url("../img/trama-moleculas.webp");background-repeat:no-repeat;
  background-position:left 2% bottom 6%;
  background-size:clamp(340px,46vw,680px) auto}
.mol::after{transform:rotate(180deg);background-position:left -6% bottom 4%;opacity:.5}
@media(max-width:700px){.mol::before,.mol::after{opacity:.34;background-size:86vw auto;
  background-position:left 2% bottom 14%}}
.mol>*{position:relative}

/* ========= SPLIT ========= */
.split{display:grid;gap:clamp(26px,4vw,44px);align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
.split__img{border-radius:var(--r);overflow:hidden}
.split__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* solución / soporte: gráfico X de marca sangrando por la derecha */
#solucion,#soporte,#ingredientes-detalle{position:relative;overflow:hidden}
.solwrap,#soporte > .wrap,#ingredientes-detalle > .wrap{position:relative;z-index:1}
#soporte > .solmedia{position:absolute}
.solmedia{position:absolute;right:0;top:0;bottom:0;width:min(56%,780px);z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:flex-end}
.solmedia__x{width:100%;height:100%;object-fit:cover;object-position:38% 58%;pointer-events:none}


@media(max-width:859px){
  .solmedia{width:56%;opacity:.16}
  .solwrap .lede,.solwrap .measure{max-width:none}
}
.solwrap .measure,.solwrap .lede{max-width:60ch}
@media(max-width:1180px){.solmedia{width:min(48%,520px);opacity:.3}}
@media(max-width:980px){.solmedia{width:52%;opacity:.2}}
.solwrap h2{max-width:20ch}
.solwrap ul[data-edit="sol.p1"]{margin:.8rem 0 0;padding-left:1.15rem;font-size:.95rem;line-height:1.45;list-style:disc}
.solwrap ul[data-edit="sol.p1"] ul{margin:.25rem 0 .35rem;padding-left:1.1rem;list-style:circle}
.solben{display:grid;gap:.7rem;margin-top:1.4rem}
@media(min-width:900px){.solben{grid-template-columns:repeat(3,1fr);max-width:60rem}}
.solben .card__b{padding:.85rem 1rem 1rem}
.solben h3{font-size:1.02rem;margin-bottom:.25rem}
.sol__fda{margin:1.2rem 0 0;font-size:.78rem;line-height:1.4;color:var(--ink-soft);max-width:58ch}

.stat{display:grid;gap:.15rem;padding:1rem 0;border-top:1px solid var(--plum-line)}
.sec--deep .stat{border-color:rgba(255,255,240,.2)}
.stat b{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--plum);line-height:1}
.sec--deep .stat b{color:var(--ft-accent)}
.stat span{font-size:.86rem;color:var(--ink-soft)}
.sec--deep .stat span{color:#F0FAFF}