/* ESTILOS GENERALES CSNET */

:root {
    --principal: #f9e990;
    --principal-light: #FCE9C4;
    --secundario: #d7c55e;
    --negro: #151518;
    --light1: rgba(234, 238, 241, 0.08);
    --grisTexto: #878c91;
    --grisFondo: #eee;
    --swiper-navigation-size: 1em;
}

@font-face {
    font-family: "Work Sans";
    src: url("/fuentes/Work_Sans/WorkSans-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Work Sans";
    src: url("/fuentes/Work_Sans/WorkSans-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Work Sans";
    src: url("/fuentes/Work_Sans/WorkSans-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Work Sans";
    src: url("/fuentes/Work_Sans/WorkSans-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Kaisei Tokumin";
    src: url("/fuentes/Kaisei_Tokumin/KaiseiTokumin-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("/fuentes/Instrument_Serif/InstrumentSerif-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Instrument Serif";
    src: url("/fuentes/Instrument_Serif/InstrumentSerif-Italic.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Jost";
    src: url("/fuentes/Jost/Jost-VariableFont_wght.ttf")
        format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}

.fondo-principal {
    background-color: var(--principal);
}

.fondo-light {
    background-color: var(--light1);
}

.fondo-gris {
    background-color: var(--grisFondo);
    color: black;
}

.color-principal {
    color: var(--principal);
}

.color-secundario {
    color: var(--secundario);
}

.boton-principal {
    color: var(--negro);
    background-color: var(--principal);
    border: 1px solid var(--principal);
    border-radius: 999rem;
    width: fit-content;
}

.boton-principal:hover {
    color: var(--negro);
    background-color: var(--secundario);
    border: 1px solid var(--secundario);
}

.boton-outline-principal {
    color: var(--principal);
    border: 1px solid var(--principal);
    border-radius: 999rem;
    width: fit-content;
}

.boton-outline-principal:hover {
    color: var(--negro);
    background-color: var(--principal);
}

.rounded-full {
    border-radius: 999rem;
}

.borde-subtle {
    border-color: #434343 !important;
}

.fw-semibold {
    font-weight: 600;
}

.fuente-serif {
    font-family: "Instrument Serif", Georgia, "Times New Roman", Times, serif;
}
.btn:focus:not(:focus-visible),
.btn-outline-light.dropdown-toggle.show:focus,
.btn-close:focus:not(:focus-visible) {
    box-shadow: none;
}
.modal-content {
    background-color: #222222;
}
.dropdown-item:active {
    color: var(--negro);
    background-color: var(--principal);
}

.form-control,
.form-select {
    /* background-color: var(--light1);
	color: white; */
    border-color: rgb(175, 175, 175);
    color: var(--negro);
    border-radius: 0;
}

.form-control.fondo-light:focus {
    background-color: var(--light1);
}
/* .form-select{
    background-image: url('/imagenes/iconos/chevron-down.svg');
} */
.form-select option {
    color: black;
}
.form-control:focus,
.form-select:focus {
    box-shadow: none;
    /* background-color: var(--light1);
	color: white; */
    border-color: var(--principal);
}

.form-check-input[type="checkbox"] {
    border-radius: 0;
}
.form-check-input:focus {
    box-shadow: none;
    border-color: var(--secundario);
}
.form-check-input:checked {
    background-color: var(--secundario);
    border-color: var(--secundario);
}

.breadcrumb a {
    color: var(--grisTexto);
    text-decoration: none;
    transition: all 0.2s;
}
.breadcrumb a:hover {
    color: rgb(219, 219, 219);
}
.breadcrumb-item.active {
    color: white;
}

.span-dispo {
    text-align: center;
    border-radius: 0;
    padding: 0.2rem 0.5rem;
    text-wrap: nowrap;
    font-size: 0.9rem;
}
/* .span-verde{
	background-color: rgb(67, 99, 48);
	color: rgb(139, 199, 112);
} */
.span-verde {
    background-color: rgba(140, 199, 112, 0.15);
    color: rgb(139, 199, 112);
    border: 1px solid rgb(139, 199, 112, 0.25);
}
.span-rojo {
    background-color: rgb(96, 0, 0);
    color: rgb(255, 160, 160);
}
.span-naranja {
    background-color: rgb(101, 42, 3);
    color: rgb(228, 151, 73);
}
.span-dispo.span-gris {
    background-color: var(--light1);
    color: rgb(217, 217, 217);
    padding: 0.4rem 1rem;
}

body {
    font-family: "Jost", sans-serif;
    background-color: var(--negro);
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 1rem;
}

main {
    flex-grow: 1;
}

.boton-clausula {
    width: fit-content;
    border: 1px solid #eeeeee;
    color: white;
    background-color: transparent;
}

.boton-clausula:focus:not(:focus-visible),
.boton-clausula:not(.collapsed) {
    color: white;
    box-shadow: none;
    background-color: transparent;
    border: 1px solid rgb(190, 190, 190);
}

.boton-clausula::after,
.boton-clausula:not(.collapsed)::after {
    background-image: url("/imagenes/iconos/chevron-down.svg"),
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.link-politica {
    color: white;
    transition: color 0.2s;
}

.link-politica:hover {
    color: var(--principal);
}

.card-noticia {
    text-decoration: none;
    color: white;
    transition: all 0.2s;
}

.card-noticia:hover {
    color: white;
    opacity: 0.7;
}

.noticia a {
    color: var(--principal);
    text-decoration: none;
    transition: all 0.2s;
}

.noticia a:hover {
    opacity: 0.7;
}

ul.pagination {
    justify-content: center;
    margin-bottom: 3em;
}

.pagination .page-item.active .page-link {
    background-color: #a74700;
    border-color: #a74700;
    color: white;
}
.pagination .page-item.disabled .page-link {
    background-color: #f0efec;
    border-color: #d3d0ca;
    color: #666;
}

.pagination .page-link {
    color: #282b28;
    background-color: white;
    border-color: #d3d0ca;
}

.pagination .page-link:hover {
    color: #873900;
    background-color: #fff0e4;
    border-color: #b84f00;
}

.pagination .page-link:focus {
    box-shadow: none;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 0;
}

.pie a {
    color: white;
    text-decoration: none;
    transition: all 0.2s;
}

.pie a:hover {
    color: var(--principal);
}

.pie {
    background-color: var(--negro);
    border-top: 2px solid var(--principal-light);
}
/* FIN DE ESTILOS GENERALES CSNET */

.img-noticia-detalle {
    aspect-ratio: 6/3;
    object-fit: cover;
}

@media (min-width: 1600px) {
    .container-header {
        max-width: 1600px;
    }
}

.logo-header {
    max-width: 80px;
}

.logo-footer {
    max-width: 100px;
}

.nav-link {
    color: rgb(203, 203, 203);
}

.nav-link:focus {
    color: white;
}

.nav-link:hover {
    color: white;
}

.header .nav-link.active {
    color: var(--principal) !important;
}

.hero{
    height: 85vh;
}

#carouselHero .carousel-item {
    /* aspect-ratio: 16/9; */
    height: 85vh;
}

.carousel-inner {
    max-width: 1400px;
    margin: 0 auto; /* centra el carrusel horizontalmente */
    height: 100%; /* asegura que las imágenes hereden la altura */
}

/* Asegurar que las imágenes mantengan altura al 100% */
.carousel-inner .carousel-item img.img-hero {
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta sin deformar */
    max-width: 1400px; /* evita que crezca más de 1400px */
    margin: 0 auto; /* centra la imagen dentro del carrusel */
    display: block;
}

.img-hero {
    object-fit: cover;
}

#carouselHero .indicator {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.img-galeria-index {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.hover-galeria-index {
    background-color: var(--negro);
    opacity: 0;
    transition: opacity 0.2s;
}

.link-galeria-index:hover .hover-galeria-index {
    opacity: 0.5;
}

.caja-marcas-index {
    /* background-color: rgba(234, 238, 241, 0.116); */
    background-color: rgb(235, 235, 235);
}
.caja-marcas-index > div {
    max-width: 800px;
}

.img-marca-index {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
}

.container-swiper {
    overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
    color: white !important;
}

.swiper-index .swiper-slide {
    width: calc(100% / 3);
}
.swiper-index .swiper-pagination {
    width: auto;
}

.flechas-swiper-index {
    left: 0;
}

.seccion-proyectos-index {
    border-bottom: 1px solid white;
    padding-top: 3.5rem;
    padding-bottom: 4rem;
}

.seccion-proyectos-index:last-child {
    border-bottom: none;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 44px;
}

.img-quienes-somos {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.img-banner-qs,
.img-banner-contacto {
    max-height: 700px;
    object-fit: cover;
    object-position: bottom;
}

.img-banner-contacto {
    object-position: center;
}

.img-galeria {
    cursor: pointer;
}

.container-swiper {
    overflow: hidden;
}

.swiper {
    width: 100%;
}

.slide-gallery {
    width: auto !important;
}

.slide-gallery img {
    max-height: 350px;
}

.swiper-button-next,
.swiper-button-prev {
    color: white !important;
}

/* PRODUCTOS */

.navbar-cat-productos .nav-link,
.cat-productos-mobile .dropdown-item {
    color: var(--grisTexto);
    transition: all 0.2s;
}

.navbar-cat-productos .nav-link:hover,
.navbar-cat-productos .nav-link.active,
.cat-productos-mobile .dropdown-item:hover,
.cat-productos-mobile .dropdown-item.active {
    color: var(--white);
}

.altea-site .navbar-cat-productos .nav-link.active,
.altea-site .cat-productos-mobile .dropdown-item.active {
    background-color: #e6e5e2;
    color: #282b28;
    font-weight: 600;
}

.altea-site .navbar-cat-productos .nav-link.active {
    border-bottom: 2px solid #777974;
}

.card-producto {
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.card-producto:hover {
    background-color: var(--light1);
}
.card-producto .span-categoria {
    background-color: rgba(255, 255, 255, 0.473);
}
.img-card-producto {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.info-producto p {
    margin-bottom: 0;
}

.card-producto .span-ver-mas {
    position: absolute;
    left: 0;
    bottom: 24px;
    background-color: white;
    color: var(--negro);
    padding: 0.3rem 0.6rem;
    transform: translateX(-100%);
    transition: all 0.3s;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.card-producto:hover .span-ver-mas {
    transform: translateX(0);
}

/* PRODUCTO */
.img-producto {
    max-height: 500px;
    object-fit: contain;
}

.imgs-sec-producto .slide-imagenes {
    width: auto !important;
}

.imgs-sec-producto .flechas-swiper-imagenes {
    --swiper-navigation-size: 1.5rem;
}

.imgs-sec-producto .swiper-button-next,
.swiper-button-prev {
    color: var(--negro1) !important;
}
.imgs-sec-producto .link-imgs-producto img {
    max-height: 100px;
    max-width: 180px;
}

.imgs-sec-producto .link-imgs-producto {
    cursor: pointer;
}
.imgs-sec-producto .flechas-swiper-imagenes {
    --swiper-navigation-size: 1.5rem;
}

.container-pedido .card,
.container-pedido .table {
    background-color: transparent;
    border-radius: 0;
    border-color: var(--negro);
}

.container-pedido .card-header,
.container-pedido thead th {
    background-color: rgb(215, 215, 215);
    color: var(--negro);
    border-color: var(--negro);
    font-weight: 600;
}

#metrosCuadrados:focus::placeholder {
    opacity: 0;
}

.img-carrito {
    max-width: 110px;
}
.botones-cantidad {
    border: 1px solid rgb(175, 175, 175);
    border-right: none;
}
.btn-restar {
    border-bottom: 1px solid rgb(175, 175, 175);
}
input[type="number"].input-cantidad {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"].input-cantidad::-webkit-inner-spin-button,
input[type="number"].input-cantidad::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.titulo-index {
  position: relative;
  top: 1rem;
}

@media screen and (max-width: 1399.5px) {
}

@media screen and (max-width: 1199.5px) {
    #carouselHero .carousel-item {
        /* aspect-ratio: 16/9; */
        height: 50vh;
    }

    .swiper-index .swiper-slide {
        width: 50%;
    }

    .titulo-productos {
        padding-bottom: 1rem;
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 991.5px) {
    .logo-header {
        max-width: 60px;
    }

    .titulo-index {
        padding-bottom: 1rem;
        width: 100%;
        border-bottom: 1px solid white;
        text-align: center;
    }

    .seccion-proyectos-index {
        border-bottom: none;
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 30px;
    }

    .slide-gallery img {
        max-height: 170px;
    }

    .img-marca-index {
        max-height: 60px;
        max-width: 160px;
    }
}

@media screen and (max-width: 767.5px) {
    .swiper-index .swiper-slide {
        width: 100%;
    }
}