/* Tema generado automáticamente — colores del cliente */ :root { --color-primario: #171a1f; --color-secundario: #3a3f47; --color-acento: #d4a017; --color-acento-texto: #17191c; --color-primario-texto: #ffffff; --color-fondo: #f7f8f9; --color-texto: #17191c; } /* MODO OSCURO: solo cambian el papel y la tinta; los colores del negocio (primario, secundario, acento) se respetan, que para eso son su marca. Van aquí y no en styles.css porque necesitan pisar a las de arriba. */ :root[data-tema="oscuro"] { --color-fondo: #0f1216; --color-texto: #e9ebee; --color-superficie: #171b21; --color-borde: rgba(255, 255, 255, 0.12); --color-suave: rgba(255, 255, 255, 0.06); /* El primario de varios rubros es oscuro (el gris acero de talleres, por ejemplo). Sobre fondo negro sería ilegible, así que para los títulos se usa una versión aclarada del mismo color: se mantiene la identidad y se puede leer. */ --color-titulo: color-mix(in srgb, var(--color-primario) 30%, #ffffff); } /* ============================================ Estilos base del sitio (independientes del tema) Las variables de color se inyectan arriba en el build. ============================================ */ html { scroll-behavior: smooth; } /* --------------------------------------------------------------------------- TIPOGRAFÍA (2026-08-13) Antes todo salía con la fuente por defecto del sistema. Funciona, pero es exactamente lo que hace que una página "no se vea hecha por alguien": es la misma letra del bloc de notas. Dos familias, cargadas con display=swap para que el texto se vea aunque la fuente demore: - Archivo para los títulos: grotesca ancha, aguanta mayúsculas y se lee fuerte en un celular al sol. - Inter para el texto corrido: hecha para pantalla, no cansa. Se declaran como variables para que un rubro pueda cambiarlas sin tocar HTML. --------------------------------------------------------------------------- */ :root { --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif; --font-texto: "Inter", ui-sans-serif, system-ui, sans-serif; /* Valores del modo claro. El oscuro los pisa en el bloque de tema que el generador escribe arriba de este archivo. Se llaman "superficie", "borde" y "suave" en vez de blanco/negro justamente para poder darlos vuelta. */ --color-superficie: #ffffff; --color-borde: rgba(0, 0, 0, 0.10); --color-suave: rgba(0, 0, 0, 0.035); --color-titulo: var(--color-primario); } /* Sin transición al cambiar de tema, y es a propósito. Al animar `background-color` en mientras cambia una variable CSS, Chrome se queda con el color viejo: se medía --color-fondo en #f7f8f9 y el body seguía pintado de #0f1216. El fondo quedaba oscuro con las tarjetas blancas encima. El cambio instantáneo se ve bien y no tiene ese riesgo. */ body { font-family: var(--font-texto); } h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.02em; } /* Evita que un título quede con una palabra sola colgando en la última línea */ h1, h2 { text-wrap: balance; } /* --------------------------------------------------------------------------- ANCLAS BAJO EL HEADER FIJO El header se queda pegado arriba (~68px). Al tocar "Servicios" en el menú, el navegador dejaba el título JUSTO debajo del header, tapado. Se veía como si el enlace estuviera roto. --------------------------------------------------------------------------- */ section[id] { scroll-margin-top: 84px; } /* Animación de aparición al hacer scroll (activada por main.js) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Respeta la preferencia de menos movimiento */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } ::selection { background-color: var(--color-primario); color: #ffffff; } /* --------------------------------------------------------------------------- FOCO VISIBLE PARA TECLADO (2026-08-13) Medido en la demo publicada: de 11 elementos interactivos, 8 no mostraban NADA al navegarlos con Tab. Solo lo tenían los que llevaban la clase de focus-visible escrita a mano. Quien navega con teclado quedaba perdido sin saber dónde está parado. `:focus-visible` (y no `:focus`) es a propósito: solo se pinta cuando el navegador detecta navegación por teclado, así que al tocar con el dedo o hacer clic no aparece el recuadro. Se usa el color primario del negocio para que no desentone con la paleta. --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 3px; border-radius: 4px; } /* Sobre el hero y el pie, que van sobre fondo oscuro, el primario puede perderse. Ahí el contorno va en blanco, que siempre contrasta. */ #hero a:focus-visible, footer a:focus-visible { outline-color: #ffffff; } /* --------------------------------------------------------------------------- HERO: velo en degradado, no un plano negro al 50% El plano apagaba la foto por igual: el taller se veía gris y el texto igual de contrastado arriba que abajo. Con degradado la foto respira en el medio y el texto se apoya en la parte más oscura. --------------------------------------------------------------------------- */ .hero-velo { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.8) 100% ); } /* Barra de datos reales bajo el hero (dirección, reseñas, lo que sí sabemos) */ .franja-dato { border-color: rgba(255, 255, 255, 0.18); } /* --------------------------------------------------------------------------- FOTO VIVA EN EL HERO (2026-08-13) El pedido era "que no se vea tan simple, algo tipo video pero que no pese". Esto es eso: la foto se acerca despacio (Ken Burns) y, si hay galería, las otras fotos se turnan encima. Cero kilobytes de video. Solo se animan `transform` y `opacity`, que el navegador resuelve en la GPU: no obliga a recalcular el diseño de la página y por eso no traba ni en un celular de gama baja. --------------------------------------------------------------------------- */ .hero-foto { animation: kenburns 28s ease-in-out infinite alternate; will-change: transform; } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(0, -1.5%, 0); } } /* Las fotos de relevo empiezan invisibles y aparecen por turnos. La primera nunca se apaga: siempre hay algo debajo, así que jamás se ve un hueco. */ .hero-capa { opacity: 0; animation: kenburns 28s ease-in-out infinite alternate, hero-crossfade 24s linear infinite; } @keyframes hero-crossfade { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } } /* --------------------------------------------------------------------------- BARRA DE ACCIÓN EN EL CELULAR Reemplaza al botón flotante en pantallas chicas: ocupa el ancho completo, con el pulgar cae justo encima, y suma "cómo llegar" que es la otra cosa que la gente busca. `env(safe-area-inset-bottom)` evita quedar debajo de la barra de gestos del iPhone. --------------------------------------------------------------------------- */ .barra-movil { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } body.con-barra-movil { padding-bottom: 5.5rem; } @media (min-width: 768px) { body.con-barra-movil { padding-bottom: 0; } } /* Punto verde que late cuando el negocio está abierto ahora mismo */ .punto-abierto { animation: latido 2.4s ease-in-out infinite; } @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .hero-foto, .hero-capa, .punto-abierto { animation: none; } .hero-capa { opacity: 0; } } /* --------------------------------------------------------------------------- TARJETAS DE SERVICIO Se levantan un poco al pasar el mouse y marcan el borde con el acento. En celular no hay hover, así que el peso visual lo lleva el borde superior. --------------------------------------------------------------------------- */ .tarjeta { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .tarjeta:hover { transform: translateY(-4px); border-color: var(--color-acento); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45); } @media (prefers-reduced-motion: reduce) { .tarjeta:hover { transform: none; } } /* LOGO POR TEMA. El logo del cliente suele venir recortado de su tarjeta: tinta negra sobre blanco. Quitarle el fondo lo deja invisible en modo oscuro, y dejarle una placa blanca le mete un parche que no es parte de su marca. La solución son dos archivos —el mismo logo con la tinta negra y con la tinta blanca— y se muestra el que corresponde. Si el cliente no tiene versión oscura, no pasa nada: `.logo-oscuro` simplemente no existe en su HTML. */ .logo-oscuro { display: none; } :root[data-tema="oscuro"] .logo-claro { display: none; } :root[data-tema="oscuro"] .logo-oscuro { display: block; } *,:after,:before{--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:rgba(59,130,246,.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:rgba(59,130,246,.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.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.right-5{right:1.25rem}.top-0{top:0}.z-50{z-index:50}.mx-auto{margin-right:auto}.ml-auto,.mx-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.min-h-\[44px\]{min-height:44px}.min-h-\[46px\]{min-height:46px}.min-h-\[48px\]{min-height:48px}.min-h-\[52px\]{min-height:52px}.min-h-\[54px\]{min-height:54px}.w-11{width:2.75rem}.w-12{width:3rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[44px\]{min-width:44px}.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-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.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-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-3{row-gap:.75rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-\[var\(--color-borde\)\]>:not([hidden])~:not([hidden]){border-color:var(--color-borde)}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--color-borde\)\]{border-color:var(--color-borde)}.bg-\[\#25D366\]{--tw-bg-opacity:1;background-color:rgb(37 211 102/var(--tw-bg-opacity,1))}.bg-\[var\(--color-acento\)\]{background-color:var(--color-acento)}.bg-\[var\(--color-fondo\)\]{background-color:var(--color-fondo)}.bg-\[var\(--color-superficie\)\]{background-color:var(--color-superficie)}.bg-black\/35{background-color:rgba(0,0,0,.35)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/15{background-color:hsla(0,0%,100%,.15)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-16{padding-bottom:4rem}.pb-4{padding-bottom:1rem}.pt-10{padding-top:2.5rem}.pt-20{padding-top:5rem}.pt-3{padding-top:.75rem}.text-center{text-align:center}.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-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-wide{letter-spacing:.025em}.text-\[\#0b3d20\]{--tw-text-opacity:1;color:rgb(11 61 32/var(--tw-text-opacity,1))}.text-\[var\(--color-acento\)\]{color:var(--color-acento)}.text-\[var\(--color-acento-texto\)\]{color:var(--color-acento-texto)}.text-\[var\(--color-primario\)\]{color:var(--color-primario)}.text-\[var\(--color-texto\)\]{color:var(--color-texto)}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/75{color:hsla(0,0%,100%,.75)}.text-white\/90{color:hsla(0,0%,100%,.9)}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-20{opacity:.2}.opacity-60{opacity:.6}.opacity-65{opacity:.65}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-black\/25{--tw-shadow-color:rgba(0,0,0,.25);--tw-shadow:var(--tw-shadow-colored)}.shadow-black\/30{--tw-shadow-color:rgba(0,0,0,.3);--tw-shadow:var(--tw-shadow-colored)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-white\/25{--tw-ring-color:hsla(0,0%,100%,.25)}.ring-white\/45{--tw-ring-color:hsla(0,0%,100%,.45)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-\[1\.02\]:hover{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\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.hover\:bg-\[var\(--color-suave\)\]:hover{background-color:var(--color-suave)}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-70:hover{opacity:.7}.hover\:brightness-105:hover{--tw-brightness:brightness(1.05)}.hover\:brightness-105:hover,.hover\:brightness-110:hover{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)}.hover\:brightness-110:hover{--tw-brightness:brightness(1.1)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-\[\#0b3d20\]:focus-visible{outline-color:#0b3d20}.group[open] .group-open\:rotate-45{--tw-rotate:45deg;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\:col-span-2{grid-column:span 2/span 2}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:p-8{padding:2rem}}@media (min-width:768px){.md\:inline-flex{display:inline-flex}.md\:hidden{display:none}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:pb-24{padding-bottom:6rem}.md\:pt-32{padding-top:8rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:ml-4{margin-left:1rem}.lg\:flex{display:flex}.lg\:hidden{display: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))}}