/* ========================================================= PLANTILLA "EDITORIAL FINO" — boda, papelería de prensa fina. 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. Editorial atemporal: marfil/tinta + oro champaña, serif de alto contraste para nombres/títulos, sans en versalitas espaciadas para etiquetas/fechas. Quiet, expensive, timeless. Mobile-first · accesible · sin dependencias. ========================================================= */ :root { /* Marfil / tinta */ --marfil: #f6f2ea; /* fondo papel */ --marfil-2: #efe9de; /* superficie tarjeta levemente más cálida */ --crema: #fbf8f2; /* highlight de papel */ --tinta: #20211d; /* texto principal (casi negro cálido) */ --tinta-2: #4a4b44; /* texto secundario */ --tinta-3: #7c7d73; /* texto terciario / metadatos */ /* Oro champaña suave (claro, elegante — NUNCA chillón) */ --oro: #b08d57; --oro-claro: #c7a878; --oro-prof: #97774a; /* Filetes (hairlines) */ --filete: rgba(32, 33, 29, .14); --filete-suave: rgba(32, 33, 29, .08); --filete-oro: rgba(176, 141, 87, .45); --filete-oro-2: rgba(176, 141, 87, .28); /* Tipografías (las enlaza el render en ; aquí solo se declaran) */ --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --f-texto: "Jost", 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: 2px; /* casi recto: papelería, no app */ --ls: .42em; /* tracking de versalitas (etiquetas) */ --ls-2: .26em; /* 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(--tinta-2); background-color: var(--marfil); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Textura de papel sutilísima (grano + viñeta cálida muy tenue) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.5), transparent 60%), radial-gradient(140% 120% at 50% 120%, rgba(151,119,74,.05), transparent 55%); } img { max-width: 100%; display: block; } iframe { border: 0; } .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; } .fade-up.is-visible { opacity: 1; transform: none; } /* ========================================================= FIRMA — animación de carga refinada y discreta (additiva). Trazos que "se dibujan solos", asentado de tracking del nombre y entrada suave de las marcas de diamante. Nada llamativo. Todo se apaga en prefers-reduced-motion (al final del archivo). ========================================================= */ @keyframes ti-ed-trazo { to { stroke-dashoffset: 0; } } @keyframes ti-ed-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes ti-ed-asienta { from { opacity: 0; letter-spacing: .14em; transform: translateY(6px); } to { opacity: 1; letter-spacing: .005em; transform: none; } } @keyframes ti-ed-circulo { from { opacity: 0; transform: scale(.86) rotate(-6deg); } to { opacity: 1; transform: none; } } @keyframes ti-ed-rombo { from { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); } } /* Marca de versalitas reutilizable */ .kicker, .hero__intro, .campo__label, .contador__label, .evento__hora, .padrinos__rol, .pie__fecha, .pie__credito { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls); font-weight: 500; font-size: .72rem; } /* ========================================================= HERO — tarjeta grabada (marco de filete) sobre marfil ========================================================= */ .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); /* Sin foto: el papel marfil ES la portada. Si el cliente sube foto, la mostramos con velo (ver .hero[style*="background-image"] abajo). */ background-color: var(--marfil); background-size: cover; background-position: center; } .hero__overlay { display: none; } /* Cuando el motor inyecta foto de hero inline → velo elegante + texto blanco */ .hero[style*="background-image"] { color: var(--crema); } .hero[style*="background-image"] .hero__overlay { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,18,15,.42), rgba(20,18,15,.62)); } .hero[style*="background-image"] .hero__marco { border-color: rgba(255,255,255,.5); background: rgba(20,18,15,.18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .hero[style*="background-image"] .hero__marco::before { border-color: rgba(255,255,255,.45); } .hero[style*="background-image"] .hero__intro, .hero[style*="background-image"] .hero__fecha, .hero[style*="background-image"] .hero__sello { color: var(--crema); } .hero[style*="background-image"] .hero__nombres { color: #fff; } .hero[style*="background-image"] .hero__sello { border-color: rgba(255,255,255,.6); } .hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; } /* Marco grabado de doble filete (papelería de invitación) */ .hero__marco { position: relative; padding: var(--esp-6) var(--esp-4); border: 1px solid var(--filete-oro); background: rgba(255,255,255,.18); } .hero__marco::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--filete-oro-2); pointer-events: none; } /* Monograma de iniciales (motor → data-rol="hero-sello": "A · L") */ .hero__sello { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto var(--esp-4); border: 1px solid var(--oro); border-radius: 50%; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .04em; color: var(--oro-prof); /* el monograma asienta su círculo al cargar */ animation: ti-ed-circulo .9s cubic-bezier(.22, 1, .36, 1) .15s both; } .hero__sello:empty { display: none; } .hero__intro { color: var(--oro-prof); margin-bottom: var(--esp-4); animation: ti-ed-aparece 1s ease .55s both; } .hero__nombres { font-family: var(--f-display); font-weight: 500; font-size: clamp(3.4rem, 17vw, 7rem); line-height: .98; color: var(--tinta); letter-spacing: .005em; /* el nombre asienta su tracking (de un pelín abierto a normal) */ animation: ti-ed-asienta 1.3s cubic-bezier(.22, 1, .36, 1) .7s both; } .hero__amp { display: block; font-size: .42em; font-style: italic; font-weight: 500; color: var(--oro); margin: .12em 0; } /* Filete grabado del hero: los trazos se dibujan solos; el rombo asienta */ .hero__filete { display: block; width: 220px; max-width: 70%; height: auto; margin: var(--esp-4) auto 0; } .hero__filete-l { stroke: var(--filete-oro); stroke-width: 1; stroke-dasharray: 90; stroke-dashoffset: 90; animation: ti-ed-trazo 1.1s cubic-bezier(.22, 1, .36, 1) 1.05s both; } .hero__filete-r { stroke: var(--oro); stroke-width: 1; fill: var(--marfil); transform-box: fill-box; transform-origin: center; animation: ti-ed-aparece .7s ease 1.55s both; } .hero[style*="background-image"] .hero__filete-l { stroke: rgba(255,255,255,.5); } .hero[style*="background-image"] .hero__filete-r { stroke: rgba(255,255,255,.6); fill: transparent; } .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: .8rem; font-weight: 500; color: var(--tinta-2); animation: ti-ed-aparece 1s ease 1.4s both; } .hero__fecha::before, .hero__fecha::after { content: ""; width: 34px; height: 1px; background: var(--filete-oro); } .hero__scroll { margin-top: var(--esp-6); color: var(--oro-prof); text-decoration: none; font-size: 1.4rem; line-height: 1; } .hero__scroll:hover { color: var(--oro); } .hero__flecha { display: inline-block; animation: flotar 2.4s ease-in-out infinite; } @keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} } /* ========================================================= ESTRUCTURA — columnas de prensa con mucho aire ========================================================= */ main { padding: var(--esp-6) var(--esp-4) var(--esp-7); } .bienvenida, .contador, .historia, .evento, .galeria, .itinerario, .dress-code, .mesa-regalos, .hospedaje, .rsvp { max-width: var(--ancho); margin: 0 auto var(--esp-8); text-align: center; } /* Divisor: DIAMANTE CALADO (rombo abierto) flanqueado por filetes finos */ .divisor { position: relative; display: block; width: 200px; height: 14px; margin: 0 auto var(--esp-5); font-size: 0; } .divisor::before { /* filetes a izquierda y derecha desde el centro */ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent 0%, var(--filete-oro) 22%, transparent 42%, transparent 58%, var(--filete-oro) 78%, transparent 100%); } .divisor::after { /* el rombo calado al centro: dos triángulos con borde, sin relleno */ content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--oro); background: var(--marfil); } /* Marca de diamante: entra con trazo/escala suave al revelar la sección. El filete crece de 0 y el rombo asienta su escala (engancha is-visible). */ .fade-up .divisor::before { transform: translateY(-50%) scaleX(0); transform-origin: center; } .fade-up.is-visible .divisor::before { transform: translateY(-50%) scaleX(1); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .12s; } .fade-up .divisor::after { opacity: 0; } .fade-up.is-visible .divisor::after { animation: ti-ed-rombo .8s cubic-bezier(.22, 1, .36, 1) .42s both; } /* Títulos de sección */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.12; color: var(--tinta); letter-spacing: .01em; margin-bottom: var(--esp-4); } .bienvenida__texto { max-width: 480px; margin: 0 auto; font-family: var(--f-display); font-style: italic; font-size: 1.4rem; line-height: 1.6; color: var(--tinta-2); } /* ========================================================= CUENTA REGRESIVA — números grandes serif, sin cajas ========================================================= */ .contador__lista { list-style: none; display: flex; gap: var(--esp-4); justify-content: center; flex-wrap: wrap; } .contador__item { min-width: 70px; padding: 0 var(--esp-2); position: relative; } .contador__item + .contador__item::before { content: ""; position: absolute; left: calc(var(--esp-4) / -2); top: 14%; bottom: 32%; width: 1px; background: var(--filete); } .contador__num { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1; color: var(--tinta); font-variant-numeric: lining-nums; } .contador__label { display: block; margin-top: var(--esp-2); color: var(--tinta-3); letter-spacing: var(--ls-2); font-size: .62rem; } /* ========================================================= HISTORIA / TIMELINE (boda) — línea de tiempo numerada ========================================================= */ .historia__linea { list-style: none; max-width: 500px; margin: 0 auto; text-align: left; counter-reset: hito; } .historia__item { position: relative; padding: 0 0 var(--esp-6) var(--esp-6); border-left: 1px solid var(--filete-oro-2); counter-increment: hito; } .historia__item:last-child { padding-bottom: 0; border-left-color: transparent; } .historia__item::before { /* nodo de la línea: rombo calado pequeño */ content: ""; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--marfil); border: 1px solid var(--oro); } .historia__fecha { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .68rem; font-weight: 500; color: var(--oro-prof); margin-bottom: var(--esp-1); } .historia__titulo { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--tinta); margin-bottom: var(--esp-2); } .historia__texto { color: var(--tinta-2); } .historia__img { width: 100%; margin-top: var(--esp-3); aspect-ratio: 3/2; object-fit: cover; border: 1px solid var(--filete); padding: 5px; background: var(--crema); } /* ========================================================= EVENTOS (ceremonia / recepción) + MAPA ========================================================= */ .evento__hora { display: inline-block; color: var(--oro-prof); letter-spacing: var(--ls-2); font-size: .76rem; margin-bottom: var(--esp-3); } .evento__lugar { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 5.5vw, 2.1rem); color: var(--tinta); line-height: 1.2; } .evento__direccion { color: var(--tinta-2); margin: var(--esp-2) 0 var(--esp-4); } .evento__mapa { border: 1px solid var(--filete); padding: 6px; background: var(--crema); } .evento__mapa iframe { width: 100%; height: 300px; display: block; filter: grayscale(.28) contrast(.96); } /* Botones de papelería: contorno fino, versalitas */ .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(--oro); border-radius: var(--radio); color: var(--oro-prof); text-decoration: none; font-family: var(--f-texto); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: var(--ls-2); transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .evento__boton:hover, .mesa-regalos__link:hover, .hospedaje__link:hover { background: var(--oro); color: var(--crema); border-color: var(--oro); } /* ========================================================= ITINERARIO — numerado, estilo programa de prensa ========================================================= */ .itinerario__lista { list-style: none; max-width: 460px; margin: 0 auto; text-align: left; counter-reset: paso; } .itinerario__item { display: grid; grid-template-columns: auto 86px 1fr; align-items: baseline; gap: var(--esp-3); counter-increment: paso; padding: var(--esp-4) 0; border-bottom: 1px solid var(--filete-suave); } .itinerario__item:last-child { border-bottom: none; } .itinerario__item::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-texto); font-size: .68rem; letter-spacing: .1em; color: var(--oro-prof); align-self: center; } .itinerario__hora { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: var(--tinta); } .itinerario__actividad { color: var(--tinta-2); } /* ========================================================= DRESS CODE ========================================================= */ .dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--tinta-2); } .dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .dress-code__color { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filete-oro); box-shadow: inset 0 0 0 3px var(--crema); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--tinta-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: 1px solid var(--filete); background: var(--marfil-2); } .hospedaje__nombre { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; color: var(--tinta); margin-bottom: var(--esp-1); } .hospedaje__direccion { color: var(--tinta-2); margin-bottom: var(--esp-2); } .hospedaje__tel { display: inline-block; color: var(--oro-prof); text-decoration: none; letter-spacing: .04em; } .hospedaje__tel:hover { text-decoration: underline; } .hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-4); font-size: .66rem; } /* ========================================================= GALERÍA — carrusel a sangre, marco grabado ========================================================= */ .galeria { padding: 0; max-width: none; margin: 0 auto var(--esp-8); } .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: 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(--filete-oro); background: rgba(251,248,242,.9); color: var(--oro-prof); 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(--oro); color: var(--crema); border-color: var(--oro); } .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: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--filete-oro); background: transparent; padding: 0; cursor: pointer; } .carrusel__dot.is-active { background: var(--oro); border-color: var(--oro); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(28,26,22,.92); 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: 1px solid var(--filete-oro); 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(--tinta-2); margin-bottom: var(--esp-5); font-family: var(--f-display); font-style: italic; font-size: 1.15rem; } .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: .85rem; font-style: italic; font-family: var(--f-display); color: var(--oro-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(--oro-prof); } .campo__input { width: 100%; padding: var(--esp-2) 0; font-family: var(--f-display); font-size: 1.25rem; color: var(--tinta); background: transparent; border: none; border-bottom: 1px solid var(--filete-oro); border-radius: 0; transition: border-color var(--transicion); } textarea.campo__input { border: 1px solid var(--filete-oro); border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); font-size: 1.1rem; line-height: 1.6; } .campo__input::placeholder { color: var(--tinta-3); opacity: .7; } .campo__input:focus-visible { outline: none; border-color: var(--oro); } .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-size: 1.15rem; color: var(--tinta-2); } .rsvp__radio input { accent-color: var(--oro); width: 1.05em; height: 1.05em; } .boton { display: block; width: 100%; margin-top: var(--esp-4); padding: var(--esp-3); border: 1px solid var(--oro); border-radius: var(--radio); background: transparent; color: var(--oro-prof); font-family: var(--f-texto); font-size: .76rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-2); cursor: pointer; transition: background var(--transicion), color var(--transicion); } .boton:hover { background: var(--oro); color: var(--crema); } .boton:active { transform: translateY(1px); } .boton:disabled { opacity: .55; cursor: default; } .rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 500; min-height: 1.4em; font-family: var(--f-display); font-size: 1.1rem; } .rsvp__estado--ok { color: var(--oro-prof); } .rsvp__estado--error { color: #a44a3f; } /* ========================================================= 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(--filete-oro); border-bottom: 1px solid var(--filete-oro); } .saludo__hola { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.15; color: var(--tinta); } .saludo__pases { margin-top: 6px; letter-spacing: var(--ls-2); text-transform: uppercase; font-size: .74rem; color: var(--oro-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(--oro); background: var(--crema); color: var(--oro-prof); cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 4px 18px rgba(32,33,29,.12); transition: background var(--transicion), color var(--transicion); } .musica:hover { background: var(--oro); color: var(--crema); } .musica[aria-pressed="true"] .musica__icono { animation: girar 4s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ========================================================= PIE — colofón de prensa ========================================================= */ .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-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--tinta); } .pie__fecha { margin: var(--esp-3) 0 var(--esp-2); color: var(--tinta-3); } .pie__credito { color: var(--oro-prof); opacity: .85; } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(28,26,22,.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(--oro); color: #1c1a16; } /* ========================================================= 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; } .hero__marco { padding: var(--esp-7) var(--esp-6); } .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(--oro); outline-offset: 3px; border-radius: var(--radio); } /* ========================================================= ACCESIBILIDAD — reduce motion ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } /* Deja visible todo lo que la firma deja oculto en su estado inicial */ .hero__filete-l { stroke-dashoffset: 0; } .hero__filete-r, .hero__intro, .hero__nombres, .hero__sello, .hero__fecha { opacity: 1; } .fade-up .divisor::before { transform: translateY(-50%) scaleX(1); } .fade-up .divisor::after { opacity: 1; } }