/* Import Open Props desde CDN */
@import url('https://unpkg.com/open-props/open-props.min.css');

/*
@import url('https://unpkg.com/open-props/normalize.min.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Inter:wght@400;600;700&display=swap');
*/
:root {
  /*  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif; */
}

/* Títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: var(--font-heading); */
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  /*color: #654339 !important;*/
  margin: 2rem 0 2rem 0;
}

/* Párrafos y texto general */
body,
p,
li,
span,
div,
a {
  /* font-family: var(--font-body); */
  font-weight: 400;
  line-height: 1.6;
}

body {
  background-color: #f8f9fa;
  padding: 0 1em 0 1em;
}

/* carrousel */
.carousel-item img {
  height: 75vh;
  object-fit: cover;
  transition: transform 2s ease-in-out;
}

.carousel-item.active img {
  transform: scale(1.1);
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2rem;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-item.active .carousel-caption {
  opacity: 1;
}

.carousel-caption h3 {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}

.view-display-id-block_cards_titulos_carrousel_index .carousel-caption p {
  font-size: 1.25rem;
  color: #ddd;
}

.view-display-id-block_cards_titulos_carrousel_index .owl-item>div {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: var(--size-5);
  color: var(--gray-0);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.view-display-id-block_cards_titulos_carrousel_index .owl-item p.h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: var(--font-weight-9);
  margin-bottom: var(--size-3);
  color: var(--gray-0);
}

.view-display-id-block_cards_titulos_carrousel_index .owl-item p.lead {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: var(--font-weight-6);
  color: white;
  max-width: 800px;
  margin: 0 auto;
}

h2.accordion-header {
  margin: 0 !important;
}

main#content {
  /*  padding: 0;*/
}

.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100vw;
}

/* Drupal Layout Builder / regiones: evita overflow por .row (márgenes negativos) */
.layout__region .row,
.layout_region .row,
.layout-region .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* El UL mide lo que necesita y el wrapper hace scroll */
#thor20Tabs,
#thor20plusTabs,
#premium4cTabs,
#premium5cTabs,
#trasteroTabs,
#trasteroTabs,
#premium3cTabs,
#ecoThorTabs {
  max-width: 90vw;
  scrollbar-width: none;
}

/* Si tu tema usa .container y aun así desborda */
.container {
  max-width: 1400px !important;
}

html {
  margin: auto;
  max-width: 1500px;
}

.blockquote-footer {
  /* font-size: .875em; */
  font-size: var(--font-size-fluid-1) !important;
}


/*Botones */
.btn-cta {
  background-color: var(--blue-6);
  /* o tu azul de marca */
  color: white;
  /* <- Aquí se asegura el color blanco */
  padding: var(--size-3) var(--size-5);
  font-size: var(--font-size-4);
  font-weight: bold;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta:hover {
  background-color: var(--blue-7);
  box-shadow: var(--shadow-3);
  color: white;
  /* por si se sobrescribe con :hover */
}

/* Solo dentro de tus filas detalle */
.detalle-contenedor p,
.vstack>.d-flex>p {
  margin: 0;
}

.nav-pills {
  scrollbar-width: none;
  /* Firefox */
}

.nav-pills::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* CKEditor mete <p>, no pasa nada: anulamos márgenes en zonas visuales */


@media (max-width: 768px) {
  .carousel-item img {
    height: 60vh;
  }

  .carousel-caption {
    padding: 1rem;
  }

  .carousel-caption h3 {
    font-size: 1.5rem;
  }

  .carousel-caption p {
    font-size: 1rem;
  }
}

.carousel-caption h3 {
  /*font-family: var(--font-heading); */
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.2;
}

.carousel-caption p {
  /* font-family: var(--font-body); */
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 400;
}

.acabado-fila {
  display: flex;
  flex-wrap: wrap;
}

.col.ancho-16 {
  width: 100%;
  text-align: center;
  margin: 2em 0;
}

.col.ancho-16.text-ctr {
  width: 33%;
  text-align: center;
  float: left;
}

.icono-herramienta,
.icono-caract {
  background: #2f6ba9;
  padding: 12%;
  margin: 0 10%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.icono-caract img,
.icono-herramienta img {
  max-width: 90%;
  height: auto;
}

h3.subtitulo-ficha.text-ctr,
.encabezado-ficha.text-ctr {
  display: inline-block;
}

/* ------------------------------
   Capa superior sobre Bootstrap
   ------------------------------ */

/* Ejemplo: Personalización de botones Bootstrap con Open Props */
.btn-check:focus+.btn,
.btn:focus {
  color: #fff;
  /* ddd */
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #fff !important;
}

.btn {
  padding: var(--size-2) var(--size-4);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-6);
  border-radius: var(--radius-2);
  background-color: #0d6efd;
  /*  var(--indigo-6) */
  color: #fff !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  :where(textarea, select, input:not([type=button], [type=submit], [type=reset])) {
    background-color: #fff;
  }
}

.btn:hover {
  background-color: #000;
  transform: scale(1.03);
  color: #e9ecef;
}

/* Ejemplo: Titulares con escala fluida de Open Props */
h1,
h2,
h3,
h4,
h5 {
  /*  font-family: var(--font-sans);*/
  font-weight: var(--font-weight-7);
  color: var(--text-1);
}

h1 {
  font-size: var(--font-size-fluid-3);
}

h2 {
  font-size: var(--font-size-fluid-2);
}

h3 {
  font-size: var(--font-size-fluid-1);
}

/* Espaciado adicional */
.section {
  padding-top: var(--size-fluid-3);
  padding-bottom: var(--size-fluid-3);
}

.section-light {
  background-color: var(--surface-2);
  color: var(--text-1);
}

.section-dark {
  background-color: var(--surface-3);
  color: var(--text-1);
}

/* Cards mejoradas */
.card {
  padding: var(--size-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

/* vistas */
.view-id-tax_cat.view-display-id-page_1 img,
.view-id-tax_cat.view-display-id-page_2 img {
  width: 100%;
  height: auto;
}

.view-id-tax_cat.view-display-id-page_1 .masonry-item img,
.view-id-tax_cat.view-display-id-page_2 .masonry-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
  object-fit: contain !important;
}

.view-cards {
  position: relative;
  z-index: 10;
}

/* jarallax */
.jarallax {
  position: relative;
  overflow: hidden;
}

.jarallax .container {}

.jarallax-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* oscurece con un overlay negro */
  z-index: 1;
  pointer-events: none;
}


/* galería boostrap productos */
.gallery-producto .thumb img {
  cursor: pointer;
  transition: border 0.2s ease-in-out;
  max-height: 70px;
  width: auto;
}

.gallery-producto .thumb img:hover {
  border-color: var(--bs-primary);
}

.gallery-producto img {
  max-height: 500px;
  width: auto;
}

/* owl carousel */
.owl-carousel {
  position: relative;
  z-index: 10;
}

.owl-product-gallery .item {
  background-color: var(--surface-1);
  /* Fondo claro adaptable */
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  padding: var(--size-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-product-gallery img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-2);
}

/* Asegura que el contenido del carrusel se vea encima del video de fondo */
.jarallax {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.jarallax .owl-carousel {
  z-index: 2;
  position: relative;
}

.jarallax iframe.jarallax-video {
  z-index: -1 !important;
  pointer-events: none;
}

#jarallax-container-0 {
  z-index: -100 !important;
}

/* Tipografía refinada para párrafos */
p {
  font-size: var(--font-size-fluid-0);
  line-height: var(--font-lineheight-3);
  margin-bottom: var(--size-5);
}

/* aumento la tipografía en movil */
@media (max-width: 767px) {
  p {
    font-size: var(--font-size-fluid-1);
  }
}

/* ====================================================== */
/* Aquí continúa tu custom.css existente sin duplicaciones */
/* ====================================================== */

.toolbar a,
.toolbar button {
  font-size: small;
}

.blanco {
  color: #F3F3F3;
}

.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.blanco-bg,
.btn.blanco-bg,
.btn-large.blanco-bg,
.btn-small.blanco-bg {
  background-color: #F3F3F3;
  color: #282828;
}

.rojo {
  color: #ec5830;
}

.rojo-bg {
  background-color: #ec5830;
  color: #F3F3F3;
}

.rojo2 {
  color: #852522;
}

.rojo2-bg {
  background-color: #852522;
  color: #F3F3F3;
}

.gris {
  color: #807d7d;
}

.gris-bg {
  background-color: #807d7d;
  color: #F3F3F3;
}

.verde {
  color: #8dbc3c;
}

.verde-bg,
.btn.verde_bg,
.btn-large.verde-bg,
.btn-small.verde-bg {
  background-color: #8dbc3c;
  color: #F3F3F3;
}

.verde2 {
  color: #5c7530;
}

.verde2-bg {
  background-color: #5c7530;
  color: #fff;
}

.naranja {
  color: #d57e2e;
}

.naranja-bg {
  background-color: #d57e2e;
  color: #212529;
}

.naranja2 {
  color: #e9a361;
}

.naranja2-bg {
  background-color: #e9a361;
  color: #282828;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgb(236 236 236) !important;
}

/* Comienzo espaciado */
/* Base: móviles (menos de 768px) */

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;
  --space-10: 8rem;
}

@media (min-width: 768px) {
  :root {
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 2rem;
    --space-4: 4rem;
    --space-5: 8rem;
    --space-6: 12rem;
    --space-7: 16rem;
    --space-8: 24rem;
    --space-9: 32rem;
    --space-10: 40rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --space-5: 10rem;
    --space-6: 16rem;
    --space-7: 24rem;
    --space-8: 32rem;
    --space-9: 40rem;
    --space-10: 48rem;
  }
}

/* Clases de Margin */

.m0,
.row,
.col
/* Base: móviles (menos de 768px) */

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;
  --space-10: 8rem;
}

@media (min-width: 768px) {
  :root {
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 2rem;
    --space-4: 4rem;
    --space-5: 8rem;
    --space-6: 12rem;
    --space-7: 16rem;
    --space-8: 24rem;
    --space-9: 32rem;
    --space-10: 40rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --space-5: 10rem;
    --space-6: 16rem;
    --space-7: 24rem;
    --space-8: 32rem;
    --space-9: 40rem;
    --space-10: 48rem;
  }
}

/* Clases de Margin y Padding */
.ma0,
.row.ma0,
.col.ma0 {
  margin: var(--space-0);
}

.mt0,
.row.mt0,
.col.mt0 {
  margin-top: var(--space-0);
}

.mr0,
.row.mr0,
.col.mr0 {
  margin-right: var(--space-0);
}

.mb0,
.row.mb0,
.col.mb0 {
  margin-bottom: var(--space-0);
}

.ml0,
.row.ml0,
.col.ml0 {
  margin-left: var(--space-0);
}

.mx0,
.row.mx0,
.col.mx0 {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}

.my0,
.row.my0,
.col.my0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}

.ma1,
.row.ma1,
.col.ma1 {
  margin: var(--space-1);
}

.mt1,
.row.mt1,
.col.mt1 {
  margin-top: var(--space-1);
}

.mr1,
.row.mr1,
.col.mr1 {
  margin-right: var(--space-1);
}

.mb1,
.row.mb1,
.col.mb1 {
  margin-bottom: var(--space-1);
}

.ml1,
.row.ml1,
.col.ml1 {
  margin-left: var(--space-1);
}

.mx1,
.row.mx1,
.col.mx1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.my1,
.row.my1,
.col.my1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.ma2,
.row.ma2,
.col.ma2 {
  margin: var(--space-2);
}

.mt2,
.row.mt2,
.col.mt2 {
  margin-top: var(--space-2);
}

.mr2,
.row.mr2,
.col.mr2 {
  margin-right: var(--space-2);
}

.mb2,
.row.mb2,
.col.mb2 {
  margin-bottom: var(--space-2);
}

.ml2,
.row.ml2,
.col.ml2 {
  margin-left: var(--space-2);
}

.mx2,
.row.mx2,
.col.mx2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.my2,
.row.my2,
.col.my2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.ma3,
.row.ma3,
.col.ma3 {
  margin: var(--space-3);
}

.mt3,
.row.mt3,
.col.mt3 {
  margin-top: var(--space-3);
}

.mr3,
.row.mr3,
.col.mr3 {
  margin-right: var(--space-3);
}

.mb3,
.row.mb3,
.col.mb3 {
  margin-bottom: var(--space-3);
}

.ml3,
.row.ml3,
.col.ml3 {
  margin-left: var(--space-3);
}

.mx3,
.row.mx3,
.col.mx3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.my3,
.row.my3,
.col.my3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.ma4,
.row.ma4,
.col.ma4 {
  margin: var(--space-4);
}

.mt4,
.row.mt4,
.col.mt4 {
  margin-top: var(--space-4);
}

.mr4,
.row.mr4,
.col.mr4 {
  margin-right: var(--space-4);
}

.mb4,
.row.mb4,
.col.mb4 {
  margin-bottom: var(--space-4);
}

.ml4,
.row.ml4,
.col.ml4 {
  margin-left: var(--space-4);
}

.mx4,
.row.mx4,
.col.mx4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.my4,
.row.my4,
.col.my4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.ma5,
.row.ma5,
.col.ma5 {
  margin: var(--space-5);
}

.mt5,
.row.mt5,
.col.mt5 {
  margin-top: var(--space-5);
}

.mr5,
.row.mr5,
.col.mr5 {
  margin-right: var(--space-5);
}

.mb5,
.row.mb5,
.col.mb5 {
  margin-bottom: var(--space-5);
}

.ml5,
.row.ml5,
.col.ml5 {
  margin-left: var(--space-5);
}

.mx5,
.row.mx5,
.col.mx5 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.my5,
.row.my5,
.col.my5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Clases completas de padding (p0 - p5) */
.pa0,
.row.pa0,
.col.pa0 {
  padding: var(--space-0);
}

.pt0,
.row.pt0,
.col.pt0 {
  padding-top: var(--space-0);
}

.pr0,
.row.pr0,
.col.pr0 {
  padding-right: var(--space-0);
}

.pb0,
.row.pb0,
.col.pb0 {
  padding-bottom: var(--space-0);
}

.pl0,
.row.pl0,
.col.pl0 {
  padding-left: var(--space-0);
}

.px0,
.row.px0,
.col.px0 {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}

.py0,
.row.py0,
.col.py0 {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}

.pa1,
.row.pa1,
.col.pa1 {
  padding: var(--space-1);
}

.pt1,
.row.pt1,
.col.pt1 {
  padding-top: var(--space-1);
}

.pr1,
.row.pr1,
.col.pr1 {
  padding-right: var(--space-1);
}

.pb1,
.row.pb1,
.col.pb1 {
  padding-bottom: var(--space-1);
}

.pl1,
.row.pl1,
.col.pl1 {
  padding-left: var(--space-1);
}

.px1,
.row.px1,
.col.px1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.py1,
.row.py1,
.col.py1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.pa2,
.row.pa2,
.col.pa2 {
  padding: var(--space-2);
}

.pt2,
.row.pt2,
.col.pt2 {
  padding-top: var(--space-2);
}

.pr2,
.row.pr2,
.col.pr2 {
  padding-right: var(--space-2);
}

.pb2,
.row.pb2,
.col.pb2 {
  padding-bottom: var(--space-2);
}

.pl2,
.row.pl2,
.col.pl2 {
  padding-left: var(--space-2);
}

.px2,
.row.px2,
.col.px2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.py2,
.row.py2,
.col.py2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.pa3,
.row.pa3,
.col.pa3 {
  padding: var(--space-3);
}

.pt3,
.row.pt3,
.col.pt3 {
  padding-top: var(--space-3);
}

.pr3,
.row.pr3,
.col.pr3 {
  padding-right: var(--space-3);
}

.pb3,
.row.pb3,
.col.pb3 {
  padding-bottom: var(--space-3);
}

.pl3,
.row.pl3,
.col.pl3 {
  padding-left: var(--space-3);
}

.px3,
.row.px3,
.col.px3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.py3,
.row.py3,
.col.py3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.pa4,
.row.pa4,
.col.pa4 {
  padding: var(--space-4);
}

.pt4,
.row.pt4,
.col.pt4 {
  padding-top: var(--space-4);
}

.pr4,
.row.pr4,
.col.pr4 {
  padding-right: var(--space-4);
}

.pb4,
.row.pb4,
.col.pb4 {
  padding-bottom: var(--space-4);
}

.pl4,
.row.pl4,
.col.pl4 {
  padding-left: var(--space-4);
}

.px4,
.row.px4,
.col.px4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.py4,
.row.py4,
.col.py4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.pa5,
.row.pa5,
.col.pa5 {
  padding: var(--space-5);
}

.pt5,
.row.pt5,
.col.pt5 {
  padding-top: var(--space-5);
}

.pr5,
.row.pr5,
.col.pr5 {
  padding-right: var(--space-5);
}

.pb5,
.row.pb5,
.col.pb5 {
  padding-bottom: var(--space-5);
}

.pl5,
.row.pl5,
.col.pl5 {
  padding-left: var(--space-5);
}

.px5,
.row.px5,
.col.px5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.py5,
.row.py5,
.col.py5 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Fin espaciado */
/* (El resto de estilos continúa a partir de aquí) */

.field--type-entity-reference {
  margin: 0;
}

/*  footer  */
.site-footer .block {
  border: 0;
}

.site-footer__top h2 {
  margin-bottom: 1em;
}

.footer-legal {
  text-align: center;
  font-size: var(--font-size-1);
  padding: var(--size-3) 0;
}

.footer-legal a {
  color: var(--link);
  text-decoration: underline;
}

.site-footer .content a,
.site-footer .content a.is-active,
.site-footer p,
.site-footer h2 {
  color: initial;
}

.site-footer .content {
  font-size: initial;
}

/*  nav  */
#navbar-top {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 1. Anulamos el comportamiento flex de la región para que no atrape al bloque */
.region-featured-top.row {
  display: block !important;
  /* Rompe el contenedor flex de Bootstrap */
  overflow: visible !important;
}

/* 2. Clase de ancho completo corregida y simplificada vw */
.full-width-inside {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Centrado matemático infalible */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. Limpieza para el Aside superior */
.featured-top__inner {
  overflow: visible !important;
}

/* 4. Evitar scroll horizontal */
body {
  overflow-x: hidden !important;
}

.fixed-toggler {
  /*   
  position: fixed !important;
  top: 3rem;
  right: 3rem;
  z-index: 1074;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
  background-color: white;
  */
}

.offcanvas {
  z-index: 1075;
}

/*  OWL CAROUSELLS  */
.owl-carousel.owl-drag .owl-item {
  padding: 0.5em;
}

/*  vista carousel subcatalogo nombrex_taxt  */
.view-display-id-block_2 .owl-carousel.owl-drag .owl-item {
  margin-top: var(--space-2);
  margin-right: var(--space-2);
}

/*  máscaras  */
.mask-shape {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 360px;
  /* antes 300px */
  margin-inline: auto;
}

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

/*  fin máscaras  */
/*  botones  */
@keyframes pulse-pop {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.05);
  }

  20% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

#toggle-form.attention {
  animation: pulse-pop 0.6s ease-in-out;
}

/*  fin botones  */
/*  navs  */
.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
  position: fixed !important;
  /* top: 3rem; */
  /* right: 3rem; */
  z-index: 1074;
  width: 100%;
  height: 6em;
}

body {
  padding-top: 6em;
}

#navbar-main {
  background-color: #fff;
  /* tu clase azul2-bg */
  color: rgb(20, 16, 16);
  left: 0px;
  right: 0px;
}

aside#admin-toolbar {
  z-index: 2000;
}

.navbar-toggler-icon {
  color: white !important;
  filter: brightness(5);
  /* para los SVG si no cambian de color */
}

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

/*  fin navs  */
/* tablas */
tr td,
tr th {
  border: 1px solid #6c757d;
}

:where(td) {
  background: white;
}

tr th {
  border: 0;
}

table {
  border-collapse: inherit !important;
}

#presupuesto-widget li {
  list-style: none !important;
}

#presupuesto-widget ul {
  margin: 0 !important;
  padding: 0;
}

/* fin tablas */
/* node--type-producto */
.node--type-producto .field--name-field-ref-catalogo .layout__region.layout__region--content {
  /*  display: flex;*/
}

.node--type-producto .field.field--name-taxonomy-term-title {
  display: none;
}

.field--name-field-trabajos-relacionados .field__label,
.field--name-field-modelos-relacionados .field__label {
  margin: 2rem 0;
  font-weight: 600;
  font-size: 1.25rem;
  color: #444;
  border-bottom: 2px solid #ec262c;
  padding-bottom: 0.5rem;
}

/* fin node--type-producto */
/* tablas */
tr td,
tr th {
  border: 1px solid #6c757d;
}

:where(td) {
  background: white;
}

/* fin tablas */
/* formularios canvas */
.form-flyup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1050;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.form-flyup.show {
  transform: translateY(0);
}

.form-flyup.d-none {
  display: none;
}

/* Ajustes para móvil */
@media (max-width: 767px) {
  #toggle-form {
    bottom: 100px; /* Ajusta para evitar la barra de navegación inferior en móviles */
  }
  .form-flyup .btn-close {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

/* fin formularios canvas */

/* formulario puertas */
input,
optgroup,
select,
textarea {
  padding: 10px;
}

.detalle-contenedor {
  margin: 10px 0;
  padding: 10px 0;
}

.detalle-fila,
.listapr {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.detalle-celda.detalle-mini,
.lista-imagen.galeria-listapr {
  width: 20%;
}

.detalle-celda.detalle-texto,
.lista-detalle {
  width: 80%;
  padding: 2em;
}

/* footer */
.footer-legal p {
  margin-right: auto !important;
  margin-left: auto !important;
}

.site-footer__bottom {
  border-top: 0;
}

/* Anula el ancho del otro CSS */
.site-footer__top .region-footer-first.footer-col-1,
.site-footer__top .region-footer-second.footer-col-2 {
  width: 100% !important;
  padding: 0 !important;
}

@media (min-width: 851px) {
  .site-footer__top .region {
    width: initial;
    padding: 0 0.65%;
  }
}

@media (min-width: 768px) {
  .site-footer__top.d-flex .footer-col-1 {
    width: 33.333% !important;
    padding: 0 1rem;
  }

  .site-footer__top.d-flex .footer-col-2 {
    width: 66.666% !important;
    padding: 0 1rem;
  }
}

.site-footer__top {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr 2fr;
  }
}

/* fin footer */
/* node */
.layout-no-sidebars.node--type-producto .field--name-field-subtitulo {
  color: #333;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-block;
  margin-left: auto;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.node--view-mode-teaser {
  border: 0;
  margin: 0;
  padding: 0;
}

/* fin node */
/* Sólo dispositivos móviles (máx. 600px) */
@media only screen and (max-width: 600px) {
  .valign-wrapper {
    flex-direction: column;
  }

  .right-align-s {
    text-align: right
  }

  a.navbar-brand {
    width: 180px;
  }

  /* node--type-producto */
  .node--type-producto .field--name-field-ref-catalogo .layout__region.layout__region--content {
    display: flex;
    flex-direction: column;
  }
}

.gallery-producto {
 /*  position: sticky;
  top: 2rem;*/
  margin-bottom: 3em;
}

/* necesaria para que funione el stycky */
.overflow_visible {
  overflow: visible !important;
}

/* Desde tabletas en adelante (mínimo 601px) */
@media only screen and (min-width: 601px) {
  .valign-wrapper {
    display: -webkit-box;
  }

}

/* Hasta tabletas (máximo 992px, incluye móviles y tabletas) */
@media only screen and (max-width: 992px) {}

/* Solo escritorio (a partir de 993px) */
@media only screen and (min-width: 993px) {
  .node--view-mode-full .gallery-producto.text-center {
    display: grid;
    /* grid-template-columns: 62% 28%; imagen grande | miniaturas  */
    gap: 1rem;
    align-items: start;
  }
}

.view-display-id-node_token_tax_ref .owl-carousel .owl-item img {
  width: auto !important;
  object-fit: cover;
  margin: auto;
}

/* Contenedor responsivo y siempre circular */
.node--view-mode-round-small .photoswipe-gallery,
.view-diseno-cocina .round-image-container,
.view-node-disenos-muebles .round-image-container {
  width: 100%;
  /* Ocupa el ancho de la columna de Macy */
  max-width: 180px;
  /* Tamaño máximo en sobremesa para que no sea gigante */
  aspect-ratio: 1 / 1;
  /* FUERZA que el alto sea igual al ancho automáticamente */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  /* Hace el círculo */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  /* Fondo neutro por si la imagen tarda en cargar */
  transition: transform 0.3s ease;
}

.node--view-mode-round-small .photoswipe-gallery img,
.round-image-container img,
.view-node-disenos-muebles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recorta la imagen para llenar el círculo sin deformarse */
  display: block;
}

.round-link {
  text-decoration: none !important;
  display: block;
}

.round-image-container {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  background: #f8f9fa;
}

.round-image-container .contextual-region,
.round-image-container .field,
.round-image-container .field__item,
.round-image-container a.colorbox {
  display: block;
  width: 100%;
  height: 100%;
}

.round-image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Efecto hover sobre el contenedor */
.round-link:hover .round-image-container {
  transform: scale(1.05);
}

.round-caption {
  font-size: 0.85rem;
  color: #333;
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.2;
}

/* Ajuste específico para móvil: si quieres que sean más pequeños */
@media (max-width: 768px) {
  .round-image-container {
    max-width: 120px;
    /* Tamaño más cómodo para dedos en móvil */
  }

  .round-caption {
    font-size: 0.75rem;
  }
}

/* ===== GRID RESPONSIVO DISEÑO COCINA ===== */

/* ===============================
   DISPLAY 1 - GRID 4 COLUMNAS
================================= */

.view-display-id-embed_1 .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
  .view-display-id-embed_1 .views-view-responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .view-display-id-embed_1 .views-view-responsive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===============================
   DISPLAY 2 - GRID 3 COLUMNAS
   CON RATIO 5/3
================================= */

.view-display-id-embed_2 .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
  .view-display-id-embed_2 .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .view-display-id-embed_2 .views-view-responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ratio solo en la vista 2 */

.view-display-id-embed_2 .views-view-responsive-grid__item-inner {
  aspect-ratio: 5 / 3;
}

.node--type-diseno-cocina.node--view-mode-token img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.view-display-id-embed_1,
.view-display-id-embed_2 {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.row {
  /*overflow: hidden;*/
}

.view img {
  max-width: 100%;
  height: auto;
}

.producto-sticky-wrap {
  position: relative;
}

.producto-sticky-box {
  width: 100%;
}

.producto-sticky-box.is-fixed {
  position: fixed;
  top: 110px;
  z-index: 20;
}

.producto-sticky-box.is-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* =========================================
   BETTER EXPOSED FILTERS – ESTILO BOTONES
========================================= */

/* Contenedor principal */
.d-flex .js-form-item {
  width: 100%;
}

.views-exposed-form .bef-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 1em 0;
  list-style: none;
  justify-content: center;
}

/* Items */
.views-exposed-form .bef-links li {
  list-style: none;
}

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

/* Desktop – 4 columnas */
.views-exposed-form .bef-links li {
  /* flex: 0 0 calc(25% - 10px);*/
}

/* Tablet – 3 columnas */
@media (max-width: 992px) {
  .
  /* views-exposed-form .bef-links li {
    flex: 0 0 calc(33.33% - 10px);*/
}
}

/* Móvil – 2 columnas */
@media (max-width: 576px) {
  .views-exposed-form .bef-links li {
    /* flex: 0 0 calc(50% - 10px);*/
  }
}

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

.views-exposed-form .bef-links li a {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid #0d6efd;
  background: #c9dbea;
  color: #333 !important;
  text-decoration: none;
  text-align: center;
  transition: all .2s ease;
}

/* Hover */
.views-exposed-form .bef-links li a:hover {
  background: #e9ecef;
}

/* Activo */
.views-exposed-form .bef-links li a.bef-link--selected,
.views-exposed-form .bef-links li a.active,
.views-exposed-form .bef-links li a[aria-current="true"] {
  background: #0d6efd;
  color: #fff !important;
  border-color: #0d6efd;
}

/* ===== Ajustes generales del bloque ===== */

.view-filters {
  text-align: center;
}

.view-filters .form-actions {
  width: 100%;
}

/* ===== Forzar columnas en móvil para Blazy ===== */

@media (max-width: 767px) {
  .blazy--grid.b-flex>li {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ===== Imagen estilo cover ===== */

.image-cover-wrapper {
  height: 100%;
  min-height: 350px;
  /* controla altura mínima */
  border-radius: 1rem;
  overflow: hidden;
}

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

.img.image-style-large,
.image-style-slick-media,
.image-style-large,
.img-fluid,
.image-style-medium {
  border-radius: var(--bs-border-radius) !important;
}

.img.image-style-large,
.image-style-slick-media,
.image-style-large,
.img-fluid,
.image-style-medium {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  transition: transform .3s ease, box-shadow .3s ease;
}

a .img.image-style-large:hover,
a .image-style-slick-media:hover,
a .image-style-large:hover,
a .img-fluid:hover,
a .image-style-medium:hover {
  transform: translateY(-4px);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
}

/* Elimina estilo visual de list-group-item */
.list-group-item {
  background-color: transparent !important;
  border: 0 !important;
}

@media (min-width: 560px) {
  .node .field--type-image {
    float: left;
    margin: 0 0em 0 0;
  }
}

.views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
}

/* ===== MASONRY MODULAR ===== */
ul.masonry {
  padding-left: 0;
}

.masonry {
  column-gap: 1rem;
  list-style-type: none !important;
  column-width: auto !important;
}

/* Forzamos column-width:auto porque si existe en otro CSS,
   el navegador calcula el número de columnas automáticamente
   y puede bajar de 4 a 3 aunque column-count sea 4 */

.masonry-item {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.masonry-item:hover {
  transform: translateY(-6px);
}

@media (max-width: 767px) {
  .masonry-item .subcard {
    font-size: xx-small;
  }
}

.masonry-item .subcard {
  margin-bottom: 0px !important;
  background-color: #fff;
  /*#e4edd4;*/
  padding: 2em;
  margin-top: 0em !important;
  z-index: 999;
}

.masonry-item .subcard a {
  color: #324a08;
}

.subcard {
  margin: 0;
}

.subcard a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
}

/* ===== Base (mobile first) ===== */
.masonry-1 {
  column-count: 1;
}

.masonry-2 {
  column-count: 2;
}

.masonry-3 {
  column-count: 3;
}

.masonry-4 {
  column-count: 4;
}

.masonry-5 {
  column-count: 5;
}

/* Evita que 4 columnas entren demasiado pronto en anchos intermedios */
@media (max-width: 991.98px) {
  .masonry-md-4 {
    column-count: inherit;
  }

  .masonry-md-5 {
    column-count: inherit;
  }
}

/* ===== SM ≥576px ===== */
@media (min-width: 576px) {
  .masonry-sm-1 {
    column-count: 1;
  }

  .masonry-sm-2 {
    column-count: 2;
  }

  .masonry-sm-3 {
    column-count: 2;
  }

  .masonry-sm-4 {
    column-count: 4;
  }

  .masonry-sm-5 {
    column-count: 5;
  }
}

/* ===== MD ≥768px ===== */
@media (min-width: 768px) {
  .masonry-md-1 {
    column-count: 1;
  }

  .masonry-md-2 {
    column-count: 2;
  }

  .masonry-md-3 {
    column-count: 3;
  }
}

/* ===== LG ≥992px ===== */
@media (min-width: 992px) {
  .masonry-lg-1 {
    column-count: 1;
  }

  .masonry-lg-2 {
    column-count: 2;
  }

  .masonry-lg-3 {
    column-count: 3;
  }

  .masonry-lg-4 {
    column-count: 4;
  }

  .masonry-lg-5 {
    column-count: 5;
  }

  /* Compatibilidad por si el HTML sigue usando masonry-md-4 o masonry-md-5 */
  .masonry-md-4 {
    column-count: 4;
  }

  .masonry-md-5 {
    column-count: 5;
  }
}

/* ===== XL ≥1200px ===== */
@media (min-width: 1200px) {
  .masonry-xl-1 {
    column-count: 1;
  }

  .masonry-xl-2 {
    column-count: 2;
  }

  .masonry-xl-3 {
    column-count: 3;
  }

  .masonry-xl-4 {
    column-count: 4;
  }

  .masonry-xl-5 {
    column-count: 5;
  }
}

.masonry-gap-1 {
  column-gap: .5rem;
}

.masonry-gap-2 {
  column-gap: 1rem;
}

.masonry-gap-3 {
  column-gap: 1.5rem;
}

/* ===== MASONRY MODULAR ===== */

a {
  text-decoration: none !important;
  color: #466a0a !important;
}

/* ===== owl carousel subcatálogos ===== */

.owl-carousel .owl-stage {
  display: flex;
}

.owl-carousel .owl-item {
  display: flex;
  align-items: stretch;
}

.owl-carousel .card-owl-item {
  height: 100%;
  width: 100%;
}

.catalog-tile {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
  align-items: center;
}

.catalog-tile img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 120px;
  width: auto !important;
  margin-bottom: 1em;
}

/* ===== BLOQUE SELECTOR PRODUCTOS ===== */

.view-id-nombres_tax.view-display-id-block_3,
.view-owl-subcatalogos {
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
  border-radius: 1.5rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  margin: 4rem auto;
  position: relative;
  overflow: hidden;
  padding: 2rem 0rem !important;
}

/* Separación visual superior e inferior */
.view-id-nombres_tax.view-display-id-block_3::before,
.view-owl-subcatalogos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
}

/* ===== owl carousel subcatálogos ===== */


.view-display-id-block_nombre_descripcion_tax {
  position: relative;
}

.view-display-id-block_nombre_descripcion_tax .view-content {
  position: relative;
}

/* Línea vertical fina elegante */
.col-title {
  position: relative;
}

.col-title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 120px;
  background: #d57e2d;
  /*#84bd00;*/
}

/* ===== MENU NAV ===== */
/* Base */
.navbar-nav .nav-link {
  display: block;
  padding: .6rem 1rem;
  border-radius: 12px;
  transition: outline .2s ease, background-color .2s ease;
}

/* Hover → azul */
.navbar-nav .nav-link:hover {
  outline: 3px solid #9bbcff;
  background: rgba(155, 188, 255, 0.08);
}

/* Activo Drupal → verde permanente */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.is-active,
.navbar-nav .nav-item.active>.nav-link,
.navbar-nav .nav-item.is-active>.nav-link {
  outline: 3px solid #84bd00;
  background: rgba(132, 189, 0, 0.08);
}

/* Evita que el hover azul sobrescriba el verde */
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.is-active:hover,
.navbar-nav .nav-item.active>.nav-link:hover,
.navbar-nav .nav-item.is-active>.nav-link:hover {
  outline: 3px solid #84bd00;
  background: rgba(132, 189, 0, 0.08);
}

li.nav-item {
  margin-bottom: 0.3rem;
}

/* ===== MENU NAV ===== */

.navbar-brand img {
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--bs-nav-pills-link-active-color) !important;
}

/* ===== FIN MENU NAV ===== */
.lead p {
  font-size: 1.25rem;
  font-weight: 300;
}

/* ===== MANCY GALLERIES UTILITIES ===== */

#macy-gallery-2 {
  position: relative;
}

#macy-gallery-2 .macy-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== END MANCY GALLERIES UTILITIES ===== */
.form-flyup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1030;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.form-flyup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1060;
  padding: 12px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 1;
  touch-action: manipulation;
}

.form-flyup .container {
  padding-top: 56px !important;
}