.doppler{
    background-color: aqua;
    color: white;
    opacity: 0.8;
}
.dopplertitle{
    background-color: greenyellow;
    color: white;
}
.FillImage{
  width: 100%;
  height: 500px;
  object-fit: cover; /* La imagen se recorta para llenar todo el espacio */
  object-position: center; /* Centra el recorte */
}
.contenedor-padre {
  width: 100%;    /* O el ancho que desees */
  height: 400px;  /* Altura fija para notar el efecto */
  overflow: hidden;
}
.bootStrapBorder{
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
 }
 .ShadowText{
    text-shadow:12px 12px 12px black ;
 }
 .sizeGood{
  width: 340px;
  height: 340px;
  object-fit: cover; /* La imagen se recorta para llenar todo el espacio */
  object-position: center; /* Centra el recorte */
}
.logoSize{
    width: 100px;
    height: 10%;
    object-position: start;
}
.FooterText{
    opacity: 0.5;
}

.planesColor{
    background: #111;
}
.BotonPlanesColor{
    background: #FF2D2D;
    border-color: #111;
    -webkit-text-stroke-color: white;
}
.headerColor{
    background: #3B3B3B;
}

.creative{
  text-shadow: 
    0 0 10px rgba(255, 138, 21, 0.8),
    0 0 30px rgba(255, 138, 21, 0.5),
    0 0 60px rgba(255, 138, 21, 0.3);
}

/*Accordion Background*/
.accordion-button {
  background-color: #3B3B3B !important;
}

.accordion-button:not(.collapsed) {
  background-color: #1e1e1e !important;
  color: #f8f9fa !important;
}

/*ACCENT COLOR*/
.accordion-button:focus {
  box-shadow: 0 0 0 1px rgba(255, 138, 21, 0.35), 0 18px 50px rgba(0,0,0,.65), 0 0 32px rgba(255,140,60,.25) !important;       /* quita el resplandor azul */
  border-color: transparent !important; /* quita el borde */
}
.accordion-button:focus,
.accordion-body {
  box-shadow: 0 0 0 1px rgba(255, 138, 21, 0.35), 0 18px 50px rgba(0,0,0,.65), 0 0 32px rgba(255,140,60,.25) !important;       /* quita el resplandor azul */
  border-color: transparent !important;
}
/* Fondo del body */

.accordion-item {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
}

.accordion-body {
  background-color: #1e1e1e !important;
  color: #cccccc !important;
}

/*Flecha del accordion*/
.accordion-button::after {
  filter: invert(1) !important; /* blanco */
}
/* Flecha cuando está abierto */
.accordion-button:not(.collapsed)::after {
  filter: invert(58%) sepia(80%) saturate(500%) hue-rotate(2deg) !important; /* naranja */
}
#marcas_estilo {
    margin-top: -100px;
    margin-right: 0px;
    margin-bottom: -100px;
    margin-left: 0px;
}
#marcas_estilo .block{
    border: 4px  black;
    border-radius: 4px;                
    background-color: black;                
    padding: 20px;
}
@media (min-width: 768px) {
    #marcas_estilo{
    margin-top: -50px;
    margin-right: 0px;
    margin-bottom: -50px;
    margin-left: 0px;
    }
    #marcas_estilo .block{
            padding: 30px;
            padding-top: 20px;
            padding-right: 0px;
            padding-bottom: 20px;
            padding-left: 0px;
        }
}
/* mobile text align */
@media (max-width: 767px) {
    #marcas_estilo{
    text-align: center;
    }
}
.brand-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 48px;
align-items: center;
justify-items: center;
padding: 48px 24px;
}

.brand-logo {
width: 160px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
--base-scale: 1; /* escala base por defecto */
}

.brand-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform-origin: center center;
transform: scale(var(--base-scale));

opacity: .55;
filter: grayscale(100%) brightness(1.15);
transition:
    opacity .35s ease,
    filter .35s ease,
    transform .35s ease;
}

/* ===== Hover — universal para TODOS ===== */
.brand-logo:hover img {
opacity: 1;
filter: grayscale(0%) brightness(1.1);
transform: scale(calc(var(--base-scale) * 1.12));
}

/* Atenuar el resto en hover */
.brand-logos:hover .brand-logo:not(:hover) img {
opacity: .3;
}

/* Precios efecto */
.tarjeta:hover{
opacity: 1;
filter: grayscale(0%) brightness(1.1);
box-shadow: 0 0 0 1px rgba(255, 138, 21, 0.35), 0 18px 50px rgba(0,0,0,.65), 0 0 32px rgba(255,140,60,.25);
transform: translateY(-6px);
transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

/* Atenuar el resto en hover */
.tarjetas:hover .tarjeta:not(:hover) {
opacity: .6;
}
.opcion-preferida{
    box-shadow: 0 0 0 0px rgba(255, 138, 21, 0.35), 0 18px 50px rgba(0,0,0,.65), 0 0 32px rgba(255, 138, 21, 0.35);
}

.brand-logo[data-brand="reaper"]   { --base-scale: 1.2;  }
.brand-logo[data-brand="vital"]   { --base-scale: 1.4;  }
.brand-logo[data-brand="sennheiser"] { --base-scale: 1.3;  }
.brand-logo[data-brand="arturia"] { --base-scale: 2;  }
.brand-logo[data-brand="native"] { --base-scale: 2;  }
.brand-logo[data-brand="tone3000"] { --base-scale: 1.4;  }

section {
  scroll-margin-top: 80px; /* 60px navbar + 20px de respiro */
}

/* Mobile */
@media (max-width: 768px) {
    .brand-logo {
        width: 140px;
        height: 56px;
    }
    .logoDoppler{
        justify-content: center;
    }
    #barra {
    text-align: center;
    display: block;
    }
}

.toggleButton{
    filter: brightness(10);
}

.fotoOpinion{
    border-radius: 50%;
    object-fit: cover;
}
.linkCancion{
    object-fit: cover;
}
.boton-nav{
    display: flex;
    justify-content: end;
}

/* Numeros Crecientes */

@property --results {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
}

@property --clients{
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
}

@property --orders{
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
}

@keyframes countup{
    to {
        --results: 10;
        --clients: 30;
        --orders: 50;
    }
}

.count-results .count-up::after{
    counter-reset: count var(--results);
}

.count-clients .count-up::after{
    counter-reset: count var(--clients);
}

.count-orders .count-up::after{
    counter-reset: count var(--orders);
}

.count-up::after{
    content: counter(count);
    animation: countup 5s linear forwards;
}

@media (prefers-reduced-motion: reduce){
    .count-up{
        animation: none;
    }
    .count-results .count-up::after{
        content:10;
    }
    .count-clients .count-up::after{
        content:30;
    }
    .count-orders .count-up::after{
        content:50;
    }
}