body,
html {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

hr {
  /* max-width: 50px; */
  border-width: 1px;
  border-color: #f0ac44;
}

hr.light {
  border-color: rgba(255, 255, 255, 0.4);
}

a {
  color: #f0ac44;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

a:hover {
  color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

.bg-primary {
  background-color: #f0ac44 !important;
}
.bg-degradado {
  background-color: #f0ac44; 
  background-image: linear-gradient(to top, #e9e9e9, #959595);
}
.bg-dark {
  background-color: #1a1919 !important;
  color: #cfcfcf;
}
.bg-dark-deg {
  background-color: #70240d; 
  background-image: linear-gradient(to top, #50190f, #9b6514);
}
.bg-dark-deg a {
 color: #ffb9b1;
}
.text-faded {
  color: rgba(255, 255, 255, 0.7);
}
.bg-light {
  background-color: #e9e9e9 !important;
}

section { 
  padding: 8rem 0;
}

.section-heading {
  margin-top: 0;
  color: #f0ac44;
}

::-moz-selection {
  color: #fff;
  background: #212529;
  text-shadow: none;
}

::selection {
  color: #fff;
  background: #212529;
  text-shadow: none;
}

img::selection {
  color: #fff;
  background: transparent;
}

img::-moz-selection {
  color: #fff;
  background: transparent;
}


/* =========================================
   ANIMACIONES (Logo y Botones)
   ========================================= */

/* Transición suave para el logo al hacer scroll y las flechas del carrusel */
.navbar-brand img, .owl-prev, .owl-next {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* Transición suave para el cambio de color de los botones del menú al hacer scroll */
#mainNav .navbar-nav > li.nav-item > a.nav-link {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#mainNav {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgb(29, 29, 29));
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#mainNav .navbar-brand img {
  max-height:3rem;  
}

#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #e5e5e5;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
  color: #f0ac44;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
  color: #f0ac44 !important;
  background-color: transparent;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
  background-color: transparent;
}

@media (min-width: 992px) {
  #mainNav {
    border-color: transparent;
    /* Mantenemos el degradado inicial transparente por encima para que el texto resalte */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    /* Arrancamos con un color de fondo 100% transparente */
    background-color: rgba(25, 25, 25, 0);
    /* Le damos 0.4s para que la transición sea bien suave */
    -webkit-transition: background-color 0.4s ease-out, padding 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out, padding 0.4s ease-out;
    transition: background-color 0.4s ease-out, padding 0.4s ease-out;
  }
  
  #mainNav .navbar-nav > li.nav-item > a.nav-link {
    padding: 0.5rem 1rem;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
    color: #FFF;
    text-shadow: -1px 1px 2px #5d5252;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: rgba(255, 255, 255, 0.7);
  }
  
  /* ESTADO AL HACER SCROLL */
  #mainNav.navbar-shrink {
    border-bottom: 1px solid rgba(33, 37, 41, 0.1);
    /* En vez de meter otro linear-gradient, oscurecemos el fondo sólido con transparencia */
    background-color: rgba(20, 20, 20, 0.98); 
  }
  
  #mainNav.navbar-shrink img {
    max-height: 4rem;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
    color: #fff;
    text-shadow: none;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: #f0ac44;
  }
}

header.masthead {
  background-color:#dbdbdb;
}
.masthead .item {
  min-height: 650px;
}
@media (max-width: 768px) {
  .owl-nav .fa {
    font-size: 3em;
  }
}
/* -----------------------
        SLIDE
----------------------- */
.bg1 {
  background-image: url("../img/slide/bg1.jpg");
}
.bg2 {
  background-image: url("../img/slide/bg2.jpg");
}
.bg3 {
  background-image: url("../img/slide/bg3.jpg");
}
.bg4 {
  background-image: url("../img/slide/bg4.jpg");
}
.bg5 {
  background-image: url("../img/slide/bg5.jpg");
}
.bg6 {
  background-image: url("../img/slide/bg6.jpg");
}
.bg7 {
  background-image: url("../img/slide/bg7.jpg");
}
.bg8 {
  background-image: url("../img/slide/bg8.jpg");
}

.bg1,.bg2,.bg3,.bg4,.bg5,.bg6,.bg7,.bg8 {
  background-position: center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.owl-prev, .owl-next {
  position: absolute;
  top: 50%;
  margin-top: -45px;
  opacity: .5;
}

.owl-prev:hover ,
.owl-next:hover {
  opacity: 1;
}
.owl-nav .owl-prev{
  left: 20px;
}
.owl-nav .owl-next{
  right: 20px;
}
.masthead .owl-dots {
    z-index: 1;
    position: absolute;
    left: 50%;
    margin-left: -35px;
}
#owl-logo .owl-dots {
    margin: 3rem 0 0 0;
}
.owl-dots .owl-dot span {
	display: block;
	width: 11px;
	height: 11px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 20px;
	box-shadow: inset 0 0 2px rgba(0,0,0,0.4);
}
.owl-dots .owl-dot.active span {
	background: rgba(237, 190, 72, 0.8);
}
.owl-dots .owl-dot {
	display: inline-block;
	margin: 0px .3em;
}

#owl-carousel .fa {
  color: white;
    background:
    -webkit-linear-gradient(#fff,#fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  padding-left: 4px;
  margin-bottom:-2px;
}
#owl-carousel .btn-sm {
  padding: 8px 15px;
  background-color: rgb(240, 172, 68);
  transition: all 0.3s ease-in-out;
  color: #fff;
}
#owl-carousel .btn-sm:hover {
  transform: translateY(-5px) !important;
}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px;
}

header.masthead h1 {
  font-size: 2rem;
}

header.masthead p {
  font-weight: 300;
}

@media (min-width: 768px) {
  header.masthead p {
    font-size: 1.15rem;
  }
}

@media (min-width: 992px) {
  header.masthead, .masthead .item {
    height: 70vh;
    min-height: 600px;
    padding-top: 0;
    padding-bottom: 0;
  }
  header.masthead h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 4rem;
  }
}

/* =========================================
   SECCIÓN CATÁLOGOS (ACORDEÓN Y BOTONES)
   ========================================= */

#headingOI span, #headingPV span  {
  text-transform: uppercase;
  font-size: 1.7rem;
  font-weight: 150;
}

/* Animación de la flecha del Acordeón */
.accordion-btn .transition-icon {
  transition: transform 0.3s ease-in-out;
}

/* Gira la flecha cuando el desplegable ESTÁ ABIERTO */
.accordion-btn[aria-expanded="true"] .transition-icon {
  transform: rotate(180deg);
  color: #f0ac44 !important;
}

/* Estilo para quitar el outline azul por defecto de Bootstrap */
.accordion-btn:focus, .accordion-btn:hover {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/* --- Diseño de la Tarjeta del Catálogo --- */
.cat-card {
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* El cuadradito naranja con el ícono */
.cat-icon-box {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background-color: #f0ac44;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-right: 15px;
  border: 2px solid transparent; /* Preparado para la inversión */
  transition: all 0.3s ease;
}

/* Los textos de adentro */
.cat-text-box h5 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 2px;

}

/* --- ANIMACIÓN HOVER (Pasa el mouse) --- */
.cat-card:hover, .cat-card:focus {
  transform: translateY(-5px); /* Sube 5px */
  border-color: #f0ac44;       /* El borde se pone naranja */
  box-shadow: 0 10px 20px rgba(240, 172, 68, 0.15) !important; /* Sombra sutil naranja */
  text-decoration: none;
  background-color: white;
}

/* Inversión de color del ícono al hacer hover */
.cat-card:hover .cat-icon-box {
  background-color: transparent;
  color: #f0ac44;
  border-color: #f0ac44;
}

.service-box {
  max-width: 400px;
}

.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(240, 95, 64, 0.9);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  padding: 0 15px;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-box:focus {
  outline: none;
}

@media (min-width: 768px) {
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 16px;
  }
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 22px;
  }
}

.text-primary {
  color: #f0ac44 !important;
}
.fa{
  color: #f0ac44;
  background:
    -webkit-linear-gradient(#F0AC44,#33240B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn.btn-primary {
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  background-image: linear-gradient(to right, #f0ac44 0%, #040404 51%, #D99B3A 100%);
  background-size: 200% auto;
  z-index: 2;
  display: inline-block;
  transition: all 400ms linear;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 50px;
  border-radius: 5px;
  box-shadow: 0px 10px 30px 0px rgba(108, 29, 72, 0.32);
}
.btn.btn:hover{
    background-position: right center;
}

.btn-xl {
  padding: .5rem 2rem;
}

.btn-primary {
  background-color: #f0ac44;
  border-color: #f0ac44;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  background-color: #f0ac44 !important;
}

.btn-primary:active, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important;
}

footer {
  padding: 3rem;
}

/* fadeInUp
------------------------------------------- */

@-webkit-keyframes fadeInUp {
	0% {opacity: 0;-webkit-transform: translateY(20px);transform: scale(1.1);}
	100% {opacity: 1;-webkit-transform: translateY(0);transform: scale(1.0);}
}

@keyframes fadeInUp {
	0% {opacity: 0;transform: translateY(20px);transform: scale(1.1);}
	100% {opacity: 1;transform: translateY(0);transform: scale(1.0);}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

/* ----------------------
    Formulario
-------------------------    */
.form-control {
    border: 1px solid #f0ac44;
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #f0ac44;
    box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.2);
}
/* do not group these rules */
*::-webkit-input-placeholder {
    color: #d0be9b !important;
    font-size:.85rem;
}

#marcas {
  padding-top: 2rem;
}
#marcas a:hover::after, #marcas a::after {
  position: absolute;
  font-family: FontAwesome;
  content: "\f064";
  font-size: 1.9rem;
  color: rgba(255, 255, 255, 0.5);
  width: 3.5rem;
  height: 3.5rem;
  border: solid 1px rgba(255, 255, 255, 0.2);
  padding: 0rem 0.6rem;
  border-radius: 50%;
}
#marcas a::after {
  bottom: 10%;
  left: 45%;
  opacity: 0;
  transform: scale(0.5, 0.5);
}
#marcas a:hover::after {
  bottom: 40%;
  left: 45%;
  opacity: 1;
  transform: scale(1, 1);
}
#marcas a img {
  opacity: 1;
  transform: scale(1, 1);
}
#marcas a:focus {
  outline: none;
}
#marcas a:hover img {
  opacity: .4;
  transform: scale(.8,.8);
}
#marcas a::after,
#marcas a img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#marcas .card {
    background-color: #f8f8f8;
}
button.btn.btn-outline-light.btn-sm {
    color: #f0e7dd;
    /* border-color: bisque; */
}
button.btn.btn-outline-light.btn-sm:hover {
    background-color: #f0ac44;
}


.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}

.indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  left: 10%;
  margin-top: 5px;
  z-index: 2;
}
.indicator span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  animation: animate 1s linear infinite;
}
.indicator span:nth-child(1) {
  top: -25px;
  left: -25px;
  animation-delay: 0s;
}
.indicator span:nth-child(2) {
  top: -12px;
  left: -12px;
  animation-delay: 0.2s;
}
.indicator span:nth-child(3) {
  top: 0;
  left: 0;
  animation-delay: 0.4s;
}
.indicator span:nth-child(4) {
  top: 12px;
  left: 12px;
  animation-delay: 0.6s;
}
.indicator span:nth-child(5) {
  top: 25px;
  left: 25px;
  animation-delay: 0.8s;
}
@keyframes animate {
  0% {
    border-color: #fddfbf;
    transform: translate(0, 0);
  }
  20% {
    border-color: #F0AC44;
    transform: translate(15px, 15px);
  }
  20.1%,
  100% {
    border-color: #e2cdaa;
  } 
}
/* =========================================
   TARJETAS DE CONTACTO (DETAIL CARDS)
   ========================================= */

.detail-card {
  background-color: rgba(255, 255, 255, 0.5); /* Fondo oscuro translúcido */
  border: 1px solid rgba(182, 182, 182, 0.57); /* Borde sutil */
  border-radius: 4px;
  padding: 30px 20px;
  height: 100%;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}


.detail-card:hover {
  transform: translateY(-5px) !important;
  background-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-5px); /* Pequeño salto hacia arriba */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 192, 146, 0.74);
}

.detail-icon {
  margin-bottom: 20px;
      width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-text {
  text-align: left;
}


.detail-text h5 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.detail-text p {
  line-height: 1.6;
  margin-bottom: 0;
}

.detail-text a {
  transition: color 0.3s ease;
}

.detail-text a:hover {
  color: #f0ac44 !important; /* Cambia al color de la marca en el hover */
}

#contact {
  padding-bottom: 0;
}

/* =========================================
   NUEVOS ESTILOS AGREGADOS (BALL ONE ONE-PAGE)
   ========================================= */

/* Posicionamiento de Botones en el Carrusel */
.masthead .item {
  position: relative;
}

.carousel-btn-container {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Ajustes para móviles en el Carrusel (baja el botón para no tapar imagen) */
@media (max-width: 768px) {
  .carousel-btn-container {
    top: 75%; 
  }
}

/* Filtro Grayscale para el Mapa */
.map-container iframe {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  border: 0;
  width: 100%;
  height: 400px;
  display: block;
}

/* Botón Flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 32px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  color: #fff;
  transform: scale(1.1);
}

/* Forzar color blanco en el icono de Whatsapp para sobreescribir el gradiente del template */
.whatsapp-float .fa.fa-whatsapp {
  background: none;
  -webkit-text-fill-color: initial;
  color: white;
}

/* Ajustes visuales para el modal */
.modal-header .close.text-white {
  text-shadow: none;
  opacity: 1;
}

/* =========================================
   ANIMACIÓN MENÚ HAMBURGUESA A "X"
   ========================================= */

/* Quitamos los bordes y sombras por defecto */
.custom-toggler {
  border: none;
  background: transparent;
  padding: 5px;
}

.custom-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Diseñamos las tres líneas (barras) */
.custom-toggler .icon-bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #f0ac44; /* Color fucsia/naranja de la marca */
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
}

/* Animación: Barra superior gira 45 grados hacia abajo */
.custom-toggler[aria-expanded="true"] .top-bar {
  transform: translateY(8px) rotate(45deg);
}

/* Animación: Barra del medio desaparece */
.custom-toggler[aria-expanded="true"] .middle-bar {
  opacity: 0;
}

/* Animación: Barra inferior gira 45 grados hacia arriba */
.custom-toggler[aria-expanded="true"] .bottom-bar {
  transform: translateY(-8px) rotate(-45deg);
}

/* =========================================
   EFECTO SUBRAYADO ANIMADO EN EL MENÚ
   ========================================= */

/* Le damos posición relativa al enlace para poder ubicar la línea adentro */
#mainNav .navbar-nav > li.nav-item > a.nav-link {
  position: relative;
}

/* Creamos la línea invisible por defecto (width: 0) */
#mainNav .navbar-nav > li.nav-item > a.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0px; /* Ajustá este valor si querés la línea más pegada o separada de la palabra */
  left: 1rem; /* Empieza exactamente donde arranca la palabra (respeta el padding de Bootstrap) */
  width: 0;
  height: 2px;
  background-color: #f0ac44; /* Color de la marca */
  transition: width 0.3s ease-in-out;
}

/* Hacemos que la línea crezca al hacer hover o al estar en la sección activa */
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover::after,
#mainNav .navbar-nav > li.nav-item > a.nav-link.active::after {
  width: calc(100% - 2rem); /* Ocupa el ancho total menos el padding de ambos lados */
}

/* =========================================
   ANIMACIÓN DEL MAPA Y LOS PINES
   ========================================= */

.map-animado-container svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.1));
}

/* Estado inicial de los pines */
.pin-animado {
  opacity: 0;
  /* La animación dura 0.6s, mantiene el estado final (forwards) */
  animation: dropBounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Efecto de caída con rebote */
@keyframes dropBounce {
  0% { 
    transform: translateY(-80px); 
    opacity: 0; 
  }
  50% { 
    opacity: 1; 
  }
  70% { 
    transform: translateY(10px); 
  }
  85% { 
    transform: translateY(-5px); 
  }
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

/* Efecto Hover: el pin salta un poquito si le pasás el mouse */
.pin-animado:hover {
  transform: translateY(-5px) scale(1.1);
  cursor: pointer;
  transition: transform 0.2s ease;
}
/* =========================================
   ETIQUETA "TEMP. ANTERIOR" AUTOMÁTICA
   ========================================= */

/* Seleccionamos el span dentro del botón, a partir de la segunda tarjeta (card) */
#accordionCatalogos .card:nth-of-type(n+2) .accordion-btn span::after {
    content: "TEMP. ANTERIOR";
    font-size: 10px;
    background-color: #f0ac44; /* Color naranja de la marca */
    color: #ffffff;
    padding: 2px 10px;
    border-radius: 20px; /* Bordes redondeados estilo pill */
    margin-left: 15px;
    vertical-align: middle;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid #f0ac44;
    line-height: 1.4;
}

/* Ajuste para que no se vea gigante en celulares */
@media (max-width: 576px) {
    #accordionCatalogos .card:nth-of-type(n+2) .accordion-btn span::after {
        display: block; /* Baja a una línea nueva si no hay espacio */
        margin-left: 0;
        margin-top: 5px;
        width: fit-content;
    }
}

/* =========================================
   ESTILOS SECCIÓN FORMULARIO (WADUD DESIGN)
   ========================================= */

.cta-title {
  font-weight: 100;
  text-transform: uppercase;
  color: #333;
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

/* Botón estilo bloque naranja */
.btn-form-cta {
  background-color: #f0ac44;
  color: #fff !important;
  padding: 18px 35px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0; /* Puntas rectas como en la imagen */
  display: inline-block;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 1px solid white;
  text-decoration: none !important;
}

.btn-form-cta:hover {
  background-color: #333; /* Cambia a oscuro al pasar el mouse */
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.cta-bajante {
  margin-top: 15px;
  text-transform: uppercase;
  color: #888;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Imagen en blanco y negro */
.cta-img-bw {
  height: 450px;
  object-fit: cover;
  filter: grayscale(100%);
  display: block;
  opacity: .7;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .cta-title {
    font-size: 2rem;
  }
  .cta-img-bw {
    height: 300px;
  }
}

.bg-white {
  background-color: #f6f6f6 !important;
}