/* ################ */
/* HELPERS */
/* ################ */

/* Margin-top: mt-6 .. mt-15 (px fijos) */
.mt-6  { margin-top: 60px !important; }
.mt-7  { margin-top: 70px !important; }
.mt-8  { margin-top: 80px !important; }
.mt-9  { margin-top: 90px !important; }
.mt-10 { margin-top: 100px !important; }
.mt-11 { margin-top: 110px !important; }
.mt-12 { margin-top: 120px !important; }
.mt-13 { margin-top: 130px !important; }
.mt-14 { margin-top: 140px !important; }
.mt-15 { margin-top: 150px !important; }

/* Margin-bottom: mb-6 .. mb-15 (px fijos) */
.mb-6  { margin-bottom: 60px !important; }
.mb-7  { margin-bottom: 70px !important; }
.mb-8  { margin-bottom: 80px !important; }
.mb-9  { margin-bottom: 90px !important; }
.mb-10 { margin-bottom: 100px !important; }
.mb-11 { margin-bottom: 110px !important; }
.mb-12 { margin-bottom: 120px !important; }
.mb-13 { margin-bottom: 130px !important; }
.mb-14 { margin-bottom: 140px !important; }
.mb-15 { margin-bottom: 150px !important; }

/* Margin-y: my-6 .. my-15 (px fijos) */
.my-6  { margin-top: 60px !important; margin-bottom: 60px !important; }
.my-7  { margin-top: 70px !important; margin-bottom: 70px !important; }
.my-8  { margin-top: 80px !important; margin-bottom: 80px !important; }
.my-9  { margin-top: 90px !important; margin-bottom: 90px !important; }
.my-10 { margin-top: 100px !important; margin-bottom: 100px !important; }
.my-11 { margin-top: 110px !important; margin-bottom: 110px !important; }
.my-12 { margin-top: 120px !important; margin-bottom: 120px !important; }
.my-13 { margin-top: 130px !important; margin-bottom: 130px !important; }
.my-14 { margin-top: 140px !important; margin-bottom: 140px !important; }
.my-15 { margin-top: 150px !important; margin-bottom: 150px !important; }

/* Padding-y: py-6 .. py-15 (px fijos) */
.py-6  { padding-top: 60px !important; padding-bottom: 60px !important; }
.py-7  { padding-top: 70px !important; padding-bottom: 70px !important; }
.py-8  { padding-top: 80px !important; padding-bottom: 80px !important; }
.py-9  { padding-top: 90px !important; padding-bottom: 90px !important; }
.py-10 { padding-top: 100px !important; padding-bottom: 100px !important; }
.py-11 { padding-top: 110px !important; padding-bottom: 110px !important; }
.py-12 { padding-top: 120px !important; padding-bottom: 120px !important; }
.py-13 { padding-top: 130px !important; padding-bottom: 130px !important; }
.py-14 { padding-top: 140px !important; padding-bottom: 140px !important; }
.py-15 { padding-top: 150px !important; padding-bottom: 150px !important; }

/* Padding-bottom: pb-6 .. pb-15 (px fijos) */
.pb-6  { padding-bottom: 60px !important; }
.pb-7  { padding-bottom: 70px !important; }
.pb-8  { padding-bottom: 80px !important; }
.pb-9  { padding-bottom: 90px !important; }
.pb-10 { padding-bottom: 100px !important; }
.pb-11 { padding-bottom: 110px !important; }
.pb-12 { padding-bottom: 120px !important; }
.pb-13 { padding-bottom: 130px !important; }
.pb-14 { padding-bottom: 140px !important; }
.pb-15 { padding-bottom: 150px !important; }

/* gutters verticales custom */
.gy-6 { --bs-gutter-y: 4rem; }
.gy-7 { --bs-gutter-y: 5rem; }
.gy-8 { --bs-gutter-y: 6rem; }
.gy-9 { --bs-gutter-y: 7rem; }
.gy-10 { --bs-gutter-y: 8rem; }

.gx-6 { --bs-gutter-x: 4rem; }
.gx-7 { --bs-gutter-x: 5rem; }
.gx-8 { --bs-gutter-x: 6rem; }
.gx-9 { --bs-gutter-x: 7rem; }

.p-left-0 {
    padding-left: 0;
}

.gap-4-5 {
    gap: 2rem;
}

.text-justify {
    text-align: justify;
}

/* helper de color principal (antes apuntaba a una variable que no existia) */
.color-primary {
    color: var(--color-primary) !important;
}

.color-secondary {
    color: var(--color-secondary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}


/* ################ */
/* FIN HELPERS */
/* ################ */

.banner-principal {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* overlay oscuro */
.banner-principal::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35); /* ajusta aquí */
    z-index: 0;
}

.section-pretitle {
    font-size: 20px;
    font-weight: 500; /* medium */
    letter-spacing: 1px;
}


/* =====================================================
   FEATURES SECTION
===================================================== */

.feature-title {
    font-size: 16px;
    color: #7B7973;
    font-weight: 500;
    line-height: 1.2;
}

.feature-text {
    font-size: 15px;
    color: #7B7973;
    font-weight: 400;
    line-height: 1.3;
}

/* Bordes solo en desktop */
@media (min-width: 992px) {

    .feature-bordered {
        border-left: 1px solid #D6CFCB;
        border-right: 1px solid #D6CFCB;
    }

}

/* ======================================
   TESTIMONIOS
====================================== */

/* ===== TITULO CON LINEAS ===== */

.section-testimonios h3 {
    position: relative;
    display: inline-block;
}

.section-testimonios h3::before,
.section-testimonios h3::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 300px;
    height: 1.3px;
    background: var(--color-primary);
    transform: translateY(-50%);
}

.section-testimonios h3::before {
    right: 100%;
    margin-right: 40px;
}

.section-testimonios h3::after {
    left: 100%;
    margin-left: 40px;
}

/* ===== CONTENIDO ===== */

.section-testimonios blockquote {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== DIVIDER INFERIOR ===== */

.testimonio-divider {
    width: 60%;
    margin: 3rem auto 0;
    height: 1.3px;
    background: var(--color-primary);
    border: none;
    opacity: 1;
}

/* ===== ICONO ===== */

.icono-testimonio {
    width: 32px;
}

/* ===== ESTRELLAS ===== */

.estrellas {
    font-size: 30px;
}

.star {
    color: #D199B6;
    opacity: 0.4;
}

.star.filled {
    opacity: 1;
}

/* ===== NOMBRE ===== */

.nombre-testimonio {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 19px;
}

/* ===== SUBTITULO ===== */

.subtitulo-testimonio {
    color: #D199B6;
    font-weight: 500;
    font-size: 18px;
}

/* ===== FLECHAS SWIPER ===== */

.section-testimonios .swiper-button-next,
.section-testimonios .swiper-button-prev {
    color: var(--color-body);
    width: 30px;
    height: 30px;
}

.section-testimonios .swiper-button-next::after,
.section-testimonios .swiper-button-prev::after {
    font-size: 16px;
}

/* ===== POSICION FLECHAS ===== */

/* Desktop (mas pegadas al contenido) */
@media (min-width: 992px) {

    .section-testimonios .swiper-button-prev {
        left: 18%;
    }

    .section-testimonios .swiper-button-next {
        right: 18%;
    }

}

/* Tablet (un poco mas separadas) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .section-testimonios .swiper-button-prev {
        left: 0%;
    }

    .section-testimonios .swiper-button-next {
        right: 0%;
    }

}

/* ===== RESPONSIVE GENERAL ===== */

@media (max-width: 991.98px) {

    .section-testimonios h3::before,
    .section-testimonios h3::after {
        display: none;
    }

    .testimonio-divider {
        width: 100%;
    }

    .nombre-testimonio {
        font-size: 16px;
    }

    .subtitulo-testimonio {
        font-size: 15px;
    }

}

/* Movil (ocultar flechas) */
@media (max-width: 767px) {

    .section-testimonios .swiper-button-next,
    .section-testimonios .swiper-button-prev {
        display: none;
    }

}


/* ======================================
   TARJETAS BLOGS
====================================== */

.tarjeta-publicacion {
  border: 1.3px solid var(--color-primary); /* borde suave */
  border-radius: 0; /* sin esquinas redondeadas */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-publicacion:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-title {
  color: #000000 !important;
  font-family: var(--font-secondary);
  font-size: clamp(1.3rem, 2.5vw, 24px) !important;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-text {
    text-align: start;
    color: #575653 !important;
    font-size: clamp(1.1rem, 2.5vw, 19px) !important;
    line-height: 1.3;

    /* limitar texto */
    display: -webkit-box;
    -webkit-line-clamp: 7; /* numero de lineas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tarjeta-publicacion .card-body {
    display: flex;
    flex-direction: column;         
    justify-content: space-between;
    height: 100%;                 
}

.tarjeta-publicacion .card-img-top {
    height: 350px;
    object-fit: cover;
    border-radius: 0px !important;
}

.fecha-blog {
    color: var(--color-primary);
    font-size: clamp(1.1rem, 2.5vw, 19px) !important;
    line-height: 1.3;
}

.card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link-wrapper:hover {
    text-decoration: none;
    color: inherit;
}

.hr-primary {
    width: 140px;
    opacity: 1;
    border: none;
    border-top: 6px solid var(--color-primary);
}

/* imagen blog */

.img-blog{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

@media (min-width:992px){

    .img-blog{
        height:320px;
    }

}

@media (min-width: 992px) {

    .tarjeta-publicacion .card-img-top {
        height: 450px;
        object-fit: cover;
    }

}

/* ======================================
   BLOGS
====================================== */

.pagination .page-item .page-link {
    background-color: var(--color-primary);
    color: #fff;
    border-color: #fff;
    transition: all 0.2s ease;
}

/* color cuando pasas el raton */
.pagination .page-item .page-link:hover {
    background-color: #fff;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* color del numero activo */
.pagination .page-item.active .page-link {
    background-color: #fff;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* cuando las flechitas estan deshabilitadas */
.pagination .page-item.disabled .page-link {
    color: #ccc !important;
    background-color: transparent !important;
    cursor: not-allowed;
}

/* quitar borde azul de bootstrap en focus */
.pagination .page-link:focus,
.pagination .page-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ======================================
   NUESTROS VALORES
====================================== */

/* ===== VALORES ===== */

.valor-titulo {
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 1px;
    font-family: var(--font-secondary);
    font-weight: 450;
}

.valor-texto {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 1.1;
    font-weight: 400;
}

.valores-divider {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991.98px) {

    .valor-titulo {
        font-size: 17px;
    }

    .valor-texto {
        font-size: 15px;
    }

}

/* =====================================================
   Evento Soñado SECTION
===================================================== */

.event-title {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.2;
}

.event-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
}

.event-img {
    height: 70px;
}
/* Bordes solo en desktop */
@media (min-width: 992px) {

    .event-bordered {
        border-left: 1px solid #D6CFCB;
        border-right: 1px solid #D6CFCB;
    }

}

@media (max-width: 992px) {

    .event-title {
        font-size: 17px;
    }

    .event-text {
        font-size: 15px;
    }

}

.lista-primary {
    padding-left: 1.2rem;
}

.lista-primary li {
    margin-bottom: 0.75rem;
}

.lista-primary li::marker {
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .ms-lg-4p {
        margin-left: 4%;
    }
}

/* =====================================================
   Formulario de Contacto
===================================================== */

/* inputs */
.contacto-input {
    border: 1px solid var(--color-primary);
    border-radius: 0;
    padding: 14px 16px;
    background: transparent;
}

.contacto-input:focus {
    box-shadow: none;
    border-color: var(--color-primary);
}

/* textarea altura */
.contacto-textarea {
    resize: vertical;
}

/* checkbox */
.contacto-check {
    border-radius: 0;
}

/* =====================================================
   Preguntas Frecuentes
===================================================== */

.faq-item {
    border-top: 1px solid #ddd;
}

.faq-item:last-child {
    border-bottom: 1px solid #ddd;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.faq-left {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
}

.faq-number {
    color: var(--color-primary);
}

.faq-text {
    line-height: 1.4;
}

.faq-icon {
    color: var(--color-primary);
    font-size: 20px;
}

.faq-answer {
    display: none;
    padding-bottom: 20px;
    color: #555;
}

/* =====================================================
   catalogos
===================================================== */

.catalogo-card {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px;
}

/* activo */
.catalogo-card.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* imagen */
.catalogo-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* placeholder si no hay imagen */
.catalogo-img-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f0f0f0;
    border-radius: 8px;
}

/* hover SOLO imagen */
.catalogo-item:hover .catalogo-img {
    transform: scale(1.03);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.section-mas-alquilado .swiper-button-next,
.section-mas-alquilado .swiper-button-prev {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15); /* transparente elegante */
    backdrop-filter: blur(4px); /* efecto moderno */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* icono */
.section-mas-alquilado .swiper-button-next::after,
.section-mas-alquilado .swiper-button-prev::after {
    font-size: 20px;
    color: var(--color-primary);
}

/* hover */
.section-mas-alquilado .swiper-button-next:hover,
.section-mas-alquilado .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.25);
}


.section-novedad .swiper-button-next,
.section-novedad .swiper-button-prev {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15); /* transparente elegante */
    backdrop-filter: blur(4px); /* efecto moderno */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* icono */
.section-novedad .swiper-button-next::after,
.section-novedad .swiper-button-prev::after {
    font-size: 20px;
    color: var(--color-primary);
}

/* hover */
.section-novedad .swiper-button-next:hover,
.section-novedad .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.25);
}

.btn-favorito {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);

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

    transition: all 0.3s ease;
    z-index: 2;
}

.btn-favorito i {
    font-size: 16px;
    transition: all 0.3s ease;
}

/* cuando esta activo */
.btn-favorito .fa-solid {
    color: var(--color-primary);
}

/* hover */
.btn-favorito:hover {
    background: rgba(255, 255, 255, 0.35);
}

.img-wrapper {
    background: #f0f0f0;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.catalogo-item:hover .img-wrapper img {
    transform: scale(1.05);
}

/* =====================================================
   SECTION CATEGORIAS
===================================================== */

.section-categorias a {
    position: relative;
    display: block;
    overflow: hidden;
}

.section-categorias img {
    width: 100%;
    transition: transform 0.4s ease;
}

/* overlay negro suave */
.section-categorias a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* negro ligero */
    transition: background 0.3s ease;
}

/* texto encima del overlay */
.section-categorias .position-absolute {
    z-index: 2;
}

/* hover efecto */
.section-categorias a:hover img {
    transform: scale(1.05);
}

.section-categorias a:hover::after {
    background: rgba(0, 0, 0, 0.4); /* mas oscuro al hover */
}


/* =====================================================
   SECTION Producto
===================================================== */

.section-producto img {
    border-radius: 4px;
}

.producto-divider {
    border-top: 1.5px solid #D6CFCB;
    width: 100%;
}

.product-description {
    font-size: 19px;
}

/* =====================================================
   SECTION Imagenes portada empresas
===================================================== */
/* redes sociales gris suave */
.empresas-grid img {
    filter: grayscale(90%);
    transition: filter 0.3s ease;
}


/* =====================================================
   Producto Zoom 
===================================================== */
/* wrapper principal */
.producto-img-wrapper {
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 6px;
}

/* wrapper miniaturas */
.producto-img-wrapper-small {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
}

/* hacemos que el zoom ocupe todo el wrapper */
.producto-img-wrapper .producto-zoom,
.producto-img-wrapper-small .producto-zoom {
    width: 100%;
    height: 100%;
}

/* imagen llena todo el contenedor */
.producto-img-wrapper img,
.producto-img-wrapper-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.producto-zoom{
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.producto-zoom img{
    transition: transform 0.1s ease;
    transform-origin: center center;
}

/* en movil lo desactivamos */
@media (max-width: 991.98px){
    .producto-zoom{ cursor: default; }
}

/* =====================================================
   Login / Crear CUenta
===================================================== */


/* separador horizontal (movil) */
.separador-horizontal {
    position: relative;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.15);
}

.separador-horizontal span {
    position: relative;
    top: -12px;
    background: var(--color-secondary); /* mismo bg-secondary */
    padding: 0 15px;
    font-size: 14px;
    letter-spacing: 2px;
}

/* separador vertical (desktop) */
.separador-vertical {
    position: relative;
    height: 100%;
    width: 1px;
    background: rgba(0,0,0,0.15);
}

.separador-vertical span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-secondary);
    padding: 8px 12px;
    font-size: 14px;
    letter-spacing: 2px;
}

.img-home{
    height: 420px;
    overflow: hidden;
}

.img-home img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* movil */
@media (max-width: 728px){
    .img-home{
        height: 220px;
    }
}

.categoria-card{
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
}

.categoria-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.categoria-titulo{
    text-align: center;
    letter-spacing: 1px;
}

.img-inspirate{
    aspect-ratio: 4 / 4;
    overflow:hidden;
}

.img-inspirate img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.img-blog-ideas {
    aspect-ratio: 4 / 4;
    overflow: hidden;
}

.img-blog-ideas img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}