/* ponytail: wedding-cards v3 — premium cards section on home.
   Hardened against:
   - 1-year CSS cache (added ?v=2026-09-15-v2 to the <link> tag in blade)
   - Hero ballroom image bleeding through transparent cards (now solid white)
   - Low-contrast text on warm background (now WCAG AAA: #2c2c54 on #fff = 14:1)
   - Inline styles elsewhere overriding this (now uses !important on background) */

.wc-section { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.wc-section-title {
  text-align: center;
  color: #1a1a2e;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.15;
}
.wc-section-subtitle {
  text-align: center;
  color: #5a5a7a;
  font-size: 16px;
  margin: 0 0 32px;
  line-height: 1.4;
}
.wc-featured { margin-bottom: 24px; }
.wc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ponytail: solid white background with !important so no parent can bleed through.
   Text contrast WCAG AAA: #2c2c54 (navy 14:1 on white). */
.wc-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: #2c2c54 !important;
  position: relative;
  background-clip: padding-box;
}
.wc-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px rgba(124,0,196,0.22) !important;
}

.wc-image-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #1a1a2e !important;
  display: block !important;
}
.wc-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}
.wc-card:hover .wc-image-wrap img { transform: scale(1.04) !important; }
.wc-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}

.wc-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  z-index: 2 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}
.wc-badge.purple { background: rgba(124, 0, 196, 0.92); }
.wc-badge.orange { background: rgba(204, 112, 0, 0.92); }
.wc-badge.green  { background: rgba(58, 138, 58, 0.92); }

.wc-price {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  background: rgba(0,0,0,0.78) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px !important;
  border-radius: 100px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  z-index: 2 !important;
  letter-spacing: 0.3px !important;
}

/* ponytail: solid white card body with explicit padding. Title color navy #2c2c54
   for 14:1 contrast on white background — WCAG AAA for normal text. */
.wc-body {
  background: #ffffff !important;
  padding: 24px 26px 26px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.wc-body h3 {
  margin: 0 0 10px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  line-height: 1.25 !important;
}
.wc-desc {
  font-size: 14px !important;
  color: #4a4a6a !important;
  line-height: 1.55 !important;
  margin: 0 0 18px !important;
  flex: 1 !important;
}
/* ponytail: list items use #2c2c54 (dark navy) for high contrast on white.
   Checkmark in brand purple #7c00c4. */
.wc-features {
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  color: #2c2c54 !important;
  line-height: 1.5 !important;
}
.wc-features li {
  padding: 5px 0 5px 24px !important;
  position: relative !important;
}
.wc-features li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: #7c00c4 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.wc-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c00c4, #4d007a) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  align-self: flex-start !important;
}
.wc-cta:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 6px 16px rgba(124,0,196,0.4) !important;
}
.wc-cta .wc-arrow { margin-left: 8px !important; transition: transform 0.2s !important; }
.wc-cta:hover .wc-arrow { transform: translateX(4px) !important; }

.wc-featured-accent { border: 2px solid #7c00c4 !important; }
.wc-featured-accent .wc-image-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7c00c4, #b95fff, #7c00c4);
  z-index: 3;
}

@media (max-width: 720px) {
  .wc-row-2 { grid-template-columns: 1fr !important; }
  .wc-section-title { font-size: 26px !important; }
}

/* ponytail: professors fallback grid — v2 with CIRCULAR photo portraits.
   User feedback: "ponlos en circulos, dentro la imagen. no tiene diseño nada".
   Replaces the previous square cards (which looked like vertical strips
   in a 5-col grid). Hallmark rules: circular crop, hover lift, object-fit
   cover, NO italic headers. */
.prof-preview-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 32px 24px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.prof-preview-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 140px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.prof-preview-card:hover {
  transform: translateY(-4px) !important;
}
.prof-preview-card .prof-img-wrap {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  background: #1a1a2e !important;
}
.prof-preview-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.prof-preview-card .label {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}
@media (max-width: 720px) {
  .prof-preview-grid { gap: 24px 16px !important; }
  .prof-preview-card { width: 110px !important; }
  .prof-preview-card .prof-img-wrap { width: 90px !important; height: 90px !important; }
}

/* ponytail: Hora Loca package cards v2 — structural hierarchy, not flat
   equal cards. Card 1 = simple outline CTA, card 2 = featured with
   scale up + colored border + "Más popular" badge + solid gradient CTA.
   Per hallmark rules: no italic headers, mobile-first responsive,
   locked color tokens (--brand #7c00c4, navy #1a1a2e), icon list
   with fa-solid checks. */
.hl-package-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  border: 2px solid transparent !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  height: 100% !important;
}
.hl-package-card--featured {
  border-color: #7c00c4 !important;
  transform: scale(1.04) !important;
  box-shadow: 0 12px 32px rgba(124, 0, 196, 0.18) !important;
  z-index: 2 !important;
}
.hl-package-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #7c00c4, #4d007a) !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 12px rgba(124, 0, 196, 0.3) !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}
.hl-package-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  color: #1a1a2e !important;
}
.hl-package-desc {
  font-size: 14px !important;
  color: #5a5a7a !important;
  margin: 0 0 20px !important;
  line-height: 1.5 !important;
}
.hl-package-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #eeeeee !important;
  border-bottom: 1px solid #eeeeee !important;
}
.hl-package-price {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}
.hl-package-price-suffix {
  font-size: 13px !important;
  color: #6c757d !important;
}
.hl-package-savings {
  display: inline-block !important;
  background: #d4edda !important;
  color: #155724 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 100px !important;
  margin-bottom: 20px !important;
}
.hl-package-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  text-align: left !important;
}
.hl-package-features li {
  padding: 8px 0 !important;
  font-size: 14px !important;
  color: #2c2c54 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  line-height: 1.5 !important;
}
.hl-package-features li i {
  color: #7c00c4 !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
.hl-package-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
  margin-top: auto !important;
}
.hl-cta-outline {
  border: 2px solid #7c00c4 !important;
  color: #7c00c4 !important;
  background: #ffffff !important;
}
.hl-cta-outline:hover {
  background: #7c00c4 !important;
  color: #ffffff !important;
}
.hl-cta-solid {
  background: linear-gradient(135deg, #7c00c4, #4d007a) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(124, 0, 196, 0.3) !important;
}
.hl-cta-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(124, 0, 196, 0.4) !important;
}
.hl-cta-icon { font-size: 18px !important; }
@media (max-width: 720px) {
  .hl-package-card--featured { transform: none !important; }
}
}

/* ponytail: 3-column row for the "Qué hacemos" cards (Clases / Bodas / Quince).
   Hallmark rule: explicit responsive grid (not inline). On mobile collapses
   to 1 col, on tablet 2 col, on desktop 3 col. Use minmax(0, 1fr) so
   long titles don't force horizontal scroll (Hallmark gate 50). */
.wc-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  .wc-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .wc-row-3 { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 480px) {
  .wc-section-title { font-size: 22px !important; }
  .wc-body h3 { font-size: 18px !important; }
  .wc-body { padding: 18px !important; }
}