/* ---------------------------
   NAV / HEADER
----------------------------*/

/* Barra superior blanca con borde suave */
[data-clientId="DivlhF6"] {
  background-color: #ffffff !important;
  padding: 10px 40px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Contenedor del contenido del header */
[data-clientId="Container5sSi"] {
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo "Soluciones Utilware" */
[data-clientId="SpanD3oz"] p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Menu de navegación */
[data-clientId="Div4OCi"] {
  column-gap: 32px !important;
}

/* Ítems del menú */
[data-clientId="SpanmD7R"],
[data-clientId="SpanjJjP"],
[data-clientId="Spanxic2"],
[data-clientId="SpanjvhX"] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}

/* Botón "Asesoría Gratuita" en el header */
[data-clientId="ButtonAmEd"] {
  border-radius: 999px !important;
  padding: 10px 26px !important;
  background: #2563eb !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

[data-clientId="ButtonAmEd"] [data-clientId="SpanDOLw"] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

/* ---------------------------
   HERO PRINCIPAL
   (DivWWyY / Divss3u)
----------------------------*/

body {
  background-color: #ffffff;
}

/* Sección hero completa */
[data-clientId="DivWWyY"] {
  background-color: #ffffff !important;
  padding: 80px 16px 80px 16px !important;
}

/* Contenedor interno del hero */
[data-clientId="Divss3u"] {
  max-width: 1200px;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 60px !important;
}

/* BLOQUE DE TEXTO (título + párrafo + botones) */
/* Ojo: en tu HTML esto está como "right content", pero visualmente lo queremos a la izquierda */
[data-clientId="DivnGlr"] {
  order: 1;
  width: 50%;
  padding: 40px 0 0 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Título grande: "Soluciones Tecnológicas para PyMEs Exitosas" */
[data-clientId="Span8g10"] p,
[data-clientId="SpannATR"] p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1.1;
  color: #0f172a;
}

/* Asegurar que las líneas del título no tengan márgenes raros */
[data-clientId="Span8g10"] p br,
[data-clientId="SpannATR"] p br {
  line-height: 1.1;
}

/* Párrafo debajo del título */
[data-clientId="ParagraphNhbr"] p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  margin-top: 24px;
}

/* Contenedor de botones debajo del texto */
[data-clientId="Divh8yh"] {
  margin-top: 32px;
  display: flex;
  flex-direction: row;
  column-gap: 16px !important;
}

/* Botón "Asesoría" (azul sólido) */
[data-clientId="Button6NLo"] {
  border-radius: 999px !important;
  padding: 12px 26px !important;
  background: #2563eb !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

[data-clientId="Button6NLo"] [data-clientId="SpanxFCb"] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

/* Botón "Servicios" (borde azul) */
[data-clientId="ButtonUNfG"] {
  border-radius: 999px !important;
  padding: 12px 26px !important;
  background: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #2563eb !important;
  box-shadow: none !important;
}

[data-clientId="ButtonUNfG"] [data-clientId="Spant69J"] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2563eb;
}

/* BLOQUE DE IMÁGENES (los dos celulares) */
[data-clientId="Div0FMS"],
[data-clientId="Div2pva"] {
  order: 2;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ajuste general del contenedor de celulares */
[data-clientId="Div0FMS"] {
  padding-top: 0 !important;
  border-radius: 0 !important;
}

/* Hacemos que las tarjetas de los celulares se vean tipo mockup como en tu imagen */
[data-clientId="DivZ6AU"],
[data-clientId="DivfMek"],
[data-clientId="DivBheQ"],
[data-clientId="DivR6XH"],
[data-clientId="DivQ9HU"] {
  background-image: none !important;
  /* border-radius: 32px !important; */
  /* box-shadow: 0 20px 60px rgba(15, 23, 42, 0.45); */
}

/* Imágenes del hero dentro de esas tarjetas */
[data-clientId="ImagevaLMFGMt"],
[data-clientId="ImagevaLMqe35"],
[data-clientId="ImagevaLMsAuG"],
[data-clientId="ImagevaLMufi7"],
[data-clientId="ImagevaLMh2Gc"] {
  border-radius: 32px !important;
  object-fit: cover;
}

/* Un poco de rotación para que se crucen como en el diseño */
[data-clientId="DivfMek"],
[data-clientId="DivZ6AU"] {
  transform: rotate(-12deg);
}

[data-clientId="DivR6XH"],
[data-clientId="DivQ9HU"] {
  transform: rotate(12deg);
}

/* ---------------------------
   ANIMACIONES CON SCROLL
----------------------------*/

/* Estado inicial: oculto + desplazado */
.cdhs-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Diferentes direcciones según data-cdhs */
.cdhs-init[data-cdhs="left"] {
  transform: translateX(-40px);
}

.cdhs-init[data-cdhs="right"] {
  transform: translateX(40px);
}

.cdhs-init[data-cdhs="up"] {
  transform: translateY(40px);
}

.cdhs-init[data-cdhs="down"] {
  transform: translateY(-40px);
}

.cdhs-init[data-cdhs="zoom-out"] {
  transform: scale(0.9);
}

/* Cuando entran al viewport */
.cdhs-show {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) scale(1) !important;
}

/* ---------------------------
   RESPONSIVE
----------------------------*/

@media (max-width: 960px) {
  [data-clientId="Divss3u"] {
    flex-direction: column;
    text-align: center;
  }

  [data-clientId="DivnGlr"],
  [data-clientId="Div0FMS"],
  [data-clientId="Div2pva"] {
    width: 100%;
  }

  [data-clientId="DivnGlr"] {
    align-items: center;
  }

  [data-clientId="Divh8yh"] {
    justify-content: center;
  }
}

[data-clientId="DivZ6AU"],
[data-clientId="DivR6XH"],
[data-clientId="DivBheQ"],
[data-clientId="DivQ9HU"] {
  background-image: url(/assets/images/asset-58a2e0e0.png) !important;
}