/* apply a natural box layout model to all elements, but allowing components to change */
:root {
  --primario: #ffc107;
  --secundario: #0097a7;
  --oscuro: #212121;
  --gris: #757575;
  --barra-fija: #dcd9d4;
  --tvrojo: rgb(237, 28, 36);
  --tvazul: rgb(47, 44, 222);
  --tvamarillo: rgb(247, 225, 22);
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    radial-gradient(
      at 50% 0%,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(0, 0, 0, 0.5) 50%
    );
  background-blend-mode: soft-light, screen;

  --anchopantalla: 1200px;
}
* {
  margin: 0;
  padding: 0;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
img {
  max-width: 100%;
}
header {
  background-color: var(--barra-fija);
  color: var(--oscuro);
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 6rem;
  z-index: 90;
}

#btn-menu {
  display: none;
}

header label {
  font-size: 3rem;
  cursor: pointer;
  display: none;
  padding: 1rem;
}

.menu ul {
  background-color: var(--barra-fija);

  display: flex;
  list-style: none;
}
/* mio */
.menu {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  right: 30px;
}
/* mio 2*/
.menu ul ul {
  display: none;
}
/* mio */
.logo-hora {
  text-align: center;
  display: block;
  padding: 7px 0 0 2rem;
  color: var(--oscuro);
  line-height: 0.9;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
}
.logo-hora p {
  font-size: 2.6rem;
  color: var(--primario);
}
.logo-telefono {
  text-align: center;
  display: block;
  padding: 9px 2rem 0 1rem;
  color: var(--oscuro);
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 2rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0 1rem 1rem 0;
}
.logo-telefono:hover {
  background-color: rgba(0, 0, 0, 0);
}
.logo-telefono a {
  text-decoration: none;
}

.logo-telefono p {
  color: var(--secundario);
}
.btn-menu-div {
  display: flex;
  justify-content: flex-end;
  padding: 0.18rem;
  color: var(--oscuro);
}
/* mio 2*/
.menu a {
  display: block;
  padding: 2.1rem 1rem;
  color: var(--oscuro);
  text-decoration: none;
}
.menu a:hover {
  background: rgba(0, 0, 0, 0.3);
}
.menu a span {
  margin-left: 1rem;
}
.menu ul li:hover ul {
  display: block;
  position: absolute;
}
/* Responsive <768px */
@media (max-width: 768px) {
  header label {
    display: block;
    right: 0;
  }
  .btn-menu-div {
    width: 100%;
  }
  .menu {
    justify-content: space-between;
    position: absolute;
    top: 6rem;
    left: 0;
    width: 100%;
    transform: translateX(-100%);
    transition: all 0.5s;
  }
  .menu ul {
    display: block;
    width: 100%;
  }
  .menu ul a {
    padding: 1.2rem 2rem;
  }
  .menu ul li:hover ul {
    display: none;
    position: static;
  }

  .menu a span {
    position: absolute;
    right: 2rem;
  }

  #btn-menu:checked ~ .menu {
    transform: translateX(0%);
  }
  .menu ul ul {
    background: rgba(0, 0, 0, 0.5);
  }
  .menu ul ul a {
    padding: 1rem 4rem;
  }
}
/*fin Responsive <768px */
/* Hero */
.hero {
  margin-top: 6rem;
  background-image: url(../img/heroe-negro-450x1350\ -\ copia.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 45rem;
}
.contenedor-hero {
  height: 100%;
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.contenedor-hero i {
  font-size: 2rem;
  color: #fad567;
}
.logo {
  grid-row: 1/2;
  grid-column: 1/2;
  justify-content: left;
}
.logo img {
  padding-top: 2rem;
  padding-left: 2rem;
  width: 20rem;
}
.servicio {
  grid-row: 1/2;
  grid-column: 2/5;
  text-align: center;
  font-weight: 700;
}
.servicio h1 {
  padding-top: 2rem;
}
.municipio1 {
  font-size: 2.5rem;
  grid-row: 2/3;
  grid-column: 3/4;
  text-align: center;
}
.municipio1 i {
  line-height: 2;
  font-size: 5rem;
  color: var(--primario);
}
.municipio2 {
  grid-row: 2/3;
  grid-column: 2/3;
  text-align: right;
}
.municipio3 {
  grid-row: 3/4;
  grid-column: 2/3;
  text-align: center;
}
.municipio4 {
  grid-row: 2/3;
  grid-column: 4/5;
  text-align: right;
}
.municipio5 {
  grid-row: 3/4;
  grid-column: 4/5;
  text-align: left;
}
.municipio6 {
  grid-row: 2/3;
  grid-column: 4/5;
  text-align: center;
  line-height: 12;
}
.municipio7 {
  grid-row: 2/3;
  grid-column: 2/3;
  text-align: left;
  line-height: 10;
}
.municipio8 {
  grid-row: 1/2;
  grid-column: 3/4;
  text-align: center;
}
.contactanos {
  grid-row: 3/4;
  grid-column: 3/4;
  text-align: center;
}
.boton {
  background-color: var(--secundario);
  padding: 1rem 1rem;
  text-decoration: none;
  display: inline-block; /* para poder utilizar margenes  */
  margin-top: 1rem;
  border-radius: 0.5rem;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2.2rem;
  border: none;
}
.boton:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.abajo {
  display: flex;
}
.cel-img i {
  color: #15ff00;
  font-size: 5rem;
  padding: 0 1rem 0 0rem;
}
.cel-num {
  padding-top: 0.4rem;
}
.boton p {
  font-size: 2rem;
  font-weight: 400;
}
boton:hover {
  cursor: pointer;
}
/** Fin Hero **/
/** Inicio Hero Mq**/
@media (max-width: 768px) {
  .contenedor-hero {
    grid-template: inherit;
    font-size: 1.2rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .contenedor-hero i {
    font-size: 1.6rem;
    color: #a08a4a;
  }
  .cel-img i {
    color: #15ff00;
    font-size: 5rem;
  }
  .logo {
    grid-row: 1/3;
    grid-column: 1/4;
    text-align: center;
  }
  .logo img {
    width: 15rem;
  }
  .servicio {
    grid-row: 2/3;
    grid-column: 1/4;
    text-align: center;
    font-weight: 400;
  }
  .servicio h1 {
    padding-top: 0;
  }
  .municipio1 {
    font-size: 2.5rem;
    grid-row: 3/4;
    grid-column: 1/4;
    text-align: center;
  }
  .municipio1 i {
    font-size: 3rem;
    color: var(--primario);
  }
  .municipio2 {
    grid-row: 2/3;
    grid-column: 1/2;
    text-align: right;
  }
  .municipio3 {
    grid-row: 4/5;
    grid-column: 1/2;
    text-align: left;
    padding-left: 2rem;
  }
  .municipio4 {
    grid-row: 2/3;
    grid-column: 3/4;
    text-align: right;
    padding-right: 2rem;
  }
  .municipio5 {
    grid-row: 4/5;
    grid-column: 3/4;
    text-align: left;
  }
  .municipio6 {
    grid-row: 3/4;
    grid-column: 3/4;
    text-align: center;
    line-height: 0;
  }
  .municipio7 {
    grid-row: 3/4;
    grid-column: 1/2;
    text-align: left;
    line-height: 0;
  }
  .municipio8 {
    grid-row: 1/2;
    grid-column: 2/3;
    text-align: left;
  }
  .contactanos {
    grid-row: 4/5;
    grid-column: 1/4;
    text-align: center;
  }
  .boton {
    padding: 0.5rem 1.5rem;
  }
}
/** Fin Hero Mq**/
/* inicio main */
.contenedor {
  max-width: var(--anchopantalla);
  margin: 3rem auto auto;
  width: 95%;
  background-color: #ffffff;
  padding: 1rem 3rem 3rem 3rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
}
h2 {
  margin: 0;
  text-align: center;
}
.contenedor-servicios {
  margin: 0;
}
.servicio-inicio {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.servicio-inicio p {
  font-size: 1.3rem;
  font-weight: 400;
  text-align: justify;
  margin: 1.5rem 0 0 0;
}
@media (min-width: 768px) {
  .contenedor-servicios {
    margin: 3rem;
    display: flex;
    justify-content: space-between;
  }
  .servicio-inicio {
    flex: 0 0 calc(25% - 3rem);
  }
  .servicio-inicio p {
    margin: 0;
  }
}
.iconos {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: var(--primario);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.iconos {
  font-size: 3rem;
}
/** fin  main **/

/* inicio footer */
.footer {
  background-color: var(--barra-fija);
  height: 14rem;
}
.contenedor-footer {
  display: flex;
  justify-content: space-between;
}
.nosotros {
  font-size: 1.4rem;
  padding: 0 0 2rem 6rem;
  flex-basis: calc(46% - 1.6rem);
}
.email {
  flex-basis: calc(27% - 1.6rem);
  text-align: center;
}
.logo-footer {
  flex-basis: calc(27% - 1.6rem);
  text-align: center;
}
.nosotros h2 {
  padding-top: 1rem;
}
.nosotros p {
  text-align: center;
}
.nosotros span {
  font-weight: bold;
}
.email {
  font-size: 1.2rem;
  padding-top: 3rem;
  padding-right: 6rem;
}
.email a {
  color: var(--oscuro);
  text-decoration: none;
}
.email a:hover {
  color: rgba(0, 0, 0, 0.3);
}

.logo-footer img {
  padding-top: 0.4rem;
  padding-right: 10rem;
  height: 10rem;
}
.inferior {
  font-size: 1rem;
  height: 4rem;
  padding: 1rem;
  background: #bebebe;
  text-align: center;
}
@media (max-width: 768px) {
  .footer {
    height: 30rem;
    display: inline-block;
  }
  .contenedor-footer {
    flex-direction: column;
    align-items: center;
  }
  .nosotros {
    padding: inherit;
    font-size: 1.2rem;
  }
  .nosotros p {
    padding: 0 4rem 0 4rem;
  }
  .email {
    padding: inherit;
    padding-top: 1rem;
  }
  .logo-footer img {
    padding: inherit;
    height: 10rem;
  }
  .inferior {
    height: 4rem;
  }
}
/* Fin Footer */
/* Pagina Calentadores */
/* banner calentadores*/
.banner {
  background-color: var(--barra-fija);
  padding-top: 6rem;
  margin: 0;
  width: 100%;
  height: 400px;
  display: flex;
}
.banner img {
  flex-basis: 60%;
  object-fit: cover;
  margin: 0;
  clip-path: polygon(75% 0%, 90% 50%, 75% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.banner img:last-child {
  margin-left: -13.8%;
}
.banner-contenedor {
  position: absolute;
  color: #ffffff;
  left: 17rem;
}

.banner-contenedor strong {
  color: var(--primario);
}

.banner-contenedor h1 {
  position: absolute;
  width: 30rem;
  top: 0.5rem;
}
.banner-contenedor p {
  padding-top: 1rem;
  position: absolute;
  width: 30rem;
  top: 10rem;
}
@media (max-width: 768px) {
  .banner {
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .banner img {
    clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 7% 50%, 0% 0%);
  }
  .banner img:last-child {
    margin: inherit;
  }
  .banner-contenedor {
    left: 2.8rem;
  }
  .banner-contenedor h1 {
    margin: 0;
  }
  .banner-contenedor p {
    font-size: 1.4rem;
    padding-top: 2rem;
    width: 30rem;
    top: 6rem;
  }
  .servicio-calentador-img {
    padding-top: 2rem;
    text-align: center;
  }
  .banner-chimenea {
    font-size: 1.17rem;
  }
}
/*fin banner calentadores*/
/* calentadores servicio */
.servicio-calentador h3 {
  text-align: center;
  padding-bottom: 2rem;
}
.servicio-calentador {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.servicio-calentador p {
  font-size: 1.5rem;
  font-weight: 400;
}
.servicio-calentador-img img {
  border-radius: 3rem;
  height: 400px;
}

@media (min-width: 768px) {
  .contenido-servicio-calentador li {
    font-size: 1.6rem;
    line-height: 2.5;
  }
}
@media (min-width: 768px) {
  .contenedor-servicios {
    display: flex;
    justify-content: space-between;
  }
  .servicio-calentador {
    flex: 0 0 calc(60% - 3rem);
  }
}
/*inicio pagina calentador-mantenimiento */
.calentador-mantenimiento h2 {
  text-align: left;
  font-size: 1.8rem;
}
.calentador-mantenimiento p {
  text-align: justify;
  margin: 2rem;
}
.cel-img-otros i {
  color: #15ff00;
  font-size: 3.8rem;
  padding: 0 1rem 0 0rem;
}
.cel-num-otros p {
  margin: 0;
}
/*fin pagina calentador-mantenimiento */
/* inicio pagina calentador reparacion */
.calentador-reparacion {
  margin: 0 0 0 3rem;
}
.calentador-reparacion h3 {
  padding-top: 1rem;
}
.calentador-reparacion h4 {
  padding-top: 1rem;
}
.calentador-reparacion p {
  font-size: 1.7rem;
}
.center {
  text-align: center;
}
.center p {
  font-weight: bold;
}
.calentador-reparacion ul {
  font-size: 1.4rem;
}
.calentador-reparacion ul ul {
  font-size: 1.2rem;
}
/* fin pagina calentador reparacion */
/* inicio pagina refrigeracion-instalacion */
.lavadora-instalacion {
  margin: 0 0 0 3rem;
}
.lavadora-instalacion h3 {
  padding-top: 1rem;
}
.listado-inferior li {
  list-style: square;
}
/* fin pagina lavadora-instalacion */
/* inicio pagina lavadora-mantenimiento */
.lavadora-mantenimiento p {
  padding: 1rem 3rem;
}
/* fin pagina lavadora-mantenimiento */
/* fin pagina lavadora-reparacion */
.lavadora-reparacion p {
  text-align: justify;
  padding: 0.8rem 3rem;
}
.lavadora-reparacion p span {
  color: var(--secundario);
  font-size: 1.6rem;
}
/* fin pagina lavadora-reparacion */
/* inicio pagina instalacion lavadora */
@media (max-width: 768px) {
  .refrigeracion h1 {
    font-size: 2.5rem;
  }
}

.nevera-instalacion {
  margin: 3rem;
}
.nevera-instalacion li {
  padding: 1rem 1rem;
  list-style: square;
}
.nevera-instalacion p {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 700;
}

/* fin pagina instalacion lavadora */
.nevera-mantenimiento h4 {
  padding-bottom: 2rem;
}
.nevera-mantenimiento li {
  padding-bottom: 2rem;
  list-style: square;
}
/* inicio pagina refrigeracion-reparacion */
.refrigeracion-reparacion {
  margin: 1rem 3rem;
}
.refrigeracion-reparacion li {
  line-height: 1.5;
  list-style: square;
}
.refrigeracion-reparacion li:last-child {
  padding-bottom: 2rem;
}
/* inicio pagina electrodomesticos */
.servicio-electrodomesticos {
  width: 100%;
}
.servicio-electrodomesticos li {
  padding-bottom: 1rem;
  list-style: square;
  margin: 0 3rem;
}

/* fin pagina electrodomesticos */
/* inicio pagina garantia */
.iconos-garantia {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: var(--secundario);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 5rem;
}
.contenedor-garantia {
  max-width: var(--anchopantalla);
  margin: 3rem auto;
  width: 95%;
  background-color: #ffffff;
  padding: 1rem 3rem 3rem 3rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  text-align: center;
}

.contenedor-garantia i {
  padding: 1rem 1rem;
  font-size: 3rem;
}

.btn {
  width: 20%;
  text-align: center;
  padding: 0.5rem 0.5rem;
  margin-top: 1rem;
  color: var(--primario);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  flex: 0 0 100%;
  background-color: var(--secundario);
  border-radius: 10px;
  border: none;
  appearance: none;
}
.btn:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.campo {
  height: 4rem;
  width: 20%;
  border-radius: 10px;
  appearance: none;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
}
#factura::placeholder {
  color: var(--primario);
  text-align: center;
}

@media (max-width: 768px) {
  .btn {
    width: 90%;
  }
  .campo {
    width: 90%;
  }
  .servicio-inicio h3 {
    padding-top: 1rem;
  }
}
/* fin pagina garantia */
/* incio pagina contacto */
.contacto {
  margin-top: 6rem;
  background-image: url(../img/heroe-negro-450x1350\ -\ copia.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 47rem;
}
.contenedor-contacto {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.mapa {
  flex-basis: calc(50% - 1rem);
  text-align: center;
}
.formulario {
  flex-basis: calc(50% - 1rem);
  text-align: center;
  width: 90%;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding: 10px 20px;
}
.formulario h2 {
  color: #ffffff;
  padding: 1.5rem 1.5rem;
}
.formulario p {
  color: #ffffff;
  font-size: 1rem;
  padding-bottom: 1rem;
}
.formulario p span {
  color: rgb(255, 0, 0);
}
.formulario input,
textarea {
  width: 70%;
  margin-bottom: 20px;
  padding: 6px;
  border: none;
  border-radius: 5px;
}
.formulario textarea {
  min-height: 100px;
  max-height: 180px;
  max-width: 70%;
  min-width: 70%;
}
#boton {
  background-color: var(--secundario);
  cursor: pointer;
}
#boton:hover {
  background-color: rgba(4, 163, 163, 0.849);
}
.mapa h2 {
  color: #ffffff;
  padding: 1.5rem 1.5rem;
}
.mapa iframe {
  border-radius: 15px;
  width: 500px;
  height: 350px;
}

/* Estilo para el campo de respuesta del Captcha */
#captcha {
  width: 14%;
  margin-bottom: 20px;
  padding: 8px;
  border: none;
  border-radius: 5px;
  /* Agrega otros estilos específicos para el campo de Captcha aquí */
}
/* Estilos para la operación matemática */
.captcha-operation {
  text-align: center;
  font-size: 18px; /* Tamaño de fuente */
  font-weight: bold; /* Negrita, si lo deseas */
  border-radius: 5px;
  border: 2px solid red; 
  margin-left: 2px;
}
#operacion {
  
  color:var(--primario); /* Cambia el color del texto a naranja */
  padding: 6px;
  
}

@media (max-width: 768px) {
  .contacto {
    height: 72rem;
  }
  .contenedor-contacto {
    flex-direction: column;
  }
  .mapa {
    flex-basis: 0;
    text-align: center;
  }
  .mapa iframe {
    width: 300px;
    height: 200px;
  }
  .formulario {
    flex-basis: 0;
    text-align: center;
    width: 100%;
    margin: 0;
    border-radius: 0px;
    padding: 0px 0px;
  }
}

/* fin pagina contacto */

/* inicio pagina gracias */
.agradecimiento {
  margin-top: 6rem;
  background-image: url(../img/heroAgradecimiento.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 47rem;
}
@media (max-width: 768px) {
  .agradecimiento {
    margin-top: 6rem;
    background-image: url(../img/heroAgradecimiento768.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 38rem;
  }
}
/* fin pagina gracias */

/* inicio social bar */
.socialbar {
  position: fixed;
  right: 0;
  top: 14.5rem;
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 100;
}

.iconbar {
  margin-bottom: 0.3rem;
  width: 4rem;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  color: var(--barra-fija);
  text-decoration: none;
  padding: 1rem 1rem 1rem 1.5rem;
  display: flex;
  transition: all 0.3s;
}
/* .iconbar:first-child {
  border-radius: 2rem 0 0 0;
}
.iconbar:last-child {
  border-radius: 0 0 0 1rem;
} */
.iconbar:hover {
  padding-right: 6rem;
  border-radius: 1 0 0 1;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0.45);
}
.barfacebook {
  background: #2e406e;
}
.bartwitter {
  background: #339dc5;
}
.barinstagram {
  background: #c13584;
}
.barwhatsapp {
  background: #25d366;
}

@media (max-width: 768px) {
  .socialbar {
    top: 33.5rem;
  }
}

/* fin social bar */

/* inicio tarjeta digital */
.tarjeta-contenedor {
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  background-color: var(--barra-fija);
  padding-bottom: 1.5rem;
}
.tarjeta-imagen {
  flex-basis: calc(30%);
  margin: 0 auto;
  width: 90%;
  background-image: url(../img/heroe-negro-450x1350\ -\ copia.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
  border-radius: 1rem;
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

.tarjeta-texto {
  flex-basis: calc(70% - 1rem);
  background-color: var(--gris);
  width: 90%;
  margin: 0 auto;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}
.tarjeta-texto p {
  padding: 1.5rem 0 1rem 0;
  font-size: 1.3rem;
  font-weight: bold;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: var(--barra-fija);
}
.tarjeta-texto p span {
  font-size: 1.07rem;
}
.porta-imagen {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 3rem;
}
.porta-imagen p {
  font-size: 20px;
  color: var(--primario);
  width: 15rem;
  font-weight: bold;
}

.porta-imagen img {
  height: 5rem;
}

.tar-boton {
  width: 80%;
  height: 4rem;
  text-decoration: none;
  margin-top: 1rem;
  border-radius: 0.5rem;
  color: var(--barra-fija);
  font-weight: 700;
  font-size: 2.2rem;
  border: none;
  margin: 0.5rem auto 0.5rem auto;
  text-align: center;
  padding-top: 0.7rem;
}
.tar-boton:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.tarreparando {
  background: var(--oscuro);
}
.tarfacebook {
  background: #2e406e;
}
.tartwitter {
  background: #339dc5;
}
.tarinstagram {
  background: #c13584;
}
.tarwhatsapp {
  background: #25d366;
}
.porta-imagen h4 {
  color: white;
  font-weight: 400;
  font-size: 1rem;
}
.porta-imagen h5 {
  color: white;
  font-weight: 400;
  font-size: 1rem;
}
.porta-imagen a {
  color: white;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .tarjeta-imagen {
    width: 50%;
    flex-basis: calc(35%);
    
  }
  .tarjeta-texto {
    width: 50%;
    flex-basis: calc(65% - 1rem);
    
  }
  .tarjeta-texto p {
    padding: 1.5rem 0 1rem 0;
    font-size: 1.5rem;
  }
  .tarjeta-texto p span {
    font-size: 1.57rem;
  }
  .porta-imagen p {
    font-size: 26px;
    width: 25rem;
  }

  .porta-imagen img {
    height: 8rem;
  }
  .porta-imagen h4 {
    color: white;
    font-weight: 400;
    font-size: 1.5rem;
  }
  .porta-imagen h5 {
    color: white;
    font-weight: 400;
    font-size: 1.2rem;
  }
  .porta-imagen a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.2rem;
  }
}
/* fin tarjeta digital */

/* Acordeon */
.contenedor-acordeon {
  max-width: var(--anchopantalla);
  margin: 1rem auto;
  width: 95%;
  background-color: #ffffff;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  z-index: 1;
}

.ac-container label {
  padding: 0rem;
  position: relative;
  z-index: 20;
  display: block;
  cursor: pointer;
  color: var(--oscuro);
  letter-spacing: 1px;
  line-height: 33px;
  font-size: 1.2rem;
  background: #ffffff;
  border-radius: 1rem;
}
.ac-container label strong {
  margin-left: 2rem;
}
.ac-container label:hover {
  color: var(--secundario);
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover {
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3),
    0px 2px 2px rgba(0, 0, 0, 0.1);
}
.ac-container label:after,
.ac-container input:checked + label:hover:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 12px;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px dashed;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
.ac-container input:checked + label:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 12px;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px dashed;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
.ac-container input {
  display: none;
}
.ac-container article {
  background: #fff;
  margin-top: -1px;
  height: 80px;
  border-radius: 1rem;
  
  position: relative;
  z-index: 10;
  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container input:checked ~ article.ac-small {
  overflow: hidden;
  height: 0px;
}

.ac-small ul li {
  list-style-type: none;
}
.ac-small ul li a {
  font-size: 8px;
  color: #999;
  text-decoration: none;
  text-transform: capitalize;
  display: block;
  background: #ffffff;
}
.ac-small ul li a:hover {
  background: rgba(0, 0, 0, 0.3);
  color: var(--oscuro);
}

.contenedor-servicios-acordeon {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.servicio-inicio-acordeon {
  display: flex;
  align-items: center;
  flex: 0 0 calc(50% - 0.5rem);
  justify-content: center;
}
.servicio-inicio-acordeon p {
  font-size: 1rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .contenedor-servicios-acordeon {
    justify-content: space-between;
    margin: 1rem 5rem 1rem 5rem;
  }
  .servicio-inicio-acordeon {
    flex: 0 0 calc(25% - 1rem);
  }
  .servicio-inicio-acordeon p {
    margin: 0;
  }
  
  .ac-small ul li a {
    font-size: 12px;
    color: #999;
    text-decoration: none;
    text-transform: capitalize;
    display: block;
    background: #ffffff;
  }
}

/* Fin Acordeon */

/* inicio contenedor navegavle */
.contenedor-nav {
  max-width: var(--anchopantalla);
  margin: 1rem auto;
  width: 95%;
  background-color: #ffffff;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
}

ul.navegable {
  list-style: none;
  background-color: var(--barra-fija);
  border-radius: 1rem;
}

ul.navegable li {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
}

ul.navegable li a {
  padding: 10px 0px;
  width: 22%;
  color: var(--oscuro);
  text-decoration: none;
  text-align: center;
}
ul.navegable li a:hover {
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
}
ul.navegable i:hover {
  color: var(--barra-fija);
}
ul.navegable li a .navegable-text {
  margin-left: 7px;
}
ul.navegable li a .navegable-text1 {
  margin-left: 5px;
}
.active {
  background-color: var(--secundario);
  border-radius: 1rem;
}
.active i {
  color: var(--barra-fija);
}
.secciones {
  margin: 0px auto;
  width: 90%;
}
.secciones h3 {
  margin: 1rem auto 1rem;
  text-align: left;
}
.seccion-cont {
  display: flex;
  justify-content: space-between;
  height: 260px;
  margin-bottom: 1rem;
}
.seccion-cont p {
  margin: 0rem 2rem 2rem 0rem;
  flex-basis: calc(60% - 1rem);
  font-size: 1.35rem;
}
.seccion-cont p strong {
  color: var(--primario);
}
.seccion-cont p span {
  font-size: 1.5rem;
  font-weight: bold;
}
.llamanos {
  display: block;
  color: var(--secundario);
  text-align: center;
}
.seccion-cont img {
  flex-basis: calc(40% - 1rem);
  margin-bottom: 2rem;
  border-radius: 1rem;
  border: var(--secundario) 2px solid;
}

@media screen and (max-width: 1250px) {
  ul.navegable li a .navegable-text {
    display: none;
  }
  ul.navegable li a .navegable-text1 {
    margin-left: 10px;
  }
  .seccion-cont {
    height: 400px;
  }
}
@media screen and (max-width: 950px) {
  .seccion-cont {
    height: 550px;
  }
}

@media screen and (max-width: 768px) {
  ul.navegable li {
    width: 100%;
    justify-content: space-between;
  }
  ul.navegable li a .navegable-text1 {
    margin-left: 5px;
  }
  .seccion-cont {
    flex-direction: column;
  }
  .seccion-cont {
    display: flex;
    justify-content: space-between;
    height: 700px;
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 360px) {
  ul.navegable li a .navegable-text1 {
    display: none;
  }
}

/* fin contenedor navegavle */

/* inicio Televisores marcastv-nav */



  .marcastv-nav2{
  display: flex;
  justify-content: space-between;
    }
    
  .marcastv-nav2 img{
  margin: 1rem 0rem 1rem 1rem;
  
  }
  /* Responsive televisores nav marcas */

    @media screen and (max-width: 1250px) {
      .marcastv-nav2 img{
        margin: 1rem 0rem 1rem 0rem;
        width: 9%;
      }
    }
    @media screen and (max-width: 950px) {
    .marcastv-nav2 img{
      margin: 1rem 0rem 1rem 0rem;
      width: 9%;
    }
    }
    @media screen and (max-width: 768px) {
    .marcastv-nav2 img{
      margin: 1rem 0rem 1rem 0rem;
      width: 15%;
    }
    }
    @media screen and (max-width: 360px) {
    .marcastv-nav2 img{
      margin: 1rem 0rem 1rem 0rem;
      width: 15%;
    }
    }
  /* fin responsive televisores nav marcas */


.tvcolor{
  
  border: 22px solid var(--tvrojo);
  border-radius: 10px;
  background-color: var(--tvrojo);
  color: white;
  
}
.tvcolor1{
  border: 10px solid var(--tvazul);
  border-radius: 10px;
  background-color: var(--tvazul);
  
}
.tvcolor2{
  border: 5px solid var(--tvamarillo);
  border-radius: 10px;
  background-color: var(--tvamarillo);
  color: var(--tvrojo);
}
/* fin Televisores marcastv-nav */

/* inicio medios de pago */
.contenedor-pagos {
  max-width: var(--anchopantalla);
  margin: 1rem auto auto;
  width: 95%;
  background-color: #ffffff;
  padding: 1rem 3rem 1rem 3rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
}
.contenedor-pagos h4{
  margin: 0 0 0 0;
  text-align: center;
}
.mediospago{
  display: flex;
  justify-content: space-between;
}

/* inicio medios de pago responsive */
@media screen and (max-width: 1250px) {
  .mediospago img{
    margin: 1rem 0rem 1rem 0rem;
    
  }
}
@media screen and (max-width: 950px) {
  .mediospago{
    display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   grid-column-gap: 20px;
   
  }
}
@media screen and (max-width: 768px) {
  .mediospago{
    display: grid;
   grid-template-columns: repeat(3, 1fr);
   align-items: center;
   grid-column-gap: 20px;
   
  }
}
@media screen and (max-width: 360px) {

  .mediospago{

   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   grid-column-gap: 20px;
  }
  
}
/* fin medios de pago responsive */
/* fin medios de pago */

/* inicio electricidad */
.conten-elec {
  display: flex;
  max-width: var(--anchopantalla);
  margin: 1rem auto;
  width: 95%;
  background-color: #ffffff;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 21px -9px rgba(0, 0, 0, 0.75);
}
.lista-electricidad{
  list-style: none;
  color:var(--oscuro);
  font-weight: bold;
  
}
.lista-electricidad span{
  color:var(--secundario);
  
}
.lista-electricidad-anidada{
  
  padding-left: 30px; /* Ajusta el valor de acuerdo a tu diseño */
}
.lista-electricidad h4{
  color:var(--primario);
  text-align: center;
  font-size:larger;
}
.h2-electricida{
  padding: 12px;
  border-radius: 10px;
  background-color: var(--barra-fija);
}
.contenedor-elec{
  display: flex;
  text-align: center;
    
}
.contenedor-elec div{
  flex: 1 0 20%; /* Ajusta el ancho de cada elemento */
  margin: 1rem;
  border: 2px solid var(--secundario);
  border-radius: 10px;
}
.contenedor-elec img{
  margin: 1rem auto;
  border: 2px solid var(--primario);
  border-radius: 10px;
}
@media (max-width: 768px){

  .contenedor-elec {
    display: flex;
    flex-direction: column;
  }

}
/* fin electricidad */

/* Comentarios */
/* Estilos para la sección de comentarios */
.comentarios {
  padding: 1em;
  margin: 6rem auto 1rem auto; /* Margen automático para centrar */
  width: 95%; /* Ancho del 90% en celulares */
  max-width: 600px; /* Ancho máximo para evitar que se extienda demasiado en pantallas grandes */
  display: flex; /* Utilizamos flexbox */
  flex-wrap: wrap; /* Permitimos que los elementos se envuelvan si es necesario */
  justify-content: center; /* Centrar elementos horizontalmente */
  background-color: var(--barra-fija);
  border-radius: 1rem;
  
}
/* Estilo para el párrafo del sistema de calificación */
.comentarios p {
  margin: 10px auto; /* Margen exterior */
  text-align: justify; /* Justificar el texto para una mejor lectura */
  font-size: 16px; /* Tamaño de fuente */
  line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
  color: #555; /* Color de texto */
}
.comentarios h3 {
  margin: 10px auto;
  text-align: center;
  font-size: 1.5em; /* Tamaño de fuente más grande para el título */
}
.comentarios textarea {
  height: 100px;
  resize: none; /* Evitar que se redimensione el textarea */
}


.calificacion {
  display: flex;
  flex-direction: column; /* Alinear elementos en columna */
  align-items: center; /* Centrar elementos horizontalmente */
  width: 100%;
}

.calificacion input[type="text"],
.calificacion select,
.comentarios textarea,
.comentarios button,
.rating {
  width: calc(100% - 20px); /* Ancho completo menos el espacio para el borde */
  margin-bottom: 5px; /* Espaciado inferior entre elementos */
  padding: 10px; /* Espaciado interno */
  border: 1px solid #ccc; /* Borde */
  border-radius: 5px; /* Bordes redondeados */
  box-sizing: border-box; /* Incluir el borde en el ancho total */
  font-family: Arial, sans-serif;
}
.comentarios button {
  background-color: var(--secundario);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px; /* Espaciado superior */
}

.comentarios button:hover {
  background-color: #0056b3;
}

.rating {
  display: flex;
  direction: rtl;
  justify-content: center; /* Centrar las estrellas horizontalmente */
  align-items: center; /* Centrar las estrellas verticalmente */
  margin-bottom: 10px; /* Espaciado inferior entre elementos */
}

.rating > input {
  position: absolute; /* Ajustar posición absoluta */
  opacity: 0; /* Hacer el input invisible */
  pointer-events: none; /* Deshabilitar eventos de puntero */
  height: 0; /* Reducir altura para que no afecte al diseño */
  width: 0; /* Reducir anchura para que no afecte al diseño */
}

.rating > label {
  display: inline-block;
  width: 1.1em;
  height: 1.1em; /* Tamaño para asegurar un cuadro cuadrado para la estrella */
  font-size: 2.5em;
  color: var(--gris);
  cursor: pointer;
  text-align: center; /* Alinear el texto dentro del label */
}

.rating > label::before {
  content: "\2605"; /* Código Unicode para la estrella */
}

/* Establece el color amarillo solo para las estrellas marcadas por defecto */
.rating > input:checked ~ label:before {
  color: var(--primario);
}

/* Cambia el color a amarillo cuando se hace hover sobre las estrellas */
.rating > label:hover:before,
.rating > label:hover ~ label:before {
  color: yellow;
}

@media screen and (min-width: 768px) {
  /* Media query para pantallas grandes */
  .comentarios {
    width: 50%; /* Ancho del 50% en pantallas grandes */
    margin-top: 4rem; /* Reducir el margen superior */
   
  }

  .calificacion input[type="text"],
  .calificacion select,
  .comentarios textarea,
  .comentarios button,
  .rating {
    width: calc(50% - 10px); /* Ancho del 50% menos el espacio para el borde */
    margin-right: 10px; /* Espacio derecho entre elementos */
  }

  .comentarios textarea {
    height: 120px; /* Aumentar la altura del textarea en pantallas grandes */
  }
}
/* Estilo para el campo de fecha y hora */
#datetime {
  
  text-align: center;
  pointer-events: none; /* Deshabilitar interacciones del ratón */
  user-select: none; /* Deshabilitar la selección de texto */
}
/* Estilo para quitar el borde de foco */
#datetime:focus {
  outline: none;
}


/* Contenedor de comentarios */
.comen_mostrar {
  padding: 1em;
  margin: 1rem auto; /* Margen automático para centrar */
  width: 95%; /* Ancho del 95% en celulares */
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* Una columna por defecto */
  background-color: #f9f9f9;
  border-radius: 5px;
}

/* Estilos para pantallas grandes */
@media (min-width: 768px) {
  .comen_mostrar {
    grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas grandes */
    max-width: 600px; /* Ancho máximo para evitar que se extienda demasiado en pantallas grandes */
  }
  
}

/* Cada comentario individual */
.putamadre {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los elementos horizontalmente */
  padding: 1rem;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tipo de servicio */
.putamadre p:first-child {
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

/* Calificación */
.putamadre p:nth-child(2) {
  color: #ffcc00;
  margin-bottom: 0.5rem;
}

/* Comentario */
.putamadre p:nth-child(3) {
  color: #555;
  margin-bottom: 0.5rem;
}

/* Imagen del servicio */
/* Imagen del servicio */
.putamadre img {
  width: 120px; /* Ancho fijo de 120px */
  height: 120px; /* Alto fijo de 120px */
  border-radius: 50%; /* Hacer la imagen circular */
  object-fit: cover; /* Asegurar que la imagen cubra el contenedor sin distorsión */
  margin-bottom: 0.5rem;
}

/* Fecha de creación */
.putamadre p:last-child {
  font-size: 0.875rem;
  color: #999;
}

/* Estilos para el comentario más reciente */
.putamadre.nuevo {
  border-color: var(--primario);
  background-color: #fff8e1;
  position: relative;
}

.putamadre.nuevo::after {
  content: "Nuevo";
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--primario);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1.2rem;
}


/* Estilos para la calificación en estrellas */
.stars {
  display: inline-block;
  direction: rtl;
  unicode-bidi: bidi-override; /* Necesario para RTL */
}

.stars > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.stars > label {
  display: inline-block;
  width: 1.1em;
  font-size: 2.5em;
  color: #ccc; /* Color predeterminado para las estrellas */
  cursor: default; /* Cambiado a cursor predeterminado */
  text-align: center;
}

.stars > label::before {
  content: "\2605";
}

/* Cambiar color a amarillo para estrellas marcadas */
.stars > input:checked ~ label:before {
  color: #ffcc00; /* Color amarillo para estrellas marcadas */
}

/* Estilos adicionales para el diseño de comentarios */
.comen_mostrar {
  margin-top: 0px;
}

.putamadre {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.putamadre p {
  margin: 5px 0;
}

.putamadre img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.nuevo {
  border: 2px solid #ffcc00; /* Borde amarillo para el comentario más nuevo */
}

/* Estilos para las estrellas de calificación */
.stars {
  display: inline-block;
  font-size: 24px; /* Tamaño de las estrellas */
}

.star {
  color: #ccc; /* Color gris por defecto */
}

.star.filled {
  color: #ffcc00; /* Color amarillo para las estrellas llenas */
}

/* Estilos para el contenedor del filtro */
.filtro {
  margin: 0 auto; /* Esto centra el contenedor horizontalmente */
  width: fit-content; /* Ajusta el ancho al contenido */
  
}

/* Estilos para el formulario dentro del filtro */
.filtro form {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Estilos para el select del filtro */
.filtro select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
}

/* Estilos para el botón del filtro */
.filtro button {
  padding: 8px 15px;
  background-color: var(--secundario);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.filtro button:hover {
  background-color: #0056b3;
}

/* Estilos para el botón ir al inicio */
#scrollTopBtn {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    bottom: 20px; /* Distancia desde el fondo */
    right: 30px; /* Distancia desde la derecha */
    z-index: 99; /* Asegúrate de que esté encima de otros elementos */
    border: none; /* Sin borde */
    outline: none; /* Sin contorno */
    background-color: var(--secundario); /* Fondo negro */
    color: var(--oscuro); /* Texto blanco */
    cursor: pointer; /* Cursor en forma de mano */
    padding: 15px; /* Relleno */
    border-radius: 10px; /* Bordes redondeados */
    font-size: 18px; /* Tamaño del texto */
}

#scrollTopBtn:hover {
    background-color: var(--gris); /* Fondo más claro al pasar el ratón */
}