/* Caso viteamins · Theriac (inc/caso-viteamins.php), 26/10/26. Prefijo ti-. Motor común: ma-caso.css. */

.ti-hero-k{margin:0 0 10px;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}

/* ---------- Portada: la imagen ocupa la pantalla desde el principio y se aleja; el nombre entra al final ----------
   El fondo de la foto es el mismo papel de la sección, así que el encuadre no se ve: solo la gama alejándose. */
.ti-hero{height:235svh}
html:not(.cx-js) .ti-hero{height:100svh}
.ti-hero{--a:clamp(0, calc((var(--q,0) - .5) / .42), 1);--c:clamp(0, calc((var(--q,0) - .78) / .2), 1)}
.ti-hero .cx-hero-f{clip-path:none}
.ti-hero .cx-hero-f picture{animation:none}
.ti-hero .cx-hero-f img{object-fit:contain;object-position:50% 100%;transform-origin:50% 72%;transform:scale(calc(2.15 - 1.15 * var(--q,0)));will-change:transform}
.ti-hero .cx-fit{animation:none;transform:translate3d(0,calc((1 - var(--a)) * 104%),0)}
.ti-hero .cx-hero-cred{opacity:var(--c)}
.ti-hero .cx-cred{animation:none}
html:not(.cx-js) .ti-hero{--q:1}
@media (max-width:760px) and (orientation:portrait){
  .ti-hero .cx-hero-f img{object-fit:cover;object-position:50% 50%;transform-origin:50% 52%;transform:scale(calc(1.5 - .5 * var(--q,0)))}
  .ti-hero{--a:clamp(0, calc((var(--q,0) - .6) / .36), 1)}
}
@media (prefers-reduced-motion:reduce){
  .ti-hero{--q:1 !important}
}

/* ---------- Recreaciones a página completa ---------- */
.ti-rec{padding:clamp(120px,18svh,210px) 0 0}
.ti-rec .cx-f--bleed{margin-bottom:0}
.ti-rec-tienda{padding-bottom:clamp(20px,3vw,40px)}
@media (max-width:760px){
  .ti-rec-casa .ti-rec-f img{object-position:36% 50%}
  .ti-rec-tienda .ti-rec-f img{object-position:30% 50%}
}

/* ---------- El logotipo: vi, tea y mins se apilan al bajar ---------- */
.ti-logo{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.ti-logo-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(32px,5vw,90px);align-items:center;margin-top:clamp(30px,4vw,60px)}
.ti-logo-v{display:flex;justify-content:center}
.ti-lg{display:block;width:min(100%,560px);height:auto;fill:currentColor;overflow:visible}
.ti-lg g{--a:clamp(0, calc((var(--vp,1) - var(--d)) / .32), 1)}
.ti-lg-vi{--d:0}.ti-lg-tea{--d:.28}.ti-lg-mins{--d:.56}
html.cx-js .ti-lg-vi{opacity:var(--a);transform:translateY(calc((1 - var(--a)) * -70px))}
html.cx-js .ti-lg-tea{opacity:var(--a);transform:scale(calc(.86 + .14 * var(--a)));transform-origin:50% 60%;transform-box:fill-box}
html.cx-js .ti-lg-mins{opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 70px))}
.ti-lg g{transition:none}
.ti-logo-x .cx-lede{margin-top:clamp(22px,2.4vw,34px)}
.ti-logo-x .cx-p{margin-top:clamp(18px,2vw,26px)}
.ti-lh-w{margin-top:clamp(90px,11vw,160px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--cx-line)}
.ti-lh{display:block;width:min(100%,780px);height:auto;fill:currentColor}
.ti-lh-t{margin:clamp(20px,2.4vw,30px) 0 0;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--cx-fg3);max-width:46ch}

/* ---------- Un color para cada infusión ---------- */
.ti-gin{padding:clamp(120px,18svh,210px) 0 0}
.ti-sm .cx-sm-x .cx-p{margin-top:0}
.ti-gl{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;border-top:1px solid var(--cx-line)}
.ti-gl li{display:grid;grid-template-columns:3.2em minmax(0,1fr);align-items:baseline;padding:10px 0;border-bottom:1px solid var(--cx-line);opacity:.38;transition:opacity .5s ease}
.ti-gl li.on{opacity:1}
.ti-gl b{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(24px,2.2vw,34px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ti-gl span{font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.35;color:var(--cx-fg)}
.ti-gl i{display:block;font-style:normal;font-family:var(--f-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-fg3);max-height:0;overflow:hidden;transition:max-height .5s ease,margin .5s ease}
.ti-gl li.on i{max-height:3em;margin-top:6px}
.ti-sm .cx-sm-f{border-radius:18px}
.ti-sm .cx-sm-f img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.cx-js) .ti-gl li{opacity:1}
html:not(.cx-js) .ti-gl i{max-height:none;margin-top:6px}

/* ---------- La paleta ---------- */
.ti-pal{padding-bottom:clamp(110px,15svh,180px)}
.ti-gam{grid-template-columns:repeat(7,minmax(0,1fr))}

/* ---------- Catálogo ---------- */
.ti-band .cx-band-f{aspect-ratio:1155/1600;width:clamp(200px,21vw,330px);border-radius:6px;background:#fff;box-shadow:0 24px 60px rgba(31,35,34,.12)}
.ti-band .cx-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ti-band{padding-bottom:40px}

/* ---------- Tasting set ---------- */
.ti-tas{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.ti-o-rev{object-position:50% 50%}

/* ---------- Wellness set ---------- */
.ti-ws{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.ti-ws-l{margin-top:clamp(60px,8vw,110px)}
.ti-ws-f{margin:0;border-radius:18px;overflow:hidden;background:#fff}
.ti-ws-f img{display:block;width:100%;height:auto}
.ti-ws-a{width:min(100% - 2 * var(--edge), 1600px);margin:0 auto clamp(12px,1.6vw,22px)}
.ti-ws-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);margin-top:clamp(12px,1.6vw,22px)}
.ti-ws-g2{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
.ti-ws-g2>.ti-ws-f{display:flex;align-items:center}
.ti-ws-st{display:grid;gap:clamp(12px,1.6vw,22px)}

/* ---------- Londres ---------- */
.ti-uk{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.ti-uk-g{margin-top:clamp(60px,8vw,110px);align-items:center}

/* ---------- Cierre ---------- */
.ti-fin{padding:clamp(110px,15svh,180px) 0}
.ti-fin .cx-reg{margin:0}

@media (max-width:900px){
  .ti-logo-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,8vw,70px)}
  .ti-lg{width:min(78%,420px)}
  .ti-gl li{padding:7px 0}
  .ti-gl span{font-size:15px}
  .ti-gl i{display:none}
  .ti-gam{grid-template-columns:repeat(7,minmax(0,1fr));height:clamp(260px,62vw,340px);grid-auto-rows:auto}
  .ti-gam span{font-size:9.5px;left:50%;margin-left:-.6em}
  .ti-ws-g,.ti-ws-g2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px) and (max-height:820px){
  .ti-gl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ti-gl li,.ti-gl i{transition:none}
}