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

:root {
    --color-primary:   #0d3b66;
    --color-primary-t: #0d3b6681;
    --color-secondary: #1e88e5;
    --color-accent:    #e3f2fd;
    --color-text:      #111111;
    --color-border:    #d0d7de;
    --color-bg:        #ffffff;
    --color-danger:    #c0392b;
    --color-danger-hover: #922b21;
    --color-muted:     #f5f5f5;
    --color-muted-text: #666666;
    --radius:          10px;
    --transition:      0.2s ease;
}

body{
/*font-family: "Nunito", sans-serif;*/
font-family: "Cabin", "Arial Rounded MT Bold", sans-serif;

background-image: url("/img/background.jpg");

color:#222;

}

header{

position:fixed;

top:0;

width:100%;

height:80px;

background: var(--color-primary);

display:flex;

justify-content:space-between;

align-items:center;

padding:0 4%;

box-shadow:0 2px 10px rgba(0,0,0,.15);

z-index:100;

}

.logo img{

height:55px;

}

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:var(--color-accent);

font-weight:600;

transition:.25s;

}

nav a:hover{

color:var(--color-secondary);

}

.pre-background{
    margin: 2%;
    background-color: rgba(250, 250, 250, 0.5);
    border-radius: 12px;
}

section{

padding:50px 8%;

}
.small-section-margin {
    margin-bottom: 5px;
    padding-top:40px;
    padding-bottom: 0;
}



.fullwide{
    padding:0px 0px;
}

#home{
    height:calc(100vh - 80px);
    margin-top:80px;
}

.hero{

display:flex;

align-items:center;

gap:50px;

min-height:100vh;


}

.hero-slider{

    width:100%;
    height:100%;

    overflow:hidden;

}

.hero-track{
    display:flex;
    height:100%;
    transition:transform 1s cubic-bezier(.22,1,.36,1);
}

.hero-slide{
    flex:0 0 100%;
    position:relative;
    height:100%;
}

.hero-slide img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.hero-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.55),

        rgba(0,0,0,.45)

    );

}

.hero-overlay{

    position:absolute;

    top:50%;

    left:10%;

    transform:translateY(-50%);

    color:white;

    z-index:5;

    max-width:650px;

}

.hero-overlay h1{

    font-size:64px;

    margin-bottom:20px;

}

.hero-overlay p{

    font-size:22px;

    line-height:1.6;

}

.btn{

    display:inline-block;

    margin-top:30px;

    padding:15px 35px;

    background:var(--color-primary);

    color:white;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.btn:hover{

    background:#4e38c7;

}

.catalog-section h2 {
    font-size: 40px;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.catalog-section p {
    font-size: 18px;
    line-height: 1.8;
    margin-top: 10px;
}

.catalog-display{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 25px;
    row-gap: 20px;

    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
}

.catalog-card {
    width:220px;
    background-color: var(--color-bg);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}



.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.catalog-card img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.catalog-card p {
    margin: 16px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary);
}

#nosotros{

display:flex;
flex-wrap: wrap;
gap:40px;
align-items:center;

}

.about-text{

flex:5;

}

.about-text h2{

font-size:40px;

margin-bottom:20px;

color:var(--color-primary);

}

.about-text p{

font-size:18px;

line-height:1.8;

margin-top: 10px;

}

.about-slider {
    flex: 4;
    min-width: 35vw;
    padding-top: 10px;
    position: relative;
    aspect-ratio: 1 / 1;
}

.about-slider img {
    position: absolute;
    inset: 10px 0 0 0;

    width: 100%;

    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    background: #ddd;

    opacity: 0;
    transition: opacity 1s ease;
}

.about-slider img.active {
    opacity: 1;
}

#contacto{

display:flex;

gap:50px;

}

.contact-form{

flex:1;

display:flex;

flex-direction:column;

gap:15px;

}

.contact-form h2{

color:var(--color-primary);

margin-bottom:10px;

}

.contact-form input,
.contact-form textarea{

padding:15px;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

}

.contact-form textarea{

height:170px;

resize:none;

}

button{

padding:15px;

background:var(--color-primary);

color:white;

border:none;

border-radius:8px;

cursor:pointer;

font-size:16px;

transition:.25s;

}

button:hover{

background:var(--color-secondary);

}

.contact-info{

flex:1;

}

.contact-info h2{

color:var(--color-primary);

margin-bottom:20px;

}

.contact-info p{

margin-bottom:10px;

}

.contact-info iframe{

width:100%;

height:320px;

margin-top:20px;

border:none;

border-radius:12px;

}

.catalog-header{
    margin-top:70px;
    margin-bottom:5px;
    margin-left: 30px;
}

.catalog-header h1{

    color:var(--color-primary);
    font-size:42px;

}

.catalog-header p{

    color:var(--color-muted-text);

}



.catalog-filters{

    display:flex;
    gap:15px;
    margin:10px 0;
    padding:15px;
    flex-wrap:wrap;

}

.catalog-filters input,
.catalog-filters select{

    padding:14px 16px;

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

    border-radius:10px;

    font-size:16px;

    background-color: var(--color-bg);
    transition: var(--transition)

}

.catalog-filters input:hover,
.catalog-filters select:hover{
    background-color: var(--color-accent);
    transition: var(--transition)

}

.catalog-filters input{

    flex:1;
    min-width:260px;

}

.catalog-filters select{

    width:240px;

}

.catalog-categories{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    gap:10px;
    margin-top:15px;
}




.category-chip{
    padding:10px 18px;
    border:1px solid var(--color-border);
    border-radius:999px;
    background: var(--color-bg);
    color: var(--color-primary);
    cursor:pointer;
    transition:.2s;
    user-select:none;
}

.category-chip:hover{
    background:var(--color-accent);
}

.category-chip.active{
    background:var(--color-primary);
    color:white;
    border-color:var(--color-primary);
}


.catalog-category{
    margin-bottom:60px;
    padding-top:5px;
    padding-left:10px;
    padding-right:10px;
}



.catalog-category h2{
    margin-bottom:20px;
    color:var(--color-primary);
    font-size:32px;
    border-bottom:2px solid var(--color-secondary);
    padding-bottom:10px;
}

.catalog-placeholder{
    width:100%;
    height:200px;

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

    padding:20px;

    background: var(--color-muted);

    color:var(--color-primary);
    font-size:40px;
    font-weight:700;
    text-align:center;

    border-bottom:1px solid var(--color-border);
}

.product-page{
    margin-top:80px;

    display:flex;
    gap:50px;
    align-items:flex-start;
    flex-wrap: wrap;
}

.product-gallery{
    flex:1;

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

    gap:15px;
}

#imageContainer{
    width:450px;
    height:450px;

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

    background:white;
    border-radius:12px;
    overflow: hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

#productImage{
    max-width:100%;
    max-height:100%;
    object-fit:contain;

    opacity: 1;
    transition: opacity .25s ease;
}

#productImage.fade {
    opacity: 0;
}

.product-placeholder{

    width:100%;
    height:100%;
    object-fit:contain;

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

    font-size:70px;
    font-weight:bold;

    color:var(--color-primary);

    background:var(--color-muted);
}

.gallery-arrow{

    width:50px;
    height:50px;
    background-color: #00000000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-arrow:hover{
    transform: translateY(-3px);
    /* Opcional: agrega una sombra para dar sensación de elevación */
    /*box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);*/
}

.gallery-arrow:active {
    /* Al hacer clic vuelve un poco hacia abajo */
    transform: translateY(-1px);
}

.product-info{
    flex:1;
}

.product-info h1{
    margin:20px 0;
    color:var(--color-primary);
}

#productCode{
    font-size:22px;
    font-weight:bold;
}

#productDescription{
    line-height: 1.8;
    white-space: pre-line;
}

.gallery-column{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

#imageCounter{
    font-size:15px;
    color:var(--color-muted-text);
    user-select:none;
}

#imageModal{

    position:fixed;
    inset:0;

    display:none;

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

    background:rgba(0,0,0,.7);

    z-index:9999;
}

#imageModal.active{
    display:flex;
}

#modalContent{

    position:relative;

    background:white;
    padding:20px;

    border-radius:12px;

    max-width:95vw;
    max-height:100vh;

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

#modalImage{

    max-width:88vw;
    max-height:88vh;

    object-fit:contain;
}

#closeModal{

    position:absolute;
    bottom:10px;
    right:35px;


    border:none;
    border-radius:50%;

    font-size:20px;

    cursor:pointer;
}

.loading-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:350px;

    gap:18px;

    color:var(--color-primary);
}

.loading-spinner{
    width:48px;
    height:48px;

    border:5px solid #d8e7f6;
    border-top-color:var(--color-primary);

    border-radius:50%;

    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

footer{
    background-color: var(--color-primary);
    color: var(--color-accent);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media(max-aspect-ratio: 1/1){

.hero,
#nosotros,
#contacto{

flex-direction:column;
flex-wrap: wrap;

}

.hero-overlay h1 {
    font-size: 35px;
}

.about-slider{
    min-width: 80vw;
}

header{

flex-direction:column;

height:auto;

padding:15px;

}

nav{

margin-top:10px;

}

.text-slide h1{

font-size:35px;

}

.product-page{
    flex-direction:column;
}

.catalog-card{
    max-width: 35vw;
}

#imageContainer{
    width:100%;
    height:350px;
}

.small-section-margin {
    margin-bottom: 5px;
    padding-top:60px;
    padding-bottom: 0;
}

}