/* =========================================================================
   Logon Child — Sistema visual de Grupo Logon (logon.es)  ·  RECETA 02 (IT)
   Paleta (Fase 1 §4): primario #5D8DC6 · oscuro #1E3656 · acento CTA #D59700
   Fondos #F4F7FA / #FFFFFF · Tipografía Inter.
   El GRUESO del estilo va en atributos D5 reales de cada módulo (fondos, sombras,
   color de icono, tipografía). Este CSS añade POLISH no expresable cómodamente en
   atributos: patrón del hero, hover de tarjetas, botones en línea, logos grayscale.
   ========================================================================= */
:root {
  --logon-primary:   #5D8DC6;
  --logon-secondary: #1E3656;
  --logon-cta:       #D59700;
  --logon-cta-hover: #b97f00;
  --logon-bg-soft:   #F4F7FA;
  --logon-bg:        #FFFFFF;
  --logon-text:      #1E3656;
  --logon-muted:     #5a6b82;
}

/* --- Tipografía base --- */
body,
.et_pb_text,
.et_pb_module { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--logon-secondary); line-height: 1.2; font-weight: 700;
}

/* =========================================================================
   HERO  (.logon-hero) — gradiente de marca + patrón sutil + centrado
   ========================================================================= */
.logon-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--logon-secondary) 0%, var(--logon-primary) 100%) !important;
}
.logon-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 1px, transparent 0);
  background-size: 26px 26px;
}
.logon-hero > .et_pb_row, .logon-hero .et_pb_row { position: relative; z-index: 1; }
.logon-hero h1 { color: #fff !important; }
.logon-hero .et_pb_text, .logon-cta .et_pb_text { color: rgba(255,255,255,.9); }

/* =========================================================================
   FILA DE BOTONES (.logon-btn-row) — columna flex: misma línea base, mismo alto,
   alineación coherente en TODOS los breakpoints (en móvil hacen wrap centrados).
   Hacer flex el contenedor evita la guerra de especificidad con el CSS de Divi:
   los botones son flex items, no dependen de su `display` propio. (§3.1, §6)
   ========================================================================= */
.logon-btn-row.et_pb_column,
.logon-btn-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin-top: 8px;
}
.logon-btn-row--center { justify-content: center; }
.logon-btn-row--left   { justify-content: flex-start; }
.logon-btn-row--right  { justify-content: flex-end; }
.logon-btn-row .et_pb_button_module_wrapper,
.logon-btn-row .et_pb_button_module {
  display: inline-flex !important;
  margin: 0 !important;
  float: none !important;
}
/* Padding/altura uniformes para TODOS los botones de la fila (mismo alto y línea base):
   especificidad (0,2,1) para ganar a las reglas por estilo y al padding por defecto de Divi. */
.logon-btn-row a.et_pb_button { margin: 0 !important; padding: 13px 30px !important; line-height: 1.5 !important; }

/* =========================================================================
   BOTONES — CTA ámbar / outline blanco / primario / outline oscuro
   (refuerzo robusto de los atributos D5; clases puestas en cada módulo botón)
   ========================================================================= */
.logon-btn-cta a.et_pb_button, .logon-btn-cta .et_pb_button, a.et_pb_button.logon-btn-cta {
  background-color: var(--logon-cta) !important; color: #fff !important;
  border: 2px solid var(--logon-cta) !important; padding: .8em 1.9em !important;
  border-radius: 6px !important; font-weight: 700 !important; transition: all .2s ease;
}
.logon-btn-cta a.et_pb_button:hover, .logon-btn-cta .et_pb_button:hover {
  background-color: var(--logon-cta-hover) !important; border-color: var(--logon-cta-hover) !important;
}
.logon-btn-primary a.et_pb_button, .logon-btn-primary .et_pb_button {
  background-color: var(--logon-primary) !important; color: #fff !important;
  border: 2px solid var(--logon-primary) !important; padding: .8em 1.9em !important;
  border-radius: 6px !important; font-weight: 600 !important; transition: all .2s ease;
}
.logon-btn-primary a.et_pb_button:hover, .logon-btn-primary .et_pb_button:hover {
  background-color: var(--logon-secondary) !important; border-color: var(--logon-secondary) !important;
}
.logon-btn-outline-white a.et_pb_button, .logon-btn-outline-white .et_pb_button {
  background-color: transparent !important; color: #fff !important;
  border: 2px solid #fff !important; padding: .8em 1.9em !important;
  border-radius: 6px !important; font-weight: 600 !important; transition: all .2s ease;
}
.logon-btn-outline-white a.et_pb_button:hover, .logon-btn-outline-white .et_pb_button:hover {
  background-color: #fff !important; color: var(--logon-secondary) !important;
}
.logon-btn-secondary a.et_pb_button, .logon-btn-secondary .et_pb_button {
  background-color: transparent !important; color: var(--logon-secondary) !important;
  border: 2px solid var(--logon-secondary) !important; padding: .8em 1.9em !important;
  border-radius: 6px !important; font-weight: 600 !important; transition: all .2s ease;
}
.logon-btn-secondary a.et_pb_button:hover, .logon-btn-secondary .et_pb_button:hover {
  background-color: var(--logon-secondary) !important; color: #fff !important;
}
.logon-btn-white a.et_pb_button, .logon-btn-white .et_pb_button {
  background-color: #fff !important; color: var(--logon-secondary) !important;
  border: 2px solid #fff !important; padding: .8em 1.9em !important;
  border-radius: 6px !important; font-weight: 700 !important; transition: all .2s ease;
}
.logon-btn-white a.et_pb_button:hover, .logon-btn-white .et_pb_button:hover {
  background-color: var(--logon-cta) !important; border-color: var(--logon-cta) !important; color: #fff !important;
}

/* =========================================================================
   TARJETAS DE SERVICIO  (.logon-card = blurb)  — fondo blanco + sombra + hover
   ========================================================================= */
.logon-card.et_pb_blurb, .logon-card {
  background: #fff !important; border: 1px solid #eef2f7;
  border-radius: 14px !important; padding: 34px 30px !important;
  box-shadow: 0 12px 34px rgba(30,54,86,.08) !important;
  height: 100%; transition: transform .22s ease, box-shadow .22s ease;
}
.logon-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(30,54,86,.14) !important; }
.logon-card .et_pb_module_header, .logon-card h4, .logon-card .et_pb_blurb_container h4 {
  color: var(--logon-secondary) !important; font-weight: 700; font-size: 1.25rem; margin-top: 6px;
}
.logon-card .et_pb_blurb_description, .logon-card p { color: var(--logon-muted) !important; line-height: 1.7; }
/* Icono lineal en círculo suave de marca */
.logon-card .et_pb_main_blurb_image { margin-bottom: 14px; }
.logon-card .et-pb-icon {
  color: var(--logon-primary) !important; font-size: 44px !important;
  width: 84px; height: 84px; line-height: 84px !important; text-align: center;
  background: rgba(93,141,198,.12); border-radius: 50%; display: inline-block;
}
/* Igualar alturas de tarjetas en la fila */
.et_pb_row .logon-card-col { display: flex; }
.logon-card-col > .et_pb_module, .logon-card-col .logon-card { width: 100%; }

/* =========================================================================
   BANDA DE VALOR / PILARES  (.logon-band, .logon-pillar) — sobre color oscuro
   ========================================================================= */
.logon-band { background: var(--logon-secondary) !important; }
.logon-band h2, .logon-band h6, .logon-band .et_pb_module_header { color: #fff !important; }
.logon-pillar .et-pb-icon { color: var(--logon-cta) !important; font-size: 46px !important; }
.logon-pillar .et_pb_module_header, .logon-pillar h4 { color: #fff !important; font-weight: 700; }
.logon-pillar .et_pb_blurb_description, .logon-pillar p { color: rgba(255,255,255,.82) !important; }
/* §4.1: centrar el ICONO de los 4 pilares igual que el título y el texto (ya centrados).
   La regla previa no llevaba !important y perdía contra el CSS de Divi (alineación izq.). */
.logon-band .logon-pillar .et_pb_main_blurb_image,
.logon-pillar .et_pb_main_blurb_image {
  display: block !important; text-align: center !important;
  margin-left: auto !important; margin-right: auto !important;
}
.logon-band .logon-pillar .et_pb_main_blurb_image .et-pb-icon,
.logon-pillar .et_pb_main_blurb_image .et-pb-icon,
.logon-pillar .et_pb_main_blurb_image .et_pb_image_wrap {
  display: inline-block !important; float: none !important; margin: 0 auto !important;
}

/* =========================================================================
   CTA DE CIERRE (.logon-cta) — degradado de marca + texto blanco
   ========================================================================= */
.logon-cta {
  background: linear-gradient(120deg, var(--logon-primary) 0%, var(--logon-secondary) 100%) !important;
}
.logon-cta h2, .logon-cta .et_pb_module_header { color: #fff !important; }
.logon-cta .et_pb_text, .logon-cta p { color: rgba(255,255,255,.92) !important; }

/* =========================================================================
   BANDA DE LOGOS  (.logon-logos) — alineado y grayscale opcional
   ========================================================================= */
.logon-logos .et_pb_image, .logon-logos .logon-logo { text-align: center; }
.logon-logos img { max-height: 56px; width: auto; display: inline-block; }
.logon-logos--gray img { filter: grayscale(1); opacity: .65; transition: all .25s ease; }
.logon-logos--gray img:hover { filter: none; opacity: 1; }

/* =========================================================================
   DIVISOR DE ACENTO bajo los H2 (módulo divider centrado)
   ========================================================================= */
.et_pb_section .et_pb_divider { margin: 0 auto; }

/* =========================================================================
   THEME BUILDER — Header (.logon-header) y Footer (.logon-footer) globales
   ========================================================================= */
/* §1.1: STICKY + ESTRECHADO. El header del TB se fija arriba (position:sticky en .et-l--header) y se
   estrecha al hacer scroll (clase body.logon-scrolled que pone logon-header.js). Transición ~0.35s
   (la referencia usa 0.4s). Normal: padding 8px / logo 150px; sticky: padding 2px / logo 116px. */
/* position:FIXED (no sticky): un ancestro #page-container tiene overflow:auto/hidden, que rompe el
   position:sticky relativo al viewport. Fixed lo evita; se compensa con un spacer (padding-top en
   #page-container = alto normal del header) para que el contenido no quede oculto bajo el header. */
.et-l--header, .et-l--header.et-l { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; }
/* Spacer del header fijo. Se usa el selector de Divi (.et-tb-has-header #page-container) + body para
   ganar especificidad/!important a la regla de Divi que lo pone a 0 (sobre todo en móvil). */
#page-container,
body.et-tb-has-header #page-container, body.et-tb #page-container { padding-top: 92px !important; }
.logon-header { background: #fff !important; box-shadow: 0 2px 14px rgba(30,54,86,.06);
  padding-top: 8px !important; padding-bottom: 8px !important;
  transition: padding .35s ease, box-shadow .35s ease; }
.logon-header .et_pb_menu__logo img, .logon-header .logon-logo img {
  max-width: 134px; height: auto; transition: max-width .35s ease; }
/* Barra estrecha: anular el padding de fila/columna/contenedor del menú que la engordaba. */
.logon-header .et_pb_row, .logon-header .et_pb_row .et_pb_column { padding-top: 0 !important; padding-bottom: 0 !important; }
.logon-header .et_pb_menu_inner_container { padding-top: 0 !important; padding-bottom: 0 !important; }
body.logon-scrolled .logon-header { padding-top: 2px !important; padding-bottom: 2px !important;
  box-shadow: 0 4px 18px rgba(30,54,86,.12); }
body.logon-scrolled .logon-header .et_pb_menu__logo img,
body.logon-scrolled .logon-header .logon-logo img { max-width: 104px; }

/* §1.3: tipografía del menú y submenús en MAYÚSCULAS + ligero letter-spacing (Inter respira mejor). */
.logon-header .et_pb_menu .et-menu a,
.logon-header nav a { color: var(--logon-secondary) !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; }
.logon-header .et_pb_menu .et-menu a:hover, .logon-header nav a:hover { color: var(--logon-primary) !important; }

/* §2.3: alinear verticalmente logo/menú/CTA — flex SOLO en la FILA (no en columnas ni <li>). */
.logon-header .et_pb_row { display: flex !important; align-items: center !important; flex-wrap: nowrap; }
.logon-header .et_pb_row .et_pb_column { margin-bottom: 0 !important; align-self: center; }
.logon-header .et_pb_button_module_wrapper { margin: 0 !important; }

/* §1.2: logo a la IZQUIERDA, menú EMPUJADO A LA DERECHA (separado del logo). El contenedor real
   es .et_pb_menu_inner_container (flex); se lleva a ancho completo y se reparte con space-between. */
.logon-header .et_pb_menu { display: flex !important; align-items: center; width: 100% !important; }
.logon-header .et_pb_menu_inner_container { display: flex !important; align-items: center;
  width: 100% !important; justify-content: space-between; }
.logon-header .et_pb_menu__menu { margin-left: auto !important; }
.logon-header .et_pb_menu .et-menu { justify-content: flex-end; }
.logon-header .et_pb_menu .et-menu > li { margin: 0 7px !important; }
.logon-header .et_pb_menu .et-menu > li:last-child { margin-right: 0 !important; }
.logon-header .et_pb_menu .et-menu > li > a { font-size: 14px !important; white-space: nowrap; }

/* §1.4 + §2.2: submenú VERTICAL, 1 línea por opción, y FONDO CEÑIDO AL TEXTO (ancho = contenido,
   no un mínimo fijo más ancho). li en block + nowrap; el panel (position:absolute) usa max-content. */
/* width:max-content para que el FONDO ciña el texto (= ancho del ítem más largo). Los <li> son
   display:block: ya llenan el panel SIN width:100% (que rompía el cálculo de max-content → 240px). */
.logon-header .et_pb_menu .et-menu .sub-menu { min-width: max-content !important; width: max-content !important; max-width: none !important; }
.logon-header .et_pb_menu .et-menu .sub-menu li {
  display: block !important; float: none !important; width: auto !important; white-space: nowrap !important;
}
.logon-header .et_pb_menu .et-menu .sub-menu li a {
  font-size: 13px !important; white-space: nowrap !important; text-transform: uppercase; letter-spacing: .5px;
  width: auto !important; /* Divi fija el enlace a 200px → lo liberamos para que el panel ciña el texto */ }

.logon-footer { background: var(--logon-secondary) !important; }
.logon-footer, .logon-footer p, .logon-footer li, .logon-footer .et_pb_text { color: rgba(255,255,255,.78) !important; }
.logon-footer h1, .logon-footer h2, .logon-footer h3, .logon-footer h4 { color: #fff !important; letter-spacing: 1px; }
.logon-footer a { color: rgba(255,255,255,.8) !important; text-decoration: none; }
.logon-footer a:hover { color: var(--logon-cta) !important; }
.logon-footer ul.logon-foot-links { list-style: none; margin: 0; padding: 0; }
.logon-footer ul.logon-foot-links li { margin: 0 0 6px; }
/* Logo del footer en chip blanco para contraste sobre el azul oscuro */
.logon-footer .logon-logo img { background: #fff; padding: 10px 14px; border-radius: 8px; max-width: 190px; }

/* =========================================================================
   TARJETAS VARIANTE ICONO-IZQUIERDA (.logon-card--iconleft) — §4.2 / §4.3
   Layout horizontal: icono | (título + texto). Original (icono arriba) intacta.
   ========================================================================= */
/* §4 (ajustes2): ARREGLO DEL SOLAPE icono↔texto. El blurb en modo horizontal de Divi posiciona la
   imagen con position:absolute / float y deja el texto debajo (se monta). Forzamos un FLEX real con
   gap y anulamos absolute/float, dando separación suficiente y robusta en los 3 breakpoints. */
.logon-card--iconleft .et_pb_blurb_content {
  display: flex !important; align-items: flex-start; text-align: left;
  gap: 24px; flex-wrap: nowrap; max-width: 100%;
}
.logon-card--iconleft .et_pb_main_blurb_image {
  position: static !important; float: none !important; margin: 0 !important;
  flex: 0 0 auto; width: auto;
}
.logon-card--iconleft .et_pb_main_blurb_image .et-pb-icon,
.logon-card--iconleft .et_pb_main_blurb_image .et_pb_image_wrap {
  position: static !important; float: none !important; margin: 0 !important;
}
.logon-card--iconleft .et_pb_blurb_container {
  position: static !important; text-align: left !important; flex: 1 1 auto;
  padding: 0 !important; margin: 0 !important;
}
.logon-card--iconleft .et_pb_module_header,
.logon-card--iconleft .et_pb_blurb_description,
.logon-card--iconleft p { text-align: left !important; }
/* En móvil: si el blurb apila, mantener separación vertical correcta. */
@media (max-width: 767px) {
  .logon-card--iconleft .et_pb_blurb_content { gap: 16px; }
}

/* =========================================================================
   CARRUSEL DE PARTNERS (.logon-partners) — banda de logos con autoscroll (marquee) — §5
   No hay módulo carrusel nativo D5 limpio; banda CSS del hijo (aceptada por el encargo).
   La pista se duplica x2 en el contenido → translateX(-50%) hace bucle continuo.
   ========================================================================= */
.logon-partners .logon-partners-viewport { overflow: hidden !important; }
.logon-partners-track.et_pb_column,
.logon-partners-track {
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
  width: max-content !important; max-width: none !important; gap: 56px;
  animation: logon-marquee 32s linear infinite;
}
.logon-partners:hover .logon-partners-track { animation-play-state: paused; }
.logon-partners-track .et_pb_image,
.logon-partners-track .et_pb_module { margin: 0 !important; flex: 0 0 auto; }
/* Logos heterogéneos (Webempresa es BLANCO, ESET negro, TeamSystem multicolor): se normalizan
   a SILUETA oscura uniforme sobre el fondo claro (grayscale + brightness 0), opacidad al hover.
   Así los tres se ven nítidos y a un tamaño/tono homogéneo, independientemente de su color. */
.logon-partners-track .logon-partner-logo,
.logon-partners-track img {
  height: 46px !important; width: auto !important; max-width: 190px; object-fit: contain;
  filter: grayscale(1) brightness(0); opacity: .5; transition: opacity .25s ease;
}
.logon-partners-track a:hover .logon-partner-logo,
.logon-partners-track .logon-partner-link:hover img { opacity: .85; }
@keyframes logon-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logon-partners-track { animation: none; } }

/* =========================================================================
   FOOTER — Banda Kit Digital (.logon-kitdigital) + Subfooter (.logon-subfooter) — §7
   ========================================================================= */
.logon-kitdigital { text-align: center !important; }
.logon-kitdigital .et_pb_image,
.logon-kitdigital .logon-kitdigital-img { text-align: center !important; }
.logon-kitdigital img {
  display: inline-block !important; max-width: 560px; width: 100%; height: auto;
  background: #fff; padding: 10px 16px; border-radius: 8px;
}
.logon-kitdigital .et_pb_text, .logon-kitdigital p { text-align: center !important; margin-top: 12px; }

/* §2 (ajustes2): subfooter = BANDA FINA. Padding mínimo + fila compacta (anula el padding/margen
   de la sección y de la fila Divi) + tipografía algo menor. Banda claramente diferenciada arriba. */
.logon-subfooter { border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 6px !important; padding-bottom: 6px !important; }
.logon-subfooter .et_pb_row { padding-top: 4px !important; padding-bottom: 4px !important;
  margin-top: 0 !important; margin-bottom: 0 !important; }
.logon-subfooter .et_pb_column { margin-bottom: 0 !important; padding: 0 !important; }
.logon-subfooter .logon-subfooter-col { display: flex; align-items: center; }
.logon-subfooter .logon-subfooter-col:last-child { justify-content: flex-end; }
.logon-subfooter .et_pb_text, .logon-subfooter p { margin: 0; font-size: 13px; line-height: 1.4; }
.logon-subfooter .logon-legal-links a { color: rgba(255,255,255,.7) !important; }
.logon-subfooter .logon-legal-links a:hover { color: var(--logon-cta) !important; }

/* =========================================================================
   RESPONSIVE — apilar columnas, hero legible, CTA visible (Fase 2 §8/§11)
   ========================================================================= */
@media (max-width: 980px) {
  .logon-hero { padding-top: 90px !important; padding-bottom: 70px !important; }
  .logon-hero h1 { font-size: 2.0rem !important; line-height: 1.25 !important; }
  .et_pb_column { margin-bottom: 24px; }
  .logon-card { padding: 28px 24px !important; }
  /* §3.1/§6: los botones (en .logon-btn-row) siguen en flex, centrados y con wrap. */
  .logon-btn-row { justify-content: center !important; }
  .logon-btn-row.logon-btn-row--left { justify-content: center !important; }
  /* §2.4: al colapsar el header a móvil (hamburguesa), OCULTAR el CTA "Solicitar diagnóstico". */
  .logon-header .et_pb_button_module_wrapper,
  .logon-header .et_pb_button { display: none !important; }
  /* Subfooter y banda Kit Digital: apilar y centrar de forma legible en móvil. */
  .logon-subfooter .et_pb_column { text-align: center !important; }
  .logon-subfooter .et_pb_text { text-align: center !important; }
  .logon-subfooter .logon-legal-links { text-align: center !important; }
  /* §1.2 (ajustes2): en móvil el menú colapsa a hamburguesa; no forzar alineación derecha del nav. */
  .logon-header .et_pb_menu__menu { margin-left: 0 !important; }
  /* Spacer del header fijo en móvil = alto del header móvil (evita que tape el inicio del hero). */
  #page-container,
  body.et-tb-has-header #page-container, body.et-tb #page-container { padding-top: 64px !important; }
}

/* =========================================================================
   FORMULARIOS DE CONTACTO (.logon-form, módulo nativo Divi) — §3 (ajustes2)
   Heredan la estética de marca: campos con borde/foco Logon y botón de envío ámbar (CTA).
   ========================================================================= */
.logon-form .input,
.logon-form textarea.input,
.logon-form select.input {
  background: #fff !important; border: 1px solid #d7dee7 !important; border-radius: 8px !important;
  padding: 12px 14px !important; color: var(--logon-text) !important; font-size: 15px !important;
  width: 100%; box-shadow: none !important;
}
.logon-form .input:focus {
  border-color: var(--logon-primary) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(93,141,198,.15) !important;
}
.logon-form ::placeholder { color: #9aa7b8 !important; opacity: 1; }
.logon-form .et_pb_contact_field { padding: 0 10px 18px !important; }
.logon-form .et_pb_contact_field label,
.logon-form .et_pb_contact_field_options_title { color: var(--logon-text) !important; font-weight: 600; }
.logon-form .et_pb_contact_captcha_question { color: var(--logon-text) !important; font-weight: 600; }
/* Botón de envío con el estilo del CTA ámbar de marca (sin la flecha por defecto de Divi). */
.logon-form .et_pb_button.et_pb_contact_submit {
  background-color: var(--logon-cta) !important; color: #fff !important;
  border: 2px solid var(--logon-cta) !important; border-radius: 6px !important;
  padding: .8em 2em !important; font-weight: 700 !important; transition: all .2s ease;
}
.logon-form .et_pb_button.et_pb_contact_submit:hover {
  background-color: var(--logon-cta-hover) !important; border-color: var(--logon-cta-hover) !important;
}
.logon-form .et_pb_button.et_pb_contact_submit:after,
.logon-form .et_pb_button.et_pb_contact_submit:before { display: none !important; }