/* Alma Playa · CSS de la landing. GENERADO por tools/wp-build.mjs desde deploy/alma-playa/index.html — no editar a mano. */
.hydrated{visibility:inherit}

/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scroll-snap-strictness:proximity;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0#0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0#0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0#0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0#0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0#0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root{--font-sans:"Helvetica Neue","HelveticaNeue","Helvetica",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1%.013 17.38);--color-red-200:oklch(88.5%.062 18.334);--color-red-600:oklch(57.7%.245 27.325);--color-red-700:oklch(50.5%.213 27.518);--color-amber-50:oklch(98.7%.022 95.277);--color-amber-400:oklch(82.8%.189 84.429);--color-amber-900:oklch(41.4%.112 45.904);--color-rose-100:oklch(94.1%.03 12.58);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1) infinite;--blur-sm:8px;--blur-md:12px;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:"Helvetica Neue","HelveticaNeue","Helvetica",Arial,sans-serif;--default-mono-font-family:var(--font-mono);--color-charcoal:#1c1a17;--color-blanco:#ffffff}}@layer base{*,::backdrop,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}h2,h3{font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}iframe,img,svg,video{vertical-align:middle;display:block}img,video{max-width:100%}button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}button{appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-8{top:calc(var(--spacing)*8)}.right-0{right:calc(var(--spacing)*0)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-3{bottom:calc(var(--spacing)*3)}.bottom-4{bottom:calc(var(--spacing)*4)}.bottom-5{bottom:calc(var(--spacing)*5)}.bottom-8{bottom:calc(var(--spacing)*8)}.left-0{left:calc(var(--spacing)*0)}.left-3{left:calc(var(--spacing)*3)}.left-4{left:calc(var(--spacing)*4)}.left-5{left:calc(var(--spacing)*5)}.left-8{left:calc(var(--spacing)*8)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.col-span-12{grid-column:span 12/span 12}.mx-4{margin-inline:calc(var(--spacing)*4)}.mx-6{margin-inline:calc(var(--spacing)*6)}.mx-auto{margin-inline:auto}.my-14{margin-block:calc(var(--spacing)*14)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-16{margin-top:calc(var(--spacing)*16)}.mt-auto{margin-top:auto}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[9\/16\]{aspect-ratio:9/16}.aspect-\[700\/820\]{aspect-ratio:700/820}.aspect-square{aspect-ratio:1}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-11{height:calc(var(--spacing)*11)}.h-\[50vh\]{height:50vh}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.min-h-\[400px\]{min-height:400px}.min-h-\[500px\]{min-height:500px}.min-h-\[580px\]{min-height:580px}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-11{width:calc(var(--spacing)*11)}.w-24{width:calc(var(--spacing)*24)}.w-\[38\%\]{width:38%}.w-\[42\%\]{width:42%}.w-\[70\%\]{width:70%}.w-\[82vw\]{width:82vw}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[1400px\]{max-width:1400px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-3\.5{gap:calc(var(--spacing)*3.5)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-12{gap:calc(var(--spacing)*12)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e+38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blanco\/5{border-color:oklab(97.7882%.00231463 .00348055/.05)}.border-blanco\/10{border-color:oklab(97.7882%.00231463 .00348055/.1)}.border-charcoal{border-color:#1c1a17}.border-charcoal\/15{border-color:oklab(24.7759%0 0/.15)}.border-charcoal\/30{border-color:oklab(24.7759%0 0/.3)}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab,red,red)){.border-white\/30{border-color:color-mix(in oklab,var(--color-white) 30%,transparent)}}.bg-\[rgba\(75\,75\,75\,0\.55\)\]{background-color:#4b4b4b8c}.bg-black{background-color:var(--color-black)}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-black\/30{background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-blanco{background-color:#ffffff}.bg-charcoal{background-color:#1c1a17}.bg-charcoal\/5{background-color:oklab(24.7759%0 0/.05)}.bg-charcoal\/20{background-color:oklab(24.7759%0 0/.2)}.bg-ivory{background-color:#f5f1e8}.bg-palm-green{background-color:#42453e}.bg-transparent{background-color:#0000}.bg-white\/50{background-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.bg-white\/50{background-color:color-mix(in oklab,var(--color-white) 50%,transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white) 90%,transparent)}}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-black\/50{--tw-gradient-from:#00000080}@supports (color:color-mix(in lab,red,red)){.from-black\/50{--tw-gradient-from:color-mix(in oklab,var(--color-black) 50%,transparent)}}.from-black\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-black\/60{--tw-gradient-from:#0009}@supports (color:color-mix(in lab,red,red)){.from-black\/60{--tw-gradient-from:color-mix(in oklab,var(--color-black) 60%,transparent)}}.from-black\/60{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-black\/70{--tw-gradient-from:#000000b3}@supports (color:color-mix(in lab,red,red)){.from-black\/70{--tw-gradient-from:color-mix(in oklab,var(--color-black) 70%,transparent)}}.from-black\/70{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/20{--tw-gradient-via:#0003}@supports (color:color-mix(in lab,red,red)){.via-black\/20{--tw-gradient-via:color-mix(in oklab,var(--color-black) 20%,transparent)}}.via-black\/20{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-transparent{--tw-gradient-via:transparent;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-7{padding-inline:calc(var(--spacing)*7)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-10{padding-inline:calc(var(--spacing)*10)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-16{padding-block:calc(var(--spacing)*16)}.py-20{padding-block:calc(var(--spacing)*20)}.py-24{padding-block:calc(var(--spacing)*24)}.py-28{padding-block:calc(var(--spacing)*28)}.pt-7{padding-top:calc(var(--spacing)*7)}.pt-20{padding-top:calc(var(--spacing)*20)}.pb-10{padding-bottom:calc(var(--spacing)*10)}.pb-12{padding-bottom:calc(var(--spacing)*12)}.pb-16{padding-bottom:calc(var(--spacing)*16)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-\[0\.4em\]{font-size:.4em}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[22px\]{font-size:22px}.text-\[clamp\(13px\,1\.75vw\,22px\)\]{font-size:clamp(13px,1.75vw,22px)}.text-\[clamp\(20px\,3\.4vw\,44px\)\]{font-size:clamp(20px,3.4vw,44px)}.text-\[clamp\(24px\,3vw\,36px\)\]{font-size:clamp(24px,3vw,36px)}.text-\[clamp\(28px\,3\.5vw\,42px\)\]{font-size:clamp(28px,3.5vw,42px)}.text-\[clamp\(30px\,5vw\,60px\)\]{font-size:clamp(30px,5vw,60px)}.text-\[clamp\(32px\,4vw\,48px\)\]{font-size:clamp(32px,4vw,48px)}.text-\[clamp\(32px\,4vw\,52px\)\]{font-size:clamp(32px,4vw,52px)}.text-\[clamp\(32px\,5vw\,56px\)\]{font-size:clamp(32px,5vw,56px)}.text-\[clamp\(39px\,6\.5vw\,86px\)\]{font-size:clamp(39px,6.5vw,86px)}.text-\[clamp\(40px\,6vw\,72px\)\]{font-size:clamp(40px,6vw,72px)}.leading-\[0\.95\]{--tw-leading:.95;line-height:.95}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-\[1\.7\]{--tw-leading:1.7;line-height:1.7}.leading-\[1\.8\]{--tw-leading:1.8;line-height:1.8}.leading-\[1\.15\]{--tw-leading:1.15;line-height:1.15}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.5px\]{--tw-tracking:-.5px;letter-spacing:-.5px}.tracking-\[-1px\]{--tw-tracking:-1px;letter-spacing:-1px}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.05em\]{--tw-tracking:.05em;letter-spacing:.05em}.tracking-\[0\.15em\]{--tw-tracking:.15em;letter-spacing:.15em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-black{color:var(--color-black)}.text-blanco{color:#ffffff}.text-blanco\/10{color:oklab(97.7882%.00231463 .00348055/.1)}.text-blanco\/30{color:oklab(97.7882%.00231463 .00348055/.3)}.text-blanco\/40{color:oklab(97.7882%.00231463 .00348055/.4)}.text-blanco\/50{color:oklab(97.7882%.00231463 .00348055/.5)}.text-blanco\/60{color:oklab(97.7882%.00231463 .00348055/.6)}.text-blanco\/70{color:oklab(97.7882%.00231463 .00348055/.7)}.text-charcoal{color:#1c1a17}.text-charcoal\/20{color:oklab(24.7759%0 0/.2)}.text-charcoal\/25{color:oklab(24.7759%0 0/.25)}.text-charcoal\/50{color:oklab(24.7759%0 0/.5)}.text-charcoal\/65{color:oklab(24.7759%0 0/.65)}.text-charcoal\/70{color:oklab(24.7759%0 0/.7)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.04\)\]{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.04\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000a)}.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a)}.invert{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%)}.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm))}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}@media (hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing)*.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.02\]:is(:where(.group):hover *){scale:1.02}.group-hover\:scale-\[1\.03\]:is(:where(.group):hover *){scale:1.03}.group-hover\:scale-\[1\.04\]:is(:where(.group):hover *){scale:1.04}.group-hover\:bg-white\/15:is(:where(.group):hover *){background-color:#ffffff26}@supports (color:color-mix(in lab,red,red)){.group-hover\:bg-white\/15:is(:where(.group):hover *){background-color:color-mix(in oklab,var(--color-white) 15%,transparent)}}.group-hover\:text-blanco:is(:where(.group):hover *){color:#ffffff}.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\:opacity-70:is(:where(.group):hover *){opacity:.7}.group-hover\:opacity-80:is(:where(.group):hover *){opacity:.8}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\/more\:translate-x-0\.5:is(:where(.group\/more):hover *){--tw-translate-x:calc(var(--spacing)*.5);translate:var(--tw-translate-x) var(--tw-translate-y)}}.file\:mr-4::file-selector-button{margin-right:calc(var(--spacing)*4)}.file\:rounded::file-selector-button{border-radius:.25rem}.file\:border::file-selector-button{border-style:var(--tw-border-style);border-width:1px}.file\:border-charcoal::file-selector-button{border-color:#1c1a17}.file\:bg-white::file-selector-button{background-color:var(--color-white)}.file\:px-4::file-selector-button{padding-inline:calc(var(--spacing)*4)}.file\:py-2::file-selector-button{padding-block:calc(var(--spacing)*2)}.file\:text-\[12px\]::file-selector-button{font-size:12px}.file\:font-semibold::file-selector-button{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.file\:tracking-\[0\.1em\]::file-selector-button{--tw-tracking:.1em;letter-spacing:.1em}.file\:text-charcoal::file-selector-button{color:#1c1a17}.file\:uppercase::file-selector-button{text-transform:uppercase}.placeholder\:text-charcoal\/40::placeholder{color:oklab(24.7759%0 0/.4)}.placeholder\:text-white\/30::placeholder{color:#ffffff4d}@supports (color:color-mix(in lab,red,red)){.placeholder\:text-white\/30::placeholder{color:color-mix(in oklab,var(--color-white) 30%,transparent)}}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing)*-.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-black\/30:hover{border-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.hover\:border-black\/30:hover{border-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.hover\:border-charcoal:hover{border-color:#1c1a17}.hover\:border-charcoal\/30:hover{border-color:oklab(24.7759%0 0/.3)}.hover\:border-charcoal\/40:hover{border-color:oklab(24.7759%0 0/.4)}.hover\:bg-black\/5:hover{background-color:#0000000d}@supports (color:color-mix(in lab,red,red)){.hover\:bg-black\/5:hover{background-color:color-mix(in oklab,var(--color-black) 5%,transparent)}}.hover\:bg-black\/65:hover{background-color:#000000a6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-black\/65:hover{background-color:color-mix(in oklab,var(--color-black) 65%,transparent)}}.hover\:bg-charcoal:hover{background-color:#1c1a17}.hover\:bg-charcoal\/90:hover{background-color:oklab(24.7759%0 0/.9)}.hover\:bg-charcoal\/\[0\.04\]:hover{background-color:oklab(24.7759%0 0/.04)}.hover\:bg-ivory:hover{background-color:#f5f1e8}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.hover\:bg-white\/15:hover{background-color:#ffffff26}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/15:hover{background-color:color-mix(in oklab,var(--color-white) 15%,transparent)}}.hover\:bg-white\/60:hover{background-color:#fff9}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/60:hover{background-color:color-mix(in oklab,var(--color-white) 60%,transparent)}}.hover\:bg-white\/80:hover{background-color:#fffc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/80:hover{background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.hover\:text-black:hover{color:var(--color-black)}.hover\:text-blanco:hover{color:#ffffff}.hover\:text-blanco\/70:hover{color:oklab(97.7882%.00231463 .00348055/.7)}.hover\:text-charcoal:hover{color:#1c1a17}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-85:hover{opacity:.85}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:file\:bg-blanco:hover::file-selector-button{background-color:#ffffff}}.focus\:border-charcoal:focus{border-color:#1c1a17}.focus\:border-charcoal\/40:focus{border-color:oklab(24.7759%0 0/.4)}.focus\:border-white\/50:focus{border-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.focus\:border-white\/50:focus{border-color:color-mix(in oklab,var(--color-white) 50%,transparent)}}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.focus\:ring-charcoal:focus{--tw-ring-color:#1c1a17}.focus\:ring-charcoal\/10:focus{--tw-ring-color:oklab(24.7759%0 0/.1)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-white:focus-visible{--tw-ring-color:var(--color-white)}.focus-visible\:ring-white\/70:focus-visible{--tw-ring-color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-white\/70:focus-visible{--tw-ring-color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.985\]:active{scale:.985}@media (min-width:40rem){.sm\:col-span-6{grid-column:span 6/span 6}.sm\:flex{display:flex}.sm\:w-\[58vw\]{width:58vw}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-6{gap:calc(var(--spacing)*6)}}@media (min-width:48rem){.md\:col-span-1{grid-column:span 1/span 1}.md\:w-\[42vw\]{width:42vw}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:px-16{padding-inline:calc(var(--spacing)*16)}.md\:py-36{padding-block:calc(var(--spacing)*36)}}@media (min-width:64rem){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:row-span-2{grid-row:span 2/span 2}.lg\:mt-10{margin-top:calc(var(--spacing)*10)}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:aspect-auto{aspect-ratio:auto}.lg\:h-full{height:100%}.lg\:min-h-0{min-height:calc(var(--spacing)*0)}.lg\:min-h-\[700px\]{min-height:700px}.lg\:w-\[30vw\]{width:30vw}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-6{gap:calc(var(--spacing)*6)}.lg\:p-7{padding:calc(var(--spacing)*7)}.lg\:px-12{padding-inline:calc(var(--spacing)*12)}.lg\:px-20{padding-inline:calc(var(--spacing)*20)}.lg\:py-0{padding-block:calc(var(--spacing)*0)}.lg\:pt-24{padding-top:calc(var(--spacing)*24)}.lg\:pb-20{padding-bottom:calc(var(--spacing)*20)}}@media (min-width:80rem){.xl\:w-\[22vw\]{width:22vw}}}html{scroll-behavior:smooth}body{font-family:var(--font-sans);color:var(--color-charcoal);background-color:var(--color-blanco);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes marquee-reverse{0%{transform:translate(-50%)}to{transform:translate(0)}}.animate-marquee{animation:marquee 25s linear infinite}.animate-marquee-reverse{animation:marquee-reverse 25s linear infinite}.animate-marquee-slow{animation:marquee 40s linear infinite}.btn-pill{letter-spacing:.02em;color:#ffffff;border:1px solid #ffffff4d;border-radius:999px;padding:14px 32px;font-size:14px;font-weight:300;transition:all .3s}.btn-pill:hover{color:#1c1a17;background:#ffffff;border-color:#ffffff}.btn-pill,.btn-pill-dark{background-color:#4d3e21;color:#fff;border-color:#4d3e21;align-items:center;gap:8px;display:inline-flex}.btn-pill-dark:hover .btn-arrow,.btn-pill:hover .btn-arrow{transform:translate(4px)}.btn-pill-dark{background-color:#4d3e21;color:#fff;border-color:#4d3e21;letter-spacing:.02em;color:#1c1a17;border:1px solid #1c1a1733;border-radius:999px;padding:14px 32px;font-size:14px;font-weight:500;transition:all .3s}.btn-pill-dark:hover{color:#ffffff;background:#1c1a17;border-color:#1c1a17}.tab-active:after{content:"";background:#fff;height:2px;position:absolute;bottom:-8px;left:0;right:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.image-overlay:hover{opacity:1}.prose-alma h2 .heading-anchor:hover,.prose-alma h3 .heading-anchor:hover{text-underline-offset:4px;-webkit-text-decoration:underline #1c1a1740;text-decoration:underline #1c1a1740}.prose-alma a:hover{text-decoration-color:#1c1a17}.prose-alma li::marker{color:#1c1a1766}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes pulse{50%{opacity:.5}}

.sf-hidden{display:none!important}

@font-face{font-family:"the-seasons";font-style:normal;font-weight:400;font-display:swap;src:url(https://almaplayarincon.com/wp-content/uploads/alma/fuentes/the-seasons-400.woff2) format("woff2")}@font-face{font-family:"the-seasons";font-style:normal;font-weight:700;font-display:swap;src:url(https://almaplayarincon.com/wp-content/uploads/alma/fuentes/the-seasons-700.woff2) format("woff2")}


/* ══════════════════════════════════════════════════════════════════════════
   ALMA PLAYA · hoja de la casa
   Sistema de diseño y correcciones sobre el clon, agrupado por componentes.
   Se inyecta al final del <head>, así gana al CSS del original salvo en las
   utilidades de Tailwind, donde hace falta !important puntual.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SISTEMA ────────────────────────────────────────────────────────────── */
:root {
  /* color */
  --ap-tinta:  #1c1a17;
  --ap-crema:  #f5f1e8;
  --ap-arena:  #dcd6ca;
  --ap-bronce: #57390e;
  --ap-oliva:  #42453e;
  /* El acento ya no es turquesa: es el oliva de la marca. Se conservan los
     nombres de variable para no reescribir 40 reglas, pero el valor es este. */
  --ap-turq:   #4d3e21;   /* base: 10,36:1 sobre blanco y en botón */
  --ap-turq-h: #3a2e18;   /* hover, un paso más oscuro */
  --ap-acento-claro: #c9b88c;  /* el mismo tono para fondo OSCURO: 8,86:1 */
  --ap-humo:   #5e574c;

  /* espaciado: un único ritmo para toda la página */
  --ap-gap-seccion: 80px;   /* aire vertical de cada sección */
  --ap-gap-bloque:  48px;   /* entre bloques dentro de una sección */
  --ap-gap-corto:   24px;
  --ap-lado:        24px;   /* margen lateral */

  /* forma */
  --ap-radio:      16px;    /* imágenes sueltas y tarjetas */
  --ap-radio-card: 20px;
  --ap-sombra:     0 1px 2px rgb(28 26 23 / 0.05), 0 12px 28px rgb(28 26 23 / 0.06);
  --ap-sombra-alta: 0 18px 40px rgb(28 26 23 / 0.1);
}

/* ── RITMO VERTICAL · el problema gordo eran los saltos kilométricos ────── */
section {
  padding-top: var(--ap-gap-seccion) !important;
  padding-bottom: var(--ap-gap-seccion) !important;
}

#alma-hero { padding: 0 !important; }
#galeria { padding-top: 0 !important; padding-bottom: var(--ap-gap-seccion) !important; }

/* dentro de las secciones, ningún bloque se despega más de lo debido */
section [class*="py-2"], section [class*="py-3"], section [class*="py-4"] {
  padding-top: var(--ap-gap-bloque) !important;
  padding-bottom: var(--ap-gap-bloque) !important;
}

section [class*="mt-16"], section [class*="mt-20"], section [class*="mt-24"] {
  margin-top: var(--ap-gap-bloque) !important;
}

/* ── BORDES REDONDEADOS uniformes ───────────────────────────────────────── */
section img,
section video,
figure,
[class*="rounded-lg"],
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  border-radius: var(--ap-radio);
}

/* ojo: rounded-full son píldoras (botones, avatares). Si entran en la regla de
   arriba se convierten en cuadrados de 16px, que es lo que pasaba con los
   botones "Reservar" de las tarjetas de la carta. */
[class*="rounded-full"] { border-radius: 999px !important; }

/* la portada va a sangre, sin redondeo */
#alma-hero img, #alma-hero .alma-hero__velo { border-radius: 0 !important; }

/* ── BOTONES · un solo sistema ──────────────────────────────────────────── */
.alma-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 52px;
  margin-top: 32px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.alma-cta:hover { transform: translateY(-2px); }
.alma-cta:focus-visible { outline: 2px solid var(--ap-turq); outline-offset: 3px; }
.alma-cta + .alma-cta { margin-left: 12px; }

/* las flechitas del original fuera: todos los secundarios iguales */
.alma-cta svg { display: none; }

.alma-cta--primario { background: var(--ap-turq-h); border: 1px solid var(--ap-turq-h); color: #fff; }
.alma-cta--primario:hover { background: #3a2e18; border-color: #3a2e18; box-shadow: 0 8px 22px rgb(77 62 33 / 0.3); }
.alma-cta--oscuro { background: transparent; border: 1px solid var(--ap-tinta); color: var(--ap-tinta); }
.alma-cta--oscuro:hover { background: var(--ap-tinta); color: var(--ap-crema); }
.alma-cta--claro { background: transparent; border: 1px solid currentcolor; color: inherit; }
.alma-cta--claro:hover { background: rgb(255 255 255 / 0.16); }

/* ── PORTADA · solo imagen, fundido automático ──────────────────────────── */
#alma-hero { position: relative; height: 100svh; overflow: hidden; }
.alma-hero__fotos {
  position: absolute;
  inset: -18% 0;   /* margen para desplazar sin descubrir el borde */
  transform: translate3d(0, var(--hero-fondo, 0px), 0);
  will-change: transform;
}

.alma-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.alma-hero__foto--activa { opacity: 1; }

/* velo mínimo: solo lo justo para que el logotipo se lea sobre cielo claro */
.alma-hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(28 26 23 / 0.34) 0%, rgb(28 26 23 / 0.04) 30%, rgb(28 26 23 / 0.12) 100%);
}


/* ── PORTADA · vitrina de cristal líquido ───────────────────────────────────
   Liquid glass de verdad: el canto refracta la foto que hay detrás (mapa de
   desplazamiento + tres pases con aberración cromática, lo monta el JS del
   final). El cristal es casi todo transparencia — apenas 12 % de tinta — y
   quien sostiene el contraste del titular blanco es el brightness del
   backdrop, no una capa lechosa encima.
   Técnica: github.com/deepika-builds/liquid-glass y github.com/rizroze/liquid-glass */
.alma-hero__vitrina {
  --lg-blur: 4px;
  --lg-saturate: 145%;
  --lg-brillo: 0.62;   /* oscurece lo que se ve A TRAVÉS del cristal */
  --lg-radio: 32px;

  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  /* --lg-desliz lo mueve el parallax del final; el centrado no se toca */
  transform: translate(-50%, calc(-50% + var(--lg-desliz, 0px)));
  opacity: var(--lg-opacidad, 1);
  will-change: transform, opacity;
  width: min(92vw, 980px);
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4.5vw, 64px);
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: var(--lg-radio);
  background: rgb(28 26 23 / 0.12);
  box-shadow:
    0 44px 110px rgb(28 26 23 / 0.46),
    0 14px 34px rgb(28 26 23 / 0.26),
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brillo));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brillo));
}

/* canto: brillo especular arriba y fleco cromático a los lados, en screen */
.alma-hero__vitrina::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset  1px 0 rgb(255 86 116 / 0.30),
    inset -1px 0 rgb(54 226 255 / 0.28),
    inset  0  1px rgb(255 255 255 / 0.34);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* donde no hay refracción (Safari, Firefox) el cristal se vela un poco más */
.alma-hero__vitrina.alma-vidrio--simple {
  --lg-blur: 14px;
  background: rgb(28 26 23 / 0.2);
}

.alma-hero__titulo {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  /* the-seasons trae bold de verdad (700), no es una negrita sintética */
  font-size: clamp(18px, 5.15vw, 30px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 20px rgb(28 26 23 / 0.55), 0 1px 3px rgb(28 26 23 / 0.35);
}

/* en mayúsculas el titular ensancha ~15 %: bajo los 600 px parte en tres */
.alma-hero__corte--movil { display: none; }

@media (max-width: 600px) {
  .alma-hero__corte--movil { display: block; }
}

@media (min-width: 768px) {
  .alma-hero__titulo { font-size: clamp(26px, 3.9vw, 54px); }
}

@media (max-width: 480px) {
  .alma-hero__vitrina { --lg-radio: 24px; padding: 26px 20px; }
}

/* ── CABECERA · legible sobre cualquier fondo ───────────────────────────── */
body > header { padding-top: 14px !important; padding-bottom: 14px !important; }

body > header .alma-pastilla {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(28 26 23 / 0.55) !important;
  backdrop-filter: blur(14px);
}

/* sobre la portada el logo va en blanco, con sombra para el cielo claro */
body > header img[data-alma-logo] {
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.55));
  transition: width 0.35s ease, filter 0.35s ease;
}

/* al bajar: barra sólida, logotipo en bronce y sin sombra */
.alma-header-mini {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: rgb(245 241 232 / 0.97) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(28 26 23 / 0.1);
}

.alma-header-mini img[data-alma-logo] { width: 104px !important; filter: none; }
.alma-header-mini img[data-alma-logo="claro"] { display: none !important; }
.alma-header-mini img[data-alma-logo="oscuro"] { display: block !important; }
.alma-header-mini .alma-pastilla { background: rgb(28 26 23 / 0.07) !important; border-color: rgb(28 26 23 / 0.1); }
.alma-header-mini .alma-pastilla a { color: var(--ap-tinta) !important; }

/* ── MARQUESINAS ────────────────────────────────────────────────────────── */
.alma-cinta {
  position: relative;
  left: 50%;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw;
  overflow: hidden;
}

.alma-cinta__tren {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: alma-desliza 44s linear infinite;
}

.alma-cinta__pieza {
  flex: 0 0 auto;
  padding-right: 8px;
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

@keyframes alma-desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.alma-cinta--portada {
  padding: 22px 0;
  background: var(--ap-tinta);
  color: rgb(245 241 232 / 0.9);
}

#galeria .alma-cinta { margin-bottom: var(--ap-gap-bloque); }
#galeria .alma-cinta + .alma-cinta { margin-bottom: var(--ap-gap-seccion); }

/* nada de scroll horizontal por culpa de las cintas */
html, body { overflow-x: hidden; }

/* ── EVENTOS · fondo arena ──────────────────────────────────────────────── */
#eventos { background: var(--ap-arena) !important; color: var(--ap-tinta) !important; }
#eventos h2, #eventos p, #eventos span { color: var(--ap-tinta) !important; }
#eventos .alma-cta--claro { border-color: var(--ap-tinta); color: var(--ap-tinta); }
#eventos .alma-cta--claro:hover { background: var(--ap-tinta); color: var(--ap-crema); }

/* ── ETIQUETAS de sección ───────────────────────────────────────────────── */
.alma-etiqueta { color: var(--ap-turq-h) !important; }

/* ── LA CARTA · cabecera al mismo eje que las tarjetas ──────────────────── */
#carta .alma-carta__cabecera {
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: var(--ap-lado);
  text-align: left !important;
}

#carta .alma-carta__cabecera h2,
#carta .alma-carta__cabecera p {
  margin-inline: 0 !important;
  text-align: left !important;
}

/* ── ARROCES · la foto superpuesta deja respirar al plato ───────────────── */
.alma-super--a {
  width: 30% !important;
  top: 34% !important;
  right: auto !important;
  left: -4% !important;
  bottom: auto !important;
  box-shadow: var(--ap-sombra-alta);
}

.alma-super--b {
  width: 34% !important;
  bottom: 2% !important;
  right: 2% !important;
  left: auto !important;
  box-shadow: var(--ap-sombra-alta);
}

/* ── GALERÍA · rejilla sin huecos ───────────────────────────────────────── */
#galeria .alma-mosaico {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 230px;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: var(--ap-lado);
}

#galeria .alma-mosaico > * {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ap-radio);
}

#galeria .alma-mosaico img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#galeria .alma-mosaico > *:hover img { transform: scale(1.04); }

.alma-celda--alta { grid-row: span 2; }
.alma-celda--ancha { grid-column: span 2; }
.alma-celda--grande { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1023px) {
  #galeria .alma-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
}

@media (max-width: 600px) {
  #galeria .alma-mosaico { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .alma-celda--ancha, .alma-celda--grande { grid-column: span 1; }
}

/* ── EL DÍA COMPLETO · foto de fondo + tarjetas blancas ─────────────────── */
#undia {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  padding-inline: var(--ap-lado) !important;
}

.alma-undia__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

.alma-undia__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(28 26 23 / 0.78) 0%, rgb(28 26 23 / 0.66) 50%, rgb(28 26 23 / 0.82) 100%);
}

#undia h2 { color: #fff !important; }
/* sobre la foto de fondo, la etiqueta en turquesa se apaga: va en claro */
#undia .alma-etiqueta { color: #c9b88c !important; }
#undia .alma-cta--claro { border-color: rgb(255 255 255 / 0.7); color: #fff; }

#undia .alma-momentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 18px;
  margin-top: var(--ap-gap-bloque);
}

#undia .alma-momento {
  padding: 30px 26px 26px;
  border-radius: var(--ap-radio-card);
  background: #fff;
  box-shadow: var(--ap-sombra);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#undia .alma-momento:hover { transform: translateY(-4px); box-shadow: var(--ap-sombra-alta); }
#undia .alma-momento__hora { margin: 0; color: var(--ap-turq-h) !important; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
#undia .alma-momento__titulo { margin: 12px 0 0; color: var(--ap-tinta) !important; font-size: 23px; font-weight: 700; line-height: 1.15; }
#undia .alma-momento__texto { margin: 10px 0 0; color: var(--ap-humo) !important; font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }

/* ── UBICACIÓN · tarjeta blanca, igual que las de arriba ────────────────── */
#visita { background: var(--ap-crema) !important; color: var(--ap-tinta) !important; padding-inline: var(--ap-lado) !important; }
#visita .alma-visita__grid { display: grid; gap: 28px; align-items: stretch; }

@media (min-width: 1024px) {
  #visita .alma-visita__grid { grid-template-columns: 1fr 1fr; }
}

#visita .alma-visita__tarjeta {
  padding: 40px 36px;
  border-radius: var(--ap-radio-card);
  background: #fff;
  box-shadow: var(--ap-sombra);
}

#visita .alma-visita__tarjeta,
#visita .alma-visita__tarjeta p,
#visita .alma-visita__tarjeta span,
#visita .alma-visita__tarjeta a { color: var(--ap-tinta) !important; }
/* ...menos el botón sólido: heredaba la tinta y quedaba texto casi negro
   sobre el oliva del propio botón (1,2:1, ilegible). */
#visita .alma-visita__tarjeta a.alma-cta--primario { color: #fff !important; }

/* el titular ocupaba tres líneas apretadas: se ajusta para que entre en dos */
#visita .alma-visita__titulo {
  margin: 0 0 26px;
  max-width: 22ch;
  color: var(--ap-tinta) !important;
  font-size: clamp(26px, 2.5vw, 38px) !important;
  line-height: 1.14 !important;
  text-wrap: balance;
}

#visita .alma-visita__caja {
  padding: 6px;
  border: 1px solid rgb(28 26 23 / 0.12);
  border-radius: var(--ap-radio);
  background: rgb(28 26 23 / 0.03);
}

#visita [data-alma-dia] { border: 0 !important; }

#visita .alma-visita__foto {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--ap-radio-card);
}

#visita .alma-visita__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* ── RECONOCIMIENTOS ────────────────────────────────────────────────────── */
#reconocimientos .alma-premios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: var(--ap-gap-bloque) auto 0;
}

#reconocimientos .alma-premio { display: grid; justify-items: center; gap: 12px; text-align: center; }

#reconocimientos .alma-premio__marca {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--ap-crema);
  color: var(--ap-bronce);
}

#reconocimientos .alma-premio__marca img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; }
#reconocimientos .alma-premio__dato { margin: 0; color: var(--ap-tinta); font-size: 18px; font-weight: 700; }
#reconocimientos .alma-premio__pie { margin: 0; color: var(--ap-humo); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── RESERVAS · contacto sin cajas ──────────────────────────────────────── */
#reservas .alma-contacto { display: grid; gap: 24px; margin-top: 32px; }
#reservas .alma-contacto__dato { margin: 0; }
#reservas .alma-contacto__etiqueta { display: block; color: rgb(245 241 232 / 0.55); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

#reservas .alma-contacto__valor {
  display: inline-block;
  margin-top: 6px;
  border-bottom: 1px solid rgb(255 255 255 / 0.3);
  color: #fff;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

#reservas .alma-contacto__valor:hover { border-color: var(--ap-turq-h); color: var(--ap-turq-h); }

/* ── JERARQUÍA TIPOGRÁFICA ──────────────────────────────────────────────── */
h2 { font-size: clamp(29px, 3.6vw, 48px) !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -0.5px; }
h3 { font-size: clamp(18px, 1.5vw, 22px) !important; font-weight: 700 !important; line-height: 1.25; }

@media (prefers-reduced-motion: reduce) {
  .alma-hero__foto,
  .alma-cta,
  .alma-cinta__tren,
  #undia .alma-momento,
  #galeria .alma-mosaico img {
    transition: none !important; /* a11y: respeta reduced motion */
    animation: none !important; /* a11y: respeta reduced motion */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 3 · tipografía del kit, carruseles de sección y ajustes finos
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍA · the-seasons de principal, la del clon de secundaria ───── */
:root {
  --ap-display: "the-seasons", "Clarika Geometric ExtraBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ap-texto: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, .alma-cinta__pieza, .alma-momento__titulo, .alma-premio__dato,
.alma-contacto__valor, .alma-visita__titulo {
  font-family: var(--ap-display) !important;
  font-style: normal !important; /* el kit trae itálicas: no se usan */
}

/* la serif es fina: los titulares piden algo más de cuerpo y menos tracking */
h2 { letter-spacing: -0.01em; font-weight: 700 !important; }
h3 { letter-spacing: 0; }

body, p, li, a, span, button, input { font-family: var(--ap-texto); }
.alma-cta, .alma-etiqueta, .alma-cta-mini { font-family: var(--ap-texto) !important; }

/* ── MARQUESINA sobre la portada · solo texto, sin franja ───────────────── */
.alma-cinta--hero {
  position: absolute;
  bottom: 26px;
  left: 0;
  z-index: 4;
  width: 100vw !important;
  margin-left: 0;
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
}

.alma-cinta--hero .alma-cinta__pieza {
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: 0;
}

/* ── MARQUESINAS de sección · franja propia para separarlas ─────────────── */
#galeria .alma-cinta { padding: 20px 0; background: var(--ap-arena); color: var(--ap-tinta); }
#galeria .alma-cinta + .alma-cinta { background: var(--ap-crema); color: rgb(28 26 23 / 0.55); margin-bottom: var(--ap-gap-seccion); }
#eventos .alma-cinta, #eventos [class*="animate-marquee"] { color: rgb(28 26 23 / 0.5); }

/* ── CARRUSEL DE SECCIÓN (playa y eventos) ─────────────────────────────── */
.alma-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--ap-radio);
  aspect-ratio: 4 / 3;
  min-height: 320px;
}

.alma-slider__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.alma-slider__foto--activa { opacity: 1; }

.alma-slider__flecha {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  background: rgb(28 26 23 / 0.3);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}

.alma-slider__flecha:hover { background: rgb(28 26 23 / 0.62); }
.alma-slider__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.alma-slider__flecha--atras { left: 14px; }
.alma-slider__flecha--adelante { right: 14px; }

/* ── BOTONES DE TARJETA · eran cuadrados enormes ────────────────────────── */
.alma-cta-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.alma-cta-mini--solido { background: var(--ap-tinta); color: var(--ap-crema); border: 1px solid var(--ap-tinta); }
.alma-cta-mini--solido:hover { background: var(--ap-turq-h); border-color: var(--ap-turq-h); color: #fff; }
.alma-cta-mini--texto { padding: 0 8px; color: var(--ap-humo); border: 0; }
.alma-cta-mini--texto:hover { color: var(--ap-turq-h); }
.alma-cta-mini svg { display: none; }
.alma-cta-mini:focus-visible { outline: 2px solid var(--ap-turq); outline-offset: 3px; }

/* ── LA CARTA · cabecera a la izquierda y con margen cómodo ─────────────── */
#carta .alma-carta__cabecera {
  /* width:100% + margen izquierdo desbordaba el padre por ese mismo margen */
  max-width: none !important;
  width: auto !important;
  padding-inline: 0 !important;
  /* mismo eje que el carrusel: los dos cuelgan ya del mismo padre */
  margin: 0 clamp(20px, 5vw, 72px) var(--ap-gap-bloque) !important;
  text-align: left !important;
}

#carta .alma-carta__cabecera > * { text-align: left !important; margin-inline: 0 !important; }
#carta [class*="snap-x"], #carta [class*="overflow-x"] {
  padding-inline: 0 !important;
  margin-inline: clamp(20px, 5vw, 72px) 0 !important;
  scroll-padding-inline-start: 0;
}

/* ── ARROCES · superposición como estaba, sin tapar el plato ────────────── */
.alma-super--a { width: 33% !important; top: 42% !important; left: 2% !important; right: auto !important; bottom: auto !important; }
.alma-super--b { width: 38% !important; top: 4% !important; right: 0 !important; left: auto !important; bottom: auto !important; }
.alma-super--a, .alma-super--b { box-shadow: 0 20px 44px rgb(28 26 23 / 0.16); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --ap-gap-seccion: 64px; --ap-gap-bloque: 36px; }
  .alma-cinta--hero { bottom: 18px; }
  .alma-cinta--hero .alma-cinta__pieza { font-size: 20px; }
  .alma-super--a, .alma-super--b { position: static !important; width: 100% !important; margin-top: 12px; }

}

@media (max-width: 600px) {
  :root { --ap-gap-seccion: 52px; }
  .alma-slider { min-height: 260px; }
  .alma-slider__flecha { width: 38px; height: 38px; }
  .alma-cta { width: 100%; margin-left: 0 !important; }
  .alma-cta + .alma-cta { margin-left: 0 !important; margin-top: 12px; }
  h2 { font-size: clamp(26px, 7vw, 34px) !important; }
}

/* ── ACCESIBILIDAD · lo que sacó la verificación ────────────────────────── */
/* nada de texto por debajo de 12px: los precios de la carta iban a 11 */
#carta [class*="text-[11px]"], #carta p[class*="text-[11"],
.alma-premio__pie, .alma-momento__hora, .alma-contacto__etiqueta,
.alma-etiqueta { font-size: 12px !important; }

/* targets táctiles: mínimo 40px de alto en cualquier enlace pulsable */
header a, footer a, #reservas a, #visita a, .alma-contacto__valor {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

footer a { min-height: 34px; }

/* el carrusel de la carta lleva su propio scroll: no debe empujar el body */
#carta [class*="overflow-x"], #carta [class*="snap-x"] { max-width: 100vw; }

/* la etiqueta decorativa del mosaico y el enlace vacío del hero */
.alma-celda__pie, [class*="#ALMAPLAYA"] { font-size: 12px !important; }
#galeria a:empty, header a:empty { display: none; }


/* el h2 y el subtítulo heredaban su propio ancho centrado del original */
#carta .alma-carta__cabecera h2,
#carta .alma-carta__cabecera p {
  max-width: 620px !important;
  margin-inline: 0 !important;
  text-align: left !important;
}


/* ── CONTRASTE AA · lo que sacó la auditoría en vivo ────────────────────── */
/* cualquier botón que quedara con el turquesa claro de fondo: no pasa a 14px */
.alma-cta-mini--solido, [class*="bg-[#4d3e21]"], .alma-boton--turquesa {
  background: var(--ap-turq-h) !important;
  border-color: var(--ap-turq-h) !important;
  color: #fff !important;
}

/* #reservas va sobre negro (#1c1a17): ahí el turquesa hondo se hunde a 2,2:1.
   Sobre oscuro la etiqueta tiene que ir CLARA — este tono da 9,3:1. */
#reservas .alma-etiqueta, #cierre .alma-etiqueta { color: #c9b88c !important; }
/* sobre fondos claros manda el hondo, que sí pasa AA a 12px */
#visita .alma-etiqueta, #carta .alma-etiqueta { color: #3a2e18 !important; }


/* la píldora del mosaico venía a 11px: por debajo del mínimo legible */
[class*="text-[11px]"] { font-size: 12px !important; }


/* ── LA CARTA · flechas a la derecha, a la altura del titular ───────────── */
#carta .alma-carta__cabecera--conflechas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
#carta .alma-carta__flechas { display: flex; gap: 10px; flex-shrink: 0; margin: 0 !important; }

/* la barra móvil llevaba el turquesa claro: 3,39:1 con texto blanco */
.alma-barra-movil [class*="bg-[#4d3e21]"], .alma-barra-movil .alma-cta--primario,
[class*="fixed"][class*="bottom-0"] a[class*="rounded-full"][class*="bg-"] {
  background: var(--ap-turq-h) !important;
  border-color: var(--ap-turq-h) !important;
  color: #fff !important;
}

#carta .alma-carta__rotulo { flex: 1 1 auto; min-width: 0; }
#carta .alma-carta__rotulo > * { text-align: left !important; margin-inline: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 4 · una sola tipografía, cintas compactas, header oscuro y ritmo
   vertical idéntico en todas las secciones.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. UNA SOLA FAMILIA ────────────────────────────────────────────────────
   Saltar de serif a sans dentro del mismo bloque parece un error de montaje.
   Todo lo que es "voz de marca" —titulares, cintas, rótulos, cifras— va en la
   principal y se diferencia por PESO. La secundaria se queda solo para el
   cuerpo de texto largo y la microcopia de UI, donde la serif no es legible. */
.alma-cinta__pieza,
[class*="animate-marquee"],
[class*="animate-marquee"] span,
[class*="animate-marquee"] div,
#galeria .alma-cinta span,
.alma-visita__dato, .alma-premio__titulo, .alma-momento__titulo,
h1, h2, h3, h4, blockquote {
  font-family: var(--ap-display) !important;
  font-style: normal !important;
}

/* los pesos hacen el trabajo que antes hacía el cambio de familia */
h2 { font-weight: 700 !important; }
h3, h4 { font-weight: 400 !important; }
.alma-cinta__pieza { font-weight: 400; }
[class*="animate-marquee"] { font-weight: 400 !important; letter-spacing: 0 !important; }

/* ── 2. CINTAS · compactas y pegadas entre sí ───────────────────────────────
   Iban a 161 px de alto con 48-80 px de aire alrededor: cada una parecía una
   sección. Son un separador, no un bloque. */
#galeria .alma-cinta,
#galeria [class*="animate-marquee"] {
  padding-block: 9px !important;
  margin-block: 0 !important;
}

#galeria .alma-cinta { background: var(--ap-arena); color: var(--ap-tinta); }
#galeria .alma-cinta + .alma-cinta {
  background: var(--ap-crema);
  color: rgb(28 26 23 / 0.5);
  margin-top: 0 !important;
}

/* la pareja de cintas se separa del contenido de alrededor como una unidad */
#galeria .alma-cinta:first-of-type { margin-top: 0 !important; }
#galeria .alma-cinta:last-of-type { margin-bottom: var(--ap-gap-bloque) !important; }

#galeria .alma-cinta .alma-cinta__pieza,
#galeria [class*="animate-marquee"] {
  font-size: clamp(19px, 1.9vw, 27px) !important;
  line-height: 1.25 !important;
}

/* la cinta de eventos venía con casi 90 px de aire por arriba */
#eventos .alma-cinta, #eventos [class*="animate-marquee"] {
  padding-block: 9px !important;
  margin-block: 0 !important;
  font-size: clamp(19px, 1.9vw, 27px) !important;
}

/* ── 3. CINTA DE LA PORTADA · más arriba y más cuerpo ───────────────────── */
.alma-cinta--hero { bottom: 41px; }
.alma-cinta--hero .alma-cinta__pieza {
  font-size: clamp(37px, 3.4vw, 53px);
  font-weight: 400;
}

/* ── 4. HEADER AL BAJAR · oscuro, no claro ─────────────────────────────────
   Sobre fondo claro el header blanco desaparecía. En oscuro siempre se lee y
   además marca el borde superior de la página. */
.alma-header-mini {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: rgb(24 22 20 / 0.94) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
}

.alma-header-mini img[data-alma-logo] { width: 104px !important; filter: none; }
.alma-header-mini img[data-alma-logo="claro"] { display: block !important; }
.alma-header-mini img[data-alma-logo="oscuro"] { display: none !important; }

.alma-header-mini .alma-pastilla {
  background: rgb(255 255 255 / 0.1) !important;
  border-color: rgb(255 255 255 / 0.14) !important;
}
.alma-header-mini .alma-pastilla a { color: #fff !important; }
.alma-header-mini a[class*="rounded-full"]:not(.alma-pastilla a) {
  background: #fff !important;
  color: var(--ap-tinta) !important;
}

/* ── 5. RITMO VERTICAL · el mismo en todas las secciones ────────────────────
   Cada sección traía su propio padding heredado del clon. Se iguala aquí, en
   un sitio, en vez de sección por sección. */
:root { --ap-gap-seccion: 96px; }

#concepto, #playa, #eventos, #carta, #arroces, #undia,
#galeria, #visita, #reconocimientos, #reservas, #cierre {
  padding-block: var(--ap-gap-seccion) !important;
}

/* la galería abre con cintas a sangre: no quiere padding arriba */
#galeria { padding-top: 0 !important; }
/* arroces continúa la sección anterior con el mismo fondo: sin doble aire */
#arroces { padding-top: 0 !important; }

@media (max-width: 768px) {
  :root { --ap-gap-seccion: 64px; }
  .alma-cinta--hero { bottom: 26px; }
  .alma-cinta--hero .alma-cinta__pieza { font-size: 27px; }
}

/* ── CIERRE · la vista se abre ──────────────────────────────────────────────
   Adaptado del gesto de Osmo (la imagen que crece desde el centro del texto):
   aquí en vez de una intro a pantalla completa es un reveal de sección, que es
   lo que pide una landing — no interrumpe la lectura, la remata. */
.alma-cierre { position: relative; overflow: hidden; isolation: isolate; }

.alma-cierre__lienzo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.alma-cierre__marco {
  position: relative;
  width: 12%;          /* en reposo: una franja estrecha tras el titular */
  height: 100%;
  overflow: hidden;
  border-radius: var(--ap-radio);
  will-change: width;
}

.alma-cierre__foto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100%;
  max-width: none;
  transform: translate(-50%, -50%) scale(1.06);
  object-fit: cover;
  opacity: 0.92;
  will-change: transform;
}

/* el texto siempre por encima y siempre legible sobre la foto */
.alma-cierre__texto { position: relative; z-index: 2; }
.alma-cierre__texto h2 { text-shadow: 0 2px 26px rgb(0 0 0 / 0.55); }

/* con la foto abierta, el velo mantiene el contraste del titular */
.alma-cierre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(24 22 20 / 0.28), rgb(24 22 20 / 0.58));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .alma-cierre__marco { width: 100%; }
  .alma-cierre__foto { transform: translate(-50%, -50%) scale(1); }
}


/* la sección respira más que el resto: es el remate de la página */
.alma-cierre { padding-block: 132px !important; }
.alma-cierre__texto p { color: rgb(255 255 255 / 0.82) !important; text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }

/* sobre foto, el CTA fantasma no se ve: aquí va sólido */
.alma-cierre__texto .alma-cta,
.alma-cierre__texto a[class*="rounded-full"] {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ap-tinta) !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
}
.alma-cierre__texto .alma-cta:hover { background: var(--ap-crema) !important; border-color: var(--ap-crema) !important; }

@media (max-width: 768px) { .alma-cierre { padding-block: 88px !important; } }

/* la franja la pinta SOLO el contenedor a 100vw: el tren interior mide lo que
   mide su texto, y si además llevaba fondo la banda se cortaba a media pantalla */
#galeria .alma-cinta > *, #eventos .alma-cinta > *,
#galeria [class*="animate-marquee"], #eventos [class*="animate-marquee"] {
  background: transparent !important;
}

/* una cinta que abre sección va a sangre con el borde: el padding de la sección
   la dejaba flotando con 96px de aire por encima */
#eventos { padding-top: 0 !important; }
#eventos > .alma-cinta:first-child,
#eventos > [class*="animate-marquee"]:first-child { margin-bottom: var(--ap-gap-seccion) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 5 · el fallo de las dos tipografías, logo, cintas y móvil
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LA CAUSA REAL DE LAS DOS TIPOGRAFÍAS ────────────────────────────────
   `body, p, li, a, span…` mandaba la secundaria a TODOS los span, incluidos los
   que van dentro de un titular. Por eso en "…y una copa al ATARDECER" solo esa
   palabra cambiaba de familia: iba envuelta en un <span class="font-medium">.
   Dentro de un titular nada cambia de familia; se juega con el peso. */
h1 span, h2 span, h3 span, h4 span,
h1 em, h2 em, h3 em, h4 em,
h1 strong, h2 strong, h3 strong, h4 strong,
h1 b, h2 b, h3 b, h4 b, h1 i, h2 i, h3 i, h4 i {
  font-family: inherit !important;
  font-style: normal !important;
}

/* el contraste dentro del titular lo da el peso, no la familia */
h1 span[class*="font-medium"], h2 span[class*="font-medium"],
h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b { font-weight: 700 !important; }
h1 span[class*="font-light"], h2 span[class*="font-light"],
h3 span[class*="font-light"] { font-weight: 400 !important; }

/* ── 2. LOGOTIPO · se leía pequeño para lo que es ───────────────────────── */
header img[data-alma-logo] { width: 168px !important; height: auto !important; }
.alma-header-mini img[data-alma-logo] { width: 138px !important; }
#arroces img[alt="Alma Playa"] { height: 34px !important; }

@media (max-width: 768px) {
  header img[data-alma-logo] { width: 132px !important; }
  .alma-header-mini img[data-alma-logo] { width: 112px !important; }
}

/* ── 3. CINTA DE EVENTOS · fondo oscuro del header y texto claro ────────── */
#eventos .alma-cinta,
#eventos [class*="animate-marquee"] {
  background: #181614 !important;
  color: rgb(245 241 232 / 0.94) !important;
}
#eventos .alma-cinta .alma-cinta__pieza,
#eventos [class*="animate-marquee"] span { color: rgb(245 241 232 / 0.94) !important; }

/* ── 4. CINTAS DE LA GALERÍA · limpias, sin franja de color ──────────────── */
#galeria .alma-cinta,
#galeria .alma-cinta + .alma-cinta,
#galeria [class*="animate-marquee"] {
  background: transparent !important;
  padding-block: 7px !important;
  margin-block: 0 !important;
}

/* la de arriba, oscura; la de abajo, un punto más clara: hacen pareja */
/* la de arriba lleva el peso; la de abajo la acompaña un tono por debajo */
#galeria .alma-cinta--alta, #galeria .alma-cinta--alta * { color: rgb(28 26 23 / 0.92) !important; }
#galeria .alma-cinta--baja, #galeria .alma-cinta--baja * { color: rgb(28 26 23 / 0.4) !important; }

/* mismo aire arriba (sección anterior) que abajo (las fotos) que entre ellas */
#galeria .alma-cinta--alta { margin-top: 26px !important; }
#galeria .alma-cinta--baja { margin-bottom: 26px !important; }

/* ── 5. ARROCES · la composición se completa por arriba a la izquierda ───── */
.alma-arroz-wide {
  position: absolute;
  left: -11%;
  top: 7%;
  z-index: 30;
  width: 55%;
  overflow: hidden;
  border-radius: var(--ap-radio);
  box-shadow: 0 26px 60px rgb(28 26 23 / 0.22);
}
.alma-arroz-wide img { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  .alma-arroz-wide { position: relative; left: 0; top: 0; width: 100%; margin-bottom: 16px; box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN MÓVIL · carta a pantalla completa
   La barra flotante de abajo tapaba contenido y obligaba a bajar la vista para
   navegar. Aquí el acceso está donde se espera —arriba— y la carta usa la voz
   de la marca en vez de una lista de sistema.
   ══════════════════════════════════════════════════════════════════════════ */
.alma-menu__boton { display: none; }

@media (max-width: 1023px) {
  /* fuera la barra flotante inferior */
  body > div[class*="fixed"][class*="bottom-0"],
  body > nav[class*="fixed"][class*="bottom-0"],
  .alma-barra-movil { display: none !important; }

  .alma-menu__boton {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid rgb(255 255 255 / 0.34);
    border-radius: 999px;
    background: rgb(24 22 20 / 0.34);
    backdrop-filter: blur(10px);
    transform: translateY(-50%);
    cursor: pointer;
  }

  .alma-menu__raya {
    display: block;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.3s ease;
  }

  /* con el header ya oscuro, el botón se apoya en él */
  .alma-header-mini .alma-menu__boton { background: rgb(255 255 255 / 0.12); }
}

.alma-menu[hidden] { display: none; }

.alma-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}

.alma-menu__fondo {
  position: absolute;
  inset: 0;
  background: rgb(12 11 10 / 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.alma-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(430px, 100%);
  height: 100%;
  padding: 26px 30px 34px;
  background: #181614;
  color: var(--ap-crema);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.2, 1);
  overflow-y: auto;
}

.alma-menu--abierto .alma-menu__fondo { opacity: 1; }
.alma-menu--abierto .alma-menu__panel { transform: translateX(0); }

.alma-menu__cerrar {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(245 241 232 / 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--ap-crema);
  cursor: pointer;
  flex-shrink: 0;
}
.alma-menu__cerrar:hover { background: rgb(245 241 232 / 0.08); }

.alma-menu__lista { display: flex; flex-direction: column; margin: 34px 0; }

.alma-menu__enlace {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(245 241 232 / 0.1);
  color: var(--ap-crema);
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i) * 0.055s + 0.12s);
  min-height: 44px;
}

.alma-menu--abierto .alma-menu__enlace { opacity: 1; transform: none; }

.alma-menu__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #c9b88c;
  flex-shrink: 0;
}

.alma-menu__rotulo {
  font-family: var(--ap-display);
  font-size: clamp(27px, 7vw, 36px);
  font-weight: 400;
  line-height: 1.1;
}

.alma-menu__enlace:hover .alma-menu__rotulo { color: #fff; }
.alma-menu__enlace:focus-visible { outline: 2px solid #c9b88c; outline-offset: 4px; }

.alma-menu__pie { display: flex; flex-direction: column; gap: 10px; }

.alma-menu__accion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.alma-menu__accion--fantasma { border: 1px solid rgb(245 241 232 / 0.3); color: var(--ap-crema); }
.alma-menu__accion--solido { background: #fff; color: var(--ap-tinta); }
.alma-menu__nota {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: center;
  color: rgb(245 241 232 / 0.5);
}

/* la página no se mueve por detrás mientras la carta está abierta */
body.alma-sin-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .alma-menu__panel, .alma-menu__fondo, .alma-menu__enlace { transition: none; }
}

/* las cintas nunca se quedan cortas: el tren mide lo que mide su contenido */
.alma-cinta__tren, [class*="animate-marquee"] { width: max-content !important; }


/* ── CTA de reservar en la cabecera móvil ────────────────────────────────── */
.alma-cta-movil { display: none; }

@media (max-width: 1023px) {
  .alma-cta-movil {
    position: absolute;
    top: 50%;
    right: 76px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--ap-tinta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-50%);
  }

  /* con la cabecera reducida ya no hace falta el nav de escritorio */
  body > header .alma-pastilla { display: none !important; }
  /* ni el botón de reservar original, que duplicaba al de la cabecera móvil */
  body > header > a[class*="rounded-full"]:not(.alma-cta-movil) { display: none !important; }

  /* la composición de arroces se apila: la horizontal encabeza */
  .alma-arroz-wide { position: relative; left: 0; top: 0; width: 100%; }
}


/* la horizontal monta sobre la esquina de las fresas y las copas bajan para
   cerrar el hueco de abajo a la derecha: sin eso la composición quedaba coja */
#arroces .alma-super--a { margin-top: 6% !important; }
#arroces [class*="right-"][class*="top-"] {
  top: 26% !important;
  width: 44% !important;
  height: auto !important;
}
#arroces .alma-composicion { padding-block: 40px 0 !important; }

@media (max-width: 1024px) {
  #arroces .alma-super--a { margin-top: 0 !important; }
  #arroces [class*="right-"][class*="top-"] { position: relative !important; top: 0 !important; width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 6 · vídeos del cliente, cinta de eventos y composición de arroces
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Clips de Instagram · ocupan su hueco igual que lo hacía la foto ─────── */
.alma-clip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.alma-mosaico > figure .alma-clip { position: absolute; inset: 0; }
.alma-visita__foto { position: relative; overflow: hidden; border-radius: var(--ap-radio); }
.alma-visita__foto .alma-clip { aspect-ratio: 3 / 4; height: auto; }

/* ── Cinta de eventos · el fondo va en el contenedor, no en el tren ────────
   Antes lo llevaba el tren interior y el contenedor dejaba ver el arena de la
   sección por arriba y por abajo: esa era la franja que sobresalía. Ahora la
   secuencia es limpia: sección blanca · cinta oscura · sección arena. */
#eventos .alma-cinta--oscura {
  background: #181614 !important;
  padding-block: 11px !important;
  margin-block: 0 0 var(--ap-gap-seccion) !important;
  border: 0 !important;
}

#eventos .alma-cinta--oscura *,
#eventos .alma-cinta--oscura [class*="animate-marquee"] {
  background: transparent !important;
  color: rgb(245 241 232 / 0.92) !important;
}

/* más despacio: a 25 s el texto pasaba demasiado rápido para leerlo */
#eventos [class*="animate-marquee"] { animation-duration: 88s !important; }
#galeria [class*="animate-marquee"] { animation-duration: 76s !important; }
.alma-cinta__tren { animation-duration: 70s !important; }

/* ── ARROCES · las cuatro piezas, superpuestas y llenando la caja ──────────
   El montaje del clon dejaba una foto suelta en el centro y tres satélites que
   no se tocaban. Aquí las cuatro se solapan y ocupan el alto completo. */
#arroces .alma-composicion > div:last-child {
  position: relative;
  min-height: 660px !important;
  padding: 30px 34px !important;
}

#arroces .alma-composicion > div:last-child > div {
  position: absolute !important;
  overflow: hidden;
  border-radius: var(--ap-radio);
  box-shadow: 0 24px 54px rgb(28 26 23 / 0.2);
}

#arroces .alma-composicion > div:last-child > div img,
#arroces .alma-composicion > div:last-child > div video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1 · la horizontal, arriba a la izquierda, la más ancha */
#arroces .alma-arroz-wide {
  left: -8% !important;
  top: 0 !important;
  width: 62% !important;
  height: 40% !important;
  z-index: 10 !important;
}

/* 2 · el arroz, columna central-baja, muerde la esquina de la horizontal */
#arroces .alma-composicion > div:last-child > div:nth-child(2) {
  left: 4% !important;
  top: 32% !important;
  width: 52% !important;
  height: 62% !important;
  aspect-ratio: auto !important;
  z-index: 20 !important;
}

/* 3 · las copas, columna derecha, de arriba a media altura */
#arroces .alma-composicion > div:last-child > div:nth-child(3) {
  right: -4% !important;
  left: auto !important;
  top: 14% !important;
  bottom: auto !important;
  width: 46% !important;
  height: 50% !important;
  z-index: 30 !important;
}

/* 4 · las fresas, abajo a la derecha, montando sobre las dos anteriores */
#arroces .alma-composicion > div:last-child > div:nth-child(4) {
  right: 4% !important;
  left: auto !important;
  bottom: 0 !important;
  top: auto !important;
  width: 42% !important;
  height: 42% !important;
  z-index: 40 !important;
}

@media (max-width: 1024px) {
  /* en pantalla estrecha la superposición no cabe: se apila */
  #arroces .alma-composicion > div:last-child { min-height: 0 !important; padding: 0 20px !important; }
  #arroces .alma-composicion > div:last-child > div {
    position: relative !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RONDA 7 · las cintas, bien montadas
   Cada pieza hace UNA cosa: el contenedor recorta y pinta la franja de borde a
   borde; el tren mide lo que mide su texto y se desliza. Antes ambos papeles
   caían sobre el mismo div y por eso la franja acababa donde acababa el texto
   y el bucle dejaba hueco.
   ══════════════════════════════════════════════════════════════════════════ */

/* el contenedor: franja completa, a sangre, sin scroll horizontal */
.alma-cinta {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  overflow: hidden !important;
  display: block !important;
}

/* el tren: mide su contenido y se desliza media vuelta, que es justo el punto
   en que la segunda mitad ocupa el sitio de la primera → bucle sin costura */
.alma-cinta__tren {
  display: flex !important;
  width: max-content !important;
  max-width: none !important;
  margin-left: 0 !important;
  left: auto !important;
  white-space: nowrap;
  animation: alma-desliza 70s linear infinite !important;
  will-change: transform;
}

#eventos .alma-cinta__tren { animation-duration: 96s !important; }
#galeria .alma-cinta--alta .alma-cinta__tren { animation-duration: 84s !important; }
#galeria .alma-cinta--baja .alma-cinta__tren { animation-duration: 84s !important; }

/* la de la galería de abajo va en sentido contrario: se cruzan */
#galeria .alma-cinta--baja .alma-cinta__tren { animation-name: alma-desliza-inv !important; }

@keyframes alma-desliza-inv {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* la franja oscura la pinta el contenedor, no el texto */
#eventos .alma-cinta--oscura {
  background: #181614 !important;
  padding-block: 13px !important;
  margin: 0 0 var(--ap-gap-seccion) -50vw !important;
  border: 0 !important;
}
#eventos .alma-cinta--oscura .alma-cinta__tren,
#eventos .alma-cinta--oscura span { background: transparent !important; color: rgb(245 241 232 / 0.92) !important; }

#galeria .alma-cinta { background: transparent !important; padding-block: 7px !important; }
#galeria .alma-cinta--alta { margin: 26px 0 0 -50vw !important; }
#galeria .alma-cinta--baja { margin: 0 0 26px -50vw !important; }

/* el contenedor que envolvía a la cinta ya no necesita su propio aire */
#eventos > div:first-child { padding-block: 0 !important; border: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .alma-cinta__tren { animation: none !important; }
}

/* ── RECONOCIMIENTOS · logotipos reales ─────────────────────────────────────
   Cuatro marcas con estéticas incompatibles entre sí (un círculo negro, un
   multicolor, un corazón, un sol). Lo que las hace convivir no es tocarles el
   color —no se puede— sino darles el mismo peso óptico: misma caja, misma
   altura útil, y todo lo demás del bloque en silencio. */
.alma-premio__marca--logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 62px;
  margin-bottom: 20px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.alma-premio__marca--logo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* el Solete lleva su propio rótulo dentro y el corazón es muy vertical:
   se compensan a ojo para que los cuatro pesen igual en la fila */
.alma-premio__marca--alto img { height: 84%; }
.alma-premio__marca--ancho img { height: 78%; }

@media (max-width: 768px) {
  .alma-premio__marca--logo { height: 52px; margin-bottom: 14px; }
}

/* la caja original de la marca era un círculo con overflow oculto: recortaba
   los logos anchos (Google se quedaba en "OOG"). Aquí no recorta nada y cada
   logo se ajusta por su lado largo, no siempre por el alto. */
.alma-premio__marca--logo {
  overflow: visible !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 74px !important;
  flex: 0 0 auto;
}

.alma-premio__marca--logo img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

/* el ancho (Google) manda por ancho; el alto (Solete, con su rótulo dentro)
   se contiene un punto para no pesar más que los demás */
.alma-premio__marca--ancho img { max-height: 74% !important; }
.alma-premio__marca--alto img { max-height: 100% !important; }

.alma-premio { min-width: 0; }
.alma-premios { align-items: end; }

@media (max-width: 768px) {
  .alma-premio__marca--logo { height: 58px !important; margin-bottom: 14px; }
}

/* ── RECONOCIMIENTOS · tamaño óptico, no matemático ─────────────────────────
   Los cuatro logos van ENTEROS, sin recortar ni retocar. Igualarlos por altura
   no funciona: un círculo negro macizo pesa mucho más que un lettering ancho a
   la misma altura. Cada uno se ajusta por su lado dominante hasta que los
   cuatro pesan lo mismo en la fila. */
.alma-premio__marca--logo {
  height: 96px !important;
  overflow: visible !important;
  background: transparent !important;
}

.alma-premio__marca--logo img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

/* el círculo macizo de Forbes es el que más área ocupa: se contiene */
.alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-height: 74% !important; }
/* el lettering de Google es 2,2 veces más ancho que alto: manda el ancho */
.alma-premio__marca--logo img[src*="ap-logo-google"] { max-height: 66% !important; max-width: 96% !important; }
/* el Solete trae su propio rótulo dentro, así que su mancha real es menor */
.alma-premio__marca--logo img[src*="ap-logo-solete"] { max-height: 100% !important; }
.alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-height: 88% !important; }

@media (max-width: 768px) {
  .alma-premio__marca--logo { height: 72px !important; }
}

/* ── La cinta de la portada es un caso aparte ───────────────────────────────
   La regla general de .alma-cinta (ronda 7) lleva position:relative !important
   para poder sacar la franja a 100vw, y eso pisó el absolute de la del hero:
   se fue al flujo normal y acabó arriba, cortada por la cabecera. Aquí se
   recupera su anclaje al pie de la portada. */
.alma-cinta--hero {
  position: absolute !important;
  bottom: 41px !important;
  top: auto !important;
  left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 4;
  background: transparent !important;
  color: #fff;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
}

@media (max-width: 768px) {
  .alma-cinta--hero { bottom: 26px !important; }
}

/* ── RECONOCIMIENTOS · los logos, enteros y sin recortar ────────────────────
   El `object-fit: cover` que traía el clon estaba comiéndose el borde de cada
   logo (el rótulo del Solete, el pie del corazón). Aquí se fuerza `contain`,
   que escala sin cortar, y la caja no impone proporción: cada logo mantiene la
   suya. Como llegan con su margen blanco original, el ajuste fino de tamaño se
   hace por ancho, que es lo único comparable entre ellos. */
.alma-premio__marca--logo,
.alma-premio__marca--logo img,
#reconocimientos .alma-premio img {
  object-fit: contain !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.alma-premio__marca--logo {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin-bottom: 18px;
}

.alma-premio__marca--logo img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto;
}

/* tamaño por ancho, ajustado a ojo: el margen blanco de cada archivo es
   distinto, así que a igual ancho no pesan igual */
.alma-premio__marca--logo img[src*="ap-logo-solete"] { max-width: 96px !important; }
.alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-width: 88px !important; }
.alma-premio__marca--logo img[src*="ap-logo-google"] { max-width: 152px !important; }
.alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-width: 92px !important; }

/* con alturas distintas, los logos se alinean por su base y los rótulos quedan
   a la misma altura entre sí */
.alma-premios { align-items: end !important; }
.alma-premio { display: flex; flex-direction: column; justify-content: flex-end; }

@media (max-width: 768px) {
  .alma-premio__marca--logo img[src*="ap-logo-solete"] { max-width: 74px !important; }
  .alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-width: 68px !important; }
  .alma-premio__marca--logo img[src*="ap-logo-google"] { max-width: 116px !important; }
  .alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-width: 70px !important; }
}

/* Los max-height por `[src*=...]` de la pasada anterior tienen más
   especificidad que la regla genérica y seguían limitando el tamaño (Google se
   quedaba en 100px de 152). Se anulan al mismo nivel y el tamaño lo fija solo
   el ancho, que es lo comparable entre logos de proporciones distintas. */
.alma-premio__marca--logo img[src*="ap-logo-solete"],
.alma-premio__marca--logo img[src*="ap-logo-forbes"],
.alma-premio__marca--logo img[src*="ap-logo-google"],
.alma-premio__marca--logo img[src*="ap-logo-rincon"] {
  max-height: none !important;
  height: auto !important;
}

.alma-premio__marca--logo img[src*="ap-logo-solete"] { max-width: 118px !important; }
.alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-width: 92px !important; }
.alma-premio__marca--logo img[src*="ap-logo-google"] { max-width: 168px !important; }
.alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-width: 100px !important; }

@media (max-width: 768px) {
  .alma-premio__marca--logo img[src*="ap-logo-solete"] { max-width: 88px !important; }
  .alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-width: 70px !important; }
  .alma-premio__marca--logo img[src*="ap-logo-google"] { max-width: 128px !important; }
  .alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-width: 76px !important; }
}

/* ── Los dos restos de turquesa ─────────────────────────────────────────────
   1. El wordmark de la sección de arroces llevaba `invert` de Tailwind, que
      convierte el bronce #57390e en #a8c6f1 — un azul claro. Sobre fondo claro
      no hace falta invertir nada: el bronce ya se lee. */
#arroces img[alt="Alma Playa"],
img[alt="Alma Playa"].invert {
  filter: none !important;
}

/* 2. La etiqueta de "El día completo" seguía en el azul claro del turquesa.
      Va sobre fondo oscuro, así que toma el claro de la nueva escala. */
#undia .alma-etiqueta { color: var(--ap-acento-claro) !important; }



/* ── RECONOCIMIENTOS · los cuatro logos, normalizados por ALTURA ────────────
   Las rondas anteriores los ajustaban por ancho (max-width por archivo), y
   con proporciones tan distintas eso descuadra la fila: el vertical crece a
   lo alto hasta desbordar su caja. El ojo compara alturas, así que manda la
   altura y el ancho queda libre. Los porcentajes son el ajuste óptico: un
   círculo macizo pesa más que un wordmark a igualdad de altura. */
#reconocimientos .alma-premio__marca--logo {
  height: 74px !important;
  align-items: flex-end !important;
}

#reconocimientos .alma-premio__marca--logo img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

#reconocimientos .alma-premio__marca--logo img[src*="ap-logo-solete"] { max-height: 100% !important; }
#reconocimientos .alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-height: 70% !important; }
#reconocimientos .alma-premio__marca--logo img[src*="ap-logo-google"] { max-height: 54% !important; }
#reconocimientos .alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-height: 78% !important; }

/* ── RECONOCIMIENTOS · el móvil, en dos columnas y normalizado por ALTURA ───
   Lo que descuadraba la rejilla: los logos se ajustaban por ANCHO (max-width
   en px por archivo), y el Solete es vertical (420×594), así que a 74 px de
   ancho medía 124 de alto y desbordaba su caja, empujando toda la fila.
   Aquí manda la altura —que es lo que el ojo compara— y el ancho se deja
   libre. Los porcentajes por logo son el ajuste óptico: un círculo negro
   macizo pesa más que un wordmark a la misma altura.
   Y a 390 px la rejilla salía en UNA columna: cuatro logos gigantes apilados.
   Dos columnas dejan la sección de un vistazo. */
@media (max-width: 767px) {
  #reconocimientos { padding: 68px 20px !important; }

  #reconocimientos .alma-premios {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 38px 16px !important;
    align-items: start !important;
  }

  #reconocimientos .alma-premio {
    justify-content: flex-start;
    gap: 10px;
  }

  /* caja de altura fija: los cuatro apoyan en la misma línea de base */
  #reconocimientos .alma-premio__marca--logo {
    height: 66px !important;
    margin-bottom: 12px;
    align-items: flex-end !important;
  }

  /* el ancho deja de mandar: se anulan los max-width en px de las rondas previas */
  #reconocimientos .alma-premio__marca--logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  #reconocimientos .alma-premio__marca--logo img[src*="ap-logo-solete"] { max-height: 100% !important; }
  #reconocimientos .alma-premio__marca--logo img[src*="ap-logo-forbes"] { max-height: 68% !important; }
  #reconocimientos .alma-premio__marca--logo img[src*="ap-logo-google"] { max-height: 52% !important; }
  #reconocimientos .alma-premio__marca--logo img[src*="ap-logo-rincon"] { max-height: 76% !important; }

  #reconocimientos .alma-premio__dato { font-size: 17px; }

  /* dos renglones reservados: así un pie de una línea y otro de dos no
     descuadran la fila de abajo */
  #reconocimientos .alma-premio__pie {
    min-height: 2.6em;
    font-size: 10.5px;
    letter-spacing: 0.11em;
    line-height: 1.3;
    text-wrap: balance;
  }

  #reconocimientos h2 { max-width: 14ch; }
}

/* ── ronda 1 de cliente ─────────────────────────────────────────────── */
.alma-carta__pdfs { display: flex; flex-wrap: wrap; gap: 12px; }
.alma-carta__pdfs .alma-cta { margin-top: 24px; }
.alma-carta__pdfs .alma-cta + .alma-cta { margin-left: 0; }
.alma-reservas__motor { display: flex; flex-direction: column; gap: 14px; }
.alma-reservas__marco {
  width: 100%;
  min-height: 790px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.28);
}
.alma-reservas__salida { margin: 0; font-size: 13px; line-height: 1.6; color: rgb(245 241 232 / 0.6); }
.alma-reservas__salida a { color: rgb(245 241 232 / 0.92); text-decoration: underline; text-underline-offset: 3px; }
[data-alma-carrusel]:focus-visible { outline: 2px solid var(--ap-turq); outline-offset: -4px; }
@media (max-width: 767px) {
  .alma-carta__pdfs .alma-cta { width: 100%; }
  .alma-reservas__marco { min-height: 700px; }
}

/* ── el collage de arroces, en móvil ────────────────────────────────────
   Venía de tres rondas de parches con !important que se pisaban entre sí
   (1023 vs 1024 vs 768 vs 480) y a 390 px quedaba una tira de cromos de
   120 px. En móvil se cuenta como lo que es: cuatro fotos en rejilla. */
@media (max-width: 1024px) {
  #arroces .alma-composicion > div:last-child {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-height: 0 !important;
    padding: 4px 20px 0 !important;
  }
  section#arroces .alma-composicion > div:last-child > div:nth-child(n),
  section#arroces .alma-arroz-wide:nth-child(n) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    border-radius: var(--ap-radio);
    box-shadow: 0 14px 32px rgb(28 26 23 / 0.14);
  }
  section#arroces .alma-composicion > div:last-child > div:nth-child(n) > img,
  section#arroces .alma-arroz-wide:nth-child(n) img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  section#arroces .alma-composicion > div:last-child > div:nth-child(n) > div {
    position: absolute !important;
    inset: auto auto 10px 10px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    box-shadow: none;
  }
}

/* ── LA COCINA ───────────────────────────────────────────────────────────
   Fondo arena: el mismo papel de su carta impresa, que no aparecía todavía
   en la página. Y la misma tipografía de la carta: versales con tracking
   abierto, nota en gris pequeño, separación por aire y ni una caja. */
.alma-cocina {
  position: relative;
  padding: var(--ap-gap-seccion) var(--ap-lado);
  background: var(--ap-arena);
  color: var(--ap-tinta);
}
.alma-cocina__marco {
  display: grid;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.alma-cocina__retrato { position: relative; margin: 0; }
.alma-cocina__retrato img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--ap-radio);
}
.alma-cocina__retrato figcaption {
  margin-top: 14px;
  font-family: var(--ap-texto);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-humo);
}
.alma-cocina__etiqueta { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ap-turq); }
.alma-cocina__titulo { margin: 0 0 8px; max-width: 14ch; }
.alma-cocina__lista { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.alma-cocina__clave {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid rgb(28 26 23 / 0.13);
}
.alma-cocina__clave:first-child { border-top: 1px solid rgb(28 26 23 / 0.13); }
.alma-cocina__num {
  font-family: var(--ap-display);
  font-size: 30px;
  line-height: 1;
  color: var(--ap-turq);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.alma-cocina__nombre {
  margin: 0 0 8px;
  font-family: var(--ap-texto);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-tinta);
}
.alma-cocina__nota { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.75; color: var(--ap-humo); }

@media (min-width: 1024px) {
  .alma-cocina__marco { grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
  .alma-cocina__retrato img { aspect-ratio: 4 / 5; }
  .alma-cocina__num { font-size: 34px; }
}
@media (max-width: 1023px) {
  /* en móvil se lee antes el rótulo y el titular, y la foto entra después:
     así los dos textos en versales no chocan uno encima del otro */
  .alma-cocina__marco { gap: 26px; }
  .alma-cocina__cuerpo { display: contents; }
  .alma-cocina__etiqueta { order: 1; margin: 0; }
  .alma-cocina__titulo { order: 2; margin: 0; max-width: 20ch; }
  .alma-cocina__retrato { order: 3; }
  .alma-cocina__lista { order: 4; }
  .alma-cocina__retrato img { aspect-ratio: 4 / 3; }
  .alma-cocina__clave { grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; }
}

/* ── EL CONCEPTO: las tres columnas acaban en la misma línea ────────────── */
@media (min-width: 1024px) {
  #concepto .alma-concepto__banda {
    grid-template-columns: 1.06fr 0.88fr 1.06fr !important;
    gap: 20px !important;
    align-items: stretch;
    height: clamp(500px, 43vw, 660px);
  }
  #concepto .alma-concepto__banda > div { height: 100%; min-height: 0; }
  #concepto .alma-concepto__banda > div:nth-child(3) { display: flex; flex-direction: column; gap: 20px; }
  #concepto .alma-concepto__banda > div:nth-child(1) > div,
  #concepto .alma-concepto__banda > div:nth-child(3) > div {
    aspect-ratio: auto !important;
    height: 100%;
    min-height: 0;
    border-radius: var(--ap-radio);
  }
  #concepto .alma-concepto__banda > div:nth-child(3) > div { flex: 1 1 0; }
  #concepto .alma-concepto__banda > div:nth-child(2) { padding: 0 8px; }
  #concepto .alma-concepto__banda > div:nth-child(2) p {
    max-width: 30ch;
    font-size: 19px;
    line-height: 1.85;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #concepto .alma-concepto__banda { grid-template-columns: 1fr 1fr; }
  #concepto .alma-concepto__banda > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* ── contraste AA de los rótulos pequeños (axe, 18-08-2026) ──────────────
   Tres sitios se quedaban por debajo de 4,5:1 con texto de 11-13 px:
   los números de la cocina (2,61), la sección de cada ficha de la carta
   (3,19) y los rótulos y legales del pie (2,61). */
.alma-cocina__num { opacity: 1; color: #6a5731; }
#carta article p[class*="text-charcoal/50"] { color: rgb(28 26 23 / 0.66) !important; }
footer [class*="text-blanco/30"] { color: rgb(245 241 232 / 0.62) !important; }
footer [class*="text-blanco/30"]:hover { color: rgb(245 241 232 / 0.9) !important; }
/* la cinta baja de la galería es decoración, pero es texto: a 2,51 no pasa.
   Sube lo justo para leerse sin dejar de ser un susurro. */
#galeria .alma-cinta--baja .alma-cinta__tren span { color: rgb(28 26 23 / 0.62) !important; }

/* ── LA COCINA EN MÓVIL · misma información, un tercio menos de scroll ──── */
@media (max-width: 767px) {
  .alma-cocina { padding-block: 52px; }
  .alma-cocina__marco { gap: 18px; }
  .alma-cocina__titulo { font-size: clamp(27px, 8vw, 34px) !important; line-height: 1.08 !important; }
  .alma-cocina__retrato img { aspect-ratio: 16 / 10; min-height: 0; }
  .alma-cocina__retrato figcaption { margin-top: 10px; font-size: 10.5px; letter-spacing: 0.12em; }
  .alma-cocina__clave { grid-template-columns: 32px 1fr; gap: 10px; padding: 15px 0; }
  .alma-cocina__num { font-size: 19px; line-height: 1.25; }
  .alma-cocina__nombre { margin-bottom: 5px; font-size: 12px; letter-spacing: 0.1em; line-height: 1.35; }
  .alma-cocina__nota { font-size: 14px; line-height: 1.6; }
}

/* ── Botón de sonido de los vídeos ──────────────────────────────────────
   Solo aparece si el clip trae pista de audio: hoy ninguno la trae. */
.alma-clip-caja { position: relative; }
.alma-sonido {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  background: rgb(28 26 23 / 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.alma-sonido[data-alma-sonido-visible] { display: inline-flex; }
.alma-sonido:hover { background: rgb(28 26 23 / 0.72); transform: translateY(-1px); }
.alma-sonido:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.alma-sonido svg { width: 18px; height: 18px; }