/* ============================================================
   BODAS.CSS — Rose/Pink glass design system
   Loads after: tokens.css · style.css · design-v2.css · design-v3.css · pages.css
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --rose-1: #fff5f7;
  --rose-2: #fde8ee;
  --rose-3: #f9c6d4;
  --rose-4: #e8a0b4;
  --rose-5: #c06080;

  --color-brand:      #c06080;
  --color-brand-dark: #240d18;

  /* Glass tokens — rose tints */
  --glass-surface:        rgba(32, 15, 24, 0.68);
  --glass-surface-soft:   rgba(28, 13, 22, 0.60);
  --glass-surface-strong: rgba(36, 17, 28, 0.78);
  --glass-tint:           linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  --glass-tint-strong:    linear-gradient(145deg, rgba(192,96,128,0.22), rgba(192,96,128,0.08));
  --glass-border:         rgba(255,255,255,0.10);
  --glass-border-soft:    rgba(255,255,255,0.08);
  --glass-border-strong:  rgba(192,96,128,0.35);

  /* Card glass look */
  --card-glass-bg:     rgba(255,255,255,0.055);
  --card-glass-border: rgba(255,255,255,0.11);
  --card-glass-hover:  rgba(192,96,128,0.18);
}

/* ============================================================
   2. BACKGROUND — Rose nebula
   ============================================================ */
html {
  background: linear-gradient(180deg, #241118 0%, #160912 100%) !important;
}

body {
  background-color: #160912 !important;
  background-image:
    radial-gradient(ellipse 1400px 900px at 95%  2%,  rgba(240, 130, 170, 0.32), transparent 55%),
    radial-gradient(ellipse 1000px 700px at  2%  60%, rgba(192,  74, 128, 0.24), transparent 58%),
    radial-gradient(ellipse  900px 600px at 50% 100%, rgba(144,  44,  88, 0.20), transparent 60%),
    radial-gradient(ellipse 1200px 500px at 50%  -8%, rgba(250, 190, 215, 0.12), transparent 52%) !important;
  background-attachment: fixed !important;
}

@media (max-width: 768px) {
  body { background-attachment: scroll !important; }
  [data-glow] { background-attachment: local, scroll !important; }
}

/* ============================================================
   3. KEYFRAME ANIMATIONS — Floating elements
   ============================================================ */

/* Gentle orbital drift */
@keyframes bodas-float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(-14px, -22px) scale(1.04); }
  50%       { transform: translate(8px, -32px) scale(0.97); }
  75%       { transform: translate(18px, -14px) scale(1.03); }
}

/* Rotating ring drift */
@keyframes bodas-float-ring {
  0%, 100% { transform: translate(0, 0) rotate(0deg);   opacity: 0.16; }
  33%       { transform: translate(-10px, -18px) rotate(120deg); opacity: 0.26; }
  66%       { transform: translate(8px, -28px) rotate(240deg);  opacity: 0.20; }
}

/* Diamond spin-float */
@keyframes bodas-float-diamond {
  0%, 100% { transform: translate(0, 0) rotate(45deg) scale(1);    opacity: 0.13; }
  50%       { transform: translate(12px, -20px) rotate(225deg) scale(1.12); opacity: 0.24; }
}

/* Slow ambient pulse */
@keyframes bodas-pulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(1.06); }
}

/* Rising shimmer (for dot clusters) */
@keyframes bodas-rise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translateY(-70px) scale(0.7); opacity: 0; }
}

/* Slow horizontal drift for accent lines */
@keyframes bodas-drift-x {
  0%, 100% { transform: scaleX(0.6) translateX(0);   opacity: 0.12; }
  50%       { transform: scaleX(1)   translateX(20px); opacity: 0.22; }
}

/* ============================================================
   4. HEADER — Rose-tinted dark
   ============================================================ */
.header {
  background-color: rgba(50, 15, 35, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(192, 96, 128, 0.14) !important;
  will-change: backdrop-filter;
}

.menu {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  will-change: opacity, backdrop-filter;
}

.nav-dropdown-menu {
  background: rgba(36, 9, 24, 0.96) !important;
  border: 1px solid rgba(192, 96, 128, 0.18) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  will-change: opacity, backdrop-filter;
}

/* ============================================================
   5. SUBNAV
   ============================================================ */
.bodas-subnav {
  top: var(--header-height) !important;
  background: rgba(60, 12, 36, 0.90) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(192, 96, 128, 0.16) !important;
}

@media (max-width: 600px) {
  .bodas-subnav { top: var(--header-height) !important; }
}

/* ============================================================
   6. FOOTER — Rose dark
   ============================================================ */
.footer {
  --footer-background: var(--rose-5) !important;
}

/* ============================================================
   7. TRANSPARENT SECTIONS — Show rose nebula through
   ============================================================ */
.hero-bodas-sub,
.hero-bodas,
.intro-bodas,
.bodas-content,
.features-bodas,
.why-bodas,
.packs-bodas,
.process-bodas,
.servicios-bodas,
.rsvp-bodas,
.mesas-bodas,
.faq-bodas,
.sobre-mi-bodas,
.contacto-bodas,
.portfolio-bodas,
.blog-bodas,
.article-bodas,
.carteles-showcase,
.proceso-inv {
  background:           transparent !important;
  background-color:     transparent !important;
  background-image:     none !important;
  position:             relative;
  overflow:             hidden;
  /* Stacking context: keeps z-index:-1 pseudo-elements behind content */
  isolation:            isolate;
}

/* Section padding adjustments for dark mode */
.bodas-content,
.features-bodas,
.why-bodas,
.packs-bodas,
.process-bodas,
.servicios-bodas,
.rsvp-bodas,
.mesas-bodas,
.faq-bodas,
.sobre-mi-bodas,
.contacto-bodas,
.portfolio-bodas,
.blog-bodas {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* CTA and valor keep their gradient but enhance it */
.cta-bodas {
  background: linear-gradient(135deg, rgba(144, 44, 88, 0.85) 0%, rgba(192, 96, 128, 0.75) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top:    1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  position: relative;
  overflow: hidden;
}

.valor-bodas {
  background: linear-gradient(160deg, rgba(120, 30, 60, 0.80) 0%, rgba(80, 16, 40, 0.85) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top:    1px solid rgba(255,255,255,0.07) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* ============================================================
   8. FLOATING AMBIENT ORBS — Per section
   ============================================================ */

/* HERO — Large orb top-right + ring bottom-left */
.hero-bodas-sub::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 130, 170, 0.30), transparent 68%);
  top: -120px; right: -80px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 11s ease-in-out infinite;
}

.hero-bodas-sub::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 160, 180, 0.22);
  box-shadow: inset 0 0 60px rgba(192, 96, 128, 0.10), 0 0 60px rgba(192, 96, 128, 0.10);
  bottom: 8%; left: 6%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-ring 14s ease-in-out infinite;
}

/* Ensure hero content sits above pseudo-elements */
.hero-bodas-sub > * { position: relative; z-index: 1; }

/* FEATURES — Diamond top-left + orb bottom-right */
.features-bodas::before {
  content: '';
  position: absolute;
  width: 60px; height: 60px;
  background: rgba(232, 160, 180, 0.10);
  border: 1px solid rgba(232, 160, 180, 0.22);
  border-radius: 10px;
  top: 5%; left: 4%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-diamond 9s ease-in-out infinite;
}

.features-bodas::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 96, 128, 0.18), transparent 65%);
  bottom: -80px; right: -60px;
  pointer-events: none; z-index: -1;
  animation: bodas-pulse 8s ease-in-out infinite;
}

/* PACKS — Ring top-right + orb left */
.packs-bodas::before {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(240, 160, 190, 0.18);
  box-shadow: 0 0 40px rgba(192, 96, 128, 0.08);
  top: 6%; right: 3%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-ring 16s ease-in-out infinite reverse;
}

.packs-bodas::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 130, 170, 0.14), transparent 65%);
  bottom: -100px; left: -80px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 13s ease-in-out infinite alternate;
}

/* PROCESS — Diamond bottom-right */
.process-bodas::before {
  content: '';
  position: absolute;
  width: 45px; height: 45px;
  background: rgba(232, 160, 180, 0.08);
  border: 1px solid rgba(232, 160, 180, 0.20);
  border-radius: 6px;
  bottom: 8%; right: 5%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-diamond 11s ease-in-out infinite reverse;
}

.process-bodas::after {
  content: '';
  position: absolute;
  width: 300px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 74, 128, 0.16), transparent 65%);
  top: -60px; left: 10%;
  pointer-events: none; z-index: -1;
  animation: bodas-pulse 10s ease-in-out infinite alternate;
}

/* FAQ — Ambient ring */
.faq-bodas::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(232, 160, 180, 0.14);
  top: -80px; right: -60px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-ring 18s ease-in-out infinite;
}

.faq-bodas::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 96, 128, 0.12), transparent 65%);
  bottom: -40px; left: 4%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 12s ease-in-out infinite alternate;
}

/* CTA — Large orb */
.cta-bodas::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 200, 220, 0.18), transparent 65%);
  top: -100px; right: -100px;
  pointer-events: none; z-index: -1;
  animation: bodas-pulse 9s ease-in-out infinite;
}

.cta-bodas::after {
  content: '';
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(255, 200, 220, 0.20);
  bottom: 10%; left: 8%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-ring 12s ease-in-out infinite reverse;
}

.cta-bodas > * { position: relative; z-index: 1; }

/* MESAS — Diamond top-left */
.mesas-bodas::before {
  content: '';
  position: absolute;
  width: 50px; height: 50px;
  background: rgba(232, 160, 180, 0.08);
  border: 1px solid rgba(232, 160, 180, 0.20);
  border-radius: 8px;
  top: 4%; left: 3%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-diamond 10s ease-in-out infinite;
}

.mesas-bodas::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 130, 170, 0.13), transparent 65%);
  top: -80px; right: -60px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 15s ease-in-out infinite;
}

/* SOBRE MI — Orb ambient */
.sobre-mi-bodas::before {
  content: '';
  position: absolute;
  width: 400px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 96, 128, 0.15), transparent 65%);
  top: -60px; right: -100px;
  pointer-events: none; z-index: -1;
  animation: bodas-pulse 11s ease-in-out infinite;
}

.sobre-mi-bodas::after {
  content: '';
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(240, 160, 190, 0.15);
  bottom: 5%; left: 2%;
  pointer-events: none; z-index: -1;
  animation: bodas-float-ring 14s ease-in-out infinite reverse;
}

/* BLOG / PORTFOLIO — Orb bottom */
.blog-bodas::after,
.portfolio-bodas::after {
  content: '';
  position: absolute;
  width: 350px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 96, 128, 0.12), transparent 65%);
  bottom: -80px; right: -60px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 13s ease-in-out infinite alternate;
}

/* WHY / SERVICIOS */
.why-bodas::before {
  content: '';
  position: absolute;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 130, 170, 0.15), transparent 65%);
  top: -50px; left: -50px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 10s ease-in-out infinite;
}

/* ============================================================
   9. GLASS CARD SYSTEM
   All white-background cards become frosted glass panels
   ============================================================ */

/* Universal glass card */
.web-feature,
.pack-card,
.why-card,
.process-step,
.rsvp-demo,
.rsvp-mockup,
.servicio-card,
.mesa-card,
.blog-card,
.portfolio-item,
.timeline-card,
.testimonio-card,
.contacto-quick-card,
.contacto-proceso .proceso-step,
.problema-card,
.formato-card,
.cartel-demo,
.seating-mockup,
.proceso-inv-step,
.sobre-mi-avatar,
.faq-item {
  background:  var(--card-glass-bg) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border:      1px solid var(--card-glass-border) !important;
  box-shadow:  0 8px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transition:  transform var(--duration-base) var(--ease-out),
               border-color var(--duration-base) var(--ease-out),
               box-shadow var(--duration-base) var(--ease-out) !important;
  will-change: transform, box-shadow;
}

/* Glass card hover */
.web-feature:hover,
.pack-card:hover,
.why-card:hover,
.process-step:hover,
.servicio-card:hover,
.mesa-card:hover,
.blog-card:hover,
.portfolio-item:hover,
.timeline-card:hover,
.formato-card:hover,
.cartel-demo:hover,
.sobre-mi-avatar:hover {
  border-color: var(--glass-border-strong) !important;
  box-shadow:   0 16px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(192, 96, 128, 0.10), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transform:    translateY(-5px) !important;
}

/* Featured pack card — stronger glass */
.pack-card.featured {
  background:  linear-gradient(145deg, rgba(192, 96, 128, 0.15), rgba(192, 96, 128, 0.06)) !important;
  border-color: rgba(232, 160, 180, 0.30) !important;
  box-shadow:  0 12px 40px rgba(0,0,0,0.40), 0 0 60px rgba(192, 96, 128, 0.12) !important;
}

/* Mockup cards (RSVP, seating) — slightly more visible */
.rsvp-demo,
.rsvp-mockup,
.seating-mockup {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(240, 160, 190, 0.20) !important;
}

/* Mesa card top accent line stays */
.mesa-card::before {
  background: linear-gradient(90deg, var(--rose-4), var(--rose-5)) !important;
}

/* Blog card emoji header — glassmorphism gradient */
.blog-card-emoji {
  background: linear-gradient(135deg, rgba(192, 96, 128, 0.50), rgba(144, 44, 88, 0.60)) !important;
}

/* Portfolio item thumbnail */
.portfolio-item-thumb {
  background: linear-gradient(135deg, rgba(144, 44, 88, 0.70), rgba(232, 160, 180, 0.50)) !important;
}

/* Sobre mí avatar card — glass gradient */
.sobre-mi-avatar {
  background: linear-gradient(145deg, rgba(192, 96, 128, 0.22), rgba(144, 44, 88, 0.15)) !important;
}

/* Pack badge */
.pack-badge {
  background: rgba(192, 96, 128, 0.80) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* FAQ items from contacto.html */
.contacto-faqs {
  background: transparent !important;
  position: relative;
}

/* ============================================================
   10. DARK MODE TEXT — All text on transparent sections
   ============================================================ */

/* Section title text */
.bodas-content h2,
.bodas-content h3,
.bodas-content-inner h2,
.bodas-content-inner h3,
.features-bodas h2,
.why-bodas h2,
.packs-bodas h2,
.process-bodas h2,
.mesas-bodas h2,
.faq-bodas h2,
.servicios-bodas h2,
.sobre-mi-bodas h2,
.portfolio-bodas h2,
.blog-bodas h2,
.blog-bodas-header h1,
.blog-bodas-header h2,
.contacto-bodas-inner h2,
.contacto-faqs h2,
.contacto-quick h2,
.contacto-proceso h2,
.sobre-timeline h2,
.sobre-testimonios h2,
.mesas-bodas > h2,
.carteles-showcase h2,
.proceso-inv h2,
.mesas-cta-note {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 0 60px rgba(240, 160, 190, 0.20);
}

/* Section body text */
.packs-bodas .subtitle,
.mesas-bodas .subtitle,
.bodas-content-inner p,
.blog-bodas-header p,
.servicios-bodas > p,
.sobre-mi-bodas .sobre-mi-text p,
.contacto-bodas-inner > p,
.proceso-inv h2 + p,
.faq-bodas .faq-intro {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* Text inside articles / article body */
.bodas-content p,
.bodas-content ul li,
.article-bodas-inner p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.article-bodas-inner h2,
.article-bodas-inner h3 {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* Card text */
.web-feature p,
.why-card p,
.process-step p,
.formato-card p,
.cartel-demo p,
.proceso-inv-step p,
.servicio-card p,
.blog-card p,
.portfolio-item-body p,
.timeline-card p,
.testimonio-card p,
.contacto-quick-card p,
.faq-item p,
.sobre-mi-text p,
.problema-card p {
  color: rgba(255, 255, 255, 0.66) !important;
}

/* Pack card body text */
.pack-tagline { color: rgba(255, 255, 255, 0.45) !important; }
.pack-features li { color: rgba(255, 255, 255, 0.70) !important; }
.pack-features li::before { color: var(--rose-4) !important; }
.pack-cta { color: rgba(255, 255, 255, 0.45) !important; }

/* Pack feature list dividers */
.pack-features li { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }

/* Card headings (was rose-5 = dark pink → lighten for dark bg) */
.web-feature h3,
.why-card h3,
.process-step h3,
.processo-inv-step h3,
.formato-card h3,
.cartel-demo h3,
.servicio-card h3,
.mesa-card h3,
.blog-card h3,
.portfolio-item-body h3,
.faq-item h3,
.contacto-quick-card h3,
.timeline-card h3,
.sobre-mi-text h2,
.sobre-mi-text h3,
.problema-card h3 {
  color: var(--rose-3) !important;
}

/* Pack card title */
.pack-card h3 { color: var(--rose-3) !important; }
.pack-price   { color: var(--rose-4) !important; }

/* Blog card tag + link */
.blog-card-tag {
  background: rgba(192, 96, 128, 0.20) !important;
  border-color: rgba(192, 96, 128, 0.30) !important;
  color: var(--rose-3) !important;
}

.blog-card-link { color: var(--rose-4) !important; }

/* Portfolio tags */
.portfolio-tag {
  background: rgba(192, 96, 128, 0.18) !important;
  border-color: rgba(192, 96, 128, 0.28) !important;
  color: var(--rose-3) !important;
}

/* Skill tags (sobre-mi) */
.skill-tag {
  background: rgba(192, 96, 128, 0.18) !important;
  border-color: rgba(192, 96, 128, 0.30) !important;
  color: var(--rose-3) !important;
}

/* Sobre mí avatar text */
.sobre-mi-avatar h3 { color: rgba(255,255,255,0.92) !important; }
.sobre-mi-avatar p  { color: rgba(255,255,255,0.60) !important; }

/* Testimonio card */
.testimonio-card p { color: rgba(255,255,255,0.68) !important; }
.testimonio-card span { color: var(--rose-3) !important; }
.testimonio-card { border-color: rgba(192, 96, 128, 0.20) !important; }

/* Step numbers */
.process-step .step-number,
.proceso-inv-step .step-number {
  color: var(--rose-4) !important;
}

/* Servicio link */
.servicio-link { color: var(--rose-4) !important; }

/* Mesa tag */
.mesa-tag {
  background: rgba(192, 96, 128, 0.18) !important;
  border-color: rgba(192, 96, 128, 0.28) !important;
  color: var(--rose-3) !important;
}

/* RSVP mockup internal elements */
.rsvp-mockup-header { border-color: rgba(255,255,255,0.10) !important; }
.rsvp-mockup-header h3,
.rsvp-text h2 { color: rgba(255,255,255,0.90) !important; }
.rsvp-text p  { color: rgba(255,255,255,0.65) !important; }
.rsvp-feature {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(232, 160, 180, 0.25) !important;
}
.rsvp-feature h4 { color: var(--rose-3) !important; }
.rsvp-feature p  { color: rgba(255,255,255,0.60) !important; }

/* Rsvp field */
.rsvp-field .field-bar,
.rsvp-field .rf-value {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.78) !important;
}

.rsvp-field label { color: rgba(255,255,255,0.52) !important; }

.rsvp-field .field-option {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(232, 160, 180, 0.28) !important;
  color: rgba(255,255,255,0.75) !important;
}

.rsvp-field .field-option.selected,
.rsvp-choice.active {
  background: rgba(192, 96, 128, 0.60) !important;
  border-color: var(--rose-4) !important;
  color: #fff !important;
}

.rsvp-choice {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.70) !important;
}

/* Seating mockup */
.seating-mockup h3 { color: var(--rose-3) !important; font-family: Georgia, serif; }
.seating-table { background: rgba(255,255,255,0.06) !important; }
.seating-table .st-title { color: var(--rose-4) !important; }
.seating-name {
  background: rgba(192, 96, 128, 0.25) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Proceso steps inline (web-para-boda) */
.contacto-proceso { background: transparent !important; }
.proceso-step {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(192, 96, 128, 0.22) !important;
}
.proceso-step h3 { color: var(--rose-3) !important; }
.proceso-step p  { color: rgba(255,255,255,0.65) !important; }
.proceso-step .step-number {
  background: rgba(192, 96, 128, 0.70) !important;
}

/* Contacto quick / timeline */
.contacto-quick { background: transparent !important; }
.sobre-timeline { background: transparent !important; }
.sobre-testimonios { background: transparent !important; }
.timeline-year { background: rgba(192, 96, 128, 0.75) !important; }
.timeline-card { border-color: rgba(192, 96, 128, 0.18) !important; }

/* Article meta / links */
.article-meta { border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.45) !important; }
.article-meta .tag {
  background: rgba(192, 96, 128, 0.20) !important;
  border-color: rgba(192, 96, 128, 0.30) !important;
  color: var(--rose-3) !important;
}
.article-links {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(232, 160, 180, 0.25) !important;
}
.article-links h4 { color: var(--rose-3) !important; }
.article-links a  { color: var(--rose-4) !important; }

.article-cta-box {
  background: linear-gradient(135deg, rgba(192,96,128,0.65), rgba(144,44,88,0.55)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Presupuesto tabla */
.presupuesto-tabla {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.presupuesto-fila { border-color: rgba(255,255,255,0.07) !important; }
.presupuesto-fila:nth-child(odd) { background: rgba(255,255,255,0.04) !important; }
.presupuesto-fila--reserve       { background: rgba(192,96,128,0.12) !important; }
.presupuesto-partida { color: rgba(255,255,255,0.75) !important; }
.presupuesto-pct     { color: var(--rose-3) !important; }

/* ============================================================
   11. HERO BODAS-SUB — Enhanced glassmorphic hero
   ============================================================ */
.hero-bodas-sub {
  padding: 5.5rem 1.5rem 4rem !important;
  /* Remove the solid gradient, show nebula */
  background: linear-gradient(
    160deg,
    rgba(120, 30, 60, 0.55) 0%,
    rgba(90, 20, 50, 0.45) 50%,
    rgba(60, 10, 35, 0.35) 100%
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.hero-bodas-sub h1 {
  color: #fff !important;
  text-shadow: 0 2px 40px rgba(240, 130, 170, 0.30);
}

.hero-bodas-sub p {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Hero breadcrumb glass pill */
.hero-breadcrumb {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  padding: 0.25rem 0.9rem !important;
  color: rgba(255,255,255,0.60) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 1.2rem !important;
}

.hero-breadcrumb a       { color: rgba(255,255,255,0.60) !important; }
.hero-breadcrumb a:hover { color: rgba(255,255,255,0.90) !important; }

/* Hero CTA button on dark bg */
.hero-bodas-sub .btn {
  background: rgba(255,255,255,0.92) !important;
  color: var(--rose-5) !important;
  border-color: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.hero-bodas-sub .btn:hover {
  background: #fff !important;
  box-shadow: 0 8px 30px rgba(255,255,255,0.25) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   12. BTN LEGACY — Rose
   ============================================================ */
.btn,
.button.btn {
  border-color: var(--rose-4) !important;
  background-color: var(--rose-5) !important;
  color: #fff !important;
}

.btn:hover,
.button.btn:hover {
  background-color: #9a4060 !important;
  box-shadow: 0 6px 20px rgba(192, 96, 128, 0.40) !important;
  transform: translateY(-2px) !important;
}

/* CTA bodas btn — white on dark */
.cta-bodas .btn {
  background: rgba(255,255,255,0.95) !important;
  color: var(--rose-5) !important;
  border-color: rgba(255,255,255,0.60) !important;
}

.cta-bodas .btn:hover {
  background: #fff !important;
  box-shadow: 0 8px 30px rgba(255,255,255,0.20) !important;
}

/* Valor bodas button */
.valor-btn {
  background: rgba(255,255,255,0.92) !important;
  color: var(--rose-5) !important;
  border-color: rgba(255,255,255,0.50) !important;
}

/* Pack card btn + example btn */
.pack-card .btn {
  background: var(--rose-5) !important;
  border-color: rgba(232, 160, 180, 0.40) !important;
  color: #fff !important;
}

.btn-example {
  border-color: rgba(232, 160, 180, 0.30) !important;
  color: var(--rose-3) !important;
  background: rgba(255,255,255,0.04) !important;
}

.btn-example:hover {
  background: rgba(192, 96, 128, 0.30) !important;
  color: #fff !important;
  border-color: var(--rose-4) !important;
}

/* ver ejemplo buttons */
.btn-ver-ejemplo {
  border-color: rgba(232, 160, 180, 0.30) !important;
  color: var(--rose-3) !important;
  background: rgba(255,255,255,0.04) !important;
}

.btn-ver-ejemplo:hover {
  background: rgba(192, 96, 128, 0.35) !important;
  color: #fff !important;
  border-color: var(--rose-4) !important;
}

/* ============================================================
   13. CONTACT FORM — Dark glass
   ============================================================ */
.contact-form-second input:not([type="submit"]),
.contact-form-second textarea,
form > input:not([type="submit"]),
form > textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.contact-form-second input:not([type="submit"]):focus,
.contact-form-second textarea:focus {
  border-color: rgba(192, 96, 128, 0.60) !important;
  box-shadow: 0 0 0 3px rgba(192, 96, 128, 0.12) !important;
  outline: none !important;
}

.contact-form-second input::placeholder,
.contact-form-second textarea::placeholder,
form > input::placeholder,
form > textarea::placeholder {
  color: rgba(255, 255, 255, 0.30) !important;
}

.contact-form-second input[type="submit"],
form input[type="submit"] {
  background: linear-gradient(90deg, var(--rose-5), #9a4060) !important;
  color: white !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.contact-form-second input[type="submit"]:hover,
form input[type="submit"]:hover {
  background: linear-gradient(90deg, #9a4060, var(--rose-5)) !important;
  box-shadow: 0 6px 24px rgba(192, 96, 128, 0.45) !important;
  transform: translateY(-2px);
}

.contact-form h2,
.contact-title { color: rgba(255, 255, 255, 0.90) !important; }
.contact-form h3 { color: rgba(255, 255, 255, 0.72) !important; }

/* Contact details */
.contact-detail-item a:hover { color: var(--rose-4) !important; }
.contact-detail-item svg     { stroke: var(--rose-4) !important; }

/* ============================================================
   14. ACCORDION — Rose accents (glass dark)
   ============================================================ */
.accordion:hover         { border-color: rgba(192, 96, 128, 0.22) !important; }
.accordion-label:hover   { background: rgba(192, 96, 128, 0.06) !important; }

.accordion-label::after {
  border-color: rgba(192, 96, 128, 0.40) !important;
  color:        rgba(192, 96, 128, 0.85) !important;
}

input:checked + .accordion-label { background: rgba(192, 96, 128, 0.08) !important; }
input:checked + .accordion-label::after {
  border-color: rgba(192, 96, 128, 0.70) !important;
  background:   rgba(192, 96, 128, 0.14) !important;
  color:        rgba(192, 96, 128, 1) !important;
}

.accordion-content a     { color: var(--rose-4) !important; }
.faq-bodas .accordion-label { color: rgba(255, 255, 255, 0.80) !important; }

/* FAQ bodas label hover */
.faq-bodas .accordion-label:hover,
.faq-bodas input:checked + .accordion-label {
  background: rgba(192, 96, 128, 0.10) !important;
  color: #fff !important;
}

.faq-bodas .accordion-content {
  background: rgba(255,255,255,0.03) !important;
}

.faq-bodas .accordion-content p { color: rgba(255,255,255,0.65) !important; }

/* ============================================================
   15. SPOTLIGHT — Rose glow
   ============================================================ */
[data-spotlight]::after {
  background: radial-gradient(
    500px circle at var(--sp-x) var(--sp-y),
    rgba(192, 96, 128, 0.12),
    transparent 45%
  ) !important;
}

/* ============================================================
   16. VALOR BODAS — Problem cards on dark
   ============================================================ */
.valor-tag {
  background: rgba(255,255,255,0.12) !important;
  color: var(--rose-2) !important;
}

.valor-headline h2 { color: #fff !important; }
.valor-sub         { color: var(--rose-2) !important; }
.problema-card     { border-color: rgba(240, 160, 190, 0.25) !important; }
.problema-card h3  { color: #fff !important; }
.problema-card p   { color: var(--rose-2) !important; }

.valor-cierre {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.valor-cierre p        { color: var(--rose-2) !important; }
.valor-cierre p strong { color: #fff !important; }

/* ============================================================
   17. MISC ACCENT OVERRIDES
   ============================================================ */

/* Servicio card border on hover */
.servicio-card:hover { border-color: rgba(232, 160, 180, 0.30) !important; }

/* Client logo links (if present) */
.client-logo-link:hover {
  border-color: rgba(192, 96, 128, 0.28) !important;
  background: rgba(192, 96, 128, 0.08) !important;
}

/* Mesa carousel buttons */
.mesa-carousel-btn {
  border-color: rgba(232, 160, 180, 0.30) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--rose-3) !important;
}

.mesa-carousel-btn:hover {
  background: rgba(192, 96, 128, 0.40) !important;
  color: #fff !important;
  border-color: var(--rose-4) !important;
}

.mesa-carousel-dots .dot { background: rgba(255,255,255,0.18) !important; }
.mesa-carousel-dots .dot.active { background: var(--rose-4) !important; }

/* Modal de mesa */
.mesa-modal-box {
  background: rgba(28, 10, 20, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.mesa-modal-header { border-color: rgba(255,255,255,0.09) !important; }
.mesa-modal-header h3 { color: var(--rose-3) !important; }

/* Social media icons in contact */
.contact-social a { color: rgba(255,255,255,0.65) !important; }
.contact-social a:hover { color: var(--rose-3) !important; }

/* Location icon override */
.location svg path,
.location svg circle { stroke: var(--rose-3) !important; fill: none; }

/* Feature checkbox icon */
.feature-yes { color: var(--rose-4) !important; }

/* Cart icon in sobre-mi location text */
.sobre-mi-avatar p[style*="rose"] { color: var(--rose-4) !important; }

/* ============================================================
   18. PACKS-WEB (web-para-boda inline section) + inline sections
   ============================================================ */

/* Section wrapper — transparent */
.packs-web {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  isolation: isolate;
}

.packs-web::before {
  content: '';
  position: absolute;
  width: 400px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 130, 170, 0.16), transparent 65%);
  top: -80px; left: -60px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 12s ease-in-out infinite;
}

/* Glass cards inside packs-web (inline divs with background:white) */
.packs-web > div > div {
  background:  rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  box-shadow:  0 8px 32px rgba(0,0,0,0.32) !important;
}

/* Price color inside inline packs */
.packs-web > div > div h3 { color: var(--rose-3) !important; }
.packs-web > div > div p  { color: rgba(255,255,255,0.65) !important; }
.packs-web > div > div li { color: rgba(255,255,255,0.70) !important; border-color: rgba(255,255,255,0.08) !important; }

/* Inline RSVP section + process section — glass overlay */
section[style*="background:var(--rose-1)"],
section[style*="background:var(--rose-2)"],
section[style*="background: var(--rose-1)"],
section[style*="background: var(--rose-2)"] {
  background: rgba(30, 8, 20, 0.40) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ============================================================
   19. HERO BODAS (main bodas.html hero) — dark glass
   ============================================================ */
.hero-bodas {
  background: linear-gradient(
    135deg,
    rgba(120, 30, 60, 0.60) 0%,
    rgba(90, 20, 50, 0.55) 50%,
    rgba(60, 10, 35, 0.45) 100%
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  position: relative;
  isolation: isolate;
}

.hero-bodas > * { position: relative; z-index: 1; }
.hero-bodas h1  { color: #fff !important; text-shadow: 0 2px 40px rgba(240, 130, 170, 0.35); }
.hero-bodas p   { color: rgba(255,255,255,0.68) !important; }

.hero-bodas::before {
  content: '';
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 130, 170, 0.25), transparent 65%);
  top: -100px; right: -80px;
  pointer-events: none; z-index: -1;
  animation: bodas-float-orb 13s ease-in-out infinite;
}

/* ============================================================
   20. INTRO BODAS — dark text override
   ============================================================ */
.intro-bodas p { color: rgba(255,255,255,0.72) !important; }

/* ============================================================
   21. GLASS SCROLLBAR (chromium)
   ============================================================ */
.bodas-subnav::-webkit-scrollbar       { height: 3px; }
.bodas-subnav::-webkit-scrollbar-track { background: transparent; }
.bodas-subnav::-webkit-scrollbar-thumb { background: rgba(192, 96, 128, 0.40); border-radius: 2px; }

/* ============================================================
   22. SECTION DIVIDER — thin gradient lines between sections
   ============================================================ */
.features-bodas,
.packs-bodas,
.process-bodas,
.faq-bodas,
.cta-bodas,
.mesas-bodas {
  border-top:    1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}


.intro-bodas h2{
  color: white;
}