/* ═══════════════════════════════════════════════════════════════
   VITALIQI ESTHETIC — evolucion.css
   Propuesta C «Evolución», común a toda la web. Se carga después de
   style.css / interior.css / tienda.css: mismos colores y tipografías,
   con cabecera, botones, pie y movimiento al día.
═══════════════════════════════════════════════════════════════ */
:root{
  --c-green-deep:#1e342b; --c-salvia:#6B8E7F; --c-border:#e6dfd5;
  --radius:12px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(30,52,43,.04),0 8px 28px -12px rgba(30,52,43,.18);
  --shadow-lg:0 2px 4px rgba(30,52,43,.04),0 24px 56px -20px rgba(30,52,43,.32);
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-io:cubic-bezier(0.77,0,0.175,1);
}
body{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
[id]{scroll-margin-top:84px}

/* ── barra de progreso ── */
.ev-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--c-gold);transform:scaleX(0);transform-origin:left;z-index:1100;pointer-events:none}

/* ── botones ── */
.btn{position:relative;gap:.6rem;font-size:.92rem;padding:.85rem 1.6rem;border-radius:999px;border-width:1.5px;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease,box-shadow 300ms var(--ease-out)}
.btn:hover,.btn--primary:hover,.btn--secondary:hover{transform:none}
.btn:active{transform:scale(.97)}
.btn--lg{padding:1rem 1.9rem;font-size:1rem}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn .arw{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);overflow:hidden;position:relative;flex-shrink:0}
.btn .arw svg{transition:transform 300ms var(--ease-out)}
.btn .arw svg+svg{position:absolute;transform:translateX(-160%)}
.btn--secondary .arw{background:var(--c-green-light)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{box-shadow:0 12px 28px -10px rgba(168,134,79,.7)}
  .btn--secondary:hover .arw{background:rgba(255,255,255,.18)}
  .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
  .btn:hover .arw svg:first-child{transform:translateX(160%)}
  .btn:hover .arw svg+svg{transform:translateX(0)}
}
@media (hover:none){
  .btn--primary:hover{background:var(--c-gold);border-color:var(--c-gold);box-shadow:none}
  .btn--secondary:hover{background:transparent;color:var(--c-green)}
}

/* ── cabecera: cristal claro; sobre una foto, transparente hasta bajar ── */
.header{background:rgba(250,250,248,.86);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--c-border);
  transition:background-color 400ms ease,box-shadow 400ms ease,border-color 400ms ease}
.header.scrolled{box-shadow:0 6px 30px -18px rgba(30,52,43,.35)}
.header__inner{height:84px;transition:height 400ms var(--ease-out)}
.header.scrolled .header__inner{height:68px}
.header__logo{position:relative;z-index:2}
.logo-vitali{font-size:1.5rem;transition:color 400ms ease}
.logo-esthetic{font-size:.62rem;letter-spacing:.32em}
.nav__list{gap:.15rem}
.nav__link{position:relative;font-size:.86rem;padding:.5rem .7rem;border-radius:0;transition:color 300ms ease}
.nav__link:hover{background:none}
.nav__link--active,.nav__link--active:hover{background:none;border-radius:0}
.nav__link--active::after{transform:scaleX(1)!important}
.nav__link::after{content:'';position:absolute;left:.7rem;right:.7rem;bottom:.2rem;height:1px;background:var(--c-gold);transform:scaleX(0);transform-origin:right;transition:transform 400ms var(--ease-out)}
.nav__dropdown{border-radius:16px;transform:translateX(-50%) translateY(-6px) scale(.97);transform-origin:top center;transition:opacity 180ms ease,transform 220ms var(--ease-out)}
.nav__item--dropdown:hover .nav__dropdown,.nav__item--dropdown:focus-within .nav__dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.nav__dropdown a{border-radius:10px;transition:background-color 200ms ease,color 200ms ease,padding-left 300ms var(--ease-out)}
.header__actions{gap:1.1rem}
.header__phone{font-size:.86rem;transition:color 300ms ease}
.header .btn{padding:.65rem 1.25rem;font-size:.86rem}
.cart-btn{transition:color 300ms ease,transform 160ms var(--ease-out)}
.cart-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .nav__link:hover::after{transform:scaleX(1);transform-origin:left}
  .nav__dropdown a:hover{padding-left:1.25rem}
}
.header--over:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
.header--over:not(.scrolled) .logo-vitali{color:#fff}
.header--over:not(.scrolled) .nav__link{color:rgba(255,255,255,.92)}
.header--over:not(.scrolled) .header__phone,.header--over:not(.scrolled) .cart-btn{color:rgba(255,255,255,.9)}
.header--over:not(.scrolled) .nav__toggle span{background:#fff}
@media (hover:hover) and (pointer:fine){
  .header--over:not(.scrolled) .nav__link:hover,.header--over:not(.scrolled) .header__phone:hover{color:var(--c-gold)}
}

/* ── pie ── */
.footer__logo{display:inline-flex;flex-direction:column;line-height:1.05}
.footer__social-link{width:40px;height:40px;transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease,transform 160ms var(--ease-out)}
.footer__social-link:active{transform:scale(.94)}
.footer__col h4{letter-spacing:.12em}
.footer__bottom{padding-bottom:5rem}

/* ── carrito cerrado: su sombra no debe asomar por el borde de la pantalla ── */
.cart-sidebar:not(.open){box-shadow:none}

/* ── WhatsApp flotante con pulso ── */
.whatsapp-float{right:1.5rem;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));box-shadow:0 10px 26px -8px rgba(37,211,102,.7);transition:transform 500ms var(--ease-out),opacity 300ms ease}
.whatsapp-float:hover{transform:none;box-shadow:0 10px 26px -8px rgba(37,211,102,.7)}
.whatsapp-float:active{transform:scale(.94)}
.whatsapp-float::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ev-ping 2.6s var(--ease-out) infinite}
.whatsapp-float.ev-oculto{transform:translateY(16px) scale(.9);opacity:0;pointer-events:none}
@keyframes ev-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.6);opacity:0}}

/* ── titulares comunes ── */
.section-eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-size:.78rem;letter-spacing:.18em;color:var(--c-gold-dark);margin-bottom:1rem}
.section-eyebrow::before{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0}
.section-header .section-eyebrow::after{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0}
.section-title{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.1;letter-spacing:-.01em}

/* ── cabecera de las páginas interiores ── */
.page-hero{min-height:62vh;background:var(--c-green-deep);isolation:isolate}
.page-hero__bg{inset:-6% -3%}
.page-hero__bg img{animation:ev-kenburns 26s ease-in-out infinite alternate}
.page-hero__overlay{background:linear-gradient(100deg,rgba(26,46,38,.86) 0%,rgba(30,52,43,.62) 45%,rgba(45,74,62,.22) 85%),linear-gradient(0deg,rgba(26,46,38,.55) 0%,transparent 40%)}
.page-hero__content{padding-top:96px}
.page-hero .section-eyebrow{color:var(--c-gold)}
.page-hero__title{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:-.015em;animation:ev-entra 1100ms var(--ease-out) 120ms both}
.page-hero__desc{animation:ev-entra 1000ms var(--ease-out) 280ms both}
.page-hero .section-eyebrow,.page-hero .breadcrumb{animation:ev-entra 800ms var(--ease-out) both}
@keyframes ev-kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@keyframes ev-entra{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* ── cierre verde de las páginas interiores: la foto llega hasta abajo y respira ── */
.cta-final__bg{inset:-14% 0}
.cta-final__bg img{width:100%;height:100%;object-fit:cover;animation:ev-kenburns 26s ease-in-out infinite alternate}

/* ── capas que se mueven con el scroll, en las dos direcciones (las mueve evolucion.js) ── */
.tratamiento-card__img-wrap img{height:124%;margin-top:-12%}

/* ── apariciones al hacer scroll ── */
[data-aos]{transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
[data-aos]:not(.aos-animate){transition-duration:0s;transition-delay:0s}

/* ── fotos que se descubren de abajo arriba ── */
.ev-img img,img.ev-img{transition:clip-path 1300ms var(--ease-out),scale 1600ms var(--ease-out)}
.ev-img.ev-pendiente img,img.ev-img.ev-pendiente{clip-path:inset(100% 0 0 0);scale:1.08;transition:none}

/* ── tarjetas ── */
.team-card,.tratamiento-card,.esp-card,.valor-item,.blog-card,.producto-card{transition:opacity 900ms var(--ease-out),box-shadow 500ms var(--ease-out),transform 500ms var(--ease-out)}
.team-card__img,.tratamiento-card__img-wrap img,.blog-card img{transition:scale 900ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .team-card:hover,.tratamiento-card:hover,.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);transition-delay:0s}
  .team-card:hover .team-card__img,.tratamiento-card:hover .tratamiento-card__img-wrap img,.blog-card:hover img{scale:1.05}
}
.team-card{overflow:hidden}
.team-grid--trio{max-width:1080px;margin-left:auto;margin-right:auto}
.team-card__role{letter-spacing:.14em;font-size:.72rem}
.team-card__body h3{font-size:1.55rem}

/* ── pantallas sin foto arriba: que la cabecera no tape el principio ── */
.tienda-hero{padding-top:calc(84px + 3rem)}
.tienda-hero .section-eyebrow::after{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0}

/* ── móvil: menú a pantalla completa ── */
@media (max-width:1080px){.header__phone{display:none}}
@media (max-width:900px){
  .nav{display:block;position:fixed;inset:0;top:0;padding:96px 1.5rem 2rem;background:var(--c-white);overflow-y:auto;
    opacity:0;pointer-events:none;visibility:hidden;transform:translateY(-8px);transition:opacity 250ms ease,transform 350ms var(--ease-out),visibility 0s linear 350ms}
  .nav.open{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition:opacity 250ms ease,transform 350ms var(--ease-out)}
  .nav-open .header{background:var(--c-white);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
  .nav-open .header .logo-vitali{color:var(--c-green)}
  .nav-open .header .nav__toggle span{background:var(--c-text)}
  .nav-open .header .cart-btn{color:var(--c-green)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{width:auto;color:var(--c-text)!important;font-family:var(--ff-serif);font-size:1.6rem;font-weight:400;padding:.7rem 0;border-bottom:1px solid var(--c-border)}
  .nav__link::after,.nav__link svg{display:none}
  .nav__dropdown{display:block;position:static;opacity:1;pointer-events:auto;transform:none;box-shadow:none;border:0;padding:.25rem 0 .5rem;min-width:0;background:none;margin:0}
  .nav__item--dropdown:hover .nav__dropdown,.nav__item--dropdown:focus-within .nav__dropdown{transform:none}
  .nav__dropdown::before{display:none}
  .nav__dropdown a{padding:.4rem 0 .4rem 1rem;color:var(--c-text-mid)}
  .header__actions .btn{display:none}
  .header__actions{margin-left:auto}
  .nav__toggle{position:relative;z-index:2;margin-left:0;width:44px;height:44px;align-items:center;justify-content:center}
  .team-grid--trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-aos="fade-left"]:not(.aos-animate),[data-aos="fade-right"]:not(.aos-animate){transform:translateY(24px)}
}
@media (max-width:640px){
  .header__inner{height:68px;padding:0 1rem}
  .page-hero{min-height:56vh}
  .team-grid--trio{grid-template-columns:1fr;max-width:420px}
  .ev-cifras{grid-template-columns:1fr 1fr!important}
}

@media (prefers-reduced-motion:reduce){
  .cta-final__bg img,.page-hero__bg img,.page-hero__title,.page-hero__desc,.page-hero .section-eyebrow,.page-hero .breadcrumb,.whatsapp-float::before{animation:none}
  [data-aos]{opacity:1;transform:none;transition:none}
  .ev-img.ev-pendiente img,img.ev-img.ev-pendiente{clip-path:none;scale:1}
}