/* ═══════════════════════════════════════════════════════════ Bárbara & Adriel — capa de tokens ─────────────────────────────────────────────────────────── Este archivo es la única fuente de valores de la pieza. Si un color, un tamaño, un espacio, un radio o una duración no está acá, no debería existir en styles.css. Tres reglas duras del sistema: 1. Mayúsculas + tracking amplio: solo para --type-label. 2. El bordó (--color-seal) solo en momentos ceremoniales. 3. Nada de píldoras. Los radios son 4 y 8. ═══════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────── COLOR ───────────────────────────────────────────────────────── Todo el sitio sale de cuatro bases. Los tonos secundarios se generan por opacidad, nunca con un color nuevo: así la paleta no se puede ensuciar por acumulación. Van como tripletas para poder pedirles alfa con rgb(… / a). */ --rgb-ink: 49 38 31; /* #31261f marrón profundo */ --rgb-paper: 246 242 232; /* #f6f2e8 crema */ --rgb-seal: 110 36 32; /* #6e2420 bordó */ --rgb-shade: 18 12 9; /* casi negro cálido, solo para velos y sombras */ /* Roles principales */ --color-ink: rgb(var(--rgb-ink)); --color-paper: rgb(var(--rgb-paper)); --color-seal: rgb(var(--rgb-seal)); /* Texto secundario. Uno por cada superficie. Medido: -muted da 4,51:1 sobre el crema plano, o sea que pasa AA pero sin margen. Sobre el fondo lavado del pop-up da 2,95:1 y no llega; esa superficie se lo sube en su propio bloque y ahí está escrito por qué. Es la única excepción del sistema. */ --color-ink-muted: rgb(var(--rgb-ink) / .65); /* sobre crema */ --color-paper-muted: rgb(var(--rgb-paper) / .70); /* sobre oscuro */ /* Texto terciario sobre oscuro: overlines y notas al pie. No hay equivalente sobre crema: medido, cualquier tinta por debajo del 65% se cae de AA en todas las superficies claras de la pieza, así que sobre claro solo existen --color-ink y --color-ink-muted. */ --color-paper-faint: rgb(var(--rgb-paper) / .58); /* Líneas. Las decorativas pueden ser tenues; el contorno de un control necesita 3:1 y por eso va mucho más alto. */ --color-line-on-light: rgb(var(--rgb-ink) / .28); --color-line-on-dark: rgb(var(--rgb-paper) / .28); --color-control-on-light: rgb(var(--rgb-ink) / .68); --color-control-on-dark: rgb(var(--rgb-paper) / .54); /* Cada superficie declara su propio color y el contrario. El botón se arma con estas dos y nada más, así una sola definición sirve sobre el marrón, sobre el terciopelo y sobre el mural del pop-up. Las superficies claras las dan vuelta en su propio bloque. */ --btn-contrast: var(--color-paper); --btn-surface: var(--color-ink); /* Rellenos sutiles: estados marcados, fondos de chip. */ --color-fill-on-light: rgb(var(--rgb-ink) / .06); --color-fill-on-dark: rgb(var(--rgb-paper) / .14); /* El velo de la portada. Va por tramos y no plano: el cuadro tiene follaje oscuro arriba, cielo claro justo a la altura de los nombres y valle en medio tono abajo. Medido contra el p97 de cada franja, el piso es .26 en los nombres —que son texto grande y piden 3:1, no 4,5—, .23 en el subtítulo y .33 en el CTA. La meseta del 20 al 38% cae exactamente sobre el bloque de nombres. El .86 del final no es legibilidad: es el fundido con el marrón de Save the Date. */ --veil-hero: linear-gradient(to bottom, rgb(var(--rgb-shade) / .16) 0%, rgb(var(--rgb-shade) / .50) 20%, rgb(var(--rgb-shade) / .48) 38%, rgb(var(--rgb-shade) / .42) 70%, rgb(var(--rgb-shade) / .86) 100%); /* Velos. Un solo negro cálido para los cuatro que había sueltos. */ --color-scrim: rgb(var(--rgb-shade) / .72); --color-scrim-soft: rgb(var(--rgb-shade) / .55); --color-scrim-strong: rgb(var(--rgb-shade) / .84); /* Superficies de respaldo de las imágenes. Son la mediana medida de cada archivo: si una imagen no carga, la sección se ve terminada en vez de un rectángulo vacío. */ --color-surface-velvet: #3F1918; /* mediana de terciopelo.webp */ /* El negro de Código de vestimenta. No es un negro elegido: es el canto medido de cierre.webp (4,2,2), así que la mirilla no tiene borde —la foto se disuelve en el fondo de la sección en vez de recortarse como un rectángulo. */ --color-surface-mirilla: #040202; --color-surface-sky: #E4D7C8; /* cielo de mural.webp con su velo */ --color-surface-grove: #272F24; /* mediana de paisaje.webp */ /* Estados deshabilitados. Exentos del piso de contraste por WCAG, pero tienen que leerse como apagados y no como rotos. */ --color-disabled-on-dark: rgb(var(--rgb-paper) / .45); --color-disabled-border-on-dark: rgb(var(--rgb-paper) / .30); /* Un resplandor apenas perceptible para los radiales de fondo. */ --color-glow-on-dark: rgb(var(--rgb-paper) / .08); /* El velo del mural. Con el cuadro al 240% y anclado arriba, el 60% superior del panel es cielo puro —L≈0,65-0,69— y ahí la tinta lee sin ayuda: velo cero. Recién donde entra el follaje hace falta lavarlo. Medido contra el percentil 2 de cada quinto del recorte: 0 · 0 · 0 · .45 · .54. */ --veil-mural: linear-gradient(to bottom, rgb(var(--rgb-paper) / 0) 0%, rgb(var(--rgb-paper) / 0) 52%, rgb(var(--rgb-paper) / .50) 70%, rgb(var(--rgb-paper) / .60) 100%); /* Sombras de texto sobre fotografía. No son elevación: son legibilidad. */ --shadow-text: 0 1px 12px rgb(var(--rgb-shade) / .70); --shadow-text-strong: 0 2px 22px rgb(var(--rgb-shade) / .80); /* Rutas de las imágenes, en un solo lugar. */ --img-velvet: url('assets/terciopelo.webp'); --img-mural: url('assets/mural.webp'); --img-grove: url('assets/paisaje.webp'); --img-mono: url('assets/monograma-ba.png'); /* Las baldosas de la sección de vestimenta, una por color. */ --img-mosaico-marron: url('assets/mosaico-marron.webp'); --img-mosaico-verde: url('assets/mosaico-verde.webp'); --img-mosaico-bordo: url('assets/mosaico-bordo.webp'); --img-mosaico-celeste: url('assets/mosaico-celeste.webp'); /* Paleta de la sección de vestimenta. No son colores de interfaz: son el dato que la sección comunica, y por eso son literales. Desde que la muestra es una baldosa, estos cuatro quedan como respaldo: es lo que se ve si la imagen no carga, y sigue comunicando el color. Ver .swatch en styles.css. */ --swatch-marron: #4D3128; --swatch-verde: #8D8A45; --swatch-bordo: #550C18; --swatch-celeste: #C0D1D1; /* ───────────────────────────────────────────────────────── TIPOGRAFÍA ───────────────────────────────────────────────────────── */ /* Roles cerrados. Cada uno tiene un trabajo y no se mezclan. */ --type-display: 'Pinyon Script', cursive; /* nombres, títulos ceremoniales */ --type-heading: 'Playfair Display', Georgia, serif; /* títulos informativos */ --type-body: 'berthold-baskerville-pro', Georgia, serif; /* párrafos */ --type-label: Archivo, system-ui, -apple-system, sans-serif; /* overlines y botones */ --type-data: ui-monospace, Menlo, Consolas, monospace; /* alias copiable */ /* Escala fija, base 8. Siete pasos y nada entre medio. */ /* La escala subió un escalón entero pensando en que la van a leer los abuelos. El criterio no es el font-size sino la ALTURA DE X, que es lo que decide el tamaño aparente: medida por barrido de píxeles, la Baskerville tiene 0,42em, la Playfair 0,52 y la Archivo 0,53. Al mismo cuerpo la Baskerville se ve un 24% más chica, así que un párrafo de 16px se leía como uno de 12,9 en una sans corriente —muy por debajo de los 16 que pide cualquier guía, y más lejos todavía de los 18 que se recomiendan para lectores mayores—. Objetivo: altura de x >= 8,4px en todo el sitio (equivale a 16px de sans) y >= 9,2px en los párrafos (equivale a 17,7). */ --text-xs: 14px; --text-sm: 16px; --text-base: 18px; --text-md: 20px; --text-lg: 26px; --text-xl: 32px; --text-2xl: 40px; /* Los párrafos corridos, que van en Baskerville y son los que más se leen. 22 y no --text-base: con 0,42em de altura de x, 22px dan 9,24px de x, que es lo que se ve como un 17,7 de sans. A 18px se habrían quedado en 7,6. */ --text-lectura: 22px; /* Los display escalan con el ancho: a tamaño fijo los nombres no entran en un teléfono de 320. Son dos. El ampersand tenía un tercer tamaño propio y ya no: va a la misma medida que los nombres, y no es una licencia sino una medición —la tinta del "&" de Playfair itálica alza .737em y la de la "B" de Pinyon .703em, un 5% de diferencia—, así que al mismo font-size los tres renglones salen del mismo alto real. */ --text-display-md: clamp(46px, 16vw, 62px); /* títulos de sección */ --text-display-lg: clamp(72px, 22.5vw, 106px); /* los nombres y el & */ /* Interlineados. Cuatro, no trece. El `none` existe porque una etiqueta de una línea dentro de un flex se centra por la caja, y cualquier interlineado mayor a 1 le agrega alto que después hay que descontar. */ --leading-none: 1; /* etiquetas y botones de una línea */ /* Un contenedor de imagen con line-height 0 no arrastra el espacio de línea del inline y la foto cierra al ras. */ --leading-flush: 0; --leading-tight: 1.15; /* display y títulos grandes */ --leading-snug: 1.4; /* títulos chicos y datos */ /* La frontera entre los dos es el cuerpo, no la jerarquía: cuanto más grande la letra, menos aire relativo necesita entre renglones. Los títulos de 26 y 32 estaban en snug y el hueco entre renglones daba 12,8px, que a ese cuerpo se lee como dos frases sueltas en vez de un título de dos líneas. En tight el hueco baja a 4,8, que es el que ya tenían "Sábado 12 de diciembre" y el título del pop-up. De 20px para abajo, snug. */ /* 1,5 y no 1,7: el interlineado se eligió cuando los párrafos iban en 16px, donde 1,7 dejaba 11,2px de hueco entre renglones. Al subirlos a 22 por legibilidad ese mismo 1,7 pasó a dejar 15,4 y las líneas se leían sueltas. A 1,5 el hueco vuelve a 11, que es el que se había calibrado, y sigue siendo el mínimo que piden las pautas para párrafos. */ --leading-loose: 1.5; /* párrafos */ /* Tracking. El amplio es exclusivo de --type-label. */ --tracking-label: .18em; /* overlines */ --tracking-btn: .05em; /* botones: versalitas con tracking corto */ --tracking-tight: -.01em; /* títulos grandes en didona */ /* ───────────────────────────────────────────────────────── ESPACIADO ───────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; /* Dos pasos más, para el ritmo entre secciones. Con la escala tipográfica nueva el texto creció ~20% y 96px de respiro dejaron las secciones apretadas: el aire es lo que hace que una pieza se lea cara. Siguen sobre la grilla de 8. */ --space-8: 128px; --space-9: 160px; /* Márgenes laterales. El display necesita más aire óptico porque los swashes de la script se salen de la caja de la letra. */ --gutter: 24px; /* Corrección óptica del área táctil del punto de paso: el pseudoelemento se posiciona contra la caja de relleno, que no incluye el borde de 1px, así que hay que tirarlo 9 y no 8 para llegar a los 44px. */ --nudge-neg: -9px; --gutter-display: 32px; /* ───────────────────────────────────────────────────────── RADIOS Y ELEVACIÓN ───────────────────────────────────────────────────────── */ /* Piso de ancho del botón. Vive acá y no dentro de .btn porque la fila de acciones del formulario tiene que repetirlo: ahí el min(…, 100%) se colapsa, porque el porcentaje no tiene contra qué resolver dentro de una grilla ajustada al contenido. */ --btn-ancho-min: 176px; --radius-sm: 4px; /* controles */ --radius-md: 8px; /* cajas y superficies */ /* Un círculo no es un radio de la escala: es una forma. Va como token para que no queden 50% sueltos por el archivo. */ --radius-round: 50%; /* Una sola elevación en todo el sitio, y es la del pop-up. Ninguna otra superficie proyecta sombra. */ --shadow-modal: 0 -4px 48px rgb(var(--rgb-shade) / .45); /* ───────────────────────────────────────────────────────── MOTION ───────────────────────────────────────────────────────── */ --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 800ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Una duración que no es transición de interfaz y no entra en la escala de arriba: la línea de la portada es movimiento ambiental y vive en otro orden de magnitud a propósito. */ /* ───────────────────────────────────────────────────────── GEOMETRÍA DERIVADA — fuera de la escala a propósito ───────────────────────────────────────────────────────── Estos números no se eligieron: se calcularon. Redondearlos a la escala de espaciado rompe el encastre. Van acá para que estén en un solo lugar y con el motivo escrito al lado. */ /* Tope de ancho de la pieza: el teléfono más ancho que existe hoy son 440px CSS, así que la invitación llega a los dos bordes en cualquier celular. */ --shell: 440px; /* El ancho de la marca de la portada. No es un número de composición: sale de la legibilidad de la frase que el archivo trae dibujada adentro. La altura de mayúscula de esa frase mide 67px sobre los 1400 del archivo, y a 350 de ancho eso da 24px de cuerpo equivalente —el mismo --text-lg que tenía el subtítulo de la portada antes de dibujarse dentro del monograma—. A 419, que era el ancho con el que la marca sangraba, la frase quedaba en 28,6px: más grande que los títulos de sección de toda la pieza. Como la frase y el monograma son el mismo archivo, escalan juntos: no se puede sangrar el monograma sin agrandar la frase. */ --marca-ancho: 350px; /* El contador es una barra fija; la coda tiene que dejarle libre su alto más su separación al piso, o le queda texto debajo. */ --timer-bottom: 64px; --coda-bottom: 165px; /* = --timer-bottom + alto de la barra */ /* La foto de la portada sigue por debajo de su sección para que el borde inferior quede tapado por Save the Date. */ --header-overhang: -180px; /* Proporción del festón (104/375). El 27,73% es la misma cuenta expresada en porcentaje del ancho, que es contra lo que resuelven los padding y los margin en porcentaje. */ /* Las máscaras del festón: data-URI de SVG con la misma curva en cuatro variantes —la original, la espejada, y las dos que recortan un canto—. */ --festón: url("data:image/svg+xml,"); --festón-flip: url("data:image/svg+xml,"); /* La onda que enmarca el pop-up, en sus cuatro orientaciones. Es el mismo arco del festón de las secciones —pico central y dos hombros—, resampleado de 5.497 caracteres a 1121: a la densidad que se usa acá el detalle fino no se ve, y cuatro copias del trazo original habrían sumado 32 KB de CSS. El desvío real de la curva es 3,3 de 104, o sea 0,37px al tamaño en que se dibuja: por debajo de un píxel. preserveAspectRatio='none' porque la proporción la fija mask-size. */ --onda-arriba: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20375%20104%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%20103.8C1.8%20103.7%207.4%20104.2%2011.0%20103.3C14.7%20102.4%2018.4%20100.8%2022.1%2098.4C25.7%2096.1%2029.4%2094.1%2033.1%2089.3C36.8%2084.4%2040.4%2075.4%2044.1%2069.2C47.8%2063.1%2051.5%2056.2%2055.1%2052.3C58.8%2048.3%2062.5%2047.0%2066.2%2045.4C69.9%2043.9%2073.5%2045.1%2077.2%2042.9C80.9%2040.7%2084.6%2036.1%2088.2%2032.4C91.9%2028.6%2095.6%2023.2%2099.3%2020.5C102.9%2017.8%20106.6%2016.9%20110.3%2016.0C114.0%2015.1%20117.6%2015.0%20121.3%2015.0C125.0%2015.0%20128.7%2015.7%20132.4%2015.9C136.0%2016.2%20139.7%2016.5%20143.4%2016.4C147.1%2016.3%20150.7%2016.1%20154.4%2015.3C158.1%2014.6%20161.8%2013.4%20165.4%2011.8C169.1%2010.2%20172.8%207.7%20176.5%205.8C180.1%203.9%20183.8%20-0.1%20187.5%200.2C191.2%200.5%20194.9%205.3%20198.5%207.4C202.2%209.4%20205.9%2011.2%20209.6%2012.5C213.2%2013.8%20216.9%2014.6%20220.6%2015.2C224.3%2015.7%20227.9%2015.8%20231.6%2015.7C235.3%2015.6%20239.0%2015.1%20242.6%2014.8C246.3%2014.6%20250.0%2013.9%20253.7%2014.0C257.4%2014.2%20261.0%2014.4%20264.7%2015.7C268.4%2016.9%20272.1%2018.3%20275.7%2021.5C279.4%2024.7%20283.1%2031.4%20286.8%2034.8C290.4%2038.3%20294.1%2040.7%20297.8%2042.4C301.5%2044.2%20305.1%2043.6%20308.8%2045.4C312.5%2047.2%20316.2%2048.7%20319.9%2053.2C323.5%2057.8%20327.2%2066.5%20330.9%2072.6C334.6%2078.7%20338.2%2085.7%20341.9%2090.0C345.6%2094.3%20349.3%2096.2%20352.9%2098.4C356.6%20100.6%20360.3%20102.4%20364.0%20103.3C367.6%20104.2%20373.2%20103.7%20375.0%20103.8L375%20104L0%20104Z%27%2F%3E%3C%2Fsvg%3E"); --onda-abajo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20375%20104%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%20103.8C1.8%20103.7%207.4%20104.2%2011.0%20103.3C14.7%20102.4%2018.4%20100.8%2022.1%2098.4C25.7%2096.1%2029.4%2094.1%2033.1%2089.3C36.8%2084.4%2040.4%2075.4%2044.1%2069.2C47.8%2063.1%2051.5%2056.2%2055.1%2052.3C58.8%2048.3%2062.5%2047.0%2066.2%2045.4C69.9%2043.9%2073.5%2045.1%2077.2%2042.9C80.9%2040.7%2084.6%2036.1%2088.2%2032.4C91.9%2028.6%2095.6%2023.2%2099.3%2020.5C102.9%2017.8%20106.6%2016.9%20110.3%2016.0C114.0%2015.1%20117.6%2015.0%20121.3%2015.0C125.0%2015.0%20128.7%2015.7%20132.4%2015.9C136.0%2016.2%20139.7%2016.5%20143.4%2016.4C147.1%2016.3%20150.7%2016.1%20154.4%2015.3C158.1%2014.6%20161.8%2013.4%20165.4%2011.8C169.1%2010.2%20172.8%207.7%20176.5%205.8C180.1%203.9%20183.8%20-0.1%20187.5%200.2C191.2%200.5%20194.9%205.3%20198.5%207.4C202.2%209.4%20205.9%2011.2%20209.6%2012.5C213.2%2013.8%20216.9%2014.6%20220.6%2015.2C224.3%2015.7%20227.9%2015.8%20231.6%2015.7C235.3%2015.6%20239.0%2015.1%20242.6%2014.8C246.3%2014.6%20250.0%2013.9%20253.7%2014.0C257.4%2014.2%20261.0%2014.4%20264.7%2015.7C268.4%2016.9%20272.1%2018.3%20275.7%2021.5C279.4%2024.7%20283.1%2031.4%20286.8%2034.8C290.4%2038.3%20294.1%2040.7%20297.8%2042.4C301.5%2044.2%20305.1%2043.6%20308.8%2045.4C312.5%2047.2%20316.2%2048.7%20319.9%2053.2C323.5%2057.8%20327.2%2066.5%20330.9%2072.6C334.6%2078.7%20338.2%2085.7%20341.9%2090.0C345.6%2094.3%20349.3%2096.2%20352.9%2098.4C356.6%20100.6%20360.3%20102.4%20364.0%20103.3C367.6%20104.2%20373.2%20103.7%20375.0%20103.8L375%20104L0%20104Z%27%20transform%3D%27translate%280%2C104%29%20scale%281%2C-1%29%27%2F%3E%3C%2Fsvg%3E"); --onda-izq: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20104%20375%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%20103.8C1.8%20103.7%207.4%20104.2%2011.0%20103.3C14.7%20102.4%2018.4%20100.8%2022.1%2098.4C25.7%2096.1%2029.4%2094.1%2033.1%2089.3C36.8%2084.4%2040.4%2075.4%2044.1%2069.2C47.8%2063.1%2051.5%2056.2%2055.1%2052.3C58.8%2048.3%2062.5%2047.0%2066.2%2045.4C69.9%2043.9%2073.5%2045.1%2077.2%2042.9C80.9%2040.7%2084.6%2036.1%2088.2%2032.4C91.9%2028.6%2095.6%2023.2%2099.3%2020.5C102.9%2017.8%20106.6%2016.9%20110.3%2016.0C114.0%2015.1%20117.6%2015.0%20121.3%2015.0C125.0%2015.0%20128.7%2015.7%20132.4%2015.9C136.0%2016.2%20139.7%2016.5%20143.4%2016.4C147.1%2016.3%20150.7%2016.1%20154.4%2015.3C158.1%2014.6%20161.8%2013.4%20165.4%2011.8C169.1%2010.2%20172.8%207.7%20176.5%205.8C180.1%203.9%20183.8%20-0.1%20187.5%200.2C191.2%200.5%20194.9%205.3%20198.5%207.4C202.2%209.4%20205.9%2011.2%20209.6%2012.5C213.2%2013.8%20216.9%2014.6%20220.6%2015.2C224.3%2015.7%20227.9%2015.8%20231.6%2015.7C235.3%2015.6%20239.0%2015.1%20242.6%2014.8C246.3%2014.6%20250.0%2013.9%20253.7%2014.0C257.4%2014.2%20261.0%2014.4%20264.7%2015.7C268.4%2016.9%20272.1%2018.3%20275.7%2021.5C279.4%2024.7%20283.1%2031.4%20286.8%2034.8C290.4%2038.3%20294.1%2040.7%20297.8%2042.4C301.5%2044.2%20305.1%2043.6%20308.8%2045.4C312.5%2047.2%20316.2%2048.7%20319.9%2053.2C323.5%2057.8%20327.2%2066.5%20330.9%2072.6C334.6%2078.7%20338.2%2085.7%20341.9%2090.0C345.6%2094.3%20349.3%2096.2%20352.9%2098.4C356.6%20100.6%20360.3%20102.4%20364.0%20103.3C367.6%20104.2%20373.2%20103.7%20375.0%20103.8L375%20104L0%20104Z%27%20transform%3D%27translate%280%2C375%29%20rotate%28-90%29%27%2F%3E%3C%2Fsvg%3E"); --onda-der: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20104%20375%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%20103.8C1.8%20103.7%207.4%20104.2%2011.0%20103.3C14.7%20102.4%2018.4%20100.8%2022.1%2098.4C25.7%2096.1%2029.4%2094.1%2033.1%2089.3C36.8%2084.4%2040.4%2075.4%2044.1%2069.2C47.8%2063.1%2051.5%2056.2%2055.1%2052.3C58.8%2048.3%2062.5%2047.0%2066.2%2045.4C69.9%2043.9%2073.5%2045.1%2077.2%2042.9C80.9%2040.7%2084.6%2036.1%2088.2%2032.4C91.9%2028.6%2095.6%2023.2%2099.3%2020.5C102.9%2017.8%20106.6%2016.9%20110.3%2016.0C114.0%2015.1%20117.6%2015.0%20121.3%2015.0C125.0%2015.0%20128.7%2015.7%20132.4%2015.9C136.0%2016.2%20139.7%2016.5%20143.4%2016.4C147.1%2016.3%20150.7%2016.1%20154.4%2015.3C158.1%2014.6%20161.8%2013.4%20165.4%2011.8C169.1%2010.2%20172.8%207.7%20176.5%205.8C180.1%203.9%20183.8%20-0.1%20187.5%200.2C191.2%200.5%20194.9%205.3%20198.5%207.4C202.2%209.4%20205.9%2011.2%20209.6%2012.5C213.2%2013.8%20216.9%2014.6%20220.6%2015.2C224.3%2015.7%20227.9%2015.8%20231.6%2015.7C235.3%2015.6%20239.0%2015.1%20242.6%2014.8C246.3%2014.6%20250.0%2013.9%20253.7%2014.0C257.4%2014.2%20261.0%2014.4%20264.7%2015.7C268.4%2016.9%20272.1%2018.3%20275.7%2021.5C279.4%2024.7%20283.1%2031.4%20286.8%2034.8C290.4%2038.3%20294.1%2040.7%20297.8%2042.4C301.5%2044.2%20305.1%2043.6%20308.8%2045.4C312.5%2047.2%20316.2%2048.7%20319.9%2053.2C323.5%2057.8%20327.2%2066.5%20330.9%2072.6C334.6%2078.7%20338.2%2085.7%20341.9%2090.0C345.6%2094.3%20349.3%2096.2%20352.9%2098.4C356.6%20100.6%20360.3%20102.4%20364.0%20103.3C367.6%20104.2%20373.2%20103.7%20375.0%20103.8L375%20104L0%20104Z%27%20transform%3D%27translate%28104%2C0%29%20rotate%2890%29%27%2F%3E%3C%2Fsvg%3E"); /* Paso de la onda y su espesor, que es 104/375 del paso. */ --onda-paso: 40px; --onda-alto: calc(var(--onda-paso) * 104 / 375); --festón-pie: url("data:image/svg+xml,"); --festón-ratio: 375 / 104; --feston-ratio: 375 / 104; --feston-alto: 27.73%; /* El canto del pop-up va a media escala: dos festones en vez de uno. Un festón solo, estirado a todo el ancho del panel, comía 73px de alto y su silueta se leía como mancha; repetido dos veces conserva la curva exacta —cada baldosa mide la mitad de ancho y la mitad de alto, o sea la misma proporción— y baja a la mitad de altura, con ritmo constante. */ --vh: 100vh; } @supports (height: 100svh) { :root { --vh: 100svh; } }