/* ───────────────────────────────────────────────────────────────────────── CAPANA · hoja comun de las fichas de solucion La usan las seis paginas. Lo unico que cambia entre ellas es el marcado y las imagenes, que entran por variables en el propio HTML. Un cambio aqui vale para las seis; por eso existe este archivo. ───────────────────────────────────────────────────────────────────────── */ @font-face{font-family:'Boska';font-weight:400;font-style:normal;font-display:swap; src:url('https://cdn.fontshare.com/wf/XWA5B7QYO35APXAF3YE3ZGLUEKXM5AUE/OM4E67LNKOMULZHKAOYI4D5ITKBZEHPB/2WOBSOJLL4JK7IHX3NLDIY3DAIT52O4K.woff2') format('woff2')} @font-face{font-family:'Boska';font-weight:500;font-style:italic;font-display:swap; src:url('https://cdn.fontshare.com/wf/BQ7H6NLD2VQ7DH6MKXG4EKNOHS4ARVBW/WJSA3LVU7OIK54ZLW7BVBDUCWMC7XIEL/7CAW3NYJZQZXMCDUJFS4DWGYL4PJNT5C.woff2') format('woff2')} @font-face{font-family:'Outfit';font-weight:700;font-style:normal;font-display:swap; src:url('https://fonts.gstatic.com/s/outfit/v11/QGYvz_MVcBeNP4NJuktqQ4E.woff2') format('woff2')} /* Tokens copiados literalmente de hero.html para que la ficha no diverja de la home. Cuando aprobemos el diseño, esto sale a una hoja común: duplicarlo seis veces es exactamente como se desincronizan los sitios. */ :root { --margen:clamp(1.5rem, 3.8vw, 4rem); --d1:clamp(2.4rem, 4.6vw, 4.5rem); --d2:clamp(1.9rem, 3.4vw, 3rem); --t1:1.125rem; --t2:1rem; --t3:0.8125rem; --t4:0.75rem; --marfil:#F7F5F0; --suelo-hondo:#E4E2DE; --oro:#B08D57; --piedra:#7A6F5F; --fondo:#F7F5F0; --tinta:#2B2116; --tinta-suave:rgba(43,33,22,0.64); --linea:rgba(43,33,22,0.13); --curva:cubic-bezier(0.22, 0.61, 0.36, 1); --t-micro:.24s; --t-elemento:.42s; --t-capitulo:.64s; --texto:'Inter', sans-serif; --display:'Newsreader', Georgia, serif; --alto-nav:4.35rem; /* medido: 69px con este cuerpo y este relleno */ } * { margin:0; padding:0; box-sizing:border-box; } html, body { overflow-x:clip; } body { background:var(--fondo); color:var(--tinta); font-family:var(--texto); position:relative; } /* el papel: mismo grano y misma viñeta que la home */ .grano { position:fixed; inset:0; pointer-events:none; z-index:50; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.6'/%3E%3C/svg%3E"); background-size:300px 300px; opacity:0.10; } .vineta { position:fixed; inset:0; pointer-events:none; z-index:49; background:radial-gradient(120% 95% at 50% 42%, rgba(43,33,22,0) 42%, rgba(43,33,22,0.030) 74%, rgba(43,33,22,0.065) 100%); } /* ── LA BARRA ── */ .nav { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:2.5rem; padding:0.9rem clamp(1.5rem, 3.8vw, 4rem); /* la marca con subtitulo mide 40px: la barra se queda en 69px */ background-color:var(--fondo); box-shadow:0 1px 0 var(--linea); transition:transform .6s var(--curva); } /* la barra se retira al bajar y vuelve al subir, como en la home (Tresmares) */ .nav.oculta { transform:translateY(-100%); } .marca { font-family:'Outfit', sans-serif; font-weight:700; font-size:var(--t1); letter-spacing:0.02em; color:var(--tinta); text-decoration:none; text-transform:uppercase; line-height:1; } .marca span { position:relative; display:inline-block; } /* la marca es el logo, la version del hero con la vela abierta (ver la home) */ .marca { line-height:0; } .marca .logo { display:block; width:118px; height:auto; fill:currentColor; } /* como Tresmares: el subtitulo debajo, en texto real (a 7 px se lee mejor que como trazado), centrado bajo la palabra y al 62 % como en el lockup */ .marca .marca-sub { display:block; width:118px; margin-top:0.3rem; text-align:center; font-family:'Inter', sans-serif; font-weight:500; font-size:7px; line-height:1; letter-spacing:0.3em; text-transform:uppercase; color:currentColor; opacity:0.68; /* .68: 5,3:1 (AA) */ } /* el pico es un HUECO, no un parche: sobre cualquier fondo la A abre igual */ .cumbre { --pico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,26 82,101 18,101' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image:linear-gradient(#fff 0 0), var(--pico); -webkit-mask-size:100% 100%, 100% 100%; -webkit-mask-repeat:no-repeat, no-repeat; -webkit-mask-composite:xor; mask-image:linear-gradient(#fff 0 0), var(--pico); mask-size:100% 100%, 100% 100%; mask-repeat:no-repeat, no-repeat; mask-composite:exclude; } .enlaces { margin-left:auto; display:flex; align-items:center; gap:clamp(1.4rem, 2.4vw, 2.6rem); } .enlaces a { font-family:var(--texto); font-size:var(--t3); color:var(--tinta-suave); text-decoration:none; transition:color var(--t-micro) var(--curva); } .enlaces a:hover { color:var(--tinta); } .enlaces .cta { display:inline-flex; align-items:center; padding:0.6rem 1.25rem; border-radius:999px; background:var(--tinta); color:var(--fondo); font-weight:500; white-space:nowrap; transition:background-color var(--t-capitulo) var(--curva), color var(--t-capitulo) var(--curva), opacity var(--t-micro) ease; } .enlaces .cta:hover { color:var(--fondo); opacity:0.88; } /* ══ EL HERO DE LA SOLUCIÓN ══════════════════════════════════════════════ Anatomía medida en la ficha de Tresmares: UNA pantalla, título enorme con interlínea muy cerrada, y el texto corto abajo a la izquierda en columna estrecha. Suyo: título 168px con interlínea 0.70 y párrafo de 216px de ancho. Aquí el título va en Boska y el interlineado no baja de 0.99, porque «Corporativa» lleva una p y por debajo de 0.96 la descendente choca con la ascendente de la línea de abajo (medido con las métricas reales de la fuente). */ /* LA LÁMINA DE FONDO. Es la misma imagen que ese servicio tiene en la home (calido-04, las ondas), a sangre y muy tenue. Va al 22 % y por eso no importa que el original sea de 1200 px: a esa opacidad la falta de nitidez no se percibe, y en cambio la continuidad con el índice sí. Se apaga hacia abajo con una máscara para que el texto corto del pie caiga sobre papel limpio. */ .hero-sol::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; /* El recorte estaba en 30 % y ahi solo hay cielo: sobre marfil el cielo palido no tiene recorrido y la lamina parecia no existir. A 72 % entra el horizonte y la onda entera, que es lo unico de la foto con forma. */ /* La imagen la pone CADA ficha con --lamina-hero, y su recorte con --foco-hero. Escribirla aqui haria que las seis compartiesen la misma. */ background:var(--lamina-hero) center var(--foco-hero, 70%) / cover no-repeat; /* LA FUERZA TAMBIEN ES DE CADA FICHA. Medido sobre marfil, el recorrido pintado al 30 % es de 10,8 puntos en motivo-vacio y de 6,7 en motivo-estratos: el umbral de lo invisible esta en 10, asi que una misma opacidad deja unas fotos por debajo y otras dentro. Cada ficha calibra la suya hasta el mismo recorrido percibido, que es lo que hace que el conjunto parezca uniforme aunque los numeros difieran. LA REFERENCIA es recorrido ~29 y luz ~223, medidos sobre la pagina servida y no sobre el archivo. Da valores muy dispares segun la foto: 0,66 en motivo-vacio, palida y de rango corto, y 0,26 en motivo-sombra, oscura y larga. Si dos fichas salen con opacidades parecidas, sospechar de la medida antes que celebrar la coincidencia. */ opacity:var(--fuerza-hero, .30); -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%); } .hero-sol { position:relative; isolation:isolate; /* DESCUENTA LA BARRA. Con min-height:100vh el conjunto medía 982 px en una ventana de 913: la barra va en flujo y suma sus 69 px, así que el pie del hero caía fuera y el texto salía cortado al cargar. */ min-height:calc(100svh - var(--alto-nav)); display:flex; flex-direction:column; justify-content:center; padding:10vh clamp(1.5rem, 3.8vw, 4rem) 0; } .rastro { display:flex; align-items:baseline; gap:0.9rem; font-family:var(--texto); font-size:var(--t4); font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--tinta-suave); } .rastro a { color:inherit; text-decoration:none; transition:color var(--t-micro) var(--curva); } .rastro a:hover { color:var(--tinta); } .nombre-sol { margin-top:clamp(2.5rem, 6vh, 4.5rem); } .nombre-sol .linea { display:block; white-space:nowrap; font-family:var(--display); font-weight:400; font-size:clamp(3.2rem, 9.4vw, 10.5rem); line-height:0.99; letter-spacing:-0.02em; color:var(--tinta); } .nombre-sol .linea + .linea { /* 26vw. En la home son 7 porque hay una fotografía a la derecha; aquí no hay nada que estorbe, así que la segunda línea se va muy a la derecha y el par gana tensión. A 1440 px de ancho «Corporativa» acaba en 1171 y el margen derecho está en 1385: quedan 214 px. Por encima de 38vw empieza a tocarlo, y en pantallas más estrechas antes, por eso no subo más. */ margin-left:34vw; font-weight:500; font-style:italic; color:#8A6B3C; } /* el texto corto, abajo a la izquierda y en columna estrecha: es lo que hace que se lea como pie de lámina y no como párrafo de artículo */ .pie-hero { margin-top:auto; padding:clamp(3rem, 7vh, 5.5rem) 0 clamp(2.5rem, 6vh, 4rem); display:flex; align-items:flex-end; justify-content:space-between; gap:3rem; } .pie-hero .entrada { max-width:23rem; font-family:var(--texto); font-size:var(--t2); line-height:1.7; color:var(--piedra); } /* La familia, abajo a la derecha. Aquí vivía un contador de ámbitos que se retiró: anunciaba cuántos elementos tenía una lista que aún no habías visto, y encima el cliente llama a esa lista de tres maneras distintas entre las seis soluciones (y en la 01 no existe), así que no servía como elemento fijo del hero. La familia sí: es una sola palabra, existe en las seis, y es el mismo rótulo que ya marca cada escena en la home. */ .pie-hero .familia { font-family:var(--texto); font-size:var(--t4); font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--tinta-suave); white-space:nowrap; } /* ── EL TITULAR ─────────────────────────────────────────────────────────── SIN barrido letra a letra: eso era invencion propia, no de Tresmares. Ellos muestran el titular y ya, y luego mueven la segunda linea. Aqui igual: las dos aparecen con el fundido de la casa, alineadas al mismo margen, y despues «Corporativa» viaja a su sangrado. La curva NO es la de la casa. La de casa es un ease-out (arranca rapido y frena), que sirve para recorridos cortos. Este salto son 489 px y ahi se siente brusco al empezar. Medida sobre su web, la suya es una S: al 26 % del tiempo lleva el 2 % del camino, al 50 % el 25 %, al 63 % el 72 % y al 87 % el 98 %. Arranca despacio, acelera en el medio y frena al final. Eso es lo que se lee como suavidad, y es lo unico que la reproduce. */ .nombre-sol .linea.visto { animation:aparecer .9s var(--curva) var(--retardo, 0s) both; } .nombre-sol .linea:nth-child(2) { --retardo:.10s; } /* dos animaciones sobre propiedades distintas: no se pisan. El «both» del deslizamiento mantiene la linea alineada durante su espera. */ .nombre-sol .linea:nth-child(2).visto { animation:aparecer .9s var(--curva) var(--retardo) both, deslizar 1.4s cubic-bezier(.72, .02, .24, 1) .95s both; } @keyframes aparecer { from { opacity:0; } to { opacity:1; } } @keyframes deslizar { from { transform:translateX(-34vw); } to { transform:translateX(0); } } @media (prefers-reduced-motion: reduce) { .nombre-sol .linea.visto, .nombre-sol .linea:nth-child(2).visto { animation:none; opacity:1; transform:none; } } /* la entrada de la casa: el mismo gesto que el resto del sitio */ .surge { opacity:0; } .surge.visto { animation:surgir 1.05s var(--curva) var(--retardo, 0s) both; } @keyframes surgir { from { opacity:0; transform:translateY(18px); } 55% { opacity:1; } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .surge.visto { animation-duration:.01s; animation-delay:0s; } } /* ── LA MUESTRA ─────────────────────────────────────────────────────────── El texto en el eje, y el motivo de la ficha visto a tres escalas: el detalle, el plano medio y el plano ancho. Un solo archivo, tres recortes, tres proporciones distintas. No se clava nada: la composicion hace el trabajo, no el movimiento. Para las otras cinco fichas basta con cambiar --marco en la seccion. */ .muestra { --marco:url('calido-04.webp'); position:relative; padding:clamp(6rem,12vh,10rem) var(--margen) clamp(6rem,12vh,10rem); display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(0.8rem,1.8vw,1.8rem); row-gap:clamp(3rem,7vh,5.5rem); /* 9vh con la colgante en fila propia; con las cuatro en tres filas, 7vh */ align-items:center; } /* el discurso: el titular grande que se lee rellenandose, y debajo, a la derecha, la letra pequena. Es el mismo gesto de la declaracion de La Firma en la home: una sola mecanica de relleno en todo el sitio, no dos. */ /* El titular ya no vive en su propia franja. En Tresmares el texto y las imagenes SE SOLAPAN: el titular va al costado de la lamina alta y la letra pequena al costado de la apaisada. Apilarlos en filas propias es lo que abria los huecos muertos. */ .titular { grid-column:4 / 11; grid-row:2; /* la columna llega hasta la 11 para que quepan 5 lineas, pero el tope de 46rem deja siempre un pasillo con la lamina de la derecha: en las otras cinco fichas el texto es mas largo y una linea podria colarse debajo. */ max-width:46rem; /* sube hacia la banda de las laminas en vez de esperar al hueco entero */ margin-top:calc(-1 * clamp(3rem,7vh,5.5rem)); font-family:var(--display); font-weight:400; /* 1,3 era nuestro; la suya, medida sobre su captura, es 1,03. A 1,08 el bloque encoge un 17 % sin que Boska pierda tildes ni colas. */ font-size:var(--d2); line-height:1.08; letter-spacing:-0.005em; color:var(--tinta); } /* LA CURSIVA MARCA EL GIRO, NO UNA LISTA. Una palabra, o dos si son un termino acunado: «antes» en la 01, «arquitectura corporativa» en la 04. En la 02 estuvo sobre una enumeracion de tres, y cuatro palabras seguidas en cursiva a 60 px dejan de leerse como acento y se leen como cambio de fuente. Si hace falta subrayar una lista, el sitio no es este. */ .titular .fuerte { font-weight:500; font-style:italic; } /* fija, como las laminas. Y arranca por encima del borde de la apaisada, no centrada contra ella: en Tresmares la letra pequena empieza mas arriba que la imagen de al lado, y ese desnivel es lo que sostiene la diagonal. */ .explica { /* de 3 columnas a 5: en la 05 el parrafo es largo y a 3 columnas se iba a trece lineas. A 5 sigue sin tocar la apaisada, que acaba en la 7. */ grid-column:6 / 10; grid-row:3; align-self:start; /* sube hacia el titular: con el gap grande de la seccion, la letra pequena se quedaba a 108 px del texto al que acompana */ margin-top:calc(-1 * clamp(1rem,2.4vh,1.9rem)); font-size:var(--t2); line-height:1.75; color:var(--piedra); } /* quietas: no entran, estan. El unico gesto de la seccion es la lectura del titular; una lamina que ademas aparece convierte dos gestos en ruido. ── EL REVELADO ────────────────────────────────────────────────────────── Las seis «calido» no se encontraron asi, se revelaron: caen todas en una franja estrecha de R-B (10 a 23) con poco detalle, y eso es un tratamiento. Aqui se hace en CSS y no en el archivo, para poder recalibrarlo sin volver a exportar. DUOTONO, no saturacion. Con saturate() cada foto conserva SU temperatura, solo escalada: la meseta seguia gris y el agua seguia calida, y nunca iban a coincidir. El duotono descarta el color de origen y mapea la LUZ sobre una sola rampa, del tinta de la casa (#2B2116) a una piedra calida (#9B9288). Resultado: las cuatro comparten tono exacto y solo cambia el brillo. Los dos extremos estan sobre la misma linea de matiz, que es lo que hace que no haya una sola lamina mas fria que otra. */ /* EL REVELADO ES EL PREDETERMINADO, NO UNA LEY. La rampa comprime, y una foto que ya nace calibrada pierde por ella mas de lo que gana: medido sobre motivo-sabkha en este mismo hueco, el recorrido cae de 14,0 a 6,6 con el hondo y a 9,6 con el hondo mas contraste, ademas de hundir la luz media de 141 a 76. Se hizo para fuentes desatadas y ahi sigue valiendo. Cada lamina puede declarar el suyo, y las nuevas no declaran ninguno. */ .lamina { filter:var(--revelar, url(#revelado)); } .lamina.esquina { filter:var(--revelar-esquina, url(#revelado-hondo) contrast(1.5)); } .lamina { background:var(--marco) no-repeat; box-shadow:0 30px 80px rgba(43,33,22,0.14); } /* el detalle: el cielo, ampliado. Ojo con «cover» aqui: un cuadrado recorta tan poco de un 4:5 que la posicion apenas viaja y salia identico al retrato. Hace falta zoom real. Y las ondas de cerca salian en blanco: a ese aumento el agua no tiene rango, y un cuadrado vacio pesa mas que uno lleno. */ /* la esquina: abre la seccion arriba a la izquierda, pegada al margen. PROVISIONAL: su imagen es un marcador de posicion. */ .lamina.esquina { grid-column:1 / 4; grid-row:1; justify-self:start; width:clamp(150px,15vw,216px); aspect-ratio:1/1; background-image:var(--marco-b); background-size:cover; background-position:center 32%; } /* el plano medio: el cielo y la linea del horizonte */ .lamina.medio { grid-column:10 / 13; grid-row:1 / span 2; justify-self:end; align-self:end; margin-bottom:calc(-1 * clamp(1.5rem,3.5vh,2.8rem)); /* cae por debajo del titular */ margin-right:calc(-1 * var(--margen)); /* sangra por la derecha */ width:clamp(205px,21vw,288px); aspect-ratio:4/5; background-size:cover; background-position:center center; } /* la colgante: cuelga de la letra pequena, alineada con ella, y solapa a la apaisada de la izquierda. Medido sobre su captura: arranca al 50 % del ancho, mide el 20 %, y su borde superior cae al 79 % de la altura de la lamina de al lado. Ese solape es lo que impide que la seccion termine en una fila plana. PROVISIONAL: la imagen es un marcador de posicion. */ .lamina.colgante { grid-column:10 / 13; grid-row:3; justify-self:end; align-self:start; /* En la fila 4 se quedaba sola en una segunda pantalla con dos tercios vacios a su izquierda (medido a 1440x900). Ahora comparte fila con la apaisada, a su derecha y algo mas abajo, y las cuatro laminas cierran en la misma pantalla. */ margin-top:clamp(4rem,9vh,6.5rem); margin-right:calc(-1 * var(--margen) * .5); width:clamp(205px,20vw,288px); aspect-ratio:4/5; background-image:var(--marco-c); background-size:cover; background-position:center 60%; } /* el plano ancho: la onda entera, que cierra */ .lamina.ancho { background-image:var(--marco-d); grid-column:1 / 7; grid-row:3; justify-self:start; align-self:start; margin-left:calc(-1 * var(--margen)); /* sangra por la izquierda */ margin-top:clamp(1.4rem,3.4vh,2.6rem); /* cae por debajo de la pequena */ width:clamp(320px,33vw,432px); aspect-ratio:3/2; background-size:cover; background-position:center center; } @media (max-width: 860px) { /* LA GALERÍA, LA MISMA COMPOSICIÓN QUE EN ESCRITORIO, A ESCALA (Gonzalo, con Tresmares en el móvil como referencia): la pequeña arriba a la izquierda, el retrato a la derecha a sangre cayendo bajo el titular, el titular a todo el ancho, el párrafo desplazado a la derecha, y debajo la apaisada a sangre por la izquierda con el retrato colgante a la derecha, más bajo. Mismas doce columnas; solo cambian tamaños y filas. */ .muestra { padding:4rem var(--margen) 4rem; row-gap:2.6rem; align-items:start; } .lamina.esquina { grid-column:1 / 6; grid-row:1; width:36vw; } .lamina.medio { grid-column:8 / 13; grid-row:1; align-self:start; width:46vw; margin-top:9rem; margin-bottom:0; margin-right:calc(-1 * var(--margen)); } /* más baja que la pequeña, como el retrato de Tresmares; en escritorio cae bajo el titular, aquí el titular es a todo el ancho y se cruzaban */ .titular { grid-column:1 / 12; grid-row:2; font-size:clamp(1.55rem,6.9vw,2.1rem); line-height:1.2; margin-top:0.6rem; } .explica { grid-column:3 / 13; grid-row:3; margin-top:0; max-width:none; min-width:0; } /* el párrafo se salía por la derecha */ .lamina.ancho { grid-column:1 / 8; grid-row:4; width:52vw; margin-top:1.5rem; margin-left:calc(-1 * var(--margen)); } .lamina.colgante { grid-column:9 / 13; grid-row:4; width:34vw; margin-top:11rem; margin-right:calc(-1 * var(--margen) * .5); } /* el hero de la ficha: el nombre a dos líneas con la sangría a escala, sin salirse */ .hero-sol { min-height:calc(88svh - 64px); padding:2.5rem var(--margen) 0; } .nombre-sol { margin-top:1.6rem; } .nombre-sol .linea { font-size:clamp(2.6rem,12.5vw,3.6rem); line-height:1.04; } .nombre-sol .linea + .linea { margin-left:12vw; } /* el deslizamiento de la segunda línea arranca desde su propia sangría (12vw), no desde los 34vw del escritorio: con el valor grande la línea nacía 22vw fuera de la pantalla y se veía cortada por la izquierda */ .nombre-sol .linea:nth-child(2).visto { /* entra desde el borde izquierdo hasta su sangría (--desde la pone el script con la sangría medida; 0 donde no hay recorrido) */ animation:aparecer .9s var(--curva) var(--retardo) both, deslizar-movil 1.4s cubic-bezier(.72,.02,.24,1) .95s both; } .pie-hero { padding:2.6rem 0 2.2rem; gap:1.4rem; } .pie-hero .familia { display:none; } /* la etiqueta de familia («Privado», «Corporativo»...) fuera en el teléfono (Gonzalo) */ .muestra { padding-top:6rem; } /* la barra translúcida y con desenfoque sobre las fotos del hero, como la de Terral */ /* LA BARRA SOBRE LA FOTO DEL HERO, como la de Tresmares: fija, y TRANSPARENTE arriba del todo (la foto sigue por detrás, sin corte); al bajar se vela con marfil translúcido y desenfoque (.velada, la pone el script a partir de 24 px de scroll). */ .nav { position:fixed; top:0; left:0; right:0; background-color:transparent; box-shadow:none; transition:background-color .4s var(--curva), box-shadow .4s var(--curva), transform .85s cubic-bezier(.45,0,.15,1); } /* la retirada, con recorrido visible: la curva de la casa (ease-out) hacía el 90 % en 150 ms y en el teléfono parecía un corte */ .nav .disparador { border-left-color:transparent; } .nav.velada { background-color:rgba(247,245,240,0.74); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--linea); } .nav.velada .disparador { border-left-color:var(--linea); } .hero-sol { min-height:100svh; padding-top:calc(64px + 2.5rem); } /* el título de la tabla («Nuestro asesoramiento»), pegado a su filete: en escritorio el aire de 6rem lo separa de la entradilla que va al lado; a una columna quedaba flotando (Gonzalo) */ .cabeza.cabeza { padding-bottom:1.1rem; margin-bottom:1.3rem; } /* doble clase: la regla de escritorio va más abajo en la hoja y ganaba */ .tabla .fila:first-child { padding-top:1.2rem; } .titulo-bloque { padding-bottom:0; } } /* ── LOS AMBITOS ────────────────────────────────────────────────────────── Sin filete y sin numero. Aqui hubo un registro reglado y estaba mal: un filete sirve para separar CAMPOS, y estas diez frases tienen uno solo, asi que la regla no separaba nada y el bloque se leia como una tabla vacia esperando columnas que no iban a llegar. Y el 01-10 sugeria un orden que no existe: son un conjunto, no una secuencia. Queda la vineta de oro de 5 px, que es la pieza que ya usa la casa. */ .ambitos { padding:clamp(5rem,11vh,9rem) var(--margen) clamp(5rem,11vh,9rem); } /* ── EL SUELO DE DATOS ──────────────────────────────────────────────────── UN panel continuo sobre los dos bloques, no uno por seccion. Dos paneles seguidos dejan una costura entre ellos; uno solo, no. DOS CAPAS, porque el suelo y los arcos no pueden compartir mascara: la radial que gradua los arcos apagaba tambien el color, y el panel se perdia abajo a la izquierda justo donde queriamos menos trama, no menos suelo. ::after el suelo, solo con el fundido de arriba y abajo ::before los arcos, ademas con la radial que gradua la intensidad El fundido va en PIXELES: el panel mide unos 2000 px y un 16 % se comia trescientos por arriba. */ .datos { position:relative; isolation:isolate; } .datos::after { content:''; position:absolute; inset:0; z-index:-2; pointer-events:none; background:var(--suelo-hondo); -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%); } /* Arcos concentricos, no rayas. Salen de un foco fuera de la esquina superior derecha y se abren hacia abajo a la izquierda, como las curvas de nivel de un mapa. No es un adorno prestado: es el motivo de la propia ficha, que son ondas en el agua. Y va en SOMBRA: sobre estos marfiles el blanco solo tiene 8 puntos de recorrido y una trama clara no se veria. Foco pegado al lienzo (98% / -4%) y paso de 9 px en vez de 13: asi se LE VE la curva. Con el foco lejos los arcos salian casi rectos y volvia a parecer un rayado. */ .datos::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-radial-gradient(circle at 98% -4%, rgba(43,33,22,0.165) 0 1px, rgba(43,33,22,0) 1px 9px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%), radial-gradient(1600px 1250px at 100% -40px, #000 0%, rgba(0,0,0,0.60) 34%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.05) 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(180deg, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%), radial-gradient(1600px 1250px at 100% -40px, #000 0%, rgba(0,0,0,0.60) 34%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.05) 100%); mask-composite:intersect; } /* LA LINEA QUE ABRE UNA LISTA. El registro de la 04 no la necesita: sus ambitos se explican solos. El de la 02 si, porque el cliente escribe una frase que dice de que dependen esas estrategias, y sin ella la lista queda colgando del rotulo. Va en el mismo ancho que el registro para que las dos compartan borde izquierdo. */ .ambitos .previa { max-width:46rem; margin:0 0 clamp(2rem,4.5vh,3rem); font-family:var(--texto); font-size:var(--t2); line-height:1.62; color:var(--piedra); } /* EL RELATO. Solo la ficha 06 trae un bloque de prosa propio, «Un unico interlocutor», tres parrafos que no son ni lista ni tabla. Va en el panel, entre los ambitos y la tabla, con el mismo ancho que la entradilla para que la columna de lectura no cambie dentro del mismo panel. */ .relato { padding:0 var(--margen) clamp(3rem,6vh,4.5rem); } .relato p { max-width:46rem; margin:0 0 1.1em; font-family:var(--texto); font-size:var(--t2); line-height:1.62; color:var(--piedra); } .relato p:last-child { margin-bottom:0; } .rotulo-tabla { display:block; margin-bottom:clamp(1.9rem,4vh,2.6rem); font-size:var(--t4); font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--tinta-suave); } /* la retícula manda sobre el reparto: con «columns» el navegador equilibra por LINEAS, y basta con que un ambito parta en dos para que salga 4 y 6. */ .registro { list-style:none; margin:0; padding:0; max-width:78rem; display:grid; grid-auto-flow:column; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(var(--filas, 5),auto); column-gap:clamp(2.5rem,6vw,6rem); } .registro li { position:relative; padding:0 0 clamp(1.15rem,2.4vh,1.55rem) 1.5rem; font-family:var(--display); font-weight:400; font-size:clamp(1.05rem,1.4vw,1.24rem); line-height:1.4; letter-spacing:-0.005em; color:var(--tinta); } .registro li::before { content:''; position:absolute; left:0; top:0.62em; width:5px; height:5px; border-radius:50%; background:var(--oro); } @media (max-width: 860px) { .registro { grid-auto-flow:row; grid-template-columns:1fr; grid-template-rows:none; } } /* ── LA CABEZA DEL BLOQUE ───────────────────────────────────────────────── Como lo dispone Tresmares: la entradilla en columna estrecha a la IZQUIERDA y el titular grande a la DERECHA, en la misma banda, apoyados los dos en el filete que abre la tabla. Antes el titular estaba solo arriba a la izquierda porque no habia nada que sostuviera la diagonal. Con los dos parrafos ya lo hay. Se alinean por la BASE (align-items:end) para que el filete quede como un suelo comun y no como una linea que cruza dos alturas distintas. */ .cabeza { display:grid; grid-template-columns:repeat(12, 1fr); column-gap:clamp(0.8rem,1.8vw,1.8rem); align-items:end; /* El filete BAJA: se aleja del titular y se acerca a la fila que abre. Pertenece a la tabla, no a la cabeza, asi que tiene que estar mas cerca de lo que separa que de lo que lo precede. */ padding-bottom:clamp(4rem,9vh,6rem); border-bottom:1px solid var(--linea); margin-bottom:clamp(2.2rem,5vh,3.4rem); } .cabeza .entradilla { grid-column:1 / 6; margin:0; max-width:none; } /* pequena a proposito: es una entradilla, no un parrafo de lectura. Al cuerpo del texto competia con los titulos de las filas de la tabla. */ .cabeza .entradilla p { font-size:1.06rem; line-height:1.62; } .cabeza .titulo-bloque { grid-column:7 / 13; border-bottom:none; padding-bottom:0; } @media (max-width: 860px) { .cabeza { grid-template-columns:1fr; row-gap:2.4rem; align-items:start; } .cabeza .entradilla, .cabeza .titulo-bloque { grid-column:1; } } /* ── LA ENTRADILLA ──────────────────────────────────────────────────────── Los dos parrafos que enmarcan la tabla. Estaban bajo la frase, en el hueco del «distingue», que esta pensado para UNA linea: dos parrafos alli daban tres bloques centrados seguidos, y ademas el primero repetia la construccion de la frase («no comienza... Comienza...») a diez centimetros. Aqui hacen su trabajo: dan entrada a los argumentos, que hasta ahora arrancaban en frio con la primera fila. Van a la IZQUIERDA y en columna medida, no centrados, para que la seccion no vuelva a apilar ejes iguales. */ .entradilla { max-width:46rem; margin:clamp(2.6rem,6vh,4rem) 0 clamp(3.4rem,8vh,5.5rem); } .entradilla p { font-size:var(--t1); line-height:1.75; color:var(--tinta); } /* ── EL ASESORAMIENTO ───────────────────────────────────────────────────── Aqui SI va la tabla de Tresmares, porque aqui hay dos campos que separar y el filete tiene trabajo: nombre a la izquierda, que hacemos a la derecha. Es lo contrario de los ambitos, donde la regla no separaba nada. Y va sobre MARFIL, no sobre el suelo hondo: dos paneles seguidos convierten el centro de la ficha en un rectangulo gris y el contraste deja de decir nada. Un recurso por bloque. */ .asesoramiento { /* 192 px arriba y 48 abajo, medido en la suya a 1440 */ padding:clamp(7rem,21.5vh,12rem) var(--margen) clamp(3rem,6vh,4.5rem); } /* el titulo de bloque, al tamano que le da Tresmares: medido sobre su captura, «Resumen de Fondos» ocupa el 5,2 % del ancho de ventana. Aqui son 75 px a 1440. Sustituye a la versalita: dos jerarquias para lo mismo sobraban. Se queda a la izquierda, que es el eje del resto de la ficha. */ .titulo-bloque { display:block; font-family:var(--display); font-weight:400; font-size:clamp(2.6rem, 5.2vw, 5rem); line-height:0.98; letter-spacing:-0.018em; color:var(--tinta); padding-bottom:clamp(2rem,4.5vh,3.2rem); border-bottom:1px solid var(--linea); } .titulo-bloque i { font-style:normal; display:block; } .tabla { display:grid; } .tabla .fila { display:grid; grid-template-columns:minmax(0,0.40fr) minmax(0,0.60fr); column-gap:clamp(2rem,5vw,5rem); align-items:start; padding:clamp(1.9rem,4.2vh,2.9rem) 0; border-bottom:1px solid var(--linea); } .tabla .campo { font-family:var(--display); font-weight:400; font-size:clamp(1.22rem,1.85vw,1.62rem); line-height:1.16; letter-spacing:-0.005em; color:var(--tinta); } .tabla .glosa { max-width:34rem; /* 1,72 dejaba los renglones sueltos dentro de la fila y el parrafo no se leia como un bloque. A 1,55 la fila se compacta y el filete recupera su papel de separador. */ font-size:var(--t2); line-height:1.55; color:var(--piedra); } @media (max-width: 860px) { .tabla .fila { grid-template-columns:1fr; row-gap:0.9rem; } .tabla .glosa { max-width:none; } } /* ── LA FRASE Y EL CIERRE ───────────────────────────────────────────────── Vuelven al marfil: el suelo hondo es para los bloques de datos, y aqui se lee. Y el cierre calca la estructura de «invitacion» de la home (etiqueta, declaracion, apunte, correo con el hilo de oro que se traza al senalar) para que la ficha acabe como acaba el sitio, no con un final propio. Sin gesto de entrada: en esta pagina el unico movimiento por scroll es la lectura del titular de la muestra. Repetirlo aqui seria un tic. */ /* el unico bloque centrado de la ficha, y a proposito: es la frase, no un parrafo. El resto de la pagina va anclado al margen izquierdo. */ /* ── EL CIERRE: UN SOLO GESTO ───────────────────────────────────────────── Antes la ficha terminaba dos veces: una frase grande centrada sobre marfil y despues otra frase grande centrada sobre tinta, con el correo debajo. Dos declaraciones seguidas con el mismo gesto, y entre ellas un corte a todo el ancho que nada preparaba. Y el final se centraba en una pagina que se lee entera en diagonal. Ahora es un solo concepto, EL HORIZONTE, que es el de El Metodo en la home: - arriba, el cielo: la frase principal del cliente, a la izquierda en la columna 4 como el titular, en tres versos que el relleno escribe uno a uno; - la linea de oro, que deja de ser adorno encima de la frase y pasa a ser la frontera entre el marfil y la tinta. Se dibuja de izquierda a derecha al asomar, como la del Metodo; - debajo, la tierra: el correo a la izquierda con la llamada del cliente como rotulo, y a la derecha la SIGUIENTE SOLUCION, que es lo que convierte seis fichas en un recorrido. La sexta vuelve a la primera. */ .cierre { position:relative; isolation:isolate; } .cierre .cielo { position:relative; isolation:isolate; padding:clamp(9rem,20vh,16rem) var(--margen) clamp(6rem,13vh,10rem); display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(0.8rem,1.8vw,1.8rem); } /* los arcos siguen naciendo a la izquierda, pero se apagan ANTES del horizonte: la linea de oro tiene que caer sobre marfil limpio */ .cierre .cielo::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-radial-gradient(circle at 2% -4%, rgba(43,33,22,0.125) 0 1px, rgba(43,33,22,0) 1px 9px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 88%), radial-gradient(1600px 1250px at 0% -40px, #000 0%, rgba(0,0,0,0.60) 34%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.05) 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 88%), radial-gradient(1600px 1250px at 0% -40px, #000 0%, rgba(0,0,0,0.60) 34%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.05) 100%); mask-composite:intersect; } .frase-final { grid-column:4 / 12; margin:0; font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,4.4vw,3.9rem); line-height:1.12; letter-spacing:-0.014em; color:var(--tinta); } /* cada oracion, su linea: tres golpes. El relleno los escribe en orden. */ .frase-final .verso { display:block; } .frase-final .fuerte { font-weight:500; font-style:italic; } /* EL HORIZONTE. La misma linea que en El Metodo: gris de base y oro que se dibuja de izquierda a derecha cuando asoma. */ .horizonte { position:relative; height:1px; background:var(--linea); } .horizonte i { display:block; height:1px; background:var(--oro); transform:scaleX(0); transform-origin:left; transition:transform 1.9s var(--curva) .15s; } .horizonte.visto i { transform:scaleX(1); } /* EL CORREO va dentro del cielo, justo bajo la frase y en su misma columna: es lo que Gonzalo pidio desde el principio, la frase y la direccion debajo. Pequeno, en Inter, con la linea de oro al pasar. */ .cielo .correo { grid-column:4 / 12; justify-self:start; display:inline-block; position:relative; text-decoration:none; margin-top:clamp(2.2rem,4.5vh,3.2rem); } .cielo .senas { display:block; position:relative; white-space:nowrap; padding-bottom:0.4em; font-family:var(--texto); font-weight:300; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1; letter-spacing:-0.005em; color:var(--tinta); background:linear-gradient(var(--oro), var(--oro)) left bottom / 0% 1px no-repeat; transition:background-size .42s var(--curva); } .cielo .senas::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--linea); } .cielo .correo:hover .senas { background-size:100% 1px; } /* LAS OTRAS SOLUCIONES. Asi cierra Tresmares: un rotulo, un filete, y una fila por solucion con el nombre grande y su descripcion, filete entre filas. Es una SECCION de la pagina, no parte del pie: lleva el aire de seccion arriba y abajo, y el pie viene despues, separado por el horizonte. Cada fila entera es el enlace; el disco del cursor lo anuncia. */ .otras-soluciones { padding:clamp(6rem,13vh,10rem) var(--margen) clamp(7rem,15vh,11rem); } .otras-soluciones .rotulo { display:block; margin:0 0 clamp(1.6rem,3.2vh,2.4rem); font-family:var(--texto); font-size:var(--t4); font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--tinta-suave); } /* Solo el nombre, GRANDE y a dos lineas, partido igual que en las tarjetas de la home; mucho aire por fila; y a la derecha un cuadradito con una flecha. Nada mas. Aqui hubo nombre mediano con el claim al lado y era correcto pero no satisfacia: lo satisfactorio es la escala y que en la fila no haya nada que leer. La flecha aqui no es un «leer mas»: es el unico control de la fila, y va en su caja como en Tresmares. */ /* Solo el nombre, GRANDE y a dos lineas; mucho aire por fila; y a la derecha un cuadradito con una flecha. Al pulsar, la fila se abre como en Tresmares: la imagen principal de esa solucion en el centro, muy atenuada, y a la derecha un texto pequeno con «Ver la solucion». Solo una abierta a la vez. La cabecera de la fila es un boton (abre), el enlace es el del detalle (va a la ficha). */ .otras { list-style:none; margin:0; padding:0; } .otras li { border-top:1px solid var(--linea); } .otras li:last-child { border-bottom:1px solid var(--linea); } .otras .fila-otra { all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; justify-content:space-between; align-items:flex-start; padding:clamp(2.8rem,6.2vh,4.8rem) 0 clamp(3.4rem,7.4vh,5.6rem); color:inherit; } .otras .fila-otra:focus-visible { outline:2px solid var(--tinta); outline-offset:6px; } .otras .nombre-otra { font-family:var(--display); font-weight:400; font-size:clamp(2.8rem,5.4vw,5rem); line-height:1.02; letter-spacing:-0.018em; color:var(--tinta); transition:color .42s var(--curva); } .otras .nombre-otra i { display:block; font-style:normal; } .otras .caja { flex:none; width:2.75rem; height:2.75rem; margin-top:0.55rem; display:grid; place-items:center; border:1px solid var(--linea); color:var(--tinta); font-family:var(--texto); font-size:1rem; line-height:1; transition:border-color .42s var(--curva), background .42s var(--curva), color .42s var(--curva), transform .6s var(--curva); } /* el oro del nombre: al pasar el ratón SOLO donde hay ratón (en el teléfono el hover se quedaba pegado tras el toque y el nombre seguía dorado con la fila ya cerrada), y siempre mientras la fila está abierta */ @media (hover:hover) { .otras .fila-otra:hover .nombre-otra { color:var(--oro); } .otras .fila-otra:hover .caja { border-color:var(--tinta); } } .otras li.abierta .nombre-otra { color:var(--oro); } .otras li.abierta .caja { background:var(--tinta); color:var(--fondo); border-color:var(--tinta); transform:rotate(180deg); } /* EL DETALLE: cerrado no ocupa nada; abierto despliega en altura con la curva de la casa. La imagen va en el centro, atenuada al 28 % y con el revelado de la casa, para que sea presencia y no protagonista. */ .otras .detalle { display:grid; grid-template-rows:0fr; transition:grid-template-rows .9s var(--curva); } .otras li.abierta .detalle { grid-template-rows:1fr; } .otras .detalle > div { overflow:hidden; } .otras .detalle-dentro { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(0.8rem,1.8vw,1.8rem); align-items:start; padding:0 0 clamp(3rem,6.5vh,4.8rem); opacity:0; transform:translateY(10px); transition:opacity .7s var(--curva) .25s, transform .9s var(--curva) .25s; } .otras li.abierta .detalle-dentro { opacity:1; transform:none; } /* LA IMAGEN ES EL FONDO de la fila abierta, no una lamina en una columna: ocupa el centro entero, muy palida, y se disuelve por los bordes para que no tenga marco. Es la forma gris de Tresmares, hecha con la foto de la solucion. El texto va encima, a la derecha. */ .otras .lamina-otra { display:none; } /* retirada por ahora: no convencia como fondo */ .otras .texto-otra { grid-column:8 / 13; padding-top:0; } .otras .claim-otra { margin:0 0 1rem; font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.55vw,1.4rem); line-height:1.3; color:var(--tinta); } .otras .entrada-otra { margin:0 0 1.6rem; font-family:var(--texto); font-size:var(--t3); line-height:1.6; color:var(--piedra); } .otras .ver-otra { display:inline-block; position:relative; text-decoration:none; padding-bottom:0.35em; font-family:var(--texto); font-size:var(--t4); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--tinta); background:linear-gradient(var(--oro), var(--oro)) left bottom / 0% 1px no-repeat; transition:background-size .42s var(--curva); } .otras .ver-otra::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--linea); } .otras .ver-otra:hover { background-size:100% 1px; } @media (max-width: 860px) { .otras .lamina-otra { left:0; right:0; } .otras .texto-otra { grid-column:1 / 13; } } /* ── EL PIE DE LAS FICHAS ───────────────────────────────────────────────── Minimo, de una linea: nombre y legales. El pie completo (marca, navegacion, contacto y las seis plazas con hora local) vive en la HOME, que es donde alguien va a buscar esas cosas. Repetirlo en las seis fichas alarga seis paginas para decir lo mismo. Aqui el bloque de tinta ya lo abre el cierre; el pie solo lo remata. */ /* Sobre marfil, como todo lo demas: el pie es una linea de datos, no un bloque. Su unico trazo es el filete gris de arriba. */ /* Simple y oscuro, como el de la home: una linea de datos sobre tinta. El horizonte de oro va justo encima, y es la frontera entre la pagina y el pie, la misma linea que en El Metodo. */ .pie { position:relative; z-index:2; background:#2B2116; color:rgba(234,228,216,0.55); padding:clamp(2.2rem,4.5vh,3.2rem) var(--margen) clamp(2.2rem,4.5vh,3.2rem); } .pie .barra-baja { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0.9rem 2rem; } .pie .firma { margin:0; font-size:var(--t4); } .pie .menudo { display:flex; flex-wrap:wrap; gap:1.6rem; } .pie .menudo a { font-size:var(--t4); color:rgba(234,228,216,0.56); text-decoration:none; /* .56: 4,9:1 sobre tinta (AA) */ transition:color .28s var(--curva); } .pie .menudo a:hover { color:rgba(234,228,216,0.75); } @media (max-width: 860px) { .pie .barra-baja { justify-content:flex-start; } } @media (max-width: 860px) { .nombre-sol .linea { white-space:normal; } .pie-hero { flex-direction:column; align-items:flex-start; gap:2.5rem; } } /* ══ PAGINAS LEGALES ══════════════════════════════════════════════════════ Aviso legal, privacidad y cookies. Misma nav y mismo pie que las fichas; en medio, una columna de lectura. Texto de trabajo hasta que el asesor legal del cliente entregue el definitivo: los datos que faltan van entre corchetes y no se inventan. */ .legal { padding:clamp(9rem,18vh,14rem) var(--margen) clamp(7rem,14vh,11rem); display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(0.8rem,1.8vw,1.8rem); } .legal .etiqueta-l { grid-column:2 / 12; display:block; margin-bottom:1.4rem; font-family:'Inter',sans-serif; font-weight:500; font-size:var(--t4); letter-spacing:0.22em; text-transform:uppercase; color:var(--tinta-suave); } .legal h1 { grid-column:2 / 9; margin-bottom:clamp(3rem,6vh,4.5rem); font-family:var(--display); font-weight:400; font-size:var(--d2); line-height:1.16; letter-spacing:-0.008em; color:var(--tinta); } .legal .cuerpo-l { grid-column:2 / 9; } .legal .cuerpo-l h2 { margin:clamp(2.4rem,5vh,3.6rem) 0 0.9rem; font-family:var(--display); font-weight:400; font-size:clamp(1.35rem,2vw,1.8rem); line-height:1.2; color:var(--tinta); } .legal .cuerpo-l h2:first-child { margin-top:0; } .legal .cuerpo-l p, .legal .cuerpo-l li { font-family:'Inter',sans-serif; font-weight:300; font-size:var(--t1); line-height:1.75; color:var(--tinta); } .legal .cuerpo-l p + p { margin-top:1rem; } .legal .cuerpo-l ul { margin:0.8rem 0 0 1.2rem; } .legal .cuerpo-l li + li { margin-top:0.4rem; } .legal .cuerpo-l a { color:var(--tinta); text-decoration:none; background:linear-gradient(var(--oro),var(--oro)) left bottom / 100% 1px no-repeat; } .legal .pendiente { grid-column:2 / 9; margin-top:clamp(3rem,6vh,4.5rem); padding-top:1.4rem; border-top:1px solid var(--linea); font-family:'Inter',sans-serif; font-size:var(--t3); line-height:1.6; color:var(--tinta-suave); } .legal .actualizado { grid-column:2 / 9; margin-top:1rem; font-family:'Inter',sans-serif; font-size:var(--t3); color:var(--tinta-suave); } @media (max-width:860px) { .legal .etiqueta-l, .legal h1, .legal .cuerpo-l, .legal .pendiente, .legal .actualizado { grid-column:1 / -1; } } /* ── EL IDIOMA: ES | EN, junto a la accion. Dos letras y un filete; el activo en tinta, el otro suave. No lleva .enlace: el scrollspy indexa esa clase por posicion y un enlace mas lo desplazaria. ── */ /* Como en Tresmares (pedido de Gonzalo, 16 sep 2026): en reposo solo se ve el idioma actual con un punto de oro debajo; al pulsarlo (clase .abierto) aparece el otro a su lado. El actual va siempre primero en el marcado. */ .idioma { display:inline-flex; align-items:center; font-family:var(--texto); font-weight:500; font-size:var(--t4); letter-spacing:0.18em; text-transform:uppercase; } .idioma a { position:relative; color:var(--tinta-suave); text-decoration:none; transition:color var(--t-elemento) var(--curva); } .idioma a:hover, .idioma a[aria-current] { color:var(--tinta); } .idioma a[aria-current]::after { content:''; position:absolute; left:calc(50% - 0.09em); bottom:-0.55em; width:4px; height:4px; border-radius:50%; background:var(--oro); } /* el otro idioma no ocupa sitio en reposo, asi que el actual queda pegado a la accion; al pulsar el actual, el otro gana su anchura a la derecha y el actual se desplaza a la izquierda para dejarle hueco (pedido de Gonzalo). Se queda abierto hasta que se vuelve a pulsar, como en Tresmares: ni el hover lo abre ni salir del raton lo cierra. */ .idioma a:not([aria-current]) { max-width:0; margin-left:0; opacity:0; overflow:hidden; white-space:nowrap; pointer-events:none; transition:max-width .5s var(--curva), margin var(--t-elemento) var(--curva), opacity var(--t-elemento) var(--curva); } .idioma.abierto a:not([aria-current]) { max-width:3em; margin-left:1rem; opacity:1; pointer-events:auto; } .idioma a[aria-current] { cursor:pointer; } /* ── EL CAMBIO DE IDIOMA (ver el script de cabecera) ── */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration:.55s; animation-timing-function:var(--curva); } html.se-va body { opacity:0; transition:opacity .45s var(--curva); } html.cambia.sin-vt body { animation:aparecer-idioma .6s var(--curva) both; } @keyframes aparecer-idioma { from { opacity:0; } } /* ══ MÓVIL · LA BARRA Y EL MENÚ (referencia: Tresmares) ══════════════════ Hasta 860 px: marca a la izquierda, disparador de 64x64 a la derecha con su filete, y los enlaces en un panel marfil a pantalla completa que entra desde la derecha. Es el MISMO .enlaces del escritorio recolocado. */ .disparador { display:none; } @media (max-width: 860px) { .nav { padding-top:0; padding-bottom:0; min-height:64px; gap:0; } .nav .marca { display:block; } .disparador { display:block; flex:none; margin-left:auto; width:64px; height:64px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; position:relative; z-index:32; border-left:1px solid var(--linea); border-radius:0; } .disparador::before, .disparador::after { content:''; position:absolute; left:21px; width:22px; height:1.5px; background:currentColor; transition:transform .5s var(--curva), top .5s var(--curva); } .disparador::before { top:27px; } .disparador::after { top:36px; } .nav.abierta .disparador::before { top:31px; transform:rotate(45deg); } .nav.abierta .disparador::after { top:31px; transform:rotate(-45deg); } .nav .enlaces { /* alto explicito: la barra (backdrop-filter, transform) es bloque contenedor del panel fijo y con bottom:0 se quedaba en los 68 px de la barra */ position:fixed; top:0; right:0; bottom:auto; width:100%; height:100vh; height:100dvh; z-index:31; display:none; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; padding:calc(64px + 2.2rem) 1.5rem 1.5rem; background:var(--marfil); color:var(--tinta); transform:translateX(100%); transition:transform .7s var(--curva); overflow-y:auto; -webkit-overflow-scrolling:touch; } .nav.montado .enlaces { display:flex; } .nav.abierta .enlaces { transform:none; } .enlaces .enlace, .enlaces > a:not(.cta) { font-family:var(--display); font-weight:400; font-size:2rem; line-height:1.45; letter-spacing:-0.005em; color:var(--tinta); opacity:1; } .enlaces .enlace .rueda { display:block; } .enlaces .enlace .doble { display:none; } .guia { display:none; } /* en el panel se ven los dos idiomas a la vez, como en Tresmares: el actual en tinta con su punto, el otro en suave; sin desplegable */ .idioma { margin-top:auto; padding-top:2rem; font-size:0.8rem; letter-spacing:0.22em; } .idioma a:not([aria-current]) { max-width:none; margin-left:1.4rem; opacity:1; pointer-events:auto; transition:color var(--t-micro) var(--curva); } .idioma a[aria-current] { cursor:default; } .enlaces .cta { align-self:stretch; justify-content:center; margin-top:1.25rem; padding:1rem 1.25rem; font-size:0.95rem; } html.menu-abierto, html.menu-abierto body { overflow:hidden; } } @keyframes deslizar-movil { from { transform:translateX(var(--desde, 0px)); } to { transform:translateX(0); } } /* NEWSREADER (Gonzalo, 18 sep: «by far», tras comparar en el teléfono; Boska se quedaba demasiado fina). Mismo sistema de pesos que con Boska, un escalón más arriba: lo que iba en 400 va en 500 y lo que iba en 500, en 600. */ .nombre-sol .linea, .titulo-bloque, .frase-final, .otras .nombre-otra, .otras .texto-otra, .legal h1, .legal .cuerpo-l h2, .registro li, .tabla .campo, .mensaje h2, .mensaje .segunda, .declara, .titulo, .letras .frase, .porton .nombre, .perspectivas h2, .cuadricula h3, .soluciones h2, .escena.portada h2, .escena .nombre .linea, .metodo h2, .metodo .paso .nombre, .invitacion .declaracion, .puente, .nav.montado .enlaces .enlace { font-weight:500; } .fuerte, .mensaje .primera, .mensaje h2 .fuerte, .frase-final .fuerte, .nombre-sol .linea + .linea, .escena .nombre .linea + .linea, .titulo .fuerte, .letras .frase .fuerte, .invitacion .declaracion .fuerte, .escena.portada h2 .fuerte, .perspectivas h2 .fuerte, .metodo h2 .fuerte, .soluciones h2 .fuerte { font-weight:600; } @media (max-width: 860px) { .nav.oculta { transform:none; } } /* en el teléfono la retirada la anima el script */