@font-face {
  font-family: 'MiFuente';
  src: url('./Special_Gothic_Expanded_One/SpecialGothicExpandedOne-Regular.ttf') format('truetype');
  font-weight: 400;
}
h1, h2, h3, h4, h5,h6{
  font-family: MiFuente;
}
:root{
      --brand-dark: #B31312;
      --brand-mid: #D84040;
      --brand-light: #D84040;
      --muted-bg: #000000;
      --cta: #D84040;
      --text-on-dark: #ffffff;
    }

    body{
        font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; 
        color:#062126
    }
   
.color-primario{
    color: #8E1616;
}    
.color-w{
  color: white;
}
.color-b{
  color: #000000;
}
    .titulo{
        font-size: 50px;
        font-weight: 900;
    }
    .tituloDos{
        font-size: 40px;
        font-weight: 500;
    }
    .subTitulo{
        font-size: 35px !important;
        font-weight: 800;
    }    
        @media (max-width:768px){
      .titulo{
        font-size: 30px;
    }
    .tituloDos{
        font-size: 25px;
    }
        .subTitulo{
        font-size: 22px;
        font-weight: 800;
    }  
    }
    #como-funciona i{
        color: #B31312;
        font-size: 60px;
    }
    .autoP{
        filter: drop-shadow(5px 5px 10px #000000);
    }
    .bg-brand{
        background: linear-gradient(90deg,var(--brand-dark), var(--brand-mid)); 
        color:var(--text-on-dark)
    }
    .bg-brandT{
        background-image: url("../img/fondo2-01.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
        background-attachment: fixed;
        color:white;
    }  
    .bg-brandT div{

        color:#8E1616;
    }        
.hero-clip {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 100px;
}
        @media (max-width:768px){
.hero-clip {
  position: relative;
  z-index: 1;
  padding-top: 40px;
  padding-bottom: 40px;
}
    }
.hero-clip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000e0; 
  z-index: -1;
}

.bg-brandDos {
  background-image: url("../img/fondo1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: 0;
}
    .accent{
        color:var(--brand-mid);
    }
    .btn-w{
        background-color: #25d366;
        color: white;
        transition: 0.3s;
    }
    .btn-w:hover{
        background-color: #128c7e;
        color: white;
    }    
    .btn-cta{
        background:var(--cta); 
        color:#fff; 
        border:0;
    }
    .btn-cta:hover{
        filter:brightness(.95)
    }
    .card-hover{
        transition:transform .25s ease, box-shadow .25s ease
    }
    .card-hover:hover{
        transform:translateY(-6px); 
        box-shadow:0 10px 30px rgba(0,0,0,.12)
    }
    .feature-icon{
        width:56px; 
        height:56px; 
        display:flex; 
        align-items:center; 
        justify-content:center; 
        border-radius:12px; 
        background:rgba(255,255,255,.06); 
        color:var(--text-on-dark)
    }

    .muted-section{
        background:var(--muted-bg)
    }
    .logo-placeholder{
        font-weight:700; letter-spacing:.6px
    }

    /* responsive tweaks */
    @media(min-width:768px){
      .hero-illustration{height:420px; object-fit:cover}
    }

    footer a{color:inherit; text-decoration:none}

    /* marcas */
.carousel-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 50px 0px;
    }
    .cont-imagen{
        position: relative;
    }
        .cont-imagen h3{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .color-primario{
        color: #8E1616;
    }

    .carousel-track {
      display: flex;

      width: max-content;
      animation: scroll 25s linear infinite;
    }

    .carousel-container:hover .carousel-track {
      animation-play-state: paused;
    }

    .carousel-track img {
      width: 150px;
      height: auto;
      transition: transform 0.3s ease;
    margin: 0px 20px;
      opacity: 1;
      height: 100%
    }
    @media (max-width:1000px){
            .carousel-track img {
      width: 120px;
      height: auto;
      transition: transform 0.4s ease;
      margin-right: 10px;
    }
    }
        .carousel-track img:hover ~ h3 {

    transition: 0.2s;
    }
    .carousel-track img:hover ~ h3 {
    opacity: 0;
    }

    
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }    



    .navbar .nav-link {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, color 0.25s ease;
  font-weight: 600;
}

.navbar .nav-link:hover {
  transform: translateX(4px); /* leve desplazamiento hacia adelante */
  color: #8E1616; /* opcional */
}

/* línea dinámica tipo speed-line */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: #8E1616; /* o el color que prefieras */
  transition: left 0.25s ease;
}

.navbar .nav-link:hover::after {
  left: 0; /* entra rápido desde la izquierda */
}

.btn-wpp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  text-decoration: none;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform .2s ease;
}
.btn-wpp:hover {
  transform: scale(1.1);
  color: #fff;
}
section, header{overflow: hidden;}

/* Acordeón con fondo rojo oscuro */
.accordion-item {
  background-color: var(--brand-dark) !important;
  border: none;
}

.accordion-button {
  background-color: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.accordion-body {
  background-color: var(--brand-dark) !important;
  color: #fff !important;
}

/* elimina el color gris default del borde */
.accordion-button::after {
  filter: invert(1); /* flecha blanca */
}
.accordion-item {
  border: 1px solid white;
}

.faq{
  background-image: url("../img/fondo3-01.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.atencion{
  background-color: #B31312;
  color: white;
box-shadow: 10px 10px 31px -8px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 31px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 31px -8px rgba(0,0,0,0.75);
}
.atencion p{
  color: white;
}
.links{
  color: white;
  transition: 0.3s;
  font-weight: 600;
  text-decoration: none;
}

.links:hover{
  color: #000000;

}

.logo{
  width: 200px;
}