/* ============================================================
   MIL MULTIVERSOS — Narrativa Visual v9
   
   Las olas son divs hermanos entre secciones.
   Sin position:absolute, sin transform, sin overflow:hidden.
   La sección receptora tiene margin-top:-1px para pegar sin
   costura. El SVG llena todo el div desde arriba hasta abajo.
   ============================================================ */

.discovery-bar {
  position: relative;
  z-index: 10;
  box-shadow: 0 6px 32px rgba(0,0,0,.08);
}

/* ─── OLA BASE ─────────────────────────────────────────────── */
.sw {
  display: block;
  line-height: 0;
  padding: 0;
  margin: 0;
}
.sw svg {
  display: block;
  width: 100%;
  height: 140px;
}

/*
  El color del .sw debe coincidir con la sección ANTERIOR.
  Esto garantiza que si el path no llega al borde superior
  del viewBox, el fondo visible es el mismo color.
*/
.sw--to-dark  { background: var(--cream2, #f2ede4); }
.sw--to-white { background: transparent; }

/*
  La sección que RECIBE la ola usa margin-top:-1px
  para eliminar cualquier sub-pixel gap.
*/
.mm-about-sec  { margin-top: -1px; }
.sec--guides   { margin-top: -1px; }

/* ─── CARRUSEL ──────────────────────────────────────────────── */
.wheel-carousel-section {
  position: relative;
  z-index: 1;
}

.wheel-carousel-section .sec-eyebrow::before,
.mm-about-sec .sec-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  opacity: 0.45;
}
.wheel-carousel-section .sec-eyebrow::after,
.mm-about-sec .sec-eyebrow::after {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-left: 8px;
  opacity: 0.45;
}

/* ─── ABOUT ────────────────────────────────────────────────── */
.mm-about-sec {
  background: #f5f0e8 !important;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}

/* Blob difuminado izquierda-arriba (terra cálido) */
.mm-about-sec::before {
  content: '';
  position: absolute;
  top: -100px; left: -140px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(176,112,64,.16) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}

/* Blob difuminado derecha-abajo (moss fresco) */
.mm-about-sec::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -100px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(61,90,62,.12) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}

.mm-about-inner {
  position: relative;
  z-index: 1;
  padding: 80px 32px 88px;
}

.mm-about-sec .sec-eyebrow   { color: var(--terra, #b07040) !important; }
.mm-about-sec .sec-title     { color: var(--dark, #1a1a18) !important; font-size: clamp(36px, 5vw, 56px) !important; }
.mm-about-sec .sec-title em  { color: var(--terra, #b07040) !important; }
.mm-about-sec .mm-about-lead { color: #3d3a35 !important; }
.mm-about-sec .mm-about-p    { color: var(--mid, #6b6860) !important; }

.mm-about-sec .section-ornament::before { background: linear-gradient(to right, transparent, var(--terra)) !important; }
.mm-about-sec .section-ornament::after  { background: linear-gradient(to left,  transparent, var(--terra)) !important; }

.mm-about-sec .mm-philosophy-eyebrow { color: var(--moss2, #2c4230) !important; letter-spacing: 3px !important; }
.mm-about-sec .mm-philosophy-lines   { color: var(--dark, #1a1a18) !important; }

/* ─── GUÍAS ────────────────────────────────────────────────── */
.sec--guides {
  background: #ffffff !important;
  position: relative;
  z-index: 1;
  padding-top: 40px !important;
}

/* ─── ORNAMENTO ─────────────────────────────────────────────── */
.section-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 4px 0 0; margin-bottom: 36px;
}
.section-ornament::before {
  content: ''; flex: 1; max-width: 80px; height: 1px;
  background: linear-gradient(to right, transparent, var(--terra));
  opacity: 0.35;
}
.section-ornament::after {
  content: ''; flex: 1; max-width: 80px; height: 1px;
  background: linear-gradient(to left, transparent, var(--terra));
  opacity: 0.35;
}
.section-ornament-icon { color: var(--terra); font-size: 12px; opacity: 0.6; }

/* ─── RESTO ─────────────────────────────────────────────────── */
.sec--white { background: linear-gradient(180deg,#fff 0%,#faf8f5 100%) !important; }

.sec--services { position: relative; }
.sec--services::before {
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 1px;
  background: var(--terra,#b07040); opacity: 0.28;
}

.sec--categories { position: relative; }
.sec--categories::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,transparent,var(--cream3) 25%,var(--cream3) 75%,transparent);
}

.sec--how {
  background: linear-gradient(135deg,var(--cream) 0%,#ece7de 100%) !important;
  position: relative;
}
.sec--how::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right,transparent,rgba(61,90,62,.15) 30%,rgba(176,112,64,.15) 70%,transparent);
}

.cta-split {
  box-shadow: 0 -4px 20px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.04);
  position: relative; z-index: 2;
}

.sec--plans { position: relative; }
.sec--plans::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,transparent,var(--cream3) 20%,var(--cream3) 80%,transparent);
}

.sec--blog .blog-card-main { border-left: 3px solid rgba(176,112,64,.28); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) { .sw svg { height: 90px; } .sec--guides { padding-top: 28px !important; } }
@media (max-width: 480px) { .sw svg { height: 60px; } .sec--guides { padding-top: 20px !important; } }