:root{

/* PRIMARY COLORS */

--primary-color:#ff2d2d;
--primary-dark:#c40000;
--secondary-color:#ff7a00;

/* BACKGROUNDS */

--bg-dark:#0f0f0f;
--bg-light:#ffffff;
--bg-soft:#f6f6f6;

/* TEXT */

--text-main:#111;
--text-light:#666;
--text-white:#ffffff;

/* BORDER */

--border-color:#e5e5e5;

/* BUTTON */

--btn-radius:8px;
--btn-padding:12px 26px;

/* FONT */

--font-main:'Poppins', sans-serif;
--font-heading:'Outfit', sans-serif;

/* FONT SIZE */

--font-xs:12px;
--font-sm:14px;
--font-md:16px;
--font-lg:22px;
--font-xl:36px;
--font-xxl:48px;

/* TRANSITION */

--transition:all .3s ease;

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body{
	font-family : var(--font-main);
}

.btn-main{
	background:var(--primary-color);
	color:#fff;
	padding:var(--btn-padding);
	border-radius:var(--btn-radius);
	font-weight:600;
	transition:var(--transition);
	border:none;
}

.btn-main:hover{
	background:var(--primary-dark);
}

.btn-outline{
	border:2px solid var(--primary-color);
	color:var(--primary-color);
	background:transparent;
}

.btn-outline:hover{
	background:var(--primary-color);
	color:#fff;
}

h1,h2,h3,h4{
	font-family:var(--font-heading);
	font-weight:700;
	color:var(--text-main);
}

h1{
	font-size:48px;
}

h2{
	font-size:36px;
}

h3{
	font-size:26px;
}


/* ================= BOTON ================= */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-quote {
    position: relative;
    display: inline-block;
    padding: 12px 25px;
    background: #ff7a00;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden; /* 👈 CLAVE */
    z-index: 1;
    transition: color 0.3s ease;
}

/* CIRCULO */
.btn-quote::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: #19232b; /* 👈 color hover */
    border-radius: 100%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: -1;
}

.btn-light-custom {
    position: relative;
    display: inline-block;
    padding: 12px 25px;
    background: #fff;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    border: 1px solid #ddd;
    border-radius: 0px;
}

/* CIRCULO */
.btn-light-custom::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: #ff7a00; /* 👈 naranja */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: -1;
}

/* HOVER */
.btn-light-custom:hover::before {
    width: 300%;
    height: 300%;
}

/* TEXTO */
.btn-light-custom:hover {
    color: #fff;
}

/* HOVER */
.btn-quote:hover::before {
    width: 300%;
    height: 300%;
}

/* TEXTO ENCIMA */
.btn-quote:hover {
    color: #fff;
}