/* ==========================================================================
   KIREI ESTHETIC - REFINAMIENTO VISUAL Y DINAMISMO (DESKTOP & MÓVIL)
   Paleta estrictamente original: Palo de Rosa (#DEBBB9), Terracota, Arena Cálido, Crema.
   Cero cambio de textos ni contenidos.
   ========================================================================== */

:root {
  /* Palo de rosa oficial de la marca (handle de cabinas y brand-button) */
  --kirei-palo-rosa: #debbb9;
  --kirei-palo-rosa-light: #eedbd9;
  --kirei-palo-rosa-deep: #cca3a1;
  --kirei-palo-rosa-border: #c49694;
  
  /* Terracota acento y detalles */
  --kirei-terracotta: hsl(15, 35%, 55%);
  --kirei-terracotta-dark: hsl(15, 42%, 35%);
  --kirei-terracotta-hover: hsl(15, 38%, 48%);
  --kirei-terracotta-glow: hsla(15, 35%, 55%, 0.16);
  --kirei-terracotta-subtle: hsla(15, 35%, 55%, 0.08);
  --kirei-terracotta-border: hsla(15, 35%, 55%, 0.28);
  
  /* Fondos cálidos y arenas */
  --kirei-cream-light: hsl(40, 20%, 98%);
  --kirei-sand-soft: hsl(40, 20%, 94%);
  --kirei-sand-warm: hsl(38, 22%, 92%);
  --kirei-sand-border: hsl(30, 15%, 88%);
  
  /* Superficie de tarjetas */
  --kirei-card-top: hsl(40, 25%, 99%);
  --kirei-card-bottom: hsl(38, 20%, 95%);
  
  /* Tipografía */
  --kirei-text-strong: hsl(20, 15%, 20%);
  --kirei-text-muted: hsl(20, 10%, 42%);
}

/* --------------------------------------------------------------------------
   1. SECCIONES PALO DE ROSA (Color insignia para erradicar la palidez)
      Al menos una sección protagonista por página y subpágina:
      • Landing (/): Sección "Nuestros Tratamientos" (.bg-card\/50)
      • Faciales (/faciales): Sección "Terapias Manuales" (.bg-card)
      • Corporales (/corporales): Sección "Procedimientos Manuales" (.bg-primary\/5)
      • Capilar y Sueros (/capilar-sueros): Sección "Sueroterapia" (.bg-card)
      • Sobre Nosotros (/nosotros): Sección "Lo que nos distingue" (.bg-primary\/5)
   -------------------------------------------------------------------------- */

/* Landing: Nuestros Tratamientos */
section.bg-card\/50 {
  background: linear-gradient(180deg, #edd9d8 0%, #debbb9 100%) !important;
  border-top: 1px solid var(--kirei-palo-rosa-border) !important;
  border-bottom: 1px solid var(--kirei-palo-rosa-border) !important;
  position: relative;
}

/* Faciales: Terapias Manuales & Capilar-Sueros: Sueroterapia */
section.bg-card.py-24 {
  background: linear-gradient(180deg, #edd9d8 0%, #debbb9 100%) !important;
  border-top: 1px solid var(--kirei-palo-rosa-border) !important;
  border-bottom: 1px solid var(--kirei-palo-rosa-border) !important;
  position: relative;
}

/* Corporales: Procedimientos Manuales & Nosotros: Lo que nos distingue */
section.bg-primary\/5 {
  background: linear-gradient(180deg, #edd9d8 0%, #debbb9 100%) !important;
  border-top: 1px solid var(--kirei-palo-rosa-border) !important;
  border-bottom: 1px solid var(--kirei-palo-rosa-border) !important;
  position: relative;
}

/* Contraste tipográfico perfecto dentro de las secciones Palo de Rosa */
section.bg-card\/50 h2,
section.bg-card.py-24 h2,
section.bg-primary\/5 h2 {
  color: hsl(20, 18%, 15%) !important;
  font-weight: 700;
}

section.bg-card\/50 h3.text-primary,
section.bg-card.py-24 h3.text-primary,
section.bg-primary\/5 h3.text-primary {
  color: var(--kirei-terracotta-dark) !important;
  font-weight: 700;
  letter-spacing: 0.22em;
}

section.bg-card\/50 p.text-muted-foreground,
section.bg-card.py-24 p.text-muted-foreground,
section.bg-primary\/5 p.text-muted-foreground {
  color: hsl(20, 15%, 26%) !important;
}

/* --------------------------------------------------------------------------
   2. OTRAS SECCIONES (Alternancia cálida en tonos arena y crema)
   -------------------------------------------------------------------------- */

/* Sección de contacto en Landing */
#contacto.bg-card {
  background: linear-gradient(180deg, hsl(40, 20%, 97%) 0%, hsl(37, 22%, 93%) 100%) !important;
  border-top: 1px solid var(--kirei-sand-border) !important;
  border-bottom: 1px solid var(--kirei-sand-border) !important;
}

/* Sección secundaria (Testimonios en Nosotros o subpáginas) */
section.bg-secondary\/30 {
  background: linear-gradient(180deg, hsl(40, 20%, 95%) 0%, hsl(36, 22%, 92%) 100%) !important;
  border-top: 1px solid var(--kirei-sand-border) !important;
  border-bottom: 1px solid var(--kirei-sand-border) !important;
  position: relative;
}

/* Sección de cabinas (comparación antes/después) */
#cabinas {
  background: linear-gradient(180deg, hsl(40, 20%, 98%) 0%, hsl(38, 22%, 93%) 50%, hsl(40, 20% 97%) 100%) !important;
  border-top: 1px solid var(--kirei-sand-border);
  border-bottom: 1px solid var(--kirei-sand-border);
  position: relative;
}

#cabinas .text-center.mb-16 p {
  background: hsla(40, 25%, 99%, 0.9);
  border: 1px solid var(--kirei-terracotta-border);
  border-radius: 9999px;
  padding: 0.85rem 2rem;
  display: inline-block;
  box-shadow: 0 4px 15px -4px hsla(20, 15%, 20%, 0.06);
  backdrop-filter: blur(6px);
  color: var(--kirei-text-strong) !important;
}

/* --------------------------------------------------------------------------
   3. TRATAMIENTO DE PÁRRAFOS Y BLOQUES DE TEXTO CONTINUO
   -------------------------------------------------------------------------- */

/* Párrafo central en "El Arte del Bienestar" (Landing) */
section:has(> .container .ornament-line) {
  background: radial-gradient(ellipse at 50% 40%, hsla(15, 35%, 55%, 0.08) 0%, transparent 70%);
}

section:has(> .container .ornament-line) p.max-w-3xl,
section > .container.text-center > p.max-w-3xl {
  background: linear-gradient(145deg, var(--kirei-card-top) 0%, var(--kirei-card-bottom) 100%);
  border: 1px solid var(--kirei-terracotta-border);
  border-radius: 1.5rem;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 10px 30px -10px hsla(20, 15%, 20%, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  color: var(--kirei-text-strong) !important;
  line-height: 1.8;
  margin-top: 1.5rem;
}

section:has(> .container .ornament-line) p.max-w-3xl::before,
section > .container.text-center > p.max-w-3xl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--kirei-terracotta);
  border-radius: 9999px;
}

/* Párrafo Manifiesto "Sobre Nosotros" */
.text-center.max-w-4xl.mx-auto.mb-16 p {
  background: linear-gradient(135deg, var(--kirei-card-top) 0%, var(--kirei-sand-soft) 100%);
  border: 1px solid var(--kirei-terracotta-border);
  border-radius: 1.5rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 8px 25px -8px hsla(20, 15%, 20%, 0.06);
  color: var(--kirei-text-strong) !important;
  position: relative;
  line-height: 1.85;
}

.text-center.max-w-4xl.mx-auto.mb-16 p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 3px;
  background: var(--kirei-terracotta);
  border-radius: 9999px;
}

/* Tarjetas editoriales para "Nuestra Visión" y "Calidad y Profesionalismo" (/nosotros) */
.grid.grid-cols-1.md\:grid-cols-2 > div:first-child h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem !important;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

.grid.grid-cols-1.md\:grid-cols-2 > div:first-child p {
  background: linear-gradient(145deg, var(--kirei-card-top) 0%, var(--kirei-sand-soft) 100%);
  border: 1px solid var(--kirei-sand-border);
  border-left: 3.5px solid var(--kirei-terracotta) !important;
  border-radius: 1rem;
  padding: 1.6rem 1.85rem;
  box-shadow: 0 4px 16px -4px hsla(20, 15%, 20%, 0.05);
  margin-bottom: 2rem !important;
  color: var(--kirei-text-strong) !important;
  line-height: 1.75;
}

/* Enmarcado estético de las dos imágenes en /nosotros */
.grid.grid-cols-2.gap-4 img {
  border: 1px solid var(--kirei-sand-border);
  box-shadow: 0 12px 28px -8px hsla(20, 15%, 20%, 0.16) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.grid.grid-cols-2.gap-4 img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 36px -10px var(--kirei-terracotta-glow) !important;
}

/* --------------------------------------------------------------------------
   4. TRANSFORMACIÓN DE PROTOCOLOS Y LISTAS EN TARJETAS INTERACTIVAS
      (/faciales, /corporales, /capilar-sueros)
   -------------------------------------------------------------------------- */

/* Filas de terapias manuales y corporales convertidas en tarjetas elevadas */
.space-y-0 > .group.relative.border-t {
  border-top: none !important;
  margin-bottom: 1.35rem !important;
  border-radius: 1.25rem !important;
  background: linear-gradient(145deg, var(--kirei-card-top) 0%, var(--kirei-card-bottom) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  padding: 1.85rem 2rem !important;
  box-shadow: 0 6px 20px -4px hsla(20, 15%, 20%, 0.07);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.space-y-0 > .group.relative.border-t::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--kirei-terracotta-border);
  transition: all 0.35s ease;
}

.space-y-0 > .group.relative.border-t:hover {
  transform: translateY(-3px);
  border-color: var(--kirei-terracotta-border) !important;
  background: linear-gradient(145deg, var(--kirei-card-top) 0%, #f7ebe9 100%) !important;
  box-shadow: 0 12px 30px -6px var(--kirei-terracotta-glow), 0 0 0 1px var(--kirei-terracotta-border) !important;
}

.space-y-0 > .group.relative.border-t:hover::before {
  width: 6px;
  background: var(--kirei-terracotta);
}

.space-y-0 > .group.relative.border-t h3 {
  letter-spacing: -0.01em;
  font-weight: 600;
}

.space-y-0 > .group.relative.border-t p {
  color: var(--kirei-text-strong) !important;
  line-height: 1.7;
}

/* Badges / Píldoras estéticas para "Beneficio: ..." */
.space-y-4 p.text-primary.tracking-wide.uppercase,
p[class*="text-primary"][class*="uppercase"] {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem !important;
  background: hsla(15, 35%, 55%, 0.12) !important;
  border: 1px solid var(--kirei-terracotta-border) !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  color: hsl(15, 42%, 35%) !important;
  margin-top: 0.75rem !important;
  box-shadow: 0 2px 8px -2px hsla(15, 35%, 55%, 0.15);
}

/* Items en Tecnología Avanzada y Aparatología (grid de dos columnas) */
.md\:w-2\/3.grid > div.flex.gap-4.items-start,
.grid-cols-1.sm\:grid-cols-2 > div.flex.gap-4.items-start {
  background: linear-gradient(150deg, var(--kirei-card-top) 0%, var(--kirei-card-bottom) 100%);
  border: 1px solid var(--kirei-sand-border);
  border-radius: 1rem;
  padding: 1.35rem 1.35rem;
  box-shadow: 0 4px 14px -4px hsla(20, 15%, 20%, 0.05);
  transition: all 0.3s ease;
}

.md\:w-2\/3.grid > div.flex.gap-4.items-start:hover,
.grid-cols-1.sm\:grid-cols-2 > div.flex.gap-4.items-start:hover {
  transform: translateY(-3px);
  border-color: var(--kirei-terracotta-border);
  box-shadow: 0 8px 22px -6px var(--kirei-terracotta-glow);
}

/* Salud Capilar (/capilar-sueros) */
.space-y-12 > div {
  background: linear-gradient(150deg, var(--kirei-card-top) 0%, var(--kirei-card-bottom) 100%);
  border: 1px solid var(--kirei-sand-border);
  border-left: 3.5px solid var(--kirei-terracotta) !important;
  border-radius: 1.15rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 16px -4px hsla(20, 15%, 20%, 0.05);
  transition: all 0.3s ease;
}

.space-y-12 > div:hover {
  transform: translateY(-3px);
  border-color: var(--kirei-terracotta-border);
  box-shadow: 0 10px 24px -6px var(--kirei-terracotta-glow);
}

/* Grid de Sueroterapias Personalizadas (/capilar-sueros) */
.grid-cols-1.sm\:grid-cols-2 > div.border-b {
  border-bottom: none !important;
  background: linear-gradient(150deg, var(--kirei-card-top) 0%, var(--kirei-card-bottom) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 1.15rem !important;
  padding: 1.6rem 1.75rem !important;
  box-shadow: 0 4px 16px -4px hsla(20, 15%, 20%, 0.06);
  transition: all 0.35s ease !important;
  position: relative;
}

.grid-cols-1.sm\:grid-cols-2 > div.border-b:hover {
  transform: translateY(-4px);
  border-color: var(--kirei-terracotta-border) !important;
  box-shadow: 0 10px 24px -6px var(--kirei-terracotta-glow) !important;
}

/* --------------------------------------------------------------------------
   5. TARJETAS DE SERVICIOS EN LANDING (4 Especialidades)
   -------------------------------------------------------------------------- */

.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a > div {
  border-radius: 1.25rem !important;
  background: linear-gradient(160deg, var(--kirei-card-top) 0%, var(--kirei-card-bottom) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 6px 20px -6px hsla(20, 15%, 20%, 0.08);
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a:hover > div {
  transform: translateY(-6px);
  border-color: var(--kirei-terracotta-border) !important;
  box-shadow: 0 16px 36px -10px var(--kirei-terracotta-glow), 0 0 0 1px var(--kirei-terracotta-border) !important;
}

.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a > div > svg.text-primary,
.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a > div > svg:first-of-type {
  padding: 0.65rem;
  background: hsla(15, 35%, 55%, 0.1);
  border-radius: 0.85rem;
  box-sizing: content-box;
  border: 1px solid var(--kirei-terracotta-border);
  transition: all 0.3s ease;
}

.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a:hover > div > svg.text-primary {
  background: var(--kirei-terracotta);
  color: #ffffff !important;
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   6. REFINAMIENTO DE ELEMENTOS PREVIAMENTE "BLANCOS PLANOS"
   -------------------------------------------------------------------------- */

/* Tarjetas "Lo que nos distingue" (/nosotros sobre fondo palo de rosa) */
.grid-cols-1.md\:grid-cols-3 > div.bg-white {
  background: linear-gradient(165deg, var(--kirei-card-top) 0%, var(--kirei-sand-soft) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-top: 3.5px solid var(--kirei-terracotta) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 8px 24px -8px hsla(20, 15%, 20%, 0.09) !important;
  transition: all 0.35s ease !important;
}

.grid-cols-1.md\:grid-cols-3 > div.bg-white:hover {
  transform: translateY(-5px);
  border-color: var(--kirei-terracotta-border) !important;
  box-shadow: 0 16px 34px -10px var(--kirei-terracotta-glow) !important;
}

/* Tarjetas de Testimonios (Landing / Nosotros) */
.grid-cols-1.md\:grid-cols-3 > div.bg-white:has(.fill-current),
div.bg-white.p-8.rounded-3xl.shadow-sm.relative {
  background: linear-gradient(160deg, var(--kirei-card-top) 0%, var(--kirei-sand-soft) 100%) !important;
  border: 1px solid var(--kirei-sand-border) !important;
  border-top: 3.5px solid var(--kirei-terracotta) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 8px 22px -8px hsla(20, 15%, 20%, 0.07) !important;
  transition: all 0.35s ease !important;
}

div.bg-white.p-8.rounded-3xl.shadow-sm.relative:hover {
  transform: translateY(-4px);
  border-color: var(--kirei-terracotta-border) !important;
  box-shadow: 0 14px 30px -10px var(--kirei-terracotta-glow) !important;
}

/* Tarjeta "Dirección Profesional" (/nosotros) */
.max-w-4xl.mx-auto.bg-white.border.border-border.rounded-\[3rem\] {
  background: linear-gradient(150deg, var(--kirei-card-top) 0%, hsl(38, 22%, 94%) 100%) !important;
  border: 1px solid var(--kirei-terracotta-border) !important;
  box-shadow: 0 16px 40px -12px hsla(20, 15%, 20%, 0.09) !important;
}

/* Footer elegante */
footer.bg-white,
div.bg-white.pt-16.pb-8.border-t.border-border {
  background: linear-gradient(180deg, hsl(40, 20%, 97%) 0%, hsl(37, 22%, 93%) 100%) !important;
  border-top: 1px solid var(--kirei-sand-border) !important;
}

/* Badges de métodos de pago en el footer */
footer [class*="border-border"][class*="bg-white"],
.border.border-border.bg-white.rounded-lg {
  background: var(--kirei-card-top) !important;
  border-color: var(--kirei-sand-border) !important;
  box-shadow: 0 2px 6px -2px hsla(20, 15%, 20%, 0.06);
}

/* --------------------------------------------------------------------------
   7. OPTIMIZACIÓN RESPONSIVE MÓVIL
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  section:has(> .container .ornament-line) p.max-w-3xl,
  section > .container.text-center > p.max-w-3xl {
    padding: 1.6rem 1.35rem;
    font-size: 1.05rem;
  }
  
  .text-center.max-w-4xl.mx-auto.mb-16 p {
    padding: 1.5rem 1.25rem;
    font-size: 1rem;
  }
  
  .grid.grid-cols-1.md\:grid-cols-2 > div:first-child p {
    padding: 1.35rem 1.25rem;
    font-size: 0.95rem;
  }
  
  .space-y-0 > .group.relative.border-t {
    padding: 1.5rem 1.25rem !important;
    margin-bottom: 1rem !important;
  }
  
  #cabinas .text-center.mb-16 p {
    border-radius: 1.25rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
  }
  
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a > div {
    padding: 1.75rem 1.5rem !important;
  }
}