/* invitacion.css — la invitación que ve el invitado. ───────────────────────────────────────────────────────────────────────────── Se diseña para TELÉFONO primero: casi nadie abre esto en una computadora (la-pantalla, D29, D39). Nada se carga de fuera: las tipografías se sirven desde /tipografias/ (regla seguridad), y eso además la hace abrir con mala señal. Las decisiones de diseño, y por qué: · La tipografía hace el trabajo. Cormorant Garamond en peso 300 y tamaño grande: es lo que separa una invitación cara de una plantilla. · Mezcla de letras: script (Pinyon) para los nombres, serif de alto contraste para los títulos, y una sans diminuta con mucho espaciado para las etiquetas. · Fecha sobredimensionada: el número es un elemento gráfico, no un dato. · Capas tipo vellum: papel translúcido encima del fondo, como el papel cebolla real. · Grano de papel: una textura finísima. Sin ella, el fondo se ve digital y plano. · Reglas de un pelo con un rombo al centro, en vez de líneas gruesas. · Aire. Mucho más del que parece necesario: el espacio es lo que se siente caro. ───────────────────────────────────────────────────────────────────────────── */ /* ⚠️ D36 · ESTA LÍNEA VA PRIMERO Y NO SE BORRA. El atributo hidden esconde con el display:none de la hoja del navegador, y CUALQUIER regla de display del autor le gana. Sin esto, una sección "escondida" se queda encima para siempre y la suite no lo ve: solo se descubre abriéndolo en un navegador. */ [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════ paletas Una sola fuente del color. Nunca un color suelto dentro de una regla. La paleta del evento se pone en desde invitacion.js. */ :root { /* arena — el predeterminado: marfil, tinta café y oro viejo */ --tinta: #33302b; --tinta-2: #6f675d; --tinta-3: #a79c8e; --papel: #f7f3ec; --papel-2: #fffdf9; --vellum: rgba(255, 253, 249, .72); --acento: #9a7b4f; --acento-2: #c8b28c; --linea: #ded3c2; --acento-hondo:#7c6240; --error: #8a3c30; --sombra: 0 1.5rem 3.5rem -1.5rem rgba(51, 48, 43, .28); --ancho: 33rem; --serif: 'Cormorant Garamond', ui-serif, Georgia, serif; --script: 'Pinyon Script', 'Cormorant Garamond', cursive; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body[data-paleta="vino"] { --tinta:#332327; --tinta-2:#6d565b; --tinta-3:#a89195; --papel:#faf5f4; --papel-2:#fffcfb; --vellum:rgba(255,252,251,.72); --acento:#8c3a48; --acento-2:#d3a6ad; --linea:#ebd8db; --acento-hondo:#6d2b37; --error:#8a3c30; } body[data-paleta="jardin"] { --tinta:#2b3129; --tinta-2:#5f6b5a; --tinta-3:#97a291; --papel:#f4f7f1; --papel-2:#fdfefc; --vellum:rgba(253,254,252,.72); --acento:#5a7452; --acento-2:#a9bda1; --linea:#d9e3d4; --acento-hondo:#42573c; --error:#8a3c30; } body[data-paleta="cielo"] { --tinta:#26303a; --tinta-2:#5b6a77; --tinta-3:#93a2ae; --papel:#f2f6f9; --papel-2:#fdfeff; --vellum:rgba(253,254,255,.72); --acento:#456d8c; --acento-2:#a3c0d3; --linea:#d5e2ea; --acento-hondo:#31516b; --error:#8a3c30; } body[data-paleta="noche"] { --tinta:#efe9df; --tinta-2:#b6aa99; --tinta-3:#7d7364; --papel:#16140f; --papel-2:#201d17; --vellum:rgba(32,29,23,.72); --acento:#c6a76a; --acento-2:#8a7448; --linea:#332e25; --acento-hondo:#6b5836; --error:#e8b5ab; --sombra:0 1.5rem 3.5rem -1.5rem rgba(0,0,0,.6); } /* ═══════════════════════════════════════════════════ base */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.75; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* El grano del papel. Sin esto el fondo se ve digital y plano; con esto se ve impreso. Va como textura SVG en línea: no carga nada de fuera (la CSP deja data: en img-src). */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E"); } body[data-paleta="noche"]::before { mix-blend-mode: screen; opacity: .35; } /* ═══════════════════════════════════════════════════ tipografía compartida */ .script { font-family: var(--script); font-weight: 400; line-height: 1.15; } .serif { font-family: var(--serif); font-weight: 300; } /* La etiqueta diminuta con mucho aire entre letras. Es el detalle que más "papelería fina" se siente, y el que casi ninguna plantilla se toma la molestia de hacer bien. El text-indent compensa el espacio que el tracking le cuelga a la última letra: sin eso, un texto "centrado" queda medio carácter corrido a la izquierda. */ .eyebrow { font-family: var(--sans); font-size: .625rem; font-weight: 400; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--tinta-3); margin: 0; } /* ═══════════════════════════════════════════════════ regla de un pelo con rombo */ .regla { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 auto 2.25rem; width: min(11rem, 60%); } .regla::before, .regla::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--linea)); } .regla::before { background: linear-gradient(to left, transparent, var(--linea)); } .regla i { width: 5px; height: 5px; background: var(--acento-2); transform: rotate(45deg); flex: none; } /* ═══════════════════════════════════════════════════ el sobre */ .sobre { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 2.5rem; background: var(--papel); padding: 1.5rem; transition: opacity .9s cubic-bezier(.22,.61,.36,1), visibility .9s; } .sobre.abierto { opacity: 0; visibility: hidden; pointer-events: none; } .sobre-carta { position: relative; width: min(21rem, 84vw); background: var(--papel-2); box-shadow: var(--sombra), 0 0 0 1px var(--linea) inset; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; transition: transform .9s cubic-bezier(.22,.61,.36,1); /* ── Que el sello NO le caiga encima al nombre. Dos veces ya pasó: a 375 px con la solapa al 50%, y otra vez a 320 px cuando "PARA FAMILIA RUIZ ALCÁNTARA" partió en dos renglones. Anclar el texto abajo no basta: con un nombre largo sube y choca. Ahora la separación es geométrica y no depende del largo del nombre: · el sello cuelga del pico de la solapa, que está al 40% de la ALTURA; · la altura es el ancho / 1.28, así que ese 40% es el 31.25% del ANCHO; · el sello mide 2.9rem, o sea que baja 1.45rem más; · y se le deja 0.75rem de aire. El padding en porcentaje se mide contra el ANCHO, que es justo lo que necesitamos. Y con min-height en vez de aspect-ratio, la tarjeta CRECE si el nombre es largo, en vez de dejar que el texto se salga. ── */ /* UNA sola medida manda: cuánto baja la solapa. La solapa, el sello y el hueco del texto salen los tres de aquí, así que no se pueden separar. Se calcula desde el ANCHO (no desde la altura) a propósito: la altura crece cuando el nombre del invitado parte en dos renglones, y con ella se bajaba el sello encima del nombre. Ese fue el intento anterior, medido: 5 px de encimado a 320 px. */ --ancho-carta: min(21rem, 84vw); --baja-solapa: calc(var(--ancho-carta) * 0.3125); /* 40% de la altura de referencia */ --radio-sello: 1.8rem; width: var(--ancho-carta); min-height: calc(var(--ancho-carta) / 1.28); padding: calc(var(--baja-solapa) + var(--radio-sello) + .8rem) 1.4rem 1.75rem; } .sobre.abriendo .sobre-carta { transform: translateY(-1.5rem) scale(.98); } .sobre-solapa { /* Altura en píxeles derivada del ancho, no en % de la altura de la tarjeta: si no, la solapa crece cuando el nombre es largo y el pico baja con ella. */ position: absolute; inset: 0 0 auto 0; height: var(--baja-solapa); background: linear-gradient(168deg, var(--acento-2) 0%, var(--acento) 92%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; backface-visibility: hidden; /* Un filo de luz en el doblez: es lo que hace que se lea como papel doblado y no como un triángulo de color. */ filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)); transition: transform .95s cubic-bezier(.62,.03,.25,1); } .sobre.abriendo .sobre-solapa { transform: rotateX(178deg); } /* El sello de cera, colgando del pico de la solapa. La solapa va al 40% (no al 50% que uno pondría a ojo) porque el sello cuelga de su pico y, más abajo, le come el renglón "PARA FAMILIA ..." al invitado. Medido a 375 px. Los sobres de verdad también tienen la solapa más corta que la mitad. */ .sobre-sello { position: absolute; left: 50%; top: var(--baja-solapa); width: calc(var(--radio-sello) * 2); height: calc(var(--radio-sello) * 2); margin: calc(var(--radio-sello) * -1) 0 0 calc(var(--radio-sello) * -1); display: grid; place-content: center; font-family: var(--script); font-size: 1.35rem; font-weight: 400; letter-spacing: .02em; line-height: 1; transition: opacity .5s ease, transform .5s ease; /* ── Cera de verdad, no un círculo. Lo que hace que una cosa parezca cera y no un botón son tres detalles, y ninguno es el color: 1. el borde es IRREGULAR — la cera se escurre al prensarla. Ese borde lo dibuja el clip-path de abajo, con 24 radios distintos; 2. la luz entra por arriba a la izquierda y el color se hunde hacia el borde; 3. el monograma está HUNDIDO, no impreso: una sombra clara arriba y una oscura abajo, que es lo que hace un troquel al prensar. Todo con CSS: ni una imagen que cargar, y la CSP no carga nada de fuera. */ background: radial-gradient(ellipse at 32% 26%, rgba(255,255,255,.34), transparent 46%), radial-gradient(circle at 50% 50%, var(--acento-2) 8%, var(--acento) 58%, var(--acento-hondo) 100%); clip-path: polygon( 50% 0.5%, 62% 2.4%, 71% 6.2%, 79% 11%, 86% 18%, 91.5% 26%, 95% 35%, 97.6% 44%, 97.4% 55%, 95% 64%, 91% 73%, 85.5% 81%, 78% 87.5%, 70% 92.6%, 60.5% 96.4%, 50% 98.5%, 39% 96.8%, 29.5% 93%, 21% 87.8%, 14% 81%, 8.6% 72.5%, 4.6% 63%, 2.6% 53%, 3.4% 42%, 6.4% 32.5%, 11% 23.5%, 17.5% 15.6%, 25.5% 9%, 35% 4%); box-shadow: 0 .3rem .75rem rgba(0,0,0,.34), /* la sombra que proyecta sobre el papel */ inset 0 -.14rem .3rem rgba(0,0,0,.30), /* el borde de abajo, más hondo */ inset 0 .1rem .22rem rgba(255,255,255,.22); /* el brillo del borde de arriba */ color: color-mix(in srgb, var(--acento-hondo) 72%, #000); text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 1px rgba(0,0,0,.38); } .sobre.abriendo .sobre-sello { opacity: 0; transform: scale(.55) rotate(-14deg); } .sobre-cuerpo { position: relative; z-index: 2; } .sobre-para { font-size: .58rem; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .8rem; } .sobre-titulo { font-family: var(--script); font-size: 1.95rem; font-weight: 400; margin: 0 0 .45rem; line-height: 1.1; color: var(--tinta); } .sobre-fecha { font-family: var(--sans); font-size: .62rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: var(--tinta-2); margin: 0; } .sobre-abrir { font-family: var(--sans); font-size: .68rem; font-weight: 400; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; padding: 1.05rem 2.4rem; cursor: pointer; min-height: 48px; background: transparent; color: var(--tinta); border: 1px solid var(--linea); transition: background .4s ease, color .4s ease, border-color .4s ease; } .sobre-abrir:hover { background: var(--acento); border-color: var(--acento); color: #fff; } .sobre-abrir:active { transform: translateY(1px); } /* ═══════════════════════════════════════════════════ estructura */ main { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem 4rem; } .seccion { padding: 2.75rem 0; } .titulo-seccion { font-family: var(--sans); font-size: .625rem; font-weight: 400; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--tinta-3); text-align: center; margin: 0 0 2.25rem; } .parrafo { margin: 0 auto 1rem; color: var(--tinta-2); text-align: center; max-width: 26rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; } .nota-chica { font-size: .78rem; color: var(--tinta-3); margin: .6rem 0 0; text-align: center; } /* ═══════════════════════════════════════════════════ portada Toda la pantalla, una sola idea. El monograma arriba, los nombres enormes, y la fecha como pieza gráfica. */ .portada { min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 5rem 0 4rem; position: relative; } .monograma { width: 4.5rem; height: 4.5rem; border: 1px solid var(--linea); border-radius: 50%; display: grid; place-content: center; margin-bottom: 2rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; letter-spacing: .1em; color: var(--acento); } .portada-etiqueta { margin-bottom: 1.75rem; } .portada-titulo { font-family: var(--script); font-weight: 400; margin: 0; font-size: clamp(3rem, 16vw, 5.25rem); line-height: .98; color: var(--tinta); text-wrap: balance; letter-spacing: .012em; } .portada-frase { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--tinta-2); margin: 1.75rem auto 0; max-width: 19rem; line-height: 1.6; text-wrap: balance; } /* la fecha sobredimensionada: números grandes separados por un rombo fino */ .fecha-grande { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 2.5rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 8vw, 2.6rem); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; } .fecha-grande span { display: block; } .fecha-grande i { width: 4px; height: 4px; background: var(--acento-2); transform: rotate(45deg); flex: none; } .fecha-texto { margin: .9rem 0 0; font-family: var(--sans); font-size: .625rem; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--tinta-2); } .scroll-pista { position: absolute; bottom: 2rem; width: 1px; height: 3rem; background: var(--linea); overflow: hidden; } .scroll-pista span { display: block; width: 100%; height: 45%; background: var(--acento); animation: bajar 2.2s cubic-bezier(.65,0,.35,1) infinite; } @keyframes bajar { 0% { transform: translateY(-110%); } 100% { transform: translateY(240%); } } @media (prefers-reduced-motion: reduce) { .scroll-pista span { animation: none; } } /* ═══════════════════════════════════════════════════ cuenta regresiva Sin cajas: números finos sobre el papel, separados por líneas de un pelo. */ .cuenta-caja { display: grid; grid-template-columns: repeat(4, 1fr); } .cuenta-dato { text-align: center; padding: .25rem .2rem; position: relative; } .cuenta-dato + .cuenta-dato::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--linea); } .cuenta-dato b { display: block; font-family: var(--serif); font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 300; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--tinta); } .cuenta-dato span { display: block; margin-top: .6rem; font-size: .55rem; font-weight: 400; letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; color: var(--tinta-3); } .cuenta-ya { text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--acento); margin: 0; } /* ═══════════════════════════════════════════════════ itinerario Una línea de tiempo con un pelo de línea y un punto por momento. */ .itinerario { list-style: none; margin: 0; padding: 0; position: relative; } .itinerario::before { content: ''; position: absolute; left: 3.9rem; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--linea); } .itinerario li { display: grid; grid-template-columns: 3.2rem 1.4rem 1fr; gap: 0 .75rem; padding: 1.05rem 0; align-items: baseline; } .itinerario .hora { font-family: var(--serif); font-size: 1.05rem; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; text-align: right; } .itinerario .punto { position: relative; height: 1em; } .itinerario .punto::after { content: ''; position: absolute; left: 50%; top: .42em; width: 6px; height: 6px; margin-left: -3px; background: var(--papel); border: 1px solid var(--acento); border-radius: 50%; } .itinerario .que { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--tinta); line-height: 1.3; } .itinerario .donde { display: block; font-family: var(--sans); font-size: .78rem; color: var(--tinta-3); margin-top: .15rem; } /* ═══════════════════════════════════════════════════ lugares · vellum Papel translúcido encima del fondo, como el papel cebolla de una invitación real. */ .lugares { display: grid; gap: 1rem; } .lugar { background: var(--vellum); border: 1px solid var(--linea); padding: 1.9rem 1.4rem; text-align: center; backdrop-filter: blur(1.5px); } .lugar h3 { margin: 0 0 .45rem; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--tinta); line-height: 1.25; } .lugar p { margin: 0 0 1.3rem; color: var(--tinta-3); font-size: .85rem; line-height: 1.6; } /* ═══════════════════════════════════════════════════ galería */ .galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } .galeria img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--linea); filter: saturate(.92) contrast(1.02); } .galeria img:first-child { grid-column: 1 / -1; aspect-ratio: 4/3; } /* ═══════════════════════════════════════════════════ vestimenta */ .vestimenta { text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 8vw, 2.4rem); margin: 0; color: var(--tinta); letter-spacing: .01em; } /* ═══════════════════════════════════════════════════ botones */ .botones { display: grid; gap: .65rem; justify-items: center; } .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .85rem 1.9rem; text-decoration: none; font-family: var(--sans); font-size: .64rem; font-weight: 400; letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; background: transparent; color: var(--tinta); border: 1px solid var(--linea); transition: background .4s ease, color .4s ease, border-color .4s ease; } .boton:hover { background: var(--acento); border-color: var(--acento); color: #fff; } /* ═══════════════════════════════════════════════════ confirmar La sección que decide si el invitado contesta. Tiene que sentirse fácil. */ .confirmar { background: var(--vellum); border: 1px solid var(--linea); padding: 3rem 1.4rem; margin-top: 1rem; backdrop-filter: blur(1.5px); } .confirmar-saludo { text-align: center; font-family: var(--serif); font-weight: 300; font-size: 1.35rem; line-height: 1.45; margin: 0 0 2rem; color: var(--tinta); text-wrap: balance; } .opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.5rem; } .opcion { font-family: var(--sans); font-size: .68rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; padding: 1.15rem .5rem; min-height: 52px; cursor: pointer; border: 1px solid var(--linea); background: transparent; color: var(--tinta-2); transition: background .35s ease, color .35s ease, border-color .35s ease; } .opcion:hover { border-color: var(--acento-2); color: var(--tinta); } .opcion[aria-pressed="true"] { background: var(--acento); color: #fff; border-color: var(--acento); } .etiqueta { display: block; font-family: var(--sans); font-size: .6rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); margin: 1.5rem 0 .6rem; } .etiqueta i { font-style: normal; text-transform: none; letter-spacing: .04em; opacity: .75; } .campo { width: 100%; font-family: var(--sans); font-weight: 300; padding: .85rem 1rem; border: 1px solid var(--linea); background: var(--papel-2); color: var(--tinta); /* 16px mínimo: por debajo de eso, el iPhone hace zoom solo al tocar el campo */ font-size: 16px; border-radius: 0; } .campo::placeholder { color: var(--tinta-3); } .campo:focus { outline: 1px solid var(--acento); outline-offset: 1px; border-color: var(--acento); } .contador { display: flex; align-items: center; justify-content: center; gap: 1.5rem; } .contador-btn { font-family: var(--serif); font-size: 1.5rem; width: 48px; height: 48px; border: 1px solid var(--linea); background: transparent; color: var(--tinta-2); cursor: pointer; border-radius: 50%; line-height: 1; transition: border-color .3s ease, color .3s ease; } .contador-btn:hover:not([disabled]) { border-color: var(--acento); color: var(--acento); } .contador-btn[disabled] { opacity: .3; cursor: not-allowed; } .contador-n { font-family: var(--serif); font-size: 2.6rem; font-weight: 300; width: 3.5rem; text-align: center; border: 0; background: none; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; padding: 0; } .contador-n::-webkit-outer-spin-button, .contador-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .enviar { width: 100%; min-height: 52px; padding: 1.1rem 1.5rem; margin-top: 2rem; cursor: pointer; font-family: var(--sans); font-size: .68rem; font-weight: 400; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; background: var(--acento); color: #fff; border: 1px solid var(--acento); transition: filter .3s ease, transform .15s ease; } .enviar:hover { filter: brightness(1.08); } .enviar:active { transform: translateY(1px); } .enviar[disabled] { opacity: .5; cursor: progress; } .link-boton { background: none; border: 0; cursor: pointer; padding: .6rem; font-family: var(--sans); font-size: .72rem; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; } .link-boton:hover { color: var(--acento); } .aviso { margin: 1.1rem 0 0; padding: .85rem 1rem; font-size: .85rem; text-align: center; background: rgba(154, 60, 48, .07); color: var(--error); border: 1px solid rgba(154, 60, 48, .2); } .gracias { text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.5rem; margin: 0 0 .75rem; color: var(--acento); line-height: 1.4; text-wrap: balance; } /* ═══════════════════════════════════════════════════ música */ .musica { position: fixed; right: 1.1rem; top: 1.1rem; z-index: 50; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: var(--vellum); border: 1px solid var(--linea); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; gap: 2.5px; } .musica-onda { width: 2px; height: 8px; background: var(--acento); border-radius: 1px; animation: sonar 1.1s ease-in-out infinite; } .musica-onda:nth-child(2) { animation-delay: .18s; height: 14px; } .musica-onda:nth-child(3) { animation-delay: .36s; } @keyframes sonar { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.2); } } .musica.callada .musica-onda { animation: none; transform: scaleY(.4); opacity: .45; } /* ═══════════════════════════════════════════════════ pie */ .pie { text-align: center; padding: 3rem 0 1rem; } #pieTitulo { font-family: var(--script); font-size: 1.85rem; color: var(--tinta); margin: 0 0 .6rem; line-height: 1.2; } .pie-marca { font-family: var(--sans); font-size: .55rem; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--tinta-3); margin: 0; } .pie-marca span { color: var(--acento); } .vacio { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 2rem; gap: .75rem; position: relative; z-index: 2; } .vacio-titulo { font-family: var(--serif); font-weight: 300; font-size: 1.75rem; margin: 0; } .vacio-texto { color: var(--tinta-3); margin: 0 auto; max-width: 22rem; font-size: .9rem; } /* ═══════════════════════════════════════════════════ aparecer al bajar Tipografía cinética: cada bloque entra desde abajo, con un desfase por hijo. Es lo que hace que se sienta "vivo" en vez de una página que ya estaba ahí. */ .aparece > * { opacity: 0; transform: translateY(1.1rem); transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1); } .aparece.visible > * { opacity: 1; transform: none; } .aparece.visible > *:nth-child(2) { transition-delay: .09s; } .aparece.visible > *:nth-child(3) { transition-delay: .18s; } .aparece.visible > *:nth-child(4) { transition-delay: .27s; } .aparece.visible > *:nth-child(5) { transition-delay: .36s; } .aparece.visible > *:nth-child(n+6) { transition-delay: .45s; } @media (prefers-reduced-motion: reduce) { .aparece > * { opacity: 1; transform: none; transition: none; } } /* ═══════════════════════════════════════════════════ pantallas grandes El teléfono es el caso normal. Esto es el añadido, no al revés. */ @media (min-width: 40rem) { body { font-size: 17px; } .seccion { padding: 4rem 0; } .galeria { grid-template-columns: repeat(3, 1fr); } .galeria img:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; } .lugares { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .confirmar { padding: 3.5rem 2.5rem; } .monograma { width: 5.25rem; height: 5.25rem; font-size: 1.2rem; } } /* ═══════════════════════════════════ el relieve del papel Lo que separa una invitación cara de una plantilla no es el color: es que el papel se vea PRENSADO. Un patrón floral de línea, tono sobre tono, casi invisible de frente y evidente cuando la luz lo cruza — igual que un papel con realce de verdad. Va como SVG dentro del CSS: no carga ni un archivo de fuera, así que la CSP estricta (default-src 'self') lo deja pasar sin excepciones. La opacidad es MUY baja a propósito. Si se nota el dibujo, se ve a estampado barato; si apenas se intuye, se ve a papel de imprenta. */ /* El contenedor necesita posición propia, o su ::before se ancla a la VENTANA y el relieve queda pegado a la pantalla en vez de al papel. */ #invitacion { position: relative; } .sobre-carta::before, #invitacion::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.5%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%277%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2750%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%2820%2050%2050%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2750%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%2880%2050%2050%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2750%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%28140%2050%2050%29%27%2F%3E%3Cpath%20d%3D%27M50%2068%20C48%2084%2040%2092%2030%2098%27%2F%3E%3Cpath%20d%3D%27M38%2084%20C30%2082%2026%2076%2026%2070%20C34%2070%2038%2076%2038%2084%20Z%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%277%27%2F%3E%3Cellipse%20cx%3D%27150%27%20cy%3D%27150%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%2850%20150%20150%29%27%2F%3E%3Cellipse%20cx%3D%27150%27%20cy%3D%27150%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%28110%20150%20150%29%27%2F%3E%3Cellipse%20cx%3D%27150%27%20cy%3D%27150%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%28170%20150%20150%29%27%2F%3E%3Cpath%20d%3D%27M150%20168%20C152%20184%20160%20192%20170%20198%27%2F%3E%3Cpath%20d%3D%27M162%20184%20C170%20182%20174%20176%20174%20170%20C166%20170%20162%20176%20162%20184%20Z%27%2F%3E%3Cpath%20d%3D%27M100%208%20C112%2020%20112%2034%20100%2046%20C88%2034%2088%2020%20100%208%20Z%27%2F%3E%3Cpath%20d%3D%27M8%20100%20C20%20112%2034%20112%2046%20100%20C34%2088%2020%2088%208%20100%20Z%27%2F%3E%3Cpath%20d%3D%27M192%20100%20C180%20112%20166%20112%20154%20100%20C166%2088%20180%2088%20192%20100%20Z%27%2F%3E%3Cpath%20d%3D%27M100%20192%20C112%20180%20112%20166%20100%20154%20C88%20166%2088%20180%20100%20192%20Z%27%2F%3E%3Cpath%20d%3D%27M64%20122%20C78%20118%2092%20126%2096%20140%27%2F%3E%3Cpath%20d%3D%27M136%2078%20C122%2082%20108%2074%20104%2060%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 175px 175px; opacity: .075; mix-blend-mode: multiply; } /* El texto ya va encima: .sobre-cuerpo tiene z-index 2. NO se le pone position:relative a TODOS los hijos — eso le quita el position:absolute a la solapa y al sello, y el sobre se desarma. Pasó, y se vio al abrirlo, no en la suite. */ /* En la paleta oscura el multiply desaparece: ahí el relieve se hace con luz. */ body[data-paleta="noche"] .sobre-carta::before, body[data-paleta="noche"] #invitacion::before { mix-blend-mode: screen; opacity: .07; } @media (prefers-reduced-motion: no-preference) { /* El sello llega como si lo acabaran de prensar. */ .sobre-sello { animation: prensar .75s cubic-bezier(.34,1.3,.5,1) both .55s; } @keyframes prensar { from { opacity: 0; transform: scale(1.5) rotate(-12deg); } to { opacity: 1; transform: none; } } }