.ox { font-family: Rubik, sans-serif; }
.ox-display { font-family: Abril Fatface, cursive; }
body { background: #fff8ee; }
.ox { --cream:#fff8ee; --navy:#12124a; --pink:#e0245e; --teal:#12a594; --sun:#f5a524; --violet:#7c4dff;
  background: var(--cream); color: var(--navy); min-height: 100vh; overflow-x: hidden; }
.ox-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.ox-bunting { display: flex; overflow: hidden; }
.ox-flag { flex: 1 0 auto; height: 86px; min-width: 60px; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); position: relative; }
.ox-flag::after { content: ""; position: absolute; inset: 14px 18px 26px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,248,238,0.85) 0 22%, transparent 22%),
              radial-gradient(circle at 30% 70%, rgba(255,248,238,0.7) 0 14%, transparent 14%),
              radial-gradient(circle at 70% 70%, rgba(255,248,238,0.7) 0 14%, transparent 14%); }
.ox-hero { text-align: center; padding: 4rem 0 4.5rem; }
.ox-hola { font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.ox-names { font-size: clamp(3rem, 11vw, 6rem); line-height: 0.94; margin-top: 1.4rem; color: var(--navy); }
.ox-names span { display: block; font-size: 0.34em; color: var(--pink); }
.ox-date { margin-top: 1.8rem; display: inline-block; background: var(--navy); color: var(--cream);
  padding: 0.6rem 1.6rem; border-radius: 99px; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; }
.ox-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; margin-top: 3rem; }
.ox-block { padding: 3rem 1.8rem; color: #fff; }
.ox-blockno { font-size: 0.7rem; letter-spacing: 0.24em; opacity: 0.85; font-weight: 600; }
.ox-blockh { font-size: 1.9rem; margin: 0.8rem 0 0.7rem; }
.ox-blockp { font-size: 0.92rem; line-height: 1.75; opacity: 0.92; }
.ox-section { padding: 4.5rem 0; }
.ox-eyebrow { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--teal); font-weight: 600; text-align: center; }
.ox-h2 { font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-top: 0.9rem; }
.ox-p { max-width: 62ch; margin: 1.6rem auto 0; text-align: center; font-size: 1rem; line-height: 1.85; color: rgba(18,18,74,0.8); }
.ox-tickets { display: grid; gap: 1.2rem; margin-top: 2.8rem; }
.ox-ticket { display: grid; grid-template-columns: 120px 1fr; background: #fff; border: 2px dashed rgba(18,18,74,0.25); border-radius: 10px; overflow: hidden; }
@media (max-width: 620px) { .ox-ticket { grid-template-columns: 88px 1fr; } }
.ox-stub { display: grid; place-items: center; color: #fff; text-align: center; padding: 1.2rem 0.6rem; font-size: 1.5rem; line-height: 1.1; }
.ox-stub small { display: block; font-family: inherit; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.9; margin-top: 0.3rem; }
.ox-ticketbody { padding: 1.5rem 1.6rem; }
.ox-tickett { font-size: 1.3rem; }
.ox-ticketp { font-size: 0.9rem; line-height: 1.75; color: rgba(18,18,74,0.72); margin-top: 0.4rem; }
.ox-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2.6rem; }
@media (max-width: 720px) { .ox-photos { grid-template-columns: 1fr 1fr; } }
.ox-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 3px solid var(--sun); }
.ox-cta { background: var(--pink); color: #fff; text-align: center; padding: 5rem 1.5rem 5.5rem; }
.ox-btn { display: inline-block; margin-top: 2rem; background: var(--sun); color: #3a2000; text-decoration: none;
  padding: 1.05rem 3.2rem; border-radius: 99px; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.ox-foot { text-align: center; padding: 2.6rem 1.5rem 3.4rem; font-size: 0.76rem; letter-spacing: 0.2em; color: rgba(18,18,74,0.6); }