/* ============================================================
   ETHERIA — BLOBS GLOBALES + ONDAS · SISTEMA GLOBAL
   Se carga en todas las páginas automáticamente.
   ============================================================ */

/* ── BLOB BASE ─────────────────────────────────────────────── */

.eth-blob {
  position: absolute;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, border-radius;
}

/* Asegura que el contenido queda SOBRE los blobs */
.eth-has-blobs > .elementor-container,
.eth-has-blobs > .e-con-inner,
.eth-has-blobs > .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}

/* ── COLORES ────────────────────────────────────────────────── */

.eth-blob--mint      { background: #abd9d0; }
.eth-blob--rosa      { background: #f2e8ec; }
.eth-blob--lavanda   { background: #d4c5e2; }
.eth-blob--olive     { background: #9ca35b; }
.eth-blob--peach     { background: #f5d9c8; }
.eth-blob--sage      { background: #b5c4b1; }
.eth-blob--lila      { background: #e2d4f0; }

/* ── TAMAÑOS ────────────────────────────────────────────────── */

.eth-blob--xl  { width: 520px; height: 520px; }
.eth-blob--lg  { width: 380px; height: 380px; }
.eth-blob--md  { width: 260px; height: 260px; }
.eth-blob--sm  { width: 170px; height: 170px; }

/* ── OPACIDADES ─────────────────────────────────────────────── */

.eth-blob--op-light  { opacity: 0.12; }
.eth-blob--op-mid    { opacity: 0.20; }
.eth-blob--op-strong { opacity: 0.32; }

/* ── ANIMACIONES ────────────────────────────────────────────── */

.eth-blob--anim-a { animation: ethBlobA  9s ease-in-out infinite; }
.eth-blob--anim-b { animation: ethBlobB 12s ease-in-out infinite; }
.eth-blob--anim-c { animation: ethBlobC 15s ease-in-out infinite; }
.eth-blob--anim-d { animation: ethBlobD 11s ease-in-out infinite; }
.eth-blob--anim-e { animation: ethBlobE 17s ease-in-out infinite; }
.eth-blob--anim-f { animation: ethBlobF 20s ease-in-out infinite; }

@keyframes ethBlobA {
  0%,100% {
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
    transform: translate(0,0) rotate(0deg);
  }
  25% {
    border-radius: 30% 70% 50% 50% / 60% 40% 70% 30%;
    transform: translate(-14px, 12px) rotate(4deg);
  }
  50% {
    border-radius: 50% 50% 30% 70% / 40% 70% 30% 60%;
    transform: translate(8px, -18px) rotate(-3deg);
  }
  75% {
    border-radius: 70% 30% 60% 40% / 70% 30% 60% 40%;
    transform: translate(-6px, 6px) rotate(7deg);
  }
}

@keyframes ethBlobB {
  0%,100% {
    border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%;
    transform: translate(0,0);
  }
  33% {
    border-radius: 70% 30% 40% 60% / 60% 40% 70% 30%;
    transform: translate(10px, -12px);
  }
  66% {
    border-radius: 40% 60% 70% 30% / 30% 70% 40% 60%;
    transform: translate(-10px, 10px);
  }
}

@keyframes ethBlobC {
  0%,100% {
    border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
    transform: scale(1) rotate(0deg);
  }
  50% {
    border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%;
    transform: scale(1.1) rotate(8deg);
  }
}

@keyframes ethBlobD {
  0%,100% {
    border-radius: 65% 35% 55% 45% / 55% 45% 65% 35%;
    transform: translate(0,0) scale(1);
  }
  40% {
    border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%;
    transform: translate(12px, 10px) scale(1.05);
  }
  70% {
    border-radius: 30% 70% 45% 55% / 65% 35% 55% 45%;
    transform: translate(-8px, -14px) scale(0.97);
  }
}

@keyframes ethBlobE {
  0%,100% {
    border-radius: 45% 55% 65% 35% / 65% 35% 50% 50%;
    transform: translate(0,0) rotate(0deg);
  }
  30% {
    border-radius: 65% 35% 40% 60% / 45% 55% 65% 35%;
    transform: translate(-10px, -8px) rotate(-6deg);
  }
  60% {
    border-radius: 35% 65% 55% 45% / 55% 45% 35% 65%;
    transform: translate(14px, 6px) rotate(4deg);
  }
}

@keyframes ethBlobF {
  0%,100% {
    border-radius: 70% 30% 45% 55% / 40% 60% 55% 45%;
    transform: translate(0,0) scale(1) rotate(0deg);
  }
  25% {
    border-radius: 45% 55% 70% 30% / 60% 40% 35% 65%;
    transform: translate(6px, -10px) scale(1.06) rotate(5deg);
  }
  50% {
    border-radius: 30% 70% 55% 45% / 45% 55% 70% 30%;
    transform: translate(-12px, 8px) scale(0.96) rotate(-3deg);
  }
  75% {
    border-radius: 60% 40% 35% 65% / 30% 70% 45% 55%;
    transform: translate(8px, 12px) scale(1.03) rotate(7deg);
  }
}

/* ── ONDAS SVG ──────────────────────────────────────────────── */

.eth-wave {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.eth-wave--bottom {
  bottom: -1px;
}

.eth-wave--top {
  top: -1px;
  transform: rotate(180deg);
}

.eth-wave svg {
  display: block;
  width: 100%;
  height: 70px;
}

@media (max-width: 767px) {
  .eth-wave svg { height: 40px; }
  .eth-blob--xl  { width: 240px; height: 240px; }
  .eth-blob--lg  { width: 180px; height: 180px; }
  .eth-blob--md  { width: 130px; height: 130px; }
  .eth-blob--sm  { width: 90px;  height: 90px;  }
}

/* ============================================================
   ETHERIA HOME — SECCIÓN "POR QUÉ ETHERIA" · OPCIÓN B
   Icono inline + borde izquierdo de color + grid 2 columnas
   Clases aplicadas dinámicamente por JS (detección por contenido)
   ============================================================ */

/* ── Sección contenedora ──────────────────────────────────────── */

.eth-home-why {
  overflow: hidden !important;
  position: relative;
}

.eth-home-why > * {
  position: relative;
  z-index: 2;
}

/* ── Grid 2 columnas ──────────────────────────────────────────── */

.eth-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Tarjeta base ─────────────────────────────────────────────── */

.eth-feature-card {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.07) !important;
  border-left: 3px solid #abd9d0 !important;
  border-radius: 12px !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  overflow: visible !important;
}

/* Quitar pseudo-elementos no usados en opción B */
.eth-feature-card::before,
.eth-feature-card::after {
  display: none !important;
}

/* Color del borde izquierdo por posición */
.eth-feature-card:nth-child(1) { border-left-color: #abd9d0 !important; }
.eth-feature-card:nth-child(2) { border-left-color: #d4c5e2 !important; }
.eth-feature-card:nth-child(3) { border-left-color: #9ca35b !important; }
.eth-feature-card:nth-child(4) { border-left-color: #f5a87d !important; }
.eth-feature-card:nth-child(5) { border-left-color: #abd9d0 !important; }
.eth-feature-card:nth-child(6) { border-left-color: #d4c5e2 !important; }

/* El contenido de Elementor ocupa el espacio restante */
.eth-feature-card > *:not(.eth-feature-icon) {
  flex: 1;
  min-width: 0;
}

/* ── Icono inyectado por JS ───────────────────────────────────── */

.eth-feature-icon {
  font-size: 22px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.eth-feature-card:nth-child(1) .eth-feature-icon { color: #6bb8af !important; }
.eth-feature-card:nth-child(2) .eth-feature-icon { color: #a88dc4 !important; }
.eth-feature-card:nth-child(3) .eth-feature-icon { color: #7c8348 !important; }
.eth-feature-card:nth-child(4) .eth-feature-icon { color: #c97a50 !important; }
.eth-feature-card:nth-child(5) .eth-feature-icon { color: #6bb8af !important; }
.eth-feature-card:nth-child(6) .eth-feature-icon { color: #a88dc4 !important; }

/* ── Hover: deslizamiento lateral ────────────────────────────── */

.eth-feature-card:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 4px 18px rgba(171, 217, 208, 0.25) !important;
}

/* ── Subrayado animado en "equipo completo" ───────────────────── */

.eth-home-why em {
  position: relative;
  display: inline;
}

.eth-home-why em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #abd9d0, #9ca35b);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: ethUnderline 3s ease-in-out 1.2s infinite alternate;
}

@keyframes ethUnderline {
  0%   { transform: scaleX(0); opacity: 0; }
  30%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.6; }
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 767px) {
  .eth-feature-grid {
    grid-template-columns: 1fr !important;
  }
  .eth-feature-card:hover {
    transform: none !important;
  }
}

/* ============================================================
   ETHERIA HOME — ESPECIALIDADES · MOSAICO
   Clases aplicadas dinámicamente por JS
   ============================================================ */

.eth-espec-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid #E5DFC9 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  padding: 40px 36px 44px !important;
  background: #FFFFFF !important;
}

.eth-espec-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
}

.eth-espec-card--psico {
  background: #FFFFFF !important;
}

.eth-espec-card--nutri {
  background: #FFFFFF !important;
}

/* Número romano watermark */
.eth-espec-wm {
  display: none !important;
}

.eth-espec-card--psico .eth-espec-wm { color: #2d6b63; }
.eth-espec-card--nutri .eth-espec-wm { color: #a85a38; }

/* Título */
.eth-espec-card--psico .elementor-heading-title {
  color: #2d6b63 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}

.eth-espec-card--nutri .elementor-heading-title {
  color: #9a4f30 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}

/* Alineación general */
.eth-espec-card,
.eth-espec-card p,
.eth-espec-card li,
.eth-espec-card .elementor-heading-title,
.eth-espec-card .elementor-widget-container {
  text-align: left !important;
}

/* Ítems de la lista */
.eth-espec-card p,
.eth-espec-card li {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 2px !important;
  padding-left: 16px !important;
  position: relative !important;
}

.eth-espec-card p::before,
.eth-espec-card li::before {
  content: '—' !important;
  position: absolute !important;
  left: 0 !important;
  opacity: 0.4 !important;
  font-size: 0.8rem !important;
  top: 3px !important;
}

.eth-espec-card--psico p { color: #2a4a45 !important; }
.eth-espec-card--psico p::before { color: #3d7a72 !important; }

.eth-espec-card--nutri p { color: #4a2e22 !important; }
.eth-espec-card--nutri p::before { color: #c97a50 !important; }

@media (max-width: 767px) {
  .eth-espec-card { padding: 28px 24px 32px !important; }
  .eth-espec-wm { font-size: 6rem !important; }
  .eth-espec-card:hover { transform: none !important; }
}
/* Ocultar ondas SVG — eliminadas del diseño */
.eth-wave,
.eth-wave--top,
.eth-wave--bottom,
.elementor-shape {
  display: none !important;
}

/* Excepción: ondas de separación reactivadas (página Psicología) */
.elementor-element-987a883 .elementor-shape,
.elementor-element-3ca3d7b .elementor-shape {
  display: block !important;
}

/* ============================================================
   PÁGINA PSICOLOGÍA INTEGRATIVA — LAYOUT 2 COLUMNAS
   JS detecta la sección y envuelve los widgets en estas clases
   ============================================================ */

.eth-psico-row {
  display: flex;
  flex-direction: row;
  gap: 64px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.eth-psico-col--left {
  flex: 1 1 54%;
  min-width: 0;
}

.eth-psico-col--right {
  flex: 1 1 40%;
  min-width: 0;
  border-left: 2px solid rgba(171,217,208,0.35);
  padding-left: 48px;
  padding-top: 28px;
}

.eth-psico-bottom {
  width: 100%;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,0.07);
}

@media (max-width: 1024px) {
  .eth-psico-row { gap: 40px; }
  .eth-psico-col--right { padding-left: 32px; }
}

@media (max-width: 767px) {
  .eth-psico-row { flex-direction: column; gap: 32px; }
  .eth-psico-col--right {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid rgba(171,217,208,0.35);
    padding-top: 28px;
  }
  .eth-psico-bottom { margin-top: 32px; padding-top: 28px; }
}


/* ── Franja de especialidades (Psicología Integrativa): centrada y armoniosa ── */
.elementor-element-768c84f0 {
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px 18px !important;
  padding: 28px 20px !important;
}
.elementor-element-768c84f0 > .e-con {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.elementor-element-768c84f0 .elementor-widget-heading {
  width: auto !important;
  margin: 0 !important;
  min-width: 170px;
  text-align: center;
}

/* ── Franja de especialidades en malva + onda a juego ── */
.elementor-element-768c84f0 {
  background-color: #E2D4F0 !important;
}
.elementor-element-24150206::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201000%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z'%20fill%3D'%23E2D4F0'%20fill-opacity%3D'1'%2F%3E%3C%2Fsvg%3E") !important;
}