@keyframes ocShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ocFloat{0%{transform:translate(0,0) scale(1)}33%{transform:translate(5%,-4%) scale(1.08)}66%{transform:translate(-4%,5%) scale(0.95)}100%{transform:translate(0,0) scale(1)}}
@keyframes ocHue{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(50deg)}100%{filter:hue-rotate(0deg)}}
html,body{overflow-x:clip}
body{margin:0;background:#fafaf8}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,#ffffff 0%,#f7eede 24%,#e7eef9 52%,#f3ece2 76%,#ffffff 100%);background-size:300% 300%;animation:ocShift 18s ease infinite,ocHue 36s linear infinite;pointer-events:none}
@property --c1{syntax:"<color>";inherits:true;initial-value:rgba(232,121,43,0.22)}
@property --c2{syntax:"<color>";inherits:true;initial-value:rgba(31,58,95,0.12)}
a{color:#0a0a0a}a:hover{color:#3d3d3d}
.oc-hero{position:relative;overflow:hidden;background-image:radial-gradient(#d9d9d9 1px, transparent 1.2px);background-size:26px 26px;transition:--c1 1.4s ease,--c2 1.4s ease}
.oc-hero::before{content:"";position:absolute;inset:-25% -15% auto -15%;height:130%;background:radial-gradient(ellipse at 72% 35%, var(--c1, rgba(232,121,43,0.22)), transparent 55%), radial-gradient(ellipse at 12% 85%, var(--c2, rgba(31,58,95,0.12)), transparent 50%);animation:ocFloat 16s ease-in-out infinite;pointer-events:none}
.oc-hero > *{position:relative}
.oc-cat{font-family:inherit;background:transparent;border:none;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:92px;transition:transform .2s ease}
.oc-cat:hover{transform:translateY(-3px)}
.oc-cat img{mix-blend-mode:multiply}
@keyframes ocUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.oc-up{animation:ocUp .7s ease both}
.oc-up2{animation:ocUp .7s .15s ease both}
.oc-nav{position:sticky;top:0;z-index:15;background:rgba(255,255,255,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,0.07)}
section[id],footer[id]{scroll-margin-top:60px}
.oc-navlinks{display:flex;gap:24px;font-size:13px;font-weight:500}
.oc-navcta{display:inline-flex;align-items:center}
.oc-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:none;background:transparent;cursor:pointer;color:#0a0a0a}
.oc-mobmenu{display:none;flex-direction:column;padding:4px 20px 14px;border-top:1px solid rgba(0,0,0,0.07)}
.oc-mobmenu a{padding:13px 0;font-size:16px;font-weight:500;text-decoration:none;border-bottom:1px solid #ececec}
@media (max-width: 760px){.oc-navlinks,.oc-navcta{display:none}.oc-burger{display:inline-flex}.oc-mobmenu{display:flex}}
.oc-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.oc-backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.55);border:none;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.oc-panel{position:relative;background:#ffffff;border-radius:28px;max-width:880px;width:100%;max-height:90vh;overflow:auto;animation:ocUp .25s ease both}
.oc-fab{position:fixed;right:20px;bottom:20px;z-index:18;box-shadow:0 14px 30px -10px rgba(0,0,0,0.45)}
.oc-faqbtn{font-family:inherit;width:100%;background:transparent;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;text-align:left;color:#0a0a0a}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}
.oc-dark{position:relative;overflow:hidden;background:#0a0a0a}
.oc-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.10), transparent 55%), radial-gradient(ellipse at 90% 10%, rgba(120,30,50,0.45), transparent 45%);pointer-events:none}
.oc-dark > *{position:relative}
.oc-soft{background-color:#f6f6f4;background-image:radial-gradient(#e1e1df 1px, transparent 1.2px);background-size:26px 26px}
.oc-card{transition:transform .25s ease, box-shadow .25s ease;border-radius:24px;border:1px solid #ececec}
.oc-card:hover{transform:translateY(-4px);box-shadow:0 28px 48px -28px rgba(0,0,0,0.28)}
.oc-card:hover .oc-img{transform:scale(1.04)}
.oc-img{transition:transform .4s ease;mix-blend-mode:multiply}
.oc-btn{transition:transform .15s ease, background .15s ease, opacity .15s ease}
.oc-btn:hover{transform:translateY(-1px)}
.oc-pill{transition:background .15s ease, color .15s ease, border-color .15s ease}
.oc-link{transition:opacity .15s ease}.oc-link:hover{opacity:.6}
.oc-heroimg{filter:drop-shadow(0 30px 40px rgba(0,0,0,0.22))}
@keyframes ocFadeA{from{opacity:0;transform:translateY(10px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ocFadeB{from{opacity:0;transform:translateY(10px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.oc-fade-a{animation:ocFadeA .8s ease both}
.oc-fade-b{animation:ocFadeB .8s ease both}
#scroll-cue{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:56px;height:56px;z-index:12;opacity:1;transition:opacity .4s ease;pointer-events:none}
#wa-pulse{position:fixed;right:-4px;bottom:-4px;width:106px;height:106px;z-index:17;pointer-events:none}
.oc-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#0a0a0a;color:#ffffff;box-shadow:0 -12px 40px rgba(0,0,0,0.18)}
select{appearance:none;-webkit-appearance:none}
/* Aparición al deslizar: solo se activa si el JS marcó html.oc-anim (fallback: todo visible) */
.oc-anim .oc-rev,.oc-anim .oc-rev-r{opacity:0;transition:opacity .7s ease,transform .7s ease}
.oc-anim .oc-rev{transform:translateX(-36px)}
.oc-anim .oc-rev-r{transform:translateX(36px)}
.oc-anim .oc-rev:nth-child(2){transition-delay:.08s}
.oc-anim .oc-rev:nth-child(3){transition-delay:.16s}
.oc-anim .oc-rev:nth-child(4){transition-delay:.24s}
.oc-anim .oc-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.oc-anim .oc-rev,.oc-anim .oc-rev-r{opacity:1;transform:none}}
.oc-marca{font-size:12px;color:#9a9a9a;text-decoration:none;letter-spacing:0.02em}
.oc-marca strong{font-weight:700;color:#1B3F91}
@media (hover:hover){.oc-marca:hover{color:#6b6b6b}.oc-marca:hover strong{color:#2a55b8}}
.oc-marca:active strong{color:#2a55b8}