/* ── UNA SOLA FAMILIA: INSTRUMENT SANS, AUTOALOJADA (fundador, 11-sep) ───── "La serif editorial en títulos lee boda/perfume de lujo, no herramienta que te quita líos; el cuerpo en otra familia rompe la voz." Una sola familia en toda la web; la personalidad la dan los pesos y el violeta. Variable, 400 a 700, subconjunto latino. Servida desde lazoo.app y no desde Google Fonts: la privacidad dice que no hay terceros. ⚠️ Instrument Sans NO tiene 800 (se comprobó: Google devuelve error). El encargo pedía 800 para el H1; va a 700, el máximo real, y `font-synthesis: none` en el body impide que el navegador invente una negrita falsa. */ @font-face { font-family: "Instrument Sans"; src: url("/fuentes/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* LAZOO — landing de solicitud (9-sep). Tokens del §3 de docs/doctrina-diseno-v1.md, sin inventar nada: crema domina, violeta estructura, dorado no aparece (60-30-10). */ :root { --crema: #F5EDE0; /* más cálido que el #FAF7F2 de la doctrina: el fundador, 11-sep, "un tono más crema" */ --tinta: #1A1523; --violeta: #5B21B6; /* Color del logo-texto. Separado a propósito: el logotipo definitivo traerá un violeta más oscuro y el cambio tiene que ser UNA línea. El violeta de "lazo" en el texto NO cambia: es la jerarquía marca/objeto. 13-sep, y esa línea se movió tres veces el mismo día: 900 (#4C1D95) → profundo (#2E1065) → aquí. El 900 se leía como un violeta más del cuerpo; el profundo "tiraba mucho a negro" (fundador). Este se queda en medio: es el violeta oscuro de la marca, con distancia suficiente del #5B21B6 del "lazo" del texto para que no se confundan. */ --violeta-marca: #3B1A8A; /* El crema de la doctrina, más frío que el de la página. Vive aquí porque el botón invertido del panel oscuro lo pide por número (fundador, 13-sep). */ --crema-papel: #FAF7F2; /* El crema CÁLIDO intermedio: ni el de la página ni blanco. Es la arena de las cajas de regalo, que hasta hoy solo existía dentro del generador de la montaña; sobre tinta es donde se escribe la marca (fundador, 13-sep). */ --arena: #E3D5BC; --sans: "Instrument Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --violeta-profundo: #2E1065; --lavanda: #EDE9FE; --linea: #E7E1D8; --suave: #6B6480; } * { box-sizing: border-box; } body { margin: 0; background: var(--crema); color: var(--tinta); /* System stack: la doctrina dice esperar al test de pasillo del wordmark. */ font-family: var(--sans); font-synthesis: none; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .hoja { max-width: 40rem; margin: 0 auto; padding: 0 22px; } /* El texto corrido se estrecha por debajo del contenedor: 66 caracteres es el centro del rango cómodo. Los títulos no lo llevan — un titular corto quiere ocupar el ancho entero. */ p, li { max-width: 66ch; } /* ── Cabecera ────────────────────────────────────────────────────────────── */ /* ── LA BARRA DE LAS PÁGINAS DE DENTRO (fundador, 13-sep) ────────────────── "La misma barra que la landing (logo arriba, mismo tamaño y violeta de marca), SIN el confeti de regalos — ese queda solo en la portada." Es la `.estela` de la portada con lo mismo y nada más: fija arriba, el degradado de crema que recoge lo que pasa por debajo, y el logo centrado. ⚠️ `pointer-events` se apaga en la barra y se enciende SOLO en el logo: la barra ocupa todo el ancho y, si atrapara los clics, se comería los de la primera fila de fichas que pasa por debajo. */ .barra { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 10px 24px 14px; text-align: center; pointer-events: none; /* ⚠️ CREMA MACIZO CASI HASTA EL BORDE. Con el degradado a 72 % quedaba una banda de nueve píxeles entre el final de lo opaco y donde empieza la cabecera de la categoría, y por ahí asomaba el pie de la ficha que pasaba por debajo: un "en El Corte Inglés" suelto flotando bajo el logo. */ background: linear-gradient(to bottom, var(--crema) 0, var(--crema) 88%, transparent 100%); } .barra .marca { /* Dentro de la barra el aire lo pone la barra. Y en LÍNEA, no en bloque: la regla global lo centra con `margin:auto` y aquí ese margen se quita, así que un bloque se quedaría pegado a la izquierda — el `text-align` de la barra solo centra lo que va en línea. */ display: inline-block; padding: 0; margin: 0; pointer-events: auto; } /* Y el contenido empieza por debajo de la barra. La portada NO: allí la franja vive dentro de su propia escenografía y el hero ya tiene su colchón. */ .hoja:not(.portada) { padding-top: 58px; } /* ── LA MARCA ES LA MISMA EN TODAS LAS PÁGINAS (fundador, 13-sep) ────────── "El lazoo que se ve arriba tiene que tener el mismo color y formato, exactamente igual que el de la página principal, como si fuese el logo, y presente arriba en el centro." Así que estos valores son los de `.estela .marca` de la portada, uno a uno: 19 px, 700 y el mismo tracking corto. Si alguna vez cambia el logo, cambian LOS DOS o dejan de ser el mismo. */ .marca { display: block; width: fit-content; margin: 0 auto; padding: 36px 0 0; font-family: var(--sans); font-size: 19px; font-weight: 700; /* SIN TRAZO (fundador, 13-sep: "prefiero no sombrearlo"). El `-webkit-text-stroke` venía del 12-sep, cuando pidió "algo más de grosor" y la familia se acaba en 700; engorda el dibujo de la letra pero de cerca se lee como un sombreado. Si algún día se quiere más peso, será con otra fuente, no engordando esta. */ line-height: 1.25; letter-spacing: 0.04em; /* Nada de mayúsculas forzadas: la marca se escribe "lazoo", siempre en minúscula (fundador, 12-sep). */ text-transform: none; color: var(--violeta-marca); text-decoration: none; } /* ── Portada ─────────────────────────────────────────────────────────────── */ h1 { text-wrap: balance; margin: 52px 0 22px; font-family: var(--sans); font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; } @media (min-width: 640px) { h1 { font-size: 52px; } } .entradilla { text-wrap: pretty; margin: 0 0 18px; font-size: 19px; line-height: 1.55; color: #322D45; } /* El último párrafo de la entradilla —el de los "sin"— respira más antes del formulario: es el remate del argumento, no una línea más. */ .entradilla:last-of-type { margin-bottom: 38px; } .construccion { margin: 18px 0 0; font-size: 15px; font-style: italic; color: var(--suave); } /* ── Lista de espera ─────────────────────────────────────────────────────── */ form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } input[type="email"] { flex: 1 1 240px; min-width: 0; padding: 14px 16px; font: inherit; font-size: 16px; /* 16px o iOS hace zoom al enfocar */ color: var(--tinta); background: #fff; border: 1px solid var(--linea); border-radius: 14px; } input[type="email"]:focus { outline: 2px solid var(--violeta); outline-offset: 1px; border-color: transparent; } button { flex: 0 0 auto; padding: 14px 22px; font: inherit; font-size: 16px; font-weight: 550; color: #fff; background: var(--violeta); border: 0; border-radius: 14px; cursor: pointer; } button:hover { background: var(--violeta-profundo); } button[disabled] { opacity: .55; cursor: default; } /* Micro-copy de consentimiento: el RGPD pide decir para qué se recoge EN EL PUNTO de recogida, no solo en la página de privacidad. */ .consentimiento { margin: 10px 0 0; font-size: 13px; color: var(--suave); } .consentimiento a { color: var(--suave); } .aviso { margin: 12px 0 0; font-size: 15px; } .aviso.bien { color: var(--violeta); } .aviso.mal { color: #B4232A; } /* ── Bloques ─────────────────────────────────────────────────────────────── */ hr { height: 1px; margin: 64px 0; border: 0; background: var(--linea); } h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 32px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violeta); } /* Sin filete. El dorado queda PROHIBIDO fuera de lo ceremonial (ley de marca, fundador 11-sep): ni texto, ni rayas, ni separadores en la web. */ h3 { text-wrap: balance; margin: 0 0 8px; font-size: 17px; font-weight: 650; } .paso { margin: 0 0 40px; } .paso:last-child { margin-bottom: 0; } .paso p { text-wrap: pretty; margin: 0; color: #322D45; } /* ── Páginas legales ─────────────────────────────────────────────────────── */ .legal h1 { font-size: 28px; margin-bottom: 32px; } .legal h3 { margin: 32px 0 6px; } .legal p, .legal li { color: #322D45; font-size: 16px; } .legal ul { padding-left: 20px; } .legal li { margin-bottom: 10px; } /* ── Pie ─────────────────────────────────────────────────────────────────── */ footer { margin-top: 72px; padding: 28px 0 48px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--suave); } footer a { color: var(--suave); } footer p { margin: 0 0 4px; } a { color: var(--violeta); } /* ── El segundo formulario, al cerrar ────────────────────────────────────── Mismas palabras que arriba. Quien lee los tres bloques enteros ya está convencido y no debería tener que volver a subir a buscar el campo. */ .apuntarse.cierre { margin-top: 48px; } /* ── Catálogo (/ideas) ───────────────────────────────────────────────────── La página que miran las redes de afiliación. Tarjeta sobria: foto, marca y título. SIN PRECIO, por la regla de oro 4 — el precio lo dice la tienda. */ .universo { margin: 56px 0 0; } .universo .intro { text-wrap: pretty; margin: 0 0 24px; font-size: 16px; color: var(--suave); } .rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; } @media (min-width: 620px) { .rejilla { grid-template-columns: repeat(3, 1fr); } } /* ── LA GALERÍA SE SALE DE LA COLUMNA DE TEXTO (fundador, 13-sep) ────────── "La foto manda: el pie no debe superar ~15% del alto de la ficha". Con la rejilla metida en los 40 rem del texto, la foto medía 188 px y el pie salía al 19-26 % — y no por la letra, que ya está en el mínimo pedido, sino porque la foto era pequeña. A 1100 px la foto pasa a ~356 px y el pie baja al 15 % con título de dos líneas y al 11 % con una. El texto NO se ensancha: la columna estrecha es lo que lo hace legible. */ @media (min-width: 900px) { .rejilla { width: min(1100px, calc(100vw - 48px)); /* El .hoja está centrado, así que su 50 % es el centro de la ventana. */ margin-left: calc(50% - min(1100px, 100vw - 48px) / 2); } } /* ── Y EL TEXTO EMPIEZA DONDE LAS FOTOS (fundador, 13-sep: "en ordenador no deberíamos estirar más los textos? Las fotos ya anchan la página"). La rejilla se salía de la columna y el texto se quedaba dentro, así que titular y párrafos arrancaban 170 px a la derecha del borde de la primera foto: se leía como un texto indentado, no como una página. Ahora la hoja entera mide lo que la rejilla y la rejilla deja de salirse — mismo borde izquierdo para todo. Los párrafos NO se ensanchan: siguen cortados a 66 caracteres, que es lo que los hace legibles. */ @media (min-width: 1160px) { .hoja:not(.portada) { max-width: 1148px; } .hoja:not(.portada) .rejilla { width: auto; margin-left: 0; } } .ficha { margin: 0; } .ficha img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--linea); border-radius: 16px; } /* ── EL PIE DE FOTO, DISCRETO (fundador, 13-sep) ─────────────────────────── LA FOTO MANDA: el pie entero no pasa del ~15 % del alto de la ficha. Por eso el título se corta a dos líneas — sin tope, un título largo de El Corte Inglés se comía cuatro y la rejilla dejaba de ser una rejilla de fotos. ⚠️ Y LA MARCA DEJA DE IR EN VIOLETA: el violeta es de lazoo, no de las marcas ajenas. Lucir a Dyson con nuestro color es regalarle nuestra única señal de identidad. */ .ficha figcaption { display: block; padding: 8px 2px 0; } /* ── EL PIE ES LA MARCA, Y LA TIENDA DEBAJO (fundador, 13-sep) ───────────── Antes el pie era marca + nombre del producto. Ahora manda la MARCA —que es lo que dice de un vistazo qué clase de regalo es— con la tienda debajo, en pequeño, y el nombre del producto fuera: en una rejilla de fotos, leer "Lámpara de mesa Mercadal…" no añade nada que la foto no diga ya. Si la tienda ES la marca (Kave Home, PDPAOLA, Viceroy), se dice UNA vez. */ .ficha-marca { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: #4A4454; } .ficha-tienda { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: #8A8494; } .ficha-titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 1.35; color: #4A4454; } .nota { text-wrap: pretty; margin: 56px 0 0; font-size: 13px; line-height: 1.55; color: var(--suave); } /* ── El ejemplo (/ejemplo) ───────────────────────────────────────────────── Un lazo contado en pasado. Sin botones que inviten a pulsar: todo lo que se cuenta ya ocurrió, así que no hay interacción falsa que explicar. */ /* El sello de "esto es un ejemplo" va ARRIBA y visible, no en letra pequeña al fondo: un caso inventado que parece real es un testimonio falso. */ .sello { margin: 0 0 28px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--suave); background: #fff; border: 1px solid var(--linea); border-radius: 12px; } /* El arranque del relato: tres cifras con icono, antes del primer párrafo. Las mismas tres cosas que se preguntan al crear un lazo —cuántos, cuándo y cuánto—, para que la página no abra con seis párrafos seguidos de texto. ⚠️ TRES COLUMNAS SIEMPRE, también en el móvil: con `flex-wrap` caían 2+1 y la última quedaba huérfana ocupando el doble que sus hermanas. */ .abre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 30px; } .abre div { padding: 12px 8px 13px; text-align: center; background: #fff; border: 1px solid var(--linea); border-radius: 14px; } .abre svg { display: block; margin: 0 auto 7px; width: 19px; height: 19px; color: var(--violeta-marca); } .abre b { display: block; font-size: 16px; line-height: 1.2; color: var(--violeta-profundo); } .abre span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--suave); } @media (min-width: 900px) { /* ⚠️ SE QUEDA EN LA COLUMNA DEL TEXTO. En ordenador la hoja se ensancha a 1148 px para que quepan las rejillas de fotos, pero el texto sigue cortado a 66ch (835 px): sin este tope las tres cajas volaban 270 px más a la derecha que el párrafo de debajo y el arranque se leía descuadrado. */ .abre { gap: 14px; max-width: 835px; } .abre div { padding: 16px 12px 17px; } .abre svg { width: 22px; height: 22px; } .abre b { font-size: 19px; } .abre span { font-size: 13px; } } .cifras { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } .cifras div { flex: 1 1 120px; padding: 14px 16px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; } .cifras b { display: block; font-size: 19px; color: var(--violeta-profundo); } .cifras span { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); } .apartado { margin: 32px 0 14px; font-size: 14px; font-weight: 600; color: var(--tinta); } /* La parte de cada uno: la cifra que de verdad importa cuando sois ocho. */ .ficha-parte { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--violeta); font-variant-numeric: tabular-nums; } /* Las descartadas se ven, pero se ven descartadas. */ /* Apagadas al 55 % y NUNCA tachadas (fundador, 13-sep): estuvieron encima de la mesa y se ven, pero no compiten con lo que ganó. Se apaga la ficha ENTERA, no solo la foto: con el pie a plena tinta seguían pareciendo candidatas vivas. */ .rejilla.apagada .ficha { opacity: .55; } .rejilla.apagada .ficha img { filter: saturate(.7); } .rejilla.apagada .ficha-titulo, .rejilla.apagada .ficha-parte { color: var(--suave); } .ganadora { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 18px; background: #fff; border: 1px solid var(--linea); border-radius: 18px; } @media (min-width: 620px) { .ganadora { grid-template-columns: 200px 1fr; align-items: start; } } .ganadora img { width: 100%; height: auto; border-radius: 12px; } .ganadora-titulo { text-wrap: pretty; margin: 4px 0 0; font-size: 17px; font-weight: 650; } .ganadora-precio { margin: 6px 0 0; font-size: 24px; font-weight: 650; color: var(--violeta-profundo); font-variant-numeric: tabular-nums; } .ganadora-nota { margin: 12px 0 0; font-size: 15px; color: var(--suave); } .cuenta { margin: 0 0 24px; border: 1px solid var(--linea); border-radius: 18px; background: #fff; overflow: hidden; } .linea { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--linea); font-size: 16px; } .linea:last-child { border-bottom: 0; } .linea b { font-variant-numeric: tabular-nums; white-space: nowrap; } .linea.destacada { background: var(--lavanda); } .linea.destacada b { color: var(--violeta-profundo); } .linea em { font-style: normal; color: var(--suave); } /* Los dos regalos elegidos: más grandes que las propuestas, van de dos en dos. */ .rejilla.dos { grid-template-columns: repeat(2, 1fr); } /* ── /ejemplo v3 (fundador, 13-sep): tres tamaños que cuentan la historia ── La página tiene tres momentos y cada uno pide una escala distinta: .grande la primera candidata, sola .tres las tres ideas, IGUALES entre sí — aún no hay elegida .elegidas el par que gana, a plena opacidad .menor lo que se dejó pasar, apagado y más pequeño La jerarquía llega SOLO en el momento de decidir: antes las tres valen lo mismo, y eso es media historia contada sin una palabra. */ /* ⚠️ EN MÓVIL MANDA EL ANCHO, NO EL ALTO. La foto es cuadrada, así que con la ficha a todo el ancho de la columna su alto ya se queda por debajo del tope de 44svh y ese tope no recorta nada: para que la foto sea más pequeña (fundador, 13-sep) hay que estrechar la ficha. */ /* Y con la foto ya sin blanco alrededor, la ficha se estrecha otra vez: el bolso ocupa el 92 % del cuadro en vez del 70 %, así que la misma ficha lo enseñaba MÁS grande que antes. A 62 % el bolso se ve igual que siempre dentro de una caja un cuarto más pequeña, que es lo que se pedía. */ .rejilla.grande { grid-template-columns: minmax(0, 1fr); max-width: min(340px, 62%); } /* ⚠️ LA FOTO NO PUEDE LLENAR LA PANTALLA. Con la foto a pantalla completa, el pie —donde está el "≈ 10 € por persona", que es toda la gracia— caía bajo el pliegue en el móvil: se veía el producto sin lo único que lo convierte en un regalo de grupo. La ficha entera cabe en 60-65vh con el arranque del párrafo siguiente asomando. */ .rejilla.grande .ficha img { max-height: 44svh; object-position: center; } /* ⚠️ EN ORDENADOR LA FILA DE TRES NECESITA TOPE, o deja de ser la fila pequeña. La hoja se ensancha a 1148 px y estas tres eran las ÚNICAS sin máximo (elegidas 560, menor 380), así que medían 358 px cada una: más que la ficha del bolso, que es la protagonista de la sección. La jerarquía de B→C→D salía invertida. A 830 miden 266, lo mismo que las elegidas —que es lo correcto: son los mismos objetos— y el bolso vuelve a ser el mayor. En móvil no ata (390 < 830) y las tres siguen en fila, como debe ser. */ .rejilla.tres { grid-template-columns: repeat(3, 1fr); max-width: 830px; } .rejilla.elegidas { grid-template-columns: repeat(2, 1fr); max-width: 560px; } /* La fila menor tiene que SER menor en cualquier ancho: con un máximo en píxeles, en el móvil medía lo mismo que las elegidas y la jerarquía —que es toda la sección— se perdía. */ .rejilla.menor { grid-template-columns: repeat(2, 1fr); max-width: min(380px, 64%); margin-top: 16px; gap: 12px; } /* En las fichas pequeñas el pie se encoge con ellas, o no cabe ni la marca y el "≈ 2 € por persona" se parte en dos líneas. */ .rejilla.tres .ficha-marca, .rejilla.menor .ficha-marca { font-size: 13px; } .rejilla.tres .ficha-titulo, .rejilla.menor .ficha-titulo { font-size: 11px; } .rejilla.tres .ficha-parte, .rejilla.menor .ficha-parte { font-size: 11px; } /* En ordenador la rejilla de /ideas se sale de la columna de texto: estas no, que son parte del relato y van con él. */ @media (min-width: 900px) { .rejilla.grande, .rejilla.tres, .rejilla.elegidas, .rejilla.menor { width: auto; margin-left: 0; } } .salida { margin-top: 36px; } /* El relato respira entre la ficha y lo que se cuenta después: sin esto el párrafo arranca pegado al chip de "por persona" y parece su pie. */ .rejilla.grande + .entradilla, .rejilla.tres + .entradilla, .rejilla.elegidas + .entradilla, .rejilla.menor + .entradilla { margin-top: 26px; } .rejilla.grande, .rejilla.tres, .rejilla.elegidas, .rejilla.menor { margin-bottom: 0; } .ficha-precio { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--violeta-profundo); font-variant-numeric: tabular-nums; } /* ── LOS PASOS, CON NÚMERO DE VERDAD ─────────────────────────────────────── Antes el "1." iba en negrita dentro del titular y no se distinguía del texto. Ahora es una cifra grande en serif, en dorado, fuera de la columna de lectura: el ojo cuenta tres pasos sin leer una palabra. */ .paso { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; margin: 0 0 40px; } .paso-num { grid-row: span 2; font-family: var(--sans); font-size: 40px; line-height: 0.9; /* VIOLETA Y NO DORADO, y es la doctrina la que lo manda. El dorado sobre crema da 2,10:1 y la L10 exige 4,5:1 — la propia doctrina lo dice: "dorado #D9A441 sobre crema NO pasa", y por eso lo define como acento GRÁFICO. Un número que dice en qué paso vas es texto, no adorno. El dorado se queda donde sí vale: el filete de las etiquetas de sección, que no comunica nada por sí solo. */ color: var(--violeta); /* 75 % es el punto justo: 4,75:1, pasa el 4,5 de la L10 sin excepciones, y sigue siendo un número que acompaña en vez de gritar. Se midió: al 55 % daba 2,97 y al 65 % 3,74, que solo valdría por ser texto grande. */ opacity: .75; } .paso h3 { margin: 0 0 6px; } .paso p { margin: 0; } /* En "Por qué LAZOO" no hay números: los bloques ocupan el ancho entero. */ .paso.sin-numero { grid-template-columns: 1fr; } /* ── LA TIRA DE PRODUCTO ─────────────────────────────────────────────────── La portada no tenía ni una imagen y parecía un documento. Esto es producto real de tiendas reales, que es justo lo que la página afirma tener. */ .tira { margin: 28px 0 0; } .tira-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (min-width: 620px) { .tira-fotos { grid-template-columns: repeat(6, 1fr); } } .tira-fotos img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--linea); border-radius: 12px; } .tira-pie { margin: 12px 0 0; font-size: 13px; color: var(--suave); } /* ── LA LLAMADA AL EJEMPLO ───────────────────────────────────────────────── Estaba enterrada en el pie, junto al aviso legal, que es donde nadie mira. Es la mejor página del sitio y ahora es lo segundo que se ve. */ .llamada { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 18px; margin: 8px 0 0; padding: 16px; background: #fff; border: 1px solid var(--linea); border-radius: 18px; text-decoration: none; color: inherit; } .llamada:hover { border-color: var(--violeta); } .llamada img { width: 100%; height: auto; border-radius: 12px; } .llamada-titulo { display: block; font-family: var(--sans); font-size: 22px; line-height: 1.15; } .llamada-texto { display: block; margin-top: 4px; font-size: 14px; color: var(--suave); } .llamada-ir { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--violeta); } /* ── EL PIE, EN DOS NIVELES ──────────────────────────────────────────────── Lo útil arriba y con peso; lo legal debajo y en gris. Antes iba todo en la misma línea y el ejemplo parecía una nota a pie de página. */ .pie-util { margin: 0 0 10px; font-size: 15px; } .pie-util a { color: var(--tinta); text-decoration: none; font-weight: 550; } .pie-util a:hover { color: var(--violeta); } .pie-util span { color: var(--linea); margin: 0 8px; } .pie-legal { font-size: 13px; } .pie-legal a { color: var(--suave); } /* ══════════════════════════════════════════════════════════════════════════ PORTADA v2 — ESCENOGRAFÍA (fundador, 11-sep). EL COPY NO SE TOCA. ══════════════════════════════════════════════════════════════════════════ Cada bloque es una escena de una pantalla. Todo bajo `.portada`: /ideas, /ejemplo y las legales no se ven afectadas. Tres pesos de color dentro de cada escena, para que el ojo sepa qué leer primero sin que nada grite: título en tinta, cuerpo en tinta al 80 % (#3D3548), y el "Sin…" otra vez en tinta plena. Violeta en sus tres empleos y ni uno más: el logo, "lazo" y el CTA. */ .portada { --cuerpo: #3D3548; --gris-acto: #6B6478; --crema-80: #D6CFC6; --gris-oscuro: #B5ADC0; /* Instrument Sans llega a 700; el encargo pedía 800 y el fundador eligió quedarse con esta familia (11-sep). */ --peso-fuerte: 700; /* CTA sobre la escena oscura: el violeta claro de la doctrina. El de marca (#5B21B6) da 2,0:1 contra la tinta y se apaga; este da 3,1:1 (11-sep). */ --cta-oscuro: #7C3AED; max-width: none; margin: 0; padding: 0; color: var(--tinta); } /* ── La escena: una pantalla, contenido centrado en vertical ───────────── */ .portada .escena { display: flex; align-items: center; min-height: 100vh; /* respaldo para navegadores sin svh */ min-height: 100svh; /* el alto real del móvil, con su barra */ padding: 56px 24px; } .portada .escena > .dentro { width: 100%; max-width: 34rem; margin: 0 auto; } /* ── Escena 0: LAZOO arriba y el titular gigante. Nada más. ─────────────── Mide una pantalla MENOS 72 px: ese hueco es el borde de la carta 01 asomando, que es lo que invita a subirla (sustituye a la flecha). */ .portada .escena.escena-portada { /* Colchón del alto de la franja fija (--franja, que pone el script): sin él, el contenido se centra en toda la altura y el titular se mete debajo de la marca. Se vio en un iPhone (fundador, 12-sep). */ align-items: stretch; padding-top: calc(var(--franja, 48px) + 14px); padding-bottom: 0; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); } .portada .escena-portada > .dentro { display: flex; flex-direction: column; justify-content: center; max-width: 64rem; /* el titular necesita más ancho que el texto */ min-height: 0; flex: 1 1 auto; } /* El centrado pasa al bloque del titular: así el H1 no se mueve al añadirle la línea de apoyo, que va colgada por debajo sin empujar nada. */ .portada .titular { position: relative; } .portada h1 { margin: 0; font-size: clamp(56px, 10vw, 96px); font-weight: var(--peso-fuerte); line-height: 1; letter-spacing: -0.03em; color: var(--tinta); text-wrap: balance; } /* ── Título de escena ───────────────────────────────────────────────────── */ .portada h2 { display: block; margin: 0 0 16px; font-family: var(--sans); font-size: clamp(32px, 5vw, 48px); font-weight: var(--peso-fuerte); line-height: 1.08; letter-spacing: -0.02em; text-transform: none; text-wrap: balance; color: var(--tinta); } .portada h2::after { content: none; } /* ── Cuerpo: 20 px, dentro del 20-22 del encargo. Se queda en 20 porque en escritorio una línea solo puede partir en su coma, y la más larga entre comas ("Entre las candidatas que cuadran con el presupuesto,") mide 52 caracteres: a 22 px no cabría en la columna y se saldría. ─────────────── */ .portada .bloque p { margin: 0 0 16px; max-width: none; font-size: 20px; line-height: 1.55; color: var(--cuerpo); text-wrap: pretty; } .portada .estrofa + .estrofa { margin-top: 56px; } /* ── Los "Sin…": los golpes de la página ────────────────────────────────── */ .portada .bloque p.remate { /* Sube con el texto y se FRENA al llegar arriba (--fija, del script): es el MISMO remate que ya estaba, no una copia. Antes se creaba otro arriba mientras el de abajo aún se veía, y durante un segundo había dos. */ transform: translateY(var(--fija, 0px)); position: relative; z-index: 1; margin: 16px 0 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: var(--peso-fuerte); line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); } .portada .lazo { color: var(--violeta); font-weight: inherit; } .portada .lazo.bautizo { font-weight: 600; } /* ── Escena final, invertida: el único cambio de fondo de la página ────── */ .portada .desenlace { background: var(--tinta); color: var(--crema); } .portada .desenlace h2 { color: var(--crema); font-size: clamp(36px, 6vw, 56px); } .portada .desenlace.bloque p { color: var(--crema-80); } /* En lo oscuro, "lazo" va en el violeta claro: el de marca da 2,0:1 sobre tinta y se apaga (misma razón que el botón). */ .portada .desenlace .lazo { color: var(--cta-oscuro); } .portada .desenlace.bloque p.remate { margin-top: 32px; line-height: 1.1; color: var(--crema); } .portada .desenlace.bloque p.remate.final { margin-top: 8px; font-size: clamp(32px, 5.5vw, 48px); line-height: 1.05; } /* ── El CTA ─────────────────────────────────────────────────────────────── */ .portada .apuntarse { margin-top: 36px; } .portada form.lista { flex-direction: column; gap: 12px; } .portada input[type="email"] { flex: 0 0 auto; width: 100%; height: 52px; padding: 0 16px; font-size: 18px; color: var(--tinta); background: var(--crema); border: 1px solid transparent; border-radius: 12px; } .portada button { width: 100%; height: 52px; padding: 0 24px; font-size: 18px; font-weight: 600; color: var(--crema); background: var(--cta-oscuro); border-radius: 12px; } .portada .desenlace .consentimiento, .portada .desenlace .consentimiento a { color: var(--gris-oscuro); } .portada .desenlace .aviso.bien { color: var(--crema); } .portada .desenlace .aviso.mal { color: #FFB8B8; } /* El cuerpo de escena (.portada .bloque p) pesa más que las reglas globales de la letra pequeña del formulario: se les devuelve su tamaño aquí. */ .portada .bloque p.consentimiento { margin: 12px 0 0; font-size: 13px; line-height: 1.5; } .portada .bloque p.aviso { margin: 12px 0 0; font-size: 15px; line-height: 1.5; } /* Al pasar el ratón, el botón aclara hacia el violeta de marca en vez de hundirse en la tinta (el global lo lleva a #2E1065, invisible aquí). */ .portada .desenlace button:hover { background: var(--violeta); } .portada input[type="email"]:focus { outline: 2px solid var(--cta-oscuro); outline-offset: 2px; } /* ── El pie, dentro de lo oscuro: así el cambio de fondo sigue siendo uno ─ */ .portada footer { margin: 0; padding: 32px max(24px, calc((100% - 34rem) / 2)) 48px; background: var(--tinta); border-top: 1px solid rgba(250, 247, 242, 0.12); color: var(--gris-oscuro); } .portada footer .pie-util a { color: var(--crema); } /* Sin violeta al pasar el ratón: sobre tinta no se lee y sería un cuarto empleo. */ .portada footer .pie-util a:hover { color: var(--crema); text-decoration: underline; } .portada footer .pie-util span { color: rgba(250, 247, 242, 0.3); } .portada footer .pie-legal, .portada footer .pie-legal a { color: var(--gris-oscuro); } /* ── Cortes solo de móvil (marcas "¦" y "‖" del generador) ──────────────── */ .portada .sd { display: none; } @media (min-width: 640px) { .portada .sd { display: inline; } .portada .sm { display: none; } .portada br.m { display: none; } .portada form.lista { flex-direction: row; } .portada input[type="email"] { flex: 1 1 auto; width: auto; } .portada button { width: auto; } } @media (max-width: 639px) { .portada .escena { padding: 48px 24px; } .portada .estrofa + .estrofa { margin-top: 44px; } } /* ── EL MAZO (fundador, 11-sep: "panelar las fases… como un carrusel pero no tal cual"). Solo con JavaScript (.mazo), que calcula dónde se pega cada carta: sin él, la página se lee de corrido como antes. Todas las cartas menos la última se quedan pegadas mientras la siguiente sube por encima; la de debajo se oscurece y encoge un poco según --p (0 → 1). ─────────── */ .mazo .portada .escena { position: sticky; top: 0; } .mazo .portada .escena.bloque { border-radius: 32px 32px 0 0; /* Sombra menos difuminada: una sombra muy abierta en algo que se mueve se vuelve a pintar entera en cada fotograma y es de lo más caro en móvil. */ box-shadow: 0 -10px 26px rgba(92, 64, 32, 0.11); } /* Cada tarjeta, un punto más cálida que la anterior: el crema se va hundiendo hacia el ámbar y el desenlace en tinta deja de ser un salto (fundador, 12-sep). Fuera de .mazo a propósito: sin JavaScript también se nota. */ .portada .escena-portada { background: var(--crema); } .portada .escena.bloque:not(.desenlace) { background: var(--tono, var(--crema)); } .portada #acto-1 { --tono: #F2E8D9; } .portada #acto-2 { --tono: #F0E4D5; } .portada #acto-3 { --tono: #EDDECA; } .portada #acto-4 { --tono: #EAD8BF; } /* La última no se pega: detrás va el pie, que tiene que poder subir. */ .mazo .portada .desenlace { position: relative; } /* El pie, posicionado para pintarse por encima de las cartas pegadas. */ .mazo .portada footer { position: relative; } @media (prefers-reduced-motion: no-preference) { /* will-change: el encogido continuo de una tarjeta a pantalla completa obliga a redibujar todo su texto en cada fotograma si no tiene capa. */ .mazo .portada .escena { transform: scale(calc(1 - 0.03 * var(--q, 0))); will-change: transform; } /* El corte entre tarjetas, suave: el texto de la que queda debajo se apaga según la tapa la siguiente (fundador, 12-sep: "muy brusco"). Antes se probó al revés —hacer transparente el canto de la que entra— y dejaba el texto de la de abajo asomando encima, como un fantasma. */ .mazo .portada .escena > .dentro > * { opacity: calc(1 - 0.85 * var(--q, 0)); } /* El título, en cambio, se apaga DEL TODO y antes: lo mide `--tapa` contra el borde de la carta que llega. Ver el porqué en pintar-portada.mjs. */ .mazo .portada .escena > .dentro > .titulo { opacity: min(calc(1 - 0.85 * var(--q, 0)), calc(1 - var(--tapa, 0))); } .mazo .portada .escena::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #7A5C3A; /* tostado: la carta de debajo se hunde en crema, no en gris */ opacity: calc(0.06 * var(--q, 0)); pointer-events: none; } } /* ── El contenido de cada tarjeta entra cuando el de la anterior empieza a suavizarse (fundador, 12-sep). --e lo pone el script desde el --q de la tarjeta de arriba; sin JavaScript no hay .mazo y todo se ve de una pieza, y con reducir movimiento --e no se escribe nunca, así que vale 1. ─────── */ /* El TÍTULO de cada tarjeta se ve desde el primer momento; lo que espera es el resto (fundador, 12-sep). El cuerpo obedece a dos cosas: entra con --e y se apaga con el --q de su propia tarjeta cuando la tapan; vale la más baja de las dos. */ .mazo .portada .escena:not(.escena-portada) > .dentro > .cuerpo { opacity: min(var(--e, 1), calc(1 - 0.85 * var(--q, 0))); transform: translateY(calc(12px * (1 - var(--e, 1)))); /* Sin transición: el desplazamiento va pegado al scroll, no por su cuenta. */ } /* La opacidad de cada parte la pone el script, en proporción al scroll. */ /* ── LA MONTAÑA DE REGALOS (fundador, 11-sep) ───────────────────────────── Una pila de cajas SVG al pie de la portada que casi llega al titular. Al hacer scroll suben, cada una a su ritmo (--v), unas por delante del titular y otras por detrás. Unidad --u: 1vw en móvil, con tope por el alto de la pantalla para que en escritorio no tape el titular. En escritorio la montaña se va a la derecha, que es donde sobra sitio. Sin JavaScript o con reducir movimiento, la pila se queda quieta. */ .portada .escena-portada { --u: min(1vw, 0.6vh); --u: min(1vw, 0.6svh); } .portada .escena-portada h1 { position: relative; z-index: 1; } .portada .montana { /* Mide lo que ocupa el dibujo (--ancho-pila/--alto-pila los pone el generador), así que centrarla es un margen automático. */ position: relative; width: calc(var(--ancho-pila, 100) * var(--u)); height: calc(var(--alto-pila, 70) * var(--u)); margin: 44px auto 0; pointer-events: none; } .portada .caja { position: absolute; left: calc(var(--x) * var(--u)); bottom: calc(var(--b) * var(--u)); width: calc(var(--t) * var(--u)); height: auto; overflow: visible; z-index: 0; transform-origin: 50% 100%; transform: rotate(var(--r)); } .portada .caja.delante { z-index: 2; } /* El velo del mazo va por encima de todo, cajas de delante incluidas. */ .mazo .portada .escena::after { z-index: 3; } @media (prefers-reduced-motion: no-preference) { .mazo .portada .caja { transform: translateY(calc(var(--y, 0) * var(--v) * -1px)) rotate(var(--r)); will-change: transform, opacity; /* Se desvanecen mientras la carta 01 tapa la portada (--p de la portada): si no, alguna queda a medio subir asomando por encima del mazo. */ opacity: clamp(0, calc(1.4 - 1.4 * var(--q, 0)), 1); will-change: transform, opacity; } } /* ── Cartas a la medida de lo que llevan (fundador, 11-sep: "quizá alguna es demasiado grande para lo que lleva… o suavizar para que se vea menos que es un mazo" → las dos cosas). Mínimo 70 % de pantalla, con aire generoso; la portada sigue ocupando la pantalla. Al ser más bajas, mientras lees una ya asoma la siguiente, y el mazo se nota menos. Encogido 5 → 3 %, velo 12 → 6 %. */ .portada .escena.bloque { min-height: 58vh; min-height: 58svh; /* Arriba, lo justo para que el título no quede bajo la franja. */ padding-top: 92px; padding-bottom: 64px; } @media (max-width: 639px) { .portada .escena.bloque { padding-top: 84px; padding-bottom: 48px; } } /* Las cajas de los lados sobresalen (y giran): sin esto el móvil deja arrastrar la página de lado. "clip" recorta solo en horizontal, sin crear contenedor de scroll, así que las cajas siguen pudiendo subir por arriba. */ .portada .escena-portada { overflow-x: clip; } /* ── 2. Ni un guión: nada de partir palabras (fundador, 12-sep). ──────────── */ .portada, .portada h1, .portada h2, .portada p { -webkit-hyphens: none; hyphens: none; } /* ── 3. EN ORDENADOR, DOS COLUMNAS (fundador, 12-sep: "si la página se abre en navegador de ordenador, que esté adaptada a eso"). El título a la izquierda y el texto a la derecha; el título se queda quieto mientras se lee la tarjeta. En móvil no cambia nada: sigue en vertical. ──────────────────── */ @media (min-width: 1000px) { .portada .escena.bloque > .dentro { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 31rem); gap: 0 64px; max-width: 58rem; align-items: start; } /* ⚠️ MÁS ESPECÍFICA A PROPÓSITO (13-sep). Abajo, en el bloque del rollo, hay un `.portada .titulo { position: relative }` que va DESPUÉS y con la misma fuerza, así que ganaba: el título perdía el sticky y —con este `top: 120px` todavía en pie, ya sobre un elemento relativo— se iba 120 px HACIA ABAJO. En ordenador el titular aparecía a media tarjeta, muy por debajo de su texto ("no sale bien el título, sale como más abajo", fundador). */ .portada .escena .titulo { position: sticky; top: 120px; } .portada .titulo h2 { margin-bottom: 0; } /* En la columna de la izquierda, a 48 px los títulos se salían. */ .portada .titulo h2 { font-size: clamp(30px, 3.4vw, 38px); } .portada .desenlace .titulo h2 { font-size: clamp(32px, 3.8vw, 44px); } } /* ── 6. LA ESTELA: los títulos que vas dejando atrás se quedan arriba, contando la historia. Solo con JavaScript; nunca tapa nada (las tarjetas empiezan 72-96 px más abajo) y no se puede tocar. ──────────────────────── */ .estela { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 8px 24px 12px; pointer-events: none; } /* EL FONDO VA EN UNA CAPA APARTE (fundador, 13-sep: "no es natural, antes justo de entrar en la zona oscura se ve ahí un corte"). El corte es el mazo y es intencionado —una carta sube y tapa a la anterior—, pero la franja lo convertía en un escalón: su fondo copia el tono de la carta de arriba, así que mientras la oscura subía había crema arriba, tinta abajo y una línea recta entre medias que no existe en ningún otro punto de la página. Ahora, mientras un borde CRUZA la franja, el fondo se apaga: lo que se ve es la carta pasando por debajo del logo, igual que pasa por debajo de todo lo demás. Ni banda ni escalón. Y de paso desaparece el texto fantasma —el título de la carta que se iba se cortaba a media palabra bajo el degradado. */ .estela::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--tono-arriba, #F5EDE0) 0, var(--tono-arriba, #F5EDE0) 72%, transparent 100%); transition: opacity .2s linear; } .estela.cruzando::before { opacity: 0; } /* LAZOO al centro, con un regalo a cada lado: aparecen al empezar a bajar, como los que han subido desde la pila (fundador, 12-sep). */ .estela .cabecera { /* Por encima del ::before del fondo, sin z-index negativos. */ position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 3px; } .estela .marca { /* La regla global de .marca trae relleno: aquí no lo queremos. */ padding: 0; font-size: 19px; font-weight: 700; /* El trazo se retiró el 13-sep, aquí y en `.marca`: los dos logos son el mismo y se tocan a la vez. */ line-height: 1.25; letter-spacing: 0.04em; } .estela .regalito { width: var(--ancho, 22px); height: auto; /* --sube desiguala las alturas; --espera los hace entrar escalonados. */ opacity: 0; transform: translateY(calc(var(--sube, 0px) + 10px)) scale(0.8) rotate(var(--r)); transition: opacity 320ms ease-out, transform 320ms ease-out, width 320ms ease-out, margin 320ms ease-out; } .estela .regalito.visible { opacity: 1; transform: translateY(var(--sube, 0px)) rotate(var(--r)); } /* Los que aún no tocan no ocupan sitio: así el grupo crece desde LAZOO. */ .estela .regalito:not(.visible) { width: 0; margin-left: -6px; } @media (prefers-reduced-motion: reduce) { .estela .regalito { transition: none; } .estela::before, .estela .marca { transition: none; } } /* SOBRE TINTA, LA MARCA NO ES VIOLETA: ES CREMA (fundador, 13-sep, "al entrar en zona oscura total, ese lazoo se convierte en un crema intermedio cálido"). Arena y no el crema de la página: el crema pleno sobre tinta grita, y este se queda un paso por detrás sin perder ni un punto de legibilidad. Y resuelve de paso el salto que se veía: arriba el violeta profundo, abajo un crema —dos cosas distintas a propósito— en vez de dos violetas que se parecen y no son el mismo. */ .estela.oscura .marca { color: var(--arena); } /* El color de la marca cambia cuando el borde le pasa por el medio, no cuando asoma: así nunca se queda medio glifo del color del fondo que llega. La transición corta remata el cambio, y la sombra la despega del borde mientras lo tiene cruzándola. */ .estela .marca { transition: color .18s linear; } .estela.cruzando .marca { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); } .estela.oscura::before { background: linear-gradient(to bottom, var(--tinta) 0, var(--tinta) 72%, rgba(26, 21, 35, 0) 100%); } /* El cuerpo es la ventana y no se mueve: recorta lo que se recoge, para que desaparezca BAJO el título en vez de pisarlo. El que se desplaza es el rollo que lleva dentro. */ .portada .titulo { position: relative; } .portada .cuerpo { overflow: clip; } .portada .rollo { transform: translateY(calc(-1 * var(--sube, 0px))); will-change: transform; } /* El imán lo lleva el script (ver pintar-portada.mjs): el del navegador, en firme, saltaba al final de la página y dejaba el pie inalcanzable, porque el plegado le cambia los altos mientras encaja. */ /* ── HERO: línea de apoyo y pista de scroll (fundador, 12-sep) ──────────── */ .portada .apoyo { margin: 18px 0 0; font-size: 21px; font-weight: 500; line-height: 1.4; color: var(--cuerpo); } /* Anclada abajo y FUERA del flujo: si ocupa sitio, el titular se descoloca. */ .portada .escena-portada > .dentro { position: relative; } .portada .pista { display: block; margin: 32px 0 0; text-align: center; font-size: 17px; line-height: 1.4; color: #6B6478; } .portada .pista .flecha { display: inline-block; /* Dos rebotes y para. */ animation: rebote 1.4s ease-in-out 2; } @keyframes rebote { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } } @media (min-width: 1000px) { .portada .apoyo { font-size: 24px; margin-top: 20px; } } @media (prefers-reduced-motion: reduce) { .portada .pista .flecha { animation: none; } } /* ── BOTÓN FANTASMA: la salida a otra página (fundador, 13-sep) ──────────── UN SOLO COMPONENTE CON DOS TEMAS. El claro vive sobre crema; el oscuro, sobre el panel de tinta del final, donde el mismo borde en tinta no se vería. No compite con el CTA de la lista de espera —ese es el botón violeta lleno—: esto es una puerta lateral a otra página, así que va sin relleno. Radio 14 px y tipografía del sistema, los mismos del