/* =============================================================
   SALON DETAIL — /salones/<slug>/
   Homologado al patrón canónico del sitio:
     · width: 95%
     · max-width: var(--container-max)  // 1920px
     · padding lateral: var(--container-padding)  // 1.5rem
   Mismo container que Hero, Header, TopBar, catálogo, directorio.
   Overrides con !important porque los <style> de cada .astro
   son scoped por Astro.
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   2 PATRONES EN /salones/*:

   PATRON A  (Tamborileiro, Zokilandia, Monkix, Madaqui):
     <div class="salon-page-wrapper">         ← ES el grid
       <main>…</main>
       <aside class="salon-aside">…</aside>
     </div>

   PATRON B  (resto, 16 salones — Kids Blue&Pink etc):
     <section class="salon-page-wrapper">     ← background fluido
       <div class="container">                ← width 95%/1920px (global)
         <div class="salon-layout">           ← ES el grid
           <main class="salon-main">…</main>
           <aside class="salon-aside">…</aside>

   ───────────────────────────────────────────────────────────── */

/* PATRON A: wrapper ES el grid + tiene su propia width constraint */
.salon-page-wrapper:not(:has(.container)){
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  gap: 3rem !important;
  width: 95% !important;
  max-width: var(--container-max, 1920px) !important;
  margin: 0 auto !important;
  padding: 4rem var(--container-padding, 1.5rem) 5rem !important;
}

/* PATRON B: wrapper es background fluido — el .container interno
   ya provee width 95%/1920px (definido globalmente en style.css).
   .salon-layout es el grid. */
.salon-page-wrapper:has(> .container){
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  padding: 0 !important;
}
.salon-page-wrapper:has(> .container) > .container > .salon-layout,
.salon-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  gap: 3rem !important;
  padding: 4rem 0 5rem !important;
  align-items: start !important;
}

@media (max-width: 1280px){
  .salon-page-wrapper:not(:has(.container)){
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 2.5rem !important;
    padding: 3rem var(--container-padding, 1.5rem) 4rem !important;
  }
  .salon-page-wrapper:has(> .container) > .container > .salon-layout,
  .salon-layout{
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 2.5rem !important;
    padding: 3rem 0 4rem !important;
  }
}

@media (max-width: 1024px){
  .salon-page-wrapper:not(:has(.container)){
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    padding: 2.5rem var(--container-padding, 1.5rem) 3rem !important;
  }
  .salon-page-wrapper:has(> .container) > .container > .salon-layout,
  .salon-layout{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2.5rem 0 3rem !important;
  }
  .salon-aside{ order: -1; }
}

@media (max-width: 640px){
  .salon-page-wrapper:not(:has(.container)){
    padding: 2rem 1.25rem 2.5rem !important;
    gap: 1.75rem !important;
  }
  .salon-page-wrapper:has(> .container) > .container > .salon-layout,
  .salon-layout{
    padding: 2rem 0 2.5rem !important;
    gap: 1.75rem !important;
  }
}

/* ── MAIN — contenedor interno, columna fluida ──────────────── */
.salon-page-wrapper > main{
  min-width: 0 !important;
}

/* Rítmica entre secciones del main */
.salon-page-wrapper main > section{
  margin-bottom: 3.5rem !important;
}
.salon-page-wrapper main > section:last-of-type{
  margin-bottom: 0 !important;
}
@media (max-width: 768px){
  .salon-page-wrapper main > section{ margin-bottom: 2.25rem !important; }
}

/* ── PROOF BAR — barra premium ──────────────────────────────── */
.proof-bar{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem 2.25rem !important;
  padding: 1.25rem 1.75rem !important;
  margin-bottom: 3rem !important;
  font-size: 0.98rem !important;
  border-radius: 14px !important;
  font-family: 'Nunito', sans-serif !important;
}
.proof-bar span{ font-weight: 600 !important; color: #374151 !important; }
.proof-bar span b{ font-weight: 800 !important; }

@media (max-width: 768px){
  .proof-bar{
    gap: 0.5rem 1.25rem !important;
    padding: 1rem 1.1rem !important;
    font-size: 0.88rem !important;
    margin-bottom: 2rem !important;
  }
}

/* ── SECTION TITLES — jerarquía editorial Fredoka ───────────── */
.section-title{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.25rem !important;
  padding-bottom: 0.75rem !important;
  line-height: 1.15 !important;
  color: #111827 !important;
}
.section-intro{
  font-family: 'Nunito', sans-serif !important;
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
  margin-bottom: 2rem !important;
  max-width: 75ch !important;
  color: #4b5563 !important;
}

@media (max-width: 1280px){
  .section-title{ font-size: 1.75rem !important; }
}
@media (max-width: 1024px){
  .section-title{ font-size: 1.55rem !important; }
  .section-intro{ font-size: 1rem !important; }
}
@media (max-width: 768px){
  .section-title{ font-size: 1.35rem !important; padding-bottom: 0.5rem !important; }
  .section-intro{ font-size: 0.95rem !important; margin-bottom: 1.5rem !important; line-height: 1.65 !important; }
}

/* ── SERVICIOS GRID — sin emojis, accent border profesional ─── */
.servicios-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
  margin-bottom: 0 !important;
}
.servicio-card{
  position: relative !important;
  padding: 1.6rem 1.6rem 1.6rem 1.75rem !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(20,20,50,0.05) !important;
  border: 1px solid #eef0f4 !important;
  border-left: 3px solid var(--salon-primary, #ff12cc) !important;
  background: #fff !important;
  display: block !important;
}
.servicio-card h3{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.3 !important;
  color: #111827 !important;
}
.servicio-card p{
  font-size: 0.93rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  color: #6b7280 !important;
}
/* Ocultar emojis decorativos en cards */
.servicio-icon{
  display: none !important;
}

@media (max-width: 768px){
  .servicios-grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 0.875rem !important; }
  .servicio-card{ padding: 1.15rem 1.25rem !important; }
}

/* ── EVENTOS GRID — chips minimalistas sin emoji ─────────────── */
.eventos-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 0.75rem !important;
  margin-bottom: 0 !important;
}
.evento-chip{
  padding: 1.1rem 1.25rem !important;
  border-radius: 12px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  position: relative !important;
  padding-left: 1.4rem !important;
}
.evento-chip::before{
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 60% !important;
  background: var(--salon-primary, #ff12cc) !important;
  border-radius: 0 3px 3px 0 !important;
}
/* Ocultar emoji decorativo */
.evento-chip span{
  display: none !important;
}

@media (max-width: 768px){
  .eventos-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 0.6rem !important; }
  .evento-chip{ padding: 0.85rem 0.85rem 0.85rem 1.1rem !important; font-size: 0.85rem !important; }
}

/* ── POR QUE — 2 col en desktop, presencia editorial ────────── */
.porque-list{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  margin-bottom: 0 !important;
}
@media (max-width: 1100px){
  .porque-list{ grid-template-columns: 1fr !important; }
}
.porque-item{
  padding: 1.2rem 1.4rem !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid #eef0f4 !important;
  box-shadow: 0 2px 8px rgba(20,20,50,0.04) !important;
}
.porque-item p{
  font-size: 0.97rem !important;
  line-height: 1.65 !important;
  color: #374151 !important;
}
.porque-item strong{ color: #111827 !important; }
.porque-check{
  width: 26px !important;
  height: 26px !important;
  font-size: 0.78rem !important;
}

/* ── OPINIONES + RATING ─────────────────────────────────────── */
.rating-summary{
  padding: 2.5rem 1.75rem !important;
  border-radius: 24px !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 12px 36px rgba(20,20,50,0.1) !important;
}
.rating-number{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 4.5rem !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.rating-stars{ font-size: 1.7rem !important; margin: 0.4rem 0 !important; }
.rating-label{ font-size: 1.02rem !important; opacity: 0.92 !important; font-weight: 600 !important; }

@media (max-width: 768px){
  .rating-summary{ padding: 1.75rem 1.25rem !important; }
  .rating-number{ font-size: 3.2rem !important; }
  .rating-stars{ font-size: 1.3rem !important; }
}

.opiniones-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1.25rem !important;
  margin-bottom: 0 !important;
}
.opinion-card{
  padding: 1.6rem !important;
  border-radius: 16px !important;
  border: 1px solid #eef0f4 !important;
  box-shadow: 0 2px 10px rgba(20,20,50,0.05) !important;
}
.opinion-stars{
  font-size: 0.95rem !important;
  margin-bottom: 0.65rem !important;
}
.opinion-text{
  font-size: 0.97rem !important;
  line-height: 1.7 !important;
  margin: 0 0 0.85rem !important;
  color: #374151 !important;
}
.opinion-author{
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
}

@media (max-width: 768px){
  .opiniones-grid{ grid-template-columns: 1fr !important; }
  .opinion-card{ padding: 1.25rem !important; }
}

/* ── FAQ — 2 col en pantallas grandes, mejor lectura ────────── */
.faq-list{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.85rem !important;
  margin-bottom: 0 !important;
}
@media (max-width: 1100px){
  .faq-list{ grid-template-columns: 1fr !important; }
}
.faq-item{
  padding: 1.35rem 1.5rem !important;
  border-radius: 14px !important;
  border: 1px solid #eef0f4 !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(20,20,50,0.04) !important;
}
.faq-q{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.55rem !important;
  line-height: 1.35 !important;
  color: #111827 !important;
}
.faq-a{
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
  margin: 0 !important;
}

@media (max-width: 768px){
  .faq-item{ padding: 1.1rem 1.2rem !important; }
  .faq-q{ font-size: 0.98rem !important; }
  .faq-a{ font-size: 0.9rem !important; }
}

/* ── INFLAPY CTA + CONTACT — bloques con presencia premium ──── */
.inflapy-cta-block,
.contact-section{
  padding: 3rem 2rem !important;
  border-radius: 24px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 12px 36px rgba(20,20,50,0.1) !important;
}
.inflapy-cta-block h2,
.contact-section h2{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.75rem !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}
.inflapy-cta-block p,
.contact-section p{
  font-family: 'Nunito', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  max-width: 62ch !important;
  margin: 0 auto 1.5rem !important;
}
.btn-cta-white,
.btn-contact{
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  padding: 0.95rem 2.1rem !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}

@media (max-width: 1024px){
  .inflapy-cta-block,
  .contact-section{ padding: 2.25rem 1.5rem !important; border-radius: 20px !important; }
  .inflapy-cta-block h2,
  .contact-section h2{ font-size: 1.4rem !important; }
  .inflapy-cta-block p,
  .contact-section p{ font-size: 0.98rem !important; }
}

@media (max-width: 640px){
  .inflapy-cta-block,
  .contact-section{ padding: 1.75rem 1.25rem !important; border-radius: 18px !important; }
  .inflapy-cta-block h2,
  .contact-section h2{ font-size: 1.2rem !important; }
  .btn-cta-white,
  .btn-contact{ font-size: 0.95rem !important; padding: 0.85rem 1.75rem !important; width: 100%; max-width: 320px; }
}

/* ── ASIDE — sticky en desktop, tipografía consistente ──────── */
.salon-aside{
  position: sticky !important;
  top: 1.5rem !important;
  align-self: start !important;
  min-width: 0 !important;
}
@media (max-width: 1024px){
  .salon-aside{ position: static !important; top: auto !important; }
}

.aside-card{
  padding: 1.5rem 1.6rem !important;
  border-radius: 18px !important;
  margin-bottom: 1.25rem !important;
  border: 1px solid #eef0f4 !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(20,20,50,0.04) !important;
}
.aside-card-title{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  margin: 0 0 1.1rem !important;
  letter-spacing: -0.005em !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--salon-primary, #ff12cc) !important;
  display: block !important;
}
/* Ocultar emoji wrapper en aside titles — usamos border-bottom como accent */
.aside-icon-wrap{
  display: none !important;
}

.ficha-row{
  font-size: 0.9rem !important;
  padding-bottom: 0.65rem !important;
}

.aside-promo{
  padding: 1.6rem 1.5rem !important;
  border-radius: 18px !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 10px rgba(20,20,50,0.04) !important;
  text-align: left !important;
  border-top: 3px solid var(--salon-primary, #ff12cc) !important;
}
/* Ocultar emoji decorativo — el border-top hace de accent */
.aside-promo-icon{ display: none !important; }
.aside-promo h3{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.55rem !important;
  color: #111827 !important;
}
.aside-promo p{ font-size: 0.9rem !important; line-height: 1.6 !important; margin: 0 0 1.1rem !important; color: #4b5563 !important; }
.btn-aside-promo{
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.92rem !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
}

.salon-link{
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.92rem !important;
  padding: 0.55rem 0 !important;
  font-weight: 600 !important;
}

/* ── GALERIA — full ancho del main, sin animaciones ─────────── */
.salon-galeria{ margin-bottom: 0 !important; }

.galeria-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: 320px 320px 240px !important;
  gap: 10px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}
.galeria-item{
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #e8e8e8 !important;
  position: relative !important;
}
.galeria-item--hero{
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
.galeria-item img{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  display: block !important;
  transition: none !important;
  transform: none !important;
}
.galeria-item:hover img{ transform: none !important; }

@media (max-width: 1440px){
  .galeria-grid{ grid-template-rows: 280px 280px 220px !important; }
}
@media (max-width: 1280px){
  .galeria-grid{ grid-template-rows: 240px 240px 190px !important; }
}
@media (max-width: 1024px){
  .galeria-grid{ grid-template-rows: 220px 220px 170px !important; }
}
@media (max-width: 768px){
  .galeria-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: 200px 150px 150px !important;
    gap: 6px !important;
  }
  .galeria-item--hero{ grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 480px){
  .galeria-grid{
    grid-template-rows: 180px 130px 130px !important;
  }
}

/* ── COMPONENTES ÚNICOS — graduación, timeline sin emojis ─── */
.graduation-program-card{
  border-radius: 20px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 8px 28px rgba(20,20,50,0.07) !important;
}
.gpc-header{ padding: 1.5rem 1.8rem !important; gap: 1rem !important; }
.gpc-header-icon{ display: none !important; }
.gpc-header-title{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.gpc-header-label{ font-size: 0.78rem !important; letter-spacing: 0.1em !important; }
.gpc-timeline{ padding: 2rem 1.8rem 1.6rem !important; }
/* Ocultar emojis de pasos — el numerito ya guía el orden */
.gpc-step-emoji{ display: none !important; }
.gpc-step-title{
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.35rem !important;
}
.gpc-step-desc{ font-size: 0.95rem !important; line-height: 1.65 !important; color: #4b5563 !important; }
.gpc-circle{
  width: 44px !important;
  height: 44px !important;
  font-size: 1.05rem !important;
}
.gpc-footer{
  padding: 0.95rem 1.5rem !important;
  font-size: 0.88rem !important;
}
/* Ocultar emoji decorativo en footer si lo hay */
.gpc-footer > :first-child:not(span){ /* placeholder */ }

@media (max-width: 768px){
  .gpc-header{ padding: 1.2rem 1.25rem !important; }
  .gpc-header-title{ font-size: 1.1rem !important; }
  .gpc-timeline{ padding: 1.4rem 1.25rem !important; }
}

/* ── ANTI-ANIMACIÓN en cards e imágenes (regla del proyecto) ── */
.servicio-card,
.evento-chip,
.porque-item,
.opinion-card,
.faq-item,
.aside-card,
.aside-promo,
.salon-card,
.galeria-item,
.galeria-item img{
  transition: none !important;
  transform: none !important;
  animation: none !important;
}
.servicio-card:hover,
.evento-chip:hover,
.porque-item:hover,
.opinion-card:hover,
.faq-item:hover,
.aside-card:hover,
.aside-promo:hover,
.galeria-item:hover,
.galeria-item:hover img{
  transform: none !important;
}

/* ── Solo botones llevan transición + hover ─────────────────── */
.btn-cta-white,
.btn-contact,
.btn-aside-promo{
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.15s !important;
}
.btn-cta-white:hover,
.btn-contact:hover,
.btn-aside-promo:hover{
  opacity: 0.94 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15) !important;
}