/* ========================================================= PLANTILLA "ACUARELA" — boda, fine-art pintado a mano. Hoja de estilo AUTOCONTENIDA (NO depende de base.css/temas.css). Comparte el contrato de datos del motor (motor.js): mismas clases/IDs/ data-rol/data-modulo que el resto; cambia el copy y el envoltorio visual. Dirección: la invitación se "pinta sola". Lavados de acuarela con bordes orgánicos (filtro SVG feTurbulence+feDisplacementMap, inline en el PHP), manchas detrás del nombre, y un REVEAL por scroll donde cada sección "florece": una mancha que se expande con clip-path + sube la opacidad cuando el motor añade .is-visible al .fade-up. Paleta: marfil / blush / salvia / durazno / sepia tinta. Cormorant Garamond itálica (display) + Petit Formal Script (acentos) + Mulish (cuerpo). Mobile-first · accesible · sin dependencias. ========================================================= */ :root { /* Acuarela — papel y pigmentos */ --marfil: #faf6f0; /* fondo papel de algodón */ --marfil-2: #f3ece1; /* superficie levemente más cálida */ --crema: #fffdf9; /* highlight de papel */ --blush: #e8c4c1; /* rosa empolvado */ --salvia: #a7b8a0; /* verde salvia */ --durazno: #f0c9a6; /* durazno cálido */ --sepia: #5a4a42; /* tinta sepia (texto principal) */ --sepia-2: #756358; /* texto secundario */ --sepia-3: #9a8b80; /* texto terciario / metadatos */ /* Pigmentos más saturados para acentos de línea */ --blush-prof: #c98e8a; --salvia-prof: #7e9377; --durazno-prof:#d39a68; /* Lavados translúcidos (manchas) */ --lav-blush: rgba(232, 196, 193, .55); --lav-salvia: rgba(167, 184, 160, .50); --lav-durazno:rgba(240, 201, 166, .50); /* Filetes y velos */ --filete: rgba(90, 74, 66, .16); --filete-suave: rgba(90, 74, 66, .09); --acento: var(--blush-prof); /* Tipografías (las enlaza el render en ; aquí solo se declaran) */ --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --f-script: "Petit Formal Script", "Segoe Script", cursive; --f-texto: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif; /* Escala de espaciado */ --esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px; --esp-5:40px; --esp-6:64px; --esp-7:96px; --esp-8:128px; --radio: 3px; --ls: .34em; /* tracking de versalitas (etiquetas) */ --ls-2: .2em; /* tracking medio */ --transicion: .45s cubic-bezier(.22, 1, .36, 1); --ancho: 620px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--f-texto); font-size: 16px; line-height: 1.85; color: var(--sepia-2); background-color: var(--marfil); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Papel de acuarela: grano sutil + lavados muy tenues en las esquinas, fijos */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 50% at 8% 4%, rgba(232,196,193,.16), transparent 60%), radial-gradient(55% 45% at 96% 18%, rgba(167,184,160,.14), transparent 60%), radial-gradient(60% 50% at 92% 96%, rgba(240,201,166,.16), transparent 62%), radial-gradient(55% 45% at 4% 88%, rgba(232,196,193,.12), transparent 60%), var(--marfil); } /* Grano de papel (textura fractal muy tenue) */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } iframe { border: 0; } /* El SVG de filtros vive fuera de flujo, no ocupa espacio */ .acuarela-defs { position: absolute; width: 0; height: 0; } /* ========================================================= REVEAL POR SCROLL — la "firma": cada sección florece --------------------------------------------------------- Base (sin JS / sin soporte): el contenido entra suave. Con .is-visible (lo añade el motor) cada sección se revela y su mancha de fondo se "expande" pintándose desde el centro. ========================================================= */ .fade-up { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; } .fade-up.is-visible { opacity: 1; transform: none; } /* Mancha de acuarela que florece detrás de cada sección de
*/ main > section { position: relative; isolation: isolate; } main > section::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 46%; width: min(82vw, 560px); aspect-ratio: 1 / .72; transform: translate(-50%, -50%) scale(.2); opacity: 0; background: radial-gradient(42% 50% at 38% 36%, var(--lav-blush), transparent 70%), radial-gradient(46% 52% at 66% 58%, var(--lav-salvia), transparent 72%), radial-gradient(40% 46% at 52% 74%, var(--lav-durazno), transparent 70%); filter: url(#acuarela-borde) blur(2px); transition: transform 1.4s cubic-bezier(.18, .9, .28, 1), opacity 1.2s ease; } main > section.is-visible::after { transform: translate(-50%, -50%) scale(1); opacity: .85; } /* Variar el "florecer" para que no se sienta repetido */ main > section:nth-child(even)::after { top: 52%; background: radial-gradient(44% 50% at 60% 34%, var(--lav-salvia), transparent 70%), radial-gradient(42% 52% at 34% 60%, var(--lav-durazno), transparent 72%), radial-gradient(40% 46% at 64% 76%, var(--lav-blush), transparent 70%); } main > section:nth-child(3n)::after { width: min(74vw, 480px); } /* ========================================================= HERO — el nombre emerge de un lavado de acuarela ========================================================= */ .hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--esp-7) var(--esp-4); /* El papel de acuarela ES la portada: ignora cualquier foto de hero. */ background-image: none !important; background-color: transparent; overflow: hidden; } .hero__overlay { display: none; } /* El papel de acuarela ES la portada: ignoramos cualquier foto de hero (igual que la plantilla de estrellas). Sin velo de foto. */ .hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 1; } /* Manchas de acuarela del hero: bordes orgánicos por filtro SVG. Se pintan al cargar (animación de "firma") y respiran muy levemente. */ .hero__lavado { position: absolute; z-index: -1; pointer-events: none; border-radius: 48% 52% 56% 44% / 50% 46% 54% 50%; filter: url(#acuarela-borde) blur(6px); opacity: 0; animation: pintar 1.8s cubic-bezier(.18,.9,.28,1) forwards; } .hero__lavado--blush { width: min(78vw, 420px); height: min(58vw, 320px); top: 30%; left: 50%; transform: translate(-54%, -50%) scale(.4); background: radial-gradient(closest-side, var(--lav-blush), transparent 78%); animation-delay: .15s; } .hero__lavado--salvia { width: min(64vw, 340px); height: min(50vw, 270px); top: 42%; left: 50%; transform: translate(-40%, -46%) scale(.4); background: radial-gradient(closest-side, var(--lav-salvia), transparent 78%); animation-delay: .45s; } .hero__lavado--durazno { width: min(58vw, 300px); height: min(46vw, 240px); top: 38%; left: 50%; transform: translate(-62%, -54%) scale(.4); background: radial-gradient(closest-side, var(--lav-durazno), transparent 78%); animation-delay: .75s; } @keyframes pintar { 0% { opacity: 0; } 60% { opacity: .92; } 100% { opacity: .82; transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1); } } /* mantener el desplazamiento propio de cada mancha al final de la animación */ .hero__lavado--blush { --tx: -54%; --ty: -50%; } .hero__lavado--salvia { --tx: -40%; --ty: -46%; } .hero__lavado--durazno { --tx: -62%; --ty: -54%; } /* Monograma de iniciales (motor → data-rol="hero-sello": "A · L") */ .hero__sello { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--esp-4); border-radius: 50%; font-family: var(--f-script); font-weight: 400; font-size: 1.3rem; color: var(--sepia); letter-spacing: .02em; background: radial-gradient(closest-side, rgba(255,253,249,.85), rgba(255,253,249,.35)); box-shadow: 0 0 0 1px rgba(201,142,138,.4), inset 0 0 14px rgba(232,196,193,.45); } .hero__sello:empty { display: none; } .hero__intro { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls); font-size: .76rem; font-weight: 600; color: var(--blush-prof); margin-bottom: var(--esp-3); } .hero__nombres { font-family: var(--f-display); font-weight: 500; font-style: italic; font-size: clamp(3.6rem, 19vw, 7.5rem); line-height: .92; color: var(--sepia); } .hero__amp { display: block; font-family: var(--f-script); font-style: normal; font-size: .34em; font-weight: 400; color: var(--salvia-prof); margin: .08em 0; } .hero__fecha { display: inline-flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-5); font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .82rem; font-weight: 600; color: var(--sepia-2); } .hero__fecha::before, .hero__fecha::after { content: ""; width: 32px; height: 1px; background: var(--blush-prof); opacity: .6; } .hero__scroll { margin-top: var(--esp-6); color: var(--salvia-prof); text-decoration: none; font-size: 1.5rem; line-height: 1; } .hero__scroll:hover { color: var(--blush-prof); } .hero__flecha { display: inline-block; animation: flotar 2.4s ease-in-out infinite; } @keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} } /* ========================================================= ESTRUCTURA — secciones con mucho aire sobre el papel ========================================================= */ main { padding: var(--esp-6) var(--esp-4) var(--esp-7); } .bienvenida, .contador, .historia, .evento, .itinerario, .dress-code, .mesa-regalos, .hospedaje, .rsvp { max-width: var(--ancho); margin: 0 auto var(--esp-8); text-align: center; } /* Divisor: una PINCELADA de acuarela (mancha alargada con borde orgánico) */ .divisor { position: relative; display: block; width: 150px; height: 22px; margin: 0 auto var(--esp-5); font-size: 0; } .divisor::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 48% 52% / 60% 56% 44% 40%; background: linear-gradient(95deg, transparent 0%, var(--lav-salvia) 18%, var(--lav-blush) 50%, var(--lav-durazno) 80%, transparent 100%); filter: url(#acuarela-borde-fino); opacity: .85; } .divisor::after { /* gota central de pigmento más concentrado */ content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 46% 54% 52% 48% / 56% 48% 52% 44%; background: var(--blush-prof); opacity: .7; filter: url(#acuarela-borde-fino); } /* Títulos de sección */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-display); font-weight: 500; font-style: italic; font-size: clamp(2.1rem, 7.5vw, 3rem); line-height: 1.1; color: var(--sepia); letter-spacing: .005em; margin-bottom: var(--esp-4); } .bienvenida__texto { max-width: 480px; margin: 0 auto; font-family: var(--f-display); font-style: italic; font-size: 1.45rem; line-height: 1.6; color: var(--sepia-2); } /* ========================================================= CUENTA REGRESIVA — números acuarela, sin cajas duras ========================================================= */ .contador__lista { list-style: none; display: flex; gap: var(--esp-4); justify-content: center; flex-wrap: wrap; } .contador__item { position: relative; min-width: 72px; padding: var(--esp-3) var(--esp-2) var(--esp-2); } .contador__item::before { /* lavado suave bajo cada número */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 46% 54% 50% 50% / 56% 50% 50% 44%; background: radial-gradient(closest-side, var(--lav-durazno), transparent 80%); filter: url(#acuarela-borde-fino); opacity: .55; } .contador__num { display: block; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1; color: var(--sepia); font-variant-numeric: lining-nums; } .contador__label { display: block; margin-top: var(--esp-1); color: var(--sepia-3); letter-spacing: var(--ls-2); font-size: .62rem; text-transform: uppercase; font-weight: 600; } /* ========================================================= HISTORIA / TIMELINE (boda) — línea pintada a mano ========================================================= */ .historia__linea { list-style: none; max-width: 500px; margin: 0 auto; text-align: left; } .historia__item { position: relative; padding: 0 0 var(--esp-6) var(--esp-6); border-left: 2px solid transparent; background: linear-gradient(var(--salvia) 0 0) left / 2px 100% no-repeat; } .historia__item { background-clip: padding-box; } .historia__item:last-child { padding-bottom: 0; background: none; } .historia__item::before { /* nodo: gota de acuarela */ content: ""; position: absolute; left: -7px; top: 4px; width: 16px; height: 16px; border-radius: 46% 54% 52% 48% / 56% 48% 52% 44%; background: var(--blush-prof); filter: url(#acuarela-borde-fino); box-shadow: 0 0 0 4px var(--marfil); } .historia__fecha { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .68rem; font-weight: 700; color: var(--salvia-prof); margin-bottom: var(--esp-1); } .historia__titulo { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 1.55rem; line-height: 1.2; color: var(--sepia); margin-bottom: var(--esp-2); } .historia__texto { color: var(--sepia-2); } .historia__img { width: 100%; margin-top: var(--esp-3); aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--filete); padding: 5px; background: var(--crema); } /* ========================================================= EVENTOS (ceremonia / recepción) + MAPA ========================================================= */ .evento__hora { display: inline-block; color: var(--durazno-prof); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .76rem; margin-bottom: var(--esp-2); } .evento__lugar { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: clamp(1.6rem, 5.5vw, 2.1rem); color: var(--sepia); line-height: 1.2; } .evento__direccion { color: var(--sepia-2); margin: var(--esp-2) 0 var(--esp-4); } .evento__mapa { border: 1px solid var(--filete); border-radius: var(--radio); padding: 6px; background: var(--crema); overflow: hidden; } .evento__mapa iframe { width: 100%; height: 300px; display: block; border-radius: 2px; filter: grayscale(.2) sepia(.12) contrast(.97); } /* Botones de papelería: pincelada de contorno */ .evento__boton, .mesa-regalos__link, .hospedaje__link { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-5); border: 1px solid var(--blush-prof); border-radius: 999px; color: var(--sepia); text-decoration: none; font-family: var(--f-texto); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: var(--ls-2); background: rgba(255,253,249,.5); transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .evento__boton:hover, .mesa-regalos__link:hover, .hospedaje__link:hover { background: var(--blush); color: var(--sepia); border-color: var(--blush); } /* ========================================================= ITINERARIO — programa con horas en acuarela ========================================================= */ .itinerario__lista { list-style: none; max-width: 460px; margin: 0 auto; text-align: left; } .itinerario__item { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: var(--esp-3); padding: var(--esp-4) 0; border-bottom: 1px solid var(--filete-suave); } .itinerario__item:last-child { border-bottom: none; } .itinerario__hora { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 1.25rem; color: var(--blush-prof); } .itinerario__actividad { color: var(--sepia-2); } /* ========================================================= DRESS CODE ========================================================= */ .dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--sepia-2); } .dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .dress-code__color { width: 44px; height: 44px; border-radius: 46% 54% 52% 48% / 56% 48% 52% 44%; filter: url(#acuarela-borde-fino); box-shadow: inset 0 0 0 3px var(--crema), 0 0 0 1px var(--filete); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--sepia-2); } .mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .mesa-regalos__link { margin-top: 0; } /* ========================================================= HOSPEDAJE ========================================================= */ .hospedaje__lista { list-style: none; display: grid; gap: var(--esp-4); grid-template-columns: 1fr; } .hospedaje__item { padding: var(--esp-4); text-align: center; border-radius: var(--radio); border: 1px solid var(--filete); background: var(--marfil-2); } .hospedaje__nombre { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 1.4rem; color: var(--sepia); margin-bottom: var(--esp-1); } .hospedaje__direccion { color: var(--sepia-2); margin-bottom: var(--esp-2); } .hospedaje__tel { display: inline-block; color: var(--salvia-prof); text-decoration: none; letter-spacing: .04em; font-weight: 600; } .hospedaje__tel:hover { text-decoration: underline; } .hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-4); font-size: .68rem; } /* ========================================================= GALERÍA — carrusel con marco de papel ========================================================= */ .galeria { padding: 0; max-width: none; margin: 0 auto var(--esp-8); text-align: center; } .carrusel { position: relative; max-width: 940px; margin: 0 auto; } .carrusel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carrusel__track::-webkit-scrollbar { display: none; } .carrusel__slide { flex: 0 0 82%; scroll-snap-align: center; padding: 0 var(--esp-2); } .carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--filete); padding: 6px; background: var(--crema); } .carrusel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--blush-prof); background: rgba(255,253,249,.9); color: var(--sepia); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background var(--transicion), color var(--transicion); } .carrusel__nav:hover { background: var(--blush); border-color: var(--blush); } .carrusel__nav--prev { left: 12px; } .carrusel__nav--next { right: 12px; } .carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); } .carrusel__dot { width: 10px; height: 10px; border-radius: 46% 54% 52% 48% / 56% 48% 52% 44%; border: 1px solid var(--blush-prof); background: transparent; padding: 0; cursor: pointer; } .carrusel__dot.is-active { background: var(--blush-prof); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(60, 48, 42, .9); padding: var(--esp-3); opacity: 0; visibility: hidden; transition: opacity var(--transicion); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__img { max-width: 100%; max-height: 85vh; border-radius: var(--radio); border: 1px solid rgba(255,253,249,.7); padding: 6px; background: var(--crema); } .lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--crema); font-size: 2.3rem; cursor: pointer; line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--crema); font-size: 2.4rem; cursor: pointer; padding: var(--esp-2); } .lightbox__nav--prev { left: var(--esp-1); } .lightbox__nav--next { right: var(--esp-1); } /* ========================================================= RSVP — formulario de papelería (líneas de subrayado) ========================================================= */ .rsvp__nota { color: var(--sepia-2); margin-bottom: var(--esp-5); font-family: var(--f-display); font-style: italic; font-size: 1.2rem; } .rsvp__form { max-width: 440px; margin: 0 auto; text-align: left; } .rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); font-size: .9rem; font-style: italic; font-family: var(--f-display); color: var(--salvia-prof); } .rsvp__bloqueado { margin-top: var(--esp-3); } .campo { margin-bottom: var(--esp-5); border: none; } .campo__label { display: block; margin-bottom: var(--esp-2); color: var(--salvia-prof); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); } .campo__input { width: 100%; padding: var(--esp-2) 0; font-family: var(--f-display); font-size: 1.3rem; color: var(--sepia); background: transparent; border: none; border-bottom: 1px solid var(--blush-prof); border-radius: 0; transition: border-color var(--transicion); } textarea.campo__input { border: 1px solid var(--blush-prof); border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); font-size: 1.15rem; line-height: 1.6; background: rgba(255,253,249,.5); } .campo__input::placeholder { color: var(--sepia-3); opacity: .7; } .campo__input:focus-visible { outline: none; border-color: var(--salvia-prof); } .rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-3); } .rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; font-family: var(--f-display); font-style: italic; font-size: 1.2rem; color: var(--sepia-2); } .rsvp__radio input { accent-color: var(--blush-prof); width: 1.05em; height: 1.05em; } .boton { display: block; width: 100%; margin-top: var(--esp-4); padding: var(--esp-3); border: 1px solid var(--blush-prof); border-radius: 999px; background: var(--blush); color: var(--sepia); font-family: var(--f-texto); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); cursor: pointer; transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion); } .boton:hover { background: var(--blush-prof); color: var(--crema); box-shadow: 0 6px 22px rgba(201,142,138,.3); } .boton:active { transform: translateY(1px); } .boton:disabled { opacity: .55; cursor: default; } .rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 600; min-height: 1.4em; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; } .rsvp__estado--ok { color: var(--salvia-prof); } .rsvp__estado--error { color: #b9554a; } /* ========================================================= SALUDO al invitado (lo inyecta el motor con ?i=codigo) ========================================================= */ .saludo { text-align: center; padding: var(--esp-6) var(--esp-4); background: var(--marfil-2); border-top: 1px solid var(--blush-prof); border-bottom: 1px solid var(--blush-prof); } .saludo__hola { font-family: var(--f-display); font-weight: 500; font-style: italic; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.15; color: var(--sepia); } .saludo__pases { margin-top: 6px; letter-spacing: var(--ls-2); text-transform: uppercase; font-size: .74rem; font-weight: 600; color: var(--salvia-prof); } /* ========================================================= MÚSICA (botón flotante) ========================================================= */ .musica { position: fixed; bottom: var(--esp-4); right: var(--esp-4); z-index: 40; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--blush-prof); background: var(--crema); color: var(--sepia); cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 4px 18px rgba(90,74,66,.14); transition: background var(--transicion), color var(--transicion); } .musica:hover { background: var(--blush); } .musica[aria-pressed="true"] .musica__icono { animation: girar 4s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ========================================================= PIE — colofón pintado ========================================================= */ .pie { position: relative; text-align: center; padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 70px); border-top: 1px solid var(--filete-suave); } .pie .divisor { margin-bottom: var(--esp-5); } .pie__nombres { font-family: var(--f-display); font-weight: 500; font-style: italic; font-size: clamp(2.6rem, 9vw, 3.6rem); color: var(--sepia); } .pie__fecha { margin: var(--esp-3) 0 var(--esp-2); color: var(--sepia-3); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .74rem; } .pie__credito { font-family: var(--f-script); font-size: 1.05rem; color: var(--blush-prof); } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(60,48,42,.96); color: var(--crema); padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; } .preview__chip { background: rgba(255,255,255,.12); color: var(--crema); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; } .preview__chip.is-active { background: var(--blush); color: #3c302a; } /* ========================================================= RESPONSIVE ========================================================= */ @media (min-width: 768px) { .carrusel__slide { flex: 0 0 56%; } .carrusel__slide img { aspect-ratio: 16/10; } .hospedaje__lista { grid-template-columns: 1fr 1fr; } .evento__mapa iframe { height: 360px; } .historia__img { aspect-ratio: 16/9; } } /* Foco visible global (accesibilidad) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--salvia-prof); outline-offset: 3px; border-radius: var(--radio); } /* ========================================================= ACCESIBILIDAD — reduce motion --------------------------------------------------------- Apaga TODA la animación: las manchas quedan ya "pintadas" y las secciones visibles, sin movimiento. ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } .hero__lavado { opacity: .82; transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1); } main > section::after { opacity: .85; transform: translate(-50%, -50%) scale(1); } }