/* ===== Tipografías autoalojadas (antes: Google Fonts). Un archivo por familia y estilo; son fuentes variables y cubren los pesos 400 a 600. ===== */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/cormorant-garamond-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/cormorant-garamond.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/montserrat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:"Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.inset-y-0{top:0px;bottom:0px}.-left-16{left:-4rem}.-right-32{right:-8rem}.-top-24{top:-6rem}.-top-32{top:-8rem}.bottom-0{bottom:0px}.bottom-16{bottom:4rem}.left-0{left:0px}.left-1\/2{left:50%}.right-0{right:0px}.top-0{top:0px}.bottom-6{bottom:1.5rem}.right-4{right:1rem}.right-6{right:1.5rem}.top-4{top:1rem}.z-10{z-index:10}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[999\]{z-index:999}.z-40{z-index:40}.order-1{order:1}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.-mr-3{margin-right:-0.75rem}.mb-0{margin-bottom:0px}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.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-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:0.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.ml-2{margin-left:0.5rem}.mt-2{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-\[350px\]{height:350px}.h-\[420px\]{height:420px}.h-\[500px\]{height:500px}.h-full{height:100%}.max-h-\[85vh\]{max-height:85vh}.min-h-0{min-height:0px}.min-h-\[96px\]{min-height:96px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2{width:0.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-80{width:20rem}.w-\[350px\]{width:350px}.w-\[500px\]{width:500px}.w-\[700px\]{width:700px}.w-auto{width:auto}.w-full{width:100%}.w-16{width:4rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[85vw\]{max-width:85vw}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-navy-50\/15 > :not([hidden]) ~ :not([hidden]){border-color:rgb(26 45 74 / 0.15)}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.break-all{word-break:break-all}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.rounded-r-xl{border-top-right-radius:0.75rem;border-bottom-right-radius:0.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-action-400\/30{border-color:rgb(34 211 238 / 0.3)}.border-action-500\/30{border-color:rgb(6 182 212 / 0.3)}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))}.border-blue-400\/25{border-color:rgb(96 165 250 / 0.25)}.border-blue-400\/30{border-color:rgb(96 165 250 / 0.3)}.border-blue-400\/40{border-color:rgb(96 165 250 / 0.4)}.border-navy-50\/20{border-color:rgb(26 45 74 / 0.2)}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.bg-\[\#050C15\]{--tw-bg-opacity:1;background-color:rgb(5 12 21 / var(--tw-bg-opacity, 1))}.bg-action-400{--tw-bg-opacity:1;background-color:rgb(34 211 238 / var(--tw-bg-opacity, 1))}.bg-action-500\/15{background-color:rgb(6 182 212 / 0.15)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1)}.bg-blue-600\/20{background-color:rgb(37 99 235 / 0.2)}.bg-green-500\/20{background-color:rgb(34 197 94 / 0.2)}.bg-navy-400{--tw-bg-opacity:1;background-color:rgb(11 26 46 / var(--tw-bg-opacity, 1))}.bg-navy-400\/20{background-color:rgb(11 26 46 / 0.2)}.bg-navy-400\/25{background-color:rgb(11 26 46 / 0.25)}.bg-navy-400\/30{background-color:rgb(11 26 46 / 0.3)}.bg-navy-400\/40{background-color:rgb(11 26 46 / 0.4)}.bg-navy-50\/15{background-color:rgb(26 45 74 / 0.15)}.bg-navy-500{--tw-bg-opacity:1;background-color:rgb(9 21 37 / var(--tw-bg-opacity, 1))}.bg-navy-600{--tw-bg-opacity:1;background-color:rgb(7 16 29 / var(--tw-bg-opacity, 1))}.bg-navy-600\/50{background-color:rgb(7 16 29 / 0.5)}.bg-navy-600\/60{background-color:rgb(7 16 29 / 0.6)}.bg-navy-700{--tw-bg-opacity:1;background-color:rgb(5 12 21 / var(--tw-bg-opacity, 1))}.bg-pink-500\/20{background-color:rgb(236 72 153 / 0.2)}.bg-transparent{background-color:transparent}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-black\/80{background-color:rgb(0 0 0 / 0.8)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-navy-600{--tw-gradient-from:#07101D var(--tw-gradient-from-position);--tw-gradient-to:rgb(7 16 29 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-navy-400{--tw-gradient-to:#0B1A2E var(--tw-gradient-to-position)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-4{padding:1rem}.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-8{padding-left:2rem;padding-right:2rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pt-1{padding-top:0.25rem}.pt-2{padding-top:0.5rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-cormorant{font-family:"Cormorant Garamond", serif}.font-montserrat{font-family:"Montserrat", sans-serif}.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-\[10px\]{font-size:10px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\[\.18em\]{letter-spacing:.18em}.tracking-\[\.25em\]{letter-spacing:.25em}.tracking-\[\.35em\]{letter-spacing:.35em}.tracking-wide{letter-spacing:0.025em}.tracking-wider{letter-spacing:0.05em}.text-action-400{--tw-text-opacity:1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity:1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/70{color:rgb(255 255 255 / 0.7)}.text-white\/75{color:rgb(255 255 255 / 0.75)}.text-white\/80{color:rgb(255 255 255 / 0.8)}.text-white\/85{color:rgb(255 255 255 / 0.85)}.text-white\/90{color:rgb(255 255 255 / 0.9)}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.opacity-50{opacity:0.5}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-action-700\/20{--tw-shadow-color:rgb(14 116 144 / 0.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-blue-500\/10{--tw-shadow-color:rgb(59 130 246 / 0.1);--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:gap-3:hover{gap:0.75rem}.hover\:border-blue-400\/30:hover{border-color:rgb(96 165 250 / 0.3)}.hover\:bg-action-500:hover{--tw-bg-opacity:1;background-color:rgb(6 182 212 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.hover\:bg-pink-500:hover{--tw-bg-opacity:1;background-color:rgb(236 72 153 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1)}.hover\text-action-300:hover{--tw-text-opacity:1;color:rgb(103 232 249 / var(--tw-text-opacity, 1))}.hover\:text-action-400:hover{--tw-text-opacity:1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width: 640px){.sm\:order-none{order:0}.sm\:mb-0{margin-bottom:0px}.sm\:mb-10{margin-bottom:2.5rem}.sm\:mb-6{margin-bottom:1.5rem}.sm\:mb-8{margin-bottom:2rem}.sm\:mt-0{margin-top:0px}.sm\:flex{display:flex}.sm\:h-12{height:3rem}.sm\:w-32{width:8rem}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:gap-6{gap:1.5rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.sm\:py-32{padding-top:8rem;padding-bottom:8rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.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-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-xs{font-size:0.75rem;line-height:1rem}.sm\:text-white\/70{color:rgb(255 255 255 / 0.7)}.sm\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}}@media (min-width: 768px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:mt-0{margin-top:0px}.md\:flex{display:flex}.md\:h-40{height:10rem}.md\:w-40{width:10rem}.md\:max-w-3xl{max-width:48rem}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:gap-6{gap:1.5rem}.md\:p-10{padding:2.5rem}.md\:p-9{padding:2.25rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-40{padding-top:10rem;padding-bottom:10rem}.md\:text-left{text-align:left}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-24{height:6rem}.lg\:max-w-none{max-width:none}.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\:gap-12{gap:3rem}.lg\:gap-16{gap:4rem}.lg\:gap-8{gap:2rem}.lg\:p-10{padding:2.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-7xl{font-size:4.5rem;line-height:1}}

/* ══════════════════════════════════════════════════════════════
   Espaciado para el encabezado de las páginas internas nuevas: el
   nav es "fixed" y necesita que el contenido de abajo le deje aire
   arriba. Estas reglas faltaban en el CSS compilado (el sitio
   original nunca usó pt-/pb- sueltos a este tamaño, solo py-
   combinados), así que el texto quedaba tapado por el nav.
   ══════════════════════════════════════════════════════════════ */
.pt-40{padding-top:10rem}
.pb-16{padding-bottom:4rem}
.pb-20{padding-bottom:5rem}
.pb-24{padding-bottom:6rem}
@media (min-width:768px){
  .md\:pt-48{padding-top:12rem}
  .md\:pb-20{padding-bottom:5rem}
  .md\:pb-32{padding-bottom:8rem}
}

/* Utilidades que tampoco venían en el CSS compilado y que usan las páginas
   nuevas. Sin "flex-wrap" los botones de "Otras materias" no bajaban de
   renglón y empujaban la página a lo ancho en celular. */
.flex-wrap{flex-wrap:wrap}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.text-white\/60{color:rgb(255 255 255 / 0.6)}
.bg-blue-500\/15{background-color:rgb(59 130 246 / 0.15)}
.bg-green-500\/15{background-color:rgb(34 197 94 / 0.15)}
.tracking-\[\.1em\]{letter-spacing:.1em}

/* En el CSS original esta regla quedó escrita como ".hover\text-action-300"
   (le faltaba el escape de los dos puntos), así que el color al pasar el
   cursor sobre el teléfono y el correo del pie nunca se aplicó. */
.hover\:text-action-300:hover{--tw-text-opacity:1;color:rgb(103 232 249 / var(--tw-text-opacity, 1))}

/* ══════════════════════════════════════════════════════════════
   BLOQUE CONSOLIDADO — antes vivía como <style> inline en index.html,
   repetido en cada página. Se movió aquí, sin cambiar una sola regla,
   para que las páginas nuevas del sitio multipágina lo compartan desde
   un solo archivo en vez de duplicarlo.
   ══════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px; scroll-behavior: smooth;}
body{
  font-family: "Montserrat", "Segoe UI", sans-serif;
  background-color: #050C15;
  color:#f8fafc;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#050C15}
::-webkit-scrollbar-thumb{background:#1a2d4a;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#06B6D4}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.4)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes heroBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes decoPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.9}}

.reveal{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.12s}
.reveal-d2{transition-delay:.24s}
.reveal-d3{transition-delay:.36s}
.reveal-d4{transition-delay:.48s}

.hero-bg{
  background:linear-gradient(160deg,#050C15 0%,#0B1A2E 35%,#1a2d4a 65%,#050C15 100%);
  background-size:300% 300%;
  animation:heroBg 25s ease infinite
}
.accent-line{height:2px;background:linear-gradient(90deg,transparent,#06B6D4,transparent); width: 100px; margin: 1.5rem auto;}
.reveal.visible .accent-line{animation:lineGrowX .9s cubic-bezier(.22,1,.36,1)}
@keyframes lineGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.service-card{
  background: rgba(26,45,74, 0.3);
  border:1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(5px);
  transition:all .4s cubic-bezier(.22,1,.36,1)
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:#06B6D4;
  box-shadow:0 20px 50px -12px rgba(6, 182, 212, 0.25)
}

.value-card{
  border-left:3px solid #1a2d4a;
  background: rgba(255,255,255,0.02);
  transition:all .3s ease
}
.value-card:hover{
  border-left-color:#06B6D4;
  background: rgba(6, 182, 212, 0.06)
}

.cta-action{
  background:linear-gradient(110deg,#0891B2 0%,#67E8F9 45%,#22D3EE 55%,#0E7490 100%);
  background-size:200% 100%;
  color:#050C15;
  animation:shimmer 6s ease-in-out infinite;
  transition:transform .3s ease, box-shadow .3s ease, animation-duration .3s ease;
  border: none;
}
.cta-action:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(6, 182, 212, 0.45);
  color:#050C15;
  animation-duration:1.2s;
}
.cta-outline{
  border:2px solid rgba(59, 130, 246, 0.5);
  color: #60A5FA;
  transition:all .3s ease
}
.cta-outline:hover{
  border-color:#3B82F6;
  background:rgba(59, 130, 246, 0.1);
  color: white;
}

.wa-float{animation:waPulse 2s infinite}

.nav-scrolled{background:rgba(5,12,21,.95)!important;backdrop-filter:blur(12px);border-bottom: 1px solid rgba(6, 182, 212, 0.15)}
.mobile-menu{transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.mobile-menu.open{transform:translateX(0)}

.modal-overlay{opacity:0;pointer-events:none;transition:opacity .3s ease}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal-content{transform:translateY(20px) scale(.97);transition:all .35s cubic-bezier(.22,1,.36,1)}
.modal-overlay.active .modal-content{transform:translateY(0) scale(1)}

.deco-ring{border:1px solid rgba(6, 182, 212, 0.14);border-radius:50%;position:absolute;pointer-events:none;animation:decoPulse 9s ease-in-out infinite}
.deco-glow{animation:decoPulse 8s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .deco-ring, .deco-glow{animation:none}
}
*:focus-visible{outline:2px solid #3B82F6;outline-offset:3px;border-radius:4px}
@media print{.no-print{display:none!important}body{background:#fff;color:#000}}

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS — correcciones y secciones nuevas
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .wa-float{animation:none !important}
}

@media (max-width:767px){
  body{padding-bottom:5.5rem}
  .wa-float{bottom:1rem;right:1rem;width:3.5rem;height:3.5rem}
  .wa-float svg{width:26px;height:26px}
}

/* En escritorio y tablet el botón flotante de WhatsApp se queda anclado a la
   esquina inferior derecha y, al llegar al final del scroll, caía justo encima
   de los iconos de redes sociales del pie. Se le da holgura al pie para que no
   se crucen. En celular eso ya lo resuelve el padding-bottom del body. */
@media (min-width:768px){
  footer.py-16{padding-bottom:8rem}
}

@media (max-width:480px){
  h1,h2{letter-spacing:-.01em}
  .font-cormorant{font-size:1.15em;line-height:1.35}
}

@media (max-width:767px){
  a.inline-flex{min-height:44px}
  .faq-item summary{min-height:44px}
  /* 12px arriba y abajo dejan el enlace en 44 px de alto, que es el mínimo
     recomendado para tocar con el dedo sin fallar. Antes eran 6px (32 px). */
  footer a.block{padding-top:12px;padding-bottom:12px}
  h1,h2,h3,h4,p,li{overflow-wrap:break-word}

  /* Botones chicos de navegación entre materias y sedes: mismo mínimo táctil,
     sin alterar el botón grande del hero (que es text-lg, no text-sm). */
  a.cta-outline.text-sm{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

.faq-item{border-bottom:1px solid rgba(26,45,74,.55)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;color:#fff;font-weight:600;font-size:1.05rem;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:#22D3EE}
.faq-item summary::after{content:"";position:absolute;right:10px;top:29px;width:10px;height:10px;border-right:2px solid #06B6D4;border-bottom:2px solid #06B6D4;transform:rotate(45deg);transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(-135deg);top:33px}
.faq-item .faq-a{padding:0 8% 24px 0;color:rgba(255,255,255,.78);line-height:1.75}
@media (max-width:640px){
  .faq-item summary{font-size:1rem;padding:18px 40px 18px 0}
  .faq-item .faq-a{padding-right:0}
}

@media (max-width:767px){
  #cookieAviso .cookie-texto{font-size:12.5px;line-height:1.45}
  #cookieAviso h4{font-size:.95rem;margin-bottom:.3rem}
  #cookieAviso > div{padding:14px 16px;margin-left:.5rem;margin-right:.5rem;margin-bottom:.5rem}
  #cookieRechazar,#cookieAceptar{flex:1 1 0;padding-top:.65rem;padding-bottom:.65rem;font-size:13px}
}

@media (max-width:767px) and (max-height:720px){
  #inicio{align-items:flex-start}
  #inicio > div{padding-top:5rem;padding-bottom:4rem}
  #inicio h1{font-size:1.6rem}
  #inicio .font-cormorant{font-size:1.25rem !important;line-height:1.3}
  #inicio p.text-lg{font-size:1rem;line-height:1.45}
}

@media (min-width:1024px){
  #cookieAviso > div{
    margin-left:auto;
    margin-right:1.5rem;
    margin-bottom:6.5rem;
    max-width:30rem;
  }
  #cookieAviso > div > div{display:block}
  #cookieAviso > div > div > div:last-child{margin-top:1rem}
}

@media (min-width:768px) and (max-height:820px){
  #inicio{align-items:flex-start}
  #inicio > div{padding-top:8rem;padding-bottom:5rem}
}

/* ══════════════════════════════════════════════════════════════════════
   MARCOS Y MOVIMIENTO UNIFICADOS

   El sitio ya tenía el criterio correcto en .service-card (Servicios):
   marco AZUL cuando la tarjeta está quieta, y al pasar el cursor se
   eleva un poco, el marco se enciende en TURQUESA y aparece una sombra.
   Azul estructura, turquesa acción.

   Los otros dos tipos de recuadro del sitio no lo seguían: descansaban
   en azul marino sobre fondo azul marino (marco invisible) y no se
   movían. Aquí se les aplica el mismo comportamiento, con los mismos
   valores exactos de .service-card. No hay colores nuevos.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Grupo 1: tarjetas de Empresas, Capacitación y Nosotros -------- */

.hover\:border-blue-400\/30{
  transition:all .4s cubic-bezier(.22,1,.36,1)
}

.border-navy-50\/20{border-color:rgba(59,130,246,.2)}

.hover\:border-blue-400\/30:hover{
  border-color:#06B6D4;
  transform:translateY(-8px);
  box-shadow:0 20px 50px -12px rgba(6,182,212,.25)
}

/* ---- Grupo 2: recuadros de Contacto, sedes y páginas de servicio ---
   Su encendido turquesa en la barra lateral ya existía; se le agrega
   el reposo visible y el mismo movimiento que los demás. */

.value-card{
  border-left-color:rgba(59,130,246,.45);
  transition:all .4s cubic-bezier(.22,1,.36,1)
}

.value-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px -12px rgba(6,182,212,.25)
}

/* ---- Fotos de los titulares en /equipo ----------------------------
   Aro azul delgado, del mismo tono que el marco de su tarjeta. Si la
   tarjeta se enciende, el aro la acompaña. */

.foto-titular{
  border:2px solid rgba(96,165,250,.55);
  box-shadow:0 0 0 4px rgba(59,130,246,.08), 0 8px 22px -10px rgba(59,130,246,.45);
  transition:border-color .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1)
}

.service-card:hover .foto-titular{
  border-color:#06B6D4;
  box-shadow:0 0 0 4px rgba(6,182,212,.10), 0 8px 22px -10px rgba(6,182,212,.5)
}

/* Enlaces del menú superior: Servicios, Equipo, Preguntas y Contacto.
   Antes solo cambiaban de tono, tan levemente que junto al botón turquesa
   parecían apagados. Ahora siguen la misma regla que el resto del sitio:
   claros en reposo, y al pasar el cursor se encienden en turquesa, suben
   un poco y les crece una línea por debajo. Misma curva y mismo tiempo
   que las tarjetas, para que todo el sitio se mueva igual. */
.nav-enlace{
  position:relative;
  display:inline-block;
  color:rgba(255,255,255,.88);
  transition:color .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1)
}

.nav-enlace::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#06B6D4,#22D3EE);
  transform:scaleX(0);
  transition:transform .35s cubic-bezier(.22,1,.36,1)
}

.nav-enlace:hover{
  color:#22D3EE;
  transform:translateY(-2px)
}

.nav-enlace:hover::after{transform:scaleX(1)}

/* Quien navega con el teclado ve exactamente lo mismo que con el ratón. */
.nav-enlace:focus-visible{
  color:#22D3EE;
  outline:2px solid rgba(34,211,238,.55);
  outline-offset:7px;
  border-radius:3px
}

.nav-enlace:focus-visible::after{transform:scaleX(1)}

/* Menú de celular. En un teléfono no existe el "pasar el cursor", así que
   copiar el efecto del menú de escritorio no serviría de nada. Se le da un
   tratamiento propio, pensado para el dedo:

   1. Al abrir el menú, los seis enlaces entran escalonados de derecha a
      izquierda. Eso convierte una lista estática en algo que se siente vivo.
   2. Al tocar uno, se enciende en turquesa, se recorre un poco y le aparece
      una barra turquesa a la izquierda. Esa barra es el mismo recurso que
      usan las tarjetas de Dirección y Horario, para que el sitio hable un
      solo idioma.
   3. La respuesta al toque es inmediata: el dedo tapa la pantalla, y sin
      esa señal la persona no sabe si su toque registró. */

.mobile-link{
  position:relative;
  transition:color .3s cubic-bezier(.22,1,.36,1),
             padding-left .3s cubic-bezier(.22,1,.36,1)
}

.mobile-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:0;
  border-radius:2px;
  background:linear-gradient(180deg,#06B6D4,#22D3EE);
  transform:translateY(-50%);
  transition:height .3s cubic-bezier(.22,1,.36,1)
}

.mobile-link:hover,
.mobile-link:active,
.mobile-link:focus-visible{
  color:#22D3EE;
  padding-left:16px
}

.mobile-link:hover::before,
.mobile-link:active::before,
.mobile-link:focus-visible::before{height:58%}

.mobile-link:focus-visible{
  outline:2px solid rgba(34,211,238,.5);
  outline-offset:4px;
  border-radius:4px
}

/* Entrada escalonada al abrir el menú. Si por alguna razón el menú no
   llegara a abrirse, los enlaces se ven normales: la animación solo
   existe cuando el menú está abierto, nunca esconde nada. */
.mobile-menu.open .mobile-link{
  animation:entraEnlace .45s cubic-bezier(.22,1,.36,1) both
}

.mobile-menu.open .mobile-link:nth-child(1){animation-delay:.05s}
.mobile-menu.open .mobile-link:nth-child(2){animation-delay:.10s}
.mobile-menu.open .mobile-link:nth-child(3){animation-delay:.15s}
.mobile-menu.open .mobile-link:nth-child(4){animation-delay:.20s}
.mobile-menu.open .mobile-link:nth-child(5){animation-delay:.25s}
.mobile-menu.open .mobile-link:nth-child(6){animation-delay:.30s}
.mobile-menu.open .mobile-link:nth-child(7){animation-delay:.35s}
.mobile-menu.open .mobile-link:nth-child(8){animation-delay:.40s}
.mobile-menu.open .mobile-link:nth-child(9){animation-delay:.45s}
.mobile-menu.open .mobile-link:nth-child(10){animation-delay:.50s}

@keyframes entraEnlace{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:none}
}

/* Utilidades xl: (1280px). El build compilado de Tailwind no las incluía porque
   ninguna clase del sitio las usaba. Se añaden para poder subir a 1280 el punto
   de quiebre del encabezado: a 1024 la barra con siete enlaces se encimaba con
   el logotipo y partía en tres líneas el botón de asesoría. No alteran ningún
   estilo existente: son dos clases nuevas que antes no se aplicaban a nada. */
@media (min-width:1280px){.xl\:flex{display:flex}.xl\:hidden{display:none}}

/* ===== 2026-09-17 · Tarea 1: conversión y UX móvil ===== */
/* Mientras el aviso de cookies esté visible, el botón flotante de WhatsApp sube para no quedar tapado. */
#cookieAviso:not(.hidden) ~ .wa-float{bottom:calc(var(--alto-cookies,220px) + 1rem)}
/* Aviso de cookies más compacto en pantallas chicas: menos relleno, botones a la misma altura. */
@media (max-width:767px){
  #cookieAviso > div{padding:1rem 1.125rem}
  #cookieAviso h4{margin-bottom:.25rem;font-size:.95rem}
  #cookieAviso .cookie-texto{font-size:.8rem;line-height:1.35}
  #cookieAviso .flex.gap-3{margin-top:.75rem}
  #cookieAviso button{padding-top:.75rem;padding-bottom:.75rem;min-height:44px}
}
/* Objetivos táctiles de al menos 44 px (WCAG 2.5.8): iconos de redes y enlaces de texto del pie y del menú. */
footer a.w-10, #mobileMenu a.w-10{width:2.75rem;height:2.75rem}
footer .space-y-2 > a, footer .space-y-2 > button, footer .space-y-2\.5 > a{padding-top:.75rem;padding-bottom:.75rem}
#menuCerrar{padding:.625rem;margin:-.625rem}

/* ══════════════════════════════════════════════════════════════════════
   PROPUESTA 2026-09-17 · espaciado móvil y movimiento
   ══════════════════════════════════════════════════════════════════════ */
/* 1. Portada y pie en celular: mismo ritmo de espacio que el resto de secciones */
@media (max-width:767px){
  #inicio{min-height:auto;align-items:flex-start}
  #inicio > div{padding-top:7rem;padding-bottom:3.5rem}
  body{padding-bottom:4.75rem}
  footer.py-16{padding-bottom:1.25rem}
}
/* 2. Transición suave entre páginas (View Transitions; los navegadores que no la tienen cambian de página como siempre) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease-in forwards}
::view-transition-new(root){animation:vt-in .32s cubic-bezier(.22,1,.36,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
/* 3. Hilo de lectura: línea cian de 2 px en el borde superior que avanza con el scroll (sin JavaScript) */
.hilo-lectura{position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,#0891B2,#67E8F9);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .hilo-lectura{animation:hilo linear both;animation-timeline:scroll(root)}
}
@keyframes hilo{to{transform:scaleX(1)}}
/* 4. Aparición de secciones: enfoque progresivo (desenfoque → nítido) en lugar de solo subir; recorrido más corto */
.reveal{opacity:0;transform:translateY(14px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease}
.reveal.visible{filter:blur(0)}   /* la opacidad y la posición las fija la regla original de arriba, para no anular el salto de las tarjetas al pasar el cursor */
/* Las etiquetas pequeñas en mayúsculas "se asientan": entran con más espaciado y se recogen */
.reveal > span.uppercase{letter-spacing:.45em;transition:letter-spacing 1.1s cubic-bezier(.22,1,.36,1)}
.reveal.visible > span.uppercase{letter-spacing:.25em}
/* Tarjetas de una misma rejilla entran en secuencia */
.grid > .reveal:nth-child(2){transition-delay:.1s}
.grid > .reveal:nth-child(3){transition-delay:.2s}
.grid > .reveal:nth-child(4){transition-delay:.3s}
/* 5. Portada: el nombre de la firma se descubre de izquierda a derecha, como un trazo; el resto entra más rápido */
#inicio h1{opacity:1 !important;clip-path:inset(0 100% 0 0);animation:trazo 1s cubic-bezier(.22,1,.36,1) .15s forwards !important}
@keyframes trazo{to{clip-path:inset(0 -2% 0 0)}}
#inicio [style*="fadeUp"]:not(h1){animation-duration:.55s !important}
/* 6. Botón principal: brillo continuo (como siempre), más rápido al pasar el cursor o al tocar */
.cta-action{animation:shimmer 6s ease-in-out infinite}
.cta-action:hover,.cta-action:focus-visible{animation:shimmer 1.2s ease-in-out infinite}
.cta-action:active{transform:scale(.985)}
/* 7. Fotografía de "Quiénes somos": desplazamiento sutil con el scroll (profundidad), solo en navegadores que lo soportan */
@supports (animation-timeline: view()){
  #quienes-somos img{scale:1.12;animation:profundidad linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes profundidad{from{translate:0 -5%}to{translate:0 5%}}
}
/* 8. Barra de navegación: el logo se recoge ligeramente al hacer scroll */
#navbar img{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav-scrolled img{transform:scale(.86)}
/* 9. Quien pidió menos movimiento en su sistema, no recibe ninguno */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* 9. Si el sistema pide menos movimiento (en Windows: Accesibilidad > Efectos visuales >
   Efectos de animación desactivado), se conservan las transiciones suaves de opacidad,
   el brillo del botón y los efectos al pasar el cursor. Solo se apaga el movimiento
   amplio: el desplazamiento de la fotografía, el trazo del nombre y el hilo de lectura. */
@media (prefers-reduced-motion: reduce){
  .reveal:not(.visible){transform:none;filter:none}
  .reveal.visible{filter:none}
  #inicio h1{clip-path:none;animation:none !important}
  #inicio [style*="fadeUp"]{animation-name:fadeIn !important}
  .hilo-lectura{display:none}
  #quienes-somos img{animation:none;scale:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Guías: separación de párrafos dentro del artículo */
.guia-texto p+p{margin-top:1rem}
article.reveal h2:first-child{margin-top:0}
