/* Estilos de la Sección Hero Profic (Pixel Perfect & Flexible) */

/* Neutralizar spacing de Elementor alrededor del Hero (Figma: gap 0 con Marcas).
 * El kit puede inyectar `.elementor-widget:not(:last-child){margin-block-end:20px}`. */
.elementor-widget-profic_hero,
.elementor-widget-profic_hero:not(:last-child),
.elementor-widget-profic_hero > .elementor-widget-container {
  margin: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
}

.profic-hero-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  /* Mobile-first — Design-Profic-Mike Mobile Hero 202:4879:
   * Hero y=90 + Frame 89 y=70 → pad-top 160; pad-bottom 70 (Frame). */
  padding: 160px 18px 70px;
  /* Spill de glows hacia SEO/Misión; clip solo en X */
  overflow: visible;
  display: flex;
  box-sizing: border-box;
  z-index: 1;
}

/* Contenedor de Fondos Decorativos
 * Figma Desktop artboard = 1280px. Anclamos coords left/top a ese frame
 * centrado para que no se desplacen en viewports ≠ 1280. */
.profic-hero-backgrounds {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1280px;
  margin-left: -640px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Estructura Base — Figma Dev Mode: size + left/top + transform en el mismo nodo */
.profic-hero-glow-rect-container,
.profic-hero-glow-grad-container {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  flex: none;
}

.profic-hero-glow-rect-inner,
.profic-hero-glow-grad-inner {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
  box-sizing: border-box;
}

.profic-hero-glow-rect-img,
.profic-hero-glow-grad-img {
  position: absolute;
  inset: 0;
  max-width: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* PNG trae fondo negro + glow: screen deja solo el color (como ellipse en Figma) */
  mix-blend-mode: screen;
}

/* Línea Curva de Fondo (SVG) */
.profic-hero-bg-line {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.profic-hero-bg-line-inset {
  position: absolute;
  width: 100%;
  height: 100%;
}

.profic-hero-bg-line svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Una sola curva visible por viewport.
 * El widget imprime las 2 SVGs (viewBox/opacidad distintos);
 * sin display, ambas quedan position:absolute y se superponen.
 * Mobile-first — mismo corte 800px que el resto del Hero. */
.profic-hero-bg-line.profic-line-desktop {
  display: none;
}

.profic-hero-bg-line.profic-line-mobile {
  display: block;
}

@media (min-width: 800px) {
  .profic-hero-bg-line.profic-line-desktop {
    display: block;
  }

  .profic-hero-bg-line.profic-line-mobile {
    display: none;
  }
}

/* Contenedor de Contenido Principal */
.profic-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Bloque de Texto y CTA
 * Figma Hero responsive:
 *   Desktop ≥1280 → title 48/52.8, sub 18/26.64
 *   Tablet  800–1279 → title 36/39.6, sub 14/20.44
 *   Mobile  <800 → title 32/36.8, sub 12/18 (202:4886 / 202:4887)
 *   CTA → Amsi Pro SemiBold 600 / 16px / LH 16px / LS 0 / #FFF
 * Gaps Figma: itemSpacing 36px (title→sub→cta).
 */
.profic-hero-content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.profic-hero-title {
  font-family: 'Amsi Pro', sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #e8e8e8;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: 0;
  margin: 0 0 36px 0;
  padding: 0;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.profic-hero-subtitle {
  font-family: 'Amsi Pro', sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #d8d8d8;
  font-size: 18px;
  line-height: 26.64px;
  letter-spacing: 0;
  margin: 0 0 36px 0;
  padding: 0;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.profic-hero-cta-container {
  display: flex;
}

/* Estilos/estados del CTA: assets/css/profic-cta-btn.css (Figma Boton 1:7) */
.profic-hero-btn {
  min-width: 148px;
}

/* Burbuja de Diálogo (Chat Asistente) */
.profic-hero-chat-container {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.profic-hero-chat-bubble {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 30px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  animation: profic-float 6s ease-in-out infinite;
  padding: 10px;
}

/* Borde sutil */
.profic-hero-chat-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.2px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Texto de la Burbuja */
.profic-chat-text-box {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px 10px 20px;
}

.profic-chat-text {
  font-family: 'Amsi Pro', sans-serif;
  font-weight: 400; /* Regular */
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Botones de la Burbuja */
.profic-chat-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.profic-chat-btn-plus,
.profic-chat-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  padding: 0;
}

.profic-chat-btn-plus svg,
.profic-chat-btn-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.profic-chat-btn-plus:hover,
.profic-chat-btn-arrow:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.profic-chat-btn-plus:active,
.profic-chat-btn-arrow:active {
  transform: scale(0.95);
}

/* ================= ANIMACIONES ================= */
@keyframes profic-float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* ================= BREAKPOINTS DE RESPONSIVE ================= */

/* MODO DESKTOP (ancho >= 1280px)
 * Figma Home/Desktop:
 *   Menu (1:1137) y=37 h=70 (header absolute, fuera de flujo).
 *   Hero (1:760)  y=90 h=598, contenido interno +96 → texto a y=186.
 *   Marcas (1:771) y=688 → gap Hero→Marcas = 0.
 * padding-top = 90 (offset del frame) + 96 (inset Figma) = 186.
 * No usar min-height > contenido: rompe el gap inferior con Marcas. */
@media (min-width: 1280px) {
  .profic-hero-section {
    padding: 186px 120px 140px 120px;
    min-height: 0;
    height: auto;
  }

  .profic-hero-container {
    flex-direction: row;
    justify-content: center;
    gap: 106px;
  }

  .profic-hero-content {
    width: 482px; /* Figma 1:766 */
    text-align: left;
  }

  .profic-hero-title {
    text-align: left;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 0;
  }

  .profic-hero-subtitle {
    text-align: left;
    font-size: 18px;
    line-height: 26.64px;
    letter-spacing: 0;
  }

  .profic-hero-btn {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;
    font-weight: 600;
  }

  .profic-hero-cta-container {
    justify-content: flex-start;
  }

  .profic-hero-chat-container {
    width: 467px;
    height: 347px;
    position: relative;
  }

  .profic-hero-chat-bubble {
    width: 452px;
    height: 131px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: profic-float-desktop 6s ease-in-out infinite;
  }

  @keyframes profic-float-desktop {
    0% {
      transform: translateX(-50%) translateY(0px);
    }
    50% {
      transform: translateX(-50%) translateY(-10px);
    }
    100% {
      transform: translateX(-50%) translateY(0px);
    }
  }

  .profic-chat-text {
    font-size: 14px;
  }

  .profic-chat-buttons {
    height: 45px;
    padding-bottom: 5px;
  }

  .profic-chat-btn-plus,
  .profic-chat-btn-arrow {
    width: 40px;
    height: 40px;
  }

  /* Fondos Desktop — Figma Hero: ellipse + layer blur ~194px
   * PNG = fill suave sobre negro → screen quita el negro; blur = soft Figma. */
  .profic-hero-glow-rect-container {
    width: 1073px;
    height: 2136px;
    left: -332px;
    top: 1825px;
    z-index: 0;
    transform: rotate(-90deg);
    filter: blur(197.75px);
    border-radius: 1068px;
    opacity: 0.85;
  }

  .profic-hero-glow-rect-inner {
    border-radius: 1068px;
  }

  .profic-hero-glow-rect-img {
    border-radius: 1068px;
  }

  .profic-hero-glow-grad-container {
    width: 1363.24px;
    height: 1464.64px;
    left: 566px;
    top: -700.87px;
    z-index: 1;
    opacity: 0.92;
    transform: rotate(-15.13deg);
    filter: blur(193.55px);
  }

  .profic-hero-bg-line {
    width: 1052px;
    height: 923px;
    left: 433px;
    top: -192px;
    opacity: 0.21;
    z-index: 2;
  }

  .profic-hero-bg-line-inset {
    inset: -3.81% -8.8%;
  }

  .profic-hero-bg-line svg path {
    opacity: 1;
  }
}

/* MODO TABLET (800px <= ancho < 1280px)
 * Figma Tablet Hero 1:1140 / 2:541:
 *   Hero y=90 + Frame 89 y=96 x=80 → padding-top 186, sides 80.
 *   Menú fixed y=37 h=70 → termina en 107; 186 deja aire bajo el pill. */
@media (min-width: 800px) and (max-width: 1279px) {
  .profic-hero-section {
    padding: 186px 80px 96px;
  }

  .profic-hero-container {
    flex-direction: column;
    justify-content: center;
    gap: 106px;
  }

  .profic-hero-content {
    width: 100%;
    max-width: 640px;
    text-align: center;
  }

  /* Tablet Figma Hero 1:8 — title 640×80 (36/39.6), sub 640×40 (14/20.44) */
  .profic-hero-title {
    text-align: center;
    font-size: 36px;
    line-height: 39.6px;
    letter-spacing: 0;
  }

  .profic-hero-subtitle {
    text-align: center;
    font-size: 14px;
    line-height: 20.44px;
    letter-spacing: 0;
  }

  .profic-hero-btn {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;
    font-weight: 600;
  }

  .profic-hero-cta-container {
    justify-content: center;
  }

  .profic-hero-chat-container {
    width: 452px;
    height: 347px;
    position: relative;
  }

  .profic-hero-chat-bubble {
    width: 452px;
    height: 131px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: profic-float-tablet 6s ease-in-out infinite;
  }

  @keyframes profic-float-tablet {
    0% {
      transform: translateX(-50%) translateY(0px);
    }
    50% {
      transform: translateX(-50%) translateY(-10px);
    }
    100% {
      transform: translateX(-50%) translateY(0px);
    }
  }

  .profic-chat-text {
    font-size: 14px;
  }

  .profic-chat-buttons {
    height: 45px;
    padding-bottom: 5px;
  }

  .profic-chat-btn-plus,
  .profic-chat-btn-arrow {
    width: 40px;
    height: 40px;
  }

  /* Fondos Tablet — artboard 800px; misma lógica: tamaño + left/top + transform en el contenedor */
  .profic-hero-backgrounds {
    width: 800px;
    margin-left: -400px;
  }

  .profic-hero-glow-rect-container {
    width: 1073px;
    height: 2136px;
    left: -677px;
    top: 1488px;
    opacity: 0.8;
    border-radius: 1068px;
    filter: blur(197.75px);
    transform: rotate(-90deg);
  }

  .profic-hero-glow-rect-inner {
    width: 100%;
    height: 100%;
    transform: none;
    filter: none;
    border-radius: inherit;
  }

  .profic-hero-glow-rect-img {
    border-radius: inherit;
  }

  .profic-hero-glow-grad-container {
    width: 1747.713px;
    height: 552.238px;
    left: -69.575px;
    top: 470.4px;
    opacity: 0.66;
    filter: blur(118.4px);
    transform: rotate(0.43deg);
  }

  .profic-hero-glow-grad-inner {
    width: 100%;
    height: 100%;
    transform: none;
    filter: none;
    opacity: 1;
  }

  .profic-hero-bg-line {
    width: 1052px;
    height: 923px;
    left: -219px;
    top: -94px;
  }

  .profic-hero-bg-line-inset {
    inset: -3.81% -8.8%;
  }

  .profic-hero-bg-line svg path {
    opacity: 0.62;
  }
}

/* MODO MÓVIL (ancho < 800px)
 * Design-Profic-Mike Mobile Hero (202:4879):
 *   Frame 89 x=18 y=70 w=339 · col texto 255 · chat 339×260.25 · gap 106. */
@media (max-width: 799px) {
  .profic-hero-section {
    padding: 160px 18px 70px;
  }

  .profic-hero-container {
    flex-direction: column;
    justify-content: center;
    gap: 106px;
  }

  .profic-hero-content {
    /* 202:4884/4885 — columna 255 centrada en Frame 89; pad Y 30 */
    width: 100%;
    max-width: 255px;
    text-align: center;
    padding: 30px 0;
  }

  /* 202:4886 / site 1:6 — Light 32 / 36.8 (caja 255×148 ≈ 4 líneas) */
  .profic-hero-title {
    text-align: center;
    font-size: 32px;
    line-height: 36.8px;
    letter-spacing: 0;
  }

  /* 202:4887 / site 35:548 — Light 12 / 18 (caja 255×72) */
  .profic-hero-subtitle {
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
  }

  .profic-hero-btn {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;
    font-weight: 600;
  }

  .profic-hero-cta-container {
    justify-content: center;
  }

  .profic-hero-chat-container {
    width: 100%;
    max-width: 339px; /* 202:4889 */
    height: 260.25px;
    position: relative;
  }

  .profic-hero-chat-bubble {
    width: 100%;
    max-width: 339px;
    height: 98.25px;
    padding: 7.5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: profic-float-mobile 6s ease-in-out infinite;
  }

  @keyframes profic-float-mobile {
    0% {
      transform: translateX(-50%) translateY(0px);
    }
    50% {
      transform: translateX(-50%) translateY(-10px);
    }
    100% {
      transform: translateX(-50%) translateY(0px);
    }
  }

  .profic-hero-chat-bubble::after {
    border-width: 0.9px;
    border-radius: 30px;
  }

  .profic-chat-text-box {
    padding: 15px 15px 7.5px 15px;
  }

  .profic-chat-text {
    font-size: 10.5px;
  }

  .profic-chat-buttons {
    height: 33.75px;
    padding-bottom: 3.75px;
  }

  .profic-chat-btn-plus,
  .profic-chat-btn-arrow {
    width: 30px;
    height: 30px;
  }

  /* Fondos Mobile — artboard ~390px; tamaño + left/top + transform en el contenedor */
  .profic-hero-backgrounds {
    width: 390px;
    margin-left: -195px;
  }

  .profic-hero-glow-rect-container {
    width: 1001px;
    height: 1891px;
    left: 81px;
    top: 1476px;
    opacity: 0.8;
    border-radius: 801px;
    filter: blur(148.313px);
    transform: rotate(-90deg);
  }

  .profic-hero-glow-rect-inner {
    width: 100%;
    height: 100%;
    transform: none;
    filter: none;
    border-radius: inherit;
  }

  .profic-hero-glow-rect-img {
    border-radius: inherit;
  }

  .profic-hero-glow-grad-container {
    width: 942.539px;
    height: 772.267px;
    left: -3.172px;
    top: 461.451px;
    opacity: 0.92;
    filter: blur(122.15px);
    transform: none;
  }

  .profic-hero-glow-grad-inner {
    width: 100%;
    height: 100%;
    transform: none;
    filter: none;
    opacity: 1;
  }

  .profic-hero-bg-line {
    width: 718px;
    height: 629px;
    left: -190px;
    top: 411px;
  }

  .profic-hero-bg-line-inset {
    inset: -5.6% -12.89%;
  }

  .profic-hero-bg-line svg path {
    opacity: 0.76;
  }
}

/* Chat a todo el content box en teléfonos (Figma 339 / artboard 375). */
@media (max-width: 479px) {
  .profic-hero-chat-container,
  .profic-hero-chat-bubble {
    max-width: none;
    width: 100%;
  }
}

/* WP Admin Bar — el menú fixed baja 32px (desktop) / 46px (≤782px);
 * el padding-top del Hero acompaña para no quedar tapado. */
body.admin-bar .profic-hero-section {
  padding-top: calc(160px + 32px);
}

@media (min-width: 800px) {
  body.admin-bar .profic-hero-section {
    padding-top: calc(186px + 32px);
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar .profic-hero-section {
    padding-top: calc(160px + 46px);
  }
}