/* OBT Nutrition & Healthy Café - tarjeta NFC. CSS propio, sin fuentes ni recursos externos. */
:root{
  --forest:#063D27; --emerald:#075B38; --deep:#042a1b; --orange:#FF7900; --lime:#A7DE22; --cream:#FFF2D4;
  --soft:#e3ecd9;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Avenir Next",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--deep);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;color:var(--cream);font-family:var(--sans);line-height:1.4;overflow-x:clip;position:relative;
  background:
    radial-gradient(120% 70% at 50% 0%,#0a7347 0%,var(--emerald) 38%,var(--forest) 70%,var(--deep) 100%);
  background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--cream);color:#063D27;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;border-radius:14px}

/* fondo atmosférico: luces naranja, hojas, textura fina */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.g1{width:70vmax;height:50vmax;left:-25vmax;top:-18vmax;background:radial-gradient(closest-side,rgba(255,121,0,.38),transparent);animation:drift 22s ease-in-out infinite alternate}
.g2{width:60vmax;height:42vmax;right:-22vmax;top:30%;background:radial-gradient(closest-side,rgba(167,222,34,.2),transparent);animation:drift 28s ease-in-out infinite alternate-reverse}
.g3{width:70vmax;height:44vmax;left:-20vmax;bottom:-22vmax;background:radial-gradient(closest-side,rgba(255,121,0,.3),transparent);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.08)}}
.leaf{position:absolute;fill:rgba(3,40,24,.55);stroke:none;filter:drop-shadow(0 0 1px rgba(167,222,34,.25));transform-origin:50% 100%;animation:sway 12s ease-in-out infinite alternate}
.leaf .vein{fill:none;stroke:rgba(167,222,34,.2);stroke-width:2;stroke-linecap:round}
.l1{width:150px;left:-30px;top:6%;rotate:-28deg}
.l2{width:120px;right:-26px;top:22%;rotate:32deg;animation-delay:-4s}
.l3{width:170px;left:-44px;bottom:10%;rotate:-52deg;animation-delay:-7s}
.l4{width:130px;right:-30px;bottom:4%;rotate:48deg;animation-delay:-2s}
@keyframes sway{to{transform:rotate(5deg) translateY(-6px)}}
.swoosh{position:absolute;left:0;bottom:0;width:100%;height:22vh;fill:rgba(255,121,0,.07)}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ondas líquidas al tocar */
#waves{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.wave{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,170,70,.85);box-shadow:0 0 18px rgba(255,121,0,.45),inset 0 0 12px rgba(167,222,34,.35);transform:translate(-50%,-50%) scale(.3);opacity:.9;animation:wave 1.2s cubic-bezier(.16,.7,.3,1) forwards}
@keyframes wave{to{transform:translate(-50%,-50%) scale(12);opacity:0}}

.page{position:relative;z-index:2;width:min(100%,520px);margin:0 auto;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(30px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}

/* logo */
.hero{text-align:center;padding-top:6px}
.logo-wrap{position:relative;width:min(70vw,340px);margin:0 auto;perspective:900px;animation:enter .95s cubic-bezier(.2,.7,.2,1) backwards}
.logo-wrap::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,121,0,.38),transparent 72%);filter:blur(24px);z-index:-1}
.logo-float{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
.logo-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.logo{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:24px;
  box-shadow:0 0 0 1px rgba(255,242,212,.2),0 22px 46px rgba(0,0,0,.55),0 0 60px rgba(255,121,0,.25)}
.intro{margin-top:16px;font:italic 400 1.06rem var(--serif);color:var(--soft);letter-spacing:.01em;animation:enter .9s .3s cubic-bezier(.2,.7,.2,1) backwards}

@keyframes enter{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(8px)}}

/* botones 3D */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.btn{
  --depth:6px;--c:var(--orange);--edge:#5a2c00;--rx:0deg;--ry:0deg;--ty:0px;--s:1;
  position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:78px;
  padding:11px 18px 11px 13px;border-radius:26px;text-decoration:none;color:var(--cream);overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--c) 65%,transparent);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 32%,transparent),transparent 60%),
    linear-gradient(165deg,#0e6a45 0%,#09492f 52%,#052f1f 100%);
  box-shadow:0 var(--depth) 0 var(--edge),0 calc(var(--depth) + 14px) 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,242,212,.3),inset 0 -14px 24px rgba(0,0,0,.3);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)) scale(var(--s));
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s,filter .35s,opacity .35s;
  animation:enter .8s cubic-bezier(.2,.7,.2,1) backwards;will-change:transform}
.btn:nth-child(1){animation-delay:.45s}.btn:nth-child(2){animation-delay:.55s}.btn:nth-child(3){animation-delay:.65s}
.btn:nth-child(4){animation-delay:.75s}.btn:nth-child(5){animation-delay:.85s}.btn:nth-child(6){animation-delay:.95s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,242,212,.18) 50%,transparent 64%);transform:translateX(-120%);animation:sheen 6s ease-in-out infinite}
.btn:nth-child(2)::before{animation-delay:-1s}.btn:nth-child(3)::before{animation-delay:-2s}.btn:nth-child(4)::before{animation-delay:-3s}.btn:nth-child(5)::before{animation-delay:-4s}.btn:nth-child(6)::before{animation-delay:-5s}
@keyframes sheen{0%,62%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.btn:hover{--ty:-3px;--s:1.025;border-color:var(--c);box-shadow:0 var(--depth) 0 var(--edge),0 calc(var(--depth) + 16px) 34px rgba(0,0,0,.55),0 0 34px color-mix(in srgb,var(--c) 38%,transparent),inset 0 1px 0 rgba(255,242,212,.4),inset 0 -14px 24px rgba(0,0,0,.3)}
.btn:active{--ty:3px;--s:.975;--depth:2px}
.txt{display:flex;flex-direction:column;min-width:0;flex:1;overflow-wrap:anywhere}
.txt strong{font:800 1.14rem var(--sans);letter-spacing:.005em}
.txt small{font-size:.82rem;color:var(--soft);margin-top:2px}
.arr{font-size:2rem;line-height:1;color:var(--c);transition:translate .25s}
.btn:hover .arr{translate:4px 0}

.b-review{--c:#FF9A1F;--edge:#6a3a00}
.b-ig{--c:#ff6f91;--edge:#6b1f36}
.b-menu{--c:#A7DE22;--edge:#41570a}
.b-call{--c:#FFF2D4;--edge:#6b6048}
.b-wa{--c:#25D366;--edge:#0a4d27}
.b-visit{--c:#FF7900;--edge:#5f2c00}
.b-wa{background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(37,211,102,.36),transparent 60%),
    linear-gradient(165deg,#0f7a4a 0%,#0a5a37 52%,#053a24 100%)}

/* gema del emoji */
.gem{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;perspective:240px;
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--c) 55%,#fff) 0,color-mix(in srgb,var(--c) 40%,#0a3d27) 55%,#06291a 100%);
  border:1px solid color-mix(in srgb,var(--c) 70%,transparent);
  box-shadow:0 3px 0 var(--edge),0 8px 14px rgba(0,0,0,.45),inset 0 2px 4px rgba(255,255,255,.4),inset 0 -6px 10px rgba(0,0,0,.25)}
.emo{display:block;font:400 1.75rem/1 var(--emoji);width:1em;height:1em;text-align:center;transform-origin:50% 60%;will-change:transform}
.e-star{animation:eStar 4.2s ease-in-out infinite}
.e-cam{animation:eCam 5s ease-in-out infinite}
.e-book{transform-origin:30% 55%;animation:eBook 6s ease-in-out infinite}
.e-phone{animation:ePhone 3.6s ease-in-out infinite}
.e-chat{animation:eChat 3.2s ease-in-out infinite}
.e-pin{transform-origin:50% 100%;animation:ePin 2.8s ease-in-out infinite}
@keyframes eStar{0%,100%{transform:translateY(0) rotate(0);filter:none}45%{transform:translateY(-3px) rotate(8deg)}78%{filter:none}85%{filter:brightness(1.35) drop-shadow(0 0 6px rgba(255,220,120,.9))}92%{filter:none}}
@keyframes eCam{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-2px) rotate(8deg)}}
@keyframes eBook{0%,58%,100%{transform:rotateY(0)}72%{transform:rotateY(-30deg)}84%{transform:rotateY(10deg)}92%{transform:rotateY(0)}}
@keyframes ePhone{0%,56%,100%{transform:rotate(0)}60%{transform:rotate(-14deg)}64%{transform:rotate(12deg)}68%{transform:rotate(-10deg)}72%{transform:rotate(8deg)}76%{transform:rotate(-4deg)}80%{transform:rotate(0)}}
@keyframes eChat{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-4px) scale(1.1)}60%{transform:translateY(0) scale(.97)}80%{transform:translateY(-1px) scale(1.05)}}
@keyframes ePin{0%,55%,100%{transform:translateY(0) scale(1,1)}22%{transform:translateY(-8px) scale(.96,1.05)}38%{transform:translateY(0) scale(1.08,.9)}46%{transform:translateY(-2px) scale(1,1)}}
.b-wa .gem::after{content:"";position:absolute;width:56px;height:56px;border-radius:18px;border:2px solid rgba(37,211,102,.7);animation:ping 3.2s ease-out infinite;pointer-events:none}
.b-wa .gem{position:relative}
@keyframes ping{0%,40%{transform:scale(1);opacity:0}45%{opacity:.8}100%{transform:scale(1.5);opacity:0}}

.rip{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,242,212,.5),rgba(255,242,212,0) 62%);transform:translate(-50%,-50%) scale(0);animation:rip .75s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* foco con desenfoque: el resto se suaviza (solo con mouse) */
@media (hover:hover) and (pointer:fine){
  .stack:has(.btn:hover) .btn:not(:hover){filter:blur(1.2px) saturate(.8);opacity:.78}
}

/* pie */
.foot{margin-top:30px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;animation:enter .9s 1.1s cubic-bezier(.2,.7,.2,1) backwards}
.powered{display:inline-block;color:var(--soft);font:italic 400 .84rem var(--serif);letter-spacing:.04em;text-decoration:none;padding:9px 14px;border-radius:999px;opacity:.85}
.powered:hover{opacity:1;text-decoration:underline}
.legal{display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--soft)}
.legal a{color:var(--soft);padding:9px 6px;opacity:.85}.legal a:hover{opacity:1}

#toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:80;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;background:#052f1f;color:var(--cream);border:1px solid rgba(255,121,0,.6);box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:.9rem;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* páginas legales */
.legalpage{background:var(--forest)}
.pol{position:relative;z-index:2;width:min(100%,720px);margin:0 auto;padding:22px max(18px,env(safe-area-inset-right,0px)) 10px max(18px,env(safe-area-inset-left,0px));color:#eef3e6;line-height:1.65;animation:enter .7s cubic-bezier(.2,.7,.2,1) backwards}
.pol .home{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream);font-weight:700;padding:6px 0}
.pol .home img{border-radius:12px}
.pol .upd{color:#bcd0b6;font-size:.85rem;margin:10px 0 6px}
.pol .sub{display:flex;gap:16px;margin:8px 0 18px;flex-wrap:wrap}
.pol .sub a{color:#d6e4cd;padding:6px 0}.pol .sub a[aria-current="page"]{color:var(--orange);font-weight:700}
.pol h1{font:800 1.6rem var(--sans);color:var(--cream);margin-top:6px}
.pol h2{font-size:1.04rem;margin-top:20px;color:#ffb066}
.pol p,.pol li{margin-top:6px;color:#e3ecd9}
.pol ul{padding-left:1.2rem}
.pol a{color:#ffc58a}
.pol-foot{text-align:center;padding:20px 18px 40px;position:relative;z-index:2}

@media (max-width:360px){
  .page{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .btn{gap:12px;padding-right:12px;min-height:72px}.gem{width:50px;height:50px;border-radius:16px}.emo{font-size:1.55rem}.txt strong{font-size:1.04rem}.txt small{font-size:.76rem}
}
@media (max-height:700px) and (max-width:480px){.logo-wrap{width:min(60vw,260px)}}
@media (min-width:700px){.page{padding-top:max(28px,env(safe-area-inset-top,0px))}}

/* movimiento reducido / pestaña oculta / ahorro de batería */
html.docs-hidden *,html.docs-hidden *::before,html.docs-hidden *::after{animation-play-state:paused!important}
.lite .glow{animation:none;filter:blur(40px)}.lite .btn::before{display:none}.lite .leaf{animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .logo-tilt{transition:none}
}