/* styles.css */
body {
  font-family: Arial, sans-serif;
}


.navbar-nav > li > a {
    font-family: 'Museo Sans Rounded 700';
    color: #1c9337;
    font-size: 1.2em;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 2px;
    /*text-shadow: 0 1px 4px rgba(36, 234, 23, 1);*/
}

.btn-whatsapp {
	font-family: 'Museo Sans Rounded 700';
	color: #FFFFFF;
	font-size: 1.2em;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 2px;
}

.hero {
  background: #f5f5f5;
  color: #000072;
  background-image: url('../images/fondoportada.webp'); 
  background-size: cover;
  background-position: center;
}

.hero-text{
	text-align: center;
	margin: auto;
	font-family: 'Museo Sans Rounded 700';
	background-color: white;
}

.descripcion{
	text-align: left; 
	margin: 0 3em;
}

.idmascota{
	background-image: url('../images/fondoseccion.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	padding: 20px; color: #000072;
	font-family: 'Museo Sans Rounded 700';
}

img.iconos{
	height: 50px;
}

img.img-plaquitas{
	width: 100%;
}

@media (max-width: 450px) {
  .img-plaquitas {
    max-width: 360px;
  }
}

.precio{
	font-family: 'Museo Sans Rounded 700';
	color: #000072;
}

.precio-text{
	text-align: center;
	margin: auto;
	background-color: white;
}

.text-900{
	font-family: 'Museo Sans Rounded 900';
}

.precio-contenido{
	text-align: left;
	padding-left: 1.5em;
}
.wh-10{
	width: 10px;
	height: 10px;
}
.width-100{
	width: 100px;
}
.height-25{
	height: 25px;
}
.height-80{
	height: 80px;
}
.height-100{
	height: 100px;
}

.height-150{
	height: 150px;
}

.height-200{
	height: 200px;
}

.margin-pedido{
	margin-top: 1.5em;
}

.footer-list{
	padding: 0.7em 0 0;
}

.decoration{
	text-decoration: none;
}
.carac-img{
	max-width: 450px;
}

@media (max-width: 450px) {
  .carac-img {
    max-width: 380px;
  }
}

.comunidad{
	padding: 20px;
	background-color:#a9d8ea;
	color: #000072;
	font-family: 'Museo Sans Rounded 700';
}

.productos{
	color: #1c9337;
	font-family: 'Museo Sans Rounded 700';
	padding-bottom: 0px;
}

.faq{
	margin: auto 0;
}

.faq-color{
	color: #000072;
}

.derechos{
	border-top: 1px solid rgba(255, 255, 255, 0.38);
	padding-top: 2em;
	margin-top: 3em;
}

.footer-text{
	text-align: justify;
}


/* botón */

.flex {
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}


a.bttn {
  color:#fff;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
  border-radius: 18px;
}

a.bttn:hover,
a.bttn:focus {
  color: #1c9337;
}

a.bttn2 {
  color:#fff;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
  border-radius: 18px;
}

a.bttn2:hover,
a.bttn2:focus {
  color: #00a0d9;
}


.bttn {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  width: 270px;
  font-weight: bold;
  padding: 14px 0px;
  border: 3px solid #1c9337;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  animation: pulse-btn 2s infinite ease-in-out;
}

.bttn2 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  width: 350px;
  font-weight: bold;
  padding: 12px 0px;
  border: 3px solid #00a0d9;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  animation: pulse-btn 2s infinite ease-in-out;
}

.bttn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1c9337;
  opacity: 1;
  transition: 0.5s all ease;
  z-index: -1;
  transform: scaleX(1);
  transform-origin: center;
}

.bttn2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00a0d9;
  opacity: 1;
  transition: 0.5s all ease;
  z-index: -1;
  transform: scaleX(1);
  transform-origin: center;
}

.bttn:hover::before,
.bttn:focus::before {
  transform: scaleX(0);
  opacity: 0;
}

.bttn2:hover::before,
.bttn2:focus::before {
  transform: scaleX(0);
  opacity: 0;
}

.bttn:hover,
.bttn:focus {
  color: #fff;;
}

.bttn2:hover,
.bttn2:focus {
  color: #fff;;
}





/* botón */
/* prueba 
.feature-box {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  transition: 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

 prueba */

/* Prueba 2 
.feature-text {
  position: absolute;
  width: 160px;
  font-size: 0.9rem;
  color: #333;
}

.feature-text .dot {
  width: 10px;
  height: 10px;
  background-color: #ff7b00;
  border-radius: 50%;
  position: absolute;
  left: -15px;
  top: 5px;
  box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(0, 0, 0, 0.1);
}

 Ubicaciones específicas
.top-left {
  top: 5%;
  left: -5%;
}
.bottom-left {
  bottom: 5%;
  left: -5%;
}
.top-right {
  top: 5%;
  right: -5%;
}
.bottom-right {
  bottom: 5%;
  right: -5%;
}

 Línea con pseudo-elementos 
.feature-text::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -40px;
  width: 35px;
  height: 1.5px;
  background-color: #ff7b00;
}

 Prueba 2 */

/* Prueba 3 */

.feature-text {
  position: absolute;
  width: 160px;
  font-size: 0.9rem;
  color: #333;
}

.feature-text .dot {
  width: 10px;
  height: 10px;
  background-color: #ff7b00;
  border-radius: 50%;
  position: absolute;
  left: -15px;
  top: 5px;
  box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(0, 0, 0, 0.1);
}

.feature-text::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -40px;
  width: 35px;
  height: 1.5px;
  background-color: #ff7b00;
}

/* Posiciones */
.top-left {
  top: 10%;
  left: -15%;
}

.bottom-left {
  bottom: 10%;
  left: -15%;
}

.top-right {
  top: 10%;
  right: -15%;
}

.bottom-right {
  bottom: 10%;
  right: -15%;
}

@keyframes pulse-btn {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0% {
    r: 6;
    opacity: 1;
  }
  50% {
    r: 12;
    opacity: 0.6;
  }
  100% {
    r: 6;
    opacity: 1;
  }
}

.pulse {
  animation: pulse 1.5s infinite ease-in-out;
  transform-origin: center;
}

/* Prueba 3 */

section {
  padding-top: 60px;
  padding-bottom: 60px;
}

footer {
  font-size: 14px;
}