/* Vida Lotus - capa visual viva. Especificacion: DISENO.md (raiz del proyecto).
   Orden de z-index: ondas/auras -1 | grano 30 | fab 45 | mnav 49 | cabecera 50 | progreso 55 | skip 100 | intro 200 */
:root {
  --vl-magenta: #D4237A; --vl-magenta-deep: #7A1250; --vl-orchid: #B01A63; --vl-bloom: #E5629F;
  --vl-leaf: #1F3D2E; --vl-jade: #1E8C6B; --vl-sage: #8FAE8B;
  --vl-sun: #F29A2E; --vl-mango: #FFC857; --vl-coral: #FF7A59; --vl-water: #35B6B4;
  --vl-cream: #FBF7F0; --vl-ink: #1F2A24; --vl-radius: 24px;
  --vl-shadow: 0 2px 4px rgba(122, 18, 80, .06), 0 22px 44px -18px rgba(60, 20, 50, .32);
  --vl-ease: cubic-bezier(.34, 1.56, .64, 1);
  --vl-out: cubic-bezier(.16, 1, .3, 1);
  --shadow: var(--vl-shadow);
  --lotus: var(--vl-magenta);
}
body { color: var(--vl-ink); }

/* ---------- grano fijo + barra de progreso ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vl-progress { position: fixed; z-index: 55; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--vl-sp, 0)); background: linear-gradient(90deg, var(--vl-magenta), var(--vl-coral), var(--vl-mango)); pointer-events: none; }

/* ---------- tipografia ---------- */
.h2 { font-size: clamp(38px, 6.8vw, 86px); line-height: .98; letter-spacing: -.035em; font-weight: 380; max-width: 15em; font-variation-settings: "SOFT" 80; color: var(--vl-leaf); }
.sec-head .h2 { margin-block: 16px 18px; }
.lead { color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--vl-orchid); letter-spacing: .18em; }
.eyebrow::after { content: ""; width: 38px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, currentColor, transparent); }
.price, .plan-price, .room-price strong, .pkg-prices strong, .of-price, .visit-prices b, .pp b, .stay-facts strong { font-variant-numeric: lining-nums tabular-nums; }
.cat-head h3 { font-size: clamp(32px, 5.2vw, 54px); font-style: italic; font-weight: 340; letter-spacing: -.03em; line-height: 1; color: var(--vl-orchid); }
.cat-n { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--vl-leaf); }

/* numeral gigante de seccion (contorno) */
.sec::after {
  content: counter(sec, decimal-leading-zero); position: absolute; z-index: -1; pointer-events: none;
  top: clamp(24px, 4vw, 56px); right: clamp(8px, 3vw, 56px); font: italic 300 clamp(120px, 24vw, 340px)/.8 var(--f-display);
  color: transparent; -webkit-text-stroke: 1.5px var(--num, rgba(31, 61, 46, .13)); translate: 0 calc(var(--vl-ny, 0) * 1px);
}
.on-dark { --num: rgba(255, 255, 255, .13); }
.sec { padding-block: clamp(84px, 12vw, 150px); }

/* palabras con mascara + acento */
.vl-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .1em .18em 0; margin: -.06em -.1em -.18em 0; }
.vl-wi { display: inline-block; position: relative; }
.vl-acc .vl-wi { font-style: italic; font-weight: 300; padding-right: .05em; color: var(--vl-orchid); letter-spacing: -.02em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vl-acc .vl-wi { background: linear-gradient(100deg, var(--vl-orchid) 5%, var(--vl-magenta) 55%, var(--vl-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .on-dark .vl-acc .vl-wi, .hero .vl-acc .vl-wi { background-image: linear-gradient(100deg, #FFD9EA 5%, #FFB3D2 45%, var(--vl-mango)); }
}
.vl-ul { position: absolute; left: 0; bottom: .05em; width: 100%; height: .2em; overflow: visible; pointer-events: none; -webkit-text-fill-color: initial; }
.vl-ul path { fill: none; stroke: var(--vl-coral); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.on-dark .vl-ul path, .hero .vl-ul path { stroke: var(--vl-mango); }
.hero .h1-brand { text-shadow: none; filter: drop-shadow(0 4px 28px rgba(8, 40, 28, .45)); font-size: clamp(64px, 17vw, 168px); line-height: .9; letter-spacing: -.04em; font-weight: 340; }
.hero .h1-brand .vl-w:last-child { margin-right: 0; }
.hero .h1-brand .vl-w + .vl-w { margin-left: .18em; }

/* ---------- botones con resorte, imán y brillo ---------- */
.btn:not([class*="vl-"]) { position: relative; overflow: hidden; isolation: isolate; translate: var(--bx, 0px) var(--by, 0px); transition: transform .45s var(--vl-ease), translate .35s var(--vl-ease), background-color 160ms, color 160ms, border-color 160ms, box-shadow .3s; }
.btn-primary { background: linear-gradient(110deg, var(--vl-orchid), var(--vl-magenta) 55%, #EE4C8C); box-shadow: 0 14px 28px -12px rgba(212, 35, 122, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:not([class*="vl-"])::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%); transform: translate3d(-130%, 0, 0); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:not([class*="vl-"]):hover { transform: scale(1.05); }
  .btn:not([class*="vl-"]):hover::after { transform: translate3d(130%, 0, 0); transition: transform .8s var(--vl-out); }
  .btn:not([class*="vl-"]):active { transform: scale(.96); transition-duration: .12s; }
  .btn-primary:hover { background: linear-gradient(110deg, var(--vl-orchid), var(--vl-magenta) 55%, #EE4C8C); }
}
.sec-club .btn-primary { background: var(--vl-mango); color: #3A0A24; box-shadow: 0 14px 30px -12px rgba(255, 200, 87, .55); }
.sec-club .btn-primary:hover { background: #FFD66E; }

/* ---------- placeholders de foto: color vivo, formas variadas, parallax ---------- */
.tone-hero { background: radial-gradient(34% 26% at 74% 46%, rgba(255, 190, 90, .8), transparent 70%), radial-gradient(60% 36% at 14% 56%, rgba(245, 117, 143, .5), transparent 72%), radial-gradient(80% 40% at 60% 4%, rgba(53, 182, 180, .55), transparent 72%), linear-gradient(180deg, #0F5A4B 0%, #178268 30%, #3DA683 50%, #1C6A53 68%, #144633 84%, #0F2D20 100%); }
.hero-media .tone-hero { background-blend-mode: normal; }
.ridge-0 path { fill: #2FA383; opacity: .5; } .ridge-1 path { fill: #1B6B53; opacity: .7; } .ridge-2 path { fill: #123022; opacity: .9; }
.tone-leaf { background: radial-gradient(60% 55% at 12% 90%, #1B6B53, transparent 70%), radial-gradient(50% 45% at 88% 12%, #D5F0A8, transparent 70%), linear-gradient(135deg, #7FD08F, #1E8C6B); }
.tone-garden { background: radial-gradient(55% 50% at 82% 80%, #FFC857, transparent 68%), radial-gradient(60% 55% at 18% 18%, #DFF5B8, transparent 70%), linear-gradient(160deg, #8AD67E, #3FA86B 70%, #1E7A55); }
.tone-sunset { background: radial-gradient(40% 32% at 70% 66%, #FFD66E, transparent 70%), linear-gradient(180deg, #FFE0B8 0%, #FFB27A 36%, #F26F8E 70%, #A8317A 100%); }
.tone-water { background: radial-gradient(60% 40% at 28% 26%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(180deg, #D9FBF1 0%, #7FE0CC 42%, #1FA4A8 100%); }
.tone-earth { background: radial-gradient(60% 50% at 20% 20%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(160deg, #FFE0A8, #F0A94D 58%, #C0602F); }
.tone-papaya { background: radial-gradient(55% 45% at 78% 22%, #FFF0B0, transparent 70%), linear-gradient(150deg, #FFC857, #F5882B 62%, #D2492C); }
.tone-lotus { background: radial-gradient(60% 50% at 24% 22%, rgba(255, 255, 255, .65), transparent 70%), linear-gradient(150deg, #FFE0EE, #F77FB3 55%, #B01A63); }
.tone-mist { background: radial-gradient(60% 40% at 22% 24%, rgba(255, 255, 255, .75), transparent 70%), radial-gradient(40% 40% at 82% 70%, rgba(255, 200, 150, .5), transparent 70%), linear-gradient(180deg, #8FD3C7 0%, #C6EBDD 40%, #EAF7E6 60%, #6DBF9C 82%, #2A7A5E 100%); }
.ph { box-shadow: var(--vl-shadow); }
.dish-ph, .hero-media .ph, .pano .ph { box-shadow: none; }
.ph-tag { border-radius: 999px; padding: 6px 12px; font-size: 13px; background: rgba(255, 255, 255, .82); box-shadow: 0 6px 14px -6px rgba(40, 10, 30, .3); }
.ph .ph-img { transform: translate3d(0, calc(var(--vl-py, 0) * 1px), 0) scale(1.14); }
.ph:not(.has)::after { translate: 0 calc(var(--vl-py, 0) * -1.3px); }
/* marcos asimetricos: arco, petalo y guijarro */
.eat-mosaic .ph:nth-child(1) { border-radius: 120px 28px 120px 28px; }
.eat-mosaic .ph:nth-child(2) { border-radius: 999px 999px 28px 28px; }
.eat-mosaic .ph:nth-child(3) { border-radius: 28px 120px 28px 120px; }
.eat-mosaic .ph:nth-child(4) { border-radius: 28px 28px 120px 28px; }
.about-media .ph.main { border-radius: 999px 999px 40px 40px; }
.about-media .ph.small { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; border-color: var(--vl-cream); }
.fac .ph:nth-child(1) { border-radius: var(--vl-radius); }
.fac:nth-child(2) .ph { border-radius: 999px 999px var(--vl-radius) var(--vl-radius); }
.fac:nth-child(3) .ph { border-radius: 100px 24px 100px 24px; }
.fac:nth-child(4) .ph { border-radius: 24px 100px 24px 100px; }
.fac:nth-child(5) .ph { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
.fac:nth-child(even) .ph { rotate: -1.6deg; } .fac:nth-child(odd) .ph { rotate: 1deg; }
.fac .ph, .fac .ph:hover { transition: rotate .5s var(--vl-ease), translate .3s var(--vl-ease), box-shadow .3s; }
.fac .ph:hover { rotate: 0deg; }
.dron-frame, .dron-frame .ph { border-radius: 40px 140px 40px 140px; }
.heal-card .ph { border-radius: 0; }

/* ---------- aurora y ondas ---------- */
.vl-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vl-aura i { position: absolute; left: var(--x); top: var(--y); width: var(--w, 52vmax); aspect-ratio: 1; margin: calc(var(--w, 52vmax) / -2) 0 0 calc(var(--w, 52vmax) / -2); border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 66%); }
.vl-wave { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(36px, 5.5vw, 78px); z-index: -1; overflow: hidden; pointer-events: none; }
.vl-wave svg { display: block; max-width: none; width: 200%; height: 100%; fill: var(--vl-prev, var(--vl-cream)); }
.foot { isolation: isolate; margin-top: 0; border-radius: 0; background: radial-gradient(60% 80% at 90% 0%, rgba(212, 35, 122, .22), transparent 70%), linear-gradient(180deg, #14301F, #0C1E15); padding-top: clamp(84px, 10vw, 120px); overflow: hidden; }
.foot::before { content: "Vida Lotus"; position: absolute; z-index: -1; left: 50%; bottom: -.12em; translate: -50% 0; white-space: nowrap; pointer-events: none; font: italic 300 clamp(90px, 25vw, 380px)/1 var(--f-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 168, 205, .14); }

/* ---------- climas de color por seccion ---------- */
.sec-about { --vl-prev: #FBF7F0; background: radial-gradient(46% 36% at 92% 14%, rgba(229, 98, 159, .2), transparent 70%), radial-gradient(40% 30% at 4% 84%, rgba(255, 200, 87, .24), transparent 70%), var(--vl-cream); }
.sec-needs { --vl-prev: #FBF7F0; background: radial-gradient(46% 60% at 28% 54%, rgba(212, 35, 122, .3), transparent 70%), radial-gradient(44% 44% at 96% 4%, rgba(30, 140, 107, .45), transparent 70%), linear-gradient(180deg, #1B4533, #12291E); }
.sec-eat { --vl-prev: #12291E; --muted: #43524A; --num: rgba(122, 70, 0, .16); background: radial-gradient(60% 40% at 100% 0%, rgba(255, 122, 89, .38), transparent 70%), radial-gradient(50% 40% at 0% 56%, rgba(255, 255, 255, .6), transparent 70%), linear-gradient(180deg, #FFF1D0 0%, #FFE19B 55%, #FFD27A 100%); }
.sec-stay { --vl-prev: #FFD27A; --muted: #4A3A3C; --num: rgba(122, 18, 80, .14); background: radial-gradient(28% 20% at 84% 6%, rgba(255, 214, 120, .9), transparent 70%), linear-gradient(180deg, #FFEBD9 0%, #FFCBAA 36%, #FF9F90 70%, #F8A4B8 100%); }
.sec-stay::before { background: none; }
.sec-heal { --vl-prev: #F8A4B8; --muted: #2F4F46; --num: rgba(14, 90, 80, .16); background: radial-gradient(44% 34% at 8% 12%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(40% 30% at 92% 80%, rgba(53, 182, 180, .35), transparent 70%), linear-gradient(180deg, #E6F9F3 0%, #BDEBDD 45%, #9ADBC9 100%); }
.sec-fac { --vl-prev: #9ADBC9; background: radial-gradient(42% 30% at 100% 6%, rgba(255, 200, 87, .4), transparent 70%), radial-gradient(40% 30% at 0% 72%, rgba(143, 222, 190, .38), transparent 70%), var(--vl-cream); }
.sec-fac::before { background: none; }
.sec-club { --vl-prev: #FBF7F0; margin-top: 0; border-radius: 0; padding-top: clamp(100px, 13vw, 170px); background: radial-gradient(56% 46% at 86% 10%, rgba(229, 98, 159, .5), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(30, 140, 107, .4), transparent 70%), linear-gradient(170deg, #7A1250 0%, #5A0D3A 55%, #4A0B2E 100%); }
.sec-gandhi { --vl-prev: #4A0B2E; --muted: #5B3A12; --num: rgba(122, 70, 0, .17); background: radial-gradient(50% 40% at 80% 20%, rgba(255, 245, 190, .75), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(255, 122, 89, .4), transparent 70%), linear-gradient(180deg, #FFDD85 0%, #FFCF66 100%); overflow: hidden; }
.sec-contact { --vl-prev: #FFCF66; background: radial-gradient(50% 36% at 6% 6%, rgba(255, 255, 255, .8), transparent 70%), radial-gradient(40% 30% at 100% 64%, rgba(53, 182, 180, .22), transparent 70%), linear-gradient(180deg, #F4F9EC, #E6F2E4); }
.foot { --vl-prev: #E6F2E4; }
.sec-eat .chips-bar { background: rgba(255, 233, 172, .94); }
.sec-eat .dish { border-bottom-color: rgba(122, 70, 0, .26); }
.sec-eat .leader { border-bottom-color: rgba(122, 70, 0, .45); }
.sec-eat .cat-note, .sec-eat .dish p { color: #43524A; }
.sec-stay .lead, .sec-stay .stay-pol, .sec-heal .lead { color: var(--muted); }
.sec-gandhi .lead { color: #5B3A12; }

/* ---------- hero vivo ---------- */
.hero::before { background: linear-gradient(180deg, rgba(8, 40, 28, .34) 0%, rgba(8, 40, 28, .04) 34%, rgba(8, 40, 28, .5) 64%, rgba(8, 36, 24, .86) 100%); }
.vl-hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vl-layer { position: absolute; transform: translate3d(calc(var(--hx, 0) * var(--d) * 1px), calc((var(--hy, 0) + var(--hs, 0)) * var(--d) * 1px), 0); }
.vl-sun { right: 4%; top: 16%; width: min(54vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 140, .95) 0 14%, rgba(255, 168, 90, .5) 34%, rgba(245, 117, 143, .18) 52%, transparent 70%); }
.vl-lotus { left: 50%; bottom: -26%; width: min(135vw, 1060px); margin-left: calc(min(135vw, 1060px) / -2); }
.vl-lotus svg { display: block; width: 100%; height: auto; overflow: visible; }
.vl-lotus .ring { transform-origin: 0 0; }
.vl-lotus .ring { transform-origin: 0 0; transform-box: view-box; }
.vl-lotus path { fill: url(#vlPetal); stroke: rgba(255, 235, 245, .5); stroke-width: 1.2; }
@media (min-width: 1020px) { .vl-lotus { left: auto; right: -12%; margin-left: 0; bottom: -34%; width: min(70vw, 1100px); } }
.hero-chips li { background: rgba(8, 40, 28, .38); }
.hero-badge { background: rgba(255, 245, 250, .95); box-shadow: 0 18px 40px -14px rgba(212, 35, 122, .6); }

/* ---------- marquesinas ---------- */
.vl-marq { position: relative; z-index: 3; overflow: hidden; margin: -26px -4vw 0; padding: 14px 0; color: #fff; background: linear-gradient(95deg, var(--vl-magenta-deep), var(--vl-magenta) 52%, var(--vl-coral)); box-shadow: 0 16px 34px -14px rgba(122, 18, 80, .55); rotate: -1.4deg; }
.vl-track { display: flex; width: max-content; align-items: center; }
.vl-track > span { font: italic 350 clamp(22px, 3vw, 34px)/1.2 var(--f-display); letter-spacing: -.01em; white-space: nowrap; padding-inline: 8px; }
.vl-track > i { flex: none; width: 14px; height: 20px; margin-inline: 14px; background: var(--vl-mango); border-radius: 100% 0 100% 0; rotate: 20deg; }
.vl-marq--b { margin: 0 0 clamp(28px, 5vw, 48px) calc(50% - 50vw); width: 100vw; rotate: 0deg; background: none; box-shadow: none; color: var(--vl-leaf); padding: 6px 0 14px; }
.vl-marq--b .vl-track > span { font-size: clamp(44px, 8vw, 96px); font-weight: 300; letter-spacing: -.03em; color: var(--vl-orchid); }
.vl-marq--b .vl-track > span:nth-of-type(even) { color: var(--vl-leaf); font-style: normal; font-weight: 340; }
.vl-marq--b .vl-track > i { background: var(--vl-coral); }

/* ---------- necesidades: petalos de colores que se arman ---------- */
.vl .np:not(.np-c):not([aria-pressed="true"]) .np-shape { fill: var(--c, var(--rose-on-dark)); }
.vl .np:not(.np-c):hover .np-shape { filter: brightness(1.1) saturate(1.15); }
.np-c .np-shape { fill: var(--vl-mango); }
.vl-sc .np { transform-origin: 200px 200px; opacity: var(--k, 1); transform: rotate(calc((1 - var(--k, 1)) * -50deg)) scale(calc(.4 + .6 * var(--k, 1))); }
.needs-flor { position: relative; }
.needs-flor::before { content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(229, 98, 159, .5), rgba(30, 140, 107, .2) 50%, transparent 70%); }
.needs-panel { background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .22); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }

/* ---------- tarjetas: spotlight, tilt, formas ---------- */
.room::before, .heal-card::before, .note-card::before, .visit::before, .c-item::before, .offers li::before, .stay-facts li::before, .pkg-prices li::before, .id-card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(229, 98, 159, .2)), transparent 62%);
}
.room, .heal-card, .note-card, .visit, .c-item, .offers li, .stay-facts li, .pkg-prices li { position: relative; }
.pkg-prices li, .heal-help { --spot: rgba(255, 255, 255, .16); }
@media (hover: hover) and (pointer: fine) {
  .room:hover::before, .heal-card:hover::before, .note-card:hover::before, .visit:hover::before, .c-item:hover::before, .offers li:hover::before, .stay-facts li:hover::before, .pkg-prices li:hover::before, .id-card:hover::before { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-gal { transition: transform .6s var(--vl-ease); }
  .room:hover .room-gal { transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(0); }
}
.room { border-radius: 40px; background: #fff; box-shadow: var(--vl-shadow); border-color: rgba(255, 255, 255, .6); }
.room-gal { border-radius: 30px; }
.room-kind { color: var(--vl-orchid); }
.room-price strong { font-size: 34px; color: var(--vl-leaf); }
@media (min-width: 900px) { .rooms .room:nth-child(2) { margin-top: 72px; } .rooms .room:nth-child(1) { margin-bottom: -28px; } }
.feats li { background: linear-gradient(135deg, #E8F5EC, #FFF1D6); }
.plans { border-color: rgba(176, 26, 99, .16); }
.pkg { background: radial-gradient(60% 90% at 100% 0%, rgba(255, 200, 87, .3), transparent 70%), linear-gradient(135deg, var(--vl-magenta-deep) 0%, #3F1030 55%, var(--vl-leaf) 100%); box-shadow: 0 36px 70px -30px rgba(122, 18, 80, .7); border-radius: 44px; }
.heal-card { border-radius: 200px 200px var(--r-lg) var(--r-lg); background: #fff; border-color: rgba(255, 255, 255, .7); box-shadow: var(--vl-shadow); }
.heal-card div { text-align: center; }
.heal-card .offers { text-align: left; }
.heal-help, .heal-video { border-radius: 44px; }
.heal-help { background: radial-gradient(60% 100% at 0% 0%, rgba(53, 182, 180, .5), transparent 70%), linear-gradient(135deg, #0F4A3D, var(--vl-leaf)); }
.note-card { border-radius: 28px 28px 28px 8px; box-shadow: var(--vl-shadow); }
.note-card.warm { background: linear-gradient(135deg, #FFF1D6, #FFD9B0); }
.note-card:not(.warm) { background: linear-gradient(135deg, #E4F6EA, #FFE4EF); }
.visit { border-radius: 40px; box-shadow: var(--vl-shadow); border-color: transparent; }
.visit:nth-child(2) { background: linear-gradient(160deg, #fff, #FFF3DD); }
.c-item { border-radius: 26px; }
.journey { border-radius: 44px; background: linear-gradient(160deg, #fff, #FFEFF6 60%, #FFF3DD); box-shadow: var(--vl-shadow); border-color: transparent; }
.j-n { background: linear-gradient(135deg, var(--vl-orchid), var(--vl-coral)); color: #fff; }
.journey-list li::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: -22px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--vl-magenta), var(--vl-coral)); transform-origin: 50% 0; transform: scaleY(0); transition: transform .8s var(--vl-out) calc(var(--i, 0) * .28s + .2s); }
@media (prefers-reduced-motion: reduce) { .journey-list li::after { transition: none; } }
.journey-list li:last-child::after { display: none; }
@media (min-width: 900px) {
  .journey-list li::after { left: 56px; right: -28px; top: 20px; bottom: auto; width: auto; height: 3px; transform-origin: 0 50%; transform: scaleX(0); }
}
.journey-list li.vl-on::after { transform: none; }
.vegan-banner { background: linear-gradient(100deg, var(--vl-leaf), #1E5B45 55%, var(--vl-jade)); border-radius: 999px; padding: 18px 28px; rotate: -.7deg; box-shadow: 0 22px 40px -22px rgba(30, 140, 107, .8); }
.vegan-banner .ico { color: var(--vl-mango); }
.sec-gandhi .id-card { border-color: rgba(122, 70, 0, .45); box-shadow: 0 24px 40px -24px rgba(122, 70, 0, .5); }
.gandhi-media::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .5) 0 7deg, transparent 7deg 22deg); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); }
.gandhi-media { isolation: isolate; }
.club-media { isolation: isolate; }
.club-media::before { content: ""; position: absolute; z-index: -1; inset: -10% -6% -4% -8%; border-radius: 50%; border: 2px dashed rgba(246, 168, 205, .5); pointer-events: none; }
.club-media .ph { border-radius: 170px 36px 170px 36px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55); }
.club-card { rotate: -6deg; transform: none; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .6); background: linear-gradient(135deg, #FFF6E8, #FFD9EA); }
.perks li::before { font-size: 26px; color: var(--vl-mango); }
.vilos { border-left-color: var(--vl-mango); border-radius: 0 18px 18px 0; }

/* ---------- platos vivos ---------- */
.dish { position: relative; isolation: isolate; }
.dish::before { content: ""; position: absolute; z-index: -1; inset: 3px -14px; border-radius: 22px; background: linear-gradient(95deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .3)); box-shadow: 0 14px 26px -16px rgba(122, 70, 0, .45); opacity: 0; transform: scale(.96); transition: opacity .25s, transform .45s var(--vl-ease); }
.dish-ph { transition: transform .5s var(--vl-ease); background: linear-gradient(135deg, #fff, #FFE6AE); }
.dish-ill { color: var(--vl-orchid); }
.dish h4 { transition: color .2s, letter-spacing .4s var(--vl-out); }
.price { transition: transform .45s var(--vl-ease), color .2s; transform-origin: 100% 60%; }
.price, .dish h4 { color: var(--vl-leaf); }
@media (hover: hover) and (pointer: fine) {
  .dish:hover::before { opacity: 1; transform: none; }
  .dish:hover .dish-ph { transform: rotate(-7deg) scale(1.12); }
  .dish:hover h4 { color: var(--vl-orchid); }
  .dish:hover .price { transform: scale(1.14); color: var(--vl-orchid); }
  .dish:hover .leader { border-bottom-color: var(--vl-coral); }
}
.dish:active::before { opacity: 1; transform: none; }

/* ---------- movimiento (solo con permiso) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.vl-m .vl-wi { transform: translate3d(0, 112%, 0) rotate(5deg); transform-origin: 0 100%; transition: transform .95s var(--vl-out); transition-delay: calc(var(--wi, 0) * 75ms + var(--wd, 0ms)); }
  html.vl-m .vl-split.vl-in .vl-wi, html.vl-m h1.in .vl-wi, html.reveal-all .vl-wi, html.vl-all .vl-wi { transform: none; }
  html.vl-m .vl-ul path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--vl-out) calc(var(--wi, 0) * 75ms + 500ms); }
  html.vl-m .vl-split.vl-in .vl-ul path, html.vl-m h1.in .vl-ul path, html.reveal-all .vl-ul path, html.vl-all .vl-ul path { stroke-dashoffset: 0; }
  html.vl-m .vl-marq { opacity: 0; translate: 0 24px; transition: opacity .8s var(--vl-out), translate .9s var(--vl-out); }
  html.vl-m .vl-marq.vl-in, html.reveal-all .vl-marq, html.vl-all .vl-marq { opacity: 1; translate: 0 0; }
  .vl-track { animation: vl-marq 46s linear infinite paused; }
  .vl-marq--b .vl-track { animation-direction: reverse; animation-duration: 60s; }
  .vl-marq.vl-live .vl-track { animation-play-state: running; }
  .vl-marq:hover .vl-track { animation-play-state: paused; }
  .vl-live .vl-wave svg { animation: vl-drift 22s linear infinite; }
  .vl-wave svg { animation: vl-drift 22s linear infinite paused; }
  .vl-live .vl-aura i { animation: vl-float 19s ease-in-out infinite alternate; }
  .vl-aura i { animation: vl-float 19s ease-in-out infinite alternate paused; }
  .vl-aura i:nth-child(2) { animation-duration: 25s; animation-direction: alternate-reverse; }
  .vl-aura i:nth-child(3) { animation-duration: 31s; }
  .vl-live .vl-aura i { animation-play-state: running; }
  .hero.vl-live .vl-lotus .ring-o { animation: vl-spin 160s linear infinite; }
  .hero.vl-live .vl-lotus .ring-i { animation: vl-breathe 8s ease-in-out infinite alternate; }
  .hero.vl-live .vl-sun { animation: vl-sunpulse 9s ease-in-out infinite alternate; }
  .vl-lotus .ring-o, .vl-lotus .ring-i { transform-box: view-box; }
  html.vl-m .journey-list li:not(.vl-on) .j-n { opacity: .55; scale: .86; }
  .journey-list .j-n { transition: scale .6s var(--vl-ease), opacity .4s; }
  .gandhi-media::before { animation: vl-spin 90s linear infinite paused; }
  .sec-gandhi.vl-live .gandhi-media::before { animation-play-state: running; }
  .club-media::before { animation: vl-spin 120s linear infinite paused; }
  .sec-club.vl-live .club-media::before { animation-play-state: running; }
  .club-card { animation: vl-bob 6s ease-in-out infinite alternate paused; }
  .sec-club.vl-live .club-card { animation-play-state: running; }
  .needs-flor::before { animation: vl-breathe 7s ease-in-out infinite alternate paused; }
  .sec-needs.vl-live .needs-flor::before { animation-play-state: running; }
  .vegan-banner { transition: rotate .5s var(--vl-ease); }
  .vegan-banner:hover { rotate: .4deg; }
}
html.vl-lite .vl-track, html.vl-lite .vl-wave svg, html.vl-lite .vl-aura i, html.vl-lite .vl-lotus *, html.vl-lite .vl-sun, html.vl-lite .gandhi-media::before, html.vl-lite .club-media::before, html.vl-lite .club-card { animation: none !important; }
@keyframes vl-marq { to { transform: translate3d(-50%, 0, 0); } }
@keyframes vl-drift { to { transform: translate3d(-50%, 0, 0); } }
@keyframes vl-float { from { transform: translate3d(-6%, -4%, 0) scale(.94); } to { transform: translate3d(8%, 6%, 0) scale(1.08); } }
@keyframes vl-spin { to { transform: rotate(360deg); } }
@keyframes vl-breathe { from { transform: scale(.96); } to { transform: scale(1.05); } }
@keyframes vl-sunpulse { from { opacity: .85; transform: scale(.97); } to { opacity: 1; transform: scale(1.05); } }
@keyframes vl-bob { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }

@media (prefers-reduced-motion: reduce) {
  .vl-track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 4px; }
  .vl-track > span:nth-child(n + 24), .vl-track > i:nth-child(n + 24) { display: none; }
  .vl-marq--b { display: none; }
  .btn:not([class*="vl-"])::after { display: none; }
  .ph .ph-img { transform: none; }
}

/* movil: menos sombra, ondas bajas */
@media (max-width: 640px) {
  .vl-marq { margin-inline: -8vw; padding: 10px 0; }
  .heal-card { border-radius: 170px 170px var(--r-lg) var(--r-lg); }
  .room { border-radius: 32px; }
  .foot::before { font-size: 34vw; }
  .vegan-banner { border-radius: 28px; }
}

/* ================= RONDA 2: ilustracion propia, cintas de seccion ================= */
.sec .eyebrow, .on-dark .eyebrow { --tg: var(--vl-orchid); --ti: #fff; color: var(--ti); background: var(--tg); padding: 9px 22px 9px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 10px 50%); rotate: -1.5deg; font-size: 13px; letter-spacing: .14em; }
.sec .eyebrow::after { display: none; }
.sec-needs .eyebrow, .sec-club .eyebrow { --tg: var(--vl-mango); --ti: #3A0A24; }
.sec-eat .eyebrow, .sec-contact .eyebrow { --tg: var(--vl-leaf); }
.sec-stay .eyebrow { --tg: var(--vl-magenta-deep); }
.sec-heal .eyebrow { --tg: #0F5A4B; }
.sec-gandhi .eyebrow { --tg: #7A4600; }

.vl-vines { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(70px, 9vw, 130px); z-index: -1; overflow: hidden; pointer-events: none; }
.vl-vines svg, .vl-scene svg { display: block; max-width: none; width: 100%; height: 100%; }
.vn { transform-box: fill-box; transform-origin: 50% 0; }
.vl-pat { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background-size: 180px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }

.vl-scene { position: relative; isolation: isolate; height: clamp(150px, 25vw, 300px); margin: clamp(26px, 4vw, 52px) 0; border-radius: 36px 120px 36px 120px; overflow: hidden; box-shadow: var(--vl-shadow); }
.vl-scene svg { position: absolute; inset: 0; height: 100%; }
.sway, .swing, .rip, .bnc, .flick, .wag, .hd, .blk, .pin, .bird, .tw path, .rise { transform-box: fill-box; transform-origin: 50% 100%; }
.swing { transform-origin: 50% 0; }
.rip, .bnc, .blk { transform-origin: 50% 50%; }
.wag { transform-origin: 0% 100%; }
.dr2 { opacity: .75; }

.sec-gandhi { padding-bottom: clamp(190px, 17vw, 250px); }
/* con "Crear cuenta" la cabecera se queda corta en 1200-1560 px: la marca queda solo con el loto */
@media (min-width: 1200px) and (max-width: 1560px) { .hdr .brand-word { display: none; } }
.vl-dog { position: absolute; z-index: 1; right: clamp(6px, 4vw, 70px); bottom: -4px; width: clamp(140px, 19vw, 250px); pointer-events: none; filter: drop-shadow(0 14px 14px rgba(122, 70, 0, .3)); }
.vl-dog svg, .vl-paws svg { display: block; width: 100%; height: auto; max-width: none; }
.vl-paws { position: absolute; z-index: 0; left: 4%; bottom: 14px; width: min(64vw, 640px); pointer-events: none; }
.vl-paws .paw { fill: #7A4600; opacity: .5; }
.vl-pass-i { position: absolute; z-index: 5; left: -22px; top: -30px; width: clamp(78px, 11vw, 118px); rotate: -14deg; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .4)); pointer-events: none; }
.vl-pass-i svg { display: block; width: 100%; height: auto; max-width: none; }
.vl-ff { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vl-ff i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #FFE27A; box-shadow: 0 0 12px 4px rgba(255, 226, 122, .55); opacity: .35; }
.vl-ff.rose i { background: #FFB3D2; box-shadow: 0 0 12px 4px rgba(255, 179, 210, .55); }

.visit:nth-child(1) { border-radius: 52px 20px 52px 20px; } .visit:nth-child(2) { border-radius: 20px 52px 20px 52px; }
.stay-facts li { border-radius: 24px 8px 24px 8px; } .stay-facts li:nth-child(even) { border-radius: 8px 24px 8px 24px; }
.c-item:nth-child(odd) { border-radius: 28px 10px 28px 10px; }
.about-cards .note-card:nth-child(2) { border-radius: 28px 28px 8px 28px; }
.pkg-prices li { border-radius: 26px 8px 26px 8px; }

@media (prefers-reduced-motion: no-preference) {
  html.vl-m .vl-scene, html.vl-m .vl-dog, html.vl-m .vl-pass-i { opacity: 0; translate: 0 26px; transition: opacity .9s var(--vl-out), translate 1s var(--vl-out); }
  html.vl-m .vl-scene.vl-in, html.vl-m .vl-dog.vl-in, html.vl-m .vl-pass-i.vl-in, html.reveal-all .vl-scene, html.reveal-all .vl-dog, html.reveal-all .vl-pass-i, html.vl-all .vl-scene, html.vl-all .vl-dog, html.vl-all .vl-pass-i { opacity: 1; translate: 0 0; }
  html.vl-m .vl-scene .rise { transform: translateY(80px); opacity: 0; transition: transform 2.2s var(--vl-out) .3s, opacity 1.2s .3s; }
  html.vl-m .vl-scene.vl-in .rise, html.reveal-all .rise, html.vl-all .rise { transform: none; opacity: 1; }
  html.vl-m .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--vl-out) .2s; }
  html.vl-m .vl-in .dr, html.vl-m .vl-in.vl-vines .dr, html.reveal-all .dr, html.vl-all .dr { stroke-dashoffset: 0; }
  html.vl-m .dr2 { opacity: 0; transition: opacity 1s 1.6s; }
  html.vl-m .vl-in .dr2, html.reveal-all .dr2, html.vl-all .dr2 { opacity: .75; }
  html.vl-m .vn path:not(.dr), html.vl-m .vn circle { opacity: 0; transition: opacity .8s 1s; }
  html.vl-m .vl-vines.vl-in .vn path:not(.dr), html.vl-m .vl-vines.vl-in .vn circle, html.reveal-all .vn path, html.reveal-all .vn circle, html.vl-all .vn path, html.vl-all .vn circle { opacity: 1; }
  html.vl-m .vl-paws .paw { opacity: 0; transition: opacity .5s calc(var(--i) * .32s); }
  html.vl-m .vl-paws.vl-in .paw, html.reveal-all .vl-paws .paw, html.vl-all .vl-paws .paw { opacity: .5; }
  .vl-scene.vl-live .sway { animation: ilSway 4.6s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
  .sec.vl-live .vn { animation: ilSway 6.5s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); --amp: 2.6deg; }
  .vl-scene.vl-live .swing { animation: ilSway 3.4s ease-in-out infinite alternate; --amp: 2deg; }
  .vl-scene.vl-live .bird { animation: ilBird 15s linear infinite alternate; }
  .vl-scene.vl-live .wv { animation: ilWave 3.6s linear infinite; }
  .vl-scene.vl-live .rip { animation: ilRip 4.2s ease-out infinite; animation-delay: var(--dl, 0s); }
  .vl-scene.vl-live .fly circle, .vl-scene.vl-live .tw path { animation: ilTw 2.6s ease-in-out infinite alternate; }
  .vl-scene.vl-live .fly circle:nth-child(2), .vl-scene.vl-live .tw path:nth-child(2) { animation-delay: -1s; }
  .vl-scene.vl-live .flick { animation: ilFlick .45s ease-in-out infinite alternate; }
  .vl-scene.vl-live .bnc { animation: ilBounce 1s cubic-bezier(.3, 0, .4, 1) infinite alternate; }
  .vl-scene.vl-live .pin { animation: ilPin 1.6s ease-in-out infinite alternate; }
  .sec-gandhi.vl-live .wag { animation: ilWag .5s ease-in-out infinite alternate; }
  .sec-gandhi.vl-live .hd { animation: ilSway 3.2s ease-in-out infinite alternate; --amp: 2.5deg; }
  .sec-gandhi.vl-live .blk { animation: ilBlink 4.8s infinite; }
  .sec-club.vl-live .vl-pass-i { animation: vl-bob 5s ease-in-out infinite alternate; }
  .sec.vl-live .vl-ff i { animation: ilFf var(--t) ease-in-out infinite alternate, ilTw 2.2s ease-in-out infinite alternate; animation-delay: var(--d), var(--d); }
}
html.vl-lite .sway, html.vl-lite .vn, html.vl-lite .swing, html.vl-lite .rip, html.vl-lite .wv, html.vl-lite .vl-ff i, html.vl-lite .bird, html.vl-lite .flick, html.vl-lite .bnc, html.vl-lite .pin, html.vl-lite .wag, html.vl-lite .hd, html.vl-lite .blk { animation: none !important; }
@keyframes ilSway { from { transform: rotate(calc(var(--amp, 3.5deg) * -1)); } to { transform: rotate(var(--amp, 3.5deg)); } }
@keyframes ilBird { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(90px, -10px, 0); } }
@keyframes ilWave { to { transform: translate3d(-80px, 0, 0); } }
@keyframes ilRip { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ilTw { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1.15); } }
@keyframes ilFlick { from { transform: scale(.9, .85); } to { transform: scale(1.05, 1.12); } }
@keyframes ilBounce { from { transform: translateY(0); } to { transform: translateY(-62px); } }
@keyframes ilPin { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes ilWag { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
@keyframes ilBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ilFf { from { translate: 0 0; } to { translate: 26px -34px; } }
@media (prefers-reduced-motion: reduce) { .vl-paws .paw { opacity: .5; } }
/* ================= RONDA 5: pulido (esqueletos, dialogos, exito, vacio, header, foco) ================= */
/* esqueletos: <div class="sk sk-card"><i class="sk-ph"></i><i class="sk-line"></i><i class="sk-line short"></i></div> */
.sk { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--vl-radius); }
.sk-line, .sk-ph { display: block; background: #EBE2D2; border-radius: 10px; }
.sk-line { height: 14px; margin: 12px 0; width: 100%; }
.sk-line.mid { width: 70%; } .sk-line.short { width: 42%; }
.sk-ph { width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--vl-radius) - 6px); background: linear-gradient(135deg, #F3E4D0, #E9E3D4 55%, #DDEBDD); }
.sk-card { padding: 12px 12px 8px; background: #fff; box-shadow: var(--vl-shadow); }
.sk-card .sk-ph + .sk-line { margin-top: 16px; }
.on-dark .sk-line, .on-dark .sk-ph { background: rgba(255, 255, 255, .12); }
.sk::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translate3d(-100%, 0, 0); }
.on-dark .sk::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .sk::after { animation: skSweep 1.7s ease-in-out infinite; } }
@keyframes skSweep { to { transform: translate3d(100%, 0, 0); } }

/* dialogos: resorte al abrir, fundido del fondo, cambio de pestana suave */
.dlg { box-shadow: 0 40px 90px -30px rgba(60, 10, 40, .65), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.dlg::backdrop { background: radial-gradient(70% 60% at 50% 35%, rgba(122, 18, 80, .38), rgba(10, 26, 18, .66)); }
@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: vlDlgIn .55s var(--vl-ease) both; transform-origin: 50% 60%; }
  .dlg.closing { animation: vlDlgOut .22s cubic-bezier(.4, 0, 1, 1) forwards; }
  .dlg[open] .dlg-body > :not(.dlg-x):not(.tabs), .dlg[open] [role="tabpanel"] { animation: vlPane .38s var(--vl-out) both; }
  .dlg .tabs button { transition: background-color .25s, color .25s, transform .3s var(--vl-ease); }
  .dlg .tabs button[aria-selected="true"] { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .dlg[open] { animation: fadeIn .2s both; } .dlg.closing { animation: fadeOut .15s forwards; } }
@keyframes vlDlgIn { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.93); } to { opacity: 1; transform: none; } }
@keyframes vlDlgOut { to { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); } }
@keyframes vlPane { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* exito: circulo + check que se dibuja (+ petalos). El script rellena el SVG de cualquier .vl-ok-anim vacio */
.vl-ok-anim { display: block; width: 92px; height: 92px; margin: 6px auto 12px; }
.vl-ok-anim svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.vl-ok-anim .ok-c { fill: none; stroke: var(--vl-jade); stroke-width: 4; stroke-linecap: round; }
.vl-ok-anim .ok-f { fill: var(--vl-jade); opacity: 1; }
.vl-ok-anim .ok-k { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.vl-ok-anim .ok-p { fill: var(--vl-bloom); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vl-ok-anim .ok-c { stroke-dasharray: 1; stroke-dashoffset: 1; animation: okDraw .55s var(--vl-out) forwards; }
  .vl-ok-anim .ok-f { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: okFill .4s var(--vl-ease) .45s forwards; }
  .vl-ok-anim .ok-k { stroke-dasharray: 1; stroke-dashoffset: 1; animation: okDraw .45s var(--vl-out) .7s forwards; }
  .vl-ok-anim .ok-p { transform-box: fill-box; transform-origin: 50% 50%; animation: okPetal .9s var(--vl-out) .75s forwards; }
}
@keyframes okDraw { to { stroke-dashoffset: 0; } }
@keyframes okFill { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes okPetal { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--px), var(--py), 0) scale(1) rotate(60deg); } }

/* estado vacio ilustrado: <div class="vl-empty"><p>Texto</p></div> */
.vl-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--muted); }
.vl-empty::before { content: ""; width: 120px; height: 96px; margin-bottom: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 80c30-6 74-6 104 0' stroke='%238FAE8B' stroke-width='3'/%3E%3Cpath d='M60 78C42 70 38 48 60 30c22 18 18 40 0 48Z' fill='%23FFE3F0' stroke='%23B01A63' stroke-width='2.4'/%3E%3Cpath d='M60 78C40 74 26 60 28 44c16 2 30 14 32 34Z' fill='%23FBD0E4' stroke='%23B01A63' stroke-width='2.4'/%3E%3Cpath d='M60 78C80 74 94 60 92 44 76 46 62 58 60 78Z' fill='%23FBD0E4' stroke='%23B01A63' stroke-width='2.4'/%3E%3Ccircle cx='60' cy='58' r='4' fill='%23FFC857'/%3E%3Cpath d='M96 70c6-10 14-12 20-10-2 8-10 14-20 10Z' fill='%23C9DAC4' stroke='%231E8C6B' stroke-width='2'/%3E%3Cpath d='M24 72c-6-10-14-12-20-10 2 8 10 14 20 10Z' fill='%23C9DAC4' stroke='%231E8C6B' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.vl-empty > :first-child { font-family: var(--f-display); font-size: 20px; color: var(--vl-leaf); }
.on-dark .vl-empty { color: rgba(255, 255, 255, .8); } .on-dark .vl-empty > :first-child { color: #fff; }

/* cabecera al hacer scroll: tinte, sombra y filo de color */
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--vl-magenta), var(--vl-coral), var(--vl-mango), transparent); opacity: 0; transform: scaleX(.25); transition: opacity .4s var(--vl-out), transform .6s var(--vl-out); }
.hdr.solid { background: rgba(251, 247, 240, .86); box-shadow: 0 14px 30px -20px rgba(122, 18, 80, .4), 0 1px 0 var(--line); }
.hdr.solid::after { opacity: .6; transform: none; }

/* foco visible coherente */
:focus-visible { outline: 3px solid var(--vl-orchid); outline-offset: 3px; border-radius: 8px; }
.on-dark :focus-visible, .hero :focus-visible, .foot :focus-visible, .sec-club :focus-visible, .hdr:not(.solid) :focus-visible { outline-color: var(--vl-mango); }
.dlg :focus-visible, .vlc-panel :focus-visible { outline-color: var(--vl-orchid); }
.btn:focus-visible { outline-offset: 4px; }
dialog:focus-visible { outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; }

@media (max-width: 640px) {
  .vl-scene { border-radius: 28px 70px 28px 70px; }
  .sec-gandhi { padding-bottom: 200px; }
  .vl-pass-i { left: -8px; top: -22px; }
}

/* ---------- carta desplegable: cada categoria se abre y se cierra ---------- */
details.cat { margin-top: 14px; border-radius: var(--vl-radius); background: rgba(255, 255, 255, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 26px -18px rgba(60, 20, 50, .35); }
details.cat:first-child { margin-top: 12px; }
details.cat > summary.cat-head { list-style: none; cursor: pointer; margin: 0; padding: 18px clamp(16px, 3vw, 28px); min-height: 64px; align-items: center; position: relative; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
details.cat > summary.cat-head::-webkit-details-marker { display: none; }
details.cat > summary.cat-head:focus-visible { outline: 3px solid var(--vl-magenta); outline-offset: 2px; }
details.cat .cat-head h3 { margin: 0; }
details.cat .cat-n { margin-left: auto; }
.cat-chev { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--vl-magenta); position: relative; transition: transform .35s var(--vl-ease), background-color .2s; align-self: center; }
.cat-chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translate(-50%, -70%) rotate(45deg); }
details.cat[open] > summary .cat-chev { transform: rotate(180deg); background: var(--vl-leaf); }
details.cat > .cat-note { padding: 0 clamp(16px, 3vw, 28px); margin: 0 0 12px; }
details.cat > .dishes { padding: 0 clamp(16px, 3vw, 28px) 18px; }
@media (hover: hover) and (pointer: fine) { details.cat > summary.cat-head:hover .cat-chev { transform: scale(1.1); } details.cat[open] > summary.cat-head:hover .cat-chev { transform: rotate(180deg) scale(1.1); } }
@media (prefers-reduced-motion: no-preference) { details.cat[open] > .dishes { animation: vl-cat-in .4s var(--vl-out); } }
@keyframes vl-cat-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-status { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.menu-toggle { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--vl-orchid); background: transparent; color: var(--vl-orchid); font: 700 15px var(--f-body); cursor: pointer; transition: background-color .2s, color .2s, transform .3s var(--vl-ease); }
.menu-toggle:hover { background: var(--vl-orchid); color: #fff; }
.menu-toggle:active { transform: scale(.96); }
.menu-toggle[hidden] { display: none; }
/* ---------- logo oficial (Vida Lotus con la flor de loto en la "o") ---------- */
.brand-logo { display: inline-grid; align-items: center; }
.brand-logo img { grid-area: 1 / 1; height: 36px; width: auto; display: block; }
.hdr .lg-oscuro { display: none; }
.hdr.solid .lg-claro { display: none; }
.hdr.solid .lg-oscuro { display: block; }
.foot .lg-oscuro, .dlg .lg-oscuro { display: none; }
.foot .lg-claro { display: block; }
.foot .brand-logo img { height: 52px; }
@media (max-width: 480px) { .brand-logo img { height: 30px; } }
.hdr .brand { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) { .hdr .brand:hover { transform: scale(1.05) rotate(-1deg); } }
.h1-brand .h1-logo { display: block; width: clamp(240px, 52vw, 560px); height: auto; max-width: 100%; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45)); }
.hero-badge { display: none; }
.brand-logo img { height: 40px; }
.hdr .brand, .foot .brand { flex: none; }
.brand-logo { flex: none; }
.brand-logo img { aspect-ratio: 1056 / 287; width: auto; max-width: none; }