/* ============================================================================
   Subpage-body consistency — Farmacia Perú (formulamagistralcadiz.com)
   Brings the recreated subpage BODIES up to the homepage's polish using the
   site's OWN tokens (page-inner.css + round3). Loaded AFTER page-inner.css so
   scoped .fm-page rules win. Every rule is scoped to .fm-page, so the header,
   footer and the homepage (which use Elementor markup) are never affected.
   Brand: teal #1abc9c / teal-d #0e9e8a / ink #141414.
   ============================================================================ */

/* ---- fm-list: icon as a hanging marker instead of a non-wrapping flex row.
   Fixes the ~7px mobile horizontal overflow that appeared when an inline link
   inside a list item split the flex row and pushed the trailing word off-screen.
   Visually identical on desktop. -------------------------------------------- */
.fm-page .fm-list li{display:block;position:relative;padding:9px 0 9px 30px;}
.fm-page .fm-list li i{position:absolute;left:0;top:14px;margin:0;}

/* ---- CONTACTO: replace the plain info list + duplicate in-body form with a
   card grid + a full-width map, matching the card system used on the sibling
   subpages (teal top border, soft border, hover lift). The single working,
   backend-neutered contact form now lives only in the footer. --------------- */
.fm-page-contacto .fm-contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;margin:36px 0 0;
}
.fm-page-contacto .fm-cbox{
  background:#fff;border:1px solid #ececec;border-top:3px solid #1abc9c;
  border-radius:5px;padding:28px 22px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.fm-page-contacto .fm-cbox:hover{
  box-shadow:0 14px 34px rgba(26,188,156,.16);transform:translateY(-3px);
}
.fm-page-contacto .fm-cbox .fm-ic{font-size:25px;color:#1abc9c;margin-bottom:12px;line-height:1;}
.fm-page-contacto .fm-cbox h3{
  margin:0 0 7px;font-family:"Montserrat",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase;color:#0e9e8a;
}
.fm-page-contacto .fm-cbox p{margin:0;font-size:15.5px;color:#333;line-height:1.55;}
.fm-page-contacto .fm-cbox a{color:#12a58c;text-decoration:none;font-weight:500;word-break:break-word;}
.fm-page-contacto .fm-cbox a:hover{text-decoration:underline;}

.fm-page-contacto .fm-contact-social{margin:32px 0 0;font-size:16px;color:#333;}
.fm-page-contacto .fm-contact-social i{color:#1abc9c;margin-right:7px;}
.fm-page-contacto .fm-contact-social a{color:#12a58c;text-decoration:none;font-weight:500;}
.fm-page-contacto .fm-contact-social a:hover{text-decoration:underline;}

/* Map: constrained + centered. The OpenStreetMap export embed only fills the
   iframe up to ~620px wide (beyond that it renders the map area and letterboxes
   the rest with white), so cap the width to keep the tiles edge-to-edge. */
.fm-page-contacto .fm-map{margin:40px auto 0;max-width:600px;}
.fm-page-contacto .fm-map iframe{
  display:block;width:100%!important;height:400px;border:0;border-radius:5px;
  box-shadow:0 12px 32px rgba(0,0,0,.09);
}
.fm-page-contacto .fm-map-cap{
  margin:16px auto 0;max-width:640px;font-size:14.5px;color:#777;line-height:1.6;
}

@media(max-width:768px){
  .fm-page-contacto .fm-map iframe{height:300px;}
  .fm-page-contacto .fm-contact-grid{margin-top:28px;}
}