/* Arreglos globales. Carga después de ajustes.css y componentes.css, antes de la hoja de cada página. Regla del cliente: ninguna capa tapa texto, precios ni botones. 0. Puentes del sistema (28 de setiembre): lo que el cromo nuevo necesita de hojas que no son suyas mientras cada página no use las variables de ajustes.css. Cada puente dice qué reemplaza; cuando la hoja de la página use var(--barra-alto), se borra. 3 a 7. Arreglos de páginas del export (nosotros, 404, formulario de eventos, marca). */ /* ============================================================ 0. Puentes del sistema ============================================================ */ /* Botón flotante de WhatsApp (js/whatsapp.js): el tercer botón del sistema (R4). Solo por debajo de 992, donde la barra no muestra «Reservá». Verde, radio de 8, sin borde ni sombra dura. Pisa la cara de .cta vieja que tiene en componentes.css. */ .wa-flotante { width: 52px; height: 52px; border: 0; border-radius: var(--radio, 8px); box-shadow: none; } .wa-flotante:hover { box-shadow: none; background-color: var(--verde-hondo, #536451); } @media (min-width: 992px) { .wa-flotante { display: none !important; } } /* El foco que el navegador trae a la pantalla no queda debajo de la barra fija (80 o 64 px) ni del botón flotante (C43). Pisa los 96 px fijos de componentes.css. La carta tiene el suyo. */ html { scroll-padding-top: calc(var(--barra-alto, 80px) + 16px); scroll-padding-bottom: 0; } @media (max-width: 991px) { html { scroll-padding-bottom: 88px; } } /* Bandas carbón y verdes del export: la tinta es crema. Antes la ponía el h2 del export (h2 { color: crema }, que sobre crema no se leía); el sistema deja que cada titular herede el color de su banda, y estas bandas no lo decían. */ .section.about-us, .section.light-black { color: var(--crema, #f8f9d8); } /* La grilla del sistema para el contenedor del export. .main-container medía 1300 con 24 px de relleno (16 en celular): el contenido arrancaba en x=70+24 a 1440 y el logo en 120, y a 390 en 16 contra 20. Con el ancho y el margen de .contenedor, el primer titular de nosotros, eventos, el blog, los artículos, la 404 y las secciones del inicio cae en la línea del logo y de la primera columna del pie. Quedan afuera la carta (su cabecera tiene medidas propias en carta.css) y el contenedor de 120vw de nosotros. Se borra cuando ninguna página use .main-container: cada una pasa a .contenedor. */ body:not(.pagina-carta) .main-container:not(.about-us-container) { box-sizing: border-box; max-width: calc(var(--ancho, 1200px) + 2 * var(--margen, 24px)); padding-left: var(--margen, 24px); padding-right: var(--margen, 24px); } /* Inicio: el hero carbón arranca pegado a la barra (home.css le da 80 px fijos de margen: por debajo de 992 la barra mide 64 y quedaba una raya crema entre las dos). */ body .inicio-hero { margin-top: var(--barra-alto, 80px); } /* Carta: la barra de pestañas se pega debajo de la barra del sitio (carta.css la pega a 80 px fijos; por debajo de 992 quedaban 16 px de carta a la vista entre las dos). A 320 o menos la barra de pestañas no es pegajosa y queda como está. */ @media (min-width: 321px) { html body.pagina-carta .carta-barra { top: var(--barra-alto, 80px); } } /* ============================================================ 3. Nosotros · «Nuestra evolución y aspiración» El texto medía 50% y las fotos, absolutas, 52%: se montaban de 992 a 1440. El parallax IX2 (a-8) movía las columnas hasta un 40% de su alto, y por eso hacía falta un velo de 400 px que tapaba la foto de los hermanos. Pasan a dos columnas reales, sin parallax ni velo. ============================================================ */ @media (min-width: 992px) { .main-container.is-about-us { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 6%; } .main-container.is-about-us::before, .main-container.is-about-us::after { display: none; } .main-container.is-about-us > .space-80 { grid-area: 1 / 1; } .main-container.is-about-us > .about-location-heading-wrap { grid-area: 2 / 1; } .main-container.is-about-us > .abotu-location-text-wrap { grid-area: 3 / 1; width: auto; } .main-container.is-about-us > .about-location-columns-wrap { grid-column: 2; grid-row: 1 / -1; position: relative; inset: auto; width: auto; } } @media (min-width: 1920px) { .about-location-column._1, .about-location-column._2 { top: 0; } } .about-location-images-wrap { transform: none !important; } .about-location-gradient-top, .about-location-gradient-bottom { display: none; } /* Sin el velo, en celular sobraban 160 px de verde entre el texto y las fotos. */ @media (max-width: 991px) { .about-location-column { padding-top: 0; padding-bottom: 48px; } } /* Nosotros · «Local, orgánico y consciente.» «CONSCIENTE.» en 32 px mide 216 px y, a 360, la columna del título quedaba en 188 (196 con el margen viejo de 16): la palabra pisaba el dibujo del hombre. Por debajo de 390 el dibujo baja de 112 a 80 px y el canal de 20 a 16, y la columna queda en 224. Lleva .nos-local delante porque paginas.css carga después. */ @media (max-width: 389px) { .nos-local .nos-local-grilla { grid-template-columns: minmax(0, 1fr) 80px; column-gap: 16px; } } /* Nosotros · cita. Las comillas eran absolutas contra el contenedor y no contra el texto centrado: de 768 a 1279 tapaban la L de «LO» y la de «ESENCIAL». Van en el flujo, arriba y abajo de la cita. */ .big-quote-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; } .big-quote-wrap .quote-image, .big-quote-wrap .quote-image.bottom-quote { position: static; inset: auto; width: 44px; } .big-quote-wrap .quote-image.bottom-quote { order: 2; } /* ============================================================ 4. 404: el número quedaba bajo la barra fija de 80 px en celular y tableta (padding de 64 px y line-height de 29 px con letra de 70). ============================================================ */ @media (max-width: 991px) { .utility-page-wrap._404-wrap { padding-top: 144px; } .subtitle.is-dark.is-404 { line-height: 1; } } /* ============================================================ 5. Formulario de eventos (eventos.html y nosotros.html) Etiquetas visibles en vez de placeholders en mayúsculas, que se borraban al escribir. El botón pasa a