/* ============================================================
   GO2BESS · botones.css
   Color, padding y radio están en las clases globales de
   Elementor (btn-primario, btn-header). Aquí: la fuente, la
   flecha → y lo que gana a los estilos base del botón.
   ============================================================ */

.elementor :is(a, button).btn-primario {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;

  /* Flecha → de 12 × 10 px (Figma) */
  &::after {
    content: '';
    flex: none;
    width: 12px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h10M7 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h10M7 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease);
  }

  &:hover { color: var(--color-white); }
  &:hover::after { transform: translateX(3px); }
}

/* Botón Contacto del header: sin flecha */
.elementor :is(a, button).btn-header::after {
  content: none;
}

/* ============================================================
   GO2BESS · secciones.css
   Maquetación, colores y responsive están en las clases globales
   de Elementor (g2b-…). Aquí solo lo que una clase de Elementor
   no puede guardar: fuentes, textos sobre color, capas
   ::before/::after y listas.
   Orden: base.css → botones.css → secciones.css
   ============================================================ */


/* 1. FUENTES DE LOS BLOQUES (Figma) */
.elementor :is(.g2b-frase, .g2b-texto-tarjeta, .g2b-diagrama__texto, .g2b-item-titulo) {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
}

.elementor :is(.g2b-chip, .g2b-lista-lineas__item, .g2b-barra__item) {
  font-family: var(--font-body);
}

.elementor .g2b-texto-tarjeta {
  color: var(--color-text-soft);
  opacity: 0.85;
}

.elementor .g2b-chip {
  color: var(--color-text-soft);
}


/* 2. TEXTO SOBRE COLOR (bandas con degradado y CTA final)
   Clase g2b-sobre-color en el contenedor */
.elementor .g2b-sobre-color {
  & :is(h1, h2, h3, h4, p, li) { color: var(--color-white); }
  & :is(h1, h2, h3, h4) em {
    background: none;
    color: var(--color-white);
    -webkit-text-fill-color: currentColor;
  }
  & .g2b-antetitulo { opacity: 0.85; }
  & .g2b-lead { opacity: 0.9; }
}


/* 3. CABECERA DE SECCIÓN: velo blanco radial detrás del título
   (en Figma, degradado radial blanco al 80 %) */
.g2b-cabecera-seccion {
  isolation: isolate;

  &::after {
    content: '';
    position: absolute;
    inset: -40px -80px;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgb(255 255 255 / 0.8) 28%, rgb(255 255 255 / 0) 70%);
    pointer-events: none;
  }
}
.g2b-sobre-color .g2b-cabecera-seccion::after { content: none; }


/* 4. LISTA DEL PASO «PREDICE» */
.elementor .g2b-lista ul {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}
.elementor .g2b-lista li {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}


/* 5. BURBUJAS DE PREGUNTAS: mancha de color detrás
   (en Figma, tres elipses con degradado) */
.g2b-chips::before {
  content: '';
  position: absolute;
  inset: 0 10%;
  z-index: -1;
  background:
    radial-gradient(ellipse 35% 45% at 30% 40%, rgb(104 87 251 / 0.22), transparent 70%),
    radial-gradient(ellipse 30% 40% at 70% 45%, rgb(0 245 178 / 0.2), transparent 70%),
    radial-gradient(ellipse 35% 45% at 45% 70%, rgb(104 87 251 / 0.16), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}


/* 6. CTA FINAL: velo oscuro a la izquierda para leer el texto.
   La foto va de fondo del contenedor g2b-cta (Estilo › Fondo) */
.g2b-cta {
  isolation: isolate;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(15 17 20 / 0.7) 0%, rgb(15 17 20 / 0.25) 55%, rgb(15 17 20 / 0) 100%);
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  .g2b-cta::before {
    background: linear-gradient(180deg, rgb(15 17 20 / 0.75) 0%, rgb(15 17 20 / 0.2) 70%);
  }
}


/* 7. IMÁGENES DE RELLENO: mientras no estén en Medios, que no
   rompan la maqueta (se puede borrar al poner las reales) */
.g2b-tarjeta-imagen__foto img,
.g2b-imagen-fluida img,
.g2b-hero-imagen img {
  display: block;
  width: 100%;
  height: auto;
}