@extends('layouts.app')

@section('title', 'Lavaustral Empresas | Lavandería Industrial B2B en Aysén')
@section('description', 'Socio estratégico en lavandería industrial para hotelería, industria acuícola, minería y gastronomía en la Región de Aysén. Capacidad a gran escala, logística propia y trazabilidad.')
@section('body-class', 'business-page')

@section('content')

    <!-- Business Hero -->
    <section id="biz-hero" class="lav-biz-hero" aria-label="Lavaustral para empresas">
      <div class="lav-biz-hero-aurora" aria-hidden="true"><span></span><span></span></div>
      <div class="container">
        <div class="lav-biz-hero-content" data-aos="fade-up" data-aos-duration="800">
          <p class="lav-biz-hero-eyebrow">— Lavandería industrial B2B</p>
          <h1 class="lav-biz-hero-headline">
            Socio estratégico en lavandería industrial para grandes empresas
          </h1>
          <p class="lav-biz-hero-lead">
            Garantizamos la máxima higiene, continuidad operativa y gestión textil eficiente para su empresa. Capacidad a gran escala con logística propia en toda la Región de Aysén.
          </p>
          <div class="lav-biz-hero-cta">
            <a href="{{ route('business.quote') }}" class="lav-biz-hero-btn lav-biz-hero-btn-primary">
              <span>Solicitar cotización corporativa</span>
              <i class="bi bi-arrow-right" aria-hidden="true"></i>
            </a>
            <a href="{{ route('contact') }}" class="lav-biz-hero-btn lav-biz-hero-btn-secondary">
              <span>Agendar una visita</span>
            </a>
          </div>
        </div>
      </div>
    </section><!-- /Business Hero -->

    <div class="lav-wave lav-wave--to-white" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:var(--lav-navy-deep)" d="M0 0h1440v40c-200 44-440 58-720 34S200 26 0 42Z"/></svg>
    </div>

    <!-- Sectores -->
    <section id="biz-sectors" class="lav-biz-sectors" aria-label="Soluciones por sector">
      <div class="lav-biz-sectors-aurora" aria-hidden="true"><span></span><span></span></div>
      <div class="container">
        <p class="lav-section-eyebrow">— Soluciones por sector</p>
        <h2 class="lav-section-title">Trabajamos con los rubros más exigentes de la región</h2>
        <p class="lav-section-desc">Cada industria tiene requisitos distintos. Adaptamos procesos, insumos y frecuencias de retiro según tu operación.</p>

        <div class="lav-biz-sectors-grid">

          <article class="lav-biz-sector-card" data-aos="fade-up" data-aos-delay="100">
            <div class="lav-biz-sector-icon"><i class="bi bi-building" aria-hidden="true"></i></div>
            <h3>Hotelería y Turismo</h3>
            <p>Lavado de sábanas, toallas, mantelería y edredones con estándares de hotelería de lujo. Blancura impecable y planchado calandrado perfecto.</p>
          </article>

          <article class="lav-biz-sector-card" data-aos="fade-up" data-aos-delay="150">
            <div class="lav-biz-sector-icon"><i class="bi bi-water" aria-hidden="true"></i></div>
            <h3>Industria, Acuícola y Minería</h3>
            <p>Lavado técnico de ropa de trabajo pesada, overoles, uniformes con cintas reflectantes y equipos de protección personal (EPP) sin dañar sus propiedades técnicas.</p>
          </article>

          <article class="lav-biz-sector-card" data-aos="fade-up" data-aos-delay="200">
            <div class="lav-biz-sector-icon"><i class="bi bi-cup-hot" aria-hidden="true"></i></div>
            <h3>Gastronomía y Catering</h3>
            <p>Limpieza profunda de manteles, servilletas de tela y uniformes de chef. Eliminación experta de manchas difíciles de grasa, vino y aceites.</p>
          </article>

        </div>
      </div>
    </section><!-- /Sectores -->

    <div class="lav-wave lav-wave--to-light" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:#FFFFFF" d="M0 0h1440v42c-200-16-440-30-720-6S200 84 0 40Z"/></svg>
    </div>

    <!-- Capacidad e Infraestructura -->
    <section id="biz-infra" class="lav-biz-infra" aria-label="Capacidad e infraestructura">
      <div class="lav-biz-infra-aurora" aria-hidden="true"><span></span></div>
      <div class="container">
        <div class="lav-biz-infra-grid">

          <div class="lav-biz-infra-copy" data-aos="fade-right" data-aos-duration="800">
            <p class="lav-section-eyebrow">— Capacidad e infraestructura</p>
            <h2 class="lav-section-title">El músculo operativo de una planta industrial</h2>
            <p class="lav-section-desc">
              Más de 20 años lavando para la industria de Aysén nos dan la capacidad y el criterio para manejar tu volumen sin retrasos.
            </p>
          </div>

          <div class="lav-biz-infra-grid-cards" data-aos="fade-left" data-aos-duration="800">

            <div class="lav-biz-infra-card">
              <div class="lav-biz-infra-icon"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></div>
              <h3>Capacidad a gran escala</h3>
              <p>Procesamos toneladas de ropa diariamente de manera eficiente, asegurando tiempos de entrega óptimos.</p>
            </div>

            <div class="lav-biz-infra-card">
              <div class="lav-biz-infra-icon"><i class="bi bi-cpu" aria-hidden="true"></i></div>
              <h3>Dosificación electrónica</h3>
              <p>Controlamos al gramo los insumos y la temperatura del agua para prolongar la vida útil de tus textiles.</p>
            </div>

            <div class="lav-biz-infra-card">
              <div class="lav-biz-infra-icon"><i class="bi bi-truck" aria-hidden="true"></i></div>
              <h3>Logística y flota propia</h3>
              <p>Rutas programadas de retiro y entrega adaptadas a los horarios de tu operación. Nunca te quedas sin stock.</p>
            </div>

            <div class="lav-biz-infra-card">
              <div class="lav-biz-infra-icon"><i class="bi bi-upc-scan" aria-hidden="true"></i></div>
              <h3>Trazabilidad de prendas</h3>
              <p>Sistemas de control para evitar pérdidas y asegurar que cada pieza regrese a su planta de origen.</p>
            </div>

          </div>

        </div>
      </div>
    </section><!-- /Capacidad e Infraestructura -->

    <div class="lav-wave lav-wave--to-white" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:var(--lav-bg-light)" d="M0 0h1440v38c-200 40-440 52-720 30S200 24 0 44Z"/></svg>
    </div>

    <!-- Proceso paso a paso -->
    <section id="biz-process" class="lav-biz-process" aria-label="Cómo funciona el servicio para empresas">
      <div class="lav-biz-process-aurora" aria-hidden="true"><span></span></div>
      <div class="container">
        <p class="lav-section-eyebrow">— Cómo trabajamos contigo</p>
        <h2 class="lav-section-title">Un proceso simple, pensado para tu operación</h2>
        <p class="lav-section-desc">Nos integramos a tu flujo de trabajo sin fricción, desde la primera conversación hasta la entrega recurrente.</p>

        <ol class="lav-biz-process-grid">

          <li class="lav-biz-process-step" data-aos="fade-up" data-aos-delay="100">
            <div class="lav-biz-process-icon"><i class="bi bi-clipboard-check" aria-hidden="true"></i></div>
            <h3>Diagnóstico y cotización</h3>
            <p>Evaluamos tu volumen, tipos de textil y frecuencia de retiro para armar una propuesta a medida.</p>
          </li>

          <li class="lav-biz-process-step" data-aos="fade-up" data-aos-delay="150">
            <div class="lav-biz-process-icon"><i class="bi bi-people" aria-hidden="true"></i></div>
            <h3>Implementación</h3>
            <p>Coordinamos rutas de retiro, horarios de entrega y protocolos específicos de tu industria.</p>
          </li>

          <li class="lav-biz-process-step" data-aos="fade-up" data-aos-delay="200">
            <div class="lav-biz-process-icon"><i class="bi bi-truck" aria-hidden="true"></i></div>
            <h3>Retiro y lavado</h3>
            <p>Recogemos en los horarios acordados y procesamos tus prendas bajo los estándares de tu sector.</p>
          </li>

          <li class="lav-biz-process-step" data-aos="fade-up" data-aos-delay="250">
            <div class="lav-biz-process-icon"><i class="bi bi-box-seam" aria-hidden="true"></i></div>
            <h3>Entrega y seguimiento</h3>
            <p>Devolvemos tus textiles listos y trazables, con reportes periódicos del servicio.</p>
          </li>

        </ol>
      </div>
    </section><!-- /Proceso paso a paso -->

    <div class="lav-wave lav-wave--to-light" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:#FFFFFF" d="M0 0h1440v44c-200-18-440-28-720-4S200 86 0 42Z"/></svg>
    </div>

    <!-- Estándares de calidad e higiene -->
    <section id="biz-standards" class="lav-biz-standards" aria-label="Estándares de calidad e higiene">
      <div class="lav-biz-standards-aurora" aria-hidden="true"><span></span></div>
      <div class="container">
        <p class="lav-section-eyebrow">— Calidad y confianza</p>
        <h2 class="lav-section-title">Estándares que respaldan cada entrega</h2>
        <p class="lav-section-desc">Procesos documentados y buenas prácticas que cuidan la higiene, la trazabilidad y la vida útil de tus textiles industriales.</p>

        <div class="lav-biz-standards-grid">

          <article class="lav-biz-standard-card" data-aos="fade-up" data-aos-delay="100">
            <div class="lav-biz-standard-icon"><i class="bi bi-droplet-half" aria-hidden="true"></i></div>
            <h3>Desinfección termoquímica</h3>
            <p>Procesos validados para eliminar patógenos en textiles de alto riesgo sanitario en ambientes industriales.</p>
          </article>

          <article class="lav-biz-standard-card" data-aos="fade-up" data-aos-delay="150">
            <div class="lav-biz-standard-icon"><i class="bi bi-sliders" aria-hidden="true"></i></div>
            <h3>Dosificación electrónica</h3>
            <p>Control preciso de insumos, temperatura y tiempos para proteger tus textiles y cumplir cada protocolo.</p>
          </article>

          <article class="lav-biz-standard-card" data-aos="fade-up" data-aos-delay="200">
            <div class="lav-biz-standard-icon"><i class="bi bi-upc-scan" aria-hidden="true"></i></div>
            <h3>Trazabilidad por lote</h3>
            <p>Cada carga queda registrada desde el retiro hasta la entrega, con historial disponible ante cualquier consulta.</p>
          </article>

          <article class="lav-biz-standard-card" data-aos="fade-up" data-aos-delay="250">
            <div class="lav-biz-standard-icon"><i class="bi bi-shield-check" aria-hidden="true"></i></div>
            <h3>Protocolos por sector</h3>
            <p>Procesos diferenciados para alimentos, minería y hotelería, según la exigencia de cada rubro.</p>
          </article>

        </div>
      </div>
    </section><!-- /Estándares de calidad e higiene -->

    <div class="lav-wave lav-wave--to-navy" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:var(--lav-bg-light)" d="M0 0h1440v34c-240 46-480 40-720 8S200 20 0 46Z"/></svg>
    </div>

    <!-- Clientes actuales -->
    <section id="biz-clients" class="lav-biz-clients" aria-label="Nuestros clientes actuales">
      <div class="lav-biz-clients-aurora" aria-hidden="true"><span></span><span></span></div>
      <div class="container">
        <p class="lav-section-eyebrow lav-section-eyebrow-light">— Confían en nosotros</p>
        <h2 class="lav-section-title lav-section-title-light">Nuestros clientes actuales</h2>
      </div>

      @php
        // Nombre de archivo dentro de public/theme/guest/assets/img/clientes/
        // tal cual está en el servidor (con espacios y mayúsculas incluidas).
        $lavBizClients = [
          ['file' => 'mowi.png',                        'label' => 'Mowi'],
          ['file' => 'FRIOSUR.png',                      'label' => 'Friosur'],
          ['file' => 'AQUACULTURE COOKE.png',            'label' => 'Aquaculture Cooke'],
          // Falta el logo de Puerto Oxxean — cuando esté en la carpeta,
          // agrega esta línea con el nombre exacto del archivo:
          // ['file' => 'PUERTO OXXEAN.png', 'label' => 'Puerto Oxxean'],
          ['file' => 'HOTEL LOBERIAS DE AYSEN.png',      'label' => 'Hotel Loberías de Aysén'],
          ['file' => 'PESQUERA FIORDO AUSTRAL.png',      'label' => 'Pesquera Fiordo Austral'],
          ['file' => 'COMPAS MARINE.png',                'label' => 'Compas Marine'],
          ['file' => 'WALBUSCH.png',                     'label' => 'Walbusch'],
          ['file' => 'MAQSUR.png',                       'label' => 'Maqsur'],
          ['file' => 'SALMONES ANTARTICA.png',           'label' => 'Salmones Antártica'],
          ['file' => 'MULTI-X.png',                      'label' => 'Multi-X'],
        ];
      @endphp

      {{-- Carrusel infinito: se duplica la lista una vez para que el loop
           quede sin corte visible (cuando la 1ª tanda sale, entra la 2ª
           que es idéntica, y así sucesivamente). --}}
      <div class="lav-biz-clients-marquee" data-aos="fade-up" data-aos-duration="800">
        <div class="lav-biz-clients-track">
          @foreach (array_merge($lavBizClients, $lavBizClients) as $client)
            <div class="lav-biz-client-logo">
              <img src="{{ asset('theme/guest/assets/img/clientes/' . rawurlencode($client['file'])) }}"
                   alt="{{ $client['label'] }}" loading="lazy">
            </div>
          @endforeach
        </div>
      </div>
    </section><!-- /Clientes -->

    <div class="lav-wave lav-wave--to-white" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:var(--lav-navy-deep)" d="M0 0h1440v40c-220 42-450 56-720 32S190 24 0 42Z"/></svg>
    </div>

    <!-- Preguntas frecuentes -->
    <section id="biz-faq" class="lav-biz-faq" aria-label="Preguntas frecuentes">
      <div class="container">
        <p class="lav-section-eyebrow">— Preguntas frecuentes</p>
        <h2 class="lav-section-title">Resolvemos tus dudas antes de cotizar</h2>
        <p class="lav-section-desc">Si tu pregunta no está aquí, escríbenos y te respondemos directamente.</p>

        <div class="lav-biz-faq-list">

          <details class="lav-biz-faq-item" data-aos="fade-up" data-aos-delay="100">
            <summary>¿Qué volumen de ropa pueden manejar?</summary>
            <p>Trabajamos con empresas de distintos tamaños, desde hoteles boutique hasta plantas industriales. Ajustamos capacidad y frecuencia de retiro según tu volumen real.</p>
          </details>

          <details class="lav-biz-faq-item" data-aos="fade-up" data-aos-delay="150">
            <summary>¿Con qué frecuencia pueden retirar y entregar?</summary>
            <p>Coordinamos rutas diarias, semanales o según la necesidad de tu operación, con horarios fijos para que nunca te quedes sin stock.</p>
          </details>

          <details class="lav-biz-faq-item" data-aos="fade-up" data-aos-delay="200">
            <summary>¿Pueden adaptarse a protocolos sanitarios específicos?</summary>
            <p>Sí. Ajustamos insumos, temperaturas y procesos de desinfección según la normativa de tu sector, ya sea alimentos, industria o minería.</p>
          </details>

          <details class="lav-biz-faq-item" data-aos="fade-up" data-aos-delay="250">
            <summary>¿Qué pasa si una prenda se daña o se extravía?</summary>
            <p>Contamos con trazabilidad por lote a lo largo de todo el proceso, lo que nos permite detectar y resolver incidencias rápidamente.</p>
          </details>

          <details class="lav-biz-faq-item" data-aos="fade-up" data-aos-delay="300">
            <summary>¿Cómo se cotiza el servicio?</summary>
            <p>Evaluamos tu volumen, tipo de textil y frecuencia de retiro en una reunión inicial, y te enviamos una propuesta a medida sin costo.</p>
          </details>

          <details class="lav-biz-faq-item" data-aos="fade-up" data-aos-delay="350">
            <summary>¿Trabajan fuera de Coyhaique y Puerto Aysén?</summary>
            <p>Contamos con logística propia en la Región de Aysén. Cuéntanos tu ubicación y evaluamos la mejor forma de coordinar el servicio.</p>
          </details>

        </div>
      </div>
    </section><!-- /Preguntas frecuentes -->

    <div class="lav-wave lav-wave--to-light" aria-hidden="true">
      <svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path style="fill:#FFFFFF" d="M0 0h1440v36c-220 44-460 46-720 14S190 22 0 40Z"/></svg>
    </div>

    <!-- CTA final -->
    <section id="biz-cta" class="lav-biz-cta" aria-label="Solicitar cotización">
      <div class="lav-biz-cta-aurora" aria-hidden="true"><span></span></div>
      <div class="container">
        <div class="lav-biz-cta-card" data-aos="fade-up" data-aos-duration="800">
          <h2>¿Listo para simplificar la gestión textil de tu empresa?</h2>
          <p>Cuéntanos tu volumen y frecuencia de retiro, y te enviamos una propuesta a medida.</p>
          <a href="{{ route('business.quote') }}" class="lav-biz-cta-btn">
            <span>Solicitar cotización corporativa</span>
            <i class="bi bi-arrow-right" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </section><!-- /CTA final -->

    <style>
      /* ============================================================
         Gradientes/paleta tomados del sistema de diseño de index.html
         y ya aplicados en el welcome (navy profundo + degradé agua
         celeste→cian), reutilizando las variables de lavaustral.css.

         v2 — se agrega el lenguaje visual de "olas" y aurora entre
         secciones (mismo signature del sitio B2B de referencia), y se
         corrige --lav-agua para que sea el degradé azul celeste→cian
         (no verde) que usan los botones primarios en el resto del sitio.
         ============================================================ */
      #biz-hero.lav-biz-hero,
      #biz-clients.lav-biz-clients,
      #biz-cta.lav-biz-cta {
        --lav-agua: linear-gradient(115deg, var(--lav-primary) 0%, var(--lav-brand-sky) 100%);
        --lav-texto-claro-suave: #A9BCD8;
        --lav-shadow: 0 1px 2px rgba(15, 30, 60, .05), 0 14px 36px -18px rgba(15, 30, 60, .22);
        --lav-shadow-lg: 0 2px 4px rgba(15, 30, 60, .06), 0 30px 60px -25px rgba(15, 30, 60, .35);
      }

      /* ===================== Olas entre secciones ===================== */
      .lav-wave {
        display: block;
        width: 100%;
        line-height: 0;
        position: relative;
        z-index: 3;
        margin-top: -1px;
      }
      .lav-wave svg {
        display: block;
        width: 100%;
        height: clamp(30px, 5vw, 72px);
      }
      .lav-wave--to-white { background: #FFFFFF; }
      .lav-wave--to-light { background: var(--lav-bg-light); }
      .lav-wave--to-navy  { background: var(--lav-navy-deep); }

      /* ===================== Aurora (atmósfera de fondo) =====================
         El hero y clientes (fondo navy) llevan la versión intensa; el resto
         de las secciones claras llevan una versión muy tenue de la misma
         mancha, para que el signature de "aurora" recorra toda la página
         sin competir con el contenido. */
      .lav-biz-hero-aurora,
      .lav-biz-clients-aurora,
      .lav-biz-sectors-aurora,
      .lav-biz-infra-aurora,
      .lav-biz-process-aurora,
      .lav-biz-standards-aurora,
      .lav-biz-cta-aurora {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
      }
      .lav-biz-hero-aurora span,
      .lav-biz-clients-aurora span,
      .lav-biz-sectors-aurora span,
      .lav-biz-infra-aurora span,
      .lav-biz-process-aurora span,
      .lav-biz-standards-aurora span,
      .lav-biz-cta-aurora span {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        animation: lav-aurora-float 18s ease-in-out infinite alternate;
      }

      /* -- versión intensa: fondo navy -- */
      .lav-biz-hero-aurora span,
      .lav-biz-clients-aurora span { opacity: .5; }

      .lav-biz-hero-aurora span:nth-child(1) {
        width: 42vw; height: 42vw; left: -10vw; top: -14vw;
        background: rgba(47, 159, 224, .38);
      }
      .lav-biz-hero-aurora span:nth-child(2) {
        width: 32vw; height: 32vw; right: -8vw; bottom: -14vw;
        background: rgba(62, 203, 232, .28);
        animation-delay: -8s;
      }
      .lav-biz-clients-aurora span:nth-child(1) {
        width: 30vw; height: 30vw; left: -6vw; top: -14vw;
        background: rgba(47, 159, 224, .3);
      }
      .lav-biz-clients-aurora span:nth-child(2) {
        width: 24vw; height: 24vw; right: -8vw; bottom: -12vw;
        background: rgba(141, 198, 63, .18);
        animation-delay: -10s;
      }

      /* -- versión tenue: fondos claros -- */
      .lav-biz-sectors-aurora span,
      .lav-biz-infra-aurora span,
      .lav-biz-process-aurora span,
      .lav-biz-standards-aurora span,
      .lav-biz-cta-aurora span {
        opacity: .55;
      }
      .lav-biz-sectors-aurora span:nth-child(1) {
        width: 34vw; height: 34vw; right: -10vw; top: -16vw;
        background: rgba(47, 159, 224, .07);
      }
      .lav-biz-sectors-aurora span:nth-child(2) {
        width: 22vw; height: 22vw; left: -6vw; bottom: -12vw;
        background: rgba(141, 198, 63, .06);
        animation-delay: -9s;
      }
      .lav-biz-infra-aurora span {
        width: 30vw; height: 30vw; right: -8vw; top: 40%;
        background: rgba(62, 203, 232, .08);
        animation-delay: -4s;
      }
      .lav-biz-process-aurora span {
        width: 28vw; height: 28vw; left: -8vw; top: -12vw;
        background: rgba(47, 159, 224, .06);
        animation-delay: -12s;
      }
      .lav-biz-standards-aurora span {
        width: 30vw; height: 30vw; right: -10vw; bottom: -14vw;
        background: rgba(62, 203, 232, .07);
        animation-delay: -6s;
      }
      .lav-biz-cta-aurora span {
        width: 26vw; height: 26vw; left: 50%; top: -14vw;
        transform: translateX(-50%);
        background: rgba(47, 159, 224, .06);
      }

      @keyframes lav-aurora-float {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(3vw, 2.5vw, 0) scale(1.12); }
      }
      .lav-biz-cta-aurora span {
        animation-name: lav-aurora-float-x;
      }
      @keyframes lav-aurora-float-x {
        from { transform: translateX(-50%) translate3d(0, 0, 0) scale(1); }
        to   { transform: translateX(-50%) translate3d(2vw, 2vw, 0) scale(1.1); }
      }
      @media (prefers-reduced-motion: reduce) {
        .lav-biz-hero-aurora span,
        .lav-biz-clients-aurora span,
        .lav-biz-sectors-aurora span,
        .lav-biz-infra-aurora span,
        .lav-biz-process-aurora span,
        .lav-biz-standards-aurora span,
        .lav-biz-cta-aurora span { animation: none; }
      }

      /* ===================== Business Hero ===================== */
      .lav-biz-hero {
        position: relative;
        overflow: hidden;
        background: var(--lav-navy-deep);
        background-image:
          radial-gradient(42vw 42vw at -8vw -16vw, rgba(47, 159, 224, .32), transparent 60%),
          radial-gradient(30vw 30vw at 106vw 100vw, rgba(62, 203, 232, .24), transparent 60%);
        padding: 96px 0 80px;
      }

      .lav-biz-hero .container {
        position: relative;
        z-index: 2;
        max-width: 1000px;
      }

      .lav-biz-hero-eyebrow {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-brand-sky);
        margin-bottom: 20px;
      }

      .lav-biz-hero-headline {
        font-size: 48px;
        font-weight: 800;
        line-height: 1.15;
        color: #FFFFFF;
        max-width: 820px;
        margin-bottom: 24px;
      }

      .lav-biz-hero-lead {
        font-size: 18px;
        line-height: 1.6;
        color: var(--lav-texto-claro-suave);
        max-width: 640px;
        margin-bottom: 40px;
      }

      .lav-biz-hero-cta {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
      }

      .lav-biz-hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 16px 30px;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      }

      .lav-biz-hero-btn i {
        transition: transform .2s ease;
      }
      .lav-biz-hero-btn:hover i {
        transform: translateX(3px);
      }

      .lav-biz-hero-btn-primary {
        background: var(--lav-agua);
        color: #06243B !important;
        box-shadow: 0 10px 26px -12px rgba(47, 159, 224, .85);
      }

      .lav-biz-hero-btn-primary:hover {
        box-shadow: 0 16px 34px -12px rgba(47, 159, 224, .95);
        color: #06243B !important;
        transform: translateY(-2px);
      }

      .lav-biz-hero-btn-secondary {
        background: transparent;
        color: #FFFFFF !important;
        border: 1px solid rgba(255,255,255,.35);
      }

      .lav-biz-hero-btn-secondary:hover {
        border-color: #FFFFFF;
        background: rgba(255, 255, 255, .1);
        transform: translateY(-2px);
      }

      @media (max-width: 768px) {
        .lav-biz-hero-headline { font-size: 34px; }
      }

      @media (max-width: 480px) {
        .lav-biz-hero { padding: 72px 0 56px; }
        .lav-biz-hero-headline { font-size: 28px; }
        .lav-biz-hero-lead { font-size: 16px; }
        .lav-biz-hero-cta { flex-direction: column; align-items: stretch; }
        .lav-biz-hero-btn { justify-content: center; }
      }

      /* ===================== Section headers reutilizables ===================== */
      .lav-section-eyebrow {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-primary);
        margin-bottom: 16px;
      }

      .lav-section-eyebrow-light { color: var(--lav-brand-sky); }

      .lav-section-title {
        font-size: 32px;
        font-weight: 800;
        color: var(--lav-dark);
        max-width: 720px;
        margin-bottom: 16px;
        line-height: 1.25;
      }

      .lav-section-title-light { color: #FFFFFF; }

      .lav-section-desc {
        font-size: 16px;
        line-height: 1.6;
        color: var(--lav-text-secondary);
        max-width: 640px;
      }

      /* ===================== Sectores ===================== */
      .lav-biz-sectors { position: relative; overflow: hidden; padding: 80px 0; background: #FFFFFF; }
      .lav-biz-sectors .container { position: relative; z-index: 1; max-width: 1400px; }

      .lav-biz-sectors-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 48px;
      }

      .lav-biz-sector-card {
        background: var(--lav-bg-light);
        border: 1px solid transparent;
        border-radius: 16px;
        padding: 32px 28px;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
      }

      .lav-biz-sector-card:hover {
        transform: translateY(-5px);
        border-color: #CFE2F5;
        background: #FFFFFF;
        box-shadow: var(--lav-shadow, 0 14px 36px -18px rgba(15,30,60,.22));
      }

      .lav-biz-sector-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--lav-primary);
        font-size: 22px;
        margin-bottom: 20px;
        transition: transform .25s ease;
      }

      .lav-biz-sector-card:hover .lav-biz-sector-icon {
        transform: scale(1.06);
      }

      .lav-biz-sector-card h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--lav-dark);
        margin-bottom: 10px;
      }

      .lav-biz-sector-card p {
        font-size: 14px;
        line-height: 1.55;
        color: var(--lav-text-secondary);
        margin: 0;
      }

      @media (max-width: 992px) {
        .lav-biz-sectors-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 576px) {
        .lav-biz-sectors-grid { grid-template-columns: 1fr; }
      }

      /* ===================== Infraestructura ===================== */
      .lav-biz-infra { position: relative; overflow: hidden; padding: 80px 0; background: var(--lav-bg-light); }
      .lav-biz-infra .container { position: relative; z-index: 1; max-width: 1400px; }

      .lav-biz-infra-grid {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 56px;
        align-items: start;
      }

      .lav-biz-infra-grid-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .lav-biz-infra-card {
        background: #FFFFFF;
        border: 1px solid transparent;
        border-radius: 16px;
        padding: 28px 24px;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      }

      .lav-biz-infra-card:hover {
        transform: translateY(-4px);
        border-color: #CFE2F5;
        box-shadow: var(--lav-shadow, 0 14px 36px -18px rgba(15,30,60,.22));
      }

      .lav-biz-infra-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--lav-bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--lav-primary);
        font-size: 20px;
        margin-bottom: 16px;
        transition: transform .25s ease;
      }

      .lav-biz-infra-card:hover .lav-biz-infra-icon {
        transform: scale(1.06);
      }

      .lav-biz-infra-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--lav-dark);
        margin-bottom: 8px;
      }

      .lav-biz-infra-card p {
        font-size: 14px;
        line-height: 1.5;
        color: var(--lav-text-secondary);
        margin: 0;
      }

      @media (max-width: 992px) {
        .lav-biz-infra-grid { grid-template-columns: 1fr; }
      }
      @media (max-width: 576px) {
        .lav-biz-infra-grid-cards { grid-template-columns: 1fr; }
      }

      /* ===================== Proceso paso a paso ===================== */
      .lav-biz-process { position: relative; overflow: hidden; padding: 80px 0; background: #FFFFFF; }
      .lav-biz-process .container { position: relative; z-index: 1; max-width: 1400px; }

      .lav-biz-process-grid {
        list-style: none;
        margin: 48px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }

      .lav-biz-process-step {
        position: relative;
        background: var(--lav-bg-light);
        border: 1px solid transparent;
        border-radius: 16px;
        padding: 32px 24px 28px;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      }

      .lav-biz-process-step:hover {
        transform: translateY(-4px);
        border-color: #CFE2F5;
        box-shadow: var(--lav-shadow, 0 14px 36px -18px rgba(15,30,60,.22));
      }

      .lav-biz-process-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--lav-primary);
        font-size: 20px;
        margin: 12px 0 18px;
      }

      .lav-biz-process-step h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--lav-dark);
        margin-bottom: 8px;
      }

      .lav-biz-process-step p {
        font-size: 14px;
        line-height: 1.5;
        color: var(--lav-text-secondary);
        margin: 0;
      }

      @media (max-width: 1200px) {
        .lav-biz-process-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 576px) {
        .lav-biz-process-grid { grid-template-columns: 1fr; }
      }

      /* ===================== Estándares de calidad e higiene ===================== */
      .lav-biz-standards { position: relative; overflow: hidden; padding: 80px 0; background: var(--lav-bg-light); }
      .lav-biz-standards .container { position: relative; z-index: 1; max-width: 1400px; }

      .lav-biz-standards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 48px;
      }

      .lav-biz-standard-card {
        background: #FFFFFF;
        border: 1px solid transparent;
        border-radius: 16px;
        padding: 32px 28px;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      }

      .lav-biz-standard-card:hover {
        transform: translateY(-5px);
        border-color: #CFE2F5;
        box-shadow: var(--lav-shadow, 0 14px 36px -18px rgba(15,30,60,.22));
      }

      .lav-biz-standard-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--lav-bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--lav-primary);
        font-size: 22px;
        margin-bottom: 20px;
        transition: transform .25s ease;
      }

      .lav-biz-standard-card:hover .lav-biz-standard-icon {
        transform: scale(1.06);
      }

      .lav-biz-standard-card h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--lav-dark);
        margin-bottom: 10px;
      }

      .lav-biz-standard-card p {
        font-size: 14px;
        line-height: 1.55;
        color: var(--lav-text-secondary);
        margin: 0;
      }

      @media (max-width: 1200px) {
        .lav-biz-standards-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 576px) {
        .lav-biz-standards-grid { grid-template-columns: 1fr; }
      }

      /* ===================== Clientes — carrusel de logos ===================== */
      .lav-biz-clients {
        position: relative;
        padding: 72px 0;
        background: var(--lav-navy-deep);
        background-image:
          radial-gradient(30vw 30vw at -6vw -14vw, rgba(47, 159, 224, .3), transparent 60%),
          radial-gradient(24vw 24vw at 108vw 106vw, rgba(141, 198, 63, .18), transparent 60%);
        text-align: center;
        overflow: hidden;
      }
      .lav-biz-clients .container { position: relative; z-index: 2; max-width: 1100px; }
      .lav-biz-clients .lav-section-eyebrow,
      .lav-biz-clients .lav-section-title { margin-left: auto; margin-right: auto; }

      /* Contenedor de la cinta: fuera de .container para que ocupe todo el
         ancho de la sección y el degradado de los bordes se vea limpio. */
      .lav-biz-clients-marquee {
        position: relative;
        z-index: 2;
        margin-top: 48px;
        width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
      }

      .lav-biz-clients-track {
        display: flex;
        align-items: center;
        gap: 28px;
        width: max-content;
        animation: lav-clients-scroll 34s linear infinite;
      }

      .lav-biz-clients-marquee:hover .lav-biz-clients-track {
        animation-play-state: paused;
      }

      @keyframes lav-clients-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
      }

      .lav-biz-client-logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 76px;
        background: #FFFFFF;
        border-radius: 14px;
        padding: 14px 22px;
      }

      .lav-biz-client-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        filter: grayscale(1) brightness(1.1);
        opacity: .8;
        transition: filter .25s ease, opacity .25s ease;
      }

      .lav-biz-client-logo:hover img {
        filter: grayscale(0) brightness(1);
        opacity: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .lav-biz-clients-track {
          animation: none;
        }
        .lav-biz-clients-marquee {
          overflow-x: auto;
          -webkit-mask-image: none;
          mask-image: none;
        }
      }

      @media (max-width: 576px) {
        .lav-biz-client-logo {
          width: 132px;
          height: 64px;
          padding: 10px 16px;
        }
      }

      /* ===================== Preguntas frecuentes ===================== */
      .lav-biz-faq { padding: 80px 0; background: #FFFFFF; }
      .lav-biz-faq .container { max-width: 900px; }

      .lav-biz-faq-list {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .lav-biz-faq-item {
        background: var(--lav-bg-light);
        border-radius: 14px;
        padding: 4px 24px;
        transition: background-color .2s ease;
      }

      .lav-biz-faq-item[open] {
        background: #F0F8FE;
      }

      .lav-biz-faq-item summary {
        list-style: none;
        cursor: pointer;
        padding: 20px 32px 20px 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--lav-dark);
        position: relative;
        transition: color .2s ease;
      }

      .lav-biz-faq-item summary:hover {
        color: var(--lav-primary);
      }

      .lav-biz-faq-item summary::-webkit-details-marker { display: none; }

      .lav-biz-faq-item summary::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 18px;
        font-size: 22px;
        font-weight: 400;
        color: var(--lav-primary);
        transition: transform .2s ease;
      }

      .lav-biz-faq-item[open] summary::after {
        content: "−";
      }

      .lav-biz-faq-item p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--lav-text-secondary);
        margin: 0 0 22px;
        max-width: 68ch;
      }

      /* ===================== CTA final ===================== */
      .lav-biz-cta { position: relative; overflow: hidden; padding: 80px 0; background: var(--lav-bg-light); }
      .lav-biz-cta .container { position: relative; z-index: 1; max-width: 1400px; }

      .lav-biz-cta-card {
        background: #FFFFFF;
        border-radius: 24px;
        padding: 56px 64px;
        text-align: center;
        box-shadow: var(--lav-shadow, 0 14px 36px -18px rgba(15,30,60,.22));
      }

      .lav-biz-cta-card h2 {
        font-size: 28px;
        font-weight: 800;
        color: var(--lav-dark);
        margin-bottom: 12px;
      }

      .lav-biz-cta-card p {
        font-size: 16px;
        color: var(--lav-text-secondary);
        margin-bottom: 28px;
      }

      .lav-biz-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--lav-agua);
        color: #06243B !important;
        font-size: 16px;
        font-weight: 700;
        padding: 16px 30px;
        border-radius: 999px;
        box-shadow: 0 10px 26px -12px rgba(47, 159, 224, .6);
        transition: box-shadow .2s ease, transform .2s ease;
      }

      .lav-biz-cta-btn i {
        transition: transform .2s ease;
      }

      .lav-biz-cta-btn:hover {
        box-shadow: 0 16px 34px -12px rgba(47, 159, 224, .8);
        transform: translateX(2px);
      }
      .lav-biz-cta-btn:hover i {
        transform: translateX(3px);
      }

      @media (max-width: 768px) {
        .lav-biz-cta-card { padding: 40px 28px; }
      }
    </style>

@endsection