/* ---------- Preflight (minimal reset, equivalent to Tailwind base) ---------- */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; }
body { margin: 0; line-height: inherit; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle; }
img,video { max-width: 100%; height: auto; }
button,input,select,textarea,optgroup { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button,select { text-transform: none; }
button { cursor: pointer; background-color: transparent; background-image: none; }
a { color: inherit; text-decoration: inherit; }
table { border-collapse: collapse; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }


@keyframes tw-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* base rules */
.-bottom-1{bottom:-0.25rem}
.-bottom-16{bottom:-4rem}
.-left-4{left:-1rem}
.-mx-1{margin-left:-0.25rem;margin-right:-0.25rem}
.-right-16{right:-4rem}
.-right-4{right:-1rem}
.-translate-y-1\/2{--tw-translate-y:-50%;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.absolute{position:absolute}
.animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.bg-\[\#0C1409\]{background-color:#0C1409}
.bg-\[\#1C2E17\]{background-color:#1C2E17}
.bg-\[\#1C2E17\]\/85{background-color:rgba(28,46,23,0.85)}
.bg-\[\#1C2E17\]\/90{background-color:rgba(28,46,23,0.9)}
.bg-\[\#2C3440\]{background-color:#2C3440}
.bg-\[\#2C3440\]\/90{background-color:rgba(44,52,64,0.9)}
.bg-\[\#6F8560\]{background-color:#6F8560}
.bg-\[\#D2EABE\]{background-color:#D2EABE}
.bg-\[\#F2AD6D\]{background-color:#F2AD6D}
.bg-\[\#F2AD6D\]\/20{background-color:rgba(242,173,109,0.2)}
.bg-\[\#F6F3EC\]{background-color:#F6F3EC}
.bg-\[\#FBF7EE\]{background-color:#FBF7EE}
.bg-black\/40{background-color:rgba(0,0,0,0.4)}
.bg-black\/90{background-color:rgba(0,0,0,0.9)}
.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.bg-stone-100{background-color:#f5f5f4}
.bg-stone-900{background-color:#1c1917}
.bg-white{background-color:#ffffff}
.bg-white\/10{background-color:rgba(255,255,255,0.1)}
.bg-white\/15{background-color:rgba(255,255,255,0.15)}
.bg-white\/5{background-color:rgba(255,255,255,0.05)}
.bg-white\/70{background-color:rgba(255,255,255,0.7)}
.block{display:block}
.border{border-width:1px}
.border-\[\#1C2E17\]\/10{border-color:rgba(28,46,23,0.1)}
.border-b{border-bottom-width:1px}
.border-black\/5{border-color:rgba(0,0,0,0.05)}
.border-gray-100{border-color:#f3f4f6}
.border-l{border-left-width:1px}
.border-stone-100{border-color:#f5f5f4}
.border-stone-200{border-color:#e7e5e4}
.border-stone-300{border-color:#d6d3d1}
.border-t{border-top-width:1px}
.border-white\/10{border-color:rgba(255,255,255,0.1)}
.border-white\/15{border-color:rgba(255,255,255,0.15)}
.border-white\/20{border-color:rgba(255,255,255,0.2)}
.border-white\/30{border-color:rgba(255,255,255,0.3)}
.bottom-4{bottom:1rem}
.cursor-zoom-in{cursor:zoom-in}
.drop-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.3\)\]{filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.duration-1000{transition-duration:1000ms}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}
.fill-current{fill:currentColor}
.fixed{position:fixed}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}
.focus\:border-\[\#F2AD6D\]:focus{border-color:#F2AD6D}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color,rgba(59,130,246,.5))}
.focus\:ring-\[\#F2AD6D\]\/30:focus{box-shadow:0 0 0 2px rgba(242,173,109,0.3)}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-display{font-family:'Epilogue','Poppins',sans-serif}
.font-extrabold{font-weight:800}
.font-maunga{font-family:'Kenao','Baloo 2','Epilogue',sans-serif}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.font-sans{font-family:'Poppins','Work Sans',sans-serif}
.font-semibold{font-weight:600}
.from-\[\#1C2E17\]{--tw-gradient-from:#1C2E17;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.from-\[\#1C2E17\]\/90{--tw-gradient-from:rgba(28,46,23,0.9);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.from-black\/80{--tw-gradient-from:rgba(0,0,0,0.8);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.gap-1\.5{gap:0.375rem}
.gap-10{gap:2.5rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-3{gap:0.75rem}
.gap-3\.5{gap:0.875rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-7{gap:1.75rem}
.gap-8{gap:2rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.h-1{height:0.25rem}
.h-1\.5{height:0.375rem}
.h-10{height:2.5rem}
.h-11{height:2.75rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-20{height:5rem}
.h-4{height:1rem}
.h-40{height:10rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-64{height:16rem}
.h-7{height:1.75rem}
.h-8{height:2rem}
.h-80{height:20rem}
.h-9{height:2.25rem}
.h-96{height:24rem}
.h-\[500px\]{height:500px}
.h-full{height:100%}
.hidden{display:none}
.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.hover\:bg-\[\#F2AD6D\]:hover{background-color:#F2AD6D}
.hover\:bg-\[\#ffbe7d\]:hover{background-color:#ffbe7d}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,0.1)}
.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,0.2)}
.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.hover\:shadow-2xl:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.hover\:shadow-\[0_12px_28px_rgba\(242\,173\,109\,0\.5\)\]:hover{box-shadow:0 12px 28px rgba(242,173,109,0.5)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.hover\:text-\[\#1C2E17\]:hover{color:#1C2E17}
.hover\:text-\[\#F2AD6D\]:hover{color:#F2AD6D}
.hover\:text-white:hover{color:#ffffff}
.inline{display:inline}
.inline-flex{display:inline-flex}
.inset-0{top:0;right:0;bottom:0;left:0}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.items-stretch{align-items:stretch}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.leading-\[1\.1\]{line-height:1.1}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.625}
.leading-snug{line-height:1.375}
.leading-tight{line-height:1.25}
.left-0{left:0}
.left-4{left:1rem}
.max-h-full{max-height:100%}
.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}
.max-w-container-max{max-width:80rem}
.max-w-container-narrow{max-width:64rem}
.max-w-full{max-width:100%}
.max-w-xl{max-width:36rem}
.mb-1\.5{margin-bottom:0.375rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mb-2{margin-bottom:0.5rem}
.mb-20{margin-bottom:5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.min-h-screen{min-height:100vh}
.mix-blend-multiply{mix-blend-mode:multiply}
.ml-1{margin-left:0.25rem}
.ml-auto{margin-left:auto}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-16{margin-top:4rem}
.mt-2{margin-top:0.5rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-3{margin-top:0.75rem;margin-bottom:0.75rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.my-auto{margin-top:auto;margin-bottom:auto}
.object-center{object-position:center}
.object-contain{object-fit:contain}
.object-cover{object-fit:cover}
.opacity-0{opacity:0.0}
.opacity-10{opacity:0.1}
.opacity-70{opacity:0.7}
.opacity-\[0\.03\]{opacity:0.03}
.opacity-\[0\.04\]{opacity:0.04}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.p-3\.5{padding:0.875rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pb-12{padding-bottom:3rem}
.pb-24{padding-bottom:6rem}
.pb-4{padding-bottom:1rem}
.pb-6{padding-bottom:1.5rem}
.pl-1{padding-left:0.25rem}
.pointer-events-none{pointer-events:none}
.pt-10{padding-top:2.5rem}
.pt-16{padding-top:4rem}
.pt-2{padding-top:0.5rem}
.pt-28{padding-top:7rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.25rem}
.pt-8{padding-top:2rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-gutter-mobile{padding-left:1.25rem;padding-right:1.25rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.relative{position:relative}
.right-0{right:0}
.right-4{right:1rem}
.right-5{right:1.25rem}
.right-\[-100px\]{right:-100px}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-\[2rem\]{border-radius:2rem}
.rounded-full{border-radius:9999px}
.rounded-xl{border-radius:0.75rem}
.scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.scroll-smooth{scroll-behavior:smooth}
.select-none{user-select:none}
.selection\:bg-\[\#F2AD6D\]::selection{background-color:#F2AD6D}
.selection\:text-\[\#1C2E17\]::selection{color:#1C2E17}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-\[0_12px_28px_rgba\(242\,173\,109\,0\.45\)\]{box-shadow:0 12px 28px rgba(242,173,109,0.45)}
.shadow-\[0_8px_20px_rgba\(242\,173\,109\,0\.35\)\]{box-shadow:0 8px 20px rgba(242,173,109,0.35)}
.shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.2\)\]{box-shadow:0 8px 30px rgba(0,0,0,0.2)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.snap-center{scroll-snap-align:center}
.snap-mandatory{scroll-snap-type:x mandatory}
.snap-x{scroll-snap-type:x mandatory}
.space-y-2 > * + *{margin-top:0.5rem}
.space-y-2\.5 > * + *{margin-top:0.625rem}
.space-y-3 > * + *{margin-top:0.75rem}
.space-y-4 > * + *{margin-top:1rem}
.space-y-6 > * + *{margin-top:1.5rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-\[\#1C1C18\]{color:#1C1C18}
.text-\[\#1C2E17\]{color:#1C2E17}
.text-\[\#38502D\]{color:#38502D}
.text-\[\#4A4D45\]{color:#4A4D45}
.text-\[\#4D5C43\]{color:#4D5C43}
.text-\[\#6F8560\]{color:#6F8560}
.text-\[\#F2AD6D\]{color:#F2AD6D}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[14px\]{font-size:14px}
.text-\[16px\]{font-size:16px}
.text-\[18px\]{font-size:18px}
.text-\[20px\]{font-size:20px}
.text-\[22px\]{font-size:22px}
.text-\[30px\]{font-size:30px}
.text-\[9px\]{font-size:9px}
.text-base{font-size:1rem;line-height:1.5rem}
.text-center{text-align:center}
.text-on-surface{color:#1C1C18}
.text-red-500{color:#ef4444}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-stone-500{color:#78716c}
.text-white{color:#ffffff}
.text-white\/50{color:rgba(255,255,255,0.5)}
.text-white\/70{color:rgba(255,255,255,0.7)}
.text-white\/80{color:rgba(255,255,255,0.8)}
.text-white\/90{color:rgba(255,255,255,0.9)}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.to-black\/50{--tw-gradient-to:rgba(0,0,0,0.5)}
.to-transparent{--tw-gradient-to:transparent}
.top-0{top:0}
.top-1\/2{top:50%}
.top-10{top:2.5rem}
.top-4{top:1rem}
.top-5{top:1.25rem}
.tracking-\[0\.25em\]{letter-spacing:0.25em}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.transform{transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.uppercase{text-transform:uppercase}
.via-\[\#1C2E17\]\/60{--tw-gradient-stops:var(--tw-gradient-from),rgba(28,46,23,0.6),var(--tw-gradient-to,rgba(0,0,0,0))}
.via-black\/10{--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,0.1),var(--tw-gradient-to,rgba(0,0,0,0))}
.via-black\/30{--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,0.3),var(--tw-gradient-to,rgba(0,0,0,0))}
.w-1\.5{width:0.375rem}
.w-10{width:2.5rem}
.w-11{width:2.75rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-7{width:1.75rem}
.w-8{width:2rem}
.w-80{width:20rem}
.w-9{width:2.25rem}
.w-96{width:24rem}
.w-\[500px\]{width:500px}
.w-carousel-card{width:calc(100% - 24px)}
.w-fit{width:fit-content}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.z-0{z-index:0}
.z-10{z-index:10}
.z-50{z-index:50}
.z-\[100\]{z-index:100}
.z-\[1\]{z-index:1}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
/* IMPORTANTE: estos tres bloques @media deben ir en orden mobile-first (sm, luego md,
   luego lg). Con especificidad igual, CSS resuelve empates por orden de aparición en el
   archivo, así que si "lg" apareciera antes que "sm"/"md", estos últimos ganarían por
   error en pantallas grandes (donde las tres condiciones min-width son verdaderas a la
   vez), dejando inservibles las reglas lg: en desktop. */
@media (min-width:640px) {
.sm\:flex{display:flex}
.sm\:flex-row{flex-direction:row}
.sm\:h-52{height:13rem}
.sm\:items-center{align-items:center}
.sm\:p-10{padding:2.5rem}
.sm\:p-8{padding:2rem}
.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.sm\:text-5xl{font-size:3rem;line-height:1}
.sm\:text-base{font-size:1rem;line-height:1.5rem}
.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
.sm\:w-\[46\%\]{width:46%}
}
@media (min-width:768px) {
.md\:flex-row{flex-direction:row}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:items-end{align-items:flex-end}
}
@media (min-width:1024px) {
.lg\:col-span-6{grid-column:span 6 / span 6}
.lg\:flex{display:flex}
.lg\:gap-8{gap:2rem}
.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.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\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:h-24{height:6rem}
.lg\:h-64{height:16rem}
.lg\:mt-20{margin-top:5rem}
.lg\:p-10{padding:2.5rem}
.lg\:pt-32{padding-top:8rem}
.lg\:px-gutter-desktop{padding-left:2rem;padding-right:2rem}
.lg\:py-16{padding-top:4rem;padding-bottom:4rem}
.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.lg\:text-5xl{font-size:3rem;line-height:1}
.lg\:text-6xl{font-size:3.75rem;line-height:1}
.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}
.lg\:w-\[31\%\]{width:31%}
}

/* ---------- Animaciones de entrada (hero + scroll reveal) ---------- */
/* Usa @keyframes (no `transition`) para no interferir con las transiciones de
   hover ya existentes (transition-all, duration-300, etc.) en las mismas tarjetas.
   Importante: una animación con fill-mode "forwards" sigue reteniendo la propiedad
   transform incluso terminada, por encima de :hover (independiente de especificidad).
   Por eso animations.js quita las clases .reveal/.is-visible en "animationend":
   así el hover (-translate-y-1, scale, etc.) vuelve a controlar transform con normalidad. */
@keyframes maunga-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero: entrada suave y escalonada al cargar la página */
.hero-anim {
  opacity: 0;
  animation: maunga-fade-up 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-anim-1 { animation-delay: 0.05s; }
.hero-anim-2 { animation-delay: 0.2s; }
.hero-anim-3 { animation-delay: 0.35s; }
.hero-anim-4 { animation-delay: 0.5s; }
.hero-anim-5 { animation-delay: 0.65s; }

/* Scroll reveal: fade-in + translateY sutil al entrar al viewport (una sola vez) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.is-visible {
  animation: maunga-fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim {
    animation: none;
    opacity: 1;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .reveal.is-visible {
    animation: none;
  }
}

/* ---------- Ajustes responsive adicionales ---------- */

/* Evita que el header fijo (h-20 = 80px) tape el inicio de cada sección
   al navegar por ancla desde el menú (#diferencia, #trabajos, etc.). */
#diferencia, #trabajos, #servicios, #mision-vision, #contacto {
  scroll-margin-top: 96px;
}

/* Badge de origen del hero: en pantallas muy angostas (<400px) el segmento
   "• Estándar Puro" no cabe junto a "Nueva Zelanda → Chile" y rompe la forma
   de la píldora al envolver texto. Se oculta ese segmento secundario y se
   conserva solo la información principal en una sola línea. */
@media (max-width: 400px) {
  .hero-badge-extra {
    display: none;
  }
}

/* Puntos de paginación del carrusel de "Trabajos terminados".
   Cada botón tiene un área táctil de 24x24px aunque el punto visible sea chico. */
.galeria-dot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  flex-shrink: 0;
}
.galeria-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color 250ms ease, width 250ms ease;
}
.galeria-dot-btn:hover .galeria-dot {
  background-color: rgba(255, 255, 255, 0.6);
}
.galeria-dot-btn.is-active .galeria-dot {
  background-color: #F2AD6D;
  width: 20px;
}