/* ========================================================= PLANTILLA "BRASA" — boda, terracota kinético y editorial. 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: MODERNO / audaz. Terracota sólido de brasa como protagonista, tipografía grotesca ENORME (Anton) apilada que se revela en BARRIDO (clip-path wipe on-load), bloques de color sólido (barro oscuro / marfil) y una CINTA (marquee CSS puro) que corre sin parar como divisor de secciones. Contemporáneo, editorial de moda, atrevido, premium. Anton (display grotesco negro condensado) + Archivo (grotesca de acento) + Hanken Grotesk (cuerpo). Mobile-first · accesible (AA) · sin dependencias. AA: el marfil (#f7ece0) sobre el terracota AUDAZ (#c0562f) da ~3.9:1 → solo TEXTO GRANDE (hero, títulos). Para lectura, el FONDO de página es una terracota más profunda (--brasa-prof #a8431f ≈ 5.2:1 con marfil) y los textos chicos viven en bloques barro (≈12.9:1) o marfil (barro sobre marfil). ========================================================= */ :root { /* Terracota de brasa — PROTAGONISTA */ --brasa: #c0562f; /* terracota audaz (firma) — SOLO texto grande sobre él */ --brasa-prof: #a8431f; /* terracota profunda — fondo de lectura (AA con marfil) */ --brasa-osc: #8f3617; /* brasa más honda (hover/acentos) */ /* Barro — bloques sólidos oscuros / texto / cinta */ --barro: #3b2015; /* barro oscuro (bloques, cinta, texto sobre claro) */ --barro-2: #2a170d; /* barro más profundo (pie) */ /* Marfil — texto y superficies claras */ --marfil: #f7ece0; /* marfil (texto sobre terracota/barro; fondo de tarjeta) */ --marfil-2: #efdfcc; /* marfil sombreado (bordes suaves) */ /* Durazno — acento cálido (SOLO sobre barro; ≈9.9:1) */ --durazno: #f2cba9; --durazno-2: #e9a878; /* Filetes / velos */ --linea-mar: rgba(247, 236, 224, .30); --linea-mar-2: rgba(247, 236, 224, .16); --linea-barro: rgba(59, 32, 21, .55); --linea-barro-2: rgba(59, 32, 21, .18); /* Tipografías (las enlaza el render en ; aquí solo se declaran) */ --f-display: "Anton", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --f-alt: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-texto: "Hanken Grotesk", 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: 4px; /* esquinas casi rectas (editorial, no app) */ --ls: .26em; /* tracking de versalitas (etiquetas) */ --ls-2: .14em; /* tracking medio (cinta / metadatos) */ --transicion: .4s cubic-bezier(.2, .8, .2, 1); --ancho: 660px; /* --sec-*: tokens de la sección dinámica (alberca) + saludo — SPEC 0006. ADITIVO: solo lo consume secciones.css (compartido). Alineado a la marca: bloque marfil, título Anton barro, acento brasa. */ --sec-bg: var(--marfil); --sec-borde: var(--linea-barro-2); --sec-radio: var(--radio); --sec-titulo-font: var(--f-display); --sec-titulo-color: var(--barro); --sec-texto-color: var(--barro); --sec-acento: var(--brasa-prof); --sec-acento-bg: var(--barro); --sec-acento-tinta: var(--marfil); --sec-acento-boton-bg: var(--brasa-prof); --sec-acento-boton-tinta: var(--marfil); } *, *::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.7; color: var(--marfil); background-color: var(--brasa-prof); /* terracota profunda AA con marfil */ overflow-x: hidden; /* la tipografía enorme no debe desbordar */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } iframe { border: 0; } /* Reveal de secciones (lo gobierna el motor con .is-visible) */ .fade-up { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; } .fade-up.is-visible { opacity: 1; transform: none; } /* ========================================================= CINTA / MARQUEE — la FIRMA kinética. Marca de sección (.divisor) y adorno del hero (.hero__cinta). CSS puro: dos copias idénticas (::before/::after) que corren en bucle con translateX(-100%). Texto GENÉRICO (sin nombres) → válido para toda invitación. overflow:hidden ⇒ nunca provoca scroll horizontal. ========================================================= */ .divisor, .hero__cinta { display: block; width: 100%; overflow: hidden; white-space: nowrap; background: var(--barro); border-top: 2px solid var(--brasa); border-bottom: 2px solid var(--brasa); padding: var(--esp-3) 0; font-size: 0; /* colapsa el espacio entre las dos copias */ } .divisor::before, .divisor::after, .hero__cinta::before, .hero__cinta::after { content: "NOS CASAMOS \00A0—\00A0 QUE VIVA EL AMOR \00A0—\00A0 CELEBRA CON NOSOTROS \00A0—\00A0 RESERVA LA FECHA \00A0—\00A0 "; display: inline-block; vertical-align: middle; font-family: var(--f-alt); font-weight: 800; font-size: .84rem; letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--durazno); animation: brasa-marquee 22s linear infinite; will-change: transform; } @keyframes brasa-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* La cinta es el divisor de sección: sácala del ancho de contenido (full-bleed). El .divisor va DENTRO de cada
(que está centrada y con max-width), así que lo estiramos a todo el viewport con márgenes negativos calculados. */ .bienvenida .divisor, .contador .divisor, .historia .divisor, .evento .divisor, .galeria .divisor, .itinerario .divisor, .dress-code .divisor, .mesa-regalos .divisor, .hospedaje .divisor, .rsvp .divisor, .pie .divisor { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: var(--esp-6); } /* ========================================================= HERO — terracota AUDAZ, tipografía enorme apilada en BARRIDO. Animaciones SOLO de carga (clip-path wipe on-load; NUNCA scroll-timeline sobre la opacidad del hero — regla de oro del proyecto). ========================================================= */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(var(--esp-6), 12vh, var(--esp-8)) 0 0; background-color: var(--brasa); /* terracota audaz (hero es texto grande) */ background-size: cover; background-position: center; color: var(--marfil); } /* Bloque tipográfico superior, alineado a la IZQUIERDA (layout asimétrico) */ .hero__contenido { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 clamp(var(--esp-4), 6vw, var(--esp-7)); width: 100%; } /* Velo cálido + contorno cuando el motor inyecta foto de portada */ .hero__overlay { display: none; } .hero[style*="background-image"] .hero__overlay { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,23,13,.42) 0%, rgba(42,23,13,.55) 55%, rgba(143,54,23,.7) 100%); } /* Sobre foto: contorno con text-shadow (NUNCA -webkit-text-stroke → letra hueca) */ .hero[style*="background-image"] .hero__nombres { text-shadow: 0 2px 2px rgba(42,23,13,.6), 0 0 26px rgba(42,23,13,.45); } /* Kicker: en PÍLDORA de barro (marfil sobre barro ≈12.9:1 → chico y legible) */ .hero__intro { align-self: flex-start; display: inline-block; margin-bottom: var(--esp-4); padding: var(--esp-2) var(--esp-4); background: var(--barro); color: var(--marfil); font-family: var(--f-alt); font-weight: 800; font-size: .78rem; letter-spacing: var(--ls); text-transform: uppercase; animation: brasa-rise .8s cubic-bezier(.2,.8,.2,1) .1s both; } /* Monograma opcional (motor → data-rol="hero-sello") */ .hero__sello { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: var(--esp-3); background: var(--barro); color: var(--durazno); font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .02em; animation: brasa-rise .8s cubic-bezier(.2,.8,.2,1) both; } .hero__sello:empty { display: none; } /* Nombres ENORMES, apilados, revelados por barrido (clip-path wipe). Fuente Archivo (grotesca de acento, soporte Latin completo) en su peso más negro: Anton NO pinta las MAYÚSCULAS acentuadas (Í/É/Á/Ñ) → nombres como "SOFÍA & ANDRÉS" saldrían sin tilde. Archivo 800 conserva el volumen audaz. */ .hero__nombres { font-family: var(--f-alt); font-weight: 800; font-size: clamp(3rem, 19vw, 9rem); line-height: .86; letter-spacing: -.03em; text-transform: uppercase; color: var(--marfil); overflow-wrap: anywhere; /* red de seguridad anti-overflow en 360px */ margin: 0; } .hero__nombres > [data-rol], .hero__nombres .hero__amp { display: block; clip-path: inset(0 100% 0 0); /* estado inicial del barrido */ animation: brasa-wipe .85s cubic-bezier(.6, 0, .15, 1) both; } .hero__nombres [data-rol="nombre-1"] { animation-delay: .35s; } .hero__nombres .hero__amp { font-family: var(--f-alt); font-weight: 800; font-size: .5em; line-height: 1; color: var(--barro); animation-delay: .55s; } .hero__nombres [data-rol="nombre-2"] { animation-delay: .7s; } /* Fecha en BLOQUE de color sólido (barro) */ .hero__fecha { align-self: flex-start; margin-top: var(--esp-5); padding: var(--esp-3) var(--esp-5); background: var(--barro); color: var(--durazno); font-family: var(--f-alt); font-weight: 800; font-size: clamp(.9rem, 4vw, 1.15rem); letter-spacing: var(--ls-2); font-variant-numeric: lining-nums tabular-nums; animation: brasa-rise .8s cubic-bezier(.2,.8,.2,1) .9s both; } /* Flecha de scroll (dentro del bloque tipográfico) */ .hero__scroll { margin: var(--esp-5) 0 var(--esp-6); color: var(--marfil); text-decoration: none; font-size: 1.6rem; line-height: 1; animation: brasa-rise .8s ease 1.1s both; } .hero__flecha { display: inline-block; animation: brasa-flota 2.2s ease-in-out infinite; } /* Cinta al pie del hero (corre sin parar) */ .hero__cinta { margin-top: auto; } @keyframes brasa-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes brasa-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes brasa-flota { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } } /* ========================================================= ESTRUCTURA — secciones ========================================================= */ main { padding: var(--esp-8) 0 var(--esp-7); } .bienvenida, .contador, .historia, .evento, .itinerario, .dress-code, .mesa-regalos, .hospedaje, .rsvp { max-width: var(--ancho); margin: 0 auto var(--esp-8); padding: 0 clamp(var(--esp-4), 6vw, var(--esp-6)); } /* Títulos de sección: Anton grande, alineado a la izquierda (editorial) */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 11vw, 4.2rem); line-height: .92; letter-spacing: -.015em; text-transform: uppercase; color: var(--marfil); margin-bottom: var(--esp-4); } .bienvenida__texto { max-width: 46ch; font-family: var(--f-texto); font-size: 1.2rem; line-height: 1.6; color: var(--marfil); } /* ========================================================= BIENVENIDA ========================================================= */ .bienvenida { text-align: left; } /* ========================================================= CUENTA REGRESIVA — tejas de barro, móvil 2×2 ========================================================= */ .contador { text-align: left; } .contador__lista { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); } .contador__item { padding: var(--esp-4) var(--esp-2); background: var(--barro); color: var(--durazno); border-radius: var(--radio); text-align: center; } .contador__num { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: .9; color: var(--marfil); font-variant-numeric: lining-nums tabular-nums; } .contador__label { display: block; margin-top: var(--esp-2); font-family: var(--f-alt); font-weight: 700; font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; color: var(--durazno); } /* ========================================================= HISTORIA / timeline (BODA) — sendero de brasa ========================================================= */ .historia { text-align: left; } .historia__linea { list-style: none; } .historia__item { position: relative; padding: 0 0 var(--esp-6) var(--esp-5); border-left: 2px solid var(--linea-mar); } .historia__item:last-child { padding-bottom: 0; } .historia__item::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; background: var(--barro); box-shadow: 0 0 0 3px var(--brasa-prof), 0 0 0 5px var(--brasa); } /* Fecha del hito en pastilla de barro: durazno sobre barro ≈9.9:1 (AA), en vez de durazno directo sobre el terracota de fondo (~3.98:1, insuficiente). */ .historia__fecha { display: inline-block; background: var(--barro); color: var(--durazno); font-family: var(--f-alt); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .7rem; padding: var(--esp-1) var(--esp-2); border-radius: var(--radio); margin-bottom: var(--esp-2); } .historia__titulo { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; line-height: 1; letter-spacing: -.01em; color: var(--marfil); margin-bottom: var(--esp-2); } .historia__texto { color: var(--marfil); } .historia__img { margin-top: var(--esp-3); width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radio); } /* ========================================================= EVENTOS (ceremonia / recepción) — BLOQUE MARFIL sólido (barro sobre marfil ≈12.9:1 → lectura cómoda, contraste de bloque) ========================================================= */ .evento { background: var(--marfil); color: var(--barro); padding: var(--esp-6) clamp(var(--esp-4), 6vw, var(--esp-6)); border-radius: var(--radio); text-align: left; } .evento .seccion__titulo { color: var(--barro); } .evento__hora { display: inline-block; margin-bottom: var(--esp-3); font-family: var(--f-alt); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .76rem; color: var(--brasa-osc); } .evento__lugar { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: .95; letter-spacing: -.01em; color: var(--barro); } .evento__direccion { color: var(--barro); margin: var(--esp-2) 0 var(--esp-4); } .evento__mapa { overflow: hidden; border-radius: var(--radio); border: 2px solid var(--barro); } /* Mapa integrado a la paleta cálida (evita el multicolor sobre el bloque marfil). */ .evento__mapa iframe { width: 100%; height: 300px; display: block; filter: sepia(.18) saturate(.85) contrast(.95); } /* Mapa sin src → colapsa el marco vacío */ .evento__mapa iframe:not([src]) { display: none; } .evento__mapa:not(:has(iframe[src])) { display: none; } /* Botones de bloque (papelería de brasa) */ .evento__boton, .mesa-regalos__link, .hospedaje__link { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-5); background: var(--barro); color: var(--marfil); border: 2px solid var(--barro); text-decoration: none; font-family: var(--f-alt); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: var(--ls-2); transition: background var(--transicion), color var(--transicion); } .evento__boton:hover, .mesa-regalos__link:hover, .hospedaje__link:hover { background: transparent; color: var(--barro); } /* ========================================================= GALERÍA — carrusel de bloques ========================================================= */ .galeria { max-width: none; margin: 0 auto var(--esp-8); text-align: center; padding: 0; } .carrusel { position: relative; max-width: 960px; margin: 0 auto; padding: 0 var(--esp-3); } .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 84%; 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: 3px solid var(--barro); } .carrusel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: var(--radio); border: 2px solid var(--marfil); background: var(--barro); color: var(--marfil); font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; line-height: 1; } .carrusel__nav--prev { left: 4px; } .carrusel__nav--next { right: 4px; } .carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); } .carrusel__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--marfil); background: transparent; padding: 0; cursor: pointer; } .carrusel__dot.is-active { background: var(--barro); border-color: var(--barro); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(42,23,13,.94); 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: 3px solid var(--marfil); border-radius: var(--radio); } .lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--marfil); font-size: 2.4rem; cursor: pointer; line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--marfil); font-size: 2.6rem; cursor: pointer; padding: var(--esp-2); } .lightbox__nav--prev { left: var(--esp-1); } .lightbox__nav--next { right: var(--esp-1); } /* ========================================================= ITINERARIO — el programa del día ========================================================= */ .itinerario { text-align: left; } .itinerario__lista { list-style: none; } .itinerario__item { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: var(--esp-3); padding: var(--esp-4) 0; border-bottom: 2px solid var(--linea-mar-2); } .itinerario__item:last-child { border-bottom: none; } .itinerario__hora { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--durazno); font-variant-numeric: tabular-nums; } .itinerario__actividad { color: var(--marfil); } /* ========================================================= DRESS CODE ========================================================= */ .dress-code { text-align: left; } .dress-code__descripcion { max-width: 46ch; margin-bottom: var(--esp-4); color: var(--marfil); } .dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); } .dress-code__color { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--marfil); box-shadow: 0 0 0 2px var(--barro); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos { text-align: left; } .mesa-regalos__mensaje { max-width: 46ch; margin-bottom: var(--esp-4); color: var(--marfil); } .mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); } .mesa-regalos__link { margin-top: 0; } /* ========================================================= HOSPEDAJE — bloques marfil ========================================================= */ .hospedaje { text-align: left; } .hospedaje__lista { list-style: none; display: grid; gap: var(--esp-3); grid-template-columns: 1fr; } .hospedaje__item { background: var(--marfil); color: var(--barro); border-radius: var(--radio); padding: var(--esp-5) var(--esp-4); } .hospedaje__nombre { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.4rem; line-height: 1; letter-spacing: -.01em; color: var(--barro); margin-bottom: var(--esp-2); } .hospedaje__direccion { color: var(--barro); margin-bottom: var(--esp-2); } .hospedaje__tel { display: inline-block; color: var(--brasa-osc); text-decoration: none; font-weight: 700; } .hospedaje__tel:hover { text-decoration: underline; } .hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-4); font-size: .68rem; } /* ========================================================= RSVP — panel de barro sólido ========================================================= */ .rsvp { background: var(--barro); color: var(--marfil); padding: var(--esp-6) clamp(var(--esp-4), 6vw, var(--esp-6)); border-radius: var(--radio); text-align: left; } .rsvp .seccion__titulo { color: var(--marfil); } .rsvp__nota { color: var(--durazno); margin-bottom: var(--esp-5); font-size: 1.1rem; } .rsvp__form { max-width: 460px; } .rsvp__auto { margin: calc(-1 * var(--esp-3)) 0 var(--esp-4); font-size: .9rem; color: var(--durazno); } .rsvp__bloqueado { margin-top: var(--esp-3); } .campo { margin-bottom: var(--esp-5); border: none; } .campo__label { display: block; margin-bottom: var(--esp-2); font-family: var(--f-alt); font-weight: 800; font-size: .7rem; color: var(--durazno); text-transform: uppercase; letter-spacing: var(--ls-2); } .campo__input { width: 100%; padding: var(--esp-2) 0; font-family: var(--f-texto); font-size: 1.15rem; color: var(--marfil); background: transparent; border: none; border-bottom: 2px solid var(--linea-mar); border-radius: 0; transition: border-color var(--transicion); } textarea.campo__input { border: 2px solid var(--linea-mar); border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); font-size: 1.05rem; line-height: 1.6; resize: vertical; } .campo__input::placeholder { color: rgba(247,236,224,.55); } .campo__input:focus-visible { outline: none; border-color: var(--durazno); } textarea.campo__input:focus-visible { box-shadow: 0 0 0 3px rgba(242,203,169,.3); } .rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-2); } .rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; font-size: 1.1rem; color: var(--marfil); min-height: 44px; } .rsvp__radio input { accent-color: var(--durazno-2); width: 1.15em; height: 1.15em; } /* Botón sólido — marfil sobre barro invertible */ .boton { display: block; width: 100%; margin-top: var(--esp-4); padding: var(--esp-3); border: 2px solid var(--marfil); background: var(--marfil); color: var(--barro); font-family: var(--f-alt); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-2); cursor: pointer; border-radius: var(--radio); transition: background var(--transicion), color var(--transicion), transform .1s ease; } .boton:hover { background: transparent; color: var(--marfil); } .boton:active { transform: translateY(1px); } .boton:disabled { opacity: .55; cursor: default; } .rsvp__estado { margin-top: var(--esp-3); font-weight: 700; min-height: 1.4em; } .rsvp__estado--ok { color: var(--durazno); } .rsvp__estado--error { color: #ffb4a6; } /* ========================================================= MÚSICA (botón flotante). El pulso .musica--invita vive en secciones.css. ========================================================= */ .musica { position: fixed; bottom: var(--esp-4); right: var(--esp-4); z-index: 40; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--marfil); background: var(--barro); color: var(--marfil); cursor: pointer; display: grid; place-items: center; font-size: 1.35rem; } .musica[aria-pressed="true"] .musica__icono { animation: brasa-gira 4s linear infinite; } @keyframes brasa-gira { to { transform: rotate(360deg); } } /* ========================================================= SALUDO al invitado (lo inyecta el motor con ?i=codigo) — NATIVO. Se define aquí a propósito para NO heredar el fallback de secciones.css. ========================================================= */ .saludo { text-align: center; padding: var(--esp-6) var(--esp-4); background: var(--barro); color: var(--marfil); border-top: 3px solid var(--brasa); border-bottom: 3px solid var(--brasa); } .saludo__hola { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1; letter-spacing: -.01em; color: var(--marfil); } .saludo__pases { margin-top: 8px; letter-spacing: .04em; color: var(--durazno); } /* ========================================================= PIE — colofón de barro profundo ========================================================= */ .pie { position: relative; text-align: center; background: var(--barro-2); color: var(--marfil); padding: 0 var(--esp-4) calc(var(--esp-7) + 70px); } .pie .divisor { margin-bottom: var(--esp-6); } .pie__nombres { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 12vw, 4rem); line-height: .9; letter-spacing: -.015em; color: var(--marfil); } .pie__fecha { font-family: var(--f-alt); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .78rem; margin: var(--esp-3) 0 var(--esp-2); color: var(--durazno); } .pie__credito { font-family: var(--f-alt); font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: rgba(247,236,224,.6); } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--barro-2); color: var(--marfil); padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: var(--f-texto); } .preview__chip { background: rgba(247,236,224,.14); color: var(--marfil); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; } .preview__chip.is-active { background: var(--brasa); color: var(--marfil); } /* ========================================================= FOCO VISIBLE GLOBAL (accesibilidad, AA) Doble anillo (barro + durazno) → visible sobre terracota, marfil y barro. ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--durazno); outline-offset: 3px; border-radius: var(--radio); } .hero__scroll:focus-visible { outline-offset: 6px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (min-width: 560px) { .contador__lista { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) { .carrusel__slide { flex: 0 0 58%; } .hospedaje__lista { grid-template-columns: 1fr 1fr; } .evento__mapa iframe { height: 380px; } .historia__img { aspect-ratio: 16/10; } .divisor::before, .divisor::after, .hero__cinta::before, .hero__cinta::after { font-size: 1rem; } } /* ========================================================= ACCESIBILIDAD — reduce motion DETIENE la marquee y los barridos; deja TODO en su estado final visible. ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } /* Barrido: dejar los nombres COMPLETAMENTE revelados */ .hero__nombres > [data-rol], .hero__nombres .hero__amp { clip-path: none !important; } /* Hero: contenido en estado final visible */ .hero__intro, .hero__sello, .hero__fecha, .hero__scroll { opacity: 1; transform: none; } /* Cinta: detenida pero legible (mostrar solo una copia estática) */ .divisor::after, .hero__cinta::after { display: none; } .divisor::before, .hero__cinta::before { transform: none !important; } } /* ========================================================= AJUSTES QA v0.22.1 — áreas táctiles ≥44px, hospedaje aireado y balance del hero en escritorio. Reglas ADITIVAS (mismo look). ========================================================= */ .hospedaje__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); } .hospedaje__tel { display: inline-flex; align-items: center; min-height: 44px; margin: 0; } .hospedaje__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; } @media (max-width: 560px) { .hospedaje__tel, .hospedaje__link { width: 100%; } .hospedaje__tel { justify-content: flex-start; } } .evento__boton, .mesa-regalos__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } .hero__scroll { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Escritorio: nombres a mayor escala + bloque centrado para que el hero no deje la mitad derecha vacía (se lee terminado, no a medias). */ @media (min-width: 1024px) { .hero__contenido { max-width: 1200px; margin-left: auto; margin-right: auto; } .hero__nombres { font-size: clamp(6.5rem, 16vw, 13rem); } .hero__fecha { font-size: clamp(1.05rem, 2vw, 1.35rem); } } /* ========================================================= PORTADA DE APERTURA (SPEC 0008) — variante BRASA Bloque barro + título Anton enorme + CTA marfil sólido. secciones.css carga ANTES → esta hoja gana la cascada. ========================================================= */ :root { --portada-bg: var(--brasa); --portada-tinta: var(--marfil); --portada-acento: var(--barro); --portada-titulo-font: var(--f-display); --portada-radio: var(--radio); --portada-cta-bg: var(--barro); --portada-cta-tinta: var(--marfil); } .ti-portada { background: var(--brasa); } .ti-portada__emblema { display: inline-grid; place-items: center; width: 60px; height: 60px; margin: 0 auto var(--esp-3); background: var(--barro); color: var(--durazno); font-family: var(--f-display); font-size: 1.6rem; } .ti-portada__titulo { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 11vw, 4rem); line-height: .9; letter-spacing: -.015em; color: var(--marfil); } .ti-portada__invitado { color: var(--marfil); } .ti-portada__cta { text-transform: uppercase; letter-spacing: var(--ls-2); font-family: var(--f-alt); font-weight: 800; font-size: .9rem; padding: 14px 34px; }