:root{--sea-700:#0459A3;--sea-500:#05C5F0;--coral-500:#F69E1A;--sand-500:#F8D208;--jungle-800:#0459A3;--bone:#FAFAF9;--ink:#1C1917}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bone);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.font-display{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;letter-spacing:-0.01em}
.font-script{font-family:'Caveat',cursive}
.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}
.glass{background:rgba(255,255,255,0.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,0.6)}
.glass-dark{background:rgba(28,25,23,0.55);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(255,255,255,0.12)}
@keyframes kenburns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.18) translate(-1.5%,-1%)}}
.kenburns{animation:kenburns 12s ease-out forwards}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.reveal{opacity:0}.reveal.in{animation:fadeInUp 0.9s cubic-bezier(.2,.7,.2,1) both}
@keyframes splitIn{from{opacity:0;transform:translate3d(0,28px,0) rotate(2deg);filter:blur(6px)}to{opacity:1;transform:translate3d(0,0,0) rotate(0deg);filter:blur(0)}}
.split-word{display:inline-block;opacity:0}.split-word.in{animation:splitIn 0.95s cubic-bezier(.2,.7,.2,1) both}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55)}70%{box-shadow:0 0 0 22px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-pulse{animation:pulseRing 4s ease-out infinite}
@keyframes scrollDot{0%{transform:translateY(0);opacity:0}35%{opacity:1}100%{transform:translateY(18px);opacity:0}}
.scroll-dot{animation:scrollDot 1.8s ease-in-out infinite}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.ph-pattern{background-color:#E7E5E4;background-image:repeating-linear-gradient(135deg,rgba(28,25,23,0.06) 0,rgba(28,25,23,0.06) 1px,transparent 1px,transparent 14px),linear-gradient(180deg,rgba(255,255,255,0.4),rgba(0,0,0,0.05))}
.ph-sea{background:radial-gradient(120% 80% at 30% 10%,#99E2F9 0%,#05C5F0 35%,#0459A3 90%)}
.ph-jungle{background:radial-gradient(120% 80% at 70% 20%,#99E2F9 0%,#0490C7 35%,#02335F 95%)}
.ph-desert{background:radial-gradient(120% 80% at 30% 30%,#FEF06A 0%,#F8D208 35%,#A8650C 95%)}
.ph-sunset{background:radial-gradient(120% 80% at 50% 80%,#FDC066 0%,#F69E1A 35%,#6B3F0A 95%)}
.ph-canyon{background:radial-gradient(120% 80% at 20% 80%,#FBE128 0%,#F69E1A 50%,#2E1A06 95%)}
.ph-snow{background:radial-gradient(120% 80% at 60% 20%,#CCF1FC 0%,#66D4F6 30%,#034581 95%)}
.ph-island{background:radial-gradient(120% 80% at 50% 60%,#FEF06A 0%,#F8D208 18%,#05C5F0 55%,#0459A3 95%)}
.ph-coast{background:radial-gradient(120% 80% at 50% 30%,#FBE128 0%,#F69E1A 30%,#0459A3 95%)}
.photo{position:relative;overflow:hidden;isolation:isolate}
.photo::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0.0) 0 20px,rgba(255,255,255,0.06) 20px 21px),radial-gradient(140% 100% at 80% 10%,rgba(255,255,255,0.35),rgba(255,255,255,0) 45%),radial-gradient(140% 100% at 20% 110%,rgba(0,0,0,0.45),rgba(0,0,0,0) 55%);pointer-events:none}
.photo .ph-label{position:absolute;left:14px;bottom:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.85);background:rgba(28,25,23,0.35);padding:4px 8px;border-radius:999px;backdrop-filter:blur(6px);z-index:2}
.grain::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(28,25,23,0.06) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:multiply;pointer-events:none;opacity:0.4}
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);border-radius:2px}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.lift{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}.lift:hover{transform:translateY(-4px)}
.zoom-img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.group:hover .zoom-img{transform:scale(1.08)}
@keyframes modalIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
.modal-in{animation:modalIn .35s cubic-bezier(.2,.7,.2,1) both}
.marquee{display:flex;gap:4rem;animation:marquee 30s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-vignette{background:linear-gradient(180deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.05) 30%,rgba(0,0,0,0.25) 65%,rgba(0,0,0,0.65) 100%)}
::selection{background:#CCF1FC;color:#0459A3}
.ring-coral{box-shadow:0 0 0 4px rgba(249,115,22,0.18)}
details > summary{list-style:none;cursor:pointer}
details > summary::-webkit-details-marker{display:none}
.page-hero{background:radial-gradient(120% 100% at 80% 0%,#05C5F0 0%,#0459A3 60%,#02335F 100%)}
.prose-vv p{margin:0 0 1.1em;line-height:1.75;color:#44403C}
.prose-vv h2{font-family:'Fraunces',serif;font-size:2rem;margin:2.4em 0 0.6em;letter-spacing:-0.01em;color:#1C1917}
.prose-vv h3{font-family:'Fraunces',serif;font-size:1.45rem;margin:1.8em 0 0.5em;color:#1C1917}
.prose-vv ul{margin:0 0 1.2em 1.2em;list-style:disc}
.prose-vv ul li{margin:0.4em 0;color:#44403C;line-height:1.7}
.prose-vv blockquote{margin:1.5em 0;padding:1em 1.4em;border-left:3px solid #F69E1A;font-family:'Fraunces',serif;font-style:italic;color:#1C1917;font-size:1.15rem}

/* Pull-quote / texto destacado dentro de un post (sintaxis *{...}* del CRM).
   Diseño editorial: comilla decorativa grande coral arriba, tipografía display,
   separador con gradient debajo. SIN fondo de color, SIN borde lateral —
   se sostiene visualmente por jerarquía tipográfica, no por una caja. */
.prose-vv blockquote.vv-pullquote{
  position:relative;
  margin:3.5em auto;
  padding:0 1.5em;
  border:0;
  background:transparent;
  font-style:normal;
  text-align:center;
  max-width:46rem;
}
.prose-vv blockquote.vv-pullquote::before{
  content:'\201C';
  display:block;
  font-family:'Fraunces',serif;
  font-size:5.5rem;
  line-height:0.8;
  color:#F69E1A;
  font-weight:600;
  margin-bottom:0.1em;
  letter-spacing:-0.02em;
}
.prose-vv blockquote.vv-pullquote > *{
  margin:0;
  font-family:'Fraunces',serif;
  font-style:normal;
  font-weight:500;
  font-size:1.55rem;
  line-height:1.35;
  letter-spacing:-0.005em;
  color:#1C1917;
}
.prose-vv blockquote.vv-pullquote::after{
  content:'';
  display:block;
  width:72px;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,#F69E1A 50%,transparent 100%);
  margin:1.6em auto 0;
}
@media (min-width:1024px){
  .prose-vv blockquote.vv-pullquote{margin:4.5em auto;padding:0 2em}
  .prose-vv blockquote.vv-pullquote::before{font-size:6.5rem}
  .prose-vv blockquote.vv-pullquote > *{font-size:1.9rem}
}
/* Variante inline para *{...}* embebido en un párrafo más largo: highlight
   sutil con underline coral, sin volverlo cita. */
.prose-vv .vv-pullquote-inline{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:#0459A3;
  font-weight:600;
  background-image:linear-gradient(transparent 65%,rgba(246,158,26,0.30) 65%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding:0 0.1em;
}

/* Push opt-in banner */
.vv-push-frame{background:linear-gradient(135deg,rgba(4,89,163,0.22) 0%,rgba(5,197,240,0.18) 35%,rgba(246,158,26,0.20) 100%)}
.vv-push-card{box-shadow:0 20px 50px -20px rgba(4,89,163,0.35),0 8px 24px -12px rgba(28,25,23,0.18)}
.vv-push-blob-tr{background:radial-gradient(closest-side,rgba(5,197,240,0.55),rgba(248,210,8,0.25) 55%,rgba(255,255,255,0) 75%);filter:blur(8px)}
.vv-push-blob-bl{background:radial-gradient(closest-side,rgba(246,158,26,0.35),rgba(255,255,255,0) 70%);filter:blur(6px)}
.vv-push-logo-ring{background:conic-gradient(from 180deg at 50% 50%,#05C5F0 0%,#0459A3 30%,#F69E1A 70%,#05C5F0 100%);padding:2px}
.vv-push-chip-coral{background-color:rgba(246,158,26,0.10)}
.vv-push-chip-gold{background-color:rgba(248,210,8,0.18)}
.vv-push-error{background-color:rgba(246,158,26,0.08);border-color:rgba(246,158,26,0.25)}
.vv-push-cta{background-color:#F69E1A;background-image:linear-gradient(135deg,#F69E1A 0%,#F8861A 50%,#F69E1A 100%);box-shadow:0 10px 24px -10px rgba(246,158,26,0.65),0 2px 6px -2px rgba(28,25,23,0.18),inset 0 1px 0 rgba(255,255,255,0.30)}
.vv-push-cta:hover{box-shadow:0 14px 28px -10px rgba(246,158,26,0.7),0 3px 8px -2px rgba(28,25,23,0.22),inset 0 1px 0 rgba(255,255,255,0.30);transform:translateY(-1px)}
.vv-push-cta:active{transform:translateY(0);box-shadow:0 6px 16px -8px rgba(246,158,26,0.55),inset 0 1px 0 rgba(255,255,255,0.20)}
.vv-push-cta-overlay{background-image:linear-gradient(135deg,#F8861A 0%,#F47816 50%,#F69E1A 100%)}
.vv-push-secondary{background-color:#F5F5F4;color:#1C1917;border:1px solid #E7E5E4;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)}
.vv-push-secondary:hover{background-color:#FFFFFF;border-color:#0459A3;color:#0459A3}
.vv-push-secondary:active{background-color:#F5F5F4}

/* Why · fondo claro con azules pastel sutiles en movimiento */
.vv-why-bg{background:linear-gradient(180deg,#FAFAF9 0%,#F1F8FB 65%,#FAFAF9 100%);position:relative;isolation:isolate}
.vv-why-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,rgba(5,197,240,0.10) 0%,rgba(5,197,240,0) 55%),radial-gradient(120% 80% at 100% 100%,rgba(246,158,26,0.06) 0%,rgba(246,158,26,0) 55%);pointer-events:none;z-index:0}
.vv-why-blob{position:absolute;border-radius:9999px;filter:blur(80px);will-change:transform;pointer-events:none;z-index:0}
.vv-why-blob-1{width:520px;height:520px;top:-140px;left:-100px;background:radial-gradient(closest-side,#99E2F9 0%,rgba(153,226,249,0) 70%);opacity:.50;animation:vvWhyFloatA 22s ease-in-out infinite}
.vv-why-blob-2{width:460px;height:460px;bottom:-160px;right:-140px;background:radial-gradient(closest-side,#CCF1FC 0%,rgba(204,241,252,0) 65%);opacity:.65;animation:vvWhyFloatB 28s ease-in-out infinite}
.vv-why-blob-3{width:380px;height:380px;top:28%;left:52%;background:radial-gradient(closest-side,rgba(254,214,154,0.45) 0%,rgba(254,214,154,0) 70%);opacity:.50;animation:vvWhyFloatC 34s ease-in-out infinite}
@keyframes vvWhyFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.08)}}
@keyframes vvWhyFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,-30px) scale(1.1)}}
@keyframes vvWhyFloatC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,50px) scale(0.95)}}
@media (prefers-reduced-motion: reduce){.vv-why-blob{animation:none}}

/* === Btn variants fallback ===
   El componente <Btn> arma las clases con `variants[variant]` (un objeto JS).
   Tailwind CDN escanea el DOM en runtime pero a veces falla con clases que
   nacen dentro de strings JS (Promos cards mostraban "Ver plan" y el icono
   WhatsApp sin fondo). Estas reglas garantizan los variants `dark` y `wa`
   aunque Tailwind no las genere. */
.bg-ink{background-color:#1C1917}
.bg-bone{background-color:#FAFAF9}
.text-ink{color:#1C1917}
.text-bone{color:#FAFAF9}
.bg-wa{background-color:#25D366}
.hover\:bg-stone-800:hover{background-color:#292524}
.hover\:brightness-95:hover{filter:brightness(0.95)}
.vv-why-card{background:rgba(255,255,255,0.78);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(231,229,228,0.85);box-shadow:0 1px 0 rgba(28,25,23,0.03),0 8px 24px -16px rgba(4,89,163,0.15)}