/*
Theme Name:   A11 Industry Services — Flatsome Child
Theme URI:    https://a11.diginova.mx/
Description:  Tema hijo de Flatsome para A11 Industry Services. Limpieza industrial — Bajío. Diseño basado en referencia amwerk Hamburg home-03. Desarrollado por Diginova INV.
Author:       Diginova INV
Author URI:   https://diginova.mx/
Template:     flatsome
Version:      1.1.0
Text Domain:  flatsome-child
*/

/* ============================================================
   A11 — Variables de marca
   ============================================================ */
:root {
  --a11-blue:        #1B3A8B;
  --a11-blue-dark:   #0F2657;
  --a11-yellow:      #F5C518;
  --a11-yellow-dark: #e0b30f;
  --a11-gray:        #F2F3F5;
  --a11-ink:         #1A1A1A;
  --a11-white:       #FFFFFF;
  --a11-cut:         70px;
}

/* ============================================================
   Tipografía — jerarquía industrial fuerte
   ============================================================ */
h1, h2, h3, h4, h5, h6 { letter-spacing: .005em; }
h1, h2 { text-transform: uppercase; font-weight: 800; line-height: 1.05; }
h2 { font-size: 2.6em; }
h3 { font-weight: 700; }
@media (max-width: 849px) {
  h2 { font-size: 1.9em; }
}

/* Eyebrow / antetítulo */
.a11-eyebrow {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a11-blue);
  position: relative;
  padding-left: 42px;
  margin-bottom: 14px;
}
.a11-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 30px; height: 3px;
  background: var(--a11-yellow);
  transform: translateY(-50%);
}
.a11-eyebrow.is-light { color: var(--a11-yellow); }
.a11-eyebrow.is-center { padding-left: 0; }
.a11-eyebrow.is-center::before { display: none; }

/* ============================================================
   Botones — paleta A11
   ============================================================ */
.button { font-weight: 600; letter-spacing: .04em; }
.button.primary,
.button.is-outline:hover {
  background-color: var(--a11-blue);
  border-color: var(--a11-blue);
  color: var(--a11-white);
}
.button.primary:hover {
  background-color: var(--a11-blue-dark);
  border-color: var(--a11-blue-dark);
  transform: translateY(-2px);
}
.button.secondary {
  background-color: var(--a11-yellow);
  border-color: var(--a11-yellow);
  color: var(--a11-ink);
}
.button.secondary:hover {
  background-color: var(--a11-yellow-dark);
  border-color: var(--a11-yellow-dark);
  transform: translateY(-2px);
}
.button { transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }

a { color: var(--a11-blue); }
a:hover { color: var(--a11-blue-dark); }

/* ============================================================
   Secciones — fondos y cortes diagonales (estilo amwerk)
   Clase en [section class="..."]. El corte se dibuja con un
   triángulo del color de la sección que invade la siguiente.
   ============================================================ */
.a11-section-blue { background-color: var(--a11-blue) !important; color: var(--a11-white); }
.a11-section-dark { background-color: var(--a11-blue-dark) !important; color: var(--a11-white); }
.a11-section-gray { background-color: var(--a11-gray) !important; }
.a11-section-yellow { background-color: var(--a11-yellow) !important; }
.a11-section-blue h1,.a11-section-blue h2,.a11-section-blue h3,.a11-section-blue h4,
.a11-section-dark h1,.a11-section-dark h2,.a11-section-dark h3,.a11-section-dark h4 { color: var(--a11-white); }

/* Cortes diagonales — el triángulo cuelga hacia abajo */
[class*="a11-cut-bottom"] { position: relative; z-index: 2; overflow: visible !important; }
[class*="a11-cut-bottom"] .section-content { overflow: visible; }
[class*="a11-cut-bottom"]::after {
  content: "";
  position: absolute;
  top: 100%; left: 0;
  width: 100%; height: var(--a11-cut);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 3;
}
.a11-cut-bottom-white::after  { background: var(--a11-white); }
.a11-cut-bottom-gray::after   { background: var(--a11-gray); }
.a11-cut-bottom-blue::after   { background: var(--a11-blue); }
.a11-cut-bottom-dark::after   { background: var(--a11-blue-dark); }
.a11-cut-bottom-yellow::after { background: var(--a11-yellow); }

/* Variante espejo (triángulo del otro lado) para alternar ritmo */
.a11-cut-mirror::after { clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ============================================================
   Hero
   ============================================================ */
.a11-hero h1 { font-size: 3.4em; }
@media (max-width: 849px) { .a11-hero h1 { font-size: 2em; } }
.a11-hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 8px;
}
.a11-hero-badges span {
  color: #fff; font-size: .92rem; opacity: .9;
  display: flex; align-items: center; gap: 8px;
}
.a11-hero-badges span::before {
  content: ""; width: 8px; height: 8px;
  background: var(--a11-yellow); display: inline-block;
}

/* ============================================================
   Cajas de servicio — icono + número + hover rico
   ============================================================ */
.a11-service-box {
  position: relative;
  background: var(--a11-white);
  border: 1px solid #e6e8ec;
  padding: 38px 30px 30px;
  height: 100%;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.a11-service-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: var(--a11-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.a11-service-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(15,38,87,.16);
  border-color: transparent;
}
.a11-service-box:hover::before { transform: scaleX(1); }
.a11-service-num {
  position: absolute;
  top: 22px; right: 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #eef0f4;
  transition: color .25s ease;
}
.a11-service-box:hover .a11-service-num { color: #fce9a3; }
.a11-svc-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a11-blue);
  color: var(--a11-white);
  margin-bottom: 20px;
  transition: background .25s ease, transform .25s ease;
}
.a11-service-box:hover .a11-svc-icon {
  background: var(--a11-yellow);
  color: var(--a11-ink);
  transform: rotate(-6deg);
}
.a11-svc-icon svg { width: 32px; height: 32px; }
.a11-service-box h3 { margin: 0 0 .45em; color: var(--a11-ink); font-size: 1.25rem; }
.a11-service-box p { color: #555; margin: 0 0 1em; font-size: .97rem; }
.a11-svc-link {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a11-blue);
}
.a11-svc-link:hover { color: var(--a11-yellow-dark); }

/* ============================================================
   Banda de estadísticas — números grandes animados
   ============================================================ */
.a11-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.a11-stat {
  text-align: center;
  padding: 20px 16px;
  border-right: 1px solid rgba(255,255,255,.14);
}
.a11-stat:last-child { border-right: 0; }
.a11-stat-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--a11-yellow);
}
.a11-stat-label {
  margin-top: 8px;
  color: var(--a11-white);
  font-size: .98rem;
  opacity: .9;
}
@media (max-width: 849px) {
  .a11-stats { grid-template-columns: repeat(2, 1fr); }
  .a11-stat:nth-child(2) { border-right: 0; }
  .a11-stat:nth-child(1),.a11-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .a11-stat-num { font-size: 2.7rem; }
}

/* ============================================================
   Proceso de trabajo — 4 pasos con línea conectora
   ============================================================ */
.a11-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
}
.a11-step { position: relative; padding-top: 8px; }
.a11-step-num {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--a11-white);
  border: 3px solid var(--a11-yellow);
  color: var(--a11-blue);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
/* línea que conecta los pasos */
.a11-process .a11-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 41px; left: 66px;
  width: calc(100% - 66px + 26px);
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--a11-yellow) 0 10px, transparent 10px 18px);
  z-index: 1;
}
.a11-step h4 { margin: 0 0 .4em; font-size: 1.15rem; }
.a11-step p { color: #555; font-size: .95rem; margin: 0; }
@media (max-width: 849px) {
  .a11-process { grid-template-columns: 1fr; gap: 20px; }
  .a11-process .a11-step:not(:last-child)::after { display: none; }
  .a11-step { display: grid; grid-template-columns: 66px 1fr; gap: 0 18px; }
  .a11-step-num { margin-bottom: 0; }
  .a11-step h4, .a11-step p { grid-column: 2; }
}

/* ============================================================
   Pilares de valor — icon boxes
   ============================================================ */
.a11-value-box { text-align: center; padding: 24px; }
.a11-value-box .a11-icon {
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,197,24,.14);
  border: 2px solid var(--a11-yellow);
  color: var(--a11-yellow);
  transition: background .25s ease, transform .25s ease;
}
.a11-value-box:hover .a11-icon { background: var(--a11-yellow); color: var(--a11-blue-dark); transform: translateY(-6px); }
.a11-value-box .a11-icon svg { width: 38px; height: 38px; }

/* ============================================================
   Testimonios
   ============================================================ */
.a11-testi {
  background: var(--a11-white);
  border: 1px solid #e6e8ec;
  border-top: 4px solid var(--a11-yellow);
  padding: 34px 30px 28px;
  height: 100%;
  position: relative;
}
.a11-testi::before {
  content: "\201C";
  position: absolute;
  top: 6px; right: 22px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: #eef0f4;
}
.a11-testi-quote { font-size: 1.02rem; color: #333; font-style: italic; margin-bottom: 22px; }
.a11-testi-author { display: flex; align-items: center; gap: 14px; }
.a11-testi-author img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--a11-gray);
}
.a11-testi-author strong { display: block; color: var(--a11-ink); font-size: .98rem; }
.a11-testi-author span { color: var(--a11-blue); font-size: .86rem; }

/* ============================================================
   Carrusel infinito de logos de clientes
   ============================================================ */
.a11-logos-marquee {
  overflow: hidden;
  width: 100%;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.a11-logos-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: a11-marquee 32s linear infinite;
}
.a11-logos-marquee:hover .a11-logos-track { animation-play-state: paused; }
.a11-logos-track img {
  height: 54px; width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .6;
  transition: filter .25s ease, opacity .25s ease;
}
.a11-logos-track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes a11-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Scroll reveal — animación de entrada de secciones
   ============================================================ */
.a11-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.a11-reveal.a11-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .a11-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .a11-logos-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .button:hover, .a11-service-box:hover { transform: none; }
}

/* ============================================================
   WhatsApp flotante
   ============================================================ */
.a11-wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 999;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.a11-wa-float:hover { transform: scale(1.08); }
.a11-wa-float svg { width: 32px; height: 32px; fill: #fff; }

/* ============================================================
   Footer
   ============================================================ */
.a11-footer-cta { background: var(--a11-blue); color: var(--a11-white); }

/* ============================================================
   Responsive general
   ============================================================ */
@media (max-width: 849px) {
  :root { --a11-cut: 36px; }
  .a11-service-box { padding: 32px 24px 26px; }
  .a11-service-num { font-size: 2.6rem; }
  .a11-logos-track { gap: 40px; }
  .a11-logos-track img { height: 42px; }
}
@media (max-width: 549px) {
  .a11-wa-float { width: 52px; height: 52px; }
}