.contacto-bodegon {
   background-color: #f4e6d0;
   padding: 50px 20px
 }

 .titulo-seccion {
   font-family: 'Cabin', cursive;
   text-align: center;
   font-size: 2em;
   color: #8b0000;
   margin-bottom: 36px;
   letter-spacing: 1px
 }

 .intro-contacto {
   text-align: left;
   max-width: 950px;
   margin: 8px auto 20px;
   font-size: 1.25rem;
   line-height: 1.6;
   letter-spacing: .01em;
   color: #3b2a1a;
   font-family: "Lato", Georgia, serif
 }

 .intro-contacto ul {
   list-style: none;
   padding-left: 0;
   margin-top: 12px
 }

 .intro-contacto li {
   margin-bottom: 8px
 }

 .intro-contacto strong {
   color: #8b0000
 }

 .contacto-bodegon .intro-contacto,
 .contacto-bodegon .intro-contacto p,
 .contacto-bodegon .intro-contacto ul,
 .contacto-bodegon .intro-contacto li {
   font-family: "Lato", Georgia, serif;
   color: #3b2a1a;
   font-size: 1.25rem;
   line-height: 1.6;
   letter-spacing: .01em;
   text-align: left
 }

 .contacto-bodegon .intro-contacto ul {
   margin-top: .5rem
 }

 .intro-sucursales {
   max-width: 950px;
   margin: 8px auto 18px;
   font-family: "Lato", Georgia, serif;
   color: #3b2a1a;
   font-size: 1.25rem;
   line-height: 1.6;
   text-align: left
 }

 .datos-contacto {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 26px;
   margin-bottom: 60px;
   align-items: stretch;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto
 }

 .datos-contacto .bodegon-card {
   outline-offset: 4px
 }

 .dato {
   font-family: 'Lato', cursive;
   text-align: center;
   font-size: 1.12em;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   min-height: 160px;
   background: #fffaf5;
   border: 1.5px solid #8b0000;
   border-radius: 10px;
   padding: 14px 0;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
   transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease
 }

 /* reemplace i por svg por sacar boobstrps by poner svg */
 .dato span,
 .dato svg {
   display: block;
   font-size: 2.6rem;
   color: #8b0000;
   margin: 8px 0 12px 0;
   text-align: center;
   transition: transform 200ms ease, color 200ms ease
 }

 .dato a {
   display: inline-block;
   color: #8b0000;
   text-decoration: none;
   font-weight: 700;
   padding: 8px 0
 }

 .dato a:hover {
   color: #b22222
 }

 .dato:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
   border-color: #b22222;
   background-color: #ffffff
 }

 .dato:hover span,
 .dato:hover i {
   color: #b22222;
   transform: scale(1.05)
 }

 .sucursales {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 40px;
   margin-bottom: 70px;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto
 }

 .sucursal-card {
   background: white;
   padding: 20px;
   border: 3px solid #8b0000;
   border-radius: 8px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
 }

 .sucursal-card h3 {
   font-family: 'Cabin', cursive;
   font-size: 1.5em;
   text-align: center;
   color: #8b0000;
   margin-bottom: 15px
 }

 .sucursal-card iframe {
   width: 100%;
   height: 300px;
   border: none;
   border-radius: 6px
 }

 .newsletter-bodegon {
   text-align: center;
   background: #8b0000;
   color: white;
   padding: 40px 20px;
   border-radius: 10px
 }

 .newsletter-bodegon h3 {
   font-family: 'Cabin', cursive;
   margin-bottom: 10px;
   font-size: 26px
 }

 .newsletter-bodegon p {
   font-family: 'Lato', cursive;
   margin-bottom: 10px
 }

 .newsletter-bodegon input {
   padding: 12px;
   width: 260px;
   max-width: 100%;
   border: none;
   border-radius: 4px;
   margin-right: 10px
 }

 .newsletter-bodegon button {
   padding: 12px 25px;
   background: #d4af37;
   border: none;
   color: #000;
   font-weight: bold;
   cursor: pointer;
   border-radius: 4px;
   transition: .3s
 }

 .newsletter-bodegon button:hover {
   background: #f1c40f
 }

 .titulo-seccion img {
   width: 120px;
   height: auto;
   opacity: .9
 }

 .svg-izq {
   margin-right: 30px
 }

 .svg-der {
   margin-left: 30px;
   transform: scaleX(-1)
 }

 /* reemplace i por svg por sacar boobstrps by poner svg */
 .datos-contacto .dato span,
 .datos-contacto .dato svg {
   display: block;
   font-size: 2.6rem;
   color: #8b0000;
   margin-bottom: .35rem
 }

 @media (max-width:768px) {
   .titulo-seccion {
     font-size: 30px
   }

   .newsletter-bodegon input {
     margin: 0 0 10px 0;
     width: 100%
   }

   .newsletter-bodegon button {
     width: 100%
   }

   .titulo-seccion img {
     display: none
   }

   .contacto-bodegon .intro-contacto {
     font-size: 1.5rem;
     margin: 8px 14px 16px;
     line-height: 1.6;
     text-align: left
   }

   .contacto-bodegon .intro-contacto p {
     font-size: 1.5rem
   }

   .contacto-bodegon .intro-contacto li {
     font-size: 1.5rem
   }

   .intro-sucursales {
     font-size: 1.5rem;
     margin: 8px 14px 16px
   }
 }

 @media (max-width:520px) {
   .datos-contacto {
     grid-template-columns: 1fr;
     gap: 18px
   }

   /* reemplace i por svg por sacar boobstrps by poner svg */
   .dato span,
   .dato svg {
     font-size: 1.8rem
   }

   .contacto-bodegon .intro-contacto {
     font-size: 1.5rem;
     margin: 6px 12px 14px
   }

   .contacto-bodegon .intro-contacto li {
     font-size: .98rem
   }

   .intro-sucursales {
     font-size: 1.5rem;
     margin: 6px 12px 14px
   }
 }