/* Fizoft — estilos base: fuentes, reset, animaciones y estados de interacción.
   El layout de cada página va en estilos inline dentro del HTML. */
* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #16242E; background: #F4F8F9; -webkit-font-smoothing: antialiased; }
  ::selection { background: #007AA0; color: #fff; }
  @keyframes fzGlow { 0%,100% { opacity:.5; } 50% { opacity:1; } }
  @keyframes fzDash { to { stroke-dashoffset: -24; } }
  @keyframes fooFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
  @keyframes fooPulse { 0%,100% { opacity:.35; transform: scale(1); } 50% { opacity:.85; transform: scale(1.3); } }
  @keyframes fooScan { 0% { top:6%; } 100% { top:90%; } }
  a { color: inherit; }

/* Logos de clientes en las tarjetas de testimonio: alto fijo para que tres
   logos de proporciones distintas queden alineados. */
.cliente-logo { height: 46px; display: flex; align-items: center; }
.cliente-logo img { max-height: 46px; max-width: 170px; object-fit: contain; }

/* Botón flotante de WhatsApp. El href lo trae cada página con su mensaje. */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  z-index: 900;
  text-decoration: none;
}
.wa-float:hover { transform: scale(1.08); background: #1fbd5a; }
.wa-float svg { width: 30px; height: 30px; display: block; }
@media (max-width: 640px) {
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 27px; height: 27px; }
}

/* Interacción */
a, article, button, [data-href] { transition: box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; }
[data-href] { cursor: pointer; }
.x1:hover { box-shadow:0 16px 40px rgba(0,60,80,.12) !important; transform:translateY(-3px) !important; border-color:#CFE0E4 !important }
.x2:hover { box-shadow:0 14px 36px rgba(0,60,80,.1) !important; border-color:#CFE0E4 !important }
.x3:focus { border-color:#007AA0 !important }
.x4:hover { box-shadow:0 16px 40px rgba(0,60,80,.1) !important }
.x5:hover { box-shadow:0 14px 36px rgba(0,60,80,.1) !important; transform:translateY(-3px) !important }


/* ==========================================================================
   RESPONSIVE

   El diseño original se hizo a 1280px y todo el layout vive en estilos inline,
   asi que las reglas de acá apuntan al atributo style y necesitan !important
   para ganarle a la línea. Los selectores están anclados al nombre de la
   propiedad (grid-template-columns:...) para que no matcheen de más.

   Breakpoints:  1024px tablet  ·  900px nav  ·  640px celular
   ========================================================================== */

/* --- Tablet ------------------------------------------------------------
   Las grillas de muchas columnas bajan a 2, y las de dos columnas se apilan
   ya acá: varias llevan un gráfico de ancho fijo (el hexágono del hero mide
   440px) que no entra en media pantalla de tablet. */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {   /* footer */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns:repeat(8,1fr)"] {        /* grilla de logos */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.02fr .98fr"],
  [style*="grid-template-columns:1.04fr .96fr"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:1.06fr .94fr"],
  [style*="grid-template-columns:1.08fr .92fr"],
  [style*="grid-template-columns:1.12fr .88fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns:1.24fr .76fr"],
  [style*="grid-template-columns:1.4fr 1fr"]:not([style*="1.4fr 1fr 1fr 1fr"]),
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr .82fr"],
  [style*="grid-template-columns:1fr .95fr"],
  [style*="grid-template-columns:.62fr 1fr"],
  [style*="grid-template-columns:.72fr 1.28fr"],
  [style*="grid-template-columns:.82fr 1.18fr"],
  [style*="grid-template-columns:.86fr 1.14fr"],
  [style*="grid-template-columns:.9fr 1.1fr"],
  [style*="grid-template-columns:.92fr 1.08fr"],
  [style*="grid-template-columns:.94fr 1.06fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --- El hexágono del ecosistema ----------------------------------------
   Mide 440x440 fijos y adentro conviven hijos en porcentaje (el SVG del
   hexágono, la bola central) con nodos en píxeles absolutos. Achicar la caja
   + transform los desalinea: los porcentajes se recalculan contra la caja
   nueva Y se escalan (doble reducción), los píxeles solo se escalan. zoom
   escala render y layout juntos con los porcentajes resolviendo contra el
   tamaño original, así todo queda en un mismo sistema. */
@media (max-width: 600px) {
  [style*="width:440px;height:440px"] { zoom: .7; }
}
@media (max-width: 380px) {
  [style*="width:440px;height:440px"] { zoom: .6; }
}

/* --- Nav: hamburguesa ---------------------------------------------------
   Los <nav> tienen la misma estructura en las 17 páginas: el logo, un <div>
   con los links, y el CTA. Por eso "nav > div:first-of-type" da siempre el
   bloque de links, tanto en el header claro como en los de producto. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 38px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 9px;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  order: 3;
}
.nav-toggle:hover { opacity: 1; }
.nav-toggle span {
  position: relative;
  display: block;
  width: 17px; height: 1.5px;
  background: currentColor;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: currentColor;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top:  5.5px; }

@media (max-width: 900px) {
  header nav { flex-wrap: wrap !important; gap: 12px !important; }
  .nav-toggle { display: inline-flex; }

  /* El bloque de links se esconde y reaparece como columna a lo ancho */
  header nav > div:first-of-type {
    display: none !important;
    order: 4;
    flex-basis: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 6px;
  }
  header nav.nav-open > div:first-of-type { display: flex !important; }
  header nav > div:first-of-type > a {
    width: 100%;
    padding: 10px 2px;
    border-top: 1px solid rgba(128,128,128,.18);
  }

  /* El CTA queda antes del botón, sin empujarlo fuera de la barra */
  header nav > a[href*="whatsapp"],
  header nav > div:last-of-type { margin-left: auto !important; order: 2; }
  header nav > div:last-of-type + .nav-toggle,
  header nav > a[href*="whatsapp"] + .nav-toggle { margin-left: 0; }

  /* Con el CTA a tamaño de escritorio, logo + CTA + botón suman apenas mas que
     el ancho de un celular y la hamburguesa cae sola a una segunda fila. */
  header nav > a[href*="whatsapp"],
  header nav > div:last-of-type > a[href*="whatsapp"] {
    padding: 9px 13px !important;
    font-size: 13.5px !important;
  }
  header nav > a[style*="font-size:23px"] { font-size: 20px !important; }
}

/* --- Celular ----------------------------------------------------------- */
@media (max-width: 640px) {
  /* Lo que en tablet quedo en 2 columnas, acá va a 1. Se excluye repeat(8),
     que en Odizoft es un odontograma de celdas chiquitas: en una sola columna
     no se entiende. Queda en las 4 columnas que le puso el breakpoint de
     tablet. */
  [style*="grid-template-columns:repeat("]:not([style*="repeat(8,1fr)"]),
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 88px 1fr"] {   /* comparativa antes/después */
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Los grid chicos de icono + texto mantienen su columna fija, pero el track
     flexible tiene que poder achicarse por debajo de su contenido: si no, una
     tabla adentro empuja toda la pagina a lo ancho. */
  [style*="grid-template-columns:46px 1fr"] { grid-template-columns: 46px minmax(0, 1fr) !important; }
  [style*="grid-template-columns:44px 1fr"] { grid-template-columns: 44px minmax(0, 1fr) !important; }
  [style*="grid-template-columns:26px 1fr 62px"] { grid-template-columns: 26px minmax(0, 1fr) 62px !important; }

  /* Márgenes laterales: 32px es demasiado en un celular */
  [style*="max-width:900px;margin:0 auto"],
  [style*="max-width:1000px;margin:0 auto"],
  [style*="max-width:1200px;margin:0 auto"],
  [style*="max-width:1220px;margin:0 auto"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Titulos: en el diseño van de 48 a 62px, que no entran en 375px */
  h1 { font-size: clamp(29px, 8.2vw, 40px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; line-height: 1.25 !important; }

  /* Nada se sale del ancho de la pantalla */
  img, svg { max-width: 100% !important; }
  a[style*="white-space:nowrap"] { white-space: normal !important; }

  /* Los CTA a pantalla completa se leen mejor que centrados y angostos */
  [style*="border-radius:24px"][style*="display:flex"] { padding: 34px 24px !important; }

  /* El "volver al ecosistema" de los headers de producto no entra */
  header nav > div:last-of-type > a:first-child { display: none !important; }

  /* Filas flex que no entran: las maquetas de celular (206px cada una, de a
     dos) y las tiras de stats del hero. flex-wrap solo hace efecto cuando el
     contenido desborda, asi que no altera las filas que ya entraban.
     No matchea display:inline-flex, que son los chips y botones chicos. */
  [style*="display:flex"] { flex-wrap: wrap !important; }

  /* Separadores verticales de 1px: sueltos en su propia linea no significan
     nada una vez que la fila envolvio. */
  [style*="width:1px;background"] { display: none !important; }
}

/* Maquetas decorativas que asoman a proposito fuera de su contenedor: en
   pantallas chicas ese desborde se vuelve scroll horizontal. */
@media (max-width: 1024px) {
  [style*="right:-4%"] { right: 0 !important; }
  [style*="left:-4%"] { left: 0 !important; }
}