:root
{
    
    --color-white:#ffffff;
    --color-whatsapp:hsl(134, 71%, 48%);
    --color-primary: hsl(0, 97%, 41%);
    --color-primary-15: hsl(0, 100%, 15%);
    --color-primary-10: hsl(0, 100%, 10%);
    --color-gold: hsl(50, 100%, 50%);
  



    --font-primary:"Lexend", sans-serif;
    --font-secundary: "Playfair Display";
    --font-logo: "Pirata One", system-ui;



    --text-mb-size-80: 0.79rem;
    --text-mb-size-90: 0.889rem;
    --text-mb-size-100: 1rem;
    --text-mb-size-200: 1.125rem;
    --text-mb-size-300: 1.266rem;
    --text-mb-size-400: 1.424rem;
    --text-mb-size-500: 1.602rem;
    --text-mb-size-600: 1.802rem;
    --text-mb-size-700: 2.027rem;

    --text-size-80: 0.64rem;
    --text-size-90: 0.8rem;
    --text-size-100: 1rem;
    --text-size-200: 1.25rem;
    --text-size-300: 1.563rem;
    --text-size-400: 1.953rem;
    --text-size-500: 2.441rem;
    --text-size-600: 3.052rem;
    --text-size-700: 3.815rem;

    --text-size-xl-80: 0.499562rem;
    --text-size-xl-90: 0.706481rem;
    --text-size-xl-100: 0.999125rem;
    --text-size-xl-200: 1.41298rem;
    --text-size-xl-300: 1.99825rem;
    --text-size-xl-400: 2.82648rem;
    --text-size-xl-500: 3.9965rem;
    --text-size-xl-600: 5.653rem;
    --text-size-xl-700: 7.993rem;



}

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


html
{
    scrollbar-color: red transparent;
    scroll-behavior: smooth;
}

body
{
    background-color: var(--color-primary-10);
    font-family: var(--font-primary);
}


main
{
    background-color: var(--color-primary-15);
}















/* Header */




.header
{
    background-color: var(--color-primary-10);
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    box-shadow: 0 0 2px var(--color-primary);
    z-index: 100;
}

.header-container
{
    width: min(90%, 1200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
}

.header-container-btn
{
    border: none;
    background-color: transparent;
    position: fixed;
    bottom: 10px;
    right: 15px;
}

.header-container-h1
{
    color: var(--color-white);
    font-family: "Pirata One", system-ui;
    line-height: 1;
    text-align: center;
    font-size: var(--text-mb-size-500);
    color:var(--color-gold);
    letter-spacing: 0.25rem;
}

.header-container-btn-svg
{
    color: var(--color-whatsapp);
    width: 60px;
    height: 60px;
}
























/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px) { }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }










/* Hero */

.hero
{
    
    width: 100%;
    height: calc(100svh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:linear-gradient(hsla(0, 100%, 15%, 0) 0%, rgba(0, 0, 0, 0.253) 50%, hsl(0, 100%, 15%) 100%),url("https://ancientcandleco.com/cdn/shop/collections/01.-Ancient-Candle-Co-Collumn.jpg?v=1759280981&width=2973");
    background-size: cover;
    background-position: center center;
}

.hero-container
{
    width: min(90%, 800px);
    min-height: 95%;
    display: grid;
    place-items: center;
}

.hero-container-content
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.hero-container-content-h2
{
    font-size: var(--text-mb-size-100);
    border: solid 1px var(--color-gold);
    width: fit-content;
    border-radius: 1.25rem;
    font-weight: 400;
    color: var(--color-gold);
    padding: 0.25rem 1rem;
}

.hero-container-content-h1
{
    font-family: var(--font-secundary);
    font-size: var(--text-size-700);
    line-height: 1;
    color: var(--color-white);
    text-align: center;
}

.hero-container-content-p
{
    color: var(--color-gold);
    text-align: center;
    font-size: var(--text-mb-size-200);
    line-height: 1.2;
}

.hero-container-content-btns
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.hero-container-content-btns-btn1
{
    background-color: var(--color-primary);
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    color: var(--color-white);
    font-size: var(--text-mb-size-100);
    font-weight: 600;
    letter-spacing: 0.2rem;
    border: solid 1px var(--color-primary);
}

.hero-container-content-btns-btn2
{
    background-color: black;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    color: var(--color-white);
    font-size: var(--text-mb-size-100);
    font-weight: 600;
    letter-spacing: 0.2rem;
    border: solid 1px var(--color-primary);
}















/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{

    .hero-container
    {
        
        min-height: 20%;
    }

    .hero-container-content
    {
        gap: 2.5rem;
    }

    

    .hero-container-content-h1
    {
        font-size: var(--text-size-xl-600);
    }

    .hero-container-content-p
    {
        font-size: var(--text-size-200);
    }

    .hero-container-content-btns
    {
        flex-direction: row;
    }

    


}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px)
{
    
    .hero-container-content
    {
        gap: 1.75rem;
    }
    
    
    .hero-container-content-h2
    {
        font-size: var(--text-size-200);
    }


     .hero-container-content-h1
    {
        font-size: var(--text-size-xl-700);
    }

}

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }





















/* Services */

.title-line
{
    width: 250px;
    height: 2px;
    background: linear-gradient(to right, transparent,var(--color-gold),transparent);
    margin-top: 1.5rem;
    margin-bottom: 4rem;
}


.services
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: 2.5rem;
}

.services-container
{
    width: min(90%, 1200px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.services-container-left
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.services-container-left-h2
{
    color: var(--color-gold);
    font-size: var(--text-mb-size-700);
    text-align: center;
    font-family: var(--font-logo);
    letter-spacing: 0.25rem;
}

.services-container-right
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-container-right-content
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
}

.services-container-right-content-article
{
    background-color: var(--color-primary-10);
    width: min(350px, 90%);
    height: 500px;
    border: solid 1px var(--color-primary);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 0 20px red;
}

.services-container-right-content-article-img
{
    height: 250px;
    width: 100%;
}

.services-container-right-content-article:nth-child(1) 
.services-container-right-content-article-img {
  background-image: url("https://media.glamour.mx/photos/650b813e16e929910082fa76/master/w_1600%2Cc_limit/lectura-de-tarot-mente-abierta.jpg");
  background-size: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background-position: center center;
}

.services-container-right-content-article:nth-child(2) 
.services-container-right-content-article-img {
  background-image: url("https://www.clarin.com/2022/06/20/GD-AjSbM7_2000x1500__1.jpg");
  background-size: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background-position: center center;
}

.services-container-right-content-article:nth-child(3) 
.services-container-right-content-article-img {
  background-image: url("https://sumerlabs.com/default/image-tool-lambda?new-width=0&new-height=0&new-quality=25&url-image=https%3A%2F%2Fsumerlabs.com%2Fsumer-app-90b8f.appspot.com%2Fproduct_photos%252Fbf1010cfc54464c38bf792d7a6901573%252F15536320-a2a6-11ec-b73e-b3a3e6672a6f%3Falt%3Dmedia%26token%3D3d5a13d8-b970-48c0-8dcd-1b72966c7608");
  background-size: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background-position: center center;
}

.services-container-right-content-article:nth-child(4) 
.services-container-right-content-article-img {
  background-image: url("https://thumbs.dreamstime.com/b/pareja-divorciada-separaci%C3%B3n-del-matrimonio-roto-concepto-de-fin-relaci%C3%B3n-mano-usando-tijeras-para-cortar-cuerda-desgarrar-197650836.jpg");
  background-size: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background-position: center center;
}

.services-container-right-content-article:nth-child(5) 
.services-container-right-content-article-img {
  background-image: url("https://www.bibliatodo.com/Reflexiones-Cristianas/wp-content/uploads/2024/09/Que-dice-la-Biblia-sobre-romper-maldiciones-generacionales.jpg");
  background-size: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background-position: center center;
}

.services-container-right-content-article:nth-child(6) 
.services-container-right-content-article-img {
  background-image: url("https://www.clarin.com/img/2024/02/29/fRzRsxjS8_720x0__1.jpg");
  background-size: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background-position: center center;
}

.services-container-right-content-article-h3
{
    color: var(--color-gold);
    text-align: center;
    font-size: var(--text-mb-size-500);
    font-family: var(--font-logo);
}

.services-container-right-content-article-p
{
    color: var(--color-white);
    width: 90%;
    text-align: center;
    font-size: var(--text-mb-size-100);
    line-height: 1.25;
}

.services-container-right-content-article-a
{
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    background-color: var(--color-primary);
    border-radius: 1.25rem;
    margin-bottom: 1.75rem;
    color: whitesmoke;
}

























/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px)
{

  
    .services
    {
        margin-block: 3.75rem;
    }

    .services-container-right-content
    {
        
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3.75rem;
    }

    .services-container-left-h2
    {
        font-size: var(--text-size-500);

    }

    .services-container-right-content-article-h3
    {
        font-size: var(--text-mb-size-600);
    }
}

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }














/* testimonies */


.testimonies
{
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonies-container
{
    width: min(90%, 1200px);
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
    
}

.testimonies-container-article
{
    background-color: var(--color-gold);
    width: min(70%, 350px);
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.25rem;
    border-radius: 1.25rem;
    gap: 0.5rem;
    opacity: 1;
    transition: 2s ease;
     
}

.hidden
{
    opacity: 0;
}


.testimonies-container-article-img
{
    border-radius: 5rem;
}

.testimonies-container-article-h3
{
    font-family: var(--font-logo);
    text-align: center;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.testimonies-container-article-p
{
    text-align: center;
}









/* 📱 Celular pequeño */
@media (min-width: 360px)
{

    .-slice2
    {
        display: none;
    }

}

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px) { }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px)
{ 
    .-slice2
    {
        display: flex;
    }
}

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px)
{
   
}

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }






/* footer */

/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px) { }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }




.footer
{
    width: 100%;
    background-color: var(--color-primary-10);
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-container
{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: whitesmoke;
    padding: 1.25rem;
    gap: 0.5rem;
}

.footer-container-logo-h2
{
    color: var(--color-gold);
    font-family: var(--font-logo);
    font-size: 1.75rem;
    
}
























































/* nombre */

/* 📱 Celular pequeño */
@media (min-width: 360px) { }

/* 📱 Celular estándar */
@media (min-width: 480px) { }

/* 📱 Celular grande */
@media (min-width: 600px) { }

/* 📱 Tablet vertical */
@media (min-width: 768px) { }

/* 📱 Tablet grande / small laptop */
@media (min-width: 820px) { }

/* 💻 Laptop pequeña / tablet landscape */
@media (min-width: 1024px) { }

/* 💻 Laptop estándar */
@media (min-width: 1280px) { }

/* 💻 Laptop grande */
@media (min-width: 1440px) { }

/* 🖥️ Desktop grande */
@media (min-width: 1600px) { }