  <?= $this->Html->css("index.css") ?>
  
  <style>
/* Desktop ≥1200px: 4 columnas */
@media (min-width: 1200px) {
    .u-section-3 .u-list-1 {
        /* Evita que limite a 2 filas */
        grid-template-rows: none !important;
        /* o unset */
    }

    .u-section-3 .u-repeater-1 {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        /* 4 columnas iguales */
        grid-auto-columns: 25% !important;
        /* por si el tema usa auto-columns */
        gap: 0 !important;
        /* sin separaciones extra */
        row-gap: 0 !important;
        min-height: auto !important;
        height: auto !important;
    }
}

/* Grid responsivo */
#carousel_ba08 .features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 1199px) {
    #carousel_ba08 .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    #carousel_ba08 .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    #carousel_ba08 .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Tarjetas */
#carousel_ba08 .feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
}

#carousel_ba08 .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .09);
}

/* Títulos */
#carousel_ba08 .feature-card h3 {
    margin: 4px 0 14px;
    font-weight: 700;
}

/* Imágenes con misma altura y recorte elegante */
#carousel_ba08 .feature-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* todas iguales */
    object-fit: cover;
    /* rellena sin deformar */
    border-radius: 10px;
}

/* Lista legible (no centrada con bullets perdidos) */
#carousel_ba08 .feature-card ul {
    text-align: left;
    margin: 16px 0 0;
    padding-left: 18px;
    list-style: disc;
}

/* Botón pegado abajo para igualar alturas */
#carousel_ba08 .feature-btn {
    margin-top: auto;
    border: 2px solid #ccc;
    padding: 8px 18px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-block;
}

#carousel_ba08 .feature-btn:hover {
    border-color: #325ebd;
    /* tu azul corporativo si quieres */
    color: #325ebd;
}

/* Ajustes del título y subtítulo superiores para equilibrio visual */
#carousel_ba08 .u-text-1 {
    margin-bottom: 8px;
}

#carousel_ba08 .u-text-2 {
    margin-top: 0;
    opacity: .8;
}

/* Centrar botón "Más" al fondo de la tarjeta */
#carousel_ba08 .feature-card{
  display: flex;
  flex-direction: column;
}

#carousel_ba08 .feature-btn{
  display: inline-flex;               /* tamaño al contenido */
  justify-content: center;
  align-items: center;
  margin: auto auto 0 !important;     /* top:auto lo empuja abajo, left/right:auto lo centra */
}
#carousel_ba08 .feature-btn,
#carousel_ba08 .u-btn{
  --brand: #cd0c36;
  color: #222 !important;
  border: 2px solid var(--brand) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

#carousel_ba08 .feature-btn:hover,
#carousel_ba08 .feature-btn:focus,
#carousel_ba08 .feature-btn:active,
#carousel_ba08 .u-btn:hover,
#carousel_ba08 .u-btn:focus,
#carousel_ba08 .u-btn:active{
  color: #fff !important;
  background: var(--brand) !important;      /* #cd0c36 */
  border-color: var(--brand) !important;
}

/* Accesible: anillo de foco */
#carousel_ba08 .feature-btn:focus-visible{
  outline: 3px solid #cd0c36 !important;
  outline-offset: 2px;
}


  </style>
  <section class="u-clearfix u-grey-10 u-section-1" id="carousel_a8d2">
      <div class="data-layout-selected u-clearfix u-layout-wrap u-layout-wrap-1">
          <div class="u-layout">
              <div class="u-layout-row">
                  <div class="u-container-align-left-md u-container-align-left-sm u-container-align-left-xs u-container-style u-image u-layout-cell u-size-35-lg u-size-36-xl u-size-60-md u-size-60-sm u-size-60-xs u-image-1"
                      data-image-width="3936" data-image-height="2952" data-animation-name="customAnimationIn"
                      data-animation-duration="1500">
                      <div
                          class="u-container-layout u-valign-middle-md u-valign-middle-sm u-valign-middle-xs u-container-layout-1">
                      </div>
                  </div>
                  <div class="u-align-left u-container-align-left u-container-style u-layout-cell u-size-24-xl u-size-25-lg u-size-60-md u-size-60-sm u-size-60-xs u-white u-layout-cell-2"
                      data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
                      <div class="u-container-layout u-valign-middle u-container-layout-2">
                          <h2 class="u-align-left u-text u-text-1">Fabricando emoción a través de la innovación.</h2>
                          </p>
                          <ul class="u-align-left u-custom-list u-text u-text-3">
                              <li>
                                  <div class="u-list-icon u-text-palette-1-base">
                                      <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                          version="1.1" xml:space="preservar" class="u-svg-content" style=""></div>
                                  </div>Mediante herramientas diamantadas de última generación seguimos apoyando la
                                  evolución de todas las industrias.
                              </li>
                          </ul>
                          <a href="Productos.html"
                              class="u-active-black u-align-left u-border-none u-btn u-btn-round u-button-style u-hover-black u-radius-50 u-text-active-white u-text-hover-white u-btn-2"
                              data-animation-name="customAnimationIn" data-animation-duration="1500"
                              data-animation-delay="50">Productos</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <section
      class="u-clearfix u-container-align-left-md u-container-align-left-sm u-container-align-left-xs u-palette-5-light-1 u-section-2"
      id="carousel_fa5e">
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
          <img src="<?= $this->request->getAttribute("webroot") ?>/img/gf.jpg" alt=""
              class="u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-image u-image-default u-image-1"
              data-image-width="740" data-image-height="1110" data-animation-name="customAnimationIn"
              data-animation-duration="1500" data-animation-delay="500">
          <div class="u-container-style u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-group-1"
              data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
              <div
                  class="u-container-layout u-valign-middle-md u-valign-middle-sm u-valign-middle-xs u-valign-top-lg u-valign-top-xl u-container-layout-1">
                  <h3 class="u-text u-text-1"> Asahi Diamond, a través de sus herramientas de diamante de última
                      generación, sigue contribuyendo significativamente al desarrollo de diversas industrias.</h3>
              </div>
          </div>
          <div class="u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-list u-list-1">
              <div class="u-repeater u-repeater-1">
                  <div class="u-container-align-center u-container-style u-list-item u-repeater-item u-white u-list-item-1"
                      data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
                      <div class="u-container-layout u-similar-container u-valign-middle u-container-layout-2"><span
                              class="u-align-center u-file-icon u-icon u-text-palette-1-base u-icon-1"><img
                                  src="<?= $this->request->getAttribute("webroot") ?>/img/electronica.png"
                                  alt=""></span>
                          <h5 class="u-align-center u-custom-font u-font-montserrat u-text u-text-default u-text-3">
                              Electrónica y semiconductores</h5>
                      </div>
                  </div>
                  <div class="u-container-align-center u-container-style u-list-item u-repeater-item u-white u-list-item-2"
                      data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
                      <div class="u-container-layout u-similar-container u-valign-middle u-container-layout-3"><span
                              class="u-align-center u-file-icon u-icon u-text-palette-1-base u-icon-2"><img
                                  src="<?= $this->request->getAttribute("webroot") ?>/img/vehiculo.png" alt=""></span>
                          <h5 class="u-align-center u-custom-font u-font-montserrat u-text u-text-default u-text-4">
                              Transporte
                          </h5>
                      </div>
                  </div>
                  <div class="u-container-align-center u-container-style u-list-item u-repeater-item u-white u-list-item-3"
                      data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
                      <div class="u-container-layout u-similar-container u-valign-middle u-container-layout-4"><span
                              class="u-align-center u-file-icon u-icon u-text-palette-1-base u-icon-3"><img
                                  src="<?= $this->request->getAttribute("webroot") ?>/img/maquinaria.png" alt=""></span>
                          <h5 class="u-align-center u-custom-font u-font-montserrat u-text u-text-default u-text-5">
                              Maquinaria</h5>
                      </div>
                  </div>
                  <div class="u-container-align-center u-container-style u-list-item u-repeater-item u-white u-list-item-4"
                      data-animation-name="customAnimationIn" data-animation-duration="1500" data-animation-delay="500">
                      <div class="u-container-layout u-similar-container u-valign-middle u-container-layout-5"><span
                              class="u-align-center u-file-icon u-icon u-text-palette-1-base u-icon-4"><img
                                  src="<?= $this->request->getAttribute("webroot") ?>/img/construcion.png"
                                  alt=""></span>
                          <h5 class="u-align-center u-custom-font u-font-montserrat u-text u-text-default u-text-6">
                              Piedra, construcción y Otros</h5>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <section class="u-align-center u-clearfix u-container-align-center u-white u-section-3" id="carousel_ba08">
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1" style="min-height: auto;">

          <h2 class="u-align-center u-text u-text-default u-text-1" data-animation-name="customAnimationIn"
              data-animation-duration="1500">Fabricante de Herramienta de Diamante &amp; CBN</h2>
          <p class="u-align-center u-text u-text-2" data-animation-name="customAnimationIn"
              data-animation-duration="1500">
              Servicio a todo Mexico</p>
          <div class="u-expanded-width u-list u-list-1">
              <div class="features-grid">
                  <!-- Card 1 -->
                  <article class="feature-card">
                      <h3>Nuestro Fuerte</h3>
                      <img src="<?= $this->request->getAttribute('webroot') ?>/img/nuestro_fuerte.png"
                          alt="Presencia nacional, soporte técnico y herramientas de alta calidad">
                      <ul>
                          <li>Presencia en todo el país</li>
                          <li>Soporte técnico</li>
                          <li>Herramientas de alta calidad</li>
                      </ul>
                      <a href="<?= $this->request->getAttribute("webroot") ?>nuestrofuerte" class="u-btn feature-btn">Más</a>
                  </article>

                  <!-- Card 2 -->
                  <article class="feature-card">
                      <h3>Ubicación</h3>
                      <img src="<?= $this->request->getAttribute('webroot') ?>/img/ubicacion1.png"
                          alt="Ubicación estratégica en México">
                      <ul>
                          <li>Ubicados estratégicamente</li>
                      </ul>
                      <a href="<?= $this->request->getAttribute("webroot") ?>ubicacion" class="u-btn feature-btn">Más</a>
                  </article>

                  <!-- Card 3 -->
                  <article class="feature-card">
                      <h3>Nuestra Visión</h3>
                      <img src="<?= $this->request->getAttribute('webroot') ?>/img/3. ASAHI Phyrosophy.png"
                          alt="Manufacturing excitement through innovation">
                      <ul>
                          <li>Visión.</li>
                      </ul>
                      <a href="<?= $this->request->getAttribute("webroot") ?>vision" class="u-btn feature-btn">Más</a>
                  </article>

                  <!-- Card 4 -->
                  <article class="feature-card">
                      <h3>SDGs</h3>
                      <img src="<?= $this->request->getAttribute('webroot') ?>/img/SDGs Image.jpg"
                          alt="Objetivos de Desarrollo Sostenible">
                      <ul>
                          <li>Objetivos de Desarrollo Sostenible.</li>
                      </ul>
                      <a href="<?= $this->request->getAttribute("webroot") ?>sdgs" class="u-btn feature-btn">Más</a>
                  </article>
              </div>
          </div>


      </div>
  </section>