/* ═══ Wellness Pharma · portada temporal ═══ */
:root{
  --ink:#16202A; --ink-2:#2E3C48; --muted:#65727F; --muted-2:#95A3AE;
  --line:#E3EAEF; --accent:#6EB9DE; --accent-d:#1E7BA6; --accent-dd:#155B7C; --wa:#25D366;
  --f-d:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-b:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#fff 0%,#F2F8FC 44%,#E4F0F8 100%);
  color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1{font-family:var(--f-d);font-weight:200;margin:0;line-height:.94;letter-spacing:-.045em}
p{margin:0}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent-d);outline-offset:4px;border-radius:6px}

.bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(74px);opacity:.55}
.o1{width:560px;height:560px;background:#C4E6F6;top:-180px;right:-110px;animation:drift 24s ease-in-out infinite}
.o2{width:440px;height:440px;background:#DCEEF7;bottom:-150px;left:-120px;animation:drift 29s ease-in-out infinite reverse}
.o3{width:320px;height:320px;background:#E7F1E9;top:44%;right:38%;opacity:.38;animation:drift 34s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-30px) scale(1.09)}}

/* ─── cabecera ─── */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;width:min(1200px,92vw);margin:0 auto;padding:24px 0 0}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{width:38px;height:38px;object-fit:contain}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;font-family:var(--f-d)}
.b1{font-size:16px;font-weight:500;letter-spacing:.06em}
.b2{font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.top-wa{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  padding:10px 18px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.7);
  transition:.25s cubic-bezier(.3,.8,.4,1)}
.top-wa svg{width:16px;height:16px}
.top-wa:hover{border-color:var(--wa);color:#0B7A38;transform:translateY(-1px)}

/* ─── héroe ─── */
.hero{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr 1.02fr;
  gap:clamp(30px,5vw,72px);align-items:center;width:min(1200px,92vw);margin:0 auto;
  padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px)}
.eyebrow{font-family:var(--f-d);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent-d);font-weight:500;margin-bottom:14px}
h1{font-size:clamp(54px,7.5vw,108px);margin-bottom:8px}
h1 sup{font-size:.2em;top:-1.6em;font-weight:300;letter-spacing:0}
.tag{font-family:var(--f-d);font-size:clamp(12px,1.3vw,15px);letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.claim{font-family:var(--f-d);font-size:clamp(21px,2.6vw,32px);font-weight:400;line-height:1.24;
  margin-bottom:22px;padding-left:18px;border-left:2px solid var(--accent)}
.claim em{font-style:normal;color:var(--accent-d)}
.lead{max-width:48ch;color:var(--ink-2);font-size:16px;line-height:1.72}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-b);font-weight:500;
  font-size:15px;padding:15px 28px;border-radius:100px;border:1px solid transparent;
  transition:.25s cubic-bezier(.3,.8,.4,1);white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-main{background:var(--ink);color:#fff}
.btn-main:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 14px 30px rgba(30,123,166,.32)}
.btn-wa{background:var(--wa);color:#06331A;font-weight:600}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.34)}
.soon{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-size:13.5px;
  color:var(--muted);letter-spacing:.02em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 7px}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}

/* ─── portada del catálogo ─── */
.art{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;perspective:1700px}
.card{position:relative;display:block;width:min(600px,100%);border-radius:6px;overflow:hidden;
  box-shadow:0 8px 20px rgba(16,24,32,.10),0 34px 80px rgba(16,24,32,.20);
  transform:rotateY(-11deg) rotateX(4deg) rotate(-.6deg);
  transition:transform .9s cubic-bezier(.2,.7,.3,1);animation:floaty 7.5s ease-in-out infinite}
.art:hover .card{transform:rotateY(-3deg) rotateX(1deg) scale(1.02)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -13px}}
.gloss{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 64%,rgba(255,255,255,.24) 100%);mix-blend-mode:overlay}
.floor{position:absolute;bottom:34px;left:50%;translate:-50% 0;width:70%;height:24px;
  background:radial-gradient(ellipse,rgba(16,24,32,.2),transparent 70%);filter:blur(9px)}
.art-tag{margin-top:26px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .25s}
.art:hover .art-tag{color:var(--accent-d)}

/* ─── pie ─── */
.foot{position:relative;z-index:2;width:min(1200px,92vw);margin:0 auto;padding:26px 0 34px;
  border-top:1px solid rgba(16,24,32,.09);display:grid;gap:12px}
.f-cta{font-size:15px;color:var(--ink-2)}
.f-cta a{color:var(--accent-d);font-weight:500;border-bottom:1px solid rgba(30,123,166,.3)}
.f-cta a:hover{border-color:var(--accent-d)}
.f-data{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;
  font-size:13.5px;color:var(--muted)}
.f-data a:hover{color:var(--accent-d)}
.f-legal{font-size:12.5px;color:var(--muted-2)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:34px;text-align:left}
  .art{order:-1}
  .card{width:min(460px,100%);transform:rotateY(-6deg) rotateX(2deg)}
  .lead{max-width:none}
}
@media (max-width:560px){
  .top-wa span{display:none}
  .top-wa{padding:10px 13px}
  .btn{flex:1 1 100%;justify-content:center}
  .f-data{flex-direction:column;gap:5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.05s!important}
}