{"id":7460,"date":"2026-06-22T15:43:41","date_gmt":"2026-06-22T20:43:41","guid":{"rendered":"https:\/\/new-web.hospitalsantamonica.gov.co\/?page_id=7460"},"modified":"2026-06-22T15:56:09","modified_gmt":"2026-06-22T20:56:09","slug":"portafolio-de-servicios-2","status":"publish","type":"page","link":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/portafolio-de-servicios-2\/","title":{"rendered":"Portafolio de Servicios"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7460\" class=\"elementor elementor-7460\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e96463 e-grid e-con-boxed e-con e-parent\" data-id=\"6e96463\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a33ddb elementor-widget elementor-widget-html\" data-id=\"1a33ddb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CONTENEDOR DE LA TARJETA GIRATORIA -->\r\n<div class=\"hsm-flip-card\">\r\n  <div class=\"flip-card-inner\">\r\n    \r\n    <!-- CARA FRONTAL (Basada en la est\u00e9tica de image_a8f593.jpg) -->\r\n    <div class=\"flip-card-front\" style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('http:\/\/new-web.hospitalsantamonica.gov.co\/wp-content\/uploads\/2026\/06\/fondo-medico.jpg');\">\r\n      <div class=\"front-content\">\r\n        <h3>Consulta y Atenci\u00f3n Especializada<\/h3>\r\n        <!-- Indicador UX para m\u00f3viles\/escritorio -->\r\n        <span class=\"hint-badge\"><i class=\"fas fa-sync-alt\"><\/i> Voltear para ver m\u00e1s<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- CARA POSTERIOR (Experiencia de Usuario Informativa) -->\r\n    <div class=\"flip-card-back\">\r\n      <div class=\"back-content\">\r\n        <div class=\"back-icon\">\r\n          <i class=\"fas fa-user-md\"><\/i>\r\n        <\/div>\r\n        <h4>Nuestras Especialidades<\/h4>\r\n        <p>Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano.<\/p>\r\n        \r\n        <!-- Bot\u00f3n de acci\u00f3n claro -->\r\n        <a href=\"#\" class=\"back-action-btn\">\r\n          <span>Agendar Cita<\/span> <i class=\"fas fa-arrow-right\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ESTILOS CSS REUTILIZABLES -->\r\n<style>\r\n\/* Contenedor principal con perspectiva 3D *\/\r\n.hsm-flip-card {\r\n  background-color: transparent;\r\n  width: 100%;\r\n  max-width: 380px; \/* Se adapta perfectamente al grid de tu web *\/\r\n  height: 280px;\r\n  perspective: 1000px;\r\n  font-family: 'Poppins', sans-serif;\r\n  margin: 15px auto;\r\n}\r\n\r\n\/* Contenedor interno que ejecuta el giro *\/\r\n.flip-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  transform-style: preserve-3d;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* Efecto Hover (Giro) *\/\r\n.hsm-flip-card:hover .flip-card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n\/* Propiedades comunes de ambas caras *\/\r\n.flip-card-front, .flip-card-back {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* --- ESTILOS CARA FRONTAL --- *\/\r\n.flip-card-front {\r\n  background-size: cover;\r\n  background-position: center;\r\n  color: white;\r\n}\r\n\r\n.front-content h3 {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\r\n  margin: 0 0 15px 0;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* Peque\u00f1a etiqueta que mejora la UX avisando que es interactiva *\/\r\n.hint-badge {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  backdrop-filter: blur(4px);\r\n  padding: 6px 12px;\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255, 255, 255, 0.4);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n\/* --- ESTILOS CARA POSTERIOR --- *\/\r\n.flip-card-back {\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Colores corporativos del hospital *\/\r\n  color: white;\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.back-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.back-icon {\r\n  font-size: 2.2rem;\r\n  margin-bottom: 10px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.back-content h4 {\r\n  font-size: 1.2rem;\r\n  margin: 0 0 8px 0;\r\n  font-weight: 600;\r\n}\r\n\r\n.back-content p {\r\n  font-size: 0.88rem;\r\n  line-height: 1.4;\r\n  margin: 0 0 20px 0;\r\n  opacity: 0.95;\r\n}\r\n\r\n\/* Bot\u00f3n interactivo llamativo *\/\r\n.back-action-btn {\r\n  background-color: #ffffff;\r\n  color: #007bff;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n}\r\n\r\n.back-action-btn:hover {\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0,0,0,0.2);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b15ae32 elementor-widget elementor-widget-html\" data-id=\"b15ae32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CONTENEDOR DE LA TARJETA GIRATORIA -->\r\n<div class=\"hsm-flip-card\">\r\n  <div class=\"flip-card-inner\">\r\n    \r\n    <!-- CARA FRONTAL (Basada en la est\u00e9tica de image_a8f593.jpg) -->\r\n    <div class=\"flip-card-front\" style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('http:\/\/new-web.hospitalsantamonica.gov.co\/wp-content\/uploads\/2026\/06\/fondo-medico.jpg');\">\r\n      <div class=\"front-content\">\r\n        <h3>Consulta y Atenci\u00f3n Especializada<\/h3>\r\n        <!-- Indicador UX para m\u00f3viles\/escritorio -->\r\n        <span class=\"hint-badge\"><i class=\"fas fa-sync-alt\"><\/i> Voltear para ver m\u00e1s<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- CARA POSTERIOR (Experiencia de Usuario Informativa) -->\r\n    <div class=\"flip-card-back\">\r\n      <div class=\"back-content\">\r\n        <div class=\"back-icon\">\r\n          <i class=\"fas fa-user-md\"><\/i>\r\n        <\/div>\r\n        <h4>Nuestras Especialidades<\/h4>\r\n        <p>Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano.<\/p>\r\n        \r\n        <!-- Bot\u00f3n de acci\u00f3n claro -->\r\n        <a href=\"#\" class=\"back-action-btn\">\r\n          <span>Agendar Cita<\/span> <i class=\"fas fa-arrow-right\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ESTILOS CSS REUTILIZABLES -->\r\n<style>\r\n\/* Contenedor principal con perspectiva 3D *\/\r\n.hsm-flip-card {\r\n  background-color: transparent;\r\n  width: 100%;\r\n  max-width: 380px; \/* Se adapta perfectamente al grid de tu web *\/\r\n  height: 280px;\r\n  perspective: 1000px;\r\n  font-family: 'Poppins', sans-serif;\r\n  margin: 15px auto;\r\n}\r\n\r\n\/* Contenedor interno que ejecuta el giro *\/\r\n.flip-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  transform-style: preserve-3d;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* Efecto Hover (Giro) *\/\r\n.hsm-flip-card:hover .flip-card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n\/* Propiedades comunes de ambas caras *\/\r\n.flip-card-front, .flip-card-back {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* --- ESTILOS CARA FRONTAL --- *\/\r\n.flip-card-front {\r\n  background-size: cover;\r\n  background-position: center;\r\n  color: white;\r\n}\r\n\r\n.front-content h3 {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\r\n  margin: 0 0 15px 0;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* Peque\u00f1a etiqueta que mejora la UX avisando que es interactiva *\/\r\n.hint-badge {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  backdrop-filter: blur(4px);\r\n  padding: 6px 12px;\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255, 255, 255, 0.4);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n\/* --- ESTILOS CARA POSTERIOR --- *\/\r\n.flip-card-back {\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Colores corporativos del hospital *\/\r\n  color: white;\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.back-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.back-icon {\r\n  font-size: 2.2rem;\r\n  margin-bottom: 10px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.back-content h4 {\r\n  font-size: 1.2rem;\r\n  margin: 0 0 8px 0;\r\n  font-weight: 600;\r\n}\r\n\r\n.back-content p {\r\n  font-size: 0.88rem;\r\n  line-height: 1.4;\r\n  margin: 0 0 20px 0;\r\n  opacity: 0.95;\r\n}\r\n\r\n\/* Bot\u00f3n interactivo llamativo *\/\r\n.back-action-btn {\r\n  background-color: #ffffff;\r\n  color: #007bff;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n}\r\n\r\n.back-action-btn:hover {\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0,0,0,0.2);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ae1da3 elementor-widget elementor-widget-html\" data-id=\"1ae1da3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CONTENEDOR DE LA TARJETA GIRATORIA -->\r\n<div class=\"hsm-flip-card\">\r\n  <div class=\"flip-card-inner\">\r\n    \r\n    <!-- CARA FRONTAL (Basada en la est\u00e9tica de image_a8f593.jpg) -->\r\n    <div class=\"flip-card-front\" style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('http:\/\/new-web.hospitalsantamonica.gov.co\/wp-content\/uploads\/2026\/06\/fondo-medico.jpg');\">\r\n      <div class=\"front-content\">\r\n        <h3>Consulta y Atenci\u00f3n Especializada<\/h3>\r\n        <!-- Indicador UX para m\u00f3viles\/escritorio -->\r\n        <span class=\"hint-badge\"><i class=\"fas fa-sync-alt\"><\/i> Voltear para ver m\u00e1s<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- CARA POSTERIOR (Experiencia de Usuario Informativa) -->\r\n    <div class=\"flip-card-back\">\r\n      <div class=\"back-content\">\r\n        <div class=\"back-icon\">\r\n          <i class=\"fas fa-user-md\"><\/i>\r\n        <\/div>\r\n        <h4>Nuestras Especialidades<\/h4>\r\n        <p>Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano.<\/p>\r\n        \r\n        <!-- Bot\u00f3n de acci\u00f3n claro -->\r\n        <a href=\"#\" class=\"back-action-btn\">\r\n          <span>Agendar Cita<\/span> <i class=\"fas fa-arrow-right\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ESTILOS CSS REUTILIZABLES -->\r\n<style>\r\n\/* Contenedor principal con perspectiva 3D *\/\r\n.hsm-flip-card {\r\n  background-color: transparent;\r\n  width: 100%;\r\n  max-width: 380px; \/* Se adapta perfectamente al grid de tu web *\/\r\n  height: 280px;\r\n  perspective: 1000px;\r\n  font-family: 'Poppins', sans-serif;\r\n  margin: 15px auto;\r\n}\r\n\r\n\/* Contenedor interno que ejecuta el giro *\/\r\n.flip-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  transform-style: preserve-3d;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* Efecto Hover (Giro) *\/\r\n.hsm-flip-card:hover .flip-card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n\/* Propiedades comunes de ambas caras *\/\r\n.flip-card-front, .flip-card-back {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* --- ESTILOS CARA FRONTAL --- *\/\r\n.flip-card-front {\r\n  background-size: cover;\r\n  background-position: center;\r\n  color: white;\r\n}\r\n\r\n.front-content h3 {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\r\n  margin: 0 0 15px 0;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* Peque\u00f1a etiqueta que mejora la UX avisando que es interactiva *\/\r\n.hint-badge {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  backdrop-filter: blur(4px);\r\n  padding: 6px 12px;\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255, 255, 255, 0.4);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n\/* --- ESTILOS CARA POSTERIOR --- *\/\r\n.flip-card-back {\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Colores corporativos del hospital *\/\r\n  color: white;\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.back-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.back-icon {\r\n  font-size: 2.2rem;\r\n  margin-bottom: 10px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.back-content h4 {\r\n  font-size: 1.2rem;\r\n  margin: 0 0 8px 0;\r\n  font-weight: 600;\r\n}\r\n\r\n.back-content p {\r\n  font-size: 0.88rem;\r\n  line-height: 1.4;\r\n  margin: 0 0 20px 0;\r\n  opacity: 0.95;\r\n}\r\n\r\n\/* Bot\u00f3n interactivo llamativo *\/\r\n.back-action-btn {\r\n  background-color: #ffffff;\r\n  color: #007bff;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n}\r\n\r\n.back-action-btn:hover {\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0,0,0,0.2);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cafc49f elementor-widget elementor-widget-html\" data-id=\"cafc49f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CONTENEDOR DE LA TARJETA GIRATORIA -->\r\n<div class=\"hsm-flip-card\">\r\n  <div class=\"flip-card-inner\">\r\n    \r\n    <!-- CARA FRONTAL (Basada en la est\u00e9tica de image_a8f593.jpg) -->\r\n    <div class=\"flip-card-front\" style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('http:\/\/new-web.hospitalsantamonica.gov.co\/wp-content\/uploads\/2026\/06\/fondo-medico.jpg');\">\r\n      <div class=\"front-content\">\r\n        <h3>Consulta y Atenci\u00f3n Especializada<\/h3>\r\n        <!-- Indicador UX para m\u00f3viles\/escritorio -->\r\n        <span class=\"hint-badge\"><i class=\"fas fa-sync-alt\"><\/i> Voltear para ver m\u00e1s<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- CARA POSTERIOR (Experiencia de Usuario Informativa) -->\r\n    <div class=\"flip-card-back\">\r\n      <div class=\"back-content\">\r\n        <div class=\"back-icon\">\r\n          <i class=\"fas fa-user-md\"><\/i>\r\n        <\/div>\r\n        <h4>Nuestras Especialidades<\/h4>\r\n        <p>Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano.<\/p>\r\n        \r\n        <!-- Bot\u00f3n de acci\u00f3n claro -->\r\n        <a href=\"#\" class=\"back-action-btn\">\r\n          <span>Agendar Cita<\/span> <i class=\"fas fa-arrow-right\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ESTILOS CSS REUTILIZABLES -->\r\n<style>\r\n\/* Contenedor principal con perspectiva 3D *\/\r\n.hsm-flip-card {\r\n  background-color: transparent;\r\n  width: 100%;\r\n  max-width: 380px; \/* Se adapta perfectamente al grid de tu web *\/\r\n  height: 280px;\r\n  perspective: 1000px;\r\n  font-family: 'Poppins', sans-serif;\r\n  margin: 15px auto;\r\n}\r\n\r\n\/* Contenedor interno que ejecuta el giro *\/\r\n.flip-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  transform-style: preserve-3d;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* Efecto Hover (Giro) *\/\r\n.hsm-flip-card:hover .flip-card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n\/* Propiedades comunes de ambas caras *\/\r\n.flip-card-front, .flip-card-back {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* --- ESTILOS CARA FRONTAL --- *\/\r\n.flip-card-front {\r\n  background-size: cover;\r\n  background-position: center;\r\n  color: white;\r\n}\r\n\r\n.front-content h3 {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\r\n  margin: 0 0 15px 0;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* Peque\u00f1a etiqueta que mejora la UX avisando que es interactiva *\/\r\n.hint-badge {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  backdrop-filter: blur(4px);\r\n  padding: 6px 12px;\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255, 255, 255, 0.4);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n\/* --- ESTILOS CARA POSTERIOR --- *\/\r\n.flip-card-back {\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Colores corporativos del hospital *\/\r\n  color: white;\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.back-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.back-icon {\r\n  font-size: 2.2rem;\r\n  margin-bottom: 10px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.back-content h4 {\r\n  font-size: 1.2rem;\r\n  margin: 0 0 8px 0;\r\n  font-weight: 600;\r\n}\r\n\r\n.back-content p {\r\n  font-size: 0.88rem;\r\n  line-height: 1.4;\r\n  margin: 0 0 20px 0;\r\n  opacity: 0.95;\r\n}\r\n\r\n\/* Bot\u00f3n interactivo llamativo *\/\r\n.back-action-btn {\r\n  background-color: #ffffff;\r\n  color: #007bff;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n}\r\n\r\n.back-action-btn:hover {\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0,0,0,0.2);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74e68e6 elementor-widget elementor-widget-html\" data-id=\"74e68e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CONTENEDOR DE LA TARJETA GIRATORIA -->\r\n<div class=\"hsm-flip-card\">\r\n  <div class=\"flip-card-inner\">\r\n    \r\n    <!-- CARA FRONTAL (Basada en la est\u00e9tica de image_a8f593.jpg) -->\r\n    <div class=\"flip-card-front\" style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('http:\/\/new-web.hospitalsantamonica.gov.co\/wp-content\/uploads\/2026\/06\/fondo-medico.jpg');\">\r\n      <div class=\"front-content\">\r\n        <h3>Consulta y Atenci\u00f3n Especializada<\/h3>\r\n        <!-- Indicador UX para m\u00f3viles\/escritorio -->\r\n        <span class=\"hint-badge\"><i class=\"fas fa-sync-alt\"><\/i> Voltear para ver m\u00e1s<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- CARA POSTERIOR (Experiencia de Usuario Informativa) -->\r\n    <div class=\"flip-card-back\">\r\n      <div class=\"back-content\">\r\n        <div class=\"back-icon\">\r\n          <i class=\"fas fa-user-md\"><\/i>\r\n        <\/div>\r\n        <h4>Nuestras Especialidades<\/h4>\r\n        <p>Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano.<\/p>\r\n        \r\n        <!-- Bot\u00f3n de acci\u00f3n claro -->\r\n        <a href=\"#\" class=\"back-action-btn\">\r\n          <span>Agendar Cita<\/span> <i class=\"fas fa-arrow-right\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ESTILOS CSS REUTILIZABLES -->\r\n<style>\r\n\/* Contenedor principal con perspectiva 3D *\/\r\n.hsm-flip-card {\r\n  background-color: transparent;\r\n  width: 100%;\r\n  max-width: 380px; \/* Se adapta perfectamente al grid de tu web *\/\r\n  height: 280px;\r\n  perspective: 1000px;\r\n  font-family: 'Poppins', sans-serif;\r\n  margin: 15px auto;\r\n}\r\n\r\n\/* Contenedor interno que ejecuta el giro *\/\r\n.flip-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  transform-style: preserve-3d;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* Efecto Hover (Giro) *\/\r\n.hsm-flip-card:hover .flip-card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n\/* Propiedades comunes de ambas caras *\/\r\n.flip-card-front, .flip-card-back {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* --- ESTILOS CARA FRONTAL --- *\/\r\n.flip-card-front {\r\n  background-size: cover;\r\n  background-position: center;\r\n  color: white;\r\n}\r\n\r\n.front-content h3 {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\r\n  margin: 0 0 15px 0;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* Peque\u00f1a etiqueta que mejora la UX avisando que es interactiva *\/\r\n.hint-badge {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  backdrop-filter: blur(4px);\r\n  padding: 6px 12px;\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255, 255, 255, 0.4);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n\/* --- ESTILOS CARA POSTERIOR --- *\/\r\n.flip-card-back {\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Colores corporativos del hospital *\/\r\n  color: white;\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.back-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.back-icon {\r\n  font-size: 2.2rem;\r\n  margin-bottom: 10px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.back-content h4 {\r\n  font-size: 1.2rem;\r\n  margin: 0 0 8px 0;\r\n  font-weight: 600;\r\n}\r\n\r\n.back-content p {\r\n  font-size: 0.88rem;\r\n  line-height: 1.4;\r\n  margin: 0 0 20px 0;\r\n  opacity: 0.95;\r\n}\r\n\r\n\/* Bot\u00f3n interactivo llamativo *\/\r\n.back-action-btn {\r\n  background-color: #ffffff;\r\n  color: #007bff;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n}\r\n\r\n.back-action-btn:hover {\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0,0,0,0.2);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc1a0a0 elementor-widget elementor-widget-html\" data-id=\"bc1a0a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CONTENEDOR DE LA TARJETA GIRATORIA -->\r\n<div class=\"hsm-flip-card\">\r\n  <div class=\"flip-card-inner\">\r\n    \r\n    <!-- CARA FRONTAL (Basada en la est\u00e9tica de image_a8f593.jpg) -->\r\n    <div class=\"flip-card-front\" style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('http:\/\/new-web.hospitalsantamonica.gov.co\/wp-content\/uploads\/2026\/06\/fondo-medico.jpg');\">\r\n      <div class=\"front-content\">\r\n        <h3>Consulta y Atenci\u00f3n Especializada<\/h3>\r\n        <!-- Indicador UX para m\u00f3viles\/escritorio -->\r\n        <span class=\"hint-badge\"><i class=\"fas fa-sync-alt\"><\/i> Voltear para ver m\u00e1s<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- CARA POSTERIOR (Experiencia de Usuario Informativa) -->\r\n    <div class=\"flip-card-back\">\r\n      <div class=\"back-content\">\r\n        <div class=\"back-icon\">\r\n          <i class=\"fas fa-user-md\"><\/i>\r\n        <\/div>\r\n        <h4>Nuestras Especialidades<\/h4>\r\n        <p>Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano.<\/p>\r\n        \r\n        <!-- Bot\u00f3n de acci\u00f3n claro -->\r\n        <a href=\"#\" class=\"back-action-btn\">\r\n          <span>Agendar Cita<\/span> <i class=\"fas fa-arrow-right\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ESTILOS CSS REUTILIZABLES -->\r\n<style>\r\n\/* Contenedor principal con perspectiva 3D *\/\r\n.hsm-flip-card {\r\n  background-color: transparent;\r\n  width: 100%;\r\n  max-width: 380px; \/* Se adapta perfectamente al grid de tu web *\/\r\n  height: 280px;\r\n  perspective: 1000px;\r\n  font-family: 'Poppins', sans-serif;\r\n  margin: 15px auto;\r\n}\r\n\r\n\/* Contenedor interno que ejecuta el giro *\/\r\n.flip-card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  transform-style: preserve-3d;\r\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* Efecto Hover (Giro) *\/\r\n.hsm-flip-card:hover .flip-card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n\/* Propiedades comunes de ambas caras *\/\r\n.flip-card-front, .flip-card-back {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* --- ESTILOS CARA FRONTAL --- *\/\r\n.flip-card-front {\r\n  background-size: cover;\r\n  background-position: center;\r\n  color: white;\r\n}\r\n\r\n.front-content h3 {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\r\n  margin: 0 0 15px 0;\r\n  line-height: 1.3;\r\n}\r\n\r\n\/* Peque\u00f1a etiqueta que mejora la UX avisando que es interactiva *\/\r\n.hint-badge {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  backdrop-filter: blur(4px);\r\n  padding: 6px 12px;\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255, 255, 255, 0.4);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n\/* --- ESTILOS CARA POSTERIOR --- *\/\r\n.flip-card-back {\r\n  background: linear-gradient(135deg, #007bff, #0056b3); \/* Colores corporativos del hospital *\/\r\n  color: white;\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.back-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.back-icon {\r\n  font-size: 2.2rem;\r\n  margin-bottom: 10px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.back-content h4 {\r\n  font-size: 1.2rem;\r\n  margin: 0 0 8px 0;\r\n  font-weight: 600;\r\n}\r\n\r\n.back-content p {\r\n  font-size: 0.88rem;\r\n  line-height: 1.4;\r\n  margin: 0 0 20px 0;\r\n  opacity: 0.95;\r\n}\r\n\r\n\/* Bot\u00f3n interactivo llamativo *\/\r\n.back-action-btn {\r\n  background-color: #ffffff;\r\n  color: #007bff;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 0.9rem;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n}\r\n\r\n.back-action-btn:hover {\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 15px rgba(0,0,0,0.2);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Consulta y Atenci\u00f3n Especializada Voltear para ver m\u00e1s Nuestras Especialidades Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico oportuno y humano. Agendar Cita Consulta y Atenci\u00f3n Especializada Voltear para ver m\u00e1s Nuestras Especialidades Contamos con profesionales altamente calificados en pediatr\u00eda, ginecolog\u00eda, medicina interna y m\u00e1s, brind\u00e1ndole un diagn\u00f3stico [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7460","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/pages\/7460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/comments?post=7460"}],"version-history":[{"count":4,"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/pages\/7460\/revisions"}],"predecessor-version":[{"id":7465,"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/pages\/7460\/revisions\/7465"}],"wp:attachment":[{"href":"https:\/\/new-web.hospitalsantamonica.gov.co\/index.php\/wp-json\/wp\/v2\/media?parent=7460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}