/* FONTS */
@font-face {
  font-family: 'Black';
  src: url('../fonts/Black.woff2') format('woff2'),
       url('../fonts/Black.woff') format('woff'),
       url('../fonts/Black.ttf') format('truetype'),
       url('../fonts/Black.otf') format('opentype');
  font-weight: 400; /* Regular */
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.woff2') format('woff2'),
       url('../fonts/Inter.woff') format('woff'),
       url('../fonts/Inter.ttf') format('truetype'),
       url('../fonts/Inter.otf') format('opentype');
  font-weight: 400; /* Regular */
  font-style: normal;
}
@font-face {
  font-family: 'GrindyBrush';
  src: url('../fonts/GrindyBrush.woff2') format('woff2'),
       url('../fonts/GrindyBrush.woff') format('woff'),
       url('../fonts/GrindyBrush.ttf') format('truetype'),
       url('../fonts/GrindyBrush.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
/* CUSTOM */
html, body {
        overflow-x: visible;
        min-height: 100vh;
        display: flex;
        flex-direction: column;    
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 16px;
        font-style: normal;
        background-color: var(--color-clam-white);
        color:  var(--color-soft-black);
        }
.f-black-titulo{
    font-family: 'Black', sans-serif;
    font-weight: bold;
    line-height: 1.2em;
}
.f-black-subtitulo{
    font-family: 'Black', sans-serif;
    font-weight: 400;
    letter-spacing: 3px; 
    line-height: 1em;
}
.f-inter{
    font-family: 'inter', sans-serif;
}
.f-inter-titulo{
    font-family: 'inter', sans-serif;
    letter-spacing:  2px;
}
.f-grindybrush{
    font-family: 'GrindyBrush', sans-serif;
}
    /* =========================
       VARIABLES DE COLOR (RAÍZ)
       ========================= */
    :root{
	  --color-azul-oscuro: #0a1f3d;
      --color-negro: #000000;
      --color-mhn-plump: #DCBADB;
      --color-blue-mist: #A4C2F4;
      --color-soft-black: #1C1C1C;
      --color-calm-white: #F9F9F9;
      --color-com-1: #704891;
      --color-com-2: #C4B2FF;
      --color-com-3: #EB5965;
      --color-com-4: #00AA66;
      --color-com-5: #00A1BE;
      --color-com-6: #BD1A42;
      --color-com-7: #EB600A;
      --color-com-8: #BA8EC0;
	  --color-yellow-submarine: #FFD60A;
	  --color-red-velvet: #e57373;
	  --color-green-garden: #81c784;
    }
	.ratio-4x5 { --bs-aspect-ratio: 125%; }

    /* =========================
       UTILIDADES SEGÚN PALETA
       (texto, fondo, borde, badges, buttons, spinners)
       ========================= */

    /* Helper para bloques de muestra */
    .swatch { min-height: 60px; border-radius: .5rem; display:flex; align-items:center; justify-content:center; }
.text-shadow-pro {
    text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6);
}

	/* AZUL OSCURO */
	.text-azul-oscuro { color: var(--color-azul-oscuro) !important; }
	.bg-azul-oscuro { background-color: var(--color-azul-oscuro) !important; }
	.border-azul-oscuro { border-color: var(--color-azul-oscuro) !important; }
	.badge-azul-oscuro { background-color: var(--color-azul-oscuro) !important; color:#fff !important; }
	.btn-azul-oscuro { 
		background-color: var(--color-azul-oscuro) !important; 
		border-color: var(--color-azul-oscuro) !important; 
		color:#fff !important; 
	}
	.btn-azul-oscuro:hover,
	.btn-azul-oscuro:focus { 
		background-color: #0d2b59 !important; /* tono más claro para hover (+30% brillo) */
		border-color: #0d2b59 !important; 
		color:#fff !important; 
		box-shadow: 0 4px 15px rgba(10, 31, 61, 0.4) !important;
	}
	.spinner-azul-oscuro { color: var(--color-azul-oscuro) !important; }

    /* NEGRO */
    .text-negro    { color: var(--color-negro) !important; }
    .bg-negro      { background-color: var(--color-negro) !important; }
    .border-negro  { border-color: var(--color-negro) !important; }
    .badge-negro   { background-color: var(--color-negro) !important; color:#fff !important; }
    .btn-negro     { background-color: var(--color-negro) !important; border-color: var(--color-negro) !important; color:#fff !important; }
    .btn-negro:hover,.btn-negro:focus{ background-color:#333 !important; border-color:#333 !important; color:#fff !important; }
    .spinner-negro { color: var(--color-negro) !important; }

    /* MHN PLUMP */
    .text-mhn-plump   { color: var(--color-mhn-plump) !important; }
    .bg-mhn-plump     { background-color: var(--color-mhn-plump) !important; }
    .border-mhn-plump { border-color: var(--color-mhn-plump) !important; }
    .badge-mhn-plump  { background-color: var(--color-mhn-plump) !important; color:#333 !important; }
    .btn-mhn-plump    { background-color: var(--color-mhn-plump) !important; border-color: var(--color-mhn-plump) !important; color:#333 !important; }
    .btn-mhn-plump:hover,.btn-mhn-plump:focus{ background-color:#c49cc2 !important; border-color:#c49cc2 !important; }
    .spinner-mhn-plump{ color: var(--color-mhn-plump) !important; }
/* BTN OUTLINE MHN PLUMP — borde forzado */
.btn-outline-mhn-plump{
  background-color: transparent !important;
  color: var(--color-mhn-plump, #c49cc2) !important;
  border: 1px solid var(--color-mhn-plump, #c49cc2) !important; /* ← estilo + ancho + color */
}

/* Hover/Focus: se rellena */
.btn-outline-mhn-plump:hover,
.btn-outline-mhn-plump:focus{
  color: #333 !important;
  background-color: var(--color-mhn-plump, #c49cc2) !important;
  border-color: var(--color-mhn-plump, #c49cc2) !important;
}

/* Activo / checked */
.btn-check:checked + .btn-outline-mhn-plump,
.btn-check:active + .btn-outline-mhn-plump,
.btn-outline-mhn-plump:active,
.btn-outline-mhn-plump.active,
.show > .btn-outline-mhn-plump.dropdown-toggle{
  color:#333 !important;
  background-color: var(--color-mhn-plump, #c49cc2) !important;
  border-color: var(--color-mhn-plump, #c49cc2) !important;
}

/* Deshabilitado */
.btn-outline-mhn-plump.disabled,
.btn-outline-mhn-plump:disabled{
  color: var(--color-mhn-plump, #c49cc2) !important;
  background-color: transparent !important;
  border: 1px solid var(--color-mhn-plump, #c49cc2) !important;
  opacity:.65;
}

/* (Opcional) foco */
.btn-outline-mhn-plump:focus{
  box-shadow: 0 0 0 .25rem rgba(196,156,194,.25) !important;
}

    /* BLUE MIST */
    .text-blue-mist   { color: var(--color-blue-mist) !important; }
    .bg-blue-mist     { background-color: var(--color-blue-mist) !important; }
    .border-blue-mist { border-color: var(--color-blue-mist) !important; }
    .badge-blue-mist  { background-color: var(--color-blue-mist) !important; color:#333 !important; }
    .btn-blue-mist    { background-color: var(--color-blue-mist) !important; border-color: var(--color-blue-mist) !important; color:#333 !important; }
    .btn-blue-mist:hover,.btn-blue-mist:focus{ background-color:#87a9ea !important; border-color:#87a9ea !important; }
    .spinner-blue-mist{ color: var(--color-blue-mist) !important; }

    /* SOFT BLACK */
    .text-soft-black   { color: var(--color-soft-black) !important; }
    .bg-soft-black     { background-color: var(--color-soft-black) !important; }
    .border-soft-black { border-color: var(--color-soft-black) !important; }
    .badge-soft-black  { background-color: var(--color-soft-black) !important; color:#fff !important; }
    .btn-soft-black    { background-color: var(--color-soft-black) !important; border-color: var(--color-soft-black) !important; color:#fff !important; }
    .btn-soft-black:hover,.btn-soft-black:focus{ background-color:#000 !important; border-color:#000 !important; }
    .spinner-soft-black{ color: var(--color-soft-black) !important; }

    /* CALM WHITE */
    .text-calm-white   { color: var(--color-calm-white) !important; }
    .bg-calm-white     { background-color: var(--color-calm-white) !important; }
    .border-calm-white { border-color: var(--color-calm-white) !important; }
    .badge-calm-white  { background-color: var(--color-calm-white) !important; color:#333 !important; }
    .btn-calm-white    { background-color: var(--color-calm-white) !important; border-color: var(--color-calm-white) !important; color:#333 !important; }
    .btn-calm-white:hover,.btn-calm-white:focus{ background-color:#e6e6e6 !important; border-color:#e6e6e6 !important; }
    .spinner-calm-white{ color: var(--color-calm-white) !important; }

    /* COM-1 */
    .text-com-1   { color: var(--color-com-1) !important; }
    .bg-com-1     { background-color: var(--color-com-1) !important; }
    .border-com-1 { border-color: var(--color-com-1) !important; }
    .badge-com-1  { background-color: var(--color-com-1) !important; color:#fff !important; }
    .btn-com-1    { background-color: var(--color-com-1) !important; border-color: var(--color-com-1) !important; color:#fff !important; }
    .btn-com-1:hover,.btn-com-1:focus{ background-color:#5b3a76 !important; border-color:#5b3a76 !important; }
    .spinner-com-1{ color: var(--color-com-1) !important; }

    /* COM-2 */
    .text-com-2   { color: var(--color-com-2) !important; }
    .bg-com-2     { background-color: var(--color-com-2) !important; }
    .border-com-2 { border-color: var(--color-com-2) !important; }
    .badge-com-2  { background-color: var(--color-com-2) !important; color:#fff !important; }
    .btn-com-2    { background-color: var(--color-com-2) !important; border-color: var(--color-com-2) !important; color:#fff !important; }
    .btn-com-2:hover,.btn-com-2:focus{ background-color:#a897e6 !important; border-color:#a897e6 !important; }
    .spinner-com-2{ color: var(--color-com-2) !important; }

    /* COM-3 */
    .text-com-3   { color: var(--color-com-3) !important; }
    .bg-com-3     { background-color: var(--color-com-3) !important; }
    .border-com-3 { border-color: var(--color-com-3) !important; }
    .badge-com-3  { background-color: var(--color-com-3) !important; color:#fff !important; }
    .btn-com-3    { background-color: var(--color-com-3) !important; border-color: var(--color-com-3) !important; color:#fff !important; }
    .btn-com-3:hover,.btn-com-3:focus{ background-color:#d04c57 !important; border-color:#d04c57 !important; }
    .spinner-com-3{ color: var(--color-com-3) !important; }

    /* COM-4 */
    .text-com-4   { color: var(--color-com-4) !important; }
    .bg-com-4     { background-color: var(--color-com-4) !important; }
    .border-com-4 { border-color: var(--color-com-4) !important; }
    .badge-com-4  { background-color: var(--color-com-4) !important; color:#000 !important; }
    .btn-com-4    { background-color: var(--color-com-4) !important; border-color: var(--color-com-4) !important; color:#FFF !important; }
    .btn-com-4:hover,.btn-com-4:focus{ background-color:#009056 !important; border-color:#009056 !important; }
    .spinner-com-4{ color: var(--color-com-4) !important; }

    /* COM-5 */
    .text-com-5   { color: var(--color-com-5) !important; }
    .bg-com-5     { background-color: var(--color-com-5) !important; }
    .border-com-5 { border-color: var(--color-com-5) !important; }
    .badge-com-5  { background-color: var(--color-com-5) !important; color:#fff !important; }
    .btn-com-5    { background-color: var(--color-com-5) !important; border-color: var(--color-com-5) !important; color:#fff !important; }
    .btn-com-5:hover,.btn-com-5:focus{ background-color:#008aa1 !important; border-color:#008aa1 !important; }
    .spinner-com-5{ color: var(--color-com-5) !important; }

    /* COM-6 */
    .text-com-6   { color: var(--color-com-6) !important; }
    .bg-com-6     { background-color: var(--color-com-6) !important; }
    .border-com-6 { border-color: var(--color-com-6) !important; }
    .badge-com-6  { background-color: var(--color-com-6) !important; color:#fff !important; }
    .btn-com-6    { background-color: var(--color-com-6) !important; border-color: var(--color-com-6) !important; color:#fff !important; }
    .btn-com-6:hover,.btn-com-6:focus{ background-color:#a01638 !important; border-color:#a01638 !important; }
    .spinner-com-6{ color: var(--color-com-6) !important; }

    /* COM-7 */
    .text-com-7   { color: var(--color-com-7) !important; }
    .bg-com-7     { background-color: var(--color-com-7) !important; }
    .border-com-7 { border-color: var(--color-com-7) !important; }
    .badge-com-7  { background-color: var(--color-com-7) !important; color:#000 !important; }
    .btn-com-7    { background-color: var(--color-com-7) !important; border-color: var(--color-com-7) !important; color:#000 !important; }
    .btn-com-7:hover,.btn-com-7:focus{ background-color:#c75108 !important; border-color:#c75108 !important; }
    .spinner-com-7{ color: var(--color-com-7) !important; }

    /* COM-8 */
    .text-com-8   { color: var(--color-com-8) !important; }
    .bg-com-8     { background-color: var(--color-com-8) !important; }
    .border-com-8 { border-color: var(--color-com-8) !important; }
    .badge-com-8  { background-color: var(--color-com-8) !important; color:#fff !important; }
    .btn-com-8    { background-color: var(--color-com-8) !important; border-color: var(--color-com-8) !important; color:#fff !important; }
    .btn-com-8:hover,.btn-com-8:focus{ background-color:#a575ab !important; border-color:#a575ab !important; }
    .spinner-com-8{ color: var(--color-com-8) !important; }

     /* YELLOW SUBMARINE */
     .text-yellow-submarine   { color: var(--color-yellow-submarine) !important; }
	 .bg-yellow-submarine     { background-color: var(--color-yellow-submarine) !important; }
	 .border-yellow-submarine { border-color: var(--color-yellow-submarine) !important; }
	 .badge-yellow-submarine  { background-color: var(--color-yellow-submarine) !important; color:#333 !important; }
	 .btn-yellow-submarine    { background-color: var(--color-yellow-submarine) !important; border-color: var(--color-yellow-submarine) !important; color:#333 !important; }
	 .btn-yellow-submarine:hover,
	 .btn-yellow-submarine:focus { background-color:#f6d94f !important; border-color:#f6d94f !important; }
	 .spinner-yellow-submarine{ color: var(--color-yellow-submarine) !important; }
     
      /*RED VELVET */
      .text-red-velvet   { color: var(--color-red-velvet) !important; }
      .bg-red-velvet     { background-color: var(--color-red-velvet) !important; }
      .border-red-velvet { border-color: var(--color-red-velvet) !important; }
      .badge-red-velvet  { background-color: var(--color-red-velvet) !important; color:#fff !important; }
      .btn-red-velvet    { background-color: var(--color-red-velvet) !important; border-color: var(--color-red-velvet) !important; color:#fff !important; }
      .btn-red-velvet:hover,
      .btn-red-velvet:focus { background-color:#d9534f !important; border-color:#d9534f !important; }
      .spinner-red-velvet{ color: var(--color-red-velvet) !important; }

	  /*GREEN GARDEN */
      .text-green-garden   { color: var(--color-green-garden) !important; }
	  .bg-green-garden     { background-color: var(--color-green-garden) !important; }
	  .border-green-garden { border-color: var(--color-green-garden) !important; }
	  .badge-green-garden  { background-color: var(--color-green-garden) !important; color:#fff !important; }
	  .btn-green-garden    { background-color: var(--color-green-garden) !important; border-color: var(--color-green-garden) !important; color:#fff !important; }
	  .btn-green-garden:hover,
	  .btn-green-garden:focus { background-color:#66bb6a !important; border-color:#66bb6a !important; }
	  .spinner-green-garden{ color: var(--color-green-garden) !important; }

.btn{
            border: none;
            border-radius: 8px; /* Bordes elípticos */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
            transition: background-color 0.3s; /* Transición suave */
	        padding: 0.8em 1.6em; /* Ajuste de padding para proporción */
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
.f-w-400{
    font-weight: 400;
}
.f-w-600{
    font-weight: 600;
}
.f-w-bold{
    font-weight: bold;
}
.f-s-20{
    font-size: 20px;
}
.f-s-30{
    font-size: 30px;
}
.f-s-40{
    font-size: 40px;
}
.f-l-s-3{
    letter-spacing: 3px;
}



.zindex1{z-index:1000;}
.zindex2{z-index:2000;}
.zindex3{z-index:3000;}
.zindex4{z-index:4000;}
.zindex5{z-index:5000;}
.zindex6{z-index:6000;}
.zindex7{z-index:7000;}
.zindex8{z-index:8000;}
.zindex9{z-index:9000;}
.em070  {font-size: 0.7em;}
.em080  {font-size: 0.8em;}
.em090  {font-size: 0.9em;}
.em110  {font-size: 1.1em;}
.em120  {font-size: 1.2em;}
.em130  {font-size: 1.3em;}
.em140  {font-size: 1.4em;}
.em150  {font-size: 1.5em;}
.em160  {font-size: 1.6em;}
.em170  {font-size: 1.7em;}
.em180  {font-size: 1.8em;}
.em190  {font-size: 1.9em;}
.em200  {font-size: 2em;}
.em210  {font-size: 2.1em;}
.em300  {font-size: 3em;}
.em400  {font-size: 4em;}
.em500  {font-size: 5em;}
.em600  {font-size: 6em;}
.em700  {font-size: 7em;}
/* Eliminar padding de la columna col-4 */
.faldon.col-4 {
    padding-left: 0;
}

/* Eliminar margen y padding de la lista */
.faldon ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none; /* Opcional: elimina los puntos de la lista */
}
.rotulo-mensaje {
        position: absolute;
        bottom: 0;
        left: 0;
        min-width: 100%; /* Se expande para cubrir el ancho */
    }

        .separemenusup{
            margin-top: 96px;
            flex-grow: 1;
        }
       .custom-button {
            background-color: #6f42c1; /* Morado similar al de Bootstrap */
            color: white;
            border: none;
            border-radius: 50px; /* Bordes elípticos */
            padding: 15px 30px; /* Ajuste de padding para proporción */
            font-size: 1.25rem; /* Tamaño de fuente similar al de la imagen */
            text-transform: uppercase; /* Mayúsculas como en la imagen */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
            transition: background-color 0.3s; /* Transición suave */
        }
        .custom-button:hover {
            background-color: #5a2f9e; /* Morado más oscuro al pasar el ratón */
        }
        .dto-label{
            top:4px; 
            right:0px; 
            z-index:2;
            font-size: 23px;
            font-weight: 600;
        }
        .add-btn{
            bottom:30px; 
            right:30px; 
            width:40px;
            height:40px;
            font-size: 23px;
            font-weight: 600;
            z-index:1
        }
        .fav-btn{
            bottom:90px; 
            right:30px; 
            width:40px;
            height:40px;
            font-size: 34px;
            font-weight: 600;
            z-index:1
        }
		.fot-btn{
            bottom:140px; 
            right:30px; 
            width:40px;
            height:40px;
            font-size: 34px;
            font-weight: 600;
            z-index:1
        }
		.fot-btn {
  outline: none !important; /* Elimina el contorno predeterminado */
  box-shadow: none !important; /* Elimina cualquier sombra de foco */
}

.fot-btn:focus,
.fot-btn:active {
  outline: none !important;
  box-shadow: none !important;
}
        .close-btn {
            position: absolute;
            top: 24px;
            left: 18px;
            font-size: 2rem;
            cursor: pointer;
        }
        .close-btn-cart {
            position: absolute;
            top: 34px;
            right: 16px;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .close-btn-user {
            position: absolute;
            top: 34px;
            right: 48px;
            font-size: 1.5rem;
            cursor: pointer;
        }
        #sidebar {
            position: fixed;
            top: 0;
            left: -250px;
            width: 250px;
            height: 100%;
            background-color: var(--color-calm-white);
            transition: left 0.3s ease;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            overflow-y: scroll;
            scrollbar-width: none; /* Oculta la barra en Firefox */
        }
        #sidebar::-webkit-scrollbar {
            display: none;
        }
        #sidebarcart {
            position: fixed;
            top: 0;
            right: -250px;
            width: 250px;
            height: 100%;
            background-color: var(--color-mhn-plump);
            transition: right 0.3s ease;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            overflow-y: scroll;
            scrollbar-width: none; /* Oculta la barra en Firefox */
        }
        #sidebarcart::-webkit-scrollbar {
            display: none;
        }
        #sidebaruser {
            position: fixed;
            top: 0;
            right: -250px;
            width: 250px;
            height: 100%;
            background-color: var(--color-mhn-plump);
            transition: right 0.3s ease;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            overflow-y: scroll;
            scrollbar-width: none; /* Oculta la barra en Firefox */
        }
        #sidebaruser::-webkit-scrollbar {
            display: none;
        }
        #sidebar.active {
            left: 0;
        }
        #sidebarcart.active {
            right: 0;
        }
        #sidebaruser.active {
            right: 0;
        }

        #sidebar ul {
            padding: 0;
            list-style: none;
            margin: 0;
        }

        #sidebar ul li {
            padding: 15px;
            border-bottom: 1px solid #ddd;
        }

        #sidebar ul li a {
            color: var(--color-soft-black);
            text-decoration: none;
            display: block;
        }

        #sidebar ul li a:hover {
            /*background-color: var(--color-soft-black);
            color: #fff;*/
        }

        #sidebaruser ul {
            padding: 0;
            list-style: none;
            margin: 0;
        }

        #sidebaruser ul li {
            padding: 15px;
            border-bottom: 1px solid #ddd;
        }

        #sidebaruser ul li a {
            color: var(--color-soft-black);
            text-decoration: none;
            font-weight: bold;
            display: block;
        }

        .menu-toggle {
            font-size: 2rem;
            cursor: pointer;
        }
        
        .menu-toggle-cart {
            font-size: 2rem;
            cursor: pointer;
        }
            
        .menu-toggle-user {
            font-size: 2rem;
            cursor: pointer;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1039;
        }

        .overlay.active {
            display: block;
        }

        .bg-mhn-faldon ol, .bg-mhn-faldon ul{
            margin-left: 0; /* Elimina el margen izquierdo */
            padding-left: 0; /* Opcional: Elimina el espacio adicional generado por el relleno */
            list-style: none; /* Opcional: Elimina los puntos o números de las listas */
        }
        a{
            text-decoration: none;
        }
        .miga{
            font-size: 0.9em;
        }
        .img100{
            width: 100%;
            height: auto;
        }
        .cab_menu{
            display: flex;
        }
        .cab_logo{
            display: block;
            text-align: center;
        }
        .cab_logo img{
            height: 30px;
            width: auto;
        }
        .cab_enlace{
            display: none;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            font-weight: 500;
            font-style: normal;
        }
        .cab_herramienta{
            display: inline-block;
            text-align: right;
        }
        .cab_menu i{
            font-size: 2em;
        }
        .cab_herramienta i{
            font-size: 1.5em;
        }
        .mobileno{
            display: none;
        }
        .mobilesi{
            display: inline-block;
        }
        .titulopeqdes{ display:none;}
        
        @media (min-width: 768px) {
			.fot-btn{
				display:none;
				}
            .quitafaldon{
                margin-left: 280px;
            }
        .titulopeqdes{ display:block}
        .bg-split {
            background: linear-gradient(to right, #e85764 50%, #efd0d5 50%);
        }
        .mobileno{
            display: inline-block;
        }
        .mobilesi{
            display: none;
        }
        .cab_menu {
            display: none;
        }
        .cab_logo {
            display: block;
            text-align: left;
        }
        .cab_logo img {
            margin-right: 30px;
        }
        .cab_enlace {
            display: inline-block;
            margin-left: 20px;
        }
        .cab_herramienta {
            display: block;
        }
    }
    .form-control {
      border: 1px solid #CCC;
      margin-bottom: 20px;
	  padding: 12px 7px 12px 7px;
    }
	.form-control.unidades_car {
	  margin-bottom: 0 !important;
	}
    .form-group label {
      color: #000000;  
    }
    .quantity-selector {
      display: flex;
      align-items: center;
      border: 1px solid var(--color-soft-black);
      border-radius: 5px;
      overflow: hidden;
      width: 100px;
      margin-bottom: 20px;
    }
    .quantity-selector button {
      background: transparent;
      border: none;
      width: 30px;
      height: 40px;
      line-height: 1;
      color: #f28b88;
      font-weight: bold;
    }
    .quantity-selector input {
      border: none;
      text-align: center;
      width: 40px;
      outline: none;
    }
    .add-to-cart-btn {
      background-color: #e85764;
      color: white;
      border: none;
      width: 100%;
      font-weight: bold;
        text-align: left;
        padding: 10px;
    }
    .add-to-cart-btn:hover {
      background-color: #d86b6a;
    }
    .precio_normal {
      float: right;
    }
    .priceno {      
        float: right;      
    }
    .accordion-button {
    border: none;
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    border-bottom: 1px solid #ddd; /* Línea inferior */
}

.accordion-button:not(.collapsed) {
    color: inherit;
    background-color: transparent;
    box-shadow: none;
    border-bottom: none; /* Quita la línea inferior del botón al abrir */
}

.accordion-item {
    border: none;
}

.accordion-collapse {
    border-bottom: 1px solid #ddd; /* Línea inferior debajo del contenido abierto */
}

.accordion-body {
    border-top: none;
}

.accordion-button:hover {
    background-color: transparent;
    color: inherit;
}

.accordion-button::after {
    transition: transform 0.2s; /* Suaviza el giro de la flecha */
}
.youtube-container {
    position: relative;
    display: flex; /* Flexbox para centrar */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    width: 100%;
    padding-bottom: 177.78%; /* Relación de aspecto 9:16 (vertical) */
    height: 0;
    overflow: hidden;
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    max-width: 100%; /* Asegura que no se desborde */
}
/*POP-UP COOKIES*/
#barracookiey{position:fixed;display:none; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 9999;   background-color: rgba(256, 256, 256, 0.88);}
.barradivcookiey{ position:absolute; top:1%; left:2%; width:96%; height:98%; background-color:#FFF;}
#barrabotoncookiey{position: absolute; top:20px; right:20px;}
@media (min-width:768px){
.barradivcookiey{top:50%; left:50%; width:700px; height:600px; margin-left:-350px; margin-top:-300px;}
}
@media (min-width:1024px){
.barradivcookiey{top:50%; left:50%; width:800px; height:600px; margin-left:-400px; margin-top:-300px;}
}
#barracookies{
	position:fixed;
	display:block;
	width:100%;
	bottom:0;
	left:0;
	background-color:#FFF;
	z-index:3000;
	-webkit-box-shadow: -1px -1px 8px 2px rgba(0,0,0,0.75);-moz-box-shadow: -1px -1px 8px 2px rgba(0,0,0,0.75);box-shadow: -1px -1px 8px 2px rgba(0,0,0,0.75);
	}
#prepredice{ position: relative; overflow: visible; z-index: 999}
#predice{ width: 100%; position: absolute; top: 90px; left: 0px; z-index: 999}
#prepredice_search{ position: relative; overflow: visible; z-index: 999; height: 96px;}
/*#predice_search{ width: 100%; position: absolute; top: 96px; left: 0px; z-index: 999}*/
.colorablacno a{ color: white;}
#busquedatotal{ position:fixed; left:0px; top:0px; display:none; z-index:9000; height: 96px,}
@media (min-width:768px){
#busquedatotal{ position:fixed; left:0px; top:0px;}
}
.contenidoeslat{
                    margin-left: 0px;
                  }
@media (min-width:768px){
.contenidoeslat{
                    margin-left: 280px;
                  }
}
.rotate-25-carousel {
  transform: rotate(45deg);
  transform-origin: center;
  display: inline-block;
}

.rotate--25-carousel {
  transform: rotate(-45deg);
  transform-origin: center;
  display: inline-block;
}
@media (min-width:768px){
.rotate-25-carousel {
  transform: rotate(25deg);
  transform-origin: center;
  display: inline-block;
}

.rotate--25-carousel {
  transform: rotate(-25deg);
  transform-origin: center;
  display: inline-block;
}
}

#termino {
    border: none; /* Quita todos los bordes */
    border-bottom: 1px solid #cccccc; /* Solo una línea inferior */
    outline: none; /* Evita el borde azul en el enfoque */
    box-shadow: none; /* Evita sombras en algunos navegadores */
}
#termino:focus {
    border-bottom: 1px solid #cccccc; /* Mantiene la línea inferior */
    outline: none; /* Evita el resaltado azul */
    box-shadow: none; /* Evita sombras adicionales */
}
.cursor{
    cursor: pointer;
}
#total_articulos{ 
    position: absolute;
    top: 44px;
    right: 17px;
    padding: 3px;
    font-size: 10px;
    width: 22px;
    height: 17px;
    text-align: center;
}
#add_ok{
	position:fixed;
	top:0px;
	left:0px;
	display:none;
	height:100%;
	width:100%;
	background: rgba(0, 0, 0, .3);
	z-index:9999;
	}
#add_ok_cal{
	position:fixed;
	top:0px;
	left:0px;
	display:block;
	height:100%;
	width:100%;
	z-index:9999;
	}
#add_ok_cont{
	position:fixed;
	display:none;
	width:300px;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-75px;
	background-color:#FFF;
	z-index:3000;
	-webkit-box-shadow: -1px -1px 8px 2px rgba(0,0,0,0.75);-moz-box-shadow: -1px -1px 8px 2px rgba(0,0,0,0.75);box-shadow: -1px -1px 8px 2px rgba(0,0,0,0.75);
	}
.acordeon{ 
	max-height: 275px;
	overflow-y: scroll;
}
.comic-bubble {
    position: relative;
    display: inline-block;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 3em;
}

.comic-bubble::after {
    content: "";
    position: absolute;
    top: 100%; /* Coloca el triángulo justo debajo del div */
    right: 5px;
    transform: translateX(-5px);
    border-width: 10px;
    border-style: solid;
    border-color: white transparent transparent transparent; /* Triángulo apuntando hacia abajo */
}
.comic-bubble-emoji {
    position: absolute;
    bottom: -40px; 
    right: 5px;
}
#alerta{ display:none;}
#boton_espera, #boton_espera2, #boton_espera_oficina, #boton_guardado, #boton_guardado_oficina, #tipob, #boton_confirma_si, #boton_confirma_no, #boton_espera_eliminar, .esconde_contra, .ccorreos{display:none;}
.cajalegal{overflow-y: scroll; overflow-x: hidden; height: 100px;}
.stickerlog{position: sticky; top: 200px;}
#add_ok_oculto{
	position:fixed;
	top:0px;
	left:0px;
	display:none;
	height:100%;
	width:100%;
	background: rgba(0, 0, 0, .3);
	z-index:9999;
	}
#oculto{z-index:10000; overflow-y:scroll; max-height:85%;}
#boton_espera, #boton_espera2, #boton_espera_oficina, #boton_guardado, #boton_guardado_oficina, #tipob, #boton_confirma_si, #boton_confirma_no, #boton_espera_eliminar, .esconde_contra, .ccorreos{display:none;}
.calculator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Corrige el centrado */
    
    width: 100px;
    height: 100px;
    
    background-color: var(--color-com-7); /* Aplicar color */
    color: white; /* Color del icono */
    
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Hacerlo circular si lo necesitas */
}

.calculator i {
    font-size: 3rem; /* Ajusta el tamaño del icono */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#boton_false, #tprincipio, cnormal, #boton_vfalse{ display:block;}
#boton_true, #tmitad, #boton_vtrue{ display:none;}
.caja_descuento{display:none; }
#mostrar-descuento{display:none; }
.clear{ clear:both;}
#obligo-registro{ display:none;}
#ahorras{ display:none;}
.etiqueta{position:absolute; top:-13px; right:5px; background-color:#28a745; width:25px; height:25px; padding:2px; display:none;}
.rotate45{transform: rotate(45deg);}

.efecto {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Sin color de fondo por defecto */
}

.inner-image{
  position: relative;
  background: none; /* ya no usamos el background del contenedor */
  overflow: hidden;
}

/* Capa con la imagen de hover (usa tu --hover-image) */
.inner-image::after{
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hover-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;                 /* empieza oculta */
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Imagen principal encima */
.inner-image img{
  display: block; width: 100%; height: auto;
  position: relative; z-index: 1;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
/* Simula el efecto hover cuando se toca el botón en móvil */
.inner-image.is-hover::after {
  opacity: 1 !important;
}
.inner-image.is-hover img {
  opacity: 0 !important;
}
/* Hover: fundido cruzado */
.inner-image:hover::after{ opacity: 1; }
.inner-image:hover img{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .inner-image::after, .inner-image img{ transition: none; }
}
/*MENU LATERAL*/
            .filter-menu {
                position: fixed;
                left: 0;
                top: 94px;
                height: 100vh;
                width: 280px;
                background: #fff;
                box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
                padding: 40px 20px 20px 20px;
                overflow-y: auto;
                transition: transform 0.3s ease;
                overflow-y: scroll;
                scrollbar-width: none; /* Oculta la barra en Firefox */
            }

        }
        #filter-menu::-webkit-scrollbar {
            display: none;
        }
            @media (max-width: 768px) {

                .filter-menu {
                    transform: translateX(-100%);
                }
                .filter-menu.show {
                    transform: translateX(0);
                }
            }
            .filter-toggle {
                display: none;
                position: fixed;
                left: 10px;
                top: 130px;
                background: #007bff;
                color: #fff;
                padding: 10px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                z-index: 1000;
            }
            @media (max-width: 768px) {
                .filter-toggle {
                    display: block;
                }
            }
            .filter-container {
                display: flex;
                flex-direction: column;
            }
            .filter-item {
                padding: 0px 0px 0px 0px;
                cursor: pointer;
                position: relative;
            }
            .filter-item:hover {
                /*background: #f1f1f1;*/
            }
            .sub-menu {
                display: none;
                padding-left: 15px;
                padding-top: 14px;
            }
            .open .sub-menu {
                display: block;
            }
            .toggle-arrow {
                font-size: 12px;
                position: absolute;
                right: 10px;
                top: -5px;
                transition: transform 0.3s ease;
            }
            /*.open .toggle-arrow {
                transform: rotate(45deg);
            }*/
            .toggle-arrow.active {
                transform: rotate(45deg);
            }

.no_video {position: absolute; top: 50%;  left: 50%; margin-top: -48px; margin-left: -32px; z-index:2;}
.video-container {	position:relative;	padding-bottom:56.25%;	padding-top:0px;	height:0;	overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed {	position:absolute;	top:0;	left:0;	width:100%;	height:100%;}
.contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 5px; /* Ajusta el valor según prefieras: 8px, 16px, 50% para circular, etc. */
    display: block; /* Recomendado para evitar espacios extra debajo */
    object-fit: cover; /* Opcional: mantiene proporción al recortar */
	margin-bottom:10px;
}



/* Quitar TODO redondeado (incluso en first/last) */
.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: 0 !important;
}

/* Bordes negros */
.pagination .page-link {
  border: 1px solid #000 !important;
  color: #000 !important;
}

/* Página activa: fondo negro + texto blanco */
.pagination .page-item.active .page-link {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* Hover: fondo gris claro, texto negro */
.pagination .page-link:hover {
  background-color: #f8f9fa !important;
  color: #000 !important;
  border-color: #000 !important;
}