/* =========================================================
   Thera+Vida — index.css (solo página principal)
   ========================================================= */

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--mist) 0%, #f7fbfd 55%, var(--teal-mist) 100%);
  padding: calc(var(--header-h) + 70px) 0 140px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; color: var(--navy); }
.hero-waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.cross {
  position: absolute; width: 64px; height: 64px; opacity: .07;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 32% 100% no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 100% 32% no-repeat;
}
.cross-1 { top: 22%; left: 3%; }
.cross-2 { top: 62%; left: 44%; width: 40px; height: 40px; }
.cross-3 { top: 14%; right: 6%; width: 48px; height: 48px; }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: 56px;
  align-items: center;
}
.hero-lead { font-size: 18px; }
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--teal-dark);
  margin-bottom: 0;
}
.hero-cta { margin-top: 30px; }
.hero-cta-secondary { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.hero-media { position: relative; padding: 0 0 60px 60px; }
.hero-img-main {
  width: 100%;
  aspect-ratio: 1103 / 1244;
  object-fit: cover;
  border-radius: 240px 240px 24px 24px;
  box-shadow: 0 30px 60px -30px rgba(1, 45, 110, .35);
}
.hero-img-small {
  position: absolute; left: 0; bottom: 0;
  width: 46%;
  aspect-ratio: 444 / 352;
  object-fit: cover;
  border-radius: 18px;
  border: 6px solid var(--white);
  box-shadow: 0 18px 40px -18px rgba(1, 45, 110, .4);
}

/* ---------- Bloques de categoría (H2 + texto + enlace) ---------- */
.media-with-counter { display: flex; flex-direction: column; align-items: center; }
.media-with-counter .rounded { max-width: 470px; }
.cat-block .split-copy h2 a { color: inherit; text-decoration: none; }
.cat-block .split-copy h2 a:hover { color: var(--teal-dark); }
.cat-services {
  list-style: none; padding: 0; margin: 4px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-services li {
  font-size: 14px; font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
}

/* ---------- Imagen orgánica ---------- */
.split-40 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 80px; }
.organic-media { position: relative; padding-bottom: 40px; }
.organic {
  width: 100%;
  aspect-ratio: 394 / 450;
  object-fit: cover;
  border-radius: 300px 0 300px 300px;
}
.organic-small {
  position: absolute; right: -40px; bottom: 0;
  width: 52%;
  aspect-ratio: 295 / 208;
  object-fit: cover;
  border-radius: 6px;
  border: 6px solid var(--white);
}
.counter-floating {
  position: absolute; left: -10px; bottom: 6px;
  background: var(--white);
  border-radius: 20px;
  padding: 16px 24px 14px;
  box-shadow: 0 16px 34px -18px rgba(1, 45, 110, .35);
  margin: 0;
}
.counter-floating .counter-number { font-size: 56px; }
.counter-floating .counter-label { font-size: 15px; }
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.25;
  color: var(--teal-dark);
  margin-top: 26px;
}

/* ---------- Contacto ---------- */
.contact { background: rgba(1, 45, 110, .04); text-align: center; }
.contact-inner { display: flex; flex-direction: column; align-items: center; }
.contact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%; max-width: 980px;
  margin: 18px 0 40px;
}
.contact-list > div {
  background: var(--white);
  border-radius: 18px;
  padding: 24px 18px;
  border: 1px solid var(--line);
}
.contact-list dt { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.contact-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--navy);
  font-variant-numeric: lining-nums;
}
.contact-list dd a { color: inherit; text-decoration: none; }

/* ---------- Mapa ---------- */
.map { line-height: 0; }
.map iframe { display: block; width: 100%; height: 450px; border: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid, .split-40 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-copy { text-align: center; }
  .hero-copy p { margin-left: auto; margin-right: auto; }
  .hero-cta-secondary { justify-content: center; }
  .hero-media { max-width: 560px; margin: 0 auto; width: 100%; }
  .organic-media { max-width: 460px; margin: 0 auto; width: 100%; }
  .organic-small { right: -10px; }
  .cat-services { justify-content: center; }
}
@media (max-width: 640px) {
  .home-hero { padding: calc(var(--header-h) + 40px) 0 110px; }
  .hero-media { padding: 0 0 40px 24px; }
  .hero-cta-secondary { flex-direction: column; }
  .counter-floating { left: 0; }
  .counter-floating .counter-number { font-size: 46px; }
  .contact-list { grid-template-columns: minmax(0, 1fr); }
  .quote { font-size: 1.7rem; }
}