/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =====================================================
   BOTONES ANIMADOS SOLO EN <main>
   - No repinta border-bottom (ya existe)
   - Laterales primero, top después
   - Salida: top primero, laterales después
===================================================== */

main a.elementor-button.elementor-button-link{
  position: relative;
  display: inline-block;
  padding: 16px 8px !important;
  text-decoration: none;

  /* TOP en 2 mitades (desde lados hacia el centro) */
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left top, right top;

  /* 0 por defecto */
  background-size: 0 1px, 0 1px;

  /* transición del TOP */
  transition-property: background-size;
  transition-duration: .55s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-delay: 0s; /* salida inmediata */
}

/* =====================================================
   LATERALES (sin tocar el border-bottom)
===================================================== */

main a.elementor-button.elementor-button-link::before,
main a.elementor-button.elementor-button-link::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 1px; /* no repinta el border-bottom existente */
  width: 1px;
  background: currentColor;

  transform: scaleY(0);
  transform-origin: bottom;

  transition: transform .45s cubic-bezier(.4,0,.2,1);
  transition-delay: .35s; /* salida: esperan a que se quite el top */
}

main a.elementor-button.elementor-button-link::before{ left: 0; }
main a.elementor-button.elementor-button-link::after { right: 0; }

/* =====================================================
   HOVER (ENTRADA)
===================================================== */

/* 1) Laterales primero */
main a.elementor-button.elementor-button-link:hover::before,
main a.elementor-button.elementor-button-link:hover::after{
  transform: scaleY(1);
  transition-delay: 0s;
}

/* 2) Top después (lados -> centro)
   Nota: calc(50% - 0.5px) evita solape en el centro (doble línea) */
main a.elementor-button.elementor-button-link:hover{
  background-size: calc(50% + 0.5px) 1px, calc(50% + 0.5px) 1px;
  transition-delay: .35s; /* entra después de laterales */
}