/* variables.css */
:root{

--background:#F7F4EE;

--surface:#FFFFFF;

--text:#2C342D;

--text-soft:#6F746D;

--primary:#5D6C55;

--primary-dark:#45513F;

--border:#DDD7CC;

--container:1200px;

--radius:18px;

--transition:.35s;

}
/* base.css */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:var(--background);
background-image:
radial-gradient(circle at top right,#ECE7DB 0%,transparent 40%);

color:var(--text);

font-family:
Inter,
system-ui,
sans-serif;

line-height:1.6;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

.container{

width:min(var(--container),92%);

margin:auto;

}
/* header.css */
/* ==========================================================
   HEADER
========================================================== */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:rgba(248,245,239,.92);
    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(0,0,0,.05);
}

.header-container{

    width:min(1200px,92%);
    margin:0 auto;

    height:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}


.logo{

display:flex;

align-items:center;

text-decoration:none;

}
.logo img{

height: 70px;

width:auto;

display:block;

transition:.25s ease;

}
.logo:hover img{

opacity:.75;

}


.site-header nav ul{

    display:flex;
    align-items:center;
    gap:2.5rem;

    margin:0;
    padding:0;

    list-style:none;

}

.site-header nav li{

    margin:0;

}

.site-header nav a{

    color:#2d2d2d;
    text-decoration:none;

    font-size:.75rem;
    font-weight:500;

    transition:.3s;

}

.site-header nav a:hover{

    color:#6B7A56;

}

/* Espacio para compensar el header fijo */

main{

    padding-top:60px;

}

/* ======================================
   HEADER MOBILE
====================================== */

@media (max-width:768px){
    

.header-container{

    flex-direction:column;
    justify-content:center;

    height:auto;

    padding:1rem 0;

}

.site-header nav ul{

    margin-top:1rem;

    flex-wrap:wrap;
    justify-content:center;

    gap:1.4rem;

}

main{

    padding-top:90px;

}

.site-header{

    padding:.25rem 0;

    background:rgba(248,245,239,.96);

}

.header-container{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:.3rem;

}

.logo img{

    height:40px;

}



.site-header nav a{

    font-size:.80rem;

    letter-spacing:.03em;

}

}


/* layout.css */
.evolution{

    padding:40px 0;

    background:#fcfcfc;

}

.container{

    width:min(var(--container),92%);

    margin:auto;

}



/* components.css */
.eyebrow{

font-size:.85rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--primary);

margin-bottom:1.5rem;

font-weight:600;

}

h1{

font-size:clamp(2rem,5vw,3.5rem);

line-height:1.1;

font-weight:500;

letter-spacing:-.02em;

margin-bottom:2.2rem;

max-width:560px;

}

.lead{

font-size:1.35rem;

color:var(--text-soft);

max-width:640px;

margin-bottom:3rem;

}

.buttons{

display:flex;

gap:0.7rem;

flex-wrap:wrap;

}

.buttons a{

padding:1rem 1rem;

border-radius:999px;

transition:all .35s;

font-weight:300;

}

.buttons a:first-child{

background:var(--primary);

color:white;

}

.buttons a:first-child:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

.buttons a:last-child{

border:1px solid var(--border);

}

.buttons a:last-child:hover{

background:white;

}
/* ===========================
   BUTTON COMPONENT
=========================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:1rem 2rem;

max-width:220px;

border-radius:999px;

font-weight:600;

transition:.35s;

cursor:pointer;

}


.btn-primary{

    background:#5C6F57;

    color:white;

    padding:18px 36px;

    border-radius:999px;

    transition:.35s;

}


.btn-primary:hover{

    transform:translateY(-2px);

    background:#4F614B;

}


.btn-secondary{

    border:1px solid #5C6F57;

    color:#5C6F57;

    padding:18px 36px;

    border-radius:999px;

    transition:.35s;

}

.btn-secondary:hover{

    background:#5C6F57;

    color:white;

}


/* ==========================
   SECTION TITLE
========================== */

.section-title{

max-width:720px;

margin:0 auto 4rem;

text-align:center;

}

.section-eyebrow{

text-transform:uppercase;

letter-spacing:.18em;

font-size:.8rem;

font-weight:700;

color:var(--primary);

margin-bottom:1rem;

}

.section-title h2{

font-size:clamp(2.2rem,5vw,3.6rem);

line-height:1.05;

font-weight:500;

margin-bottom:1.5rem;

letter-spacing:-.03em;

}

.section-text{

font-size:1.15rem;

color:var(--text-soft);

}


/*==========================================
HERO
==========================================*/

.hero{

    background:white;

    padding:70px 0 70px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:56px;

}

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:110%;

    max-width:600px;

    height:auto;

    display:block;

    margin:auto

}
.hero h1{

    font-size:clamp(3.8rem,2vw,4.5rem);

    line-height:0.95;

    margin-bottom:20px;

}
.hero .lead{

    max-width:520px;

    margin-bottom:30px;

    font-size:1.08rem;

    line-height:1.3;

}



/*======================================

PHILOSOPHY

======================================*/

.philosophy{

padding:7rem 0 8rem;

}

.section-tag{

font-size:.82rem;

letter-spacing:.28em;

text-transform:uppercase;

color:var(--primary);

margin-bottom:1.5rem;

}

.philosophy h2{

font-size:clamp(1.5rem,6vw,2.2rem);

line-height:1.15;

max-width:700px;

margin-bottom:2rem;

}

.section-description{

max-width:720px;

font-size:1.15rem;

line-height:1.9;

opacity:.78;

margin-bottom:4.5rem;

}

/* ==========================
   PHILOSOPHY PILLARS
========================== */

.pillars{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:3rem;

}

.pillar{

position:relative;

padding-right:3rem;

}

.pillar + .pillar{

border-left:1px solid rgba(0,0,0,.08);

padding-left:3rem;

}

.pillar h3{

margin-top:1.2rem;

margin-bottom:1rem;

font-size:1.5rem;

}

.pillar p{

font-size:1rem;

line-height:1.8;

opacity:.75;

}
.pillar-icon{

width:44px;

height:44px;

background-size:contain;

background-repeat:no-repeat;

background-position:center;

}

.icon-naturaleza{

background-image:url("../icons/leaf.svg");

}

.icon-investigacion{

background-image:url("../icons/flask.svg");

}

.icon-transparencia{

background-image:url("../icons/heart.svg");

}

/*==================================
FEATURED PRODUCTS
==================================*/
.featured-products{

    padding:120px 0;

    background:white;

}

.featured-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:32px;

margin-top:64px;

}

.featured-card{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

padding:10px;

}

.featured-card img{

width:240px;

height:auto;

display:block;

margin:0 auto 28px;

transition:.35s;

}

.featured-card:hover img{

transform:translateY(-6px);

}

.featured-card span{

font-size:.8rem;

letter-spacing:.14em;

text-transform:uppercase;

color:#80907F;

}

.featured-card h3{

margin:12px 0 8px;

}

.featured-card p{

margin-bottom:20px;

}

.featured-footer{

margin-top:80px;

text-align:center;

}

/*======================================

INGREDIENTS

======================================*/


.ingredients{

    padding:120px 0;

    background:#F8F6F2;

}

.ingredient-search{

max-width:520px;

margin:40px auto;

}

.ingredient-search input{

width:100%;

padding:14px 22px;

font-size:.95rem;

border-radius:999px;

border:1px solid #DAD7D0;

background:white;

transition:.3s;

}

.ingredient-categories{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin-bottom:56px;

}


.ingredient-categories button{

padding:10px 18px;

border-radius:999px;

font-size:.82rem;

background:#F4F2EE;

border:none;

cursor:pointer;

transition:.3s;

}

.ingredient-categories button:hover{

background:var(--primary);

color:white;

}

.ingredient-grid{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:24px;

margin-top:40px;

}

.ingredient-card{

padding:28px;

border:1px solid #ECE8E1;

border-radius:18px;

background:white;

transition:.3s;

}

.ingredient-card:hover{

transform:translateY(-6px);

}

.ingredient-card h3{

margin-bottom:12px;

font-size:1.2rem;

line-height:1.3;

}

.ingredient-card p{

margin-bottom:18px;

font-size:.95rem;

line-height:1.65;

}

.ingredient-card a{

font-size:.9rem;

font-weight:500;

color:#5E745E;

text-decoration:none;

}


/* ==========================================================
   COMING SOON
========================================================== */

.coming-soon{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:5rem 0;

}

.coming-soon .container{

    max-width:700px;

}

.coming-tag{

    display:inline-block;

    letter-spacing:.25em;

    font-size:.8rem;

    color:#7D9478;

    margin-bottom:1rem;

}

.coming-soon h1{

    margin-bottom:1.5rem;

}

.coming-soon p{

    max-width:600px;

    margin:0 auto 2.5rem;

    line-height:1.8;

}


/* ======================================
                MOBILE
====================================== */


/* =========================================
   HERO MOBILE
========================================= */

@media (max-width:768px){

.hero{

    padding-top:4rem;
    padding-bottom:3rem;
    text-align:center;

}

.hero-grid{

    grid-template-columns:1fr;
    gap:2.5rem;
    display:flex;
    flex-direction:column;

}

.hero-content{

    text-align:center;
    align-items:center;

}

.hero-image{

    order:1;

}

.hero-image img{

    max-width:100%;

    margin:auto;

}

.hero h1{

    font-size:2rem;

    line-height:1.05;

    max-width:320px;

    margin:0 auto 1rem;

}

.hero .lead{

    font-size:1rem;

    line-height:1.65;

    max-width:320px;

    margin:0 auto 2rem;

}

.buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:.9rem;

}

.buttons .btn{

    width:100%;

}

.btn{

    height:48px;

    font-size:.5rem;
}
}

/* ======================================
   PHILOSOPHY MOBILE
====================================== */

@media (max-width:768px){

.philosophy{

    padding:5rem 0;

}

.pillars{

    gap:2rem;

}

.pillar{

    padding:0;

}

.pillar + .pillar{

    border:none;

    padding:0;

}

}
/* ======================================
   INGREDIENTS MOBILE
====================================== */

@media (max-width:768px){

.ingredient-grid{

    grid-template-columns:1fr;

}

.ingredient-card{

    padding:1rem;

}

}
/* ======================================
  FEATURED PRODUCTS MOBILE
====================================== */

@media (max-width:768px){

.featured-grid{

    grid-template-columns:1fr;

}

}

/* ======================================
   FOOTER MOBILE
====================================== */

@media (max-width:768px){

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:2rem;

}

}
/* ==========================================================
   CONTACTO
========================================================== */

.contact-section{

    padding:6rem 0;

}

.contact-header{

    max-width:720px;
    margin:0 auto 4rem;
    text-align:center;

}

.contact-header h2{

    margin-bottom:1.2rem;

}

.contact-grid{

    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:5rem;
    align-items:start;

}


/* ==========================================================
   FORMULARIO
========================================================== */

.contact-form-wrapper{

    width:100%;

}

.contact-form{

    display:flex;
    flex-direction:column;
    gap:1.5rem;

}

.form-group{

    display:flex;
    flex-direction:column;
    gap:.55rem;

}

.form-group label{

    font-size:.9rem;
    font-weight:600;
    letter-spacing:.02em;

}

.form-group input,
.form-group textarea{

    width:100%;
    padding:1rem 1.1rem;

    border:1px solid rgba(50,50,50,.18);
    border-radius:12px;

    background:#fff;

    font-family:inherit;
    font-size:.95rem;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}

.form-group textarea{

    resize:vertical;
    min-height:150px;

}

.form-group input:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#7D9478;

    box-shadow:
        0 0 0 3px rgba(125,148,120,.12);

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:rgba(40,40,40,.45);

}


/* ==========================================================
   BOTÓN
========================================================== */

.contact-submit{

    align-self:flex-start;

    padding:.9rem 1.8rem;

    border:none;
    border-radius:999px;

    background:#7D9478;
    color:#fff;

    font-family:inherit;
    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;

}

.contact-submit:hover{

    transform:translateY(-2px);
    opacity:.9;

}


/* ==========================================================
   INFORMACIÓN DE CONTACTO
========================================================== */

.contact-info{

    padding-top:.5rem;

}

.contact-info h3{

    margin-top:1rem;
    margin-bottom:1rem;

}

.contact-info > p{

    max-width:430px;
    line-height:1.8;

}

.contact-links{

    display:flex;
    flex-direction:column;
    gap:1rem;

    margin-top:2rem;

}

.contact-link{

    display:flex;
    flex-direction:column;

    padding:1.3rem 1.4rem;

    border:1px solid rgba(50,50,50,.12);
    border-radius:16px;

    text-decoration:none;

    transition:
        transform .2s ease,
        border-color .2s ease;

}

.contact-link:hover{

    transform:translateY(-2px);
    border-color:#7D9478;

}

.contact-link-title{

    font-weight:600;
    margin-bottom:.25rem;

}

.contact-link-text{

    font-size:.9rem;
    opacity:.7;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .contact-section{

        padding:4rem 0;

    }

    .contact-header{

        margin-bottom:2.8rem;

    }

    .contact-grid{

        grid-template-columns:1fr;
        gap:3.5rem;

    }

    .contact-submit{

        width:100%;
        text-align:center;

    }

    .contact-info{

        padding-top:0;

    }

}

/* responsive.css */
/* ==========================================================
   RESPONSIVE
========================================================== */

/* ---------- Tablet ---------- */

@media (max-width:1024px){

.container{
    width:min(92%,900px);
}

.hero-grid,
.product-hero__container,
.ingredients-grid,
.featured-grid,
.evolution-grid{

    grid-template-columns:1fr;
    gap:3rem;

}

.pillars{

    grid-template-columns:1fr;

}

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

section{

    padding:2rem 0;

}

.container{

    width:92%;

}
/* ==========================
   HERO HOME MOBILE
========================== */

.hero-container{

    display:flex;
    flex-direction:column;

}

.hero-image{

    order:1;

}

.hero-content{

    order:2;

    text-align:center;
    align-items:center;

}

.hero-image img{

    width:100%;
    max-width:360px;
    margin:0 auto;

}
.product-cta-buttons{

    flex-direction:column;

    gap:1rem;

}

.product-cta-buttons .btn{

    width:100%;

}

/* ==========================
   TYPOGRAPHY MOBILE
========================== */

h1{

    font-size:2.55rem;
    line-height:1.08;
    letter-spacing:-0.02em;

}

h2{

    font-size:1.75rem;
    line-height:1.2;

}

.hero .lead,
.product-lead{

    font-size:1.05rem;
    line-height:1.7;

}

.section-description,
.section-text,
.product-description{

    font-size:1rem;
    line-height:1.75;

}

.eyebrow,
.section-tag,
.section-eyebrow,
.product-category{

    font-size:.72rem;
    letter-spacing:.22em;

}

.btn{

    font-size:.95rem;

}


.lead,
.product-lead{

    font-size:1.15rem;

}

.hero-grid,
.product-hero__container,
.pillars,
.ingredient-grid,
.featured-grid,
.evolution-grid{

    grid-template-columns:1fr;

}

.hero-image img,
.product-hero__image img{

    max-width:100%;

}

.buttons{

display:flex;

flex-direction:column;

align-items:center;

gap:1rem;

width:100%;

}

.buttons .btn{

width:100%;

max-width:320px;

}
@media (max-width:768px){

.product-actions{

    width:95%;

    display:flex;

    flex-direction:row;

    justify-content:center;

    gap:.2rem;

    margin-top:1rem auto 0;

}

.product-actions .btn{

    flex:1;

    width:auto;

    min-height:44px;

    padding:.5rem 0rem;

    font-size:.7rem;

    white-space: nowrap;

}

}
.btn{

    width:auto;

    justify-content:center;

}

}


/* ---------- Teléfonos pequeños ---------- */

@media (max-width:480px){

.container{

    width:94%;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.6rem;

}

section{

    padding:3rem 0;

}

}
html,
body{

    overflow-x:hidden;

}

img{

    max-width:100%;

    height:auto;

}
/* ==========================================================
   PRODUCTS PAGE MOBILE
========================================================== */

@media (max-width:768px){

.products-page{

    padding:2rem 0;

}

@media (max-width:768px){

.products-grid{

    grid-template-columns:repeat(2,1fr) !important;

    gap:1rem !important;

}


}

.product-card-image{

    padding:1.2rem;

}

.product-card-content{

    padding:1.2rem;

}

.product-card h2{

    font-size:1rem;

    line-height:1.2;

    margin-bottom:.4rem;

}

.product-card p{

    font-size:.82rem;

    line-height:1.45;

    margin-bottom:1rem;

}

.product-line{

    font-size:.65rem;

}

.product-link{

    font-size:.82rem;

}

}

/* product.css */
/* ==========================================================
   PRODUCT HERO
========================================================== */

.product-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:#F8F5F0;

    overflow:hidden;

}


.product-hero__container{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:6rem;

}


.product-hero__content{

    max-width:560px;
    display:flex;
    flex-direction:column;

}

.product-hero__image{

    display:flex;
    justify-content:center;
    align-items:center;

}

.product-hero__image img{

    width:100%;

    height:90vh;

    object-fit:cover;

    display:block;

    border-radius:28px;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

}

.breadcrumb{

    font-size:.85rem;
    color:#8a8a8a;
    margin-bottom:2rem;

}

.product-category{

    font-size:.85rem;
    letter-spacing:.18rem;
    text-transform:uppercase;
    color:#6b7a56;
    font-weight:600;

}

.product-hero h1{

    margin-top:1rem;
    margin-bottom:.4rem;

    font-size:clamp(2rem, 3.2vw, 3.6rem);

    line-height:1.05;

    white-space:nowrap;

}


.product-hero h2{

    font-size:2.2rem;

    font-weight:300;

    color:#6E6A63;

    margin-bottom:3rem;

}

.product-lead{

    font-size:1.5rem;

    line-height:1.55;

    font-weight:300;

    color:#26322A;

    margin-bottom:1rem;

}

.product-description{

    font-size:1.1rem;

    line-height:2;

    color:#5F5F5F;

    max-width:600px;

}
.product-actions{

    display:flex;

    gap:1rem;

    margin-top:2.5rem;

}
/* =======================================================
   PRODUCT STORY
======================================================= */

.product-story{

    padding:1rem 0;

    background:white;

}

.story-grid{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

    gap:6rem;

    align-items:center;

}

.story-image img{

    width:100%;

    border-radius:28px;

    display:none;

}

.section-overline{

    display:block;

    margin-bottom:1rem;

    letter-spacing:.25em;

    font-size:.82rem;

    color:#6B7A67;

}

.story-content h2{

    font-size:3rem;

    line-height:1.1;

    margin-bottom:2rem;

    color:#283128;

}

.story-content p{

    font-size:1.15rem;

    line-height:2;

    color:#555;

    margin-bottom:1.5rem;

}
/*======================================================
BENEFICIOS
======================================================*/

.product-benefits{

    padding:1rem 0;

    background:#F8F5F0;

}

.benefits-container{

    width:min(1280px,92%);

    margin:auto;

}

.benefits-container h2{

    max-width:760px;

    font-size:3rem;

    line-height:1.15;

    margin-bottom:5rem;

    color:#26322A;

    font-weight:500;

}

.benefits-grid{ 
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:56px;
    align-items:stretch;

}

.benefit-card{

    padding:36px;
    border-radius:18px;
    border:1px solid #E7E4DE;
    background:rgb(250, 249, 249);
    transition:.3s;

}

.benefit-card:hover{

    transform:translateY(-6px);

}

.benefit-number{

    font-size:.85rem;

    letter-spacing:.25em;

    color:#8A9A84;

    margin-bottom:1.2rem;

}

.benefit-card h3{
    margin:0 0 10px 0;
    font-size:1.25rem;
    line-height:1.3;
    color:#243126;

}

    
.benefit-card p{

    color:#666;

    line-height:1.9;

    max-width:420px;

}
/*======================================================
FORMULA
======================================================*/

.formula-story{

    padding:1rem 0;

    background:white;

}

.formula-container{

    width:min(1200px,92%);

    margin:auto;

}

.formula-container h2{

    font-size:3rem;

    margin-bottom:1rem;

    color:#26322A;

}

.formula-intro{

    max-width:720px;

    line-height:2;

    color:#666;

    margin-bottom:5rem;

}

.ingredient-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:4rem;

}

.ingredient-list article{

    padding-bottom:2rem;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.ingredient-list h3{

    margin-bottom:1rem;

    color:#26322A;

}

.ingredient-list p{

    color:#666;

    line-height:1.8;

}





/* ==========================================================
   PRODUCT PAGE - MOBILE PREMIUM
========================================================== */

@media (max-width:768px){

/* ==========================================================
   HERO
========================================================== */

.product-hero{

    min-height:auto;
    padding:2rem 0 3rem;

}

.product-hero__container{

    display:flex;
    flex-direction:column;
    gap:2rem;

}

.product-hero__image{

    order:1;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:2rem;

}

.product-hero__content{

    order:2;

    text-align:center;

    align-items:center;

}

.product-hero__image img{

    width:100%;

    max-width:280px;

    height:auto;

    object-fit:contain;

    display:block;

    margin: auto;

    filter:drop-shadow(0 20px 40px rgba(0,0,0,.12));

}


/* ==========================================================
   TEXTOS
========================================================== */

.breadcrumb{

    display:none;

}

.product-category{

    font-size:.72rem;
    letter-spacing:.22em;
    margin-bottom:1rem;

}

.product-hero h1{

    margin-top:1rem;
    margin-bottom:.4rem;

    font-size:clamp(2rem, 3.2vw, 3.6rem);

    line-height:1.05;

    white-space:nowrap;

}

.product-hero h2{

    font-size:1.25rem;
    margin-bottom:1.4rem;

}

.product-lead{

    font-size:1rem;
    line-height:1.75;
    max-width:300px;
    margin:0 auto 1.3rem;

}

.product-description{

    font-size:.98rem;
    line-height:1.85;
    max-width:300px;
    margin:0 auto;
    color:#555;

}

/* ==========================================================
   BOTONES
========================================================== */

.product-actions{

    display:flex;
    flex-direction:row;
    width:100%;
    gap:.3rem;
    margin-top:1.5rem;

}

.product-actions .btn{

    width:100%;
    min-height:50px;

}

/* ==========================================================
   BENEFICIOS
========================================================== */

.product-benefits{

    padding:1rem 0;

}

.benefits-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:1.5rem;

}

.benefit-card{

    padding:1.8rem;

    border-radius:22px;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.benefit-card h3{

    font-size:1.2rem;

    margin-bottom:.8rem;

}

.benefit-card p{

    font-size:.95rem;

    line-height:1.75;

    color:#555;

}

/* ==========================================================
   STORY
========================================================== */

.story{

    padding:1rem 0;

}
.story-grid{

    display:block;

}

.story-image{

    display:none;

}

.story-content{

    width:100%;
    max-width:700px;
    margin:0 auto;

}

.story-content h2{

    text-align:left;
    font-size:1.9rem;
    line-height:1.2;
    margin-bottom:1.5rem;

}

.story-content p{

    font-size:1rem;
    line-height:1.9;
    color:#555;
    margin-bottom:1.4rem;

}

/* ==========================================================
   CTA
========================================================== */

.product-cta{

    padding:1rem 0;

}

/* ==========================================================
   CTA BUTTONS
========================================================== */

.product-cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

    margin-top:2rem;

}
.btn-outline{

    background:transparent;

    color:var(--color-primary);

    border:1px solid var(--color-primary);

}

.btn-outline:hover{

    background:var(--color-primary);

    color:white;

}

/* ==========================================================
   ANCHO DE LECTURA
========================================================== */

.product-section{

    width:min(92%, 360px);

    margin: auto;

}
/* ==========================================================
   TITULOS
========================================================== */

.product-benefits h2,
.story-content h2,
.product-ingredients h2,
.product-cta h2{

    font-size:2rem;

    line-height:1.15;

    margin-bottom:1.4rem;

    letter-spacing:-0.02em;

}
.section-tag,
.section-overline{

    display:inline-block;

    font-size:.72rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--primary);

    margin-bottom:1rem;

}/* ==========================================================
   FORMULA / INGREDIENTES MOBILE
========================================================== */

.formula-story{

    padding:1rem 0;

}

.formula-container{

    width:100%;

    max-width:360px;

    margin:0 auto;

}

.formula-story .section-overline{

    display:inline-block;

    font-size:.72rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--primary);

    margin-bottom:1rem;

}

.formula-story h2{

    font-size:2rem;

    line-height:1.15;

    margin-bottom:1.4rem;

}

.formula-intro{

    font-size:1rem;

    line-height:1.8;

    color:#666;

    margin-bottom:2.8rem;

}

.ingredient-list{

    display:grid;

    grid-template-columns:1fr;

    gap:1.4rem;

}

.ingredient-list article{

    background:#ffffff;

    border-radius:22px;

    padding:1.8rem;

    box-shadow:0 12px 28px rgba(0,0,0,.05);

    transition:.3s;

}

.ingredient-list article h3{

    font-size:1.15rem;

    margin-bottom:.8rem;

    line-height:1.35;

}

.ingredient-list article p{

    font-size:.95rem;

    line-height:1.8;

    color:#666;

}

/* ==========================================================
   PRODUCT NAVIGATION
========================================================== */

.product-navigation{

    width:min(1200px,92%);
    margin:2rem auto 0;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.product-navigation a{

    text-decoration:none;

    color:#6b7a56;

    font-size:.9rem;

    font-weight:600;

    transition:.3s;

}

.product-navigation a:hover{

    opacity:.65;

}
}
/* products.css */
/* ==========================================================
   PRODUCTS PAGE
========================================================== */

.products-page{

    padding:2rem 0;

}

.products-page h1{

    text-align:center;

    margin-bottom:1rem;

}

.products-intro{

    max-width:720px;

    margin:0 auto 1rem;

    text-align:center;

    font-size:1.15rem;

    line-height:1.9;

    color:#666;

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:3rem;

}

.product-card{

    background:white;

    border-radius:28px;

    overflow:hidden;

    transition:.35s;

    box-shadow:

        0 20px 50px rgba(0,0,0,.05);

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.08);

}

.product-card a{

    display:block;

    color:inherit;

    text-decoration:none;

}

.product-card-image{

    padding:1rem;

    background:#F7F4EF;

}

.product-card-image img{

    width:100%;

    display:block;

}

.product-card-content{

    padding:1rem;

}

.product-line{

    display:block;

    font-size:.65rem;

    letter-spacing:.18em;

    color:var(--primary);

    text-transform:uppercase;

    margin-bottom:.8rem;

}

.product-card h2{

    font-size:1.2rem;

    margin-bottom:.8rem;

}

.product-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:1rem;

}

.product-link{

    font-weight:600;

    color:var(--primary);

}
/* ==========================================================
   PRODUCT NAVIGATION
========================================================== */

.product-navigation{

    width:min(1200px,92%);
    margin:2rem auto 0;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.product-navigation a{

    text-decoration:none;

    color:#6b7a56;

    font-size:.9rem;

    font-weight:600;

    transition:.3s;

}

.product-navigation a:hover{

    opacity:.65;

}

/*======================================
PRODUCT PAGES
======================================*/

.product-story{

padding:20px 0;

background:#f5f5f4;

}

.product-benefits{

padding:20px 0;

background:rgb(255, 254, 254);

}

.product-ingredients{

padding:20px 0;

background:#d1cfcc;

}

.product-how-to-use{

padding:20px 0;

background:rgb(243, 240, 240);

}

.product-cta{

padding:40px 0;

background:#EEF3EC;

text-align:center;

}

.product-cta h2{

max-width:720px;

margin:0 auto 24px;

}

.product-cta p{

max-width:640px;

margin:0 auto 40px;

}
/*==========================================
PRODUCT SECTIONS
==========================================*/

.product-section{

max-width:1180px;

margin:auto;

padding:40px 10px;

}
.product-section h2{

font-size:clamp(2rem,3vw,3rem);

line-height:1.15;

margin-bottom:24px;

font-weight:500;

color:#243126;

}

.product-section p{

font-size:1.08rem;

line-height:1.8;

color:#4d564d;

}

.section-tag{

display:inline-block;

margin-bottom:18px;

font-size:.82rem;

letter-spacing:.15em;

text-transform:uppercase;

color:#70816f;

font-weight:600;

}

/*==========================================
PRODUCT HOW TO USE
==========================================*/

.how-to-use-container{

margin-top:5px;

max-width:760px;

}

.how-to-use-list{

    
list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:8px;

}

.how-to-use-list li{

display:flex;

align-items:flex-start;

gap:20px;

}

.step-number{

width:42px;

height:42px;

border-radius:50%;

background:#7D9478;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-weight:600;

font-size:1rem;

flex-shrink:0;

}

.how-to-use-list li:nth-child(1) .step-number::before{

content:"1";

}

.how-to-use-list li:nth-child(2) .step-number::before{

content:"2";

}

.how-to-use-list li:nth-child(3) .step-number::before{

content:"3";

}

.how-to-use-list li:nth-child(4) .step-number::before{

content:"4";

}

.how-to-use-list li:nth-child(5) .step-number::before{

content:"5";

}

.how-to-use-list p{

margin:0px 0 0 0;

line-height:1.8;

}
html{

    scroll-behavior: smooth;

}