@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap");

@font-face {
	font-family: 'Pristina';
	src: url('https://www.ledesmasoluciones.com.ar/construccionesReal/PRISTINA.TTF') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;

}
@font-face {
	font-family: 'MYRIAD PRO';
	src: url('https://www.ledesmasoluciones.com.ar/construccionesReal/MYRIAD PRO-REGULAR.OTF') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;

}

:root {
  --rosita: #fadbd6;
  --rosa: #e58d97;
  --marron: #59373b;
  --textoChico: 16px;

  --rosadito:#F8C2D9;
  --amarillo: #FDF4BD;
  --verdeAgua : #99D4BD;
  --celeste: #55C6CE;
  --violeta: #CEB7D9;
  --violetaFuerte :#C38BBD;
  --rojoFuerte: #EB1B25;

/* 
  --primary-50:#dce7f3; */
  --primary-50:#fff;
  --primary-100:#b3cbe3;
  --primary-200:#91B4D7;  
  --primary-300:#7ba9d8;    
  --primary-400:#578bbf;
  --primary-500:#2F71B3; 
  --celesteModaClub:#14B893;
  --primary-600:#1d65ae;
  --primary-700:#1263b4;
  --primary-800:#0b4f92;
  --primary-900:#031e38;
--celesteFondo:#ACC7CB;
  --negroModa:#030215;

  --negroConstruccion:#0d0d0d;
  --marronOscuro:#59270A;
  --naranja:#BF5315;
  --grisConstruccion:#8C7B65;
--arena:#ece2c6;
  --marronClaro:#A67C49;
  --cielo:#97C4CB;
  --cieloOscuro:#3188A0;
  --verdeAgua:#90C2A6;
  --verde:#2E8B57;

--primary-blue: #2F71B3; /* Azul principal (Construcciones Real) */
    --dark-blue: #21396C;  
    --dark-blueOs: #142447; 
   --light-blueCl: #62b2f0;
    --light-blue: #3B88C3;  /* Azul claro */
     --light-blueOs: #3071a2; 
    --accent-yellow: #FFC107; /* Amarillo de acento */
    --text-dark: #333;
    --text-secondary: #666;

--grisSuave:#C1CACC;
  --grisClaro:#D9D9D9;
  --grisOscuro:#A6A6A6;
  --grisFondo:#E6E6E6;
  --grisFondoOscuro:#C4C4C4;
  --grisFondoClaro:#F2F2F2;
  --grisFondoSuave:#F7F7F7;



}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
body {
  height: auto;
  margin: 0 auto;
  max-width: 1920px;
  background: linear-gradient(
    180deg,
    var(--primary-50) 70%,
    var(--primary-100) 100%
  );
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
}

/* Header */
header {
  background: #020024;
background: linear-gradient(90deg, var(--grisFondoClaro) 0%, var(--grisSuave) 35%, var(--grisOscuro) 100%);
  color: var(--primary-200);
  /* background-image: url('https://www.ledesmasoluciones.com.ar/Luxury/ladrilloGris.webp');
  background-repeat: repeat;
   background-color: rgba(0, 0, 0, 0.9); */
  
}

.nombreEmpresa{
  color: var(--negroConstruccion);
  font-size: 40px;
  font-family: "Pristina", regular;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-shadow: var(--naranja) 0px 0px 7px;
}
.resto{
  color: var(--negroConstruccion);
  font-size: 24px;
  font-family: "MYRIAD PRO", regular;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-shadow: var(--naranja) 0px 0px 7px;
}
.speech{
  color: var(--negroConstruccion);
  font-size: 32px;
  font-family: "Aoutoory Dragon", regular;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-shadow: var(--naranja) 0px 0px 7px;
}
#contenedorLogo {
 
  padding-top: 0px;
  height: 100px;
}

#contenedorLogo img {
  width: 250px;
  height:150px;

  margin-top: 10px;
  margin-bottom: 10px;
}

.separaporTexto{
  width: 75%;
  background: linear-gradient(
    30deg, var(--negroModa) 80%, transparent 20%  
      );
      color: var(--primary-50);
}

#logoA {
  margin: auto;
  width: 100%;
  height: 150px;
}

#textoLogo {
  color: var(--negroModa);
  margin: 0%;
}
#info {
 
  color: var(--primary-900);

  
}
#info h2 {
  font-family: "Roboto";
  margin: auto;
  animation: marquee 9.5s infinite linear;
  font-size: 18 px;
  text-shadow: 0px 0px 7px rgba(80, 5, 5, 0.6);
}
#info2 {
  background: rgb(250, 219, 214);
  background: linear-gradient(
    180deg,
    var(--primary-50) 0%,
    var(--primary-600) 100%
  );
  margin: 5px;
}
#info2 p {
  color: var(--rosita);
  font-family: "Courier New";
  font-weight: 400;
  font-style: normal;
  font-size: var(--textoChico);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--negroModa);
  text-shadow: 0px 0px 7px var(--primary-900);
  margin: auto;
}

@keyframes marquee {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
  }
}

.whatsapp {
  text-shadow: 6px 6px 31px var(--verde);


}
.whatsapp .bi {
  border: 5px solid var(--verde);
  border-radius: 50%;

  position:fixed;
  width:60px;
  height:60px;
  bottom:60px;
  right:40px;
  /* background: radial-gradient(circle, rgba(238,170,178,1) 57%, rgba(229,141,151,0.4654236694677871) 20%); */
  color:var(--verde);
  /* border-radius:50px; */
  text-align:center;
  /* align-items: center; */
   font-size:30px;
  z-index:100;

}
.inputMio {
  border: var(--primary-900) solid 1px;
  background-color: var(--primary-50);
  margin-top: 2%;
}

.inputBtonMio {
  border: var(--primary-900) solid 1px;
  background-color: var(--primary-100);
  margin-top: 2%;
}
.inputBtonMioX {
 
  background-color: var(--primary-100);
  margin-top: 2%;
}
.buscadorycarrito{
    display: flex;
    justify-content: center;
    align-items: center;

  flex-wrap: wrap;

  margin-bottom: -15px;
}
.navbar {

  padding-top: 3px; 
  padding-bottom: 3px;
}
.navbarMio {
  border: var(--grisOscuro) solid 3px;
  background-color: var(--grisFondo);
 
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 8px;

.categoriaBuscar{
  border-radius: 8px;
}
}
.navbarMio a{
  text-decoration: none;
  color: var(--negroConstruccion);
  font-size: 16px;
}

.botonNav{
  margin-top: 20px;
  font-family: pristina;
  font-size: 32px;
  text-decoration: none;
  color: var(--negroConstruccion);

}
/* .bi{
  color: var(--verde);
} */

.navbar-toggler-icon {
  width: 1rem;
  height: 1rem;
}


.logoCantidadPesos {
  text-decoration: none;
  color: var(--primary-50);
  text-align: start;
}
#usuarioIngresarCrear ul li a {
  color: var(--primary-900);
}
.row figcaption {
  margin-bottom: 0;
}
.row figure {
  margin-bottom: 0;
}
hr {
  height: 1px;
  box-shadow: 0px 0px 9px 2px var(--primary-900);
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

/* Fin header */

/* Inicio main */
#ContenedorCard {
  margin-top: 3%;
}
#ContenedorCard2 {
  margin-top: 3%;
}
.cardT {
  margin: auto;
  border: var(--primary-700) solid 3px;
  border-radius: 20px;
  box-shadow: 0px 0px 17px 7px  var(--primary-100);
  -webkit-box-shadow: 0px 0px 17px 7px var(--primary);
  -moz-box-shadow: 0px 0px 17px 7px var(--primary);
  background-color: var(--primary-50);



}

.card{
  margin: 0;
  padding: 0;

}

.fotoProductoCard{
  width: 275px;
  height: 310px;
  border-radius: 20px 20px 0px 0px;
}
.cardMio {
  width: 280px;
  margin-bottom: 4%;
}
.btonMio {
  color: var(--primary-900);
  border: var(--primary-900) solid 3px;
  background: linear-gradient(
    190deg,
    VAR(--primary-50) 0%,
    var(--primary-200) 100%
  );
}
.precioProducto {
  text-align: center;
  color: var(--rojoFuerte);
  font-size: 24px;

  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.spinner {
  margin: 30px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ccc;
  animation: spin 1.0s linear infinite;
  border-bottom-color: #614ad3;
}

@keyframes spin {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}
/* fin Main */
/* Inicio Footer */
footer {
 background-image: url('https://www.ledesmasoluciones.com.ar/Luxury/ladrilloGris.webp');
  background-repeat: repeat;
  	
  border-top: var(--primary-50) solid 2px;
  margin-top: 2%;
  color: var(--primary-50);
  font-size: 18px;
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
footer .row {
  margin-top: 2%;
}
.mapaUbicacion {
  border: var(--primary-900) solid 2px;
  margin-top: 1%;
  border-radius: 5%;
  width: 290px;
  height: 150px;
}

footer h4 {
  font-size: 12px;
  margin-top: 3%;
}



/* Fin footer */
.contenedorImgSomos{

  margin: auto;
  display: flex;
  justify-content: left;
  align-items: left;
  border-radius: 20px;
}
.imgSomos{
  width: 200px;
  height: 200px;

  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 20px;

}
.rowSomos{
  margin: auto;
  align-content: center;
  border-radius: 24px;
  /* background-color:var(--celesteFondo) ; */
  /* box-shadow: 0px 0px 4px 0px var(--grisOscuro); */
  margin-top: 10px;
  display: flex;
  flex-wrap: column;
  justify-content: center;


}
.textSomos{
  color: var(--primary-900);
  font-size: 18px;
  font-family: "interi", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
 margin-top: 10px;
  margin-bottom: 10px;
  align-content: center;
}


/* Inicio Modales  */

/* Modal Carrito */

.modalMio {
  border: var(--primary-900) solid 2px;
  background-color: var(--primary-50);
  color: var(--negroModa);
}

/* Modal Carrito Pago */
#modalPago .modal-header {
  text-align: center;
  background-color: var(--negroModa);

}

#modalPago .modal-title {
  margin: auto;
  color: var(--rosa);
  font-size: 24px;
}
#logoCarritoModal {
  margin: auto;
  width: 50%;
}
#totalPagarUltim {
  width: 100%;
  background-color: var(--marron);
  padding: 5%;
  border-radius: 6px;
}
#totalPagarUltim h5 {
  margin: auto;
  color: var(--rosa);
}

.card404{
  color: var(--negroModa);
  margin-top: 3%;
  
}
#logoNotResult {
 width: 35%;
 margin: auto;
}
.cardheader404{
  background-color: var(--primary-200);

}
.cardfooter404{  background-color: var(--primary-50);}

#dataFiscal{
  width: 150px;
  height: 150px;
  margin-top: 1%;
  border-radius: 5px;

}
#tarjetaMercadoPago{
  width: 290px;
  margin-top: 1%;
  border-radius: 5px;

}
.footerRegla{
  font-size: 10px;
}


/* paginacvion productos */
.pagination{
	background-color: black;
	color: white;
  border: var(--primary-900) solid 4px;

}
.pagination li{
	background-color: black;
	color: white;
 
  margin: 10px;

}

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width: 1200px) {
  .registro ul {
    font-size: 24px;
  }
}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (min-width: 992px) {
  .registro ul {
    font-size: 18px;
  }
}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width: 991px) and (min-width: 768px) {
  .registro ul {
    font-size: 14px;
  }

}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {
  ...;
} */

/* Extra small devices (phones, 600px and down) */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) {
  ...;
} */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {
  ...;
} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {
  ...;
} */


/* Sobrescribir/Usar los colores de marca con clases de Bootstrap */
.text-primary { color: var(--primary-blue) !important; }
.bg-primary { background-color: var(--primary-blue) !important; }
.btn-primary {
    --bs-btn-bg: var(--primary-blue);
    --bs-btn-border-color: var(--primary-blue);
    --bs-btn-hover-bg: var(--dark-blue);
    --bs-btn-hover-border-color: var(--dark-blue);
    --bs-btn-active-bg: var(--dark-blue);
    --bs-btn-active-border-color: var(--dark-blue);
}
.badge.bg-primary {
    background-color: var(--light-blue) !important; /* Usamos azul claro para el porcentaje */
}


/* Contenedor principal de la sección de etapas con imagen de fondo */
.construction-stages {
    position: relative;
    padding: 80px 0; /* Más padding para el contenido */
    color: var(--text-dark); /* Color de texto por defecto para la sección (cambiará en h2, p, etc.) */
    overflow: hidden; /* Para asegurar que el pseudo-elemento no se salga */
    background-color: #1a1a1a; /* Fondo de respaldo si la imagen no carga */
}

/* Pseudo-elemento para la imagen de fondo con opacidad */
.construction-stages::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ¡IMPORTANTE! Reemplaza con la ruta a tu imagen real */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Construction_site_in_San_Francisco%2C_California.jpg/1200px-Construction_site_in_San_Francisco%2C_California.jpg'); /* Imagen de ejemplo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2; /* AJUSTA ESTE VALOR: 0.1 (muy transparente) a 0.9 (casi opaco) */
    z-index: -1; /* Coloca la imagen de fondo detrás del contenido */
}

/* Título de la sección */
.construction-stages h2 {
    text-align: center;
    color: #FFFFFF; /* Texto blanco para el título principal */
    margin-bottom: 50px;
    font-size: 2.2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para que se lea mejor sobre la imagen */
}

/* Estilos de los iconos */
.stage-icon {
    font-size: 4em; /* Tamaño de los iconos de Font Awesome */
    color: var(--primary-blue); /* Azul principal de tu marca */
}

/* Estilos de los títulos dentro de las tarjetas */
.stage-card .card-title {
    color: var(--primary-blue);
    font-weight: bold;
    font-size: 1.6em;
}

.stage-card .card-subtitle {
    color: var(--text-secondary);
    font-size: 1.1em;
}

.stage-card .card-text {
    color: var(--text-secondary);
    font-size: 0.95em;
}

/* Estilos de las tarjetas Bootstrap */
.stage-card {
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco semitransparente para las tarjetas */
    border: none; /* Quita el borde por defecto de Bootstrap */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stage-card:hover {
    transform: translateY(-8px); /* Efecto al pasar el ratón */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; /* Más sombra al hover */
}

/* Estilos para el contenedor del valor total */
.total-value {
    background-color: var(--dark-blue) !important; /* Usamos el azul oscuro para el total */
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.total-value strong {
    color: var(--accent-yellow) !important; /* Amarillo para resaltar el 100% */
}

/* ------------------- ESTILOS DE LAS FLECHAS (RESPONSIVE) ------------------- */

/* Flechas para pantallas grandes (desktop): Horizontales */
@media (min-width: 992px) { /* A partir de 'lg' (large) en Bootstrap */
    .stage-card::after {
        content: '\f061'; /* Código Font Awesome para flecha a la derecha sólida */
        font-family: 'Font Awesome 6 Free'; /* Asegúrate que es la fuente correcta */
        font-weight: 900; /* Para que el icono sea sólido */
        position: absolute;
        right: -45px; /* Posiciona la flecha a la derecha de la tarjeta */
        top: 50%;
        transform: translateY(-50%);
        font-size: 3em; /* Tamaño de la flecha */
        color: var(--light-blue); /* Color de la flecha */
        z-index: 10;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    /* Ocultar la flecha en la última tarjeta para que no apunte a la nada */
    .stage-grid .col:last-child .stage-card::after {
        display: none;
    }
}

/* Flechas para pantallas pequeñas (móvil y tablet): Verticales */
@media (max-width: 991.98px) { /* Hasta 'lg' (large) en Bootstrap */
    .stage-card::after {
        content: '\f063'; /* Código Font Awesome para flecha hacia abajo sólida */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        bottom: -45px; /* Posiciona la flecha debajo de la tarjeta */
        left: 50%;
        transform: translateX(-50%);
        font-size: 3em;
        color: var(--light-blue);
        z-index: 10;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    /* Ocultar la flecha en la última tarjeta para que no apunte a la nada */
    /* Para pantallas más pequeñas, la última tarjeta de cada fila (según el breakpoint) no debería tener flecha */
    .stage-grid .col:nth-last-child(1) .stage-card::after, /* Oculta en la última de todas */
    .row-cols-md-2 .col:nth-last-child(2):nth-child(even) .stage-card::after { /* Oculta en la penúltima si es el final de una fila de 2 */
        /* Esta última regla es para casos específicos en los que la penúltima es el final de una fila en un breakpoint */
        /* Puede que necesites ajustar o añadir más reglas si hay saltos de línea inusuales. */
    }

    /* Más simple: Ocultar si la tarjeta es la última visible en su fila/layout */
    /* Para evitar flechas redundantes, podemos simplemente ocultar en la última tarjeta real en el HTML */
    .stage-grid .col:last-child .stage-card::after {
        display: none;
    }
}

 /* autorecibimos.whatsapp */

  .section-title {
            color: #bf5315; /* Naranja quemado para títulos */
            font-weight: 700;
            margin-bottom: 30px;
        }
          .img-conceptual {
            max-width: 100%;
            height: auto;
            border-radius:24px;
            box-shadow: 0 8px 8px var(--dark-blue);
        }
        .project-details, .construction-stage {
background-color: var(--arena);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px var(--marronClaro);
margin-bottom: 30px;
}
.stage-image {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
max-width: 50%;
height: auto;
}
.section-title {
color: #bf5315;
font-weight: 700;
margin-bottom: 20px;
}
.detail-label {
font-weight: 600;
color: #495057;
}
.carousel
.carousel-inner img {
width: 70%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* .carousel-control-prev, .carousel-control-next {
background: rgba(0, 0, 0, 0.5);
width: 5%;
} */
.carousel-indicators [data-bs-target] {
background-color: #bf5315;
}
.proyectos p{
  font-size: 48px;
  color: #495057;
  line-height: 1.6;
}
#proyectosHead{
  background-color: var(--primary-100);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 10px 2px 16px rgba(216, 197, 197, 0.1);
  margin-top: 10px;
  margin-bottom: 10px;
}
#proyectosHead h2 {
  color: #bf5315;
  font-weight: 700;
  margin-bottom: 20px;
}
#proyectosHead p {
  font-size: 18px;
  color: #495057;
  line-height: 1.6;
}
#final  {
  width: 70%;
  height: 40%;
  border-radius: 10px;
   align-items: center;
}
#final .carousel-item {
 
  justify-content: center;
  align-items: center;
}
.imgFinal{
 width: 50%;
  height: 30%;
  border-radius: 10px;

}


 .hero-section {
            background-color: #bf5315; /* Naranja quemado de tu paleta */
            color: #ffffff;
            padding: 80px 0;
            text-align: center;
        }
        .section-title {
            color: #bf5315; /* Naranja quemado para títulos */
            font-weight: 700;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }
        .payment-method-card {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .payment-method-card h3 {
            color: #0d0d0d; /* Negro para subtítulos */
            font-weight: 600;
            margin-bottom: 20px;
        }
        .btn-custom {
            background-color: #bf5315; /* Naranja quemado */
            color: #ffffff;
            border-color: #bf5315;
            transition: background-color 0.3s ease;
        }
        .btn-custom:hover {
            background-color: #a67c49; /* Marrón dorado para hover */
            border-color: #a67c49;
            color: #ffffff;
        }
        .autotransformacasa{
          width: 300px;
          height: 200px;
          border-radius: 20px;

        }
        .intro{

         background-color:var(--amarillo);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        @media only screen and (max-width: 600px) {
  #final  {
  width: 100%;
  height: 40%;
  border-radius: 10px;
   align-items: center;
} 
  #contenedorLogo img {
  width: 200px;
  height:100px;

  margin-top: 10px;
  margin-bottom: 10px;
}
  .registro ul {
    font-size: 14px;
  }
  #logoCarrito {
    font-size: 24px;
    background-color: var(--primary-50);
    border: var(--primary-900) solid 1px;
    border-radius: 5%;
    margin: auto;
    padding-top: 2px;
    padding-bottom: 5px;
    padding-right: 8px;
    padding-left: 8px;
  }
  h1{ font-size: 16px;}
.navbarMio ul li a{
  text-decoration: none;
  color: var(--marron);
  font-size: 18px;;
}
.navbar-brand{font-size: 14px;}
#logoNotResult {
  width: 70%;
  margin: auto;

 }

 .card404 {
  font-size: 14px;
 }
 .cardheader404  h1{
font-size: 26px;
 }
 .footerRegla{
  font-size: 8px;
 }
 footer h4{
  font-size: 12px;
  margin-top: 3%;
 }
 #logoA {
  margin: auto;
  width: 50%;
  height: 100px;
 
}
}
.btonFormasPago{
  margin-bottom: 10px;
}

.avalanTxt{
  color: var(--arena);
  font-size: 18px;
  font-weight: bold;
margin: auto;
  text-align: center;


}
.tituloRubro h2 {
  color: var(--primary-900);
  font-size: 24px;
  font-weight: bold;

}