/* ============================================================ SIFONAZO · hoja de estilos Derivada del Manual de Marca · Primera edición 2026 Cuatro tintas planas sobre papel crema. Sin degradados. ============================================================ */ /* ---------- 01 · TOKENS ---------------------------------- */ :root { /* Paleta cromática (manual 04) */ --negro: #111111; --rosa: #e4175b; --turquesa: #29bec4; --amarillo: #f6c61f; --crema: #f6f2ec; /* Derivados de trabajo — sólo para bordes suaves y estados */ --crema-hueco: #ebe5db; --negro-70: rgba(17, 17, 17, 0.7); --negro-45: rgba(17, 17, 17, 0.45); /* Tipografía: una sola familia (manual 05) */ --fuente: "Archivo", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif; /* Reglas de 2 px — estructura y corte (manual 06) */ --regla: 2px solid var(--negro); --regla-gruesa: 8px solid var(--negro); /* Ritmo */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --ancho: 1280px; --seccion: clamp(4rem, 9vh, 7.5rem); } /* ---------- 02 · BASE ----------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* La barra es fija: los saltos por ancla tienen que descontarla. */ scroll-padding-top: 66px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; /* En pantalla, fondo crema. Nunca blanco puro (manual 10). */ background: var(--crema); color: var(--negro); font-family: var(--fuente); font-weight: 400; font-size: 1rem; line-height: 1.6; font-synthesis: none; /* En touch, el flash gris del navegador ensucia las tintas planas. */ -webkit-tap-highlight-color: transparent; } /* Bloqueo de scroll con la ficha abierta. Va en y no como overflow en : ahí convierte al body en contenedor de scroll y deja sin recorrido a scroll(root), que es el timeline de la barra de progreso, y desactiva los observadores contra el viewport. */ html.sin-scroll { overflow: hidden; } p { text-wrap: pretty; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; } .salto-contenido { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--negro); color: var(--crema); padding: 0.75rem 1.25rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; } .salto-contenido:focus { left: 0; } .envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- 03 · ESCALA TIPOGRÁFICA (manual 05) ---------- */ /* Display · 900 · caja alta · tracking −3% */ .display { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.86; margin: 0; /* Bandera izquierda siempre (manual 03) */ text-align: left; text-wrap: balance; } /* Subtítulo · 800 · caja alta */ .subtitulo { font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.08; margin: 0; } /* Etiqueta · 700 · versalitas · tracking +16% */ .etiqueta { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; line-height: 1.3; margin: 0; } /* Texto · 400 · interlínea 1.6 El manual fija 11–13 px para impresión; en pantalla subimos a 1rem por legibilidad y reservamos 12–13 px para etiquetas y epígrafes. */ .texto { margin: 0 0 1.1em; max-width: 42ch; } .texto:last-child { margin-bottom: 0; } .epigrafe { font-size: 0.8125rem; line-height: 1.5; color: var(--negro-70); margin: 0; } /* Sin cursivas, salvo títulos de obra (manual 05) */ .obra-titulo-cursiva { font-style: italic; font-weight: 700; } /* ---------- 04 · ELEMENTOS GRÁFICOS (manual 06) ---------- */ /* Trama de puntos · burbujas de soda. Puede acompañar siempre. */ .trama { background-image: radial-gradient(currentColor 1.7px, transparent 1.8px); background-size: 13px 13px; background-position: 0 0; } .trama--rosa { color: var(--rosa); } .trama--negro { color: var(--negro); } .trama--crema { color: var(--crema); } /* Estrella de ocho · marca de énfasis. Un solo protagonista por pieza. */ .estrella { display: block; aspect-ratio: 1; background: var(--rosa); clip-path: polygon( 50% 0%, 57.3% 32.5%, 85.4% 14.6%, 67.6% 42.7%, 100% 50%, 67.6% 57.3%, 85.4% 85.4%, 57.3% 67.6%, 50% 100%, 42.7% 67.6%, 14.6% 85.4%, 32.5% 57.3%, 0% 50%, 32.5% 42.7%, 14.6% 14.6%, 42.7% 32.5% ); } /* Recortes planos. La diagonal siempre baja hacia la derecha. */ .recorte { position: absolute; z-index: 0; pointer-events: none; } .recorte--amarillo { background: var(--amarillo); } .recorte--turquesa { background: var(--turquesa); } .recorte--rosa { background: var(--rosa); } .recorte--diagonal { clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%); } /* Regla de 2 px */ .regla { border: 0; border-top: var(--regla); margin: 0; } .regla--rosa { border-top-color: var(--rosa); } .regla--turquesa { border-top-color: var(--turquesa); } /* ---------- 05 · LOGOTIPO (manual 02 y 03) --------------- */ /* SIFON en negro, AZO en rosa. El corte nunca cambia de lugar. Nunca centrar, condensar, estirar, inclinar ni recolorear. Sin sombras, degradados, contornos ni brillos. Área de resguardo = altura de la S. */ .logotipo { display: inline-block; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.82; font-style: normal; text-decoration: none; white-space: nowrap; /* aire = altura de la S ≈ 0.72em de la caja tipográfica */ padding: 0.2em 0.24em; color: var(--negro); } .logotipo b, .logotipo strong { font-weight: inherit; color: var(--rosa); } /* Negativo · sobre fondo negro */ .logotipo--negativo { color: var(--crema); } /* Monocromo · sobre color pleno */ .logotipo--monocromo, .logotipo--monocromo b { color: var(--crema); } /* ---------- 05 bis · ISOTIPO ---------------------------- */ /* El sifón acompañando al logotipo. Va SIEMPRE a la izquierda y separado por al menos la altura de la S, que es el área de resguardo que fija el manual: nada puede entrar en esa franja. */ /* .marca lleva el tamaño y los dos hijos escalan con él, así el aire entre isotipo y logotipo siempre equivale a la altura de la S (≈0.72em). */ .marca { display: inline-flex; align-items: center; gap: 0.78em; text-decoration: none; color: inherit; } .marca .logotipo { font-size: 1em; padding-left: 0; } /* El alto va en em para escalar con el logotipo. El ancho lo resuelve el viewBox: alto explícito + width:auto evita que el SVG se estire al tamaño por defecto si el CSS todavía no llegó. */ .isotipo { flex: 0 0 auto; height: 1.28em; width: auto; display: block; } /* ---------- 06 · NAVEGACIÓN ----------------------------- */ .barra { position: sticky; top: 0; z-index: 60; background: var(--negro); color: var(--crema); border-bottom: 2px solid var(--negro); } .barra__fila { display: flex; align-items: center; gap: 1rem; min-height: 60px; padding-block: 0.5rem; } /* Progreso de lectura. Es una regla de 2 px del acento —elemento del manual— que cierra la barra por abajo. Puro CSS con scroll(): donde no está soportado simplemente no se ve, no hace falta JS. */ .barra__progreso { position: absolute; inset-inline: 0; bottom: -2px; height: 3px; background: var(--rosa); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } @supports (animation-timeline: scroll()) { .barra__progreso { animation: barra-progreso linear both; animation-timeline: scroll(root block); } } @keyframes barra-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } } .barra .marca { font-size: 1.375rem; margin-right: auto; } .barra__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); } .barra__nav a { text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; padding-block: 0.4rem; border-bottom: 2px solid transparent; } .barra__nav a:hover, .barra__nav a[aria-current="page"] { border-bottom-color: var(--rosa); } .barra__cta { background: var(--rosa); color: var(--crema); padding: 0.55rem 0.9rem; border-bottom: 0 !important; } .barra__cta:hover { background: var(--crema); color: var(--negro); } .barra__menu { display: none; background: none; border: 2px solid var(--crema); color: var(--crema); padding: 0.4rem 0.6rem; font-weight: 700; letter-spacing: 0.16em; font-size: 0.6875rem; text-transform: uppercase; cursor: pointer; } @media (max-width: 860px) { .barra__menu { display: block; } .barra__nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--negro); padding: 0.5rem var(--gutter) 1.25rem; border-bottom: 2px solid var(--rosa); } .barra__nav[data-abierto="true"] { display: flex; } .barra__nav a { padding-block: 0.95rem; border-bottom: 2px solid rgba(246, 242, 236, 0.15); } .barra__cta { text-align: center; margin-top: 0.75rem; } } /* ---------- 07 · PORTADA (composición del afiche) -------- */ /* Logotipo arriba, datos en bloques, objeto a la derecha (manual 07) */ .portada { position: relative; overflow: clip; padding-block: clamp(2.5rem, 6vh, 5rem) 0; } .portada__trama { position: absolute; top: 12%; right: 0; width: min(46%, 520px); height: 55%; z-index: 0; opacity: 0.9; } .portada__amarillo { top: 6%; right: -4%; width: min(42%, 460px); height: 62%; } .portada__turquesa { bottom: 8%; right: 26%; width: min(24%, 240px); aspect-ratio: 1; clip-path: polygon(0 0, 100% 26%, 100% 100%, 0 74%); } /* 01 · CABEZA — fila propia a todo el ancho: el logotipo es más ancho que media caja y no puede entrar en la columna de texto sin pisar el objeto. Además así se respeta el área de resguardo: nada entra en esa franja. */ .portada__cabeza { position: relative; z-index: 2; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); } .portada__logotipo { font-size: clamp(3.25rem, 11vw, 8.25rem); display: block; margin-left: -0.05em; } /* 02 · BAJADA — dos líneas en 800, caja alta, pegadas al logotipo */ .portada__bajada { font-size: clamp(1rem, 2.5vw, 1.625rem); margin-top: 0.4rem; max-width: 40ch; } .portada__reja { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } /* 03 · DATOS — fecha, sede y ciudad en bloques de color apilados: turquesa, amarillo, rosa. Ese orden no cambia. */ .datos { margin-top: clamp(1.5rem, 4vh, 2.5rem); display: grid; gap: 0; max-width: 27rem; border: var(--regla); } .dato { padding: 0.9rem 1.1rem 1rem; border-bottom: var(--regla); } .dato:last-child { border-bottom: 0; } .dato--turquesa { background: var(--turquesa); } .dato--amarillo { background: var(--amarillo); } .dato--rosa { background: var(--rosa); color: var(--crema); } .dato .etiqueta { opacity: 0.75; margin-bottom: 0.3rem; } .dato__valor { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.94; font-size: clamp(1.5rem, 3.4vw, 2.125rem); } .dato__valor small { display: inline-block; font-size: 0.5em; letter-spacing: 0; vertical-align: 0.55em; font-weight: 800; } .portada__frase { margin-top: clamp(1.5rem, 4vh, 2.25rem); max-width: 34ch; } /* 05 · OBJETO — el sifón, a sangre por la derecha, con sombra dura rosa */ .portada__objeto { position: relative; z-index: 1; justify-self: end; width: 100%; } .portada__objeto img { width: 100%; /* sombra dura del color acento — nunca sobre el logotipo */ filter: drop-shadow(16px 16px 0 var(--rosa)); } /* 06 · PIE — relato breve a la izquierda */ .portada__pie { position: relative; z-index: 1; margin-top: clamp(2rem, 5vh, 3.25rem); border-top: var(--regla); padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; } .portada__pie .regla--turquesa { flex: 1 1 120px; min-width: 80px; align-self: center; } @media (max-width: 820px) { .portada__reja { grid-template-columns: 1fr; } .portada__objeto { order: -1; max-width: 300px; justify-self: start; margin-bottom: 1rem; } .portada__objeto img { filter: drop-shadow(10px 10px 0 var(--rosa)); } .portada__amarillo, .portada__turquesa, .portada__trama { display: none; } } /* ---------- 08 · SECCIONES ------------------------------- */ .seccion { padding-block: var(--seccion); position: relative; /* la barra es fija: sin esto el título queda debajo al saltar por ancla */ scroll-margin-top: 62px; } .seccion--negro { background: var(--negro); color: var(--crema); } .seccion--hueco { background: var(--crema-hueco); } .seccion__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: var(--regla); padding-bottom: 0.6rem; margin-bottom: clamp(1.75rem, 5vh, 3rem); } .seccion--negro .seccion__cabeza { border-bottom-color: var(--crema); } /* Interlínea 0.86 y caja alta: los descendentes de Á, J y las comas bajan fuera de la caja. Sin este aire extra la regla siguiente los toca. */ .seccion__titulo { font-size: clamp(1.75rem, 4.6vw, 3.25rem); margin-top: clamp(1.25rem, 3vh, 2rem); margin-bottom: clamp(1.75rem, 4.5vh, 2.75rem); padding-bottom: 0.12em; max-width: 30ch; } /* Cuando le sigue un párrafo el aire lo pone el propio párrafo. */ .seccion__titulo + .texto { margin-top: -0.75rem; } /* Retícula de dos columnas (manual 10 · catálogo) */ .dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(1.5rem, 4vh, 2.5rem); } /* Los tres ejes. Antes eran cuatro celdas con reglas verticales: la primera sólo tenía la etiqueta y dejaba un hueco enorme, y las reglas quedaban colgando bajo el texto. Ahora son tres bloques iguales, cada uno abierto por una regla del color que le toca en el orden fijo del manual: turquesa, amarillo, rosa. */ .ejes__rotulo { margin-top: clamp(2.75rem, 6.5vh, 4rem); margin-bottom: 0.5rem; color: var(--negro-70); } .ejes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.5rem, 3.5vw, 2.75rem); margin-top: 1.15rem; } .eje { border-top: 8px solid var(--turquesa); padding-top: 1.15rem; } .eje:nth-child(2) { border-top-color: var(--amarillo); } .eje:nth-child(3) { border-top-color: var(--rosa); } .eje__numero { font-weight: 900; letter-spacing: -0.03em; font-size: 1.125rem; line-height: 1; color: var(--negro-45); margin: 0 0 0.5rem; } .eje h3 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.1875rem; line-height: 1.1; margin: 0 0 0.5rem; } .eje p { margin: 0; font-size: 0.9375rem; color: var(--negro-70); max-width: 30ch; } /* Franja de frase de campaña · rosa pleno */ .franja { background: var(--rosa); color: var(--crema); padding-block: clamp(2.5rem, 7vh, 4.5rem); } .franja__frase { font-size: clamp(1.5rem, 4.6vw, 3.25rem); max-width: 34ch; margin-top: 0.9rem; } /* ---------- 09 · CATÁLOGO ------------------------------- */ .filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(1.75rem, 4.5vh, 2.5rem); margin-bottom: clamp(1.5rem, 4vh, 2.25rem); align-items: center; } .filtro { background: transparent; border: var(--regla); padding: 0.5rem 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; cursor: pointer; } .filtro:hover { background: var(--negro); color: var(--crema); } .filtro[aria-pressed="true"] { background: var(--negro); color: var(--crema); } .filtro__conteo { letter-spacing: 0; opacity: 0.6; margin-left: 0.35rem; } .filtros__selector { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .filtros__selector select { font: inherit; font-size: 0.8125rem; font-weight: 700; background: var(--crema); border: var(--regla); padding: 0.45rem 0.6rem; max-width: 15rem; } .catalogo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } /* El li es flex para que la tarjeta estire hasta el alto de la fila y todas cierren a la misma altura. */ .catalogo > li { display: flex; } .obra { position: relative; /* Un