/* disenos.css — los DISEÑOS de la invitación: cómo se ve y cómo se MUEVE toda. Leo, 26-sep-2026: "necesitamos algo wow, animaciones, estilos increíbles, que la gente lo compre porque es la invitación más espectacular del mercado… brutalmente moderno, poderoso, no cualquier sitio hecho en Canva". Diez diseños (config_negocio.js → disenos), cada uno con su apertura propia: · clasico — el sobre con lacre de siempre, con destellos y nombres que llegan. · editorial — revista: nombres enormes en serif, secciones numeradas, la cinta que corre, galería en carrusel. La apertura es un telón que sube. · aurora — luces de colores que flotan, tarjetas de vidrio, nombres con brillo que corre. La apertura es una luz que llena la pantalla. · cine — oscuro, grano de película, créditos. La apertura son las franjas de una pantalla de cine que se abren. Y seis más (28-sep-2026, "faltan más colores, más diseños, más estilos… unos 20"), cada uno en su sección al final de esta hoja: · minimal — un cartel de galería: mucho aire, líneas de un pixel y los nombres enormes. Una línea se dibuja de orilla a orilla y la hoja sube. · deco — una noche de gala de los años veinte: marcos de metal y rayos de sol. Se abre una puerta. · fiesta — un cartel de festival: formas de colores, stickers y confeti. El boleto revienta como globo. · polaroid — polaroids con cinta sobre un tablero, escritas a mano. Tres polaroids caen y se revelan. · botanico — un jardín: ramas y hojas dibujadas, papel de lino, la foto en un arco. La corona se abre. · acuarela — manchas de acuarela y papel rasgado. Una mancha florece y cubre la pantalla. La PALETA de cada invitación (invitacion.css) pone sus colores dentro de cualquier diseño. Y en todos, lo que se mueve CON EL DEDO (invitacion.js → armarMovimiento): la portada con profundidad, la fecha que llega desde enorme y un círculo de color que la voltea, la historia que se enciende palabra por palabra, las tarjetas que se enderezan, y la galería (que cae sobre la mesa en el Clásico y en Polaroid, y corre de lado, fija, en los demás). Reglas: nada de estilos en línea (la CSP los bloquea: todo se mueve con clases y con elemento.animate); los colores, solo en :root (pruebas/casos/copias.js); y con "menos movimiento" en el teléfono, todo queda quieto y completo (pruebas/casos/movimiento.js). */ :root { /* Aurora: las luces. Van muy desenfocadas y a media opacidad: dan color sin gritar. */ --aurora-rosa: #ff5e8a; --aurora-naranja: #ffb13b; --aurora-morado: #9b7bff; --aurora-menta: #2ec7b6; --aurora-cielo: #5ab8ff; --aurora-base: #fbf8f6; --aurora-texto: #1b1a22; --aurora-texto-2: #57536a; /* Cine: la sala oscura. */ --cine-fondo: #0c0b0d; --cine-fondo-2: #17151a; --cine-texto: #f4efe7; --cine-texto-2: #bdb3a6; --cine-texto-3: #8a8176; /* Los avisos que flotan sobre la portada y el botón de confirmar (27-sep-2026): vidrio blanco, como los de la landing. */ --vidrio-aviso: rgba(255, 255, 255, .84); --vidrio-aviso-2: rgba(255, 255, 255, .6); --texto-aviso: #1d1d1f; --texto-aviso-2: #6e6e73; --sombra-aviso: 0 16px 40px -14px rgba(0, 0, 0, .45); --verde-aviso: #34c759; --naranja-aviso: #ff9500; --blanco-flash: rgba(255, 255, 255, .95); --blanco-flash-2: rgba(255, 255, 255, .35); --vidrio-oscuro: rgba(23, 21, 26, .78); /* Aurora: los botones llevan letra blanca sobre el degradado. Con el rosa y el morado vivos daba 2.9; con estos, 5.3 o más (27-sep-2026). El brillo de neón queda en la sombra, que sigue siendo del morado vivo. */ --aurora-rosa-hondo: #c2255c; --aurora-morado-hondo: #7a4fd9; /* El velo sobre la foto del sobre (Editorial y Cine): que las letras claras se lean encima. */ --velo-sobre-arriba: rgba(0, 0, 0, .3); --velo-sobre-medio: rgba(0, 0, 0, .08); --velo-sobre-abajo: rgba(0, 0, 0, .78); } /* ═══════════════════════════════════════════════════ en TODOS los diseños */ /* Las letras que llegan (invitacion.js → partirEnLetras). La palabra no se parte en dos renglones. */ .palabra { display: inline-block; white-space: nowrap; } .letra { display: inline-block; } /* Los lienzos de los efectos: confeti (toda la pantalla) y destellos (la portada). */ .confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; } .portada > .destellos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* La cuenta regresiva gira en 3D: el número necesita perspectiva. */ .cuenta-dato { perspective: 30rem; } .cuenta-dato b { transform-origin: 50% 0; } /* La línea del tiempo se ENCIENDE momento por momento (invitacion.js → encenderLinea): el tramo de línea de cada momento crece hacia abajo y su punto se llena y late. */ .itinerario::before { display: none; } .itinerario li { position: relative; } .itinerario li::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; left: calc(3.95rem + 1.25rem - .5px); background: linear-gradient(var(--acento-2), var(--acento)); transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(.22,.61,.36,1); } /* La línea va de ícono a ícono: empieza en el centro del primero y termina en el del último. */ .itinerario li:first-child::before { top: 2.3rem; } .itinerario li:last-child::before { bottom: auto; height: 2.3rem; } .itinerario li:only-child::before { display: none; } .itinerario li.encendido::before { transform: scaleY(1); } .itinerario .punto::after { transition: background .6s ease .3s, box-shadow .6s ease .3s, transform .6s ease .3s; z-index: 1; } .itinerario li.encendido .punto::after { background: var(--acento); transform: scale(1.35); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 16%, transparent); animation: latido 2.6s ease-in-out 1.2s infinite; } @keyframes latido { 0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 16%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--acento) 0%, transparent); } } /* Las luces de Aurora existen en el HTML de todas: fuera de Aurora no se ven. */ .aurora { display: none; } @media (prefers-reduced-motion: reduce) { .itinerario li::before, .itinerario .punto::after { transition: none; animation: none; } } /* ═══════════════════════════════════════════════════════════════════ EDITORIAL Una revista de moda: el papel de su paleta, tinta casi negra, serif enorme y fina, todo a la izquierda, secciones con número, y la foto a sangre. */ body[data-diseno="editorial"] { font-size: 1.03rem; } body[data-diseno="editorial"] main { counter-reset: seccion; max-width: 38rem; } /* ─── la apertura: una portada de revista que se levanta como telón */ body[data-diseno="editorial"] .sobre { background: var(--papel); justify-items: start; padding: 2rem 1.75rem; transition: clip-path 1.05s cubic-bezier(.77,0,.18,1), opacity .4s ease 1s, visibility 1.1s; } body[data-diseno="editorial"] .sobre.abriendo { clip-path: inset(0 0 100% 0); } body[data-diseno="editorial"] .sobre.abierto { opacity: 0; } body[data-diseno="editorial"] .sobre-solapa, body[data-diseno="editorial"] .sobre-sello { display: none; } /* El ancho, lo que de verdad cabe: el sobre lleva 1.75rem de cada lado. Con 88vw (343 px en un celular de 390) la carta medía 9 px más que el hueco y el sobre se podía arrastrar de lado (revisar_portadas --sobre, 28-sep-2026). */ body[data-diseno="editorial"] .sobre-carta { width: min(34rem, calc(100vw - 3.5rem)); min-height: 0; padding: 0; background: none; box-shadow: none; text-align: left; transition: transform 1.05s cubic-bezier(.77,0,.18,1); } body[data-diseno="editorial"] .sobre-carta::before { display: none; } body[data-diseno="editorial"] .sobre.abriendo .sobre-carta { transform: translateY(-2.5rem); } body[data-diseno="editorial"] .sobre-para { font-size: var(--letra-etiqueta); letter-spacing: .32em; text-indent: 0; color: var(--tinta-2); padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--tinta); } body[data-diseno="editorial"] .sobre-titulo { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.02em; font-size: calc(clamp(3.4rem, 17vw, 6.5rem) * var(--escala, 1)); line-height: .92; margin: 0 0 1.4rem; color: var(--tinta); } body[data-diseno="editorial"] .sobre-fecha { text-indent: 0; letter-spacing: .3em; color: var(--acento-letra); } body[data-diseno="editorial"] .sobre-abrir { justify-self: start; border: 0; border-bottom: 1px solid var(--tinta); padding: .9rem 0; min-height: 0; letter-spacing: .3em; text-indent: 0; color: var(--tinta); } body[data-diseno="editorial"] .sobre-abrir::after { content: ' →'; letter-spacing: 0; } body[data-diseno="editorial"] .sobre-abrir:hover { background: none; color: var(--acento); border-color: var(--acento); } /* ─── la portada: la foto a sangre arriba y los nombres ENORMES montados sobre su borde */ body[data-diseno="editorial"] .portada { min-height: 0; padding: 0 0 3.5rem; justify-items: start; text-align: left; align-content: start; /* La columna, fija al ancho de la portada (27-sep-2026). Sin esto, la foto a sangre (100vw) inflaba la columna en pantalla ancha (Chrome contó su ancho menos 50vw: 720 px en una portada de 560), su margen calc(50% - 50vw) se calculaba contra esa columna inflada, y a 1440 px la foto empezaba en 80: una franja de papel a la izquierda. Lo midió revisar_portadas.mjs --pagina ("lo que va a pantalla completa empieza en 0"). */ grid-template-columns: minmax(0, 1fr); } body[data-diseno="editorial"] .portada.con-foto { color: var(--tinta); } body[data-diseno="editorial"] .portada-fondo { position: relative; inset: auto; left: auto; transform: none; order: -1; width: 100vw; height: 68svh; margin-left: calc(50% - 50vw); background: var(--papel-2); } body[data-diseno="editorial"] .portada-fondo::after { background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--papel) 85%, transparent) 100%); } body[data-diseno="editorial"] .portada .monograma { display: none; } body[data-diseno="editorial"] .portada .portada-etiqueta { order: 1; margin: -1.6rem 0 .6rem; color: var(--tinta); text-shadow: none; font-size: var(--letra-etiqueta); letter-spacing: .34em; text-indent: 0; font-weight: 500; } body[data-diseno="editorial"] .portada .portada-titulo { order: 2; font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--tinta); font-size: calc(clamp(3.6rem, 19vw, 8rem) * var(--escala, 1)); line-height: .9; letter-spacing: -.035em; text-shadow: none; text-align: left; } body[data-diseno="editorial"] .portada .portada-frase { order: 3; margin: 1.4rem 0 0; max-width: 24rem; color: var(--tinta-2); text-shadow: none; text-align: left; font-size: 1.35rem; } body[data-diseno="editorial"] .portada .fecha-grande { order: 4; margin-top: 2rem; justify-content: flex-start; gap: .7rem; color: var(--tinta); text-shadow: none; font-size: clamp(2.4rem, 12vw, 3.6rem); font-weight: 300; } body[data-diseno="editorial"] .portada .fecha-grande i { width: 1.4rem; height: 1px; transform: none; background: var(--tinta); } body[data-diseno="editorial"] .portada .fecha-texto { order: 5; text-indent: 0; letter-spacing: .28em; color: var(--tinta-2); text-shadow: none; } body[data-diseno="editorial"] .portada .scroll-pista { display: none; } body[data-diseno="editorial"] .portada-fondo img { animation-duration: 16s; } /* SIN foto (27-sep-2026): los nombres van montados sobre la orilla de la foto (la etiqueta sube con margen negativo), y sin foto no hay orilla: la etiqueta quedaba FUERA de la pantalla, los nombres pegados arriba y cortados, y la portada medía lo que sus letras (min-height 0), así que los avisos caían encima de la frase y de la sección de abajo. Se vio en la versión publicada, en todos los tamaños. Sin foto, la portada es una página de papel de alto completo, con los textos abajo, como una portada de revista de puro texto. */ body[data-diseno="editorial"] .portada:not(.con-foto) { min-height: 100svh; padding-top: 5rem; align-content: end; } body[data-diseno="editorial"] .portada:not(.con-foto) .portada-etiqueta { margin-top: 0; } /* ─── la cinta que corre bajo la portada */ .cinta { display: none; } body[data-diseno="editorial"] .cinta { display: block; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; white-space: nowrap; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); padding: .9rem 0; } body[data-diseno="editorial"] .cinta-pista { display: inline-flex; animation: correr 38s linear infinite; } body[data-diseno="editorial"] .cinta-pista span { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.5rem; color: var(--tinta); padding-right: 2rem; } @keyframes correr { to { transform: translateX(-50%); } } /* ─── las secciones, numeradas como una revista: "03 — El día" */ body[data-diseno="editorial"] .seccion { padding: 3.2rem 0; text-align: left; border-bottom: 1px solid var(--linea); } body[data-diseno="editorial"] .seccion:not([hidden]) { counter-increment: seccion; } body[data-diseno="editorial"] .seccion .regla { display: none; } body[data-diseno="editorial"] .titulo-seccion { text-align: left; text-indent: 0; margin: 0 0 1.8rem; font-family: var(--serif); font-style: italic; font-weight: 300; text-transform: none; letter-spacing: -.02em; font-size: clamp(2.3rem, 10vw, 3.3rem); line-height: 1; color: var(--tinta); } body[data-diseno="editorial"] .titulo-seccion::before { content: counter(seccion, decimal-leading-zero) " —"; display: block; margin-bottom: .7rem; font-family: var(--sans); font-style: normal; font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .3em; color: var(--acento); } body[data-diseno="editorial"] .parrafo { text-align: left; margin-left: 0; font-size: 1.4rem; line-height: 1.55; color: var(--tinta-2); } /* La historia con letra capital, como un reportaje. */ body[data-diseno="editorial"] #historiaTexto::first-letter { float: left; font-family: var(--serif); font-size: 4.6rem; line-height: .82; font-weight: 400; padding: .3rem .6rem 0 0; color: var(--acento); } body[data-diseno="editorial"] .padrinos { text-align: left; gap: 1.1rem; } body[data-diseno="editorial"] .padrino { border-top: 1px solid var(--linea); padding-top: 1rem; } body[data-diseno="editorial"] .padrino dt { letter-spacing: .26em; text-indent: 0; } body[data-diseno="editorial"] .padrino dd { font-size: 1.5rem; font-style: italic; } body[data-diseno="editorial"] .itinerario .hora { font-size: 1.55rem; font-weight: 300; text-align: left; } body[data-diseno="editorial"] .itinerario .que { font-size: 1.5rem; } body[data-diseno="editorial"] .itinerario li { grid-template-columns: 4.6rem 2.5rem 1fr; } body[data-diseno="editorial"] .itinerario li::before { left: calc(4.6rem + .75rem + 1.25rem - .5px); } body[data-diseno="editorial"] .lugar, body[data-diseno="editorial"] .confirmar, body[data-diseno="editorial"] .pase { text-align: left; background: none; backdrop-filter: none; border: 0; border-top: 2px solid var(--tinta); padding: 1.6rem 0 1.2rem; } body[data-diseno="editorial"] .lugar h3 { font-size: 1.7rem; font-style: italic; font-weight: 300; } body[data-diseno="editorial"] .vestimenta { text-align: left; font-style: italic; font-size: clamp(2.6rem, 12vw, 3.8rem); } body[data-diseno="editorial"] .nota-chica { text-align: left; } body[data-diseno="editorial"] .cuenta-caja { gap: 0; } body[data-diseno="editorial"] .cuenta-dato { text-align: left; } body[data-diseno="editorial"] .cuenta-dato + .cuenta-dato::before { top: 10%; bottom: 10%; background: var(--tinta); } body[data-diseno="editorial"] .cuenta-dato b { font-size: clamp(2.8rem, 13vw, 4rem); padding-left: .6rem; } body[data-diseno="editorial"] .cuenta-dato span { padding-left: .6rem; text-indent: 0; } body[data-diseno="editorial"] .boton, body[data-diseno="editorial"] .opcion, body[data-diseno="editorial"] .enviar { border-radius: 0; } body[data-diseno="editorial"] .boton { border-color: var(--tinta); } body[data-diseno="editorial"] .enviar { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } body[data-diseno="editorial"] .opcion[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } body[data-diseno="editorial"] .boton:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } body[data-diseno="editorial"] .confirmar-saludo, body[data-diseno="editorial"] .gracias { text-align: left; } body[data-diseno="editorial"] .pie { text-align: left; } body[data-diseno="editorial"] #pieTitulo { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 2.6rem; } /* ─── la galería: un carrusel de fotos grandes que se desliza con el dedo */ body[data-diseno="editorial"] .galeria, body[data-diseno="aurora"] .galeria, body[data-diseno="cine"] .galeria { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; width: 100vw; margin-left: calc(50% - 50vw); padding: .4rem max(1.5rem, calc(50vw - 17rem)) 1.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body[data-diseno="editorial"] .galeria::-webkit-scrollbar, body[data-diseno="aurora"] .galeria::-webkit-scrollbar, body[data-diseno="cine"] .galeria::-webkit-scrollbar { display: none; } body[data-diseno="editorial"] .galeria-foto, body[data-diseno="aurora"] .galeria-foto, body[data-diseno="cine"] .galeria-foto { flex: 0 0 min(76vw, 21rem); scroll-snap-align: center; } body[data-diseno="editorial"] .galeria img, body[data-diseno="editorial"] .galeria-foto:first-child img { aspect-ratio: 4 / 5; } /* Donde el navegador lo sabe hacer, la foto que está al centro crece y las de los lados se apagan. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { body[data-diseno="editorial"] .galeria-foto, body[data-diseno="aurora"] .galeria-foto, body[data-diseno="cine"] .galeria-foto { animation: foco linear both; animation-timeline: view(inline); animation-range: cover; } @keyframes foco { 0% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(.86); opacity: .55; } } } } /* ═══════════════════════════════════════════════════════════════════ AURORA Luces de colores que flotan detrás de todo, tarjetas de vidrio, letra de Apple y nombres con un brillo que corre. El color de la paleta manda en los acentos. */ body[data-diseno="aurora"] { background: var(--aurora-base); color: var(--aurora-texto); font-weight: 400; } body[data-diseno="aurora"]::before { opacity: .22; } body[data-diseno="aurora"] #invitacion::before, body[data-diseno="aurora"] .sobre-carta::before { display: none; } body[data-diseno="aurora"] .aurora { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } body[data-diseno="aurora"] .aurora i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); opacity: .5; animation: flotar-luz 22s ease-in-out infinite alternate; } body[data-diseno="aurora"] .aurora i:nth-child(1) { background: var(--aurora-rosa); left: -22vmax; top: -18vmax; } body[data-diseno="aurora"] .aurora i:nth-child(2) { background: var(--aurora-naranja); right: -24vmax; top: 8vmax; animation-duration: 26s; animation-delay: -6s; } body[data-diseno="aurora"] .aurora i:nth-child(3) { background: var(--aurora-morado); left: 10vmax; bottom: -30vmax; animation-duration: 30s; animation-delay: -12s; } body[data-diseno="aurora"] .aurora i:nth-child(4) { background: var(--aurora-menta); right: -10vmax; bottom: -12vmax; opacity: .38; animation-duration: 24s; } body[data-diseno="aurora"] .aurora i:nth-child(5) { background: var(--acento); left: 30vmax; top: 30vmax; width: 40vmax; height: 40vmax; opacity: .3; animation-duration: 20s; animation-delay: -4s; } @keyframes flotar-luz { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vmax, 6vmax) scale(1.12); } 100% { transform: translate(-6vmax, 10vmax) scale(.94); } } /* ─── la apertura: una tarjeta de vidrio; al tocarla, la luz del sello llena la pantalla */ body[data-diseno="aurora"] .sobre { background: transparent; z-index: 60; transition: opacity .7s ease .35s, visibility 1s; } body[data-diseno="aurora"] .sobre-solapa { display: none; } /* Lo que cabe de verdad (el sobre lleva 1.5rem de cada lado): con 88vw la carta medía más que el hueco en un celular y el sobre se arrastraba de lado (revisar_portadas --sobre, 28-sep-2026). */ body[data-diseno="aurora"] .sobre-carta { width: min(22rem, calc(100vw - 3rem)); min-height: 0; padding: 5.6rem 1.6rem 2.2rem; border-radius: 32px; text-align: center; background: rgba(255, 255, 255, .52); box-shadow: 0 30px 80px -30px rgba(40, 20, 60, .45), inset 0 0 0 1px rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .6s ease .15s, filter .9s ease; } body[data-diseno="aurora"] .sobre.abriendo .sobre-carta { transform: scale(1.12); opacity: 0; filter: blur(16px); } body[data-diseno="aurora"] .sobre-sello { top: 1.4rem; left: 50%; width: 3.6rem; height: 3.6rem; margin: 0 0 0 -1.8rem; clip-path: none; border-radius: 50%; background: conic-gradient(from 200deg, var(--aurora-rosa), var(--aurora-naranja), var(--aurora-morado), var(--aurora-menta), var(--aurora-rosa)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 10px 30px -6px var(--aurora-morado); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: .04em; transition: transform 1.05s cubic-bezier(.7,0,.25,1), opacity .5s ease .7s; } body[data-diseno="aurora"] .sobre.abriendo .sobre-sello { transform: scale(46); opacity: 0; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="aurora"] .sobre-sello { animation: girar-luz 6s linear infinite; } @keyframes girar-luz { to { filter: hue-rotate(360deg); } } } body[data-diseno="aurora"] .sobre-para { color: var(--aurora-texto-2); letter-spacing: .24em; } body[data-diseno="aurora"] .sobre-titulo { font-family: var(--sans); font-weight: 600; letter-spacing: -.035em; font-size: calc(2.3rem * var(--escala, 1)); line-height: 1.05; color: var(--aurora-texto); } body[data-diseno="aurora"] .sobre-fecha { color: var(--aurora-texto-2); } body[data-diseno="aurora"] .sobre-abrir { border: 0; border-radius: 980px; padding: 1rem 2.2rem; color: #fff; letter-spacing: .18em; font-weight: 600; background: linear-gradient(100deg, var(--acento-hondo), var(--aurora-rosa-hondo), var(--aurora-morado-hondo)); box-shadow: 0 12px 30px -10px var(--aurora-morado); } body[data-diseno="aurora"] .sobre-abrir:hover { color: #fff; filter: brightness(1.06) saturate(1.1); } /* ─── la portada: la foto en una tarjeta que flota, y los nombres con brillo */ body[data-diseno="aurora"] main { z-index: 2; } body[data-diseno="aurora"] .portada { min-height: 100svh; padding: 4.5rem 0 3.5rem; } body[data-diseno="aurora"] .portada.con-foto { color: var(--aurora-texto); } body[data-diseno="aurora"] .portada-fondo { position: relative; inset: auto; left: auto; transform: none; order: -1; width: min(19rem, 76vw); aspect-ratio: 4 / 5; height: auto; border-radius: 30px; margin-bottom: 2.2rem; box-shadow: 0 40px 70px -30px rgba(60, 20, 70, .55), 0 0 0 6px rgba(255, 255, 255, .6); background: var(--papel-2); } body[data-diseno="aurora"] .portada-fondo::after { display: none; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="aurora"] .portada-fondo { animation: flotar-tarjeta 7s ease-in-out infinite; } @keyframes flotar-tarjeta { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } } } body[data-diseno="aurora"] .portada .monograma { display: none; } body[data-diseno="aurora"] .portada .portada-etiqueta { color: var(--aurora-texto-2); text-shadow: none; font-weight: 600; letter-spacing: .3em; padding: .45rem 1rem; border-radius: 980px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body[data-diseno="aurora"] .portada .portada-titulo { font-family: var(--sans); font-weight: 600; letter-spacing: -.05em; line-height: .95; font-size: calc(clamp(3.3rem, 16vw, 6.6rem) * var(--escala, 1)); text-shadow: none; padding: .05em .02em; background: linear-gradient(100deg, var(--aurora-texto) 0%, var(--acento) 25%, var(--aurora-rosa) 45%, var(--aurora-morado) 65%, var(--aurora-texto) 90%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="aurora"] .portada .portada-titulo { animation: brillo 7s ease-in-out infinite alternate; } @keyframes brillo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } } /* Las letras sueltas heredan el degradado del título entero (si no, cada una lo repetiría). */ body[data-diseno="aurora"] .portada-titulo .letra, body[data-diseno="aurora"] .portada-titulo .palabra { color: transparent; -webkit-text-fill-color: transparent; } body[data-diseno="aurora"] .portada .portada-frase { color: var(--aurora-texto-2); text-shadow: none; font-family: var(--sans); font-style: normal; font-size: var(--letra-lectura-sans); } body[data-diseno="aurora"] .portada .fecha-grande { gap: .5rem; color: var(--aurora-texto); text-shadow: none; font-family: var(--sans); font-weight: 600; font-size: 1.35rem; } body[data-diseno="aurora"] .portada .fecha-grande span { padding: .7rem 1.05rem; border-radius: 18px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body[data-diseno="aurora"] .portada .fecha-grande i { display: none; } body[data-diseno="aurora"] .portada .fecha-texto { color: var(--aurora-texto-2); text-shadow: none; } /* Sin la rayita de "baja": la portada de Aurora mide más que la pantalla y la rayita se montaba encima de la fecha (se vio abriéndola a 390 px). La tarjeta y los números ya invitan a bajar. */ body[data-diseno="aurora"] .portada .scroll-pista { display: none; } /* ─── las secciones: tarjetas de vidrio */ body[data-diseno="aurora"] .seccion { margin: 1.1rem 0; padding: 2.4rem 1.4rem; border-radius: 30px; background: rgba(255, 255, 255, .5); box-shadow: 0 24px 60px -34px rgba(60, 20, 70, .4), inset 0 0 0 1px rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } body[data-diseno="aurora"] .seccion .regla { display: none; } body[data-diseno="aurora"] .titulo-seccion { font-family: var(--sans); font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; text-transform: none; text-indent: 0; color: var(--aurora-texto); margin-bottom: 1.6rem; } body[data-diseno="aurora"] .titulo-seccion::before { content: ''; display: block; width: 2.4rem; height: 6px; border-radius: 6px; margin: 0 auto .9rem; background: linear-gradient(90deg, var(--acento), var(--aurora-rosa), var(--aurora-morado)); } body[data-diseno="aurora"] .parrafo { font-family: var(--sans); font-size: var(--letra-lectura-sans); line-height: 1.6; color: var(--aurora-texto-2); } body[data-diseno="aurora"] .padrino dt { color: var(--acento); font-weight: 600; } body[data-diseno="aurora"] .padrino dd { font-family: var(--sans); font-weight: 500; font-size: 1.2rem; letter-spacing: -.01em; color: var(--aurora-texto); } body[data-diseno="aurora"] .itinerario .hora { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; color: var(--aurora-texto); } body[data-diseno="aurora"] .itinerario .que { font-family: var(--sans); font-weight: 500; font-size: 1.25rem; color: var(--aurora-texto); } body[data-diseno="aurora"] .itinerario li::before { width: 3px; left: calc(3.95rem + 1.25rem - 1.5px); background: linear-gradient(var(--aurora-rosa), var(--aurora-morado)); border-radius: 3px; } body[data-diseno="aurora"] .itinerario li.encendido .punto::after { background: var(--aurora-rosa); border-color: var(--aurora-rosa); } body[data-diseno="aurora"] .cuenta-caja { gap: .5rem; } body[data-diseno="aurora"] .cuenta-dato { padding: 1rem .2rem .8rem; border-radius: 20px; background: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); } body[data-diseno="aurora"] .cuenta-dato + .cuenta-dato::before { display: none; } body[data-diseno="aurora"] .cuenta-dato b { font-family: var(--sans); font-weight: 600; letter-spacing: -.04em; color: var(--aurora-texto); } body[data-diseno="aurora"] .lugar, body[data-diseno="aurora"] .confirmar, body[data-diseno="aurora"] .pase { border: 0; border-radius: 22px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); } body[data-diseno="aurora"] .confirmar { margin-top: 0; } body[data-diseno="aurora"] .lugar h3, body[data-diseno="aurora"] .confirmar-saludo, body[data-diseno="aurora"] .pase-nombre { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; color: var(--aurora-texto); } /* El nombre del lugar en la sans semibold: con el 1.6rem de la base (la serif) pesaba de más. */ body[data-diseno="aurora"] .lugar h3 { font-size: 1.4rem; } body[data-diseno="aurora"] .vestimenta { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; color: var(--aurora-texto); } body[data-diseno="aurora"] .boton, body[data-diseno="aurora"] .opcion { border-radius: 980px; border-color: rgba(0, 0, 0, .1); letter-spacing: .04em; font-weight: 600; } body[data-diseno="aurora"] .opcion[aria-pressed="true"], body[data-diseno="aurora"] .enviar, body[data-diseno="aurora"] .boton:hover { background: linear-gradient(100deg, var(--acento-hondo), var(--aurora-rosa-hondo), var(--aurora-morado-hondo)); border-color: transparent; color: #fff; } body[data-diseno="aurora"] .enviar { border-radius: 980px; font-weight: 600; letter-spacing: .1em; box-shadow: 0 14px 30px -12px var(--aurora-morado); } body[data-diseno="aurora"] .campo { border-radius: 14px; background: rgba(255, 255, 255, .8); } body[data-diseno="aurora"] .gracias { font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: -.02em; } body[data-diseno="aurora"] .galeria-foto { border-radius: 24px; overflow: hidden; background: transparent; } body[data-diseno="aurora"] .galeria img, body[data-diseno="aurora"] .galeria-foto:first-child img { aspect-ratio: 4 / 5; border-radius: 24px; } body[data-diseno="aurora"] .pie { position: relative; z-index: 2; } body[data-diseno="aurora"] #pieTitulo { font-family: var(--sans); font-weight: 600; letter-spacing: -.04em; font-size: 2rem; } body[data-diseno="aurora"] .musica { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .8); } /* ═══════════════════════════════════════════════════════════════════ CINE Una sala oscura: grano de película, franjas negras, créditos en mayúsculas espaciadas y el oro (o el color) de su paleta. */ body[data-diseno="cine"] { background: var(--cine-fondo); color: var(--cine-texto); font-weight: 300; } body[data-diseno="cine"]::before { mix-blend-mode: screen; opacity: .55; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="cine"]::before { animation: grano .9s steps(5) infinite; } @keyframes grano { 0% { background-position: 0 0; } 20% { background-position: -40px 18px; } 40% { background-position: 22px -30px; } 60% { background-position: -14px 44px; } 80% { background-position: 36px 8px; } 100% { background-position: 0 0; } } } body[data-diseno="cine"] #invitacion::before, body[data-diseno="cine"] .sobre-carta::before { display: none; } /* ─── la apertura: título de película; al tocar, las franjas negras se abren */ body[data-diseno="cine"] .sobre { background: transparent; } body[data-diseno="cine"] .sobre::before, body[data-diseno="cine"] .sobre::after { content: ''; position: absolute; left: 0; right: 0; height: 50.5%; background: var(--cine-fondo); z-index: -1; transition: transform 1.3s cubic-bezier(.77,0,.18,1) .35s; } body[data-diseno="cine"] .sobre::before { top: 0; } body[data-diseno="cine"] .sobre::after { bottom: 0; } body[data-diseno="cine"] .sobre.abriendo::before { transform: translateY(-100%); } body[data-diseno="cine"] .sobre.abriendo::after { transform: translateY(100%); } body[data-diseno="cine"] .sobre-solapa, body[data-diseno="cine"] .sobre-sello { display: none; } /* Lo que cabe de verdad (el sobre lleva 1.5rem de cada lado): con 90vw, 351 px en un hueco de 342 (28-sep-2026). */ body[data-diseno="cine"] .sobre-carta { width: min(26rem, calc(100vw - 3rem)); min-height: 0; padding: 0; background: none; box-shadow: none; transition: opacity .45s ease, transform .9s ease; } body[data-diseno="cine"] .sobre.abriendo .sobre-carta { opacity: 0; transform: scale(.96); } body[data-diseno="cine"] .sobre-para { color: var(--cine-texto-3); letter-spacing: .4em; text-indent: .4em; margin-bottom: 2rem; } body[data-diseno="cine"] .sobre-titulo { font-family: 'Montserrat', var(--sans); font-weight: 600; text-transform: uppercase; color: var(--cine-texto); letter-spacing: .28em; text-indent: .28em; font-size: calc(clamp(1.5rem, 7.5vw, 2.4rem) * var(--escala, 1)); line-height: 1.35; margin-bottom: 1.4rem; } body[data-diseno="cine"] .sobre-fecha { color: var(--acento-2); letter-spacing: .3em; text-indent: .3em; } body[data-diseno="cine"] .sobre-abrir { color: var(--cine-texto); border-color: rgba(255, 255, 255, .35); letter-spacing: .26em; text-indent: .26em; transition: opacity .4s ease, background .4s ease, color .4s ease; } body[data-diseno="cine"] .sobre-abrir::before { content: '▶ '; letter-spacing: 0; color: var(--acento-2); } body[data-diseno="cine"] .sobre-abrir:hover { background: var(--cine-texto); color: var(--cine-fondo); border-color: var(--cine-texto); } /* ─── la portada: la foto a sangre entre franjas negras, y el título como de estreno */ body[data-diseno="cine"] .portada.con-foto { color: var(--cine-texto); } body[data-diseno="cine"] .portada::before, body[data-diseno="cine"] .portada::after { content: ''; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); height: 11svh; background: var(--cine-fondo); z-index: 1; } body[data-diseno="cine"] .portada::before { top: 0; } body[data-diseno="cine"] .portada::after { bottom: 0; } body[data-diseno="cine"] .portada-fondo { background: var(--cine-fondo); } body[data-diseno="cine"] .portada-fondo img { filter: saturate(1.1) contrast(1.08); } body[data-diseno="cine"] .portada .monograma { border-color: rgba(255, 255, 255, .35); color: var(--cine-texto); font-family: 'Montserrat', var(--sans); font-size: var(--letra-etiqueta); letter-spacing: .3em; } body[data-diseno="cine"] .portada .portada-etiqueta { color: var(--acento-2); letter-spacing: .48em; text-indent: .48em; } body[data-diseno="cine"] .portada .portada-titulo { font-family: 'Montserrat', var(--sans); font-weight: 600; text-transform: uppercase; font-size: calc(clamp(2rem, 10vw, 4.4rem) * var(--escala, 1)); line-height: 1.12; letter-spacing: .2em; text-indent: .2em; color: var(--cine-texto); } body[data-diseno="cine"] .portada .portada-frase { font-family: var(--serif); font-style: italic; color: var(--cine-texto-2); } body[data-diseno="cine"] .portada .fecha-grande { font-family: 'Montserrat', var(--sans); font-weight: 600; font-size: 1.25rem; letter-spacing: .4em; color: var(--cine-texto); } body[data-diseno="cine"] .portada .fecha-grande i { background: var(--acento-2); } body[data-diseno="cine"] .portada .fecha-texto { color: var(--cine-texto-2); letter-spacing: .34em; text-indent: .34em; } body[data-diseno="cine"] .portada .scroll-pista { z-index: 2; bottom: 13svh; } /* Sobre la foto, la letra chica en blanco y no en el color de la paleta (1-oct-2026): "MI BAUTIZO" en rosa delgado sobre unas rosas blancas no se leía. Sin foto, la sala oscura se queda con su oro. */ body[data-diseno="cine"] .portada.con-foto .portada-etiqueta { color: var(--sobre-foto); } body[data-diseno="cine"] .portada.con-foto :is(.portada-frase, .fecha-texto) { color: var(--sobre-foto-2); } /* Sin foto de portada, la sala se queda oscura y el título manda. */ body[data-diseno="cine"] .portada:not(.con-foto) .portada-titulo { color: var(--cine-texto); } /* ─── las secciones: créditos de película */ body[data-diseno="cine"] .seccion { padding: 3.6rem 0; } body[data-diseno="cine"] .regla::before, body[data-diseno="cine"] .regla::after { background: linear-gradient(to right, transparent, rgba(255, 255, 255, .22)); } body[data-diseno="cine"] .regla::before { background: linear-gradient(to left, transparent, rgba(255, 255, 255, .22)); } body[data-diseno="cine"] .regla i { background: var(--acento-2); } body[data-diseno="cine"] .titulo-seccion { font-family: 'Montserrat', var(--sans); font-weight: 600; color: var(--acento-2); letter-spacing: .44em; text-indent: .44em; font-size: var(--letra-etiqueta); } body[data-diseno="cine"] .parrafo { color: var(--cine-texto-2); } body[data-diseno="cine"] .padrino dt { color: var(--cine-texto-3); font-family: 'Montserrat', var(--sans); letter-spacing: .32em; text-indent: .32em; } body[data-diseno="cine"] .padrino dd { color: var(--cine-texto); font-size: 1.45rem; } body[data-diseno="cine"] .itinerario .hora { color: var(--acento-2); font-family: 'Montserrat', var(--sans); font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; } body[data-diseno="cine"] .itinerario .que { color: var(--cine-texto); } body[data-diseno="cine"] .itinerario .donde { color: var(--cine-texto-3); } body[data-diseno="cine"] .itinerario .punto::after { background: var(--cine-fondo); border-color: var(--acento-2); } body[data-diseno="cine"] .itinerario li.encendido .punto::after { background: var(--acento-2); } body[data-diseno="cine"] .itinerario li::before { background: linear-gradient(var(--acento-2), rgba(255, 255, 255, .15)); } /* La hora en Montserrat espaciada no cabía en la columna de 3.2rem de la base: "17:30" se partía en "17:3" y "0" (en el celular y en la compu; lo vio la medición de letras del 29-sep-2026, que busca palabras partidas). Más ancha, y la línea del día se corre con ella (la cuenta de siempre: columna + hueco + medio ícono). */ body[data-diseno="cine"] .itinerario li { grid-template-columns: 4.4rem 2.5rem 1fr; } body[data-diseno="cine"] .itinerario li::before { left: calc(4.4rem + .75rem + 1.25rem - .5px); } body[data-diseno="cine"] .cuenta-dato b { font-family: 'Montserrat', var(--sans); font-weight: 600; color: var(--cine-texto); letter-spacing: .04em; } body[data-diseno="cine"] .cuenta-dato span { color: var(--acento-2); } body[data-diseno="cine"] .cuenta-dato + .cuenta-dato::before { background: rgba(255, 255, 255, .18); } body[data-diseno="cine"] .cuenta-ya { color: var(--acento-2); } body[data-diseno="cine"] .lugar, body[data-diseno="cine"] .confirmar, body[data-diseno="cine"] .pase { background: var(--cine-fondo-2); border-color: rgba(255, 255, 255, .1); backdrop-filter: none; } body[data-diseno="cine"] .lugar h3, body[data-diseno="cine"] .confirmar-saludo, body[data-diseno="cine"] .pase-nombre, body[data-diseno="cine"] .vestimenta, body[data-diseno="cine"] .contador-n, body[data-diseno="cine"] .tienda-numero, body[data-diseno="cine"] .datos-transferencia dd { color: var(--cine-texto); } body[data-diseno="cine"] .lugar p, body[data-diseno="cine"] .nota-chica, body[data-diseno="cine"] .etiqueta { color: var(--cine-texto-3); } body[data-diseno="cine"] .boton, body[data-diseno="cine"] .opcion, body[data-diseno="cine"] .contador-btn { color: var(--cine-texto); border-color: rgba(255, 255, 255, .22); } /* El oro de los botones de la sala: el acento claro de la paleta; en la noche ese es oscuro (4.37 con la letra negra), así que ahí va el acento (8.6). */ body[data-diseno="cine"] { --cine-boton: var(--acento-2); } body[data-diseno="cine"][data-paleta="noche"] { --cine-boton: var(--acento); } body[data-diseno="cine"] .boton:hover, body[data-diseno="cine"] .opcion[aria-pressed="true"], body[data-diseno="cine"] .enviar { background: var(--cine-boton); border-color: var(--cine-boton); color: var(--cine-fondo); } body[data-diseno="cine"] .campo { background: var(--cine-fondo); border-color: rgba(255, 255, 255, .18); color: var(--cine-texto); } body[data-diseno="cine"] .gracias { color: var(--acento-2); } body[data-diseno="cine"] .link-boton { color: var(--cine-texto-3); } /* La galería: una tira de película, con sus perforaciones arriba y abajo. */ body[data-diseno="cine"] .galeria { background: var(--cine-fondo-2); padding-top: 1.6rem; padding-bottom: 1.6rem; position: relative; } body[data-diseno="cine"] .galeria::before, body[data-diseno="cine"] .galeria::after { content: ''; position: absolute; left: 0; width: 200%; height: .55rem; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 .9rem, transparent .9rem 1.8rem); } body[data-diseno="cine"] .galeria::before { top: .5rem; } body[data-diseno="cine"] .galeria::after { bottom: .5rem; } body[data-diseno="cine"] .galeria img, body[data-diseno="cine"] .galeria-foto:first-child img { aspect-ratio: 16 / 11; } body[data-diseno="cine"] .galeria-foto { flex-basis: min(82vw, 24rem); background: var(--cine-fondo); } body[data-diseno="cine"] .pie-marca { color: var(--cine-texto-3); } body[data-diseno="cine"] #pieTitulo { font-family: 'Montserrat', var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: 1.1rem; color: var(--cine-texto); } body[data-diseno="cine"] .musica { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); } body[data-diseno="cine"] .musica-onda { background: var(--acento-2); } /* Lo que aparece al bajar, en cine, entra desde el desenfoque, como un enfoque de cámara. */ body[data-diseno="cine"] .aparece > * { filter: blur(8px); transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s ease; } body[data-diseno="cine"] .aparece.visible > * { filter: none; } /* Confirmar y el pase, nunca borrosos: quien toca "Confirmar asistencia" llegaba a un formulario desenfocado hasta segundo y medio (se midió en la auditoría del 27-sep). Llegan con el deslizamiento de todos, sin el enfoque. */ body[data-diseno="cine"] #secConfirmar.aparece > *, body[data-diseno="cine"] #secPase.aparece > * { filter: none; } /* ═══════════════════════════════════════════════════════════════════ pantallas grandes */ @media (min-width: 48rem) { body[data-diseno="editorial"] .portada-fondo { height: 78svh; } body[data-diseno="editorial"] .padrinos { grid-template-columns: 1fr 1fr; } body[data-diseno="aurora"] .seccion { padding: 3rem 2.4rem; } } @media (prefers-reduced-motion: reduce) { .cinta-pista, .aurora i, body[data-diseno="aurora"] .portada-fondo { animation: none !important; } body[data-diseno="cine"] .aparece > * { filter: none; } } /* ═══════════════════════════════════════════════════════════════════ LO QUE SIGUE AL DEDO invitacion.js → armarMovimiento: animaciones en pausa que el scroll va moviendo. Aquí solo va cómo se ven las escenas que ese movimiento necesita. Nada de esto existe con "menos movimiento": el guion no lo arma y la invitación se queda como siempre. */ /* ─── la fecha que llega desde enorme: una escena fija, pantalla y media de scroll */ /* Lo fijo mide la pantalla GRANDE (lvh): en el iPhone la barra de Safari se esconde al bajar, la pantalla crece, y con svh quedaba una franja de la sección siguiente debajo del círculo de color. */ .fecha-escena { position: relative; z-index: 2; height: 230vh; height: 230lvh; width: 100vw; margin-left: calc(50% - 50vw); } .fecha-escena-fija { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; } .fecha-capa { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.4rem; text-align: center; background: var(--papel); color: var(--tinta); } .fecha-capa-color { background: var(--boton-fondo); color: var(--boton-texto); } .fecha-escena-antes, .fecha-escena-dia { margin: 0; font-family: var(--sans); font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; } .fecha-escena-num { margin: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-size: clamp(3.8rem, 19vw, 11rem); font-variant-numeric: lining-nums tabular-nums; } .fecha-escena-num i { width: .1em; height: .1em; margin: 0 .16em; border-radius: 50%; background: currentColor; opacity: .55; flex: none; } body[data-diseno="editorial"] .fecha-capa { justify-items: start; text-align: left; padding: 0 1.75rem; } body[data-diseno="editorial"] .fecha-capa-color { background: var(--tinta); color: var(--papel); } body[data-diseno="editorial"] .fecha-escena-num { font-style: italic; justify-content: flex-start; transform-origin: 0 50%; } body[data-diseno="editorial"] .fecha-escena-num i { border-radius: 0; width: .45em; height: 1px; opacity: 1; } body[data-diseno="editorial"] .fecha-escena-antes, body[data-diseno="editorial"] .fecha-escena-dia { text-indent: 0; } body[data-diseno="aurora"] .fecha-capa-base { background: transparent; color: var(--aurora-texto); } body[data-diseno="aurora"] .fecha-capa-color { color: var(--aurora-texto); background: linear-gradient(135deg, var(--aurora-naranja), var(--aurora-rosa) 40%, var(--aurora-morado) 75%, var(--aurora-cielo)); } body[data-diseno="aurora"] .fecha-escena-num { font-family: var(--sans); font-weight: 700; letter-spacing: -.06em; } body[data-diseno="cine"] .fecha-capa-base { background: var(--cine-fondo); color: var(--cine-texto); } body[data-diseno="cine"] .fecha-capa-color { background: var(--cine-boton); color: var(--cine-fondo); } body[data-diseno="cine"] .fecha-escena-num { font-family: 'Montserrat', var(--sans); font-weight: 600; letter-spacing: .06em; font-size: clamp(3rem, 15vw, 9rem); } body[data-diseno="cine"] .fecha-escena-antes, body[data-diseno="cine"] .fecha-escena-dia { font-family: 'Montserrat', var(--sans); letter-spacing: .48em; text-indent: .48em; } /* ─── la historia que se enciende palabra por palabra (la opacidad la mueve el guion) */ .palabra-luz { transition: none; } /* ─── la galería que corre de lado (Editorial, Aurora, Cine, Fiesta), fija mientras se baja. La sección mide lo que corre la tira, (fotos − 1) × (foto + hueco), con tope de dos pantallas, más una pantalla. */ #secGaleria.galeria-fija { --foto: min(78vw, 22rem); --hueco: .9rem; position: relative; padding: 0; border-bottom: 0; /* Lo que se baja mientras corre, a lo más DOS pantallas: con 12 fotos eran ~3,500 px de bajar viendo solo fotos (Rod, en la llamada del 1-oct, 49:03: "no te deja avanzar hasta que ves todas las fotos"). Con pocas, las fotos van al paso del dedo, como antes; con muchas, corren más rápido. */ height: calc(100vh + min((var(--n, 3) - 1) * (var(--foto) + var(--hueco)), 200vh)); height: calc(100lvh + min((var(--n, 3) - 1) * (var(--foto) + var(--hueco)), 200lvh)); } #secGaleria.galeria-fija[data-n="3"] { --n: 3; } #secGaleria.galeria-fija[data-n="4"] { --n: 4; } #secGaleria.galeria-fija[data-n="5"] { --n: 5; } #secGaleria.galeria-fija[data-n="6"] { --n: 6; } #secGaleria.galeria-fija[data-n="7"] { --n: 7; } #secGaleria.galeria-fija[data-n="8"] { --n: 8; } #secGaleria.galeria-fija[data-n="9"] { --n: 9; } #secGaleria.galeria-fija[data-n="10"] { --n: 10; } #secGaleria.galeria-fija[data-n="11"] { --n: 11; } #secGaleria.galeria-fija[data-n="12"] { --n: 12; } #secGaleria.galeria-fija .regla { position: absolute; top: 2.2rem; left: 0; right: 0; } /* La columna mide lo que la escena (minmax(0, 1fr)): con la de siempre, la tira (width: max-content) la estiraba a 2,301 px, y el título, que vive en la misma columna, se centraba en ella, en x = 1,100: en Aurora y Cine no se veía nunca (lo vio el ayudante de Déco; lo mide revisar_ancho.mjs, 28-sep-2026). La tira se sigue saliendo de su columna, a propósito: la escena la recorta y el guion la corre. */ #secGaleria.galeria-fija .galeria-escena { position: sticky; top: 0; height: 100vh; height: 100lvh; width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.8rem; overflow: hidden; } #secGaleria.galeria-fija .titulo-seccion { margin: 0; padding: 0 1.5rem; } #secGaleria.galeria-fija .galeria { display: flex; gap: var(--hueco); width: max-content; margin: 0; overflow: visible; scroll-snap-type: none; padding-left: calc((100vw - var(--foto)) / 2); padding-right: calc((100vw - var(--foto)) / 2); } #secGaleria.galeria-fija .galeria-foto { flex: 0 0 var(--foto); animation: none; } @media (min-width: 48rem) { #secGaleria.galeria-fija { --foto: min(42vw, 30rem); --hueco: 1.4rem; } } body[data-diseno="editorial"] #secGaleria.galeria-fija .titulo-seccion { padding: 0 max(1.75rem, calc(50vw - 17rem)); } body[data-diseno="aurora"] #secGaleria.galeria-fija { margin: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-diseno="cine"] #secGaleria.galeria-fija .galeria { padding-top: 1.6rem; padding-bottom: 1.6rem; } /* Fija en la pantalla, la película usa cuadros verticales: con los apaisados quedaba una tira delgada en medio de una pantalla negra. */ body[data-diseno="cine"] #secGaleria.galeria-fija .galeria img, body[data-diseno="cine"] #secGaleria.galeria-fija .galeria-foto:first-child img { aspect-ratio: 4 / 5; } /* ─── el sobre del clásico: flota, se abre en 3D, suelta chispas y vuela hacia quien lo abrió */ @media (prefers-reduced-motion: no-preference) { body[data-diseno="clasico"] .sobre { background: transparent; perspective: 1400px; } body[data-diseno="clasico"] .sobre::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 120% 85% at 50% 38%, var(--papel-2) 0%, var(--papel) 58%, var(--linea) 150%); transition: opacity .9s ease; } body[data-diseno="clasico"] .sobre-carta { animation: flotar-sobre 6s ease-in-out infinite; transform-style: preserve-3d; } @keyframes flotar-sobre { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-9px) rotateX(4deg); } } body[data-diseno="clasico"] .sobre.abriendo .sobre-carta { animation: none; } /* La solapa se abre DE VERDAD en 3D: con perspectiva, su pico viene hacia ti antes de voltearse, y se queda abierta arriba (se ve su cara de adentro) en vez de desaparecer. */ body[data-diseno="clasico"] .sobre-carta { perspective: 900px; } body[data-diseno="clasico"] .sobre-solapa { backface-visibility: visible; } body[data-diseno="clasico"] .sobre-abrir { transition: opacity .35s ease, background .4s ease, color .4s ease, border-color .4s ease; } body[data-diseno="clasico"] .sobre.volando::before { opacity: 0; } body[data-diseno="clasico"] .sobre.volando .sobre-carta { transform: translateY(-1rem) scale(2.9); opacity: 0; filter: blur(5px); transition: transform .95s cubic-bezier(.7,0,.3,1), opacity .8s ease .12s, filter .8s ease; } } /* ═══════════════════════════════════════════════════════════════════ MÁS LOCURA (27-sep-2026) Leo, al ver la landing: "así quiero sentir también las invitaciones, como una locura". */ /* ─── los momentos del día con su ícono, que se dibuja solo al encenderse */ .itinerario li { grid-template-columns: 3.2rem 2.5rem 1fr; align-items: start; } .itinerario .hora { padding-top: .5rem; } .itinerario .que { padding-top: .55rem; } .itinerario .punto { height: 2.5rem; display: grid; place-items: center; } .itinerario .punto::after { display: none; } .icono-momento { width: 2.5rem; height: 2.5rem; padding: .56rem; border-radius: 50%; overflow: visible; position: relative; z-index: 1; background: var(--papel); border: 1px solid var(--acento-2); fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: background .6s ease .15s, border-color .6s ease .15s, stroke .6s ease .15s, transform .7s cubic-bezier(.34,1.5,.5,1) .15s; } .icono-momento * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) .3s; } .itinerario li.encendido .icono-momento { background: var(--acento); border-color: var(--acento); stroke: var(--papel-2); transform: scale(1.1); } .itinerario li.encendido .icono-momento * { stroke-dashoffset: 0; } /* Con "menos movimiento", los íconos ya están dibujados: nada se traza solo. */ @media (prefers-reduced-motion: reduce) { .icono-momento, .icono-momento * { transition: none; } .icono-momento * { stroke-dashoffset: 0; } } body[data-diseno="editorial"] .icono-momento { border-color: var(--tinta); stroke: var(--tinta); border-radius: 0; } body[data-diseno="editorial"] .itinerario li.encendido .icono-momento { background: var(--tinta); border-color: var(--tinta); stroke: var(--papel); } body[data-diseno="aurora"] .icono-momento { background: var(--vidrio-aviso); border-color: transparent; stroke: var(--aurora-morado); } body[data-diseno="aurora"] .itinerario li.encendido .icono-momento { background: linear-gradient(135deg, var(--aurora-naranja), var(--aurora-rosa) 45%, var(--aurora-morado)); stroke: var(--papel-2); } body[data-diseno="cine"] .icono-momento { background: var(--cine-fondo); border-color: var(--acento-2); stroke: var(--acento-2); } body[data-diseno="cine"] .itinerario li.encendido .icono-momento { background: var(--acento-2); border-color: var(--acento-2); stroke: var(--cine-fondo); } /* ─── los avisos que flotan sobre la portada (como los de la landing) */ .aviso-portada { position: absolute; z-index: 4; display: flex; align-items: center; gap: .6rem; /* width: max-content (28-sep-2026): el acomodo lo mueve con left, y su ancho se ajustaba a lo que quedaba hasta la orilla de la portada: en la compu, movido a la derecha, se apretaba y cortaba su texto ("Faltan…"). Lo vieron los ayudantes de Fiesta, Minimal y Polaroid, que lo arreglaron cada uno en su sección. Con su tope de siempre. */ width: max-content; max-width: min(15.5rem, 64vw); padding: .5rem .95rem .5rem .5rem; border-radius: 18px; text-align: left; background: var(--vidrio-aviso); color: var(--texto-aviso); box-shadow: var(--sombra-aviso), inset 0 0 0 1px var(--vidrio-aviso-2); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); font-family: 'Inter', var(--sans); pointer-events: none; } .aviso-portada-icono { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--verde-aviso); } .aviso-b .aviso-portada-icono { background: var(--naranja-aviso); } .aviso-portada-icono .icono-momento { width: 1.25rem; height: 1.25rem; padding: 0; border: 0; background: none; stroke: var(--papel-2); stroke-width: 2; } .aviso-portada-icono .icono-momento * { stroke-dasharray: none; stroke-dashoffset: 0; } /* Con la letra de la escala (29-sep-2026) los dos renglones caben en el alto del ícono (renglón de 1.2): el aviso mide lo que medía antes (49.6 px en el celular). A 1.25 medían 34 px y el aviso 50 justos, y el acomodo, que cuenta en px enteros, apilaba el segundo aviso a 7.7 px del primero en vez de 8 (revisar_portadas lo cachó en Polaroid). */ .aviso-portada-textos { display: grid; min-width: 0; line-height: 1.2; } .aviso-portada b { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aviso-portada small { font-size: var(--letra-etiqueta); font-weight: 400; color: var(--texto-aviso-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mientras se acomodan no se ven; y el que no cabe en ningún hueco, no sale (invitacion.js → ponerAvisos). */ .aviso-portada.por-acomodar { visibility: hidden; } .aviso-portada.sin-lugar { display: none; } /* Y la rayita de "baja", si con la portada llena cruzaría un texto (nombres y frase largos en un celular chico). */ .portada .scroll-pista.sin-lugar { display: none; } /* Dónde flotan, DE DISEÑO: es el primer lugar que prueba cada aviso. Si ahí se encima con algo (depende de lo que trae cada invitación: sin foto, en Aurora, los nombres suben justo a la altura del de los días), ponerAvisos lo cambia a otro hueco o lo quita. herramientas/revisar_portadas.mjs lo mide en todas las combinaciones. */ /* Apilados a la izquierda, como las notificaciones del iPhone: al centro está el monograma, y su altura cambia con lo que trae cada invitación (sin foto sube). Con uno a cada lado, el de la derecha le tapaba la orilla de arriba (se vio a 390 px, con foto y sin ella). En Editorial no hay monograma: van uno a cada lado de la foto. */ .aviso-a { left: .9rem; top: 11svh; } .aviso-b { left: .9rem; top: calc(11svh + 3.8rem); } body[data-diseno="editorial"] .aviso-a { top: 11svh; } body[data-diseno="editorial"] .aviso-b { left: auto; right: .9rem; top: 50svh; } body[data-diseno="aurora"] .aviso-a { left: .2rem; top: 7.5rem; } body[data-diseno="aurora"] .aviso-b { left: auto; right: .2rem; top: 19rem; } body[data-diseno="cine"] .aviso-portada { background: var(--vidrio-oscuro); color: var(--cine-texto); box-shadow: var(--sombra-aviso), inset 0 0 0 1px var(--linea); } body[data-diseno="cine"] .aviso-portada small { color: var(--cine-texto-2); } body[data-diseno="cine"] .aviso-a { top: 13svh; } body[data-diseno="cine"] .aviso-b { top: calc(13svh + 3.8rem); } /* En un celular chico (320 px, un iPhone SE) los dos avisos se enciman entre sí y tapan el monograma: queda el de para quién es; los días ya están en la cuenta regresiva. En Aurora caben los dos (van en las esquinas de la tarjeta). Y en Cine la rayita de "baja" cruzaba la hora de la fecha, que ahí parte en dos renglones. */ @media (max-width: 360px) { body:not([data-diseno="aurora"]) .aviso-b { display: none; } body[data-diseno="cine"] .portada .scroll-pista { display: none; } } /* En pantalla grande, a los lados de la columna: al centro está el monograma (en Cine, el aviso de los días le rozaba la orilla). En Aurora se quedan montados sobre la tarjeta, como los teléfonos de la landing. */ @media (min-width: 48rem) { .aviso-a { left: -7rem; } .aviso-b { left: auto; right: -7rem; top: 19.5svh; } body[data-diseno="aurora"] .aviso-a { left: -3rem; } body[data-diseno="aurora"] .aviso-b { right: -3rem; } } @media (prefers-reduced-motion: no-preference) { .aviso-portada { animation: flotar-aviso 6s ease-in-out infinite; } .aviso-b { animation-duration: 7s; animation-delay: -2.5s; } @keyframes flotar-aviso { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } } /* ─── el botón que acompaña: "Confirmar asistencia", pegado abajo */ .confirmar-flotante { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 80; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.35rem .85rem 1.1rem; border: 0; border-radius: 980px; font: 600 1rem/1 'Inter', var(--sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; color: var(--boton-texto); background: var(--boton-fondo); box-shadow: var(--sombra-aviso); transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.34,1.3,.5,1), opacity .3s ease; } .confirmar-flotante.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .confirmar-flotante .icono-momento { width: 1.15rem; height: 1.15rem; padding: 0; border: 0; background: none; stroke: currentColor; stroke-width: 2; } .confirmar-flotante .icono-momento * { stroke-dasharray: none; stroke-dashoffset: 0; } .confirmar-flotante:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 3px; } body[data-diseno="editorial"] .confirmar-flotante { background: var(--tinta); color: var(--papel); border-radius: 0; } body[data-diseno="aurora"] .confirmar-flotante { background: linear-gradient(100deg, var(--acento-hondo), var(--aurora-rosa-hondo), var(--aurora-morado-hondo)); color: #fff; } body[data-diseno="cine"] .confirmar-flotante { background: var(--cine-boton); color: var(--cine-fondo); } @media (prefers-reduced-motion: no-preference) { .confirmar-flotante.visible { animation: llamar 3.2s ease-in-out 1s infinite; } @keyframes llamar { 0%, 70%, 100% { box-shadow: var(--sombra-aviso), 0 0 0 0 var(--vidrio-aviso-2); } 85% { box-shadow: var(--sombra-aviso), 0 0 0 10px transparent; } } } @media (prefers-reduced-motion: reduce) { .confirmar-flotante { transition: none; } } /* ─── dos franjas de fotos que corren en sentidos contrarios Girada y un 5% más grande, la cinta se sale de la pantalla por los lados (a propósito: cruza de orilla a orilla). Su marco, del ancho de la pantalla, la recorta ahí. Sin él iba de -18 a 408 en un celular de 390 y la página se podía arrastrar de lado (revisar_ancho.mjs, 28-sep-2026). Solo "clip" (sin hidden de respaldo): hidden volvería al marco una caja que se desplaza, y las esquinas giradas, que se asoman arriba y abajo, le darían su propio scroll. */ .cinta-fotos-marco { width: 100vw; margin: 1.2rem 0 1.2rem calc(50% - 50vw); overflow-x: clip; } .cinta-fotos { position: relative; z-index: 2; padding: .8rem 0; display: grid; gap: .8rem; overflow: hidden; transform: rotate(-2.5deg) scale(1.05); } .cinta-fotos-pista { display: flex; gap: .8rem; width: max-content; padding-right: .8rem; animation: correr-fotos 48s linear infinite; } .cinta-fotos-pista.al-reves { animation-direction: reverse; animation-duration: 56s; } .cinta-fotos img { display: block; width: clamp(8rem, 33vw, 14rem); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: var(--sombra-aviso); } .cinta-fotos:hover .cinta-fotos-pista { animation-play-state: paused; } @keyframes correr-fotos { to { transform: translateX(-50%); } } /* Clásico: fotos impresas, con su marco blanco. Editorial: a sangre, en blanco y negro. Cine: tira de película. */ body[data-diseno="clasico"] .cinta-fotos img { border-radius: 3px; border: 6px solid var(--papel-2); } body[data-diseno="editorial"] .cinta-fotos img { border-radius: 0; box-shadow: none; filter: grayscale(1) contrast(1.05); } body[data-diseno="aurora"] .cinta-fotos img { border-radius: 24px; } body[data-diseno="cine"] .cinta-fotos img { border-radius: 4px; filter: saturate(1.1) contrast(1.05); } /* ─── la barra de avance, arriba de todo */ .avance-invitacion { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 91; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--acento-2), var(--acento)); pointer-events: none; } body[data-diseno="aurora"] .avance-invitacion { background: linear-gradient(90deg, var(--aurora-naranja), var(--aurora-rosa), var(--aurora-morado), var(--aurora-cielo)); } body[data-diseno="cine"] .avance-invitacion { background: var(--acento-2); } /* ─── las chispitas al tocar y los flashes del cine */ .chispitas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 94; } .flash { position: absolute; z-index: 3; width: 7rem; height: 7rem; margin: -3.5rem 0 0 -3.5rem; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, var(--blanco-flash) 0%, var(--blanco-flash-2) 28%, transparent 68%); mix-blend-mode: screen; } .portada-titulo { position: relative; } /* ─── el sobre con foto: portada de revista (Editorial) y póster de estreno (Cine) */ .sobre-foto { display: none; } /* La foto va FIJA a la pantalla, no absoluta dentro del sobre: se acerca despacio (acercar: crece más que la pantalla), y como el sobre se puede bajar (overflow-y: auto, para el celular acostado) ese crecimiento le daba barras de desplazamiento a los dos lados durante los primeros segundos: en la compu con mouse se veían, y en el celular el sobre se podía arrastrar de lado (visto en un navegador de verdad, 28-sep-2026; la captura sin ventana esconde las barras). */ body[data-diseno="editorial"] .sobre-foto, body[data-diseno="cine"] .sobre-foto { display: block; position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } body[data-diseno="editorial"] .sobre.con-foto .sobre-carta, body[data-diseno="editorial"] .sobre.con-foto .sobre-abrir, body[data-diseno="cine"] .sobre.con-foto .sobre-carta, body[data-diseno="cine"] .sobre.con-foto .sobre-abrir { position: relative; z-index: 2; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="editorial"] .sobre-foto, body[data-diseno="cine"] .sobre-foto { animation: foto-sobre 1.4s ease both, acercar 18s cubic-bezier(.22,.61,.36,1) both; } @keyframes foto-sobre { from { opacity: 0; } to { opacity: 1; } } } /* Editorial: la portada de la revista. Las líneas abajo, sobre un velo, en claro. "safe": abajo, pero si no caben, desde arriba. Con "end" a secas lo que no cabía se salía por ARRIBA, donde no se puede subir a verlo: acostado, con el letrero de ejemplo y nombres largos, "para quién" quedaba debajo del letrero (revisar_portadas --sobre, 28-sep-2026). */ body[data-diseno="editorial"] .sobre.con-foto { align-content: safe end; padding-bottom: 3.2rem; background: var(--tinta); } /* Acostado no hay alto que regalar: el aire de abajo, el de siempre del sobre. */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="editorial"] .sobre.con-foto { padding-bottom: 1.5rem; } } body[data-diseno="editorial"] .sobre.con-foto::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--velo-sobre-arriba) 0%, var(--velo-sobre-medio) 35%, var(--velo-sobre-abajo) 100%); } body[data-diseno="editorial"] .sobre.con-foto .sobre-para { color: var(--sobre-foto-2); border-bottom-color: var(--sobre-foto-linea); } body[data-diseno="editorial"] .sobre.con-foto .sobre-titulo { color: var(--sobre-foto); } body[data-diseno="editorial"] .sobre.con-foto .sobre-fecha { color: var(--sobre-foto-2); } body[data-diseno="editorial"] .sobre.con-foto .sobre-abrir { color: var(--sobre-foto); border-bottom-color: var(--sobre-foto); } body[data-diseno="editorial"] .sobre.con-foto .sobre-abrir:hover { color: var(--sobre-foto-2); } /* Cine: el póster. La foto oscura y en blanco y negro a medias detrás de los créditos; al tocar se apaga y luego se abren las franjas. */ /* Lo oscuro va EN la foto (filtro y viñeta que se funde con el negro de las franjas): con un velo aparte, al tocar el velo se iba antes que la foto y medio segundo se veía la foto a todo brillo, con las franjas escondidas detrás (se vio filmando la apertura). Al tocar: la foto se apaga y luego se abren las franjas. */ body[data-diseno="cine"] .sobre.con-foto .sobre-foto { filter: grayscale(.35) brightness(.42) contrast(1.08); -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 48%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 95% 75% at 50% 48%, #000 45%, transparent 100%); transition: opacity .35s ease; } body[data-diseno="cine"] .sobre.abriendo .sobre-foto { opacity: 0; } @media (prefers-reduced-motion: reduce) { body[data-diseno="cine"] .sobre-foto { transition: none; } } /* ─── los nombres largos se achican hasta caber (invitacion.js → ajustarNombres) En Cine, "ALEJANDRO" y "FERNANDA" se cortaban a la derecha a 390 px (se vio abriendo las 80 de ejemplo). Se prueba de chico a grande: cada clase baja el tamaño un escalón; en Cine, también el espaciado entre letras. */ .portada-titulo.apretado-1, .sobre-titulo.apretado-1 { --escala: .86; } .portada-titulo.apretado-2, .sobre-titulo.apretado-2 { --escala: .74; } .portada-titulo.apretado-3, .sobre-titulo.apretado-3 { --escala: .62; } body[data-diseno="cine"] .portada .portada-titulo.apretado-2, body[data-diseno="cine"] .portada .portada-titulo.apretado-3, body[data-diseno="cine"] .sobre-titulo.apretado-2, body[data-diseno="cine"] .sobre-titulo.apretado-3 { letter-spacing: .1em; text-indent: .1em; } /* (Aquí iba "en el celular, Clásico y Cine llevan UN aviso": el de los días le acababa encima al monograma. Desde que los avisos se acomodan midiendo (invitacion.js → ponerAvisos), llevan los dos, y el que no cabe no sale.) */ /* ═══════════════ MINIMAL (28-sep-2026) — un cartel de galería: mucho aire, líneas de un pixel y los nombres enormes Todo a una rejilla y alineado a la izquierda, casi monocromo (la tinta y su gris), y un solo toque del acento: la línea que se dibuja al abrir, los puntos de la fecha y los números de las secciones. Sin adornos: ni relieve, ni polvo de luz, ni chispas. La apertura: una línea finísima se dibuja de lado a lado y la hoja sube, destapando la portada; los nombres suben desde su renglón. Con "menos movimiento", el sobre se quita y ya está la invitación. */ body[data-diseno="minimal"] { /* El acento como letra chica (los números de las secciones): el hondo, que se lee (5.4 o más); en la noche el hondo es más oscuro que el papel, y ahí va el acento (8.6). */ --minimal-acento-texto: var(--acento-hondo); /* El filete desplazado de la foto: más presente que una línea de rejilla, sin llegar a la tinta. */ --minimal-filete: color-mix(in srgb, var(--tinta) 38%, var(--papel)); /* La columna de todo: el mismo margen a la izquierda en la portada, las secciones y la galería que corre. */ --minimal-orilla: max(1.5rem, calc(50vw - 15rem)); } body[data-diseno="minimal"][data-paleta="noche"] { --minimal-acento-texto: var(--acento); } body[data-diseno="minimal"] #invitacion::before, body[data-diseno="minimal"] .sobre-carta::before { display: none; } body[data-diseno="minimal"] main { counter-reset: minimal; } /* Las palabras que llegan (partirEnLetras): cada una recorta a sus letras, que suben desde abajo de su renglón. Con holgura arriba y abajo (los acentos, la g y la j) que el margen negativo devuelve: nada se mueve de su lugar. */ body[data-diseno="minimal"] .palabra { overflow: hidden; vertical-align: top; padding: .16em .04em .22em; margin: -.16em -.04em -.22em; } /* ─── el sobre: un cartel con su paspartú (la hoja un tono más clara, con un filete a la orilla), el para quién y las iniciales arriba, los nombres con su línea a la altura áurea y "Abrir invitación" como el último renglón */ body[data-diseno="minimal"] .sobre { background: var(--papel); padding: 1rem; gap: 0; /* La hoja nunca se encoge por debajo de lo que trae: si no cabe (el celular acostado), el sobre se baja, desde arriba. Y a lo ancho nunca crece con la palabra más larga (minmax(0, 1fr)): con una columna automática, "Maximiliano" la ensanchaba, ajustarNombres medía contra ese ancho ya crecido y nunca achicaba (a 1024 px se salía del cartel). */ grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; place-content: stretch; justify-items: stretch; align-content: stretch; /* La hoja sube cuando la línea ya se dibujó; al final, la orilla de abajo (un filete) barre la pantalla. */ box-shadow: 0 1px 0 var(--linea); transition: transform .9s cubic-bezier(.76,0,.24,1) .55s, visibility 1.5s; } body[data-diseno="minimal"] .sobre.abriendo { transform: translateY(-100%); } /* La hoja sube entera: la carta no se encoge ni se adelanta (eso es del sobre clásico; aquí abría un hueco entre la hoja y el renglón de "Abrir invitación" justo al tocar). */ body[data-diseno="minimal"] .sobre.abriendo .sobre-carta { transform: none; } body[data-diseno="minimal"] .sobre-solapa { display: none; } /* La hoja es la carta y el renglón de "Abrir invitación" juntos: un tono más clara que el muro, con su filete alrededor. Nunca más ancha que el hueco del sobre (su relleno es de 1rem por lado): si no, el sobre se arrastra de lado. El relleno de los lados va en la carta y no en su cuerpo: ajustarNombres mide contra el ancho del padre de los nombres (con su relleno), y con el relleno en el cuerpo "Maximiliano" cabía en la cuenta y pegaba contra el filete a 320 px. */ body[data-diseno="minimal"] .sobre-carta { width: min(100%, calc(100vw - 2rem)); min-height: 0; padding: 1.4rem 1.4rem 0; box-shadow: none; text-align: left; background: var(--papel-2); border: 1px solid var(--linea); border-bottom: 0; display: flex; flex-direction: column; transition: none; } /* Los nombres, con su línea, a la altura de la proporción áurea del cartel: el aire de arriba mide 1.6 veces el de abajo. */ body[data-diseno="minimal"] .sobre-cuerpo { flex: 1; display: flex; flex-direction: column; } body[data-diseno="minimal"] .sobre-cuerpo::before { content: ''; order: 1; flex: 1.6 1 2rem; } body[data-diseno="minimal"] .sobre-cuerpo::after { content: ''; order: 4; flex: 1 1 0; } /* El renglón de arriba, como el de la portada: para quién a la izquierda, las iniciales a la derecha y su filete de orilla a orilla de la hoja. */ body[data-diseno="minimal"] .sobre-para { order: 0; margin: 0 -1.4rem; padding: 0 4.6rem .9rem 1.4rem; border-bottom: 1px solid var(--linea); font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .16em; text-indent: 0; line-height: 1.5; color: var(--tinta); } /* El sello es la marca de la casa: sus iniciales, arriba a la derecha, sin cera. */ body[data-diseno="minimal"] .sobre-sello { top: 1.4rem; right: 1.4rem; left: auto; width: auto; height: auto; margin: 0; display: block; background: none; clip-path: none; box-shadow: none; text-shadow: none; animation: none; transition: none; font-family: var(--sans); font-size: var(--letra-etiqueta); font-weight: 500; line-height: 1.5; letter-spacing: .16em; color: var(--tinta-2); } body[data-diseno="minimal"] .sobre.abriendo .sobre-sello { opacity: 1; transform: none; } body[data-diseno="minimal"] .sobre-titulo { order: 2; position: relative; margin: 0; padding: 0 0 1.2rem; font-family: var(--sans); font-weight: 300; letter-spacing: -.05em; line-height: .92; color: var(--tinta); font-size: calc(clamp(3rem, 17vw, 5.4rem) * var(--escala, 1)); } /* Cada renglón mide lo que su texto (fit-content): de todo el ancho, el acomodo de los avisos protegía la caja entera y no dejaba poner nada a un lado de los nombres. */ body[data-diseno="minimal"] .sobre-titulo .renglon { display: block; width: fit-content; } /* El filete bajo los nombres va de orilla a orilla de la hoja; la línea de la apertura, encima, en el color del acento, se dibuja de lado a lado de la pantalla. */ body[data-diseno="minimal"] .sobre-titulo::before, body[data-diseno="minimal"] .sobre-titulo::after { content: ''; position: absolute; left: -1.4rem; right: -1.4rem; bottom: 0; height: 1px; background: var(--linea); } body[data-diseno="minimal"] .sobre-titulo::after { left: -2.4rem; right: -2.4rem; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; transition: transform .65s cubic-bezier(.65,0,.35,1); } body[data-diseno="minimal"] .sobre.abriendo .sobre-titulo::after { transform: scaleX(1); } body[data-diseno="minimal"] .sobre-fecha { order: 3; margin: 0; padding: 1rem 0 1.6rem; font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .16em; text-indent: 0; color: var(--tinta-2); } body[data-diseno="minimal"] .sobre-abrir { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; padding: 0 1.4rem; border: 1px solid var(--linea); text-align: left; text-indent: 0; letter-spacing: .16em; font-weight: 500; font-size: var(--letra-boton); color: var(--tinta); background: var(--papel-2); } body[data-diseno="minimal"] .sobre-abrir::after { content: '→'; font-size: 1.1rem; font-weight: 300; letter-spacing: 0; } body[data-diseno="minimal"] .sobre-abrir:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } /* Al tocar se va solo la letra: el renglón es parte de la hoja y sube con ella, con su filete. */ body[data-diseno="minimal"] .sobre.abriendo .sobre-abrir { opacity: 1; color: transparent; background: var(--papel-2); border-color: var(--linea); transition: color .25s ease; } /* ─── la portada: arriba su renglón (qué celebran · las iniciales), los nombres enormes, la foto a sangre hacia la derecha con su filete corrido, y la fecha en números grandes con los puntos del acento */ body[data-diseno="minimal"] .portada { min-height: 100svh; padding: 4.5rem 0 3rem; text-align: left; justify-items: stretch; align-content: start; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiqueta mono" "titulo titulo" "foto foto" "fecha fecha" "texto texto" "frase frase"; } body[data-diseno="minimal"] .portada.con-foto { color: var(--tinta); } body[data-diseno="minimal"] .portada .portada-etiqueta, body[data-diseno="minimal"] .portada .monograma { margin: 0; padding: 0 0 .9rem; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; align-self: stretch; font-family: var(--sans); font-size: var(--letra-etiqueta); font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-indent: 0; text-transform: uppercase; text-shadow: none; } body[data-diseno="minimal"] .portada .portada-etiqueta { grid-area: etiqueta; color: var(--tinta); } body[data-diseno="minimal"] .portada .monograma { grid-area: mono; display: block; width: auto; height: auto; padding-left: 1rem; color: var(--tinta-2); text-align: right; } body[data-diseno="minimal"] .portada .portada-titulo { grid-area: titulo; margin: 2.4rem 0 0; font-family: var(--sans); font-weight: 300; color: var(--tinta); text-shadow: none; text-align: left; font-size: calc(clamp(3.6rem, min(20vw, 22vh), 8.5rem) * var(--escala, 1)); line-height: .9; letter-spacing: -.055em; text-wrap: wrap; } body[data-diseno="minimal"] .portada-titulo .renglon { display: block; width: fit-content; } body[data-diseno="minimal"] .portada-fondo { grid-area: foto; position: relative; inset: auto; left: auto; transform: none; z-index: 1; width: auto; height: auto; aspect-ratio: 4 / 5; max-height: 54svh; margin: 2.6rem calc(50% - 50vw) 0 3.2rem; background: var(--papel-2); /* El filete corrido: un rectángulo del mismo tamaño, más abajo y a la izquierda, que asoma detrás de la foto. */ box-shadow: -.85rem .85rem 0 -1px var(--papel), -.85rem .85rem 0 0 var(--minimal-filete); } body[data-diseno="minimal"] .portada-fondo::after { display: none; } body[data-diseno="minimal"] .portada .portada-frase { grid-area: frase; margin: 2.2rem 0 0; max-width: 21rem; text-align: left; text-wrap: pretty; text-shadow: none; font-family: var(--sans); font-style: normal; font-weight: 300; font-size: var(--letra-lectura-sans); line-height: 1.55; color: var(--tinta-2); } body[data-diseno="minimal"] .portada .fecha-grande { grid-area: fecha; margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linea); justify-content: flex-start; align-items: baseline; gap: .2em; color: var(--tinta); text-shadow: none; font-family: var(--sans); font-weight: 300; font-size: clamp(2.6rem, 13vw, 3.8rem); line-height: 1; letter-spacing: -.045em; } body[data-diseno="minimal"] .portada .fecha-grande i { width: .1em; height: .1em; border-radius: 50%; transform: none; background: var(--acento); } body[data-diseno="minimal"] .portada .fecha-texto { grid-area: texto; margin: .9rem 0 0; text-align: left; text-indent: 0; letter-spacing: .16em; font-weight: 500; font-size: var(--letra-etiqueta); color: var(--tinta-2); text-shadow: none; } body[data-diseno="minimal"] .portada .scroll-pista { display: none; } /* Sin foto: un cartel de puro texto, de alto completo: el renglón arriba, los nombres al centro y la fecha abajo. */ body[data-diseno="minimal"] .portada:not(.con-foto) { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; align-content: stretch; grid-template-areas: "etiqueta mono" "titulo titulo" "foto foto" "frase frase" "fecha fecha" "texto texto"; } body[data-diseno="minimal"] .portada:not(.con-foto) .portada-titulo { align-self: center; margin: 3rem 0; font-size: calc(clamp(3.8rem, min(22vw, 30vh), 9.5rem) * var(--escala, 1)); } body[data-diseno="minimal"] .portada:not(.con-foto) .portada-frase { margin-top: 0; } /* ─── los avisos que flotan: etiquetas planas de galería, sin vidrio ni vaivén */ body[data-diseno="minimal"] .aviso-portada { border-radius: 0; padding: .5rem .9rem .5rem .5rem; background: var(--papel-2); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } body[data-diseno="minimal"] .aviso-portada small { color: var(--tinta-2); } body[data-diseno="minimal"] .aviso-portada-icono { border-radius: 0; background: var(--tinta); } body[data-diseno="minimal"] .aviso-b .aviso-portada-icono { background: var(--acento-hondo); } body[data-diseno="minimal"][data-paleta="noche"] .aviso-b .aviso-portada-icono { background: var(--acento); } body[data-diseno="minimal"] .aviso-portada-icono .icono-momento { stroke: var(--papel-2); } /* Dónde van, de diseño: arriba a la izquierda de la foto, alineados con su orilla; su altura sale de la misma cuenta que pone la foto (el renglón de arriba y los nombres en dos renglones). Sin foto, uno en el aire de arriba de los nombres y otro abajo a la derecha. Si ahí tapan algo, invitacion.js → ponerAvisos los cambia de hueco o los quita. */ body[data-diseno="minimal"] .aviso-a { left: 3.2rem; top: calc(13.5rem + 1.8 * clamp(3.6rem, min(20vw, 22vh), 8.5rem)); } body[data-diseno="minimal"] .aviso-b { left: 3.2rem; top: calc(17.4rem + 1.8 * clamp(3.6rem, min(20vw, 22vh), 8.5rem)); } body[data-diseno="minimal"] .portada:not(.con-foto) .aviso-a { left: 0; top: 8.2rem; } body[data-diseno="minimal"] .portada:not(.con-foto) .aviso-b { left: auto; right: 0; top: calc(100% - 20rem); } /* ─── las secciones: un filete de lado a lado que se dibuja al llegar, el título a la izquierda y su número a la derecha */ body[data-diseno="minimal"] .seccion { position: relative; padding: 3.4rem 0 .8rem; text-align: left; } body[data-diseno="minimal"] .seccion:not([hidden]) { counter-increment: minimal; } body[data-diseno="minimal"] .seccion .regla { display: none; } body[data-diseno="minimal"] .seccion::before { content: ''; display: block; height: 1px; margin-bottom: 1.2rem; background: var(--linea); transform-origin: 0 50%; } body[data-diseno="minimal"] .seccion.aparece::before { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.65,0,.35,1); } body[data-diseno="minimal"] .seccion.aparece.visible::before { transform: scaleX(1); } body[data-diseno="minimal"] .titulo-seccion { position: relative; margin: 0 0 1.9rem; padding-right: 3rem; text-align: left; text-indent: 0; text-transform: none; font-family: var(--sans); font-weight: 300; font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.08; letter-spacing: -.04em; color: var(--tinta); text-wrap: balance; } body[data-diseno="minimal"] .titulo-seccion::after { content: counter(minimal, decimal-leading-zero); position: absolute; right: 0; top: .5rem; font-size: var(--letra-etiqueta); font-weight: 500; line-height: 1; letter-spacing: .1em; color: var(--minimal-acento-texto); font-variant-numeric: tabular-nums; } body[data-diseno="minimal"] .parrafo { margin: 0 0 1rem; max-width: 30rem; text-align: left; font-family: var(--sans); font-weight: 300; font-size: 1.2rem; line-height: 1.65; color: var(--tinta); } body[data-diseno="minimal"] .nota-chica, body[data-diseno="minimal"] .confirmar-limite { text-align: left; color: var(--tinta-2); } body[data-diseno="minimal"] .confirmar-limite { margin: -1.2rem 0 2rem; font-family: var(--sans); font-style: normal; font-size: var(--letra-nota); } /* La cuenta regresiva: cifras grandes y finas, separadas por filetes. */ body[data-diseno="minimal"] .cuenta-caja { gap: 0; } body[data-diseno="minimal"] .cuenta-dato { padding: 0 0 0 .8rem; text-align: left; } body[data-diseno="minimal"] .cuenta-dato:first-child { padding-left: 0; } body[data-diseno="minimal"] .cuenta-dato + .cuenta-dato::before { top: 0; bottom: 0; background: var(--linea); } body[data-diseno="minimal"] .cuenta-dato b { font-family: var(--sans); font-weight: 300; font-size: clamp(2.3rem, 11vw, 3.4rem); letter-spacing: -.05em; } body[data-diseno="minimal"] .cuenta-dato span { margin-top: .7rem; text-indent: 0; letter-spacing: .14em; font-weight: 500; color: var(--tinta-2); } body[data-diseno="minimal"] .cuenta-ya { text-align: left; font-family: var(--sans); font-style: normal; font-weight: 300; font-size: 1.8rem; letter-spacing: -.03em; color: var(--tinta); } /* Los padrinos: una tabla, el papel a la izquierda y los nombres a la derecha. */ body[data-diseno="minimal"] .padrinos { gap: 0; text-align: left; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--linea); } body[data-diseno="minimal"] .padrino { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--linea); } body[data-diseno="minimal"] .padrino dt { margin: .3rem 0 0; font-size: var(--letra-etiqueta); font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-indent: 0; color: var(--tinta-2); } body[data-diseno="minimal"] .padrino dd { font-family: var(--sans); font-weight: 300; font-size: 1.15rem; line-height: 1.4; color: var(--tinta); } /* El día: renglones de una tabla; el filete de cada momento se dibuja al encenderse. */ body[data-diseno="minimal"] .itinerario { border-bottom: 1px solid var(--linea); } body[data-diseno="minimal"] .itinerario li { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 0 1rem; padding: 1.05rem 0; align-items: baseline; } body[data-diseno="minimal"] .itinerario .punto { display: none; } body[data-diseno="minimal"] .itinerario li::before, body[data-diseno="minimal"] .itinerario li:first-child::before, body[data-diseno="minimal"] .itinerario li:last-child::before { display: block; top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: var(--linea); transform: scaleX(0); transform-origin: 0 50%; } body[data-diseno="minimal"] .itinerario li.encendido::before { transform: scaleX(1); } body[data-diseno="minimal"] .itinerario .hora { padding: 0; text-align: left; font-family: var(--sans); font-weight: 300; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.04em; color: var(--tinta); } body[data-diseno="minimal"] .itinerario .que { padding: 0; font-family: var(--sans); font-weight: 400; font-size: 1.25rem; line-height: 1.4; color: var(--tinta); } body[data-diseno="minimal"] .itinerario .donde { margin-top: .2rem; font-size: var(--letra-nota); font-weight: 300; color: var(--tinta-2); } /* Los lugares, la mesa de regalos y el hospedaje: renglones con su filete, sin tarjeta. */ body[data-diseno="minimal"] .lugares { gap: 0 2rem; } body[data-diseno="minimal"] .lugar { text-align: left; background: none; border: 0; border-top: 1px solid var(--linea); padding: 1.3rem 0 1.6rem; -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-diseno="minimal"] .lugar h3 { margin-bottom: .4rem; font-family: var(--sans); font-weight: 400; font-size: 1.4rem; line-height: 1.3; letter-spacing: -.02em; } body[data-diseno="minimal"] .lugar p { margin-bottom: 1.2rem; font-size: var(--letra-nota); color: var(--tinta-2); } /* Con su tamaño de etiqueta: es un

dentro de un lugar, y la regla de .lugar p de arriba (la de la dirección, que pesa más que la de la base) le ponía el de la dirección: 17 px en mayúsculas espaciadas (29-sep-2026). */ body[data-diseno="minimal"] .lugar .tienda-etiqueta { font-size: var(--letra-etiqueta); letter-spacing: .14em; font-weight: 500; color: var(--tinta-2); } body[data-diseno="minimal"] .lugar .tienda-numero { font-family: var(--sans); font-weight: 300; font-size: 1.9rem; letter-spacing: .02em; } body[data-diseno="minimal"] .enlace-tienda { color: var(--tinta); } body[data-diseno="minimal"] .datos-transferencia { margin: 0 0 1.4rem; } body[data-diseno="minimal"] .datos-transferencia dt { color: var(--tinta-2); font-weight: 500; } body[data-diseno="minimal"] .datos-transferencia dd { font-family: var(--sans); font-weight: 400; font-size: 1.1rem; } body[data-diseno="minimal"] .copiado { text-align: left; color: var(--tinta); } body[data-diseno="minimal"] .vestimenta { text-align: left; font-family: var(--sans); font-weight: 300; font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.05; letter-spacing: -.05em; } body[data-diseno="minimal"] .video video { box-shadow: none; } body[data-diseno="minimal"] .video figcaption { text-align: left; font-family: var(--sans); font-style: normal; font-size: var(--letra-nota); color: var(--tinta-2); } /* Los botones: rectángulos de un filete; al pasar encima se llenan de tinta. Los que abren otra página, con su flecha. */ body[data-diseno="minimal"] .botones { justify-items: start; } body[data-diseno="minimal"] .boton { min-height: 44px; padding: .8rem 1.15rem; border-radius: 0; border-color: var(--tinta); color: var(--tinta); font-weight: 500; letter-spacing: .14em; text-indent: 0; } body[data-diseno="minimal"] a.boton::after { content: '↗'; margin-left: .6rem; font-size: 1rem; letter-spacing: 0; } body[data-diseno="minimal"] .boton:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } /* Confirmar: sin caja; el formulario sobre la misma rejilla, los campos como un renglón subrayado. Lo que se toca va delineado en tinta (el filete gris de la rejilla da 1.2 contra el papel: como orilla de un control no se ve). */ body[data-diseno="minimal"] .confirmar, body[data-diseno="minimal"] .pase { text-align: left; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-diseno="minimal"] .confirmar { margin: 0; padding: 0; border: 0; } body[data-diseno="minimal"] .confirmar-saludo, body[data-diseno="minimal"] .gracias { text-align: left; font-family: var(--sans); font-style: normal; font-weight: 300; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.03em; color: var(--tinta); } body[data-diseno="minimal"] .opcion, body[data-diseno="minimal"] .contador-btn { border-radius: 0; border-color: var(--tinta-2); color: var(--tinta); } body[data-diseno="minimal"] .opcion { font-weight: 500; letter-spacing: .12em; } body[data-diseno="minimal"] .opcion:hover, body[data-diseno="minimal"] .contador-btn:hover:not([disabled]) { border-color: var(--tinta); color: var(--tinta); } body[data-diseno="minimal"] .opcion[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } body[data-diseno="minimal"] .contador { justify-content: flex-start; } body[data-diseno="minimal"] .contador-n { font-family: var(--sans); font-weight: 300; letter-spacing: -.04em; } body[data-diseno="minimal"] .etiqueta { color: var(--tinta-2); font-weight: 500; letter-spacing: .14em; } body[data-diseno="minimal"] .campo { border: 0; border-bottom: 1px solid var(--tinta-2); border-radius: 0; background: transparent; padding: .75rem 0; } body[data-diseno="minimal"] .campo:focus { outline: none; border-bottom-color: var(--tinta); box-shadow: 0 1px 0 var(--tinta); } body[data-diseno="minimal"] .enviar { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 500; letter-spacing: .18em; } body[data-diseno="minimal"] .link-boton { color: var(--tinta-2); } body[data-diseno="minimal"] .pase { margin-top: 0; padding: 1.6rem; border-color: var(--linea); } body[data-diseno="minimal"] .pase-qr { margin-left: 0; } body[data-diseno="minimal"] .pase-nombre { font-family: var(--sans); font-weight: 300; font-size: 1.5rem; letter-spacing: -.03em; } body[data-diseno="minimal"] .pase-codigo { text-indent: 0; } /* El pie: los nombres otra vez, grandes y a la izquierda, y el crédito chiquito. */ body[data-diseno="minimal"] .pie { text-align: left; padding: 5rem 0 1rem; } body[data-diseno="minimal"] .pie .regla { display: block; width: 100%; height: 1px; margin: 0 0 2.4rem; background: var(--linea); } body[data-diseno="minimal"] .pie .regla::before, body[data-diseno="minimal"] .pie .regla::after, body[data-diseno="minimal"] .pie .regla i { display: none; } body[data-diseno="minimal"] #pieTitulo { margin: 0 0 1rem; font-family: var(--sans); font-weight: 300; font-size: clamp(2.6rem, 13vw, 4.2rem); line-height: .95; letter-spacing: -.05em; } body[data-diseno="minimal"] .pie-marca { text-indent: 0; letter-spacing: .14em; color: var(--tinta-2); } /* ─── lo que acompaña: la música, la barra de avance y el botón de confirmar, rectos y sin brillo */ body[data-diseno="minimal"] .musica { border-radius: 0; background: var(--papel); border-color: var(--linea); -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-diseno="minimal"] .musica-onda { background: var(--tinta); } body[data-diseno="minimal"] .avance-invitacion { height: 2px; background: var(--acento); } body[data-diseno="minimal"] .confirmar-flotante { border-radius: 0; background: var(--tinta); color: var(--papel); box-shadow: none; animation: none; gap: 1rem; padding: 1rem 1.3rem; font: 500 var(--letra-boton)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; } /* Como "Abrir invitación": sin el corazón, con su flecha. */ body[data-diseno="minimal"] .confirmar-flotante .icono-momento { display: none; } body[data-diseno="minimal"] .confirmar-flotante::after { content: '→'; font-size: 1rem; font-weight: 300; letter-spacing: 0; } /* ─── la galería: fotos rectas sobre la rejilla; la que corre de lado alinea su título con la columna */ body[data-diseno="minimal"] .galeria { gap: .6rem; } body[data-diseno="minimal"] .galeria-foto { background: var(--papel-2); } body[data-diseno="minimal"] .galeria img { filter: none; } body[data-diseno="minimal"] #secGaleria.galeria-fija .galeria img { aspect-ratio: 4 / 5; } body[data-diseno="minimal"] #secGaleria.galeria-fija .titulo-seccion { padding: 0 3rem 0 var(--minimal-orilla); } body[data-diseno="minimal"] #secGaleria.galeria-fija .titulo-seccion::after { right: var(--minimal-orilla); } /* Las dos franjas de fotos que corren: aquí una sola, derecha y sin sombras. */ body[data-diseno="minimal"] .cinta-fotos { transform: none; margin: 2rem 0 2rem calc(50% - 50vw); } body[data-diseno="minimal"] .cinta-fotos-pista.al-reves { display: none; } body[data-diseno="minimal"] .cinta-fotos img { border-radius: 0; box-shadow: none; width: clamp(7rem, 30vw, 12rem); } /* ─── la fecha que llega desde enorme: las cifras apiladas, a la izquierda, y la capa de tinta entra como la apertura (una línea que se dibuja y se abre en plano: invitacion.js → escenaDeLaFecha) */ body[data-diseno="minimal"] .fecha-capa { justify-content: start; justify-items: start; text-align: left; padding: 0 var(--minimal-orilla); gap: 1.2rem; } body[data-diseno="minimal"] .fecha-capa-color { background: var(--tinta); color: var(--papel); } body[data-diseno="minimal"] .fecha-escena-num { flex-direction: column; align-items: flex-start; font-family: var(--sans); font-weight: 300; letter-spacing: -.06em; line-height: .86; font-size: clamp(5rem, 36vw, 14rem); transform-origin: 0 50%; } body[data-diseno="minimal"] .fecha-escena-num i { display: none; } body[data-diseno="minimal"] .fecha-escena-antes, body[data-diseno="minimal"] .fecha-escena-dia { text-indent: 0; letter-spacing: .16em; } /* El celular acostado (ancho y bajito): los nombres a la izquierda y "Abrir invitación" a la derecha, de alto completo. Uno debajo del otro no cabían con el letrero de ejemplo arriba (la fecha caía encima del botón). */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="minimal"] .sobre { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; } body[data-diseno="minimal"] .sobre-carta { padding-top: 1.1rem; border-bottom: 1px solid var(--linea); border-right: 0; } body[data-diseno="minimal"] .sobre-titulo { font-size: calc(clamp(2.2rem, 12vh, 3.6rem) * var(--escala, 1)); padding-bottom: .9rem; } body[data-diseno="minimal"] .sobre-titulo::after { right: -1.4rem; } body[data-diseno="minimal"] .sobre-fecha { padding: .8rem 0 1.1rem; } body[data-diseno="minimal"] .sobre-abrir { padding: 0 1.8rem; } } /* ─── pantallas grandes: el sobre es un cartel vertical colgado al centro; la portada, dos mitades (los nombres a la izquierda y la foto a sangre a la derecha); y las secciones, un catálogo: el título a la izquierda, lo demás a la derecha. */ @media (min-width: 48rem) and (min-height: 40rem) { body[data-diseno="minimal"] .sobre { --minimal-alto: min(100svh - 4rem, 56rem); --minimal-ancho: min(100vw - 4rem, var(--minimal-alto) * .66); padding: calc((100svh - var(--minimal-alto)) / 2) calc((100vw - var(--minimal-ancho)) / 2); } body.con-letrero[data-diseno="minimal"] #sobre { padding-top: max(4.5rem, calc((100svh - var(--minimal-alto)) / 2)); } body[data-diseno="minimal"] .sobre-titulo::after { left: -1.4rem; right: -1.4rem; } } @media (min-width: 64rem) { body[data-diseno="minimal"] { --minimal-orilla: max(3rem, calc(50vw - 28rem)); } body[data-diseno="minimal"] main { max-width: 62rem; padding: 0 3rem 5rem; } /* La caja de la portada ES la columna de los textos (con márgenes, no con relleno): ajustarNombres mide los nombres contra el ancho de su padre, relleno incluido, y con relleno un nombre largo "cabía" y se metía en la foto. */ body[data-diseno="minimal"] .portada { width: calc(100vw - 2 * var(--minimal-orilla)); margin-left: calc(50% - 50vw + var(--minimal-orilla)); padding: 6rem 0 3.5rem; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; align-content: stretch; } body[data-diseno="minimal"] .portada .portada-titulo { align-self: center; margin: 3rem 0; font-size: calc(clamp(4.5rem, 10vw, 11rem) * var(--escala, 1)); } body[data-diseno="minimal"] .portada.con-foto { width: calc(50vw - var(--minimal-orilla) - 3rem); grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "etiqueta mono" "titulo titulo" "fecha fecha" "texto texto" "frase frase"; } body[data-diseno="minimal"] .portada.con-foto .portada-titulo { font-size: calc(clamp(4rem, 7.6vw, 9rem) * var(--escala, 1)); } body[data-diseno="minimal"] .portada.con-foto .portada-fondo { grid-area: auto; position: absolute; left: calc(100% + 4.5rem); top: 6rem; bottom: 3.5rem; width: calc(50vw - 1.5rem); height: auto; margin: 0; aspect-ratio: auto; max-height: none; } body[data-diseno="minimal"] .portada.con-foto .fecha-grande { margin-top: 0; } /* Fuera de la caja de la portada (sobre la foto) el aviso se aplastaba a puro ícono: mide lo que su texto. */ body[data-diseno="minimal"] .aviso-portada { width: max-content; } body[data-diseno="minimal"] .portada .aviso-a { left: calc(100% + 6rem); top: 8rem; } body[data-diseno="minimal"] .portada .aviso-b { left: calc(100% + 6rem); right: auto; top: 12rem; } /* Sin foto, abajo a la derecha, a un lado de la frase: ese hueco queda libre aunque los nombres llenen el ancho. */ body[data-diseno="minimal"] .portada:not(.con-foto) .aviso-a { left: auto; right: 0; top: calc(100% - 15rem); } body[data-diseno="minimal"] .portada:not(.con-foto) .aviso-b { left: auto; right: 0; top: calc(100% - 10.6rem); } /* El catálogo: el filete arriba de lado a lado, el título a la izquierda (se queda a la vista mientras se lee su sección) y todo lo demás en la columna de la derecha. La galería que corre y lo que va a pantalla completa, no. */ body[data-diseno="minimal"] .seccion:not(.galeria-fija) { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: 4rem; align-items: start; } body[data-diseno="minimal"] .seccion:not(.galeria-fija)::before { grid-column: 1 / -1; } body[data-diseno="minimal"] .seccion:not(.galeria-fija) > * { grid-column: 2; } body[data-diseno="minimal"] .seccion:not(.galeria-fija) > .titulo-seccion { grid-column: 1; grid-row: 2 / span 12; position: sticky; top: 3rem; margin: 0; font-size: 2.1rem; } body[data-diseno="minimal"] .seccion:not(.galeria-fija) > .titulo-seccion::after { top: .55rem; } body[data-diseno="minimal"] .parrafo { font-size: 1.25rem; } body[data-diseno="minimal"] .confirmar-limite { margin-top: 0; } body[data-diseno="minimal"] .fecha-escena-num { font-size: clamp(5rem, 22vh, 14rem); } /* El pie cierra como abrió la portada: los nombres enormes sobre su filete. */ body[data-diseno="minimal"] .pie { padding-top: 7rem; } body[data-diseno="minimal"] #pieTitulo { font-size: clamp(4rem, 8vw, 8rem); } } @media (prefers-reduced-motion: reduce) { body[data-diseno="minimal"] .sobre, body[data-diseno="minimal"] .sobre-titulo::after, body[data-diseno="minimal"] .seccion.aparece::before { transition: none; } body[data-diseno="minimal"] .seccion.aparece::before { transform: none; } } /* ═══════════════ DÉCO (28-sep-2026) — una noche de gala de los años veinte: marcos de metal con esquinas escalonadas, abanicos y rayos de sol */ /* Para XV años y bodas de noche. El fondo es la NOCHE de su paleta: su tinta, casi negra y con su color (café, vino, verde, azul…); la letra es su papel, y el metal es su acento claro: oro, oro rosa, plata o cobre, según la paleta. Los adornos (esquinas escalonadas, abanicos, el mosaico del fondo) son SVG escritos aquí como MÁSCARA, pintados con esos tokens: cada paleta tiene su metal y ningún color va suelto. Los contrastes, medidos contra las 24 paletas y los colores propios: pruebas/casos/diseno_deco.js. La apertura: dos hojas de puerta que se abren a los lados mientras un sol de rayos se despliega detrás de los nombres y un destello cruza el marco (invitacion.js → TIEMPOS.deco). Con "menos movimiento", nada se mueve. */ body[data-diseno="deco"] { --deco-fondo: var(--tinta); --deco-texto: var(--papel); --deco-metal: var(--acento-2); /* el cuerpo del metal */ --deco-metal-2: var(--acento); /* su sombra: el oro de verdad tiene sombras ocres, no negras */ } /* La noche va al revés: su papel es el oscuro y su acento claro es el hondo. */ body[data-diseno="deco"][data-paleta="noche"] { --deco-fondo: var(--papel); --deco-texto: var(--tinta); --deco-metal: var(--acento); --deco-metal-2: var(--acento-2); } body[data-diseno="deco"] { --deco-fondo-2: color-mix(in srgb, var(--deco-fondo) 90%, var(--deco-metal)); /* un panel apenas levantado */ /* Lo que se lee, medido contra el fondo (y sobre una tarjeta) en las 24 paletas y en 2,197 de colores propios: */ --deco-texto-2: color-mix(in srgb, var(--deco-texto) 74%, var(--deco-fondo)); /* 7.2 o más */ --deco-texto-3: color-mix(in srgb, var(--deco-texto) 66%, var(--deco-fondo)); /* 5.8 o más; 4.9 sobre una tarjeta */ --deco-oro: color-mix(in srgb, var(--deco-metal) 74%, var(--deco-texto)); /* el metal que se LEE (letra chica) */ --deco-oro-claro: color-mix(in srgb, var(--deco-metal) 40%, var(--deco-texto)); /* el brillo del metal */ --deco-oro-hondo: color-mix(in srgb, var(--deco-metal) 42%, var(--deco-metal-2)); /* la sombra del metal */ --deco-linea: color-mix(in srgb, var(--deco-metal) 58%, var(--deco-fondo)); /* los filetes (adorno) */ --deco-rayo: color-mix(in srgb, var(--deco-metal) 20%, transparent); /* los rayos de sol, suaves */ --deco-rayo-vivo: color-mix(in srgb, var(--deco-metal) 55%, transparent); /* los de la apertura */ --deco-brillo: color-mix(in srgb, var(--deco-texto) 90%, transparent); /* el destello */ --deco-vidrio: color-mix(in srgb, var(--deco-fondo-2) 92%, transparent); /* los avisos y la música */ --deco-error: color-mix(in srgb, var(--error) 34%, var(--deco-texto)); /* el aviso de error, sobre su fondo: 5.2 o más */ --deco-error-fondo: color-mix(in srgb, var(--error) 20%, var(--deco-fondo-2)); --deco-error-linea: color-mix(in srgb, var(--error) 60%, var(--deco-fondo)); --deco-opaco: var(--deco-fondo); /* en una máscara solo cuenta que sea opaco */ /* El metal como lámina: luz, cuerpo y sombra. Solo en adornos (los filetes, los abanicos), nunca detrás de letra. */ --deco-laminado: linear-gradient(118deg, var(--deco-oro-hondo) 0%, var(--deco-metal) 18%, var(--deco-oro-claro) 34%, var(--deco-metal) 48%, var(--deco-oro-hondo) 66%, var(--deco-metal) 82%, var(--deco-oro-claro) 100%); /* Los botones llenos: metal claro con la letra del fondo (5 o más en las 24 paletas y los colores propios). */ --deco-boton: linear-gradient(118deg, var(--deco-oro) 0%, var(--deco-oro-claro) 50%, var(--deco-oro) 100%); --deco-boton-texto: var(--deco-fondo); /* Los dibujos (máscaras): la esquina escalonada con su rombo, el abanico, el separador y el mosaico de abanicos. */ --deco-esquina-ai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M40 .5H12.5V6.5H6.5V12.5H.5V40'/%3E%3Cpath d='M40 4.5H16.5V10.5H10.5V16.5H4.5V40'/%3E%3C/g%3E%3Cpath d='M3.4 .6 6.2 3.4 3.4 6.2 .6 3.4z'/%3E%3C/g%3E%3C/svg%3E"); --deco-esquina-ad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='matrix(-1 0 0 1 40 0)'%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M40 .5H12.5V6.5H6.5V12.5H.5V40'/%3E%3Cpath d='M40 4.5H16.5V10.5H10.5V16.5H4.5V40'/%3E%3C/g%3E%3Cpath d='M3.4 .6 6.2 3.4 3.4 6.2 .6 3.4z'/%3E%3C/g%3E%3C/svg%3E"); --deco-esquina-bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='matrix(1 0 0 -1 0 40)'%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M40 .5H12.5V6.5H6.5V12.5H.5V40'/%3E%3Cpath d='M40 4.5H16.5V10.5H10.5V16.5H4.5V40'/%3E%3C/g%3E%3Cpath d='M3.4 .6 6.2 3.4 3.4 6.2 .6 3.4z'/%3E%3C/g%3E%3C/svg%3E"); --deco-esquina-bd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='matrix(-1 0 0 -1 40 40)'%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M40 .5H12.5V6.5H6.5V12.5H.5V40'/%3E%3Cpath d='M40 4.5H16.5V10.5H10.5V16.5H4.5V40'/%3E%3C/g%3E%3Cpath d='M3.4 .6 6.2 3.4 3.4 6.2 .6 3.4z'/%3E%3C/g%3E%3C/svg%3E"); --deco-abanico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 31'%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M40.14 27.78L54.63 23.9M39.09 25.25L52.08 17.75M37.42 23.08L48.03 12.47M35.25 21.41L42.75 8.42M32.72 20.36L36.6 5.87M30 20L30 5M27.28 20.36L23.4 5.87M24.75 21.41L17.25 8.42M22.58 23.08L11.97 12.47M20.91 25.25L7.92 17.75M19.86 27.78L5.37 23.9'/%3E%3Cpath d='M1.5 30.5A28.5 28.5 0 0 1 58.5 30.5'/%3E%3C/g%3E%3Cpath d='M22 31A8 8 0 0 1 38 31z'/%3E%3C/svg%3E"); --deco-divisor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 8'%3E%3Cpath d='M0 4h37M51 4h37' stroke='black'/%3E%3Cpath d='M44 .4 47.6 4 44 7.6 40.4 4z'/%3E%3C/svg%3E"); --deco-mosaico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='black' stroke-width='.8'%3E%3Cpath d='M0.5 22A21.5 21.5 0 0 1 43.5 22M7 22A15 15 0 0 1 37 22M13.5 22A8.5 8.5 0 0 1 30.5 22M-21.5 44A21.5 21.5 0 0 1 21.5 44M-15 44A15 15 0 0 1 15 44M-8.5 44A8.5 8.5 0 0 1 8.5 44M22.5 44A21.5 21.5 0 0 1 65.5 44M29 44A15 15 0 0 1 59 44M35.5 44A8.5 8.5 0 0 1 52.5 44'/%3E%3C/g%3E%3C/svg%3E"); /* El MARCO: doble filete con las cuatro esquinas escalonadas. Las esquinas miden 2.5rem y los filetes van a .25rem uno del otro, como en el dibujo (40 × 40, filetes a 4). Se usa como máscara de algo pintado con el laminado. */ --deco-marco: var(--deco-esquina-ai) left top / 2.5rem 2.5rem no-repeat, var(--deco-esquina-ad) right top / 2.5rem 2.5rem no-repeat, var(--deco-esquina-bi) left bottom / 2.5rem 2.5rem no-repeat, var(--deco-esquina-bd) right bottom / 2.5rem 2.5rem no-repeat, linear-gradient(var(--deco-opaco) 0 0) left 2.5rem top 0 / calc(100% - 5rem) .0625rem no-repeat, linear-gradient(var(--deco-opaco) 0 0) left 2.5rem top .25rem / calc(100% - 5rem) .0625rem no-repeat, linear-gradient(var(--deco-opaco) 0 0) left 2.5rem bottom 0 / calc(100% - 5rem) .0625rem no-repeat, linear-gradient(var(--deco-opaco) 0 0) left 2.5rem bottom .25rem / calc(100% - 5rem) .0625rem no-repeat, linear-gradient(var(--deco-opaco) 0 0) left 0 top 2.5rem / .0625rem calc(100% - 5rem) no-repeat, linear-gradient(var(--deco-opaco) 0 0) left .25rem top 2.5rem / .0625rem calc(100% - 5rem) no-repeat, linear-gradient(var(--deco-opaco) 0 0) right 0 top 2.5rem / .0625rem calc(100% - 5rem) no-repeat, linear-gradient(var(--deco-opaco) 0 0) right .25rem top 2.5rem / .0625rem calc(100% - 5rem) no-repeat; background: var(--deco-fondo); color: var(--deco-texto); } /* El fondo: un mosaico de abanicos, apenas visible, que no se mueve al bajar (el grano del papel no va de noche). */ body[data-diseno="deco"]::before { background: radial-gradient(ellipse 90% 70% at 50% 42%, var(--deco-metal), transparent 80%); opacity: .11; mix-blend-mode: normal; -webkit-mask: var(--deco-mosaico) 0 0 / 2.75rem 2.75rem repeat; mask: var(--deco-mosaico) 0 0 / 2.75rem 2.75rem repeat; } body[data-diseno="deco"] #invitacion::before { display: none; } /* ─── la apertura: dos hojas de puerta con su sol partido a la mitad; en medio, la tarjeta */ body[data-diseno="deco"] .sobre { background: transparent; gap: 2.2rem; transition: opacity .35s ease, visibility .35s; } body[data-diseno="deco"] .sobre::before, body[data-diseno="deco"] .sobre::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; z-index: -2; pointer-events: none; transition: transform 1s cubic-bezier(.7,0,.22,1) .3s; } body[data-diseno="deco"] .sobre::before { left: 0; background: linear-gradient(to left, var(--deco-linea) 0 1px, transparent 1px), linear-gradient(var(--deco-linea) 0 0) left 1rem top 1rem / 1px calc(100% - 2rem) no-repeat, linear-gradient(var(--deco-linea) 0 0) left 1rem top 1rem / calc(100% - 1rem) 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) left 1rem bottom 1rem / calc(100% - 1rem) 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) left 1.35rem top 1.35rem / 1px calc(100% - 2.7rem) no-repeat, linear-gradient(var(--deco-linea) 0 0) left 1.35rem top 1.35rem / calc(100% - 1.35rem) 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) left 1.35rem bottom 1.35rem / calc(100% - 1.35rem) 1px no-repeat, radial-gradient(circle at 100% 46%, transparent 0 16rem, var(--deco-linea) 16rem calc(16rem + 1px), transparent calc(16rem + 1px) 16.4rem, var(--deco-linea) 16.4rem calc(16.4rem + 1px), transparent calc(16.4rem + 1px)), radial-gradient(circle at 100% 46%, transparent 0 6rem, var(--deco-fondo) 30rem), repeating-conic-gradient(from 180deg at 100% 46%, var(--deco-rayo) 0 .8deg, transparent .8deg 6deg), var(--deco-fondo); } body[data-diseno="deco"] .sobre::after { right: 0; background: linear-gradient(to right, var(--deco-linea) 0 1px, transparent 1px), linear-gradient(var(--deco-linea) 0 0) right 1rem top 1rem / 1px calc(100% - 2rem) no-repeat, linear-gradient(var(--deco-linea) 0 0) right 1rem top 1rem / calc(100% - 1rem) 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) right 1rem bottom 1rem / calc(100% - 1rem) 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) right 1.35rem top 1.35rem / 1px calc(100% - 2.7rem) no-repeat, linear-gradient(var(--deco-linea) 0 0) right 1.35rem top 1.35rem / calc(100% - 1.35rem) 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) right 1.35rem bottom 1.35rem / calc(100% - 1.35rem) 1px no-repeat, radial-gradient(circle at 0% 46%, transparent 0 16rem, var(--deco-linea) 16rem calc(16rem + 1px), transparent calc(16rem + 1px) 16.4rem, var(--deco-linea) 16.4rem calc(16.4rem + 1px), transparent calc(16.4rem + 1px)), radial-gradient(circle at 0% 46%, transparent 0 6rem, var(--deco-fondo) 30rem), repeating-conic-gradient(from 0deg at 0% 46%, var(--deco-rayo) 0 .8deg, transparent .8deg 6deg), var(--deco-fondo); } body[data-diseno="deco"] .sobre.abriendo::before { transform: translateX(-100%); } body[data-diseno="deco"] .sobre.abriendo::after { transform: translateX(100%); } /* La tarjeta: una placa del color de la noche con su marco de metal; arriba, el medallón con el abanico. Sin transform: los rayos de la apertura van fijos a la pantalla, y un transform en la tarjeta los movería. */ body[data-diseno="deco"] .sobre-carta { width: min(19.5rem, calc(100vw - 3rem)); min-height: 0; padding: 3.3rem 1.5rem 2.3rem; background: none; box-shadow: none; transition: opacity .4s ease .32s; } body[data-diseno="deco"] .sobre.abriendo .sobre-carta { transform: none; opacity: 0; } body[data-diseno="deco"] .sobre-carta::before { inset: 0; z-index: 0; background: var(--deco-fondo); opacity: 1; mix-blend-mode: normal; box-shadow: 0 0 0 .7rem var(--deco-fondo), 0 2.4rem 4rem -1.4rem var(--velo-abajo); } /* Los rayos que se despliegan al abrir: un sol que llena la pantalla, detrás de la placa. Es un disco (la máscara) dentro de un cuadro de 110vmax: al girar no asoma ninguna esquina, y la capa no es más grande de lo que se ve. */ body[data-diseno="deco"] .sobre-carta::after { content: ''; position: fixed; left: 50%; top: calc(50% - 2.6rem); width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; z-index: -1; pointer-events: none; border-radius: 50%; background: repeating-conic-gradient(var(--deco-rayo-vivo) 0 1.1deg, transparent 1.1deg 7.5deg); -webkit-mask: radial-gradient(circle, var(--deco-opaco) 0 24%, transparent 68%); mask: radial-gradient(circle, var(--deco-opaco) 0 24%, transparent 68%); opacity: 0; transform: scale(.25) rotate(-40deg); transition: opacity .25s ease, transform 1s cubic-bezier(.16,1,.3,1); } body[data-diseno="deco"] .sobre.abriendo .sobre-carta::after { opacity: 1; transform: none; } /* El marco de la placa, y el destello que lo cruza: vive DENTRO de la máscara, así que solo brilla el metal. */ body[data-diseno="deco"] .sobre-solapa { inset: 0; height: auto; z-index: 1; overflow: hidden; clip-path: none; filter: none; transform: none; transition: none; background: var(--deco-laminado); -webkit-mask: var(--deco-marco); mask: var(--deco-marco); } body[data-diseno="deco"] .sobre.abriendo .sobre-solapa { transform: none; } body[data-diseno="deco"] .sobre-solapa::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 60%; transform: translateX(-120%); background: linear-gradient(100deg, transparent 18%, var(--deco-brillo) 46%, var(--deco-texto) 50%, var(--deco-brillo) 54%, transparent 82%); } /* El medallón: un rombo de doble filete con las iniciales, sentado en el filete de arriba, y el abanico detrás. */ body[data-diseno="deco"] .sobre-sello { top: 0; left: 50%; width: 3.9rem; height: 3.9rem; margin: -1.95rem 0 0 -1.95rem; z-index: 3; isolation: isolate; clip-path: none; background: none; box-shadow: none; text-shadow: none; animation: none; font-family: var(--serif); font-size: .95rem; font-weight: 600; letter-spacing: .06em; color: var(--deco-oro); } body[data-diseno="deco"] .sobre-sello::before { content: ''; position: absolute; inset: .55rem; z-index: -1; transform: rotate(45deg); background: var(--deco-fondo); border: 1px solid var(--deco-metal); box-shadow: 0 0 0 .22rem var(--deco-fondo), 0 0 0 calc(.22rem + 1px) var(--deco-linea); } body[data-diseno="deco"] .sobre-sello::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 7.2rem; height: 3.72rem; margin-left: -3.6rem; z-index: -2; background: var(--deco-laminado); -webkit-mask: var(--deco-abanico) center / 100% 100% no-repeat; mask: var(--deco-abanico) center / 100% 100% no-repeat; } body[data-diseno="deco"] .sobre.abriendo .sobre-sello { opacity: 0; } body[data-diseno="deco"] .sobre-cuerpo { position: relative; z-index: 2; } body[data-diseno="deco"] .sobre-para { color: var(--deco-oro); font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .3em; text-indent: .3em; margin: 0 0 1.35rem; } body[data-diseno="deco"] .sobre-titulo { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; padding-left: .16em; font-size: calc(clamp(1.75rem, 8.2vw, 2.35rem) * var(--escala, 1)); line-height: 1.14; color: var(--deco-texto); margin: 0 0 1.1rem; text-wrap: balance; } body[data-diseno="deco"] .sobre-titulo::after { content: ''; display: block; width: 5.5rem; height: .5rem; margin: 1rem auto 0; background: var(--deco-metal); -webkit-mask: var(--deco-divisor) center / 100% 100% no-repeat; mask: var(--deco-divisor) center / 100% 100% no-repeat; } body[data-diseno="deco"] .sobre-fecha { color: var(--deco-texto-2); font-weight: 400; letter-spacing: .28em; text-indent: .28em; } body[data-diseno="deco"] .sobre-abrir { position: relative; z-index: 1; background: var(--deco-fondo); color: var(--deco-oro); border: 1px solid var(--deco-linea); box-shadow: 0 0 0 .3rem var(--deco-fondo), 0 0 0 calc(.3rem + 1px) var(--deco-linea); font-weight: 500; letter-spacing: .26em; text-indent: .26em; padding: 1.05rem 2.3rem; transition: opacity .3s ease, background .4s ease, color .4s ease, border-color .4s ease; } body[data-diseno="deco"] .sobre-abrir:hover { background: var(--deco-boton); color: var(--deco-boton-texto); border-color: transparent; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="deco"] .sobre-sello { animation: deco-medalla .8s cubic-bezier(.34,1.3,.5,1) .45s both; } body[data-diseno="deco"] .sobre-solapa::before { animation: deco-destello 5.5s cubic-bezier(.45,0,.2,1) 1.3s infinite; } body[data-diseno="deco"] .sobre.abriendo .sobre-solapa::before { animation: deco-destello-abrir .42s cubic-bezier(.3,.1,.3,1) both; } body[data-diseno="deco"] .sobre.abriendo .sobre-sello { animation: deco-medalla-sale .45s cubic-bezier(.5,0,.75,0) both; } } @keyframes deco-medalla { from { opacity: 0; transform: scale(.4) rotate(-90deg); } to { opacity: 1; transform: none; } } @keyframes deco-medalla-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.4); } } @keyframes deco-destello { 0% { transform: translateX(-120%); } 24%, 100% { transform: translateX(300%); } } @keyframes deco-destello-abrir { from { transform: translateX(-120%); } to { transform: translateX(300%); } } /* El celular acostado: la placa y el botón van lado a lado, la placa más baja y el abanico más chico (con el letrero de "invitación de ejemplo" arriba, no queda alto para él: el letrero lo tapaba a la mitad). */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="deco"] .sobre-carta { padding: 2.7rem 1.4rem 1.7rem; } body[data-diseno="deco"] .sobre-carta::after { left: calc(50% - 8rem); top: 50%; } body[data-diseno="deco"] .sobre-para { margin-bottom: 1rem; letter-spacing: .16em; text-indent: .16em; } body[data-diseno="deco"] .sobre-titulo { font-size: calc(1.85rem * var(--escala, 1)); margin-bottom: .8rem; } body[data-diseno="deco"] .sobre-titulo::after { margin-top: .7rem; } body[data-diseno="deco"] .sobre-sello::after { width: 5.2rem; height: 2.69rem; margin-left: -2.6rem; } body[data-diseno="deco"].con-letrero .sobre-sello::after { display: none; } } /* ─── la portada: la foto en un arco con su sol detrás, el medallón de iniciales y el marco del cartel */ body[data-diseno="deco"] .portada { --deco-arco: min(14.5rem, 60vw); --deco-sol-y: calc(6rem + var(--deco-arco) / 2); min-height: 100svh; padding: 6rem 0 6.4rem; /* abajo, el hueco de la rayita de "baja" (3rem, a 2rem de la orilla) */ } /* Sin foto, el medallón baja un poco: arriba, a su lado, flota el aviso de para quién es. */ body[data-diseno="deco"] .portada:not(.con-foto) { --deco-sol-y: calc(7.5rem + 3.2rem); padding-top: 7.5rem; } body[data-diseno="deco"] .portada.con-foto { color: var(--deco-texto); } /* El sol: rayos desde el centro del arco (o del medallón), que se apagan antes de llegar a los nombres. */ body[data-diseno="deco"] .portada::before { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: repeating-conic-gradient(from 0deg at 50% var(--deco-sol-y), var(--deco-rayo) 0 .9deg, transparent .9deg 6deg); -webkit-mask: radial-gradient(circle at 50% var(--deco-sol-y), transparent 0 2rem, var(--deco-opaco) 5rem, transparent 19rem); mask: radial-gradient(circle at 50% var(--deco-sol-y), transparent 0 2rem, var(--deco-opaco) 5rem, transparent 19rem); } /* El marco del cartel, un poco más ancho que la columna (los nombres nunca lo tocan). */ body[data-diseno="deco"] .portada::after { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 1rem; bottom: 1rem; left: -.95rem; right: -.95rem; background: var(--deco-laminado); -webkit-mask: var(--deco-marco); mask: var(--deco-marco); } body[data-diseno="deco"] .portada-fondo { position: relative; inset: auto; left: auto; transform: none; order: -1; z-index: 1; width: var(--deco-arco); height: auto; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: var(--deco-fondo-2); box-shadow: 0 0 0 .35rem var(--deco-fondo), 0 0 0 calc(.35rem + 1px) var(--deco-metal), 0 1.6rem 3rem -1rem var(--velo-abajo); outline: 1px solid var(--deco-linea); outline-offset: .8rem; } body[data-diseno="deco"] .portada-fondo::after { inset: .5rem; border: 1px solid var(--deco-brillo); border-radius: 999px 999px 0 0; background: none; opacity: .55; } /* El medallón: con foto, es la clave del arco (a caballo en su orilla de abajo); sin foto, preside la portada. */ body[data-diseno="deco"] .portada .monograma { position: relative; isolation: isolate; width: 4.9rem; height: 4.9rem; margin: -2.45rem 0 1.5rem; border: 0; border-radius: 0; font-family: var(--serif); font-size: .92rem; font-weight: 600; letter-spacing: .1em; color: var(--deco-oro); } body[data-diseno="deco"] .portada .monograma::before { content: ''; position: absolute; inset: .7rem; z-index: -1; transform: rotate(45deg); background: var(--deco-fondo); border: 1px solid var(--deco-metal); box-shadow: 0 0 0 .24rem var(--deco-fondo), 0 0 0 calc(.24rem + 1px) var(--deco-linea); } body[data-diseno="deco"] .portada.con-foto .monograma { border-color: transparent; color: var(--deco-oro); } body[data-diseno="deco"] .portada:not(.con-foto) .monograma { width: 6.4rem; height: 6.4rem; margin: 0 0 2.4rem; font-size: 1.1rem; } body[data-diseno="deco"] .portada:not(.con-foto) .monograma::before { inset: .95rem; } body[data-diseno="deco"] .portada .portada-etiqueta { color: var(--deco-oro); text-shadow: none; font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .36em; text-indent: .36em; margin-bottom: 1.2rem; } body[data-diseno="deco"] .portada .portada-titulo { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; padding-left: .14em; font-size: calc(clamp(2.3rem, 10.6vw, 4.3rem) * var(--escala, 1)); line-height: 1.1; color: var(--deco-texto); text-shadow: none; } body[data-diseno="deco"] .portada .portada-frase { color: var(--deco-texto-2); text-shadow: none; margin-top: 1.3rem; } body[data-diseno="deco"] .portada .fecha-grande { margin-top: 1.9rem; padding: .7rem 1.2rem .6rem; gap: .85rem; color: var(--deco-texto); text-shadow: none; font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 7vw, 2.2rem); letter-spacing: .1em; background: linear-gradient(var(--deco-linea) 0 0) left top / 100% 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) left 0 top 4px / 100% 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) left bottom / 100% 1px no-repeat, linear-gradient(var(--deco-linea) 0 0) left 0 bottom 4px / 100% 1px no-repeat; } body[data-diseno="deco"] .portada .fecha-grande i { width: 5px; height: 5px; background: var(--deco-metal); transform: rotate(45deg); } body[data-diseno="deco"] .portada .fecha-texto { color: var(--deco-texto-2); text-shadow: none; letter-spacing: .28em; text-indent: .28em; margin-top: 1.05rem; } body[data-diseno="deco"] .portada .scroll-pista { background: var(--deco-linea); bottom: 2rem; } body[data-diseno="deco"] .portada .scroll-pista span { background: var(--deco-metal); } /* Las letras de los nombres crecen desde su renglón, como un anuncio luminoso que se enciende (invitacion.js). */ body[data-diseno="deco"] .portada-titulo .letra, body[data-diseno="deco"] .sobre-titulo .letra { transform-origin: 50% 90%; } /* La "&" (o la "y") entre los nombres, en cursiva de metal. */ body[data-diseno="deco"] .palabra-y { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--deco-oro); margin: 0 .06em 0 -.1em; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="deco"] .portada::before { animation: deco-sol 1.8s cubic-bezier(.16,1,.3,1) .35s both, deco-respira 7s ease-in-out 2.4s infinite alternate; } } @keyframes deco-sol { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } } @keyframes deco-respira { from { opacity: 1; } to { opacity: .55; } } /* ─── las secciones: un marco fino de doble filete, y encima, sentado en él, un abanico chico */ body[data-diseno="deco"] main { padding-bottom: 3rem; } body[data-diseno="deco"] .seccion { position: relative; margin-top: 3.6rem; padding: 2.2rem 1.35rem 2.5rem; } body[data-diseno="deco"] .seccion::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8; background: var(--deco-laminado); -webkit-mask: var(--deco-marco); mask: var(--deco-marco); } body[data-diseno="deco"] .regla { display: block; width: 3.7rem; height: 1.91rem; margin: -4.11rem auto 1.8rem; gap: 0; background: var(--deco-laminado); -webkit-mask: var(--deco-abanico) center / 100% 100% no-repeat; mask: var(--deco-abanico) center / 100% 100% no-repeat; } body[data-diseno="deco"] .regla::before, body[data-diseno="deco"] .regla::after, body[data-diseno="deco"] .regla i { display: none; } body[data-diseno="deco"] .titulo-seccion { font-family: var(--serif); font-size: 1.28rem; font-weight: 500; line-height: 1.4; letter-spacing: .28em; text-indent: .28em; color: var(--deco-texto); margin: 0 0 2rem; text-wrap: balance; } body[data-diseno="deco"] .titulo-seccion::after { content: ''; display: block; width: 5.5rem; height: .5rem; margin: .95rem auto 0; background: var(--deco-metal); -webkit-mask: var(--deco-divisor) center / 100% 100% no-repeat; mask: var(--deco-divisor) center / 100% 100% no-repeat; } body[data-diseno="deco"] .parrafo { color: var(--deco-texto-2); font-size: var(--letra-lectura); line-height: 1.62; } body[data-diseno="deco"] .nota-chica { color: var(--deco-texto-3); } body[data-diseno="deco"] .cuenta-dato b { font-weight: 500; color: var(--deco-texto); font-size: clamp(2.1rem, 9.6vw, 2.9rem); } body[data-diseno="deco"] .cuenta-dato span { color: var(--deco-oro); font-weight: 500; letter-spacing: .24em; text-indent: .24em; } body[data-diseno="deco"] .cuenta-dato + .cuenta-dato::before { top: 6%; bottom: 6%; background: linear-gradient(transparent, var(--deco-linea), transparent); } body[data-diseno="deco"] .cuenta-ya { color: var(--deco-oro); } body[data-diseno="deco"] .padrino dt { color: var(--deco-oro); font-weight: 500; letter-spacing: .26em; text-indent: .26em; } body[data-diseno="deco"] .padrino dd { color: var(--deco-texto); font-size: 1.35rem; } body[data-diseno="deco"] .itinerario .hora { color: var(--deco-oro); font-weight: 500; font-size: 1.2rem; } body[data-diseno="deco"] .itinerario .que { color: var(--deco-texto); font-weight: 500; } body[data-diseno="deco"] .itinerario .donde { color: var(--deco-texto-3); } body[data-diseno="deco"] .itinerario li::before { background: linear-gradient(var(--deco-metal), var(--deco-linea)); } body[data-diseno="deco"] .itinerario .icono-momento { background: var(--deco-fondo); border-color: var(--deco-linea); stroke: var(--deco-oro); box-shadow: 0 0 0 .2rem var(--deco-fondo), 0 0 0 calc(.2rem + 1px) var(--deco-linea); } body[data-diseno="deco"] .itinerario li.encendido .icono-momento { background: var(--deco-oro); border-color: var(--deco-oro); stroke: var(--deco-fondo); } /* Las tarjetas (lugares, regalos, confirmar, el pase): un panel apenas levantado con su doble filete. */ body[data-diseno="deco"] .lugar, body[data-diseno="deco"] .confirmar, body[data-diseno="deco"] .pase { background: var(--deco-fondo-2); border: 1px solid var(--deco-linea); backdrop-filter: none; box-shadow: inset 0 0 0 .28rem var(--deco-fondo-2), inset 0 0 0 calc(.28rem + 1px) var(--deco-linea); } body[data-diseno="deco"] .lugar h3, body[data-diseno="deco"] .confirmar-saludo, body[data-diseno="deco"] .pase-nombre, body[data-diseno="deco"] .vestimenta, body[data-diseno="deco"] .contador-n, body[data-diseno="deco"] .lugar .tienda-numero, body[data-diseno="deco"] .datos-transferencia dd, body[data-diseno="deco"] .pase-codigo { color: var(--deco-texto); } body[data-diseno="deco"] .lugar h3 { font-weight: 500; } body[data-diseno="deco"] .lugar > :last-child { margin-bottom: 0; } body[data-diseno="deco"] .lugar p, body[data-diseno="deco"] .enlace-tienda, body[data-diseno="deco"] .video figcaption { color: var(--deco-texto-2); } body[data-diseno="deco"] .lugar .tienda-etiqueta, body[data-diseno="deco"] .datos-transferencia dt, body[data-diseno="deco"] .link-boton, body[data-diseno="deco"] .pie-marca { color: var(--deco-texto-3); } body[data-diseno="deco"] .vestimenta { font-weight: 500; text-transform: uppercase; letter-spacing: .2em; text-indent: .2em; font-size: clamp(1.45rem, 6.6vw, 2rem); line-height: 1.3; } body[data-diseno="deco"] .etiqueta, body[data-diseno="deco"] .confirmar-limite, body[data-diseno="deco"] .gracias, body[data-diseno="deco"] .copiado, body[data-diseno="deco"] .pie-marca span { color: var(--deco-oro); } body[data-diseno="deco"] .etiqueta { font-weight: 500; } body[data-diseno="deco"] .boton, body[data-diseno="deco"] .opcion, body[data-diseno="deco"] .contador-btn { color: var(--deco-oro); border-color: var(--deco-linea); background: transparent; font-weight: 500; } body[data-diseno="deco"] .opcion:hover, body[data-diseno="deco"] .contador-btn:hover:not([disabled]) { border-color: var(--deco-metal); color: var(--deco-texto); } body[data-diseno="deco"] .boton:hover, body[data-diseno="deco"] .opcion[aria-pressed="true"], body[data-diseno="deco"] .enviar { background: var(--deco-boton); border-color: transparent; color: var(--deco-boton-texto); } body[data-diseno="deco"] .enviar { font-weight: 600; letter-spacing: .2em; text-indent: .2em; } body[data-diseno="deco"] .campo { background: var(--deco-fondo); border-color: var(--deco-linea); color: var(--deco-texto); } body[data-diseno="deco"] .campo::placeholder { color: var(--deco-texto-3); } body[data-diseno="deco"] .campo:focus { outline-color: var(--deco-metal); border-color: var(--deco-metal); } body[data-diseno="deco"] .aviso { color: var(--deco-error); background: var(--deco-error-fondo); border-color: var(--deco-error-linea); } body[data-diseno="deco"] .galeria-foto { background: var(--deco-fondo-2); outline: 1px solid var(--deco-linea); outline-offset: .3rem; } body[data-diseno="deco"] .galeria-foto:focus-visible { outline: 2px solid var(--deco-metal); } body[data-diseno="deco"] .galeria { gap: 1.1rem; } body[data-diseno="deco"] .vestimenta-fotos { gap: 1.1rem; } body[data-diseno="deco"] .pie { padding: 4.5rem 0 1.5rem; } body[data-diseno="deco"] .pie .regla { margin: 0 auto 1.4rem; } body[data-diseno="deco"] #pieTitulo { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; text-indent: .2em; font-size: 1.55rem; color: var(--deco-texto); } body[data-diseno="deco"] .musica { background: var(--deco-vidrio); border-color: var(--deco-linea); } body[data-diseno="deco"] .musica-onda { background: var(--deco-metal); } body[data-diseno="deco"] .vacio-texto { color: var(--deco-texto-3); } /* ─── la galería que corre de lado (fija en la pantalla): sin marco y sin abanico (el abanico se va con la sección y la escena se queda: en la compu le caía encima al título) */ body[data-diseno="deco"] #secGaleria.galeria-fija { margin-top: 2.4rem; } body[data-diseno="deco"] #secGaleria.galeria-fija::before, body[data-diseno="deco"] #secGaleria.galeria-fija .regla { display: none; } /* El título, del ancho de la pantalla: la escena es una rejilla de una columna, que mide lo que la tira de fotos (2,300 px con 8 fotos), y centrado en ESA columna el título quedaba fuera de la pantalla. */ body[data-diseno="deco"] #secGaleria.galeria-fija .titulo-seccion { width: 100vw; justify-self: start; } /* Fijas en la pantalla, todas en vertical (la primera venía apaisada y quedaba con franjas arriba y abajo). */ body[data-diseno="deco"] #secGaleria.galeria-fija .galeria img, body[data-diseno="deco"] #secGaleria.galeria-fija .galeria-foto:first-child img { aspect-ratio: 4 / 5; } /* ─── la fecha que llega desde enorme: sobre la noche con su sol, y la vuelta de color es una moneda de metal */ body[data-diseno="deco"] .fecha-capa-base { background: var(--deco-fondo); color: var(--deco-texto); } body[data-diseno="deco"] .fecha-capa-base::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--deco-rayo) 0 .9deg, transparent .9deg 6deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 6rem, var(--deco-opaco) 9rem, transparent 26rem); mask: radial-gradient(circle at 50% 50%, transparent 0 6rem, var(--deco-opaco) 9rem, transparent 26rem); } body[data-diseno="deco"] .fecha-capa-color { background: var(--deco-boton); color: var(--deco-boton-texto); } body[data-diseno="deco"] .fecha-escena-num { font-weight: 500; letter-spacing: .05em; } body[data-diseno="deco"] .fecha-escena-num i { border-radius: 0; transform: rotate(45deg); opacity: .85; } body[data-diseno="deco"] .fecha-escena-antes, body[data-diseno="deco"] .fecha-escena-dia { font-weight: 500; letter-spacing: .5em; text-indent: .5em; } /* ─── los avisos de la portada, el botón que acompaña, la barra de avance y las fotos que corren */ body[data-diseno="deco"] .aviso-portada { border-radius: 3px; background: var(--deco-vidrio); color: var(--deco-texto); box-shadow: var(--sombra-aviso), inset 0 0 0 1px var(--deco-linea); } body[data-diseno="deco"] .aviso-portada small { color: var(--deco-texto-2); } body[data-diseno="deco"] .aviso-portada-icono { background: var(--deco-boton); } body[data-diseno="deco"] .aviso-portada-icono .icono-momento { stroke: var(--deco-boton-texto); } /* Dónde flotan, de diseño (invitacion.js → ponerAvisos los cambia de hueco si ahí tapan algo): el de para quién es, arriba a la izquierda, antes del arco; el de los días, sobre la orilla derecha de la foto, arriba del medallón. Sin foto, el de los días va abajo, después de la fecha. */ body[data-diseno="deco"] .aviso-a { left: 1.9rem; top: 1.9rem; } body[data-diseno="deco"] .aviso-b { left: auto; right: .2rem; top: calc(6rem + var(--deco-arco) * .86); } body[data-diseno="deco"] .portada:not(.con-foto) .aviso-b { left: 1.9rem; right: auto; top: calc(100% - 10.5rem); } body[data-diseno="deco"] .confirmar-flotante { border-radius: 3px; background: var(--deco-boton); color: var(--deco-boton-texto); } body[data-diseno="deco"] .avance-invitacion { background: var(--deco-laminado); } /* Las fotos que corren van RECTAS, como un friso: la franja inclinada medía 426 px en una pantalla de 390 y el celular ensanchaba la página a 408 (lo fijo, como el sobre a medio abrir, brincaba 9 px). */ body[data-diseno="deco"] .cinta-fotos { transform: none; } body[data-diseno="deco"] .cinta-fotos img { border-radius: 0; border: 1px solid var(--deco-linea); box-shadow: 0 0 0 .25rem var(--deco-fondo), 0 0 0 calc(.25rem + 1px) var(--deco-linea); } /* ─── pantallas grandes */ @media (min-width: 48rem) { body[data-diseno="deco"] .portada { --deco-arco: min(16rem, 40vw); } body[data-diseno="deco"] .seccion { padding: 2.8rem 2.6rem 3rem; } body[data-diseno="deco"] .regla { margin-top: -4.71rem; } body[data-diseno="deco"] .aviso-a { left: -6rem; top: 7rem; } body[data-diseno="deco"] .aviso-b, body[data-diseno="deco"] .portada:not(.con-foto) .aviso-b { left: auto; right: -6rem; top: calc(6rem + var(--deco-arco) * .9); } } /* ─── menos movimiento: todo quieto y en su lugar; al tocar "Abrir", la puerta simplemente ya no está */ @media (prefers-reduced-motion: reduce) { body[data-diseno="deco"] .sobre::before, body[data-diseno="deco"] .sobre::after, body[data-diseno="deco"] .sobre-carta, body[data-diseno="deco"] .sobre-carta::after, body[data-diseno="deco"] .sobre-sello, body[data-diseno="deco"] .sobre-abrir { transition: none; } body[data-diseno="deco"] .sobre.abriendo .sobre-carta::after { opacity: 0; } } /* ═══════════════ FIESTA (28-sep-2026) — un cartel de festival: formas de colores que rebotan, stickers y confeti Para XV años, cumpleaños y fiestas con energía, sin verse infantil: formas grandes y planas (un sol, una media luna, zigzags, estrellas, un aro, un garabato, un arcoíris) en colores vivos SACADOS DE LA PALETA, que flotan y rebotan despacio; los nombres en serif con peso, la etiqueta como sticker girado, la fecha en un boleto, y cada sección en una tarjeta de esquinas muy redondas con su sombra de color desplazada, como un sticker pegado. La apertura: la tarjeta revienta como globo, las formas salen disparadas del centro hacia las orillas (y ahí se quedan, detrás de la portada) y sale un cañonazo de confeti (invitacion.js → abrirSobre). Con "menos movimiento", todo quieto en su lugar final y sin confeti. Distinto de Aurora a propósito: ahí la luz es borrosa y el vidrio suave; aquí todo es plano, con orilla limpia y sombra dura. El texto va SIEMPRE sobre el papel, un tinte medido (pruebas/casos/diseno_fiesta.js) o el par del botón; los vivos son adorno y nunca llevan letra. */ .fiesta { display: none; } body[data-diseno="fiesta"] { /* El ancho de la tarjeta del sobre (el mismo de .sobre-carta, abajo): nunca más que el hueco del sobre, que rellena 1.5rem por lado. Las formas del sobre se acomodan en anchos de tarjeta. */ --carta: min(21.5rem, calc(100vw - 3rem)); /* Los vivos, sin la sintaxis relativa del color (navegadores viejos): los de la paleta tal cual. */ --fiesta-vivo: var(--acento); --fiesta-claro: var(--acento-2); --fiesta-medio: color-mix(in oklch, var(--acento) 50%, var(--acento-2)); /* El fuerte: el hondo en las paletas claras y el acento en la noche (el del botón: se lee sobre el papel). */ --fiesta-fuerte: var(--boton-fondo); /* Los tintes donde SÍ va texto: mezclas en srgb de la paleta, medidas en pruebas/casos/diseno_fiesta.js. */ --fiesta-tinte: color-mix(in srgb, var(--acento-2) 26%, var(--papel-2)); --fiesta-tinte-2: color-mix(in srgb, var(--acento) 12%, var(--papel-2)); --fiesta-sol: color-mix(in srgb, var(--acento-2) 32%, var(--papel)); } /* En la noche el suave es café: el sol va con un poco de oro, más tenue (se lee la letra clara encima). */ body[data-diseno="fiesta"][data-paleta="noche"] { --fiesta-sol: color-mix(in srgb, var(--acento) 16%, var(--papel)); } @supports (color: oklch(from red l c h)) { /* Con ella, más saturados que la paleta (el mismo matiz, más color): un cartel de fiesta, no un catálogo. */ body[data-diseno="fiesta"] { --fiesta-vivo: oklch(from var(--acento) calc(l + .08) min(calc(c * 1.7), .2) h); --fiesta-claro: oklch(from var(--acento-2) l min(calc(c * 1.9), .17) h); --fiesta-medio: oklch(from color-mix(in oklch, var(--acento) 50%, var(--acento-2)) l min(calc(c * 1.8), .19) h); } } body[data-diseno="fiesta"] #invitacion::before, body[data-diseno="fiesta"] .sobre-carta::before { display: none; } /* ─── las formas. En el sobre rodean la tarjeta; al abrir salen disparadas a las orillas de la pantalla y ahí se quedan, detrás de la portada (z 1; la portada va en main, z 2), y se van con ella al bajar (absolutas arriba del documento, no fijas). Cada una: --w y --h (su tamaño), --c (su color), --sx/--sy (dónde va en el sobre, en anchos de la tarjeta desde su centro) y --px/--py (dónde queda en la portada, desde el centro de la pantalla). En la portada van en las orillas: en medio están los textos, y encima de un vivo no se leerían. */ body[data-diseno="fiesta"] .fiesta { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: 1; overflow: hidden; pointer-events: none; --cx: 0px; --cy: -2.6rem; /* el centro de la tarjeta del sobre, desde el centro de la pantalla */ } /* Con el letrero de "invitación de ejemplo", el sobre baja su contenido (padding-top 4.5rem): la tarjeta también. */ body.con-letrero[data-diseno="fiesta"] .fiesta { --cy: -.4rem; } body[data-diseno="fiesta"] .fiesta-forma { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h, var(--w)); margin: calc(var(--h, var(--w)) / -2) 0 0 calc(var(--w) / -2); color: var(--c); transform: translate(calc(var(--cx) + var(--sx) * var(--carta)), calc(var(--cy) + var(--sy) * var(--carta))) rotate(var(--sr, 0deg)) scale(var(--ss, .82)); } body[data-diseno="fiesta"] .sobre.abriendo ~ .fiesta .fiesta-forma { transform: translate(var(--px), var(--py)) rotate(var(--pr, 0deg)) scale(1); } body[data-diseno="fiesta"] .fiesta-forma > b { display: block; width: 100%; height: 100%; } body[data-diseno="fiesta"] .fiesta svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; stroke: currentColor; } /* Las grandes, en las esquinas; las chicas, cerca de ellas (en racimos, no regadas). */ body[data-diseno="fiesta"] .fiesta-sol { --w: clamp(8rem, 42vmin, 20rem); --c: var(--fiesta-vivo); --ss: .7; --sx: .47; --sy: -.42; --px: 37vw; --py: -38svh; } body[data-diseno="fiesta"] .fiesta-estallido { --w: clamp(3.6rem, 15vmin, 7rem); --c: var(--fiesta-claro); --sx: .62; --sy: -.18; --sr: 10deg; --px: 42vw; --py: -17svh; --pr: -12deg; } body[data-diseno="fiesta"] .fiesta-bolita { --w: clamp(1rem, 4vmin, 2rem); --c: var(--fiesta-fuerte); --sx: .22; --sy: -.66; --px: 17vw; --py: -44svh; } body[data-diseno="fiesta"] .fiesta-estrella { --w: clamp(3.4rem, 14vmin, 6.5rem); --c: var(--fiesta-medio); --sx: -.44; --sy: -.52; --sr: -10deg; --px: -36vw; --py: -36svh; --pr: 14deg; } body[data-diseno="fiesta"] .fiesta-chispa { --w: clamp(2rem, 8vmin, 3.8rem); --c: var(--fiesta-fuerte); --sx: -.14; --sy: -.66; --px: -14vw; --py: -43svh; } body[data-diseno="fiesta"] .fiesta-puntos { --w: clamp(2.4rem, 10vmin, 4.6rem); --c: var(--tinta); --sx: -.66; --sy: -.2; --px: -44vw; --py: -21svh; } body[data-diseno="fiesta"] .fiesta-zigzag { --w: clamp(6rem, 24vmin, 11rem); --h: calc(var(--w) * .3); --c: var(--fiesta-fuerte); --sx: -.64; --sy: .16; --sr: 76deg; --px: -45vw; --py: 2svh; --pr: -64deg; } body[data-diseno="fiesta"] .fiesta-aro { --w: clamp(4.2rem, 18vmin, 8.5rem); --c: var(--fiesta-claro); --sx: .66; --sy: .2; --px: 47vw; --py: 7svh; } body[data-diseno="fiesta"] .fiesta-luna { --w: clamp(7rem, 34vmin, 16rem); --h: calc(var(--w) / 2); --c: var(--fiesta-claro); --sx: -.56; --sy: .66; --sr: 8deg; --px: -44vw; --py: 31svh; --pr: 90deg; } body[data-diseno="fiesta"] .fiesta-arco { --w: clamp(5rem, 22vmin, 10rem); --h: calc(var(--w) * .52); --c: var(--fiesta-vivo); --sx: -.08; --sy: .9; --px: -24vw; --py: calc(50svh - var(--h) / 2); } body[data-diseno="fiesta"] .fiesta-arco path:nth-child(2) { stroke: var(--fiesta-claro); } body[data-diseno="fiesta"] .fiesta-arco path:nth-child(3) { stroke: var(--fiesta-fuerte); } body[data-diseno="fiesta"] .fiesta-garabato { --w: clamp(5.6rem, 22vmin, 10rem); --h: calc(var(--w) * .3); --c: var(--fiesta-vivo); --sx: .5; --sy: .74; --sr: 6deg; --px: 26vw; --py: 43svh; --pr: -10deg; } body[data-diseno="fiesta"] .fiesta-pastilla { --w: clamp(3.8rem, 16vmin, 7.5rem); --h: calc(var(--w) * .4); --c: var(--fiesta-medio); --sx: .64; --sy: .44; --sr: 30deg; --px: 45vw; --py: 30svh; --pr: -35deg; } /* Los rayos de sol detrás de la tarjeta, como en un cartel de feria: tinte sobre papel, girando muy despacio. Al abrir se apagan (la portada ya trae lo suyo). */ body[data-diseno="fiesta"] .fiesta::before { content: ''; position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; background: repeating-conic-gradient(var(--fiesta-tinte) 0deg 6deg, transparent 6deg 12deg); -webkit-mask: radial-gradient(closest-side, #000 12%, transparent 48%); mask: radial-gradient(closest-side, #000 12%, transparent 48%); transform: translate(var(--cx), var(--cy)); } body[data-diseno="fiesta"] .sobre.abriendo ~ .fiesta::before { opacity: 0; } /* En el celular acostado la tarjeta y "Abrir invitación" van lado a lado: la tarjeta queda a la izquierda. */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="fiesta"] .fiesta { --cx: -7.5rem; --cy: 0px; } /* Y en la portada, la primera pantalla es bajita: abajo ya están los nombres. Las de abajo se van a los lados. */ body[data-diseno="fiesta"] .fiesta-arco { --px: -40vw; } body[data-diseno="fiesta"] .fiesta-garabato { --px: 38vw; } } @media (prefers-reduced-motion: no-preference) { /* Salen disparadas y rebotan: una curva que se pasa de largo y regresa. Cada una a su tiempo, casi juntas. */ body[data-diseno="fiesta"] .fiesta-forma { transition: transform var(--t, 1.05s) cubic-bezier(.2, 1.45, .35, 1) var(--d, 0s); } body[data-diseno="fiesta"] .fiesta-sol, body[data-diseno="fiesta"] .fiesta-luna { --t: 1.25s; } body[data-diseno="fiesta"] .fiesta-chispa, body[data-diseno="fiesta"] .fiesta-bolita, body[data-diseno="fiesta"] .fiesta-puntos { --t: .9s; --d: .04s; } /* La muestra del constructor abre sin sobre (rápido): ahí ya están en su lugar, sin salir disparadas. */ body[data-diseno="fiesta"] .sobre[hidden] ~ .fiesta .fiesta-forma { transition: none; } /* Llegan al sobre inflándose, una tras otra. */ body[data-diseno="fiesta"] .fiesta-forma > b { animation: fiesta-asoma .75s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(.2s + var(--n, 0) * 60ms); } body[data-diseno="fiesta"] .fiesta-forma:nth-child(2) > b { --n: 1; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(3) > b { --n: 2; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(4) > b { --n: 3; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(5) > b { --n: 4; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(6) > b { --n: 5; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(7) > b { --n: 6; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(8) > b { --n: 7; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(9) > b { --n: 8; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(10) > b { --n: 9; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(11) > b { --n: 10; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(12) > b { --n: 11; } @keyframes fiesta-asoma { from { transform: scale(0) rotate(-45deg); } } body[data-diseno="fiesta"] .fiesta::before { animation: fiesta-rayos 90s linear infinite; transition: opacity .7s ease; } @keyframes fiesta-rayos { to { transform: translate(var(--cx), var(--cy)) rotate(360deg); } } /* Y flotan rebotando despacio: suben frenando, caen acelerando y se aplastan tantito al tocar. */ body[data-diseno="fiesta"] .fiesta svg { animation: fiesta-rebote var(--r, 6.5s) var(--rd, 0s) infinite; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(3n) svg { --r: 7.6s; --rd: -2.4s; --giro: -7deg; } body[data-diseno="fiesta"] .fiesta-forma:nth-child(3n+1) svg { --r: 8.4s; --rd: -5s; } @keyframes fiesta-rebote { 0% { transform: translateY(0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.33, 0, .45, 1); } 48% { transform: translateY(-.8rem) rotate(var(--giro, 6deg)) scale(1); animation-timing-function: cubic-bezier(.55, 0, .75, .9); } 90% { transform: translateY(0) rotate(0deg) scale(1.05, .95); animation-timing-function: ease-out; } 100% { transform: translateY(0) rotate(0deg) scale(1); } } } /* Con "menos movimiento" ya están en su lugar de la portada, quietas (también con el sobre cerrado). */ @media (prefers-reduced-motion: reduce) { body[data-diseno="fiesta"] .fiesta-forma { transform: translate(var(--px), var(--py)) rotate(var(--pr, 0deg)); } } /* ─── la apertura: una tarjeta como boleto, con su sticker; al tocarla revienta como globo */ body[data-diseno="fiesta"] .sobre { background: transparent; gap: 2.4rem; } body[data-diseno="fiesta"] .sobre-solapa { display: none; } body[data-diseno="fiesta"] .sobre-carta { width: min(21.5rem, calc(100vw - 3rem)); min-height: 0; padding: 3.7rem 1.5rem 2.3rem; border-radius: 32px; text-align: center; background: var(--papel-2); box-shadow: .7rem .7rem 0 var(--fiesta-vivo); outline: 2px dashed var(--linea); outline-offset: -.75rem; } /* El sello es un sticker de estrella con las iniciales, pegado chueco en la orilla de arriba. */ body[data-diseno="fiesta"] .sobre-sello { top: -2.3rem; left: 50%; width: 4.7rem; height: 4.7rem; margin: 0 0 0 -2.35rem; clip-path: polygon(50% 0%, 57.6% 7.2%, 67.1% 3%, 71.8% 12.3%, 82.1% 11.7%, 83.3% 22%, 93.3% 25%, 90.9% 35.1%, 99.2% 41.3%, 93.5% 50%, 99.2% 58.7%, 90.9% 64.9%, 93.3% 75%, 83.3% 78%, 82.1% 88.3%, 71.8% 87.7%, 67.1% 97%, 57.6% 92.8%, 50% 100%, 42.4% 92.8%, 32.9% 97%, 28.2% 87.7%, 17.9% 88.3%, 16.7% 78%, 6.7% 75%, 9.1% 64.9%, 0.8% 58.7%, 6.5% 50%, 0.8% 41.3%, 9.1% 35.1%, 6.7% 25%, 16.7% 22%, 17.9% 11.7%, 28.3% 12.3%, 32.9% 3%, 42.4% 7.2%); background: var(--boton-fondo); color: var(--boton-texto); box-shadow: none; text-shadow: none; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: 0; transform: rotate(-12deg); } body[data-diseno="fiesta"] .sobre-para { font-weight: 600; font-size: var(--letra-etiqueta); letter-spacing: .26em; text-indent: .26em; color: var(--tinta-2); margin-bottom: .9rem; } body[data-diseno="fiesta"] .sobre-titulo { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: .95; color: var(--tinta); font-size: calc(3.1rem * var(--escala, 1)); margin: 0 0 1rem; } body[data-diseno="fiesta"] .sobre-fecha { font-weight: 600; letter-spacing: .22em; text-indent: .22em; color: var(--fiesta-fuerte); } body[data-diseno="fiesta"] .sobre-abrir { border: 0; border-radius: 980px; padding: 1.1rem 2.3rem; min-height: 52px; background: var(--boton-fondo); color: var(--boton-texto); font-weight: 600; font-size: var(--letra-boton); letter-spacing: .2em; text-indent: .2em; box-shadow: .3rem .3rem 0 var(--tinta); transition: opacity .3s ease; } body[data-diseno="fiesta"] .sobre-abrir:hover { background: var(--boton-fondo); color: var(--boton-texto); transform: translate(-.1rem, -.1rem); box-shadow: .4rem .4rem 0 var(--tinta); } body[data-diseno="fiesta"] .sobre-abrir:active { transform: translate(.2rem, .2rem); box-shadow: .1rem .1rem 0 var(--tinta); } body[data-diseno="fiesta"] .sobre-abrir:focus-visible { outline: 3px solid var(--fiesta-vivo); outline-offset: 4px; } @media (prefers-reduced-motion: no-preference) { body[data-diseno="fiesta"] .sobre-abrir { transition: transform .18s ease, opacity .3s ease; } /* El sticker llega pegándose y gira despacio, como los de un cartel. */ body[data-diseno="fiesta"] .sobre-sello { animation: fiesta-pegar .7s cubic-bezier(.34, 1.56, .64, 1) .5s both, fiesta-girar 26s linear 1.2s infinite; } @keyframes fiesta-pegar { from { opacity: 0; transform: scale(1.8) rotate(-60deg); } to { opacity: 1; transform: rotate(-12deg); } } @keyframes fiesta-girar { from { transform: rotate(-12deg); } to { transform: rotate(348deg); } } /* Al tocar: se aprieta, se infla y revienta; el sticker sale volando girando. */ body[data-diseno="fiesta"] .sobre.abriendo .sobre-carta { animation: fiesta-revienta .52s cubic-bezier(.3, 0, .2, 1) forwards; } @keyframes fiesta-revienta { 0% { transform: scale(1); opacity: 1; } 28% { transform: scale(.93) rotate(-1.5deg); opacity: 1; } 62% { transform: scale(1.1) rotate(1.5deg); opacity: 1; } 100% { transform: scale(1.34) rotate(3deg); opacity: 0; } } body[data-diseno="fiesta"] .sobre.abriendo .sobre-sello { animation: fiesta-sale-sello .55s cubic-bezier(.5, 0, .75, 0) forwards; } @keyframes fiesta-sale-sello { from { opacity: 1; transform: rotate(-12deg); } to { opacity: 0; transform: translateY(-5rem) scale(1.6) rotate(200deg); } } } @media (prefers-reduced-motion: reduce) { body[data-diseno="fiesta"] .sobre-carta { transition: none; } body[data-diseno="fiesta"] .sobre.abriendo .sobre-carta { transform: none; opacity: 0; } } /* ─── la portada: la foto en arcos de colores encimados, el sticker, los nombres enormes y la fecha en un boleto. Los textos llevan un halo del papel: si una forma les queda detrás en una pantalla rara, la letra se sigue leyendo. */ body[data-diseno="fiesta"] .portada { min-height: 100svh; padding: 5.2rem 0 3.5rem; } body[data-diseno="fiesta"] .portada.con-foto { color: var(--tinta); } body[data-diseno="fiesta"] .portada .monograma, body[data-diseno="fiesta"] .portada .scroll-pista { display: none; } body[data-diseno="fiesta"] .portada-fondo { position: relative; inset: auto; left: auto; order: -1; transform: rotate(-2.5deg); /* Con la pantalla bajita (la compu, el celular acostado) el arco se achica: la portada cabe en una pantalla. */ width: clamp(9rem, 30svh, min(15.5rem, 64vw)); aspect-ratio: 4 / 5; height: auto; margin: .4rem 0 1.2rem; border-radius: 999px 999px 28px 28px; border: 6px solid var(--papel-2); background: var(--papel-2); /* Tres arcos: la foto, uno vivo corrido abajo a la derecha y uno suave arriba a la izquierda, como papeles recortados. */ box-shadow: .85rem .85rem 0 var(--fiesta-vivo), -.9rem -.75rem 0 -.2rem var(--fiesta-claro); } body[data-diseno="fiesta"] .portada-fondo::after { display: none; } /* Sin foto: un sol de color suave detrás de los nombres, y las formas alrededor. La letra va sobre él (tinte medido). */ body[data-diseno="fiesta"] .portada:not(.con-foto)::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(25rem, 92vw); aspect-ratio: 1; border-radius: 50%; background: var(--fiesta-sol); transform: translate(-50%, -54%); } body[data-diseno="fiesta"] .portada .portada-etiqueta { position: relative; z-index: 3; margin: 0 0 1.5rem; padding: .62rem 1.2rem; border-radius: 980px; background: var(--boton-fondo); color: var(--boton-texto); text-shadow: none; transform: rotate(-4deg); font-size: var(--letra-etiqueta); font-weight: 600; letter-spacing: .24em; text-indent: .24em; box-shadow: .22rem .22rem 0 var(--tinta); } body[data-diseno="fiesta"] .portada.con-foto .portada-etiqueta { margin-top: -2.5rem; } body[data-diseno="fiesta"] .portada .portada-titulo { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: .88; color: var(--tinta); font-size: calc(clamp(3.9rem, min(19vw, 15svh), 7.6rem) * var(--escala, 1)); padding: 0 .04em .04em; text-shadow: none; } body[data-diseno="fiesta"] .portada .portada-frase { color: var(--tinta-2); font-size: var(--letra-lectura); margin-top: 1.3rem; text-shadow: none; } body[data-diseno="fiesta"] .portada.con-foto .portada-titulo { text-shadow: 0 0 .06em var(--papel), 0 0 .12em var(--papel); } /* Sin foto la frase va sobre el sol: ahí en la tinta (la secundaria bajaba a 4.2 con arena: pruebas/casos/diseno_fiesta.js). */ body[data-diseno="fiesta"] .portada:not(.con-foto) .portada-frase { color: var(--tinta); } body[data-diseno="fiesta"] .portada.con-foto .portada-frase { text-shadow: 0 0 4px var(--papel), 0 0 10px var(--papel); } /* La fecha: un boleto con sus muescas a los lados (la tarjeta y su sombra van en el mismo recorte) y su perforación. */ body[data-diseno="fiesta"] .portada .fecha-grande { position: relative; isolation: isolate; margin-top: 1.9rem; gap: 0; padding: .7rem 1.25rem; color: var(--tinta); text-shadow: none; font-family: var(--sans); font-weight: 600; font-size: 1.6rem; letter-spacing: -.02em; } body[data-diseno="fiesta"] .portada .fecha-grande::before, body[data-diseno="fiesta"] .portada .fecha-grande::after { content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: -1; -webkit-mask: radial-gradient(circle at 0 50%, transparent .6rem, #000 calc(.6rem + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .6rem, #000 calc(.6rem + .5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent .6rem, #000 calc(.6rem + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .6rem, #000 calc(.6rem + .5px)) right / 51% 100% no-repeat; } body[data-diseno="fiesta"] .portada .fecha-grande::before { background: var(--papel-2); } body[data-diseno="fiesta"] .portada .fecha-grande::after { background: var(--fiesta-claro); transform: translate(.4rem, .4rem); z-index: -2; } body[data-diseno="fiesta"] .portada .fecha-grande span { padding: 0 .85rem; } body[data-diseno="fiesta"] .portada .fecha-grande i { width: 0; height: 1.9rem; transform: none; background: none; border-left: 2px dashed var(--linea); } body[data-diseno="fiesta"] .portada .fecha-texto { margin-top: 1.25rem; color: var(--tinta-2); font-weight: 600; letter-spacing: .24em; text-indent: .24em; text-shadow: 0 0 4px var(--papel), 0 0 8px var(--papel); } body[data-diseno="fiesta"] .portada:not(.con-foto) .fecha-texto { text-shadow: none; } @media (prefers-reduced-motion: no-preference) { /* La portada se arma en orden mientras cae el confeti: el arco de la foto (o el sol) se infla, el sticker se pega, los nombres llegan letra por letra (invitacion.js), y luego la frase, el boleto y su renglón. Todo termina antes de que se acomoden los avisos (esperan a que lleguen los nombres), y solo con transform y opacidad. */ body[data-diseno="fiesta"] .portada:not(.con-foto)::before { animation: fiesta-sol .9s cubic-bezier(.34, 1.4, .64, 1) .05s backwards; } @keyframes fiesta-sol { from { transform: translate(-50%, -54%) scale(0); } } body[data-diseno="fiesta"] .portada-fondo { animation: fiesta-arco .8s cubic-bezier(.34, 1.45, .64, 1) backwards; } @keyframes fiesta-arco { from { opacity: 0; transform: scale(.5) rotate(-14deg); } } body[data-diseno="fiesta"] .portada .portada-etiqueta { animation: fiesta-pega .55s cubic-bezier(.34, 1.56, .64, 1) .3s backwards; } @keyframes fiesta-pega { from { opacity: 0; transform: scale(1.9) rotate(-22deg); } } body[data-diseno="fiesta"] .portada .portada-frase { animation: fiesta-sube .7s cubic-bezier(.22, .61, .36, 1) .55s backwards; } body[data-diseno="fiesta"] .portada .fecha-texto { animation: fiesta-sube .7s cubic-bezier(.22, .61, .36, 1) .85s backwards; } @keyframes fiesta-sube { from { opacity: 0; transform: translateY(1rem); } } body[data-diseno="fiesta"] .portada .fecha-grande { animation: fiesta-boleto .7s cubic-bezier(.34, 1.5, .64, 1) .7s backwards; } @keyframes fiesta-boleto { from { opacity: 0; transform: scale(.55) rotate(7deg); } } } /* ─── las secciones: tarjetas de esquinas muy redondas con su sombra de color desplazada, como stickers pegados. La sombra va cambiando de color de una a otra; el título, grande y con un garabato debajo. */ body[data-diseno="fiesta"] .seccion { position: relative; margin: 1.4rem 0 2.3rem; padding: 2.7rem 1.35rem 2.5rem; border-radius: 34px; background: var(--papel-2); box-shadow: .6rem .6rem 0 var(--fiesta-sombra, var(--fiesta-vivo)); } body[data-diseno="fiesta"] .seccion:nth-of-type(4n+3) { --fiesta-sombra: var(--fiesta-claro); } body[data-diseno="fiesta"] .seccion:nth-of-type(4n) { --fiesta-sombra: var(--fiesta-medio); } body[data-diseno="fiesta"] .seccion:nth-of-type(4n+1) { --fiesta-sombra: var(--fiesta-fuerte); } /* Y un sticker de estrella en una esquina, que cambia de lado. */ body[data-diseno="fiesta"] .seccion::after { content: ''; position: absolute; top: -1.15rem; right: 1.6rem; width: 2.5rem; height: 2.5rem; pointer-events: none; background: var(--fiesta-sombra, var(--fiesta-vivo)); transform: rotate(14deg); clip-path: polygon(50% 3%, 62.9% 34.2%, 96.6% 36.9%, 70.9% 58.8%, 78.8% 91.6%, 50% 74%, 21.2% 91.6%, 29.1% 58.8%, 3.4% 36.9%, 37.1% 34.2%); } body[data-diseno="fiesta"] .seccion:nth-of-type(odd)::after { right: auto; left: 1.6rem; transform: rotate(-12deg); } body[data-diseno="fiesta"] .seccion .regla { display: none; } body[data-diseno="fiesta"] .titulo-seccion { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 9.4vw, 2.8rem); line-height: .98; letter-spacing: -.015em; text-transform: none; text-indent: 0; color: var(--tinta); margin: 0 0 1.9rem; text-wrap: balance; } body[data-diseno="fiesta"] .titulo-seccion::after { content: ''; display: block; width: 4.4rem; height: .78rem; margin: .8rem auto 0; background: var(--fiesta-sombra, var(--fiesta-vivo)); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2058%2012'%3E%3Cpath%20d='M3%206c4.5-5%208.5-5%2013%200s8.5%205%2013%200%208.5-5%2013%200%208.5%205%2013%200'%20fill='none'%20stroke='black'%20stroke-width='3.6'%20stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2058%2012'%3E%3Cpath%20d='M3%206c4.5-5%208.5-5%2013%200s8.5%205%2013%200%208.5-5%2013%200%208.5%205%2013%200'%20fill='none'%20stroke='black'%20stroke-width='3.6'%20stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } body[data-diseno="fiesta"] .parrafo { font-family: var(--sans); font-weight: 400; font-size: var(--letra-lectura-sans); line-height: 1.65; color: var(--tinta-2); } body[data-diseno="fiesta"] .nota-chica, body[data-diseno="fiesta"] .etiqueta { color: var(--tinta-2); } /* La cuenta regresiva: cuatro stickers de color, cada uno chueco para su lado (con rotate: el giro de los números y la cascada mueven transform, y así no se pisan). */ body[data-diseno="fiesta"] .cuenta-caja { gap: .6rem; } body[data-diseno="fiesta"] .cuenta-dato { padding: 1.05rem .2rem .9rem; border-radius: 22px; background: var(--fiesta-tinte); rotate: -3deg; } body[data-diseno="fiesta"] .cuenta-dato:nth-child(2) { background: var(--fiesta-tinte-2); rotate: 2.5deg; } body[data-diseno="fiesta"] .cuenta-dato:nth-child(3) { rotate: -1.5deg; } body[data-diseno="fiesta"] .cuenta-dato:nth-child(4) { background: var(--fiesta-tinte-2); rotate: 3deg; } body[data-diseno="fiesta"] .cuenta-dato + .cuenta-dato::before { display: none; } body[data-diseno="fiesta"] .cuenta-dato b { font-family: var(--sans); font-weight: 600; letter-spacing: -.045em; color: var(--tinta); font-size: clamp(1.9rem, 8.4vw, 2.6rem); } body[data-diseno="fiesta"] .cuenta-dato span { color: var(--tinta); font-weight: 600; font-size: var(--letra-minima); } body[data-diseno="fiesta"] .cuenta-ya { font-family: var(--serif); font-style: normal; font-weight: 600; color: var(--fiesta-fuerte); } body[data-diseno="fiesta"] .padrinos { gap: .75rem; } body[data-diseno="fiesta"] .padrino { padding: 1rem 1rem 1.05rem; border-radius: 22px; background: var(--fiesta-tinte-2); } body[data-diseno="fiesta"] .padrino dt { color: var(--fiesta-fuerte); font-weight: 600; letter-spacing: .2em; text-indent: .2em; font-size: var(--letra-etiqueta); } body[data-diseno="fiesta"] .padrino dd { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; line-height: 1.35; letter-spacing: -.02em; color: var(--tinta); } /* El día: la línea es un caminito punteado y cada ícono un botón de color que se enciende. */ body[data-diseno="fiesta"] .itinerario .hora { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; color: var(--tinta); } body[data-diseno="fiesta"] .itinerario .que { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; letter-spacing: -.015em; color: var(--tinta); } body[data-diseno="fiesta"] .itinerario .donde { font-weight: 400; color: var(--tinta-2); } body[data-diseno="fiesta"] .itinerario li::before { width: 3px; left: calc(3.95rem + 1.25rem - 1.5px); background: repeating-linear-gradient(var(--fiesta-medio) 0 7px, transparent 7px 13px); } body[data-diseno="fiesta"] .icono-momento { background: var(--papel-2); border: 2px solid var(--fiesta-medio); stroke: var(--tinta); } body[data-diseno="fiesta"] .itinerario li.encendido .icono-momento { background: var(--boton-fondo); border-color: var(--boton-fondo); stroke: var(--boton-texto); box-shadow: .2rem .2rem 0 var(--fiesta-claro); } body[data-diseno="fiesta"] .lugar, body[data-diseno="fiesta"] .confirmar, body[data-diseno="fiesta"] .pase { backdrop-filter: none; } body[data-diseno="fiesta"] .lugar { background: var(--fiesta-tinte-2); border: 0; border-radius: 24px; padding: 1.7rem 1.25rem; } body[data-diseno="fiesta"] .lugar h3 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.01em; } body[data-diseno="fiesta"] .lugar p { color: var(--tinta-2); } body[data-diseno="fiesta"] .lugar .tienda-etiqueta, body[data-diseno="fiesta"] .datos-transferencia dt { color: var(--tinta-2); font-weight: 600; } body[data-diseno="fiesta"] .lugar .tienda-numero { font-family: var(--sans); font-weight: 600; letter-spacing: .04em; font-size: 1.45rem; } body[data-diseno="fiesta"] .datos-transferencia dd { font-family: var(--sans); font-weight: 500; font-size: 1.1rem; } body[data-diseno="fiesta"] .enlace-tienda, body[data-diseno="fiesta"] .link-boton { color: var(--tinta-2); } body[data-diseno="fiesta"] .copiado { color: var(--fiesta-fuerte); font-weight: 600; } /* El código de vestimenta, como un sticker grande y chueco. */ body[data-diseno="fiesta"] .vestimenta { width: fit-content; max-width: 100%; margin: .2rem auto 0; padding: .35rem 1.3rem .5rem; border-radius: 26px; rotate: -3deg; background: var(--boton-fondo); color: var(--boton-texto); box-shadow: .3rem .3rem 0 var(--tinta); font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 8.6vw, 2.5rem); letter-spacing: -.01em; line-height: 1.1; } body[data-diseno="fiesta"] .vestimenta + .nota-chica { margin-top: 1.4rem; } body[data-diseno="fiesta"] .vestimenta-fotos { gap: .9rem; } /* Los botones: píldoras con orilla; al pasar encima se llenan y les sale su sombra. */ body[data-diseno="fiesta"] .boton { border-radius: 980px; border: 2px solid var(--tinta); color: var(--tinta); font-weight: 600; letter-spacing: .16em; text-indent: .16em; transition: background .25s ease, color .25s ease, border-color .25s ease; } body[data-diseno="fiesta"] .boton:hover { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); box-shadow: .22rem .22rem 0 var(--tinta); transform: translate(-.1rem, -.1rem); } /* Confirmar: sin caja adentro de la tarjeta; opciones como stickers y el botón con su sombra dura. */ body[data-diseno="fiesta"] .confirmar { background: none; border: 0; padding: 0; margin-top: 0; } body[data-diseno="fiesta"] .confirmar-limite { color: var(--fiesta-fuerte); font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--letra-nota); margin-top: -.6rem; } body[data-diseno="fiesta"] .confirmar-saludo { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; line-height: 1.2; } body[data-diseno="fiesta"] .opcion { border-radius: 18px; border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); font-weight: 600; letter-spacing: .1em; } body[data-diseno="fiesta"] .opcion:hover { border-color: var(--tinta); color: var(--tinta); } body[data-diseno="fiesta"] .opcion[aria-pressed="true"] { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); box-shadow: .25rem .25rem 0 var(--tinta); } body[data-diseno="fiesta"] .campo { border-radius: 16px; border: 2px solid var(--linea); background: var(--papel); } body[data-diseno="fiesta"] .campo:focus { outline: 2px solid var(--fiesta-fuerte); outline-offset: 1px; border-color: var(--fiesta-fuerte); } body[data-diseno="fiesta"] .contador-btn { border: 2px solid var(--linea); color: var(--tinta); background: var(--papel); } body[data-diseno="fiesta"] .contador-btn:hover:not([disabled]) { border-color: var(--tinta); color: var(--tinta); } body[data-diseno="fiesta"] .contador-n { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; } body[data-diseno="fiesta"] .enviar { border-radius: 980px; font-weight: 600; letter-spacing: .18em; box-shadow: .3rem .3rem 0 var(--tinta); } body[data-diseno="fiesta"] .gracias { font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 1.7rem; letter-spacing: -.01em; color: var(--fiesta-fuerte); } body[data-diseno="fiesta"] .pase { background: var(--fiesta-tinte-2); border: 0; border-radius: 24px; } body[data-diseno="fiesta"] .pase-nombre { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; } /* Las fotos: stickers con su orilla de papel y su sombra de color, cada una chueca para su lado. */ body[data-diseno="fiesta"] .galeria { gap: .9rem; } body[data-diseno="fiesta"] .galeria-foto, body[data-diseno="fiesta"] .vestimenta-fotos .galeria-foto { border-radius: 22px; overflow: hidden; border: 5px solid var(--papel-2); background: var(--papel-2); box-shadow: .45rem .45rem 0 var(--fiesta-vivo); rotate: -2deg; } body[data-diseno="fiesta"] .galeria-foto:nth-child(even) { rotate: 2deg; box-shadow: .45rem .45rem 0 var(--fiesta-claro); } body[data-diseno="fiesta"] .galeria-foto:nth-child(3n) { box-shadow: .45rem .45rem 0 var(--fiesta-medio); } body[data-diseno="fiesta"] .galeria img { border-radius: 16px; } body[data-diseno="fiesta"] #secGaleria.galeria-fija { margin: 0; border-radius: 0; background: none; box-shadow: none; } body[data-diseno="fiesta"] #secGaleria.galeria-fija::after { display: none; } body[data-diseno="fiesta"] #secGaleria.galeria-fija .galeria { padding-top: 1rem; padding-bottom: 1.6rem; } /* Fija y de lado, todas del mismo alto: la primera (4:3 en la cuadrícula) dejaba papel en blanco dentro de su marco. */ body[data-diseno="fiesta"] #secGaleria.galeria-fija .galeria img, body[data-diseno="fiesta"] #secGaleria.galeria-fija .galeria-foto:first-child img { aspect-ratio: 4 / 5; } body[data-diseno="fiesta"] .video video { border-radius: 22px; box-shadow: .45rem .45rem 0 var(--fiesta-vivo); } body[data-diseno="fiesta"] .video figcaption { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--letra-nota); color: var(--tinta-2); } body[data-diseno="fiesta"] .cinta-fotos img { border-radius: 18px; border: 4px solid var(--papel-2); box-shadow: .35rem .35rem 0 var(--fiesta-claro); } body[data-diseno="fiesta"] .cinta-fotos-pista.al-reves img { box-shadow: .35rem .35rem 0 var(--fiesta-vivo); } /* El pie: los nombres en grande. */ body[data-diseno="fiesta"] .pie .regla { display: none; } body[data-diseno="fiesta"] #pieTitulo { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; font-size: 2.8rem; line-height: 1; } body[data-diseno="fiesta"] .pie-marca { color: var(--tinta-2); } body[data-diseno="fiesta"] .pie-marca span { color: var(--fiesta-fuerte); } body[data-diseno="fiesta"] .musica { background: var(--papel-2); border: 2px solid var(--tinta); box-shadow: .18rem .18rem 0 var(--tinta); backdrop-filter: none; } body[data-diseno="fiesta"] .musica-onda { background: var(--fiesta-fuerte); } /* Los avisos de la portada: stickers de vidrio con su sombra dura, y sus círculos del color de la fiesta. */ /* Con su ancho de siempre (max-content): si ponerAvisos lo mueve cerca de la orilla derecha de la columna, con el ancho automático se encogía a lo que quedaba y salía "Faltan…" (se vio en la compu, sin foto). */ body[data-diseno="fiesta"] .aviso-portada { width: max-content; border-radius: 20px; box-shadow: .28rem .28rem 0 var(--fiesta-claro), inset 0 0 0 1px var(--vidrio-aviso-2); } body[data-diseno="fiesta"] .aviso-portada-icono { background: var(--boton-fondo); } body[data-diseno="fiesta"] .aviso-portada-icono .icono-momento { stroke: var(--boton-texto); } body[data-diseno="fiesta"] .aviso-a { left: .7rem; top: 6.6rem; } body[data-diseno="fiesta"] .aviso-b { left: auto; right: .7rem; top: 17rem; } /* El botón que acompaña: con su sombra dura, y en vez del anillo que late, un meneíto de vez en cuando. */ body[data-diseno="fiesta"] .confirmar-flotante { box-shadow: .25rem .25rem 0 var(--tinta); } /* La fecha que llega desde enorme: números con peso, y la capa de color con confeti de puntitos. */ body[data-diseno="fiesta"] .fecha-escena-num { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; } body[data-diseno="fiesta"] .fecha-escena-num i { width: .12em; height: .12em; opacity: 1; background: var(--fiesta-vivo); } body[data-diseno="fiesta"] .fecha-capa-color .fecha-escena-num i { background: currentColor; } body[data-diseno="fiesta"] .fecha-escena-antes, body[data-diseno="fiesta"] .fecha-escena-dia { font-weight: 600; } body[data-diseno="fiesta"] .fecha-capa-color { background-image: radial-gradient(circle, color-mix(in srgb, var(--boton-texto) 16%, transparent) 2px, transparent 2.6px); background-size: 26px 26px; } /* La barra de avance: los colores de la fiesta. */ body[data-diseno="fiesta"] .avance-invitacion { height: 4px; background: linear-gradient(90deg, var(--fiesta-claro), var(--fiesta-vivo) 55%, var(--fiesta-fuerte)); } @media (prefers-reduced-motion: no-preference) { body[data-diseno="fiesta"] .boton { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } body[data-diseno="fiesta"] .confirmar-flotante.visible { animation: fiesta-menear 4.2s ease-in-out 1.6s infinite; } @keyframes fiesta-menear { 0%, 76%, 100% { transform: translate(-50%, 0); } 80% { transform: translate(-50%, -5px) rotate(-3deg); } 85% { transform: translate(-50%, -5px) rotate(3deg); } 90% { transform: translate(-50%, -2px) rotate(-2deg); } 95% { transform: translate(-50%, 0) rotate(1deg); } } } /* El celular acostado: la tarjeta del sobre más chaparrita, para que quepa entera con el letrero de ejemplo. */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="fiesta"] .sobre-carta { padding: 2.9rem 1.4rem 1.7rem; } body[data-diseno="fiesta"] .sobre-titulo { font-size: calc(2.4rem * var(--escala, 1)); } body[data-diseno="fiesta"] .sobre-sello { top: -1.9rem; width: 3.9rem; height: 3.9rem; margin-left: -1.95rem; font-size: 1.3rem; } } @media (min-width: 64rem) { body[data-diseno="fiesta"] .portada { padding-top: 3.6rem; padding-bottom: 2.6rem; } } @media (min-width: 48rem) { body[data-diseno="fiesta"] .seccion { padding: 3.2rem 2.4rem 3rem; } body[data-diseno="fiesta"] .aviso-a { left: -4rem; } body[data-diseno="fiesta"] .aviso-b { right: -4rem; } } /* ═══════════════ POLAROID (28-sep-2026) — fotos como polaroids con cinta sobre un tablero de papel, y notas a mano Cálido y personal (bodas relajadas, cumpleaños, baby shower). El fondo es un tablero de papel kraft teñido con la paleta; las fotos son polaroids (marco claro, la orilla de abajo ancha, un poco giradas, pegadas con cinta); los títulos y los pies de foto van escritos a mano (Pinyon); cada sección es una tarjeta de papel pegada o clavada, cada una chueca a su manera (poquito: se lee perfecto). La apertura: tres polaroids caen sobre el tablero y la de arriba se revela, de un gris lechoso a la foto. El marco de las polaroids es un OBJETO: claro en todas las paletas (en la noche, crema) y lo que va escrito encima lleva su propia tinta. Los colores salen todos de la paleta; el contraste de cada par está medido en las 24 y en los colores propios (pruebas/casos/contraste.js). Lo chueco va en `rotate`, no en `transform`: así las animaciones que mueven la tarjeta (la que se endereza, la foto que cae) no le quitan lo chueco al terminar. */ body[data-diseno="polaroid"] { /* El tablero: kraft del color de la fiesta (su acento suave, apagado con la tinta tenue). */ --polaroid-tablero: color-mix(in srgb, color-mix(in srgb, var(--acento-2) 60%, var(--tinta-3)) 30%, var(--papel)); --polaroid-luz: color-mix(in srgb, var(--papel-2) 60%, transparent); --polaroid-orillas: color-mix(in srgb, var(--acento) 13%, transparent); --polaroid-mancha: color-mix(in srgb, var(--acento-2) 22%, transparent); /* Lo que va escrito directo sobre el tablero: la tinta secundaria, un poco más oscura (5.5 o más en las 24 paletas y en los colores propios; la secundaria sola bajaba a 3.7). */ --polaroid-tinta-tablero: color-mix(in srgb, var(--tinta) 40%, var(--tinta-2)); /* Las polaroids: el marco, la tinta con la que se escribe en él y el gris lechoso de la foto sin revelar. */ --polaroid-marco: var(--papel-2); --polaroid-tinta: var(--tinta); --polaroid-tinta-2: var(--tinta-2); --polaroid-lechoso: color-mix(in srgb, var(--tinta-3) 40%, var(--polaroid-marco)); /* La "foto" que no hay (sin foto de portada): el par del botón (4.5 o más en todas), con un poco de luz. */ --polaroid-foto-a: var(--boton-fondo); --polaroid-foto-b: color-mix(in srgb, var(--boton-fondo) 72%, var(--acento-2)); --polaroid-foto-luz: color-mix(in srgb, var(--acento-2) 55%, transparent); --polaroid-foto-letra: var(--boton-texto); --polaroid-foto-claro: color-mix(in srgb, var(--acento-2) 70%, var(--polaroid-marco)); --polaroid-numero: color-mix(in srgb, var(--acento-2) 34%, var(--polaroid-marco)); /* Las tarjetas de papel, lo que se escribe a mano en ellas (el hondo se lee: 5.1 o más; el acento daba 3.9) y sus notas. */ --polaroid-carta: var(--papel); --polaroid-carta-luz: color-mix(in srgb, var(--papel-2) 70%, var(--polaroid-carta)); --polaroid-nota: color-mix(in srgb, var(--acento-2) 16%, var(--polaroid-marco)); --polaroid-pluma: var(--acento-hondo); --polaroid-raya: color-mix(in srgb, var(--tinta) 24%, transparent); /* La cinta (washi translúcida), su brillo, y las sombras de papel sobre el tablero. */ --polaroid-cinta: color-mix(in srgb, var(--acento-2) 50%, transparent); --polaroid-cinta-2: color-mix(in srgb, var(--polaroid-marco) 55%, transparent); --polaroid-sombra: color-mix(in srgb, var(--tinta) 32%, transparent); --polaroid-sombra-2: color-mix(in srgb, var(--tinta) 14%, transparent); /* La polaroid de la portada: la foto cuadrada, su orilla y el pie ancho, todo desde el ancho de la foto. */ --polaroid-foto: min(19rem, 76vw, 40svh); --polaroid-orilla: calc(var(--polaroid-foto) * .065); --polaroid-pie: calc(var(--polaroid-foto) * .26); background: var(--polaroid-tablero); } /* La noche: un tablero oscuro, tarjetas apenas más claras y las polaroids en crema, escritas con la tinta oscura. */ body[data-diseno="polaroid"][data-paleta="noche"] { --polaroid-tablero: color-mix(in srgb, var(--acento-2) 9%, var(--papel)); --polaroid-luz: color-mix(in srgb, var(--acento) 9%, transparent); --polaroid-orillas: color-mix(in srgb, var(--papel) 70%, transparent); --polaroid-mancha: color-mix(in srgb, var(--acento-2) 8%, transparent); --polaroid-marco: var(--tinta); --polaroid-tinta: var(--papel); --polaroid-tinta-2: color-mix(in srgb, var(--papel) 72%, var(--tinta)); --polaroid-carta: color-mix(in srgb, var(--tinta) 7%, var(--papel-2)); --polaroid-carta-luz: color-mix(in srgb, var(--tinta) 10%, var(--papel-2)); --polaroid-nota: color-mix(in srgb, var(--tinta) 12%, var(--papel-2)); --polaroid-pluma: var(--acento); --polaroid-cinta: color-mix(in srgb, var(--acento) 42%, transparent); --polaroid-sombra: color-mix(in srgb, var(--papel) 90%, transparent); --polaroid-sombra-2: color-mix(in srgb, var(--papel) 60%, transparent); } /* La luz del tablero (más clara arriba, las orillas un poco más oscuras) y el grano del papel, más presente. */ body[data-diseno="polaroid"]::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 85% 60% at 50% 28%, var(--polaroid-luz), transparent 72%), radial-gradient(ellipse 55% 38% at 12% 18%, var(--polaroid-mancha), transparent 70%), radial-gradient(ellipse 50% 42% at 92% 62%, var(--polaroid-mancha), transparent 70%), radial-gradient(ellipse 65% 45% at 28% 96%, var(--polaroid-mancha), transparent 70%), radial-gradient(ellipse 140% 105% at 50% 45%, transparent 58%, var(--polaroid-orillas) 100%); } body[data-diseno="polaroid"]::before { opacity: .8; } body[data-diseno="polaroid"][data-paleta="noche"]::before { opacity: .45; } body[data-diseno="polaroid"] #invitacion::before, body[data-diseno="polaroid"] .sobre-carta::before { display: none; } body[data-diseno="polaroid"] main { padding: 0 1.1rem 4rem; } /* ─── la apertura: tres polaroids caen sobre el tablero, una sobre otra, y la de arriba se revela */ body[data-diseno="polaroid"] .sobre { --polaroid-s: min(18rem, calc(100vw - 3rem), 70vw, 52svh); --polaroid-s-orilla: calc(var(--polaroid-s) * .065); background: transparent; gap: 2.3rem; /* Las polaroids de abajo van giradas y al caer y al irse se salen de lado: el sobre nunca se arrastra de lado. */ overflow-x: hidden; } body[data-diseno="polaroid"] .sobre.abriendo { overflow: hidden; } body[data-diseno="polaroid"] .sobre::before, body[data-diseno="polaroid"] .sobre::after, body[data-diseno="polaroid"] .sobre-carta { grid-area: 1 / 1; } body[data-diseno="polaroid"] .sobre-abrir { grid-area: 2 / 1; } /* Las dos de abajo: se asoma su marco y un pedazo de foto (luz de colores de la paleta, como una foto fuera de foco). */ body[data-diseno="polaroid"] .sobre::before, body[data-diseno="polaroid"] .sobre::after { content: ''; box-sizing: border-box; z-index: 0; align-self: center; justify-self: center; width: var(--polaroid-s); aspect-ratio: .84; padding: var(--polaroid-s-orilla) var(--polaroid-s-orilla) calc(var(--polaroid-s) * .26); background: radial-gradient(circle at 68% 44%, var(--polaroid-cinta-2), transparent 24%) content-box, linear-gradient(180deg, var(--polaroid-foto-claro) 0%, var(--polaroid-foto-luz) 52%, var(--polaroid-foto-b) 100%) content-box, var(--polaroid-marco); box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 18px 34px -18px var(--polaroid-sombra); } body[data-diseno="polaroid"] .sobre::before { rotate: -9deg; translate: -9% 3%; } body[data-diseno="polaroid"] .sobre::after { z-index: 1; rotate: 7deg; translate: 9% -2%; } /* La de arriba: la foto de la portada (o, sin foto, el monograma sobre el color de la fiesta) y los nombres en su pie. */ body[data-diseno="polaroid"] .sobre-carta { --ancho-carta: var(--polaroid-s); z-index: 2; width: var(--polaroid-s); min-height: 0; padding: var(--polaroid-s-orilla) var(--polaroid-s-orilla) 0; justify-content: flex-start; background: var(--polaroid-marco); rotate: -2deg; box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 26px 46px -20px var(--polaroid-sombra); transition: opacity .35s ease; } body[data-diseno="polaroid"] .sobre.abriendo .sobre-carta { transform: none; } body[data-diseno="polaroid"] .sobre-solapa { position: relative; inset: auto; flex: none; height: auto; aspect-ratio: 1; background: var(--polaroid-lechoso); clip-path: none; filter: none; transform: none; transition: none; } body[data-diseno="polaroid"] .sobre.abriendo .sobre-solapa { transform: none; } body[data-diseno="polaroid"] .sobre-foto, body[data-diseno="polaroid"] .sobre-sello { position: absolute; z-index: 1; top: var(--polaroid-s-orilla); left: var(--polaroid-s-orilla); width: calc(100% - 2 * var(--polaroid-s-orilla)); height: auto; aspect-ratio: 1; margin: 0; } body[data-diseno="polaroid"] .sobre-foto { display: block; object-fit: cover; } body[data-diseno="polaroid"] .sobre-sello { clip-path: none; box-shadow: none; text-shadow: none; transition: none; animation: none; font-family: var(--script); font-size: calc(var(--polaroid-s) * .2); letter-spacing: 0; color: var(--polaroid-foto-letra); background: radial-gradient(circle at 18% 20%, var(--polaroid-foto-luz), transparent 26%), radial-gradient(circle at 84% 84%, var(--polaroid-cinta-2), transparent 22%), linear-gradient(160deg, var(--polaroid-foto-b), var(--polaroid-foto-a)); } body[data-diseno="polaroid"] .sobre.con-foto .sobre-sello { display: none; } body[data-diseno="polaroid"] .sobre.abriendo .sobre-sello { opacity: 1; transform: none; } /* El pie arranca con aire: la polaroid va girada y la esquina de abajo de la foto baja unos pixeles sobre el "para quién". Abajo, menos (como acostado): con la fecha de la escala (12.8 px), en la vista previa de una laptop el sobre de nombres largos medía 7 px más que la pantalla y la barra de "Comprar ahora" tapaba "Abrir invitación" (revisar_portadas --sobre, 29-sep-2026). Arriba de la fecha no se quita nada: pegada a los nombres, la letra de mano se le encima. */ body[data-diseno="polaroid"] .sobre-cuerpo { display: grid; align-content: center; min-height: calc(var(--polaroid-s) * .27); padding: 1.05rem 0 .6rem; /* El aire de los lados, como margen y no como relleno: ajustarNombres mide el ancho de adentro de esta caja, y el relleno lo contaba como espacio para el nombre (la regla de Minimal, al juntar los diseños, 28-sep-2026). */ margin-inline: .2rem; } /* Con aire entre renglones: la letra de mano (Pinyon) dibuja más arriba y más abajo que su renglón, y pegada al "para quién" y a la fecha se les encimaba (lo midió revisar_portadas.mjs --sobre, en todas las pantallas). */ body[data-diseno="polaroid"] .sobre-para { margin-bottom: .95rem; font-family: var(--serif); font-style: italic; font-size: 1.02rem; font-weight: 400; letter-spacing: .01em; text-indent: 0; text-transform: none; line-height: 1.3; color: var(--polaroid-tinta-2); } body[data-diseno="polaroid"] .sobre-titulo { font-size: calc(2.1rem * var(--escala, 1)); line-height: 1.1; margin: 0 0 .8rem; color: var(--polaroid-tinta); } body[data-diseno="polaroid"] .sobre-fecha { color: var(--polaroid-tinta-2); } /* La cinta que la pega: washi translúcida, con las puntas rasgadas. */ body[data-diseno="polaroid"] .sobre-solapa::after, body[data-diseno="polaroid"] .portada::after, body[data-diseno="polaroid"] .seccion::before, body[data-diseno="polaroid"] .galeria-foto::before, body[data-diseno="polaroid"] .pase::before { content: ''; position: absolute; z-index: 3; pointer-events: none; background: linear-gradient(172deg, var(--polaroid-cinta-2), transparent 45%, var(--polaroid-cinta-2) 90%), var(--polaroid-cinta); clip-path: polygon(0 6%, 3% 0, 6% 7%, 9% 1%, 91% 0, 94% 6%, 97% 0, 100% 8%, 98% 30%, 100% 52%, 97% 74%, 100% 94%, 96% 100%, 93% 94%, 90% 100%, 10% 100%, 7% 93%, 4% 100%, 1% 94%, 3% 72%, 0 50%, 2% 28%); } body[data-diseno="polaroid"] .sobre-solapa::after { top: calc(-1 * var(--polaroid-s-orilla) - .8rem); left: 50%; width: 40%; height: 1.65rem; margin-left: -20%; rotate: 4deg; } body[data-diseno="polaroid"] .sobre-abrir { z-index: 3; border: 0; border-radius: 2px; padding: 1.05rem 2.2rem; font-weight: 500; letter-spacing: .24em; background: var(--polaroid-marco); color: var(--polaroid-tinta); box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 12px 22px -12px var(--polaroid-sombra); } body[data-diseno="polaroid"] .sobre-abrir:hover { background: var(--boton-fondo); color: var(--boton-texto); } /* El celular acostado: la pila va a un lado del botón y las polaroids son anchas (como las instantáneas de formato ancho), para que la de arriba quepa entera en la pantalla bajita, también con el letrero de ejemplo encima. La foto de la portada, más grande: a lo alto no cabe de todos modos (se baja), y chiquita se perdía. */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="polaroid"] { --polaroid-foto: min(19rem, 76vw, 62svh); } body[data-diseno="polaroid"] .sobre { --polaroid-s: min(20rem, calc(100vw - 3rem), 42vw); padding-bottom: .75rem; } body[data-diseno="polaroid"] .sobre-abrir { grid-area: 1 / 2; } body[data-diseno="polaroid"] .sobre-solapa, body[data-diseno="polaroid"] .sobre-foto, body[data-diseno="polaroid"] .sobre-sello { aspect-ratio: 2 / 1; } body[data-diseno="polaroid"] .sobre::before, body[data-diseno="polaroid"] .sobre::after { aspect-ratio: 1.3; padding-bottom: calc(var(--polaroid-s) * .2); } body[data-diseno="polaroid"] .sobre-cuerpo { min-height: 0; padding: .9rem 0 .6rem; } body[data-diseno="polaroid"] .sobre-titulo { font-size: calc(1.75rem * var(--escala, 1)); margin-bottom: .8rem; } body[data-diseno="polaroid"] .sobre-para { margin-bottom: 1rem; } } @media (prefers-reduced-motion: no-preference) { /* Caen una tras otra, con un rebote suave, y se acomodan. */ body[data-diseno="polaroid"] .sobre::before { animation: polaroid-cae 1s cubic-bezier(.3,1.3,.5,1) .1s both; } body[data-diseno="polaroid"] .sobre::after { animation: polaroid-cae 1s cubic-bezier(.3,1.3,.5,1) .32s both; } body[data-diseno="polaroid"] .sobre-carta { animation: polaroid-cae-arriba 1.05s cubic-bezier(.3,1.25,.5,1) .56s both; } @keyframes polaroid-cae { from { opacity: 0; transform: translateY(-52vh) rotate(-18deg) scale(1.18); } 35% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes polaroid-cae-arriba { from { opacity: 0; transform: translateY(-56vh) rotate(14deg) scale(1.2); } 35% { opacity: 1; } to { opacity: 1; transform: none; } } /* Y la de arriba se revela: de un gris lechoso a la foto (solo opacidad; el gris es la foto sin revelar). */ body[data-diseno="polaroid"] .sobre-foto { opacity: 0; } body[data-diseno="polaroid"] .sobre-foto.lista { animation: polaroid-revela 2.6s cubic-bezier(.45,0,.4,1) 1.2s both; } body[data-diseno="polaroid"] .sobre-sello { animation: polaroid-revela 2.6s cubic-bezier(.45,0,.4,1) 1.5s both; } @keyframes polaroid-revela { from { opacity: 0; } 35% { opacity: .22; } to { opacity: 1; } } body[data-diseno="polaroid"] .sobre-abrir { animation: polaroid-asoma .7s cubic-bezier(.22,.61,.36,1) 1.5s both; } @keyframes polaroid-asoma { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } } /* Al abrir: la de arriba se levanta y se va volando; las de abajo se deslizan fuera del tablero. Se van rápido: la polaroid de la portada ya viene cayendo detrás (TIEMPOS.polaroid.aparece) y dos fotos iguales encimadas se ven mal. */ body[data-diseno="polaroid"] .sobre.abriendo .sobre-carta { animation: polaroid-se-va .72s cubic-bezier(.45,0,.75,.3) both; } body[data-diseno="polaroid"] .sobre.abriendo::after { animation: polaroid-se-va-der .62s cubic-bezier(.45,0,.75,.3) .04s both; } body[data-diseno="polaroid"] .sobre.abriendo::before { animation: polaroid-se-va-izq .62s cubic-bezier(.45,0,.75,.3) .08s both; } body[data-diseno="polaroid"] .sobre.abriendo .sobre-abrir { animation: polaroid-se-apaga .25s ease both; } @keyframes polaroid-se-va { 0% { opacity: 1; transform: none; } 22% { opacity: 1; transform: translateY(-.6rem) rotate(1.5deg) scale(1.04); } 72% { opacity: 0; } 100% { opacity: 0; transform: translate(6vw, -72vh) rotate(13deg) scale(1.02); } } @keyframes polaroid-se-va-der { 65% { opacity: 1; } to { opacity: 0; transform: translate(72vw, -12vh) rotate(22deg); } } @keyframes polaroid-se-va-izq { 65% { opacity: 1; } to { opacity: 0; transform: translate(-72vw, 9vh) rotate(-24deg); } } @keyframes polaroid-se-apaga { to { opacity: 0; transform: translateY(.4rem); } } } /* Con menos movimiento: la pila ya está sobre el tablero, la foto revelada; al abrir, se desvanece. */ @media (prefers-reduced-motion: reduce) { body[data-diseno="polaroid"] .sobre.abriendo::before, body[data-diseno="polaroid"] .sobre.abriendo::after, body[data-diseno="polaroid"] .sobre.abriendo .sobre-carta { opacity: 0; } } /* ─── la portada: la foto principal es una polaroid grande, con los nombres escritos en su pie Las filas de la rejilla: 1 la etiqueta, 2 la foto (o el monograma), 3 los nombres, y abajo la frase y la fecha. El marco es un solo papel detrás de las filas 2 y 3, y los tres giran lo mismo sobre el MISMO punto (el centro de la orilla de abajo de la foto): así el pie, la foto y el marco se ven como una sola polaroid, sin importar lo que midan. */ body[data-diseno="polaroid"] .portada { width: var(--polaroid-foto); margin-inline: auto; padding: 4.4rem 0 3.8rem; grid-template-columns: minmax(0, 1fr); align-content: center; } body[data-diseno="polaroid"] .portada.con-foto { color: var(--tinta); } body[data-diseno="polaroid"] .portada::before { content: ''; grid-row: 2 / 4; grid-column: 1; z-index: 0; align-self: stretch; justify-self: stretch; margin: 0 calc(-1 * var(--polaroid-orilla)); background: var(--polaroid-marco); box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 30px 50px -24px var(--polaroid-sombra); transform-origin: 50% calc(var(--polaroid-orilla) + var(--polaroid-foto)); rotate: -2deg; } body[data-diseno="polaroid"] .portada::after { grid-row: 2; grid-column: 1; align-self: start; justify-self: center; position: relative; width: 34%; height: 1.9rem; margin-top: -.95rem; /* Gira con la polaroid (su centro se corre lo que la gira la polaroid: 2° a esta distancia) y además, chueca. */ translate: calc((var(--polaroid-orilla) + var(--polaroid-foto)) * -.035) 0; rotate: 3deg; } body[data-diseno="polaroid"] .portada-fondo, body[data-diseno="polaroid"] .portada .monograma { grid-row: 2; grid-column: 1; position: relative; z-index: 1; inset: auto; width: 100%; height: auto; aspect-ratio: 1; margin: var(--polaroid-orilla) 0 0; justify-self: stretch; transform: none; transform-origin: 50% 100%; rotate: -2deg; } body[data-diseno="polaroid"] .portada-fondo { background: var(--polaroid-lechoso); } body[data-diseno="polaroid"] .portada-fondo::after { background: linear-gradient(125deg, var(--polaroid-cinta-2), transparent 38%); opacity: .5; } body[data-diseno="polaroid"] .portada-fondo img { animation: none; } /* Sin foto: la foto de la polaroid es el color de la fiesta, con el monograma en un aro fino. */ body[data-diseno="polaroid"] .portada .monograma { border: 0; border-radius: 0; font-size: 1.7rem; letter-spacing: .24em; text-indent: .24em; color: var(--polaroid-foto-letra); background: radial-gradient(circle, transparent 4.2rem, var(--polaroid-foto-letra) 4.2rem, var(--polaroid-foto-letra) calc(4.2rem + 1px), transparent calc(4.2rem + 1.5px)), radial-gradient(circle at 18% 20%, var(--polaroid-foto-luz), transparent 26%), radial-gradient(circle at 84% 84%, var(--polaroid-cinta-2), transparent 22%), linear-gradient(160deg, var(--polaroid-foto-b), var(--polaroid-foto-a)); } body[data-diseno="polaroid"] .portada.con-foto .monograma { display: none; } body[data-diseno="polaroid"] .portada .portada-titulo { grid-row: 3; grid-column: 1; position: relative; z-index: 2; margin: 0; padding: .32em .1em .42em; font-size: calc(clamp(2.4rem, 11.5vw, 3.1rem) * var(--escala, 1)); line-height: 1.02; letter-spacing: 0; color: var(--polaroid-tinta); text-shadow: none; transform-origin: 50% 0; rotate: -2deg; } /* La etiqueta, escrita entre dos rayitas. En fila flexible: con un texto largo ("Baby shower de Luca" a 320 px) el texto parte en dos renglones y las rayitas se quedan a los lados (en línea, la segunda caía sola al renglón de abajo). */ body[data-diseno="polaroid"] .portada .portada-etiqueta { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 1.6rem; justify-self: center; width: max-content; max-width: calc(100vw - 2.4rem); font-family: var(--serif); font-style: italic; font-size: 1.35rem; font-weight: 400; line-height: 1.3; letter-spacing: .01em; text-indent: 0; text-transform: none; color: var(--polaroid-tinta-tablero); text-shadow: none; } body[data-diseno="polaroid"] .portada .portada-etiqueta::before, body[data-diseno="polaroid"] .portada .portada-etiqueta::after { content: ''; flex: 0 0 1.4rem; height: 1px; background: currentColor; opacity: .45; } body[data-diseno="polaroid"] .portada .portada-frase { grid-row: 4; justify-self: center; width: min(calc(100vw - 2.4rem), 21rem); max-width: none; margin: 2.3rem 0 0; font-size: var(--letra-lectura); color: var(--polaroid-tinta-tablero); text-shadow: none; } body[data-diseno="polaroid"] .portada .fecha-grande { grid-row: 5; margin-top: 1.5rem; color: var(--tinta); text-shadow: none; } body[data-diseno="polaroid"] .portada .fecha-grande i { background: var(--acento); } body[data-diseno="polaroid"] .portada .fecha-texto { grid-row: 6; justify-self: center; width: max-content; max-width: calc(100vw - 2.4rem); color: var(--polaroid-tinta-tablero); text-shadow: none; } /* Sin la rayita de "baja": la portada de Polaroid mide más que la pantalla en un celular bajito o acostado, y ahí la rayita (pegada abajo) cruzaba la fecha. La polaroid y la fecha ya invitan a bajar. */ body[data-diseno="polaroid"] .portada .scroll-pista { display: none; } @media (prefers-reduced-motion: no-preference) { /* Al abrir, la polaroid de la portada cae en su lugar (todas sus partes igual: se mueven como un solo papel). */ body[data-diseno="polaroid"] .portada::before, body[data-diseno="polaroid"] .portada::after, body[data-diseno="polaroid"] .portada-fondo, body[data-diseno="polaroid"] .portada .monograma, body[data-diseno="polaroid"] .portada .portada-titulo { animation: polaroid-llega .95s cubic-bezier(.3,1.25,.5,1) .22s both; } @keyframes polaroid-llega { from { opacity: 0; transform: translateY(-3.5rem); } 40% { opacity: 1; } to { opacity: 1; transform: none; } } } /* Los avisos de la portada: etiquetas de papel pegadas sobre la foto. */ body[data-diseno="polaroid"] .aviso-portada { width: max-content; border-radius: 3px; background: var(--polaroid-marco); color: var(--polaroid-tinta); box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 14px 26px -14px var(--polaroid-sombra); -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-diseno="polaroid"] .aviso-portada small { color: var(--polaroid-tinta-2); } body[data-diseno="polaroid"] .aviso-portada-icono { background: var(--boton-fondo); } body[data-diseno="polaroid"] .aviso-portada-icono .icono-momento { stroke: var(--boton-texto); } body[data-diseno="polaroid"] .aviso-a { left: -1.3rem; top: 28svh; } body[data-diseno="polaroid"] .aviso-b { left: auto; right: -1.3rem; top: 48svh; } /* ─── las secciones: tarjetas de papel pegadas con cinta (o clavadas), cada una un poquito chueca */ body[data-diseno="polaroid"] .seccion { position: relative; margin: 2.6rem 0; padding: 2.7rem 1.35rem 2.4rem; background: linear-gradient(172deg, var(--polaroid-carta-luz), var(--polaroid-carta) 55%); rotate: -.7deg; box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 20px 34px -24px var(--polaroid-sombra); } body[data-diseno="polaroid"] .seccion:nth-of-type(2n) { rotate: .6deg; } body[data-diseno="polaroid"] .seccion:nth-of-type(3n) { rotate: -.35deg; } body[data-diseno="polaroid"] .seccion:nth-of-type(5n) { rotate: .9deg; } body[data-diseno="polaroid"] .seccion .regla { display: none; } body[data-diseno="polaroid"] .seccion::before { top: -.85rem; left: 50%; width: 6.8rem; height: 1.7rem; margin-left: -3.4rem; rotate: -3deg; } body[data-diseno="polaroid"] .seccion:nth-of-type(2n)::before { rotate: 2.5deg; margin-left: -4.4rem; } /* Cada tercera va clavada con una tachuela del color de la fiesta. */ body[data-diseno="polaroid"] .seccion:nth-of-type(3n)::before { top: -.6rem; width: 1.25rem; height: 1.25rem; margin-left: -.62rem; border-radius: 50%; clip-path: none; rotate: none; background: radial-gradient(circle at 36% 32%, var(--polaroid-cinta-2) 0 16%, transparent 34%), radial-gradient(circle at 50% 50%, var(--acento) 52%, var(--acento-hondo)); box-shadow: 1px 4px 5px -1px var(--polaroid-sombra); } /* Lo que va directo sobre el tablero, sin tarjeta: la cuenta (en polaroids chiquitas), la galería, los videos y el pase. */ body[data-diseno="polaroid"] :is(#secCuenta, #secGaleria, #secVideos, #secPase) { background: none; box-shadow: none; rotate: none; padding-inline: 0; } body[data-diseno="polaroid"] :is(#secCuenta, #secGaleria, #secVideos, #secPase)::before { display: none; } /* Lo que decide va derecho: confirmar se llena sin que nada se vea chueco. */ body[data-diseno="polaroid"] #secConfirmar { rotate: none; } body[data-diseno="polaroid"] .titulo-seccion { margin: 0 0 1.5rem; font-family: var(--script); font-weight: 400; font-size: 2.4rem; line-height: 1.15; letter-spacing: 0; text-indent: 0; text-transform: none; color: var(--polaroid-pluma); } body[data-diseno="polaroid"] .parrafo { font-size: var(--letra-lectura); } body[data-diseno="polaroid"] .nota-chica, body[data-diseno="polaroid"] .etiqueta, body[data-diseno="polaroid"] .lugar p, body[data-diseno="polaroid"] .itinerario .donde, body[data-diseno="polaroid"] .datos-transferencia dt, body[data-diseno="polaroid"] .lugar .tienda-etiqueta, body[data-diseno="polaroid"] .link-boton { color: var(--tinta-2); } body[data-diseno="polaroid"] .padrino dt { color: var(--polaroid-pluma); } body[data-diseno="polaroid"] .padrino dd { font-size: 1.35rem; } body[data-diseno="polaroid"] .itinerario .hora { font-style: italic; } /* Los lugares, las tiendas y la transferencia: notas con su orilla punteada, como un boleto. */ body[data-diseno="polaroid"] .lugar { border: 0; border-radius: 3px; background: var(--polaroid-nota); backdrop-filter: none; outline: 1px dashed var(--polaroid-raya); outline-offset: -.5rem; padding: 1.8rem 1.3rem 1.7rem; } body[data-diseno="polaroid"] .lugar p:last-child { margin-bottom: 0; } body[data-diseno="polaroid"] .vestimenta { font-style: italic; } body[data-diseno="polaroid"] .boton, body[data-diseno="polaroid"] .opcion, body[data-diseno="polaroid"] .enviar, body[data-diseno="polaroid"] .campo { border-radius: 3px; } body[data-diseno="polaroid"] .boton, body[data-diseno="polaroid"] .opcion, body[data-diseno="polaroid"] .campo, body[data-diseno="polaroid"] .contador-btn { border-color: var(--polaroid-raya); } body[data-diseno="polaroid"] .confirmar { background: none; border: 0; padding: 0; margin-top: 0; backdrop-filter: none; } body[data-diseno="polaroid"] .confirmar-limite { margin-top: -.6rem; color: var(--polaroid-pluma); } /* ─── la cuenta regresiva: cuatro polaroids chiquitas, con el número de foto y lo que cuentan escrito en su pie */ body[data-diseno="polaroid"] .cuenta-caja { gap: .7rem; padding: 0 .2rem; } body[data-diseno="polaroid"] .cuenta-dato { padding: .38rem .38rem 0; background: var(--polaroid-marco); rotate: -3deg; box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 12px 20px -12px var(--polaroid-sombra); } body[data-diseno="polaroid"] .cuenta-dato:nth-child(2) { rotate: 2.5deg; translate: 0 .35rem; } body[data-diseno="polaroid"] .cuenta-dato:nth-child(3) { rotate: -1.5deg; } body[data-diseno="polaroid"] .cuenta-dato:nth-child(4) { rotate: 3deg; translate: 0 .2rem; } body[data-diseno="polaroid"] .cuenta-dato + .cuenta-dato::before { display: none; } body[data-diseno="polaroid"] .cuenta-dato b { display: grid; place-content: center; aspect-ratio: 1; background: var(--polaroid-numero); font-size: clamp(1.45rem, 6.8vw, 2.2rem); color: var(--polaroid-tinta); } body[data-diseno="polaroid"] .cuenta-dato span { margin: 0; padding: .3rem 0 .45rem; font-family: var(--serif); font-style: italic; font-size: 1.02rem; font-weight: 400; letter-spacing: .01em; text-indent: 0; text-transform: none; color: var(--polaroid-tinta-2); } body[data-diseno="polaroid"] .cuenta-ya { color: var(--polaroid-pluma); } /* ─── la galería: polaroids sobre el tablero, cada una chueca, algunas con cinta; se revelan al llegar */ body[data-diseno="polaroid"] .galeria, body[data-diseno="polaroid"] .vestimenta-fotos { gap: 1.5rem 1.1rem; padding: .7rem .15rem 0; } body[data-diseno="polaroid"] .galeria-foto { position: relative; overflow: visible; padding: .5rem .5rem 1.9rem; rotate: -2.5deg; background: linear-gradient(var(--polaroid-lechoso), var(--polaroid-lechoso)) content-box, var(--polaroid-marco); box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 16px 26px -16px var(--polaroid-sombra); transition: scale .5s cubic-bezier(.22,.61,.36,1); } body[data-diseno="polaroid"] .galeria-foto:nth-child(2n) { rotate: 2.2deg; } body[data-diseno="polaroid"] .galeria-foto:nth-child(3n) { rotate: -1.2deg; } body[data-diseno="polaroid"] .galeria-foto:nth-child(4n) { rotate: 3deg; } body[data-diseno="polaroid"] .galeria .galeria-foto:first-child { width: 86%; justify-self: center; padding: .75rem .75rem 2.8rem; rotate: 1.4deg; } /* La columna de la derecha, un poco más abajo: puestas a mano sobre el tablero, no en una cuadrícula. */ body[data-diseno="polaroid"] .galeria .galeria-foto:nth-child(2n+3) { translate: 0 1.1rem; } /* Las de cómo ir vestidos, dos polaroids chiquitas lado a lado (la primera no se estira a todo lo ancho como la de la galería); si es una sola, centrada. */ body[data-diseno="polaroid"] .vestimenta-fotos .galeria-foto:first-child:not(:only-child) { grid-column: auto; } body[data-diseno="polaroid"] .galeria-foto:hover { scale: 1.03; } body[data-diseno="polaroid"] .galeria-foto:hover img { transform: none; } body[data-diseno="polaroid"] .galeria img, body[data-diseno="polaroid"] .galeria-foto:first-child img, body[data-diseno="polaroid"] .vestimenta-fotos img { aspect-ratio: 1; filter: none; } body[data-diseno="polaroid"] .galeria-foto::before { display: none; top: -.7rem; left: 50%; width: 42%; height: 1.4rem; margin-left: -21%; rotate: -4deg; } body[data-diseno="polaroid"] .galeria-foto:nth-child(3n+1)::before { display: block; } body[data-diseno="polaroid"] .galeria-foto:nth-child(6n+4)::before { rotate: 5deg; margin-left: -15%; } /* ─── los videos, en su marco; y el pase de entrada: una polaroid con el QR de foto (derecha: es para la puerta) */ body[data-diseno="polaroid"] .video video { border: .55rem solid var(--polaroid-marco); border-bottom-width: 2.6rem; box-shadow: 0 16px 26px -16px var(--polaroid-sombra); } body[data-diseno="polaroid"] .video figcaption { margin-top: -2.1rem; position: relative; color: var(--polaroid-tinta-2); } body[data-diseno="polaroid"] .pase { position: relative; width: min(19rem, 100%); margin: 1.2rem auto 0; padding: .9rem .9rem 1.5rem; border: 0; background: var(--polaroid-marco); backdrop-filter: none; box-shadow: 0 1px 2px var(--polaroid-sombra-2), 0 22px 36px -20px var(--polaroid-sombra); } body[data-diseno="polaroid"] .pase::before { top: -.8rem; left: 50%; width: 36%; height: 1.6rem; margin-left: -18%; rotate: -3deg; } body[data-diseno="polaroid"] .pase-qr { width: 100%; margin-bottom: 1.1rem; } body[data-diseno="polaroid"] .pase-nombre { font-family: var(--script); font-size: 2rem; line-height: 1.15; color: var(--polaroid-tinta); } body[data-diseno="polaroid"] .pase .nota-chica { color: var(--polaroid-tinta-2); } body[data-diseno="polaroid"] .pase-codigo { color: var(--polaroid-tinta); } body[data-diseno="polaroid"] #paseEspera { color: var(--polaroid-tinta-tablero); } /* ─── el pie: los nombres escritos a mano sobre el tablero */ body[data-diseno="polaroid"] .pie .regla { display: none; } body[data-diseno="polaroid"] #pieTitulo { font-size: 2.7rem; color: var(--tinta); } body[data-diseno="polaroid"] .pie-marca, body[data-diseno="polaroid"] .pie-marca span { color: var(--polaroid-tinta-tablero); } body[data-diseno="polaroid"] .pie-marca span { font-weight: 500; } body[data-diseno="polaroid"] .musica { background: var(--polaroid-marco); border: 0; box-shadow: 0 8px 18px -10px var(--polaroid-sombra); } body[data-diseno="polaroid"] .musica-onda { background: var(--polaroid-tinta); } /* ─── lo que se mueve con el dedo: la fecha escrita a mano, las polaroids que corren, el botón que acompaña */ body[data-diseno="polaroid"] .fecha-capa-base { background: var(--polaroid-tablero); color: var(--tinta); } body[data-diseno="polaroid"] .fecha-escena-antes { font-family: var(--script); font-size: 2.8rem; font-weight: 400; letter-spacing: 0; text-indent: 0; text-transform: none; } body[data-diseno="polaroid"] .fecha-escena-dia { font-family: var(--serif); font-style: italic; font-size: 1.6rem; font-weight: 400; letter-spacing: .02em; text-indent: 0; text-transform: none; } body[data-diseno="polaroid"] .fecha-escena-num { font-style: italic; } body[data-diseno="polaroid"] .cinta-fotos img { border-radius: 2px; border: .38rem solid var(--polaroid-marco); border-bottom-width: 1.5rem; aspect-ratio: 5 / 6; box-shadow: 0 14px 22px -14px var(--polaroid-sombra); } body[data-diseno="polaroid"] .confirmar-flotante { border-radius: 4px; } /* ─── pantallas grandes */ @media (min-width: 48rem) { body[data-diseno="polaroid"] .seccion { padding: 3.2rem 2.6rem 2.9rem; } body[data-diseno="polaroid"] .aviso-a { left: -9.5rem; top: 30svh; } body[data-diseno="polaroid"] .aviso-b { right: -9.5rem; top: 52svh; } } /* ═══════════════ BOTÁNICO (28-sep-2026) — una boda en un jardín: ramas y hojas dibujadas que se mecen, papel de lino, letra fina La elegancia de un jardín, sin una sola imagen: el papel es lino (un tejido chico usado como máscara, teñido con la tinta de la paleta), las ramas son SVG dibujado dentro de invitacion.html (.botanico: plantillas que invitacion.js → adornarBotanico copia a su lugar) y se pintan con los colores de la paleta, y los nombres van en Cormorant itálica con el "&" en Pinyon. · La apertura: una tarjeta en arco con una corona de hojas alrededor de los nombres. Al tocar, las hojas se abren hacia afuera (crecen y giran un poco) mientras la tarjeta sube y se desvanece. Con "menos movimiento", nada se mueve: la tarjeta se quita y ya. · La portada: la foto en un arco (redondo arriba), con ramilletes que se asoman por detrás de sus esquinas. Sin foto, el monograma dentro de la misma corona. · Las secciones: una ramita en vez de la raya, títulos en itálica, tarjetas de borde suave y la cuenta en arcos. Solo se anima transform y opacity. Los colores salen de la paleta (tokens --botanico-*, derivados con color-mix): se ve y se lee con las 24 paletas, la noche y los colores propios (pruebas/casos/diseno_botanico.js). */ /* Las plantillas de las ramas existen en el HTML de todos los diseños: fuera de Botánico no se ven. Y aun en Botánico, la corona y los ramilletes de ADENTRO son solo el molde (sus copias van en el sobre y en la portada). */ .botanico, .botanico > .botanico-corona, .botanico > .botanico-arco { display: none; } body[data-diseno="botanico"] { /* Los tonos del jardín, derivados de la paleta. */ --botanico-tallo: color-mix(in srgb, var(--acento) 82%, var(--tinta)); --botanico-hoja: color-mix(in srgb, var(--acento-2) 80%, var(--papel)); --botanico-hoja-2: color-mix(in srgb, var(--acento) 70%, var(--acento-2)); --botanico-borde: color-mix(in srgb, var(--acento-2) 48%, var(--papel)); --botanico-sombra: color-mix(in srgb, var(--tinta) 34%, transparent); /* Lo chico que va en color (las etiquetas, la fecha del sobre): el acento hondo, que se lee contra el papel en todas las paletas claras. En la noche el hondo es más oscuro que el papel: ahí va el acento. */ --botanico-etiqueta: var(--acento-hondo); /* El lino: un tejido de 32 px (hilos en tramos, con distinta fuerza, como el lino de verdad) que se usa como máscara: el color lo pone la tinta de la paleta, casi transparente, en la capa del relieve de la invitación y en la del sobre. Con degradados repetidos de 1 px sobre la página entera, el celular se trababa casi 2 segundos al abrir (medido): así, 0.15 s. */ --botanico-lino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='0' y='0' width='8' height='1' fill-opacity='0.96'/%3E%3Crect x='8' y='0' width='3' height='1' fill-opacity='0.3'/%3E%3Crect x='19' y='0' width='6' height='1' fill-opacity='0.28'/%3E%3Crect x='25' y='0' width='4' height='1' fill-opacity='0.43'/%3E%3Crect x='29' y='0' width='3' height='1' fill-opacity='0.87'/%3E%3Crect x='0' y='2' width='6' height='1' fill-opacity='0.72'/%3E%3Crect x='6' y='2' width='3' height='1' fill-opacity='0.68'/%3E%3Crect x='15' y='2' width='7' height='1' fill-opacity='0.56'/%3E%3Crect x='22' y='2' width='7' height='1' fill-opacity='0.67'/%3E%3Crect x='29' y='2' width='3' height='1' fill-opacity='0.69'/%3E%3Crect x='0' y='4' width='8' height='1' fill-opacity='0.32'/%3E%3Crect x='8' y='4' width='3' height='1' fill-opacity='0.71'/%3E%3Crect x='11' y='4' width='11' height='1' fill-opacity='0.57'/%3E%3Crect x='22' y='4' width='10' height='1' fill-opacity='0.52'/%3E%3Crect x='0' y='6' width='5' height='1' fill-opacity='0.77'/%3E%3Crect x='22' y='6' width='4' height='1' fill-opacity='0.63'/%3E%3Crect x='26' y='6' width='6' height='1' fill-opacity='0.36'/%3E%3Crect x='0' y='8' width='3' height='1' fill-opacity='0.97'/%3E%3Crect x='14' y='8' width='8' height='1' fill-opacity='0.51'/%3E%3Crect x='22' y='8' width='10' height='1' fill-opacity='0.68'/%3E%3Crect x='0' y='10' width='4' height='1' fill-opacity='0.96'/%3E%3Crect x='4' y='10' width='4' height='1' fill-opacity='0.3'/%3E%3Crect x='8' y='10' width='10' height='1' fill-opacity='0.46'/%3E%3Crect x='18' y='10' width='8' height='1' fill-opacity='0.27'/%3E%3Crect x='26' y='10' width='5' height='1' fill-opacity='0.71'/%3E%3Crect x='31' y='10' width='1' height='1' fill-opacity='0.83'/%3E%3Crect x='6' y='12' width='10' height='1' fill-opacity='0.31'/%3E%3Crect x='16' y='12' width='11' height='1' fill-opacity='0.46'/%3E%3Crect x='27' y='12' width='5' height='1' fill-opacity='0.9'/%3E%3Crect x='0' y='14' width='9' height='1' fill-opacity='0.99'/%3E%3Crect x='9' y='14' width='9' height='1' fill-opacity='0.97'/%3E%3Crect x='18' y='14' width='5' height='1' fill-opacity='0.36'/%3E%3Crect x='23' y='14' width='3' height='1' fill-opacity='0.61'/%3E%3Crect x='26' y='14' width='6' height='1' fill-opacity='0.46'/%3E%3Crect x='0' y='16' width='11' height='1' fill-opacity='0.53'/%3E%3Crect x='11' y='16' width='5' height='1' fill-opacity='0.77'/%3E%3Crect x='19' y='16' width='11' height='1' fill-opacity='0.54'/%3E%3Crect x='30' y='16' width='2' height='1' fill-opacity='0.61'/%3E%3Crect x='0' y='18' width='6' height='1' fill-opacity='0.3'/%3E%3Crect x='6' y='18' width='5' height='1' fill-opacity='0.33'/%3E%3Crect x='11' y='18' width='4' height='1' fill-opacity='0.25'/%3E%3Crect x='15' y='18' width='4' height='1' fill-opacity='0.96'/%3E%3Crect x='19' y='18' width='4' height='1' fill-opacity='0.91'/%3E%3Crect x='28' y='18' width='4' height='1' fill-opacity='0.61'/%3E%3Crect x='0' y='20' width='10' height='1' fill-opacity='0.99'/%3E%3Crect x='10' y='20' width='10' height='1' fill-opacity='0.48'/%3E%3Crect x='20' y='20' width='8' height='1' fill-opacity='0.81'/%3E%3Crect x='28' y='20' width='4' height='1' fill-opacity='0.64'/%3E%3Crect x='0' y='22' width='11' height='1' fill-opacity='0.52'/%3E%3Crect x='11' y='22' width='3' height='1' fill-opacity='0.82'/%3E%3Crect x='14' y='22' width='4' height='1' fill-opacity='0.77'/%3E%3Crect x='18' y='22' width='8' height='1' fill-opacity='0.93'/%3E%3Crect x='26' y='22' width='6' height='1' fill-opacity='0.65'/%3E%3Crect x='0' y='24' width='8' height='1' fill-opacity='0.73'/%3E%3Crect x='8' y='24' width='6' height='1' fill-opacity='0.85'/%3E%3Crect x='14' y='24' width='6' height='1' fill-opacity='0.4'/%3E%3Crect x='20' y='24' width='3' height='1' fill-opacity='0.99'/%3E%3Crect x='23' y='24' width='9' height='1' fill-opacity='0.44'/%3E%3Crect x='8' y='26' width='8' height='1' fill-opacity='0.97'/%3E%3Crect x='16' y='26' width='6' height='1' fill-opacity='0.33'/%3E%3Crect x='22' y='26' width='8' height='1' fill-opacity='0.4'/%3E%3Crect x='30' y='26' width='2' height='1' fill-opacity='0.61'/%3E%3Crect x='0' y='28' width='4' height='1' fill-opacity='0.88'/%3E%3Crect x='4' y='28' width='9' height='1' fill-opacity='0.84'/%3E%3Crect x='13' y='28' width='10' height='1' fill-opacity='0.92'/%3E%3Crect x='31' y='28' width='1' height='1' fill-opacity='0.6'/%3E%3Crect x='0' y='30' width='4' height='1' fill-opacity='0.79'/%3E%3Crect x='4' y='30' width='5' height='1' fill-opacity='0.27'/%3E%3Crect x='9' y='30' width='10' height='1' fill-opacity='0.85'/%3E%3Crect x='19' y='30' width='10' height='1' fill-opacity='0.74'/%3E%3Crect x='29' y='30' width='3' height='1' fill-opacity='0.66'/%3E%3Crect x='1' y='3' width='1' height='8' fill-opacity='0.69'/%3E%3Crect x='1' y='11' width='1' height='5' fill-opacity='0.17'/%3E%3Crect x='1' y='16' width='1' height='5' fill-opacity='0.57'/%3E%3Crect x='1' y='21' width='1' height='8' fill-opacity='0.61'/%3E%3Crect x='1' y='29' width='1' height='3' fill-opacity='0.64'/%3E%3Crect x='4' y='8' width='1' height='4' fill-opacity='0.44'/%3E%3Crect x='4' y='12' width='1' height='2' fill-opacity='0.63'/%3E%3Crect x='4' y='14' width='1' height='2' fill-opacity='0.58'/%3E%3Crect x='4' y='16' width='1' height='4' fill-opacity='0.41'/%3E%3Crect x='4' y='20' width='1' height='2' fill-opacity='0.33'/%3E%3Crect x='4' y='22' width='1' height='9' fill-opacity='0.58'/%3E%3Crect x='4' y='31' width='1' height='1' fill-opacity='0.29'/%3E%3Crect x='7' y='0' width='1' height='3' fill-opacity='0.43'/%3E%3Crect x='7' y='3' width='1' height='3' fill-opacity='0.39'/%3E%3Crect x='7' y='6' width='1' height='5' fill-opacity='0.53'/%3E%3Crect x='7' y='11' width='1' height='9' fill-opacity='0.43'/%3E%3Crect x='7' y='26' width='1' height='5' fill-opacity='0.61'/%3E%3Crect x='7' y='31' width='1' height='1' fill-opacity='0.37'/%3E%3Crect x='10' y='0' width='1' height='5' fill-opacity='0.39'/%3E%3Crect x='10' y='11' width='1' height='4' fill-opacity='0.67'/%3E%3Crect x='10' y='31' width='1' height='1' fill-opacity='0.64'/%3E%3Crect x='13' y='0' width='1' height='5' fill-opacity='0.24'/%3E%3Crect x='13' y='5' width='1' height='8' fill-opacity='0.34'/%3E%3Crect x='13' y='13' width='1' height='7' fill-opacity='0.2'/%3E%3Crect x='13' y='20' width='1' height='7' fill-opacity='0.45'/%3E%3Crect x='13' y='27' width='1' height='2' fill-opacity='0.36'/%3E%3Crect x='13' y='29' width='1' height='3' fill-opacity='0.43'/%3E%3Crect x='16' y='0' width='1' height='5' fill-opacity='0.68'/%3E%3Crect x='16' y='11' width='1' height='4' fill-opacity='0.3'/%3E%3Crect x='16' y='15' width='1' height='8' fill-opacity='0.62'/%3E%3Crect x='16' y='23' width='1' height='6' fill-opacity='0.37'/%3E%3Crect x='16' y='29' width='1' height='3' fill-opacity='0.54'/%3E%3Crect x='19' y='0' width='1' height='2' fill-opacity='0.59'/%3E%3Crect x='19' y='2' width='1' height='3' fill-opacity='0.3'/%3E%3Crect x='19' y='5' width='1' height='3' fill-opacity='0.59'/%3E%3Crect x='19' y='22' width='1' height='8' fill-opacity='0.66'/%3E%3Crect x='19' y='30' width='1' height='2' fill-opacity='0.17'/%3E%3Crect x='22' y='0' width='1' height='3' fill-opacity='0.68'/%3E%3Crect x='22' y='3' width='1' height='4' fill-opacity='0.26'/%3E%3Crect x='22' y='7' width='1' height='6' fill-opacity='0.44'/%3E%3Crect x='22' y='13' width='1' height='9' fill-opacity='0.43'/%3E%3Crect x='22' y='29' width='1' height='2' fill-opacity='0.16'/%3E%3Crect x='22' y='31' width='1' height='1' fill-opacity='0.43'/%3E%3Crect x='25' y='9' width='1' height='8' fill-opacity='0.51'/%3E%3Crect x='25' y='17' width='1' height='8' fill-opacity='0.68'/%3E%3Crect x='25' y='25' width='1' height='5' fill-opacity='0.69'/%3E%3Crect x='25' y='30' width='1' height='2' fill-opacity='0.37'/%3E%3Crect x='28' y='0' width='1' height='2' fill-opacity='0.61'/%3E%3Crect x='28' y='2' width='1' height='6' fill-opacity='0.39'/%3E%3Crect x='28' y='8' width='1' height='8' fill-opacity='0.63'/%3E%3Crect x='28' y='16' width='1' height='6' fill-opacity='0.48'/%3E%3Crect x='28' y='22' width='1' height='2' fill-opacity='0.4'/%3E%3Crect x='28' y='24' width='1' height='8' fill-opacity='0.15'/%3E%3Crect x='31' y='0' width='1' height='7' fill-opacity='0.68'/%3E%3Crect x='31' y='12' width='1' height='5' fill-opacity='0.35'/%3E%3Crect x='31' y='17' width='1' height='8' fill-opacity='0.2'/%3E%3Crect x='31' y='25' width='1' height='5' fill-opacity='0.29'/%3E%3Crect x='31' y='30' width='1' height='2' fill-opacity='0.3'/%3E%3C/svg%3E"); /* Las medidas que comparten la foto de la portada y sus ramilletes. */ --bot-arco: min(16.5rem, 66vw, 56svh); /* con el celular acostado, el arco no se come la pantalla */ --bot-arriba: 4.8rem; background-color: var(--papel); } /* El lino va pegado al papel (se mueve con la página, como el papel de verdad): en la capa del relieve de la invitación, a todo lo ancho, detrás del contenido; y en el sobre, en su propia capa. */ body[data-diseno="botanico"] #invitacion::before, body[data-diseno="botanico"] .sobre::after { content: ''; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tinta); opacity: .05; mix-blend-mode: normal; background-image: none; -webkit-mask: var(--botanico-lino) 0 0 / 32px 32px repeat; mask: var(--botanico-lino) 0 0 / 32px 32px repeat; } body[data-diseno="botanico"] #invitacion::before { left: calc(50% - 50vw); right: auto; width: 100vw; } body[data-diseno="botanico"][data-paleta="noche"] { --botanico-etiqueta: var(--acento); } /* ─── las ramas: el dibujo, con los tonos de la paleta. Cada racimo es su propio (se mueve sin repintar). */ body[data-diseno="botanico"] .bot-rama { position: absolute; display: block; pointer-events: none; } body[data-diseno="botanico"] .bot-rama > svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: inherit; } body[data-diseno="botanico"] .bh-tallo { fill: none; stroke: var(--botanico-tallo); stroke-width: .6; stroke-linecap: round; } body[data-diseno="botanico"] .bh-hoja { fill: var(--botanico-hoja); fill-opacity: .92; } body[data-diseno="botanico"] .bh-hoja-2 { fill: var(--botanico-hoja-2); } body[data-diseno="botanico"] .bh-hoja-linea { fill: var(--papel-2); fill-opacity: .6; stroke: var(--acento); stroke-width: .45; } body[data-diseno="botanico"] .bh-nervio { fill: none; stroke: var(--botanico-tallo); stroke-width: .3; stroke-linecap: round; opacity: .75; } body[data-diseno="botanico"] .bh-baya { fill: var(--acento); } /* Se mecen muy despacio, cada racimo a su ritmo (desde su base). Solo con movimiento. */ @media (prefers-reduced-motion: no-preference) { body[data-diseno="botanico"] .bot-rama > svg { animation: botanico-mecer 8s ease-in-out infinite alternate; } body[data-diseno="botanico"] .bot-rama:nth-child(2n) > svg { animation-duration: 9.5s; animation-delay: -3s; } body[data-diseno="botanico"] .bot-rama:nth-child(3n) > svg { animation-duration: 11s; animation-delay: -6s; } @keyframes botanico-mecer { from { transform: rotate(-1.8deg); } to { transform: rotate(2deg); } } /* La corona del sobre deja de mecerse cuando el sobre ya se fue (seguía trabajando escondida). */ body[data-diseno="botanico"] .sobre.abierto .bot-rama > svg { animation: none; } } /* ─── dónde va cada racimo (lo calcula el dibujo: la corona en una caja cuadrada, los ramilletes en la del arco) y la máscara de la ramita de las secciones (el dibujo en negro; el color lo pone el fondo, con los tonos de la paleta). */ body[data-diseno="botanico"] .bot-c1 { left: 6.5%; top: 65%; width: 41%; height: 29.5%; transform-origin: 96.15% 80.63%; --sale-x: -9.83%; --sale-y: 21.44%; --gira: -18deg; } body[data-diseno="botanico"] .bot-c2 { left: 2%; top: 26%; width: 20%; height: 48.5%; transform-origin: 73.16% 95.89%; --sale-x: -37.26%; --sale-y: 1.75%; --gira: -18deg; } body[data-diseno="botanico"] .bot-c3 { left: 8.5%; top: 8%; width: 36%; height: 31.5%; transform-origin: 11.59% 94.83%; --sale-x: -14.73%; --sale-y: -16.84%; --gira: -18deg; } body[data-diseno="botanico"] .bot-c4 { left: 52.5%; top: 65.5%; width: 43%; height: 29%; transform-origin: 3.67% 80.3%; --sale-x: 9.37%; --sale-y: 21.81%; --gira: 18deg; } body[data-diseno="botanico"] .bot-c5 { left: 79%; top: 27.5%; width: 19%; height: 47%; transform-origin: 22.99% 95.76%; --sale-x: 39.22%; --sale-y: 1.81%; --gira: 18deg; } body[data-diseno="botanico"] .bot-c6 { left: 56%; top: 7.5%; width: 33%; height: 32%; transform-origin: 94.94% 94.91%; --sale-x: 16.07%; --sale-y: -16.57%; --gira: 18deg; } body[data-diseno="botanico"] .bot-c7 { left: 42.5%; top: 87%; width: 15%; height: 9.5%; transform-origin: 50% 36.84%; --sale-x: 0%; --sale-y: 47.37%; --gira: 0deg; } body[data-diseno="botanico"] .bot-a1 { left: -34%; top: -18.8%; width: 63%; height: 84.96%; transform-origin: 79.37% 52.21%; } body[data-diseno="botanico"] .bot-a2 { left: 81%; top: 49.62%; width: 53%; height: 62.41%; transform-origin: 9.43% 62.65%; } /* el jardín: 123 × 311 */ body[data-diseno="botanico"] .botanico-jardin .bot-rama { aspect-ratio: 123 / 311; } /* la ramita de las secciones: 6 de ancho por 1 de alto */ body[data-diseno="botanico"] { --botanico-ramita-hojas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1 120 20'%3E%3Cpath d='M41.3 9.9C38.3 10.9 35.6 7.7 35.2 4C38 4.4 41.3 6.8 41.3 9.9ZM23.9 10.6C21.5 11.8 19.1 9.5 18.1 6.1C20.6 6.1 23.6 7.8 23.9 10.6ZM9 13C8 15.2 5.4 15.2 2.8 13.7C4.1 12.1 7.2 11.5 9 13ZM78.7 9.9C78.4 6.8 81.6 4.1 84.8 4C84.2 7.3 81.7 10.6 78.7 9.9ZM96.1 10.6C96.1 7.9 98.8 6.2 101.9 6.1C101.2 9 98.7 11.6 96.1 10.6ZM111 13C112.8 11.4 115.2 12.5 116.9 14.9C115.1 15.8 112 15.1 111 13Z' fill='black'/%3E%3Cpath d='M54.3 11C50.9 13 48.4 8.8 51.9 6.5C55.7 4.8 57.8 8.7 54.3 11ZM47.4 10.2C47.5 13.3 44.1 16.2 40.9 16.3C41.1 13 44.1 9.4 47.4 10.2ZM32.1 10C32.8 12.6 30.7 15.3 27.9 15.8C27.7 12.7 29.2 9.9 32.1 10ZM15.9 11.7C16.9 13.7 15.2 16.5 13 17.6C12.3 15.3 13.5 12.3 15.9 11.7ZM65.7 11C62.4 8.9 64.8 4.5 68.1 6.5C71.6 9.2 69.3 13.1 65.7 11ZM72.6 10.2C75.5 9.4 78.7 12.6 79.1 16.3C76.3 16.4 72.6 13.6 72.6 10.2ZM87.9 10C90.5 9.6 92.4 12.5 92.1 15.8C89.5 15.2 87.4 12.9 87.9 10ZM104.1 11.7C106.3 11.8 107.6 14.9 107 17.6C105.1 16.9 103.4 14 104.1 11.7Z' fill='black'/%3E%3C/svg%3E"); --botanico-ramita-tallos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1 120 20'%3E%3Cpath d='M60 12C48 9.5 30 8.5 9 13M60 12C72 9.5 90 8.5 111 13' fill='none' stroke='black' stroke-width='0.9' stroke-linecap='round'/%3E%3Cpath d='M57.6 12a2.4 2.4 0 1 0 4.8 0a2.4 2.4 0 1 0 -4.8 0ZM54.1 8.3a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0ZM63.1 8.3a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0Z' fill='black'/%3E%3C/svg%3E"); } /* ─── la apertura: una tarjeta en arco, y una corona de hojas alrededor de los nombres */ body[data-diseno="botanico"] .sobre { background: transparent; } /* El lino del sobre va en una capa aparte: al abrir se apaga (opacidad) y deja ver la invitación que ya está detrás. */ body[data-diseno="botanico"] .sobre::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--papel); background-image: radial-gradient(ellipse 85% 60% at 50% 40%, var(--papel-2), transparent 72%); } body[data-diseno="botanico"] .sobre-solapa, body[data-diseno="botanico"] .sobre-sello, body[data-diseno="botanico"] .sobre-foto { display: none; } /* La tarjeta nunca mide más que el hueco del sobre (1.5rem de relleno por lado), ni más de lo que cabe a lo alto (el celular acostado con el letrero de ejemplo: 390 px menos 96 de relleno; su alto es casi su ancho más 5 rem). TODO lo de adentro, y la corona, se mide contra este ancho (porcentajes y cqw): una sola medida manda (la corona va en su celda del sobre, que mide lo mismo). */ body[data-diseno="botanico"] .sobre-carta { width: min(20rem, calc(100vw - 3rem), calc(100svh - 11.5rem)); container-type: inline-size; min-height: 0; padding: 25% 0 2rem; justify-content: flex-start; border-radius: 999px 999px 1.5rem 1.5rem; background: var(--papel-2); box-shadow: 0 1.8rem 3.6rem -2rem var(--botanico-sombra), 0 0 0 1px var(--botanico-borde); } /* Un segundo filo por dentro, como una tarjeta grabada. */ body[data-diseno="botanico"] .sobre-carta::before { inset: .5rem; background: none; opacity: 1; mix-blend-mode: normal; border: 1px solid var(--botanico-borde); border-radius: 999px 999px 1.05rem 1.05rem; } /* La corona: del tamaño del arco de la tarjeta y en su mismo centro. Va en el sobre (no dentro de la tarjeta), en la celda de la tarjeta (grid-area, con sus cuatro líneas: una línea "auto" de algo absoluto es la ORILLA del sobre, y la corona medía de más): así sus hojas se abren solas mientras la tarjeta se va. Los porcentajes (y el margen de arriba, que también se mide contra el ancho) son del ancho de esa celda, que es el de la tarjeta. */ body[data-diseno="botanico"] .sobre > .botanico-corona { display: block; position: absolute; grid-area: 1 / 1 / 2 / 2; z-index: 1; pointer-events: none; top: 0; left: 3.5%; width: 93%; margin-top: 3.5%; aspect-ratio: 1; } /* Los nombres, dentro de la corona: el cuerpo mide lo de adentro de la corona (la mitad de la tarjeta: ajustarNombres achica los nombres hasta caber ahí), y "Para …" y la fecha van abajo, a lo ancho de la tarjeta (el doble del cuerpo). */ body[data-diseno="botanico"] .sobre-cuerpo { display: flex; flex-direction: column; align-items: center; width: 50%; margin: 0 auto; } body[data-diseno="botanico"] .sobre-titulo { order: -1; width: 100%; aspect-ratio: 1; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: .24em; font-family: var(--serif); font-style: italic; font-weight: 300; line-height: 1.02; letter-spacing: -.005em; color: var(--tinta); font-size: calc(clamp(2.05rem, 10.2vw, 2.7rem) * var(--escala, 1)); font-size: calc(13.4cqw * var(--escala, 1)); /* del ancho de la tarjeta (donde se sabe medir así) */ } body[data-diseno="botanico"] .sobre-titulo .conector { flex-basis: 100%; text-align: center; font-family: var(--script); font-style: normal; font-size: 1.45em; line-height: .62; color: var(--acento); margin: .12em 0 .02em; } body[data-diseno="botanico"] .sobre-para { width: calc(200% - 2.6rem); margin: 47% 0 .5rem; font-family: var(--serif); font-style: italic; font-size: 1.12rem; font-size: clamp(.9rem, 5.6cqw, 1.12rem); line-height: 1.35; letter-spacing: 0; text-indent: 0; text-transform: none; color: var(--tinta-2); text-wrap: balance; } body[data-diseno="botanico"] .sobre-fecha { width: calc(200% - 2.6rem); font-size: var(--letra-etiqueta); letter-spacing: .28em; text-indent: .28em; color: var(--botanico-etiqueta); font-weight: 500; } body[data-diseno="botanico"] .sobre-abrir { display: inline-flex; align-items: center; gap: .85em; border-radius: 999px; padding: 1rem 2.1rem 1rem 1.8rem; border-color: var(--botanico-borde); background: var(--papel-2); color: var(--tinta); letter-spacing: .24em; font-weight: 500; box-shadow: 0 .9rem 1.9rem -1.3rem var(--botanico-sombra); } /* Una hojita antes de "Abrir invitación". */ body[data-diseno="botanico"] .sobre-abrir::before { content: ''; flex: none; width: .62rem; height: .62rem; border-radius: 0 100% 0 100%; background: var(--botanico-hoja-2); transform: rotate(8deg); } body[data-diseno="botanico"] .sobre-abrir:hover { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); } body[data-diseno="botanico"] .sobre-abrir:hover::before { background: var(--boton-texto); } @media (prefers-reduced-motion: no-preference) { /* Al llegar, la corona brota: cada racimo crece desde su base, del nudo hacia arriba (listo en 1.2 s). Solo hacia atrás (backwards): al terminar ya no pesa, y si tocan antes, la transición de la apertura le gana (una transición manda sobre una animación) y las hojas se abren desde donde iban. */ body[data-diseno="botanico"] .sobre > .botanico-corona .bot-rama { animation: botanico-brotar .8s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.15s + var(--brota, 0) * 80ms); } body[data-diseno="botanico"] .bot-c1, body[data-diseno="botanico"] .bot-c4 { --brota: 1; } body[data-diseno="botanico"] .bot-c2, body[data-diseno="botanico"] .bot-c5 { --brota: 2; } body[data-diseno="botanico"] .bot-c3, body[data-diseno="botanico"] .bot-c6 { --brota: 3; } @keyframes botanico-brotar { from { transform: scale(.35) rotate(-8deg); opacity: 0; } } body[data-diseno="botanico"] .sobre::before, body[data-diseno="botanico"] .sobre::after { transition: opacity .85s ease .3s; } body[data-diseno="botanico"] .sobre-carta { transition: transform 1.05s cubic-bezier(.22,.61,.36,1) .06s, opacity .7s ease .16s; } body[data-diseno="botanico"] .sobre > .botanico-corona .bot-rama { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .8s ease .3s; } body[data-diseno="botanico"] .sobre.abriendo::before, body[data-diseno="botanico"] .sobre.abriendo::after { opacity: 0; } body[data-diseno="botanico"] .sobre.abriendo .sobre-carta { transform: translateY(-2.4rem); opacity: 0; } body[data-diseno="botanico"] .sobre.abriendo > .botanico-corona .bot-rama { transform: translate(var(--sale-x), var(--sale-y)) rotate(var(--gira)) scale(1.3); opacity: 0; } } /* Con "menos movimiento": al tocar, el sobre se quita de una vez (nada vuela ni se desvanece). */ @media (prefers-reduced-motion: reduce) { body[data-diseno="botanico"] .sobre, body[data-diseno="botanico"] .sobre * { transition: none; } body[data-diseno="botanico"] .sobre.abriendo { visibility: hidden; } } /* ─── la portada: la foto en un arco, con ramilletes que se asoman por detrás de sus esquinas */ body[data-diseno="botanico"] .portada { padding: var(--bot-arriba) 0 3.8rem; } body[data-diseno="botanico"] .portada.con-foto { color: var(--tinta); min-height: 0; align-content: start; } body[data-diseno="botanico"] .portada-fondo { position: relative; inset: auto; left: auto; transform: none; order: -1; z-index: 1; width: var(--bot-arco); aspect-ratio: 3 / 4; height: auto; margin-bottom: 2.6rem; border-radius: 999px 999px .9rem .9rem; background: var(--papel-2); box-shadow: 0 0 0 .42rem var(--papel-2), 0 0 0 calc(.42rem + 1px) var(--botanico-borde), 0 1.8rem 3rem -1.8rem var(--botanico-sombra); } body[data-diseno="botanico"] .portada-fondo::after { display: none; } /* Los ramilletes, DETRÁS de la foto (se asoman por su orilla). Van en una caja a lo ancho de la pantalla que los recorta: así pueden salirse por la orilla del celular sin que la página se deslice de lado (en el iPhone, el overflow-x del cuerpo no siempre lo impide). Adentro, una caja del tamaño del arco. Con el id: la regla que pone en fila a los hijos de la portada con foto pesa más que una clase. */ body[data-diseno="botanico"] #secPortada > .botanico-arco { display: block; position: absolute; z-index: 0; pointer-events: none; overflow: hidden; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; } body[data-diseno="botanico"] .botanico-arco > .bot-caja { position: absolute; top: var(--bot-arriba); left: calc(50% - var(--bot-arco) / 2); width: var(--bot-arco); aspect-ratio: 3 / 4; } /* Sin foto: el monograma dentro de la misma corona del sobre (invitacion.js la copia aquí). */ body[data-diseno="botanico"] .portada .monograma { border: 0; position: relative; width: 10.5rem; height: 10.5rem; margin-bottom: 1.4rem; font-family: var(--serif); font-style: italic; font-size: 1.55rem; letter-spacing: .06em; color: var(--acento); } body[data-diseno="botanico"] .monograma > .botanico-corona { display: block; position: absolute; inset: 0; z-index: -1; } body[data-diseno="botanico"] .portada.con-foto .monograma { display: none; } body[data-diseno="botanico"] .portada .portada-etiqueta { margin-bottom: 1.3rem; color: var(--botanico-etiqueta); text-shadow: none; font-size: var(--letra-etiqueta); font-weight: 500; letter-spacing: .36em; text-indent: .36em; } body[data-diseno="botanico"] .portada .portada-titulo { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--tinta); text-shadow: none; font-size: calc(clamp(3.3rem, 15.5vw, 5.4rem) * var(--escala, 1)); line-height: .98; letter-spacing: -.01em; } body[data-diseno="botanico"] .portada-titulo .conector { display: block; font-family: var(--script); font-style: normal; font-size: 1.12em; line-height: .6; color: var(--acento); margin: .1em 0 .06em; } body[data-diseno="botanico"] .portada .portada-frase { color: var(--tinta-2); text-shadow: none; font-size: var(--letra-lectura); margin-top: 1.5rem; } body[data-diseno="botanico"] .portada .fecha-grande { color: var(--tinta); text-shadow: none; font-style: italic; gap: 1.05rem; font-size: clamp(2rem, 9vw, 2.7rem); margin-top: 2.2rem; } /* Entre los números, una hojita en vez del rombo. */ body[data-diseno="botanico"] .portada .fecha-grande i { width: .5rem; height: .5rem; border-radius: 0 100% 0 100%; transform: rotate(-12deg); background: var(--botanico-hoja-2); } body[data-diseno="botanico"] .portada .fecha-texto { color: var(--tinta-2); text-shadow: none; } /* La rayita de "baja": con foto la portada no es de pantalla completa (el arco ya asoma lo que sigue) y la rayita caía sobre la fecha (revisar_portadas.mjs la quitaba en 82 de 96); ahí no va. Sin foto, sí, en los tonos del jardín. */ body[data-diseno="botanico"] .portada.con-foto .scroll-pista { display: none; } body[data-diseno="botanico"] .portada .scroll-pista { background: var(--linea); } body[data-diseno="botanico"] .portada .scroll-pista span { background: var(--acento); } /* Los avisos de la portada: montados sobre las orillas del arco, en las esquinas SIN ramillete (arriba a la derecha y abajo a la izquierda): encima de las ramas tapaban lo más fino del dibujo. ponerAvisos los mueve si ahí tapan un texto. */ body[data-diseno="botanico"] .aviso-a { left: auto; right: .3rem; top: calc(var(--bot-arriba) + var(--bot-arco) * .42); } body[data-diseno="botanico"] .aviso-b { left: .3rem; top: calc(var(--bot-arriba) + var(--bot-arco) * 1.06); } /* ─── las secciones: una ramita en vez de la raya, y títulos en itálica */ body[data-diseno="botanico"] .seccion { padding: 3.4rem 0; } body[data-diseno="botanico"] .regla { position: relative; display: block; width: 8.6rem; height: 1.45rem; margin: 0 auto 1.25rem; } body[data-diseno="botanico"] .regla::before, body[data-diseno="botanico"] .regla::after { content: ''; position: absolute; inset: 0; height: auto; -webkit-mask: var(--botanico-ramita-hojas) center / contain no-repeat; mask: var(--botanico-ramita-hojas) center / contain no-repeat; background: linear-gradient(90deg, var(--botanico-hoja), var(--botanico-hoja-2) 50%, var(--botanico-hoja)); } body[data-diseno="botanico"] .regla::after { -webkit-mask-image: var(--botanico-ramita-tallos); mask-image: var(--botanico-ramita-tallos); background: var(--botanico-tallo); } body[data-diseno="botanico"] .regla i { display: none; } body[data-diseno="botanico"] .titulo-seccion { font-family: var(--serif); font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0; text-indent: 0; font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.12; color: var(--tinta); margin: 0 0 1.9rem; text-wrap: balance; } body[data-diseno="botanico"] .parrafo { font-size: var(--letra-lectura); color: var(--tinta-2); } body[data-diseno="botanico"] .nota-chica, body[data-diseno="botanico"] .etiqueta, body[data-diseno="botanico"] .lugar p, body[data-diseno="botanico"] .itinerario .donde, body[data-diseno="botanico"] .datos-transferencia dt, body[data-diseno="botanico"] .lugar .tienda-etiqueta { color: var(--tinta-2); } /* Lo chico que la base pinta en el acento o en la tinta más tenue (3.6 y 2.3 contra el papel en arena): aquí, legible (la etiqueta da 5.2 o más, y la tinta-2, 4.9 o más, en las 24 paletas: pruebas/casos/diseno_botanico.js). */ body[data-diseno="botanico"] .pie-marca span, body[data-diseno="botanico"] .copiado { color: var(--botanico-etiqueta); } body[data-diseno="botanico"] .link-boton, body[data-diseno="botanico"] .campo::placeholder { color: var(--tinta-2); } body[data-diseno="botanico"] .etiqueta i { opacity: 1; } body[data-diseno="botanico"] .padrino dt { color: var(--botanico-etiqueta); font-weight: 500; } body[data-diseno="botanico"] .padrino dd { font-style: italic; font-size: 1.38rem; } /* La cuenta regresiva, en cuatro arcos. */ body[data-diseno="botanico"] .cuenta-caja { gap: .5rem; } body[data-diseno="botanico"] .cuenta-dato { padding: 1.25rem .15rem .85rem; border: 1px solid var(--botanico-borde); border-radius: 999px 999px .8rem .8rem; background: var(--papel-2); } body[data-diseno="botanico"] .cuenta-dato + .cuenta-dato::before { display: none; } body[data-diseno="botanico"] .cuenta-dato b { font-style: italic; } body[data-diseno="botanico"] .cuenta-dato span { color: var(--tinta-2); } body[data-diseno="botanico"] .cuenta-ya { font-style: italic; } /* Las tarjetas (dónde, regalos, confirmar, el pase): papel con borde suave y esquinas redondas. */ body[data-diseno="botanico"] .lugar, body[data-diseno="botanico"] .confirmar, body[data-diseno="botanico"] .pase { border-radius: 1.5rem; background: var(--papel-2); border: 1px solid var(--botanico-borde); backdrop-filter: none; box-shadow: 0 1.5rem 2.8rem -2.2rem var(--botanico-sombra); } body[data-diseno="botanico"] .lugar h3 { font-style: italic; font-weight: 300; font-size: 1.7rem; } body[data-diseno="botanico"] .itinerario .hora { font-style: italic; font-size: 1.2rem; } body[data-diseno="botanico"] .itinerario .que { font-size: 1.45rem; } body[data-diseno="botanico"] .itinerario li::before { background: linear-gradient(var(--botanico-hoja), var(--botanico-hoja-2)); } body[data-diseno="botanico"] .icono-momento { background: var(--papel-2); border-color: var(--botanico-borde); stroke: var(--botanico-tallo); } /* Al encenderse, una hoja clara (no un disco lleno: pesaba demasiado entre tanta línea fina). */ body[data-diseno="botanico"] .itinerario li.encendido .icono-momento { background: var(--botanico-hoja); border-color: var(--botanico-hoja-2); stroke: var(--botanico-tallo); } body[data-diseno="botanico"] .vestimenta { font-style: italic; font-size: clamp(2.3rem, 10vw, 3rem); } body[data-diseno="botanico"] .boton, body[data-diseno="botanico"] .opcion, body[data-diseno="botanico"] .enviar, body[data-diseno="botanico"] .contador-btn { border-radius: 999px; } body[data-diseno="botanico"] .boton, body[data-diseno="botanico"] .opcion { border-color: var(--botanico-borde); background: var(--papel-2); } body[data-diseno="botanico"] .boton { color: var(--tinta); } body[data-diseno="botanico"] .opcion[aria-pressed="true"], body[data-diseno="botanico"] .boton:hover { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); } body[data-diseno="botanico"] .contador-btn { border-color: var(--botanico-borde); } body[data-diseno="botanico"] .campo { border-radius: .9rem; border-color: var(--botanico-borde); } body[data-diseno="botanico"] .confirmar-saludo, body[data-diseno="botanico"] .gracias, body[data-diseno="botanico"] .pase-nombre { font-style: italic; } body[data-diseno="botanico"] .confirmar-limite { color: var(--botanico-etiqueta); } /* La galería y las fotos que corren: cada foto en un arco. La primera, ancha, en un arco rebajado (con el medio punto se comía las cabezas). Y las proporciones, dichas aquí: la base pone 16:9 a TODAS en pantalla ancha (su regla es ".galeria img:first-child", y cada foto es la primera de su botón), y los arcos quedaban medios círculos. */ body[data-diseno="botanico"] .galeria { gap: .7rem; } body[data-diseno="botanico"] .galeria-foto, body[data-diseno="botanico"] .vestimenta-fotos .galeria-foto { border-radius: 999px 999px .8rem .8rem; background: var(--papel-2); } body[data-diseno="botanico"] .galeria .galeria-foto img { aspect-ratio: 3 / 4; } body[data-diseno="botanico"] .galeria .galeria-foto:first-child { border-radius: 50% 50% .8rem .8rem / 34% 34% .8rem .8rem; } body[data-diseno="botanico"] .galeria .galeria-foto:first-child img { aspect-ratio: 4 / 3; } body[data-diseno="botanico"] #secGaleria.galeria-fija .galeria img, body[data-diseno="botanico"] #secGaleria.galeria-fija .galeria-foto:first-child img { aspect-ratio: 3 / 4; } body[data-diseno="botanico"] .cinta-fotos img { border-radius: 999px 999px 12px 12px; } body[data-diseno="botanico"] .video video { border-radius: 1.2rem; } /* El pie, y lo que flota. */ body[data-diseno="botanico"] #pieTitulo { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 2.5rem; } body[data-diseno="botanico"] #pieTitulo .conector { font-family: var(--script); font-style: normal; color: var(--acento); } body[data-diseno="botanico"] .pie-marca { color: var(--tinta-2); } body[data-diseno="botanico"] .musica { background: var(--papel-2); border-color: var(--botanico-borde); } /* La fecha que llega desde enorme (con el dedo): en itálica, con hojitas entre los números, y sobre el mismo lino (con su papel liso encima, quedaba una franja más clara entre la portada y la cuenta). */ body[data-diseno="botanico"] .fecha-capa-base { background: transparent; } body[data-diseno="botanico"] .fecha-escena-num { font-style: italic; } body[data-diseno="botanico"] .fecha-escena-num i { width: .16em; height: .16em; border-radius: 0 100% 0 100%; opacity: .7; } /* ─── el jardín de las orillas, en la compu: dos ramas altas a los lados de la invitación, que se mecen */ body[data-diseno="botanico"] .botanico-jardin .bot-rama { width: min(calc(50vw - 21rem), 34vh); height: auto; } /* Se mecen desde su base (abajo a la izquierda de la rama); la de la derecha es la misma, girada media vuelta. */ body[data-diseno="botanico"] .botanico-jardin .bot-rama > svg { transform-origin: 10% 100%; } body[data-diseno="botanico"] .botanico-jardin .bot-j1 { left: -1.5vw; bottom: -3vh; } body[data-diseno="botanico"] .botanico-jardin .bot-j2 { right: -1.5vw; top: -3vh; transform: rotate(180deg); } @media (min-width: 64rem) { body[data-diseno="botanico"] .botanico { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } } /* ═══════════════ ACUARELA (28-sep-2026) — manchas de acuarela sobre papel de algodón, tonos pastel y letra a mano Ternura, para un baby shower, un bautizo o unos XV en tonos suaves. Nada de luces: son VELADURAS de la paleta mezclada con el papel (color-mix), recortadas por formas orgánicas que viven aquí como máscaras SVG (solo alfa: la forma no trae color, el color lo pone la paleta). Cada mancha se seca como una de verdad: el pigmento ralo al centro, una franja más cargada en la orilla que se desvanece hacia adentro, una segunda veladura encimada, un "floreo" más claro con orilla de coliflor, la línea seca y unas gotitas; y cada una mezcla dos o tres pigmentos, como la acuarela en húmedo. Encima, el grano del papel de algodón. (Aurora son luces de neón que flotan; esto es pigmento en papel, y no flota.) Las secciones son tarjetas de papel de algodón con la orilla rasgada (clip-path medido en px: tiembla igual en una tarjeta chica que en una alta), y cada una parece recortada de una hoja pintada: su mancha está en una esquina y la corta la misma orilla. La apertura: al tocar, la mancha del medallón florece hasta cubrir la pantalla y se desvanece dejando ver la portada. Solo se mueve con transform y opacity (las manchas ya vienen difusas: ningún filtro se anima), y con "menos movimiento" nada florece. Las formas (manchas, luna, viñeta de la foto, trazo de pincel, orilla rasgada y papel) son datos fijos y viven aquí, en un solo lugar: cada contorno es una curva suave (Catmull-Rom) por 34 puntos cuyo radio lleva lóbulos, golpes y un temblor chico de ruido; la franja de la orilla son tres trazos anidados recortados por la misma forma. Ninguna lleva filtros: con un desenfoque dentro, la apertura se trababa casi un segundo (medido en Chrome, 28-sep-2026). */ body[data-diseno="acuarela"] { /* Los pigmentos: la paleta, mezclada con el papel. El alfa lo pone cada mancha (su máscara): en el papel claro quedan en pastel; en la noche, como luz suave sobre el fondo oscuro. */ --acuarela-a: color-mix(in srgb, var(--acento) 66%, var(--papel-2)); --acuarela-b: color-mix(in srgb, var(--acento-2) 84%, var(--papel-2)); --acuarela-c: color-mix(in srgb, var(--acento) 45%, var(--acento-2)); /* El papel de las tarjetas y el de las cajas de adentro, teñido apenas con el pigmento. */ --acuarela-carta: var(--papel-2); --acuarela-lavado: color-mix(in srgb, var(--acento) 8%, var(--papel-2)); --acuarela-lavado-2: color-mix(in srgb, var(--acento) 15%, var(--papel-2)); --acuarela-orla: color-mix(in srgb, var(--acento) 24%, transparent); --acuarela-sombra: color-mix(in srgb, var(--tinta) 22%, transparent); --acuarela-sombra-2: color-mix(in srgb, var(--tinta) 8%, transparent); /* El texto secundario: entre la tinta y la tinta-2 de la paleta. La tinta-2 sola se lee en el papel (5.8), pero encima de la orilla de una mancha bajaba de 4.5; este se lee en los dos. */ --acuarela-tinta-2: color-mix(in srgb, var(--tinta) 55%, var(--tinta-2)); /* El texto chico de color: el hondo de la paleta, con un poco de la tinta (el hondo solo, encima de la orilla de una mancha, bajaba a 3.6–3.9 en fucsia, arena o esmeralda). En la noche el hondo es más oscuro que el papel: ahí, el acento, aclarado con la tinta. */ --acuarela-color: color-mix(in srgb, var(--acento-hondo) 70%, var(--tinta)); /* Lo MÁS cargada que queda una mancha detrás de un texto (su franja de la orilla, con la opacidad de su capa): contra este tono se mide la letra en todas las paletas y con colores propios (pruebas/casos/diseno_acuarela.js). Si una mancha se carga más, se sube aquí. Comprobado además por píxeles, contra el fondo real de cada renglón (28-sep-2026): las 24 paletas y 4 juegos de colores propios, con foto y sin ella, ningún texto debajo de lo que pide; el más justo, 1.25 veces lo pedido (arena). */ --acuarela-fondo-peor: color-mix(in srgb, var(--acento) 28%, var(--papel)); /* La capa de color de la fecha: una aguada con la letra de la tinta encima, y la fuerza de sus dos manchas. */ --acuarela-capa: color-mix(in srgb, var(--acento) 26%, var(--papel)); --acuarela-capa-b: 45%; --acuarela-capa-c: 35%; /* El trazo de "Abrir invitación", quieto y al pasar encima (la letra de la tinta se mide contra el más cargado). */ --acuarela-trazo-reposo: .8; --acuarela-trazo-encima: 1; --acuarela-mancha-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cpath id='a' d='M194 60C203 66 210 74 218 79C225 84 230 89 237 90C245 92 254 89 262 90C270 91 280 92 288 95C296 98 303 104 312 108C320 113 335 115 341 122C348 129 349 141 352 150C355 159 358 169 357 179C357 189 351 198 350 208C348 217 350 227 349 236C348 245 346 255 343 264C340 273 338 284 332 291C326 298 312 300 305 306C297 312 292 319 286 327C279 335 274 346 266 351C257 356 246 358 236 358C226 358 216 353 206 350C197 347 188 344 180 341C171 337 164 332 156 329C148 326 138 327 130 323C123 320 116 314 109 308C102 303 97 296 91 289C85 283 76 278 72 270C68 263 69 252 68 244C66 235 65 227 63 218C61 210 59 202 56 193C53 183 47 173 46 163C46 153 51 144 55 135C59 126 66 119 70 110C74 100 74 88 79 77C83 67 88 53 97 47C105 41 120 43 132 43C143 42 154 41 164 44C175 46 185 54 194 60Z'/%3E%3Cpath id='b' d='M192 84C198 82 205 84 212 84C218 84 224 84 230 84C236 84 242 83 248 84C253 85 259 89 264 90C270 92 276 93 282 96C287 98 292 102 298 105C304 108 310 110 317 114C324 117 334 120 339 125C344 130 345 139 348 146C350 153 353 161 354 168C355 176 355 183 354 191C354 199 353 207 350 214C347 221 342 227 337 233C332 238 326 243 319 247C312 250 305 252 298 254C290 255 282 253 276 254C270 255 266 256 261 259C256 261 252 268 247 270C242 272 236 271 230 273C224 274 219 277 212 279C205 281 198 283 190 283C183 284 175 284 168 281C161 278 156 272 151 268C145 263 139 258 135 252C131 246 128 239 126 232C125 225 127 217 126 210C126 203 126 197 125 190C124 184 123 177 121 170C119 163 114 155 114 147C114 140 117 133 121 126C125 120 131 115 138 111C144 107 153 106 160 103C166 101 171 98 177 94C182 91 186 86 192 84Z'/%3E%3Cpath id='f' d='M172 270C170 271 168 272 165 273C163 273 161 272 158 272C156 271 154 271 151 271C149 271 147 270 144 269C142 269 139 269 136 268C133 267 131 266 128 265C125 264 120 263 118 261C117 258 120 253 120 250C120 247 118 245 118 242C117 239 116 236 117 234C117 231 119 228 120 226C121 223 122 221 124 219C125 217 128 216 130 214C132 212 133 210 134 209C136 207 138 207 140 204C141 202 141 197 143 195C144 192 147 192 150 191C153 191 156 191 158 192C161 192 163 194 166 195C168 196 171 196 173 196C175 197 178 198 180 198C182 199 184 200 187 201C190 202 193 202 195 204C198 205 199 208 200 211C201 213 203 215 204 218C204 221 201 224 201 227C202 230 205 232 206 234C207 237 209 240 208 243C208 246 204 248 203 250C201 252 199 254 198 257C197 259 198 263 196 265C194 267 189 267 187 267C184 267 180 266 178 267C176 267 174 269 172 270Z'/%3E%3CclipPath id='c'%3E%3Cuse href='%23a'/%3E%3C/clipPath%3E%3CclipPath id='k'%3E%3Cuse href='%23b'/%3E%3C/clipPath%3E%3Cmask id='m'%3E%3Crect width='400' height='400' fill='white'/%3E%3Cuse href='%23f' fill='black' fill-opacity='.2'/%3E%3C/mask%3E%3CradialGradient id='g' cx='.47' cy='.45' r='.6'%3E%3Cstop offset='0' stop-opacity='0.2'/%3E%3Cstop offset='.7' stop-opacity='0.34'/%3E%3Cstop offset='1' stop-opacity='0.46'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cuse href='%23a' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.06'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.07'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.08'/%3E%3C/g%3E%3Cuse href='%23b' fill-opacity='0.15'/%3E%3Cg clip-path='url(%23k)'%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.05'/%3E%3C/g%3E%3C/g%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-opacity='0.44' stroke-width='1.7'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-opacity='0.22' stroke-width='1.2'/%3E%3Cuse href='%23f' fill='none' stroke='black' stroke-opacity='0.2' stroke-width='1.1'/%3E%3Ccircle cx='356' cy='66' r='5' fill-opacity='0.5'/%3E%3Ccircle cx='375' cy='92' r='2.6' fill-opacity='0.45'/%3E%3Ccircle cx='40' cy='352' r='3.4' fill-opacity='0.42'/%3E%3Ccircle cx='340' cy='350' r='2.2' fill-opacity='0.4'/%3E%3C/svg%3E"); --acuarela-mancha-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cpath id='a' d='M49 104C56 97 66 90 77 87C89 83 103 82 116 82C129 82 142 84 154 85C166 86 176 88 187 89C197 89 206 91 217 90C228 89 240 83 251 83C262 83 274 86 283 90C292 94 300 100 305 107C310 114 306 126 312 132C319 137 337 136 346 140C355 144 365 151 367 157C369 164 358 174 358 181C358 188 363 194 366 201C370 208 378 217 379 224C379 232 375 240 369 246C364 253 352 257 346 263C340 270 342 280 335 286C329 292 316 295 307 299C298 304 291 310 281 314C271 318 259 320 248 321C237 323 226 324 215 325C204 326 192 327 181 326C170 325 159 322 148 320C137 318 126 316 116 312C106 308 97 303 90 297C82 292 74 286 72 278C69 271 75 259 73 252C72 245 67 241 64 235C60 229 56 224 53 218C50 212 49 205 46 199C43 192 38 185 34 178C30 170 22 159 21 151C21 143 29 136 34 128C38 120 41 111 49 104Z'/%3E%3Cpath id='b' d='M43 160C45 154 50 149 58 146C65 143 78 146 86 143C93 141 97 136 104 133C111 131 119 127 126 128C134 128 143 133 150 134C158 135 165 133 172 134C180 134 187 136 193 138C200 140 206 143 211 146C217 150 221 154 226 157C230 161 234 164 238 168C242 172 244 176 247 180C251 184 257 187 260 191C263 195 266 200 268 204C270 209 273 214 272 219C271 224 266 228 263 233C260 237 256 241 253 245C249 249 247 253 244 258C242 263 243 270 239 274C235 278 227 281 220 283C214 284 205 283 197 284C190 285 184 286 178 288C171 290 165 293 158 295C150 297 143 298 134 300C126 301 115 305 107 304C99 304 91 299 85 295C79 291 73 286 70 281C66 276 65 269 63 264C62 258 60 253 61 248C62 243 66 237 68 233C69 228 69 225 68 221C68 217 66 214 65 210C63 206 63 203 60 198C57 193 50 187 47 180C44 174 41 166 43 160Z'/%3E%3Cpath id='f' d='M108 246C109 244 112 241 113 239C114 236 115 235 114 233C114 230 109 228 108 225C107 223 108 220 109 218C111 216 115 215 118 214C121 212 125 212 128 211C130 209 132 208 134 206C137 205 140 204 143 204C146 204 149 205 152 205C155 206 158 208 160 209C163 209 165 207 167 207C170 207 172 208 175 208C177 208 180 207 184 207C187 207 192 206 195 207C199 207 201 209 204 210C207 211 211 213 213 215C214 217 214 220 215 222C216 224 219 226 220 228C221 231 220 233 219 236C218 238 217 241 215 242C212 244 207 245 204 247C201 248 199 249 198 251C196 252 197 255 196 257C195 259 193 261 190 262C188 263 183 262 180 262C177 262 174 261 172 262C169 263 167 267 164 267C162 268 159 265 156 264C153 263 151 262 148 262C146 262 142 262 139 262C136 262 133 261 130 260C128 259 126 257 123 256C120 255 115 254 113 253C110 251 108 249 108 246Z'/%3E%3CclipPath id='c'%3E%3Cuse href='%23a'/%3E%3C/clipPath%3E%3CclipPath id='k'%3E%3Cuse href='%23b'/%3E%3C/clipPath%3E%3Cmask id='m'%3E%3Crect width='400' height='400' fill='white'/%3E%3Cuse href='%23f' fill='black' fill-opacity='.2'/%3E%3C/mask%3E%3CradialGradient id='g' cx='.47' cy='.45' r='.6'%3E%3Cstop offset='0' stop-opacity='0.2'/%3E%3Cstop offset='.7' stop-opacity='0.34'/%3E%3Cstop offset='1' stop-opacity='0.46'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cuse href='%23a' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.06'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.07'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.08'/%3E%3C/g%3E%3Cuse href='%23b' fill-opacity='0.15'/%3E%3Cg clip-path='url(%23k)'%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.05'/%3E%3C/g%3E%3C/g%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-opacity='0.44' stroke-width='1.7'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-opacity='0.22' stroke-width='1.2'/%3E%3Cuse href='%23f' fill='none' stroke='black' stroke-opacity='0.2' stroke-width='1.1'/%3E%3Ccircle cx='26' cy='64' r='3' fill-opacity='0.45'/%3E%3Ccircle cx='376' cy='322' r='4.2' fill-opacity='0.42'/%3E%3Ccircle cx='392' cy='296' r='2' fill-opacity='0.4'/%3E%3C/svg%3E"); --acuarela-mancha-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cpath id='a' d='M78 110C86 104 95 100 102 94C109 88 114 82 119 73C125 64 128 51 135 42C142 33 151 25 161 20C170 16 181 14 192 14C202 15 213 16 223 21C232 25 242 33 249 41C256 50 260 63 266 71C272 79 278 84 283 91C288 98 292 106 296 113C301 120 309 125 311 133C314 140 312 150 314 159C315 167 318 173 321 181C325 189 335 198 336 207C337 215 330 223 329 233C328 242 329 251 330 262C330 273 335 287 333 298C331 309 324 318 318 327C312 336 304 343 296 351C289 360 282 372 273 379C264 386 253 393 242 393C231 393 218 382 208 377C197 373 188 370 179 364C171 358 163 348 157 340C150 332 146 322 141 315C136 308 129 305 125 298C121 292 120 282 116 276C112 269 108 265 101 260C94 255 85 252 75 246C65 240 48 233 43 224C38 215 42 203 43 192C43 182 43 171 46 161C48 151 52 141 58 132C63 124 71 116 78 110Z'/%3E%3Cpath id='b' d='M274 150C279 152 282 158 288 162C293 166 298 169 305 172C312 175 324 177 330 182C336 187 338 195 341 203C344 211 346 219 347 227C348 235 347 244 345 252C343 260 340 268 334 274C328 280 315 282 309 286C303 290 301 296 297 300C292 305 287 308 283 312C278 316 274 320 270 325C266 330 262 337 256 340C251 344 244 344 238 344C232 344 225 342 219 341C214 339 208 337 202 336C196 335 189 338 184 335C179 333 176 324 172 319C168 314 165 309 161 305C157 300 154 296 150 292C147 287 144 282 140 277C136 273 131 268 125 263C120 257 112 252 106 244C101 237 94 228 93 219C92 211 97 203 99 195C102 186 103 177 107 170C111 163 115 154 123 150C130 146 142 147 151 147C160 147 169 150 176 151C184 153 189 154 195 154C200 153 204 151 209 150C214 149 219 148 224 148C229 148 234 150 239 150C244 150 250 149 256 149C262 149 269 148 274 150Z'/%3E%3Cpath id='f' d='M133 194C135 192 139 192 142 192C144 191 148 192 150 193C153 193 156 195 158 195C160 195 162 194 165 194C167 194 169 195 171 196C174 196 176 196 178 198C180 199 180 202 183 203C185 204 188 203 191 204C194 205 198 206 199 208C201 210 200 214 201 217C201 220 202 222 202 225C202 228 202 230 202 233C203 236 204 239 204 242C204 244 205 248 204 250C202 253 198 254 196 256C193 257 192 259 191 261C189 264 190 267 189 271C187 274 186 278 184 280C182 282 178 281 176 282C173 282 170 282 167 282C164 282 161 282 159 280C156 279 154 276 152 273C151 271 151 266 149 265C147 263 143 266 141 266C139 265 136 264 135 262C134 260 136 255 134 253C133 251 130 251 127 249C125 248 120 246 119 244C117 241 116 238 116 235C116 232 118 229 119 226C119 223 120 220 121 218C122 215 123 213 125 210C126 207 127 204 128 202C129 199 130 195 133 194Z'/%3E%3CclipPath id='c'%3E%3Cuse href='%23a'/%3E%3C/clipPath%3E%3CclipPath id='k'%3E%3Cuse href='%23b'/%3E%3C/clipPath%3E%3Cmask id='m'%3E%3Crect width='400' height='400' fill='white'/%3E%3Cuse href='%23f' fill='black' fill-opacity='.2'/%3E%3C/mask%3E%3CradialGradient id='g' cx='.47' cy='.45' r='.6'%3E%3Cstop offset='0' stop-opacity='0.2'/%3E%3Cstop offset='.7' stop-opacity='0.34'/%3E%3Cstop offset='1' stop-opacity='0.46'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cuse href='%23a' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.06'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.07'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.08'/%3E%3C/g%3E%3Cuse href='%23b' fill-opacity='0.15'/%3E%3Cg clip-path='url(%23k)'%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.05'/%3E%3C/g%3E%3C/g%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-opacity='0.44' stroke-width='1.7'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-opacity='0.22' stroke-width='1.2'/%3E%3Cuse href='%23f' fill='none' stroke='black' stroke-opacity='0.2' stroke-width='1.1'/%3E%3Ccircle cx='66' cy='34' r='4' fill-opacity='0.46'/%3E%3Ccircle cx='48' cy='18' r='2' fill-opacity='0.4'/%3E%3Ccircle cx='362' cy='358' r='3' fill-opacity='0.44'/%3E%3C/svg%3E"); --acuarela-luna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cpath id='a' d='M362 266C356 275 347 282 341 290C334 298 331 309 323 315C316 322 305 326 296 330C286 334 276 337 267 340C258 344 250 348 240 353C231 358 222 368 212 369C202 371 191 365 180 363C170 362 158 365 149 361C139 357 132 347 124 340C116 333 110 325 103 319C96 312 89 307 81 301C74 294 64 289 58 281C52 273 49 264 45 254C41 245 39 236 36 226C33 216 32 206 29 196C27 185 20 173 21 163C22 152 29 142 34 132C39 123 45 114 51 105C58 96 64 87 72 80C80 73 90 68 99 63C109 58 118 53 128 50C138 48 149 47 160 47C170 46 180 49 189 48C199 47 209 43 219 43C229 44 238 48 247 51C257 54 267 56 276 60C284 65 292 72 299 78C307 85 313 91 321 98C328 105 336 111 343 118C350 126 357 134 362 143C367 152 370 163 373 173C376 183 380 194 381 204C381 215 381 227 378 237C375 247 368 257 362 266Z'/%3E%3Cpath id='b' d='M264 129C269 132 272 142 277 146C283 149 291 147 297 149C303 151 310 154 315 158C320 162 325 167 329 173C332 179 332 186 334 193C336 199 338 205 338 211C339 218 339 224 339 230C338 237 340 243 338 249C337 255 334 261 331 267C328 273 325 278 322 283C318 288 314 293 310 298C305 302 300 306 295 310C290 313 284 315 279 318C273 321 268 326 263 329C257 332 250 333 244 334C237 335 230 333 224 332C218 331 211 332 205 329C199 326 194 321 189 317C185 313 180 309 175 306C170 302 164 300 160 296C155 292 153 286 150 281C146 276 140 272 137 267C133 261 131 255 128 249C125 243 120 236 119 230C118 223 120 216 121 209C123 202 124 195 128 190C132 184 138 179 143 175C148 170 153 165 158 162C164 159 171 158 176 155C182 152 186 148 191 145C197 143 203 145 209 142C214 140 219 135 225 132C231 130 238 128 244 128C250 127 258 126 264 129Z'/%3E%3Cpath id='f' d='M156 118C159 119 162 119 165 121C168 123 169 128 171 130C173 133 175 134 177 136C180 137 183 138 186 139C189 141 193 143 195 145C197 147 198 151 199 154C200 157 199 160 199 163C200 166 200 169 201 173C201 176 203 180 203 183C203 186 203 190 200 193C198 195 192 196 188 197C184 198 181 199 179 200C176 202 174 203 172 205C170 207 169 210 167 212C165 215 163 220 160 221C157 222 153 221 150 220C147 219 144 216 141 214C139 213 137 211 134 210C131 210 129 209 125 209C122 209 117 210 114 210C110 209 107 207 104 205C102 203 102 198 101 195C99 192 97 190 96 187C94 184 91 181 91 177C91 174 92 170 94 167C95 164 98 162 100 159C102 156 102 153 103 150C105 148 105 144 107 143C110 141 116 142 119 141C121 140 122 137 123 135C125 132 127 129 129 127C131 125 133 122 136 120C139 119 143 119 146 118C149 118 152 118 156 118Z'/%3E%3CclipPath id='c'%3E%3Cuse href='%23a'/%3E%3C/clipPath%3E%3CclipPath id='k'%3E%3Cuse href='%23b'/%3E%3C/clipPath%3E%3Cmask id='m'%3E%3Crect width='400' height='400' fill='white'/%3E%3Cuse href='%23f' fill='black' fill-opacity='.2'/%3E%3C/mask%3E%3CradialGradient id='g' cx='.47' cy='.45' r='.6'%3E%3Cstop offset='0' stop-opacity='0.2'/%3E%3Cstop offset='.7' stop-opacity='0.34'/%3E%3Cstop offset='1' stop-opacity='0.46'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cuse href='%23a' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.06'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.07'/%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.08'/%3E%3C/g%3E%3Cuse href='%23b' fill-opacity='0.15'/%3E%3Cg clip-path='url(%23k)'%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='26' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='15' stroke-opacity='0.04'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-width='6' stroke-opacity='0.05'/%3E%3C/g%3E%3C/g%3E%3Cuse href='%23a' fill='none' stroke='black' stroke-opacity='0.44' stroke-width='1.7'/%3E%3Cuse href='%23b' fill='none' stroke='black' stroke-opacity='0.22' stroke-width='1.2'/%3E%3Cuse href='%23f' fill='none' stroke='black' stroke-opacity='0.2' stroke-width='1.1'/%3E%3Ccircle cx='48' cy='60' r='4' fill-opacity='0.45'/%3E%3Ccircle cx='30' cy='84' r='2.2' fill-opacity='0.4'/%3E%3Ccircle cx='360' cy='350' r='3.2' fill-opacity='0.44'/%3E%3C/svg%3E"); --acuarela-vineta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' r='.5'%3E%3Cstop offset='.68' stop-opacity='1'/%3E%3Cstop offset='.93' stop-opacity='.35'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h' r='.5'%3E%3Cstop offset='.78' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='.55'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M235 369C225 370 213 364 203 362C193 360 184 358 174 357C164 356 155 356 144 356C133 355 122 355 111 353C99 351 87 349 76 344C65 339 54 331 46 323C38 314 30 303 26 292C23 281 24 267 25 254C26 242 34 230 33 219C32 208 23 198 21 187C19 176 19 164 21 153C24 142 30 131 36 122C42 112 50 104 58 96C65 88 73 79 83 75C92 71 107 74 116 70C126 65 131 57 138 49C146 41 154 28 164 23C173 18 186 17 196 18C207 20 217 29 227 32C238 35 248 36 258 38C268 41 279 44 289 48C299 52 309 56 319 62C329 67 343 72 349 81C355 90 355 105 357 117C359 128 357 139 362 150C367 160 383 168 389 178C394 189 396 203 393 214C389 225 376 235 370 245C364 255 359 264 355 274C351 284 352 298 346 307C341 316 329 322 321 328C312 335 304 342 294 347C285 352 274 354 264 357C254 361 245 368 235 369Z' fill='url(%23g)'/%3E%3Cpath d='M39 128C41 117 42 104 49 96C56 87 68 81 78 77C89 74 104 75 114 73C124 71 132 67 140 64C149 60 157 57 166 54C175 51 183 47 193 43C202 40 212 37 222 35C233 33 245 29 256 31C266 33 276 40 285 46C294 52 301 59 309 66C317 74 325 81 331 89C337 98 339 109 345 118C350 127 357 135 364 144C370 153 380 163 383 174C386 185 385 197 382 208C378 219 368 229 362 238C356 248 352 256 348 266C344 276 344 287 339 296C333 304 324 311 316 317C308 324 300 329 292 335C284 341 276 348 267 353C258 359 249 364 239 366C229 368 218 367 208 367C198 367 188 365 178 364C168 363 157 362 148 358C139 355 129 349 121 343C113 337 107 330 100 323C93 316 88 308 80 301C72 295 61 291 51 284C42 277 28 270 22 261C16 251 17 238 17 226C17 215 19 203 22 192C25 181 33 172 35 161C38 151 37 139 39 128Z' fill='url(%23h)'/%3E%3C/svg%3E"); --acuarela-trazo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 48' preserveAspectRatio='none'%3E%3Cpath id='t' d='M8 26C10 25 18 21 23 20C28 19 33 19 38 19C42 18 47 18 52 17C57 17 62 16 67 16C72 15 77 16 82 15C87 15 92 13 97 13C102 12 106 13 111 13C116 13 121 12 126 12C131 11 136 11 141 11C146 11 151 10 156 10C161 10 166 10 170 9C175 9 180 9 185 9C190 8 195 7 200 7C205 7 210 8 215 8C220 8 225 7 230 6C234 6 239 6 244 6C249 6 254 6 259 6C264 6 269 6 274 6C279 6 284 8 289 8C294 8 298 8 303 8C308 9 313 10 318 10C323 11 328 11 333 11C338 12 343 12 348 13C353 14 358 15 362 16C367 17 372 19 377 20C382 21 390 20 392 21C394 21 394 23 392 23C390 23 382 22 377 22C372 23 367 25 362 26C358 27 353 28 348 29C343 30 338 29 333 30C328 30 323 32 318 32C313 32 308 31 303 31C298 32 294 33 289 33C284 34 279 33 274 34C269 34 264 36 259 37C254 38 249 38 244 38C239 38 234 38 230 38C225 38 220 40 215 40C210 40 205 40 200 40C195 40 190 39 185 39C180 39 175 39 170 39C166 40 161 42 156 42C151 43 146 43 141 43C136 42 131 42 126 41C121 41 116 41 111 41C106 40 102 41 97 41C92 40 87 39 82 39C77 39 72 40 67 39C62 39 57 38 52 37C47 37 42 36 38 36C33 35 28 35 23 34C18 33 10 29 8 28C6 27 6 27 8 26Z' fill-opacity='.6'/%3E%3Cuse href='%23t' fill='none' stroke='black' stroke-opacity='.32' stroke-width='1.3'/%3E%3C/svg%3E"); --acuarela-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.075'/%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E"); --acuarela-orilla: polygon(0.0% 2px, 3.8% 1px, 7.7% 0px, 11.5% 0px, 15.4% 0px, 19.2% 0px, 23.1% 0px, 26.9% 1px, 30.8% 2px, 34.6% 2px, 38.5% 2px, 42.3% 2px, 46.2% 1px, 50.0% 1px, 53.8% 2px, 57.7% 1px, 61.5% 2px, 65.4% 2px, 69.2% 1px, 73.1% 2px, 76.9% 1px, 80.8% 2px, 84.6% 1px, 88.5% 0px, 92.3% 2px, 96.2% 1px, calc(100% - 0px) 0.0%, calc(100% - 1px) 3.8%, calc(100% - 0px) 7.7%, calc(100% - 0px) 11.5%, calc(100% - 1px) 15.4%, calc(100% - 3px) 19.2%, calc(100% - 1px) 23.1%, calc(100% - 2px) 26.9%, calc(100% - 1px) 30.8%, calc(100% - 1px) 34.6%, calc(100% - 1px) 38.5%, calc(100% - 2px) 42.3%, calc(100% - 0px) 46.2%, calc(100% - 2px) 50.0%, calc(100% - 0px) 53.8%, calc(100% - 1px) 57.7%, calc(100% - 1px) 61.5%, calc(100% - 1px) 65.4%, calc(100% - 1px) 69.2%, calc(100% - 1px) 73.1%, calc(100% - 3px) 76.9%, calc(100% - 1px) 80.8%, calc(100% - 1px) 84.6%, calc(100% - 2px) 88.5%, calc(100% - 1px) 92.3%, calc(100% - 0px) 96.2%, 100.0% calc(100% - 1px), 96.2% calc(100% - 3px), 92.3% calc(100% - 3px), 88.5% calc(100% - 2px), 84.6% calc(100% - 1px), 80.8% calc(100% - 1px), 76.9% calc(100% - 0px), 73.1% calc(100% - 2px), 69.2% calc(100% - 1px), 65.4% calc(100% - 1px), 61.5% calc(100% - 1px), 57.7% calc(100% - 2px), 53.8% calc(100% - 2px), 50.0% calc(100% - 3px), 46.2% calc(100% - 1px), 42.3% calc(100% - 1px), 38.5% calc(100% - 2px), 34.6% calc(100% - 3px), 30.8% calc(100% - 2px), 26.9% calc(100% - 2px), 23.1% calc(100% - 2px), 19.2% calc(100% - 3px), 15.4% calc(100% - 2px), 11.5% calc(100% - 2px), 7.7% calc(100% - 2px), 3.8% calc(100% - 2px), 1px 100.0%, 2px 96.2%, 1px 92.3%, 1px 88.5%, 2px 84.6%, 1px 80.8%, 0px 76.9%, 0px 73.1%, 2px 69.2%, 1px 65.4%, 3px 61.5%, 2px 57.7%, 1px 53.8%, 3px 50.0%, 3px 46.2%, 1px 42.3%, 1px 38.5%, 1px 34.6%, 1px 30.8%, 1px 26.9%, 1px 23.1%, 1px 19.2%, 2px 15.4%, 2px 11.5%, 1px 7.7%, 2px 3.8%); } /* Un tercer tono, vecino del acento (su matiz corrido), para que una paleta de un solo color se pinte con dos o tres pigmentos, como una acuarela de verdad. Donde el navegador no sabe correr el matiz, se queda la mezcla de arriba. */ @supports (color: oklch(from red l c h)) { body[data-diseno="acuarela"] { --acuarela-c: oklch(from var(--acuarela-a) calc(l + .04) c calc(h + var(--acuarela-matiz, 38))); } } /* En las paletas doradas el vecino hacia arriba es verde oliva: ahí se corre hacia el rosa (oro rosa), y el vino hacia el ciruela. */ body[data-diseno="acuarela"][data-paleta="arena"], body[data-diseno="acuarela"][data-paleta="girasol"], body[data-diseno="acuarela"][data-paleta="champan"], body[data-diseno="acuarela"][data-paleta="noche"], body[data-diseno="acuarela"][data-paleta="vino"] { --acuarela-matiz: -40; } /* La noche: el papel es oscuro, así que el pigmento es la luz (el acento, que ahí es claro). */ body[data-diseno="acuarela"][data-paleta="noche"] { --acuarela-a: color-mix(in srgb, var(--acento) 74%, var(--papel-2)); --acuarela-b: color-mix(in srgb, var(--acento-2) 55%, var(--tinta)); --acuarela-color: color-mix(in srgb, var(--acento) 70%, var(--tinta)); --acuarela-sombra: color-mix(in srgb, var(--papel) 70%, transparent); /* En la noche el pigmento es claro y la letra también: el trazo y las manchas de la fecha, más tenues. */ --acuarela-capa-b: 24%; --acuarela-capa-c: 20%; --acuarela-trazo-reposo: .42; --acuarela-trazo-encima: .52; --acuarela-fondo-peor: color-mix(in srgb, var(--acento) 30%, var(--papel)); --acuarela-capa: color-mix(in srgb, var(--acento) 22%, var(--papel)); } /* El papel de algodón: las ondas del prensado en frío y el grano, en UNA capa fija ENCIMA de todo (tarjetas, manchas, fotos y el sobre: todo parece impreso en el mismo papel). Antes iba en el fondo de cada mancha y cada tarjeta: decenas de capas que mezclar y el mismo ruido pintado muchas veces. Debajo del botón que acompaña, del letrero de ejemplo y de los efectos (80 y más), que no son del papel. */ body[data-diseno="acuarela"]::before { background-image: var(--acuarela-papel); background-size: 240px 240px; opacity: .85; z-index: 70; } body[data-diseno="acuarela"][data-paleta="noche"]::before { opacity: .5; } body[data-diseno="acuarela"] #invitacion::before { display: none; } /* ═══ la apertura: una tarjeta de papel con su medallón pintado; al tocar, la mancha florece y cubre la pantalla */ body[data-diseno="acuarela"] .sobre { gap: 2.1rem; } /* Dos manchas grandes sobre la mesa, que se salen por las esquinas. Van DENTRO de la pantalla (la forma se acomoda con mask-position, y su pigmento con background-position): nada se sale ni hace scroll. */ body[data-diseno="acuarela"] .sobre::before, body[data-diseno="acuarela"] .sobre::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: transform 1.5s cubic-bezier(.3,.1,.25,1) .22s, opacity .9s ease .22s; } body[data-diseno="acuarela"] .sobre::before { --acuarela-sitio: -15vmin -13vmin / 76vmin 76vmin; background: linear-gradient(140deg, var(--acuarela-c) 10%, var(--acuarela-a) 50%, var(--acuarela-b) 90%) var(--acuarela-sitio) no-repeat; -webkit-mask: var(--acuarela-mancha-1) var(--acuarela-sitio) no-repeat; mask: var(--acuarela-mancha-1) var(--acuarela-sitio) no-repeat; opacity: .82; transform-origin: 23vmin 25vmin; } body[data-diseno="acuarela"] .sobre::after { --acuarela-sitio: calc(100% + 17vmin) calc(100% + 15vmin) / 70vmin 76vmin; background: linear-gradient(320deg, var(--acuarela-c) 10%, var(--acuarela-b) 55%, var(--acuarela-a)) var(--acuarela-sitio) no-repeat; -webkit-mask: var(--acuarela-mancha-3) var(--acuarela-sitio) no-repeat; mask: var(--acuarela-mancha-3) var(--acuarela-sitio) no-repeat; opacity: .78; transform-origin: calc(100% - 18vmin) calc(100% - 23vmin); } body[data-diseno="acuarela"] .sobre.abriendo { overflow: hidden; } body[data-diseno="acuarela"] .sobre.abriendo::before { transform: scale(1.7); opacity: .9; } body[data-diseno="acuarela"] .sobre.abriendo::after { transform: scale(1.8); opacity: .86; } body[data-diseno="acuarela"] .sobre-carta { /* Nunca más ancha que el hueco del sobre (su relleno es de 1.5rem por lado): con un vw a secas, en un celular la carta medía más que el hueco y el sobre se arrastraba de lado. */ width: min(20rem, calc(100vw - 3rem)); min-height: 0; padding: 6.4rem 1.5rem 2.4rem; background: none; box-shadow: none; isolation: isolate; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-carta { transform: none; } /* El papel de la tarjeta, con su orilla rasgada y una aguada clarita en la esquina. */ body[data-diseno="acuarela"] .sobre-carta::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 92% 104%, var(--acuarela-lavado-2), transparent 72%), var(--acuarela-carta); clip-path: var(--acuarela-orilla); transition: opacity .55s ease .12s; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-carta::after { opacity: 0; } /* La sombra del papel: la solapa, que en Acuarela no existe (no es un sobre, es una tarjeta). */ body[data-diseno="acuarela"] .sobre-solapa { inset: 1.6rem 1.1rem .3rem; height: auto; z-index: -2; clip-path: none; background: none; filter: none; border-radius: 1.4rem; box-shadow: 0 1.5rem 2.8rem -.7rem var(--acuarela-sombra), 0 .15rem .5rem var(--acuarela-sombra-2); transform: none; transition: opacity .45s ease; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-solapa { transform: none; opacity: 0; } /* La mancha que florece: nace del tamaño del medallón (a su misma altura), cubre la tarjeta y luego la pantalla. Es el relieve de la carta de siempre, que aquí no va. */ body[data-diseno="acuarela"] .sobre-carta::before { inset: auto; left: 50%; top: 3.6rem; width: 12rem; height: 12rem; margin: -6rem 0 0 -6rem; z-index: 1; background: linear-gradient(145deg, var(--acuarela-c), var(--acuarela-a) 45%, var(--acuarela-b)); -webkit-mask: var(--acuarela-luna) center / 100% 100% no-repeat; mask: var(--acuarela-luna) center / 100% 100% no-repeat; mix-blend-mode: normal; opacity: 0; transform: scale(.45); } /* Crece desde el primer cuadro (el medallón se deshace en ella); a los ~0.6 s ya no se ve nada de lo de atrás (ahí la invitación aparece detrás), y sigue abriéndose mientras el sobre se desvanece. */ body[data-diseno="acuarela"] .sobre.abriendo .sobre-carta::before { animation: acuarela-florece 1.3s linear forwards; } @keyframes acuarela-florece { 0% { opacity: .9; transform: scale(.5); } 7% { opacity: 1; transform: scale(.95); } 18% { transform: scale(1.8); } 38% { transform: scale(3.8); } 66% { transform: scale(7); } 100% { opacity: 1; transform: scale(9.6); } } /* El medallón: una gota de color con las iniciales a mano. */ body[data-diseno="acuarela"] .sobre-sello { top: 1.35rem; left: 50%; width: 4.5rem; height: 4.5rem; margin: 0 0 0 -2.25rem; z-index: 3; isolation: isolate; clip-path: none; background: none; box-shadow: none; text-shadow: none; font-family: var(--script); font-size: 1.8rem; color: var(--tinta); letter-spacing: 0; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.7,.2,1); } body[data-diseno="acuarela"] .sobre-sello::before { content: ''; position: absolute; inset: -.7rem; z-index: -1; background: linear-gradient(135deg, var(--acuarela-b), var(--acuarela-a) 55%, var(--acuarela-c)); -webkit-mask: var(--acuarela-mancha-1) center / 100% 100% no-repeat; mask: var(--acuarela-mancha-1) center / 100% 100% no-repeat; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-sello { animation: none; opacity: 0; transform: scale(1.2); } body[data-diseno="acuarela"] .sobre-cuerpo { transition: opacity .3s ease; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-cuerpo { opacity: 0; } body[data-diseno="acuarela"] .sobre-para { color: var(--acuarela-tinta-2); font-size: var(--letra-etiqueta); letter-spacing: .26em; text-indent: .26em; margin-bottom: 1rem; } body[data-diseno="acuarela"] .sobre-titulo { font-size: calc(2.75rem * var(--escala, 1)); line-height: 1.14; margin-bottom: .75rem; color: var(--tinta); } body[data-diseno="acuarela"] .sobre-fecha { color: var(--acuarela-tinta-2); letter-spacing: .28em; } /* "Abrir invitación" sobre un trazo de pincel. La letra, en la tinta (sobre el trazo más cargado se lee de sobra). */ body[data-diseno="acuarela"] .sobre-abrir { position: relative; isolation: isolate; border: 0; border-radius: 980px; padding: 1.15rem 2.5rem; background: none; color: var(--tinta); font-weight: 500; letter-spacing: .22em; text-indent: .22em; } body[data-diseno="acuarela"] .sobre-abrir::before { content: ''; position: absolute; inset: -.15rem -.7rem; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--acuarela-b), var(--acuarela-a) 55%, var(--acuarela-c)); -webkit-mask: var(--acuarela-trazo) center / 100% 100% no-repeat; mask: var(--acuarela-trazo) center / 100% 100% no-repeat; opacity: var(--acuarela-trazo-reposo); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); } body[data-diseno="acuarela"] .sobre-abrir:hover { background: none; color: var(--tinta); } body[data-diseno="acuarela"] .sobre-abrir:hover::before { opacity: var(--acuarela-trazo-encima); transform: scaleX(1.04); } body[data-diseno="acuarela"] .sobre-abrir:focus-visible { outline: 2px solid var(--acuarela-color); outline-offset: 4px; } /* El celular acostado (ancho y bajito): la carta más compacta. Con el letrero de ejemplo, el invitado de muestra y nombres largos medía 9 px más que la pantalla y el sobre se podía bajar sin nada abajo. El medallón sube, y con él la mancha que florece desde su centro. */ @media (orientation: landscape) and (max-height: 32rem) { body[data-diseno="acuarela"] .sobre-carta { padding: 5.5rem 1.4rem 1.7rem; } body[data-diseno="acuarela"] .sobre-sello { top: .9rem; width: 4rem; height: 4rem; margin-left: -2rem; font-size: 1.6rem; } body[data-diseno="acuarela"] .sobre-carta::before { top: 2.9rem; } body[data-diseno="acuarela"] .sobre-titulo { font-size: calc(2.5rem * var(--escala, 1)); } } @media (prefers-reduced-motion: no-preference) { /* El medallón cae como una gota y se asienta. Solo antes de empezar (backwards): al abrir, manda la transición. */ body[data-diseno="acuarela"] .sobre-sello { animation: acuarela-gota .95s cubic-bezier(.2,.75,.25,1) .45s backwards; } @keyframes acuarela-gota { from { opacity: 0; transform: scale(.35); } 55% { opacity: 1; } to { opacity: 1; transform: none; } } } /* ═══ la portada: la foto pintada en el papel sobre una aguada, y los nombres a mano */ body[data-diseno="acuarela"] main { padding-left: 1.15rem; padding-right: 1.15rem; } /* Todo se compone desde el ancho de la foto (--acuarela-foto): la aguada y el acento se acomodan a ella. También depende del alto de la pantalla: en la compu (1440×900) la foto de 21rem empujaba los nombres debajo del borde. */ body[data-diseno="acuarela"] .portada { --acuarela-foto: min(21rem, 80vw, max(40svh, 13rem)); padding: 3.2rem 0 3.8rem; isolation: isolate; } body[data-diseno="acuarela"] .portada.con-foto { color: var(--tinta); } /* Las manchas de la portada: dos capas a todo lo ancho de la pantalla (y ni un px más). Cada mancha se acomoda con mask-position, y su pigmento, con el mismo sitio, en background-position: cada una mezcla sus propios colores. */ body[data-diseno="acuarela"] .portada::before, body[data-diseno="acuarela"] .portada::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; } /* Con foto: una luna grande detrás, corrida abajo a la derecha (la foto parece pintada encima)… */ body[data-diseno="acuarela"] .portada::before { --acuarela-sitio: calc(50% + var(--acuarela-foto) * .12) calc(3.2rem + var(--acuarela-foto) * .02) / calc(var(--acuarela-foto) * 1.22) calc(var(--acuarela-foto) * 1.32); background: linear-gradient(150deg, var(--acuarela-b) 12%, var(--acuarela-a) 52%, var(--acuarela-c) 92%) var(--acuarela-sitio) no-repeat; -webkit-mask: var(--acuarela-luna) var(--acuarela-sitio) no-repeat; mask: var(--acuarela-luna) var(--acuarela-sitio) no-repeat; opacity: .9; } /* …y dos acentos de otro pigmento: uno que se sale por arriba a la izquierda y otro chico abajo a la derecha. */ body[data-diseno="acuarela"] .portada::after { --acuarela-sitio: calc(50% - var(--acuarela-foto) * .47) calc(3.2rem - var(--acuarela-foto) * .2) / calc(var(--acuarela-foto) * .52) calc(var(--acuarela-foto) * .56); --acuarela-sitio-2: calc(50% + var(--acuarela-foto) * .56) calc(3.2rem + var(--acuarela-foto) * 1.02) / calc(var(--acuarela-foto) * .34) calc(var(--acuarela-foto) * .3); background: linear-gradient(120deg, var(--acuarela-c), var(--acuarela-a) 60%) var(--acuarela-sitio) no-repeat, linear-gradient(300deg, var(--acuarela-c), var(--acuarela-b)) var(--acuarela-sitio-2) no-repeat; -webkit-mask: var(--acuarela-mancha-3) var(--acuarela-sitio) no-repeat, var(--acuarela-mancha-2) var(--acuarela-sitio-2) no-repeat; mask: var(--acuarela-mancha-3) var(--acuarela-sitio) no-repeat, var(--acuarela-mancha-2) var(--acuarela-sitio-2) no-repeat; opacity: .9; } /* Sin foto: una luna de acuarela detrás de los nombres, y dos acentos en las esquinas. */ body[data-diseno="acuarela"] .portada:not(.con-foto)::before { --acuarela-sitio: calc(50% + .6rem) calc(50% + 1.8rem) / 21.5rem 21rem; opacity: .72; } body[data-diseno="acuarela"] .portada:not(.con-foto)::after { --acuarela-sitio: calc(50% - 9.6rem) 1rem / 10.5rem 11.5rem; --acuarela-sitio-2: calc(50% + 9.4rem) calc(100% - 1.4rem) / 12.5rem 8.5rem; } /* La foto, pintada en el papel: su orilla se deshace en veladuras. Sin el velo oscuro: aquí no hay letra encima. */ body[data-diseno="acuarela"] .portada-fondo { position: relative; inset: auto; left: auto; transform: none; order: -1; width: var(--acuarela-foto); height: auto; aspect-ratio: 4 / 5; margin: 0 auto 1.5rem; background: var(--acuarela-lavado); -webkit-mask: var(--acuarela-vineta) center / 100% 100% no-repeat; mask: var(--acuarela-vineta) center / 100% 100% no-repeat; } body[data-diseno="acuarela"] .portada-fondo::after { display: none; } /* En la noche, una foto muy clara quedaba como un foco sobre el papel oscuro: se baja un poco sobre su fondo oscuro. */ body[data-diseno="acuarela"][data-paleta="noche"] .portada-fondo img, body[data-diseno="acuarela"][data-paleta="noche"] .portada-fondo video { opacity: .88; } body[data-diseno="acuarela"] .portada.con-foto .monograma { display: none; } /* El medallón de las iniciales (sin foto): una mancha redonda, con las iniciales en la cursiva fina. */ body[data-diseno="acuarela"] .portada .monograma { position: relative; isolation: isolate; width: 5.4rem; height: 5.4rem; border: 0; margin-bottom: 1.8rem; font-family: var(--serif); font-style: italic; font-size: 1.3rem; letter-spacing: .06em; color: var(--tinta); } body[data-diseno="acuarela"] .portada .monograma::before { content: ''; position: absolute; inset: -.7rem; z-index: -1; background: linear-gradient(135deg, var(--acuarela-b), var(--acuarela-a) 55%, var(--acuarela-c)); -webkit-mask: var(--acuarela-mancha-1) center / 100% 100% no-repeat; mask: var(--acuarela-mancha-1) center / 100% 100% no-repeat; } body[data-diseno="acuarela"] .portada .portada-etiqueta { margin-bottom: 1.1rem; color: var(--acuarela-tinta-2); text-shadow: none; } body[data-diseno="acuarela"] .portada .portada-titulo { font-size: calc(clamp(3.3rem, 15.6vw, 5.4rem) * var(--escala, 1)); line-height: 1.05; letter-spacing: 0; color: var(--tinta); text-shadow: none; padding: 0 .12em; } body[data-diseno="acuarela"] .portada .portada-frase { color: var(--acuarela-tinta-2); text-shadow: none; font-size: var(--letra-lectura); max-width: 20rem; margin-top: 1.2rem; } body[data-diseno="acuarela"] .portada .fecha-grande { color: var(--tinta); text-shadow: none; margin-top: 1.9rem; gap: .85rem; font-size: clamp(2rem, 8.6vw, 2.75rem); } /* Entre los números, una gotita de color en vez del rombo. */ body[data-diseno="acuarela"] .portada .fecha-grande i { width: .5rem; height: .5rem; transform: none; border-radius: 55% 45% 52% 48% / 46% 54% 44% 56%; background: radial-gradient(circle at 38% 34%, var(--acuarela-b), var(--acuarela-a)); } body[data-diseno="acuarela"] .portada .fecha-texto { color: var(--acuarela-tinta-2); text-shadow: none; } body[data-diseno="acuarela"] .portada .scroll-pista { background: var(--acuarela-orla); } /* Con foto, la portada mide más que la pantalla: la rayita de "baja" quedaba abajo, fuera de la vista, y cruzaba la fecha (revisar_portadas.mjs la quitaba en 61 de 96). Como en Aurora, no va; sin foto sí (ahí queda al pie de la pantalla). */ body[data-diseno="acuarela"] .portada.con-foto .scroll-pista { display: none; } body[data-diseno="acuarela"] .portada .scroll-pista span { background: var(--acuarela-color); } @media (prefers-reduced-motion: no-preference) { /* Al abrir, las manchas de la portada terminan de extenderse. */ body[data-diseno="acuarela"] .portada::before { animation: acuarela-extiende 2.3s cubic-bezier(.16,.84,.3,1) .3s both; } body[data-diseno="acuarela"] .portada::after { animation: acuarela-extiende 2.6s cubic-bezier(.16,.84,.3,1) .55s both; } @keyframes acuarela-extiende { from { opacity: 0; transform: scale(.93); } } } /* Los avisos que flotan sobre la portada: etiquetas de papel, con su gotita de color. */ body[data-diseno="acuarela"] .aviso-portada { background: color-mix(in srgb, var(--papel-2) 90%, transparent); color: var(--tinta); box-shadow: 0 14px 32px -16px var(--acuarela-sombra), inset 0 0 0 1px var(--acuarela-orla); border-radius: 20px 18px 21px 17px; } body[data-diseno="acuarela"] .aviso-portada small { color: var(--acuarela-tinta-2); } body[data-diseno="acuarela"] .aviso-portada-icono { background: var(--acuarela-a); border-radius: 55% 45% 52% 48% / 46% 54% 44% 56%; } body[data-diseno="acuarela"] .aviso-b .aviso-portada-icono { background: var(--acuarela-c); } body[data-diseno="acuarela"] .aviso-portada-icono .icono-momento { stroke: var(--tinta); } /* ═══ las secciones: tarjetas de papel de algodón con la orilla rasgada, recortadas de una hoja pintada */ body[data-diseno="acuarela"] .seccion { position: relative; isolation: isolate; margin: 1.35rem 0; padding: 3rem 1.45rem 2.6rem; } /* El papel de la tarjeta, con la orilla rasgada (el grano lo pone la capa de papel de encima)… */ body[data-diseno="acuarela"] .seccion::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--acuarela-carta); clip-path: var(--acuarela-orilla); } /* …y su sombra, que se queda adentro de la orilla (no dibuja el rectángulo). */ body[data-diseno="acuarela"] .seccion::after { content: ''; position: absolute; inset: 1.4rem .9rem .35rem; z-index: -2; pointer-events: none; border-radius: 1.6rem; box-shadow: 0 1.3rem 2.4rem -.8rem var(--acuarela-sombra), 0 .1rem .45rem var(--acuarela-sombra-2); } /* La mancha de cada tarjeta: la regla de siempre, convertida en una capa del tamaño de la tarjeta con la mancha en una esquina, cortada por la MISMA orilla rasgada. Una la trae arriba a la derecha y la siguiente abajo a la izquierda. */ body[data-diseno="acuarela"] .seccion .regla { --acuarela-sitio: calc(100% + 4.4rem) -4.2rem / 10.5rem 10.5rem; position: absolute; inset: 0; z-index: -1; display: block; width: auto; height: auto; margin: 0; pointer-events: none; background: linear-gradient(210deg, var(--acuarela-c) 15%, var(--acuarela-a) 55%, var(--acuarela-b) 90%) var(--acuarela-sitio) no-repeat; -webkit-mask: var(--acuarela-mancha-1) var(--acuarela-sitio) no-repeat; mask: var(--acuarela-mancha-1) var(--acuarela-sitio) no-repeat; clip-path: var(--acuarela-orilla); transform-origin: 100% 0; opacity: .9; } body[data-diseno="acuarela"] .seccion:nth-of-type(odd) .regla { --acuarela-sitio: -4.4rem calc(100% + 4.4rem) / 10rem 11rem; background: linear-gradient(30deg, var(--acuarela-b) 10%, var(--acuarela-a) 50%, var(--acuarela-c) 90%) var(--acuarela-sitio) no-repeat; -webkit-mask: var(--acuarela-mancha-3) var(--acuarela-sitio) no-repeat; mask: var(--acuarela-mancha-3) var(--acuarela-sitio) no-repeat; transform-origin: 0 100%; } body[data-diseno="acuarela"] .regla::before, body[data-diseno="acuarela"] .regla::after, body[data-diseno="acuarela"] .regla i { display: none; } /* Cuando la sección llega, su mancha se extiende desde la esquina (con "menos movimiento", ya está extendida). */ body[data-diseno="acuarela"] .aparece > .regla { opacity: 0; transform: scale(.5); transition: opacity 1.1s ease, transform 1.8s cubic-bezier(.16,.84,.3,1); } body[data-diseno="acuarela"] .aparece.visible > .regla { opacity: .9; transform: none; } body[data-diseno="acuarela"] .titulo-seccion { font-family: var(--serif); font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0; text-indent: 0; font-size: clamp(2.05rem, 8.6vw, 2.55rem); line-height: 1.1; color: var(--tinta); margin: 0 0 2rem; } /* Debajo del título, un trazo de pincel. */ body[data-diseno="acuarela"] .titulo-seccion::after { content: ''; display: block; width: 4.6rem; height: .62rem; margin: .6rem auto 0; background: linear-gradient(90deg, var(--acuarela-b), var(--acuarela-a) 60%, var(--acuarela-c)); -webkit-mask: var(--acuarela-trazo) center / 100% 100% no-repeat; mask: var(--acuarela-trazo) center / 100% 100% no-repeat; } body[data-diseno="acuarela"] .parrafo { color: var(--acuarela-tinta-2); font-size: var(--letra-lectura); } body[data-diseno="acuarela"] .nota-chica, body[data-diseno="acuarela"] .etiqueta, body[data-diseno="acuarela"] .link-boton, body[data-diseno="acuarela"] .pie-marca, body[data-diseno="acuarela"] .lugar p, body[data-diseno="acuarela"] .lugar .tienda-etiqueta, body[data-diseno="acuarela"] .datos-transferencia dt, body[data-diseno="acuarela"] .itinerario .donde { color: var(--acuarela-tinta-2); } body[data-diseno="acuarela"] .campo::placeholder { color: var(--acuarela-tinta-2); opacity: .85; } /* La cuenta: cada número sobre su gotita de color. */ body[data-diseno="acuarela"] .cuenta-caja { gap: .4rem; } body[data-diseno="acuarela"] .cuenta-dato { isolation: isolate; padding: .9rem .1rem .5rem; } body[data-diseno="acuarela"] .cuenta-dato + .cuenta-dato::before { display: none; } body[data-diseno="acuarela"] .cuenta-dato::after { content: ''; position: absolute; left: 50%; top: 1.95rem; width: 4.8rem; height: 4.8rem; margin: -2.4rem 0 0 -2.4rem; z-index: -1; background: linear-gradient(135deg, var(--acuarela-b), var(--acuarela-a) 60%, var(--acuarela-c)); -webkit-mask: var(--acuarela-luna) center / 100% 100% no-repeat; mask: var(--acuarela-luna) center / 100% 100% no-repeat; opacity: .8; } body[data-diseno="acuarela"] .cuenta-dato:nth-child(2)::after { transform: rotate(80deg); -webkit-mask-image: var(--acuarela-mancha-1); mask-image: var(--acuarela-mancha-1); } body[data-diseno="acuarela"] .cuenta-dato:nth-child(3)::after { transform: rotate(200deg); } body[data-diseno="acuarela"] .cuenta-dato:nth-child(4)::after { transform: rotate(-40deg); -webkit-mask-image: var(--acuarela-mancha-3); mask-image: var(--acuarela-mancha-3); } body[data-diseno="acuarela"] .cuenta-dato b { font-weight: 400; color: var(--tinta); font-size: clamp(2rem, 8.6vw, 2.6rem); } body[data-diseno="acuarela"] .cuenta-dato span { color: var(--acuarela-tinta-2); margin-top: .85rem; } body[data-diseno="acuarela"] .cuenta-ya { color: var(--acuarela-color); } /* Padrinos, itinerario, lugares: la cursiva fina y el color hondo en lo chico. */ body[data-diseno="acuarela"] .padrino dt { color: var(--acuarela-color); font-weight: 500; } body[data-diseno="acuarela"] .padrino dd { font-size: 1.4rem; font-style: italic; } body[data-diseno="acuarela"] .itinerario .hora { font-size: 1.2rem; } body[data-diseno="acuarela"] .itinerario .que { font-size: 1.45rem; } body[data-diseno="acuarela"] .itinerario li::before { width: 2px; left: calc(3.95rem + 1.25rem - 1px); border-radius: 2px; background: linear-gradient(var(--acuarela-b), var(--acuarela-a)); } body[data-diseno="acuarela"] .icono-momento { background: var(--acuarela-lavado-2); border: 0; stroke: var(--tinta-2); border-radius: 55% 45% 52% 48% / 46% 54% 44% 56%; } body[data-diseno="acuarela"] .itinerario li.encendido .icono-momento { background: var(--acuarela-a); stroke: var(--tinta); } body[data-diseno="acuarela"] .lugar, body[data-diseno="acuarela"] .confirmar, body[data-diseno="acuarela"] .pase { background: var(--acuarela-lavado); border: 0; backdrop-filter: none; border-radius: 1.3rem 1.6rem 1.2rem 1.5rem / 1.5rem 1.2rem 1.6rem 1.3rem; box-shadow: inset 0 0 0 1px var(--acuarela-orla); } body[data-diseno="acuarela"] .lugar h3, body[data-diseno="acuarela"] .confirmar-saludo, body[data-diseno="acuarela"] .pase-nombre { font-style: italic; } body[data-diseno="acuarela"] .lugar h3 { font-size: 1.65rem; } body[data-diseno="acuarela"] .vestimenta { font-style: italic; } body[data-diseno="acuarela"] .copiado, body[data-diseno="acuarela"] .confirmar-limite, body[data-diseno="acuarela"] .gracias { color: var(--acuarela-color); } /* Los botones: un lavado de color con la letra de la tinta; lo que se llena (enviar, lo elegido), el par del botón. */ body[data-diseno="acuarela"] .boton { border: 0; border-radius: 980px; background: var(--acuarela-lavado-2); color: var(--tinta); font-weight: 500; letter-spacing: .2em; } body[data-diseno="acuarela"] .boton:hover { background: var(--boton-fondo); color: var(--boton-texto); } body[data-diseno="acuarela"] .opcion { border-radius: 1.4rem 1.1rem 1.5rem 1.2rem / 1.2rem 1.5rem 1.1rem 1.4rem; border-color: var(--acuarela-orla); background: var(--papel-2); color: var(--acuarela-tinta-2); font-weight: 500; } body[data-diseno="acuarela"] .opcion[aria-pressed="true"] { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); } body[data-diseno="acuarela"] .campo { border-radius: 14px; border-color: var(--acuarela-orla); background: var(--papel-2); } body[data-diseno="acuarela"] .contador-btn { border-color: var(--acuarela-orla); background: var(--papel-2); } body[data-diseno="acuarela"] .enviar { border-radius: 980px; font-weight: 500; background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); } body[data-diseno="acuarela"] .confirmar-flotante { border-radius: 980px; } body[data-diseno="acuarela"] .musica { background: var(--papel-2); border-color: var(--acuarela-orla); border-radius: 55% 45% 52% 48% / 46% 54% 44% 56%; } /* La galería (con "menos movimiento", la rejilla; con movimiento corre de lado): cada foto con la orilla rasgada. */ body[data-diseno="acuarela"] .galeria-foto { background: transparent; } body[data-diseno="acuarela"] .galeria img, body[data-diseno="acuarela"] .vestimenta-fotos img { clip-path: var(--acuarela-orilla); } body[data-diseno="acuarela"] #secGaleria.galeria-fija { margin: 0; padding: 0; } /* La columna de la escena, del ancho de la pantalla: sin esto la rejilla tomaba el ancho de la tira de fotos entera (unos 2000 px) y el título, centrado en ella, quedaba fuera de la pantalla (x = 991 a 390 px; se midió). */ body[data-diseno="acuarela"] #secGaleria.galeria-fija .galeria-escena { grid-template-columns: minmax(0, 1fr); } body[data-diseno="acuarela"] #secGaleria.galeria-fija::before, body[data-diseno="acuarela"] #secGaleria.galeria-fija::after, body[data-diseno="acuarela"] #secGaleria.galeria-fija .regla { display: none; } body[data-diseno="acuarela"] .cinta-fotos img { border-radius: 4px; clip-path: var(--acuarela-orilla); box-shadow: none; } body[data-diseno="acuarela"] .video video { border-radius: 18px; } /* La fecha que llega desde enorme: en el papel, y la capa de color es una aguada con la letra de la tinta. */ body[data-diseno="acuarela"] .fecha-capa-base { background: var(--papel); color: var(--tinta); } body[data-diseno="acuarela"] .fecha-capa-color { color: var(--tinta); background: radial-gradient(ellipse 60% 45% at 22% 26%, color-mix(in srgb, var(--acuarela-b) var(--acuarela-capa-b), transparent), transparent 70%), radial-gradient(ellipse 55% 50% at 80% 78%, color-mix(in srgb, var(--acuarela-c) var(--acuarela-capa-c), transparent), transparent 70%), var(--acuarela-capa); } body[data-diseno="acuarela"] .fecha-escena-num { font-style: italic; } body[data-diseno="acuarela"] .fecha-escena-num i { opacity: 1; border-radius: 55% 45% 52% 48% / 46% 54% 44% 56%; background: var(--acuarela-a); } body[data-diseno="acuarela"] .avance-invitacion { height: 4px; background: linear-gradient(90deg, var(--acuarela-b), var(--acuarela-a), var(--acuarela-c)); } /* ═══ el pie: los nombres a mano sobre una última mancha */ body[data-diseno="acuarela"] .pie { position: relative; isolation: isolate; padding: 4rem 0 1.2rem; } body[data-diseno="acuarela"] .pie .regla { position: absolute; z-index: -1; left: 50%; top: 1.4rem; width: 17rem; height: 11.5rem; margin: 0 0 0 -8.5rem; display: block; background: linear-gradient(100deg, var(--acuarela-b), var(--acuarela-a) 55%, var(--acuarela-c)); -webkit-mask: var(--acuarela-mancha-2) center / 100% 100% no-repeat; mask: var(--acuarela-mancha-2) center / 100% 100% no-repeat; opacity: .7; } body[data-diseno="acuarela"] #pieTitulo { font-size: 2.6rem; margin-bottom: 1rem; } /* "Invitamía" en el pie: el acento de la paleta a secas da 3.6 en arena, y encima de la mancha del pie, menos. */ body[data-diseno="acuarela"] .pie-marca span { color: var(--acuarela-color); } /* ═══ la gota que se abre donde se toca (invitacion.js → gotaEnElPapel; solo con movimiento). Se mueve con transform: su lugar va en el mismo translate. Se multiplica con el papel: tiñe, no tapa. */ body[data-diseno="acuarela"] .gota-acuarela { position: fixed; left: 0; top: 0; z-index: 94; width: 6.5rem; height: 6.5rem; pointer-events: none; background: linear-gradient(135deg, var(--acuarela-c), var(--acuarela-a) 60%); -webkit-mask: var(--acuarela-mancha-1) center / 100% 100% no-repeat; mask: var(--acuarela-mancha-1) center / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: 0; } body[data-diseno="acuarela"][data-paleta="noche"] .gota-acuarela { mix-blend-mode: screen; } /* ═══ en la compu: a los lados de la columna, cuatro aguadas grandes y claritas que se salen por las orillas, a lo largo de toda la invitación (detrás de las tarjetas). Es el relieve de siempre (#invitacion::before), que aquí no va. */ @media (min-width: 64rem) { body[data-diseno="acuarela"] #invitacion::before { --acuarela-sitio: -11vw 14% / 34rem 34rem; --acuarela-sitio-2: calc(100% + 10vw) 37% / 30rem 32rem; --acuarela-sitio-3: -9vw 62% / 30rem 31rem; --acuarela-sitio-4: calc(100% + 11vw) 87% / 34rem 30rem; display: block; inset: 0 auto 0 50%; width: 100vw; margin-left: -50vw; z-index: -1; opacity: .6; mix-blend-mode: normal; background: linear-gradient(140deg, var(--acuarela-c), var(--acuarela-a) 55%, var(--acuarela-b)) var(--acuarela-sitio) no-repeat, linear-gradient(320deg, var(--acuarela-b), var(--acuarela-a) 50%, var(--acuarela-c)) var(--acuarela-sitio-2) no-repeat, linear-gradient(60deg, var(--acuarela-a), var(--acuarela-c)) var(--acuarela-sitio-3) no-repeat, linear-gradient(200deg, var(--acuarela-c), var(--acuarela-b) 60%, var(--acuarela-a)) var(--acuarela-sitio-4) no-repeat; -webkit-mask: var(--acuarela-luna) var(--acuarela-sitio) no-repeat, var(--acuarela-mancha-3) var(--acuarela-sitio-2) no-repeat, var(--acuarela-mancha-1) var(--acuarela-sitio-3) no-repeat, var(--acuarela-mancha-2) var(--acuarela-sitio-4) no-repeat; mask: var(--acuarela-luna) var(--acuarela-sitio) no-repeat, var(--acuarela-mancha-3) var(--acuarela-sitio-2) no-repeat, var(--acuarela-mancha-1) var(--acuarela-sitio-3) no-repeat, var(--acuarela-mancha-2) var(--acuarela-sitio-4) no-repeat; } } @media (prefers-reduced-motion: reduce) { body[data-diseno="acuarela"] .sobre::before, body[data-diseno="acuarela"] .sobre::after, body[data-diseno="acuarela"] .sobre-carta::after, body[data-diseno="acuarela"] .sobre-solapa, body[data-diseno="acuarela"] .sobre-sello, body[data-diseno="acuarela"] .sobre-cuerpo, body[data-diseno="acuarela"] .sobre-abrir::before { transition: none; } /* Nada florece ni se mueve. Al tocar, la tarjeta solo se aclara (se nota que se tocó) y el sobre entero se va cuando la invitación ya está pintada detrás (el .abierto de siempre). Se probó irse antes: la invitación tarda un poco en pintarse después de aparecer, y se veía el papel vacío un instante. */ body[data-diseno="acuarela"] .sobre-carta::before { display: none; } body[data-diseno="acuarela"] .sobre.abriendo::before { transform: none; opacity: .82; } body[data-diseno="acuarela"] .sobre.abriendo::after { transform: none; opacity: .78; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-sello { animation: none; transform: none; } body[data-diseno="acuarela"] .sobre.abriendo .sobre-carta::after, body[data-diseno="acuarela"] .sobre.abriendo .sobre-cuerpo, body[data-diseno="acuarela"] .sobre.abriendo .sobre-sello, body[data-diseno="acuarela"] .sobre.abriendo .sobre-solapa { opacity: .45; transition: opacity .3s ease; } body[data-diseno="acuarela"] .aparece > .regla { opacity: .9; transform: none; transition: none; } } /* ═══════════════════════════════════════════════════════════════════ LA LETRA EN UN CELULAR CHICO (29-sep-2026) Con la escala nueva (invitacion.css → --letra-*), "HORAS" de la cuenta regresiva no cabía en su columna a 320 px en seis diseños y se partía a la mitad ("HORA" y "S"). En una pantalla así, el aire entre letras de esas etiquetas se aprieta; el tamaño no baja del piso. Al final de la hoja, para ganarle a cada diseño. */ @media (max-width: 22.5rem) { body[data-diseno] .cuenta-dato span { letter-spacing: .06em; text-indent: .06em; } body[data-diseno="minimal"] .cuenta-dato span { text-indent: 0; } body[data-diseno="polaroid"] .cuenta-dato span { letter-spacing: .01em; text-indent: 0; } /* En Aurora y en la Fiesta cada cifra va en su tarjetita: ahí ni apretando las letras cabía. Las tarjetas, más juntas y sin relleno a los lados (la Fiesta ya partía "HORAS" a 320 px antes de la escala nueva). */ body[data-diseno="aurora"] .cuenta-caja, body[data-diseno="fiesta"] .cuenta-caja { gap: .35rem; } body[data-diseno="aurora"] .cuenta-dato, body[data-diseno="fiesta"] .cuenta-dato { padding-left: 0; padding-right: 0; } /* "Abrir invitación" del Cine, con su ▶ y los créditos espaciados, en un renglón. */ body[data-diseno="cine"] .sobre-abrir { padding-left: 1.6rem; padding-right: 1.6rem; } }