/* ════════════════════════════════════════════════════════════════ TABS DE PLANES — estilos compartidos ──────────────────────────────────────────────────────────────── Usado por invitaciones.css (tabla de precios) y catalogo.css (modal "Ver detalles"). Cárgalo en el de ambas páginas. ════════════════════════════════════════════════════════════════ */ .tier-tabs { display: flex; gap: 8px; } .tier-tab { padding: 10px 16px; font-family: Lato, sans-serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9A8878; border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .tier-tab:hover { color: #2C2420; } .tier-tab.active { color: #2C2420; border-bottom-color: #C9A96E; } /* Por defecto (usado por el modal del catálogo): un único panel visible. invitaciones.css lo sobreescribe en escritorio para mostrar los 3 a la vez. */ .tier-panel { display: none; } .tier-panel.active { display: block; } .tier-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; } .tier-name { font-family: 'Playfair Display', serif; font-size: 18px; color: #2C2420; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .tier-badge { display: inline-block; background: #C9A96E; color: #fff; font-family: Lato, sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; white-space: nowrap; vertical-align: middle; } .tier-price-wrap { text-align: right; flex-shrink: 0; } .tier-price { font-family: 'Playfair Display', serif; font-size: 26px; color: #C9A96E; font-weight: 600; line-height: 1; } .tier-price-note { font-family: Lato, sans-serif; font-size: 10px; color: #9A8878; margin-top: 4px; } .tier-feat-list { display: flex; flex-direction: column; gap: 9px; } .tier-feat { font-family: Lato, sans-serif; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; } .tier-feat.on { color: #5A4840; } .tier-feat.off { color: #C4B8AE; } .tier-feat-icon { flex-shrink: 0; color: #C9A96E; } .tier-feat.off .tier-feat-icon { color: inherit; } @media (max-width: 768px) { .tier-tab { padding: 10px 8px; font-size: 10px; letter-spacing: 0.04em; } } @media (max-width: 380px) { .tier-tab { padding: 8px 4px; font-size: 9px; } }