/* ============================================================ Mentora micro-páginas — estilos de piezas (invitaciones) Standalone: NO depende del style.css del sitio principal. 6 temas vía clase en : tema-elegante, tema-floral, tema-romantico, tema-quinceanera, tema-fiesta, tema-clasico ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --ancho: 640px; } body.pieza { min-height: 100svh; display: flex; flex-direction: column; align-items: center; font-family: var(--p-font-texto, 'Inter', sans-serif); background: var(--p-fondo, #faf7f2); color: var(--p-tinta, #2b2b33); -webkit-font-smoothing: antialiased; } /* ── Temas ─────────────────────────────────────────────── */ .tema-elegante { --p-fondo: linear-gradient(170deg, #10172b 0%, #1d2a4d 55%, #10172b 100%); --p-tinta: #f3ecdf; --p-acento: #cfa658; --p-suave: rgba(207, 166, 88, .14); --p-font-titulo: 'Playfair Display', serif; --p-font-texto: 'Inter', sans-serif; } .tema-floral { --p-fondo: linear-gradient(165deg, #f4f8f0 0%, #fdf3f3 60%, #f0f6ee 100%); --p-tinta: #3c4a3a; --p-acento: #b96a7c; --p-suave: rgba(185, 106, 124, .12); --p-font-titulo: 'Cormorant Garamond', serif; --p-font-texto: 'Inter', sans-serif; } .tema-romantico { --p-fondo: linear-gradient(170deg, #fdf0f3 0%, #fbe2e8 55%, #f8d8e0 100%); --p-tinta: #5d2438; --p-acento: #a8345c; --p-suave: rgba(168, 52, 92, .12); --p-font-titulo: 'Playfair Display', serif; --p-font-texto: 'Inter', sans-serif; } .tema-quinceanera { --p-fondo: linear-gradient(160deg, #f7eefb 0%, #fde8f4 50%, #ece9ff 100%); --p-tinta: #4a2d5e; --p-acento: #b14fc9; --p-suave: rgba(177, 79, 201, .13); --p-font-titulo: 'Quicksand', sans-serif; --p-font-texto: 'Quicksand', sans-serif; } .tema-fiesta { --p-fondo: linear-gradient(165deg, #14101f 0%, #25143c 55%, #14101f 100%); --p-tinta: #f4f0ff; --p-acento: #2dd4bf; --p-suave: rgba(45, 212, 191, .14); --p-font-titulo: 'Poppins', sans-serif; --p-font-texto: 'Poppins', sans-serif; } .tema-clasico { --p-fondo: linear-gradient(170deg, #fbf7ef 0%, #f4ecdc 60%, #fbf7ef 100%); --p-tinta: #463c2e; --p-acento: #8c6d3f; --p-suave: rgba(140, 109, 63, .13); --p-font-titulo: 'Cormorant Garamond', serif; --p-font-texto: 'Inter', sans-serif; } /* ── Tarjeta principal ─────────────────────────────────── */ .p-tarjeta { width: 100%; max-width: var(--ancho); padding: clamp(24px, 6vw, 56px) clamp(20px, 5vw, 48px); text-align: center; } .p-hero { padding: clamp(28px, 8vw, 64px) 0 8px; } .p-evento { font-size: clamp(.8rem, 2.6vw, .95rem); letter-spacing: .35em; text-transform: uppercase; color: var(--p-acento); font-weight: 600; } .p-titulo { font-family: var(--p-font-titulo); font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1.12; font-weight: 700; margin: 14px 0 12px; overflow-wrap: break-word; } .p-fecha { font-size: clamp(.95rem, 3vw, 1.1rem); opacity: .92; } .p-ornamento { width: 120px; height: 2px; margin: 26px auto 0; background: var(--p-acento); position: relative; } .p-ornamento::before, .p-ornamento::after { content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--p-acento); } .p-ornamento::before { left: -14px; } .p-ornamento::after { right: -14px; } /* ── Countdown ─────────────────────────────────────────── */ .p-countdown { display: flex; justify-content: center; gap: clamp(10px, 3vw, 18px); margin: clamp(24px, 6vw, 40px) 0; flex-wrap: wrap; } .p-countdown > div { min-width: 72px; padding: 14px 10px; border-radius: 14px; background: var(--p-suave); border: 1px solid color-mix(in srgb, var(--p-acento) 35%, transparent); } .p-countdown span { display: block; font-family: var(--p-font-titulo); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 700; color: var(--p-acento); font-variant-numeric: tabular-nums; } .p-countdown small { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; } .p-llego { font-family: var(--p-font-titulo); font-size: 1.5rem; color: var(--p-acento); } /* ── Secciones ─────────────────────────────────────────── */ .p-mensaje p { font-size: clamp(1.02rem, 3.2vw, 1.18rem); line-height: 1.7; font-style: italic; max-width: 46ch; margin: 0 auto clamp(22px, 5vw, 34px); } .p-detalles, .p-extra { margin-bottom: clamp(22px, 5vw, 34px); } .p-detalles h2 { font-family: var(--p-font-titulo); font-size: clamp(1.3rem, 4.4vw, 1.7rem); color: var(--p-acento); margin-bottom: 10px; } .p-lugar { font-weight: 600; font-size: 1.08rem; } .p-direccion { opacity: .85; margin: 4px 0 16px; } .p-extra p { margin-bottom: 8px; } .p-anfitrion { font-family: var(--p-font-titulo); font-size: 1.15rem; margin-top: 12px; } /* ── Botones ───────────────────────────────────────────── */ .p-btn { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--p-acento); color: #fff; text-decoration: none; font-weight: 600; font-size: .98rem; transition: transform .15s ease, opacity .15s ease; } .p-btn:hover { transform: translateY(-2px); opacity: .92; } .p-btn--pro { background: #1a1a2e; border: 1px solid #cfa658; color: #f3ecdf; margin-top: 10px; font-size: .9rem; line-height: 1.4; max-width: 420px; } /* ── Marca de agua / footer viral ──────────────────────── */ .p-marca { width: 100%; max-width: var(--ancho); margin-top: auto; padding: 22px 20px 34px; text-align: center; border-top: 1px dashed color-mix(in srgb, var(--p-tinta) 30%, transparent); } .p-expira { font-size: .78rem; opacity: .65; margin-bottom: 8px; } .p-marca__link { display: block; color: inherit; text-decoration: none; font-size: .92rem; margin-bottom: 14px; opacity: .9; } .p-marca__link strong { color: var(--p-acento); } .p-marca__link:hover { opacity: 1; } /* ── Páginas de estado (404 / expirada) ────────────────── */ .p-estado { max-width: 520px; margin: auto; padding: 60px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; } .p-estado h1 { font-family: var(--p-font-titulo); font-size: 2rem; } .p-estado p { line-height: 1.6; opacity: .9; } /* ── Extras PRO / demo ─────────────────────────────────── */ .p-cinta { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: rgba(26, 26, 46, .92); color: #f3ecdf; font-size: .78rem; text-align: center; padding: 7px 12px; } .p-cinta a { color: #cfa658; font-weight: 700; text-decoration: none; } body.con-cinta { padding-top: 34px; } .p-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: clamp(22px, 5vw, 34px); } .p-galeria img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--p-acento) 30%, transparent); } .p-galeria img:first-child { grid-column: 1 / -1; height: 210px; } .p-itinerario { margin-bottom: clamp(22px, 5vw, 34px); text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; } .p-itinerario h2 { font-family: var(--p-font-titulo); font-size: clamp(1.3rem, 4.4vw, 1.7rem); color: var(--p-acento); margin-bottom: 14px; text-align: center; } .p-itinerario li { list-style: none; display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed color-mix(in srgb, var(--p-tinta) 18%, transparent); } .p-itinerario li:last-child { border-bottom: 0; } .p-itinerario time { font-weight: 700; color: var(--p-acento); min-width: 74px; font-variant-numeric: tabular-nums; } .p-rsvp { margin: clamp(22px, 5vw, 34px) auto; padding: 24px 22px; border-radius: 18px; background: var(--p-suave); border: 1px solid color-mix(in srgb, var(--p-acento) 35%, transparent); max-width: 420px; } .p-rsvp h2 { font-family: var(--p-font-titulo); font-size: clamp(1.25rem, 4vw, 1.55rem); color: var(--p-acento); margin-bottom: 8px; } .p-rsvp p { font-size: .92rem; line-height: 1.55; margin-bottom: 14px; opacity: .9; } .p-rsvp .p-btn { width: 100%; } @media (prefers-reduced-motion: reduce) { .p-btn { transition: none; } }