/**
 * GP - Hero Banner — Figma 492-111 (desktop) / 503-4684 (móvil).
 *
 * Arquitectura de 3 capas para máxima robustez:
 *   1. Gradiente de fondo → tarjeta interna redondeada (.gp-herobanner__inner),
 *      editable por atributos (color inicial/final + ángulo), aplicado inline en
 *      el render. Continuo en todo el bloque. La regla CSS de abajo es fallback.
 *   2. Contenido (título, texto, botón) → columna izquierda, SIEMPRE sobre el
 *      gradiente limpio (nunca sobre la imagen), así el texto es indestructible.
 *   3. Imagen → PNG con fondo TRANSPARENTE (recorte de personas). En primer plano
 *      con object-fit: cover (rellena su columna sin deformar), y SOBRESALE por
 *      encima del gradiente (pop-out, var --gp-hb-pop). Derecha en escritorio,
 *      arriba en móvil.
 *
 * Ver docs: globalprinted_v2/docs/gp-hero-banner.md
 */

.gp-herobanner {
  --gp-hb-font: Outfit, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --gp-hb-btn: var(--gp-brand-pink, #ff3067);
  --gp-hb-btn-shadow: var(--gp-brand-pink-dark, #d81f52);
  /* Cuánto sobresale la imagen por encima del gradiente (efecto pop-out): las
     cabezas asoman por encima del degradado. Escritorio 56px, móvil 40px. */
  --gp-hb-pop: 56px;
  --gp-hb-padding-bottom: 24px;
  position: relative;
  /* Reserva el espacio superior para que la imagen asome por arriba del gradiente. */
  padding-top: var(--gp-hb-pop);
  padding-bottom: var(--gp-hb-padding-bottom);
  font-family: var(--gp-hb-font);
}

/* Contenedor del hero. Es solo el contexto de posicionamiento: el degradado va en
   una capa aparte (.gp-herobanner__bg) y la imagen encima, para que la imagen se
   pueda dimensionar/asomar libremente SIN que el degradado la recorte. NO llevamos
   overflow:hidden aquí (la imagen desborda por arriba). */
.gp-herobanner__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 435px; /* Alto del banner de escritorio en Figma (1360×435). */
}

/* Capa del degradado (al fondo). Ocupa toda la tarjeta y lleva la forma (radio).
   El gradiente real llega inline desde los atributos; el de aquí es fallback. */
.gp-herobanner__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 24px;
  background: linear-gradient(90deg, #ffe3dc, #ffe1fb);
}

/* Contenido (izquierda en escritorio), sobre el gradiente. */
.gp-herobanner__content {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 48px clamp(32px, 4vw, 64px);
}

.gp-herobanner__title {
  margin: 0;
  color: #4b419e;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.15;
}

.gp-herobanner__text {
  margin: 0;
  color: #6b7280;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 46ch;
}

.gp-herobanner__text p {
  margin: 0 0 8px;
}

.gp-herobanner__text p:last-child {
  margin-bottom: 0;
}

/* Botón "¡Personalizar!" con borde inferior sólido (efecto 3D del diseño). */
.gp-herobanner__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  /* Tamaño del botón (escala equilibrada: queda por debajo del título de 46px). */
  padding: 14px 34px;
  background: var(--gp-hb-btn);
  color: #fff;
  font-family: var(--gp-hb-font);
  font-size: 34px;
  font-weight: 700;
  line-height: normal;
  /* !important: el tema (.hentry .entry-content a) fuerza underline en los links. */
  text-decoration: none !important;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--gp-hb-btn-shadow);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.gp-herobanner__btn:hover,
.gp-herobanner__btn:focus {
  color: #fff;
  text-decoration: none !important;
  filter: brightness(0.98);
  /* Sin contorno de foco (lo forzaba el tema en morado). */
  outline: none;
}

.gp-herobanner__btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--gp-hb-btn-shadow);
}

/* Imagen (derecha en escritorio). PNG transparente en primer plano: contain para
   no recortar ni deformar a las personas; anclada al borde inferior-derecho, con
   el gradiente visible alrededor. */
.gp-herobanner__media {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  min-width: 695px;
  align-self: stretch;
}

/* Pop-out (escritorio): la imagen se muestra a su TAMAÑO NATURAL (sin recortar),
   anclada al borde inferior de la tarjeta y a la derecha. Su alto = tarjeta + pop,
   así toca la base del gradiente Y asoma por arriba (las cabezas sobresalen). Al ir
   sobre la capa del degradado (no dentro), puede desbordar sin que nada la recorte. */
.gp-herobanner__picture {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
}

.gp-herobanner__img {
  display: block;
  /* Altura = tarjeta + pop → al anclar la imagen abajo, toca la base del gradiente
     y su parte superior asoma por encima (pop-out). Ancho AUTO = tamaño natural,
     así NO se recorta a las personas; el exceso de ancho desborda sobre la capa del
     degradado (que va detrás), sin que nada lo recorte. */
  height: calc(435px + var(--gp-hb-pop));
  width: auto;
  max-width: none;
}

/* ------------------------------------------------------------------------- */
/* Apilado vertical: <= 799px (breakpoint del diseño)                        */
/* ------------------------------------------------------------------------- */
@media (max-width: 799px) {
  /* El banner queda inset 16px de la pantalla por los 4 lados (Figma 503-4684). */
  .gp-herobanner {
    --gp-hb-pop: 40px;
    margin: 16px;
  }

  .gp-herobanner__inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .gp-herobanner__bg {
    border-radius: 16px;
  }

  /* Personas arriba; el DOM lleva el contenido primero (título antes por a11y).
     aspect-ratio fijo 800/498 (Figma): mantiene la proporción al reducir la
     pantalla, en vez de una altura fija. El gradiente se ve alrededor del PNG. */
  .gp-herobanner__media {
    order: -1;
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    align-self: auto;
    aspect-ratio: 800 / 498;
    position: relative;
    /* Pop-out de móvil: la imagen sobresale por arriba (40px). */
    margin-top: calc(-1 * var(--gp-hb-pop));
  }

  /* En móvil la imagen vuelve a llenar su caja (aspect-ratio) con cover + el
     difuminado inferior; solo escritorio usa el posicionamiento absoluto/natural. */
  .gp-herobanner__picture {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
  }

  .gp-herobanner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Fundido de la imagen con el fondo (activable + ajustable desde el editor):
     máscara de opacidad que desvanece el borde inferior (y suave el superior),
     revelando el gradiente rosa que hay detrás, para que la imagen no quede
     "cortada" (Figma móvil). Variable: --gp-hb-fade-bottom (tamaño del fundido).
     Nota: se probó una copia borrosa (blur real) pero generaba una banda visible;
     descartada a favor de este fundido de opacidad limpio. */
  .gp-herobanner--imgfade .gp-herobanner__img {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 6%,
      #000 calc(100% - var(--gp-hb-fade-bottom, 24%)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 6%,
      #000 calc(100% - var(--gp-hb-fade-bottom, 24%)),
      transparent 100%
    );
  }


  .gp-herobanner__content {
    flex: none;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 8px 24px 32px;
  }

  .gp-herobanner__title {
    font-size: 24px;
  }

  .gp-herobanner__text {
    max-width: none;
  }

  .gp-herobanner__btn {
    /* Escala equilibrada; ancho completo, título móvil 24px. */
    align-self: stretch;
    padding: 14px 24px;
    font-size: 20px;
  }
}

/* ------------------------------------------------------------------------- */
/* Barra de reseñas (prueba social) bajo el hero.                            */
/* Figma 440-20892 (desktop 1360×90) / 440-22400 (móvil 390×227).           */
/* Marca fija (logos/estrellas/insignia); textos, enlace y avatares editables.*/
/* ------------------------------------------------------------------------- */
.gp-hb-reviews {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  min-height: 90px;
  padding: 0 24px;
  background: #fafafa;
  /* En desktop la barra continúa la tarjeta del hero: unión recta arriba y
     esquinas inferiores con el mismo radio que el hero (24px) → una sola tarjeta. */
  border-radius: 0 0 24px 24px;
  font-family: var(--gp-hb-font);
}

/* Cuando la barra está activa, el hero cuadra su borde inferior para encajar
   con la barra (desktop). En móvil se restaura (son tarjetas separadas). */
.gp-herobanner--withbar .gp-herobanner__bg {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.gp-hb-reviews__group {
  display: flex;
  align-items: center;
}

/* Grupo 1: avatares + texto destacado. */
.gp-hb-reviews__rated {
  gap: 16px;
}

.gp-hb-reviews__avatars {
  display: flex;
  align-items: center;
}

.gp-hb-reviews__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  /* Anillo del color de la barra para separar los avatares solapados. */
  box-shadow: 0 0 0 2px #fafafa;
}

.gp-hb-reviews__avatar:not(:last-child) {
  margin-right: -12px; /* Solape 12px (Figma x=0/28/56). */
}

.gp-hb-reviews__toptext {
  font-family: "Poppins", var(--gp-hb-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  color: #4b419e;
  white-space: nowrap;
}

/* Líneas divisorias verticales (solo desktop). */
.gp-hb-reviews__divider {
  flex: none;
  width: 1px;
  height: 40px;
  background: #e5e7eb;
}

/* Grupo 2: Google + estrellas + valoración + enlace. */
.gp-hb-reviews__google {
  gap: 4px;
}

.gp-hb-reviews__gline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gp-hb-reviews__gmeta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gp-hb-reviews__google-logo {
  display: block;
  width: 79.445px;
  height: 25px;
}

.gp-hb-reviews__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.gp-hb-reviews__star {
  display: block;
  width: 18px;
  height: 18px;
}

.gp-hb-reviews__rating,
.gp-hb-reviews__link {
  font-family: "Outfit", var(--gp-hb-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  color: #4b419e;
  white-space: nowrap;
}

.gp-hb-reviews__link {
  text-decoration: underline;
}

a.gp-hb-reviews__link:hover,
a.gp-hb-reviews__link:focus {
  color: #4b419e;
  text-decoration: underline;
}

/* Grupo 3: insignia "Verificado por: Trustindex". */
.gp-hb-reviews__badge {
  position: relative;
  gap: 8px;
  padding: 4px 8px;
  background: #d6f3e6;
  border-radius: 4px;
}

.gp-hb-reviews__badge-label {
  font-family: "Inter", var(--gp-hb-font);
  font-weight: 400;
  font-size: 12px;
  line-height: 16.8px;
  color: #000;
  white-space: nowrap;
}

.gp-hb-reviews__ti-logo {
  display: block;
  width: 100px;
  height: 16.733px;
}

.gp-hb-reviews__info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: #6b7280;
  cursor: pointer;
}

/* Neutraliza el hover rosa que Storefront impone a todo <button>. */
.gp-hb-reviews__info-btn:hover,
.gp-hb-reviews__info-btn:focus {
  background: none;
  color: #6b7280;
}

.gp-hb-reviews__info {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  color: #6b7280;
}

/* ---- Tooltip de la insignia Trustindex (Figma 440-21998) ---- */
.gp-hb-reviews__tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  z-index: 30;
  box-sizing: border-box;
  width: 250px;
  max-width: min(250px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(13, 13, 31, 0.14);
  font-family: "Outfit", var(--gp-hb-font);
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.gp-hb-reviews__badge:hover .gp-hb-reviews__tooltip,
.gp-hb-reviews__badge:focus-within .gp-hb-reviews__tooltip,
.gp-hb-reviews__badge.is-open .gp-hb-reviews__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gp-hb-reviews__tooltip-title {
  margin: 0;
  font-weight: 700;
  color: #4b419e;
}

.gp-hb-reviews__tooltip-text {
  margin: 0;
  font-weight: 400;
  color: #535862;
}

.gp-hb-reviews__tooltip-link {
  font-weight: 400;
  color: #4b419e;
  text-decoration: underline;
}

.gp-hb-reviews__tooltip-link:hover,
.gp-hb-reviews__tooltip-link:focus {
  color: #4b419e;
  text-decoration: underline;
}

/* ---- Tema oscuro (variante configurable, Figma 440-22093) ---- */
.gp-hb-reviews--dark {
  background: #0d0d1f;
}

/* El anillo de los avatares toma el color del fondo oscuro. */
.gp-hb-reviews--dark .gp-hb-reviews__avatar {
  box-shadow: 0 0 0 2px #0d0d1f;
}

.gp-hb-reviews--dark .gp-hb-reviews__toptext,
.gp-hb-reviews--dark .gp-hb-reviews__rating,
.gp-hb-reviews--dark .gp-hb-reviews__link {
  color: #fff;
}

.gp-hb-reviews--dark .gp-hb-reviews__divider {
  background: rgba(255, 255, 255, 0.18);
}

.gp-hb-reviews--dark .gp-hb-reviews__badge {
  background: #0a3d2f;
}

.gp-hb-reviews--dark .gp-hb-reviews__badge-label {
  color: #fff;
}

.gp-hb-reviews--dark .gp-hb-reviews__info {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Tema blanco con borde (variante configurable, Figma 440-22269) ---- */
.gp-hb-reviews--outline {
  background: #fff;
  border: 1px solid #e5e5e5;
}

.gp-hb-reviews--outline .gp-hb-reviews__avatar {
  box-shadow: 0 0 0 2px #fff;
}

/* Texto destacado en gris pizarra e Inter (no morado/Poppins como el claro). */
.gp-hb-reviews--outline .gp-hb-reviews__toptext {
  font-family: "Inter", var(--gp-hb-font);
  font-weight: 400;
  color: #334155;
}

.gp-hb-reviews--outline .gp-hb-reviews__rating,
.gp-hb-reviews--outline .gp-hb-reviews__link {
  color: #64748b;
}

/* La insignia no lleva fondo verde en esta variante. */
.gp-hb-reviews--outline .gp-hb-reviews__badge {
  background: transparent;
}

/* Móvil: tarjeta apilada en vertical, sin divisores (Figma 440-22400). */
@media (max-width: 799px) {
  .gp-hb-reviews {
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 16px;
    border-radius: 32px;
    margin-top: 24px;
  }

  /* En móvil el hero y la barra son tarjetas separadas: se restaura el radio
     completo del hero (la unión recta de desktop no aplica). */
  .gp-herobanner--withbar .gp-herobanner__bg {
    border-radius: 16px;
  }

  .gp-hb-reviews__divider {
    display: none;
  }

  /* Cada grupo ocupa el ancho de la tarjeta y centra su contenido. */
  .gp-hb-reviews__group {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Avatares + texto siguen lado a lado (como en Figma); el texto envuelve
     dentro de su espacio si no cabe en una línea (los avatares no se encogen). */
  .gp-hb-reviews__rated {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .gp-hb-reviews__toptext {
    min-width: 0;
    text-align: left;
  }

  .gp-hb-reviews__toptext,
  .gp-hb-reviews__rating,
  .gp-hb-reviews__link {
    white-space: normal;
  }

  /* En móvil: logo+estrellas en una fila y valoración+enlace en otra. */
  .gp-hb-reviews__google {
    flex-direction: column;
    gap: 12px;
  }

  /* La insignia se ajusta a su contenido (no ocupa todo el ancho). */
  .gp-hb-reviews__badge {
    width: auto;
    max-width: 100%;
  }

  /* El tooltip se centra sobre la insignia (que va centrada en la tarjeta). */
  .gp-hb-reviews__tooltip {
    right: auto;
    left: 50%;
    transform: translate(-50%, 4px);
  }

  .gp-hb-reviews__badge:hover .gp-hb-reviews__tooltip,
  .gp-hb-reviews__badge:focus-within .gp-hb-reviews__tooltip,
  .gp-hb-reviews__badge.is-open .gp-hb-reviews__tooltip {
    transform: translate(-50%, 0);
  }
}

/* ------------------------------------------------------------------------- */
/* TABLET: 800–1199px. Apilado (imagen arriba, texto abajo), como móvil pero  */
/* con más aire y tamaños intermedios. Escritorio (≥1200) y móvil (≤799) NO   */
/* se tocan: esta media query solo cubre el rango intermedio. Va al final del */
/* archivo para sobrescribir las reglas base (escritorio) en este rango.      */
/* ------------------------------------------------------------------------- */
@media (min-width: 800px) and (max-width: 1199px) {
  .gp-herobanner {
    --gp-hb-pop: 48px;
  }

  /* Apilar las dos columnas del hero. */
  .gp-herobanner__inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  /* Imagen arriba, a lo ancho, con la misma proporción del diseño (800/498). */
  .gp-herobanner__media {
    order: -1;
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    align-self: auto;
    aspect-ratio: 800 / 498;
    position: relative;
    margin-top: calc(-1 * var(--gp-hb-pop));
  }

  .gp-herobanner__picture {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
  }

  .gp-herobanner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Difuminado inferior (si está activo) también en tablet. */
  .gp-herobanner--imgfade .gp-herobanner__img {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 6%,
      #000 calc(100% - var(--gp-hb-fade-bottom, 24%)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 6%,
      #000 calc(100% - var(--gp-hb-fade-bottom, 24%)),
      transparent 100%
    );
  }

  .gp-herobanner__content {
    flex: none;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 16px 40px 40px;
  }

  /* Tamaños intermedios (entre móvil 24/22 y escritorio 40/26). */
  .gp-herobanner__title {
    font-size: 34px;
  }

  .gp-herobanner__text {
    max-width: 60ch;
  }

  .gp-herobanner__btn {
    /* Intermedio entre móvil (20px) y desktop (30px); título tablet 34px. */
    align-self: center;
    padding: 14px 28px;
    font-size: 26px;
  }

  /* Barra de reseñas: tarjeta apilada separada (como en móvil); se restaura el
     radio del hero (la unión recta de escritorio no aplica en apilado). */
  .gp-herobanner--withbar .gp-herobanner__bg {
    border-radius: 24px;
  }

  .gp-hb-reviews {
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 16px;
    border-radius: 32px;
    margin-top: 24px;
  }

  .gp-hb-reviews__divider {
    display: none;
  }

  .gp-hb-reviews__group {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }

  .gp-hb-reviews__rated {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .gp-hb-reviews__toptext {
    min-width: 0;
    text-align: left;
  }

  .gp-hb-reviews__toptext,
  .gp-hb-reviews__rating,
  .gp-hb-reviews__link {
    white-space: normal;
  }

  .gp-hb-reviews__google {
    flex-direction: column;
    gap: 12px;
  }

  .gp-hb-reviews__badge {
    width: auto;
    max-width: 100%;
  }

  .gp-hb-reviews__tooltip {
    right: auto;
    left: 50%;
    transform: translate(-50%, 4px);
  }

  .gp-hb-reviews__badge:hover .gp-hb-reviews__tooltip,
  .gp-hb-reviews__badge:focus-within .gp-hb-reviews__tooltip,
  .gp-hb-reviews__badge.is-open .gp-hb-reviews__tooltip {
    transform: translate(-50%, 0);
  }
}


/*# sourceMappingURL=gp_hero_banner.min.css.map*/