/* 
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 */


/* ============================================================
   CONVERSIÓN HTML/CSS -> ELEMENTOR
   Pegar completo en: Elementor > Site Settings > Custom CSS
   (o Apariencia > Personalizar > CSS Adicional)

   Luego, en cada widget de Elementor, ir a:
   Advanced (Avanzado) > CSS Classes
   y escribir las clases indicadas en cada bloque abajo.
   ============================================================ */

/* ===== BASE (aplica a todos los botones tipo .btn) ===== */
.btn,
.elementor-button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:inherit;
  font-weight:700;
  font-size:15.5px;
  line-height:1;
  letter-spacing:-.005em;
  cursor:pointer;
  border:none;
  position:relative;
  overflow:hidden;
  transition:background var(--t-base) var(--ease),
             color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn:active{ transform:translateY(0) scale(.99); }

/* El wrapper interno que genera Elementor debe heredar el flex,
   de lo contrario el ícono se cae abajo del texto */
.btn .elementor-button-content-wrapper{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* ===== BOTÓN PRIMARIO (CTA naranja "Agenda tu diagnóstico") ===== */
/* CSS Classes en Elementor: btn btn-primary */
.btn-primary,
.elementor-button.btn-primary{
  background:var(--orange);
  color:#fff;
  padding:15px 15px 15px 26px;
  border-radius:var(--r-pill);
  box-shadow:var(--sh-cta);
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%);
  transition:transform 620ms var(--ease);
}
.btn-primary:hover{
  background:var(--orange-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(249,81,33,.34);
}
.btn-primary:hover::after{ transform:translateX(120%); }

/* Círculo blanco con el ícono/flecha
.btn-primary .circ,
.btn-primary .elementor-button-icon{
  width:32px;height:32px;
  background:#fff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--orange);
  font-size:16px;
  flex:none;
  margin:0;*/
  /*order:2;  fuerza que quede después del texto, sin importar el DOM 
  transition:transform var(--t-base) var(--ease);
  z-index:1;
}
.btn-primary .elementor-button-text{ order:1; }
.btn-primary:hover .circ,
.btn-primary:hover .elementor-button-icon{ transform:translateX(3px); }*/

/* Tamaño/color del SVG de flecha dentro del círculo 
.btn-primary .elementor-button-icon svg{
  width:16px;height:16px;
  color:var(--orange);
  fill:none;
  stroke:currentColor;
}
.btn-primary .elementor-button-icon i{
  font-size:14px;
  color:var(--orange);*/
}

/* ===== BOTÓN SECUNDARIO ===== */
/* CSS Classes en Elementor: btn btn-secondary */
.btn-secondary,
.elementor-button.btn-secondary{
  background:rgba(255,255,255,.7);
  color:var(--text);
  border:1px solid var(--border-strong);
  padding:14px 26px;
  border-radius:var(--r-pill);
  font-weight:600;
  backdrop-filter:blur(8px);
}
.btn-secondary:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

/* ===== BOTÓN PILL OUTLINE ===== */
/* CSS Classes en Elementor: btn-pill-outline */
.btn-pill-outline,
.elementor-button.btn-pill-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff;
  color:var(--purple-dark);
  border:1.5px solid var(--lila-soft);
  padding:17px 34px;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:15.5px;
  transition:background var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.btn-pill-outline:hover{
  background:var(--surface-2);
  border-color:var(--lila);
}

/* ===== TEXTO MICRO ("30 min · sin costo · sin compromiso") ===== */
/* CSS Classes en Elementor: micro */
.micro{
  font-size:13px;
  color:var(--hint);
  margin-top:var(--s4);
  letter-spacing:.01em;
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .btn,.elementor-button.btn{ width:auto; }
}