/* ============================================================ CRESIA — componentes, secciones y movimiento ============================================================ */ /* es inline por defecto y no propaga la altura al , así que object-fit no tiene contra qué recortar. Esto lo arregla. */ picture { display: contents; } /* Con `display: contents` el desaparece y sus hijos pasan a ser hijos del contenedor. En una rejilla eso mete también al como celda: tres fotos ocupaban seis lugares y la galería salía escalonada. Esto lo corta de raíz —el nunca se dibuja— y protege a cualquier rejilla futura. */ source { display: none; } .portada__fondo picture, .banda__fondo picture, .tarjeta__marco picture { display: block; width: 100%; height: 100%; } /* ---------- rejilla base ------------------------------------ */ .env { /* envoltura de ancho máximo */ width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); } .seccion { padding-block: var(--seccion); } .seccion--cierre { padding-block: var(--cierre); } .b-arena { background: var(--arena); } .b-crema { background: var(--crema-tenue); } .b-tinta { background: var(--tinta); color: var(--crema); } .b-cacao { background: var(--cacao); color: var(--crema); } .b-terra { background: var(--terracota); color: var(--crema); } .b-durazno{ background: var(--durazno-claro); } /* ============================================================ BARRA ============================================================ */ .barra { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; /* El logo tiene que caer en el mismo eje que el título de la portada. La barra es fija y ocupa todo el ancho, pero el contenido de la página vive dentro de .env, que se centra a 90rem: arriba de eso el logo quedaba pegado al borde y el título entraba 240 px más adentro. Este padding replica el cálculo de .env sin tocar el marcado. */ /* Una sola altura en todas las páginas. Antes el inicio iba a 1.4rem y las interiores a 0.95: 7 px de diferencia que se veían como un salto del logo al navegar. Gana la baja: es la que ya tenían las interiores y la que más se parece a la contraída. */ padding-block: 0.95rem; padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); color: var(--crema); transition: background var(--medio) var(--curva-suave), padding var(--medio) var(--curva-suave), box-shadow var(--medio) var(--curva-suave); } /* al bajar, la barra se contrae y toma fondo terracota */ .barra[data-fija='si'] { background: var(--terracota); padding-block: 0.85rem; box-shadow: 0 1px 0 rgba(23, 17, 14, 0.08), 0 8px 30px -18px rgba(23, 17, 14, 0.5); } /* Páginas interiores: terracota desde el arranque, pero más baja que sobre la portada. Con foto detrás la barra se lee como parte de la imagen; sobre un fondo plano, a 106 px se leía como una banda. A 91 vuelve a leerse como barra —y de paso casi no hay salto al bajar, porque ya arranca cerca de la altura contraída. */ .barra--solida { background: var(--terracota); } /* ------------------------------------------------------------ VARIANTE CLARA (opcional — se activa desde tools/build.mjs) Barra crema con logo oscuro. Pesa mucho menos sobre las páginas de fondo claro, pero también deja de anclar la marca: el terracota es hoy la señal más fuerte del sitio en interiores. Queda armada y con el contraste verificado para poder comparar. ------------------------------------------------------------ */ .barra--clara { background: var(--blanco); color: var(--texto); box-shadow: inset 0 -1px 0 var(--filete); } /* al bajar, la regla general pinta la barra de terracota: acá no, porque el logo y el menú son oscuros y quedarían ilegibles */ .barra--clara[data-fija='si'] { background: var(--blanco); box-shadow: inset 0 -1px 0 var(--filete), 0 8px 30px -20px rgba(23, 17, 14, 0.35); } .barra__logo--color { display: none; } .barra--clara .barra__logo--color { display: block; } .barra--clara .barra__logo--claro { display: none; } .barra--clara .hamburguesa span { background: var(--tinta); } body[data-menu='abierto'] .barra--clara .hamburguesa span { background: var(--crema); } @media (min-width: 74.0625rem) { .barra--clara .barra__enlace { color: var(--texto); } .barra--clara .barra__enlace:hover { color: var(--terracota); } .barra--clara .barra__enlace[aria-current='page'] { color: var(--tinta); font-weight: 600; } .barra--clara .idioma__boton { color: var(--gris-tibio); border-color: var(--filete); } .barra--clara .barra__acceso { color: var(--gris-tibio); border-color: var(--filete); } .barra--clara .barra__acceso:hover { color: var(--terracota); border-color: var(--terracota); } .barra--clara .idioma__boton:hover { color: var(--terracota); border-color: var(--terracota); } .barra--clara .menu-grupo:has(.submenu__enlace[aria-current='page']) > .barra__enlace--padre { color: var(--tinta); font-weight: 600; } .barra--clara .submenu { box-shadow: 0 20px 45px -25px rgba(23, 17, 14, 0.35), 0 0 0 1px var(--filete); } .barra--clara .barra__enlace::after { background: var(--terracota); } /* el activo va entero en tinta, filete incluido: el terracota queda para el hover */ .barra--clara .barra__enlace[aria-current='page']::after { background: var(--tinta); } .barra--clara .idioma__boton { color: var(--gris-tibio); } .barra--clara .idioma__boton:hover { border-color: var(--filete); } .barra--clara .btn--linea-clara { color: var(--terracota); border-color: var(--terracota); } .barra--clara .btn--linea-clara:hover { color: var(--crema); } .barra--clara .btn--linea-clara::before { background: var(--terracota); } } /* al bajar se esconde, al subir vuelve */ .barra[data-oculta='si'] { transform: translateY(-100%); } .barra { transition-property: background, padding, box-shadow, transform; } .barra__marca { flex-shrink: 0; display: block; } /* Los dos archivos del logo no comparten relación de aspecto —267/126 el claro, 111/52 el de color—, así que fijar el ancho daba medio píxel de diferencia de alto al cambiar de página. Se fija el alto; el ancho se acomoda. */ .barra__marca img { height: clamp(3.05rem, 4.23vw, 3.87rem); width: auto; } .barra__nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.125rem); font-size: var(--t-menor); } .barra__enlace { position: relative; color: var(--sobre-oscuro); padding-block: 0.3rem; transition: color var(--rapido) var(--curva); white-space: nowrap; } /* subrayado que se dibuja desde la izquierda */ .barra__enlace::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--durazno); transform: scaleX(0); transform-origin: left; transition: transform var(--medio) var(--curva); } .barra__enlace:hover { color: var(--crema); } .barra__enlace:hover::after, .barra__enlace:focus-visible::after { transform: scaleX(1); } .barra__enlace[aria-current='page'] { color: var(--crema); } .barra__enlace[aria-current='page']::after { transform: scaleX(1); } /* El «Contactanos» de la barra no es un botón de página: es el par del selector de idioma. Se achica para que los dos se lean como una misma familia y no como un botón grande al lado de una etiqueta chica. */ .barra .barra__enlace--boton { /* gana a .btn--chico, que va después */ min-height: 2.375rem; padding-inline: 1.1rem; font-size: var(--t-menor); } /* ---------- desplegables de la barra ------------------------- Sin JavaScript. Se abren con :hover y con :focus-within — al enfocar el enlace padre con el teclado el panel aparece, y como el foco pasa a estar adentro, se queda abierto mientras se recorre. Oculto va con visibility:hidden, así que sus enlaces no entran en el orden de tabulación cuando no se ve. */ .menu-grupo { position: relative; } .barra__enlace--padre { display: inline-flex; align-items: center; gap: 0.4rem; } .menu-grupo__flecha { transition: transform var(--rapido) var(--curva); } .menu-grupo:hover .menu-grupo__flecha, .menu-grupo:focus-within .menu-grupo__flecha { transform: rotate(180deg); } /* El puente invisible entre el enlace y el panel: sin esto, al bajar el puntero pasa por el hueco y el panel se cierra. */ .menu-grupo::after { content: ''; position: absolute; top: 100%; left: -1rem; right: -1rem; height: 0.75rem; } .submenu { position: absolute; top: calc(100% + 0.7rem); left: -1.1rem; /* El panel está posicionado dentro de un contenedor angosto —el ancho de «Servicios»—, así que sin esto se encoge a ese ancho y parte las bajadas en dos líneas. */ width: max-content; min-width: 13rem; max-width: 24rem; padding: 0.35rem 0; background: var(--crema); color: var(--tinta); box-shadow: 0 20px 45px -25px rgba(23, 17, 14, 0.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva), visibility var(--rapido); } .menu-grupo:hover .submenu, .menu-grupo:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* El nombre manda y la bajada acompaña: 600 sobre tinta contra 400 sobre gris tibio, y dos tamaños distintos. Con los dos en el mismo peso el panel se leía como cuatro renglones sueltos. */ .submenu__enlace { display: block; padding: 0.65rem 1.15rem; font-size: var(--t-lectura); font-weight: 600; color: var(--tinta); white-space: nowrap; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva); } .submenu__enlace:hover { background: var(--crema-tenue); color: var(--terracota); } /* «Cresia Alquila» y «Administración de consorcios» sonaban a lo mismo: las dos son «Cresia me maneja la propiedad». La línea de abajo es la que dice cuál es cuál —una unidad contra un edificio entero— y evita el clic de prueba. */ /* Con bajada, el título sube de tamaño: tiene que leerse como el nombre de una sección y no como un renglón de lista. Dos escalones completos de distancia con la explicación. */ /* Mismo tamaño que un ítem sin bajada —hereda los 17 px de .submenu__enlace—. La jerarquía la hace la bajada: 15 px en 400 sobre gris tibio contra 17 en 600 sobre tinta. */ .submenu__enlace--doble { padding-block: 0.9rem; line-height: 1.2; } /* un filete separa las dos entradas: cada una es un bloque, no una lista de renglones */ .submenu__enlace--doble + .submenu__enlace--doble { box-shadow: inset 0 1px 0 var(--filete); } /* Clase propia y no «span» a secas: en la demo cada texto del diccionario viaja envuelto en un , así que un selector por etiqueta también pisaba el título y lo dejaba del tamaño y el color de la bajada. */ .submenu__bajada { display: block; margin-top: 0.35rem; color: var(--gris-tibio); font-size: var(--t-menor); font-weight: 400; line-height: 1.35; white-space: normal; max-width: 21rem; } .submenu__enlace--doble:hover .submenu__bajada { color: var(--texto); } .submenu__enlace[aria-current='page'] { font-weight: 600; color: var(--terracota); } /* si la página abierta está adentro del grupo, el padre se marca igual */ .menu-grupo:has(.submenu__enlace[aria-current='page']) > .barra__enlace--padre { color: var(--crema); } .menu-grupo:has(.submenu__enlace[aria-current='page']) > .barra__enlace--padre::after { transform: scaleX(1); } /* ---------- selector de idioma ------------------------------ */ /* La llave y el idioma son un par: van con menos aire entre sí que el resto de la barra, para que se lean como un grupo de herramientas y no como dos entradas más de la navegación. */ .barra__utiles { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* ---------- fichas de personas (co-fundadores) ---------------- Retrato 4:5, firma arriba y nombre abajo. Sin cajas: el retrato ya es el bloque. Mientras Cresia no mande las fotos, la placa muestra las iniciales —el onerror de la la retira— así el hueco se lee como pendiente y no como error. -------------------------------------------------------------- */ .personas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); } .persona__retrato { position: relative; aspect-ratio: 4 / 5; background: var(--cacao); overflow: hidden; } /* la placa de iniciales vive detrás: si la foto carga, la tapa */ .persona__retrato::before { content: attr(data-inicial); position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 300; letter-spacing: 0.06em; color: var(--sobre-oscuro-tenue); } .persona__retrato img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .persona__firma { display: block; margin-top: 1.1rem; color: var(--sobre-oscuro-tenue); } .persona__nombre { margin-top: 0.4rem; font-size: var(--t-bloque); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--crema); } .persona__li { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; min-height: 2.75rem; font-size: var(--t-menor); color: var(--sobre-oscuro); transition: color var(--rapido) var(--curva); } .persona__li:hover { color: var(--durazno); } .persona__li svg { width: 1.05rem; height: 1.05rem; } /* ---------- acceso de agentes al portal ---------------------- Mismo alto y mismo filete que el selector de idioma: los dos son herramientas, no secciones del sitio, y conviene que se lean como un par al final de la barra. La llave dice «acceso» sin texto, pero la palabra queda igual: es el botón que menos gente conoce y un icono solo obligaría a adivinar. */ .barra__acceso { display: inline-flex; align-items: center; justify-content: center; min-width: 2.375rem; min-height: 2.375rem; padding: 0 0.7rem; border: 1px solid var(--sobre-oscuro-tenue); color: var(--sobre-oscuro); font-size: var(--t-menor); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .barra__acceso .icono { width: 1.05rem; height: 1.05rem; } .barra__acceso:hover { color: var(--crema); border-color: var(--durazno); } /* Debajo de ~1360 px el aire entre entradas se aprieta: en portugués —el idioma más largo— si no la barra quedaba al filo. */ @media (min-width: 74.0625rem) and (max-width: 85rem) { .barra__nav { gap: clamp(0.8rem, 1.55vw, 2.125rem); } } .idioma { position: relative; flex-shrink: 0; } .idioma__boton { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--durazno); font-size: var(--t-etiq); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; min-height: 2.375rem; padding: 0 0.85rem; /* El filete va siempre, no sólo al pasar el puntero: es la misma lógica que el botón de al lado —los dos son controles y los dos lo muestran—. Antes aparecía y desaparecía, y eso hacía que la esquina derecha de la barra cambiara de forma sola. */ border: 1px solid var(--sobre-oscuro-tenue); transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva); } .idioma__boton:hover { border-color: var(--durazno); color: var(--crema); } .idioma__boton svg { transition: transform var(--rapido) var(--curva); } .idioma[data-abierto='si'] .idioma__boton svg { transform: rotate(180deg); } .idioma__lista { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 9.5rem; background: var(--crema); color: var(--tinta); padding: 0.4rem 0; box-shadow: 0 20px 45px -25px rgba(23, 17, 14, 0.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva), visibility var(--rapido); } .idioma[data-abierto='si'] .idioma__lista { opacity: 1; visibility: visible; transform: translateY(0); } .idioma__lista a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1.1rem; font-size: var(--t-menor); transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva); } .idioma__lista a:hover { background: var(--crema-tenue); color: var(--terracota); } .idioma__lista a[aria-current='true'] { font-weight: 600; color: var(--terracota); } .idioma__lista a span { color: var(--gris-tibio); font-size: var(--t-etiq); letter-spacing: 0.12em; } /* ---------- botón hamburguesa ------------------------------- */ .hamburguesa { display: none; width: 2.75rem; height: 2.75rem; position: relative; flex-shrink: 0; } .hamburguesa span { position: absolute; left: 0.5rem; right: 0.5rem; height: 1.5px; background: var(--crema); transition: transform var(--medio) var(--curva), opacity var(--rapido) var(--curva); } .hamburguesa span:nth-child(1) { top: 1rem; } .hamburguesa span:nth-child(2) { top: 1.375rem; } .hamburguesa span:nth-child(3) { top: 1.75rem; } body[data-menu='abierto'] .hamburguesa span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); } body[data-menu='abierto'] .hamburguesa span:nth-child(2) { opacity: 0; transform: scaleX(0.3); } body[data-menu='abierto'] .hamburguesa span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); } /* ============================================================ BOTONES — esquina viva, dos alturas, sin radio ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.125rem; padding: 0 1.75rem; font-size: 1rem; font-weight: 600; text-align: center; overflow: hidden; isolation: isolate; transition: color var(--medio) var(--curva), border-color var(--medio) var(--curva); } .btn--chico { min-height: 2.75rem; padding-inline: 1.4rem; font-size: var(--t-menor); } /* El relleno crece desde donde entró el cursor, no desde abajo. El barrido de abajo hacia arriba es el hover más repetido que hay; éste responde al gesto de quien lo usa y se siente hecho a mano. Sin JavaScript --x/--y se quedan en 50%: el círculo crece desde el centro y el botón sigue funcionando igual. */ .btn { --x: 50%; --y: 50%; } .btn::before { content: ''; position: absolute; z-index: -1; left: var(--x); top: var(--y); width: 0; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; transition: width 0.55s var(--curva); } .btn:hover::before, .btn:focus-visible::before { width: 260%; } /* al soltar, se cierra hacia donde salió el cursor */ .btn:active { transform: scale(0.985); } .btn { transition: color var(--medio) var(--curva), border-color var(--medio) var(--curva), transform var(--rapido) var(--curva); } .btn--primario { background: var(--terracota); color: var(--crema); } .btn--primario::before { background: var(--cacao); } .btn--linea { border: 1px solid var(--terracota); color: var(--terracota); } .btn--linea::before { background: var(--terracota); } .btn--linea:hover, .btn--linea:focus-visible { color: var(--crema); } .btn--claro { background: var(--crema); color: var(--terracota); } .btn--claro::before { background: var(--durazno); } .btn--linea-clara { border: 1px solid var(--sobre-oscuro-tenue); color: var(--crema); } .btn--linea-clara::before { background: var(--crema); } .btn--linea-clara:hover, .btn--linea-clara:focus-visible { color: var(--terracota); border-color: var(--crema); } /* enlace de texto con subrayado que se redibuja */ .enlace { position: relative; display: inline-block; color: var(--terracota); font-size: var(--t-menor); font-weight: 600; padding-bottom: 0.3rem; } .enlace::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: right; transition: transform var(--medio) var(--curva); } .enlace:hover::after, .enlace:focus-visible::after { animation: subrayado var(--lento) var(--curva); } @keyframes subrayado { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } .enlace--claro { color: var(--durazno); } /* la flecha del enlace avanza en el hover */ .enlace-flecha { display: inline-flex; align-items: center; gap: 0.55rem; } .enlace-flecha svg { transition: transform var(--medio) var(--curva); } .enlace-flecha:hover svg, .enlace-flecha:focus-visible svg { transform: translateX(0.3rem); } /* ============================================================ PORTADA ============================================================ */ .portada { position: relative; min-height: min(100svh, 52rem); display: flex; flex-direction: column; justify-content: flex-end; color: var(--crema); overflow: hidden; } .portada__fondo { position: absolute; inset: 0; z-index: 0; } /* Las cuatro fotos van apiladas y se cruzan por opacidad. Ojo con cómo está resuelto, porque la forma obvia falla: si la que sale baja de 1 a 0 mientras la que entra sube de 0 a 1, en la mitad del cruce las dos están al 50 % y por detrás se ve el fondo — un bajón de luz que se lee como un parpadeo. Acá la que sale NO se desvanece: se queda opaca, debajo, hasta que la de arriba terminó de entrar y ya la tapa del todo. Recién ahí se apaga, y como está tapada, nadie la ve apagarse. */ /* ---------- las tres frases del titular ------------------------ El sitio de Cresia alterna hoy entre «Proyectos que nos unen», «Avanzamos hacia arriba» y «Creamos lazos». Se mantiene, pero con la transición del resto del sitio —sube y se funde— en vez del rebote del carrusel del sitio actual. Las tres van en la misma celda de la grilla, así que la portada no cambia de alto al pasar de una a otra. Sin JavaScript se ve sólo la primera: es la que vale como título de la página. */ .portada__titulo { display: grid; } .portada__frase { grid-area: 1 / 1; } .portada__frase:not(:first-child) { display: none; } .js .portada__frase { display: block; opacity: 0; transform: translateY(0.42em); transition: opacity 0.9s var(--curva-suave), transform 0.9s var(--curva-suave); } .js .portada__frase[data-activa] { opacity: 1; transform: none; } .js .portada__frase[data-saliente]{ opacity: 0; transform: translateY(-0.3em); } .portada__capa { position: absolute; inset: 0; opacity: 0; z-index: 0; } /* la que entra: sube por encima y se funde */ .portada__capa[data-activa] { opacity: 1; z-index: 2; transition: opacity 2s var(--curva-suave); will-change: opacity; } /* la que sale: opaca y por debajo, esperando a que la tapen */ .portada__capa[data-saliente] { opacity: 1; z-index: 1; } .portada__capa img { width: 100%; height: 100%; object-fit: cover; } /* La deriva va en el contenedor, no en cada foto. Si estuviera en cada una, al cambiar de capa la animación arrancaría de cero y se vería el tirón. Acá corre una sola vez, siempre, y las cuatro se mueven juntas: el cruce queda como una mezcla pura de opacidad. */ .portada__fondo { animation: deriva 34s var(--curva-suave) infinite alternate; } @keyframes deriva { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.1%, -1.3%, 0); } } .portada__velo { position: absolute; inset: 0; z-index: 1; /* Calibrado contra la más luminosa de las cuatro fotos (el atardecer): el titular y la bajada tienen que pasar 4,5:1 en todas, no sólo en las oscuras. El lavado carga sobre la izquierda, que es donde va el texto, y deja el lado derecho limpio para que se vea el edificio. */ background: linear-gradient(180deg, rgba(23,17,14,0.60) 0%, rgba(23,17,14,0.14) 30%, rgba(23,17,14,0.32) 58%, rgba(23,17,14,0.84) 100%), linear-gradient(96deg, rgba(83,29,18,0.80) 0%, rgba(83,29,18,0.46) 34%, rgba(83,29,18,0) 66%); } /* Sin la franja de datos al pie, la portada necesita su propio piso: antes los 3rem alcanzaban porque debajo venía la franja. */ .portada__cuerpo { position: relative; z-index: 2; padding-block: 8rem clamp(4rem, 8vw, 7rem); } .portada__cuerpo p.bajada { color: var(--sobre-oscuro); max-width: 34rem; margin-top: 1.6rem; } .portada__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; } /* franja de datos al pie de la portada */ .franja { position: relative; z-index: 2; border-top: 1px solid var(--filete-oscuro); background: rgba(23, 17, 14, 0.42); backdrop-filter: saturate(1.2); } .franja__fila { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-block: 1.35rem; flex-wrap: wrap; } .franja__dato { display: flex; align-items: baseline; gap: 0.7rem; } .franja__dato .cifra { font-size: var(--t-cifra); color: var(--durazno); } .franja__dato .etiq { color: var(--sobre-oscuro); } .franja__fila > .enlace { margin-left: auto; } /* ============================================================ MANIFIESTO + CIFRAS ============================================================ */ .manifiesto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .cifras { display: grid; } .cifra-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; border-top: 1px solid var(--filete); transition: border-color var(--medio) var(--curva); } .cifra-fila:last-child { border-bottom: 1px solid var(--filete); } .cifra-fila:hover { border-color: var(--terracota); } .cifra-fila__valor { font-size: var(--t-cifra); color: var(--terracota); } /* ============================================================ PROYECTOS ============================================================ */ .cabecera-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.25rem); } /* ---------- nota destacada (Noticias) ------------------------- La pieza estaba en el HTML pero nunca tuvo estilo: los dos bloques caían uno debajo del otro, sin aire, y la fecha quedaba pegada al borde de la foto. Es la única nota con jerarquía propia de la página, así que va en dos columnas —foto grande a la izquierda, cuerpo a la derecha— y el atributo sizes del HTML (62vw) ya estaba escrito para esta forma. */ .destacada { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: clamp(1.75rem, 3.2vw, 3rem); align-items: center; } .destacada__marco { display: block; position: relative; overflow: hidden; background: var(--arena-media); aspect-ratio: 4 / 3; } .destacada__marco picture { display: block; width: 100%; height: 100%; } .destacada__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva); } .destacada:hover .destacada__marco img { transform: scale(1.04); } .destacada__cuerpo { min-width: 0; } .destacada__cuerpo .enlace-flecha { display: inline-flex; } /* Debajo de 56rem vuelve a una sola columna, pero con aire entre la foto y la fecha: ese era el defecto original. */ @media (max-width: 56rem) { .destacada { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .destacada__marco { aspect-ratio: 16 / 10; } } .rejilla-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 3.2vw, 3.25rem) clamp(1.25rem, 2.2vw, 2rem); } .tarjeta { display: flex; flex-direction: column; height: 100%; } .tarjeta__marco { position: relative; overflow: hidden; background: var(--arena-media); aspect-ratio: 4 / 3; } .tarjeta__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva), filter var(--medio) var(--curva); } /* velo que sube desde abajo al pasar el mouse */ .tarjeta__marco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(83,29,18,0) 42%, rgba(83,29,18,0.55) 100%); opacity: 0; transition: opacity var(--medio) var(--curva); } .tarjeta:hover .tarjeta__marco img, .tarjeta:focus-within .tarjeta__marco img { transform: scale(1.055); } .tarjeta:hover .tarjeta__marco::after, .tarjeta:focus-within .tarjeta__marco::after { opacity: 1; } .tarjeta__titulo { margin-top: 1.4rem; transition: color var(--rapido) var(--curva); } .tarjeta:hover .tarjeta__titulo { color: var(--terracota); } .tarjeta__texto { margin-top: 0.6rem; font-size: var(--t-meta); line-height: 1.6; color: var(--texto); flex: 1; } /* Lo que va justo antes del pie separa por abajo. Hace falta decirlo aparte porque el pie usa margin-top:auto para alinearse con el resto de la fila, y cuando la tarjeta es la más alta ese auto vale cero: el filete terminaba tocando la última línea del texto. */ .tarjeta > :nth-last-child(2) { margin-bottom: 1.25rem; } .tarjeta__pie { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; /* alinea el pie de todas las tarjetas de la fila */ padding-top: 0.95rem; border-top: 1px solid var(--filete); color: var(--gris-tibio); } .tarjeta__estado { color: var(--terracota); } /* Iconos de línea: heredan el color del contexto y no se deforman. */ .icono { width: 1.5rem; height: 1.5rem; flex: none; } /* ============================================================ SERVICIOS — cabecera a dos columnas y seis tarjetas sobre fondo oscuro. Las tarjetas son las mismas cajas con filete (.bloque) de Propietarios, en su variante oscura; así el inicio y las páginas interiores hablan el mismo idioma. ============================================================ */ .servicios__cabecera { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .servicios__cabecera .lectura { max-width: 34rem; } /* La misma partición (texto angosto a la izquierda, filas anchas a la derecha) la usa el avance de obra de la ficha de proyecto. */ .avance { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: clamp(2.5rem, 6vw, 6rem); } /* ============================================================ BANDAS DE IMAGEN ============================================================ */ .banda { position: relative; display: grid; align-items: center; overflow: hidden; min-height: clamp(22rem, 42vw, 30rem); } .banda__fondo { position: absolute; inset: 0; } .banda__fondo img { width: 100%; height: 100%; object-fit: cover; } /* el velo aclara solo la zona del texto: la foto tiene que verse */ .banda__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(83,29,18,0.94) 0%, rgba(83,29,18,0.82) 24%, rgba(83,29,18,0.34) 46%, rgba(83,29,18,0.00) 66%); } .banda__cuerpo { position: relative; z-index: 1; padding-block: var(--seccion); color: var(--crema); } .banda__cuerpo > * { max-width: 34rem; } .banda__cuerpo p { color: var(--sobre-oscuro); margin-top: 1.3rem; } /* ============================================================ INVESTOR PASS en el inicio ============================================================ */ .investor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .investor .cifra-fila { border-color: var(--filete-oscuro); } .investor .cifra-fila:last-child { border-bottom-color: var(--filete-oscuro); } .investor .cifra-fila:hover { border-color: var(--sobre-oscuro-tenue); } .investor .cifra-fila__valor { color: var(--durazno); } .manifiesto .cifra-fila__valor { font-weight: 700; letter-spacing: -0.02em; } .manifiesto .cifra-fila:has(.cifra-fila__valor) { padding-block: 0.8rem; } .investor .cifra-fila > span:first-child { color: var(--sobre-oscuro); font-size: var(--t-menor); } /* ============================================================ NOTICIAS — lista de filas ============================================================ */ /* Noticias del inicio en tarjetas con foto — decisión de Alan, y es lo del diseño de origen. La foto es la del proyecto del que habla la nota, no una imagen genérica. Las filas de `.nota` siguen existiendo: las usa la página de Noticias. */ .notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.25rem); margin-top: clamp(2rem, 3.5vw, 3rem); } /* Eran tres columnas fijas a cualquier ancho: en un teléfono cada nota medía 99 px y la fecha se salía de su propia caja. */ @media (max-width: 62rem) { .notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .notas { grid-template-columns: minmax(0, 1fr); } } .nota-t { display: block; } .nota-t__marco { display: block; aspect-ratio: 3 / 2; } .nota-t__meta { display: flex; align-items: baseline; gap: 0.9rem; margin-top: 1.1rem; } .nota-t__lugar { color: var(--terracota); } .nota-t__fecha { color: var(--gris-tibio); } .nota-t__titulo { display: block; margin-top: 0.6rem; font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.032em; line-height: 1.2; transition: color var(--rapido) var(--curva); } .nota-t:hover .nota-t__titulo { color: var(--terracota); } .nota { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-block: 1.6rem; border-top: 1px solid var(--filete); transition: background var(--medio) var(--curva), padding-inline var(--medio) var(--curva); } .nota:last-child { border-bottom: 1px solid var(--filete); } .nota:hover { background: var(--crema-tenue); padding-inline: 1.25rem; } .nota__titulo { font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.032em; line-height: 1.2; transition: color var(--rapido) var(--curva); } .nota:hover .nota__titulo { color: var(--terracota); } .nota__lugar { color: var(--terracota); } /* ============================================================ CIERRE Y PIE ============================================================ */ .cierre { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; } .cierre__acciones { display: flex; gap: 0.9rem; flex-wrap: wrap; } .cierre--centro { flex-direction: column; justify-content: center; text-align: center; gap: 1.5rem; } .pie { background: var(--tinta); color: var(--sobre-oscuro); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; } .pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } .pie__marca img { width: 7.5rem; margin-bottom: 1.1rem; } .pie h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--durazno); margin-bottom: 1.1rem; } .pie li + li { margin-top: 0.1875rem; } .pie a, .pie li { font-size: var(--t-menor); transition: color var(--rapido) var(--curva); } /* alto mínimo de 24 px para el objetivo táctil (WCAG 2.5.8) */ .pie a { display: inline-block; padding-block: 0.2rem; min-height: 1.5rem; } .pie a:hover { color: var(--crema); } /* filas con icono: el icono no empuja al texto, se alinea con la primera línea y queda un poco más apagado que el texto */ .pie__con a, .pie__con { display: flex; align-items: flex-start; gap: 0.6rem; } .pie__con svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--sobre-oscuro-tenue); } .pie__con a:hover svg { color: var(--durazno); } .pie__con--dir { color: var(--sobre-oscuro); font-size: var(--t-menor); } .pie__con--dir span { line-height: 1.5; } .pie__legal { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--filete-oscuro); font-size: var(--t-meta); color: var(--sobre-oscuro-tenue); } /* ============================================================ REVELADO AL SCROLL ============================================================ */ /* El estado escondido cuelga de .js, que lo pone un script mínimo en el . Si el JavaScript no llega a correr, no se esconde nada y la página se ve entera: nunca al revés. */ [data-revelar] { transition: opacity 0.8s var(--curva), transform 0.8s var(--curva); transition-delay: var(--retraso, 0ms); } /* site.js marca con data-oculto sólo lo que está debajo de la pantalla al cargar: lo que ya se ve nunca espera a un script. */ [data-revelar][data-oculto]:not([data-visible]) { opacity: 0; transform: translateY(1.25rem); } /* Entrada de las portadas. El titular y la bajada suben a su lugar pero se ven desde el primer cuadro: son lo primero que mide el navegador como carga, y un texto que arranca transparente la retrasa. Los botones y lo que viene después sí llegan con fundido. */ .portada__cuerpo > * { animation: entrar 1s var(--curva) backwards; } .portada__cuerpo > .portada__titulo, .portada__cuerpo > .bajada { animation-name: subir; } .portada__cuerpo > *:nth-child(1) { animation-delay: 0.15s; } .portada__cuerpo > *:nth-child(2) { animation-delay: 0.28s; } .portada__cuerpo > *:nth-child(3) { animation-delay: 0.41s; } .franja { animation: entrar 1s var(--curva) 0.55s backwards; } /* Portada de ficha: la foto se asienta, el nombre sube y la miga y los botones entran detrás. */ .ficha-portada__fondo img { animation: asentar 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) both; } .ficha-portada h1 { animation: subir 1.3s var(--curva) 0.2s backwards; } .ficha-portada .miga, .ficha-portada__acciones { animation: entrar 1.1s var(--curva) backwards; } .ficha-portada .miga { animation-delay: 0.55s; } .ficha-portada__acciones { animation-delay: 0.67s; } @keyframes entrar { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } } @keyframes subir { from { transform: translateY(1.4rem); } } @keyframes asentar { from { transform: scale(1.12); } } /* ---------- transición entre páginas ------------------------- La API nativa del navegador: se queda con una foto de la página que se va y la funde con la que llega. Sin librería y sin peso. Donde todavía no existe —Firefox hoy— navega como siempre. La barra queda fuera de la fusión: se le da nombre propio y no se anima. Eso es lo que hace que un cambio de página se lea como que cambió el contenido y no como que se recargó todo el sitio. */ /* La transición entre páginas del sitio la hace site.js (ver TRANSICIÓN ENTRE PÁGINAS, al final): funciona igual en todos los navegadores. Estas reglas quedan para el archivo de muestra. */ ::view-transition-old(root) { animation: salir-vt 0.28s var(--curva-suave) both; } ::view-transition-new(root) { animation: entrar-vt 0.42s var(--curva) both; } @keyframes salir-vt { to { opacity: 0; } } @keyframes entrar-vt { from { opacity: 0; transform: translateY(0.75rem); } } .barra { view-transition-name: barra; } ::view-transition-old(barra) { animation: none; opacity: 0; } ::view-transition-new(barra) { animation: none; opacity: 1; } ::view-transition-group(barra) { animation-duration: 0s; } /* ============================================================ ADAPTACIÓN ============================================================ */ @media (max-width: 62rem) { .manifiesto, .servicios__cabecera, .avance, .investor, .pie__rejilla { grid-template-columns: minmax(0, 1fr); } .pie__rejilla { gap: 2.5rem; } .banda__velo { background: linear-gradient(180deg, rgba(83,29,18,0.55) 0%, rgba(83,29,18,0.92) 62%); } .banda__cuerpo { max-width: none; } } /* La barra pasa a hamburguesa a 74rem (1184 px) y no a 56. Con ocho entradas más los dos botones de herramienta, en portugués —el idioma más largo— no entraba por debajo de 1180 y quebraba en dos líneas. Debajo de eso el menú de pantalla completa es la respuesta correcta, no un apaño: es ancho de tableta. */ @media (max-width: 74rem) { .hamburguesa { display: block; } .barra { padding-block: 1rem; } .barra__nav { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35rem; background: var(--terracota); padding: 5rem var(--margen) 3rem; font-size: var(--t-titular); overflow-y: auto; clip-path: circle(0% at calc(100% - 3rem) 2.5rem); transition: clip-path 0.6s var(--curva); } body[data-menu='abierto'] .barra__nav { clip-path: circle(150% at calc(100% - 3rem) 2.5rem); } body[data-menu='abierto'] { overflow: hidden; } .barra__enlace { font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 250; letter-spacing: -0.032em; color: var(--crema); padding-block: 0.45rem; opacity: 0; transform: translateY(1rem); transition: opacity 0.4s var(--curva), transform 0.4s var(--curva), color var(--rapido); } body[data-menu='abierto'] .barra__enlace { opacity: 1; transform: none; transition-delay: calc(0.18s + var(--i, 0) * 0.05s); } .barra__enlace::after { display: none; } .barra__enlace--boton { margin-top: 1.25rem; } /* En móvil no hay hover: el grupo se despliega tocando el rótulo, y la flecha queda a la vista para que se sepa que hay algo debajo. El destino del padre es el mismo que el del segundo hijo, así que usar el toque para abrir no esconde ninguna página. */ .menu-grupo { position: static; width: 100%; } .menu-grupo::after { display: none; } .menu-grupo__flecha { display: inline-block; width: 0.95rem; height: 0.6rem; margin-left: 0.65rem; vertical-align: 0.1em; transition: transform var(--medio) var(--curva); } .menu-grupo[data-abierto='si'] .menu-grupo__flecha { transform: rotate(180deg); } /* El panel de escritorio es una caja clara: fondo crema, títulos en 600 y bajadas en gris. Nada de eso sirve acá —sobre terracota el gris queda en 1,3:1 y el filete se lee como un subrayado suelto—, y encima invertía la jerarquía: los hijos pesaban más que el padre. Acá los hijos son el mismo tipo de letra un escalón abajo, sin caja, sin filete y sin regla lateral: la sangría y el tamaño ya dicen que cuelgan de arriba. Las bajadas salen: en un panel que se abre al pasar el mouse ayudan a elegir en un segundo; en una lista de dos ítems son cuatro renglones de texto chico en medio de un menú aireado. */ /* 0fr → 1fr anima el alto real sin números mágicos; la caja de adentro es la que recorta mientras se abre. */ .submenu { position: static; display: grid; grid-template-rows: 0fr; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none; border-left: 0; padding: 0; margin: 0; transition: grid-template-rows var(--medio) var(--curva); } .menu-grupo[data-abierto='si'] .submenu { grid-template-rows: 1fr; } .submenu__caja { overflow: hidden; min-height: 0; } .submenu__enlace, .submenu__enlace--doble { padding: 0.7rem 0 0.7rem 1.25rem; font-size: clamp(1.125rem, 4.6vw, 1.375rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; color: var(--crema); box-shadow: none; white-space: normal; opacity: 1; transform: none; transition: color var(--rapido) var(--curva); } .submenu__enlace:first-child { padding-top: 0.5rem; } .submenu__enlace:last-child { padding-bottom: 0.9rem; } .submenu__bajada { display: none; } /* el filete entre hermanos es de la caja clara: mata al selector hermano de escritorio, que pesa más que la regla de arriba */ .submenu__enlace--doble + .submenu__enlace--doble { box-shadow: none; } .submenu__enlace:hover, .submenu__enlace[aria-current='page'] { background: none; color: var(--durazno); } /* 38 px era menos que el mínimo de 44 que necesita un dedo. */ .barra .barra__enlace--boton { min-height: 3rem; } /* En el menú de pantalla completa va al pie, al lado del idioma: las dos son herramientas y no compiten con la navegación. */ .barra__utiles { margin-top: 1.75rem; gap: 0.6rem; } .barra__acceso { min-width: 2.75rem; min-height: 2.75rem; border-color: var(--sobre-oscuro-tenue); } .idioma__boton { min-height: 2.75rem; border-color: var(--sobre-oscuro-tenue); font-size: var(--t-menor); letter-spacing: 0.1em; } .idioma__lista { top: auto; bottom: calc(100% + 0.5rem); right: auto; left: 0; } } /* El resto de la adaptación sigue en 56rem: sólo la barra necesitaba pasar antes a hamburguesa. Mover portada, notas y franjas a 1184 px habría cambiado la maqueta de toda la tableta sin motivo. */ @media (max-width: 56rem) { .nota { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .nota__fecha { order: -1; } .nota:hover { padding-inline: 0.75rem; } .portada { min-height: min(94svh, 44rem); } .portada__cuerpo { padding-block: 7rem 2.5rem; } /* en pantalla angosta el texto ocupa más alto y cae sobre la parte clara de la foto: el velo se refuerza para que siga legible */ .portada__velo { background: linear-gradient(180deg, rgba(23,17,14,0.62) 0%, rgba(23,17,14,0.54) 24%, rgba(23,17,14,0.66) 56%, rgba(23,17,14,0.90) 100%); } .franja__fila > .enlace { margin-left: 0; width: 100%; } } /* ============================================================ MÓVIL: lo que la auditoría encontró 1. Los enlaces con flecha medían 30 px de alto y los del pie 32. El mínimo para un dedo es 44. 2. El rótulo de idioma y los títulos del pie iban en 11 px. Once píxeles se leen en un monitor a 60 cm, no en un teléfono a 30. 3. La foto de portada se sale 9 px por lado por el zoom de entrada. Nadie la ve salir —el contenedor recorta— pero en un navegador sin recorte agrega barra horizontal. ============================================================ */ @media (max-width: 56rem) { .enlace, .enlace-flecha { min-height: 2.75rem; display: inline-flex; align-items: center; } .pie a, .pie__rejilla a { display: inline-flex; align-items: center; min-height: 2.75rem; } .pie h3 { font-size: var(--t-menor); letter-spacing: 0; } .idioma__lista a { font-size: var(--t-menor); min-height: 2.75rem; } .idioma__lista span { font-size: var(--t-menor); } .portada__fondo { overflow: hidden; } } /* ---- móvil, segunda tanda --------------------------------- La tabla de la ficha medía 704 px en una pantalla de 390: se desplaza sola dentro de su caja en vez de empujar la página. Las pestañas del filtro se salían por la derecha: pasan a fila que se arrastra. Y los enlaces que quedaban por debajo de 44 px suben. */ @media (max-width: 56rem) { .tabla-envoltura, .ficha-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla { min-width: 34rem; } .pestanas { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); } .pestanas::-webkit-scrollbar { display: none; } .pestana { flex: 0 0 auto; scroll-snap-align: start; min-height: 2.75rem; } input, select, textarea, button { min-height: 2.75rem; } .tarjeta a, .tarjeta__enlace, .dato a, .nota a, .mosaico__pieza, /* Objetivo táctil sin romper el corte de línea: inline-flex no deja que un enlace largo quiebre, así que el alto se gana con padding sobre inline-block. */ .eje li > a, li > a, .dato .ficha-valor a, .miga a, .migas a, .ficha-portada__fila a, a.dato-directo__v, .bloque-contacto a, .contacto-directo a { display: inline-block; padding-block: 0.6rem; min-height: 0; } /* el código de idioma iba en 11 px: en un teléfono no se lee */ .idioma__lista a span { font-size: var(--t-meta); letter-spacing: 0.08em; } .tarjeta__pie, .tarjeta__estado { font-size: var(--t-meta); } /* el zoom de entrada de la portada agranda la foto un 5%: se recorta en el contenedor y deja de asomar por los lados */ .portada, .portada__fondo, .portada__capa { overflow: hidden; } } @media (max-width: 34rem) { .btn { width: 100%; } .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .portada__acciones { flex-direction: column; align-items: stretch; } .cierre__acciones { width: 100%; flex-direction: column; } } /* ============================================================ MENOS MOVIMIENTO ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-revelar][data-oculto]:not([data-visible]) { opacity: 1; transform: none; } /* sin deriva y sin rotación: se ve una sola foto, quieta */ .portada__fondo { animation: none; transform: scale(1.04); } .portada__capa[data-activa] { transition: none; } .btn::before { transition: none; } .js .portada__frase { transition: none; transform: none; } @view-transition { navigation: none; } } /* ============================================================ IMPRESIÓN ============================================================ */ @media print { .barra, .portada__acciones, .cierre__acciones, .hamburguesa, .idioma { display: none; } body { background: #fff; color: #000; } .b-tinta, .b-cacao, .b-terra { background: #fff !important; color: #000 !important; } } /* ============================================================ PÁGINAS INTERIORES ============================================================ */ /* La barra es fija, así que la primera sección de cualquier página que no abra con foto a sangre tiene que empezar por debajo de ella. Va como regla general y no como clase, para que una página nueva no se pueda olvidar de ponerla. */ main > :first-child:not(.portada):not(.ficha-portada) { padding-top: var(--arranque); } /* Mismo piso para los cuatro encabezados de texto. Iban de 266 a 355 px según cuánto ocupara el título y la bajada de cada página: el contenido arrancaba a distinta altura en cada una y al navegar se veía el escalón. */ .encabezado { padding-bottom: 4.5rem; min-height: 0; } /* Quiénes somos sigue directo con la fila de respaldo, sin aire propio */ .encabezado--junto { padding-bottom: 0; } /* El descender de la última línea no entra en la caja de línea —con line-height 1.02 se sale casi 10 px—. Sin esto, una sección que no traiga padding propio le come la cola a la «y» del título. Va acá y no en cada página, para que ninguna nueva herede el problema. */ .encabezado__fila { padding-bottom: 0.16em; } /* El ancho de la bajada era un style suelto en cada página: 30rem acá, 32 allá, 34 y 38 en las portadas con foto. Nadie lo decidió, se fue acumulando. Va una vez, en el componente. */ .encabezado__fila .bajada { max-width: 30rem; } /* Y el punto donde la bajada cae debajo del título tampoco lo decidía nadie: dependía de cuánto midiera el título de cada página, así que una quebraba a 1100 px y otra a 900. Con bases fijas quiebran todas en el mismo lugar. */ .encabezado__fila > h1 { flex: 1 1 24rem; min-width: 0; } .encabezado__fila > .bajada { flex: 0 1 30rem; min-width: 0; } .ficha-portada .bajada { max-width: 34rem; margin-top: 1.5rem; color: var(--sobre-oscuro); } .encabezado__fila { display: flex; /* Arriba, no abajo. Con el título en dos líneas y la bajada en tres, alinear por el pie dejaba la bajada colgando en el medio del bloque. Arranca donde arranca el título y se lee como una sola entrada. */ align-items: flex-start; /* si el título es largo la bajada cae a la línea de abajo: ahí el hueco lo manda el row-gap, y con 6rem quedaba un agujero */ gap: 1.2rem clamp(2rem, 6vw, 6rem); flex-wrap: wrap; } /* El título tiene interlínea 1.02 y la bajada 1.6: pegando las cajas por arriba, la primera línea de la bajada queda más alta que la del título. Este margen las empareja ópticamente. */ .encabezado__fila > .bajada { margin-top: 0.5rem; } /* ---------- grupo (logos de respaldo) -------------------------- Una fila baja, apoyada sobre un filete, con los dos logos a la misma altura óptica. No es una sección: es una firma. */ .grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--filete); padding-top: 1.4rem; } .grupo__rotulo { color: var(--gris-tibio); } .grupo__lista { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.75rem, 4vw, 3rem); list-style: none; margin: 0; padding: 0; } .grupo__lista img { display: block; width: auto; height: 2rem; } /* ---------- filtros ------------------------------------------ Una sola línea apoyada sobre un filete. La dimensión principal —ciudad en Desarrollos, tema en Noticias— va en pestañas: es la decisión que se toma primero y conviene verla entera. La secundaria se pliega en el mismo campo subrayado de los formularios. Antes eran ocho cajas y dos rótulos: pesaban más que las once tarjetas que venían abajo, que es exactamente al revés de lo que tiene que pasar. */ .filtros { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem clamp(1.5rem, 3vw, 2.5rem); margin-top: 0; /* el filete de abajo tiene que separar, no tocar: sin este margen la primera fila de fotos arrancaba pegada al filtro */ margin-bottom: clamp(1.75rem, 3vw, 2.75rem); border-bottom: 1px solid var(--filete); } /* la dimensión principal, en pestañas. Todas van en 600: si sólo se engrosara la activa, cambiar de pestaña movería a las de al lado. La activa se distingue por color y por el filete terracota, que no ocupa espacio. */ .pestanas { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 2.4vw, 2.25rem); } .pestana { padding: 0 0 0.9rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--t-bajada); font-weight: 600; color: var(--gris-tibio); cursor: pointer; transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .pestana:hover { color: var(--texto); } .pestana:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; } .pestana[aria-pressed='true'] { color: var(--tinta); border-bottom-color: var(--terracota); } /* la dimensión secundaria y la cuenta, del otro lado */ .filtros__lado { margin-left: auto; display: flex; align-items: baseline; gap: clamp(1rem, 2vw, 1.75rem); padding-bottom: 0.85rem; } .filtros__campo { display: flex; align-items: baseline; gap: 0.7rem; } .filtros__campo .etiq { color: var(--gris-tibio); } .filtros__campo select { appearance: none; border: 0; border-bottom: 1px solid var(--linea-campo); border-radius: 0; background: none; padding: 0.1rem 1.5rem 0.3rem 0; font: inherit; font-size: var(--t-lectura); color: var(--texto); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D625C' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.1rem center; transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva); } .filtros__campo select:hover { border-bottom-color: var(--terracota); color: var(--terracota); } /* Al enfocarlo se engrosa el subrayado, igual que los campos de los formularios. El recuadro del navegador dibujaba una caja alrededor —justo lo que este componente no tiene— y se veía roto. */ .filtros__campo select:focus, .filtros__campo select:focus-visible { outline: none; border-bottom-color: var(--terracota); border-bottom-width: 2px; padding-bottom: calc(0.3rem - 1px); } .filtros__cuenta { color: var(--gris-tibio); white-space: nowrap; } /* Elegir una opción de un conjunto, en formularios: el motivo de consulta en Contacto y en Propietarios. Botón de esquina viva —sin pastillas ni radios decorativos—: contorno en reposo, relleno terracota cuando está elegido. */ .opcion__marca { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.15rem; border: 1px solid var(--filete); background: transparent; color: var(--texto); font-size: var(--t-menor); line-height: 1.3; text-align: center; cursor: pointer; transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva), color var(--rapido) var(--curva); } .opcion:hover .opcion__marca { border-color: var(--terracota); color: var(--terracota); } .opcion input:checked + .opcion__marca { background: var(--terracota); border-color: var(--terracota); color: var(--crema); font-weight: 600; } /* elegir una opción, en formularios: el radio nativo sigue ahí —para el teclado, el lector de pantalla y el envío del form— pero se muestra con el mismo botón que los filtros */ .opciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .opcion { position: relative; display: inline-flex; } .opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .opcion input:focus-visible + .opcion__marca { outline: 2px solid var(--terracota); outline-offset: 2px; } /* sobre fondo oscuro, los textos de lectura y los menores tienen que cambiar de color: si no, quedan casi invisibles */ .sobre-oscuro .lectura { color: var(--sobre-oscuro); } .sobre-oscuro .menor { color: var(--sobre-oscuro-tenue); } .sobre-oscuro .opcion__marca { border-color: var(--sobre-oscuro-tenue); color: var(--crema); } .sobre-oscuro .opcion:hover .opcion__marca { border-color: var(--crema); color: var(--crema); } .sobre-oscuro .opcion input:checked + .opcion__marca { background: var(--crema); border-color: var(--crema); color: var(--terracota); } /* La ficha de formulario es blanca aunque esté sobre una banda oscura, así que adentro vuelve a mandar la versión clara del componente. */ .tarjeta-form .opcion__marca { border-color: var(--filete); background: transparent; color: var(--texto); } .tarjeta-form .opcion:hover .opcion__marca { border-color: var(--terracota); color: var(--terracota); } .tarjeta-form .opcion input:checked + .opcion__marca { background: var(--terracota); border-color: var(--terracota); color: var(--crema); } /* ============================================================ MOSAICO DE PROYECTOS (inicio) Seis tarjetas iguales en una rejilla pareja era el objeto más plano de la página: todo del mismo tamaño, foto chica y un párrafo debajo de cada una. Acá manda la foto —las piezas cambian de tamaño— y encima va sólo lo que hace falta para elegir: nombre y ciudad. El texto de la sección entra como una pieza más de la composición, no como un encabezado aparte. ============================================================ */ .mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(12rem, 17.5vw, 18rem)); /* dos piezas altas cruzadas —una arriba a la izquierda del centro, otra abajo a la derecha— y el resto apaisadas: la composición no tiene dos filas iguales, que era todo el problema */ grid-template-areas: "txt a b" "d a c" "e f c"; gap: clamp(0.7rem, 1.3vw, 1.1rem); } .mosaico__texto { grid-area: txt; align-self: start; padding-right: clamp(1rem, 2.5vw, 2.5rem); } .mosaico__pieza--a { grid-area: a; } .mosaico__pieza--b { grid-area: b; } .mosaico__pieza--c { grid-area: c; } .mosaico__pieza--d { grid-area: d; } .mosaico__pieza--e { grid-area: e; } .mosaico__pieza--f { grid-area: f; } .mosaico__pieza { position: relative; display: block; overflow: hidden; background: var(--arena-media); color: var(--crema); } .mosaico__pieza picture { display: block; width: 100%; height: 100%; } .mosaico__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); } .mosaico__pieza:hover img, .mosaico__pieza:focus-visible img { transform: scale(1.045); } /* el velo sube desde abajo para que el nombre se lea sobre cualquier foto, clara u oscura */ .mosaico__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,17,14,0) 34%, rgba(23,17,14,0.30) 62%, rgba(23,17,14,0.78) 100%); } .mosaico__pieza::after { content: ''; position: absolute; inset: 0; background: rgba(23,17,14,0.16); opacity: 0; transition: opacity var(--medio) var(--curva); } .mosaico__pieza:hover::after, .mosaico__pieza:focus-visible::after { opacity: 1; } .mosaico__pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 1.7vw, 1.5rem); } .mosaico__nombre { display: block; font-size: var(--t-tarjeta); line-height: 1.14; } .mosaico__ciudad { display: block; margin-top: 0.45rem; color: var(--sobre-oscuro); } /* El estado del proyecto aparece al pasar el mouse, entre el nombre y la ciudad: la tarjeta cuenta algo más sin cargar la composición en reposo. */ .mosaico__estado { display: block; font-size: var(--t-menor); color: var(--durazno); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--medio) var(--curva), opacity var(--medio) var(--curva), margin var(--medio) var(--curva); } .mosaico__pieza:hover .mosaico__estado, .mosaico__pieza:focus-visible .mosaico__estado { max-height: 1.8rem; opacity: 1; margin-top: 0.35rem; } @media (prefers-reduced-motion: reduce) { .mosaico__estado { transition: none; } } .mosaico__flecha { flex-shrink: 0; margin-bottom: 0.4rem; opacity: 0; transform: translateX(-0.4rem); transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva); } .mosaico__pieza:hover .mosaico__flecha, .mosaico__pieza:focus-visible .mosaico__flecha { opacity: 1; transform: none; } /* la tarjeta que el filtro descarta se va con su propia transición */ .tarjeta[hidden] { display: none; } .vacio { padding-block: 4rem; text-align: center; } /* ============================================================ PORTADA DE PÁGINA INTERIOR ============================================================ */ .ficha-portada { position: relative; display: flex; flex-direction: column; justify-content: flex-end; /* Una sola altura para las cuatro portadas con foto —proyecto, Propietarios, Cresia Alquila e Investor Pass—. Antes Investor tenía la suya, 160 px más alta, y al pasar de una a otra se notaba el salto. Es piso, no tope: Investor sigue creciendo porque abajo lleva la banda de datos, y eso es contenido, no una excepción de diseño. */ min-height: var(--portada-ficha); color: var(--crema); overflow: hidden; } .ficha-portada__fondo { position: absolute; inset: 0; } .ficha-portada__fondo picture { display: block; width: 100%; height: 100%; } .ficha-portada__fondo img { width: 100%; height: 100%; object-fit: cover; } .ficha-portada__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,17,14,0.72) 0%, rgba(23,17,14,0.22) 34%, rgba(23,17,14,0.42) 66%, rgba(23,17,14,0.88) 100%), linear-gradient(94deg, rgba(83,29,18,0.76) 0%, rgba(83,29,18,0.34) 40%, rgba(83,29,18,0) 72%); } .ficha-portada__cuerpo { position: relative; z-index: 1; padding-block: 7.5rem 2.75rem; } .ficha-portada__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; } .ficha-portada__acciones { display: flex; gap: 0.75rem; flex-wrap: wrap; } .miga { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: var(--t-menor); color: var(--sobre-oscuro); } .miga a { transition: color var(--rapido) var(--curva); } .miga a:hover { color: var(--crema); } .miga [aria-current] { color: var(--crema); } /* ============================================================ FICHA DE PROYECTO ============================================================ */ .ficha-valor { font-size: var(--t-lectura); font-weight: 600; color: var(--tinta); text-align: right; } .ficha-valor a { color: var(--tinta); display: inline-block; padding-block: 0.1rem; min-height: 1.5rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color var(--rapido) var(--curva); } .ficha-valor a:hover, .ficha-valor a:focus-visible { color: var(--terracota); } /* lo que todavía falta completar, siempre visible como tal: nunca un valor verosímil que pase por real */ .pendiente, .pendiente td { color: var(--terracota); } /* una foto sola, a lo ancho del contenido y con recorte fijo: sin esto la imagen se planta en su ancho natural y queda coja */ .foto-ancha img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ---------- galería de Quiénes somos: dos cintas ---------------- Diecisiete fotos en dos filas del mismo alto que se mueven despacio, la de arriba hacia la izquierda y la de abajo hacia la derecha. Cada foto conserva su proporción (3:2, 4:3, 1:1, 4:5): el alto lo fija la cinta y el ancho sale de la foto. site.js (punto 11) clona el contenido de la pista una vez y le pone la duración según el largo, así las dos van a la misma velocidad. El hueco va como margen a la derecha de cada foto y no como gap: con eso la mitad de la pista mide exactamente una vuelta y el salto del final no se ve. En dist cada foto es un ; en el demo, un pelado. -------------------------------------------------------------- */ .cintas { --alto-cinta: clamp(9rem, 2rem + 13.5vw, 14.5rem); --hueco-cinta: clamp(0.6rem, 1.2vw, 1rem); } .cinta { overflow: hidden; } .cinta + .cinta { margin-top: var(--hueco-cinta); } .cinta__pista { display: flex; width: max-content; } .cinta__pista > picture, .cinta__pista > img { flex: none; display: block; height: var(--alto-cinta); margin-right: var(--hueco-cinta); overflow: hidden; } .cinta__pista img { display: block; height: 100%; width: auto; object-fit: cover; } .cinta__pista > picture > img { transition: transform .9s cubic-bezier(.2,.7,.2,1); } .cinta__pista > picture:hover > img { transform: scale(1.04); } @keyframes cinta-avanza { to { transform: translateX(-50%); } } .cinta.is-lista .cinta__pista { animation: cinta-avanza var(--dur, 80s) linear infinite; } .cinta--der.is-lista .cinta__pista { animation-direction: reverse; } /* se frena con el mouse encima, con el foco adentro y fuera de pantalla */ .cinta:hover .cinta__pista, .cinta:focus-within .cinta__pista, .cinta.is-fuera .cinta__pista { animation-play-state: paused; } /* con «reducir movimiento» (o sin JS) la cinta no se mueve sola: se recorre a mano */ .cinta:not(.is-lista) { overflow-x: auto; scrollbar-width: thin; } /* ---------- galería simple: tres fotos en fila ---------------- La ficha de proyecto usaba «galeria» antes de que existiera el mosaico de Quiénes somos. Cuando el mosaico se quedó con ese nombre, estas tres fotos cayeron a una columna de doce y salían de 95 px. Cada pieza tiene ahora su propia clase. */ .galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); } .galeria > picture, .galeria > img { display: block; min-width: 0; aspect-ratio: 4 / 3; } .galeria > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 56rem) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galeria > :nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; } } @media (max-width: 34rem) { .galeria { grid-template-columns: minmax(0, 1fr); } .galeria > :nth-child(3) { grid-column: span 1; aspect-ratio: 4 / 3; } } .hito { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: baseline; gap: 1.5rem; padding-block: 1.4rem; border-top: 1px solid var(--filete-oscuro); } .hito:last-child { border-bottom: 1px solid var(--filete-oscuro); } .hito__fecha { color: var(--sobre-oscuro-tenue); } .hito__que { font-size: var(--t-bloque); font-weight: 600; } .hito__estado { color: var(--sobre-oscuro-tenue); } .hito__estado--hecho { color: var(--durazno); } /* Mapa satelital de la ficha: la caja tiene el filete del sistema y el lienzo de Leaflet adentro. Las etiquetas se dibujan con las mismas tintas del sitio (crema sobre tinta), sin sombra de más. */ .mapa { position: relative; background: var(--tinta); border: 1px solid var(--filete); height: clamp(20rem, 36vw, 30rem); overflow: hidden; } .mapa__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--tinta); } .mapa__reset { position: absolute; right: 1rem; top: 1rem; z-index: 500; padding: 0.55rem 0.9rem; border: 1px solid var(--filete-oscuro); background: rgba(23, 17, 14, 0.72); color: var(--crema); font: inherit; font-size: var(--t-menor); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva); } .mapa__reset.is-on { opacity: 1; pointer-events: auto; transform: none; } .mapa__reset:hover { background: var(--tinta); } .mapa .leaflet-container { font-family: inherit; background: var(--tinta); } .leaflet-control-attribution { font-size: 10px; background: rgba(23, 17, 14, 0.6) !important; color: var(--sobre-oscuro) !important; padding: 2px 8px; margin: 0 0 0.6rem 0.6rem !important; } .leaflet-control-attribution a { color: var(--crema) !important; } .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; margin: 1rem 0 0 1rem !important; } .leaflet-control-zoom a { width: 32px !important; height: 32px !important; line-height: 30px !important; border-radius: 0 !important; background: rgba(23, 17, 14, 0.72) !important; color: var(--crema) !important; border: 1px solid var(--filete-oscuro) !important; } .leaflet-control-zoom a:hover { background: var(--tinta) !important; } .leaflet-marker-icon.mapa-eti-wrap { background: none; border: 0; } .mapa-pin { display: grid; place-items: center; } .mapa-pin__punto { width: 16px; height: 16px; border-radius: 50%; background: var(--durazno); box-shadow: 0 0 0 4px rgba(23, 17, 14, 0.55); } .mapa-pin__aura { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--durazno); animation: mapa-aura 2.6s ease-out infinite; } @keyframes mapa-aura { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } .mapa-eti { display: inline-block; white-space: nowrap; padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600; line-height: 1.2; background: var(--crema); color: var(--tinta); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva); } .mapa-eti--punto { background: rgba(23, 17, 14, 0.62); color: var(--crema); font-weight: 400; opacity: 0; transform: translateY(4px); } .mapa-eti--punto.is-on { background: var(--crema); color: var(--tinta); font-weight: 600; opacity: 1; transform: none; } .mapa-eti--izq { transform: translate(-100%, 4px); } .mapa-eti--izq.is-on { transform: translate(-100%, 0); } .mapa-eti--dist { font-size: 0.75rem; padding: 0.35rem 0.6rem; } .mapa-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; background: rgba(23, 17, 14, 0.78); color: var(--crema); border: 1px solid rgba(255, 233, 210, 0.5); cursor: pointer; transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva), background var(--rapido) var(--curva); } .mapa-num:hover, .mapa-num.is-on { background: var(--crema); color: var(--tinta); transform: scale(1.12); } .mapa-num.is-apagado { opacity: .38; transform: scale(.9); } .mapa-num.is-apagado:hover { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .mapa-pin__aura { animation: none; } } /* La lista de puntos: filas con filete, número chico, nombre y la distancia a la derecha. La fila activa se marca en terracota. */ .puntos { list-style: none; margin: 1.6rem 0 0; padding: 0; } .punto { border-top: 1px solid var(--filete); } .punto:last-child { border-bottom: 1px solid var(--filete); } .punto button { display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 0.95rem 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--tinta); transition: padding-left var(--rapido) var(--curva); } .punto__n { color: var(--gris-tibio); min-width: 1.6rem; } .punto__nombre { font-size: var(--t-lectura); } .punto__dist { margin-left: auto; padding-left: 1rem; white-space: nowrap; font-size: var(--t-lectura); font-weight: 600; color: var(--tinta); } .punto button:hover, .punto.is-on button { padding-left: 0.6rem; } .punto.is-on { border-color: var(--terracota); } .punto.is-on + .punto { border-top-color: var(--terracota); } .punto.is-on .punto__n, .punto.is-on .punto__dist { color: var(--terracota); } .puntos.hay-activo .punto:not(.is-on) button { opacity: .6; } /* ============================================================ QUIÉNES SOMOS ============================================================ */ /* la banda sin texto encima: es sólo la foto, a todo el ancho */ /* ------------------------------------------------------------ ENUNCIADO (misión, visión) Dos franjas: el texto —rótulo y párrafo, juntos— y la foto. La segunda fila espeja a la primera, así el peso alterna de lado. Van centradas en vertical a propósito: el texto es más corto que la foto y alineado arriba dejaba un vacío abajo que se leía como error, no como aire. Centrado, el hueco se reparte y las dos franjas se apoyan una en la otra. ------------------------------------------------------------ */ .enunciado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5.5vw, 5rem); align-items: center; padding-top: 1.6rem; border-top: 1px solid var(--filete); } .enunciado + .enunciado { margin-top: clamp(2.5rem, 6vw, 4.5rem); } /* Al espejar hay que dar vuelta también las proporciones: si no, la foto cae en la franja angosta y el párrafo corto —el de visión— se queda con la ancha. Así las dos fotos miden lo mismo y los dos textos también. */ .enunciado--espejo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .enunciado--espejo .enunciado__foto { order: 1; } .enunciado--espejo .enunciado__texto { order: 2; } .enunciado__titulo { /* En 300 pesaba lo mismo que el párrafo y no había jerarquía: se leían como dos textos del mismo rango. Va en 600, como los demás títulos de tarjeta del sitio. */ font-size: var(--t-tarjeta); font-weight: 600; line-height: 1.15; letter-spacing: -0.032em; color: var(--tinta); } .enunciado__cuerpo { /* Iba en cuerpo de titular —44 px— y con el párrafo entero eran dos muros de 800 px. En cuerpo de lectura entra completo. */ margin-top: 1.1rem; font-size: var(--t-lectura); line-height: 1.7; max-width: 34rem; color: var(--texto); } .enunciado__foto img { display: block; width: 100%; height: auto; } /* a quiénes acompañamos: seis perfiles, filete arriba de cada uno */ .perfiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.9rem, 3.4vw, 3rem) clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.25rem, 4vw, 3.25rem); } .perfil { padding-top: 1.35rem; border-top: 1px solid var(--filete); } .perfil__texto { margin-top: 0.85rem; font-size: var(--t-menor); line-height: 1.62; color: var(--texto); } /* el equipo reusa las filas de «edificio», pero sobre fondo oscuro */ .edificio--claro { border-top-color: var(--filete-oscuro); } .edificio--claro.edificio--ultimo { border-bottom-color: var(--filete-oscuro); } .edificio--claro .edificio__ciudad { color: var(--sobre-oscuro-tenue); } /* ============================================================ FORMULARIOS ============================================================ */ .formulario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } /* ---------- formulario partido ------------------------------- El cierre de las tres páginas de producto. Antes cada una lo resolvía distinto —una sobre cacao, otra sobre durazno, otra en el bloque de cierre— y el formulario iba adentro de una tarjeta blanca flotando sobre el fondo. Ahora es una sola pieza, a sangre de lado a lado: el formulario apoyado sobre el panel, sin caja, y una foto ocupando la otra mitad a lo alto. El contenido del panel se alinea con el margen de la página, así que la columna izquierda coincide con el resto del sitio y no flota por su cuenta. */ /* ---------- campos de formulario ----------------------------- Dos por fila. Los datos cortos —nombre y correo, teléfono y ciudad— entran de a pares porque se responden de memoria y en una sola columna estiraban el formulario a una tira larguísima. Lo que pide pensar o escribir (el mensaje) se lleva la fila entera con .campo--ancho. Debajo de 48rem vuelve todo a una columna. -------------------------------------------------------------- */ .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; } .campo { display: block; min-width: 0; } .campo--ancho { grid-column: 1 / -1; } @media (max-width: 48rem) { .campos { grid-template-columns: minmax(0, 1fr); } } /* El rótulo era un «etiq»: 11 px, versalita, muy espaciado y gris claro. Eso es rótulo de sección, no de campo. Va en cuerpo chico, caja baja y del color del texto, pegado a su campo. */ .campo__rotulo { display: block; margin-bottom: 0.4rem; font-size: var(--t-menor); font-weight: 500; line-height: 1.3; color: var(--texto); } .campo--req > .campo__rotulo::after { content: ' *'; color: var(--terracota); } /* Y el campo pasa de subrayado a caja rellena. Un subrayado se lee como adorno; una caja con fondo propio dice «escribí acá» sin que nadie lo explique. */ .campo input, .campo textarea, .campo select { width: 100%; min-height: 3rem; background: var(--arena-media); border: 1px solid var(--filete); padding: 0.8rem 1rem; font-size: var(--t-lectura); line-height: 1.45; color: var(--texto); font-family: inherit; transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .campo textarea { min-height: 7.5rem; resize: vertical; } .campo input::placeholder, .campo textarea::placeholder { color: var(--gris-tibio); opacity: 0.75; } .campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--linea-campo); } .campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; background: var(--crema); border-color: var(--terracota); } .campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { outline: none; } /* El select nativo pierde la flecha al quitarle el aspecto del sistema: se le dibuja una. */ .campo select { appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D625C' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; } .form__pie { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; } /* ============================================================ CONSULTA (el formulario de todas las páginas) Tres piezas apiladas: intro a la izquierda, hoja del formulario a la derecha, foto a lo ancho abajo. La foto estaba al costado ocupando media pantalla y competía con el formulario justo cuando hay que completarlo; abajo cierra la página sin disputar nada. ============================================================ */ .consulta { background: var(--arena); color: var(--texto); padding-block: var(--seccion); } .consulta__fila { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .consulta__intro h2 { color: var(--cacao); } .consulta__bajada { margin-top: 1.2rem; max-width: 30rem; } .consulta__intro > .lectura { margin-top: 1.2rem; max-width: 32rem; } /* Los datos directos: quien no quiere llenar un formulario tiene la vía a mano, con su icono, sin buscarla en el pie. */ .datos-directos { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 1.5rem; } .dato-directo { display: flex; align-items: flex-start; gap: 1rem; } .dato-directo__icono { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--filete); color: var(--terracota); } .dato-directo__cuerpo { display: block; } .dato-directo__r { display: block; font-size: var(--t-menor); font-weight: 600; color: var(--tinta); } .dato-directo__v { display: block; margin-top: 0.15rem; font-size: var(--t-lectura); color: var(--gris-tibio); } a.dato-directo__v { color: var(--terracota); } a.dato-directo__v:hover { text-decoration: underline; } /* La hoja: fondo propio y filete, nada más. Llevaba una sombra baja y desentonaba: en todo el sitio las piezas se separan del fondo con un filete, no levantándose. Se lee «esto se completa» por el cambio de fondo, que ya alcanza. */ .consulta__form { background: var(--crema); border: 1px solid var(--filete); padding: clamp(1.5rem, 3vw, 2.25rem); } .consulta__form .campos { gap: 1.1rem; } /* Los dos botones caían pegados, borde con borde, y se leían como una sola pieza partida al medio. Van apilados con aire. */ .consulta__pie { margin-top: clamp(1.5rem, 2.5vw, 2rem); display: grid; gap: 0.7rem; } .consulta__pie .btn { width: 100%; min-height: 3.25rem; } .consulta__pie .menor { display: block; margin-top: 0.85rem; color: var(--gris-tibio); } .consulta__nota { margin-top: 1.25rem; color: var(--gris-tibio); } /* La banda de cierre, a lo ancho del contenido. */ .consulta__banda { margin-top: clamp(3rem, 6vw, 5rem); } /* Marco fijo y apaisado: las fotos que van acá vienen con recortes distintos y a tamaño natural una de vertical se comía la pantalla entera. El marco manda, la foto se acomoda. */ .consulta__banda img { display: block; width: 100%; aspect-ratio: 21 / 9; max-height: 26rem; object-fit: cover; object-position: center; } @media (max-width: 48rem) { .consulta__banda img { aspect-ratio: 16 / 9; } } /* Sin datos directos —el resto de las páginas— el intro es más angosto y la hoja se lleva el peso. */ .consulta--simple .consulta__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } /* Apilada, en el orden en que está escrita: primero el título que dice de qué se trata, después las vías directas —en el teléfono, llamar o escribir por WhatsApp gana casi siempre al formulario— y al final la hoja. Poner la hoja arriba dejaba al que llega con una fila de chips sin encabezado. */ @media (max-width: 62rem) { .consulta__fila, .consulta--simple .consulta__fila { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .consulta__bajada, .consulta__intro > .lectura { max-width: none; } .datos-directos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin-top: 1.75rem; } } @media (max-width: 40rem) { .datos-directos { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; } .dato-directo__icono { width: 2.5rem; height: 2.5rem; } } /* ============================================================ BLOQUES CON ICONO Un solo componente para las cuatro rejillas que antes eran texto corrido: los pasos de Cresia Alquila, los canales de publicación, los ejes de la administración y los diferenciales. Cada bloque es una caja con filete, un icono y su texto. El icono no decora: da una entrada visual para saltear el bloque que no interesa, que es justo lo que una lista de párrafos no deja hacer. ============================================================ */ .bloques { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: clamp(0.9rem, 1.8vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-auto-rows: 1fr; /* todas las cajas del mismo alto, también entre filas */ counter-reset: bloque; } .bloques--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Cinco cajas en una fila daban columnas de 15 rem con el texto en escalera. Tres por fila es el techo. */ .bloques--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 62rem) { .bloques--dos, .bloques--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .bloques, .bloques--dos, .bloques--tres { grid-template-columns: minmax(0, 1fr); } } .bloque { position: relative; border: 1px solid var(--filete); padding: clamp(1.25rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.7rem; background: var(--crema); } /* Sobre crema la caja se perdía: ahí va al revés. */ .b-crema .bloque { background: var(--arena); } .bloque__icono { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--filete); color: var(--terracota); flex: none; } .bloque__icono .icono { width: 1.5rem; height: 1.5rem; } .bloque__t { font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; color: var(--tinta); } .bloque__d { margin: 0; color: var(--gris-tibio); font-size: var(--t-lectura); line-height: 1.55; } /* El número va arriba a la derecha, chico: ordena sin competir. */ .bloque__n { position: absolute; top: clamp(1.25rem, 2.2vw, 1.75rem); right: clamp(1.25rem, 2.2vw, 1.75rem); font-size: 1.5rem; font-weight: 300; color: var(--filete); line-height: 1; } .bloque__lista { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .bloque__lista li { position: relative; padding-left: 1.1rem; color: var(--gris-tibio); font-size: var(--t-menor); line-height: 1.5; } .bloque__lista li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 1px; background: var(--terracota); } .bloque__lista a { color: var(--terracota); } /* Variante oscura, para la sección de servicios del inicio: la caja apenas se levanta del fondo y el filete es el mismo de las filas oscuras. Sin sombra, como el resto del sitio. */ .bloques--oscuro .bloque { background: rgba(255, 233, 210, 0.04); border-color: var(--filete-oscuro); transition: border-color var(--medio) var(--curva); } .bloques--oscuro .bloque:hover { border-color: var(--sobre-oscuro-tenue); } .bloques--oscuro .bloque__icono { border-color: var(--filete-oscuro); color: var(--durazno); } .bloques--oscuro .bloque__t { color: var(--crema); } .bloques--oscuro .bloque__d { color: var(--sobre-oscuro); } /* ---------- edificios en administración ----------------------- Eran cinco renglones de texto. Cada uno pasa a ser su ficha con foto. De dos todavía no hay foto: en vez de dejar el hueco o poner una foto que no es, la caja se llena con el nombre en grande. Se lee como decisión, no como falta. -------------------------------------------------------------- */ .edificios { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: clamp(0.9rem, 1.8vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .ed { display: block; border: 1px solid var(--filete); background: var(--crema); } .ed__marco { display: block; aspect-ratio: 4 / 3; overflow: hidden; } /* el queda en medio: sin display block no le pasa la altura a la foto y la ficha salía en blanco */ .ed__marco picture { display: block; width: 100%; height: 100%; } .ed__marco img { display: block; width: 100%; height: 100%; object-fit: cover; } .ed__pie { padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.3rem; } .ed__ciudad { font-size: var(--t-meta); letter-spacing: 0.02em; color: var(--gris-tibio); } .ed__nombre { font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.02em; color: var(--tinta); line-height: 1.2; } /* ---------- banda de texto sobre foto, contenida ---------------- */ .banda-foto { position: relative; overflow: hidden; } /* el alto lo pone el marco y no la foto: así la foto puede quedar fija (ver MOVIMIENTO) sin que la banda se desarme */ .banda-foto__marco { height: min(28rem, calc(100vw * 9 / 21)); } .banda-foto__marco picture { display: block; height: 100%; } .banda-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 48rem) { .banda-foto__marco { height: 75vw; } } .banda-foto__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,17,14,.72) 0%, rgba(23,17,14,.35) 55%, rgba(23,17,14,.1) 100%); } .banda-foto__cuerpo { position: absolute; inset: 0; display: grid; align-content: center; } .banda-foto__cuerpo h2 { color: var(--sobre-oscuro); max-width: 20ch; margin: 0; } /* En vertical el velo lateral tapaba casi toda la foto y quedaba una mancha gris: ahí baja desde arriba y el texto se apoya abajo. */ @media (max-width: 48rem) { .banda-foto__velo { background: linear-gradient(180deg, rgba(23,17,14,.12) 0%, rgba(23,17,14,.28) 45%, rgba(23,17,14,.78) 100%); } .banda-foto__cuerpo { align-content: end; padding-bottom: clamp(1.5rem, 5vw, 2.5rem); } } .motivo { border: 0; padding: 0; margin: 0 0 1.75rem; } .motivo legend { padding: 0; } .motivo__rotulo { margin-bottom: 0.6rem; } /* Acá faltaba la apertura del @media: todo el bloque de abajo —las pestañas en carrusel, el lado del filtro a lo ancho, el velo de portada de una sola capa y la fila de cifras apilada— se estaba aplicando también en escritorio, y además su llave de cierre quedaba suelta y se comía la regla siguiente. */ @media (max-width: 48rem) { /* las pestañas se corren de costado en vez de apilarse en tres filas, y el campo con la cuenta baja a su propia línea */ .filtros { gap: 0; } .pestanas { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pestanas::-webkit-scrollbar { display: none; } .pestana { white-space: nowrap; } .filtros__lado { margin-left: 0; width: 100%; justify-content: space-between; padding-block: 0.9rem; border-top: 1px solid var(--filete); } /* mismo motivo que en el inicio: en pantalla angosta el texto ocupa más alto y cae sobre la parte clara de la foto */ .ficha-portada__velo { background: linear-gradient(180deg, rgba(23,17,14,0.66) 0%, rgba(23,17,14,0.58) 26%, rgba(23,17,14,0.70) 58%, rgba(23,17,14,0.90) 100%); } .ficha-portada__acciones { width: 100%; } .ficha-valor { text-align: left; } .cifra-fila { flex-direction: column; align-items: flex-start; gap: 0.35rem; } } /* ============================================================ PIEZAS QUE ESTABAN SIN ESTILO Estas clases venían escritas en el HTML desde el primer armado y nunca llegaron a la hoja. El navegador las ignoraba, así que los bloques caían pegados uno al otro y algunos datos salían todos en un mismo renglón. Ninguna inventa una forma nueva: todas repiten el filete + aire que ya usa el resto del sitio. ============================================================ */ /* ---------- Propietarios: puntos del informe ------------------ Cuatro renglones seguidos. Lo único que necesitaban era el filete que ya separa los datos en el resto de la página. */ .fila-simple { margin: 0; padding: 0.8rem 0 0.8rem 1.35rem; position: relative; border-top: 1px solid var(--filete); font-size: var(--t-lectura); line-height: 1.55; color: var(--tinta); } .fila-simple:last-child { border-bottom: 1px solid var(--filete); } .fila-simple::before { content: ''; position: absolute; left: 0; top: 1.5em; width: 0.55rem; height: 1px; background: var(--terracota); } /* ---------- Investor Pass: beneficios principales ------------- */ .beneficios { margin-top: 1.4rem; display: grid; } .beneficio { margin: 0; padding: 0.75rem 0 0.75rem 1.35rem; position: relative; border-top: 1px solid var(--filete); font-size: var(--t-lectura); line-height: 1.5; color: var(--texto); } .beneficio:last-child { border-bottom: 1px solid var(--filete); } .beneficio::before { content: ''; position: absolute; left: 0; top: 1.45em; width: 0.55rem; height: 1px; background: var(--terracota); } /* ---------- Investor Pass: qué incluye el servicio ------------ Eran cinco pares título/texto uno encima del otro sin aire. Van en tres columnas con filete arriba, como los bloques de Propietarios: la misma pieza, la misma lectura. */ .incluye { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem); } .incluye__item { border-top: 1px solid var(--filete); padding-top: 1.3rem; } .incluye__item h3 { margin: 0; font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--tinta); } .incluye__item p { margin: 0.6rem 0 0; font-size: var(--t-lectura); line-height: 1.55; color: var(--gris-tibio); } .incluye__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; } @media (max-width: 62rem) { .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .incluye { grid-template-columns: minmax(0, 1fr); } } /* ---------- Investor Pass: rentas fuera del alcance impositivo ---- Lista numerada apoyada en la página, igual que en el Figma. */ .rentas__t { font-size: 1.0625rem; font-weight: 600; color: var(--tinta); line-height: 1.4; } .rentas__lista { list-style: none; margin: 0.9rem 0 0; padding: 0; } .rentas__lista li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--filete); color: var(--tinta); } .rentas__n { flex: none; width: 1.6rem; font-size: 0.8125rem; font-weight: 600; color: var(--terracota); font-variant-numeric: tabular-nums; } /* ---------- Investor Pass: panel oscuro del régimen fiscal ---- */ .panel-oscuro { background: var(--tinta); color: var(--sobre-oscuro); padding: clamp(1.75rem, 3.2vw, 2.5rem); } .panel-oscuro ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.8rem; } .panel-oscuro li { position: relative; padding-left: 1.35rem; font-size: var(--t-lectura); line-height: 1.5; color: var(--sobre-oscuro); } .panel-oscuro li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.55rem; height: 1px; background: var(--durazno); } /* ---------- Investor Pass: los seis pasos -------------------- Acá la numeración sí dice algo, es una secuencia real. El número manda arriba, chico y fino, y el filete marca dónde empieza cada paso. */ .pasos { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem); } .paso { border-top: 1px solid var(--filete); padding-top: 1.3rem; } /* El número en filete no se leía sobre el crema tenue de la sección: va un escalón más oscuro. Sigue siendo secundario, pero se ve. */ .paso__n { display: block; font-size: 1.5rem; color: var(--linea-campo); } .paso h3 { margin: 0.9rem 0 0; font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--tinta); } .paso p { margin: 0.6rem 0 0; font-size: var(--t-lectura); line-height: 1.55; color: var(--gris-tibio); } @media (max-width: 62rem) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .pasos { grid-template-columns: minmax(0, 1fr); } } /* ---------- Investor Pass: respaldo del grupo ----------------- Cuatro datos del cliente. Sin cajas: filete arriba y tres niveles de texto, que es como el sitio muestra cifras. */ .respaldo { margin-top: clamp(2.25rem, 4vw, 3.25rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.5rem); } .respaldo__dato { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 1.3rem; border-top: 1px solid var(--filete-oscuro); } .respaldo__cifra { font-size: var(--t-cifra); color: var(--durazno); } .respaldo__que { font-size: var(--t-bloque); font-weight: 600; line-height: 1.3; color: var(--sobre-oscuro); } .respaldo__dato .menor { color: var(--sobre-oscuro-tenue); } @media (max-width: 62rem) { .respaldo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .respaldo { grid-template-columns: minmax(0, 1fr); } } /* ---------- Investor Pass: por qué confiar ------------------- */ .confianza { margin-top: clamp(2.75rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.5rem); } .confianza h3 { margin: 0; font-size: var(--t-tarjeta); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--crema); } .confianza p { margin: 0.6rem 0 0; font-size: var(--t-lectura); line-height: 1.55; color: var(--sobre-oscuro-tenue); } @media (max-width: 62rem) { .confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .confianza { grid-template-columns: minmax(0, 1fr); } } /* ---------- Investor Pass: recuadro del monto ---------------- */ .recuadro { border: 1px solid var(--sobre-oscuro-tenue); padding: clamp(1.6rem, 2.8vw, 2.25rem); align-self: center; justify-self: start; display: grid; gap: 0.5rem; justify-items: start; } .recuadro__cifra { margin: 0; font-size: var(--t-portada); color: var(--crema); } /* ---------- Noticias: alta al aviso -------------------------- */ .suscripcion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: end; } .suscripcion .campo { min-width: 0; } .cierre--centro .suscripcion { width: min(100%, 34rem); text-align: left; } @media (max-width: 48rem) { .suscripcion { grid-template-columns: minmax(0, 1fr); align-items: stretch; } } /* ---------- Quiénes somos: «Comprometidos con la innovación» ---- Párrafo de la web, tal cual, que abre la sección de misión y visión. Dos columnas: el título a la izquierda, el texto a la derecha, sobre el mismo filete que separa los enunciados. */ .innovacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5.5vw, 5rem); align-items: start; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); } .innovacion .lectura { max-width: none; } @media (max-width: 56rem) { .innovacion { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } } /* El mosaico en el teléfono: a 390 px las tres columnas dejaban piezas de 110 px y el enlace de la sección partido en tres líneas. Abajo de 40rem el texto va arriba a todo el ancho y las seis piezas se cruzan en dos columnas, con las dos altas en diagonal como en el escritorio. */ @media (max-width: 40rem) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(4, 11rem); grid-template-areas: "txt txt" "a b" "a d" "e c" "f c"; } .mosaico__texto { padding-right: 0; padding-bottom: 0.6rem; } } /* ============================================================ MOVIMIENTO (movimiento.js) ============================================================ */ /* ---------- Lenis -------------------------------------------- Sus reglas, acá adentro para no sumar un pedido más. Con Lenis activo el desplazamiento suave lo hace él: el smooth nativo del CSS se apaga para que no se peleen. */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- titulares partidos en líneas ---------------------- La máscara de cada línea recorta justo en la caja del texto y se comía el pie de la g y de la p. Un poco de aire abajo, devuelto con margen negativo para no mover nada. */ .con-movimiento .linea { padding-bottom: 0.1em; margin-bottom: -0.1em; } /* ---------- fotos fijas ---------------------------------------- La foto se queda quieta y la sección corre por encima, como una ventana. Es background-attachment: fixed pero hecho de forma que funcione en todos los navegadores: el marco recorta (clip-path) y la foto va fija al viewport. Sólo en pantallas grandes: en el celular la barra del navegador cambia el alto de la ventana y la foto saltaría. */ @media (prefers-reduced-motion: no-preference) and (min-width: 62rem) { .banda__fondo, .ficha-portada__fondo, .banda-foto__marco { clip-path: inset(0); } .banda__fondo picture, .ficha-portada__fondo picture, .banda-foto__marco picture { display: contents; } .banda__fondo img, .ficha-portada__fondo img, .banda-foto__marco img { position: fixed; inset: 0; width: 100%; height: 100vh; max-height: none; aspect-ratio: auto; object-fit: cover; } } /* ============================================================ NOTA (una noticia abierta) ============================================================ */ /* la miga sobre fondo claro: la de las fichas va sobre foto */ .miga--clara { color: var(--gris-tibio); } .miga--clara a:hover { color: var(--terracota); } .nota-cabeza__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-top: 1.4rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--filete); } .nota-cabeza__fila h1 { max-width: 19ch; min-width: 0; } .nota-cabeza__datos { display: grid; gap: 0.15rem; flex: none; text-align: right; padding-bottom: 0.35rem; } .nota-cabeza__datos time { color: var(--tinta); font-weight: 600; } .nota-foto { margin: clamp(2rem, 3.5vw, 3rem) 0 0; } .nota-foto picture { display: block; } /* texto a la izquierda, el costado a la derecha */ .nota-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: clamp(3rem, 7vw, 8rem); align-items: start; } .nota-texto { max-width: 42rem; } .nota-texto p { font-size: var(--t-bajada); line-height: 1.78; color: var(--texto); } .nota-texto p + p { margin-top: 1.35em; } .nota-texto__entrada { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem) !important; line-height: 1.55 !important; color: var(--tinta) !important; } .nota-lado__fijo { position: sticky; top: calc(var(--barra) + 1.5rem); display: grid; gap: 2.25rem; } /* el proyecto del que habla la nota */ .nota-proyecto { display: grid; gap: 0.35rem; } .nota-proyecto__marco { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--arena-media); margin-bottom: 0.9rem; } .nota-proyecto__marco picture { display: block; width: 100%; height: 100%; } .nota-proyecto__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva); } .nota-proyecto:hover .nota-proyecto__marco img { transform: scale(1.05); } .nota-proyecto__nombre { transition: color var(--rapido) var(--curva); } .nota-proyecto:hover .nota-proyecto__nombre { color: var(--terracota); } .nota-proyecto__ir { justify-self: start; margin-top: 0.8rem; } /* compartir: tres botones cuadrados, sin rótulos de más */ .compartir { border-top: 1px solid var(--filete); padding-top: 1.4rem; } .compartir__lista { display: flex; gap: 0.6rem; margin-top: 0.8rem; } .compartir__boton { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--filete); color: var(--tinta); transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .compartir__boton svg { width: 18px; height: 18px; } .compartir__boton:hover, .compartir__boton:focus-visible { color: var(--terracota); border-color: var(--terracota); } .compartir__aviso { min-height: 1.6em; margin-top: 0.5rem; } .nota-mas__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-top: var(--seccion); margin-bottom: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--filete); } @media (max-width: 62rem) { .nota-cabeza__fila { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .nota-cabeza__datos { display: flex; flex-wrap: wrap; gap: 0 1rem; text-align: left; } .nota-rejilla { grid-template-columns: minmax(0, 1fr); } .nota-lado__fijo { position: static; grid-template-columns: minmax(0, 1fr); } .nota-lado { border-top: 1px solid var(--filete); padding-top: 2.5rem; } .nota-proyecto { max-width: 26rem; } } /* ============================================================ TRANSICIÓN ENTRE PÁGINAS La página que se va se funde y la que llega aparece. La barra queda afuera: se queda quieta y el cambio se lee como que cambió el contenido, no como que se recargó el sitio. Lo dispara site.js; con «reducir movimiento», nada. ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* sólo al llegar desde otra página del sitio (lo marca site.js): la primera visita se pinta de una, sin esperar al fundido */ .llega body > :not(.barra):not(.saltar) { animation: pagina-entra 0.5s var(--curva-suave) both; } html.saliendo body > :not(.barra):not(.saltar) { animation: none; opacity: 0; transition: opacity 0.25s var(--curva-suave); } /* el archivo de muestra: lo mismo, por página */ .pagina--entra > :not(.barra) { animation: pagina-entra 0.5s var(--curva-suave) both; } .pagina--sale > :not(.barra) { opacity: 0; transition: opacity 0.25s var(--curva-suave); } } @keyframes pagina-entra { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ CELULAR — REFINAMIENTO (29/09/2026) Revisado página por página a 390 px. ============================================================ */ /* Quiénes somos: los seis perfiles iban en tres columnas de 100 px, con cuatro palabras por renglón y «Desarrolladores» cortado. */ @media (max-width: 62rem) { .perfiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .perfiles { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 48rem) { /* Misión y visión: texto y foto lado a lado dejaban el párrafo en una columna de 150 px. En el celular van una debajo de la otra, la foto primero, igual en las dos. */ .enunciado, .enunciado--espejo { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } .enunciado .enunciado__foto, .enunciado--espejo .enunciado__foto { order: 0; } .enunciado .enunciado__texto, .enunciado--espejo .enunciado__texto { order: 1; } .enunciado__cuerpo { max-width: none; } /* Filtros de Desarrollos y Noticias: la tira de pestañas arranca en el margen de la página, como todo lo demás, y se desliza de borde a borde. */ .pestanas { max-width: none; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); scroll-padding-inline: var(--margen); } /* Avance de obra: fecha y estado en una línea, el hito abajo y a lo ancho. En tres columnas el nombre se partía en dos renglones. */ .hito { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fecha estado" "que que"; gap: 0.35rem 1rem; padding-block: 1.1rem; } .hito__fecha { grid-area: fecha; } .hito__estado { grid-area: estado; } .hito__que { grid-area: que; line-height: 1.3; } /* Contacto: el encabezado y el formulario sumaban dos aires completos (136 px) sin nada en el medio. */ .encabezado + .consulta { padding-top: 0.5rem; } /* Pie: los nueve enlaces de «Explorar» en dos columnas; en una sola el pie medía casi dos pantallas. */ .pie__rejilla > div:nth-child(2) ul { columns: 2; column-gap: 1.25rem; } .pie__rejilla > div:nth-child(2) li { break-inside: avoid; } .pie li + li { margin-top: 0; } /* Investor Pass: la caja «Desde USD 200K» a lo ancho, alineada con el botón de arriba. */ .investor .recuadro { width: 100%; justify-self: stretch; } } /* Listas con enlace (Propietarios): el enlace gana alto táctil con padding y la raya quedaba arriba, sola. Baja con el texto. */ @media (max-width: 56rem) { .bloque__lista li:has(> a)::before { top: calc(0.62em + 0.6rem); } } /* Tanda inicio 30/09 (comentarios de Pati en el Figma). */ .mosaico__bajada { margin-top: 1rem; font-size: var(--t-tarjeta); line-height: 1.3; color: var(--tinta); max-width: 17em; } .bandera { /* emoji de bandera (Twemoji, CC BY 4.0) */ display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin-left: 0.12em; } /* ============================================================ Tanda Proyectos + Quiénes somos (30/09, comentarios de Pati) ============================================================ */ /* Estado de cada proyecto: un color por estado, no sólo el nuevo lanzamiento. Etiqueta rectangular, sin esquinas redondeadas. */ .estado { display: inline-flex; align-items: center; padding: 0.22rem 0.55rem 0.24rem; line-height: 1.2; font-weight: 700; white-space: nowrap; } .estado--lanzamiento { background: var(--terracota); color: var(--blanco); } .estado--ejecucion { background: var(--durazno); color: var(--cacao); } .estado--entregado { background: var(--tinta); color: var(--durazno); } .tarjeta__pie { align-items: center; } /* Respaldo en texto grande, en lugar de los logos */ .respaldo-banda { padding-block: clamp(1.5rem, 3vw, 2.5rem); } .respaldo-banda .env { border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); padding-block: clamp(1.4rem, 2.6vw, 2rem); } .respaldo-banda__t { font-size: var(--t-enuncia); line-height: 1.12; letter-spacing: -0.02em; color: var(--cacao); max-width: 30ch; } /* Misión y visión: dos columnas de texto, sin fotos */ .mision-vision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--filete); } .mision-vision .enunciado__cuerpo { max-width: none; } @media (max-width: 48rem) { .mision-vision { grid-template-columns: minmax(0, 1fr); } } /* Clientes: acordeón, como en el sitio actual */ .acordeon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); align-items: start; } .acordeon__item { border-top: 1px solid var(--linea-campo); } .acordeon__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--linea-campo); } .acordeon__t { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.15rem; cursor: pointer; list-style: none; font-size: var(--t-tarjeta); line-height: 1.2; color: var(--tinta); } .acordeon__t::-webkit-details-marker { display: none; } .acordeon__t:hover { color: var(--terracota); } .acordeon__t:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; } .acordeon__signo { position: relative; flex: none; width: 14px; height: 14px; } .acordeon__signo::before, .acordeon__signo::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform .25s ease; } .acordeon__signo::after { transform: rotate(90deg); } .acordeon__item[open] .acordeon__signo::after { transform: rotate(0deg); } .acordeon__d { padding: 0 2rem 1.3rem 0; color: var(--texto); line-height: 1.7; max-width: 40rem; } @media (max-width: 48rem) { .acordeon { grid-template-columns: minmax(0, 1fr); } .acordeon__item:nth-last-child(2) { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .acordeon__signo::before, .acordeon__signo::after { transition: none; } } /* ============================================================ Tanda Propietarios + Investor Pass (30/09, comentarios de Pati) ============================================================ */ /* Propietarios: la portada va pasando fotos, igual que el inicio */ .portada__fondo--ficha { overflow: hidden; } .portada__fondo--ficha .portada__capa picture { display: block; width: 100%; height: 100%; } /* Investor Pass: portada lisa, sin render de fondo */ .ficha-portada--lisa { background: var(--cacao); } .ficha-portada--lisa .ficha-portada__cuerpo { padding-bottom: clamp(3rem, 6vw, 5rem); } /* La franja de datos pasa a durazno y crece: es lo primero que tiene que retener quien llega a la página. */ .franja--clara { background: var(--durazno); border-top: 0; backdrop-filter: none; } .franja--clara .franja__fila { padding-block: clamp(1.4rem, 2.6vw, 2.1rem); justify-content: space-between; } .franja--clara .franja__dato { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .franja--clara .franja__dato .etiq { color: var(--cacao); opacity: 0.78; } .franja--clara .franja__dato .cifra { color: var(--cacao); font-size: var(--t-enuncia); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } @media (max-width: 40rem) { .franja--clara .franja__fila { flex-direction: column; align-items: flex-start; gap: 1.1rem; } } /* ============================================================ UNIFICACIÓN (30/09) Los saltos verticales estaban escritos a mano en cada página (1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.75, 2, 2.1, 2.25 rem). Ahora salen de cuatro tokens de base.css y se aplican por contexto. ============================================================ */ main :is(h1, h2, h3).dsp + :is(.lectura, .bajada, .menor, .mosaico__bajada) { margin-top: var(--tras-titulo); } main :is(.lectura, .bajada, .menor) + :is(.lectura, .menor) { margin-top: var(--entre-parrafos); } main :is(h2.dsp, .lectura, .bajada, .menor, .mosaico__bajada) + :is(.btn, .enlace, .enlace-flecha) { margin-top: var(--a-la-accion); } /* el encabezado de página lleva título y bajada lado a lado */ main .encabezado__fila > h1 + .bajada { margin-top: 0.5rem; } /* cabecera de sección → lo que sigue */ .cabecera-seccion { margin-bottom: var(--tras-cabecera); } .bloques, .notas, .incluye, .respaldo, .perfiles, .acordeon, .personas, .datos-directos, .mision-vision { margin-top: var(--tras-cabecera); } .cabecera-seccion + :is(.bloques, .notas, .incluye, .respaldo, .perfiles, .acordeon, .personas) { margin-top: 0; } .filtros { margin-bottom: var(--tras-cabecera); } /* botones: una sola altura en todo el sitio */ .btn:not(.btn--chico), .consulta__pie .btn { min-height: 3.125rem; } /* títulos de tercer nivel: dos tamaños, no cuatro */ .rentas__t { font-size: var(--t-bloque); } /* Quiénes somos: la entrada (respaldo, galería, innovación) con un solo salto entre piezas, la mitad de una sección */ .respaldo-banda { padding-block: clamp(1.75rem, 3vw, 2.5rem) calc(var(--seccion) / 2); } .qs-galeria { padding-block: 0; } .qs-innovacion { padding-top: calc(var(--seccion) / 2); } /* cabeceras con título y texto lado a lado: cuando caen una debajo de la otra el salto lo da el margen del texto, no el gap de la fila */ .cabecera-seccion { row-gap: 0; } main .innovacion > h2 + .lectura { margin-top: 0; } @media (max-width: 62rem) { .innovacion { gap: var(--tras-titulo); } } /* en el cierre centrado el salto título → botón es el del token, no la suma del gap de la columna y el margen */ .cierre--centro { gap: 0; } .cierre--centro > .suscripcion { margin-top: var(--tras-titulo); } @media (max-width: 62rem) { .servicios__cabecera { gap: var(--tras-titulo); } .ficha-portada__fila { gap: var(--a-la-accion); } } /* Quiénes somos · respaldo con más peso (30/09): centrado, cuerpo de título de sección y más aire entre los filetes */ .respaldo-banda .env { padding-block: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); text-align: center; } .respaldo-banda__t { font-size: var(--t-seccion); line-height: 1.1; max-width: 32ch; margin-inline: auto; text-wrap: balance; } /* Quiénes somos · respaldo (30/09, versión C): sin caja ni fondo. La frase más grande, centrada, con una raya corta arriba y aire de sobra arriba y abajo. site.js suma .is-vista al entrar en pantalla: la raya se dibuja y el «+45» cuenta. */ .respaldo-banda { padding-block: clamp(5.5rem, 3rem + 6.5vw, 9.5rem) clamp(5rem, 2.75rem + 6vw, 8.5rem); } .respaldo-banda .env { border: 0; padding-block: 0; } .respaldo-caja { text-align: center; } .respaldo-caja::before { content: ""; display: block; width: 48px; height: 2px; background: var(--cacao); margin: 0 auto clamp(2rem, 1.5rem + 1.5vw, 2.75rem); } .respaldo-banda__t { font-size: clamp(2rem, 1.15rem + 3.4vw, 3.625rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--tinta); max-width: 20ch; margin-inline: auto; text-wrap: balance; } .respaldo-cifra { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { .respaldo-caja::before { transition: transform .9s cubic-bezier(.2,.7,.2,1); } .js .respaldo-caja:not(.is-vista)::before { transform: scaleX(0); } } /* pedido de Alan (30/09): «+45 años» en terracota, única excepción a la regla de terracota solo en hover */ .respaldo-marca { color: var(--terracota); } /* Investor Pass · portada (01/10): la portada lisa tenía la mitad derecha vacía. Ahí va Paraguay en línea fina con las tres ciudades donde están los activos elegibles. El contorno se dibuja al cargar y los puntos laten despacio. En celular no se muestra. */ .inv-portada { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; } .inv-portada__mapa { margin: 0; justify-self: end; width: min(100%, 19.5rem); } .inv-mapa { display: block; width: 100%; height: auto; overflow: visible; } .inv-mapa__pais { fill: rgba(255, 233, 210, 0.06); stroke: var(--durazno); stroke-opacity: 0.6; stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .inv-mapa__marca { fill: var(--durazno); } .inv-mapa__guia { stroke: var(--durazno); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; } .inv-mapa__nombre { fill: var(--durazno); font-family: inherit; font-size: 23px; font-weight: 600; } .inv-mapa__cuenta { fill: var(--durazno); fill-opacity: 0.7; font-family: inherit; font-size: 18px; } @media (prefers-reduced-motion: no-preference) { .inv-mapa__pais { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: inv-trazo 2.2s cubic-bezier(.45,0,.2,1) .3s forwards; } .inv-mapa__marca { opacity: 0; animation: inv-aparece .5s ease-out forwards; animation-delay: calc(1.7s + var(--i) * .2s); } .inv-mapa__guia { stroke-dasharray: 1; stroke-dashoffset: 1; animation: inv-linea .6s cubic-bezier(.45,0,.2,1) forwards; animation-delay: calc(1.9s + var(--i) * .2s); } .inv-mapa text { opacity: 0; animation: inv-aparece .6s ease-out forwards; animation-delay: calc(2.3s + var(--i) * .2s); } } @keyframes inv-trazo { 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes inv-linea { to { stroke-dashoffset: 0; } } @keyframes inv-aparece { to { opacity: 1; } } @media (max-width: 62rem) { .inv-portada { grid-template-columns: minmax(0, 1fr); } .inv-portada__mapa { display: none; } } /* Contacto (01/10): «Dónde estamos» pasa a la columna izquierda, debajo de los datos, para que no quede vacía al lado del formulario y la página no termine en una sección casi sin contenido. */ .donde { margin-top: var(--tras-cabecera); padding-top: var(--tras-cabecera); border-top: 1px solid var(--filete); } .donde__t { font-size: var(--t-bloque); font-weight: 600; color: var(--tinta); } .donde__foto { display: block; margin-top: 1.25rem; aspect-ratio: 16 / 10; overflow: hidden; } .donde__foto picture, .donde__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .donde__foto img { transition: transform .8s var(--curva); } .donde__foto:hover img { transform: scale(1.03); } .donde__mapa { margin-top: 1.1rem; } /* Inicio · Proyectos (01/10): las tres ciudades como componente propio. Paraguay en miniatura a la izquierda y la lista con la cantidad de proyectos de cada ciudad; cada fila filtra Proyectos. Al pasar por una fila, su ciudad se marca en el mapa (terracota solo en hover). */ .mosaico { grid-template-rows: minmax(clamp(12rem, 17.5vw, 18rem), auto) repeat(2, clamp(12rem, 17.5vw, 18rem)); } .ciudades { margin-top: var(--tras-titulo); max-width: 26rem; } .ciudades__mapa { display: block; width: 100%; height: auto; overflow: visible; } .ciudades__pais { fill: var(--arena-media); stroke: var(--cacao); stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .ciudades__marca { fill: var(--cacao); transform-box: fill-box; transform-origin: center; transition: fill .25s, transform .35s var(--curva); } .ciudades__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete); } .ciudades__lista li { border-bottom: 1px solid var(--filete); } .ciudad { display: grid; grid-template-columns: minmax(0, 1fr) auto 15px; gap: 0.9rem; align-items: center; padding: 0.6rem 0; color: var(--tinta); text-decoration: none; transition: color .25s; } .ciudad__n { font-weight: 600; } .ciudad__c { color: var(--texto); font-size: 0.9375rem; font-variant-numeric: tabular-nums; transition: color .25s; } .ciudad__flecha { color: var(--terracota); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--curva); } .ciudad:hover, .ciudad:focus-visible, .ciudad:hover .ciudad__c, .ciudad:focus-visible .ciudad__c { color: var(--terracota); } .ciudad:hover .ciudad__flecha, .ciudad:focus-visible .ciudad__flecha { opacity: 1; transform: none; } .ciudades:has(.ciudad[data-c="asuncion"]:is(:hover, :focus-visible)) .ciudades__marca[data-m="asuncion"], .ciudades:has(.ciudad[data-c="cde"]:is(:hover, :focus-visible)) .ciudades__marca[data-m="cde"], .ciudades:has(.ciudad[data-c="encarnacion"]:is(:hover, :focus-visible)) .ciudades__marca[data-m="encarnacion"] { fill: var(--terracota); transform: scale(1.6); } main .ciudades + .enlace { margin-top: var(--a-la-accion); } @media (prefers-reduced-motion: reduce) { .ciudades__marca, .ciudad__flecha { transition: none; } } .mosaico__texto:has(.ciudades) { padding-bottom: 1.25rem; } /* ============================================================ Formularios sin caja (01/10, pedido de Alan) La hoja crema con filete y los campos rellenos se sacan: el formulario se apoya directo en la página. Cada campo es su rótulo y una línea; al escribir, la línea se engrosa en cacao. Las opciones siguen cuadradas, y la elegida va en cacao sobre crema (terracota queda solo para el hover). Vale para todos los formularios del sitio: contacto, fichas, propietarios, investor, Cresia Alquila y la suscripción de noticias. ============================================================ */ .consulta__form { background: none; border: 0; padding: 0; } .consulta__form .campos, .campos { gap: 2rem 2.5rem; } .motivo { margin-bottom: 2.25rem; } .campo__rotulo { margin-bottom: 0.15rem; font-weight: 600; color: var(--tinta); } .campo input, .campo textarea, .campo select { min-height: 3rem; background-color: transparent; border: 0; border-bottom: 1px solid var(--linea-campo); border-radius: 0; padding: 0.65rem 0; box-shadow: inset 0 0 0 transparent; transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva); } .campo textarea { min-height: 6.5rem; } .campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--gris-tibio); } .campo input:focus, .campo textarea:focus, .campo select:focus { background-color: transparent; border-color: var(--cacao); box-shadow: inset 0 -1px 0 var(--cacao); } .campo select { padding-right: 1.6rem; background-position: right 0.2rem center; } .campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--arena) inset; } .opcion__marca, .tarjeta-form .opcion__marca { border-color: var(--filete); background: transparent; color: var(--texto); } .opcion input:checked + .opcion__marca, .tarjeta-form .opcion input:checked + .opcion__marca { background: var(--crema-tenue); border-color: var(--cacao); color: var(--cacao); } /* el envío: botón a su medida, a la derecha, y la nota a su izquierda */ /* los botones a la derecha, en una fila; la nota debajo, alineada con ellos */ .consulta__pie { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; } .consulta__pie .btn { width: auto; min-width: 14rem; } .consulta__pie .btn--primario { order: 2; } .consulta__pie .menor { order: 3; flex-basis: 100%; margin-top: 0.35rem; text-align: right; } @media (max-width: 48rem) { .consulta__pie .btn { width: 100%; } } /* sobre fondo oscuro */ .sobre-oscuro .campo__rotulo { color: var(--crema); } .sobre-oscuro .campo input, .sobre-oscuro .campo textarea, .sobre-oscuro .campo select { color: var(--crema); border-color: var(--sobre-oscuro-tenue); } .sobre-oscuro .campo input:focus, .sobre-oscuro .campo textarea:focus { border-color: var(--crema); box-shadow: inset 0 -1px 0 var(--crema); } .consulta__form legend.campo__rotulo { margin-bottom: 0.75rem; } .consulta__form .consulta__nota { text-align: right; } /* ============================================================ BOTÓN FLOTANTE DE WHATSAPP (13/10) Copiado tal cual del snippet de cresia.com.py, a pedido de Pati. ============================================================ */ .cresia-wa-btn{position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgb(37 211 102 / .45);z-index:9999;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;text-decoration:none!important;cursor:pointer} .cresia-wa-btn:hover{background:#1ebe5d;transform:scale(1.08);box-shadow:0 8px 24px rgb(37 211 102 / .6)} .cresia-wa-btn:focus-visible{outline:2px solid #fff;outline-offset:3px} .cresia-wa-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%} .cresia-wa-icon svg{width:34px;height:34px} .cresia-wa-btn::before,.cresia-wa-btn::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#25D366;z-index:-1;opacity:.6;animation:cresia-wa-pulse 2s infinite} .cresia-wa-btn::after{animation-delay:1s} @keyframes cresia-wa-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}} .cresia-wa-tooltip{position:absolute;right:75px;top:50%;transform:translateY(-50%);background:#fff;color:#333;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 4px 14px rgb(0 0 0 / .15);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease} .cresia-wa-tooltip::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border-left:7px solid #fff;border-top:7px solid #fff0;border-bottom:7px solid #fff0} .cresia-wa-btn:hover .cresia-wa-tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)} @media (max-width:768px){.cresia-wa-btn{width:56px;height:56px;bottom:18px;right:18px}.cresia-wa-icon svg{width:30px;height:30px}.cresia-wa-tooltip{display:none}} @media (prefers-reduced-motion:reduce){.cresia-wa-btn::before,.cresia-wa-btn::after{animation:none}.cresia-wa-btn{transition:none}} /* ============================================================ FORMULARIOS: ERRORES Y ESTADOS DE ENVÍO (19/10) El error va debajo del campo y la línea se pone terracota, en el mismo trazo que el foco. El botón ocupado no cambia de tamaño ni de color: sólo cambia el texto y deja de responder. El aviso cae debajo del botón, separado por un filete, y la confirmación toma el lugar del formulario. ============================================================ */ .campo__error { display: block; margin-top: 0.45rem; font-size: var(--t-menor); line-height: 1.35; color: var(--terracota); } .campo [aria-invalid="true"], .campo [aria-invalid="true"]:hover { border-bottom-color: var(--terracota); box-shadow: inset 0 -1px 0 var(--terracota); } .sobre-oscuro .campo__error { color: var(--durazno); } .sobre-oscuro .campo [aria-invalid="true"] { border-bottom-color: var(--durazno); box-shadow: inset 0 -1px 0 var(--durazno); } .btn[aria-busy] { cursor: progress; } .btn:disabled { pointer-events: none; } .btn:disabled::before { width: 0; } /* selector con la primera opción («Elegí una ciudad») en gris, como los placeholders de los demás campos */ .campo select:has(option[value=""]:checked) { color: var(--gris-tibio); } .campo select option { color: var(--texto); } .form-aviso { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--filete); text-align: right; } .form-aviso__t { font-weight: 600; color: var(--tinta); } .form-aviso__d { margin-top: 0.3rem; color: var(--texto); } .form-aviso__wa { margin-top: 1rem; } .form-aviso:focus { outline: none; } .sobre-oscuro .form-aviso { border-top-color: var(--sobre-oscuro-tenue); } .sobre-oscuro .form-aviso__t, .sobre-oscuro .form-aviso__d { color: var(--crema); } /* enviado: la confirmación queda sola, alineada como el título de la columna de al lado */ .consulta__form[data-estado="enviado"] > :not(.form-aviso) { display: none; } .consulta__form[data-estado="enviado"] .form-aviso { margin-top: 0; padding-top: 0; border-top: 0; text-align: left; } .consulta__form[data-estado="enviado"] .form-aviso__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; font-weight: 500; } .consulta__form[data-estado="enviado"] .form-aviso__d { margin-top: 0.75rem; } .suscripcion .form-aviso { grid-column: 1 / -1; margin-top: 0.25rem; padding-top: 0; border-top: 0; text-align: left; } .suscripcion[data-estado="enviado"] > :not(.form-aviso) { display: none; } .cierre--centro .suscripcion .form-aviso { text-align: center; } .cierre--centro .suscripcion[data-estado="enviado"] .form-aviso__t { font-weight: 500; font-size: var(--t-lectura); } @media (max-width: 48rem) { .form-aviso { text-align: left; } .form-aviso__wa { width: 100%; } } @media (prefers-reduced-motion: no-preference) { .form-aviso { animation: aviso-entra 0.32s var(--curva) both; } } @keyframes aviso-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Noticias filtradas: sin la nota destacada, la grilla sube a la misma distancia de las pestañas que tiene la destacada cuando se ve (si no, quedaba un hueco de 160 px). 19/10 */ section[data-fija][hidden] + .seccion { padding-top: 0; }