/* =========================================================
   LONGEVITY CLINIC — tratamientos.css
   Estilos exclusivos para las páginas de detalle de cada
   tratamiento. Complementa styles.css sin modificarlo.
   ========================================================= */


/* =========================================================
   HEADER — interior pages override
   Forces the dark background from page load (no transparent start).
   ========================================================= */
.header {
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--border-thin);
  padding: var(--space-2) 0;
}
.header.is-scrolled {
  padding: var(--space-2) 0;
}


/* =========================================================
   BREADCRUMB — glassmorphism pill floating over hero image
   Out of normal flow so it doesn't block the image.
   ========================================================= */
.breadcrumb {
  position: absolute;
  top: 56px;           /* sits just below the fixed header */
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border: none;
  padding: var(--space-5) 0;
  pointer-events: none;
}
.breadcrumb__list {
  display: inline-flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0.45rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(8, 8, 16, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(201,168,76,0.08);
  pointer-events: all;
}
.breadcrumb__list li {
  display: flex;
  align-items: center;
}
.breadcrumb__list a {
  color: rgba(250,250,250,0.5);
  text-decoration: none;
  padding: 0 0.35rem;
  transition: color var(--transition-base);
}
.breadcrumb__list a:hover {
  color: var(--color-gold);
}
.breadcrumb__list li:last-child {
  color: var(--color-gold);
  padding: 0 0.35rem;
}
.breadcrumb__sep {
  color: rgba(201,168,76,0.4);
  font-size: 0.6rem;
  line-height: 1;
}


/* =========================================================
   HERO — VARIANTE INTERIOR (más corto que el homepage)
   ========================================================= */
.hero--interior {
  height: 65vh;
  min-height: 520px;
  max-height: 780px;
  margin-top: 56px; /* breadcrumb is absolute/out-of-flow, hero clears the header */
}
/* Ocultar elementos exclusivos del hero de inicio */
.hero--interior .hero__brand-mark,
.hero--interior .hero__scroll-indicator,
.hero--interior #particleCanvas {
  display: none;
}
/* Padding-top extra para centrar el contenido visualmente en el hero */
.hero--interior .hero__content {
  padding-top: 0;
}
/* Ajustar tamaño de headline para páginas interiores */
.hero--interior .hero__headline {
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  margin-bottom: var(--space-4);
}
.hero--interior .hero__eyebrow {
  margin-bottom: var(--space-4);
}
.hero--interior .hero__subtitle {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  max-width: 600px;
}


/* =========================================================
   STATS ROW (datos rápidos del tratamiento)
   ========================================================= */
.trat-stats {
  background: var(--color-black-mid);
  padding: var(--space-12) 0;
  border-bottom: var(--border-thin);
}
.trat-stats__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.trat-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  min-width: 120px;
}
.trat-stats__value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.trat-stats__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.50);
}
.trat-stats__divider {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.35), transparent);
  flex-shrink: 0;
}


/* =========================================================
   DESCRIPCIÓN / ¿EN QUÉ CONSISTE?
   ========================================================= */
.trat-desc {
  padding: var(--space-32) 0;
  background: var(--color-black);
  position: relative;
  overflow: hidden;
}
.trat-desc::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 500px at 90% 50%, rgba(201,168,76,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.trat-desc__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-16);
  align-items: center;
}
.trat-desc__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.trat-desc__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: var(--space-5);
}
.trat-desc__title em {
  font-style: italic;
  color: var(--color-gold);
}
.trat-desc__divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  margin-bottom: var(--space-8);
}
.trat-desc__text p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(250,250,250,0.68);
  line-height: 1.85;
  margin-bottom: var(--space-5);
}
/* Tarjeta de credencial médica */
.trat-desc__credential {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgba(26,26,26,0.85);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  margin-top: var(--space-8);
}
.trat-desc__credential-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(201,168,76,0.45);
  flex-shrink: 0;
}
.trat-desc__credential-name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-1);
}
.trat-desc__credential-role {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gold);
  letter-spacing: 0.04em;
}
/* Imagen lateral */
.trat-desc__media {
  position: relative;
}
.trat-desc__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(201,168,76,0.18);
  box-shadow: var(--shadow-xl);
  display: block;
}
/* Badge COFEPRIS sobre la imagen */
.trat-desc__badge {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(10,10,10,0.96);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}
.trat-desc__badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* =========================================================
   BENEFICIOS
   ========================================================= */
.trat-benefits {
  padding: var(--space-32) 0;
  background: var(--color-black-mid);
  position: relative;
  overflow: hidden;
}
.trat-benefits::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 400px at 50% 100%, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.trat-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-16);
}
.trat-benefits__grid--two-col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.trat-benefit-card {
  padding: var(--space-8);
  background: rgba(18,18,18,0.85);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
/* Línea dorada superior en hover */
.trat-benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold) 40%, var(--color-gold) 60%, transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.trat-benefit-card:hover {
  border-color: rgba(201,168,76,0.35);
  box-shadow: 0 0 28px rgba(201,168,76,0.07), var(--shadow-md);
  transform: translateY(-4px);
}
.trat-benefit-card:hover::before {
  opacity: 1;
}
.trat-benefit-card__icon {
  width: 52px;
  height: 52px;
  background: var(--color-gold-muted);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  transition: background var(--transition-base);
}
.trat-benefit-card:hover .trat-benefit-card__icon {
  background: rgba(201,168,76,0.18);
}
.trat-benefit-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trat-benefit-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}
.trat-benefit-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(250,250,250,0.60);
  line-height: 1.75;
}


/* =========================================================
   PROCESO / TIMELINE — hereda todo de styles.css
   Solo agrega el wrapper de sección y encabezado
   ========================================================= */
.trat-proceso .process__container {
  position: relative;
  z-index: var(--z-base);
}


/* =========================================================
   RESULTADOS / ANTES Y DESPUÉS
   ========================================================= */
.trat-results {
  background: var(--color-black);
  padding: var(--space-32) 0;
}
.trat-results .ba-panels {
  max-width: 900px;
  margin-inline: auto;
}
/* Un solo panel, siempre visible (sin tabs) */
.trat-results .ba-panel {
  display: block;
}


/* =========================================================
   TESTIMONIOS — grid estático (2 columnas, sin Swiper)
   ========================================================= */
.trat-testimonios {
  padding: var(--space-32) 0;
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}
.trat-testimonios::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 350px at 50% 0%, rgba(201,168,76,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.trat-testimonios__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
}
/* Adaptar la testimonial-card de Swiper al grid estático */
.trat-testimonios__grid .testimonial-card {
  height: 100%;
}


/* =========================================================
   FAQ — hereda todo de styles.css, solo wrapper de sección
   ========================================================= */
.trat-faq {
  background: var(--color-black-mid);
}


/* =========================================================
   CTA FINAL
   ========================================================= */
.trat-cta-final {
  position: relative;
  padding: var(--space-32) 0;
  text-align: center;
  overflow: hidden;
}
.trat-cta-final__bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}
.trat-cta-final__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.trat-cta-final__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(8,8,14,0.94) 0%, rgba(8,8,14,0.88) 100%);
}
.trat-cta-final__content {
  position: relative;
  z-index: var(--z-base);
  max-width: 700px;
  margin-inline: auto;
}
.trat-cta-final__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: rgba(250,250,250,0.62);
  max-width: 500px;
  margin: var(--space-4) auto var(--space-8);
  line-height: 1.7;
}
.trat-cta-final__badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}
.trat-badge {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.65);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  transition: border-color var(--transition-base), color var(--transition-base);
}
.trat-badge:hover {
  border-color: rgba(201,168,76,0.5);
  color: var(--color-gold);
}


/* =========================================================
   ANIMACIÓN — entrada de respuestas FAQ
   ========================================================= */
@keyframes trat-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.faq__answer--animating {
  animation: trat-reveal 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}


/* =========================================================
   RESPONSIVE — 1024px (tablet)
   ========================================================= */
@media (max-width: 1024px) {
  .trat-desc__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .trat-desc__media {
    order: -1;
  }
  .trat-desc__img {
    aspect-ratio: 16 / 9;
  }
  .trat-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trat-testimonios__grid {
    grid-template-columns: 1fr;
  }
  .hero--interior {
    height: 70vh;
  }
}


/* =========================================================
   RESPONSIVE — 767px (móvil grande)
   ========================================================= */
@media (max-width: 767px) {
  .hero--interior {
    height: 80vh;
    min-height: 500px;
  }
  .trat-stats__grid {
    flex-direction: column;
    gap: var(--space-6);
  }
  .trat-stats__divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.35), transparent);
  }
  .trat-benefits__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .trat-benefit-card {
    padding: var(--space-6);
  }
  .trat-cta-final {
    padding: var(--space-20) 0;
  }
  .trat-cta-final__badges {
    gap: var(--space-3);
  }
  .trat-desc {
    padding: var(--space-20) 0;
  }
  .trat-benefits {
    padding: var(--space-20) 0;
  }
  .trat-testimonios {
    padding: var(--space-20) 0;
  }
  .trat-results {
    padding: var(--space-20) 0;
  }
}


/* =========================================================
   RESPONSIVE — 479px (móvil pequeño)
   ========================================================= */
@media (max-width: 479px) {
  .trat-desc__credential {
    flex-direction: column;
    text-align: center;
    padding: var(--space-4);
  }
  .trat-badge {
    padding: var(--space-1) var(--space-4);
    font-size: 0.6rem;
  }
  .hero--interior .hero__headline {
    font-size: 2rem;
  }
  .trat-stats__value {
    font-size: var(--fs-xl);
  }
}


/* =========================================================
   LIGHT THEME OVERRIDES — warm ivory #F5F0E8
   ========================================================= */

/* ── trat-desc ── */
.trat-desc--light {
  background: #F5F0E8;
}
.trat-desc--light::before {
  background: none;
}
.trat-desc--light .trat-desc__title {
  color: #0A0A0A;
}
.trat-desc--light .trat-desc__text p {
  color: #4A4A4A;
}
.trat-desc--light .trat-desc__credential {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(201, 168, 76, 0.18);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.trat-desc--light .trat-desc__credential-name {
  color: #0A0A0A;
}

/* ── trat-testimonios ── */
.trat-testimonios--light {
  background: #F5F0E8;
}
.trat-testimonios--light::before {
  background: none;
}
.trat-testimonios--light .testimonial-card {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
}
.trat-testimonios--light .testimonial-card__quote {
  color: #4A4A4A;
}
.trat-testimonios--light .testimonial-card__name {
  color: #0A0A0A;
}
.trat-testimonios--light .testimonial-card__detail {
  color: rgba(0, 0, 0, 0.45);
}


/* =========================================================
   ACCESIBILIDAD — dispositivos sin hover (táctiles)
   ========================================================= */
@media (hover: none) {
  .trat-benefit-card::before {
    opacity: 1;
  }
  .trat-benefit-card {
    border-color: rgba(201,168,76,0.18);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .trat-benefit-card,
  .trat-desc__img,
  .trat-benefit-card::before {
    transition: none;
  }
  .faq__answer--animating {
    animation: none;
  }
}