/* ============================================================
   APPLE — capa final: limpio, mucho aire, movimiento suave.
   Se carga después de style.css y gana la cascada sin tocar el
   HTML. Para volver al look anterior basta quitar el <link>.
   Principios: tipografía grande con tracking apretado, minúsculas
   en lugar de versalitas, superficies sin bordes, radios generosos,
   vidrio sólo en header/overlays, una sola curva de easing.
   ============================================================ */
:root{
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;
  --font-mono:var(--font-body);
  --surface:#161617;
  --card:#161617;
  --graphite:#1c1c1e;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --silver:#86868b;
  --muted:#a1a1a6;
  --bone:#e8e8ed;
  --r:18px;
  --r-lg:28px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur:.7s;
}
body{ font-size:17px; line-height:1.47; letter-spacing:-.011em; background:#000; }
.wrap{ max-width:1080px; }

/* ---- etiquetas: sin versalitas ni espaciado ancho ---- */
.eyebrow,.catalog__num,.col-card__num,.look__num,.guide__kind,.cp-crumbs,.blog-card__date,
.product__kicker,.pd-kicker,.foot-slogan,.foot-links h6,.foot-bottom,.pd-ficha h4,.pd-related h4,
.ck-summary h3,.cart-head h3,.ck-field label,.pd-row dt,.cp-aside__row dt,.principle dt,.philo-rule strong,
.quote-day__src,.review-author,.cart-ship__txt,.foot-pay span,.foot-founders{
  text-transform:none; letter-spacing:0; font-weight:600; font-size:13px;
}
.eyebrow{ color:var(--silver); }
.sec-head .eyebrow::before,.philo-story > .eyebrow::before{ display:none; }

/* ---- titulares ---- */
.sec-title,.catalog__title,.quiz-cta__title,.waitlist__title,.about-reviews h3,.ck-head h1,
.pd-name,.blog-modal h2,.info-modal h3,.ck-success h2,.guide__title,.pillar__title,.blog-card__title{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.028em; line-height:1.07;
}
.sec-title{ font-size:clamp(34px,5.4vw,56px); margin:10px 0 0; text-wrap:balance; }
.sec-lead{ font-size:19px; line-height:1.42; letter-spacing:-.01em; color:var(--muted); max-width:560px; }
.hero h1,.cp-title{ text-transform:none; font-weight:600; letter-spacing:-.045em; line-height:1.02; font-size:clamp(48px,9.4vw,112px); }
.col-card__name,.look__name,.road__name,.cp-other strong,.vote__name,.hero-pillar__name,.pillar__key,
.process-name,.method-tab,.cat,.btn,.link-arrow,.catalog-controls select,.nav__links,.trust__name{
  text-transform:none; letter-spacing:-.005em;
}
.serif,.col-card__tag,.hero-tag,.cp-tag,.road__desc,.hero-pillar__num,.process-num,.guide__steps li::before,
.cart-empty p,.foot-disclaimer,.cp-other span,.road__num,.ck-step span{ font-family:var(--font-display); font-style:normal; }
.hero-tag,.cp-tag{ font-size:clamp(20px,2.4vw,28px); font-weight:500; letter-spacing:-.02em; color:var(--bone); }
/* las citas conservan la voz editorial */
.quote-day__text,.philo-quote,.review-text{ font-family:var(--font-serif); }

/* ---- header: vidrio ---- */
header{
  background:rgba(22,22,23,.72);
  backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
}
header.is-scrolled{ background:rgba(22,22,23,.72); border-bottom-color:var(--line-soft); }
.nav{ padding:0 22px; height:52px; max-width:1080px; }
header.is-scrolled .nav{ padding-top:0; padding-bottom:0; }
.logo-img{ height:24px; }
.nav__links{ gap:30px; font-size:13px; font-weight:400; }
.nav__links a{ color:rgba(255,255,255,.72); transition:color .3s var(--ease); }
.nav__links a::after{ display:none; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:#fff; }
.nav__icons{ gap:18px; }
.nav__icons svg{ width:18px; height:18px; stroke-width:1.6; }
.nav__icons button{ opacity:.85; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.nav__icons button:hover{ opacity:1; }
.nav__icons button:active{ transform:scale(.9); }
.cart-count{ top:-6px; right:-8px; background:#fff; }
.search-bar input{ font-size:17px; padding:16px 22px; }
.fx-progress{ display:none; }
@media (max-width:860px){
  .nav__links.open{ background:rgba(22,22,23,.94); backdrop-filter:blur(22px); padding:8px 22px 20px; border-bottom:1px solid var(--line-soft); }
  .nav__links.open a{ font-size:17px; padding:14px 0; }
}

/* ---- botones: píldoras ---- */
.btn{
  font-size:17px; font-weight:400; letter-spacing:-.01em; padding:12px 24px; border-radius:980px;
  min-height:44px; justify-content:center;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.btn::before{ display:none; }
.btn--primary{ background:#fff; color:#000; }
.btn--primary:hover{ background:#e8e8ed; }
.btn--ghost{ background:rgba(255,255,255,.1); border-color:transparent; color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.18); color:#fff; border-color:transparent; }
.btn:active{ transform:scale(.97); }
.link-arrow{ border:none; padding:0; font-size:17px; font-weight:400; letter-spacing:-.01em; color:#fff; }
.link-arrow::after{ content:' ›'; display:inline-block; transition:transform .35s var(--ease); }
.link-arrow:hover{ letter-spacing:-.01em; text-decoration:underline; text-underline-offset:4px; }
.link-arrow:hover::after{ transform:translateX(3px); }

/* ---- ritmo vertical ---- */
.section{ padding:140px 0; }
.catalog,.gallery-section{ padding:140px 0; }
.ofertas{ padding-top:140px; }
.sec-head{ margin-bottom:64px; }
@media (max-width:640px){
  .section,.catalog,.gallery-section{ padding:88px 0; }
  .ofertas{ padding-top:88px; }
  .sec-head{ margin-bottom:40px; }
  body{ font-size:16px; }
}

/* ---- hero centrado ---- */
.hero{ padding:140px 0 96px; text-align:center; }
.hero::before{ background:radial-gradient(900px circle at 50% 0%, rgba(255,255,255,.09), transparent 62%); }
.hero-grid{ grid-template-columns:1fr; gap:96px; justify-items:center; align-items:start; }
.hero-copy{ display:flex; flex-direction:column; align-items:center; max-width:820px; }
.hero h1{ margin:14px 0 22px; }
.hero h1 .line{ padding-bottom:.08em; }
.hero-motto{ font-size:15px; font-weight:500; letter-spacing:.02em; color:var(--silver); text-transform:none; margin:0 0 10px; }
.hero-tag{ margin:0 0 18px; }
.hero-sub{ font-size:19px; line-height:1.42; color:var(--muted); max-width:600px; margin:0 0 36px; }
.hero .btn-row{ justify-content:center; }
.hero-pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; border:none; text-align:left; }
.hero-pillar{
  display:flex; flex-direction:column; gap:8px; padding:30px 28px 32px; border:none;
  background:var(--surface); border-radius:var(--r-lg);
}
.hero-pillar:hover{ padding-left:28px; transform:translateY(-4px); background:#1c1c1e; }
.hero-pillar__num{ font-size:15px; font-weight:600; color:var(--silver); grid-row:auto; }
.hero-pillar__name{ font-size:24px; font-weight:600; letter-spacing:-.022em; color:#fff; }
.hero-pillar__desc{ font-size:15px; line-height:1.45; color:var(--muted); }
@media (max-width:860px){ .hero-pillars{ grid-template-columns:1fr; } .hero{ padding:88px 0 64px; } .hero-grid{ gap:56px; } }
.hero-scroll{ display:none; }

/* ---- marquee y palabra del pie: más calmos ---- */
.marquee{ border:none; padding:12px 0 40px; }
.marquee__track span{ font-size:clamp(28px,4vw,48px); font-weight:600; letter-spacing:-.035em; color:#3a3a3c; padding:0 22px; }
.marquee__track span.o{ -webkit-text-stroke:0; color:#636366; }
.marquee__track span.s{ font-family:var(--font-display); color:#2c2c2e; }
.foot-word{ -webkit-text-stroke:0; color:#161617; font-size:clamp(40px,9vw,120px); letter-spacing:-.05em; margin:0 0 48px; transition:color .8s var(--ease), opacity var(--dur) var(--ease-out), transform 1s var(--ease-out); }
.foot-word:hover{ color:#232325; -webkit-text-stroke:0; }

/* ---- banda de confianza ---- */
.trust{ padding:8px 0 24px; }
.trust__row{ gap:12px; }
.trust__item{ justify-content:center; padding:18px 12px; background:var(--surface); border-radius:var(--r); }
.trust__item > svg{ width:20px; height:20px; stroke:#fff; }
.trust__name{ font-size:14px; color:var(--bone); }

/* ---- tarjetas: superficies sin borde, radios amplios ---- */
.col-card,.look,.guide,.review-card,.cp-other,.blog-card,.quiz-cta__inner,.waitlist,.vote__opt,
.ck-panel,.ck-summary,.gallery-card,.pd-modal,.info-modal,.blog-modal,.quiz-modal,.empty-state,.philo-rule{ border-color:transparent; }
.col-card{ border-radius:var(--r-lg); background:var(--surface); }
.col-card:hover{ border-color:transparent; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.col-card::after{ display:none; }
.col-card__bg img{ filter:grayscale(1) contrast(1.05); opacity:.5; transition:opacity .8s var(--ease), transform 1.4s var(--ease-out); }
.col-card:hover .col-card__bg img{ opacity:.62; transform:scale(1.045); }
.col-card__name{ font-size:clamp(26px,3vw,36px); letter-spacing:-.03em; }
.col-card__tag{ font-size:17px; font-weight:400; color:var(--bone); }
.col-card__count{ font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; }
.col-card:hover .col-card__count{ letter-spacing:0; }
.col-card__glyph{ stroke:rgba(255,255,255,.6); }
.look,.guide,.review-card,.cp-other,.blog-card,.vote__opt,.gallery-card{ border-radius:var(--r-lg); background:var(--surface); }
.look,.guide{ padding:36px 32px; }
.look:hover,.guide:hover,.cp-other:hover,.blog-card:hover,.vote__opt:hover{ border-color:transparent; background:#1c1c1e; }
.look__name{ font-size:26px; letter-spacing:-.025em; }
.look__desc,.guide__steps li,.blog-card__excerpt{ font-size:15px; }
.quiz-cta__inner,.waitlist{ border-radius:var(--r-lg); background:var(--surface); padding:56px 48px; }
@media (max-width:640px){ .quiz-cta__inner,.waitlist{ padding:36px 24px; } }
.quiz-cta__title,.waitlist__title{ font-size:clamp(28px,4vw,44px); }
.philo-rule{ border-left:none; border-radius:var(--r); padding:26px 28px; }
.philo-quote{ font-size:clamp(28px,3.6vw,42px); }
.empty-state{ border:1px dashed var(--line); border-radius:var(--r-lg); }

/* pilares */
.pillars{ border:none; gap:14px; }
.pillar{ border:none; border-radius:var(--r-lg); background:var(--surface); padding:34px 30px; transition:transform .6s var(--ease-out), background-color .4s var(--ease); }
.pillar::before{ display:none; }
.pillar:hover{ background:#1c1c1e; transform:translateY(-4px); }
.pillar:hover .pillar__key,.pillar:hover .pillar__title,.pillar:hover .pillar__go{ color:#fff; }
.pillar:hover .pillar__desc{ color:var(--muted); }
.pillar__title{ font-size:28px; } .pillar__go{ font-size:14px; text-transform:none; letter-spacing:0; }

/* proceso, principios, ayuda, faq: filas limpias */
.process-grid,.principles,.faq-list,.help-cards{ border-top:none; }
.process-step{ border:none; padding:8px 28px 0 0; }
.process-num{ font-size:15px; font-weight:600; }
.process-name{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.process-desc,.principle dd,.philo-story p,.faq-body p{ font-size:16px; }
.principle{ padding:26px 0; }
.principle dt{ font-size:17px; color:#fff; }
.faq-item summary{ font-size:21px; font-weight:600; letter-spacing:-.02em; padding:26px 0; }
.faq-item summary:hover{ padding-left:0; }
.faq-item summary::after{ content:'+'; font-size:28px; font-weight:300; }
.faq-item[open] summary::after{ content:'+'; transform:rotate(45deg); }
.faq-item{ border-bottom-color:var(--line-soft); }
.help-card{ font-size:19px; padding:26px 0; border-bottom-color:var(--line-soft); }
.help-card:hover{ padding-left:0; }

/* ---- productos ---- */
.grid{ gap:48px 24px; }
.product__art{ border-radius:var(--r-lg); background:var(--surface); margin-bottom:20px; }
.product__art img{ transition:transform 1s var(--ease-out); }
.product:hover .product__art img{ transform:scale(1.04); }
.product__name{ font-size:17px; font-weight:600; letter-spacing:-.015em; }
.product__spec,.product__desc{ font-size:14px; }
.product__price{ font-size:17px; font-weight:500; }
.product__badge{ border-radius:980px; padding:5px 11px; font-size:11px; letter-spacing:0; text-transform:none; font-weight:600; }
.product__badge--low{ background:rgba(0,0,0,.55); backdrop-filter:blur(12px); border:none; }
.off-pill{ border-radius:980px; border-color:rgba(255,255,255,.3); }
.product__add{ width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.12); transition:background-color .3s var(--ease), transform .4s var(--ease-out); }
.product__add:hover{ background:#fff; transform:scale(1.08); }
.product__add:active{ transform:scale(.92); }
.notify-btn{ border-radius:980px; font-size:13px; text-transform:none; letter-spacing:0; border-color:rgba(255,255,255,.25); }
.product--soldout .product__price{ text-transform:none; letter-spacing:0; font-size:14px; }
.product__alt{ transition:opacity .7s var(--ease); }

/* chips y selects */
.cat{ border:none; border-radius:980px; background:rgba(255,255,255,.08); padding:10px 20px; font-size:14px; font-weight:500; transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.cat:hover{ background:rgba(255,255,255,.14); }
.cat.active{ background:#fff; color:#000; }
.cat:active{ transform:scale(.96); }
.method-tabs{ border-bottom-color:var(--line-soft); gap:32px; }
.method-tab{ font-size:15px; font-weight:500; text-transform:none; letter-spacing:0; padding-bottom:16px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.catalog-controls select{ border:none; border-radius:980px; background:rgba(255,255,255,.08); padding:11px 20px; font-size:14px; text-transform:none; letter-spacing:0; }
.catalog-controls select:hover{ background:rgba(255,255,255,.14); border:none; }
.cp-kinds li,.road__status{ border-radius:980px; border-color:transparent; background:rgba(255,255,255,.08); }
.road__status{ text-transform:none; letter-spacing:0; font-size:12px; }
.road--hecho .road__status{ border-color:transparent; }
.road--en-curso .road__status{ background:#fff; }

/* ---- formularios ---- */
.ck-field input,.ck-field textarea,.waitlist__row input,.coupon-box input,.quiz-option,.ck-radio{ border-radius:14px; border-color:var(--line); background:rgba(255,255,255,.04); transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), padding-left .35s var(--ease); }
.ck-field input:focus,.ck-field textarea:focus,.waitlist__row input:focus,.coupon-box input:focus{ border-color:rgba(255,255,255,.7); box-shadow:0 0 0 4px rgba(255,255,255,.1); background:rgba(255,255,255,.06); }
.ck-field input,.ck-field textarea,.waitlist__row input{ font-size:17px; padding:15px 16px; }
.coupon-box input{ text-transform:none; letter-spacing:0; font-size:15px; }
.coupon-apply,.info-close,.founder-ig,.coupon-applied{ border-radius:980px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; border-color:rgba(255,255,255,.2); }
.coupon-applied{ font-size:13px; }
.qty__btn,.pd-nav,.pd-close{ border-radius:50%; }
.waitlist__channels label{ border-radius:980px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; }
.ck-radio:has(input:checked){ border-color:#fff; background:rgba(255,255,255,.06); }
.ck-radio__box{ border-radius:12px; }
.ck-step{ border-radius:980px; text-transform:none; letter-spacing:0; font-size:13px; border-color:transparent; background:rgba(255,255,255,.06); }
.ck-step.active{ background:#fff; }
.ck-panel,.ck-summary{ background:var(--surface); border-radius:var(--r-lg); padding:32px; }
.ck-summary h3{ font-size:19px; color:#fff; }
.ck-head h1{ font-size:clamp(34px,5vw,52px); }
.ck-back,.ck-line--total{ text-transform:none; letter-spacing:0; }
.ck-back{ font-size:14px; }

/* ---- carrito, modales y overlays: vidrio + resorte ---- */
.cart-overlay,.info-overlay,.pd-overlay{ background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:opacity .5s var(--ease); }
.cart-panel{
  background:rgba(28,28,30,.82); backdrop-filter:saturate(180%) blur(30px); -webkit-backdrop-filter:saturate(180%) blur(30px);
  border-left:1px solid var(--line-soft); border-radius:var(--r-lg) 0 0 var(--r-lg);
  transition:transform .6s var(--ease-out);
}
.cart-head h3{ font-size:19px; color:#fff; }
.cart-close{ text-transform:none; letter-spacing:0; font-size:15px; }
.cart-ship__bar{ height:4px; border-radius:980px; } .cart-ship__fill{ border-radius:980px; transition:width .6s var(--ease-out); }
.pd-modal,.info-modal,.blog-modal,.quiz-modal{
  background:rgba(28,28,30,.9); backdrop-filter:saturate(180%) blur(40px); -webkit-backdrop-filter:saturate(180%) blur(40px);
  border-radius:var(--r-lg); box-shadow:0 40px 100px rgba(0,0,0,.6);
  transform:translate(-50%,-47%) scale(.97);
  transition:opacity .45s var(--ease), transform .7s var(--ease-out);
}
.pd-modal.open,.info-modal.open,.blog-modal.open,.quiz-modal.open{ transform:translate(-50%,-50%) scale(1); }
.pd-carousel,.blog-modal__img,.rel-art,.founders-story__img,.quiz-result-art{ border-radius:var(--r); }
.pd-track{ transition:transform .6s var(--ease-out); }
.pd-dot{ height:6px; width:6px; border-radius:50%; transition:background-color .3s var(--ease), transform .3s var(--ease); }
.pd-dot.active{ transform:scale(1.25); }
.pd-name{ font-size:34px; }
.pd-price{ font-size:24px; font-weight:600; }
.quiz-dot{ height:4px; border-radius:980px; transition:background-color .5s var(--ease); }
.quiz-option:hover{ padding-left:18px; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.07); }
.quiz-question{ font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; font-size:30px; }

/* ---- pie ---- */
footer{ border-top:1px solid var(--line-soft); padding:80px 0 36px; }
.foot-nav__grid{ border:none; gap:14px; }
.foot-nav__item{ border:none; border-radius:var(--r-lg); background:var(--surface); padding:28px 26px 30px; transition:background-color .4s var(--ease), transform .6s var(--ease-out); }
.foot-nav__item:hover,.foot-nav__item:focus-visible{ background:#1c1c1e; transform:translateY(-3px); }
.foot-nav__name{ font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-.025em; }
.foot-slogan{ font-size:15px; color:#fff; }
.foot-disclaimer{ font-size:14px; line-height:1.5; }
.foot-links h6{ color:#fff; }
.foot-links ul li{ font-size:14px; transition:color .3s var(--ease); }
.foot-bottom{ font-size:12px; border-top-color:var(--line-soft); }

/* ---- página de colección y citas ---- */
.cp-hero{ padding:120px 0 88px; }
.cp-aside,.cp-aside__row{ border-color:var(--line-soft); }
.cp-aside__row dt{ font-size:13px; }
.quote-day{ padding:120px 0; border-bottom:none; }
.quote-day__text{ font-size:clamp(30px,4.2vw,52px); letter-spacing:-.02em; }
.quote-day__practice{ border-left-color:var(--line-soft); }
.road::before{ background:var(--line-soft); }
.road__name{ font-size:26px; letter-spacing:-.025em; }
.road__desc{ font-size:16px; color:var(--muted); }
.vote__bar{ transition:transform 1.4s var(--ease-out); }
.vote__name{ font-size:17px; letter-spacing:-.01em; }
.vote__pct{ text-transform:none; letter-spacing:0; font-size:13px; }
.gallery-card img{ filter:none; transition:transform 1.2s var(--ease-out); }
.gallery-card:hover img{ transform:scale(1.05); }

/* ---- entradas: una sola familia, sutil (fade + subida corta) ---- */
.fx [data-fx]{ transition:opacity var(--dur) var(--ease-out), transform 1s var(--ease-out); transition-delay:calc(var(--i,0) * 70ms); }
.fx [data-fx="up"]:not(.is-in),.fx [data-fx="rise"]:not(.is-in),.fx [data-fx="sweep"]:not(.is-in),
.fx [data-fx="step"]:not(.is-in),.fx [data-fx="pop"]:not(.is-in){ opacity:0; transform:translateY(28px); }
.fx [data-fx="left"]:not(.is-in),.fx [data-fx="right"]:not(.is-in){ opacity:0; transform:translateY(20px); }
.fx [data-fx="scale"]:not(.is-in){ opacity:0; transform:scale(.97) translateY(16px); }
.fx [data-fx="zoom"]:not(.is-in){ opacity:0; transform:scale(1.03); filter:none; }
.fx [data-fx="blur"]:not(.is-in){ opacity:0; filter:none; transform:translateY(20px); }
.fx [data-fx="blur"]{ transition-duration:1.2s; }
/* colecciones: ya no hay cortina, entran igual que el resto */
.fx [data-fx="clip"]{ clip-path:none; transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out), box-shadow .7s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms); }
.fx [data-fx="clip"]:not(.is-in){ clip-path:none; opacity:0; transform:translateY(32px); }
.fx [data-fx="clip"] .col-card__body{ transition:none; }
.fx [data-fx="clip"]:not(.is-in) .col-card__body{ transform:none; opacity:1; }
.fx [data-fx="clip"].is-in:hover{ transition-delay:0s; transform:scale(1.012); }
.fx .look[data-fx]:not(.is-in) .look__list li,.fx .guide[data-fx]:not(.is-in) .guide__steps li{ transform:translateY(6px); }
.philo-quote .w{ transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay:calc(var(--w) * 35ms); }
.fx .philo-quote[data-fx]:not(.is-in) .w{ filter:blur(3px); transform:translateY(8px); }
.hero h1 .line > span{ transition:transform 1.3s var(--ease-out); }
.hero-motto,.hero-tag,.hero-sub,.hero .btn-row,.hero .eyebrow{ transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.hero-pillar{ transition:transform .6s var(--ease-out), background-color .4s var(--ease), opacity 1s var(--ease-out); }
.fx .hero-pillar[data-fx]{ transition-delay:calc(var(--i,0) * 110ms + .7s); }
.fx .hero-pillar[data-fx].is-in:hover{ transition-delay:0s; }
.cp-title > span{ transition:transform 1.3s var(--ease-out); }
main.page-enter{ animation:pageIn .7s var(--ease-out) both; }

/* ---- scrollbar discreta y foco ---- */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#3a3a3c; border:3px solid #000; border-radius:980px; }
::-webkit-scrollbar-thumb:hover{ background:#4a4a4c; }
:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:3px; border-radius:6px; }
::selection{ background:rgba(255,255,255,.9); color:#000; }

@media (prefers-reduced-motion:reduce){
  .col-card:hover,.pillar:hover,.hero-pillar:hover,.foot-nav__item:hover{ transform:none; }
  .pd-modal,.info-modal,.blog-modal,.quiz-modal{ transform:translate(-50%,-50%); transition:opacity .2s; }
  .fx [data-fx]{ transition:none !important; }
}


/* ============================================================
   FONDO AMBIENTE — un paisaje en grises por sección, difuminado,
   en capas que reaccionan suave al mouse y al scroll (js/bg.js).
   Vive en z-index:-1: siempre debajo de textos, tarjetas y header.
   Tonos oscuros a propósito para que el texto blanco conserve contraste.
   ============================================================ */
.bg-ambient{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict; background:#000; }
.bg-scene{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  background:linear-gradient(180deg,#363636 0%,#1f1f1f 55%,#0e0e0e 100%);
  transition:opacity 1.2s var(--ease), visibility 0s 1.2s;
}
.bg-scene.is-on{ opacity:1; visibility:visible; transition:opacity 1.2s var(--ease), visibility 0s; }
.bg-layer{
  position:absolute; inset:-12% -5%;
  transform:translate3d(var(--lx,0px),var(--ly,0px),0);
  will-change:transform;
}
.bg-layer svg{
  display:block; width:100%; height:100%;
  filter:blur(var(--blur,10px));
  animation:bgDrift var(--dur,26s) ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{ transform:translate3d(calc(var(--dx,12px) * -1), calc(var(--dy,6px) * -1), 0); }
  to{ transform:translate3d(var(--dx,12px), var(--dy,6px), 0); }
}
.bg-ambient::after{ /* viñeta: bordes oscuros, centro respira */
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.6) 100%);
}
@media (max-width:700px){ .bg-layer svg{ filter:blur(calc(var(--blur,10px) * .6)); } }
@media (prefers-reduced-motion:reduce){ .bg-layer svg{ animation:none; } .bg-scene{ transition:none; } }


/* ============================================================
   CAMBIOS DE ESCENA — View Transitions
   · Entre páginas (index ⇄ colección ⇄ producto ⇄ checkout): automático
     con @view-transition. Chrome/Edge/Safari recientes; el resto navega como siempre.
   · Dentro de index.html (secciones, modal de producto, filtros): js/fx.js
     → transition() pone html[data-vt] y nombra los elementos que viajan.
   ============================================================ */
@view-transition{ navigation:auto; }
header{ view-transition-name:site-header; }

/* escena: sale la vieja (rápido, se hunde un poco) y entra la nueva (sube y se asienta) */
::view-transition-old(root),::view-transition-new(root){ mix-blend-mode:normal; animation-duration:.6s; animation-timing-function:var(--ease-out); animation-fill-mode:both; }
::view-transition-old(root){ animation-name:vtSceneOut; animation-duration:.35s; animation-timing-function:var(--ease); }
::view-transition-new(root){ animation-name:vtSceneIn; animation-delay:.08s; }
@keyframes vtSceneOut{ to{ opacity:0; transform:scale(.975) translateY(-14px); } }
@keyframes vtSceneIn{ from{ opacity:0; transform:translateY(40px) scale(1.012); } }

/* el header se queda quieto: se funde con sí mismo */
::view-transition-group(site-header){ animation-duration:.3s; }
::view-transition-old(site-header),::view-transition-new(site-header){ mix-blend-mode:normal; height:100%; }

/* modal de producto: el fondo sólo se funde (nada se hunde), el marco se acomoda */
html[data-vt="modal"]::view-transition-old(root){ animation:none; }
html[data-vt="modal"]::view-transition-new(root){ animation:vtFadeIn .5s var(--ease) both; }
::view-transition-group(pd-modal){ animation-duration:.6s; animation-timing-function:var(--ease-out); }
::view-transition-old(pd-modal),::view-transition-new(pd-modal){ mix-blend-mode:normal; animation-duration:.45s; }
::view-transition-new(pd-modal){ animation-name:vtModalIn; animation-timing-function:var(--ease-out); }
@keyframes vtFadeIn{ from{ opacity:0; } }
@keyframes vtModalIn{ from{ opacity:0; transform:scale(.95); } }
/* la foto viaja entre la tarjeta y el modal sin deformarse */
::view-transition-group(pd-art){ animation-duration:.7s; animation-timing-function:var(--ease-out); overflow:clip; border-radius:var(--r); z-index:2; }
::view-transition-old(pd-art),::view-transition-new(pd-art){ height:100%; object-fit:cover; mix-blend-mode:normal; }

/* grilla del catálogo: se funde y la altura se acomoda sin salto */
html[data-vt="grid"]::view-transition-old(root),html[data-vt="grid"]::view-transition-new(root){ animation:none; }
::view-transition-group(grid){ animation-duration:.55s; animation-timing-function:var(--ease-out); }
::view-transition-old(grid),::view-transition-new(grid){ mix-blend-mode:normal; height:100%; animation-duration:.4s; }

/* feedback al tocar una tarjeta de producto */
.product:active{ transform:scale(.985); }
.fx .product[data-fx]:active{ transition-delay:0s; transition-duration:.25s; }

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .product:active{ transform:none; }
}

/* ---- The VHAX Method: tarjetas de guía (inicio y página de cada guía) ---- */
.art-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.art-card{ display:flex; flex-direction:column; gap:12px; padding:28px 26px; border:1px solid var(--line-soft); border-radius:20px; color:inherit; background:transparent; transition:border-color .3s, transform .35s var(--ease-out), background .3s; }
.art-card:hover{ border-color:var(--silver); transform:translateY(-3px); background:rgba(255,255,255,.02); }
.art-card:active{ transform:scale(.985); }
.art-card__kicker{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); }
.art-card__title{ font-family:var(--font-serif); font-weight:400; font-size:clamp(22px,2.2vw,28px); line-height:1.15; color:var(--marble); }
.art-card__excerpt{ font-size:14.5px; line-height:1.65; color:var(--muted); }
.art-card__foot{ margin-top:auto; padding-top:14px; font-size:12px; letter-spacing:.06em; color:var(--silver); display:flex; justify-content:space-between; gap:12px; }
.method-sub{ margin:72px 0 22px; }