/* ========================================================= PLANTILLA "GRABADO" — boda, clásica y formal sobre barro oscuro. 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: una invitación GRABADA sobre barro oscuro. Fondo terracota profundo (#3b2015), texto marfil (#efe2cf) y oro viejo (#c9ab73) SOLO para filigranas, filetes y ornamentos —nunca para texto de cuerpo—. Marco de filigrana fina que se TRAZA en las 4 esquinas del hero (stroke-dashoffset), monograma en óvalo, nombres en DIDONE (Playfair Display) en versalitas espaciadas de alto contraste, filete dorado y metadatos en números romanos. Formal, atemporal, dramático. Premium, sobrio, distintiva. Mobile-first · accesible (contraste AA sobre oscuro) · sin dependencias. ========================================================= */ :root { /* Barro / terracota oscura — el lienzo */ --barro: #3b2015; /* barro oscuro (fondo protagonista) */ --barro-hondo: #2c1710; /* barro cocido más hondo (hero base / pie) */ --barro-claro: #4a2a1b; /* superficie de tarjeta (un tono más claro) */ --barro-claro2: #573322; /* superficie/borde de acento */ /* Marfil — TODO el texto (alto contraste sobre barro) */ --marfil: #efe2cf; /* texto principal / nombres */ --marfil-2: #d3c3ab; /* texto secundario */ /* Oro viejo — SOLO filigranas, filetes y ornamentos (nunca cuerpo) */ --oro: #c9ab73; /* oro viejo base (líneas/decoración) */ --oro-claro: #d8c4a2; /* oro claro (etiquetas grandes, meta — AA) */ --oro-prof: #8a6f43; /* oro sombra para filetes profundos */ /* Filetes y velos de oro */ --filete: rgba(201, 171, 115, .5); --filete-suave: rgba(201, 171, 115, .26); --filete-tenue: rgba(201, 171, 115, .14); /* Tipografías (las enlaza el render en ; aquí solo se declaran). Didone de alto contraste para display + serif fina para cuerpo. */ --f-display: "Playfair Display", "Didot", Georgia, "Times New Roman", serif; --f-texto: "Cormorant Garamond", Georgia, "Times New Roman", 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; /* clásico: esquinas casi rectas, de papelería */ --ls: .34em; /* tracking de versalitas (etiquetas) */ --ls-2: .22em; /* tracking medio */ --transicion: .4s cubic-bezier(.22, 1, .36, 1); --ancho: 620px; /* Fleurón dorado del divisor (line-art SVG, oro viejo) — ornamento de firma: lozange central con punto + ticks a los lados. */ --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24' fill='none' stroke='%23c9ab73' stroke-width='1.1'%3E%3Cpath d='M22 3 L29 12 L22 21 L15 12 Z'/%3E%3Ccircle cx='22' cy='12' r='2.3' fill='%23c9ab73' stroke='none'/%3E%3Cpath d='M4 12 h7 M33 12 h7' stroke-linecap='round'/%3E%3C/svg%3E"); /* --sec-*: tokens de la sección dinámica (alberca) + saludo del invitado — SPEC 0006. ADITIVO: solo lo consume secciones.css (compartido); no altera el look existente de esta plantilla. */ --sec-bg: var(--barro-claro); --sec-borde: var(--filete); --sec-radio: var(--radio); --sec-titulo-font: var(--f-display); --sec-titulo-color: var(--marfil); --sec-texto-color: var(--marfil-2); --sec-acento: var(--oro); --sec-acento-bg: var(--barro-claro2); --sec-acento-tinta: var(--marfil); --sec-acento-boton-bg: var(--oro); --sec-acento-boton-tinta: var(--barro-hondo); } *, *::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: 17px; line-height: 1.7; color: var(--marfil-2); background-color: var(--barro); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fondo grabado: viñeta profunda + una tenue retícula de filetes dorados que evocan el papel prensado de una invitación clásica. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 90% at 50% -8%, var(--barro-claro) 0%, var(--barro) 44%, var(--barro-hondo) 100%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(90deg, transparent 0 62px, rgba(201,171,115,.045) 62px 63px), repeating-linear-gradient(0deg, transparent 0 62px, rgba(201,171,115,.035) 62px 63px); } img { max-width: 100%; display: block; } iframe { border: 0; } .fade-up { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; } .fade-up.is-visible { opacity: 1; transform: none; } /* ========================================================= HERO — marco de filigrana que se traza + monograma + didone Animaciones SOLO de carga (keyframes). REGLA DE ORO del proyecto: nunca animar la opacidad del contenido del hero con scroll-timeline. ========================================================= */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--esp-7) var(--esp-5); background-color: var(--barro-hondo); background-size: cover; background-position: center; } /* Halo cálido tenue tras el monograma (solo aparece al cargar, no scroll) */ .hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(60% 44% at 50% 40%, rgba(201,171,115,.12), transparent 72%); animation: gr-fade 1.8s ease .2s both; } /* Viñeta para asentar el texto sobre el barro */ .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(82% 74% at 50% 44%, transparent 44%, rgba(20,10,6,.6) 100%); } /* Velo 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(30,16,9,.55) 0%, rgba(30,16,9,.62) 55%, rgba(44,23,16,.78) 100%); } /* Marco de filigrana: 4 esquinas de oro que se TRAZAN al cargar (SVG inline). Vive dentro del hero, no toca el contenido. */ .hero__marco { position: absolute; inset: clamp(14px, 4vw, 30px); z-index: 0; pointer-events: none; } .hero__filigrana { position: absolute; width: clamp(80px, 26vw, 150px); height: auto; overflow: visible; } .hero__filigrana--tl { top: 0; left: 0; } .hero__filigrana--tr { top: 0; right: 0; transform: scaleX(-1); } .hero__filigrana--bl { bottom: 0; left: 0; transform: scaleY(-1); } .hero__filigrana--br { bottom: 0; right: 0; transform: scale(-1); } .hero__filigrana path { fill: none; stroke: var(--oro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; /* pathLength="1" en el SVG → dibujo normalizado, independiente de la escala */ stroke-dasharray: 1; stroke-dashoffset: 1; animation: gr-traza 2.1s cubic-bezier(.5, 0, .2, 1) both; } .hero__filigrana--tl path { animation-delay: .25s; } .hero__filigrana--tr path { animation-delay: .45s; } .hero__filigrana--bl path { animation-delay: .45s; } .hero__filigrana--br path { animation-delay: .65s; } @keyframes gr-traza { to { stroke-dashoffset: 0; } } .hero__contenido { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } /* Monograma de iniciales en un ÓVALO de oro (motor → data-rol="hero-sello") */ .hero__sello { display: grid; place-items: center; width: 96px; height: 78px; margin: 0 auto var(--esp-4); border: 1px solid var(--filete); border-radius: 50% / 42%; background: rgba(201,171,115,.05); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--filete-tenue); font-family: var(--f-display); font-weight: 500; font-size: 1.55rem; letter-spacing: .16em; color: var(--oro-claro); animation: gr-rise .9s cubic-bezier(.22, 1, .36, 1) .95s both; } .hero__sello:empty { display: none; } .hero__intro { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls); font-size: .9rem; font-weight: 600; color: var(--oro-claro); margin-bottom: var(--esp-4); animation: gr-fade 1.1s ease 1.15s both; } /* Nombres en DIDONE, versalitas espaciadas, alto contraste (marfil, no oro) */ .hero__nombres { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(2.4rem, 12vw, 4.8rem); line-height: 1.06; color: var(--marfil); text-shadow: 0 1px 2px rgba(20,10,6,.5); font-optical-sizing: auto; animation: gr-rise 1.3s cubic-bezier(.22, 1, .36, 1) 1.3s both; } /* ampersand — separador ornamental en oro, itálica */ .hero__amp { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .46em; color: var(--oro); margin: .1em 0; } /* Filete dorado bajo los nombres (se traza al cargar) */ .hero__filete { display: block; width: min(60vw, 260px); height: 14px; margin: var(--esp-4) auto 0; background: var(--fleuron) center / 44px 22px no-repeat; position: relative; animation: gr-fade 1s ease 1.75s both; } .hero__filete::before, .hero__filete::after { content: ""; position: absolute; top: 50%; width: calc(50% - 32px); height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--filete)); } .hero__filete::before { left: 0; } .hero__filete::after { right: 0; transform: translateY(-50%) scaleX(-1); } .hero__fecha { margin-top: var(--esp-4); font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: clamp(.85rem, 3.4vw, 1rem); font-weight: 600; color: var(--marfil-2); animation: gr-fade 1s ease 1.95s both; } .hero__scroll { margin-top: var(--esp-6); color: var(--oro); text-decoration: none; font-size: 1.5rem; line-height: 1; animation: gr-fade 1s ease 2.15s both; } .hero__flecha { display: inline-block; animation: gr-flota 2.2s ease-in-out infinite; } @keyframes gr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes gr-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes gr-flota { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } } /* ========================================================= ESTRUCTURA — secciones ========================================================= */ main { padding: var(--esp-7) 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 — filete dorado con fleurón central (marca de sección) Se traza (crece del centro a los lados) al revelarse la sección. ========================================================= */ .divisor { position: relative; display: block; width: 220px; height: 22px; margin: 0 auto var(--esp-5); font-size: 0; background: var(--fleuron) center / 44px 22px no-repeat; transform: scaleX(.0001); transform-origin: center; opacity: 0; transition: transform .95s cubic-bezier(.22, 1, .36, 1) .1s, opacity .9s ease; } .divisor::before, .divisor::after { content: ""; position: absolute; top: 50%; width: calc(50% - 30px); height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--filete)); } .divisor::before { left: 0; } .divisor::after { right: 0; transform: translateY(-50%) scaleX(-1); } /* Reveal: la sección .fade-up al hacerse visible traza su divisor */ .is-visible > .divisor, .is-visible .divisor { transform: scaleX(1); opacity: 1; } /* Títulos de sección */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.8rem, 6.4vw, 2.7rem); line-height: 1.16; color: var(--marfil); font-optical-sizing: auto; margin-bottom: var(--esp-4); } .bienvenida__titulo { color: var(--oro-claro); } .bienvenida__texto { max-width: 500px; margin: 0 auto; font-family: var(--f-display); font-style: italic; font-size: 1.4rem; line-height: 1.55; color: var(--marfil-2); } /* ========================================================= CUENTA REGRESIVA — cartelas de barro (2×2 en móvil) ========================================================= */ .contador__lista { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); max-width: 340px; margin: 0 auto; } .contador__item { padding: var(--esp-4) var(--esp-2) var(--esp-3); background: var(--barro-claro); border: 1px solid var(--filete); border-radius: var(--radio); box-shadow: inset 0 0 0 3px var(--filete-tenue); } .contador__num { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1; color: var(--marfil); font-variant-numeric: lining-nums; } .contador__label { display: block; margin-top: var(--esp-2); font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--oro-claro); font-family: var(--f-texto); font-weight: 700; } /* ========================================================= HISTORIA / timeline (BODA) — sendero con filete de oro ========================================================= */ .historia__linea { list-style: none; max-width: 520px; margin: 0 auto; text-align: left; position: relative; } .historia__item { position: relative; padding: 0 0 var(--esp-6) var(--esp-6); border-left: 1px solid var(--filete); } .historia__item:last-child { padding-bottom: 0; border-left-color: transparent; } .historia__item::before { content: ""; position: absolute; left: -7px; top: 5px; width: 13px; height: 13px; transform: rotate(45deg); background: var(--oro); box-shadow: 0 0 0 3px var(--barro), 0 0 0 4px var(--filete-suave); } .historia__fecha { font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .74rem; font-weight: 700; color: var(--oro-claro); margin-bottom: var(--esp-1); } .historia__titulo { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 1.4rem; color: var(--marfil); line-height: 1.2; margin-bottom: var(--esp-2); } .historia__texto { color: var(--marfil-2); } .historia__img { margin-top: var(--esp-3); width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--filete); border-radius: var(--radio); } /* ========================================================= EVENTOS (ceremonia / recepción) — cartela grabada + mapa ========================================================= */ .evento { padding: var(--esp-6) var(--esp-4) var(--esp-5); background: var(--barro-claro); border: 1px solid var(--filete); border-radius: var(--radio); box-shadow: inset 0 0 0 4px var(--filete-tenue), 0 14px 34px rgba(20,10,6,.32); } .evento .seccion__titulo { color: var(--oro-claro); } .evento__hora { display: inline-block; font-family: var(--f-texto); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .82rem; color: var(--oro-claro); margin-bottom: var(--esp-3); } .evento__lugar { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(1.5rem,5.4vw,2.1rem); color: var(--marfil); line-height: 1.18; } .evento__direccion { color: var(--marfil-2); margin: var(--esp-2) 0 var(--esp-4); } .evento__mapa { position: relative; border: 2px solid var(--barro-claro2); border-radius: var(--radio); overflow: hidden; box-shadow: inset 0 0 0 3px var(--filete-tenue), 0 8px 22px rgba(20,10,6,.34); } /* Mapa embebido integrado al barro oscuro: fuertemente desaturado, cálido y oscurecido para que el blanco brillante de Google no rompa la paleta. */ .evento__mapa iframe { width: 100%; height: 300px; display: block; opacity: .9; filter: sepia(.3) saturate(.6) brightness(.8) contrast(1.05); } /* Viñeta barro que funde los bordes del mapa con la cartela (no captura clics). */ .evento__mapa::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 44px 8px rgba(44,23,16,.55); border-radius: var(--radio); } /* Botones de contorno (papelería grabada) */ .evento__boton, .mesa-regalos__link, .hospedaje__link { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-2) var(--esp-5); border: 1px solid var(--oro); border-radius: var(--radio); color: var(--oro-claro); text-decoration: none; background: transparent; font-family: var(--f-texto); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: var(--ls-2); transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion); } .evento__boton:hover, .mesa-regalos__link:hover, .hospedaje__link:hover { background: var(--oro); color: var(--barro-hondo); box-shadow: 0 0 22px rgba(201,171,115,.28); } /* ========================================================= ITINERARIO — el programa de la velada ========================================================= */ .itinerario__lista { list-style: none; max-width: 460px; margin: 0 auto; text-align: left; } .itinerario__item { display: grid; grid-template-columns: 96px 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: 500; font-size: 1.2rem; color: var(--oro-claro); letter-spacing: .03em; } .itinerario__actividad { color: var(--marfil-2); } /* ========================================================= DRESS CODE ========================================================= */ .dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--marfil-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: 50%; border: 2px solid var(--barro-claro); box-shadow: 0 0 0 1px var(--filete), 0 4px 12px rgba(20,10,6,.4); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--marfil-2); } .mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .mesa-regalos__link { margin-top: 0; } /* ========================================================= HOSPEDAJE — cartelas de barro ========================================================= */ .hospedaje__lista { list-style: none; display: grid; gap: var(--esp-3); grid-template-columns: 1fr; text-align: left; } .hospedaje__item { background: var(--barro-claro); border: 1px solid var(--filete); border-radius: var(--radio); padding: var(--esp-4) var(--esp-4); text-align: center; box-shadow: inset 0 0 0 3px var(--filete-tenue); } .hospedaje__nombre { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; color: var(--marfil); margin-bottom: var(--esp-1); } .hospedaje__direccion { color: var(--marfil-2); margin-bottom: var(--esp-2); } .hospedaje__tel { display: inline-block; color: var(--oro-claro); text-decoration: none; letter-spacing: .03em; font-weight: 700; } .hospedaje__tel:hover { text-decoration: underline; } .hospedaje__link { margin-top: var(--esp-3); padding: var(--esp-1) var(--esp-4); font-size: .7rem; } /* ========================================================= GALERÍA — carrusel con marco de oro ========================================================= */ .galeria { padding: var(--esp-5) 0 var(--esp-8); max-width: none; margin: 0 auto var(--esp-8); text-align: center; } .carrusel { position: relative; max-width: 920px; 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); border-radius: var(--radio); box-shadow: inset 0 0 0 4px var(--filete-tenue), 0 12px 30px rgba(20,10,6,.4); cursor: zoom-in; } .carrusel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filete); background: rgba(44,23,16,.82); color: var(--oro); font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .carrusel__nav--prev { left: 10px; } .carrusel__nav--next { right: 10px; } .carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); } .carrusel__dot { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--filete); background: transparent; padding: 0; cursor: pointer; } .carrusel__dot.is-active { background: var(--oro); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(18,9,5,.95); 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); border-radius: var(--radio); } .lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--oro); font-size: 2.4rem; cursor: pointer; line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--oro); font-size: 2.6rem; cursor: pointer; padding: var(--esp-2); } .lightbox__nav--prev { left: var(--esp-1); } .lightbox__nav--next { right: var(--esp-1); } /* ========================================================= RSVP — formulario subrayado, grabado ========================================================= */ .rsvp__nota { color: var(--marfil-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: .95rem; font-style: italic; font-family: var(--f-display); color: var(--oro-claro); } .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-size: .72rem; font-weight: 700; color: var(--oro-claro); text-transform: uppercase; letter-spacing: var(--ls-2); font-family: var(--f-texto); } .campo__input { width: 100%; padding: var(--esp-2) 0; font-family: var(--f-display); font-size: 1.2rem; color: var(--marfil); background: transparent; border: none; border-bottom: 1px solid var(--filete); border-radius: 0; transition: border-color var(--transicion), box-shadow var(--transicion); } textarea.campo__input { border: 1px solid var(--filete); border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); font-size: 1.1rem; line-height: 1.55; resize: vertical; } .campo__input::placeholder { color: var(--marfil-2); opacity: .55; } .campo__input:focus-visible { outline: none; border-color: var(--oro); box-shadow: 0 1px 0 0 var(--oro); } textarea.campo__input:focus-visible { box-shadow: 0 0 0 3px rgba(201,171,115,.22); } .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.16rem; color: var(--marfil-2); min-height: 44px; } .rsvp__radio input { accent-color: var(--oro); width: 1.1em; height: 1.1em; } /* Botón sólido de oro sobre barro */ .boton { display: block; width: 100%; margin-top: var(--esp-4); padding: var(--esp-3); border: 1px solid var(--oro); border-radius: var(--radio); background: var(--oro); color: var(--barro-hondo); font-family: var(--f-texto); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); cursor: pointer; transition: background var(--transicion), box-shadow var(--transicion), transform .1s ease; } .boton:hover { background: var(--oro-claro); box-shadow: 0 8px 22px rgba(201,171,115,.3); } .boton:active { transform: translateY(1px); } .boton:disabled { opacity: .55; cursor: default; } .rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 700; min-height: 1.4em; font-family: var(--f-texto); } .rsvp__estado--ok { color: var(--oro-claro); } .rsvp__estado--error { color: #f0a3a3; } /* ========================================================= 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: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--oro); background: rgba(44,23,16,.9); color: var(--oro); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 6px 18px rgba(20,10,6,.4); } .musica[aria-pressed="true"] .musica__icono { animation: gr-gira 4s linear infinite; } @keyframes gr-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-claro); color: var(--marfil); border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); box-shadow: inset 0 0 0 4px var(--filete-tenue); } .saludo__hola { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.15; color: var(--oro-claro); } .saludo__pases { margin-top: 6px; letter-spacing: .04em; color: var(--marfil-2); } /* ========================================================= PIE — colofón grabado ========================================================= */ .pie { position: relative; text-align: center; padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 70px); background: var(--barro-hondo); border-top: 1px solid var(--filete-suave); } .pie .divisor { margin: 0 auto var(--esp-5); } .pie__nombres { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(2rem, 8vw, 3rem); color: var(--marfil); line-height: 1.1; } .pie__fecha { text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .78rem; margin: var(--esp-3) 0 var(--esp-2); color: var(--oro-claro); font-family: var(--f-texto); font-weight: 600; } .pie__credito { font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--marfil-2); font-family: var(--f-texto); } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(18,9,5,.96); color: var(--marfil); 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(--marfil); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; } .preview__chip.is-active { background: var(--oro); color: var(--barro-hondo); } /* ========================================================= FOCO VISIBLE GLOBAL (accesibilidad, AA) ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; border-radius: var(--radio); } .hero__scroll:focus-visible { outline-offset: 6px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (min-width: 640px) { .contador__lista { grid-template-columns: repeat(4, 1fr); max-width: none; } } @media (min-width: 768px) { .carrusel__slide { flex: 0 0 56%; } .carrusel__slide img { aspect-ratio: 4/5; } .hospedaje__lista { grid-template-columns: 1fr 1fr; } .evento__mapa iframe { height: 370px; } .historia__img { aspect-ratio: 16/10; } .hero__nombres { font-size: clamp(3.2rem, 8vw, 5.6rem); } } /* ========================================================= ACCESIBILIDAD — prefers-reduced-motion Deja el marco de filigrana TRAZADO en su estado final y todo visible. ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } /* Marco: dibujado por completo (no a medias) */ .hero__filigrana path { stroke-dashoffset: 0 !important; } /* Hero: todo visible en estado final */ .hero::before, .hero__sello, .hero__intro, .hero__nombres, .hero__filete, .hero__fecha, .hero__scroll { opacity: 1; transform: none; } /* Divisores: trazados y visibles */ .divisor { transform: scaleX(1); opacity: 1; } } /* ========================================================= AJUSTES QA v0.22.1 — áreas táctiles ≥44px y hospedaje aireado. Reglas ADITIVAS (mismo look; solo ergonomía y separación). Las cartelas de hospedaje son centradas → se mantiene el centrado. ========================================================= */ .hospedaje__item { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); } .hospedaje__tel, .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%; } } .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; } /* ========================================================= PORTADA DE APERTURA (SPEC 0008) — variante GRABADO Óvalo de oro + título didone en versalitas + CTA de oro sólido. secciones.css carga ANTES → esta hoja gana la cascada. ========================================================= */ :root { --portada-bg: var(--barro); --portada-tinta: var(--marfil); --portada-acento: var(--oro); --portada-titulo-font: var(--f-display); --portada-radio: var(--radio); --portada-cta-bg: var(--oro); --portada-cta-tinta: var(--barro-hondo); } .ti-portada { background: radial-gradient(90% 70% at 50% 40%, var(--barro-claro), var(--barro-hondo) 78%); } .ti-portada__emblema { display: block; width: 64px; height: 52px; margin: 0 auto var(--esp-3); border: 1px solid var(--filete); border-radius: 50% / 42%; background: rgba(201,171,115,.05); } .ti-portada__titulo { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.8rem, 7vw, 2.7rem); color: var(--marfil); } .ti-portada__invitado { display: none; } .ti-portada__cta { text-transform: uppercase; letter-spacing: var(--ls-2); font-size: .9rem; font-weight: 700; padding: 14px 32px; }